/* =========================================================
   TwinPro Agencia IA · hoja de estilo
   Tokens tomados de TWINPRO_MANUAL_DE_MARCA.md v1.1
   Estructura inspirada en el patrón de landing de agencia;
   sistema visual 100 % TwinPro (§4 paleta, §5 tipografía, §6 gráfico)
   ========================================================= */

:root{
  /* Primarios de marca (§4.1) */
  --amarillo:      #f9f506;
  --negro:         #000000;
  --blanco:        #ffffff;
  /* Secundarios (§4.2) */
  --pizarra-900:   #0f172a;
  --pizarra-800:   #1e293b;
  --hueso:         #f8f8f5;
  /* Neutros (§4.3) */
  --pizarra-700:   #334155;
  --pizarra-600:   #475569;
  --pizarra-500:   #64748b;
  --pizarra-400:   #94a3b8;
  --pizarra-200:   #e2e8f0;
  --pizarra-100:   #f1f5f9;
  /* Amarillo UI derivado (§4.4) */
  --amarillo-ui:   #facc15;
  --amarillo-hover:#fde047;
  --amarillo-press:#eab308;
  /* Radios (§6.3) */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-dosel: 44px;
  --r-full: 9999px;

  --wrap: 1140px;
  --sombra: 0 2px 12px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.05);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Secciones ocultas con el atributo `hidden` (ver la demo del gemelo). */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--hueso);
  color:var(--pizarra-900);
  font-family:'Inter', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }

.wrap{ width:min(var(--wrap), 100% - 48px); margin-inline:auto; }
.wrap--narrow{ width:min(820px, 100% - 48px); }

/* ---------- Tipografía (§5.3) ---------- */
.display{
  font-size:clamp(2.6rem, 6.4vw, 5rem);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-.02em;
  margin:.15em 0 .45em;
}
.h2{
  font-size:clamp(1.9rem, 3.6vw, 3rem);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.015em;
  margin:.1em 0 .5em;
}
.h2--light{ color:var(--blanco); }

.eyebrow{                       /* etiqueta en mayúsculas con tracking (§5.3) */
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--amarillo);
  margin:0;
}
.eyebrow--dark{ color:var(--pizarra-600); }   /* 7,1:1 sobre hueso; el 500 se quedaba en 4,5:1 */

.lead{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  color:var(--pizarra-400);
  max-width:60ch;
  margin:0 auto 2.4rem;
}
/* Línea de apoyo del hero: a quién va dirigido.
   Va dentro del propio .lead para no romper la animación de entrada. */
.lead__note{
  display:block;
  margin-top:.9rem;
  font-size:.9em;
}
.section-lead{
  color:var(--pizarra-600);
  max-width:62ch;
  margin:0 0 3rem;
}

/* El subrayado amarillo (§6.4): destaca sin usar amarillo como texto.

   Antes se dibujaba con un pseudo-elemento en z-index:-1, detrás del texto.
   Cuando el bloque contenedor acababa su aparición y su opacidad volvía a 1,
   ese contexto de apilamiento desaparecía y el trazo se iba detrás del fondo
   de la sección: de ahí el parpadeo. Y la animación arrancaba a los 0,35 s de
   cargar la página, no al entrar la palabra en pantalla, así que en casi toda
   la web el trazo ya estaba hecho antes de verse.

   Ahora el trazo es un degradado sobre el propio texto: no depende de z-index
   ni de contextos de apilamiento, así que no puede esfumarse. Sin JavaScript
   queda dibujado desde el principio; con JavaScript se traza cuando la palabra
   entra en pantalla y se queda. */
.mark{
  position:relative;
  display:inline;
  white-space:nowrap;
  background-image:linear-gradient(var(--amarillo), var(--amarillo));
  background-repeat:no-repeat;
  background-position:0 calc(100% - .06em);
  background-size:100% .16em;
}

/* Con JavaScript disponible: parte de cero y se traza de izquierda a derecha */
.js-mark .mark{
  background-size:0 .16em;
  transition:background-size .9s cubic-bezier(.22,1,.36,1) .12s;
}
.js-mark .mark.is-on{ background-size:100% .16em; }

/* ---------- Botones: píldora amarilla, texto negro, flecha (§ADN) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  border:0;
  cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.btn--pill{
  background:var(--amarillo);
  color:var(--negro);
  padding:.72em 1.5em;
  border-radius:var(--r-full);
}
.btn--pill:hover{ background:var(--amarillo-hover); transform:translateY(-2px); }
.btn--pill:active{ background:var(--amarillo-press); transform:translateY(0); }
.btn--lg{ font-size:1.06rem; padding:.95em 1.9em; }
.btn--ghost{
  color:var(--blanco);
  border:1.5px solid rgba(255,255,255,.28);
  border-radius:var(--r-full);
  padding:.9em 1.7em;
  background:transparent;
}
.btn--ghost:hover{ border-color:var(--amarillo); color:var(--amarillo); }

:focus-visible{ outline:3px solid var(--amarillo-ui); outline-offset:3px; border-radius:6px; }

/* ---------- Cabecera ---------- */
.nav{
  position:fixed; inset:12px 12px auto;
  z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:.6rem .7rem .6rem 1.1rem;
  width:min(var(--wrap), 100% - 24px);
  margin-inline:auto;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);
  border-radius:var(--r-full);
  transition:background-color .25s ease;
}
.nav__links{ display:flex; gap:1.6rem; margin-left:auto; }
.nav__links a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-size:.95rem;
  font-weight:500;
}
.nav__links a:hover{ color:var(--amarillo); }

.brand{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand__logo{ height:34px; width:auto; flex:none; display:block; }
.brand--footer .brand__logo{ height:40px; }
/* «Agencia IA» como etiqueta en mayúsculas (§5.3), separada del wordmark:
   el manual prohíbe reconstruir o alterar el wordmark oficial. */
.brand__sub{
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blanco);
  padding-left:.7rem;
  border-left:1px solid rgba(255,255,255,.28);
  line-height:1.1;
  max-width:4.6rem;
}

/* ---------- Hero: el dosel (§6.1) ---------- */
.canopy{
  background:var(--negro);
  border-bottom-left-radius:var(--r-dosel);
  border-bottom-right-radius:var(--r-dosel);
  padding:11rem 0 5.5rem;
  text-align:center;
  color:var(--blanco);
  position:relative;
  overflow:hidden;
}
.canopy::before{                  /* halo tenue, recurso de fondo permitido (§6.6) */
  content:"";
  position:absolute; top:-30%; left:50%;
  width:900px; height:900px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(249,245,6,.10) 0%, transparent 62%);
  pointer-events:none;
}
.canopy__inner{ position:relative; width:min(900px, 100% - 48px); margin-inline:auto; }

.cta-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.proof{
  list-style:none;
  margin:4rem auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(255,255,255,.12);
  border-radius:var(--r-md);
  overflow:hidden;
  max-width:760px;
}
.proof li{
  background:var(--negro);
  padding:1.4rem 1rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.proof strong{ font-size:1.45rem; color:var(--amarillo); letter-spacing:-.02em; }
.proof span{ font-size:.87rem; color:var(--pizarra-400); }

/* ---------- Gemelo digital: la demo ---------- */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Va fuera del dosel, sobre fondo claro: el negro queda solo en la ficha. */
.twin{
  background:var(--hueso);
  color:var(--pizarra-900);
  padding:6rem 0;
}
.twin__grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:2.5rem;
  align-items:start;
}
.twin__lead{ color:var(--pizarra-600); margin:0 0 1.8rem; max-width:58ch; }

/* Ficha: retrato en círculo con anillo amarillo (§ADN de marca) */
.twin__card{
  background:var(--pizarra-900);
  border-radius:var(--r-lg);
  padding:2rem 1.6rem;
  text-align:center;
  position:sticky;
  top:96px;
}
.twin__avatar{
  width:112px; height:112px;
  margin:0 auto 1rem;
  border-radius:var(--r-full);
  background:var(--pizarra-800);
  border:3px solid var(--amarillo);
  display:grid; place-items:center;
  font-size:2.1rem; font-weight:700;
  color:var(--amarillo);
  letter-spacing:.02em;
}
.twin__live{
  display:inline-flex; align-items:center; gap:.45rem;
  margin:0 0 .8rem;
  padding:.3rem .8rem;
  background:rgba(22,163,74,.14);
  border-radius:var(--r-full);
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  color:#4ade80;
}
.twin__live .dot{
  width:7px; height:7px; border-radius:var(--r-full);
  background:#16a34a;
  animation:latido 2s ease-in-out infinite;
}
@keyframes latido{ 50%{ opacity:.35; } }
.twin__card h3{ margin:0 0 .3rem; font-size:1.2rem; letter-spacing:-.01em; }
.twin__role{ margin:0 0 1.2rem; font-size:.9rem; color:var(--pizarra-400); }
.twin__disclaimer{
  margin:0;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem;
  color:var(--pizarra-400);
  text-align:left;
}
.twin__disclaimer strong{ color:var(--blanco); }

/* Hilo de conversación */
.chat{
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-lg);
  padding:1.4rem;
  box-shadow:0 18px 44px rgba(15,23,42,.10);
}
.chat__thread{
  display:flex; flex-direction:column; gap:.9rem;
  min-height:290px;
  max-height:420px;
  overflow-y:auto;
  padding:.3rem .4rem 1rem;
  scroll-behavior:smooth;
}
.msg{ max-width:82%; display:flex; flex-direction:column; gap:.3rem; }
.msg p{
  margin:0;
  padding:.8rem 1.1rem;
  border-radius:var(--r-md);
  font-size:.97rem;
  line-height:1.5;
}
.msg--twin{ align-self:flex-start; }
.msg--twin p{
  background:var(--pizarra-100);
  color:var(--pizarra-900);
  border-bottom-left-radius:6px;   /* cola de burbuja, como el isotipo */
}
.msg--user{ align-self:flex-end; align-items:flex-end; }
.msg--user p{
  background:var(--negro);
  color:var(--blanco);
  border-bottom-right-radius:6px;
}
.msg__meta{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--pizarra-500);
  padding:0 .4rem;
}
.msg__meta b{ color:var(--pizarra-700); }

/* «escribiendo…» */
.typing{ display:flex; gap:.3rem; padding:.95rem 1.1rem; background:var(--pizarra-100); border-radius:var(--r-md); border-bottom-left-radius:6px; }
.typing span{ width:7px; height:7px; border-radius:var(--r-full); background:var(--pizarra-400); animation:puntos 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.18s; }
.typing span:nth-child(3){ animation-delay:.36s; }
@keyframes puntos{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } }

