/* ============================================================================
   padelinteractivo.com — hoja de estilos única
   ----------------------------------------------------------------------------
   Índice
     1. Tokens (colores, tipografía, medidas)  ← CAMBIA AQUÍ LOS COLORES
     2. Reset y base
     3. Utilidades y layout
     4. Tipografía
     5. Componentes (botones, tarjetas, formularios, nav, footer)
     6. Secciones (hero, pasos, pantallas, dashboard, timeline…)
     7. Efectos y animaciones
     8. Responsive
     9. Reduced-motion (solo efectos intrusivos)
   ========================================================================== */


/* =============================================================
   0. TIPOGRAFÍA PROPIA
   ----------------------------------------------------------------
   Cerebri Sans es una fuente de pago (Hanken Design Co, se compra en
   MyFonts). Para usarla en la web hace falta licencia de "webfont".

   El bloque está desactivado porque el archivo no existe: mientras estuvo
   activo, el navegador pedía la fuente en cada página y recibía un 404. No
   rompía nada, pero era una petición perdida por visita y un error en la
   consola. El logo se ve en Outfit Bold, la misma de los titulares.

   Si algún día compras la licencia:
     1. Guarda el archivo como  assets/fonts/cerebri-sans-bold.woff2
     2. Quita las dos marcas de comentario que rodean el bloque de abajo.
   ============================================================= */
/*
@font-face {
  font-family: "Cerebri Sans";
  src: url("assets/fonts/cerebri-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/


/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* --- PALETA · cambia estos seis valores y cambia toda la web --- */
  --bg:          #F6F7F4;   /* blanco cálido con un punto de verde */
  --bg-2:        #ECEFE8;   /* fondo de secciones alternas */
  --paper:       #FFFFFF;   /* tarjetas */
  --court:       #0B7A5A;   /* [COLOR PRINCIPAL] verde pista */
  --sky:         #1E7BD6;   /* [COLOR SECUNDARIO] azul pista */
  --ball:        #D8F24B;   /* [COLOR ACENTO] amarillo pelota */

  /* --- Derivados (normalmente no hace falta tocarlos) --- */
  --court-deep:  #06543E;
  --court-soft:  #E3F2EB;
  --sky-soft:    #E4EFFB;
  --ball-deep:   #A9C420;

  --ink:         #0D1512;   /* texto principal */
  --ink-soft:    #37443F;   /* párrafos */
  --ink-mute:    #6B7975;   /* metadatos */
  --line:        rgba(13, 21, 18, .12);
  --line-soft:   rgba(13, 21, 18, .07);

  /* --- Tipografía --- */
  /* El logo usa Cerebri Sans si algún día se compra la licencia; mientras
     tanto, Outfit, que es la misma de los titulares. */
  --logo:    "Cerebri Sans", "Outfit", "Segoe UI", system-ui, sans-serif;
  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --sans:    "Inter", "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* --- Medidas --- */
  --gutter:    1.25rem;
  --maxw:      1200px;
  --maxw-text: 68ch;
  --nav-h:     68px;
  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  /* --- Sombras --- */
  --shadow-sm: 0 2px 8px rgba(13, 21, 18, .05);
  --shadow:    0 12px 32px -12px rgba(13, 21, 18, .16);
  --shadow-lg: 0 40px 80px -32px rgba(13, 21, 18, .28);

  /* --- Curvas --- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.7, 0, .84, 0);
  --ease-soft:   cubic-bezier(.25, .46, .45, .94);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}


/* =============================================================
   2. RESET Y BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;            /* clip, no hidden: no rompe position:sticky */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.1em; }

::selection { background: var(--ball); color: var(--ink); }

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

/* Transición entre páginas (navegadores compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .45s;
  animation-timing-function: var(--ease-out);
}


/* =============================================================
   3. UTILIDADES Y LAYOUT
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 9vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--alt { background: var(--bg-2); }
.section--paper { background: var(--paper); }

.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;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }


/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -.025em;
  font-weight: 600;
  text-wrap: balance;
}

/* Tope ajustado para que el titular del hero entre en 3 líneas en todos los
   anchos: con 4.2rem se iba a 4 y empujaba los botones fuera de pantalla. */
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.2; }
h4 { font-size: 1.05rem; line-height: 1.25; }

.kicker {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--court);
  display: inline-flex; align-items: center; gap: .55rem;
  margin-bottom: 1rem;
}
.kicker::before {
  content: ""; width: 22px; height: 2px;
  background: var(--ball); border-radius: 2px; flex: none;
}
.kicker--plain::before { display: none; }

.lede {
  font-size: clamp(1.02rem, 1.8vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 58ch;
}

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head p { margin-top: 1rem; }

.em { color: var(--court); }
.underline-ball {
  background-image: linear-gradient(var(--ball), var(--ball));
  background-repeat: no-repeat;
  background-size: 100% .34em;
  background-position: 0 88%;
  padding-inline: .08em;
}


/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* ---------- 5.1 Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.5rem;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  line-height: 1;
  border: 1.5px solid transparent;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              background-color .3s var(--ease-out), color .3s var(--ease-out),
              border-color .3s var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--court); color: #fff;
  box-shadow: 0 10px 24px -12px rgba(11, 122, 90, .8);
}
.btn--primary:hover { background: var(--court-deep); box-shadow: 0 16px 30px -12px rgba(11, 122, 90, .75); }

