/* ═══════════════════════════════════════════════════════════════════════
   LA PÁGINA DE PRESENTACIÓN — un solo archivo de estilos, sin framework.

   IDENTIDAD. Azul profundo y hielo: es una plataforma de FRÍO. El mismo
   territorio de color que el panel (azules de trabajo, pasteles de estado)
   para que quien vea la publicidad y luego entre al producto sienta que es
   el mismo sitio.

   UNA SOLA APARIENCIA, a propósito: la publicidad es un cartel, no una
   aplicación. Se compromete con su look en claro-sobre-oscuro en la portada
   y oscuro-sobre-claro en el resto, sin modo oscuro del sistema.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* La paleta, con nombre. */
  --tinta: #0b1526;        /* azul noche: fondos de portada y cierre */
  --tinta-suave: #13223a;
  --hielo: #eaf2fb;        /* el claro sobre la tinta */
  --papel: #f7fafd;        /* fondo de las secciones claras */
  --texto: #1c2b3f;
  --texto-suave: #5b6b80;
  --acento: #2f7fe8;       /* el azul de acción, pariente del panel */
  --acento-vivo: #58a6ff;  /* sobre fondos oscuros */
  --verde: #2f9e63;
  --verde-vivo: #5cc98d;  /* el verde legible sobre la tinta */
  --rojo-vivo: #ff7b71;   /* el veredicto que manda a descartar */
  --borde: #dbe5f0;
  --radio: 16px;
  --sombra: 0 20px 50px -22px rgba(11, 21, 38, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: "Sora", "Inter", sans-serif; line-height: 1.15; margin: 0; }

img { max-width: 100%; }

/* ── BARRA ──────────────────────────────────────────────────────────────── */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--tinta) 92%, transparent);
  backdrop-filter: blur(8px);
  color: var(--hielo);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--hielo);
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* LA MARCA. Antes era un carácter de texto —un copo de nieve— y le bastaba
   con heredar el color. Ahora es el icono de verdad, así que necesita medida
   propia: cuadrado, del alto de la línea, y con las esquinas del propio SVG. */
.marca-icono {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
}

.marca-icono svg {
  width: 100%;
  height: 100%;
  display: block;
}

.barra-nav {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
}

.barra-nav a {
  color: color-mix(in srgb, var(--hielo) 80%, transparent);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.barra-nav a:hover { color: var(--hielo); }

@media (max-width: 640px) {
  .barra-nav { display: none; }
  .barra { justify-content: space-between; }
}

/* ── BOTONES ────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  background: var(--acento);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--acento) 70%, transparent);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.boton:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--acento) 80%, transparent); }

.boton-chico { padding: 0.45rem 1rem; font-size: 0.85rem; }
.boton-grande { padding: 0.9rem 1.9rem; font-size: 1.05rem; }

.enlace-suave {
  color: color-mix(in srgb, var(--hielo) 75%, transparent);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}
.enlace-suave:hover { color: var(--hielo); }

/* ── PORTADA ────────────────────────────────────────────────────────────── */
.portada {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 6vw, 5rem);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(88, 166, 255, 0.18), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(47, 127, 232, 0.14), transparent 55%),
    var(--tinta);
  color: var(--hielo);
}

.lema {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-vivo);
}

.portada h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.portada h1 em {
  font-style: normal;
  color: var(--acento-vivo);
}

.portada-bajada {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  font-size: 1.08rem;
  color: color-mix(in srgb, var(--hielo) 82%, transparent);
}

.portada-acciones {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}

.portada-nota {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--hielo) 55%, transparent);
}

@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; }
  .portada-visual { justify-self: center; }
}

/* El teléfono dibujado. Ilustración honesta: simplificada, no una captura
   trucada — y nunca desactualizada. */
.portada-visual { display: flex; justify-content: center; }

.telefono {
  width: min(290px, 80vw);
  padding: 12px;
  background: #0d1830;
  border: 1px solid rgba(88, 166, 255, 0.25);
  border-radius: 34px;
  box-shadow: var(--sombra);
  transform: rotate(2.5deg);
}

