@charset "utf-8";
/* ==========================================================================
   GPS Facil - hoja de estilos unica

   1. Tipografias        7. Cabecera          13. Productos
   2. Temas              8. Botones           14. Plataforma
   3. Medidas            9. Portada           15. FAQ
   4. Reset             10. Prueba            16. Contacto, socios, cierre
   5. Utilidades        11. Modelo            17. Pie y flotante
   6. Motivos           12. Secciones         18. Responsive y accesibilidad
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografias auto-alojadas (variables, subconjuntos latin y latin-ext)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/spacegrotesk-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/spacegrotesk-latin-ext-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-ext-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. TEMAS

   Dos paletas, una sola hoja. Ningun componente sabe que tema esta activo:
   todos leen los mismos tokens --c-*.

     Claro   (por defecto)          es el tema principal del sitio, y es lo
                                    que ve alguien sin JavaScript.
     Oscuro  ([data-tema="oscuro"]) todo el documento en oscuro.

   El tema elegido manda sobre TODO el documento, sin excepciones: no hay
   secciones que se queden oscuras cuando el visitante pide claro. Antes las
   habia (la plataforma, desarrollos y el pie, con .tono-oscuro) y se leia como
   que el selector estaba roto.

   La paleta oscura va DESPUES de :root a proposito: los dos selectores tienen
   la misma especificidad, asi que gana el ultimo, y por eso
   [data-tema="oscuro"] puede pisar al :root claro.

   Lo elige el visitante con el boton de la cabecera. La preferencia queda
   guardada en localStorage; si nunca eligio, manda prefers-color-scheme del
   sistema, y si el sistema no opina, claro. Ver assets/js/tema.js.
   ========================================================================== */

/* -- Paleta clara: cielo de altura y blanco nieve sobre el cyan de marca ---- */
:root {
  --c-fondo: #f5f9fd;
  --c-fondo-alt: #e7f0f9;
  --c-fondo-velo: rgba(245, 249, 253, 0.86);
  --c-fondo-velo-firme: rgba(245, 249, 253, 0.97);
  --c-superficie: #ffffff;
  --c-superficie-alta: #ffffff;
  --c-superficie-velo: rgba(255, 255, 255, 0.74);
  --c-linea: #d4e3f1;
  --c-linea-fuerte: #a7c5e0;

  /* Cyan de marca, el mismo que esta impreso en los equipos y en el logo.
     El relleno de los elementos vivos usa el color exacto; para texto y
     bordes hay una variante oscurecida, porque #1BBBB9 sobre claro da 2.24 y
     un texto necesita 4.5. */
  --c-acento: #1bbbb9;
  --c-acento-claro: #31c9c7;
  --c-acento-apagado: #158a88;
  /* tinta: enlaces, coordenadas, numeros. 5.20 sobre --c-fondo */
  --c-acento-tinta: #127573;
  --c-acento-velo: rgba(27, 187, 185, 0.12);
  --c-acento-velo-suave: rgba(27, 187, 185, 0.06);
  --c-acento-trazo: rgba(27, 187, 185, 0.35);

  --c-texto: #0b2740;
  --c-texto-2: #3d6285;
  /* Antes el pie y dos paginas enteras eran siempre oscuros y este gris
     nunca caia sobre fondo claro. Ahora si: con #62809d los pies de foto
     y el copyright del pie daban 3.90 y 3.58, por debajo del 4.5 que pide
     un texto chico. Este da 5.01 sobre --c-fondo y 4.60 sobre --c-fondo-alt. */
  --c-texto-3: #546e88;
  --c-sobre-acento: #04120e;

  /* Trazos de los esquemas SVG. Van aparte del acento y de la linea porque un
     grafico necesita 3:1 contra su fondo, y sobre claro el acento de marca
     rinde 2.00 y --c-linea-fuerte 1.70. Estos dan 4.06 y 3.60. */
  --c-esquema-trazo: #158a88;
  --c-esquema-guia: #5b87ad;

  --c-chip: transparent;
  /* la tipografia del logotipo: #212121 es el gris del archivo de
     marca, no negro puro. Sobre oscuro no se ve, y ahi va en claro. */
  --c-logo-tinta: #212121;
  --sombra-tarjeta: 0 1px 2px rgba(11, 39, 64, 0.05),
    0 10px 26px -20px rgba(11, 39, 64, 0.4);
  --sombra-flotante: 0 14px 34px -14px rgba(11, 39, 64, 0.55),
    0 0 0 1px rgba(27, 187, 185, 0.45);
  --sombra-foto: 0 30px 60px -38px rgba(11, 39, 64, 0.55);
  --op-reticula: 0.85;
  /* los iconos de aplicaciones son blancos: sobre fondo claro hay que darlos
     vuelta. En las secciones de tono oscuro vuelven a su version original. */
  --inv-icono: invert(1) brightness(0.28) saturate(0);
}

