/* ==========================================================================
   Cotizame - sitio publico
   Tokens, tipografia y layout. Modo claro y oscuro.

   Tres reglas que no hay que deshacer sin querer:
   1. El acento verde es el MISMO de la aplicacion (#10b981 claro / #34d399
      oscuro, tomados de sus variables de PrimeNG). Quien entra desde aqui al
      producto no debe sentir que cambio de programa.
   2. Todo se sirve desde este servidor: tipografia en /tipografia, iconos
      embebidos como sprite en el HTML. Cero peticiones a dominios de terceros.
   3. Nada de contenido escondido con opacity para revelarlo al hacer scroll.
      La pagina se lee completa sin JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografia (autohospedada, subconjunto latino: cubre los acentos y la ñ)

   Archivo para todo y IBM Plex Mono solo para las cifras de los planes. Las dos
   se eligieron a proposito lejos de Geist e Inter, que estan en tantos sitios
   generados que ya no distinguen a nadie: aqui la tipografia ES la identidad,
   porque la marca no tiene logo, solo su nombre escrito.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('tipografia/archivo-latin.woff2') format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('tipografia/plex-mono-latin.woff2') format('woff2');
  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;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --fondo: #ffffff;
  --fondo-alterno: #fafafa;
  --fondo-hundido: #f4f4f5;
  --superficie: #ffffff;
  --borde: #e4e4e7;
  --borde-fuerte: #d4d4d8;

  --texto: #18181b;
  --texto-suave: #52525b;
  --texto-tenue: #71717a;

  --acento: #10b981;          /* relleno y bordes */
  --acento-hover: #0ca678;    /* relleno del boton al pasar el cursor */
  --acento-fuerte: #047857;   /* acento como TEXTO sobre fondo claro (5.5:1) */
  --acento-tenue: #ecfdf5;
  --acento-borde: #a7f3d0;
  --sobre-acento: #04231a;    /* texto sobre el relleno de acento (6.5:1) */

  --error: #b91c1c;

  /* Marco de las capturas: la aplicacion real es oscura, asi que su marco es
     oscuro en los dos modos. Es una superficie de producto, no del sitio. */
  --marco-fondo: #101013;
  --marco-borde: #26262b;

  --r-boton: 10px;
  --r-tarjeta: 16px;
  --r-marco: 18px;
  --r-pastilla: 999px;

  --ancho: 1200px;
  --sombra: 0 1px 2px rgb(24 24 27 / 0.04), 0 8px 24px -12px rgb(24 24 27 / 0.12);
  --sombra-alta: 0 2px 4px rgb(24 24 27 / 0.05), 0 24px 48px -24px rgb(24 24 27 / 0.22);

  --paso: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    color-scheme: dark;

    --fondo: #0b0b0d;
    --fondo-alterno: #101013;
    --fondo-hundido: #151518;
    --superficie: #141417;
    --borde: #26262b;
    --borde-fuerte: #3f3f46;

    --texto: #fafafa;
    --texto-suave: #a1a1aa;
    --texto-tenue: #8b8b94;

    --acento: #34d399;
    --acento-hover: #6ee7b7;
    --acento-fuerte: #6ee7b7;
    --acento-tenue: #0a2a20;
    --acento-borde: #14503c;
    --sobre-acento: #04231a;

    --error: #f87171;

    --marco-fondo: #101013;
    --marco-borde: #2f2f36;

    --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
    --sombra-alta: 0 2px 4px rgb(0 0 0 / 0.5), 0 24px 48px -24px rgb(0 0 0 / 0.8);
  }
}

