/*
 * dotoo — landing de marketing (WEB-F1, `tasks/website/README.md`).
 *
 * Propshaft mete TODO el CSS de `app/assets/stylesheets/` en el `stylesheet_link_tag :app` de la
 * app (ver `tasks/website/WEB-F1-landing.md`), asi que este fichero se carga TAMBIEN en la app
 * aunque su layout no lo enlace por nombre. Por eso NINGUN selector va sin
 * ancestro `.web` (ni `:root`, ni `html`, ni `body`, ni `*` a pelo) o sin el prefijo `.web-` en su
 * nombre de clase: un `body{...}` aqui pisaria la app entera. Los valores son los que ya fija
 * `tasks/website/WEB-F1-landing.md` ("Recetas de base.css"), copiados de
 * `app/assets/stylesheets/application.css` -- no se inventa ningun color ni sombra nuevos.
 *
 * OJO al escribir un glob de shell dentro de un comentario de CSS: la secuencia asterisco-asterisco
 * -barra de `app/assets/**` + `/*.css` lleva un `*` y una `/` seguidos, o sea el CIERRE del
 * comentario. Hasta el 28-ago-2026 esa linea estaba aqui arriba y partia el comentario por la
 * mitad: el parser tomaba el resto de la prosa como selector, se comia el bloque `.web{...}`
 * entero y la landing salia SIN NI UN token -- sin fuente, sin colores, sin bordes ni sombras,
 * pero con la maqueta en pie, que es lo que hace que no se vea a simple vista.
 */