/* -- Paleta oscura --------------------------------------------------------- */
[data-tema="oscuro"] {
  --c-fondo: #060b12;
  --c-fondo-alt: #08111a;
  --c-fondo-velo: rgba(6, 11, 18, 0.82);
  --c-fondo-velo-firme: rgba(6, 11, 18, 0.94);
  --c-superficie: #0c1622;
  --c-superficie-alta: #101d2b;
  --c-superficie-velo: rgba(12, 22, 34, 0.62);
  --c-linea: #182634;
  --c-linea-fuerte: #26394d;

  /* El mismo cyan de marca que en claro: el acento no cambia de color con el
     tema, solo cambia que sobre oscuro ya rinde 8.32 y no necesita ayuda. */
  --c-acento: #1bbbb9;
  --c-acento-claro: #31c9c7;
  --c-acento-apagado: #189e9c;
  /* tinta: sobre oscuro el que rinde es el cyan claro, 9.69 */
  --c-acento-tinta: #31c9c7;
  --c-acento-velo: rgba(27, 187, 185, 0.14);
  --c-acento-velo-suave: rgba(27, 187, 185, 0.07);
  --c-acento-trazo: rgba(27, 187, 185, 0.38);

  --c-texto: #e9f1f4;
  --c-texto-2: #a7bcc6;
  --c-texto-3: #6d8492;
  --c-sobre-acento: #04120e;

  /* El acento sobre oscuro rinde 9.69 y no necesita ayuda. La guia si: con
     --c-linea-fuerte daba 1.67 y las lineas de eje casi no se veian. */
  --c-esquema-trazo: #31c9c7;
  --c-esquema-guia: #52708f;

  /* fondo claro para logos de terceros que vienen en oscuro */
  --c-chip: #f2f6f8;
  --c-logo-tinta: #f2f6f8;
  --sombra-tarjeta: none;
  --sombra-flotante: 0 14px 34px -12px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(27, 187, 185, 0.32);
  --sombra-foto: 0 30px 60px -35px rgba(0, 0, 0, 0.9);
  --op-reticula: 0.55;
  --inv-icono: invert(0);
}

/* --------------------------------------------------------------------------
   3. Medidas, tipografia y ritmo (no dependen del tema)
   -------------------------------------------------------------------------- */
:root {
  --f-titulo: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-cuerpo: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  --t-micro: 0.6875rem;
  --t-min: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.42vw, 1.3125rem);
  --t-h3: clamp(1.125rem, 1.05rem + 0.38vw, 1.375rem);
  --t-h2: clamp(1.6875rem, 1.35rem + 1.7vw, 2.75rem);
  --t-h1: clamp(2.1875rem, 1.5rem + 3.3vw, 4rem);

  --anchura: 1180px;
  --anchura-texto: 68ch;
  /* Ancho maximo de TODA foto real del sitio. Uno solo, para que el criterio
     se lea como decision y no como una foto que sobro. */
  --ancho-foto: 360px;
  --margen: clamp(1.25rem, 5vw, 3rem);
  --esp-seccion: clamp(4rem, 8vw, 7rem);
  --radio: 14px;
  --radio-sm: 9px;

  --transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   4. Reset acotado
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background-color: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-cuerpo);
  font-size: var(--t-base);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-titulo);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 {
  font-size: var(--t-h1);
  letter-spacing: -0.035em;
}
h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.028em;
}
h3 {
  font-size: var(--t-h3);
  letter-spacing: -0.015em;
}
h4 {
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--c-acento-tinta);
  text-decoration-color: var(--c-acento-trazo);
  text-underline-offset: 0.22em;
}
a:hover {
  text-decoration-color: currentColor;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* <picture> es solo un envoltorio: que no forme caja propia para que el <img>
   siga siendo el hijo directo de la grilla o del flex que lo contiene. */
picture {
  display: contents;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--c-acento-tinta);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--c-acento);
  color: var(--c-sobre-acento);
}

/* --------------------------------------------------------------------------
   5. Utilidades
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--anchura);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hoja de simbolos SVG del principio del body. No se puede ocultar con
   display:none porque entonces algunos navegadores no resuelven los <use>. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.saltar {
  position: absolute;
  left: var(--margen);
  top: 0;
  transform: translateY(-150%);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--c-acento);
  color: var(--c-sobre-acento);
  font-weight: 600;
  border-radius: 0 0 var(--radio-sm) var(--radio-sm);
  text-decoration: none;
  transition: transform var(--transicion);
}
.saltar:focus {
  transform: translateY(0);
}

.seccion {
  position: relative;
  padding-block: var(--esp-seccion);
}
.seccion--ajustada {
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
}
.seccion--alt {
  background-color: var(--c-fondo-alt);
}

.medida {
  max-width: var(--anchura-texto);
}

/* --------------------------------------------------------------------------
   6. Motivos propios del rubro
   -------------------------------------------------------------------------- */

