/* =====================================================================
   Dojo de Ventas — web pública. Sin fuentes ni recursos externos (RGPD).
   Firma visual: la tinta roja del coach (subrayados a pincel y el sello
   con la nota) sobre el fondo oscuro del dojo.
   ===================================================================== */

:root {
  --tinta: #0d0e12;
  --tinta-2: #121419;
  --superficie: #181a21;
  --superficie-2: #20232c;
  --linea: #2a2e39;
  --linea-fuerte: #3a3f4d;
  --papel: #eef0f4;
  --papel-2: #b4bac6;
  --papel-3: #858c9b;
  --laca: #ff5a3c;
  --laca-osc: #e8442a;
  --laca-suave: rgba(255, 90, 60, 0.13);
  --oro: #f5b83d;
  --oro-suave: rgba(245, 184, 61, 0.13);

  /* Hoja corregida de la demo */
  --hoja: #f3eee3;
  --hoja-texto: #1c1d22;
  --hoja-tenue: #6b6658;
  --tinta-roja: #c8321a;
  --tinta-verde: #1d7047;

  --f-display: "Bahnschrift", "Avenir Next Condensed", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  --ancho: 1120px;
  --margen: 16px;
  --radio: 16px;
  --radio-lg: 24px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --pincel-rojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C34 5.5 61 11.5 98 8.2S168 5.6 197 8.6' fill='none' stroke='%23c8321a' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --pincel-verde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8.8C40 6.2 70 10.8 105 8.4S170 6.6 197 9' fill='none' stroke='%231d7047' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --pincel-laca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C34 5.5 61 11.5 98 8.2S168 5.6 197 8.6' fill='none' stroke='%23ff5a3c' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E");

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
main { overflow-x: clip; }
a { color: var(--laca); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.t-tenue { color: var(--papel-3); }
.t-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--papel-3); }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--oro); color: var(--tinta); padding: 10px 16px; border-radius: 10px; font-weight: 700;
}
.saltar:focus { top: 12px; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 16px; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primario { background: var(--laca); color: #1a0a05; }
.btn-primario:hover { background: var(--laca-osc); }
.btn-secundario { background: var(--superficie-2); color: var(--papel); border-color: var(--linea); }
.btn-secundario:hover { border-color: var(--linea-fuerte); }
.btn-fantasma { color: var(--papel); border-color: var(--linea-fuerte); }
.btn-fantasma:hover { border-color: var(--papel-3); }
.btn-grande { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn-peq { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-bloque { width: 100%; }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 14, 18, 0.9);
  background: color-mix(in srgb, var(--tinta) 84%, transparent);
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
  padding-top: env(safe-area-inset-top, 0px);
}
.cabecera.con-borde { border-bottom-color: var(--linea); }
.cabecera-dentro {
  max-width: var(--ancho); margin: 0 auto; height: 64px; padding: 0 var(--margen);
  display: flex; align-items: center; gap: 16px;
}
.marca { display: flex; align-items: center; gap: 10px; color: var(--papel); font-weight: 750; font-size: 16px; white-space: nowrap; }
.marca:hover { text-decoration: none; }
.marca-torii { width: 30px; height: 30px; flex: none; }
.nav { display: none; gap: 26px; margin-left: 20px; }
.nav a { color: var(--papel-2); font-size: 15px; }
.nav a:hover { color: var(--papel); text-decoration: none; }
.cabecera-acciones { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.enlace-entrar { color: var(--papel); font-weight: 600; font-size: 15px; padding: 10px 4px; }
.solo-estrecho { display: none; }
@media (max-width: 400px) {
  .cabecera-dentro { gap: 10px; }
  .cabecera-acciones { gap: 10px; }
  .cabecera-acciones .btn { padding: 0 16px; }
  .solo-ancho { display: none; }
  .solo-estrecho { display: inline; }
}

/* ---------- estructura común ---------- */
.hero, .seccion, .cta-final { max-width: var(--ancho); margin: 0 auto; padding-left: var(--margen); padding-right: var(--margen); }
.seccion { padding-top: 72px; padding-bottom: 72px; }
.seccion-cabeza { max-width: 680px; margin-bottom: 36px; }
.ceja {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--oro); margin-bottom: 14px;
}
.seccion-titulo {
  font-family: var(--f-display); font-stretch: 75%; font-weight: 700;
  font-size: clamp(30px, 7.4vw, 50px); line-height: 1.02; letter-spacing: -0.005em;
}
.seccion-intro { margin-top: 16px; color: var(--papel-2); font-size: 17px; max-width: 60ch; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: grid; gap: 48px;
  padding-top: 40px; padding-bottom: 72px;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 620px; height: 620px; right: -260px; top: 120px;
  background: radial-gradient(closest-side, rgba(255, 90, 60, 0.16), transparent);
}
.hero-titulo {
  font-family: var(--f-display); font-stretch: 75%; font-weight: 700; text-transform: uppercase;
  font-size: clamp(46px, 13.2vw, 104px); line-height: 0.96; letter-spacing: -0.01em;
}
.tinta {
  color: var(--laca);
  padding-bottom: 0.08em;
  background: var(--pincel-laca) no-repeat 0 100% / 100% 0.16em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero-sub { margin-top: 24px; font-size: 18px; color: var(--papel-2); max-width: 34em; }
.hero-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-ctas .btn { flex: 1 1 200px; }
.hero-nota { margin-top: 14px; font-size: 14px; color: var(--papel-3); }

/* maqueta del móvil */
.movil { margin: 0 auto; width: min(320px, 100%); }
.movil-pantalla {
  border-radius: 38px; padding: 22px 18px 20px;
  background: linear-gradient(180deg, #15171d, #0f1015);
  border: 1px solid var(--linea-fuerte);
  box-shadow: 0 0 0 8px #1a1c23, 0 0 0 9px var(--linea), 0 40px 80px -20px rgba(0, 0, 0, 0.7), 0 0 120px -30px rgba(255, 90, 60, 0.35);
  display: flex; flex-direction: column; gap: 14px;
}
.ll-estado { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--papel-2); }
.ll-directo { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
.ll-persona { display: flex; align-items: center; gap: 12px; }
.ll-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 20px;
  background: var(--oro-suave); color: var(--oro); border: 1px solid rgba(245, 184, 61, 0.35);
}
.ll-nombre { font-weight: 750; font-size: 17px; line-height: 1.2; }
.ll-negocio { font-size: 13px; color: var(--papel-3); }
.ll-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--superficie-2); color: var(--papel-2); border: 1px solid var(--linea);
}
.ll-onda { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; }
.ll-onda span {
  width: 4px; height: 100%; border-radius: 4px; background: var(--laca);
  transform-origin: center; animation: onda 1.1s ease-in-out infinite;
}
.ll-onda span:nth-child(3n) { animation-delay: -0.35s; }
.ll-onda span:nth-child(3n + 1) { animation-delay: -0.7s; }
.ll-onda span:nth-child(4n) { animation-duration: 0.9s; }
.ll-onda span:nth-child(5n) { animation-duration: 1.4s; }
@keyframes onda { 0%, 100% { transform: scaleY(0.18); } 50% { transform: scaleY(0.85); } }
.ll-burbuja {
  align-self: flex-start; max-width: 92%;
  padding: 11px 14px; border-radius: 18px 18px 18px 6px;
  background: var(--superficie-2); border: 1px solid var(--linea); font-size: 15px; line-height: 1.45;
}
.ll-pista {
  padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45;
  background: var(--oro-suave); border: 1px dashed rgba(245, 184, 61, 0.45); color: #f6dca5;
}
.ll-pista-etq {
  display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--oro); margin-bottom: 3px;
}
.ll-controles { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.ll-boton { font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 999px; }
.ll-boton-sec { background: var(--superficie-2); color: var(--papel-2); }
.ll-colgar { background: rgba(248, 113, 113, 0.14); color: #f87171; }
.ll-mic {
  width: 64px; height: 64px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--laca); box-shadow: 0 0 0 8px var(--laca-suave);
}
.ll-mic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pie-ejemplo { margin-top: 18px; text-align: center; font-family: var(--f-mono); font-size: 12px; color: var(--papel-3); }

/* ---------- demo: hoja corregida + informe ---------- */
.demo-rejilla { display: grid; gap: 20px; align-items: start; }
.guion {
  background: var(--hoja); color: var(--hoja-texto);
  border-radius: var(--radio); padding: 22px 18px 26px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.guion-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 18px; }
.guion .t-tenue { color: var(--hoja-tenue); font-size: 12px; }
.etiqueta-ejemplo {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(28, 29, 34, 0.25); color: var(--hoja-tenue);
}
.turnos { display: flex; flex-direction: column; gap: 16px; }
.turno { display: grid; grid-template-columns: 54px 1fr; column-gap: 10px; row-gap: 6px; font-size: 15.5px; line-height: 1.55; }
.turno > p { grid-column: 2; }
.turno-quien {
  grid-row: 1; padding-top: 3px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hoja-tenue);
}
.turno-ella > p:not(.objecion) { color: #3d3e45; }
.subrayado {
  background: var(--pincel-rojo) no-repeat 0 100% / 100% 0.42em; color: inherit;
  padding-bottom: 0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.subrayado-oro { background-image: var(--pincel-verde); }
.nota { font-style: italic; font-weight: 600; font-size: 14.5px; line-height: 1.45; display: flex; gap: 8px; }
.nota-mal { color: var(--tinta-roja); }
.nota-bien { color: var(--tinta-verde); }
.nota-marca { font-style: normal; font-weight: 800; flex: none; }
.objecion {
  justify-self: start; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-roja); border: 1.5px solid var(--tinta-roja); border-radius: 4px; padding: 2px 7px; transform: rotate(-2deg);
}

.informe {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 22px 18px; display: flex; flex-direction: column; gap: 20px;
}
.informe-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.informe-resultado { font-family: var(--f-display); font-stretch: 75%; font-weight: 700; font-size: 26px; line-height: 1.1; margin-top: 6px; }
.informe-xp { margin-top: 4px; font-size: 13px; color: var(--oro); }
.hanko {
  flex: none; width: 84px; height: 84px; border-radius: 10px; transform: rotate(-7deg);
  background: var(--laca); color: var(--tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 4px var(--laca), inset 0 0 0 6px rgba(13, 14, 18, 0.55);
  background-image: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.16), transparent 45%),
    radial-gradient(circle at 75% 80%, rgba(0, 0, 0, 0.14), transparent 40%);
}
.hanko-nota { font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 46px; line-height: 0.9; }
.hanko-etq { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; font-weight: 700; margin-top: 2px; }
.areas { display: flex; flex-direction: column; gap: 10px; }
.areas li { display: grid; grid-template-columns: 112px 1fr 30px; align-items: center; gap: 10px; font-size: 14px; color: var(--papel-2); }
.areas .mono { text-align: right; color: var(--papel); font-size: 13px; }
.barra { height: 6px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; }
.barra-relleno { display: block; height: 100%; border-radius: 6px; background: var(--oro); transform-origin: left; }
.b-55 { width: 55%; background: var(--laca); }
.b-75 { width: 75%; }
.b-80 { width: 80%; }
.b-85 { width: 85%; }
.informe-bloque { border-top: 1px solid var(--linea); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.cita { color: var(--papel); font-style: italic; }

/* Coreografía: solo cuando landing.js la prepara y el usuario no ha pedido menos movimiento. */
.demo-rejilla.animable .subrayado { background-size: 0% 0.42em; transition: background-size 0.7s var(--ease); }
.demo-rejilla.animable .nota, .demo-rejilla.animable .objecion { opacity: 0; transform: translateY(4px); transition: opacity 0.4s, transform 0.4s var(--ease); }
.demo-rejilla.animable .hanko { opacity: 0; transform: rotate(-7deg) scale(1.7); transition: opacity 0.18s, transform 0.32s cubic-bezier(0.3, 1.6, 0.5, 1); }
.demo-rejilla.animable .barra-relleno { transform: scaleX(0); transition: transform 0.8s var(--ease); }
.demo-rejilla.visible .subrayado { background-size: 100% 0.42em; }
.demo-rejilla.visible .nota, .demo-rejilla.visible .objecion { opacity: 1; transform: none; }
.demo-rejilla.visible .objecion { transform: rotate(-2deg); }
.demo-rejilla.visible .hanko { opacity: 1; transform: rotate(-7deg) scale(1); }
.demo-rejilla.visible .barra-relleno { transform: none; }
.demo-rejilla.visible .turno:nth-child(1) .subrayado { transition-delay: 0.1s; }
.demo-rejilla.visible .turno:nth-child(1) .nota { transition-delay: 0.6s; }
.demo-rejilla.visible .turno:nth-child(3) .subrayado { transition-delay: 0.9s; }
.demo-rejilla.visible .turno:nth-child(3) .nota { transition-delay: 1.4s; }
.demo-rejilla.visible .turno:nth-child(4) .objecion { transition-delay: 1.7s; }
.demo-rejilla.visible .turno:nth-child(5) .subrayado { transition-delay: 1.9s; }
.demo-rejilla.visible .turno:nth-child(5) .nota { transition-delay: 2.4s; }
.demo-rejilla.visible .barra-relleno { transition-delay: 0.4s; }
.demo-rejilla.visible .hanko { transition-delay: 2.8s; }

/* ---------- pasos ---------- */
.pasos { display: grid; gap: 14px; counter-reset: paso; }
.paso {
  position: relative; padding: 24px 20px 24px 20px;
  background: var(--tinta-2); border: 1px solid var(--linea); border-radius: var(--radio);
}
.paso-n {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--laca); color: var(--laca); font-weight: 700; font-size: 15px; margin-bottom: 16px;
}
.paso h3 { font-size: 19px; font-weight: 750; margin-bottom: 8px; }
.paso p { color: var(--papel-2); }