/* ---------- 1. Tokens (redeclarados, nunca en :root) ---------- */
.web{
  --tinta:#4B4B4B; --tinta2:#636363; --tinta3:#727272;
  --peso-titulo:900; --peso-fuerte:800;
  --contorno:0.5px; --contorno-fino:0.5px;
  --som:#D6D6D6; --som-fuerte:#C4C4C4;
  /* Sombras por rol, las mismas alturas que `application.css` (21-sep-2026): la CTA de la portada
     y la de la app son el mismo boton, y si una bajara de 2px a 1,5 se notaria al aterrizar. */
  --sombra-rotulo:1.25px;
  --sombra-accion-primaria:2px; --sombra-accion-primaria-activa:1px;
  --hundimiento-accion-primaria:1px;
  --fondo:#FFFFFF; --pista:#ECECEC; --crema:#FFFFFF; --crema2:#FFF1DF; --cielo:#DCEEFF;
  /* El cielo de dia de la app (§ 51 de `application.css`): el fondo del hero, para que la
     primera pantalla de la portada y la raiz de la app compartan luz. */
  --cielo-dia:linear-gradient(178deg,#C7ECFF 0%,#D3E9FF 55%,#DEE6FF 100%);
  --menta:#16C16A; --menta-s:#0E9B52; --menta-d:#0A7A42; --menta-cl:#CDF2DE;
  --menta-suave:#3F9F73; --menta-suave-s:#2F7D5A;
  --lavanda:#D3C1FA; --lavanda-s:#AE93EA; --lavanda-d:#6D4BC4; --lavanda-cl:#F0E9FF;
  /* El trazo del borde animado de la puerta de retos tematicos. Lo lee `tarjeta.css`, que la
     portada enlaza para pintar las puertas con la tarjeta real de la app. */
  --circuito:#8E7BF2; --circuito-2:#6FA8FF; --circuito-luz:#EDE7FF;
  --coral:#FFBDAF; --coral-s:#F79484; --coral-cl:#FFE7E1;
  --vainilla:#FFE49C; --vainilla-s:#F5C65C; --vainilla-cl:#FFF6DC;
  --chicle:#FFB3D2; --chicle-s:#F587B5;
  --melocoton:#FFC9A3; --melocoton-s:#F2A574;
  --coral-d:#B8472E; --vainilla-d:#8A6206; --chicle-d:#B02A6B; --melocoton-d:#9B5220;
  /* Copiado de `application.css:47`: Geist autoalojada manda, y la landing la recibe porque
     `layouts/web` enlaza `fuentes.css` junto a estas hojas. */
  --f: Geist,"Varela Round",system-ui,"Trebuchet MS",sans-serif;

  font-family: var(--f);
  color: var(--tinta);
  background: var(--fondo);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 2. Reset escopado ---------- */
.web *,.web *::before,.web *::after{ box-sizing: border-box; }

.web a{ color: var(--tinta); text-decoration: none; }
.web a:hover{ color: var(--menta-d); }

/* ---------- 3. Tipografia ---------- */
.web h1{
  margin: 0; font-family: var(--f); font-weight: var(--peso-titulo);
  font-size: 48px; line-height: 1.05; letter-spacing: -.02em;
}
.web h2{
  margin: 0; font-family: var(--f); font-weight: var(--peso-fuerte);
  font-size: 32px; line-height: 1.08; letter-spacing: -.02em;
}
.web p{
  margin: 0; font-size: 18px; line-height: 1.55; font-weight: 700; color: var(--tinta2);
}

/* Cinta girada (26-sep-2026, ampliada a todos los titulares el mismo día): fondo recto rotado
   detrás de la palabra destacada de un h1/h2. `--cinta` por defecto blanca (fondo de color: hero,
   cierre, `.web-momo`, `.web-agentes-control`); las secciones sobre `--fondo` blanco la redefinen
   a `var(--cielo)` en su propio selector para que se note contra el papel. `nowrap` porque el
   fondo no se parte si la palabra salta de línea. */
.web-cinta{ position: relative; display: inline-block; z-index: 0; white-space: nowrap; }
.web-cinta::before{ content: ""; position: absolute; z-index: -1; inset: .06em -.14em .02em;
  background: var(--cinta, #FFFFFF); transform: rotate(-2.2deg); }

@media (max-width: 900px){
  .web h1{ font-size: 34px; }
}

/* ---------- 4. Contenedor ---------- */
.web-cont{ max-width: 1160px; margin: 0 auto; padding: 0 40px; }

@media (max-width: 900px){
  .web-cont{ padding: 0 20px; }
}

/* ---------- 5. Nav ---------- */
/* Sticky para que quede fija al hacer scroll (Guillem, 1-sep-2026). Fondo blanco, igual que el
   contenido: ya no separa por color de superficie, asi que el borde queda a cargo de la sombra
   -- el mismo offset de 2px que ya usan `.web-tarjeta` y el menu movil (`.web-nav-menu ul` mas
   abajo), no cromo nuevo. `z-index` por encima de cualquier cosa del resto de la landing (el techo
   previo en este fichero era 10, del propio menu movil) para que nunca quede tapada por contenido
   al scrollear. Alto 96px = 24px de aire + los 48px del `.web-cta`. */
.web-nav{
  position: sticky; top: 0; z-index: 40;
  min-height: 96px; display: flex; align-items: center;
  background: var(--fondo); box-shadow: 0 2px 0 var(--som);
}
.web-nav-fila{ display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 24px; }
.web-marca{ font-size: 26px; font-weight: var(--peso-titulo); letter-spacing: -.02em; flex-shrink: 0; }
.web .web-marca:hover{ color: var(--tinta); }
.web-marca-logo{ display: block; width: 52px; height: 52px; border-radius: 22.37%; }

/* Las pestañas van DOS veces en el HTML (`web/_pestanas.html.erb`): la fila `.web-nav-lista` para
   escritorio y el `<details class="web-nav-menu">` para movil. No se puede reestilar un solo
   `<details>`: Chrome no pinta el contenido de un `<details>` CERRADO por mucho `display:flex` que
   lleve, asi que en escritorio el `<ul>` medía 0x34 y no habia pestañas. Cada uno se oculta ENTERO
   (el `<details>`, no solo su `summary`) en el breakpoint del otro. */
.web-nav-lista,.web-nav-menu ul{
  display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0;
  font-size: 14px; font-weight: 800;
}
.web-nav-menu{ display: none; }
.web-nav-lista a,.web-nav-menu a{
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 14px; white-space: nowrap;
}
.web-nav-lista a:hover,.web-nav-menu a:hover{
  color: var(--tinta); background: var(--fondo); border-color: transparent;
}

/* El boton al App Store, con el `<details>` del menu movil dentro del mismo grupo para que en
   <=900px queden los dos pegados a la derecha en vez de repartidos por el `space-between`. */
.web-nav-acciones{ display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.web-nav-lista a[aria-current="page"],.web-nav-menu a[aria-current="page"]{
  background: var(--fondo); border: 0; padding: 10px 14px;
}

@media (max-width: 900px){
  .web-nav{ min-height: 72px; }
  .web-nav-fila{ gap: 10px; }
  .web-marca{ font-size: 22px; }
  .web-marca-logo{ width: 44px; height: 44px; }
  .web-nav-lista{ display: none; }
  /* Marca + boton + menu tienen que caber en los 350px utiles de un movil de 390, y a la medida de
     escritorio (48px de alto, 22 de padding, 13px de texto) no caben. Con 40/11/12 sobra sitio en
     los dos idiomas. */
  .web-nav-acciones{ gap: 7px; }
  .web-nav-acciones .web-cta,.web-nav-menu summary{ height: 40px; padding: 0 11px; font-size: 12px; }
  .web-nav-menu{ display: block; position: relative; }
  .web-nav-menu summary{
    display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
    border: var(--contorno) solid var(--tinta); border-radius: 20px;
    font-size: 13px; font-weight: 800; cursor: pointer; list-style: none;
  }
  .web-nav-menu summary::-webkit-details-marker{ display: none; }
  .web-nav-menu summary::marker{ content: ""; }
  .web-nav-menu ul{
    position: absolute; top: 52px; right: 0; z-index: 10; min-width: 200px;
    flex-direction: column; align-items: flex-start; gap: 16px;
    background: var(--fondo); border: var(--contorno) solid var(--tinta); border-radius: 16px;
    box-shadow: 0 2px 0 var(--som); padding: 18px 20px;
  }
}

/* ---------- 6. Recetas compartidas ---------- */
/* LOS DOS BOTONES SON LOS DE LA APP (24-sep-2026). `.web-cta` es la receta de `.cta` de
   `application.css` (48 de alto, radio 20, menta claro con la sombra de rol en menta) y `.web-cta2`
   la de `.cta-2` (blanco con sombra gris). Hasta hoy la portada tenia un boton propio de 64px y
   radio 24 que no existia dentro: quien pulsaba «Empezar» aterrizaba en otro boton. Lo unico que
   cambia frente a la app es el ancho: alli ocupan la columna del movil, aqui abrazan su texto. */
.web-cta,.web-cta2{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border: var(--contorno) solid var(--tinta); border-radius: 20px;
  font-family: var(--f); font-size: 13px; font-weight: var(--peso-fuerte); letter-spacing: .03em;
  color: var(--tinta); white-space: nowrap;
}
.web-cta{
  background: var(--menta-cl);
  box-shadow: 0 var(--sombra-accion-primaria) 0 var(--menta), inset 0 1.5px 0 rgba(255,255,255,.5);
}
.web-cta:active{
  transform: translateY(var(--hundimiento-accion-primaria));
  box-shadow: 0 var(--sombra-accion-primaria-activa) 0 var(--menta), inset 0 1.5px 0 rgba(255,255,255,.5);
}
.web-cta2{ background: var(--fondo); box-shadow: 0 2px 0 var(--som); }
.web-cta2:active{ transform: translateY(1px); box-shadow: 0 1px 0 var(--som); }
.web .web-cta:hover,.web .web-cta2:hover{ color: var(--tinta); }

.web-chip{
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  background: var(--fondo); border: var(--contorno) solid var(--tinta); border-radius: 999px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}

.web-caja{
  width: 64px; height: 64px; border-radius: 19px; flex-shrink: 0;
  border: var(--contorno) solid var(--tinta); background: var(--fondo);
  box-shadow: 0 2px 0 var(--som);
  display: flex; align-items: center; justify-content: center;
}
.web-caja svg{ width: 38px; height: 38px; }

/* Rotulo de seccion: desde el 26-sep-2026 es el `.rotulo` de la app (`rotulo.css`), la pastilla
   lavanda de «A tu manera», en un <span> dentro de este <p>. El <p> solo la sostiene: flex para
   que la pastilla mida lo que su texto y no herede la linea de 18px del parrafo, que la despegaria
   del titular. */
.web .web-rotulo{ display: flex; margin: 0; }

.web-tarjeta{
  border-radius: 26px; border: var(--contorno) solid var(--tinta);
  box-shadow: 0 2px 0 var(--som); background: var(--fondo);
}

/* ---------- 7. Pie ---------- */
.web-pie{ background: var(--fondo); padding: 32px 0; }
.web-pie-fila{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.web-pie-dominios,.web-pie-descubrimiento,.web-pie-idiomas{ margin: 0; font-size: 12.5px; font-weight: 700; color: var(--tinta3); }
.web-pie-descubrimiento a,.web-pie-idiomas a{
  display: inline-flex; align-items: center; padding: 10px 14px;
  border: 0; border-radius: 14px; color: var(--tinta3);
}
.web-pie-descubrimiento a:hover,.web-pie-idiomas a:hover{
  color: var(--tinta); background: var(--fondo);
}
.web-pie-idiomas b{ color: var(--tinta); }
@media (max-width: 600px){
  /* En móvil todo el pie se alinea con la línea de dominios: sin padding lateral en los enlaces. */
  .web-pie-fila{ flex-direction: column; align-items: flex-start; gap: 4px; }
  .web-pie-descubrimiento a,.web-pie-idiomas a{ padding: 10px 0; }
}