.chat__composer{
  display:flex; gap:.6rem; align-items:center;
  border-top:1px solid var(--pizarra-200);
  padding-top:1rem;
}
.chat__composer input{
  flex:1;
  font:inherit; font-size:.97rem;
  padding:.85rem 1.1rem;
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-full);
  background:var(--hueso);
  color:var(--pizarra-900);
}
.chat__composer input:focus{ outline:none; border-color:var(--pizarra-500); box-shadow:0 0 0 3px rgba(250,204,21,.35); }
.chat__send{
  flex:none;
  width:46px; height:46px;
  border:0; border-radius:var(--r-full);
  background:var(--amarillo);
  color:var(--negro);
  font-size:1.2rem; font-weight:700;
  cursor:pointer;
  transition:background-color .18s ease, transform .18s ease;
}
.chat__send:hover{ background:var(--amarillo-hover); transform:translateY(-1px); }

.chat__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  margin-top:.9rem;
}
.chat__voice{
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent;
  border:1.5px solid var(--pizarra-200);
  border-radius:var(--r-full);
  padding:.5rem 1.1rem;
  font:inherit; font-size:.88rem; font-weight:600;
  color:var(--pizarra-700);
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.chat__voice:hover{ border-color:var(--pizarra-500); color:var(--pizarra-900); }
.chat__voice-ico{ color:#dc2626; font-size:.7rem; }
.chat__legal{ margin:0; font-size:.78rem; color:var(--pizarra-500); }

/* ---------- Secciones ---------- */
.section{ padding:6.5rem 0; }
.section--bone{ background:var(--blanco); }

.grid{ display:grid; gap:1.5rem; }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-md);
  padding:1.8rem 1.6rem;
  box-shadow:var(--sombra);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(15,23,42,.10); }
/* Cabecera de tarjeta: icono de marca + número de orden.
   Iconos de trazo, geometría simple (§ADN: se adopta el estilo, no la librería). */
.card__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem;
  margin-bottom:1.1rem;
}
.card__ico{
  width:46px; height:46px;
  flex:none;
  display:grid; place-items:center;
  background:var(--negro);
  color:var(--amarillo);
  border-radius:var(--r-full);
  transition:transform .25s ease;
}
.card__ico svg{ width:23px; height:23px; display:block; }
.card:hover .card__ico{ transform:scale(1.06) rotate(-4deg); }

.card__num{
  display:inline-block;
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  color:var(--pizarra-600);
}
.card h3{ font-size:1.1rem; margin:0 0 .5rem; letter-spacing:-.01em; }
.card p{ margin:0; color:var(--pizarra-600); font-size:.97rem; }

/* ---------- Calculadora de lo que se pierde ----------
   Sin cajas ni paneles: los números van sobre el fondo de la sección,
   como una fórmula escrita. Los campos son inputs disfrazados de cifra
   grande; los signos × y = hacen de pegamento visual. */
.calc{
  margin-top:4.5rem;
  text-align:center;
}
.calc__title{
  margin:0 0 2.8rem;
  font-size:clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--pizarra-900);
}

/* Toda la fórmula en una sola línea: sin salto y con tamaños que se
   encogen con la pantalla en vez de partir la fila. */
.calc__row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(.5rem, 2vw, 1.8rem);
  flex-wrap:nowrap;
}
.calc__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
  min-width:0;
  flex:0 1 auto;
}

/* Flechas de subir y bajar, discretas hasta que se pasa por encima */
.calc__step{
  border:0;
  background:none;
  cursor:pointer;
  font:inherit;
  font-size:1.1rem;
  font-weight:600;
  line-height:1;
  padding:.25rem .6rem;
  color:var(--pizarra-400);
  border-radius:var(--r-full);
  transition:color .18s ease, background-color .18s ease;
}
.calc__step:hover{ color:var(--pizarra-900); background:var(--pizarra-100); }

.calc__num-wrap{ display:inline-flex; align-items:baseline; }
.calc__num{
  font:inherit;
  font-size:clamp(1.7rem, 4vw, 2.9rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.05;
  text-align:center;
  width:2.3em;
  padding:0;
  border:0;
  background:none;
  color:var(--pizarra-900);
  -moz-appearance:textfield;
}
.calc__num::-webkit-outer-spin-button,
.calc__num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.calc__num:focus{
  outline:none;
  box-shadow:0 4px 0 var(--amarillo);   /* subrayado de marca al editar */
}
.calc__eur{
  font-size:clamp(1.4rem, 3vw, 2.1rem);
  font-weight:700;
  color:var(--pizarra-500);
  margin-left:-.5em;
}

.calc__cap{
  font-size:clamp(.62rem, 1.1vw, .72rem);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--pizarra-600);
}

.calc__op{
  font-size:clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight:400;
  color:var(--pizarra-400);
  align-self:center;
  margin-top:1.6rem;
}

/* Resultado: va en la misma línea, detrás del signo igual, y es la cifra
   más grande de la fórmula. El relleno superior lo alinea con los números
   de la izquierda, que llevan encima el botón de subir. */
.calc__item--res{ padding-top:1.85rem; }
.calc__item--res .calc__cap{ white-space:normal; }
.calc__big{
  position:relative;
  display:inline-block;
  margin:0 0 .1rem;
  font-size:clamp(2rem, 5vw, 3.6rem);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.05;
  color:var(--pizarra-900);
}
.calc__big::after{
  content:"";
  position:absolute;
  left:-.04em; right:-.04em; bottom:.08em;
  height:.14em;
  background:var(--amarillo);
  border-radius:var(--r-full);
  z-index:-1;
}
.calc__foot{ margin-top:2.4rem; }
/* La cifra anual va pegada al resultado, no suelta al final. */
.calc__year{
  margin:.5rem 0 0;
  font-size:.92rem;
  white-space:nowrap;
  color:var(--pizarra-600);
}
.calc__year strong{ color:var(--pizarra-900); }

/* En móvil sí se apila: en 360 px no hay forma de mantener la línea. */
@media (max-width: 620px){
  .calc__row{ flex-wrap:wrap; gap:1.6rem; }
  .calc__op{ display:none; }
  .calc__item{ width:100%; }
  .calc__item--res{ padding-top:.8rem; }
  .calc__cap{ white-space:normal; }
}

/* Con cinco servicios, el último ocupa el ancho completo
   en lugar de quedarse huérfano en media columna. */
.grid--2 > .service:last-child:nth-child(odd){ grid-column:1 / -1; }

.service{
  background:var(--hueso);
  border-radius:var(--r-lg);
  padding:2.2rem 2rem;
  border:1px solid var(--pizarra-200);
}
.service h3{
  font-size:1.4rem; margin:0 0 .7rem; letter-spacing:-.015em;
  padding-bottom:.7rem;
  border-bottom:3px solid var(--amarillo);
  display:inline-block;
}
.service p{ color:var(--pizarra-600); margin:0 0 1.2rem; }

/* ---------- Tarjetas que giran ----------
   La cara visible cuenta el servicio; la trasera lo enseña.
   Ambas caras comparten la misma celda de rejilla, así que la
   tarjeta mide siempre lo que la más alta y nada «salta». */
.service.flip{
  background:transparent;
  border:0;
  padding:0;
  perspective:1500px;
}
.service.flip:focus{ outline:none; }

.flip__inner{
  display:grid;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.22,1,.36,1);
}
.service.flip:hover .flip__inner,
.service.flip:focus-within .flip__inner{ transform:rotateY(180deg); }

.flip__face{
  grid-area:1 / 1;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--pizarra-200);
  padding:2.2rem 2rem;
  display:flex;
  flex-direction:column;
}
.flip__front{ background:var(--hueso); }
.flip__back{
  background:var(--negro);
  border-color:var(--negro);
  color:var(--blanco);
  transform:rotateY(180deg);
  align-items:center;
  justify-content:center;
  gap:.9rem;
  text-align:center;
  padding:1.4rem 1.3rem;   /* menos marco = más imagen, sin tocar la tarjeta */
  overflow:hidden;         /* red de seguridad: nada sale de la tarjeta */
}

/* Contraste: pizarra-500 sobre hueso solo llega a 4,5:1, insuficiente
   para texto pequeño (§4.7 del manual). Se sube a 600. */


/* Marco común para la pieza visual: misma altura en las cuatro tarjetas,
   de modo que los pies de foto queden alineados entre sí. La imagen se
   ajusta dentro sin recortarse, sea cuadrada o vertical. */
/* Altura fija en la imagen. Nada de alturas automáticas: con `flex` o
   `auto`, la imagen reclama sus 820 px originales y estira la tarjeta. */
.flip__media{
  width:100%;
  display:grid;
  place-items:center;
}
.flip__shot{
  height:210px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  border-radius:14px;
}
/* La captura del gemelo es la más estrecha y necesita algo más de alto
   para que se distinga la conversación. */
.flip__shot--gemelo{ height:255px; }
/* Las verticales son capturas reales: se despegan del fondo con sombra. */
.flip__shot--tall{ box-shadow:0 18px 40px rgba(0,0,0,.5); }
/* El TwinP ya viene recortado sobre transparencia: ni sombra ni esquinas.
   Va algo más bajo que las demás para dejar sitio al pie, que aquí explica
   qué es el producto y necesita una línea más. */
.flip__shot--twinp{ box-shadow:none; border-radius:0; height:180px; }
.flip__cap{
  margin:0;
  flex:none;
  max-width:39ch;
  font-size:.95rem;
  line-height:1.45;
  color:#ffffff;   /* 21:1 sobre negro: el gris anterior se leía mal */
}
.flip__cap strong{ color:var(--amarillo); }

/* Sin ratón (móvil y tableta) no hay hover: nada de giros ocultos.
   Las dos caras se muestran apiladas, una debajo de otra. */
@media (hover: none){
  .flip__inner{ display:block; transform:none !important; }
  .flip__face{ backface-visibility:visible; -webkit-backface-visibility:visible; }
  .flip__back{ transform:none; margin-top:1rem; }

}

@media (prefers-reduced-motion: reduce){
  .flip__inner{ transition:none; }
}

.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.ticks li{ position:relative; padding-left:1.7rem; font-size:.95rem; color:var(--pizarra-700); }
.ticks li::before{
  content:"";
  position:absolute; left:0; top:.42em;
  width:10px; height:10px;
  background:var(--amarillo);
  border-radius:var(--r-full);
}