.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { border-color: var(--court); color: var(--court); }

.btn--ball { background: var(--ball); color: var(--ink); }
.btn--ball:hover { background: var(--ball-deep); }

.btn--lg { padding: 1.05rem 1.9rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-arrow { transition: transform .3s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* Enlace con subrayado animado */
.link-anim {
  position: relative; color: var(--court); font-weight: 600;
  display: inline-flex; align-items: center; gap: .4rem;
}
.link-anim::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.link-anim:hover::after { transform: scaleX(1); transform-origin: left; }


/* ---------- 5.2 Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(246, 247, 244, .82);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out),
              box-shadow .35s var(--ease-out);
}
@supports (backdrop-filter: blur(14px)) {
  .nav { background: rgba(246, 247, 244, .68); backdrop-filter: blur(14px) saturate(160%); }
}
.nav.is-stuck {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 6px 24px -18px rgba(13, 21, 18, .5);
}

.nav-inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.logo { display: flex; align-items: center; gap: .55rem; flex: none; }
.logo svg { height: 30px; width: auto; }
.logo-text {
  font-family: var(--logo); font-weight: 700; font-size: 1.08rem;
  letter-spacing: -.03em; color: var(--ink); line-height: 1.05;
}
.logo-text small {
  display: block; font-family: var(--mono); font-size: .56rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
  font-weight: 400;
}

.nav-links { display: none; align-items: center; gap: .3rem; }
.nav-links a {
  padding: .5rem .8rem; border-radius: 999px;
  font-size: .92rem; font-weight: 500; color: var(--ink-soft);
  transition: color .25s var(--ease-out), background-color .25s var(--ease-out);
}
/* El resaltado es el mismo lima que el de los enlaces del pie (.footer a:hover).
   Va de fondo y no de color de letra: el lima sobre blanco da un contraste de
   1,26:1, ilegible. Con el texto oscuro encima sube a 13,9:1. */
.nav-links a:hover { color: var(--ink); background: var(--ball); }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--ball); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: .5rem; }
/* En móvil el CTA vive dentro del menú desplegable: en la barra no cabe */
.nav .btn { display: none; padding: .68rem 1.15rem; font-size: .88rem; white-space: nowrap; }

/* El CTA de la cabecera va en lima con texto oscuro, igual que el resaltado de
   los enlaces de al lado. Solo aquí y en el menú móvil (que es la misma cabecera
   en pantalla pequeña): en el resto de la web el botón principal sigue verde. */
.nav .btn--primary,
.nav-drawer .btn--primary {
  background: var(--ball); color: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(169, 196, 32, .95);
}
.nav .btn--primary:hover,
.nav-drawer .btn--primary:hover {
  background: var(--ball-deep);
  box-shadow: 0 16px 30px -12px rgba(169, 196, 32, .9);
}

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--paper);
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--ink); transition: transform .35s var(--ease-out), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 890;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 1rem var(--gutter) 1.5rem;
  display: grid; gap: .25rem;
  transform: translateY(-120%);
  transition: transform .45s var(--ease-out);
}
.nav-drawer.is-open { transform: translateY(0); }
.nav-drawer a {
  padding: .85rem .6rem; border-radius: 10px;
  font-family: var(--display); font-size: 1.15rem; color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.nav-drawer a:last-of-type { border-bottom: 0; }
.nav-drawer .btn { margin-top: .8rem; }


/* ---------- 5.3 Tarjetas ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .45s var(--ease-out);
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(11, 122, 90, .28);
}
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .96rem; }

.card-icon {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--court-soft); color: var(--court);
  margin-bottom: 1.1rem;
}
.card-icon svg { width: 22px; height: 22px; }
.card:nth-child(2n) .card-icon { background: var(--sky-soft); color: var(--sky); }
.card:nth-child(3n) .card-icon { background: #F6FBDC; color: var(--ball-deep); }

.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }


/* ---------- 5.4 Formularios ---------- */
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; }

.field { display: grid; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.field .hint { font-size: .78rem; color: var(--ink-mute); }

.field input,
.field select,
.field textarea {
  font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .8rem .95rem;
  width: 100%;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--court);
  box-shadow: 0 0 0 4px rgba(11, 122, 90, .12);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: #C0392B; }

.field-error { font-size: .8rem; color: #C0392B; min-height: 0; }

.check {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  align-items: start; font-size: .88rem; color: var(--ink-soft);
}
.check input { width: 20px; height: 20px; accent-color: var(--court); margin-top: .15rem; }
.check a { color: var(--court); text-decoration: underline; }

.form-status {
  display: none;
  padding: 1rem 1.1rem; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 500;
}
.form-status.is-ok   { display: block; background: var(--court-soft); color: var(--court-deep); }
.form-status.is-fail { display: block; background: #FDECEA; color: #A5281B; }


/* ---------- 5.5 Acordeón FAQ ---------- */
.accordion { border-top: 1px solid var(--line); }
.accordion details {
  border-bottom: 1px solid var(--line);
}
.accordion summary {
  list-style: none; cursor: pointer;
  padding: 1.25rem .5rem 1.25rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  font-family: var(--display); font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 600; color: var(--ink);
  transition: color .25s var(--ease-out);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--court); }
.accordion .acc-icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--line); position: relative;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out),
              transform .4s var(--ease-out);
}
.accordion .acc-icon::before,
.accordion .acc-icon::after {
  content: ""; position: absolute; inset: 50% 8px auto 8px;
  height: 1.5px; background: var(--ink); transform: translateY(-50%);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.accordion .acc-icon::after { transform: translateY(-50%) rotate(90deg); }
.accordion details[open] .acc-icon {
  background: var(--court); border-color: var(--court); transform: rotate(180deg);
}
.accordion details[open] .acc-icon::before,
.accordion details[open] .acc-icon::after { background: #fff; }
.accordion details[open] .acc-icon::after { opacity: 0; }
.accordion .acc-body { padding: 0 3rem 1.6rem 0; }
.accordion .acc-body p { max-width: 65ch; }
.accordion .acc-body p + p { margin-top: .8rem; }
.accordion details[open] .acc-body { animation: accIn .45s var(--ease-out) both; }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } }


/* ---------- 5.6 Banda CTA ---------- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--court-deep), var(--court) 55%, #0E8F63);
  color: #fff;
  padding: clamp(2.2rem, 6vw, 4rem);
  text-align: center;
  isolation: isolate;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .85); margin-inline: auto; max-width: 52ch; }
.cta-band .kicker { color: var(--ball); }
.cta-band .kicker::before { background: rgba(255, 255, 255, .5); }
.cta-band .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.cta-band::before {
  content: ""; position: absolute; z-index: -1;
  width: 60vmax; height: 60vmax; right: -20vmax; top: -30vmax;
  background: radial-gradient(circle, rgba(216, 242, 75, .35), transparent 62%);
  animation: ctaDrift 18s var(--ease-soft) infinite alternate;
}
@keyframes ctaDrift {
  to { transform: translate(-12%, 18%) scale(1.15); }
}
.cta-actions {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  margin-top: 2rem;
}


/* ---------- 5.7 Footer ---------- */
.footer {
  background: var(--ink); color: rgba(255, 255, 255, .72);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .92rem;
}
.footer a { transition: color .25s var(--ease-out); }
.footer a:hover { color: var(--ball); }
.footer h4 {
  color: #fff; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  margin-bottom: 1rem;
}
.footer-grid { display: grid; gap: 2.4rem; }
.footer .logo-text { color: #fff; }
.footer .logo-text small { color: rgba(255, 255, 255, .5); }
.footer-brand p { margin-top: 1rem; max-width: 34ch; color: rgba(255, 255, 255, .6); }
.footer-list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
  justify-content: space-between; align-items: center;
  font-size: .82rem; color: rgba(255, 255, 255, .5);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }


/* ---------- 5.8 Banner de cookies ---------- */
.cookies {
  position: fixed; z-index: 950;
  left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  max-width: 520px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.3rem;
  display: none;
}
.cookies.is-visible { display: block; animation: cookiesIn .5s var(--ease-out) both; }
@keyframes cookiesIn { from { opacity: 0; transform: translateY(20px); } }
.cookies h4 { font-family: var(--display); font-size: 1rem; color: var(--ink); margin-bottom: .4rem; }
.cookies p { font-size: .86rem; }
.cookies-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.cookies .btn { padding: .65rem 1.1rem; font-size: .85rem; }


/* ---------- 5.9 WhatsApp flotante ---------- */
.wa-float {
  position: fixed; right: var(--gutter); bottom: calc(var(--gutter) + 0px);
  z-index: 880;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 12px 28px -10px rgba(37, 211, 102, .8);
  transition: transform .3s var(--ease-bounce);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 27px; height: 27px; }


/* =============================================================
   6. SECCIONES
   ============================================================= */

/* ---------- 6.1 Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 4.5rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero-mesh {
  position: absolute; inset: -20% -10% auto -10%; height: 130%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(11, 122, 90, .16), transparent 70%),
    radial-gradient(34% 38% at 82% 14%, rgba(30, 123, 214, .14), transparent 70%),
    radial-gradient(30% 34% at 62% 78%, rgba(216, 242, 75, .30), transparent 70%);
  filter: blur(18px);
  animation: meshDrift 26s var(--ease-soft) infinite alternate;
}
@keyframes meshDrift {
  to { transform: translate3d(2%, -3%, 0) scale(1.12) rotate(4deg); }
}

.hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: center; }
.hero h1 { margin-bottom: 1.2rem; }
.hero .lede { margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-badges {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 2.2rem;
}
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .8rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line-soft);
  font-size: .78rem; font-weight: 500; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.badge svg { width: 14px; height: 14px; color: var(--court); }


/* ---------- 6.2 Escena animada del hero ---------- */
/* Secuencia de 9s en bucle: pala en la pared → el cliente la coge →
   el sensor emite → la pantalla se enciende → aparece la ficha.
   Todo CSS: si el JS falla, la animación sigue funcionando.            */
.scene {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: .9rem;
  align-items: stretch;
  padding: 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-height: 330px;
}

