/*
 * Chasis del mockup de movil de la landing (WEB-F1) y las primitivas de pantalla que usan U2/U3
 * dentro de el. Se usa como layout de partial: `render layout: "web/movil", locals: { ancho: 300,
 * escena: "cielo" }`. Mismo aviso que `base.css`: Propshaft mete este fichero tambien en la app,
 * asi que todo selector va con el prefijo `.web-` (nunca `:root`/`html`/`body`/`*` a pelo).
 */

/* ---------- Chasis ---------- */
/* UNA sola receta para todos los telefonos de la web, sin barra de estado (24-sep-2026): radio 40,
   que con el 46 de antes se comia las esquinas de la captura, y sombra dura de 3px, que con 6 el
   telefono parecia despegado. Se fue con ello el `--postal`, que solo existia para esa diferencia:
   el telefono de las postales y el suelto ya son el mismo aparato. */
.web-movil{
  display: flex; flex-direction: column; flex-shrink: 0;
  border: var(--contorno) solid var(--tinta); border-radius: 40px;
  box-shadow: 0 3px 0 var(--som-fuerte);
  background: var(--fondo); overflow: hidden;
}

.web-movil-pantalla{
  flex-grow: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 20px;
}
.web-movil-pantalla--cielo{ background: var(--cielo); }
.web-movil-pantalla--crema{ background: var(--crema2); }
.web-movil-pantalla--blanco{ background: var(--fondo); }
.web-movil-pantalla--lavanda{ background: var(--lavanda-cl); }

/* Con una captura real dentro (`WebHelper#captura_de_mini_app`) la imagen ocupa la pantalla
   entera: sin padding, sin hueco y sin alto fijo -- la proporcion la fija el par width/height del
   `<img>` (390x844) y el chasis crece con ella. El `border-radius` del chasis recorta las
   esquinas de la imagen porque `.web-movil` lleva `overflow:hidden`. */
.web-movil-pantalla--captura{ padding: 0; gap: 0; }
.web-movil-captura{ display: block; width: 100%; height: auto; }

/* ---------- Primitivas de pantalla (para U2/U3) ---------- */
.web-app-marca{ display: flex; flex-direction: column; gap: 3px; }
.web-app-marca-nombre{ font-size: 15px; font-weight: 900; letter-spacing: -.018em; }
.web-app-marca-eslogan{ font-size: 10.5px; font-weight: 700; color: var(--tinta2); }

.web-app-pest{
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border: var(--contorno) solid var(--tinta); border-radius: 999px; background: var(--fondo);
  font-size: 9.5px; font-weight: 800; white-space: nowrap;
}
.web-app-pest--activa{ background: var(--tinta); color: var(--fondo); }

.web-app-fila{
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: var(--contorno) solid var(--tinta); border-radius: 18px; box-shadow: 0 2px 0 var(--som);
  background: var(--fondo);
}

.web-app-cta{
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 20px; background: var(--menta-cl);
  border: var(--contorno) solid var(--tinta); border-radius: 16px;
  box-shadow: 0 3px 0 var(--menta); font-size: 13px; font-weight: 800; color: var(--tinta);
}

.web-app-hoja{
  margin-top: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px 20px; background: var(--fondo);
  border-top: var(--contorno) solid var(--tinta); border-radius: 34px 34px 0 0;
  box-shadow: 0 -3.5px 0 rgba(75,75,75,.13);
}

.web-app-dock{
  margin-top: auto; display: flex; align-items: center; justify-content: space-around;
  padding: 10px 8px; border-top: var(--contorno) solid var(--tinta);
}
.web-app-dock svg{ width: 28px; height: 28px; }