/* ============================================================================
   ROBOTUM — hoja del sitio. Sustituye al bundle de Sitejet (151 KB).
   Los tokens y su porqué están en ../../design/tokens.css; aquí van duplicados
   porque el sitio se sirve sin build y no puede importar algo fuera del docroot.

   ⚠️ SI CAMBIAS UN TOKEN, CÁMBIALO EN LOS DOS SITIOS. Es el único duplicado
   consciente del sistema.
   ========================================================================== */

:root{
  --rojo:#CF3838; --rojo-hover:#AB2929; --rojo-tenue:#F7E4E4;
  --tinta:#23251F; --grafito:#3A3C3B;
  --niebla:#F0F2F1; --niebla-alta:#F8F9F8; --linea:#D9DDDB;
  --gris:#6E7370; --gris-suave:#9A9C9B; --papel:#FFFFFF;
  --ok:#2E7D5B; --ok-fondo:#E7F2EC;
  --atencion:#F58220; --atencion-fondo:#FDF0E2;
  --caido:#B4232B; --caido-fondo:#F9E7E8;

  --voz:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --dato:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:3px;
  --medida:65ch;
  --ancho:68rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);
  font:400 16px/1.65 var(--voz);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--rojo)}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

.env{max-width:var(--ancho);margin:0 auto;padding:0 1.5rem}

/* ---- selector de idioma: desplegable con banderas ------------------------
   Vive DENTRO del menú, a la derecha del botón de la auditoría. Antes flotaba
   fijo en la esquina: molestaba al leer y no pertenecía a nada.

   Va con <details>, SIN JAVASCRIPT — abre, cierra y responde al teclado por sí
   solo. Las banderas son SVG dibujado, no emoji: en Windows el emoji de bandera
   no existe y el sistema lo pinta como dos letras.

   ⚠️ Bandera por IDIOMA es una simplificación discutible —el español no es sólo
   México— pero aquí el sitio declara es-MX y pt-BR, así que la bandera coincide
   con la variante que realmente se sirve. Si algún día se añade es-ES, esto hay
   que repensarlo. */
.idiomas{position:relative;margin-left:.9rem;padding-left:.9rem;
  border-left:1px solid var(--linea)}
.idiomas summary{display:flex;align-items:center;gap:.45rem;cursor:pointer;list-style:none;
  padding:.35rem .1rem;font-size:.875rem;color:var(--tinta)}
.idiomas summary::-webkit-details-marker{display:none}
.idiomas summary::after{content:;width:.35rem;height:.35rem;margin-left:.15rem;
  border-right:1.5px solid var(--gris-suave);border-bottom:1.5px solid var(--gris-suave);
  transform:rotate(45deg) translate(-.1rem,-.1rem)}
.idiomas[open] summary::after{transform:rotate(-135deg) translate(-.05rem,-.05rem)}
.idiomas summary:hover{color:var(--rojo)}
.idiomas summary b{font-weight:400}
.idiomas svg{width:1.15rem;height:.83rem;flex:none;display:block;border-radius:1px;
  box-shadow:0 0 0 1px rgba(35,37,31,.14)}

.idiomas ul{position:absolute;top:calc(100% + .5rem);right:0;z-index:40;margin:0;padding:.35rem;
  list-style:none;min-width:9.5rem;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r);box-shadow:0 10px 28px -10px rgba(24,26,23,.35)}
.idiomas li{display:block}
.idiomas li a{display:flex;align-items:center;gap:.55rem;
  padding:.5rem .6rem;border-radius:2px;text-decoration:none;font-size:.875rem;
  color:var(--tinta)}
.idiomas li a:hover{background:var(--niebla);color:var(--rojo)}

/* ---- cabecera ---- */
.cab{border-bottom:1px solid var(--linea);position:relative;background:var(--papel)}
.cab .env{display:flex;align-items:center;gap:1.5rem;padding-top:1.15rem;padding-bottom:1.15rem}
.cab img{width:150px;display:block}
.nav-links{margin-left:auto;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;
  margin-right:4.5rem}
.nav-links a{color:var(--tinta);text-decoration:none;font-size:.9375rem}
.nav-links a:not(.btn):hover{color:var(--rojo)}
@media (max-width:820px){
  .cab .env{flex-wrap:wrap;gap:.8rem}
  .nav-links{margin-left:0;margin-right:0;width:100%;gap:1.2rem;font-size:.875rem}
}

/* ---- ritmo de secciones ---- */
section{padding:5.5rem 0}
section.gris{background:var(--niebla)}
/* La foto de equipo, casi apagada: aquí sólo aporta profundidad. Sobre ella va
   además la malla de nodos, así que dos capas de textura sin gritar ninguna. */
section.oscura{color:#D6D9D7;position:relative;overflow:hidden;
  background-color:var(--grafito);background-position:center;
  background-image:
    linear-gradient(rgba(58,60,59,.93),rgba(58,60,59,.97)),
    url("/images/1024/21850343/overhead-view-of-a-diverse-team-in-a-business-meeting-using-laptops-and-tablets-zCTsw2ATnqBFxIigP8kIMw.jpeg-HkgldujkXpis-Xm_-2ts7g.jpg")}
