/* =====================================================================
   vidrio-sitio.css — dónde se aplica el vidrio EN EL SITIO.

   Los tokens y las clases viven en css/vidrio.css (copia del de la app,
   la genera sincronizar-estilos.js). Aquí solo está lo propio del sitio:
   la cabecera flotante y los siete tipos de sección.

   LA REGLA: el vidrio es crema sin tinte. El color va en las franjas de
   fondo, los botones, los iconos y las etiquetas, siempre sólido.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. LA CABECERA — píldora flotante de vidrio, ya no la barra roja
   --------------------------------------------------------------------- */
.cab{
  background: transparent;
  border-bottom: 0;
  padding: 14px 0;
}
.cab::after{ display: none }           /* la banda de cuadrícula sobra aquí */
.cab .cab-in{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta);
  border-radius: 22px;
  box-shadow: var(--brillo-superior), var(--brillo-inferior-lila), var(--sombra-dura);
  min-height: 60px;
  padding: 8px 14px;
}
@media (min-width:1000px){
  .cab{ padding: 20px 0 }
  .cab .cab-in{ min-height: 68px; border-radius: 24px; padding: 8px 18px }
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .cab .cab-in{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
/* La cabecera ya no pinta nada: el vidrio esta en la pildora de
   dentro. Hay que quitarle TAMBIEN el desenfoque que traia de antes,
   no solo el color. Un backdrop-filter crea bloque contenedor para los
   hijos con position:fixed, y el menu del celular es uno: con el
   filtro puesto el panel se colocaba respecto a la cabecera, salia de
   58px de alto y quedaba por debajo de la tarjeta del heroe. */
.cab{ -webkit-backdrop-filter: none; backdrop-filter: none }

/* Celular: el menu es otro panel de vidrio colgado de la pildora, no
   una cortina pegada al borde de la pantalla. Va absoluto respecto a
   la cabecera para seguirla al quedar fija. */
@media (max-width:980px){
  .menu{
    position: absolute; inset: auto; top: 100%; left: 12px; right: 12px;
    max-height: calc(100vh - 130px); overflow-y: auto;
    /* Casi opaco a proposito: este panel se abre ENCIMA del texto de
       la pagina, no encima de figuras. Con el 60% de las tarjetas, el
       titular del heroe se leia a traves y competia con el menu. */
    background: rgba(255, 255, 247, .93);
    border: 2px solid var(--tinta); border-radius: 22px;
    box-shadow: var(--brillo-superior), var(--sombra-dura-grande);
    padding: 10px 16px 18px;
  }
  .menu > ul > li:last-child{ border-bottom: 0 }
  /* «Abrir la app» tambien es amarillo aqui: en el marcado lleva
     ademas la clase .rojo, que pesa mas que un selector de una clase. */
  .menu .btn.menu-app{
    background: #ffdf2b; color: var(--tinta); border-radius: 15px;
    box-shadow: var(--brillo-boton), var(--sombra-dura);
  }
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  @media (max-width:980px){
    .menu{ background: rgba(255, 255, 247, .86);
      -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
  }
}

/* El logo real, en su círculo crema con borde de tinta. */
.marca-logo{
  background: var(--crema);
  border: 2px solid var(--tinta);
  box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
}

/* Escritorio: la navegación en su cápsula; la página activa, píldora
   roja sólida; las demás, texto. */
@media (min-width:1000px){
  .menu > ul{
    background: rgba(22,22,29,.05);
    border: 1.5px solid rgba(22,22,29,.14);
    border-radius: 999px;
    padding: 4px 6px;
  }
  .menu > ul > li > a{ border-radius: 999px; padding: 9px 15px }
  .menu > ul > li > a:hover{ background: rgba(22,22,29,.08) }
  .menu .activa > a{
    background: #ff5454; color: var(--tinta);
    border: 2px solid var(--tinta); border-radius: 999px;
    box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
  }
  .menu .menu-app{ display: none }     /* ya está el botón de la derecha */
}
/* «Abrir la app» en amarillo sólido, igual en todas las páginas. */
.cab-app, .menu-app{
  background: #ffdf2b;
  border: 2px solid var(--tinta); border-radius: 15px;
  box-shadow: var(--brillo-boton), var(--sombra-dura);
  color: var(--tinta); font-weight: 900;
}
/* En celular, el botón de menú es un cuadrado rojo. */
.hamb{
  width: 46px; height: 46px;
  background: #ff5454;
  border: 2px solid var(--tinta); border-radius: 13px;
  box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
}
.hamb i{ background: var(--tinta) }

/* ---------------------------------------------------------------------
   2. LOS TIPOS DE SECCIÓN
   --------------------------------------------------------------------- */

/* --- A. La cabeza de cada página interior ---------------------------- */
/* Franja de color plano con la cuadrícula encima, dos figuras que se
   salen por los bordes y la entrada en una tarjeta de vidrio. Las
   figuras van en blanco y en tinta muy flojos, no en color: la franja
   YA es el color, y un círculo rojo sobre rojo no se ve. */
.cabeza-pag{
  background-color: var(--c, var(--amarillo));
  background-image:
    radial-gradient(circle at 101% 16%, rgba(255,255,255,.34) 0 155px, transparent 156px),
    radial-gradient(circle at -4% 92%,  rgba(22,22,29,.10)   0 135px, transparent 136px),
    var(--cuadricula-sobre-color);
  background-size: auto, auto, 28px 28px, 28px 28px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  padding: 62px 0 56px;
}
.cabeza-pag > .envoltura{ position: relative; z-index: 1 }
.cabeza-pag h1{ font-size: clamp(34px, 5vw, 52px) }
.cabeza-pag h1 .mano{ font-size: .69em }
.cabeza-pag .intro{
  background: var(--vidrio-claro-fuerte);
  border: 2px solid var(--tinta); border-radius: 20px;
  box-shadow: var(--brillo-superior), var(--sombra-dura);
  padding: 15px 19px; max-width: 700px; margin-top: 18px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .cabeza-pag .intro{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
/* La palabra manuscrita de la cabeza iba en rojo con contorno de
   tinta. Sobre lila, verde, naranja o rojo se queda entre 1.54 y 2.63
   de contraste: el contorno la hace legible a la vista pero no cuenta,
   y sobre rojo es rojo sobre rojo. Se invierte: la letra en tinta y el
   contorno en crema. Asi pasa en las cinco franjas (7.0 la peor, la
   roja) y sigue separandose del titular, que es macizo y sin contorno. */
.cabeza-pag .mano{
  color: var(--tinta);
  text-shadow: 2px 2px 0 var(--crema), -1px -1px 0 var(--crema),
               1px -1px 0 var(--crema), -1px 1px 0 var(--crema);
}

/* La miga de pan, en su píldora de vidrio. */
.cabeza-pag .miga{
  display: inline-block; background: var(--vidrio-claro);
  border: 1.5px solid var(--tinta); border-radius: 999px;
  box-shadow: 0 2px 0 var(--tinta); padding: 5px 13px;
}

/* --- B. Cuadrícula crema con figuras y tarjetas de vidrio ------------ */
.seccion:not(.suave):not(.tinta):not(.roja):not(.amarilla){
  background-color: var(--bg);
  background-image: var(--cuadricula);
  background-size: 28px 28px;
}
.seccion:not(.suave):not(.tinta):not(.roja):not(.amarilla) .tarjeta{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta);
  box-shadow: var(--brillo-superior), var(--brillo-inferior-lila), var(--sombra-dura);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .seccion:not(.suave):not(.tinta):not(.roja):not(.amarilla) .tarjeta{
    -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio);
  }
}

/* --- C. Crema suave con tarjetas SÓLIDAS ---------------------------- */
.seccion.suave{
  background-color: var(--bg2);
  background-image: none;
  border-block: 2px solid var(--tinta);
}
.seccion.suave .tarjeta{
  background: var(--bg);
  border: 2px solid var(--tinta);
  box-shadow: var(--sombra-dura);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* --- D. Negra con vidrio oscuro ------------------------------------- */
.seccion.tinta{
  background-color: var(--tinta);
  color: var(--crema);
  border-block: 2px solid var(--tinta);
  position: relative; overflow: hidden;
}
/* Las fichas del camino heredaban el texto crema de la seccion negra
   pero conservaban su fondo crema: texto invisible. Pasan a vidrio
   oscuro como el resto de tarjetas de esta seccion. */
.seccion.tinta .camino li,
.seccion.tinta .tarjeta,
.seccion.tinta .uni-fila{
  background: var(--vidrio-oscuro);
  border: 1.5px solid var(--borde-vidrio-oscuro);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3);
  color: var(--crema);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .seccion.tinta .camino li, .seccion.tinta .tarjeta, .seccion.tinta .uni-fila{
    -webkit-backdrop-filter: blur(var(--blur-vidrio)) saturate(1.6);
    backdrop-filter: blur(var(--blur-vidrio)) saturate(1.6);
  }
}
.seccion.tinta h2, .seccion.tinta h3{ color: var(--crema) }
.seccion.tinta p, .seccion.tinta .intro{ color: #d6d6de }
.seccion.tinta .mano{ color: #ffdf2b }
.seccion.tinta .camino li small{ color: #b9b9c4 }
/* La raya punteada de las preparaciones, visible sobre negro. */
.seccion.tinta .camino li.prep{ border-style: dashed; border-color: #ffdf2b }
.seccion.tinta .camino .pie-nota, .seccion.tinta .camino + p{ color: #d6d6de }
.seccion.tinta .antetitulo{ background: #ffdf2b; color: var(--tinta) }

/* --- E. Franja amarilla de cifras ----------------------------------- */
.cifras{
  background: #ffdf2b;
  border-block: 3px solid var(--tinta);
  gap: 14px; padding: 20px;
  background-image: var(--cuadricula-sobre-color);
  background-size: 26px 26px;
}
.cifra{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta); border-radius: 18px;
  box-shadow: var(--brillo-superior), var(--sombra-dura);
  padding: 18px 12px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .cifra{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
@media (max-width:760px){ .cifras{ grid-template-columns: repeat(2,1fr) } }

/* --- F. Franja roja de llamado -------------------------------------- */
.seccion.roja{
  background-color: #ff5454;
  background-image: var(--cuadricula-sobre-color);
  background-size: 28px 28px;
  border-block: 2px solid var(--tinta);
}
.seccion.roja .tarjeta{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta);
  box-shadow: var(--brillo-superior), var(--sombra-dura);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .seccion.roja .tarjeta{
    -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio);
  }
}
.seccion.roja .mano, .llamada .mano{
  /* En crema sobre rojo se queda en 3.14 y el Pacifico de la llamada
     mide 20px, o sea texto normal: la norma pide 4.5. En tinta da 7.0
     y ademas separa la palabra del titular, que si es crema. */
  color: var(--tinta);
}
.seccion.roja .antetitulo{ background: var(--crema) }

/* --- G. El pie, negro ----------------------------------------------- */
.pie{
  background: var(--tinta); color: var(--crema);
  position: relative; overflow: hidden;
  border-top: 2px solid var(--tinta);
}
.pie-grid > div:first-child{
  background: var(--vidrio-oscuro);
  border: 1.5px solid var(--borde-vidrio-oscuro);
  border-radius: 20px;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3);
  padding: 20px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .pie-grid > div:first-child{
    -webkit-backdrop-filter: blur(var(--blur-vidrio)) saturate(1.6);
    backdrop-filter: blur(var(--blur-vidrio)) saturate(1.6);
  }
}
.pie h4, .pie-grid b{ color: #ffdf2b }

/* ---------------------------------------------------------------------
   3. BOTONES, ICONOS Y TÍTULOS
   --------------------------------------------------------------------- */
.btn{ box-shadow: var(--brillo-boton), var(--sombra-dura) }
.btn.rojo    { background: #ff5454 }
.btn.amarillo{ background: #ffdf2b }
.btn.lila    { background: #8b97fd }
.btn.negro   { background: var(--tinta); color: var(--crema) }
/* El secundario es vidrio, no color. */
.btn:not(.rojo):not(.amarillo):not(.lila):not(.negro){
  background: var(--vidrio-claro);
}

/* El cuadrito de icono de las tarjetas: el módulo es transparente y el
   icono tiene color. */
.tarjeta .ic{
  box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
  border: 2px solid var(--tinta);
}
.seccion.tinta .tarjeta .ic{ box-shadow: var(--brillo-boton), 0 3px 0 rgba(0,0,0,.5) }

/* La palabra manuscrita: su color según el fondo. */
.mano{ color: var(--rojo-texto) }
.heroe .mano{ color: var(--rojo-texto) }

/* ---------------------------------------------------------------------
   4. EL HÉROE
   --------------------------------------------------------------------- */
.heroe{
  background-color: var(--bg);
  background-image: var(--cuadricula);
  background-size: 28px 28px;
  position: relative; overflow: hidden;
}
.heroe-grid > div:first-child{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta);
  border-radius: 28px;
  box-shadow: var(--brillo-superior), var(--brillo-inferior-lila), var(--sombra-dura-grande);
  padding: 26px 22px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .heroe-grid > div:first-child{
    -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio);
  }
}
.antetitulo{
  background: #ffdf2b;
  border: 1.5px solid var(--tinta);
  box-shadow: 0 2px 0 var(--tinta);
}
.sello-edad span{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta);
  box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
}

/* El tamaño del titular lo fija el documento: 52px en escritorio y
   32-34px en celular, con la palabra manuscrita entre 34 y 38 arriba y
   entre 22 y 24 abajo. La proporcion .69 es la que deja el Pacifico
   dentro de esa franja en los dos tamanos. */
.heroe h1{ font-size: min(52px, 4.9vw) }
.heroe h1 .mano{ font-size: .69em }

/* El titular en pantalla estrecha: la tarjeta le quita ancho y
   «CONSTRUYENDO» se salía. 9.43 veces el tamaño de letra es lo que mide
   esa palabra en Archivo Black, medido. */
@media (max-width:620px){
  .heroe-grid > div:first-child{ padding: 22px 16px }
  .heroe h1{ font-size: min(34px, calc((100vw - 76px) / 9.43)) }
}

/* ---------------------------------------------------------------------
   5. RENDIMIENTO
   En celular puede haber seis tarjetas a la vez en pantalla. Ahí el
   desenfoque no se nota y cuesta: se quedan con el fondo translúcido.
   --------------------------------------------------------------------- */
@media (pointer: coarse){
  .tarjeta, .cifra, .plan, .btn, .sello-edad span{
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ---------------------------------------------------------------------
   6. LAS FIGURAS DE FONDO
   Círculos y cuadrados grandes de color sólido que se salen por los
   bordes. Sin ellos el vidrio no se ve: desenfocar crema da crema.

   Van como degradados de corte duro sobre el propio fondo de la
   sección. Se ven igual que figuras sueltas y la página no gana nodos
   que el navegador tenga que componer aparte.
   --------------------------------------------------------------------- */
.heroe{
  background-image:
    radial-gradient(circle at 103% 8%,  #ff5454 0 170px, transparent 171px),
    radial-gradient(circle at -7% 34%,  #8b97fd 0 185px, transparent 186px),
    radial-gradient(circle at 96% 92%,  #ffdf2b 0 130px, transparent 131px),
    var(--cuadricula);
  background-size: auto, auto, auto, 28px 28px, 28px 28px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}
/* En las secciones de cuadrícula crema, dos figuras por sección y
   nunca dos del mismo color seguidas. */
.seccion:not(.suave):not(.tinta):not(.roja){
  background-image:
    radial-gradient(circle at -6% 18%,  #00c07a 0 140px, transparent 141px),
    radial-gradient(circle at 105% 78%, #ffdf2b 0 150px, transparent 151px),
    var(--cuadricula);
  background-size: auto, auto, 28px 28px, 28px 28px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
/* Las negras llevan las suyas, más apagadas para que el texto mande. */
.seccion.tinta{
  background-image:
    radial-gradient(circle at 104% 12%, #ff545470 0 150px, transparent 151px),
    radial-gradient(circle at -8% 82%,  #8b97fd70 0 165px, transparent 166px);
  background-repeat: no-repeat;
}
.pie{
  background-image:
    radial-gradient(circle at 98% 18%, #8b97fd59 0 130px, transparent 131px),
    radial-gradient(circle at -5% 90%, #ff545459 0 140px, transparent 141px);
  background-repeat: no-repeat;
}

@media (max-width:760px){
  .heroe{
    background-image:
      radial-gradient(circle at 110% 6%,  #ff5454 0 110px, transparent 111px),
      radial-gradient(circle at -14% 30%, #8b97fd 0 120px, transparent 121px),
      var(--cuadricula);
    background-size: auto, auto, 24px 24px, 24px 24px;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
  }
  .seccion:not(.suave):not(.tinta):not(.roja){
    background-image:
      radial-gradient(circle at -14% 14%, #00c07a 0 100px, transparent 101px),
      radial-gradient(circle at 112% 84%, #ffdf2b 0 105px, transparent 106px),
      var(--cuadricula);
    background-size: auto, auto, 24px 24px, 24px 24px;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
  }
}