/*
 * Estilos de la plantilla base (cabecera + pie). No hay CSS de cabecera/pie que copiar de
 * `.dir-b`: la maqueta original solo trae colores y tokens (ver tokens.css/base.css), el layout
 * de nav/footer se construye aqui reutilizando esas mismas variables. Ningun literal hexadecimal
 * nuevo: todo color sale de tokens.css.
 */

/* ============ Saltar al contenido ============ */

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  /* --superficie-solida y no --superficie: este enlace se pinta ENCIMA del contenido de la pagina,
     y el velo translucido dejaria leer lo que hay debajo a traves de el. */
  background: var(--superficie-solida);
  color: var(--tinta);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}

.salta-al-contenido:focus {
  left: 0;
}

/* ============ Cabecera ============ */

/*
 * `min-height: var(--alto-cabecera)` (2026-09-06). No es maquetacion: es el CONTRATO que convierte
 * la altura de esta barra en un dato que otro puede reservar.
 *
 * La escena anclada de la portada tiene que dejar libre por arriba lo que la cabecera tapa, y
 * llevaba un `padding-top: 66px` puesto a ojo mientras la barra medía 80,5 -- por eso el titular
 * del heroe salia cortado. Poner otro numero a ojo habria repetido el fallo con otra cifra. Ahora
 * hay UNA ficha, `--alto-cabecera` (tokens.css, donde esta la suma completa y de donde sale cada
 * sumando), la cabecera se compromete a medir al menos eso, y la escena reserva exactamente eso.
 * Los dos numeros ya no pueden separarse porque no hay dos numeros; test/piel.test.js lo vigila.
 *
 * Va en `.cabecera` y no en `.cabecera-barra` porque el borde inferior de 1 px es de este elemento,
 * y con `box-sizing: border-box` (reset de base.css) la ficha lo incluye.
 */
.cabecera {
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--alto-cabecera);
}

.cabecera-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 12px;
  /* Separacion MINIMA entre el logotipo y la navegacion. Hacia falta desde que la nav crece para
     repartir el sobrante (ver el bloque de 861 px): al llevarse todo el espacio libre al lado
     derecho, los enlaces se quedaban pegados al logotipo -- medido, 0 px a 880. */
  column-gap: 32px;
  position: relative;
  padding-top: 17px;
  padding-bottom: 17px;
}

/*
 * El logotipo de la cabecera es la imagen real de marca (ver cabecera.njk). El <a> solo tiene que
 * no encogerse ni subrayar; el tamaño lo fija la altura de la imagen.
 *
 * `height` fija y `width: auto`: el HTML declara las medidas reales del fichero (500x90) para que
 * el navegador reserve el hueco antes de descargarlo; aqui se le da su tamaño de pantalla sin
 * tocar la proporcion. 30px de alto casan con la altura de linea de los enlaces de al lado, asi
 * que la barra no crece respecto al logotipo de texto que habia antes.
 */
.cabecera-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.cabecera-logo img {
  height: 30px;
  width: auto;
}

/*
 * Conmutador movil: sin JavaScript, el boton se queda oculto (`.cabecera-conmutador` empieza en
 * `display:none`; solo aparece bajo `.js`, la clase que anade el script inline de cabecera.njk
 * en cuanto se ejecuta) y `.cabecera-nav` permanece SIEMPRE visible (con flex-wrap, apilada en
 * varias lineas si hace falta) -- la navegacion nunca depende de que el script llegue a correr.
 *
 * Se probo primero con <details>/<summary> (cero JS) y se descarto: en un navegador real,
 * `.cabecera-menu` (el propio <details>) media 0x0 en escritorio con `display:flex !important`
 * en su contenido -- Chromium contiene el tamano del elemento cuando no lleva `open`, y eso no
 * lo deshace ningun CSS de autor.
 */
.cabecera-conmutador {
  display: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: .85rem;
  color: var(--tinta);
  background: transparent;
  padding: 8px 16px;
  border: 1px solid var(--linea);
  border-radius: 999px;
}

.js .cabecera-conmutador {
  display: inline-flex;
  align-items: center;
}

