/* Andarel · sitio. Usa los tokens de marca/tokens.css (los colores no se definen acá). Celular primero. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--px-fondo); color: var(--px-texto); font-family: var(--px-fuente-texto);
  font-size: 1.125rem; line-height: 1.55; text-rendering: optimizeLegibility;
  overflow-wrap: break-word; }   /* A-UX-H-003: una palabra que no entra en su renglón se corta en vez de ensanchar la página (texto al 200 % a 320 px); solo actúa cuando no entra, no cambia nada al 100 % */
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--px-acento); outline-offset: 2px; border-radius: 4px; }
.ancho { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--px-texto); color: var(--px-fondo); padding: 8px 12px; z-index: 20; }
.saltar:focus { left: 8px; }

/* Tipografía */
h1, h2, h3 { font-family: var(--px-fuente-marca); line-height: var(--px-interlineado-titulo); margin: 0 0 .4em; letter-spacing: -.01em; }
h1, h2 { text-wrap: balance; }   /* los titulares no dejan una palabra sola en la última línea (A-WEB-FINAL-005, VV-12) */
h1 { font-weight: 700; font-size: clamp(2.25rem, 3.6vw + 1.2rem, 3.052rem); letter-spacing: -.02em; }
h2 { font-weight: 600; font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
h3 { font-family: var(--px-fuente-texto); font-weight: 600; font-size: 1.25rem; letter-spacing: 0; }
p { margin: 0 0 1em; max-width: var(--px-ancho-parrafo); }
.volanta { font-size: var(--px-t-xs); text-transform: uppercase; letter-spacing: var(--px-tracking-etiqueta); font-weight: 600;
  color: var(--px-acento-texto); margin: 0 0 14px; }
.bajada { font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; margin: 0 0 12px; }
.secundario { color: var(--px-texto-secundario); }
.chico { font-size: var(--px-t-sm); }
strong, b { font-weight: 600; }

/* Botones */
.boton { max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px;
  border-radius: var(--px-radio-boton); background: var(--px-texto); color: var(--px-fondo); font-weight: 600; text-decoration: none;
  border: 2px solid var(--px-texto); transition: transform .15s ease; }
.boton::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--px-acento); flex: none; }
.boton:hover { transform: translateY(-1px); }
.boton-chico { min-height: 40px; padding: 6px 14px; font-size: var(--px-t-sm); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 20px; margin: 24px 0 8px; }   /* 22 px entre renglones: las áreas táctiles de dos enlaces apilados no se pisan */
.enlace-flecha { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--px-acento); padding-bottom: 2px; position: relative; }
.enlace-flecha::after { content: " →"; }
/* A-WEB-RELEASE-001: el área táctil llega a 44 px sin mover el subrayado (WCAG 2.2 pide 24; los teléfonos, 44) */
.enlace-flecha::before { content: ""; position: absolute; inset: -10px -3px -12px; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--px-fondo) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--px-borde); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { height: 28px; width: auto; }
.logo-oscuro { display: none; }
.menu-boton { display: none; font: inherit; font-weight: 600; background: none; border: 1px solid var(--px-borde); border-radius: 8px;
  padding: 8px 14px; color: var(--px-texto); min-height: 44px; }
.menu { display: flex; align-items: center; gap: 22px; font-size: var(--px-t-sm); font-weight: 500; }
.menu > a:not(.boton) { text-decoration: none; }
.menu > a:not(.boton):hover, .soluciones summary:hover { text-decoration: underline; }
.menu > a[aria-current="page"], .soluciones summary[data-actual] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }   /* A-WEB-FINAL-005: la navegación dice dónde estás */
.soluciones li a[aria-current="page"] { background: var(--px-superficie); font-weight: 600; }
.soluciones { position: relative; }
.soluciones summary { cursor: pointer; list-style: none; }
.soluciones summary::-webkit-details-marker { display: none; }
.soluciones summary::after { content: " ▾"; font-size: .8em; }
.soluciones ul { position: absolute; top: 34px; left: -16px; min-width: 260px; list-style: none; margin: 0; padding: 10px;
  background: var(--px-fondo); border: 1px solid var(--px-borde); border-radius: var(--px-radio-tarjeta); box-shadow: var(--px-sombra-papel); }
.soluciones li a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.soluciones li a:hover { background: var(--px-superficie); }
.idioma { font-size: var(--px-t-xs); border: 1px solid var(--px-borde); border-radius: 999px; padding: 4px 10px; text-decoration: none; }

/* Secciones */
.seccion { padding: 88px 0; }
.seccion + .seccion { border-top: 1px solid var(--px-borde); }
.seccion.superficie { background: var(--px-superficie); border-top: 0; }
.seccion.superficie + .seccion { border-top: 0; }
.encabezado { max-width: 760px; margin-bottom: 40px; }
.encabezado p { color: var(--px-texto-secundario); font-size: 1.125rem; }

/* Portada */
.portada { padding: 64px 0 72px; }
.portada-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }   /* minmax(0, …): una palabra larga no ensancha la columna (texto al 200 %) */
.portada h1 { max-width: 14ch; }
.inicio .portada h1 { text-wrap: balance; }
/* Con el texto al 200 % hay títulos con palabras largas que no entran en 360 px y desbordan la página. Regla específica para los casos
   comprobados (lema de la portada, WhatsApp, Quién atiende, Privacidad y el título «Una conversación directa.» de la portada, A-WEB-COMERCIAL-004);
   el resto de los títulos no cambia. */