.telefono-pantalla {
  background: #101f38;
  border-radius: 24px;
  padding: 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.78rem;
}

.tel-cab { display: flex; justify-content: space-between; align-items: center; }
.tel-codigo { font-weight: 700; color: #9fb8d9; letter-spacing: 0.04em; }
.tel-chip {
  padding: 0.15rem 0.6rem;
  background: rgba(88, 166, 255, 0.18);
  color: var(--acento-vivo);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.7rem;
}
.tel-titulo { font-weight: 700; font-size: 0.95rem; color: var(--hielo); }
.tel-sub { color: #8aa2c2; margin-top: -0.45rem; }

.tel-tarjeta {
  background: rgba(234, 242, 251, 0.05);
  border: 1px solid rgba(234, 242, 251, 0.09);
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tel-fila { display: flex; justify-content: space-between; color: #8aa2c2; }
.tel-fila strong { color: var(--hielo); font-variant-numeric: tabular-nums; }
.tel-fila strong.ok { color: #6fd39a; }

.tel-firma {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #8aa2c2;
  font-size: 0.72rem;
}
.tel-firma svg { width: 90px; color: var(--hielo); opacity: 0.9; }

.tel-boton {
  margin-top: 0.2rem;
  text-align: center;
  padding: 0.55rem;
  background: var(--hielo);
  color: var(--tinta);
  font-weight: 700;
  border-radius: 999px;
  font-size: 0.82rem;
}

/* ── FRANJA DEL PROBLEMA ────────────────────────────────────────────────── */
.franja-problema {
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 6vw, 5rem);
  background: var(--tinta-suave);
  color: color-mix(in srgb, var(--hielo) 85%, transparent);
}

.franja-problema p {
  margin: 0 auto;
  max-width: 52rem;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}

.franja-problema strong { color: var(--hielo); }

/* ── SECCIONES CLARAS ───────────────────────────────────────────────────── */
.seccion {
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 6vw, 5rem);
  max-width: 74rem;
  margin: 0 auto;
}

.seccion h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.seccion-bajada {
  margin: 0.6rem 0 0;
  color: var(--texto-suave);
  font-size: 1.02rem;
}

/* Funciones */
.rejilla-funciones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2.2rem;
}

@media (max-width: 980px) { .rejilla-funciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rejilla-funciones { grid-template-columns: 1fr; } }

.funcion {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.4rem 1.3rem;
  box-shadow: 0 10px 30px -24px rgba(11, 21, 38, 0.4);
}

.funcion-icono { font-size: 1.5rem; }

.funcion h3 { font-size: 1.05rem; font-weight: 700; margin-top: 0.6rem; }

.funcion p { margin: 0.5rem 0 0; font-size: 0.92rem; color: var(--texto-suave); }

.funcion p strong, .funcion p em { color: var(--texto); font-style: normal; }

/* ── EN CAMPO ───────────────────────────────────────────────────────────── */
.seccion-campo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 860px) { .seccion-campo { grid-template-columns: 1fr; } }

.campo-texto > p { margin: 0.8rem 0 0; color: var(--texto-suave); font-size: 1.02rem; }
.campo-texto strong { color: var(--texto); }

.campo-lista {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.campo-lista li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

.campo-lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--verde);
  font-weight: 700;
}

.campo-lista em { color: var(--texto); font-style: normal; font-weight: 600; }

/* El informe dibujado */
.campo-visual { display: flex; justify-content: center; }

.tarjeta-informe {
  width: min(340px, 88vw);
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 1.2rem;
  transform: rotate(-1.5deg);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.informe-cab { display: flex; gap: 0.8rem; align-items: center; }

.informe-logo {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: var(--hielo);
  color: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.informe-meta { display: flex; flex-direction: column; }
.informe-meta strong { font-size: 0.95rem; }
.informe-meta span { font-size: 0.78rem; color: var(--texto-suave); }

.informe-linea {
  height: 9px;
  border-radius: 4px;
  background: #e8eef6;
}
.informe-linea.ancha { width: 90%; }
.informe-linea.media { width: 65%; }
.informe-linea.corta { width: 40%; }

.informe-fotos { display: flex; gap: 0.5rem; }
.informe-foto {
  flex: 1;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: linear-gradient(135deg, #dce8f5, #c3d7ec);
}

.informe-sello {
  align-self: flex-end;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--verde);
  border: 1.5px solid color-mix(in srgb, var(--verde) 50%, transparent);
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  transform: rotate(-4deg);
}

/* ── PASOS ──────────────────────────────────────────────────────────────── */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

@media (max-width: 860px) { .pasos { grid-template-columns: 1fr; } }

.pasos li {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.4rem 1.3rem;
}

.paso-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--hielo);
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}