.cabecera-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  width: 100%;
}

@media (min-width: 601px) {
  .cabecera-nav {
    width: auto;
  }
}

/*
 * SIN JAVASCRIPT, LA NAVEGACION TIENE FILA PROPIA POR DEBAJO DE 861 px (2026-09-06).
 *
 * Ahi el colapso detras del boton no existe -- cuelga de la clase `.js`, que pone el script de
 * cabecera.njk --, asi que la barra dependia de si los enlaces cabian o no al lado del logotipo:
 * envolvia a 720 px (cabecera de 123) y no envolvia a 780 (cabecera de 79, con los enlaces pegados
 * al logotipo). Dos alturas distintas en el mismo tramo, y ninguna ficha puede decir cual.
 *
 * Dandole fila propia siempre, la cabecera mide lo mismo en todo el tramo y `--alto-cabecera` puede
 * declararlo (ver el bloque final de tokens.css). Es ademas mejor de ver: la navegacion queda
 * alineada debajo del logotipo en vez de rozandolo.
 */
@media (max-width: 860px) {
  html:not(.js) .cabecera-nav {
    width: 100%;
  }
}

/* El boton solo tiene sentido por debajo de 861px (es el punto de corte del bloque de mas abajo
   que lo usa para colapsar la nav). Sin este bloque, `.js .cabecera-conmutador` de arriba lo
   dejaria visible tambien en escritorio, donde no hace nada. */
@media (min-width: 861px) {
  .cabecera-conmutador {
    display: none !important;
  }

  /*
   * LOS ENLACES, EN MEDIO (2026-09-18). Dos pasadas, y la segunda la pidio el titular al ver la
   * primera: "puede quedar en medio, ahora me queda muy pegado en el logo".
   *
   * De donde venia: la barra es `space-between` con dos hijos, logotipo y nav, asi que todo el
   * espacio libre se acumulaba en UN solo sitio. Al principio en medio, con el telefono rozando
   * "Contacto"; y al hacer crecer la nav para arreglar eso, el sobrante se fue entero al otro lado
   * y los enlaces se pegaron al logotipo. El espacio estaba siempre igual de mal repartido, solo
   * que en el extremo contrario.
   *
   * Lo que lo reparte de verdad: la nav crece Y los enlaces crecen dentro de ella, centrando su
   * propio contenido. Asi el sobrante se parte en dos mitades iguales, una a cada lado de los
   * enlaces, sin que nadie escriba un numero. Medido a 1280: 163 px al logotipo y 157 al telefono.
   *
   * Por que no un margen fijo: se probaron varios a 880 px, el ancho de escritorio mas apretado, y
   * a partir de 60 la barra se partia en dos filas -- 121 px de alto contra los 81 que promete
   * `--alto-cabecera`, con el titular del heroe cortado. Repartiendo el sobrante eso no puede
   * pasar: si no sobra nada, el hueco vuelve a ser el `gap` de la nav y ya esta.
   *
   * `flex: 1 1 auto` y no `flex: 1` en los dos: este ultimo pone la base a 0, y con base 0 la nav
   * podria encogerse por debajo de su contenido y los enlaces envolverse sin necesidad.
   *
   * Los enlaces quedan centrados ENTRE EL LOGOTIPO Y EL TELEFONO, no en el centro de la pagina (su
   * centro cae en 586 y el de la pagina en 640): el bloque de la derecha es mas ancho que el
   * logotipo, y centrarlos en la pagina los dejaria visiblemente mas cerca del telefono. Dos huecos
   * iguales es lo que se lee como equilibrado.
   */
  .cabecera-nav {
    flex: 1 1 auto;
  }

  .cabecera-enlaces {
    flex: 1 1 auto;
    justify-content: center;
  }
}

.cabecera-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 19px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .89rem;
}

.cabecera-enlaces a:not(.btn) {
  color: var(--tinta);
  font-weight: 500;
  text-decoration: none;
}

.cabecera-enlaces a:not(.btn):hover,
.cabecera-enlaces a:not(.btn):focus-visible {
  color: var(--rojo-texto);
}

.cabecera-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