/* Reticula de mapa: trama fina + trama de sector, desvanecida con mascara */
.reticula {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
      to right,
      var(--c-linea) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, var(--c-linea) 1px, transparent 1px),
    linear-gradient(to right, var(--c-linea-fuerte) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-linea-fuerte) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px, 230px 230px, 230px 230px;
  opacity: var(--op-reticula);
  -webkit-mask-image: radial-gradient(
    120% 90% at 50% 0%,
    #000 5%,
    transparent 72%
  );
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 5%, transparent 72%);
}
.reticula--pie {
  -webkit-mask-image: radial-gradient(
    110% 110% at 50% 100%,
    #000 0%,
    transparent 68%
  );
  mask-image: radial-gradient(110% 110% at 50% 100%, #000 0%, transparent 68%);
}

.halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    45% 45% at 62% 38%,
    var(--c-acento-velo) 0%,
    transparent 70%
  );
}

/* Punto que pulsa: senal en vivo */
.senal {
  position: relative;
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--c-acento);
  flex: none;
}
.senal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--c-acento);
  animation: latido 2.4s cubic-bezier(0.15, 0.6, 0.3, 1) infinite;
}
@keyframes latido {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  70% {
    transform: scale(3.6);
    opacity: 0;
  }
  100% {
    transform: scale(3.6);
    opacity: 0;
  }
}

/* Micro-tipografia. Se usa con cuentagotas, no arriba de cada titulo. */
.coord,
.etiqueta {
  font-family: var(--f-titulo);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.coord {
  color: var(--c-acento-tinta);
}
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--c-texto-3);
  margin-bottom: 1.2rem;
}
.etiqueta::before {
  content: "";
  inline-size: 26px;
  block-size: 1px;
  background: var(--c-linea-fuerte);
  flex: none;
}

.lectura-viva {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border: 1px solid var(--c-linea-fuerte);
  border-radius: 100px;
  background: var(--c-superficie-velo);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   7. Cabecera y navegacion
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-fondo-velo);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), background-color var(--transicion);
}
.cabecera.esta-desplazada {
  border-bottom-color: var(--c-linea);
  background: var(--c-fondo-velo-firme);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  min-block-size: 4.25rem;
  padding-block: 0.6rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--c-texto);
  margin-inline-end: auto;
}
/* El logotipo va del archivo de marca, no reconstruido con una tipografia
   parecida. El pin lleva el cyan exacto escrito adentro del SVG y no cambia
   con el tema; la tipografia hereda currentColor, que es lo unico que se
   mueve. Por eso el logo esta en el sprite y no en un <img>: un <img> no
   hereda color. */
.marca__logo {
  display: block;
  /* Medida explicita y no aspect-ratio con inline-size:auto. La regla global
     svg{max-width:100%} resuelve ese 100% contra .marca, que es inline-flex y
     por lo tanto de ancho indefinido: el ancho colapsaba a cero. */
  --alto: 40px;
  block-size: var(--alto);
  inline-size: calc(var(--alto) * 1728 / 674);
  max-inline-size: none;
  color: var(--c-logo-tinta);
}
.marca--pie .marca__logo {
  --alto: 52px;
}

.nav {
  order: 3;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  border-block-start: 1px solid var(--c-linea);
  padding-block-start: 0.35rem;
}
.nav::-webkit-scrollbar {
  display: none;
}
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.1rem, 1.3vw, 1.1rem);
  list-style: none;
}
.nav a {
  display: block;
  padding: 0.45rem 0.5rem;
  color: var(--c-texto-2);
  font-size: var(--t-min);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radio-sm);
  transition: color var(--transicion);
}
.nav a:hover {
  color: var(--c-texto);
}
.nav a[aria-current="page"] {
  color: var(--c-acento-tinta);
}