/* ---------- Caso real ---------- */
/* Cartel de borrador: debe cantar. Se borra junto con los datos de ejemplo. */
.draft-flag{
  display:inline-block;
  margin:0 0 1.5rem;
  padding:.55rem 1.1rem;
  background:var(--amarillo);
  color:var(--negro);
  border-radius:var(--r-full);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Cabecera del caso: el logo del cliente manda, a la izquierda del título.
   Se muestra con sus colores propios, que es como debe usarse una marca
   ajena, y se le da aire suficiente para que no compita con la nuestra. */
.case__head{
  display:flex;
  align-items:center;
  gap:clamp(1.2rem, 3vw, 2.4rem);
  margin-bottom:2.2rem;
}
.case__logo{
  width:clamp(96px, 11vw, 132px);
  height:auto;
  flex:none;
}
.case__head h2{ margin-bottom:0; }

@media (max-width: 700px){
  .case__head{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
}

.case{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:1.5rem; }
.case__block{
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-md);
  padding:1.8rem 1.6rem;
  box-shadow:var(--sombra);
}
.case__block h3{
  margin:0 0 .6rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pizarra-600);
}
.case__block p{ margin:0; color:var(--pizarra-700); font-size:.97rem; }

.case__metrics{
  list-style:none;
  margin:0 0 1.5rem;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(255,255,255,.12);
  border-radius:var(--r-md);
  overflow:hidden;
}
.case__metrics li{
  background:var(--negro);
  padding:1.6rem 1.2rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.case__metrics strong{ font-size:1.7rem; color:var(--amarillo); letter-spacing:-.02em; }
.case__metrics span{ font-size:.88rem; color:var(--pizarra-400); }

.quote{
  margin:0;
  padding:1.8rem 2rem;
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-left:6px solid var(--amarillo);
  border-radius:var(--r-md);
}
.quote p{ margin:0 0 .8rem; font-size:1.15rem; font-weight:600; letter-spacing:-.01em; }
.quote cite{ font-style:normal; font-size:.9rem; color:var(--pizarra-600); }

/* ---------- Método ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:1.2rem; counter-reset:paso; }
.step{
  display:flex; gap:1.6rem; align-items:flex-start;
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-lg);
  padding:1.9rem 2rem;
  box-shadow:var(--sombra);
}
.step__n{
  flex:none;
  width:52px; height:52px;
  display:grid; place-items:center;
  background:var(--negro);
  color:var(--amarillo);
  border-radius:var(--r-full);
  font-weight:700; font-size:1.2rem;
}
.step h3{ margin:.35rem 0 .4rem; font-size:1.2rem; letter-spacing:-.01em; }
.step p{ margin:0; color:var(--pizarra-600); }

/* ---------- Paso 0: el plan secreto ----------
   Plegado hasta que el ratón entra en la lista de pasos. La altura se anima
   con grid-template-rows (0fr → 1fr), que es la única forma limpia de animar
   «hasta lo que ocupe el contenido» sin fijar píxeles ni usar JavaScript.
   El margen negativo se come el hueco del gap mientras está plegado. */
.step-secret{
  display:grid;
  grid-template-rows:0fr;
  margin-bottom:-1.2rem;
  opacity:0;
  transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1),
             margin-bottom .55s cubic-bezier(.22,1,.36,1),
             opacity .35s ease;
}
.steps:hover .step-secret,
.steps:focus-within .step-secret,
.step-secret.is-open{          /* lo activa app.js al entrar en pantalla */
  grid-template-rows:1fr;
  margin-bottom:0;
  opacity:1;
}
.step-secret > .step{ overflow:hidden; min-height:0; }

