/* Landing pública de Repos — la maquetación del canvas `Nube Home v2` sobre
 * los tokens de `broadsheet.css`. Los estilos inline del diseño están aquí
 * como clases: el diseño se retoca en un solo archivo, no view por view.
 */

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); text-decoration: underline; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px 120px; }

/* — barra superior — */
.nav-top { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding: 32px 0 0; }
.nav-top a { font-size: 16px; }
.marca { font-family: var(--font-heading); font-weight: 700; font-size: 24px; letter-spacing: 0.01em; }
/* El logotipo del encabezado: se dimensiona por alto, como en el login. */
.marca-logo { display: inline-flex; align-items: center; }
.marca-logo img { height: 36px; width: auto; }
.espaciador { flex: 1; }
/* Los enlaces de la barra: en fila en escritorio; plegados en el teléfono. */
.nav-enlaces { display: contents; }
.nav-boton-menu { display: none; }
.nav-interruptor { display: none; }
/* Al saltar a una sección desde el menú, el título no queda pegado al borde. */
section[id] { scroll-margin-top: var(--space-4); }
.nav-top .btn-primary { padding: 10px 16px; }
/* Aire bajo la barra, en TODAS las páginas (E23-21, pedido del dueño
   2026-09-19): hasta ahora la portada era la excepción —la franja de marca
   arrancaba pegada a la barra— y se veía como si el menú fuera parte del
   banner. Va como margen del hermano y no como padding de la barra para que
   `.hero-marca` (que se sale de `.wrap` a sangre completa) lo respete igual. */
.nav-top + * { margin-top: var(--space-8); }
.nav-top + .hero-marca,
.nav-top + .hero { margin-top: var(--space-8); }

/* El menú se pliega hasta 860px y no sólo en el teléfono: en una tablet
   vertical (768px) los cinco enlaces no caben y la barra se partía en dos
   renglones con «Contratar» abajo. */
@media (max-width: 860px) {
  /* La casilla del menú: invisible pero enfocable, para que el menú también
     se abra con el teclado (Tab + espacio); el foco se pinta en el botón. */
  .nav-interruptor { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .nav-interruptor:focus-visible ~ .nav-boton-menu { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .nav-boton-menu {
    display: grid; place-items: center; width: 40px; height: 38px; cursor: pointer;
    border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: var(--color-surface);
  }
  .nav-boton-menu svg { width: 20px; height: 20px; fill: none; stroke: var(--color-text); stroke-width: 2; stroke-linecap: round; }
  .nav-enlaces { display: none; }
  .nav-interruptor:checked ~ .nav-enlaces {
    display: flex; flex-direction: column; order: 10; flex-basis: 100%; gap: 0;
    border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface);
  }
  .nav-enlaces a { padding: 12px 16px; border-bottom: 1px solid var(--color-neutral-100); }
  .nav-enlaces a:last-child { border-bottom: 0; }
}

/* — encabezado — */
.hero { padding: 120px 0 64px; display: flex; flex-direction: column; gap: var(--space-6); max-width: 900px; }

/*
  La franja de marca del hero. Sale del ancho de `.wrap` a sangre completa
  (el truco de 100vw centrado) porque una superficie de marca a media página
  se ve como un banner, no como la cabecera del sitio.

  Sólo lleva el kicker y el titular. La entrada y el botón bajan al neutro:
  la identidad prohíbe el degradado detrás de texto pequeño, y un párrafo de
  17px sobre el extremo cian del degradado no llega a 4.5:1 en blanco.
*/
.hero-marca {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 96px 0 88px;
  margin-bottom: var(--space-8);
}
/* Mismo carril que `.wrap`: el titular tiene que arrancar exactamente donde
   arranca el logotipo de la barra, o la banda se lee como un banner pegado. */
.hero-marca__interior {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}
.hero-marca__interior > * { max-width: 900px; }
.hero-marca .kicker { display: block; margin-bottom: var(--space-4); }

.kicker { font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-700); }
/* Sobre el degradado el kicker no puede ser cian: se pierde en el fondo. */
.kicker-sobre-marca { color: rgba(255, 255, 255, 0.82); }
.kicker-alt { color: var(--color-accent-2-700); }
.titulo-hero {
  margin: 0; font-size: clamp(40px, 6vw, 76px); line-height: 1.03;
  letter-spacing: -0.02em; text-wrap: pretty;
}
.entrada {
  margin: 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.55;
  max-width: 52ch; text-wrap: pretty;
}
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding-top: var(--space-2); }
.btn-grande { font-size: 18px; padding: 15px 24px; }