/*
 * 2026-09-24: entre 861 y 1100px no cabe; queda en el heroe, en /contratar/ y en el pie. Medido
 * en navegador (ronda de correccion 1): el borde real donde las dos acciones dejan de caber en
 * una fila junto al telefono y "Acceder" -- la cabecera pasa de 81 a 121 px, rompiendo
 * --alto-cabecera -- no estaba en 1024 sino mas arriba: seguia rota en 1026, 1030, 1035, 1040,
 * 1042 y 1044, y solo se arreglaba sola a partir de ~1046. Un corte en 1025 (el primer ancho
 * fallido de la ronda anterior, 1024, mas 1) dejaba ese hueco de ~20px sin cubrir. 1100 le da
 * margen: ese borde depende del renderizado de fuentes y del zoom del navegador, que varian
 * entre maquinas, y 1200 (el siguiente ancho ya comprobado que sobra de sitio) tambien lo cubre.
 *
 * El limite de ABAJO es de la revision final: por debajo de 861px `.cabecera-acciones` vive
 * dentro del menu desplegable (`#menu-principal`, ver cabecera.njk), no en la barra fija -- ahi
 * no compite por el ancho de la cabecera de 81px (--alto-cabecera), asi que el boton vuelve a
 * verse. Sin este limite inferior, la misma regla lo ocultaba tambien dentro del desplegable
 * movil, donde sobra sitio de sobra.
 */
@media (min-width: 861px) and (max-width: 1100px) {
  .cabecera-acciones .btn-fantasma {
    display: none;
  }
}

/*
 * Telefono y acceso, apilados a la derecha de la cabecera (2026-09-18, a peticion del titular con
 * la cabecera de otra web del sector como referencia). Ninguno de los dos es un boton: la cabecera
 * tiene UNA sola llamada a la accion, "Pedir alta", y dos botones seguidos se restaban el uno al
 * otro.
 *
 * Ni un color nuevo: `--tinta` y `--tinta-2` sobre `--blanco`, dos pares que piel.test.js ya mide.
 *
 * Desde el 2026-09-24, por decision del titular, vuelve a haber una segunda accion en la
 * cabecera: "Prueba gratis" como `btn-fantasma` secundario junto a "Pedir alta" (ver
 * navegacion.js). Oculta solo entre 861 y 1100px -- el tramo donde las dos acciones no caben en
 * una fila junto al telefono y "Acceder" -- segun el bloque de arriba.
 */
.cabecera-contacto {
  display: grid;
  gap: 4px;
  /* Alineadas por la IZQUIERDA, que es donde estan la bandera y la flecha: asi las dos filas
     arrancan en la misma columna y se leen como un bloque. Con `end` el acceso se pegaba al borde
     derecho y los dos iconos quedaban descolgados el uno del otro (medido: 883 contra 948). */
  justify-items: start;
  line-height: 1.25;
}

.cabecera-telefono,
.cabecera-acceder {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .88rem;
  text-decoration: none;
  white-space: nowrap;
}

.cabecera-telefono {
  color: var(--tinta);
  font-weight: 600;
}

.cabecera-acceder {
  color: var(--tinta-2);
}

.cabecera-telefono:hover,
.cabecera-telefono:focus-visible,
.cabecera-acceder:hover,
.cabecera-acceder:focus-visible {
  color: var(--rojo-texto);
}

/* La bandera lleva su propia proporcion (3:2) y por eso no pasa por `icono.njk`, que sirve iconos
   cuadrados de 24. Es un rectangulo rojo con la banda amarilla encima: el escudo no se dibuja a
   este tamaño -- a 18 px seria una mancha -- y no hace falta para lo que significa aqui. */
.cabecera-bandera {
  flex: 0 0 auto;
  width: 18px;
  height: 12px;
  border-radius: 2px;
}