:root[data-tema='oscuro'] {
  color-scheme: dark;

  --fondo: #0b0b0d;
  --fondo-alterno: #101013;
  --fondo-hundido: #151518;
  --superficie: #141417;
  --borde: #26262b;
  --borde-fuerte: #3f3f46;

  --texto: #fafafa;
  --texto-suave: #a1a1aa;
  --texto-tenue: #8b8b94;

  --acento: #34d399;
  --acento-hover: #6ee7b7;
  --acento-fuerte: #6ee7b7;
  --acento-tenue: #0a2a20;
  --acento-borde: #14503c;
  --sobre-acento: #04231a;

  --error: #f87171;

  --marco-fondo: #101013;
  --marco-borde: #2f2f36;

  --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
  --sombra-alta: 0 2px 4px rgb(0 0 0 / 0.5), 0 24px 48px -24px rgb(0 0 0 / 0.8);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  letter-spacing: -0.022em;
  line-height: 1.12;
  font-weight: 600;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* Sin border-radius propio: el contorno del foco ya sigue el radio de cada
   elemento, y forzar 4px le cambiaba la forma al boton al recibir el foco. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   4. Primitivas de layout
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}

.seccion { padding-block: 88px; }
.seccion--alterna { background: var(--fondo-alterno); border-block: 1px solid var(--borde); }

.titulo-seccion {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  max-width: 22ch;
}

.parrafo-seccion {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--texto-suave);
  font-size: 1.0625rem;
}

/* Linea corta que nombra al publico antes del titular. Es la unica del sitio:
   una etiqueta encima de cada seccion vuelve la pagina un formulario. */
.etiqueta {
  display: block;
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--acento-fuerte);
}

.cifra {
  font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-boton);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--paso), border-color var(--paso),
              color var(--paso), transform var(--paso);
}

.boton--principal {
  background: var(--acento);
  color: var(--sobre-acento);
}
.boton--principal:hover { background: var(--acento-hover); }
.boton--principal:active { transform: translateY(1px); }

.boton--secundario {
  background: var(--superficie);
  border-color: var(--borde-fuerte);
  color: var(--texto);
}
.boton--secundario:hover { border-color: var(--acento); color: var(--acento-fuerte); }
.boton--secundario:active { transform: translateY(1px); }

.boton--ancho { width: 100%; }

/* --------------------------------------------------------------------------
   6. Barra superior
   -------------------------------------------------------------------------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--texto);
}

.marca__sello {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--acento);
  color: var(--sobre-acento);
}
.marca__sello .icono { width: 19px; height: 19px; }

.navegacion { display: flex; align-items: center; gap: 28px; }

.navegacion a {
  font-size: 0.9375rem;
  color: var(--texto-suave);
  text-decoration: none;
  transition: color var(--paso);
}
.navegacion a:hover { color: var(--texto); }

.barra__acciones { display: flex; align-items: center; gap: 12px; }

.boton-icono {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--r-boton);
  color: var(--texto-suave);
  cursor: pointer;
  transition: color var(--paso), border-color var(--paso);
}
.boton-icono:hover { color: var(--texto); border-color: var(--borde-fuerte); }

.boton-menu { display: none; }

/* --------------------------------------------------------------------------
   7. Portada
   -------------------------------------------------------------------------- */
.portada {
  padding-top: 72px;
  padding-bottom: 88px;
  overflow: hidden;
}

/* Titular y video lado a lado: el video es lo primero que se ve, pero junto al
   titular que dice que es esto y para quien. Mas columna para el video, porque
   dentro va la aplicacion y a media pantalla su texto ya es chico. */
.portada__principal {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}

/* El texto no pasa de 48rem aunque el contenedor sea mas ancho: una linea de
   titular de 90 caracteres no se lee. */
.portada__texto { max-width: 48rem; }

.portada h1 {
  font-size: clamp(1.9rem, 1.25rem + 2.1vw, 2.75rem);
}

.portada__entrada {
  margin-top: 20px;
  max-width: 46ch;
  font-size: 1.125rem;
  color: var(--texto-suave);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Lo que incluye el sistema, debajo del titular. Va sin tarjetas: son seis cosas
   del mismo peso, y encerrar cada una en una caja solo agrega seis bordes. Las
   separa el aire y una linea arriba que las despega de los botones. */
.capacidades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 44px;
  margin-top: 56px;
  padding-top: 52px;
  border-top: 1px solid var(--borde);
}