/* — secciones — */
.seccion { padding-bottom: 128px; }
.seccion-apilada { display: flex; flex-direction: column; gap: var(--space-8); }
.duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-8) 64px; align-items: center;
}
.duo-arriba { align-items: start; }
.columna { display: flex; flex-direction: column; gap: var(--space-4); }

.titulo-2 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: pretty; }
.titulo-3 { margin: 0; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; }
.titulo-cta { margin: 0 0 var(--space-4); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; max-width: 24ch; text-wrap: pretty; }
.parrafo-grande { margin: 0; font-size: 18px; line-height: 1.6; max-width: 46ch; text-wrap: pretty; }
.parrafo { margin: 0; font-size: 17px; line-height: 1.6; }
.parrafo-apagado { color: var(--color-neutral-800); }

.pie { margin: var(--space-3) 0 0; font-size: 15px; line-height: 1.5; color: var(--color-neutral-700); }
.pie-corto { margin-top: var(--space-2); }

/* — qué incluye / preguntas — */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8) 56px; }
.rejilla-ancha { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-8) 64px; }
.rejilla-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.rejilla h3, .rejilla-ancha h3 { margin: 0 0 var(--space-2); font-size: 21px; }
.rejilla p, .rejilla-ancha p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-neutral-800); }

/* — lo básico, en una tira compacta —
   Es la tabla de apuestas del mercado (tickets, comandas, corte): tiene que
   estar, porque el cliente la exige, pero se muestra deliberadamente más
   chica que los diferenciadores de arriba para que no compita con ellos. */
.basicos {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-top: var(--space-6); border-top: 1px solid var(--color-neutral-300);
}
.basicos h3 { margin: 0; font-size: 19px; }
.lista-basicos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2) var(--space-6);
  margin: 0; padding: 0; list-style: none;
}
.lista-basicos li { font-size: 16px; line-height: 1.5; color: var(--color-neutral-800); }
.lista-basicos strong { color: var(--color-text); }

/* — precio — */
.precio {
  margin: 0; font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(64px, 8vw, 104px); line-height: 1; letter-spacing: -0.03em;
}
.precio-nota { margin: var(--space-4) 0 0; font-size: 21px; line-height: 1.4; }
.precio-letra { margin: var(--space-2) 0 0; font-size: 17px; line-height: 1.6; max-width: 34ch; color: var(--color-neutral-800); }
.titulo-precio { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; max-width: 30ch; }
.beneficios { display: flex; flex-direction: column; gap: var(--space-3); }

/* — formulario — */
.formulario { display: flex; flex-direction: column; gap: var(--space-3); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.aviso-form { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-neutral-700); }
.error-campo { display: block; margin-top: 4px; font-size: 12px; color: var(--color-accent-2-700); }
.input.entrada-invalida { border-color: var(--color-accent-2-600); }
.resumen-error {
  margin: 0; padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--color-accent-2-100); color: var(--color-accent-2-800); font-size: 15px;
}
.resumen-error ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.gracias {
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-accent-100); border: 1px solid var(--color-accent-300);
}
.gracias h3 { margin: 0 0 var(--space-2); font-size: 21px; }
.gracias p { margin: 0; font-size: 17px; line-height: 1.6; }

/* — pie — */
.pie-sitio {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-6);
  font-size: 15px; color: var(--color-neutral-700);
}
.pie-sitio .marca { font-size: 18px; color: var(--color-text); }

/* — páginas simples (error, aviso) — */
.pagina-simple { padding: 96px 0 0; max-width: 60ch; }
.pagina-simple h1 { margin: 0 0 var(--space-3); font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; }
.pagina-simple code { font-family: var(--font-mono); font-size: 0.95em; }
.pagina-simple .caminos { margin: var(--space-4) 0 0; padding-left: var(--space-4); font-size: 17px; line-height: 1.65; }
.pagina-simple .caminos li { margin-bottom: var(--space-2); }

/* Texto legal: el aviso de privacidad es una página larga de puro texto —
   se lee, no se escanea, así que hereda el ancho de columna de arriba y solo
   necesita jerarquía y aire entre secciones. */
.legal h1 { margin: 0 0 var(--space-2); font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; }
.legal .fecha { margin: 0 0 var(--space-6); font-size: 15px; color: var(--color-neutral-700); }
.legal h2 { margin: var(--space-6) 0 var(--space-3); font-size: 21px; line-height: 1.2; }
.legal p, .legal li { font-size: 17px; line-height: 1.65; }
.legal p { margin: 0 0 var(--space-3); }
.legal ul, .legal ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.legal li { margin-bottom: var(--space-2); }