/* Mismo tratamiento que .cabecera-flecha: trazo con el color del texto, sin relleno. */
.cabecera-icono-acceso {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Por debajo de 861px, solo con JS: la nav se colapsa detras del boton. Sin la clase `.js` (JS
   deshabilitado o script sin ejecutar todavia) estas reglas no aplican y la nav sigue el layout
   de arriba (siempre visible, en flujo normal). En escritorio (861px o mas) ninguna regla de
   este bloque aplica nunca, con o sin JS: la nav se ve igual que en la maqueta. */
@media (max-width: 860px) {
  .js .cabecera-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 10px;
    /* Opaca por el mismo motivo que el enlace de salto: este desplegable flota sobre la pagina. */
    background: var(--superficie-solida);
    border: 1px solid var(--linea);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: var(--sombra);
    /* Con "Modulos" abierto el desplegable mide mas que la pantalla y cuelga de una cabecera
       pegajosa: sin desplazamiento propio, "Pedir alta" y lo de debajo no se alcanzan. `nowrap`
       porque, con alto maximo, la columna con `flex-wrap` mandaba los botones a una segunda
       columna encima de la lista en vez de dejarlos al final del desplazamiento. */
    flex-wrap: nowrap;
    max-height: calc(100dvh - var(--alto-cabecera) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .js .cabecera-nav:not(.cabecera-nav--cerrado) {
    display: flex;
  }

  .js .cabecera-enlaces {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .js .cabecera-acciones {
    flex-direction: column;
    align-items: stretch;
  }

  /* Dentro del menu desplegado las dos filas se separan un poco mas: alli hay sitio de sobra. */
  .js .cabecera-contacto {
    gap: 8px;
    margin-bottom: 4px;
  }

  .js .cabecera-acciones .btn {
    text-align: center;
  }
}

/* ============ Pie ============ */

/* El pie usa la marca de agua gris de base.css (.pie::before) como fondo. */
.pie {
  background: var(--pie-fondo);
  border-top: 1px solid var(--linea);
  margin-top: 0;
}

/*
 * Cuatro columnas: marca, Modulos, SatControl y Tu cuenta. La de Modulos se lleva una pista mas
 * ancha (2,2fr contra 1fr) porque tiene 19 entradas y las otras dos tienen 4 y 2. Sin eso el pie
 * media 19 filas de alto y las tres columnas de la derecha se quedaban vacias desde la quinta
 * fila: mucho aire y una lista interminable. Ver `.pie-columna--modulos` mas abajo.
 */
.pie-cuerpo {
  display: grid;
  grid-template-columns: 1.1fr 2.2fr 1fr 1fr;
  gap: 32px;
  padding: 56px 34px 40px;
}

@media (max-width: 780px) {
  .pie-cuerpo {
    grid-template-columns: 1fr 1fr;
  }

  /* A dos columnas de rejilla, Modulos ocupa la fila entera: media pista no da para dos tiras. */
  .pie-columna--modulos {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .pie-cuerpo {
    grid-template-columns: 1fr;
  }
}

/* Mismo logotipo real que la cabecera, un poco mas pequeño (ver comentario en pie.njk). */
.pie-logo {
  margin: 0;
  line-height: 0;
}

.pie-logo img {
  height: 26px;
  width: auto;
}

.pie-eslogan {
  color: var(--tinta-2);
  font-size: .9rem;
  margin-top: 8px;
  max-width: 28ch;
}

.pie-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 0 0 14px;
}

.pie-columna ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: .89rem;
}

/*
 * La lista de modulos, en dos tiras. `columns` y no una rejilla de dos columnas a proposito: el
 * multicolumna reparte de ARRIBA ABAJO (los diez primeros a la izquierda, los nueve siguientes a
 * la derecha), que es como se lee una lista; una rejilla los repartiria de izquierda a derecha y
 * el orden del catalogo se leeria en zigzag.
 *
 * Hace falta volver a `display: block`: el multicolumna no se aplica a un contenedor flexible, y
 * la regla de arriba pone `display: flex` para todas las columnas del pie. Con flex puesto, la
 * declaracion `columns` se acepta sin error y no hace absolutamente nada -- que es justo la clase
 * de fallo que no se ve hasta que alguien mira el pie.
 *
 * DOS tiras y no tres: a tres, cada una se queda en unos 157 px y "Vacaciones y ausencias" parte
 * en dos lineas. Si algun dia el pie se ensancha, tres cabrian.
 */
.pie-columna--modulos ul {
  display: block;
  columns: 2;
  column-gap: 28px;
}

.pie-columna--modulos li {
  /* Un enlace no puede partirse entre el final de una tira y el principio de la siguiente. */
  break-inside: avoid;
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .pie-columna--modulos ul {
    columns: 1;
  }
}

.pie-columna a:not(.btn) {
  color: var(--tinta-2);
  text-decoration: none;
}

.pie-columna a:not(.btn):hover,
.pie-columna a:not(.btn):focus-visible {
  color: var(--rojo-texto);
}

.pie-acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.pie-acceder {
  color: var(--tinta-2);
  font-size: .89rem;
  text-decoration: none;
}

.pie-acceder:hover,
.pie-acceder:focus-visible {
  color: var(--rojo-texto);
}

.pie-acciones .btn {
  text-align: center;
}

.pie-legal {
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 28px;
}

.pie-legal .micro {
  margin: 0;
}

.pie-legal-enlaces {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  font-size: .78rem;
}

.pie-legal-enlaces a {
  color: var(--tinta-2);
  text-decoration: none;
}

.pie-legal-enlaces a:hover,
.pie-legal-enlaces a:focus-visible {
  color: var(--rojo-texto);
  text-decoration: underline;
}

/* Menu "Modulos" (fase 2, spec §5) */
.cabecera-modulos-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
}

.cabecera-modulos-boton:hover,
.cabecera-modulos-boton:focus-visible,
.cabecera-modulos-boton[aria-expanded="true"] {
  color: var(--rojo-texto);
}

.cabecera-flecha {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cabecera-modulos-boton[aria-expanded="true"] .cabecera-flecha {
  transform: rotate(180deg);
}

.panel-modulos-titulo {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: 14px;
}

.panel-modulos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px 20px;
}

/* Rejilla y no flex (2026-09-17): con flex-wrap la etiqueta que no cabe al lado del nombre bajaba
   pegada al borde izquierdo, bajo el icono. En rejilla la insignia siempre cae en la columna del
   nombre, debajo de el, alineada con su texto -- igual que las pastillas del diagrama en movil. */
.cabecera-enlaces .panel-modulo {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
}

.cabecera-enlaces .panel-modulo .icono-modulo {
  grid-row: 1 / span 2;
}

.cabecera-enlaces .panel-modulo .insignia {
  grid-column: 2;
  justify-self: start;
}

.cabecera-enlaces .panel-modulo:hover > span:not(.insignia),
.cabecera-enlaces .panel-modulo:focus-visible > span:not(.insignia) {
  color: var(--rojo-texto);
}

.panel-modulos-promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: 18px;
  padding: 30px 28px;
  color: var(--sobre-rojo);
  background: linear-gradient(145deg, var(--rojo), var(--rojo-hondo));
}

