/* ==========================================================================
   Blueprint — hoja de estilo del sitio comercial
   ==========================================================================

   La referencia es cómo Apple presenta software: pantalla completa, una idea
   por sección, el producto fotografiado dentro del dispositivo real, y tipografía
   grande con tracking negativo. Nada de tarjetas de tres columnas con iconitos.

   Tres reglas que ordenan todo el archivo:

   1. **La jerarquía se hace con peso y espacio, no con color.** El azul de marca
      aparece poco y por eso significa algo cuando aparece.
   2. **El tracking depende del tamaño.** Negativo y fuerte en los titulares
      —las letras se separan ópticamente al crecer—, cero en el cuerpo, positivo
      en los rótulos pequeños en versalitas.
   3. **Sólo se anima `transform` y `opacity`.** Son las dos propiedades que el
      navegador compone en la GPU sin recalcular diseño ni repintar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* La paleta. El azul es #003153, el de la cianotipia con que se imprimían
     los planos, y es de donde sale el nombre del producto. */
  --azul: #003153;
  --azul-hondo: #001d30;
  --azul-medio: #0a4a75;
  --azul-vivo: #1a7fb8;
  --cian: #4fb8e8;
  --cian-palido: #d3f0fb;

  --tinta: #0a0e14;
  --tinta-suave: #33415c;
  --gris: #5b6b84;
  --gris-claro: #8a99b0;
  --linea: #e3e7ee;
  --linea-tenue: #eef1f6;

  --papel: #ffffff;
  --papel-2: #f5f6f8;
  --papel-3: #eceff4;

  --exito: #0f7a4a;
  --alerta: #a16207;
  --peligro: #b3261e;

  /* Curvas propias. Las de fábrica son demasiado suaves: no tienen el golpe
     que hace que una animación se lea como intencional. */
  --sale: cubic-bezier(0.23, 1, 0.32, 1);
  --entra-sale: cubic-bezier(0.77, 0, 0.175, 1);
  --cajon: cubic-bezier(0.32, 0.72, 0, 1);

  /* Sombras por altura. Cuanto más alto flota algo, más difusa y más baja. */
  --sombra-1: 0 1px 2px rgb(10 14 20 / 0.04), 0 1px 3px rgb(10 14 20 / 0.06);
  --sombra-2: 0 2px 4px rgb(10 14 20 / 0.04), 0 12px 28px rgb(10 14 20 / 0.08);
  --sombra-3: 0 4px 8px rgb(10 14 20 / 0.05), 0 32px 64px rgb(10 14 20 / 0.14);
  --sombra-4: 0 8px 16px rgb(10 14 20 / 0.06), 0 48px 96px rgb(10 14 20 / 0.22);

  --radio-s: 10px;
  --radio: 16px;
  --radio-l: 24px;
  --radio-xl: 34px;

  --ancho: 1160px;
  --ancho-texto: 700px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* El desplazamiento por ancla se detiene bajo la barra fija, no debajo. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  /* La fuente del sistema antes que una tipografía cargada: ya viene con
     tamaño óptico, tablas de tracking y ajuste de legibilidad, y no cuesta
     una descarga. En un Mac o un iPhone esto es SF Pro. */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
    'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--cian-palido); color: var(--azul-hondo); }