/* --------------------------------------------------------------------------
   8. Botones y enlaces de accion
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--c-acento);
  border-radius: var(--radio-sm);
  background: var(--c-acento);
  color: var(--c-sobre-acento);
  font-family: var(--f-cuerpo);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion),
    color var(--transicion), transform var(--transicion);
}
.boton:hover {
  background: var(--c-acento-claro);
  border-color: var(--c-acento-claro);
  transform: translateY(-1px);
}
.boton svg {
  inline-size: 17px;
  block-size: 17px;
  flex: none;
}

.boton--fantasma {
  background: transparent;
  color: var(--c-texto);
  border-color: var(--c-linea-fuerte);
}
.boton--fantasma:hover {
  background: var(--c-acento-velo-suave);
  border-color: var(--c-acento-apagado);
  color: var(--c-texto);
}

.boton--chico {
  padding: 0.6rem 1rem;
  font-size: var(--t-min);
}

/* Enlace de texto con flecha. La flecha vive aca, nunca en los botones. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--c-acento-tinta);
}
.enlace-flecha svg {
  inline-size: 15px;
  block-size: 15px;
  transition: transform var(--transicion);
}
.enlace-flecha:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.enlace-flecha:hover svg {
  transform: translateX(3px);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.acciones--sep {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   9. Portada
   -------------------------------------------------------------------------- */
.portada {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--c-linea);
}
.portada__rejilla {
  position: relative;
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}
.portada h1 {
  margin-bottom: 0.5em;
}
.portada__bajada {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--c-texto-2);
  max-width: 46ch;
  margin-bottom: 2rem;
}

/* La foto del hero es una foto real: usa el mismo componente que el resto.
   Solo agrega el centrado dentro de su columna. */
.portada__foto {
  justify-self: center;
}

/* Portada corta de las paginas internas */
.portada--interna {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.25rem, 4.5vw, 3.5rem);
}
/* Ojo: en las internas el .contenedor y el .portada__rejilla son el mismo
   elemento, asi que la medida de lectura va en los hijos. Si se le pone al
   contenedor, le pisa el max-width y centra toda la columna. */
.portada--interna .portada__rejilla {
  display: block;
}
.portada--interna h1 {
  max-width: 24ch;
}
.portada--interna p {
  max-width: 60ch;
  font-size: var(--t-lead);
  color: var(--c-texto-2);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   10. Franja de prueba (el caso del Aconcagua, arriba de todo)
   -------------------------------------------------------------------------- */
.prueba {
  background-color: var(--c-fondo-alt);
  border-block-end: 1px solid var(--c-linea);
}
.prueba__caja {
  display: grid;
  gap: 1.1rem;
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
  max-width: 70ch;
}
.prueba__titular {
  font-family: var(--f-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 0;
  color: var(--c-texto);
}
.prueba p {
  margin: 0;
  color: var(--c-texto-2);
}

/* Caso concreto con fotos. Se usa en el inicio y repetido en /productos/. */
.caso {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--c-linea);
  border-inline-start: 2px solid var(--c-acento);
  border-radius: var(--radio);
  background-color: var(--c-superficie);
  box-shadow: var(--sombra-tarjeta);
}
.caso__titulo {
  font-size: var(--t-h3);
  margin-bottom: 0.6em;
  max-width: 26ch;
}
.caso p {
  color: var(--c-texto-2);
}
.caso__nota {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-linea);
  font-size: var(--t-min);
  color: var(--c-texto-3);
}
.caso .fotos-doc {
  margin-block-start: 1.75rem;
}

/* --------------------------------------------------------------------------
   11. Modelo de negocio: pasos y comparacion
   -------------------------------------------------------------------------- */
.pasos {
  list-style: none;
  display: grid;
  border: 1px solid var(--c-linea);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-tarjeta);
}
.paso {
  background-color: var(--c-fondo);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-inline-start: 1px solid var(--c-linea);
  border-block-start: 1px solid var(--c-linea);
  margin-inline-start: -1px;
  margin-block-start: -1px;
}
.paso__n {
  display: block;
  font-family: var(--f-titulo);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-acento-tinta);
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}
.paso h3 {
  margin-bottom: 0.4em;
}
.paso p {
  font-size: var(--t-sm);
  color: var(--c-texto-2);
}