@media (max-width: 720px) {
  .wrap { padding: 0 20px 72px; }
  .nav-top { gap: 10px; padding-top: 18px; }
  .marca-logo img { height: 30px; }
  .nav-top .btn-primary { padding: 8px 14px; font-size: 15px; }
  /* En móvil la barra se parte en dos filas y el aire de escritorio se
     sentía hueco; sigue siendo separación visible (E23-21/AC-1). */
  .nav-top + * { margin-top: var(--space-6); }
  .nav-top + .hero-marca,
  .nav-top + .hero { margin-top: var(--space-6); }
  .hero { padding: 64px 0 48px; }
  .hero-marca { padding: 52px 0 48px; margin-bottom: var(--space-6); }
  .hero-entrada { padding-bottom: 48px; }
  .seccion { padding-bottom: 80px; }
  .pagina-simple { padding-top: 56px; }
}

/* ────────────────────────────────────────────────────────────────────────
   Portada (pulido 2026-09-25): el producto se ve desde el primer vistazo.
   La captura va en `.hero-entrada` y en escritorio se monta sobre la franja
   con margen negativo; el texto de la entrada y los botones siguen sobre el
   neutro (la regla del degradado no cambia).
   ──────────────────────────────────────────────────────────────────────── */
.icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.hero-entrada {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-6) 56px; align-items: start; padding-bottom: 72px;
}
.hero-texto { display: flex; flex-direction: column; gap: var(--space-4); }
.hero-texto .acciones { gap: var(--space-3); padding-top: var(--space-1); }
.confianza { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--color-neutral-700); }
.confianza li { display: flex; align-items: center; gap: 6px; }
.confianza .icono { width: 18px; height: 18px; color: var(--repos-success); stroke-width: 2.4; }

.hero-escena { position: relative; z-index: 1; padding: 0 0 36px 36px; }
.tableta {
  padding: 12px; border-radius: 22px;
  background: var(--repos-gris-950);
  box-shadow: 0 30px 60px color-mix(in srgb, var(--repos-gris-950) 40%, transparent);
}
.tableta img { display: block; width: 100%; height: auto; border-radius: 12px; }
.notificacion {
  position: absolute; left: 0; bottom: 0; width: min(300px, 80%);
  padding: 14px 16px; border-radius: var(--radius-lg);
  border-left: 4px solid var(--repos-inteligencia);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--repos-elev-2);
}
.notificacion p { margin: 0; }
.notificacion-app { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-neutral-500); margin-bottom: 6px !important; }
.notificacion-icono { width: 18px; height: 18px; border-radius: 5px; background: var(--repos-degradado); }
.notificacion-titulo { font-size: 15px; font-weight: 700; line-height: 1.3; }
.notificacion-detalle { margin-top: 3px !important; font-size: 14px; color: var(--color-neutral-600); }
.cifra { font-family: var(--font-mono); font-weight: 600; color: var(--color-text); }

@media (min-width: 961px) {
  .hero-marca { padding-bottom: 120px; }
  .titulo-hero { font-size: clamp(40px, 4.6vw, 58px); max-width: 11em; }
  .hero-escena { margin-top: -300px; }
}

/* Franja de los cuatro argumentos, a sangre como la de marca. */
.pilares {
  width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 104px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
}
.pilares ul {
  max-width: 1120px; margin: 0 auto; padding: 22px 32px; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4);
}
.pilares li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; color: var(--color-neutral-600); }
.pilares strong { display: block; font-size: 15.5px; color: var(--color-text); }
.pilar-icono, .funcion-icono {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: var(--radius-md); background: var(--color-accent-100); color: var(--color-accent-700);
}
.pilar-icono--inteligencia { background: var(--color-accent-2-100); color: var(--color-accent-2-600); }

.lista-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lista-alertas li { display: flex; gap: 10px; font-size: 17px; color: var(--color-neutral-800); }
.lista-alertas .icono { color: var(--color-accent-2-600); stroke-width: 2.2; margin-top: 3px; }