:focus-visible {
  outline: 2px solid var(--azul-vivo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Tipografía
   --------------------------------------------------------------------------

   El tracking se ajusta por tamaño y no una vez para todo. Un titular de 5rem
   con el tracking del cuerpo se ve desparramado; un texto de 15px con el
   tracking del titular se ve apretado y cuesta leerlo. */

.display {
  font-size: clamp(2.7rem, 7.4vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

.titular {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

.titulo {
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 650;
  margin: 0;
  text-wrap: balance;
}

.subtitulo {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: 0;
}

.entrada {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -0.014em;
  font-weight: 400;
  color: var(--tinta-suave);
  margin: 0;
  text-wrap: pretty;
}

.cuerpo { font-size: 1.0625rem; line-height: 1.6; color: var(--tinta-suave); margin: 0; text-wrap: pretty; }
.menor  { font-size: 0.9375rem; line-height: 1.55; color: var(--gris); margin: 0; }
.pie    { font-size: 0.8125rem; line-height: 1.5; color: var(--gris-claro); margin: 0; }

/* El rótulo en versalitas: tracking positivo, que es lo que necesita el texto
   chico en mayúsculas para no leerse como un bloque compacto. */
.rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul-vivo);
  margin: 0 0 14px;
}

.rotulo--claro { color: var(--cian); }

.destacar { color: var(--azul); font-weight: 600; }
.apagar { color: var(--gris-claro); }

/* --------------------------------------------------------------------------
   4. Estructura
   -------------------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}

.contenedor--angosto { max-width: 860px; }
.ancho-texto { max-width: var(--ancho-texto); }
.centrado { margin-inline: auto; text-align: center; }

.seccion { padding-block: clamp(72px, 11vw, 148px); }
.seccion--corta { padding-block: clamp(52px, 7vw, 92px); }
.seccion--alta { padding-block: clamp(96px, 15vw, 200px); }

/* Los fondos. Alternarlos es lo que da ritmo a una página larga: sin cambios
   de plano, veinte pantallas de scroll se sienten como una sola. */
.fondo-claro  { background: var(--papel); }
.fondo-gris   { background: var(--papel-2); }
.fondo-tinta  { background: var(--tinta); color: #fff; }
.fondo-azul   { background: var(--azul); color: #fff; }

.fondo-tinta .cuerpo, .fondo-azul .cuerpo,
.fondo-tinta .entrada, .fondo-azul .entrada { color: rgb(255 255 255 / 0.72); }
.fondo-tinta .menor, .fondo-azul .menor { color: rgb(255 255 255 / 0.6); }
.fondo-tinta .pie, .fondo-azul .pie { color: rgb(255 255 255 / 0.45); }
.fondo-tinta .destacar, .fondo-azul .destacar { color: var(--cian); }

/*
 * El plano: la retícula de fondo que le da nombre al producto.
 *
 * Va sólo sobre los fondos oscuros y muy tenue. Una cuadrícula que se lee como
 * cuadrícula compite con el texto; ésta se percibe más de lo que se ve.
 */
.plano {
  position: relative;
  background-color: var(--azul);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
  color: #fff;
}

.rejilla { display: grid; gap: clamp(20px, 3vw, 34px); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Dos columnas donde una es el texto y otra la imagen. */
.dupla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.dupla--invertida { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.dupla--invertida > :first-child { order: 2; }
.dupla--invertida > :last-child { order: 1; }

.pila { display: flex; flex-direction: column; }
.pila--s { gap: 10px; } .pila--m { gap: 20px; } .pila--l { gap: 34px; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  cursor: pointer;
  /* El feedback vive en la pulsación y dura poco: si tarda, la interfaz se
     siente lenta justo en el instante que el usuario está mirando. */
  transition: transform 140ms var(--sale), background-color 180ms ease, color 180ms ease,
    box-shadow 180ms ease, border-color 180ms ease;
}

.boton:active { transform: scale(0.97); }

.boton--primario { background: var(--azul); color: #fff; box-shadow: var(--sombra-1); }
.boton--primario:hover { background: var(--azul-medio); box-shadow: var(--sombra-2); }

.boton--claro { background: #fff; color: var(--azul); }
.boton--claro:hover { background: var(--cian-palido); }

.boton--linea {
  background: transparent;
  color: var(--azul);
  box-shadow: inset 0 0 0 1.5px var(--linea);
}
.boton--linea:hover { box-shadow: inset 0 0 0 1.5px var(--azul); }

.fondo-tinta .boton--linea, .fondo-azul .boton--linea, .plano .boton--linea {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.3);
}
.fondo-tinta .boton--linea:hover, .fondo-azul .boton--linea:hover, .plano .boton--linea:hover {
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.75);
}

/* El enlace con flecha. La flecha avanza en el hover: adelanta hacia dónde
   lleva el enlace antes de que lo toquen. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--azul-vivo);
  font-weight: 550;
  font-size: 1.0625rem;
}
.enlace-flecha svg { transition: transform 220ms var(--sale); }
.enlace-flecha:hover svg { transform: translateX(4px); }
.fondo-tinta .enlace-flecha, .fondo-azul .enlace-flecha, .plano .enlace-flecha { color: var(--cian); }

/* --------------------------------------------------------------------------
   6. Barra de navegación
   --------------------------------------------------------------------------

   Material translúcido con el contenido pasando por debajo, no una franja
   opaca que se come una tira de pantalla. */

.barra {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgb(10 14 20 / 0.07);
}

.barra__caja {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.barra__marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  margin-right: 12px;
}
.barra__marca svg { width: 26px; height: 26px; }

.barra__menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.barra__enlace {
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 480;
  color: var(--tinta-suave);
  transition: color 160ms ease, background-color 160ms ease;
  white-space: nowrap;
}
.barra__enlace:hover { color: var(--tinta); background: rgb(10 14 20 / 0.05); }
.barra__enlace[aria-current='page'] { color: var(--azul); font-weight: 600; }

.barra__cta { margin-left: 10px; min-height: 38px; padding: 0 18px; font-size: 0.9375rem; }

.barra__hamburguesa {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 9px;
  border-radius: 10px;
  cursor: pointer;
}
.barra__hamburguesa:hover { background: rgb(10 14 20 / 0.05); }

/* El cajón del teléfono. Entra y sale por el mismo camino: si entrara desde
   arriba y saliera hacia el lado, el espacio dejaría de ser predecible. */
.cajon {
  position: fixed;
  inset: 56px 0 auto;
  z-index: 99;
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid var(--linea);
  padding: 12px 24px 22px;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 260ms var(--cajon), opacity 200ms ease, visibility 260ms;
  visibility: hidden;
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
}
.cajon[data-abierto='si'] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.cajon a {
  display: block;
  padding: 13px 4px;
  font-size: 1.0625rem;
  font-weight: 500;
  border-bottom: 1px solid var(--linea-tenue);
}
.cajon a:last-of-type { border-bottom: 0; }

/* --------------------------------------------------------------------------
   7. Dispositivos
   --------------------------------------------------------------------------

   Los marcos se dibujan con CSS y no con una imagen PNG. Tres motivos: pesan
   cero, se ven nítidos en cualquier densidad de pantalla, y la captura de
   adentro se puede cambiar sin volver a recortar nada. */

/* --- Portátil ---------------------------------------------------------- */

.mac { width: 100%; max-width: 980px; margin-inline: auto; }

.mac__pantalla {
  position: relative;
  border-radius: 16px 16px 4px 4px;
  padding: 11px 11px 12px;
  background: linear-gradient(170deg, #2b3340, #14181f 55%, #0c0f14);
  box-shadow: var(--sombra-4);
}

/* La muesca de la cámara. Es el detalle que hace que el marco se lea como un
   MacBook y no como un rectángulo negro cualquiera. */
.mac__pantalla::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 5px;
  border-radius: 0 0 6px 6px;
  background: #0a0d12;
}

.mac__vidrio {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 16 / 10;
}
.mac__vidrio img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* El reflejo diagonal del vidrio. Muy tenue: si se nota, ensucia la captura. */
.mac__vidrio::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(102deg, rgb(255 255 255 / 0.1) 0 18%, transparent 42%);
}

.mac__base {
  height: 13px;
  background: linear-gradient(180deg, #b9bfc9, #7d8794 62%, #5d6673);
  border-radius: 0 0 11px 11px;
  margin-inline: -3.2%;
  position: relative;
  box-shadow: 0 12px 24px rgb(10 14 20 / 0.24);
}
.mac__base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  height: 5px;
  border-radius: 0 0 7px 7px;
  background: #6c7583;
}

/* --- Teléfono ---------------------------------------------------------- */

.iphone {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  border-radius: 46px;
  padding: 11px;
  background: linear-gradient(150deg, #4a5260, #22262e 45%, #33383f);
  box-shadow: var(--sombra-4);
}

.iphone__vidrio {
  position: relative;
  border-radius: 36px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 393 / 852;
}
.iphone__vidrio img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* La isla dinámica */
.iphone::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 24px;
  border-radius: 999px;
  background: #0a0d12;
  z-index: 2;
}

/* La barra del gesto de inicio */
.iphone__vidrio::after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 4px;
  border-radius: 999px;
  background: rgb(10 14 20 / 0.28);
  z-index: 2;
}

.iphone--chico { max-width: 236px; border-radius: 38px; padding: 9px; }
.iphone--chico .iphone__vidrio { border-radius: 30px; }
.iphone--chico::after { top: 18px; width: 66px; height: 20px; }

/* --- Tableta ------------------------------------------------------------ */

.ipad {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  border-radius: 26px;
  padding: 14px;
  background: linear-gradient(150deg, #4a5260, #23272f 50%, #363b43);
  box-shadow: var(--sombra-4);
}
.ipad__vidrio {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 4 / 3;
}
.ipad__vidrio img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Una captura sin marco, cuando lo que importa es el detalle y no el soporte. */
.lamina {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-3);
  background: #fff;
  border: 1px solid var(--linea);
}
.lamina img { width: 100%; }
.lamina--recorte img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }

/* --------------------------------------------------------------------------
   8. Tarjetas y bloques
   -------------------------------------------------------------------------- */

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-l);
  padding: clamp(24px, 3vw, 34px);
  transition: transform 300ms var(--sale), box-shadow 300ms var(--sale),
    border-color 300ms ease;
}
.tarjeta--elevada { box-shadow: var(--sombra-2); border-color: transparent; }

@media (hover: hover) and (pointer: fine) {
  .tarjeta--viva:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-3);
    border-color: transparent;
  }
}