/* Pared / lineal */
.scene-wall {
  position: relative;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(180deg, #fff 0 22px, #F1F3EE 22px 24px);
  border: 1px solid var(--line-soft);
  display: grid; align-content: center; justify-items: center; gap: .55rem;
  padding: .8rem .35rem;
}
.rack-item { width: 34px; opacity: .45; }
.rack-item svg { width: 100%; height: auto; color: var(--ink-mute); }

.rack-live { position: relative; width: 40px; }
.rack-live svg { width: 100%; height: auto; color: var(--court); }
.rack-live {
  transform-origin: 50% 88%;
  animation: pickUp 9s var(--ease-soft) infinite;
}
@keyframes pickUp {
  0%, 12%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  22%       { transform: translate(6px, -14px) rotate(-11deg) scale(1.06); }
  30%, 72%  { transform: translate(8px, -18px) rotate(-14deg) scale(1.08); }
  84%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* Sensor y onda */
.sensor {
  position: absolute; left: 50%; top: 34%;
  width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%;
  background: var(--ball);
  box-shadow: 0 0 0 2px rgba(216, 242, 75, .35);
}
.sensor::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 50%; border: 1.5px solid var(--ball-deep);
  opacity: 0;
  animation: sensorWave 9s var(--ease-out) infinite;
}
@keyframes sensorWave {
  0%, 20%  { transform: scale(1);   opacity: 0; }
  24%      { transform: scale(1);   opacity: .95; }
  40%      { transform: scale(5.5); opacity: 0; }
  100%     { transform: scale(5.5); opacity: 0; }
}

/* Pantalla */
.scene-screen { display: grid; align-items: center; }
.screen {
  position: relative;
  border-radius: 14px;
  background: #11201B;
  border: 6px solid #1B2C26;
  box-shadow: 0 18px 40px -22px rgba(13, 21, 18, .9);
  overflow: hidden;
  min-height: 268px;
  padding: 1rem 1.1rem;
  display: grid; align-content: start; gap: .55rem;
}
.screen::after {                      /* barrido de encendido */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(216, 242, 75, .16) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: screenSweep 9s var(--ease-out) infinite;
}
@keyframes screenSweep {
  0%, 30%   { transform: translateX(-100%); }
  42%       { transform: translateX(100%); }
  100%      { transform: translateX(100%); }
}
.screen-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 0%, rgba(216, 242, 75, .20), transparent 70%);
  opacity: 0;
  animation: screenOn 9s var(--ease-out) infinite;
}
@keyframes screenOn {
  0%, 30%  { opacity: 0; }
  38%, 78% { opacity: 1; }
  88%,100% { opacity: 0; }
}

/* Mismo caso que .dash-body: sin min-width:0 las filas no bajan de su ancho
   mínimo de contenido y se salen de la pantalla, que las recorta en móvil. */
.screen > * { min-width: 0; }
.screen-line { position: relative; z-index: 1; opacity: 0; }
.screen-line { animation: lineIn 9s var(--ease-out) infinite; }
@keyframes lineIn {
  0%, 36%   { opacity: 0; transform: translateY(8px); }
  46%, 80%  { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(0); }
}
/* El primer hijo de .screen es .screen-glow, así que las líneas van del 2 al 6 */
.screen-line:nth-child(3) { animation-delay: .12s; }
.screen-line:nth-child(4) { animation-delay: .24s; }
.screen-line:nth-child(5) { animation-delay: .36s; }
.screen-line:nth-child(6) { animation-delay: .48s; }

.screen-kicker {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ball);
}
.screen-title {
  font-family: var(--display); font-size: 1.28rem; font-weight: 600;
  color: #fff; letter-spacing: -.02em; line-height: 1.1;
}
.screen-sub { font-size: .76rem; color: rgba(255, 255, 255, .55); }
.screen-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem;
  margin-top: .3rem;
}
/* En móvil la pantalla de la maqueta se queda en unos 195 px: dos columnas de
   chips no caben y el texto se sale de su propia pastilla. */
@media (max-width: 620px) {
  .screen-specs { grid-template-columns: 1fr; }
}
.spec {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .42rem .6rem;
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  font-size: .72rem;
}
.spec span:first-child { color: rgba(255, 255, 255, .5); }
.spec span:last-child { color: #fff; font-weight: 600; font-family: var(--mono); font-size: .7rem; }

.screen-tag {
  position: absolute; right: .8rem; bottom: .8rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .65rem; border-radius: 999px;
  background: var(--ball); color: var(--ink);
  font-size: .64rem; font-weight: 700; font-family: var(--mono);
  opacity: 0;
  animation: tagIn 9s var(--ease-bounce) infinite;
}
@keyframes tagIn {
  0%, 62%   { opacity: 0; transform: scale(.85) translateY(6px); }
  70%, 80%  { opacity: 1; transform: scale(1) translateY(0); }
  88%, 100% { opacity: 0; transform: scale(1) translateY(0); }
}

/* Estado de reposo de la pantalla (antes de que alguien coja la pala) */
.screen-standby {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; justify-items: center; gap: .7rem;
  background: #11201B;
  animation: standbyOut 9s var(--ease-out) infinite;
}
.screen-standby img { width: 40px; height: auto; opacity: .85; }
.screen-standby span {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .32);
}
@keyframes standbyOut {
  0%, 28%   { opacity: 1; }
  36%, 84%  { opacity: 0; }
  92%, 100% { opacity: 1; }
}