.inicio .portada h1, .titulo-quebrable .portada h1, .inicio #quien h2, .inicio #una-cosa-mas h2 { overflow-wrap: anywhere; }   /* A-WEB-CIERRE-007: «distribuidora» (13 letras) en el título del informe de ejemplo */
:lang(en) .portada h1 { max-width: 16ch; }
.garantia-paso { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--px-borde); }
.controles-video { text-align: right; margin-top: 8px; }   /* A-WEB-FINAL-005: el botón de pausa estaba encima del video y tapaba su última línea; ahora va debajo */
.pantalla.celular .controles-video { text-align: center; }
.boton-pausa { font: 600 var(--px-t-sm)/1 var(--px-fuente-texto); background: transparent; color: var(--px-texto-secundario); border: 1px solid var(--px-borde); border-radius: 999px; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.boton-pausa:hover { color: var(--px-texto); border-color: var(--px-texto); }
.portada .texto p:not(.volanta):not(.bajada) { font-size: 1.125rem; color: var(--px-texto-secundario); }
.boton { text-wrap: balance; }   /* A-WEB-FINAL-005: un botón de dos líneas no deja una palabra sola («caja»); sin espacios duros, que desbordaban al 200 % */
.debajo-boton { font-size: var(--px-t-sm); color: var(--px-texto-secundario); margin-top: 6px; }

/* Pantallas reales (capturas y videos de las demos), siempre con el sello */
.pantalla { position: relative; margin: 0; }
.pantalla .marco { position: relative; border: 1px solid var(--px-borde); border-radius: 14px; overflow: hidden; background: var(--px-fondo);
  box-shadow: 0 1px 2px rgb(30 31 28 / .06), 0 18px 40px -18px rgb(30 31 28 / .28); }
.pantalla .marco::before { content: ""; display: block; height: 22px; background: var(--px-superficie); border-bottom: 1px solid var(--px-borde); }
.pantalla .marco::after { content: ""; position: absolute; top: 8px; left: 10px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--px-borde); box-shadow: 10px 0 0 var(--px-borde), 20px 0 0 var(--px-borde); }
.pantalla img, .pantalla video { width: 100%; }
.pantalla figcaption { font-size: var(--px-t-sm); color: var(--px-texto-secundario); margin-top: 12px; max-width: 60ch; }
.pantalla.celular { width: 100%; max-width: 300px; margin-inline: auto; }   /* A-UX-H-003: con ancho definido la figura no se achica a 0 mientras carga la imagen diferida (el contenido bajaba 476 px al llegar a ella y el foco por teclado quedaba debajo de la pantalla) */
.pantalla.celular .marco { border-radius: 28px; border-width: 6px; border-color: var(--px-texto); }
.pantalla.celular .marco::before { display: none; }
.pantalla.celular .marco::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 30px; border-radius: 0; box-shadow: none; pointer-events: none;
  background: linear-gradient(to top, #fff, rgb(255 255 255 / 0)); }   /* A-WEB-FINAL-005: las capturas de teléfono quedaban cortadas a media línea */
.solo-compu { display: none; }

/* Tres sistemas */
.tres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }   /* minmax(0, …): sin mínimo, como .portada-grilla y .pasos (A-UX-H-003) */
.tarjeta { background: var(--px-fondo); border: 1px solid var(--px-borde); border-radius: var(--px-radio-tarjeta); padding: 22px;
  display: flex; flex-direction: column; gap: 14px; }
.seccion.superficie .tarjeta { border-color: transparent; }
.tarjeta h3 { margin: 0; }
.tarjeta p { margin: 0; color: var(--px-texto-secundario); }
.tarjeta .pantalla.celular { max-width: 240px; }
.tarjeta .pantalla.celular .marco { max-height: 330px; }
.tarjeta .pantalla.celular img { object-fit: cover; object-position: top; height: auto; }   /* alto automático: con alto fijo, a ~768 px el marco recortaba el borde izquierdo de la pantalla (VV-11) */
.tarjeta .enlace-flecha { margin-top: auto; align-self: flex-start; }

/* Los frenos */
.frenos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }   /* minmax(0, …): una palabra larga no ensancha la columna (texto al 200 % a 360 px) */
.freno { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: var(--px-radio-tarjeta);
  background: var(--px-fondo); border: 1px solid var(--px-borde); }
.freno .icono { width: 34px; height: 34px; border-radius: 8px; background: var(--px-texto); color: var(--px-fondo);
  display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.freno p { margin: 0; overflow-wrap: break-word; }
.freno strong { display: block; font-size: 1.125rem; margin-top: 2px; }
.cierre-frenos { margin-top: 28px; font-weight: 600; }

/* Pasos */
.pasos { counter-reset: paso; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; }   /* 1fr sin mínimo: una palabra larga no ensancha la página */
.pasos li { counter-increment: paso; overflow-wrap: break-word; padding: 24px; border-radius: var(--px-radio-tarjeta); background: var(--px-superficie); position: relative; }
.pasos li::before { content: counter(paso); font-family: var(--px-fuente-marca); font-weight: 700; font-size: 2.2rem; line-height: 1;
  color: var(--px-texto); display: block; margin-bottom: 8px; }
.pasos .etiqueta { display: inline-block; font-size: var(--px-t-xs); font-weight: 600; letter-spacing: var(--px-tracking-etiqueta);
  text-transform: uppercase; color: var(--px-acento-texto); margin-bottom: 6px; }
.pasos p { margin: 0; }
.pasos .precio-paso { display: block; font-family: var(--px-fuente-marca); font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin: 2px 0 12px; font-variant-numeric: var(--px-numeros); }
.resumen-precios { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.resumen-precios li { display: flex; flex-direction: column-reverse; justify-content: flex-end; border: 1px solid var(--px-borde); border-radius: var(--px-radio-tarjeta); padding: 14px 16px; background: var(--px-superficie); }
.resumen-precios b { display: block; font-family: var(--px-fuente-marca); font-size: 1.3rem; line-height: 1.2; }
.resumen-precios span { display: block; color: var(--px-texto-secundario); font-size: var(--px-t-sm); margin-top: 2px; }   /* en el código va primero el rótulo y después el importe; a la vista, al revés */

/* Precios */
.planes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.plan { border: 1px solid var(--px-borde); border-radius: var(--px-radio-tarjeta); padding: 22px; background: var(--px-fondo); }
.plan h3 { margin-bottom: 4px; overflow-wrap: anywhere; }   /* A-WEB-CIERRE-007: «Acompañamiento» con el texto al 200 % en 360 px */
.plan .monto { font-family: var(--px-fuente-marca); font-weight: 700; font-size: 2rem; font-variant-numeric: var(--px-numeros); margin: 8px 0 2px; }
.plan .monto small { font-family: var(--px-fuente-texto); font-size: var(--px-t-sm); font-weight: 500; color: var(--px-texto-secundario); white-space: nowrap; }
.plan ul { padding-left: 18px; margin: 12px 0 0; color: var(--px-texto-secundario); }
.tabla-precios { width: 100%; border-collapse: collapse; font-size: var(--px-t-sm); }
.tabla-precios th, .tabla-precios td { text-align: left; padding: 12px 8px; border-top: var(--px-borde-tabla); vertical-align: top; }
.tabla-precios th.num { text-align: right; }
.tabla-precios td.num { text-align: right; white-space: nowrap; font-variant-numeric: var(--px-numeros); font-weight: 600; }
.tabla-precios td.num.largo { white-space: normal; }   /* «Se cotiza según el alcance (desde …)»: una frase, no un número; si no, a 768 px empuja la tabla fuera de la pantalla */
@media (min-width: 700px) { .tabla-precios td.num[colspan="2"]:not(.largo) { text-align: center; } }   /* un precio único para los dos planes (diagnóstico, integración) queda entre las dos columnas, no debajo de «Crecimiento» */
/* En el celular, cada fila es una tarjeta: el título arriba y cada valor con el nombre de su columna (data-col, lo pone
   el armado del sitio). La cabecera queda para los lectores de pantalla. Nada se desliza a lo ancho. */
@media (max-width: 699px) {
  .tabla-precios thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabla-precios, .tabla-precios tbody, .tabla-precios tr, .tabla-precios td { display: block; width: 100%; }
  .tabla-precios tr { border-top: var(--px-borde-tabla); padding: 14px 0; }
  .tabla-precios td { border-top: 0; padding: 3px 0; }
  .tabla-precios td:first-child { padding-bottom: 8px; }
  .tabla-precios td[data-col]::before { content: attr(data-col) ": "; font-weight: 400; color: var(--px-texto-secundario); }
  .tabla-precios td.num { text-align: left; white-space: normal; }
  .tabla-precios td[data-vacio] { display: none; }   /* «—»: en la tarjeta del celular no suma */
}

/* Garantía y textos planos */
/* Bloques de texto: alineados a la izquierda como el resto, con el ancho de lectura en los hijos */
.plano > *, .prosa > * { max-width: 760px; }
.plano h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.lista-simple { padding-left: 20px; }
.lista-simple li { margin-bottom: 8px; }

.prosa h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 3vw, 2rem); }