.pasos h3 { font-size: 1.02rem; margin-top: 0.7rem; }
.pasos p { margin: 0.45rem 0 0; font-size: 0.92rem; color: var(--texto-suave); }

/* ── CIERRE ─────────────────────────────────────────────────────────────── */
.cierre {
  margin-top: 2rem;
  padding: clamp(3.5rem, 8vw, 5.5rem) clamp(1rem, 6vw, 5rem);
  background:
    radial-gradient(700px 380px at 50% -20%, rgba(88, 166, 255, 0.2), transparent 60%),
    var(--tinta);
  color: var(--hielo);
  text-align: center;
}

.cierre h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  text-wrap: balance;
}

.cierre p {
  margin: 0.8rem auto 1.8rem;
  max-width: 34rem;
  color: color-mix(in srgb, var(--hielo) 75%, transparent);
}

/* ── EL FORMULARIO DE LA DEMOSTRACIÓN ─────────────────────────────────────
 *
 * Va sobre la tinta oscura del cierre, así que los campos se dibujan CLAROS
 * SOBRE OSCURO. Es la parte de la página donde más fácil es equivocarse: un
 * `input` sin `color` declarado hereda el negro del navegador y el texto que
 * se teclea desaparece sobre el fondo azul noche. Aquí se declaran los tres
 * —fondo, letra y borde— a mano.
 *
 * Dos columnas en pantalla ancha y una en el teléfono. La tercera pregunta
 * ocupa el ancho entero porque su etiqueta es larga y partida en dos renglones
 * se lee como si fueran dos preguntas.
 */
.demo-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  max-width: 34rem;
  margin: 0 auto;
  text-align: left;
}

.demo-campo-ancho { grid-column: 1 / -1; }

.demo-campo label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--hielo) 80%, transparent);
}

.demo-opcional {
  font-weight: 400;
  color: color-mix(in srgb, var(--hielo) 50%, transparent);
}

.demo-form input,
.demo-form select {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--hielo);
  background: rgba(234, 242, 251, 0.07);
  border: 1px solid rgba(234, 242, 251, 0.22);
  border-radius: 10px;
  appearance: none;
}

.demo-form input::placeholder {
  color: color-mix(in srgb, var(--hielo) 40%, transparent);
}

/* La lista desplegable la pinta el SISTEMA, no la página: sus opciones
   heredan el fondo del navegador, casi siempre blanco. Sin esto, en Windows
   salían letras color hielo sobre blanco — invisibles. */
.demo-form select option {
  color: var(--texto);
  background: #fff;
}

.demo-form input:focus-visible,
.demo-form select:focus-visible {
  outline: none;
  border-color: var(--acento-vivo);
  /* El anillo con sombra y no con `outline`, para que siga el radio de la
     esquina en vez de dibujar un rectángulo por fuera. */
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.35);
}

.demo-form button {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 0.4rem;
  border: 0;
  cursor: pointer;
  font: inherit;
}

@media (max-width: 560px) {
  .demo-form { grid-template-columns: 1fr; }
}

/* La salida de emergencia para quien no quiere llenar nada — que es mucha
   gente, y perderla por un formulario sería absurdo. */
.cierre .demo-alterna {
  margin: 1.6rem auto 0.4rem;
  font-size: 0.9rem;
}

.cierre .demo-alterna a {
  color: var(--acento-vivo);
  font-weight: 600;
}

.cierre .demo-letra-chica {
  margin: 0 auto;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--hielo) 55%, transparent);
}