/* Negativo del resto: fondo negro y número amarillo invertido. */
.step--secret{
  background:var(--negro);
  border-color:var(--negro);
  box-shadow:0 20px 45px rgba(15,23,42,.28);
}
.step--secret .step__n{ background:var(--amarillo); color:var(--negro); }
.step--secret h3{ color:#ffffff; }
.step--secret p{ color:#e2e8f0; }
.step--secret strong{ color:var(--amarillo); }
/* Formulario corto dentro del paso 0: dos campos y botón, nada más.
   Cuanto menos haya que rellenar, más gemelos provisionales se piden. */
.secret-form{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:.6rem;
  align-items:center;
  margin-top:1.3rem;
}
.secret-form button{ white-space:nowrap; }
.secret-form input{
  font:inherit;
  font-size:.95rem;
  padding:.8rem 1.15rem;
  border-radius:var(--r-full);
  border:1.5px solid rgba(255,255,255,.22);
  background:var(--pizarra-900);
  color:#ffffff;
  min-width:0;
}
.secret-form input::placeholder{ color:var(--pizarra-400); }
.secret-form input:focus{
  outline:none;
  border-color:var(--amarillo);
  box-shadow:0 0 0 3px rgba(249,245,6,.25);
}
.secret-form__legal,
.secret-form__free,
.secret-form__note{
  margin:.35rem 0 0;
  font-size:.8rem;
  color:var(--pizarra-400);
}
/* El aviso legal, bajo los campos; el reclamo, centrado bajo el botón */
.secret-form__legal{ grid-column:1 / 3; }
.secret-form__free{ grid-column:3; text-align:center; }
.secret-form__note{ grid-column:1 / -1; }
.secret-form__legal a{
  color:#ffffff;
  text-decoration:none;
  border-bottom:2px solid var(--amarillo);
  padding-bottom:1px;
}
.secret-form__note{ min-height:1.1em; }
.secret-form__note[data-state="ok"]{ color:var(--amarillo); font-weight:600; }
.secret-form__note[data-state="error"]{ color:#fca5a5; font-weight:600; }

@media (max-width: 860px){
  .secret-form{ grid-template-columns:1fr; }
  /* Apilado: el reclamo sigue justo debajo del botón, antes del aviso legal */
  .secret-form__legal,
  .secret-form__free,
  .secret-form__note{ grid-column:1; text-align:center; }
  .secret-form__free{ order:1; }
  .secret-form__legal{ order:2; }
  .secret-form__note{ order:3; }
}

/* Sin ratón o con animaciones reducidas, el paso 0 se muestra siempre:
   nunca debe quedar contenido inalcanzable. */
@media (hover: none){
  .step-secret{ grid-template-rows:1fr; margin-bottom:0; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .step-secret{ grid-template-rows:1fr; margin-bottom:0; opacity:1; transition:none; }
}

/* ---------- Bloque oscuro ---------- */
.dark{
  background:var(--negro);
  color:var(--blanco);
  border-radius:var(--r-dosel);
  margin:0 12px;
  padding:6rem 0;
}
.dark__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:4rem;
  align-items:center;
}
.dark__lead{ color:var(--pizarra-400); margin:0 0 2rem; max-width:52ch; }
.dark__lead strong{ color:var(--blanco); }
.dark__lead a strong{ color:var(--blanco); }

/* Firma personal: retrato en círculo con anillo amarillo, que es el gesto
   de marca que une identidad y TwinPro (§2 del manual). Pone cara a quien
   promete, que es de lo que va esta sección. */
.firma{
  display:flex;
  align-items:center;
  gap:1.1rem;
  margin:0 0 2rem;
}
.firma__foto{
  width:76px;
  height:76px;
  flex:none;
  border-radius:var(--r-full);
  border:3px solid var(--amarillo);
  object-fit:cover;
  background:var(--blanco);
}
.firma__nombre{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--blanco);
}
.firma__cargo{
  margin:.15rem 0 0;
  font-size:.88rem;
  line-height:1.4;
  color:var(--pizarra-400);
}

/* Redes junto al nombre: forman parte de la firma, no compiten con el CTA.
   Discretas en reposo; al pasar, toman el amarillo de marca. En pantallas
   estrechas bajan debajo del cargo para no partir nombre y cargo. */
.firma__texto{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "nombre redes"
    "cargo  cargo";
  align-items:center;
  column-gap:.75rem;
}
.firma__nombre{ grid-area:nombre; }
.firma__cargo{ grid-area:cargo; }
.firma__redes{
  grid-area:redes;
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:.4rem;
}
@media (max-width: 480px){
  .firma__texto{
    grid-template-columns:1fr;
    grid-template-areas:
      "nombre"
      "cargo"
      "redes";
  }
  .firma__redes{ margin-top:.6rem; }
}
.firma__redes a{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:var(--r-full);
  border:1.5px solid var(--pizarra-700);
  color:var(--pizarra-400);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.firma__redes svg{ width:15px; height:15px; }
@media (hover: hover){
  .firma__redes a:hover{
    background:var(--amarillo);
    border-color:var(--amarillo);
    color:var(--negro);
    transform:translateY(-1px);
  }
}
.firma__redes a:focus-visible{ border-radius:var(--r-full); }
@media (prefers-reduced-motion: reduce){
  .firma__redes a{ transition:none; }
  .firma__redes a:hover{ transform:none; }
}

/* CTA de la firma, en dos líneas dentro de la misma píldora: el título manda
   y debajo, un escalón por debajo, la invitación a ver la agenda. El ancho lo
   marca el título, así que el botón mide lo mismo que antes en cualquier
   pantalla. El piloto es un punto verde con aro negro, porque el verde solo
   se pierde sobre el amarillo; app.js lo enciende (.is-libre) únicamente
   cuando la agenda real tiene huecos. */
.cita{
  padding-block:.68em;
  text-align:left;
}
.cita__texto{ display:grid; gap:.12em; }
.cita__titulo{ line-height:1.2; }
.cita__estado{
  display:flex;
  align-items:center;
  font-size:.76em;
  font-weight:600;
  line-height:1.3;
  color:rgba(0,0,0,.7);
}
.cita__punto{
  display:none;
  flex:none;
  width:7px;
  height:7px;
  margin:0 .6em 0 3px;
  border-radius:var(--r-full);
  background:#4ade80;
  box-shadow:0 0 0 2.5px var(--negro);
}
.cita.is-libre .cita__punto{
  display:block;
  animation:cita-pulso 2.2s ease-out infinite;
}
@keyframes cita-pulso{
  0%{ box-shadow:0 0 0 2.5px var(--negro), 0 0 0 2.5px rgba(0,0,0,.45); }
  70%,100%{ box-shadow:0 0 0 2.5px var(--negro), 0 0 0 9px rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .cita.is-libre .cita__punto{ animation:none; }
}

.facts{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.facts li{
  background:var(--pizarra-900);
  border-radius:var(--r-md);
  padding:1.3rem 1.5rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.facts strong{ font-size:1.02rem; }
.facts span{ color:var(--pizarra-400); font-size:.93rem; }

/* ---------- Contacto ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact__alt{ color:var(--pizarra-600); font-size:.95rem; margin-bottom:0; }

/* Vías de contacto directo: WhatsApp primero, que es por donde escribe la gente. */
.ways{ list-style:none; margin:1.1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.way{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.62rem 1.15rem;
  border:1.5px solid var(--pizarra-200);
  border-radius:var(--r-full);
  background:var(--blanco);
  color:var(--pizarra-900);
  font-size:.95rem; font-weight:600;
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.way:hover{ border-color:var(--pizarra-500); transform:translateY(-2px); }
.way svg{ width:18px; height:18px; flex:none; }
.way--wa{ background:var(--negro); color:var(--blanco); border-color:var(--negro); }
.way--wa:hover{ background:var(--pizarra-900); border-color:var(--pizarra-900); }

/* La tarjeta es el contenedor: dentro viven el paso 1 (formulario) y el
   paso 2 (calendario), que se turnan sin que la caja cambie de sitio. */
.tarjeta{
  background:var(--hueso);
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-lg);
  padding:2rem;
}
.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.form label{
  display:flex; flex-direction:column; gap:.45rem;
  font-size:.86rem; font-weight:600; color:var(--pizarra-700);
}
.form__full{ grid-column:1 / -1; }
.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form textarea{
  font:inherit;
  font-size:.97rem;
  font-weight:400;
  padding:.8rem 1rem;
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-sm);
  background:var(--blanco);
  color:var(--pizarra-900);
  resize:vertical;
}
.form input::placeholder, .form textarea::placeholder{ color:var(--pizarra-400); }
.form input:focus, .form textarea:focus{ border-color:var(--pizarra-500); outline:none; box-shadow:0 0 0 3px rgba(250,204,21,.35); }
.form__check{ flex-direction:row; align-items:flex-start; gap:.7rem; font-weight:400; font-size:.87rem; color:var(--pizarra-600); }
.form__check input{ margin-top:.25rem; width:18px; height:18px; accent-color:var(--amarillo-press); }
.form button{ justify-content:center; }
/* Los campos traen un ancho mínimo propio (unos 241 px) que, con los
   rellenos de la tarjeta y del formulario, ensanchaba la columna de
   contacto hasta 355 px: por debajo de 371 px la home se desplazaba de
   lado y hasta 386 px la tarjeta se salía del margen derecho. Así la
   tarjeta y sus campos pueden estrecharse. Desde 387 px no cambia nada,
   ni el formulario funciona distinto. */
@media (max-width: 386px){
  .contact > *,
  .form > *{ min-width:0; }
}
/* Aviso de cupo: informativo y sobrio. La escasez se sostiene sola si es
   cierta; no necesita colores de alarma ni cuentas atrás. */
.form__scarcity{
  display:flex; align-items:flex-start; gap:.7rem;
  margin:0;
  padding:.9rem 1.1rem;
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-left:4px solid var(--amarillo);
  border-radius:var(--r-sm);
  font-size:.86rem;
  line-height:1.5;
  color:var(--pizarra-700);
}
.form__scarcity svg{ width:20px; height:20px; flex:none; margin-top:.12rem; color:var(--amarillo-press); }
.form__scarcity strong{ color:var(--pizarra-900); }

/* Trampa antispam: fuera de pantalla en vez de display:none, porque muchos
   robots ignoran los campos ocultos con display y este debe tentarles.
   aria-hidden y tabindex -1 lo mantienen fuera del teclado y del lector. */
.hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.form__note{ margin:0; font-size:.9rem; color:var(--pizarra-600); min-height:1.2em; }

/* Paso 2: ocupa el lugar del formulario dentro de la misma tarjeta.
   Primero el dato a salvo en el CRM, luego la cita. */
.paso2{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.paso2.is-in{ opacity:1; transform:none; }
.paso2__guia{
  margin:0 0 .5rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pizarra-600);
}
.paso2__guia span{
  background:var(--amarillo);
  color:var(--negro);
  border-radius:var(--r-full);
  padding:.2rem .6rem;
}
.paso2__titulo{
  font-size:clamp(1.35rem, 2.6vw, 1.85rem);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:.35rem 0 .5rem;
}
.paso2__sub{ margin:0 0 1.4rem; color:var(--pizarra-600); font-size:.95rem; }
.paso2__nota{ margin:1.2rem 0 0; font-size:.88rem; color:var(--pizarra-600); }

/* Selector de cita propio: los huecos los pone GoHighLevel, pero la
   presentación es nuestra, en castellano y con el estilo de la web. */
.agenda__aviso{
  margin:0;
  font-size:.92rem;
  color:var(--pizarra-600);
}
.agenda__rotulo{
  margin:0 0 .55rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--pizarra-600);
}
.agenda__zona{
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--pizarra-400);
}

/* Días: tira horizontal, cómoda con el pulgar en el móvil */
.agenda__dias{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding-bottom:.35rem;
  margin-bottom:1.3rem;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.agenda__dia{
  flex:0 0 auto;
  font:inherit;
  font-size:.9rem;
  font-weight:600;
  padding:.6rem 1rem;
  border-radius:var(--r-full);
  border:1.5px solid var(--pizarra-200);
  background:#ffffff;
  color:var(--negro);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.agenda__dia:hover{ border-color:var(--negro); }
.agenda__dia[aria-pressed="true"]{
  background:var(--negro);
  border-color:var(--negro);
  color:#ffffff;
}

/* Horas: rejilla de fichas */
.agenda__horas{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:.5rem;
  margin-bottom:1.3rem;
}
.agenda__hora{
  font:inherit;
  font-size:.95rem;
  font-weight:600;
  padding:.65rem .4rem;
  border-radius:12px;
  border:1.5px solid var(--pizarra-200);
  background:#ffffff;
  color:var(--negro);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.agenda__hora:hover{ border-color:var(--negro); transform:translateY(-1px); }
.agenda__hora[aria-pressed="true"]{
  background:var(--amarillo);
  border-color:var(--negro);
}

.agenda__confirmar{ width:100%; }
.agenda__confirmar[disabled]{ opacity:.6; pointer-events:none; }

.agenda__error{
  margin:.8rem 0 0;
  font-size:.9rem;
  font-weight:600;
  color:#b91c1c;
  min-height:1.1em;
}

/* Confirmación, en la misma tarjeta */
.agenda__hecho{
  border:1.5px solid var(--negro);
  border-radius:16px;
  padding:1.3rem 1.4rem;
  background:#ffffff;
}
.agenda__hecho-titulo{
  margin:0 0 .4rem;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.agenda__hecho-titulo::before{ content:"✓ "; color:var(--negro); }
.agenda__hecho-detalle{ margin:0; font-size:1.02rem; line-height:1.5; }
.agenda__hecho-detalle strong{ font-weight:700; }

@media (max-width: 700px){
  .agenda__horas{ grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); }
}
.form__note[data-state="ok"]{ color:#16a34a; font-weight:600; }
.form__note[data-state="error"]{ color:#dc2626; font-weight:600; }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:.75rem; }
.faq details{
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-md);
  padding:.2rem 1.5rem;
  box-shadow:var(--sombra);
}
.faq summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
  padding:1.1rem 2.5rem 1.1rem 0;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  width:30px; height:30px;
  display:grid; place-items:center;
  background:var(--amarillo);
  color:var(--negro);
  border-radius:var(--r-full);
  font-weight:700; font-size:1.1rem;
  transition:transform .25s ease;
}
.faq details[open] summary::after{ content:"−"; transform:translateY(-50%) rotate(180deg); }
.faq p{ margin:0 0 1.2rem; color:var(--pizarra-600); max-width:70ch; }

/* ---------- Pie ---------- */
.footer{ background:var(--negro); color:var(--pizarra-400); padding:4rem 0 2.5rem; margin-top:0; }
.footer__grid{ display:grid; grid-template-columns:1fr auto; gap:2rem 3rem; align-items:start; }
.footer__claim{ margin:1rem 0 0; font-size:.95rem; max-width:34ch; }
.footer__links{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer__links a{ color:rgba(255,255,255,.75); text-decoration:none; font-size:.93rem; }
.footer__links a:hover{ color:var(--amarillo); }

.footer__legal{ grid-column:1 / -1; margin:2.5rem 0 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); font-size:.8125rem; }

/* ---------- Páginas legales ---------- */
.legal{
  background:var(--hueso);
  padding:9.5rem 0 5rem;
}
.legal__wrap{ width:min(760px, 100% - 48px); margin-inline:auto; }
.legal h1{
  font-size:clamp(2rem, 4vw, 2.9rem);
  line-height:1.1; font-weight:700; letter-spacing:-.02em;
  margin:.2em 0 .4em;
}
.legal__date{
  font-size:.85rem; color:var(--pizarra-600);
  padding-bottom:1.6rem; margin:0 0 2.4rem;
  border-bottom:1px solid var(--pizarra-200);
}
.legal h2{
  font-size:1.25rem; font-weight:700; letter-spacing:-.01em;
  margin:2.6rem 0 .8rem;
  padding-top:.4rem;
}
.legal h3{ font-size:1rem; font-weight:600; margin:1.6rem 0 .5rem; }
.legal p, .legal li{ color:var(--pizarra-700); }
.legal p{ margin:0 0 1rem; }
.legal ul, .legal ol{ margin:0 0 1.2rem; padding-left:1.2rem; }
.legal li{ margin-bottom:.5rem; }
.legal a{ font-weight:600; }
.legal strong{ color:var(--pizarra-900); }

/* Enlaces dentro de texto: nunca el azul del navegador, que no es de marca.
   Se usa el subrayado amarillo (§6.4), que sí lo es, y el color del texto
   que lo rodea. Discreto sobre claro y sobre negro. */
.legal a,
.footer__legal a,
.form__check a,
.contact__alt a,
.dark__lead a{
  color:inherit;
  text-decoration:none;
  border-bottom:2px solid var(--amarillo);
  padding-bottom:1px;
  transition:border-color .2s ease, opacity .2s ease;
}
.legal a:hover,
.footer__legal a:hover,
.form__check a:hover,
.contact__alt a:hover,
.dark__lead a:hover{
  border-bottom-color:var(--amarillo-press);
  opacity:.75;
}

/* Volver a la web desde las páginas legales */
.nav__back{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-left:auto;
  padding:.5rem 1.1rem;
  border:1.5px solid rgba(255,255,255,.28);
  border-radius:var(--r-full);
  color:var(--blanco);
  text-decoration:none;
  font-size:.92rem; font-weight:600;
  transition:border-color .18s ease, color .18s ease;
}
.nav__back:hover{ border-color:var(--amarillo); color:var(--amarillo); }

/* Dato que falta por completar: tiene que cantar hasta que se rellene. */
.todo{
  background:var(--amarillo);
  color:var(--negro);
  font-weight:700;
  padding:.05em .45em;
  border-radius:6px;
  white-space:nowrap;
}
.legal__box{
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-left:6px solid var(--amarillo);
  border-radius:var(--r-md);
  padding:1.4rem 1.6rem;
  margin:0 0 2rem;
}
.legal__box p:last-child{ margin-bottom:0; }
.legal__back{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:3rem;
  padding:.85em 1.7em;
  background:var(--amarillo);
  color:var(--negro);
  border-radius:var(--r-full);
  font-weight:700; text-decoration:none;
  transition:background-color .18s ease, transform .18s ease;
}
.legal__back:hover{ background:var(--amarillo-hover); transform:translateY(-2px); }

/* ---------- Forma de marca en el botón del widget ----------
   El widget dibuja un botón circular y, encima, un anillo que pulsa
   (`::before`, `border-radius:50%`). Aquí se les da a los dos la silueta
   del isotipo TwinPro: tres esquinas muy redondeadas y la inferior
   izquierda recta, que es la cola de la burbuja y nunca se redondea
   (Manual de Marca §3.3). El anillo hereda la forma, así que las ondas
   salen ya con silueta de burbuja.

   Al abrir el chat el botón pasa a ser una «x» de cerrar y deja de
   representar a la marca: ahí vuelve a ser un círculo.

   PENDIENTE: pedir al desarrollador que el widget soporte esta forma de
   serie (por ejemplo `data-shape="bubble"`) y retirar este parche. */
#twinpro-widget-btn{
  border-radius:36% 36% 36% 0 !important;
}
#twinpro-widget-btn::before{
  border-radius:38% 38% 38% 0 !important;
}
#twinpro-widget-btn.twinpro-open,
#twinpro-widget-btn.twinpro-open::before{
  border-radius:50% !important;
}

/* Segunda onda, medio ciclo por detrás, para que se lea como ondas y no
   como un solo latido. Misma silueta. */
#twinpro-widget-btn::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:38% 38% 38% 0;
  border:2px solid var(--amarillo-hover);
  animation:twinproPulseRing 2.5s ease-out 1.25s infinite;
  pointer-events:none;
  opacity:.75;
}
#twinpro-widget-btn.twinpro-open::after{ animation:none; opacity:0; }

@media (prefers-reduced-motion: reduce){
  #twinpro-widget-btn::after{ animation:none; opacity:0; }
}

/* ---------- Cartél «¿Tienes alguna pregunta?» del widget ----------
   El widget lo muestra nada más cargar, antes de que el visitante haya
   leído nada. Aquí se mantiene invisible hasta que el propio sitio decide
   que es buen momento (ver app.js). No se modifica el widget: solo se le
   tapa esta pieza desde fuera, y por eso hace falta !important.

   PENDIENTE: lo correcto es que el widget acepte un retardo propio
   (data-tooltip-delay) y esto deje de ser necesario. */
#twinpro-widget-tooltip{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1) !important;
  transform:translateY(6px) !important;
}
body.tip-visible #twinpro-widget-tooltip{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}

/* ---------- Aviso de mensaje en el gemelo ----------
   Insignia que se cuelga dentro del botón del widget cuando el visitante
   llega a las preguntas frecuentes. El botón es amarillo, así que la
   insignia va en negro: es el único contraste que funciona ahí. */
.twin-badge{
  position:absolute;
  top:-3px;
  right:-3px;
  min-width:23px;
  height:23px;
  padding:0 5px;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  background:var(--negro);
  color:var(--amarillo);
  border:2px solid var(--amarillo);
  border-radius:var(--r-full);
  font-family:'Inter', system-ui, sans-serif;
  font-size:.72rem;
  font-weight:700;
  line-height:1;
  pointer-events:none;

  /* Oculta hasta que toca */
  opacity:0;
  transform:scale(.4);
  transition:opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.twin-badge.is-on{
  opacity:1;
  transform:scale(1);
  animation:aviso-latido 2.4s ease-in-out .45s 3;
}
@keyframes aviso-latido{
  0%, 100%{ transform:scale(1); }
  8%      { transform:scale(1.22); }
  16%     { transform:scale(1); }
  24%     { transform:scale(1.14); }
  32%     { transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .twin-badge{ transition:none; }
  .twin-badge.is-on{ animation:none; }
}

/* ---------- Aparición al hacer scroll ----------
   Solo con JavaScript: la clase .js la pone en <html> un script en línea
   del <head>, antes de que se pinte nada. Sin JavaScript, .reveal se queda
   visible y quieto. */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .js-mark .mark{ transition:none; background-size:100% .16em; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .case{ grid-template-columns:1fr; }
  .case__metrics{ grid-template-columns:repeat(2,1fr); }
  .dark__grid, .contact{ grid-template-columns:1fr; gap:2.5rem; }
  .twin__grid{ grid-template-columns:1fr; gap:1.8rem; }
  .twin__card{ position:static; display:grid; grid-template-columns:auto 1fr; gap:0 1.4rem; text-align:left; align-items:center; }
  .twin__avatar{ margin:0; grid-row:span 2; }
  .twin__disclaimer{ grid-column:1 / -1; margin-top:1.2rem; }
  /* El menú pasa a desplegable: ver «Menú móvil» al final de la hoja. */
}
@media (max-width: 680px){
  body{ font-size:16px; }
  .wrap, .wrap--narrow{ width:calc(100% - 32px); }
  .grid--4, .grid--2{ grid-template-columns:1fr; }
  .case__metrics{ grid-template-columns:repeat(2,1fr); }
  .quote{ padding:1.4rem 1.5rem; }
  .proof{ grid-template-columns:repeat(2,1fr); }
  .brand__logo{ height:28px; }
  .canopy{ padding:8.5rem 0 4rem; }
  .section{ padding:4.5rem 0; }
  .form{ grid-template-columns:1fr; padding:1.5rem; }
  .step{ flex-direction:column; gap:1rem; padding:1.5rem; }
  .twin{ padding:4rem 0; }
  .flip__shot{ height:180px; }
  .flip__shot--gemelo{ height:210px; }
  .flip__shot--twinp{ height:160px; }
  .twin__card{ grid-template-columns:1fr; text-align:center; gap:0; }
  .twin__avatar{ margin:0 auto 1rem; grid-row:auto; }
  .msg{ max-width:92%; }
  .chat{ padding:1rem; }
  .footer__grid{ grid-template-columns:1fr; }
  .mark{ white-space:normal; }

  /* Zonas táctiles de 44 px: enlaces del pie y campos numéricos de las
     calculadoras (también en la home). El subrayado de los enlaces
     legales pasa a text-decoration para que siga pegado al texto. */
  .footer__links{ gap:0 1.2rem; }
  .footer__links a{ display:inline-flex; align-items:center; min-height:44px; }
  .footer__legal a{
    display:inline-block;
    padding:.75rem 0;
    border-bottom:0;
    text-decoration:underline;
    text-decoration-color:var(--amarillo);
    text-decoration-thickness:2px;
    text-underline-offset:3px;
  }
  .footer__legal a:hover{ text-decoration-color:var(--amarillo-press); }
  .calc__num{ min-height:44px; }
}

/* =========================================================
   PÁGINA DE PRECIOS (precios.html)
   Mismo sistema de variables y mismos gestos de marca que el
   resto de la web: fondo negro, subrayado amarillo, píldoras.
   Bloque autocontenido: solo clases nuevas, ninguna existente
   se redefine, salvo el estado activo del menú.
   ========================================================= */

/* Enlace activo del menú: la página en la que ya estás */
.nav__links a.is-active{ color:var(--amarillo); }

/* ---------- Cabecera de página (dosel más bajo que el de la home) ----------
   Compacta a propósito: la primera pantalla tiene que enseñar ya los
   precios. Solo afecta a .canopy--pagina, no al dosel de la home. */
.canopy--pagina{ padding:6rem 0 1.75rem; }
.canopy--pagina .canopy__inner{ width:min(980px, 100% - 48px); }
.display--pagina{ font-size:clamp(2.2rem, 5vw, 3rem); margin:.1em 0 .35em; text-wrap:balance; }
/* La entradilla es una sola frase, la garantía: va algo más grande */
.canopy--pagina .lead{
  margin:0 auto .75rem;
  max-width:980px;
  font-size:1.3125rem;
}
/* La letra pequeña, centrada bajo la entradilla */
.canopy__nota{
  margin:0 auto;
  max-width:46rem;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--pizarra-400);
}

/* ---------- Las tres tarjetas de paquete ---------- */
/* Menos aire sobre las tarjetas que en el resto de secciones: vienen
   justo debajo del dosel y el precio tiene que entrar en la primera pantalla. */
.section--paquetes{ padding-top:2.75rem; }
.planes{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
  align-items:stretch;
}
.plan{
  display:flex;
  flex-direction:column;
  position:relative;
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-lg);
  padding:2rem 1.8rem;
  box-shadow:var(--sombra);
}
.plan__nombre{
  font-size:1.3125rem;
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 .5rem;
}
/* Qué atiende cada paquete, de un vistazo: un icono por capacidad con su
   nombre debajo, y cada paquete suma uno al anterior (mensajes; mensajes
   y llamadas; mensajes, llamadas y seguimiento). Mismos dibujos y mismos
   círculos negros con trazo amarillo que las tarjetas de la home. */
.cubre{
  list-style:none;
  display:flex;
  gap:1.5rem;
  margin:.35rem 0 1rem;
  padding:0;
}
.cubre__item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  font-size:.75rem;
  font-weight:600;
  line-height:1.2;
  color:var(--pizarra-700);
}
.cubre__ico{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:var(--r-full);
  background:var(--negro);
  color:var(--amarillo);
}
.cubre__ico svg{
  width:20px;
  height:20px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* Un «+» entre capacidades: cada paquete suma al anterior. El texto
   alternativo vacío evita que el lector de pantalla lo lea. */
.cubre__item + .cubre__item::before{
  content:"+";
  content:"+" / "";
  position:absolute;
  left:-1.05rem;
  top:10px;
  font-size:.9375rem;
  font-weight:700;
  line-height:18px;
  color:var(--pizarra-400);
}
.plan__frase{
  margin:0 0 1rem;
  font-size:1.0625rem;
  font-weight:600;
  color:var(--pizarra-700);
}
/* En tres columnas, la frase reserva dos líneas para que las tres
   cuotas queden a la misma altura. Es el respaldo para los navegadores
   sin subrejilla; con ella, lo resuelve la regla de abajo. */
@media (min-width: 1041px){
  .plan__frase{ min-height:3.1em; }
}
/* Con las tarjetas en fila, cada una es una subrejilla de .planes y las
   tres comparten filas: nombre, iconos, frase, cuota, implantación,
   plazo, «Para quién», «Incluye», lista y botón. Cada fila mide lo que
   la más alta de las tres, así que precios, separadores y «Para quién»
   quedan a la misma altura aunque un texto ocupe una línea más en una
   tarjeta (la frase de Esencial, entre 1041 y 1200 px; el plazo de 360).
   Son 10 filas porque cada tarjeta tiene 10 elementos (la etiqueta
   «Recomendado» va posicionada y no cuenta): si se añade uno, hay que
   subir el número. */
@supports (grid-template-rows: subgrid){
  @media (min-width: 1041px){
    .planes{ grid-template-rows:repeat(10, auto); row-gap:0; }
    .plan{ display:grid; grid-row:span 10; grid-template-rows:subgrid; }
    /* La lista no se estira con su fila: sus puntos se quedan juntos */
    .plan__incluye{ align-self:start; }
  }
}
/* «Para quién» va ahora debajo del precio, tras un separador fino */
.plan__quien{
  margin:0 0 1.4rem;
  font-size:.9375rem;
  color:var(--pizarra-600);
}
.plan__etiqueta{
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pizarra-600);
  margin:0 0 .25rem;
}
.plan__cuota{
  margin:0 0 .4rem;
  display:flex;
  align-items:baseline;
  gap:.25rem;
  flex-wrap:wrap;
}
.plan__cuota strong{
  font-size:1.9rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
}
.plan__cuota span{ font-size:1rem; color:var(--pizarra-600); }
.plan__implantacion{ margin:0 0 .35rem; font-size:.9375rem; color:var(--pizarra-600); }
.plan__implantacion strong{ color:var(--pizarra-900); }
.plan__plazo{
  margin:0 0 1.25rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--pizarra-200);
  font-size:.9375rem;
  font-weight:600;
  color:var(--pizarra-700);
}
.plan__incluye-titulo{ margin-bottom:.7rem; }
.plan__incluye{ margin:0 0 1.8rem; }
.plan__btn{ margin-top:auto; justify-content:center; text-align:center; }