.capacidad {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.capacidad__sello {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--acento-borde);
  background: var(--acento-tenue);
  color: var(--acento-fuerte);
}
.capacidad__sello .icono { width: 21px; height: 21px; }

.capacidad__titulo {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--texto);
}

.capacidad p:not(.capacidad__titulo) {
  max-width: 46ch;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.marco {
  border: 1px solid var(--marco-borde);
  border-radius: var(--r-marco);
  background: var(--marco-fondo);
  padding: 8px;
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.marco img { border-radius: calc(var(--r-marco) - 9px); }

.pie-figura {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--texto-tenue);
}

/* Video de demostracion. No usa .marco: el video ya trae su propia ventana
   oscura, y el marco del sitio encima lo dejaria con dos.
   Al tocarlo se amplia al centro con sonido (sitio.js): el marco pasa a fixed y
   la figura conserva su alto, para que la pagina no salte mientras esta afuera. */
.demo { margin: 0; aspect-ratio: 16 / 9; }

.demo__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--borde);
  border-radius: var(--r-marco);
  background: var(--fondo-hundido);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  transform-origin: 0 0;
}
.demo__marco[role='button'] { cursor: zoom-in; }
.demo__marco:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.demo__video {
  display: block;
  width: 100%;
  height: 100%;
}

/* Arriba a la derecha y no abajo: abajo a la derecha el video muestra el
   cronometro. Es solo una etiqueta: el boton es el video entero. */
.demo__pista {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 13px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-pastilla);
  background: rgb(24 24 27 / 0.86);
  color: #fafafa;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
  transition: background-color var(--paso), color var(--paso);
}
/* display: inline-flex le gana al [hidden] del navegador: sin esto la etiqueta
   se veria sin JavaScript, cuando el video no se amplia. */
.demo__pista[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .demo__marco[role='button']:hover .demo__pista { background: var(--acento); color: var(--sobre-acento); border-color: transparent; }
}

/* Ampliado: por encima de la barra superior (z-index 20) y del fondo oscuro */
.demo__marco--ampliado {
  position: fixed;
  z-index: 1001;
  border-color: rgb(255 255 255 / 0.08);
  box-shadow: 0 40px 120px -20px rgb(0 0 0 / 0.7);
}
.demo__marco[role='button'].demo__marco--ampliado { cursor: default; }
.demo__marco--ampliado .demo__pista { display: none; }

.demo__fondo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgb(9 9 11 / 0.84);
  cursor: zoom-out;
}

/* --------------------------------------------------------------------------
   7b. Recorrido (como funciona)

   Cinco pasos en fila, unidos por una linea que pasa por detras de los circulos.
   La linea es lo que dice "esto va en orden": no hacen falta rotulos de "Paso 1",
   que ademas envejecen mal si un dia se agrega un paso en medio.

   En pantalla angosta la fila se vuelve columna y la linea se pone vertical, a la
   izquierda de los circulos, que es como se lee una secuencia en un telefono.
   -------------------------------------------------------------------------- */
.flujo {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  margin-top: 52px;
  padding: 0;
  list-style: none;
}

.paso { position: relative; }

.paso__marca {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid var(--acento-borde);
  background: var(--acento-tenue);
  color: var(--acento-fuerte);
}
.paso__marca .icono { width: 26px; height: 26px; }

/* El tramo hacia el paso siguiente. Cruza el hueco de la rejilla, por eso el
   right negativo vale lo mismo que el gap. */
.paso:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 56px;
  right: -28px;
  height: 1px;
  background: var(--borde-fuerte);
}

.paso h3 {
  margin-bottom: 8px;
  font-size: 1.0625rem;
}