/* Persona */
.persona { display: grid; gap: 24px; }
.firma { font-family: var(--px-fuente-marca); font-weight: 600; font-size: 1.25rem; }

/* Galería de demos */
.galeria { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.demo { display: flex; flex-direction: column; align-items: flex-start; }
.demo > .pantalla { width: 100%; }
.demo h3 { margin: 16px 0 6px; }
.demo p { color: var(--px-texto-secundario); margin-bottom: 8px; }
.demo .enlace-flecha { margin-top: 4px; }   /* A-WEB-FINAL-005: pegado a su texto; con tarjetas 16:9 y de teléfono en la misma fila quedaba a 220 px */
.claves { margin: 20px 0 0; }
.claves dt { font-size: var(--px-t-xs); text-transform: uppercase; letter-spacing: var(--px-tracking-etiqueta); font-weight: 600; color: var(--px-acento-texto); margin-top: 14px; }
.claves dd { margin: 3px 0 0; max-width: var(--px-ancho-parrafo); }

/* Pie */
.pie { border-top: 1px solid var(--px-borde); padding: 48px 0 110px; font-size: var(--px-t-sm); color: var(--px-texto-secundario); }
.pie-grilla { display: grid; gap: 24px; }
.pie img { height: 24px; width: auto; margin-bottom: 12px; }
.pie-enlaces { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.pie-enlaces a { display: inline-block; padding: 13px 0; }   /* A-WEB-FINAL-005: 17 px de alto → 44 px */
.pie-ficticio { grid-column: 1 / -1; margin: 0; text-wrap: pretty; }   /* A-WEB-CIERRE-007: sin palabra suelta («sigue.») en la última línea de la identificación comercial */
.pie-datos { grid-column: 1 / -1; margin: 0; text-wrap: pretty; }   /* LEGAL-CLOSE-001: aviso del art. 6 de la Ley 25.326, visible y previo al contacto */

/* Celular y tablet: menú desplegable. A-LAUNCH-001: rige hasta 1149 px (antes 899) porque con el selector de tema la barra en una fila parte los vínculos en dos líneas por debajo de ~1150 px */
@media (max-width: 1099.98px) {
  .menu-boton { display: inline-flex; align-items: center; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--px-fondo); border-bottom: 1px solid var(--px-borde); padding: 8px 20px 20px; font-size: 1rem;
    max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }   /* A-UX-H-003: con «Soluciones» abierto y el texto al 200 % el menú pasaba el alto de la pantalla y el último botón no se podía alcanzar (el encabezado queda fijo); ahora el menú se recorre por dentro */
  .menu.abierto { display: flex; }
  .menu > * { flex-shrink: 0; }   /* con el alto limitado, los elementos del menú no se aplastan (el botón de contacto, con min-height, se achicaba y le recortaba el texto) */
  .menu > a:not(.boton), .soluciones summary { padding: 14px 0; border-bottom: 1px solid var(--px-borde); }
  .soluciones ul { position: static; box-shadow: none; border: 0; padding: 0 0 8px 12px; min-width: 0; }
  .idioma { align-self: flex-start; margin: 14px 0 4px; }
  .menu .boton { margin-top: 14px; min-height: 52px; }
}
@media (max-width: 899px) {
  .seccion { padding: 64px 0; }
}
@media (min-width: 700px) {
  .tres { grid-template-columns: repeat(3, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .planes { grid-template-columns: repeat(3, 1fr); }
  .planes.cuatro { grid-template-columns: repeat(2, 1fr); }   /* A-WEB-CIERRE-007: Base, Estándar, Ampliado y Acompañamiento */
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .frenos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frenos:has(> li:nth-child(3):last-child) > li:last-child { grid-column: 1 / -1; }   /* tres frenos en dos columnas: el tercero ocupa el ancho, no queda huérfano */
  .pie-grilla { grid-template-columns: 1.3fr 1fr; }
}
@media (min-width: 1000px) { .planes.cuatro { grid-template-columns: repeat(4, 1fr); } }   /* debe ir DESPUÉS del bloque de 700 px: misma especificidad, gana el último */
@media (min-width: 900px) {
  .portada { padding: 88px 0 96px; }
  .portada-grilla { grid-template-columns: 1fr 1.15fr; gap: 56px; }
  .persona { grid-template-columns: 1.2fr 1fr; align-items: center; }
  .solo-compu { display: block; }
  .solo-celu { display: none; }
  /* Con exactamente tres frenos (portada esencial), una fila de tres en vez de dos y uno suelto */
  .frenos:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frenos:has(> li:nth-child(3):last-child) > li:last-child { grid-column: auto; }
}

/* Modo oscuro (elegido, o «Automático» con el sistema en oscuro): los logos cambian; los colores vienen de los tokens */
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-oscuro { display: block; }
:root[data-theme="dark"] .pantalla .marco { box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .logo-claro { display: none; }
  :root[data-theme="auto"] .logo-oscuro { display: block; }
  :root[data-theme="auto"] .pantalla .marco { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .cabecera, .pie-enlaces { display: none; }
}

/* A-WEB-RELEASE-001: cuatro preguntas que llevan a una solapa del tablero de ejemplo */
.preguntas { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 22px; }
.preguntas li { font-size: 1.125rem; line-height: 1.4; }

/* A-UX-H-001 · portada H: hero sin imagen, tarjeta de demos con un solo enlace extendido y navegación en tres grupos. A-UX-H-002: el botón fijo de contacto ya no existe (el contacto sigue arriba, abajo y en el menú del celular) */
.portada-minima { padding: 56px 0 64px; }
.portada-minima .bajada { max-width: 40ch; font-size: clamp(1.125rem, .95rem + 1vw, 1.3rem); font-weight: 400; line-height: 1.55; color: var(--px-texto-secundario); text-wrap: pretty; margin-bottom: 24px; }   /* menor jerarquía que el lema (700, 36–49 px): peso regular, 18–21 px, ≈ 50 caracteres por línea */
.portada-minima .debajo-boton a { color: inherit; }
.tarjeta-demo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; background: var(--px-fondo); border: 1px solid var(--px-borde); border-radius: var(--px-radio-tarjeta); padding: 22px; }
.tarjeta-demo-imagen { margin: 0; border: 1px solid var(--px-borde); border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--px-superficie); }
.tarjeta-demo-imagen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.tarjeta-demo h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3.2vw, 2rem); }
.tarjeta-demo p { margin: 0 0 14px; color: var(--px-texto-secundario); }
.enlace-extendido::before { inset: -10px -3px -12px; }
.enlace-extendido::after { content: " →"; }
.tarjeta-demo .enlace-extendido { position: static; }
.tarjeta-demo .enlace-extendido::before { content: ""; position: absolute; inset: 0; border-radius: var(--px-radio-tarjeta); }   /* toda la tarjeta es un solo enlace */
.tarjeta-demo:focus-within { outline: 3px solid var(--px-acento); outline-offset: 2px; }
.tarjeta-demo:hover { border-color: var(--px-texto-secundario); }
.seguir { display: grid; grid-template-columns: 1fr; gap: 32px; }
.seguir h2 { font-size: 1.15rem; margin: 0 0 10px; }
.seguir ul { list-style: none; padding: 0; margin: 0; }
.seguir li a { display: inline-block; padding: 9px 0; }
.seguir p { margin: 0 0 12px; color: var(--px-texto-secundario); }
@media (min-width: 700px) {
  .tarjeta-demo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; padding: 28px; }
  .seguir { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
}
.inicio .seccion h2, .inicio .seccion p { overflow-wrap: anywhere; }   /* palabras largas de los títulos de la portada H con el texto al 200 % en 360 px */
.inicio .boton, .inicio .enlace-flecha { max-width: 100%; overflow-wrap: break-word; }   /* A-UX-H-002: a 320 px con el texto al 200 % la portada se ensanchaba 3 y 4 px (botón y tarjeta de demos). «break-word» y no «anywhere»: con text-wrap: balance, «anywhere» cortaba «conversación» a la mitad sin necesidad. «demostraciones» (281 px a ese tamaño) no entra en 280 px y se corta, sin desbordar */