.comparativa-caja {
  border: 1px solid var(--c-linea);
  border-radius: var(--radio);
  overflow: hidden;
  background-color: var(--c-superficie);
  box-shadow: var(--sombra-tarjeta);
}
table.comparativa {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
table.comparativa th,
table.comparativa td {
  padding: 0.95rem 1.25rem;
  text-align: left;
  vertical-align: top;
  border-block-start: 1px solid var(--c-linea);
}
table.comparativa thead th {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: var(--t-min);
  border-block-start: 0;
  color: var(--c-texto-3);
}
table.comparativa thead th:last-child {
  color: var(--c-acento-tinta);
}
table.comparativa td:first-child {
  color: var(--c-texto-3);
}
table.comparativa td:last-child {
  color: var(--c-texto);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   12. Encabezados de seccion, tarjetas y rejillas
   -------------------------------------------------------------------------- */
.enc-seccion {
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
  max-width: 60ch;
}
.enc-seccion p {
  color: var(--c-texto-2);
  font-size: var(--t-lead);
  margin-bottom: 0;
}
.enc-seccion--centro {
  text-align: center;
  margin-inline: auto;
}

/* Franja de datos: una tira corta de hechos, con hairlines entre celdas. Las
   separaciones las dibuja cada celda, como en el resto de las grillas, asi que
   si son dos datos quedan dos columnas y no sobra ninguna celda pintada. */
.franja {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--c-linea);
  border-radius: var(--radio);
  overflow: hidden;
  background-color: var(--c-superficie);
  box-shadow: var(--sombra-tarjeta);
}
.franja > div {
  padding: 1.4rem 1.5rem;
  border-block-start: 1px solid var(--c-linea);
  border-inline-start: 1px solid var(--c-linea);
  margin-block-start: -1px;
  margin-inline-start: -1px;
}
.franja dt {
  margin-bottom: 0.5rem;
}
.franja dd {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-texto-2);
}

.tarjeta {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--c-linea);
  border-radius: var(--radio);
  background-color: var(--c-superficie);
  box-shadow: var(--sombra-tarjeta);
}
.tarjeta h3 {
  margin-bottom: 0.5em;
}
.tarjeta p {
  color: var(--c-texto-2);
  font-size: var(--t-sm);
}
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1rem;
}
/* Cuando dos tarjetas de la misma grilla llevan botones, que queden alineados
   aunque los textos ocupen distinta cantidad de lineas. */
.tarjetas .tarjeta {
  display: flex;
  flex-direction: column;
}
.tarjetas .tarjeta .acciones--sep {
  margin-block-start: auto;
}

/* Aplicaciones */
.aplicaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
}
.aplicacion {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--c-linea);
  border-radius: var(--radio);
  background-color: var(--c-superficie);
  box-shadow: var(--sombra-tarjeta);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicion), transform var(--transicion);
}
.aplicacion:hover {
  border-color: var(--c-acento-apagado);
  transform: translateY(-3px);
}
.aplicacion img,
.vertical__icono img {
  inline-size: 40px;
  block-size: 40px;
  opacity: 0.85;
  filter: var(--inv-icono);
  transition: opacity var(--transicion);
}
.aplicacion:hover img {
  opacity: 1;
}
.aplicacion h3 {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
}
.aplicacion p {
  font-size: var(--t-min);
  color: var(--c-texto-2);
  margin: 0;
}
.aplicacion .enlace-flecha {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: var(--t-min);
}

/* Bloque a dos columnas */
.duo {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}
.duo__visual {
  position: relative;
}
.duo__visual img {
  width: 100%;
  height: auto;
}

.lista-marcada {
  list-style: none;
  display: grid;
  gap: 0.85rem;
}
.lista-marcada li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: var(--t-sm);
  color: var(--c-texto-2);
}
.lista-marcada svg {
  inline-size: 18px;
  block-size: 18px;
  color: var(--c-acento-tinta);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Foto documental

   Todas las fotos reales del sitio pasan por aca, con el mismo ancho maximo.
   Los entornos son de calle: a tamano grande compiten con el sujeto, y
   achicados pasan a ser textura. Por eso van contenidas, nunca a sangre ni a
   ancho de columna, y siempre con pie: la foto chica pide un texto que la
   explique, y el pie hace el trabajo que antes hacia el tamano.

   En celular van a ancho completo. Ahi el problema no existe: no hay lugar
   para que la foto compita con nada.

   Los graficos y las ilustraciones NO usan este componente: pueden ir
   grandes, y conviene que la diferencia se note.
   -------------------------------------------------------------------------- */
.foto-doc {
  margin: 0;
  max-inline-size: 100%;
}
.foto-doc img {
  width: 100%;
  height: auto;
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-foto);
}
.foto-doc figcaption {
  margin-block-start: 0.7rem;
  font-size: var(--t-min);
  line-height: 1.45;
  color: var(--c-texto-3);
  max-inline-size: 38ch;
}

/* --------------------------------------------------------------------------
   Esquema

   La contracara del componente de foto: los graficos propios SI van grandes.
   Esa diferencia de escala es la que hace legible el criterio de las fotos
   contenidas. Se lee por forma y por rotulo, no por color: el area va
   punteada, los equipos son cuadrados, lo que se despliega son circulos
   concentricos y la plataforma es un panel. En blanco y negro se entiende
   igual.
   -------------------------------------------------------------------------- */