@media (min-width:1200px){
  section.oscura{background-image:
    linear-gradient(rgba(58,60,59,.93),rgba(58,60,59,.97)),
    url("/images/1920/21850343/overhead-view-of-a-diverse-team-in-a-business-meeting-using-laptops-and-tablets-zCTsw2ATnqBFxIigP8kIMw.jpeg-HkgldujkXpis-Xm_-2ts7g.jpg")}
}
section.oscura h2,section.oscura h3{color:#fff}
section.oscura .entrada{color:#EDEFEE}

.eyebrow{font:400 .75rem/1 var(--dato);letter-spacing:.16em;text-transform:uppercase;
  color:var(--rojo);margin:0 0 1rem;display:flex;align-items:center;gap:.75rem}
.eyebrow::after{content:"";height:1px;flex:1;max-width:5rem;background:var(--rojo);opacity:.35}
section.oscura .eyebrow{color:#F2A0A0}
section.oscura .eyebrow::after{background:#F2A0A0}

h1{font-size:clamp(2.1rem,5.2vw,3.1rem);font-weight:700;line-height:1.06;
  letter-spacing:-.035em;margin:0 0 1.15rem;text-wrap:balance}
h2{font-size:clamp(1.6rem,3.6vw,2.15rem);font-weight:700;line-height:1.15;
  letter-spacing:-.025em;margin:0 0 1rem;text-wrap:balance;max-width:22ch}
h3{font-size:1.125rem;font-weight:700;margin:0 0 .5rem;letter-spacing:-.01em}
.entrada{font-weight:300;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.45;
  margin:0 0 1.75rem;max-width:46ch;color:var(--gris)}
section.oscura p{color:#C6C9C7}
p{max-width:var(--medida)}

/* ============================================================================
   FOTOGRAFÍA
   ----------------------------------------------------------------------------
   Tres imágenes, y las tres son DEL TEMA — no gente sonriendo en una oficina:

     · el mapa de procesos dibujado a mano  = lo que entrega la auditoría
     · el escritorio lleno de formularios   = el trabajo manual que se sustituye
     · la mesa de equipo                    = genérica, sólo como textura oscura

   NINGUNA SE USA A PELO. Todas van bajo un velo, porque una foto de archivo sin
   tratar se reconoce como foto de archivo y le quita seriedad a la página. El
   velo además garantiza el contraste del texto encima, que es lo que de verdad
   decide si la foto suma o estorba.

   PESO: por defecto se sirve la versión de 976px (~130 KB) y la de 1920 sólo por
   encima de 1200px de ancho. Al ir veladas y desenfocadas por el propio velo, la
   diferencia no se aprecia y el móvil no paga 570 KB por una textura.
   ========================================================================== */
.embudo,.oscura{background-repeat:no-repeat;background-size:cover}

/* ---- héroe: dos columnas, copy y el entregable ----
   SIN FOTO, y es una decisión. La del mapa de procesos no lucía: bajo el velo que
   hacía falta para leer el titular encima quedaba en una mancha marrón. Y con el
   tablero animado justo debajo, el héroe tiene que estar tranquilo.

   El fondo es una retícula técnica muy tenue que se abre hacia la derecha — la
   misma malla de puntos que cita al logo en la sección oscura. Así el documento,
   que es papel hueso, cae sobre un suelo técnico: dos materiales que contrastan,
   en vez de una tarjeta blanca sobre una foto beige. */
.heroe{padding:5rem 0 5.5rem;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 18%, rgba(207,56,56,.055) 0%, transparent 55%),
    linear-gradient(180deg, var(--niebla-alta) 0%, var(--papel) 62%)}
.heroe::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(58,60,59,.20) 1px, transparent 0);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(100deg, transparent 34%, #000 92%);
  mask-image:linear-gradient(100deg, transparent 34%, #000 92%)}
.heroe > .env{position:relative;z-index:1}

/* ---- el embudo: una sola sección, del gancho al lead ---- */
.embudo{position:relative;padding:5.5rem 0 6rem;color:#fff;background-position:center 35%;
  background-image:
    linear-gradient(rgba(35,37,31,.88),rgba(35,37,31,.80)),
    url("/images/976/5283903/pexels-photo-860379.jpeg")}
@media (min-width:1200px){
  .embudo{background-image:
    linear-gradient(rgba(35,37,31,.88),rgba(35,37,31,.80)),
    url("/images/1920/5283903/pexels-photo-860379.jpeg")}
}
.embudo .eyebrow{color:#F2A0A0}
.embudo .eyebrow::after{background:#F2A0A0}
/* 90% del paso, no 20ch: a 20ch el titular partía renglones sin necesidad y las
   tres líneas quedaban cortas y desiguales. Se queda DENTRO de los 40rem del paso
   —90% de ellos— a propósito: si se saliera, el bloque volvería a ensancharse al
   estar en el gancho y a encoger al pasar a la calculadora, que es justo el salto
   que Jorge hizo quitar. */
.gancho h2{color:#fff;max-width:90%;font-size:clamp(1.7rem,4vw,2.4rem);
  line-height:1.22;letter-spacing:-.02em}
/* Aire entre el titular y el párrafo. Con el titular a tres líneas, el 1rem que
   heredaba de h2 los dejaba pegados y el bloque entero se leía apretado. */
.gancho h2{margin-bottom:1.6rem}
.gancho > p{line-height:1.6}
.gancho p{color:#D6D9D7;max-width:44ch;font-size:1.05rem}
.gancho .acciones{margin-top:2rem}

/* El indicador de paso. Tres, y con nombre: «paso 2 de 3» no dice nada, «tus
   números» sí. Va arriba porque su trabajo es prometer que esto se acaba.

   EL NÚMERO VA EN EL MARCADO, no en un contador de CSS. Jorge reportó verlos mal
   y no se pudo reproducir; en vez de dejar un mecanismo que podría fallar según
   el navegador, el dígito se escribe y no hay nada que contar. La palomita del
   paso ya recorrido se hace ocultando el dígito, no sustituyéndolo. */
.pasos{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin:0 0 2.4rem;padding:0;
  font:400 .75rem/1 var(--dato);letter-spacing:.1em;text-transform:uppercase}
.pasos li{display:flex;align-items:center;gap:.6rem;color:#8E938F}
.pasos li i{display:grid;place-items:center;width:1.5rem;height:1.5rem;flex:none;
  border:1px solid #5A5E5C;border-radius:50%;font-size:.6875rem;font-style:normal;color:#8E938F}
.pasos li.on{color:#fff}
.pasos li.on i{border-color:var(--rojo);background:var(--rojo);color:#fff}
.pasos li.hecho{color:#B7BBB9}
.pasos li.hecho i{border-color:#7FD4AB;color:transparent;position:relative}
.pasos li.hecho i::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  color:#7FD4AB;font-size:.8125rem}
.heroe-rej{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:start}
@media (max-width:900px){.heroe-rej{grid-template-columns:1fr;gap:2.5rem}}

/* El entregable de la auditoría, tratado como lo que es: un documento. */
.informe{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  border-top:3px solid var(--rojo);padding:1.6rem 1.7rem;position:relative}
.informe h2{font:700 .75rem/1 var(--dato);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);margin:0 0 1.1rem;max-width:none}
.informe ul{margin:0;padding:0;list-style:none;display:grid;gap:.85rem}
.informe li{padding-left:1.65rem;position:relative;font-size:.9375rem;line-height:1.5}
.informe li::before{content:"";position:absolute;left:.15rem;top:.5em;width:.62rem;height:.33rem;
  border-left:2px solid var(--rojo);border-bottom:2px solid var(--rojo);transform:rotate(-45deg)}
.informe .plazo{margin:1.3rem 0 0;padding-top:1.1rem;border-top:1px solid var(--linea);
  font:400 .8125rem/1.4 var(--dato);color:var(--gris);font-variant-numeric:tabular-nums}

/* ---- botones ---- */
.acciones{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.btn{font:700 .9375rem/1 var(--voz);padding:.9rem 1.6rem;border-radius:var(--r);
  border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;
  transition:background .15s,border-color .15s,color .15s}
.btn.p{background:var(--rojo);color:#fff}
.btn.p:hover{background:var(--rojo-hover)}
.btn.s{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn.s:hover{border-color:var(--tinta)}
section.oscura .btn.s{color:#fff;border-color:#5A5E5C}
section.oscura .btn.s:hover{border-color:#fff}
.nav-links .btn{padding:.62rem 1.15rem;font-size:.875rem;color:#fff}

/* ---- la malla de nodos: el logo es un grafo, y ésta es su única cita ----- */
.oscura::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,#5A5E5C 1px,transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(105deg,transparent 38%,#000 100%);
  mask-image:linear-gradient(105deg,transparent 38%,#000 100%)}
.oscura .env{position:relative;z-index:1}

/* ---- línea de estado: el componente firma ---- */
.estados{display:flex;flex-direction:column;gap:.55rem;margin:2rem 0 0;max-width:41rem}
.linea{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  background:#2E312F;border:1px solid #4A4E4C;border-left:3px solid var(--ok);
  border-radius:var(--r);padding:.8rem 1rem}
.linea.at{border-left-color:var(--atencion)}
.linea.ca{border-left-color:var(--caido)}
.punto{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 rgba(95,191,146,.55);animation:latido 2.6s ease-out infinite}
.linea.at .punto{background:var(--atencion);animation:none}
.linea.ca .punto{background:var(--caido);animation:none}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(95,191,146,.5)}
  70%{box-shadow:0 0 0 .5rem rgba(95,191,146,0)}
  100%{box-shadow:0 0 0 0 rgba(95,191,146,0)}
}
.linea .que{font-weight:700;font-size:.9375rem;flex:1;min-width:9.5rem;color:#fff}
.pastilla{font:400 .6875rem/1 var(--dato);letter-spacing:.08em;text-transform:uppercase;
  padding:.34rem .55rem;border-radius:2px;background:rgba(95,191,146,.16);color:#7FD4AB;flex:none}
.linea.at .pastilla{background:rgba(247,155,77,.16);color:#F7B27A}
.linea.ca .pastilla{background:rgba(232,107,114,.16);color:#F09AA0}
.linea time{font:400 .75rem/1 var(--dato);color:#9DA2A0;
  font-variant-numeric:tabular-nums;flex:none}

/* ---- tarjetas ---- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:1.1rem;
  margin-top:2.4rem}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:1.7rem;display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .15s,transform .15s}
.tarjeta:hover{border-color:var(--gris-suave)}
.tarjeta .num{font:400 .75rem/1 var(--dato);letter-spacing:.12em;color:var(--rojo);
  margin-bottom:.7rem}
.tarjeta p{margin:0;font-size:.9375rem;color:var(--gris)}
.tarjeta .cifra{font:700 1.9rem/1 var(--voz);font-variant-numeric:tabular-nums;
  letter-spacing:-.025em;margin:.3rem 0}
.tarjeta .cifra small{font:400 .8125rem/1 var(--dato);color:var(--gris);
  display:block;margin-top:.45rem;letter-spacing:.05em}
/* El punteado de «todavía sin precio» se retiró el 2026-08-11 junto con los dos
   «Quoted»: ya no hay hueco que señalar. */


/* ---- FAQ ---- */
.faq{max-width:47rem;margin-top:2.4rem}
.faq details{border-bottom:1px solid var(--linea)}
.faq details:first-child{border-top:1px solid var(--linea)}
.faq summary{font-weight:700;font-size:1rem;cursor:pointer;list-style:none;padding:1.2rem 0;
  display:flex;align-items:flex-start;gap:.9rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--rojo);font:700 1.1rem/1.35 var(--dato);flex:none}
.faq details[open] summary::before{content:"–"}
.faq summary:hover{color:var(--rojo)}
.faq p{margin:0 0 1.3rem 1.85rem;font-size:.9375rem;color:var(--gris)}


/* ---- pie ---- */
.pie{background:var(--tinta);color:#B7BBB9;padding:3.5rem 0 2rem;font-size:.9375rem}
.pie .env{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:flex-start}
.pie img{width:140px;display:block}
.pie a{color:#fff;text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie .contacto{margin-left:auto;text-align:right}
.pie .contacto a{font-size:1.05rem;font-weight:700}
.pie .legal{width:100%;border-top:1px solid #3A3C3B;padding-top:1.3rem;margin-top:.8rem;
  font-size:.8125rem;color:var(--gris-suave);display:flex;gap:1.6rem;flex-wrap:wrap;
  align-items:center}
.pie .legal a{color:var(--gris-suave)}
@media (max-width:640px){.pie .contacto{margin-left:0;text-align:left}}



/* ============================================================================
   EL DOCUMENTO DEL HÉROE
   ----------------------------------------------------------------------------
   Antes era una tarjeta blanca con un filete rojo arriba. Jorge: «se ve 100% IA»
   — y es cierto: la barra de acento sobre tarjeta redondeada es el tic más
   reconocible del diseño generado.

   Ahora es lo que de verdad es: la PORTADA DE UN INFORME. Papel hueso, cabecera
   con marca y referencia, tipo de documento, y el índice paginado con puntos
   guía. La jerarquía la hacen las reglas finas y la tipografía, no un color.
   La hoja de debajo asoma para que se lea como un documento de varias páginas.
   ========================================================================== */
.doc{position:relative}
/* SOMBRA, NO SEGUNDA HOJA. Empezó siendo un rectángulo sólido detrás y su borde
   se leía como una línea dura — que es justo lo que una sombra no tiene. Ahora es
   negro que se degrada hasta perderse, desplazado abajo y a la derecha, que es
   donde cae con la luz que el ojo da por supuesta.

   ⚠️ ESTO CONTRADICE A PROPÓSITO la regla del sistema que dice «nada de sombras
   difusas». Esa regla existe para que la jerarquía no se haga con sombras sobre
   tarjetas — el uniforme de cualquier plantilla de SaaS. Aquí la sombra no ordena
   nada: representa un objeto físico, una hoja de papel sobre una mesa. Es la única
   sombra del sitio y la excepción está escrita también en design/index.html.

   Dos capas: una corta y densa para el contacto con la superficie, otra larga y
   tenue para la caída. Con una sola, o se ve pegada o se ve flotando. */
.doc-hoja{box-shadow:
  6px 8px 14px -8px rgba(24,26,23,.34),
  22px 28px 52px -18px rgba(24,26,23,.30)}
.doc-hoja{position:relative;background:#FBFAF6;border:1px solid #DCD8CD;border-radius:2px;
  padding:1.7rem 1.8rem 1.5rem}
.doc-cab{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.7rem;border-bottom:1.5px solid var(--tinta)}
.doc-marca{font:700 .8125rem/1 var(--voz);letter-spacing:.14em;color:var(--tinta)}
.doc-ref{font:400 .6875rem/1 var(--dato);letter-spacing:.08em;color:#9A9689}
.doc-tipo{margin:1.1rem 0 .2rem;font:400 .6875rem/1 var(--dato);letter-spacing:.16em;
  text-transform:uppercase;color:var(--rojo)}
.doc-titulo{margin:0 0 1.3rem;font-size:1.2rem;font-weight:700;letter-spacing:-.015em;
  color:var(--tinta);max-width:none}
.doc-indice{list-style:none;margin:0;padding:0;counter-reset:d;display:grid;gap:.1rem}
.doc-indice li{counter-increment:d;display:grid;grid-template-columns:1.6rem 1fr auto;
  gap:.6rem;align-items:baseline;padding:.52rem 0;border-bottom:1px dotted #D5D0C3;
  font-size:.9375rem;line-height:1.4;color:#3B3A33}
.doc-indice li::before{content:counter(d,decimal-leading-zero);
  font:400 .6875rem/1.5 var(--dato);color:#A8A396}
.doc-indice li::after{content:"p." counter(d);font:400 .6875rem/1.5 var(--dato);color:#A8A396}
.doc-pie{margin:1.2rem 0 0;font:400 .75rem/1.4 var(--dato);color:#9A9689;
  letter-spacing:.03em;font-variant-numeric:tabular-nums}

/* ============================================================================
   EL TABLERO — centro de mando
   ----------------------------------------------------------------------------
   «Debe ser más apantallante, un tablero de control dinámico» (Jorge). En vez de
   tres líneas de estado quietas, los datos cruzan de verdad y el registro narra
   lo que pasa: cuando algo se rompe, se ve pararse en el centro, la línea dice
   qué fue, y al arreglarse sigue su camino. La promesa, demostrada.

   La etiqueta «sample data» no es decoración: es lo que separa enseñar el
   producto de inventar telemetría de clientes.
   ========================================================================== */
.tablero{margin-top:2.4rem;background:rgba(26,28,27,.72);border:1px solid #4A4E4C;
  border-radius:var(--r);overflow:hidden;backdrop-filter:blur(2px)}
.tab-cab{display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;
  border-bottom:1px solid #4A4E4C;background:rgba(0,0,0,.18)}
.tab-vivo{width:.5rem;height:.5rem;border-radius:50%;background:#5FBF92;flex:none;
  box-shadow:0 0 0 0 rgba(95,191,146,.5);animation:latido 2.6s ease-out infinite}
.tab-nombre{font:700 .8125rem/1 var(--voz);color:#fff;letter-spacing:.01em}
.tab-demo{margin-left:auto;font:400 .6875rem/1 var(--dato);letter-spacing:.1em;
  text-transform:uppercase;color:#8E938F;border:1px solid #4A4E4C;padding:.3rem .5rem;
  border-radius:2px}
.tab-lienzo{padding:.4rem .3rem 0}
.tab-lienzo canvas{display:block;width:100%;height:230px}
@media (max-width:720px){.tab-lienzo canvas{height:250px}}


.tab-log{list-style:none;margin:0;padding:.7rem 1rem 1rem;border-top:1px solid #4A4E4C;display:flex;
  flex-direction:column-reverse;gap:.42rem;min-height:8.2rem;justify-content:flex-end}
.tab-log li{display:flex;gap:.75rem;align-items:baseline;
  font:400 .75rem/1.45 var(--dato);color:#9DA2A0;animation:entra .35s ease-out}
.tab-log li time{color:#6E7370;flex:none;font-variant-numeric:tabular-nums}
.tab-log li.mal{color:#F09AA0}
.tab-log li.bien{color:#7FD4AB}
@keyframes entra{from{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tab-log li{animation:none}}


/* ============================================================================
   EL EMBUDO, UNIFORME EN LOS TRES PASOS
   ----------------------------------------------------------------------------
   Jorge, 2026-08-11: el ancho crecía entre un paso y otro, el botón estaba
   integrado en la calculadora y suelto en el gancho, y desde la calculadora no
   había forma de volver al texto.

   Un solo ancho para los tres pasos, los botones siempre FUERA del panel y a la
   izquierda, y cuando hay dos, en el mismo renglón con el de volver primero.
   ========================================================================== */
.paso-caja,#ai-savings-calculator,#thank-you-section{max-width:40rem}
.gancho h2,.gancho p{max-width:none}

/* Los botones de la calculadora dejan de ser barras de ancho completo dentro del
   panel: mismo tamaño, mismo peso y misma alineación que el del gancho. */

/* ============================================================================
   LA CALCULADORA, COMO APARATO
   ----------------------------------------------------------------------------
   Jorge pidió que pareciera una calculadora de verdad en escritorio y que en el
   móvil fuera cómoda. Son las dos, y no es lo mismo: en escritorio el cuerpo
   oscuro con visor le da carácter; en móvil ese mismo cuerpo estorbaría, así que
   las filas se apilan, los campos van a ancho completo y los deslizadores crecen
   hasta ser cómodos con el pulgar.

   El visor enseña sólo el COSTE DE HOY y se actualiza al teclear: sale de datos
   del propio visitante, sin ningún supuesto nuestro. El ahorro espera al botón
   porque necesita nuestra tasa, y ésa se enseña escrita debajo.
   ========================================================================== */
.maquina{background:#1E201F;border:1px solid #3A3C3B;border-radius:6px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset}

/* El visor: a la izquierda lo que cuesta hoy, a la derecha lo que va a ver.
   La promesa está en rojo de marca porque es lo único de la caja que pide una
   acción — teclear. Las cifras van con «?» a propósito: enseñan el formato del
   premio sin inventarse un número. */
.visor{display:grid;grid-template-columns:1fr auto;gap:1.4rem 2rem;align-items:start;
  padding:1.5rem 1.6rem 1.3rem;background:#15100E;
  background-image:linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%);
  border-bottom:1px solid #3A3C3B}
.visor-eti{display:block;font:400 .6875rem/1 var(--dato);letter-spacing:.14em;
  text-transform:uppercase;color:#8E938F}
.visor-num{display:block;margin:.55rem 0 .3rem;font:700 2.6rem/1 var(--dato);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#7FD4AB;
  text-shadow:0 0 22px rgba(127,212,171,.28)}
.visor-sub{display:block;font:400 .75rem/1.4 var(--dato);color:#6E7370}

.maquina form{padding:.4rem 1.6rem 1.5rem}
.tecla{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.2rem;align-items:center;
  padding:1.05rem 0;border-bottom:1px solid #2E312F}
.tecla label{font-size:.9375rem;line-height:1.4;color:#D6D9D7;margin:0}
.tecla output{font:700 1rem/1 var(--dato);color:var(--rojo);font-variant-numeric:tabular-nums;
  justify-self:end}
.tecla.desliza input[type="range"]{grid-column:1/-1;margin:.2rem 0 0}

.maquina input[type="number"],.maquina input[type="email"]{
  font:400 1rem/1 var(--dato);font-variant-numeric:tabular-nums;text-align:right;
  width:7.5rem;padding:.6rem .7rem;border:1px solid #4A4E4C;border-radius:3px;
  background:#15100E;color:#fff}
.maquina input[type="email"]{width:100%;text-align:left}
.maquina input:focus{outline:2px solid var(--rojo);outline-offset:-1px;border-color:var(--rojo)}

.maquina input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:3px;
  background:#3A3C3B;border-radius:3px;outline:none}
.maquina input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:1.25rem;height:1.25rem;border-radius:50%;background:var(--rojo);cursor:pointer;
  border:3px solid #1E201F;box-shadow:0 0 0 1px var(--rojo)}
.maquina input[type="range"]::-moz-range-thumb{width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--rojo);cursor:pointer;border:3px solid #1E201F;box-shadow:0 0 0 1px var(--rojo)}

/* El supuesto, a la vista. Un número que sale de una caja negra no se defiende.

   SIN FILETE LATERAL: es el tic más reconocible del diseño generado, y Jorge lo
   marcó. En su lugar va un distintivo con «≈», que además dice lo que el bloque
   dice — que ese 70% es una aproximación nuestra. Se descartó el triángulo de
   alerta a propósito: aquí no hay nada mal, hay un supuesto declarado, y advertir
   de un peligro que no existe gasta la atención que hará falta cuando sí lo haya.

   El símbolo va por ::before y no en el marcado, para que no acabe dentro del
   campo editable del CMS: Jorge cambia el texto y el distintivo no se toca. */
.supuesto{position:relative;margin:1.3rem 0 0;padding:.9rem 1rem .9rem 3.2rem;
  border:1px solid rgba(245,130,32,.24);border-radius:3px;background:rgba(245,130,32,.06);
  font-size:.8125rem;line-height:1.55;color:#B7BBB9;max-width:none}
.supuesto::before{content:"≈";position:absolute;left:.95rem;top:.88rem;
  width:1.55rem;height:1.55rem;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--atencion);color:var(--atencion);
  font:700 .875rem/1 var(--dato)}
.supuesto b{color:#F7B27A}

.button-row,.button-group{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.4rem 0 0}
.button-group{flex-direction:row-reverse;justify-content:flex-end;margin-top:1.1rem}
.maquina button,#thank-you-section button{font:700 .9375rem/1 var(--voz);padding:.9rem 1.6rem;
  border:1px solid transparent;border-radius:3px;background:var(--rojo);color:#fff;cursor:pointer;
  width:auto;transition:background .15s}
.maquina button:hover,#thank-you-section button:hover{background:var(--rojo-hover)}
.maquina .back-button{background:transparent;color:#9DA2A0;border-color:#4A4E4C}
.maquina .back-button:hover{background:transparent;border-color:#fff;color:#fff}

#results-section{padding:0 1.6rem 1.6rem}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.4rem 0 0}
.result-card{padding:1rem 1.1rem;border-radius:3px;background:#15100E;border:1px solid #3A3C3B;
  border-left:3px solid var(--atencion)}
.result-card h4{margin:0 0 .5rem;font:400 .6875rem/1.3 var(--dato);letter-spacing:.09em;
  text-transform:uppercase;color:#8E938F}
.result-card .value{font:700 1.3rem/1.1 var(--dato);color:#fff;font-variant-numeric:tabular-nums}
.result-card.green-card{border-left-color:var(--ok)}
.result-card.green-card .value{color:#7FD4AB}

.cta-section{margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid #2E312F}
.cta-section p{margin:0 0 .9rem;font-size:.9375rem;color:#B7BBB9;max-width:none}

#thank-you-section .thank-you-card{background:#1E201F;border:1px solid #3A3C3B;border-radius:6px;
  padding:2.2rem 1.8rem}
#thank-you-section h2{color:#fff;font-size:1.4rem;margin:0 0 .7rem;max-width:none}
#thank-you-section p{color:#B7BBB9;font-size:.9375rem;margin:0 0 1.3rem;max-width:none}

#error-modal{position:fixed;inset:0;background:rgba(21,16,14,.7);z-index:100;display:flex;
  align-items:center;justify-content:center;padding:1.5rem}
#error-modal.hidden{display:none}
.error-content{max-width:26rem;padding:1.7rem;background:#1E201F;border:1px solid #3A3C3B;
  border-radius:6px;border-top:3px solid var(--caido)}
.error-content h3{margin:0 0 .6rem;color:#F09AA0;font-size:1.05rem}
.error-content p{margin:0 0 1.3rem;font-size:.9375rem;color:#B7BBB9;max-width:none}

/* ---- móvil: el mismo aparato, cómodo con el pulgar ---- */
@media (max-width:640px){
  .visor{padding:1.2rem 1.1rem 1rem}
  .visor-num{font-size:2.1rem}
  .maquina form{padding:.3rem 1.1rem 1.3rem}
  .tecla{grid-template-columns:1fr;gap:.55rem;padding:1.1rem 0}
  .tecla output{justify-self:start;font-size:1.15rem}
  .maquina input[type="number"]{width:100%;text-align:left;padding:.85rem .8rem;font-size:1rem}
  .maquina input[type="range"]{height:6px}
  .maquina input[type="range"]::-webkit-slider-thumb{width:1.75rem;height:1.75rem}
  .maquina input[type="range"]::-moz-range-thumb{width:1.75rem;height:1.75rem}
  .button-row button,.button-group button{flex:1 1 auto;min-width:8rem}
  #results-section{padding:0 1.1rem 1.3rem}
  .results-grid{grid-template-columns:1fr}
}
/* Etiqueta de verdad en vez de placeholder: un placeholder desaparece al teclear
   y los lectores de pantalla no lo tratan como nombre del campo. */
.cta-eti{display:block;margin:0 0 .45rem;font:400 .75rem/1 var(--dato);letter-spacing:.09em;
  text-transform:uppercase;color:#8E938F}


/* ============================================================================
   RANKING — dónde rinde más, con su costo en la misma fila
   ----------------------------------------------------------------------------
   Empezó siendo dos bloques: la lista ordenada y, debajo, una tabla roja con las
   cifras. Jorge, 2026-08-11: «intégralo renglón por renglón, una caja roja por
   ítem». Y tenía razón — separados obligaban a cruzar con la vista qué cifra era
   de qué área, y la cifra es justo lo que le da peso al síntoma.

   AQUÍ LA NUMERACIÓN SIGNIFICA ALGO: es el orden de prioridad recomendado, no un
   adorno. Y la caja roja es el único sitio de la página donde el rojo cubre
   superficie, porque no compite con ninguna acción: dentro no hay un botón.

   Las cifras son ARITMÉTICA CON LOS SUPUESTOS A LA VISTA — horas por semana, a
   $30 la hora, escrito arriba. No son «lo que pierden las empresas», que es una
   afirmación que no podemos respaldar.
   ========================================================================== */
/* La nota corre a lo ANCHO DE LA TABLA que explica, no a 56ch. A media anchura
   quedaba en seis renglones cortos, amontonada encima de una lista que ocupa el
   doble — y una nota que se lee peor que lo que aclara no aclara nada. */
.ranking-nota{margin:0 0 1.8rem;font:400 .8125rem/1.6 var(--dato);color:var(--gris);
  max-width:56rem}

.ranking{list-style:none;margin:0 0 0;padding:0;counter-reset:r;max-width:56rem;
  border-top:1px solid var(--linea)}
.ranking li{counter-increment:r;border-bottom:1px solid var(--linea);
  padding:1.35rem 0 1.35rem 4rem;position:relative;
  display:grid;grid-template-columns:1fr 13.5rem;gap:.35rem 1.8rem;align-items:start}
.ranking li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:1.55rem;
  font:700 1rem/1 var(--dato);color:var(--rojo);letter-spacing:.02em}
.ranking > li > b{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;align-self:center}
.ranking > li > span{grid-column:1;font-size:.9375rem;color:var(--gris);line-height:1.5;
  max-width:52ch}




/* ============================================================================
   EL PROCESO — la línea que se vuelve círculo
   ----------------------------------------------------------------------------
   El dibujo carga UNA sola afirmación: construir termina, vigilar no. Y esa forma
   es el modelo de cobro, así que el diagrama lo explica sin decirlo.

   Todo en `currentColor` salvo el bucle, que va en rojo de marca. Es la única
   pieza con color literal porque es la única que carga significado: lo rojo es lo
   que se paga cada mes. El resto hereda el color del texto y sigue leyéndose si
   algún día la sección cambia de fondo.

   Sin librería, sin runtime y sin imágenes: SVG a mano que escala con el ancho.
   ========================================================================== */
.proceso{margin:2.6rem 0 0;padding:0}
.proceso svg{display:block;width:100%;max-width:62rem;height:auto;color:var(--tinta)}
.proceso figcaption{margin:1.1rem 0 0;max-width:60ch;font-size:.9375rem;color:var(--gris)}

.p-fase{font:700 12px/1 var(--dato);letter-spacing:.14em;fill:var(--gris)}
.p-eti{font:700 13px/1 var(--voz);fill:currentColor}
.p-min{font:400 10px/1 var(--dato);letter-spacing:.06em;fill:var(--gris)}
.p-rojo{fill:var(--rojo)}
.p-via{stroke:currentColor;stroke-width:1.5;opacity:.55}
.p-nodo{fill:var(--papel);stroke:currentColor;stroke-width:2}
.p-rn{stroke:var(--rojo)}
.p-orbe{fill:none;stroke:var(--rojo);stroke-width:1.5;opacity:.6}
.p-punta{fill:var(--rojo)}
.p-paso{fill:none;stroke:var(--rojo);stroke-width:1.5;stroke-dasharray:5 4}
.p-div{stroke:currentColor;stroke-width:1;opacity:.2;stroke-dasharray:3 5}
section.gris .p-nodo{fill:var(--niebla)}

/* El detalle, fuera del dibujo: en el SVG cabrían pero se leerían peor, y las
   frases explicativas no van dentro de una figura. */
.proc-detalle{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-top:3rem;
  max-width:62rem}
.proc-detalle h3{font:400 .75rem/1 var(--dato);letter-spacing:.14em;text-transform:uppercase;
  color:var(--rojo);margin:0 0 1.1rem;padding-bottom:.7rem;border-bottom:1px solid var(--linea)}
.proc-detalle ol{list-style:none;margin:0;padding:0;counter-reset:pd;display:grid;gap:.85rem}
.proc-detalle li{counter-increment:pd;position:relative;padding-left:2.2rem;
  font-size:.9375rem;line-height:1.5;color:var(--gris)}
.proc-detalle li::before{content:counter(pd,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font:400 .6875rem/1.6 var(--dato);color:var(--gris-suave)}
.proc-detalle b{color:var(--tinta);font-weight:700}
@media (max-width:760px){.proc-detalle{grid-template-columns:1fr;gap:2rem}}


/* ---- la cifra de cada fila -----------------------------------------------
   SIN CAJA ROJA, y no por accidente aunque llegó por accidente: al retirar la
   fila del total un regex se llevó por delante estas reglas, Jorge vio el
   resultado desnudo y prefirió ése. Tiene razón — el rojo a sangre en seis filas
   seguidas gritaba tanto que la cifra dejaba de leerse, y el único bloque de la
   página con fondo de marca debería ser uno, no seis.

   Lo que queda hace el trabajo con jerarquía en vez de color: el año grande en
   tinta, el mes a su lado en gris, la barra —que sigue siendo lo que impide
   sumar el verde al rojo, porque se ve dentro— y el remate en verde.

   ⚠️ Las reglas van acotadas a `.ranking`: `.cifra` la usan también las tarjetas
   de precio de más abajo. */
.ranking .cifra{display:flex;flex-direction:column;gap:.1rem;padding:0}
.ranking .cifra i{font:400 .625rem/1 var(--dato);font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris-suave);margin-bottom:.35rem}
.ranking .cifra .par{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.ranking .cifra em{font:700 1.45rem/1 var(--dato);font-style:normal;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--tinta)}
.ranking .cifra strong{font:700 .875rem/1 var(--dato);font-variant-numeric:tabular-nums;
  color:var(--gris)}
.ranking .cifra u{font-weight:400;font-size:.625rem;text-decoration:none;
  margin-left:.1rem;color:var(--gris-suave)}

/* La barra: el todo es lo que cuesta hoy y el trozo verde es lo que vuelve. 70%
   en todas, porque es el mismo supuesto que usa la calculadora. Es lo que impide
   leer las dos cifras como sumables: una se ve DENTRO de la otra. */
.barra{margin:.7rem 0 .5rem;height:6px;border-radius:99px;overflow:hidden;
  background:var(--linea)}
.barra span{display:block;height:100%;width:70%;border-radius:99px;
  background:linear-gradient(90deg,#2E7D5B,#5FBF92)}

/* El renglón del porcentaje va entero o no va: partido en dos se leía como dos
   datos sueltos en vez de como una frase. Si algún día un número crece,
   preferimos verlo desbordar y corregir a que se parta en silencio. */
.ranking .cifra small{margin-top:.1rem;white-space:nowrap;
  font:400 .6875rem/1.35 var(--dato);color:var(--gris)}
.ranking .cifra b{margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--linea);
  font:700 .6875rem/1.3 var(--dato);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ok)}

.ranking li{grid-template-columns:1fr 16rem;gap:.35rem 2rem}
.ranking li > .cifra{grid-column:2;grid-row:1/4;align-self:start}

@media (max-width:760px){
  .ranking li{grid-template-columns:1fr;padding-left:2.6rem;gap:.5rem}
  .ranking li > .cifra{grid-column:1;grid-row:auto;margin-top:.9rem;
    padding-top:.9rem;border-top:1px solid var(--linea)}
  .ranking .cifra small{white-space:normal}
}

/* ---- el titular que se releva ------------------------------------------
   La segunda mitad va rotando entre frases de beneficio. Se funde y sube un
   poco, en vez de escribirse letra a letra: el tecleo obliga a esperar a que
   termine para leer, y aquí la frase es lo que se vende.

   `min-height` reserva el alto de tres renglones para que el bloque no salte
   cuando entra una frase más larga — el salto empuja el botón, y un botón que
   se mueve solo se falla al pulsar. */
.heroe h1{min-height:3.2em}
.gira{display:inline-block;transition:opacity .3s ease,transform .3s ease}
.gira.yendo{opacity:0;transform:translateY(-.22em)}
@media (prefers-reduced-motion:reduce){.gira{transition:none}}

/* ---- las teclas del aparato ---------------------------------------------
   Las flechitas de `input[type=number]` las dibuja el navegador con su propio
   gris claro, y sobre el cuerpo oscuro de la calculadora se veían pegadas y
   sucias. Se ocultan y se sustituyen por dos teclas nuestras.

   No es sólo estética: las nativas miden unos 10px de alto cada una y en un
   móvil no se aciertan. Éstas son cuadradas de 2.4rem, que es área de toque de
   verdad. */
.maquina input[type="number"]::-webkit-outer-spin-button,
.maquina input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.maquina input[type="number"]{-moz-appearance:textfield;appearance:textfield}

.stepper{display:inline-flex;align-items:stretch;border:1px solid #4A4E4C;border-radius:3px;
  overflow:hidden;background:#15100E}
.stepper input[type="number"]{border:0;border-radius:0;background:transparent;
  width:5.5rem;text-align:center;padding:.6rem .3rem}
.stepper input[type="number"]:focus{outline:2px solid var(--rojo);outline-offset:-2px}
.stepper button{width:2.4rem;flex:none;padding:0;border:0;border-radius:0;background:#22201E;
  color:#C6C9C7;font:400 1.15rem/1 var(--dato);cursor:pointer;transition:background .12s,color .12s}
.stepper button:hover{background:var(--rojo);color:#fff}
.stepper button:active{background:var(--rojo-hover)}
.stepper button:focus-visible{outline:2px solid var(--rojo);outline-offset:-2px}
.stepper .menos{border-right:1px solid #4A4E4C}
.stepper .mas{border-left:1px solid #4A4E4C}

@media (max-width:640px){
  .stepper{width:100%}
  .stepper input[type="number"]{width:auto;flex:1;font-size:1.05rem}
  .stepper button{width:3rem;font-size:1.3rem}
}

.visor-promesa{border-left:1px solid #3A3C3B;padding-left:1.6rem;min-width:14rem}
.vp-eti{display:block;font:700 .6875rem/1.35 var(--dato);letter-spacing:.08em;
  text-transform:uppercase;color:var(--rojo);margin-bottom:.7rem;max-width:15ch}
.visor-promesa ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.visor-promesa li{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  font:400 .75rem/1.3 var(--dato);color:#8E938F}
.visor-promesa li i{font-style:normal;font-weight:700;color:#4E5250;flex:none}
.maquina.con-resultado .visor-promesa{display:none}
.maquina.con-resultado .visor{grid-template-columns:1fr}

@media (max-width:640px){
  .visor{grid-template-columns:1fr;gap:1.1rem}
  .visor-promesa{border-left:0;border-top:1px solid #3A3C3B;padding-left:0;padding-top:1.1rem}
  .vp-eti{max-width:none}
}

/* El remate es la TERCERA LÍNEA del titular, con la MISMA tipografía que las dos
   de arriba — decisión de Jorge, 2026-08-11. Se probó en peso ligero para marcar
   el giro de afirmación a pregunta, y no: la pregunta es el gancho, así que pesa
   lo mismo. Sólo se fuerza el salto de línea. */
.gancho h2 .remate{display:block}

/* Lo que decía el bloque de «la caja de costo» vive ahora arriba, en «la cifra de
   cada fila». Se conservan aquí las dos decisiones de contenido, que son las que
   se olvidan y se deshacen:

   EL PORCENTAJE VA ESCRITO. Antes decía «de eso, te devolveríamos $4,368» sin
   decir qué proporción era, y una barra sola no se mide a ojo.

   EL REMATE DICE AHORRO, NO INGRESO EXTRA, en las seis filas. El número es costo
   de mano de obra recuperado; llamarlo ingreso repetiría la confusión que el
   propio Jorge cazó. El golpe a los ingresos lo dice la línea «además golpea». */

/* El retorno del piloto al análisis: discontinuo y en rojo, porque no es un paso
   más de la secuencia — es lo que se aprende volviendo sobre lo decidido. */
.p-vuelta{stroke:var(--rojo);stroke-width:1.5;stroke-dasharray:4 4;fill:none}

/* ============================================================================
   PEDIR LA AUDITORÍA
   ----------------------------------------------------------------------------
   El segundo camino del embudo. A la izquierda, qué pasa después de enviar —tres
   pasos con su plazo, porque la fricción de un formulario no son los campos sino
   no saber qué viene luego—; a la derecha, la ficha.

   Deliberadamente CLARO Y BLANCO, al revés que la calculadora: aquélla es un
   aparato oscuro porque es una herramienta con la que se juega; ésta es papel
   para rellenar, y se parece al documento del héroe a propósito — lo que se pide
   aquí es exactamente lo que llega allá.
   ========================================================================== */
.reservar{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media (max-width:860px){.reservar{grid-template-columns:1fr;gap:2.2rem}}
.reservar-lado h2{max-width:18ch}
.reservar-lado > p{margin-bottom:2rem}

.reservar-pasos{list-style:none;margin:0;padding:0;counter-reset:rp;display:grid;gap:1rem;
  max-width:24rem}
.reservar-pasos li{counter-increment:rp;position:relative;padding-left:2.4rem;
  font-size:.9375rem;font-weight:700;color:var(--tinta)}
.reservar-pasos li::before{content:counter(rp);position:absolute;left:0;top:-.1em;
  width:1.6rem;height:1.6rem;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linea);background:var(--papel);
  font:700 .6875rem/1 var(--dato);color:var(--rojo)}
.reservar-pasos li span{display:block;margin-top:.2rem;font:400 .75rem/1.4 var(--dato);
  color:var(--gris)}

.ficha{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:1.8rem;display:flex;flex-direction:column;gap:1.1rem}
.ficha .campo{display:flex;flex-direction:column;gap:.4rem}
.ficha label{font:400 .75rem/1 var(--dato);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris)}
.ficha input,.ficha textarea{font:inherit;font-size:.9375rem;padding:.7rem .8rem;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--niebla-alta);
  color:var(--tinta);width:100%}
.ficha textarea{resize:vertical;line-height:1.5}
.ficha input:focus,.ficha textarea:focus{outline:2px solid var(--rojo);outline-offset:-1px;
  border-color:var(--rojo);background:var(--papel)}
.ficha small{font-size:.75rem;color:var(--gris-suave);line-height:1.45}
.ficha .button-row{margin-top:.3rem}
.ficha button{font:700 .9375rem/1 var(--voz);padding:.9rem 1.6rem;border:0;
  border-radius:var(--r);background:var(--rojo);color:#fff;cursor:pointer;
  transition:background .15s}
.ficha button:hover{background:var(--rojo-hover)}
.ficha button:disabled{opacity:.6;cursor:default}

/* El campo trampa: fuera de pantalla, no oculto con display:none — un robot que
   mire estilos se salta lo que está oculto, pero rellena lo que existe. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.ficha.gracias{border-top:3px solid var(--ok);gap:.7rem}
.ficha.gracias h3{margin:0;font-size:1.2rem}
.ficha.gracias p{margin:0;font-size:.9375rem;color:var(--gris)}

/* ⚠️ `hidden` NO BASTA SI UNA CLASE PONE `display`. El atributo trae
   `display:none` del navegador con especificidad (0,1,0), la misma que `.ficha`,
   así que gana el que vaya después — y `.ficha{display:flex}` iba después. La
   tarjeta de gracias se veía desde que cargaba la página.

   Se arregla con la regla específica, que no depende del orden, y con una general
   al final del archivo por si aparece otro caso. */
.ficha[hidden]{display:none}
[hidden]{display:none}

/* Y la tarjeta de gracias ocupa LA CELDA DEL FORMULARIO, no la siguiente: es su
   sustituta, no un tercer bloque. Sin esto caía bajo la columna izquierda. */
.reservar > .ficha{grid-column:2;grid-row:1}
@media (max-width:860px){
  .reservar > .ficha{grid-column:1;grid-row:auto}
}

/* ---- el cierre de la sección: el texto y, a su lado, por dónde seguir --------
   El total se retiró (Jorge, 2026-08-11): sumar las seis áreas daba una cifra
   grande y poco creíble —nadie tiene las seis igual de mal— y competía con la
   fila que de verdad le duele al lector.

   En su lugar, la salida: quien acaba de leer dónde pierde dinero está en el
   punto exacto para pedir que se lo midan. */
.que-cierre{display:grid;grid-template-columns:1fr auto;gap:1.5rem 2.5rem;
  align-items:center;max-width:56rem;margin-top:2.2rem;padding-top:1.8rem;
  border-top:1px solid var(--linea)}
.que-cierre p{margin:0}
.que-cta{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.que-cta b{font-size:1.0625rem;font-weight:700;white-space:nowrap}
@media (max-width:760px){
  .que-cierre{grid-template-columns:1fr;gap:1.4rem}
}

/* ---- el ancla de precio de la auditoría ---------------------------------
   Jorge, 2026-08-11: «si es gratis quizá no vale nada; estas ofertas suelen
   llevar un valor de $2,500». Es cierto, y el ancla se puso — pero con una
   condición: EL PRECIO ES REAL, $3,500, el que se cobra a quien pida la
   auditoría suelta. Un «valorado en $X» que nadie ha pagado no ancla, delata,
   sobre todo ante un comprador estadounidense que ve esa etiqueta a diario.

   Y lo que de verdad desactiva el «si es gratis no vale» no es el número
   tachado: es el PORQUÉ. Un descuento sin razón se lee como que el producto los
   valía; con razón explícita, el valor percibido se conserva. Por eso la nota
   dice por qué está sin costo y que el informe se queda con él pase lo que pase.
   ========================================================================== */
.ancla-precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.2rem;
  margin:0 0 1.6rem;padding:1rem 1.2rem;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--papel)}
.ap-cifras{display:flex;align-items:baseline;gap:.7rem;flex:none}
.ap-cifras s{font:400 1.35rem/1 var(--dato);color:var(--gris-suave);
  text-decoration-thickness:2px;font-variant-numeric:tabular-nums}
.ap-cifras b{font:700 1.5rem/1 var(--voz);color:var(--ok);letter-spacing:-.01em}
.ancla-precio p{margin:0;flex:1;min-width:16rem;font-size:.8125rem;line-height:1.55;
  color:var(--gris);max-width:none}
@media (max-width:520px){.ancla-precio{gap:.6rem}}

/* ---- las tres tarjetas de precio ----------------------------------------
   Jorge, 2026-08-11: «esos dos Quoted hay que poner RANGO, un Quoted abierto
   puede asustar a alguien». Tiene razón y es fricción medible: quien no sabe si
   son $3,000 u $80,000 no pide cotización, se va.

   Los rangos son suyos, no míos: $5,000–$25,000 sale de su propia investigación
   —lo que el cliente ideal puede justificar— y el «desde $500» lo puso él.

   La auditoría entra como PRIMERA tarjeta y destacada: ya es parte de la oferta,
   y ponerla al principio hace que el rango de al lado se lea después de algo
   gratis, no antes. */
.rejilla.precios{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
/* Un rango es cuatro veces más largo que «Quoted», y a 1.9rem se salía de la
   tarjeta. Baja a 1.5 y parte por el guion largo si hace falta — nunca al revés,
   que un precio cortado a la mitad se lee como otro precio. */
.precios .cifra{font-size:1.5rem;margin:.45rem 0 .1rem}
.tarjeta.destacada{border-color:var(--ok);border-top:3px solid var(--ok);
  background:var(--ok-fondo)}
.tarjeta .cifra s{font:400 1.15rem/1 var(--dato);color:var(--gris-suave);
  text-decoration-thickness:2px;margin-right:.5rem;font-variant-numeric:tabular-nums}
.tarjeta .cifra em{font-style:normal;color:var(--ok)}
.tarjeta.destacada p{color:#3F5F51}

/* Un rango sin explicación es otra forma de no decir nada: el que ve el techo sin
   saber de qué depende se va igual que con «cotizado». */
.precio-nota{margin:1.6rem 0 0;max-width:56ch;font:400 .8125rem/1.6 var(--dato);
  color:var(--gris)}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINAS DE DOCUMENTO — aviso de privacidad, términos y el registro SMS
   ---------------------------------------------------------------------------
   Escrito el 2026-08-11, al sacar de Sitejet las tres páginas que se quedan.
   Las otras tres se retiraron: la de la auditoría porque la portada ya es esa
   página y mejor, la de «never miss a call» porque tenía 42 palabras y ninguna
   era contenido, y la de cafeterías por decisión de Jorge.

   Son páginas para LEER, no para recorrer: una sola columna estrecha, sin
   secciones alternas, sin nada que compita con el texto. La medida sale de la
   regla de siempre —unos 65 caracteres por línea— y no del ancho del contenedor
   del resto del sitio, que está pensado para rejillas de tres.
   ═══════════════════════════════════════════════════════════════════════════ */
.legal-doc{padding:3.5rem 0 5rem}
.legal-doc .env{max-width:44rem}
.legal-doc h1{font-size:clamp(2rem,4.5vw,2.9rem);letter-spacing:-.03em;margin:.2rem 0 1.1rem}
.legal-doc .entrada{margin-bottom:2.2rem}
.legal-doc h2{font-size:1.0625rem;letter-spacing:-.01em;margin:2.4rem 0 .7rem;
  padding-top:1.4rem;border-top:1px solid var(--linea)}
.legal-doc p{margin:0 0 1rem;line-height:1.7}
.legal-doc ul{margin:0 0 1.2rem;padding-left:1.1rem}
.legal-doc li{margin-bottom:.4rem;line-height:1.65}
.legal-doc a{color:var(--rojo)}
/* El «volver» de arriba va dentro del rótulo, así que hereda su tipografía; el
   de abajo cierra el documento y necesita separarse de la última cláusula. */
.legal-doc .eyebrow a{color:inherit;text-decoration:none}
.legal-doc .eyebrow a:hover{text-decoration:underline}
.legal-doc .volver{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--linea)}

/* ---- el formulario de consentimiento SMS ---------------------------------
   ⚠️ LAS CASILLAS NO SE PREMARCAN NUNCA, y no es una preferencia de diseño:
   un opt-in premarcado no es consentimiento para ninguna operadora, y es lo que
   se revisa cuando se aprueba una campaña A2P. Tampoco se juntan en una sola —
   son dos afirmaciones distintas y el registro guarda cuál se aceptó. */
.legal-doc .ficha{margin-top:2rem;gap:1.1rem}
.consiente{display:flex;flex-direction:column;gap:.9rem;margin:.4rem 0}
.consiente p{display:flex;gap:.7rem;align-items:flex-start;margin:0}
.consiente input[type=checkbox]{flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.15rem;
  accent-color:var(--rojo)}
/* Sin mayúsculas ni interletrado aquí: `.ficha label` los pone para etiquetas de
   una palabra, y un párrafo legal de tres líneas en versalitas no se lee. */
.consiente label{font:400 .8125rem/1.6 var(--voz);letter-spacing:0;text-transform:none;
  color:var(--gris);cursor:pointer}
.nota-form{font-size:.75rem;line-height:1.6;color:var(--gris-suave);margin:.2rem 0 0}
.aviso-form{margin:1rem 0 0;font-size:.875rem;min-height:1.2em}