.panel-modulos-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/img/marca/roja.svg") left top / 260% auto no-repeat;
}

.panel-modulos-promo p {
  color: inherit;
}

.panel-modulos-promo .panel-modulos-promo-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-sobre-rojo);
}

.panel-modulos-promo-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.15;
}

.panel-modulos-promo .btn {
  margin-top: auto;
}

.panel-modulos-promo .btn:focus-visible,
.cierre .btn:focus-visible {
  outline-color: var(--sobre-rojo);
}

@media (min-width: 861px) {
  .panel-modulos {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 8px;
    z-index: 50;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    gap: 36px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 20px;
    box-shadow: var(--sombra);
    padding: 28px 28px 28px 36px;
  }

  .panel-modulos-lista--dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Hasta 1119 px las tres columnas no caben: los nombres se salian y la tarjeta roja tapaba las
   insignias. Se queda sin tarjeta; el indice de modulos sigue enlazado desde el pie. */
@media (min-width: 861px) and (max-width: 1119px) {
  .panel-modulos {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .panel-modulos-promo {
    display: none;
  }
}

@media (max-width: 860px) {
  .panel-modulos {
    display: grid;
    gap: 18px;
    padding: 12px 0 4px;
  }

  .panel-modulos-promo {
    display: none;
  }
}

/* Cierre rojo (fase 2, spec §6.5) */
.cierre {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--sobre-rojo);
  background: linear-gradient(135deg, var(--rojo), var(--rojo-hondo));
}

.cierre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/img/marca/roja.svg") center / cover no-repeat;
}