/* ── PIE ────────────────────────────────────────────────────────────────── */
.pie {
  padding: 1.3rem clamp(1rem, 6vw, 5rem);
  background: var(--tinta);
  color: color-mix(in srgb, var(--hielo) 45%, transparent);
  font-size: 0.82rem;
  text-align: center;
  border-top: 1px solid rgba(234, 242, 251, 0.08);
}

/* ── ASÍ SE VE POR DENTRO ──────────────────────────────────────────────────
 * Ilustraciones fieles al producto: la MISMA paleta que el panel de verdad.
 * Pasteles de estado (programada azul, en curso cian, pausada ámbar,
 * completada verde) y franja izquierda con el color de la persona. */

.navegador {
  margin-top: 2.2rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra);
  overflow: hidden;
}

.navegador-cab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  background: #eef3f9;
  border-bottom: 1px solid var(--borde);
}

.punto { width: 10px; height: 10px; border-radius: 50%; background: #cdd9e6; }

.navegador-url {
  margin-left: 0.6rem;
  padding: 0.2rem 0.9rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--texto-suave);
}

.agenda { padding: 0.9rem; }

.agenda-cab {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--texto-suave);
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--borde);
}

/* El número de HOY en su círculo azul relleno, como en el panel. */
.agenda-cab .es-hoy { color: var(--texto); }
.agenda-cab .es-hoy i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-weight: 700;
  margin-right: 0.25rem;
}

.agenda-cuerpo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  min-height: 15rem;
  padding-top: 0.6rem;
  /* Las líneas de las horas, tenues. */
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2.6rem,
    #eef3f9 2.6rem,
    #eef3f9 calc(2.6rem + 1px)
  );
}

.agenda-col { display: flex; flex-direction: column; min-width: 0; }

/* La tarjeta de evento: pastel de ESTADO de fondo, franja de PERSONA. */
.ev {
  border-left: 4px solid var(--rail, var(--acento));
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  font-size: 0.68rem;
  line-height: 1.3;
  box-shadow: 0 3px 10px -6px rgba(11, 21, 38, 0.3);
}

.es-programada { background: #DCEAFB; }
.es-encurso   { background: #D2EEF9; }
.es-pausada   { background: #FCEBD3; }
.es-completada{ background: #DBF0DE; }

.ev-hora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: #33465e;
  font-variant-numeric: tabular-nums;
}

.ev-titulo { color: #1c2b3f; font-weight: 600; margin-top: 0.1rem; }

.ev-nota { color: #8a5a17; font-size: 0.62rem; font-weight: 600; margin-top: 0.1rem; }

.ev-quien, .ev-cuadrilla b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.2rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  font-style: normal;
}

.ev-cuadrilla { display: flex; gap: 0.25rem; margin-top: 0.3rem; }

.pie-figura {
  margin: 0.9rem auto 0;
  max-width: 46rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--texto-suave);
}
.pie-figura strong { color: var(--texto); }

/* ── La economía ─────────────────────────────────────────────────────────── */
.fila-economia {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: 3rem;
}

@media (max-width: 820px) { .fila-economia { grid-template-columns: 1fr; } }

.eco-tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transform: rotate(-1deg);
  font-size: 0.8rem;
}

.eco-cab { display: flex; justify-content: space-between; align-items: baseline; }
.eco-cab strong { font-size: 0.95rem; }
.eco-cab span { color: var(--texto-suave); font-size: 0.75rem; }

/* El aviso ámbar del doble cobro, tal como es en el producto. */
.eco-aviso {
  background: #fdf3e0;
  border: 1px solid #f0d9a8;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  color: #7a5210;
  font-size: 0.75rem;
  line-height: 1.45;
}
.eco-aviso em { font-style: italic; }

.eco-tabla { display: flex; flex-direction: column; gap: 0.35rem; }

.eco-fila {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.7fr 0.7fr;
  gap: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.eco-fila span:not(:first-child) { text-align: right; }
.eco-fila-cab { font-size: 0.68rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.eco-fila .gana { color: var(--verde); font-weight: 700; }

.eco-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--borde);
  padding-top: 0.6rem;
  font-size: 0.85rem;
}

.eco-texto h3 { font-size: 1.3rem; font-weight: 800; }
.eco-texto p { margin: 0.6rem 0 0; color: var(--texto-suave); font-size: 0.98rem; }
.eco-texto em { color: var(--texto); font-style: normal; font-weight: 600; }

/* ── Los tres teléfonos ──────────────────────────────────────────────────── */
.fila-telefonos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 3rem;
}

@media (max-width: 820px) { .fila-telefonos { grid-template-columns: 1fr; justify-items: center; } }

.fila-telefonos figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }

.fila-telefonos figcaption {
  font-size: 0.82rem;
  color: var(--texto-suave);
  text-align: center;
  max-width: 17rem;
}

.tel-mini { width: min(230px, 74vw); transform: none; }
.tel-mini .telefono-pantalla { font-size: 0.72rem; }

.tel-monto {
  font-family: "Sora", sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--hielo);
  font-variant-numeric: tabular-nums;
}

/* ── HVAC ASSIST — EL DIAGNÓSTICO ─────────────────────────────────────────
   La única franja oscura en mitad de la página, y es a propósito. Entre
   «Funciones» y «Cómo funciona» venían cuatro secciones claras seguidas, y
   esto es lo que ninguna otra plataforma de servicio trae: que se note.
   Además cuenta lo que es —un cuarto de máquinas a oscuras y una pantalla
   encendida en la mano—.

   Es franja propia y NO .seccion, para no pelearle el max-width.
   ────────────────────────────────────────────────────────────────────── */
.franja-assist {
  background: var(--tinta);
  color: var(--hielo);
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 6vw, 5rem);
}

.assist-interior {
  max-width: 74rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) { .assist-interior { grid-template-columns: 1fr; } }

.assist-marca {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-vivo);
}

.assist-texto h2 {
  margin: 0.55rem 0 0;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.assist-entrada {
  margin: 0.9rem 0 0;
  font-size: 1.02rem;
  color: color-mix(in srgb, var(--hielo) 78%, transparent);
}

.assist-entrada strong { color: var(--hielo); font-weight: 600; }

.assist-lista {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.assist-lista li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--hielo) 70%, transparent);
}

.assist-lista li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--acento-vivo);
  font-weight: 700;
}

.assist-lista em { color: var(--hielo); font-style: normal; font-weight: 600; }

/* La tarjeta del veredicto: es un instrumento, no un adorno. Números
   tabulares para que las columnas de cifras no bailen. */
.assist-visual { display: flex; justify-content: center; }

.tarjeta-diagnostico {
  width: min(360px, 90vw);
  background: var(--tinta-suave);
  border: 1px solid color-mix(in srgb, var(--acento-vivo) 30%, transparent);
  border-radius: 14px;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.8);
  padding: 1.15rem 1.25rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.diag-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--hielo) 14%, transparent);
  padding-bottom: 0.75rem;
}

.diag-sensor {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}

.diag-chip {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--acento-vivo);
  border: 1px solid color-mix(in srgb, var(--acento-vivo) 40%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}

.diag-filas {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.diag-filas > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.diag-filas dt {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--hielo) 62%, transparent);
}

.diag-filas dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.diag-filas .diag-mal dd { color: var(--rojo-vivo); }

.diag-veredicto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--rojo-vivo);
  background: color-mix(in srgb, var(--rojo-vivo) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo-vivo) 35%, transparent);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
}

.diag-nota {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--hielo) 55%, transparent);
}

.diag-nota strong { color: var(--verde-vivo); font-weight: 600; }

/* Las tres cifras: verificadas contra la base, no redondeadas al alza. */
.assist-cifras {
  max-width: 74rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--hielo) 14%, transparent);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
}

@media (max-width: 760px) { .assist-cifras { grid-template-columns: 1fr; gap: 1.4rem; } }

.assist-cifra strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--acento-vivo);
  font-variant-numeric: tabular-nums;
}

.assist-cifra span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--hielo) 65%, transparent);
}