/* Botón de contorno para las tarjetas no destacadas: el amarillo queda
   solo en la recomendada. Mismo tamaño que la píldora (.btn--lg): el
   borde se descuenta del relleno para que la altura no cambie. */
.btn--contorno{
  background:transparent;
  color:var(--pizarra-900);
  border:1.5px solid var(--pizarra-900);
  border-radius:var(--r-full);
  padding:calc(.95em - 1.5px) calc(1.9em - 1.5px);
  transition:transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn--contorno:hover{
  background:var(--pizarra-900);
  color:var(--blanco);
  transform:translateY(-2px);
}
.btn--contorno:active{ transform:translateY(0); }

/* Paquete recomendado: negro con acento amarillo, el contraste de marca */
.plan--destacado{
  background:var(--negro);
  border:2px solid var(--amarillo);
  color:var(--blanco);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.plan--destacado .plan__frase{ color:var(--amarillo); }
.plan--destacado .plan__quien{ color:var(--pizarra-400); }
.plan--destacado .plan__etiqueta{ color:var(--pizarra-400); }
.plan--destacado .plan__cuota strong{ color:var(--amarillo); }
.plan--destacado .plan__cuota span{ color:var(--pizarra-400); }
.plan--destacado .plan__implantacion{ color:var(--pizarra-400); }
.plan--destacado .plan__implantacion strong{ color:var(--blanco); }
.plan--destacado .plan__plazo{
  color:var(--blanco);
  border-bottom-color:rgba(255,255,255,.18);
}
.plan--destacado .ticks li{ color:var(--pizarra-200); }
/* Sobre negro, el círculo pasa a pizarra para seguir viéndose */
.plan--destacado .cubre__item{ color:var(--pizarra-200); }
.plan--destacado .cubre__ico{ background:var(--pizarra-800); }
.plan__badge{
  position:absolute;
  top:-.95rem; left:50%;
  transform:translateX(-50%);
  margin:0;
  padding:.35em 1.1em;
  background:var(--amarillo);
  color:var(--negro);
  border-radius:var(--r-full);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.planes__nota{
  margin:2.5rem auto 0;
  max-width:78ch;
  font-size:.8125rem;
  text-align:center;
  color:var(--pizarra-600);
}

/* ---------- Garantías, junto a los precios ---------- */
.garantias{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1.5rem;
  margin:1.75rem 0 0;
  padding:1rem 1.75rem;
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-md);
}
.garantias li{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-size:.9375rem;
  font-weight:600;
  line-height:1.45;
  text-wrap:balance;     /* en dos líneas parejas, sin una palabra suelta al final */
}
.garantias li:nth-child(2){ flex:1 1 auto; }
.garantias li + li{
  padding-left:1.5rem;
  border-left:1px solid var(--pizarra-200);
}
.garantias__ico{
  flex:none;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  background:var(--pizarra-900);
  color:var(--amarillo);
  border-radius:var(--r-full);
}
.garantias__ico svg{
  width:12px;
  height:12px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (max-width: 1040px){
  .garantias{
    flex-direction:column;
    align-items:stretch;
    gap:.6rem;
    max-width:36rem;
    margin:1.5rem auto 0;
    padding:.9rem 1.1rem;
  }
  .garantias li{ align-items:flex-start; font-size:.9375rem; }
  .garantias li + li{ padding-left:0; border-left:0; }
}

/* ---------- Agente telefónico: la oferta aparte, plegada ----------
   Franja negra bajo las tarjetas, con etiqueta, pregunta y cuota; al
   abrirla (es un <details>), el detalle y el botón. No puede parecer un
   cuarto paquete ni competir con «Recomendado»: sin borde amarillo, sin
   insignia rellena y con botón de contorno. El amarillo queda en la
   etiqueta, la cuota, el «+» y los puntos de la lista. */
.oferta-tel{
  margin:1.75rem 0 0;
  background:var(--negro);
  color:var(--blanco);
  border-radius:var(--r-md);
  box-shadow:var(--sombra);
}
.oferta-tel__resumen{
  position:relative;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  min-height:44px;
  padding:1rem 4.25rem 1rem 1.5rem;   /* a la derecha, sitio para el «+» */
  border-radius:var(--r-md);
  list-style:none;
  cursor:pointer;
}
.oferta-tel__resumen::-webkit-details-marker{ display:none; }
/* El mismo «+» amarillo de las preguntas */
.oferta-tel__resumen::after{
  content:"+";
  position:absolute; right:1.25rem; top:50%;
  transform:translateY(-50%);
  width:30px; height:30px;
  display:grid; place-items:center;
  background:var(--amarillo);
  color:var(--negro);
  border-radius:var(--r-full);
  font-weight:700; font-size:1.1rem;
  transition:transform .25s ease;
}
.oferta-tel[open] .oferta-tel__resumen::after{ content:"−"; transform:translateY(-50%) rotate(180deg); }
/* Píldora de contorno: mismo tamaño y tracking que .plan__badge, pero hueca.
   Lleva el mismo teléfono que la capacidad «Llamadas» de las tarjetas. */
.oferta-tel__etiqueta{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.35em 1.1em .35em .9em;
  border:1px solid var(--amarillo);
  border-radius:var(--r-full);
  color:var(--amarillo);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.oferta-tel__ico{
  flex:none;
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.oferta-tel__pregunta{ font-size:1.0625rem; font-weight:700; }
.oferta-tel__cuota{ margin-left:auto; font-size:1rem; color:var(--pizarra-400); white-space:nowrap; }
.oferta-tel__cuota strong{ font-size:1.3125rem; font-weight:700; color:var(--amarillo); }

/* El detalle, al abrir: qué hace a la izquierda y cifras con el botón a
   la derecha; en pantallas estrechas, una columna */
.oferta-tel__detalle{
  display:grid;
  gap:1.25rem 2.5rem;
  padding:.5rem 1.5rem 1.5rem;
}
.oferta-tel__entradilla{ margin:0 0 1rem; font-size:1rem; color:var(--pizarra-400); }
.oferta-tel__lista li{ color:var(--pizarra-200); }
.oferta-tel__lista strong{ color:var(--blanco); }
.oferta-tel__dato{ margin:0 0 .35rem; font-size:.9375rem; color:var(--pizarra-400); }
.oferta-tel__dato strong{ color:var(--blanco); }
.oferta-tel__btn{ margin-top:1rem; justify-content:center; }
.oferta-tel__pie{
  margin:0;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.8125rem;
  line-height:1.5;
  color:var(--pizarra-400);
}
@media (min-width: 861px){
  .oferta-tel__detalle{ grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); }
  .oferta-tel__cifras{ padding-left:2.5rem; border-left:1px solid rgba(255,255,255,.14); }
  .oferta-tel__pie{ grid-column:1 / -1; }
}
/* Con las tarjetas apiladas, el mismo ancho que ellas y que .garantias */
@media (max-width: 1040px){
  .oferta-tel{ max-width:36rem; margin:1.5rem auto 0; }
}
@media (max-width: 680px){
  .oferta-tel__resumen{ padding:.9rem 3.75rem .9rem 1.1rem; }
  .oferta-tel__cuota{ margin-left:0; }
  .oferta-tel__detalle{ padding:.25rem 1.1rem 1.25rem; }
  /* A todo el ancho y con menos relleno lateral, para que el texto quepa
     en una línea a 320 px; va centrado, así que en anchos mayores no se nota */
  .oferta-tel__btn{ display:flex; padding-left:.75em; padding-right:.75em; }
}
@media (prefers-reduced-motion: reduce){
  .oferta-tel__resumen::after{ transition:none; }
}

/* ---------- Pestañas de paquete (solo con las tarjetas apiladas) ----------
   app.js monta los botones y marca la tarjeta activa con .is-activa; quién
   se ve y quién no lo decide esta hoja, no el script: por encima de 1040 px
   la barra desaparece y las tres tarjetas vuelven a verse en columnas. */
.planes__tabs{ display:none; }
@media (max-width: 1040px){
  .planes__tabs{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:4px;
    padding:4px;
    background:var(--pizarra-200);
    border-radius:var(--r-md);
  }
  .planes__tab{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-height:56px;
    padding:.5rem .125rem;
    border:0;
    border-radius:16px;
    background:transparent;
    color:var(--pizarra-900);
    font-family:inherit;
    line-height:1.2;
    text-align:center;
    cursor:pointer;
    transition:background-color .18s ease, color .18s ease;
  }
  .planes__tab-nombre{ font-size:.8125rem; font-weight:700; }
  .planes__tab-cuota{ font-size:.75rem; font-weight:600; white-space:nowrap; color:var(--pizarra-600); }
  .planes__tab[aria-selected="true"]{ background:var(--negro); color:var(--blanco); }
  .planes__tab[aria-selected="true"] .planes__tab-cuota{ color:var(--amarillo); }

  .planes.planes--pestanas{ gap:1.5rem; }   /* deja sitio a la etiqueta «Recomendado» */
  .planes--pestanas .plan:not(.is-activa){ display:none; }
  /* La tarjeta que destapa una pestaña no puede quedarse esperando a
     la animación de aparición: se ve al instante. */
  .planes--pestanas .plan.is-activa{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .planes__tab{ transition:none; }
}

/* ---------- Tablas ---------- */
.tabla{
  width:100%;
  border-collapse:separate;   /* `collapse` rompe la columna fija en móvil */
  border-spacing:0;
  font-size:.95rem;
}
.tabla thead th{
  background:var(--negro);
  color:var(--blanco);
  text-align:left;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding:.9rem 1.1rem;
  vertical-align:bottom;
}
.tabla tbody th,
.tabla tbody td{
  padding:.9rem 1.1rem;
  text-align:left;
  vertical-align:top;
  border-top:1px solid var(--pizarra-200);
}
.tabla tbody tr:first-child th,
.tabla tbody tr:first-child td{ border-top:0; }
.tabla tbody th{ font-weight:600; color:var(--pizarra-900); }
.tabla tbody td{ color:var(--pizarra-700); }

/* Comparativa: una sola tabla, sin desplazamiento lateral en ningún ancho */
.tabla--comparativa{
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--sombra);
}
.tabla--comparativa thead th{ vertical-align:middle; }
.tabla--comparativa tbody td{ vertical-align:middle; }
/* Nombre completo en escritorio; en móvil se cambia por el corto, que va
   con aria-hidden porque el largo sigue ahí para el lector de pantalla. */
.tabla__corto{ display:none; }

/* Columna recomendada (Atención Total): el amarillo se reserva para ella */
.tabla--comparativa thead th:nth-child(3){ background:var(--amarillo); color:var(--negro); }
.tabla--comparativa tbody td:nth-child(3){ background:rgba(249,245,6,.18); }

/* Fila «Incluido en los tres» y, debajo, la lista de lo que agrupa */
.tabla__fila-comun th{ font-weight:700; }
.tabla__fila-lista td{
  border-top:0;
  padding-top:0;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--pizarra-600);
}

/* Filas de cifras: implantación y cuota, en negrita */
.tabla__fila-precio td{ font-weight:800; color:var(--pizarra-900); }

/* Sí y no: marca de verificación y raya. El texto para lectores de
   pantalla va dentro (.sr-only); el dibujo solo acompaña. */
.marca{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.5rem;
  height:1.5rem;
  vertical-align:middle;
}
.marca svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.marca--si{ color:var(--pizarra-900); }
.marca--no{ color:var(--pizarra-400); }

/* ---------- Una sola regla de alineación ----------
   Título y entradilla van alineados con su contenido: a la izquierda en
   las secciones de ancho completo y centrados sobre el contenido estrecho
   (calculadora, preguntas y cierre). */
.section__head--centro{ text-align:center; }
.section__head--centro .section-lead{ margin-inline:auto; }

/* ---------- Cómo empezamos ---------- */
.dark--precio{ padding:3.5rem 0; }
.steps--precio{ max-width:66rem; }
.step--precio{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none;
  align-items:center;
}
.step--precio p{ color:var(--pizarra-200); }
.como__cierre{
  margin:2rem 0 0;
  max-width:70ch;
  color:var(--pizarra-400);
  font-size:.9375rem;
}
/* En escritorio, los tres pasos en tres columnas y la frase final debajo */
@media (min-width: 980px){
  .steps--precio{
    grid-template-columns:repeat(3, 1fr);
    max-width:none;
  }
  .step--precio{ align-items:flex-start; padding:1.6rem 1.5rem; }
  .como__cierre{ max-width:none; }
}

/* ---------- Cierre ---------- */
.cierre{ text-align:center; }
.cierre .section-lead{ margin-inline:auto; margin-bottom:2.2rem; }
/* Línea de fundadores bajo el botón: el mismo estilo que .planes__nota */
.cierre__nota{
  margin:1.25rem auto 0;
  max-width:78ch;
  font-size:.8125rem;
  color:var(--pizarra-600);
}

/* ---------- Responsive de la página de precios ---------- */
@media (max-width: 1040px){
  .planes{
    grid-template-columns:1fr;
    max-width:36rem;
    margin-inline:auto;
    gap:2.2rem;
  }
}
@media (max-width: 680px){
  .canopy--pagina{ padding:6.5rem 0 1.75rem; }
  .canopy--pagina .lead{ font-size:1.0625rem; }
  .section--paquetes{ padding:1.75rem 0 3.5rem; }
  .plan{ padding:1.8rem 1.4rem; }
  .plan__plazo{ margin-bottom:1rem; padding-bottom:1rem; }
  .plan__quien{ margin-bottom:1.1rem; }
  .plan__incluye{ margin-bottom:1.4rem; }
  .planes__nota{ margin-top:1.5rem; }
  .step--precio{ flex-direction:row; align-items:flex-start; gap:1.1rem; padding:1.4rem 1.3rem; }

  /* Comparativa: caben los tres paquetes sin deslizar. Las filas de
     marcas pasan a rejilla (concepto + tres columnas de 58 px) y las de
     cifras a bloque con una línea por paquete. Los roles ARIA del HTML
     conservan la semántica de tabla al cambiar el display. */
  .tabla--comparativa,
  .tabla--comparativa thead,
  .tabla--comparativa tbody{ display:block; }
  .tabla--comparativa tr{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 58px 58px 58px;
    align-items:stretch;
  }
  .tabla--comparativa thead th,
  .tabla--comparativa tbody th,
  .tabla--comparativa tbody td{ display:block; }
  .tabla--comparativa thead th{
    display:flex;
    align-items:center;
    padding:.75rem .15rem;
    font-size:.75rem;
    line-height:1.25;
    letter-spacing:.04em;
  }
  .tabla--comparativa thead th:first-child{ padding-left:.9rem; }
  /* Cabeceras cortas: en 58 px no caben mayúsculas con tracking */
  .tabla--comparativa thead th:nth-child(n+2){
    justify-content:center;
    text-align:center;
    text-transform:none;
    letter-spacing:0;
    font-weight:700;
  }
  .tabla__largo{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .tabla__corto{ display:inline; }
  .tabla--comparativa tbody th{ padding:.85rem .5rem .85rem .9rem; font-size:.8125rem; }
  .tabla--comparativa tbody td{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:.85rem .15rem;
  }
  .tabla--comparativa .tabla__fila-lista{ display:block; }
  .tabla--comparativa .tabla__fila-lista td{ display:block; padding:0 .9rem .85rem; text-align:left; }

  .tabla--comparativa .tabla__fila-cifra{ display:block; padding:.85rem .6rem .9rem; border-top:1px solid var(--pizarra-200); }
  .tabla--comparativa .tabla__fila-cifra th,
  .tabla--comparativa .tabla__fila-cifra td{ border-top:0; }
  .tabla--comparativa .tabla__fila-cifra th{
    padding:0 .3rem .4rem;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--pizarra-600);
  }
  .tabla--comparativa .tabla__fila-cifra td{
    justify-content:space-between;
    gap:.75rem;
    padding:.35rem .5rem;
    border-radius:8px;
    font-size:.8125rem;
    text-align:right;
  }
  .tabla--comparativa .tabla__fila-cifra td::before{
    content:attr(data-label);
    flex:none;
    font-weight:400;
    text-align:left;
    color:var(--pizarra-700);
  }
}

/* =========================================================
   MENÚ MÓVIL Y AJUSTES DE CABECERA
   Por debajo de 980 px los enlaces dejan de ocultarse y pasan a
   un desplegable bajo la píldora de la cabecera. En escritorio
   no cambia nada: el botón se oculta y los enlaces siguen en fila.
   ========================================================= */

/* Botón de menú: solo existe en móvil */
.nav__toggle{
  display:none;
  flex:none;
  width:44px;               /* zona táctil mínima recomendada */
  height:44px;
  padding:0;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.28);
  border-radius:var(--r-full);
  color:var(--blanco);
  cursor:pointer;
  place-items:center;
  transition:border-color .18s ease;
}
.nav__toggle:hover{ border-color:var(--amarillo); }

/* Tres barras que se cruzan al abrir */
.nav__toggle-ico{
  position:relative;
  display:block;
  width:18px;
  height:12px;
}
.nav__toggle-ico span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .25s ease, opacity .18s ease, top .25s ease;
}
.nav__toggle-ico span:nth-child(1){ top:0; }
.nav__toggle-ico span:nth-child(2){ top:5px; }
.nav__toggle-ico span:nth-child(3){ top:10px; }
.nav.is-abierto .nav__toggle{ color:var(--amarillo); border-color:var(--amarillo); }
.nav.is-abierto .nav__toggle-ico span:nth-child(1){ top:5px; transform:rotate(45deg); }
.nav.is-abierto .nav__toggle-ico span:nth-child(2){ opacity:0; }
.nav.is-abierto .nav__toggle-ico span:nth-child(3){ top:5px; transform:rotate(-45deg); }

@media (max-width: 980px){
  .nav__toggle{ display:grid; order:3; margin-left:.4rem; }

  /* El botón de auditoría se queda siempre a la vista, antes del menú */
  .nav > .btn--pill{ order:2; margin-left:auto; white-space:nowrap; }

  /* Los enlaces pasan a panel desplegable. Se oculta con visibility,
     no con display:none, para que la transición funcione y para que
     los enlaces no sean enfocables mientras está cerrado. */
  .nav__links{
    position:absolute;
    top:calc(100% + .55rem);
    left:0;
    right:0;
    flex-direction:column;
    gap:.15rem;
    margin:0;
    padding:.5rem;
    /* Opaco a propósito: la píldora de la cabecera sí es translúcida,
       pero detrás del panel pasa el texto del hero y se trasluce entre
       los enlaces. Negro sólido, que es el color de la cabecera. */
    background:var(--negro);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r-md);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1), visibility .2s;
  }
  .nav.is-abierto .nav__links{ opacity:1; visibility:visible; transform:none; }
  .nav__links a{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:.6rem .9rem;
    border-radius:var(--r-sm);
    font-size:1rem;
  }
  .nav__links a:hover{ background:rgba(255,255,255,.07); }
  .nav__links a.is-active{ background:rgba(249,245,6,.12); }
}