.esquema-fig {
  margin: 0;
}
.esquema-caja {
  overflow-x: auto;
}
.esquema {
  display: block;
  inline-size: 100%;
  /* en pantallas chicas no se achica hasta volver ilegibles los rotulos: se
     desplaza en horizontal dentro de su caja */
  min-inline-size: 560px;
  max-inline-size: 820px;
  block-size: auto;
}
.esquema-fig figcaption {
  margin-block-start: 0.9rem;
  font-size: var(--t-min);
  color: var(--c-texto-3);
  max-inline-size: 52ch;
}

.esquema__area {
  fill: var(--c-acento-velo-suave);
  stroke: var(--c-esquema-guia);
  stroke-width: 2;
  stroke-dasharray: 9 8;
}
.esquema__equipo {
  fill: var(--c-superficie);
  stroke: var(--c-texto-2);
  stroke-width: 2;
}
.esquema__nodo {
  fill: none;
  stroke: var(--c-texto);
  stroke-width: 2;
}
.esquema__punto {
  fill: var(--c-esquema-trazo);
}
.esquema__onda {
  fill: none;
  stroke: var(--c-esquema-trazo);
  stroke-width: 2;
  stroke-linecap: round;
  animation: esquema-onda 3.2s ease-in-out infinite;
}
.esquema__onda--tarde {
  animation-delay: 0.5s;
}
.esquema__flujo {
  fill: none;
  stroke: var(--c-esquema-trazo);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 9 9;
  animation: esquema-flujo 2.6s linear infinite;
}
.esquema__punta {
  fill: var(--c-esquema-trazo);
}
.esquema__panel {
  fill: var(--c-superficie);
  stroke: var(--c-esquema-guia);
  stroke-width: 2;
}
.esquema__pantalla {
  fill: none;
  stroke: var(--c-esquema-guia);
  stroke-width: 1.5;
}
.esquema__ruta {
  fill: none;
  stroke: var(--c-esquema-trazo);
  stroke-width: 2;
  stroke-linecap: round;
}
.esquema__guia {
  fill: none;
  stroke: var(--c-esquema-guia);
  stroke-width: 1.5;
}
.esquema__ruta--fuerte {
  stroke-width: 2.8;
}
.esquema__alerta {
  fill: none;
  stroke: var(--c-esquema-trazo);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.esquema__eje {
  fill: none;
  stroke: var(--c-esquema-guia);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.esquema__rotulo {
  fill: var(--c-texto-2);
  font-family: var(--f-titulo);
  font-size: 17px;
  font-weight: 500;
}
.esquema__rotulo--chico {
  font-size: 13px;
  letter-spacing: 0.02em;
}

@keyframes esquema-onda {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}
@keyframes esquema-flujo {
  to {
    stroke-dashoffset: -36;
  }
}

/* Par de fotos: mismo alto y alineadas arriba. El aspect-ratio las empareja
   aunque en el futuro entren dos fotos de proporciones distintas. */
.fotos-doc {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.fotos-doc img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   13. Productos: verticales con ancla propia
   -------------------------------------------------------------------------- */
.indice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.indice a {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--c-linea);
  border-radius: 100px;
  background-color: var(--c-superficie);
  color: var(--c-texto-2);
  font-size: var(--t-min);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--transicion), color var(--transicion);
}
.indice a:hover {
  border-color: var(--c-acento-apagado);
  color: var(--c-texto);
}

.vertical {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-block-start: 1px solid var(--c-linea);
  scroll-margin-block-start: 7rem;
}
.vertical:first-of-type {
  border-block-start: 0;
  padding-block-start: 0;
}
.vertical__cabeza {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.vertical__cabeza h2 {
  margin: 0;
  font-size: var(--t-h3);
}
.vertical__cuerpo > p:first-child {
  color: var(--c-texto);
  font-size: var(--t-lead);
  line-height: 1.5;
}
.vertical__cuerpo p {
  color: var(--c-texto-2);
}
.vertical .lista-marcada {
  margin-block: 1.5rem;
}
.vertical .foto-doc {
  margin-block: 1.75rem;
}
/* Line-up de formatos: sin cromo de tarjeta, la foto y el nombre alcanzan.
   No usa la tecnica de gap sobre fondo de linea, asi que si un dia son cuatro
   o seis no aparece ninguna celda fantasma. */
.formatos-titulo {
  scroll-margin-block-start: 7rem;
}
.formatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin-block: 1.5rem;
}
.formato h4 {
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
  color: var(--c-texto);
  margin-bottom: 0.35em;
}
.formato p {
  font-size: var(--t-min);
  color: var(--c-texto-2);
  margin: 0;
}
.formato .foto-doc {
  margin-block-end: 0.85rem;
}

/* El componente de precio se saco junto con el rotulo de /productos/: no se
   publican precios en el sitio, se consultan por WhatsApp. */

/* --------------------------------------------------------------------------
   14. Plataforma
   -------------------------------------------------------------------------- */
/* Las separaciones las dibuja cada celda, no el fondo del contenedor. Con la
   tecnica de "gap de 1px sobre fondo de linea", una grilla de 5 tarjetas en 3
   columnas pinta la celda sobrante del color de la linea y se lee como una
   tarjeta vacia. Asi, la celda que sobra simplemente no existe. */
.pantallas {
  display: grid;
  border: 1px solid var(--c-linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.pantalla {
  background-color: var(--c-fondo);
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border-inline-start: 1px solid var(--c-linea);
  border-block-start: 1px solid var(--c-linea);
  margin-inline-start: -1px;
  margin-block-start: -1px;
}
.pantalla__icono {
  display: block;
  inline-size: 24px;
  block-size: 24px;
  color: var(--c-acento-tinta);
  margin-bottom: 1.25rem;
}
.pantalla h3 {
  margin-bottom: 0.45em;
}
.pantalla p {
  font-size: var(--t-sm);
  color: var(--c-texto-2);
}

/* --------------------------------------------------------------------------
   15. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 0.6rem;
}
.faq details {
  border: 1px solid var(--c-linea);
  border-radius: var(--radio-sm);
  background-color: var(--c-superficie);
  box-shadow: var(--sombra-tarjeta);
  transition: border-color var(--transicion);
}
.faq details[open] {
  border-color: var(--c-linea-fuerte);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: var(--t-base);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  flex: none;
  border-inline-end: 1.5px solid var(--c-acento-tinta);
  border-block-end: 1.5px solid var(--c-acento-tinta);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicion);
}
.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.faq__cuerpo {
  padding: 0 1.25rem 1.25rem;
  color: var(--c-texto-2);
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   16. Contacto, socios y cierre
   -------------------------------------------------------------------------- */
.canales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 1rem;
}
.canal {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--c-linea);
  border-radius: var(--radio);
  background-color: var(--c-superficie);
  box-shadow: var(--sombra-tarjeta);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicion);
}
.canal:hover {
  border-color: var(--c-acento-apagado);
}
.canal__icono {
  display: block;
  inline-size: 20px;
  block-size: 20px;
  color: var(--c-acento-tinta);
  margin-bottom: 0.7rem;
}
.canal__dato {
  font-family: var(--f-titulo);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-texto);
  overflow-wrap: anywhere;
}
.canal__nota {
  font-size: var(--t-min);
  color: var(--c-texto-3);
}