.scene-caption {
  margin-top: .9rem; text-align: center;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}


/* ---------- 6.3 Pasos ---------- */
.steps { display: grid; gap: 1.1rem; counter-reset: step; }

/* Línea de flujo entre pasos: discontinua y fina, solo para encadenarlos.
   En móvil cae vertical entre tarjeta y tarjeta; en escritorio, horizontal. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -1.1rem;
  width: 1.5px; height: 1.1rem;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--line) 0 4px, transparent 4px 9px);
}

.step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Ilustración de cada paso */
.step-art {
  aspect-ratio: 5 / 3;
  margin-bottom: 1.3rem;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--bg-2), var(--paper) 72%);
  border: 1px solid var(--line-soft);
}
.step-art svg { width: 100%; height: 100%; }

.step-num {
  counter-increment: step;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  color: var(--court);
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem;
}
.step-num::before {
  content: "0" counter(step);
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--court); color: #fff; font-size: .8rem;
}
.step h3 { margin-bottom: .5rem; }
.step p { font-size: .96rem; }
.step-visual {
  margin-top: 1.2rem; padding-top: 1.2rem;
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .7rem; color: var(--ink-mute);
}
.dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ball);
  box-shadow: 0 0 0 0 rgba(216, 242, 75, .8);
  animation: pulseDot 2.4s var(--ease-out) infinite;
  flex: none;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(169, 196, 32, .7); }
  70%  { box-shadow: 0 0 0 10px rgba(169, 196, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(169, 196, 32, 0); }
}