.cierre-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
  padding-block: 64px;
}

.cierre h2 {
  color: inherit;
  margin-bottom: 12px;
}

.cierre p {
  color: inherit;
  font-size: 1.1rem;
  max-width: 52ch;
}

.cierre-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.cierre-sellos {
  display: flex;
  align-items: center;
  gap: 30px;
}

.cierre-sello-camara {
  height: 110px;
  width: auto;
}

.cierre-separador {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, .35);
}

.cierre-jm2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cierre-sello-jm2 {
  height: 76px;
  width: auto;
}

.cierre-sello-anos {
  height: 38px;
  width: auto;
}

@media (max-width: 780px) {
  .cierre-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * El bloque de dato real de un caso (2026-09-18). Solo lo llevan los casos de los que hay un hecho
 * comprobado; es la unica seccion de esa pagina que habla de LA EMPRESA y no de "un negocio de este
 * perfil", asi que se distingue a simple vista de las dos que la rodean.
 */
.caso-dato {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.caso-dato-cifra {
  display: grid;
  gap: 4px;
  padding: 26px 28px;
  background: var(--blanco);
  border-top: 5px solid var(--rojo);
  border-radius: 16px;
  box-shadow: var(--sombra);
  text-align: center;
}

.caso-dato-numero {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--rojo-texto);
}

.caso-dato-pie {
  color: var(--tinta-2);
  font-size: .9rem;
}

.caso-dato-texto h2 {
  margin: 0 0 12px;
}

.caso-dato-modulos {
  margin: 14px 0 0;
  font-size: .95rem;
}

@media (max-width: 760px) {
  .caso-dato {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
}

/* El dato de una ficha de caso en /casos/: lo unico que distingue una ficha de otra. */
.caso-ficha-dato {
  margin: 0;
  color: var(--tinta-2);
  font-size: .92rem;
}

.caso-ficha-dato strong {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--rojo-texto);
}

/* Un caso con modulos en uso pero sin cifra (ver casos.js): sin la tarjeta del numero, la seccion
   deja de ser de dos columnas y el texto ocupa el ancho entero. */
.caso-dato--sin-cifra {
  grid-template-columns: minmax(0, 1fr);
}

/* ============ Boton flotante de contacto (2026-09-18) ============
 * En todas las paginas, esquina de abajo a la DERECHA. La izquierda la ocupan los avisos de alta
 * de la portada (altas.css), que por eso se apartan hacia arriba en pantalla estrecha.
 *
 * Aqui no hay ni un `opacity: 0` ni un `visibility: hidden`: el desplegable se abre y se cierra
 * con el atributo `hidden`, que ademas lo saca del orden de tabulacion. Es lo que exige
 * test/movimiento.test.js de las hojas que carga TODO el sitio -- en una pagina sin capa de
 * movimiento no hay nada que vuelva a revelar lo que esta hoja escondiera.
 */
.contacto-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* Por debajo de la cabecera pegajosa (40) y de su panel desplegado (50). */
  z-index: 34;
  display: grid;
  justify-items: end;
  gap: 10px;
}

.contacto-flotante-lanzador {
  display: inline-block;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rojo), var(--rojo-hondo));
  color: var(--sobre-rojo);
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--sombra);
  cursor: pointer;
}

.contacto-flotante-lanzador:hover,
.contacto-flotante-lanzador:focus-visible {
  color: var(--sobre-rojo);
  background: var(--rojo-hondo);
}

.contacto-flotante-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  justify-items: end;
  gap: 8px;
}

.contacto-flotante-accion {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  font-size: .9rem;
  text-decoration: none;
  box-shadow: var(--sombra-suave);
  white-space: nowrap;
}