.paso p {
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   8. Bloque de producto (texto + captura)
   -------------------------------------------------------------------------- */
.bloque {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.bloque--invertido .bloque__texto { order: 2; }

.lista-puntos { margin-top: 24px; }
.lista-puntos li {
  display: flex;
  gap: 12px;
  padding-block: 8px;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.lista-puntos .icono { margin-top: 3px; width: 1.05em; height: 1.05em; color: var(--acento-fuerte); }

/* --------------------------------------------------------------------------
   9. Planes
   -------------------------------------------------------------------------- */
.planes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
}

.plan--recomendado {
  border-color: var(--acento);
  box-shadow: var(--sombra);
  padding-top: 22px;
}

.plan__encabezado { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan__nombre { font-size: 1.0625rem; font-weight: 600; }

.plan__insignia {
  padding: 4px 11px;
  border-radius: var(--r-pastilla);
  background: var(--acento);
  color: var(--sobre-acento);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan__precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.plan__precio .cifra {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan__periodo { font-size: 0.9375rem; color: var(--texto-tenue); }
.plan__anual { font-size: 0.875rem; color: var(--texto-tenue); }
.plan__para { font-size: 0.9375rem; color: var(--texto-suave); }

.plan__limites { display: grid; gap: 10px; }
.plan__limites li {
  display: flex;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.plan__limites .icono { margin-top: 3px; width: 1.05em; height: 1.05em; color: var(--acento-fuerte); }

.nota-planes {
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--texto-tenue);
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Preguntas
   -------------------------------------------------------------------------- */
.preguntas { margin-top: 36px; max-width: 78ch; }

.pregunta {
  border-bottom: 1px solid var(--borde);
}
.pregunta > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  transition: color var(--paso);
}
.pregunta > summary::-webkit-details-marker { display: none; }
.pregunta > summary:hover { color: var(--acento-fuerte); }
.pregunta > summary .icono { color: var(--texto-tenue); transition: transform var(--paso); }
.pregunta[open] > summary .icono { transform: rotate(90deg); }
.pregunta__cuerpo {
  padding-bottom: 22px;
  max-width: 68ch;
  color: var(--texto-suave);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   11. Contacto
   -------------------------------------------------------------------------- */
.contacto {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: 56px;
  align-items: start;
}

.formulario {
  display: grid;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
}

.campo { display: grid; gap: 7px; }

.campo label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-boton);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color var(--paso);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--texto-tenue); }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-tenue); }

.campo__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--error);
}
.campo__error .icono { width: 1em; height: 1em; }
.campo[data-invalido='si'] .campo__error { display: flex; }
.campo[data-invalido='si'] input,
.campo[data-invalido='si'] textarea { border-color: var(--error); }

.aviso-formulario {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--acento-borde);
  border-radius: var(--r-boton);
  background: var(--acento-tenue);
  font-size: 0.875rem;
  color: var(--texto-suave);
}
.aviso-formulario .icono { margin-top: 2px; color: var(--acento-fuerte); }

.canales { margin-top: 26px; display: grid; gap: 14px; }
.canal {
  display: flex;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.canal .icono { margin-top: 3px; color: var(--acento-fuerte); }
.canal a { color: var(--texto); text-decoration-color: var(--borde-fuerte); text-underline-offset: 3px; }
.canal a:hover { color: var(--acento-fuerte); }

/* --------------------------------------------------------------------------
   13b. Documentos (aviso de privacidad, terminos)

   Paginas de texto largo. Sin barra pegajosa y sin capturas: lo unico que
   importa es que se lean comodas, asi que la medida se limita a 72 caracteres.
   -------------------------------------------------------------------------- */
.documento {
  max-width: 72ch;
  margin-inline: auto;
  padding-block: 56px 88px;
}

.documento__volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  font-size: 0.9375rem;
  color: var(--texto-suave);
  text-decoration: none;
  transition: color var(--paso);
}
.documento__volver:hover { color: var(--acento-fuerte); }
.documento__volver .icono { transform: rotate(180deg); }