/* ---------- funciones ---------- */
.funciones { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.funcion { padding: 26px 0; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
.funcion-icono {
  grid-row: span 2; width: 26px; height: 26px; margin-top: 2px;
  fill: none; stroke: var(--laca); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.funcion h3 { font-size: 18px; font-weight: 750; margin-bottom: 6px; }
.funcion p { color: var(--papel-2); font-size: 15.5px; }

/* ---------- cinturones ---------- */
.escalera { display: flex; flex-direction: column; gap: 8px; }
.escalon {
  display: grid; grid-template-columns: 72px 1fr; grid-template-areas: "cinta nombre" "cinta req";
  align-items: center; column-gap: 16px; row-gap: 2px;
  padding: 14px 16px; border-radius: 12px; background: var(--tinta-2); border: 1px solid var(--linea);
}
.escalon .cinta { grid-area: cinta; }
.escalon-nombre { grid-area: nombre; }
.escalon-req { grid-area: req; }
.cinta {
  position: relative; height: 16px; border-radius: 3px; background: var(--color-cinta);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.cinta::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 0;
  border-top: 1px dashed rgba(0, 0, 0, 0.28);
}
.escalon-nombre { font-weight: 750; line-height: 1.3; }
.escalon-req { font-size: 13px; color: var(--papel-3); }
.escalon-req span + span::before { content: " · "; }
.c-blanco { --color-cinta: #f2f2f2; }
.c-amarillo { --color-cinta: #f5c518; }
.c-naranja { --color-cinta: #ff8a1f; }
.c-verde { --color-cinta: #2fbf71; }
.c-azul { --color-cinta: #3b82f6; }
.c-marron { --color-cinta: #8b5a2b; }
.c-negro { --color-cinta: #111111; }
.c-negro .cinta { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); background: linear-gradient(90deg, #111 0 70%, var(--oro) 70% 80%, #111 80%); }
.c-negro .cinta::after { border-top-color: rgba(255, 255, 255, 0.18); }

/* ---------- sectores y países ---------- */
.dos-columnas { display: grid; gap: 64px; }
.dos-columnas .seccion-titulo { font-size: clamp(28px, 6.6vw, 42px); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.etiquetas li {
  padding: 9px 14px; border-radius: 999px; font-size: 14.5px;
  background: var(--superficie); border: 1px solid var(--linea); color: var(--papel);
}
.etiquetas .etiqueta-tuya { border-color: var(--laca); color: var(--laca); background: var(--laca-suave); font-weight: 650; }
.frases { margin-top: 28px; display: flex; flex-direction: column; }
.frases li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--linea);
}
.frases li:first-child { border-top: 1px solid var(--linea); }
.frase { font-size: 17px; font-style: italic; }
.frase-pais { flex: none; font-family: var(--f-mono); font-size: 12px; color: var(--oro); }
.paises-lista { margin-top: 18px; font-size: 14px; }

/* ---------- precios ---------- */
.planes { display: grid; gap: 16px; }
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 22px 22px; border-radius: var(--radio-lg);
  background: var(--tinta-2); border: 1px solid var(--linea);
}
.plan-destacado { border-color: var(--laca); background: linear-gradient(180deg, rgba(255, 90, 60, 0.08), var(--tinta-2) 45%); }
.plan-cinta {
  position: absolute; top: -12px; left: 22px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; background: var(--laca); color: #fff;
}
.plan-nombre { font-family: var(--f-display); font-stretch: 75%; font-weight: 700; font-size: 30px; line-height: 1; }
.plan-eslogan { color: var(--papel-3); font-size: 14.5px; margin-top: 6px; }
.plan-precio { margin-top: 22px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.plan-importe { font-family: var(--f-display); font-stretch: 75%; font-weight: 700; font-size: 46px; line-height: 1; }
.plan-periodo { color: var(--papel-2); font-size: 15px; }
.plan-alt { margin-top: 6px; color: var(--oro); font-size: 14px; min-height: 1.6em; }
.plan-ventajas { margin: 22px 0 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan-ventajas li { position: relative; padding-left: 26px; font-size: 15px; color: var(--papel-2); }
.plan-ventajas li::before {
  content: ""; position: absolute; left: 2px; top: 0.5em; width: 12px; height: 7px;
  border-left: 2px solid var(--laca); border-bottom: 2px solid var(--laca); transform: rotate(-45deg);
}
.precios-nota { margin-top: 20px; font-size: 13.5px; }

/* ---------- preguntas ---------- */
.faq { max-width: 820px; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 44px 20px 0; font-size: 17.5px; font-weight: 650; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: linear-gradient(var(--laca), var(--laca)) center / 16px 2px no-repeat,
    linear-gradient(var(--laca), var(--laca)) center / 2px 16px no-repeat;
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--papel-2); padding: 0 0 20px; max-width: 70ch; }
.faq details p + p { margin-top: -8px; }

/* ---------- CTA final y pie ---------- */
.cta-final { padding-top: 64px; padding-bottom: 96px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta-titulo {
  font-family: var(--f-display); font-stretch: 75%; font-weight: 700; text-transform: uppercase;
  font-size: clamp(36px, 9.5vw, 76px); line-height: 0.95; max-width: 14em;
}
.cta-final p { color: var(--papel-2); font-size: 17px; }
.cta-final .btn { margin-top: 8px; min-width: 240px; }

.pie { position: relative; border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom, 0px); }
.pie::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 4px;
  background: linear-gradient(90deg, #f2f2f2 0 14.28%, #f5c518 14.28% 28.57%, #ff8a1f 28.57% 42.85%, #2fbf71 42.85% 57.14%,
    #3b82f6 57.14% 71.42%, #8b5a2b 71.42% 85.71%, #1b1b1b 85.71%);
}
.pie-dentro {
  max-width: var(--ancho); margin: 0 auto; padding: 40px var(--margen) 32px;
  display: grid; gap: 24px; font-size: 14.5px;
}
.pie-marca { display: flex; gap: 12px; align-items: flex-start; }
.pie-nombre { font-weight: 750; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pie-enlaces a { color: var(--papel-2); padding: 8px 0; }
.pie-enlaces a:hover { color: var(--papel); }
.pie-copy { font-size: 13px; }

/* ---------- pantallas más anchas ---------- */
@media (min-width: 640px) {
  :root { --margen: 24px; }
  .funciones { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .guion { padding: 28px 30px 32px; }
  .turno { grid-template-columns: 64px 1fr; }
  .informe { padding: 26px 26px; }
  .areas li { grid-template-columns: 150px 1fr 34px; }
  .hero-ctas .btn { flex: 0 0 auto; }
}

@media (min-width: 900px) {
  :root { --margen: 32px; }
  .nav { display: flex; }
  .seccion { padding-top: 96px; padding-bottom: 96px; }
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; padding-top: 72px; padding-bottom: 112px; gap: 56px; }
  .hero::before { right: -120px; top: 40px; }
  .hero-titulo { font-size: clamp(64px, 7.4vw, 96px); }
  .movil { margin: 0 0 0 auto; }
  .demo-rejilla { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 28px; }
  .informe { position: sticky; top: 96px; }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .funciones { grid-template-columns: repeat(3, 1fr); }
  .dos-columnas { grid-template-columns: 1fr 1fr; gap: 72px; }
  .planes { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .pie-dentro { grid-template-columns: 1.4fr auto; align-items: center; }
  .pie-copy { grid-column: 1 / -1; }

  .escalera {
    display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 10px; height: 340px;
  }
  .escalon {
    height: var(--alto); grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-items: start;
    grid-template-areas: "cinta" "nombre" "req";
    padding: 0 0 14px; gap: 10px; overflow: hidden; border-radius: 12px 12px 6px 6px;
  }
  .cinta { height: 22px; border-radius: 0; }
  .escalon-nombre, .escalon-req { padding: 0 12px; text-align: left; }
  .escalon-req { align-self: end; font-size: 12px; }
  .escalon-req span { display: block; }
  .escalon-req span + span::before { content: none; }
  .c-blanco { --alto: 28%; }
  .c-amarillo { --alto: 38%; }
  .c-naranja { --alto: 48%; }
  .c-verde { --alto: 59%; }
  .c-azul { --alto: 70%; }
  .c-marron { --alto: 84%; }
  .c-negro { --alto: 100%; border-color: rgba(245, 184, 61, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ll-onda span { transform: scaleY(0.5); }
}