/* ---------- 6.4 Bloque wireless ---------- */
.wireless { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
/* Este bloque no usa .section-head, así que el titular y el párrafo se quedaban
   pegados. Misma separación que en el resto de secciones. */
.wireless h2 + .lede { margin-top: 1rem; }
.wireless-list { list-style: none; padding: 0; display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.wireless-list li {
  display: grid; grid-template-columns: 38px 1fr; gap: 1rem; align-items: start;
}
.wireless-list .ico {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--court); color: #fff;
}
.wireless-list .ico svg { width: 18px; height: 18px; }
.wireless-list strong { display: block; color: var(--ink); font-size: 1rem; }
.wireless-list p { font-size: .93rem; }

.figure {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.2rem .9rem;
  background: linear-gradient(transparent, rgba(13, 21, 18, .82));
  color: rgba(255, 255, 255, .9); font-size: .8rem;
}
.figure--plain figcaption { position: static; padding: .7rem 0 0; background: none; color: var(--ink-mute); }


/* ---------- 6.5 Pantallas de ejemplo (pestañas sin JS) ---------- */
.screens-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.screens input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.screens-tabs label {
  padding: .6rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: .88rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer;
  transition: all .3s var(--ease-out);
}
.screens-tabs label:hover { border-color: var(--court); color: var(--court); }
.screens input:focus-visible + label { outline: 3px solid var(--court); outline-offset: 3px; }
.screens input:nth-of-type(1):checked ~ .screens-tabs label[for="scr-1"],
.screens input:nth-of-type(2):checked ~ .screens-tabs label[for="scr-2"],
.screens input:nth-of-type(3):checked ~ .screens-tabs label[for="scr-3"],
.screens input:nth-of-type(4):checked ~ .screens-tabs label[for="scr-4"] {
  background: var(--court); border-color: var(--court); color: #fff;
}

.screens-stage {
  position: relative;
  background: linear-gradient(160deg, #16261F, #0C1A15);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
}
.screens-panel { display: none; animation: panelIn .5s var(--ease-out) both; }
.screens input:nth-of-type(1):checked ~ .screens-stage #scrp-1,
.screens input:nth-of-type(2):checked ~ .screens-stage #scrp-2,
.screens input:nth-of-type(3):checked ~ .screens-stage #scrp-3,
.screens input:nth-of-type(4):checked ~ .screens-stage #scrp-4 { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }

/* Contenido de pantalla (maqueta) */
.mock { color: #fff; }
.mock-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mock-brand {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ball);
}
.mock-live {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.mock h3 { color: #fff; font-size: clamp(1.3rem, 3vw, 2rem); }
.mock p { color: rgba(255, 255, 255, .62); font-size: .92rem; }
.mock-body { display: grid; gap: 1.5rem; }

.mock-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.mock-spec {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px; padding: .75rem .85rem;
}
.mock-spec dt {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .45);
  margin-bottom: .25rem;
}
.mock-spec dd { margin: 0; font-weight: 600; font-size: .98rem; color: #fff; }

.mock-figure {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
}
.mock-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .92; }

/* Comparador */
.mock-vs { display: grid; gap: .8rem; }
.vs-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center;
  padding: .6rem .8rem; border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  font-size: .85rem;
}
.vs-row .vs-label {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .45);
  text-align: center;
}
.vs-row .vs-a, .vs-row .vs-b { color: #fff; font-weight: 600; }
.vs-row .vs-b { text-align: right; }
.vs-row.is-win .vs-a { color: var(--ball); }
.vs-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; margin-bottom: .2rem; }
.vs-head strong { color: #fff; font-family: var(--display); font-size: 1rem; }
.vs-head span:last-child { text-align: right; }

/* Pack / oferta */
.mock-pack { display: grid; gap: .7rem; }
.pack-item {
  display: grid; grid-template-columns: 34px 1fr; gap: .8rem; align-items: center;
  padding: .7rem .85rem; border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  font-size: .9rem; color: #fff;
}
.pack-item .pk-ico {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(216, 242, 75, .16); color: var(--ball);
}
.pack-item .pk-ico svg { width: 16px; height: 16px; }
.pack-total {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1rem; border-radius: 12px;
  background: var(--ball); color: var(--ink); font-weight: 700;
}
/* La maqueta no enseña importes: los precios los pone la tienda desde el CMS. */
.pack-total .pt-tag {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
  background: rgba(13, 21, 18, .14); white-space: nowrap;
}

/* Recomendación */
.mock-reco { display: grid; gap: .8rem; }
.reco-card {
  display: grid; grid-template-columns: 54px 1fr; gap: .9rem; align-items: center;
  padding: .8rem; border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}
.reco-card img { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; }
/* Mismo lenguaje que .pk-ico del pack: pastilla lima translúcida con el trazo
   en lima. A 54 px un icono se lee y una foto no.
   El selector lleva .reco-card delante a propósito: si no, la regla
   .reco-card span de abajo gana por especificidad y el icono sale en blanco. */
.reco-card .reco-ico {
  width: 54px; height: 54px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(216, 242, 75, .14); color: var(--ball);
  font-size: 0;
}
.reco-card .reco-ico svg { width: 27px; height: 27px; }
.reco-card strong { color: #fff; display: block; font-size: .95rem; }
.reco-card span { font-size: .8rem; color: rgba(255, 255, 255, .55); }

.mock-note {
  margin-top: 1.4rem; padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  color: rgba(255, 255, 255, .35);
}


/* ---------- 6.6 Dashboard ---------- */
.dash {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dash-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.dash-top strong { font-family: var(--display); color: var(--ink); font-size: 1rem; }
.dash-chip {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: .3rem .65rem; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line);
}
.dash-body { display: grid; gap: 1.6rem; padding: 1.4rem; }
/* Sin esto, un hijo del grid no baja de su ancho mínimo de contenido y estira
   la pista: el panel entero se salía y .dash lo recortaba en móvil. */
.dash-body > * { min-width: 0; }

/* auto-fit en vez de 3 columnas fijas: en móvil pasa a dos y las etiquetas
   («INTERACCIONES» es una palabra que no parte) dejan de forzar el ancho. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: .7rem; }
.kpi {
  padding: .9rem; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.kpi dt {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: .35rem;
}
.kpi dd {
  margin: 0; font-family: var(--display); font-size: clamp(1.2rem, 3.4vw, 1.75rem);
  font-weight: 600; color: var(--ink); line-height: 1;
}
.kpi .kpi-foot { font-size: .7rem; color: var(--court); font-weight: 600; margin-top: .3rem; }

.dash-block h4 {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: .9rem;
}
.bars { display: grid; gap: .6rem; }
.bar-row { display: grid; grid-template-columns: 1fr; gap: .25rem; }
.bar-label {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .82rem; color: var(--ink);
}
.bar-label span:last-child { font-family: var(--mono); font-size: .75rem; color: var(--ink-mute); }
.bar-track { height: 9px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--court), #14A277);
  width: 0;
  transition: width 1.1s var(--ease-out);
}
.bar-row:nth-child(4) .bar-fill,
.bar-row:nth-child(5) .bar-fill { background: linear-gradient(90deg, #4F9C86, #7FBBAA); }
.is-revealed .bar-fill { width: var(--w, 50%); }

.spark { width: 100%; height: auto; }
.spark .spark-line {
  fill: none; stroke: var(--sky); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
.is-revealed .spark .spark-line { stroke-dashoffset: 0; }
.spark .spark-area { fill: url(#sparkGrad); opacity: 0; transition: opacity 1s .4s var(--ease-out); }
.is-revealed .spark .spark-area { opacity: 1; }

.zones { list-style: none; padding: 0; display: grid; gap: .55rem; }
.zones li {
  display: grid; grid-template-columns: 26px 1fr auto; gap: .8rem; align-items: center;
  padding: .6rem .75rem; border-radius: 10px;
  background: var(--bg-2); font-size: .88rem; color: var(--ink);
}
.zones .z-rank {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line);
  font-family: var(--mono); font-size: .7rem; font-weight: 700; color: var(--court);
}
.zones .z-val { font-family: var(--mono); font-size: .78rem; color: var(--ink-mute); }
.zones li:first-child .z-rank { background: var(--ball); border-color: var(--ball); color: var(--ink); }

.dash-note {
  padding: 1rem 1.3rem; border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
  font-size: .78rem; color: var(--ink-mute);
}
.dash-note strong { color: var(--ink); }


/* ---------- 6.7 Timeline de implantación ---------- */
.timeline { position: relative; display: grid; gap: 0; counter-reset: tl; }
.tl-item {
  position: relative;
  padding: 0 0 2rem 3.2rem;
  counter-increment: tl;
}
.tl-item::before {
  content: counter(tl);
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--paper); border: 1.5px solid var(--court); color: var(--court);
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  z-index: 1;
}
.tl-item::after {
  content: ""; position: absolute; left: 16.25px; top: 34px; bottom: 0;
  width: 1.5px; background: var(--line);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child::after { display: none; }
.tl-item h3 { margin-bottom: .35rem; font-size: 1.1rem; }
.tl-item p { font-size: .95rem; max-width: 60ch; }


/* ---------- 6.8 Diagrama de flujo ---------- */
/* Cuando el diagrama va detrás de las tarjetas, dentro de la misma sección */
.grid + .flow { margin-top: clamp(2rem, 4vw, 3rem); }

.flow {
  display: grid; gap: .8rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 2rem);
  box-shadow: var(--shadow);
}
.flow-row { display: grid; gap: .8rem; }
.flow-node {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr; gap: .9rem; align-items: center;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
}
.flow-node .fn-ico {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--court); color: #fff;
}
.flow-node .fn-ico svg { width: 20px; height: 20px; }
.flow-node strong { display: block; color: var(--ink); font-size: .98rem; }
.flow-node span { font-size: .84rem; color: var(--ink-mute); }
/* Los nodos alternan con las flechas, por eso van de 3 en 3 → 1,3,5,7,9 */
.flow-node:nth-child(3) .fn-ico { background: #0F8C69; }
.flow-node:nth-child(5) .fn-ico { background: var(--sky); }
.flow-node:nth-child(7) .fn-ico { background: #2E6FB0; }
.flow-node:nth-child(9) .fn-ico { background: var(--ball-deep); }

.flow-arrow {
  display: grid; place-items: center; color: var(--line);
  height: 22px;
}
.flow-arrow svg { width: 20px; height: 20px; color: var(--court); opacity: .55; }


/* ---------- 6.9 Página legal / texto largo ---------- */
.prose { max-width: var(--maxw-text); }
.prose h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-top: 2.5rem; margin-bottom: .8rem; }
.prose h3 { margin-top: 1.8rem; margin-bottom: .5rem; }
.prose p, .prose li { font-size: .98rem; }
.prose p + p { margin-top: 1rem; }
.prose ul, .prose ol { margin-top: .8rem; display: grid; gap: .45rem; }
.prose .ph {
  background: #FFF8D6; border: 1px dashed #D8C35A; border-radius: 6px;
  padding: .05em .4em; font-family: var(--mono); font-size: .85em; color: #6B5B12;
}
.prose table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .9rem; }
.prose th, .prose td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }

.page-head {
  /* La barra de navegación es fija y tapa la parte de arriba del bloque, así
     que al padding superior se le suma su altura. Abajo va el mismo valor sin
     sumarla: así el texto queda centrado en la franja gris que se ve. */
  padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
}
.page-head h1 { margin-bottom: 1rem; }
/* Medida algo más ancha que la del resto de .lede para que el párrafo de la
   cabecera haga bloque con el titular en vez de quedarse corto debajo. */
.page-head .lede { max-width: 70ch; }


/* ---------- 6.10 Contacto ---------- */
.contact-grid { display: grid; gap: 2.2rem; align-items: start; }
.contact-card {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm);
}
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.contact-list .c-item { display: grid; grid-template-columns: 36px 1fr; gap: .9rem; align-items: start; }
.contact-list .ico {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--court-soft); color: var(--court);
}
.contact-list .ico svg { width: 17px; height: 17px; }
.contact-list dt {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.contact-list dd { margin: 0; color: var(--ink); font-weight: 500; }

.ph {
  background: #FFF8D6; border: 1px dashed #D8C35A; border-radius: 6px;
  padding: .05em .4em; font-family: var(--mono); font-size: .85em; color: #6B5B12;
  white-space: nowrap;
}


/* ---------- 6.9 Dos caminos: tienda o marca ----------
   Las dos tarjetas de la portada que separan los dos públicos. Son enlaces
   enteros, no tarjetas con un botón dentro: todo el bloque es pulsable y en
   móvil se agradece. */
.puertas {
  display: grid; gap: 1.2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.puerta {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              border-color .3s var(--ease-out);
}
.puerta:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--court);
}
.puerta-ico {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; flex: none;
  background: var(--court-soft); color: var(--court);
  margin-bottom: 1.1rem;
}
.puerta-ico svg { width: 24px; height: 24px; }
.puerta-kicker {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--court); margin: 0 0 .6rem;
}
.puerta h3 {
  font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 .7rem;
}
.puerta > p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

.puerta-lista { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .5rem; }
.puerta-lista li {
  position: relative; padding-left: 1.4rem;
  font-size: .9rem; color: var(--ink-soft);
}
.puerta-lista li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--ball); border: 1px solid var(--ball-deep);
}
.puerta-cta {
  margin-top: auto; padding-top: 1.4rem;
  font-weight: 600; font-size: .95rem; color: var(--court);
  display: inline-flex; align-items: center; gap: .45rem;
}
.puerta-cta span { transition: transform .3s var(--ease-out); }
.puerta:hover .puerta-cta span { transform: translateX(4px); }

/* La puerta de marca se distingue con el lima, para que no parezcan la misma
   oferta dos veces. */