/* Cabecera estrecha: «AGENCIA IA» se retira para que el botón de
   auditoría quepa en una sola línea y nada se solape a 360 px. */
@media (max-width: 560px){
  .nav{ gap:.5rem; padding:.5rem .5rem .5rem .85rem; }
  .brand__sub{ display:none; }
  .nav > .btn--pill{
    font-size:.84rem;
    padding:0 1.05em;
    min-height:44px;          /* zona táctil, aunque el texto sea menor */
  }
  .nav__toggle{ margin-left:.15rem; }
}

/* Movimiento reducido: el panel aparece sin desplazarse */
@media (prefers-reduced-motion: reduce){
  .nav__links{ transition:none; }
  .nav__toggle-ico span{ transition:none; }
}

/* =========================================================
   AJUSTES DE LA PÁGINA DE PRECIOS (segunda ronda)
   ========================================================= */

/* Entre 681 y 980 px la tabla sigue siendo de escritorio, con las
   celdas algo más apretadas para que quepan las cuatro columnas. */
@media (min-width: 681px) and (max-width: 980px){
  .tabla--comparativa thead th,
  .tabla--comparativa tbody th,
  .tabla--comparativa tbody td{ padding:.7rem .6rem; }
}

/* Primera frase de cada paso, destacada sobre el fondo negro */
.step--precio strong{ color:var(--blanco); }