.socio {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--c-linea);
  border-radius: var(--radio);
  background-color: var(--c-superficie);
  box-shadow: var(--sombra-tarjeta);
}
.socio__logo {
  justify-self: start;
  padding: 0.85rem;
  border-radius: var(--radio);
  background-color: var(--c-chip);
}
.socio__logo img {
  inline-size: 84px;
  block-size: 84px;
}
.socio p {
  color: var(--c-texto-2);
  margin: 0;
}

/* La tarjeta entera es clickeable, pero el enlace real sigue siendo el titulo:
   asi el texto del enlace es "Somos miembros de CERSAT" y no el parrafo entero,
   y el texto se puede seguir seleccionando. El ::after es el que cubre la
   tarjeta. */
.socio__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
}
.socio__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.socio__enlace svg {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  color: var(--c-acento-tinta);
}
.socio:has(.socio__enlace:hover) {
  border-color: var(--c-acento-apagado);
}
.socio__enlace:hover {
  color: var(--c-acento-tinta);
}

.cierre {
  position: relative;
  overflow: hidden;
  border-block-start: 1px solid var(--c-linea);
}
.cierre__caja {
  position: relative;
  text-align: center;
}
/* El centrado es de la caja, no de la seccion: asi .cierre sirve tambien para
   un cierre con varios llamados, que no va centrado. */