.fondo-gris .tarjeta { background: #fff; }
.fondo-tinta .tarjeta, .fondo-azul .tarjeta, .plano .tarjeta {
  background: rgb(255 255 255 / 0.045);
  border-color: rgb(255 255 255 / 0.11);
}

/*
 * El bloque de ley: el corazón argumental del sitio.
 *
 * Cada función se justifica con la norma que hay detrás, y esa norma se
 * presenta siempre igual —artículo, qué obliga, qué pasa si falta, y la
 * fuente—. Repetir la forma es lo que hace que el lector aprenda a leerla de
 * un vistazo a partir del tercer bloque.
 */
.ley {
  border-left: 3px solid var(--azul-vivo);
  padding: 4px 0 4px 22px;
}
.ley__norma {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-vivo);
  margin: 0 0 8px;
}
.ley__dice { font-size: 1.0625rem; line-height: 1.55; color: var(--tinta); margin: 0 0 10px; }
.ley__consecuencia { font-size: 0.9375rem; line-height: 1.55; color: var(--gris); margin: 0; }
.ley__fuente { font-size: 0.8125rem; color: var(--gris-claro); margin: 10px 0 0; }

.plano .ley, .fondo-tinta .ley, .fondo-azul .ley { border-left-color: var(--cian); }
.plano .ley__norma, .fondo-tinta .ley__norma, .fondo-azul .ley__norma { color: var(--cian); }
.plano .ley__dice, .fondo-tinta .ley__dice, .fondo-azul .ley__dice { color: #fff; }
.plano .ley__consecuencia, .fondo-tinta .ley__consecuencia, .fondo-azul .ley__consecuencia { color: rgb(255 255 255 / 0.68); }
.plano .ley__fuente, .fondo-tinta .ley__fuente, .fondo-azul .ley__fuente { color: rgb(255 255 255 / 0.42); }

/* La cifra grande, para un número que hace el argumento solo. */
.cifra {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.plano .cifra, .fondo-tinta .cifra, .fondo-azul .cifra { color: var(--cian); }

.marca-agua {
  font-size: clamp(4rem, 14vw, 11rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-weight: 700;
  color: rgb(255 255 255 / 0.055);
  user-select: none;
  pointer-events: none;
}

.insignia {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  background: var(--cian-palido);
  color: var(--azul);
}
.plano .insignia, .fondo-tinta .insignia, .fondo-azul .insignia {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

.lista-marcas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lista-marcas li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.lista-marcas svg { margin-top: 4px; color: var(--azul-vivo); }
.fondo-tinta .lista-marcas li, .fondo-azul .lista-marcas li, .plano .lista-marcas li { color: rgb(255 255 255 / 0.78); }
.fondo-tinta .lista-marcas svg, .fondo-azul .lista-marcas svg, .plano .lista-marcas svg { color: var(--cian); }

.separador { height: 1px; background: var(--linea); border: 0; margin: 0; }
.plano .separador, .fondo-tinta .separador, .fondo-azul .separador { background: rgb(255 255 255 / 0.13); }

/* Los tres estilos de texto corriente fijan su color en gris —correcto sobre
   papel— y ese color pisa el `color: #fff` que hereda del fondo oscuro. Sin
   esto, el subtítulo del hero queda gris oscuro sobre azul oscuro: legible en
   la pantalla del que lo diseñó y no en la del que lo visita. Se reponen los
   tres, con la jerarquía traducida a opacidad en vez de a gris. */
.plano .entrada, .fondo-tinta .entrada, .fondo-azul .entrada { color: rgb(255 255 255 / 0.86); }
.plano .cuerpo,  .fondo-tinta .cuerpo,  .fondo-azul .cuerpo  { color: rgb(255 255 255 / 0.80); }
.plano .menor,   .fondo-tinta .menor,   .fondo-azul .menor   { color: rgb(255 255 255 / 0.66); }


/* --------------------------------------------------------------------------
   9. Acordeón (preguntas)
   -------------------------------------------------------------------------- */

.acordeon { border-top: 1px solid var(--linea); }
.acordeon__item { border-bottom: 1px solid var(--linea); }

.acordeon__boton {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 2px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1.125rem;
  font-weight: 560;
  letter-spacing: -0.014em;
  cursor: pointer;
  color: var(--tinta);
}
.acordeon__signo {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  position: relative;
  transition: transform 280ms var(--sale);
}
.acordeon__signo::before, .acordeon__signo::after {
  content: '';
  position: absolute;
  background: var(--azul-vivo);
  border-radius: 2px;
  inset: 50% 2px auto;
  height: 2px;
  transform: translateY(-50%);
}
.acordeon__signo::after { transform: translateY(-50%) rotate(90deg); transition: transform 280ms var(--sale); }
.acordeon__item[data-abierto='si'] .acordeon__signo::after { transform: translateY(-50%) rotate(0deg); }

/* `grid-template-rows` de 0fr a 1fr es lo que permite animar hasta la altura
   real del contenido sin medirla con JavaScript. */
.acordeon__cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--sale);
}
.acordeon__item[data-abierto='si'] .acordeon__cuerpo { grid-template-rows: 1fr; }
.acordeon__interior { overflow: hidden; }
.acordeon__interior > * { padding-bottom: 26px; padding-right: 42px; }

/* --------------------------------------------------------------------------
   10. Formulario
   -------------------------------------------------------------------------- */

.campo { display: grid; gap: 7px; }
.campo label { font-size: 0.9375rem; font-weight: 550; color: var(--tinta); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 12px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.campo textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul-vivo);
  box-shadow: 0 0 0 3px rgb(26 127 184 / 0.15);
}
.campo__ayuda { font-size: 0.8125rem; color: var(--gris-claro); }
.campo__ayuda a { color: var(--azul-vivo); }

/* La trampa para robots. No se usa `display:none` ni `hidden`: los robots que
   valen algo omiten los campos ocultos de la forma obvia. Éste ocupa un lugar
   real en la página, fuera de la vista. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aviso-error {
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fdf2f2;
  border: 1px solid #f5c2c2;
  color: #8a2020;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.aviso-error a { color: inherit; text-decoration: underline; }

/* El formulario y la columna lateral no se reparten mitad y mitad: los campos
   necesitan ancho para no romper la línea de lectura, y la barra lateral solo
   sostiene tres datos. */
.dupla--formulario { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }

.formulario { display: grid; gap: 20px; margin-top: 30px; }
/* El botón no se estira a todo el ancho del formulario: un botón de 700px de
   ancho no parece un botón, parece una banda. */
.formulario .boton { justify-self: start; }

/* Pasos numerados: el número va afuera del texto, para que las líneas que
   siguen queden alineadas entre sí y no bajo el número. */
.pasos { list-style: none; counter-reset: paso; display: grid; gap: 16px; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 38px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gris);
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cian-palido);
  color: var(--azul);
  font-size: 0.8125rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.pasos li strong { color: var(--tinta); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Pie
   -------------------------------------------------------------------------- */

.pie-sitio { background: var(--tinta); color: rgb(255 255 255 / 0.62); padding-block: 68px 40px; }
.pie-sitio a { color: rgb(255 255 255 / 0.62); transition: color 160ms ease; }
.pie-sitio a:hover { color: #fff; }
.pie-sitio__rejilla {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 44px;
}
.pie-sitio__titulo {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.4);
  margin: 0 0 16px;
}
.pie-sitio ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 0.9375rem; }
.pie-sitio__legal {
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.42);
}