/* El correo de alerta en un teléfono: HTML y tokens, sin captura. */
.telefono {
  justify-self: center; width: 300px; padding: 12px; border-radius: 42px;
  background: var(--repos-gris-950); box-shadow: var(--repos-elev-2);
}
.telefono-pantalla { height: 440px; overflow: hidden; border-radius: 32px; background: var(--color-bg); }
.telefono-isla { width: 92px; height: 24px; margin: 10px auto; border-radius: 20px; background: var(--repos-gris-950); }
.correo-alerta { margin: 0 10px; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); font-size: 12px; }
.correo-alerta-franja { padding: 10px 12px; background: var(--repos-degradado); color: var(--repos-gris-0); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; }
.correo-alerta-cuerpo { padding: 12px; }
.correo-alerta-insignia { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--repos-morado-300); background: var(--repos-morado-100); color: var(--repos-morado-800); font-size: 9px; font-weight: 700; letter-spacing: 0.09em; }
.correo-alerta-titulo { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--color-text); }
.correo-alerta dl { margin: 0; }
.correo-alerta dl div { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--color-neutral-100); }
.correo-alerta dt { color: var(--color-neutral-600); }
.correo-alerta dd { margin: 0; font-weight: 600; color: var(--color-text); }
.correo-alerta-que { margin: 8px 0 0; padding: 8px; border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-neutral-700); }

/* Funciones: tarjetas con ícono, una idea cada una. */
.funciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.funcion { padding: 22px; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); }
.funcion-icono { margin-bottom: var(--space-3); }
.funcion h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.25; }
.funcion p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-neutral-700); }

.capturas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); scroll-margin-top: var(--space-4); }
.captura { margin: 0; padding: 14px 14px 16px; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); }
.captura img { display: block; width: 100%; height: auto; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.captura figcaption { margin: 12px 4px 0; font-size: 15px; color: var(--color-neutral-700); }
.captura figcaption strong { color: var(--color-text); }

/* Precio: el número lleva a comprar. */
#precio .kicker { display: block; margin-bottom: var(--space-3); }
.precio-rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
.precio-tarjeta {
  padding: 32px; border: 2px solid var(--color-accent-600); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: 0 14px 34px color-mix(in srgb, var(--color-accent-600) 12%, transparent);
}
.precio-tarjeta .precio { font-size: clamp(52px, 6vw, 72px); }
.precio-unidad { font-family: var(--font-body); font-size: 18px; font-weight: 400; letter-spacing: 0; color: var(--color-neutral-600); }
.precio-tarjeta .precio-nota { margin: var(--space-2) 0 var(--space-4); font-size: 15px; color: var(--color-neutral-600); }
.precio-incluye { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--space-4); }
.precio-incluye li { display: flex; gap: 8px; font-size: 15.5px; color: var(--color-neutral-800); }
.precio-incluye .icono { width: 18px; height: 18px; margin-top: 3px; color: var(--color-accent-600); stroke-width: 2.4; }
.precio-anual { margin: var(--space-3) 0 0; text-align: center; font-size: 14.5px; color: var(--color-neutral-700); }
.despues { padding: 32px; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); }
.despues h3 { margin: 0 0 var(--space-4); font-size: 21px; }
.despues ol { counter-reset: despues; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.despues li { counter-increment: despues; position: relative; padding-left: 46px; font-size: 15.5px; line-height: 1.45; color: var(--color-neutral-700); }
.despues li::before {
  content: counter(despues); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--color-accent-300); color: var(--color-accent-700); font-weight: 700;
}
.despues li strong { display: block; color: var(--color-text); }
.despues-pie { margin: var(--space-6) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-neutral-100); font-size: 15px; color: var(--color-neutral-700); }

/* Preguntas plegables. */
.preguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); align-items: start; }
.preguntas details { padding: 16px 20px; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); }
.preguntas summary { display: flex; justify-content: space-between; gap: var(--space-3); cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; color: var(--color-accent-600); font-size: 22px; line-height: 1; }
.preguntas details[open] summary::after { content: "–"; }
.preguntas p { margin: var(--space-2) 0 0; font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); }

/* Contacto: la alternativa a comprar, en oscuro para que no se confunda. */
.contacto {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-8) 48px; align-items: start;
  margin-bottom: 104px; padding: 44px; border-radius: 22px;
  background: var(--repos-gris-900); color: var(--repos-gris-0);
}
.contacto.seccion { padding-bottom: 44px; }
.contacto .titulo-cta { color: var(--repos-gris-0); }
.contacto .parrafo-apagado { color: var(--repos-gris-300); }
.contacto label { color: var(--repos-gris-300); }
.contacto .input { background: var(--repos-gris-800); border-color: var(--repos-gris-700); color: var(--repos-gris-0); }
.contacto select.input { background-color: var(--repos-gris-800); color: var(--repos-gris-0); }
.contacto .input::placeholder { color: var(--repos-gris-500); }
.contacto .aviso-form { color: var(--repos-gris-400); }
.contacto .aviso-form a { color: var(--repos-cian-300); }
.contacto .error-campo { color: var(--repos-morado-300); }
.contacto .gracias { color: var(--color-text); }