/* =========================================================
   PÁGINA DE PRECIOS · COMPARATIVA PLEGADA Y CALCULADORA DE RETORNO
   ========================================================= */

/* ---------- Comparativa completa, plegada bajo las tarjetas ----------
   El resumen es un enlace de texto centrado, con el subrayado amarillo de
   los demás; al abrirlo, la tabla aparece debajo y el texto cambia. */
.comparativa{ margin:1.2rem 0 0; }
.comparativa__abrir{
  display:block;
  width:fit-content;
  margin-inline:auto;
  list-style:none;
  cursor:pointer;
}
.comparativa__abrir::-webkit-details-marker{ display:none; }
.comparativa__ver,
.comparativa__ocultar{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  min-height:44px;
  font-weight:700;
  color:var(--pizarra-900);
  border-bottom:2px solid var(--amarillo);
  padding-bottom:1px;
}
.comparativa__abrir:hover .comparativa__ver,
.comparativa__abrir:hover .comparativa__ocultar{ border-bottom-color:var(--amarillo-press); opacity:.75; }
.comparativa__ocultar,
.comparativa[open] .comparativa__ver{ display:none; }
.comparativa[open] .comparativa__ocultar{ display:inline-flex; }
.comparativa .tabla--comparativa{ margin-top:1.25rem; }