/* --------------------------------------------------------------------------
   12. Movimiento
   --------------------------------------------------------------------------

   La aparición por scroll: opacidad y un desplazamiento corto. Doce píxeles y
   no cuarenta — un recorrido largo llama la atención sobre la animación misma
   en vez de sobre el contenido, y en una página larga cansa. */

.aparece {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--sale), transform 620ms var(--sale);
  will-change: opacity, transform;
}
.aparece[data-visible='si'] { opacity: 1; transform: none; }

/* El escalonado. Entre 60 y 80 ms: más corto no se percibe como cascada, más
   largo hace que el último elemento parezca que llegó tarde. */
.aparece[data-retraso='1'] { transition-delay: 70ms; }
.aparece[data-retraso='2'] { transition-delay: 140ms; }
.aparece[data-retraso='3'] { transition-delay: 210ms; }
.aparece[data-retraso='4'] { transition-delay: 280ms; }
.aparece[data-retraso='5'] { transition-delay: 350ms; }

/* La imagen que se revela de abajo hacia arriba mientras entra en pantalla. */
.revela img { clip-path: inset(0 0 12% 0); transition: clip-path 900ms var(--sale); }
.revela[data-visible='si'] img { clip-path: inset(0 0 0 0); }

/* El bloque fijo mientras la columna de al lado se desplaza. Es el recurso que
   permite contar tres ideas sobre una misma pantalla del producto. */