.contacto-flotante-accion:hover,
.contacto-flotante-accion:focus-visible {
  border-color: var(--rojo);
  color: var(--rojo-texto);
}

@media (max-width: 600px) {
  .contacto-flotante {
    right: 12px;
    bottom: 12px;
  }
}

/* ============ Insignias de las tiendas (2026-09-18) ============
 * Salen en el heroe de la portada y en el pie de TODAS las paginas, con el mismo marcado
 * (`src/_includes/tiendas.njk`). Por eso estos estilos viven aqui y no en portada.css: esa hoja
 * solo la carga la portada, y en el resto del sitio el pie habria salido sin ellos.
 *
 * Las dos son los ficheros oficiales, sin retocar. El de Google trae 29 px de aire arriba y abajo
 * dentro de sus 250 (su pildora negra mide 192), asi que a la misma altura en pantalla saldria un
 * 23% mas pequeño que el de Apple. Se compensa aqui, no recortando el fichero: 52 px de alto dan
 * una pildora de 40, la misma que la de Apple. Si algun dia Google cambia el aire de su insignia,
 * ese 52 (y el 44 del pie) son los numeros que hay que rehacer.
 */
.tiendas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 22px 0 0;
}

.tiendas-rotulo {
  flex-basis: 100%;
  color: var(--tinta-2);
  font-size: .9rem;
}

.tiendas-enlace {
  display: inline-flex;
  border-radius: 8px;
}

.tiendas-enlace:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 3px;
}

.tiendas-insignia {
  display: block;
  width: auto;
}

.tiendas-insignia--apple {
  height: 40px;
}

.tiendas-insignia--google {
  height: 52px;
}

/* En el pie van algo mas pequeñas: acompañan al logotipo, no llaman a la accion. Se mantiene la
   misma proporcion entre las dos (34 de pildora: 34 en Apple, 44 x 192/250 = 33,8 en Google). */
.tiendas--pie {
  margin-top: 18px;
  gap: 8px 12px;
}

.tiendas--pie .tiendas-rotulo {
  font-size: .82rem;
}

.tiendas--pie .tiendas-insignia--apple {
  height: 34px;
}

.tiendas--pie .tiendas-insignia--google {
  height: 44px;
}

/* ============ Aviso de consentimiento de cookies (2026-09-18) ============
 * Lo crea entero assets/js/consentimiento.js, y SOLO si hay analitica configurada: sin ella no
 * existe ni el elemento. Por eso aqui no hay ningun estado oculto que revelar.
 *
 * Abajo a la izquierda y ESTRECHO, no una banda que cruce la pantalla: no bloquea la lectura y no
 * tapa el contenido. Un aviso que secuestra la pagina para que no quede mas remedio que aceptar es
 * justo la clase de "consentimiento" que no vale.
 */
.consentimiento {
  position: fixed;
  left: 20px;
  bottom: 20px;
  /* Por encima de los avisos de alta (35) y del boton de contacto (34): es una decision que se pide
     una vez, y mientras esta en pantalla manda ella. Por debajo de la cabecera (40). */
  z-index: 38;
  width: min(380px, calc(100vw - 40px));
  padding: 20px 22px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 16px;
  box-shadow: var(--sombra);
}

.consentimiento-titulo {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tinta);
}

.consentimiento-texto {
  margin: 0 0 10px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

.consentimiento-enlace {
  display: inline-block;
  margin-bottom: 16px;
  font-size: .85rem;
  color: var(--tinta-2);
}

.consentimiento-enlace:hover,
.consentimiento-enlace:focus-visible {
  color: var(--rojo-texto);
}

/*
 * Los dos botones, EN LA MISMA FILA Y DEL MISMO TAMAÑO (`1fr 1fr`). La AEPD exige que rechazar sea
 * tan facil como aceptar, y "tan facil" incluye que se vea igual: nada de un "Aceptar" grande y un
 * "rechazar" en gris pequeño debajo. Si alguien cambia esta rejilla, rompe el requisito legal, no
 * la estetica.
 */
.consentimiento-botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.consentimiento-boton {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding-inline: 12px;
}

@media (max-width: 600px) {
  .consentimiento {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}