.puerta--marca .puerta-ico { background: rgba(216, 242, 75, .3); color: var(--court-deep); }
.puerta--marca .puerta-kicker { color: var(--ball-deep); }
.puerta--marca:hover { border-color: var(--ball-deep); }


/* ---------- 6.11 Página de marcas ---------- */
/* Estas secciones no usan .section-head, así que el titular y el párrafo se
   quedaban pegados. Algo más de aire que el 1rem del resto del sitio porque
   aquí los titulares ocupan dos líneas a tamaño grande. */
#problema h2 + .lede,
#formatos h2 + .lede,
#medicion h2 + .lede { margin-top: clamp(1rem, 2vw, 1.4rem); }
.banda-medicion {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.3rem, 3vw, 1.8rem) clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--court-soft);
  border: 1px solid rgba(11, 122, 90, .16);
}
.banda-medicion p { margin: 0; font-size: .95rem; color: var(--ink-soft); max-width: 78ch; }
.banda-medicion strong { color: var(--ink); font-weight: 600; }


/* ---------- 6.12 Selector de perfil del formulario ---------- */
.perfil { border: 0; padding: 0; margin: 0 0 1.4rem; }
.perfil legend {
  padding: 0; margin-bottom: .7rem;
  font-size: .88rem; font-weight: 600; color: var(--ink);
}
.perfil-ops { display: grid; gap: .6rem; }
.perfil-op {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--paper);
  cursor: pointer;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.perfil-op:hover { border-color: var(--court); }
.perfil-op input { margin-top: .22rem; accent-color: var(--court); flex: none; }
.perfil-op span { display: grid; gap: .15rem; font-size: .84rem; color: var(--ink-mute); }
.perfil-op strong { font-size: .95rem; font-weight: 600; color: var(--ink); }
/* :has está soportado en todos los navegadores actuales; si algún navegador
   viejo lo ignora, la opción marcada se sigue distinguiendo por el radio. */
.perfil-op:has(input:checked) { border-color: var(--court); background: var(--court-soft); }


/* =============================================================
   7. EFECTOS
   ============================================================= */

/* Reveal on scroll — con red de seguridad en JS a los 6 s */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .09s; }
[data-reveal][data-delay="2"] { transition-delay: .18s; }
[data-reveal][data-delay="3"] { transition-delay: .27s; }
[data-reveal][data-delay="4"] { transition-delay: .36s; }
[data-reveal][data-delay="5"] { transition-delay: .45s; }

/* Si el navegador no soporta JS, nada se queda invisible */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Tilt suave en tarjetas destacadas */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* Marquee de beneficios */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line-soft);
  background: var(--paper); padding-block: .9rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: 2.5rem; width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-track span {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
  white-space: nowrap;
}
.marquee-track span::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ball);
}
@keyframes marquee { to { transform: translateX(-50%); } }


/* =============================================================
   8. RESPONSIVE
   ============================================================= */
@media (min-width: 540px) {
  :root { --gutter: 1.5rem; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .mock-specs { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
  .nav .btn { display: inline-flex; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .puertas { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  /* La línea de flujo pasa a horizontal, a la altura de la ilustración */
  .step:not(:last-child)::after {
    left: auto; bottom: auto;
    right: -1.1rem; top: 3.9rem;
    width: 1.1rem; height: 1.5px;
    transform: none;
    background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 9px);
  }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .scene { grid-template-columns: 92px 1fr; padding: 1.4rem; }
  .mock-body { grid-template-columns: 1.1fr 1fr; align-items: start; }
  .mock-specs { grid-template-columns: repeat(2, 1fr); }
  .dash-body { grid-template-columns: 1fr 1fr; }
  .dash-body .dash-block--kpis { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .flow-row { grid-template-columns: repeat(5, 1fr); align-items: stretch; }
  .flow-node { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: .6rem; }
  .flow-arrow { display: none; }
  .flow-node::after {
    content: ""; position: absolute; right: -.62rem; top: 50%;
    width: .5rem; height: 1.5px; background: var(--court); opacity: .4;
  }
  .flow-node:last-child::after { display: none; }
}

@media (min-width: 960px) {
  :root { --nav-h: 76px; }
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-drawer { display: none; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
  .wireless { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
  .prose--wide { max-width: 78ch; }
}

@media (min-width: 1280px) {
  :root { --gutter: 2rem; }
  .scene { grid-template-columns: 110px 1fr; }
}


/* =============================================================
   9. REDUCED-MOTION
   Solo desactivamos lo intrusivo (bucles largos y desplazamientos
   grandes). Los micro-efectos (hover, fades, transiciones) se
   mantienen: Windows activa esta preferencia por defecto en muchos
   equipos y la web se vería muerta.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; transform: none; }
  .hero-mesh { animation: none; }
  .cta-band::before { animation: none; }
  /* La escena del hero se congela en su estado final legible */
  .rack-live,
  .sensor::after,
  .screen::after,
  .screen-glow,
  .screen-line,
  .screen-tag,
  .screen-standby,
  .dot-live { animation: none !important; }
  .screen-standby { opacity: 0; }
  .rack-live { transform: translate(8px, -18px) rotate(-14deg); }
  .screen-glow, .screen-line, .screen-tag { opacity: 1; transform: none; }
  .screen::after { opacity: 0; }
}