.cierre__caja h2 {
  max-width: 22ch;
  margin-inline: auto;
}
.cierre__caja p {
  color: var(--c-texto-2);
  font-size: var(--t-lead);
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}
.cierre__caja .acciones {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   17. Pie y boton flotante
   -------------------------------------------------------------------------- */
.pie {
  position: relative;
  overflow: hidden;
  border-block-start: 1px solid var(--c-linea);
  background-color: var(--c-fondo-alt);
  padding-block-start: clamp(3rem, 6vw, 4.5rem);
  /* aire abajo para que el boton flotante no tape el contenido */
  padding-block-end: calc(6rem + env(safe-area-inset-bottom, 0px));
}
.pie__rejilla {
  position: relative;
  display: grid;
  gap: 2.5rem;
}
.pie h2 {
  font-size: var(--t-h3);
}
.pie__intro p {
  color: var(--c-texto-2);
  font-size: var(--t-sm);
  max-width: 34ch;
}
.pie ul {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.pie a {
  color: var(--c-texto-2);
  text-decoration: none;
  font-size: var(--t-sm);
}
.pie a:hover {
  color: var(--c-acento-tinta);
}
.pie__legal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--c-linea);
  color: var(--c-texto-3);
  font-size: var(--t-min);
}
ul.redes {
  display: flex;
  gap: 0.5rem;
  list-style: none;
}
.redes a {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border: 1px solid var(--c-linea);
  border-radius: var(--radio-sm);
  color: var(--c-texto-2);
  transition: border-color var(--transicion), color var(--transicion);
}
.redes a:hover {
  border-color: var(--c-acento-apagado);
  color: var(--c-acento-tinta);
}
.redes svg {
  inline-size: 17px;
  block-size: 17px;
}

/* Boton de tema. Vive en la cabecera y solo aparece si hay JS: sin JS el sitio
   queda en claro y un boton que no hace nada seria peor que no tenerlo. */
.cambia-tema {
  display: none;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  padding: 0;
  border: 1px solid var(--c-linea);
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--c-texto-2);
  cursor: pointer;
  flex: none;
  transition: border-color var(--transicion), color var(--transicion);
}
.hay-js .cambia-tema {
  display: grid;
}
.cambia-tema:hover {
  border-color: var(--c-acento-apagado);
  color: var(--c-acento-tinta);
}
.cambia-tema svg {
  inline-size: 18px;
  block-size: 18px;
}

.wsp {
  position: fixed;
  z-index: 90;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-inline-size: 52px;
  min-block-size: 52px;
  padding: 0.8rem 1.05rem;
  border-radius: 100px;
  background: var(--c-acento);
  color: var(--c-sobre-acento);
  font-size: var(--t-min);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-flotante);
  transition: transform var(--transicion), opacity var(--transicion),
    visibility var(--transicion), background-color var(--transicion);
}
.wsp:hover {
  background: var(--c-acento-claro);
}
.wsp svg {
  inline-size: 22px;
  block-size: 22px;
  flex: none;
}
.wsp__texto {
  display: none;
}

/* Con JS aparece recien despues de bajar un poco; sin JS queda siempre visible */
.hay-js .wsp {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.94);
}
.hay-js .wsp.esta-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Aparicion al entrar en pantalla */
.hay-js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hay-js .revelar.esta-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   18. Puntos de quiebre (mobile-first)
   -------------------------------------------------------------------------- */
@media (min-width: 40em) {
  .wsp__texto {
    display: inline;
  }
  .pasos {
    grid-template-columns: repeat(3, 1fr);
  }
  .franja {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  /* El tope de ancho arranca recien en tablet. En celular la foto ocupa todo
     el ancho disponible, que es lo correcto ahi. */
  .foto-doc {
    max-inline-size: var(--ancho-foto);
  }
  .fotos-doc {
    grid-template-columns: repeat(2, minmax(0, var(--ancho-foto)));
  }
  .fotos-doc .foto-doc {
    max-inline-size: 100%;
  }
  .pantallas {
    grid-template-columns: repeat(2, 1fr);
  }
  .pie__rejilla {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3rem;
  }
  .vertical {
    grid-template-columns: 230px 1fr;
  }
  .vertical__cabeza {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }
}

@media (min-width: 60em) {
  .cabecera__fila {
    flex-wrap: nowrap;
    padding-block: 0;
  }
  .nav {
    order: 0;
    width: auto;
    overflow: visible;
    border-block-start: 0;
    padding-block-start: 0;
  }
  .portada__rejilla {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .pantallas {
    grid-template-columns: repeat(3, 1fr);
  }
  .duo {
    grid-template-columns: 1fr 1fr;
  }
  .duo--invertido .duo__visual {
    order: -1;
  }
  .socio {
    grid-template-columns: auto 1fr;
  }
  .wsp {
    inset-block-end: calc(1.75rem + env(safe-area-inset-bottom, 0px));
    inset-inline-end: 1.75rem;
  }
  .pie {
    padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   19. Movimiento reducido e impresion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .senal::after {
    display: none;
  }
  .esquema__onda,
  .esquema__flujo {
    animation: none !important;
  }
  .esquema__onda {
    opacity: 0.85;
  }
  .hay-js .revelar {
    opacity: 1;
    transform: none;
  }
  .hay-js .wsp {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media print {
  .wsp,
  .reticula,
  .halo,
  .cabecera,
  .cambia-tema {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}