/* A-LAUNCH-001 · selector de tema (Claro / Oscuro / Automático) en el menú. Solo aparece con JavaScript: tema.js agrega la clase «js» a <html>.
   Menú desplegable (hasta 1149 px): ícono + texto. Barra en una fila (desde 1150 px): solo ícono, para no apretar los vínculos; el nombre accesible es siempre el texto (queda oculto a la vista). */
.tema { display: none; }
.js .tema { display: flex; align-items: center; gap: 6px; }
.tema-rotulo { display: none; font-size: var(--px-t-xs); font-weight: 600; letter-spacing: var(--px-tracking-etiqueta); text-transform: uppercase; color: var(--px-texto-secundario); }
.tema button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: var(--px-t-sm); font-weight: 500; color: var(--px-texto); background: transparent; border: 1px solid var(--px-borde); border-radius: 8px; min-width: 40px; min-height: 40px; padding: 0 10px; cursor: pointer; white-space: nowrap; }
.tema button:hover { border-color: var(--px-texto); }
.tema button[aria-pressed="true"] { background: var(--px-texto); color: var(--px-fondo); border-color: var(--px-texto); font-weight: 600; }
.tema svg { flex: none; }
@media (max-width: 1099.98px) {
  .js .tema { flex-wrap: wrap; margin-top: 14px; max-width: 440px; }
  .tema-rotulo { display: block; flex: 0 0 100%; }
  .tema button { flex: 1 1 0; min-height: 44px; }
}
@media (min-width: 1100px) {
  .tema button { position: relative; padding: 0; }
  .tema-txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* A-RELEASE-002 · legibilidad de las capturas en escritorio.
   Diagnóstico (web/qa/legibilidad_demos.js; medidas en ANDAREL_RELEASE_002/datos): los archivos son nítidos (1280×720 nativos en webp/jpg de 28–103 KB; 540×960 en celular) y no hay filtros ni transformaciones.
   La causa era el TAMAÑO DE PRESENTACIÓN: ≈ 535–567 px de ancho (escala 0,42–0,44), así que un texto de interfaz de 14 px quedaba en ≈ 6 px.
   Desde 900 px: las secciones «lectura» pasan a una columna (texto arriba, captura a todo el ancho: escala ≈ 0,87), la tarjeta de la portada apila imagen y texto, y las capturas de celular crecen de 300 a 380 px.
   Cada captura 16:9 suma «Ver en tamaño real» (sitio.js). Debajo de 900 px no cambia nada: el móvil aprobado queda igual. */
@media (min-width: 900px) {
  .portada-grilla.lectura { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  .portada-grilla.lectura > :first-child { max-width: 760px; }
  .portada-grilla.lectura > .pantalla { width: 100%; }
  .portada-grilla > .pantalla.celular { max-width: 380px; }
  .tarjeta-demo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
.ver-real { display: none; font: 500 var(--px-t-sm)/1 var(--px-fuente-texto); color: var(--px-texto); background: transparent; border: 1px solid var(--px-borde); border-radius: 8px; min-height: 44px; padding: 0 16px; cursor: pointer; }
.ver-real:hover { border-color: var(--px-texto); }
.controles-video .ver-real { margin-right: 10px; }
@media (min-width: 900px) { .ver-real { display: inline-flex; align-items: center; } }
.ampliada { width: min(1328px, 96vw); max-width: 96vw; max-height: 94vh; padding: 0; border: 1px solid var(--px-borde); border-radius: 14px; background: var(--px-fondo); color: var(--px-texto); overflow: auto; }
.ampliada::backdrop { background: rgba(0, 0, 0, .65); }
.ampliada-barra { position: sticky; top: 0; display: flex; justify-content: flex-end; margin: 0; padding: 10px 12px; background: var(--px-fondo); border-bottom: 1px solid var(--px-borde); }
.ampliada-cuerpo { padding: 12px; }
.ampliada-cuerpo img { display: block; width: 100%; max-width: 1280px; height: auto; margin: 0 auto; border: 1px solid var(--px-borde); border-radius: 8px; }
html:has(dialog.ampliada[open]) { overflow: hidden; }
/* D-2 · consentimiento previo al envío (diálogo creado por sitio.js en el primer clic a un mail) */
.consentimiento { width: min(560px, 92vw); max-width: 92vw; max-height: 92vh; padding: 0; border: 1px solid var(--px-borde); border-radius: 14px; background: var(--px-fondo); color: var(--px-texto); overflow: auto; }
.consentimiento::backdrop { background: rgba(0, 0, 0, .65); }
.consentimiento-cuerpo { padding: 20px; }
.consentimiento-cuerpo h2 { margin: 0 0 10px; }
.consentimiento-check { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; min-height: 44px; cursor: pointer; }
.consentimiento-check input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; }
.consentimiento-nota { font-size: .9em; color: var(--px-texto-secundario); }
.consentimiento-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.consentimiento-acciones .boton[disabled] { opacity: .55; cursor: not-allowed; }
html:has(dialog.consentimiento[open]) { overflow: hidden; }
/* D-2 · sin JavaScript: la sección de contacto explica la transferencia y el enlace de mail solo se ve con la casilla tildada (la casilla nunca viene tildada) */
.consentimiento-previo { margin: 18px 0; padding: 18px; border: 1px solid var(--px-borde); border-radius: 12px; background: var(--px-superficie); text-align: left; }
.consentimiento-previo h3 { margin: 0 0 8px; }
.consentimiento-previo-fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin: 12px 0; }
.consentimiento-previo-fila label { flex: 1 1 260px; min-height: 44px; cursor: pointer; }
.consentimiento-previo-check { flex: none; width: 24px; height: 24px; margin: 2px 0 0; }
.consentimiento-previo-enlace { display: none; }
.consentimiento-previo-check:checked ~ .consentimiento-previo-enlace { display: inline-flex; }
.consentimiento-previo .consentimiento-nota { margin: 0; }

/* GO-A-FISCAL-001: sello oficial de ARCA (Formulario 960/D). Se muestra tal como lo entrega ARCA; esto solo lo ubica. */
.data-fiscal-franja{padding:1.25rem 0 2rem}
.data-fiscal-sello{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1rem 0}
.data-fiscal-sello img{max-width:100%;height:auto;max-height:6rem}
.data-fiscal-sello a{display:inline-block;min-width:44px;min-height:44px}
.data-fiscal-pendiente{margin:0;padding:.75rem 1rem;border:1px dashed currentColor;border-radius:8px}

/* ==========================================================================
   D-128 · Rebranding estudio (09/11/2026). Todo el sitio pasa a la estética de estudio: fondo negro, títulos condensados
   (Big Shoulders Display), rótulos monoespaciados (IBM Plex Mono), texto en Inter y el amarillo de la marca como acento.
   Va al final a propósito: pisa lo anterior sin tocarlo. Los colores siguen siendo los de marca/tokens.css (modo oscuro),
   con un negro más profundo para el fondo. La web es oscura siempre (tema.js).
   ========================================================================== */
:root, :root[data-theme] {
  color-scheme: dark;
  --px-fondo: #0A0A09;
  --px-superficie: #131411;
  --px-texto: var(--px-noche-texto);
  --px-texto-secundario: var(--px-noche-gris);
  --px-acento: var(--px-amarillo);
  --px-acento-texto: var(--px-amarillo);
  --px-sobre-acento: var(--px-grafito);
  --px-borde: rgb(237 235 228 / .14);
  --px-estado-ok: var(--px-ok-noche);
  --px-estado-error: var(--px-error-noche);
  --px-sombra-papel: none;
  --px-radio-tarjeta: 0;
  --px-radio-boton: 0;
  --est-display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --est-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --est-serif: "Fraunces", Georgia, serif;
  --est-pad: clamp(16px, 2.2vw, 28px);
  --est-apagado: #807E78;   /* 4,6:1 sobre el fondo: los números de paso se leen (AA) */
}
::selection { background: var(--px-acento); color: var(--px-grafito); }
body { font-size: 1.0625rem; }
/* grano de película sobre toda la página (decorativo; quieto con «reducir movimiento») */
body::after { content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 90; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: est-grano 1.2s steps(6) infinite; }
@keyframes est-grano { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); } }
.ancho { max-width: 1240px; padding: 0 var(--est-pad); }