@media (max-width: 960px) {
  .hero-entrada, .precio-rejilla, .contacto { grid-template-columns: 1fr; }
  .hero-escena { padding-left: 0; }
  .pilares ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .pilares ul, .funciones, .capturas, .preguntas, .precio-incluye { grid-template-columns: 1fr; }
  .pilares ul { padding: 18px 20px; }
  .pilares { margin-bottom: 72px; }
  .notificacion { position: relative; width: auto; margin-top: -24px; margin-left: 14px; margin-right: 14px; }
  .hero-escena { padding: 0; }
  .hero-texto .btn-grande { width: 100%; justify-content: center; }
  .precio-tarjeta, .despues { padding: 22px; }
  .contacto { padding: 24px; margin-left: -8px; margin-right: -8px; }
  .chat-web-boton { width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
  .chat-web-boton-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Trampa de bots: fuera de la pantalla, nunca oculta con display:none —
   algunos bots ignoran justamente los campos ocultos así. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* E27-22 — el chat propio del sitio: botón fijo abajo a la derecha y una
   ventana que en el teléfono ocupa la pantalla. Sólo tokens de la identidad. */
.chat-web-boton {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 10;
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 12px 18px; border: 0; border-radius: var(--radius-lg); cursor: pointer;
  background: var(--color-accent); color: var(--repos-accent-fg);
  font: inherit; font-weight: 600; box-shadow: 0 4px 16px var(--repos-shadow);
}
.chat-web-boton:hover { background: var(--color-accent-600); }
.chat-web {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 11;
  width: min(380px, calc(100vw - 2 * var(--space-4))); max-height: min(600px, calc(100vh - 2 * var(--space-4)));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); color: var(--color-text);
  border-radius: var(--radius-lg); box-shadow: 0 8px 32px var(--repos-shadow);
}
.chat-web[hidden] { display: none; }
.chat-web-cabecera { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); background: var(--color-accent); color: var(--repos-accent-fg); }
.chat-web-cerrar { border: 0; background: transparent; color: inherit; font-size: 1.5rem; cursor: pointer; line-height: 1; }
.chat-web-registro, .chat-web-conversacion { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); overflow: auto; }
.chat-web-registro p { margin: 0; }
.chat-web-registro label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.chat-web-registro input:not([type="checkbox"]) { padding: 8px 10px; font: inherit; }
.chat-web-registro label.chat-web-aviso { flex-direction: row; align-items: center; gap: var(--space-1); }
/* El botón queda siempre a la vista: si la pantalla es muy baja, lo que se
   desplaza son los campos, no el botón. */
.chat-web-registro button[type="submit"] { position: sticky; bottom: 0; flex-shrink: 0; }
.chat-web-mensajes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; flex: 1 1 auto; min-height: 120px; }
/* Ya en la conversación la ventana toma su alto completo; antes quedaba una
   franja chaparra y vacía que parecía descompuesta. */
@media (min-width: 481px) {
  .chat-web:has(.chat-web-conversacion:not([hidden])) { height: min(520px, calc(100vh - 2 * var(--space-4))); }
}
.chat-web-mensajes:empty::before { content: "Escríbenos tu pregunta: te contestamos aquí mismo."; margin: auto; color: var(--color-neutral-500); text-align: center; }
.chat-web-mensajes li { max-width: 85%; padding: var(--space-2); border-radius: var(--radius-md); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-web-mensajes li[data-de="usuario"] { align-self: flex-end; background: var(--color-accent); color: var(--repos-accent-fg); }
.chat-web-mensajes li[data-de="agente"] { align-self: flex-start; background: var(--color-neutral-100); }
.chat-web-mensajes li a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.chat-web-escribir { display: flex; gap: var(--space-2); }
.chat-web-escribir textarea { flex: 1; resize: none; font: inherit; }
.chat-web-error { color: var(--repos-danger); margin: 0; }
@media (max-width: 480px) {
  /* 100dvh: con 100vh la barra del navegador del teléfono tapaba el fondo
     de la ventana, justo donde está el botón. */
  .chat-web { right: 0; bottom: 0; width: 100vw; max-height: 100vh; height: 100vh; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  /* Con el chat a pantalla completa, la página de atrás no se desplaza. */
  body.chat-web-abierto { overflow: hidden; }
}