.pegado { position: sticky; top: 96px; }

/* --------------------------------------------------------------------------
   13. Adaptación
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-sitio__rejilla { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  .barra__menu { display: none; }
  .barra__hamburguesa { display: block; }
  /* El botón se corre al hueco que deja el menú, para que quede pegado al
     hamburguesa y no flotando en el medio. */
  .barra__cta { margin-left: auto; }
  .rejilla--2, .rejilla--3 { grid-template-columns: minmax(0, 1fr); }
  .dupla, .dupla--invertida, .dupla--formulario { grid-template-columns: minmax(0, 1fr); }
  /* En una columna, la imagen va después del texto siempre: leer primero y
     mirar después es el orden natural cuando no caben lado a lado. */
  .dupla--invertida > :first-child { order: 0; }
  .dupla--invertida > :last-child { order: 0; }
  .pegado { position: static; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .contenedor { padding-inline: 20px; }
  .rejilla--4 { grid-template-columns: minmax(0, 1fr); }
  .pie-sitio__rejilla { grid-template-columns: 1fr; }
  .acordeon__interior > * { padding-right: 8px; }
  .boton { width: 100%; }
  .fila--botones .boton { width: auto; flex: 1 1 auto; }
  /* El botón de envío sí ocupa el ancho en teléfono: es la única acción de la
     pantalla y el pulgar agradece el blanco. */
  .formulario .boton { justify-self: stretch; width: 100%; }
  /* En teléfono, «Pedir una demostración» no cabe en una línea: parte en dos,
     la barra crece al doble de alto y el logo queda apretado contra un botón
     que ocupa media pantalla. Se saca de la barra —el mismo botón está dentro
     del menú, y además cada página termina en una llamada a la acción—, así
     que no se pierde ningún camino hacia el formulario. */
  .barra__cta { display: none; }
  .barra__hamburguesa { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   14. Preferencias del sistema
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Movimiento reducido no es "sin retroalimentación": lo que se quita es el
     desplazamiento, no la aparición. */
  .aparece { opacity: 1; transform: none; }
  .revela img { clip-path: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .barra, .cajon { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --gris: #3d4a5e; --gris-claro: #5b6b84; --linea: #b9c1cd; }
  .tarjeta { border-color: var(--gris-claro); }
}

@media print {
  .barra, .cajon, .boton { display: none !important; }
  .aparece { opacity: 1 !important; transform: none !important; }
  body { font-size: 11pt; }
}