/* Tipografía */
h1, h2 { font-family: var(--est-display); text-transform: uppercase; letter-spacing: .004em; line-height: .9; }
h1 { font-weight: 900; font-size: clamp(2.8rem, 6.4vw + .6rem, 6rem); }
h2 { font-weight: 800; font-size: clamp(2.1rem, 4.4vw + .4rem, 3.8rem); }
h3 { font-family: var(--est-display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; line-height: 1; letter-spacing: .01em; }
.plano h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.prosa h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.portada h1 { max-width: 16ch; }
.volanta, .pasos .etiqueta, .claves dt { font-family: var(--est-mono); font-weight: 500; font-size: .74rem; letter-spacing: .08em; color: var(--px-acento); }
.volanta::before { content: "■ "; }
.bajada { font-weight: 400; color: #D6D4CC; }
.secundario, .encabezado p { color: var(--px-texto-secundario); }

/* Botones y enlaces */
.boton { font-family: var(--est-mono); text-transform: uppercase; font-size: .8rem; font-weight: 500; letter-spacing: .06em;
  min-height: 50px; padding: 12px 20px; background: var(--px-acento); color: var(--px-grafito); border: 1px solid var(--px-acento); transition: background .2s, color .2s, border-color .2s; }
.boton::before { width: 8px; height: 8px; border-radius: 0; background: var(--px-grafito); }
.boton:hover { transform: none; background: var(--px-texto); border-color: var(--px-texto); }
.boton-linea { background: transparent; color: var(--px-texto); border-color: var(--px-texto); }
.boton-linea::before { background: var(--px-acento); }
.boton-linea:hover { background: var(--px-texto); color: var(--px-fondo); }
.boton-chico { min-height: 40px; padding: 6px 14px; font-size: .74rem; }
.enlace-flecha { font-family: var(--est-mono); text-transform: uppercase; font-size: .8rem; font-weight: 500; letter-spacing: .06em; border-bottom-width: 1px; }

/* Cabecera */
.cabecera { background: rgb(10 10 9 / .86); border-bottom: 1px solid var(--px-borde); }
.cabecera-fila { min-height: 64px; }
.logo { gap: 10px; text-decoration: none; }
.logo .logo-signo { width: 26px; height: 26px; }
.logo-texto { font-family: var(--est-display); font-weight: 900; font-size: 1.75rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.menu { font-family: var(--est-mono); text-transform: uppercase; font-size: .74rem; letter-spacing: .06em; font-weight: 400; gap: 20px; }
.menu > a:not(.boton):hover, .soluciones summary:hover { text-decoration: none; color: var(--px-acento); }
.menu > a[aria-current="page"], .soluciones summary[data-actual] { font-weight: 500; text-decoration: none; color: var(--px-acento); }
.soluciones ul { background: var(--px-fondo); border-radius: 0; top: 30px; text-transform: none; letter-spacing: 0; font-family: var(--px-fuente-texto); font-size: .9rem; }
.soluciones li a { border-radius: 0; }
.idioma { border-radius: 0; font-size: .7rem; }
.menu-boton { font-family: var(--est-mono); text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; border-radius: 0; }

/* Secciones y tarjetas: cuadradas, con líneas finas */
.seccion { padding: 104px 0; }
.seccion.superficie { background: var(--px-superficie); }
.tarjeta, .plan, .freno, .tarjeta-demo, .resumen-precios li, .consentimiento-previo, .pasos li { border-radius: 0; }
.pasos li { background: transparent; border: 1px solid var(--px-borde); }
.seccion.superficie .pasos li { background: var(--px-fondo); }
.pasos li::before { font-family: var(--est-display); font-weight: 900; font-size: 3rem; color: var(--est-apagado); }
.plan { background: transparent; }
.plan .monto, .resumen-precios b, .pasos .precio-paso { font-family: var(--est-display); font-weight: 800; color: var(--px-acento); letter-spacing: .01em; }
.plan .monto small { font-family: var(--est-mono); text-transform: uppercase; letter-spacing: .05em; }
.freno .icono { border-radius: 0; background: var(--px-acento); color: var(--px-grafito); font-family: var(--est-display); }
.tabla-precios td.num { font-family: var(--est-mono); font-weight: 500; }
.tabla-precios th { font-family: var(--est-mono); font-weight: 400; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; color: var(--px-texto-secundario); }
.firma { font-family: var(--est-serif); font-style: italic; }
.pantalla .marco { border-radius: 0; box-shadow: none; }
.pantalla.celular .marco { border-radius: 22px; border-color: #2A2B27; }
.pantalla.celular .marco::after { background: linear-gradient(to top, var(--px-fondo), rgb(10 10 9 / 0)); }
.tarjeta-demo-imagen { border-radius: 0; }
.ampliada, .consentimiento { border-radius: 0; }
.boton-pausa, .ver-real { border-radius: 0; font-family: var(--est-mono); text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; }

/* Pie */
.pie { padding-top: 56px; }
.pie-marca { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--est-display); font-weight: 900; font-size: 2.6rem; line-height: 1; text-transform: uppercase; color: var(--px-texto); }
.pie-marca img { width: 30px; height: 30px; margin: 0; }
.pie-enlaces { font-family: var(--est-mono); text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }

/* ---------- Portada de estudio (solo /) ---------- */
.est-mono { font-family: var(--est-mono); text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; line-height: 1.45; }
.est-serif { font-family: var(--est-serif); font-style: italic; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--px-acento); font-size: .84em; }
.est-flecha { display: inline-block; font-family: var(--est-mono); text-transform: uppercase; font-size: .74rem; letter-spacing: .06em; text-decoration: none; border: 1px solid var(--px-borde); padding: 9px 13px; margin-top: 4px; transition: background .2s, color .2s; }
.est-flecha:hover { background: var(--px-texto); color: var(--px-fondo); }
.estudio main p { max-width: none; }

.est-portada { position: relative; height: calc(100svh - 64px); min-height: 560px; overflow: hidden; }
.est-portada canvas, .escena canvas, .est-contacto-banda canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.est-portada-pie { position: absolute; left: var(--est-pad); right: var(--est-pad); bottom: 24px; display: grid; grid-template-columns: 1.15fr .7fr 1.15fr; gap: 20px; align-items: end; }
.est-lema { margin: 0; font-size: clamp(1.8rem, 2.6vw + .5rem, 3rem); line-height: .95; max-width: 13ch; }
.est-lema span { display: block; color: var(--px-acento); }
.est-centro { text-align: center; margin: 0; }
.est-portada-texto { justify-self: end; max-width: 46ch !important; margin: 0; font-size: .98rem; line-height: 1.55; color: #D6D4CC; }

.est-cinta { border-top: 1px solid var(--px-borde); border-bottom: 1px solid var(--px-borde); overflow: hidden; white-space: nowrap; padding: 13px 0; }
.est-pista { display: inline-block; animation: est-cinta 40s linear infinite; }
.est-cinta span { margin: 0 22px; }
.est-cinta i { font-style: normal; color: var(--px-acento); }
@keyframes est-cinta { to { transform: translateX(-50%); } }

/* Pantallas de servicio: fijas mientras se recorren */
.est-escenas { position: relative; }
.escena { position: sticky; top: 0; height: 100svh; min-height: 600px; overflow: hidden; background: var(--px-fondo); border-top: 1px solid var(--px-borde); }
.escena::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0) 2px, rgb(0 0 0 / .28) 3px, rgb(0 0 0 / 0) 4px), radial-gradient(ellipse at center, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .65) 100%); }
.escena .arriba { position: absolute; z-index: 3; top: 92px; left: var(--est-pad); max-width: 430px; }
.escena .arriba .num { color: var(--px-acento); margin: 0 0 10px; }
.escena .arriba p:not(.num) { font-size: 1rem; line-height: 1.55; color: #D6D4CC; margin: 0 0 14px; }
.escena .medio { position: absolute; z-index: 3; left: var(--est-pad); width: min(430px, 40vw); top: 50%; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding-top: 12px; border-top: 1px solid var(--px-borde); }
.escena .medio .c { color: var(--px-acento); }
.escena .medio .d { color: var(--px-texto-secundario); }
.escena .abajo { position: absolute; z-index: 3; left: var(--est-pad); right: var(--est-pad); bottom: 24px; display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 16px; align-items: end; }
.escena h1, .escena h2 { margin: 0; font-weight: 900; font-size: clamp(2.6rem, 7vw, 7rem); line-height: .86; }
.escena .meta { margin: 0; }
.escena .meta b { display: block; color: var(--px-texto-secundario); font-weight: 400; margin-bottom: 3px; }

/* Bloques */
.est-bloque { position: relative; padding: 120px var(--est-pad) 110px; border-top: 1px solid var(--px-borde); max-width: 1440px; margin: 0 auto; }
.est-etiqueta { display: grid; grid-template-columns: 1fr auto 1fr; margin-bottom: 56px; }
.est-etiqueta .c { text-align: center; }
.est-etiqueta .d { text-align: right; }
.est-titular { font-weight: 900; font-size: clamp(2.8rem, 8vw, 8.2rem); line-height: .86; max-width: 14ch; margin: 0; }
.est-bajada { margin-top: 22px; max-width: 620px !important; color: #CFCDC5; font-size: 1.06rem; line-height: 1.55; }
.est-flujo { margin-top: 64px; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.est-flujo::before { content: ""; position: absolute; left: 10%; right: 10%; top: 34px; height: 1px; background: var(--px-borde); }
.est-flujo .pulso { position: absolute; top: 31px; left: 10%; width: 7px; height: 7px; background: var(--px-acento); box-shadow: 0 0 14px var(--px-acento); animation: est-pulso 5.5s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes est-pulso { 0% { left: 10%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 90%; opacity: 0; } }
.est-flujo .paso { position: relative; text-align: center; padding: 0 10px; }
.est-flujo .nodo { width: 68px; height: 68px; margin: 0 auto 18px; border: 1px solid var(--px-borde); display: grid; place-items: center; background: var(--px-fondo); font-family: var(--est-display); font-weight: 800; font-size: 1.5rem; }
.est-flujo .paso:first-of-type .nodo { border-color: var(--px-acento); color: var(--px-acento); }
.est-flujo h3 { font-size: 1.5rem; margin-bottom: 8px; }
.est-flujo p { font-size: .9rem; line-height: 1.5; color: var(--px-texto-secundario); margin: 0; }
.est-demos { margin-top: 72px; padding-top: 22px; border-top: 1px solid var(--px-borde); display: grid; grid-template-columns: 1fr 2fr auto; gap: 20px; align-items: center; }
.est-demos p { margin: 0; color: #D6D4CC; }
.est-demos .est-mono { color: var(--px-acento); }
.est-metodo { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--px-borde); }
.est-metodo article { padding: 26px 22px 8px 0; border-right: 1px solid var(--px-borde); margin-right: 22px; }
.est-metodo article:last-child { border-right: 0; margin-right: 0; }
.est-metodo .n { font-family: var(--est-display); font-weight: 900; font-size: 4rem; line-height: 1; color: var(--est-apagado); }
.est-metodo h3 { font-size: 1.75rem; margin: 12px 0 10px; }
.est-metodo p { font-size: .92rem; line-height: 1.55; color: #C9C7BF; margin: 0 0 8px; }
.est-metodo .est-mono { margin-top: 14px; color: var(--px-acento); }
.est-mas { margin-top: 36px; }
.est-pestanas { display: flex; gap: 10px; margin: 40px 0 34px; flex-wrap: wrap; }
.est-pestanas button { cursor: pointer; font-family: var(--est-mono); text-transform: uppercase; font-size: .76rem; letter-spacing: .06em; padding: 10px 14px; min-height: 44px; border: 1px solid var(--px-borde); background: transparent; color: var(--px-texto); border-radius: 0; }
.est-pestanas button[aria-selected="true"] { background: var(--px-texto); color: var(--px-fondo); border-color: var(--px-texto); }
.est-planes { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--px-borde); }
.est-plan { padding: 28px 24px 30px 0; margin-right: 24px; border-right: 1px solid var(--px-borde); display: flex; flex-direction: column; }
.est-plan:last-child { border-right: 0; margin-right: 0; }
.est-plan .top { display: flex; justify-content: space-between; color: var(--px-texto-secundario); }
.est-plan h3 { font-weight: 900; font-size: clamp(2.2rem, 3.6vw, 3.3rem); margin: 22px 0 4px; line-height: .95; }
.est-plan .precio { font-family: var(--est-display); font-weight: 800; font-size: clamp(2rem, 3vw, 2.7rem); color: var(--px-acento); margin: 0 0 22px; }
.est-plan .precio small { font-family: var(--est-mono); font-size: .7rem; color: var(--px-texto-secundario); letter-spacing: .05em; margin-left: 6px; text-transform: uppercase; }
.est-plan ul { list-style: none; display: grid; gap: 9px; padding: 0; margin: 0; }
.est-plan li { font-family: var(--est-mono); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; line-height: 1.45; padding-left: 16px; position: relative; }
.est-plan li::before { content: "■"; position: absolute; left: 0; color: var(--px-acento); font-size: 8px; top: 2px; }
.est-plan .cta { margin: auto 0 0; padding-top: 26px; }
.est-tabla { border-top: 1px solid var(--px-borde); }
.est-tabla .fila { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--px-borde); align-items: baseline; }
.est-tabla .fila.cab { color: var(--px-texto-secundario); }
.est-tabla .nom { font-family: var(--est-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
.est-tabla .nom a { text-decoration: none; }
.est-tabla .nom a:hover { color: var(--px-acento); }
.est-tabla .nom small { display: block; font-family: var(--px-fuente-texto); text-transform: none; font-weight: 400; font-size: .85rem; color: var(--px-texto-secundario); margin-top: 6px; line-height: 1.4; }
.est-tabla .v { font-family: var(--est-mono); font-size: .82rem; }
.est-tabla .v.acc { color: var(--px-acento); }
.est-nota { margin-top: 22px; color: var(--px-texto-secundario); font-size: .86rem; line-height: 1.55; max-width: 780px !important; }
.est-reglas { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--px-borde); }
.est-reglas div { padding: 22px 22px 6px 0; margin-right: 22px; border-right: 1px solid var(--px-borde); }
.est-reglas div:last-child { border-right: 0; margin-right: 0; }
.est-reglas h3 { font-size: 1.4rem; margin-bottom: 8px; }
.est-reglas p { font-size: .9rem; line-height: 1.55; color: var(--px-texto-secundario); }
.est-quien { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.est-quien p { font-size: 1.12rem; line-height: 1.6; color: #D6D4CC; margin-bottom: 16px; max-width: 560px !important; }
.est-contacto { border-top: 1px solid var(--px-borde); }
.est-contacto-banda { position: relative; height: 64svh; min-height: 380px; overflow: hidden; }
.est-contacto-banda .est-etiqueta { position: absolute; z-index: 2; left: var(--est-pad); right: var(--est-pad); top: 40px; margin: 0; }
.est-contacto-cuerpo { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 24px var(--est-pad) 110px; text-align: center; }   /* por encima del lienzo: los acentos de las mayúsculas (QUÉ) quedaban tapados */
.est-contacto-cuerpo h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.est-contacto-cuerpo .acciones { justify-content: center; }
.est-contacto-cuerpo .debajo-boton { margin-inline: auto; }
.rev { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.rev.ok { opacity: 1; transform: none; }
html:not(.js) .rev { opacity: 1; transform: none; }   /* sin JavaScript, todo visible */

@media (max-width: 860px) {
  .est-portada-pie { grid-template-columns: 1fr; bottom: 18px; gap: 14px; }
  .est-centro { display: none; }
  .est-portada-texto { justify-self: start; font-size: .95rem; }
  .escena .arriba { top: 84px; max-width: none; right: var(--est-pad); }
  .escena .arriba p:not(.num) { font-size: .92rem; margin-bottom: 10px; }
  .escena .medio { display: none; }
  .escena .abajo { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .escena .abajo h1, .escena .abajo h2 { grid-column: 1 / -1; font-size: clamp(2.3rem, 10vw, 3.4rem); }
  .est-bloque { padding: 88px var(--est-pad) 80px; }
  .est-etiqueta { margin-bottom: 36px; }
  .est-flujo { grid-template-columns: 1fr; gap: 26px; }
  .est-flujo::before, .est-flujo .pulso { display: none; }
  .est-flujo .paso { display: grid; grid-template-columns: 68px 1fr; gap: 16px; text-align: left; align-items: center; }
  .est-flujo .nodo { margin: 0; }
  .est-demos { grid-template-columns: 1fr; gap: 12px; }
  .est-metodo, .est-planes, .est-reglas, .est-quien { grid-template-columns: 1fr; }
  .est-metodo article, .est-plan, .est-reglas div { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--px-borde); padding-right: 0; }
  .est-tabla .fila { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .est-tabla .nom { grid-column: 1 / -1; }
  .est-tabla .fila.cab { display: none; }
  .est-tabla .v.vacio { display: none; }
  .seccion { padding: 72px 0; }
}
@media (prefers-reduced-motion: reduce) {
  body::after, .est-pista, .est-flujo .pulso { animation: none; }
  .rev { opacity: 1; transform: none; transition: none; }
}

/* D-128 · páginas internas con el formato del prototipo */
.escena-sola { position: relative; height: calc(100svh - 64px); min-height: 600px; border-top: 0; }
.escena-sola .arriba { top: 40px; }
.escena-sola .arriba .acciones { margin: 6px 0 0; }
.est-espacio { height: 40px; }
.est-primero { border-top: 0; }
.est-apagado-txt { color: var(--px-texto-secundario); }
.est-planes.cuatro { grid-template-columns: repeat(4, 1fr); }
.est-tabla.est-t3 .fila { grid-template-columns: 2.4fr 1.2fr .8fr; }
.est-tabla.est-t5 .fila { grid-template-columns: 2.2fr 1fr 1fr 1fr .8fr; }
.est-bloque .prosa-est { max-width: 760px; }
.est-bloque .prosa-est h3 { font-size: 1.6rem; margin: 1.4em 0 .5em; }
.est-bloque .prosa-est p, .est-bloque .prosa-est li { color: #D6D4CC; font-size: 1rem; line-height: 1.6; }
.est-bloque .prosa-est ul { padding-left: 18px; }
.est-bloque a:not(.boton):not(.est-flecha) { text-decoration-color: var(--px-acento); }
@media (max-width: 860px) {
  .escena-sola .arriba { top: 28px; }
  .est-planes.cuatro { grid-template-columns: 1fr; }
  .est-tabla.est-t3 .fila, .est-tabla.est-t5 .fila { grid-template-columns: 1fr 1fr; }
}

/* D-128 · reflujo: a 320 px con el texto al 200 % nada ensancha la página (WCAG 1.4.10; lo prueba web/qa/consentimiento_previo.js) */
.cabecera-fila { gap: 10px; }
.logo { min-width: 0; flex: 0 1 auto; }
.logo-texto { font-size: min(1.75rem, 8.5vw); overflow: hidden; text-overflow: clip; }
.menu-boton { flex: none; padding: 6px 10px; }
@media (max-width: 860px) {
  .est-flujo, .est-metodo, .est-planes, .est-reglas, .est-quien, .est-demos { grid-template-columns: minmax(0, 1fr); }
  .est-flujo .paso { grid-template-columns: 68px minmax(0, 1fr); padding: 0; }
  .est-tabla .fila, .est-tabla.est-t3 .fila, .est-tabla.est-t5 .fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .escena .abajo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .est-etiqueta { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
  h1, h2, h3, .est-titular, .est-lema, .est-flujo p, .est-plan li, .est-tabla .v, .est-mono { overflow-wrap: anywhere; }
}
.pie-marca { font-size: min(2.6rem, 11vw); flex-wrap: wrap; overflow-wrap: anywhere; }
.pie-marca img { flex: none; }