.documento h1 {
  font-size: clamp(1.875rem, 1.3rem + 2vw, 2.5rem);
  margin-bottom: 12px;
}

.documento__fecha {
  margin-bottom: 40px;
  font-size: 0.9375rem;
  color: var(--texto-tenue);
}

.documento h2 {
  margin-top: 48px;
  margin-bottom: 14px;
  font-size: 1.25rem;
}

.documento h3 {
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 1.0625rem;
}

.documento p,
.documento li {
  color: var(--texto-suave);
  font-size: 1rem;
}

.documento p + p { margin-top: 14px; }

.documento ul {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.documento li {
  display: flex;
  gap: 12px;
}
.documento li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--acento);
}

.documento strong { color: var(--texto); font-weight: 600; }

.documento a {
  color: var(--acento-fuerte);
  text-underline-offset: 3px;
}

/* Lo que el lector necesita ver aunque solo hojee la pagina. */
.documento__destacado {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--acento-borde);
  border-radius: var(--r-tarjeta);
  background: var(--acento-tenue);
}
.documento__destacado p { color: var(--texto); }

/* --------------------------------------------------------------------------
   12. Pie
   -------------------------------------------------------------------------- */
.pie {
  padding-block: 44px;
  border-top: 1px solid var(--borde);
  background: var(--fondo-alterno);
}
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 22px; }
.pie__enlaces a {
  font-size: 0.9375rem;
  color: var(--texto-suave);
  text-decoration: none;
}
.pie__enlaces a:hover { color: var(--texto); }
.pie__nota { font-size: 0.875rem; color: var(--texto-tenue); }

/* --------------------------------------------------------------------------
   13. Pantallas angostas
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .bloque,
  .contacto { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .capacidades { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; }

  /* En columna: primero el titular, el video justo debajo */
  .portada__principal { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  /* Con menos ancho, cinco pasos en fila quedan ilegibles: pasan a columna con la
     linea vertical a la izquierda. */
  .flujo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .paso { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding-bottom: 30px; }
  .paso__marca { margin-bottom: 0; grid-row: span 2; }
  .paso h3 { align-self: center; margin-bottom: 4px; }
  .paso:not(:last-child)::before {
    top: 56px;
    left: 27px;
    right: auto;
    bottom: 0;
    width: 1px;
    height: auto;
  }
  .paso:last-child { padding-bottom: 0; }

  .bloque--invertido .bloque__texto { order: 0; }

  .planes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .seccion { padding-block: 64px; }
  .portada { padding-top: 48px; padding-bottom: 64px; }

  .capacidades {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    margin-top: 40px;
    padding-top: 36px;
  }
  .contenedor { padding-inline: 20px; }

  /* Solo se esconde si hay JavaScript, que es quien puede volver a abrirla. Sin
     JS el menu se queda desplegado como lista: mejor eso que una navegacion que
     desaparece y ningun boton que la traiga de vuelta. */
  .js .navegacion {
    display: none;
    position: absolute;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 20px 20px;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
  }
  .js .navegacion[data-abierto='si'] { display: flex; }
  .navegacion a { padding-block: 13px; font-size: 1rem; }
  .navegacion a + a { border-top: 1px solid var(--borde); }

  .js .boton-menu { display: grid; }
  .barra__acciones .boton { display: none; }

  .portada__acciones .boton { width: 100%; }

  .portada__principal { gap: 32px; }
  /* En un video de ~350px de ancho el boton con texto tapa media escena: queda
     solo el icono, y el texto sigue ahi para los lectores de pantalla. */
  .demo__pista { top: 8px; right: 8px; padding: 9px; }
  .demo__pista span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   14. Menos movimiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   15. Impresion
   -------------------------------------------------------------------------- */
@media print {
  .barra, .portada__acciones, .formulario { display: none; }
  body { background: #fff; color: #000; }
}