/* ---------- Calculadora de retorno ---------- */
.calc--precios{ margin-top:2.5rem; }

.ret__paquetes{ margin:3rem 0 0; }
.ret__leyenda{
  margin:0 0 .7rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pizarra-600);
}
/* Cuatro botones: el agente telefónico y los tres paquetes. Cuatro
   columnas en escritorio y 2 × 2 por debajo de 860 px. */
.ret__ops{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.6rem;
}
.ret__op{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  min-height:44px;
  padding:.8rem 1rem;
  background:var(--blanco);
  border:1.5px solid var(--pizarra-200);
  border-radius:var(--r-md);
  color:var(--pizarra-700);
  font-family:inherit;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.ret__op:hover{ border-color:var(--pizarra-400); }
.ret__op[aria-pressed="true"]{
  background:var(--negro);
  border-color:var(--negro);
  color:var(--blanco);
}
.ret__op-nombre{ font-size:.95rem; font-weight:700; }
.ret__op-cuota{ font-size:.8125rem; color:var(--pizarra-600); }
.ret__op[aria-pressed="true"] .ret__op-cuota{ color:var(--amarillo); }

/* ---------- La cuenta del mes ----------
   Lo que recuperas, lo que pagas y lo que te queda, como en una factura.
   Es la única parte de la web con verde y rojo, y son los mismos tonos de
   los avisos de los formularios: verde cuando te compensa y rojo cuando
   no. Siempre van con signo, icono y palabras, porque el color no puede ir
   solo: a muchas personas les cuesta distinguir esos dos. El verde va solo
   en la cifra grande, el icono y la barra; en letra pequeña no llega al
   contraste mínimo sobre blanco. */
.ret__cuenta{
  --ret-verde:#16a34a;
  --ret-rojo:#dc2626;
  max-width:46rem;
  margin:2.6rem auto 0;
  padding:1.6rem 1.8rem 1.7rem;
  background:var(--blanco);
  border:1px solid var(--pizarra-200);
  border-radius:var(--r-lg);
  box-shadow:var(--sombra);
  text-align:left;
}

/* Arriba, el veredicto: icono de color y palabras */
.ret__estado{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin:0 0 1rem;
  font-size:1.3125rem;
  font-weight:700;
  line-height:1.25;
  color:var(--pizarra-900);
}
.ret__icono{
  flex:none;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:var(--r-full);
  background:var(--pizarra-600);
  color:var(--blanco);
}
.ret__icono svg{
  grid-area:1 / 1;
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ret__no,
.ret__cuenta--pierde .ret__si{ display:none; }
.ret__cuenta--pierde .ret__no{ display:block; }
.ret__cuenta--gana .ret__icono{ background:var(--ret-verde); }
.ret__cuenta--pierde .ret__icono{ background:var(--ret-rojo); }

/* Las tres filas: lo que entra, lo que sale y lo que queda */
.ret__filas{ margin:0; }
.ret__fila{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem 0;
  border-top:1px solid var(--pizarra-200);
}
.ret__fila dt{ flex:1 1 auto; min-width:0; font-weight:600; color:var(--pizarra-900); }
.ret__detalle{
  display:block;
  font-size:.8125rem;
  font-weight:400;
  color:var(--pizarra-600);
}
.ret__fila dd{
  flex:none;
  margin:0;
  font-size:1.3125rem;
  font-weight:700;
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--pizarra-900);
}
/* El resultado, bajo una raya gruesa, como el total de una cuenta */
.ret__fila--total{ align-items:center; border-top:2px solid var(--pizarra-900); }
.ret__neto{ display:block; font-size:1.9rem; line-height:1.1; letter-spacing:-.02em; }
.ret__cuenta--gana .ret__neto{ color:var(--ret-verde); }
.ret__cuenta--pierde .ret__neto{ color:var(--ret-rojo); }
.ret__anio{ display:block; margin-top:.15rem; font-size:.9375rem; font-weight:600; color:var(--pizarra-600); }
.ret__anio:empty{ display:none; }

/* La barra de clientes y su leyenda */
.ret__barra{ margin:1.1rem 0 0; }
.ret__pista{ display:flex; gap:3px; height:14px; }
.ret__tramo{ flex:1 1 0; min-width:6px; border-radius:var(--r-full); background:var(--pizarra-900); }
.ret__cuenta--gana .ret__tramo--resto{ background:var(--ret-verde); }
.ret__cuenta--pierde .ret__tramo--base{ background:var(--ret-rojo); }
.ret__cuenta--pierde .ret__tramo--resto{ background:transparent; border:2px dashed var(--ret-rojo); }
.ret__claves{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem 1.25rem;
  margin:.55rem 0 0;
  font-size:.8125rem;
  color:var(--pizarra-600);
}
.ret__clave{ display:inline-flex; align-items:center; gap:.45rem; }
.ret__clave::before{
  content:"";
  flex:none;
  width:10px;
  height:10px;
  border-radius:var(--r-full);
  background:var(--pizarra-900);
}
.ret__cuenta--gana .ret__clave--resto::before{ background:var(--ret-verde); }
.ret__cuenta--pierde .ret__clave--base::before{ background:var(--ret-rojo); }
.ret__cuenta--pierde .ret__clave--resto::before{ background:transparent; border:2px dashed var(--ret-rojo); }

/* Sin cifras todavía: ni veredicto ni barra */
.ret__cuenta--vacia .ret__estado,
.ret__cuenta--vacia .ret__barra{ display:none; }

/* La frase que lo cuenta con palabras */
.ret__frase{ margin:1.1rem 0 0; }
.ret__frase p{ margin:0; line-height:1.5; color:var(--pizarra-700); }
.ret__frase strong{ color:var(--pizarra-900); font-weight:700; }

/* Botón para saltar al paquete inferior, dentro de la frase */
.ret__cambiar{
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-weight:700;
  color:var(--pizarra-900);
  text-decoration:none;
  border-bottom:2px solid var(--amarillo);
  cursor:pointer;
}
.ret__cambiar:hover{ opacity:.75; }

/* Nota y enlace al caso real, bajo la cuenta */
.ret__nota{
  max-width:46rem;
  margin:1rem auto 0;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--pizarra-600);
}
.ret__caso{ margin:.2rem 0 0; }
.ret__caso a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  min-height:44px;
  font-size:.9375rem;
  font-weight:700;
  color:var(--pizarra-900);
  text-decoration:none;
  border-bottom:2px solid var(--amarillo);
  padding-bottom:1px;
}
.ret__caso a:hover{ border-bottom-color:var(--amarillo-press); opacity:.75; }

/* Calculadora de precios: la fórmula entra en la escala corta de la
   página (30 y 48 px); la de la home no cambia. */
.calc--precios .calc__num{ font-size:clamp(1.9rem, 4vw, 3rem); }
.calc--precios .calc__eur{ font-size:clamp(1.3125rem, 3vw, 1.875rem); }
.calc--precios .calc__op{ font-size:clamp(1.2rem, 2.4vw, 1.875rem); }
.calc--precios .calc__step{ font-size:1.0625rem; }
.calc--precios .calc__cap{ font-size:.75rem; }
.step--precio .step__n{ font-size:1.3125rem; }

/* ---------- Responsive de la calculadora ---------- */
@media (max-width: 860px){
  .ret__ops{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .ret__cuenta{ padding:1.3rem 1.2rem 1.4rem; }
}

/* Movimiento reducido: sin transición en los botones de paquete */
@media (prefers-reduced-motion: reduce){
  .ret__op{ transition:none; }
}

/* Zona táctil de 44 px en los botones + y −, sin tocar su aspecto.
   El botón mide 31 × 26 px por su propio relleno, y ese es el tamaño
   del fondo que aparece al pasar por encima: si se agranda el botón,
   cambia la calculadora de la home. Por eso el área se amplía con un
   pseudo-elemento invisible, que no ocupa sitio en la maqueta.

   Crece hacia afuera —el «+» hacia arriba y el «−» hacia abajo— para
   no robarle pulsaciones al número, que está entre los dos. */
.calc__step{ position:relative; }
.calc__step::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:44px;
  height:44px;
}
.calc__step:not([data-paso^="-"])::after{ bottom:0; }   /* el «+», hacia arriba */
.calc__step[data-paso^="-"]::after{ top:0; }            /* el «−», hacia abajo */