/* public/css/marca.css
 *
 * La barra, el menú, los botones, las tarjetas y el pie de las páginas
 * públicas. Lo que se ve igual en todas, escrito una vez.
 *
 * ANTES ESTABA SEIS VECES
 *
 * landing.html, talleres.html y las cuatro de /seo llevaban cada una su
 * propia copia dentro de un <style>: ciento cincuenta y seis mil bytes,
 * y 250 reglas de ~254 idénticas en las seis.
 *
 * Eso es por lo que el mismo fallo estaba seis veces. Los enlaces del pie
 * medían diecisiete píxeles de alto —no se podían tocar con el dedo— y
 * hubo que arreglarlo seis veces; la séptima página que se creara nacería
 * con el fallo otra vez.
 *
 * Lo propio de cada página se queda en su <style>, DETRÁS del enlace a
 * esta hoja, para que siga ganando lo que ganaba: en CSS, a igualdad de
 * especificidad manda la última que se lee.
 *
 * La aplicación no usa esto: tiene app.css, interfaz.css y sistema.css.
 * Son dos superficies distintas y comparten los tokens, no las reglas.
 */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --accent:#2563eb;--accent2:#1d4ed8;--accent-light:#eff6ff;
  --green:#10b981;--green-light:#e6f7f0;--red:#ef4444;--orange:#f59e0b;
  /* LOS GRISES, MEDIDOS
   *
   * Lighthouse contó 33 textos que no llegan al contraste mínimo de la
   * norma (4,5:1), y 25 de ellos salían de aquí: --text3 sobre blanco
   * daba 2,56:1, menos de la mitad de lo que hace falta. Era el gris de
   * todas las letras pequeñas —los rótulos, los pies, las fechas—, o
   * sea justo lo que peor se lee ya de por sí.
   *
   * Los valores nuevos están calculados contra los tres fondos claros
   * que usa la web (blanco, #f8f9ff y #eef1fb), no elegidos a ojo:
   *   --text2  5,5:1 sobre el más oscuro de los tres
   *   --text3  4,6:1 sobre el más oscuro de los tres
   * Siguen siendo dos grises distintos, así que la jerarquía se
   * mantiene: lo secundario sigue pesando más que lo terciario. */
  --text:#0f172a;--text2:#566172;--text3:#5f6e82;
  --bg:#f8f9ff;--bg2:#eef1fb;--white:#ffffff;--border:#e4e8f5;
  --shadow:0 4px 24px rgba(37,99,235,0.10);
  --shadow-lg:0 12px 48px rgba(37,99,235,0.18);
}
html{scroll-behavior:smooth;}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img,svg{max-width:100%;}
/* PRO */
.pro{display:block;}
.pro-flota{animation:flota 4.5s ease-in-out infinite;}
@keyframes flota{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media(prefers-reduced-motion:reduce){.pro-flota{animation:none;}}
.pro-halo{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:6%;}
.pro-halo::before{content:"";position:absolute;left:-6%;right:-6%;top:8%;bottom:6%;border-radius:50%;background:radial-gradient(circle at 45% 40%,#dbe6ff 0%,#eef2ff 55%,rgba(238,242,255,0) 72%);z-index:0;}
.pro-halo .pro{position:relative;z-index:1;}
/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 24px;}
.nav-inner{max-width:1140px;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:flex;align-items:center;gap:10px;min-height:44px;}
.nav-logo-icon{width:34px;height:34px;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-logo-icon img{width:100%;height:100%;object-fit:cover;}
.nav-logo-text{font-size:1.05rem;font-weight:800;letter-spacing:-0.5px;color:var(--text);}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a{font-size:0.85rem;font-weight:600;color:var(--text2);transition:color 0.2s;}
.nav-links a:hover{color:var(--accent);}
.nav-cta{background:var(--accent);color:#fff!important;padding:13px 20px;border-radius:50px;font-size:0.85rem;font-weight:700;white-space:nowrap;transition:background 0.2s,transform 0.15s;}
@media(max-width:430px){.nav-cta{padding:12px 14px;font-size:0.79rem;}.nav-logo-text{font-size:0.92rem;}.nav-logo-icon{width:30px;height:30px;}}
.nav-cta:hover{background:var(--accent2);transform:translateY(-1px);}
@media(max-width:920px){.nav-links a:not(.nav-cta){display:none;}}
/* MENÚ MÓVIL: sin esto solo queda el botón azul y hay que bajar al pie
   de página para llegar a la calculadora o a las ayudas. */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:4.5px;width:40px;height:40px;padding:0 9px;background:none;border:none;cursor:pointer;flex-shrink:0;}
.nav-burger span{display:block;height:2.5px;border-radius:2px;background:var(--text);transition:transform .25s ease,opacity .2s ease;}
.nav-burger.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.abierto span:nth-child(2){opacity:0;}
.nav-burger.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-menu{display:none;}
@media(max-width:920px){
  .nav-burger{display:flex;}
  .nav-menu{position:fixed;top:64px;left:0;right:0;z-index:99;background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 12px 30px rgba(15,23,42,0.10);padding:8px 14px 14px;display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .28s ease,opacity .2s ease,padding .28s ease;}
  .nav-menu.abierto{max-height:80vh;opacity:1;overflow-y:auto;}
  .nav-menu:not(.abierto){padding-top:0;padding-bottom:0;}
  .nav-menu a{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:12px;font-size:0.95rem;font-weight:700;color:var(--text);}
  .nav-menu a:active{background:var(--bg);}
  .nav-menu a span{font-size:1.15rem;width:24px;text-align:center;flex-shrink:0;}
  .nav-menu a small{display:block;font-size:0.74rem;font-weight:500;color:var(--text3);margin-top:1px;}
  .nav-menu .sep{height:1px;background:var(--border);margin:6px 12px;}
  .nav-menu .destacado{background:var(--accent-light);color:var(--accent);}
}
/* HERO */
.hero{padding:118px 24px 70px;background:linear-gradient(180deg,#eef2ff 0%,#f5f7ff 55%,var(--white) 100%);}
.hero-inner{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1.2fr 0.8fr;gap:44px;align-items:center;}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;text-align:center;gap:34px;}.hero-txt{order:1;}.hero-pro{order:2;}}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--white);color:var(--accent);font-size:0.76rem;font-weight:700;padding:6px 14px;border-radius:50px;margin-bottom:20px;border:1px solid rgba(37,99,235,0.18);box-shadow:0 2px 10px rgba(37,99,235,0.07);}
.hero h1{font-size:clamp(2rem,4.6vw,3.25rem);font-weight:900;letter-spacing:-1.5px;line-height:1.08;margin-bottom:18px;}
.hero h1 span{color:var(--accent);}
.hero-sub{font-size:clamp(0.98rem,1.6vw,1.08rem);color:var(--text2);line-height:1.7;margin-bottom:26px;max-width:530px;}
@media(max-width:900px){.hero-sub{margin-left:auto;margin-right:auto;}}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
@media(max-width:900px){.hero-actions{justify-content:center;}}
.btn-primary{background:var(--accent);color:#fff;padding:14px 28px;border-radius:50px;font-size:0.95rem;font-weight:700;border:none;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(37,99,235,0.32);}
.btn-primary:hover{background:var(--accent2);transform:translateY(-2px);box-shadow:0 10px 28px rgba(37,99,235,0.4);}
.btn-outline{background:var(--white);color:var(--text);padding:14px 28px;border-radius:50px;font-size:0.95rem;font-weight:700;border:2px solid var(--border);cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:8px;}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.btn-lg{padding:16px 32px;font-size:1rem;}
.hero-trial{font-size:0.8rem;color:var(--text3);line-height:1.6;}
.gp-badge{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border-radius:14px;padding:10px 18px;opacity:0.85;}
.hero-wl{margin-top:22px;padding-top:20px;border-top:1px solid rgba(37,99,235,0.14);max-width:470px;}
@media(max-width:900px){.hero-wl{margin-left:auto;margin-right:auto;}}
.hero-wl-t{font-size:0.85rem;color:var(--text2);line-height:1.6;margin:12px 0 10px;}
.hero-wl .waitlist-form{justify-content:flex-start;margin:0;max-width:none;}
@media(max-width:900px){.hero-wl .waitlist-form{justify-content:center;}}
.hero-wl .waitlist-form input{border:2px solid var(--border);background:var(--white);}
.hero-wl .waitlist-form input:focus{border-color:var(--accent);}
.hero-wl .waitlist-msg{color:var(--accent);text-align:left;}
@media(max-width:900px){.hero-wl .waitlist-msg{text-align:center;}}
.gp-t{text-align:left;line-height:1.05;}
.gp-t small{font-size:0.58rem;letter-spacing:0.6px;opacity:0.85;display:block;font-weight:600;}
.gp-t strong{font-size:1rem;font-weight:800;}
.hero-pro{display:flex;flex-direction:column;align-items:center;gap:14px;}
.hero-pro .pro-halo{width:min(330px,72vw);}
.pro-bubble{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:16px 20px;font-size:0.9rem;line-height:1.6;color:var(--text2);box-shadow:var(--shadow);position:relative;max-width:340px;text-align:left;}
.pro-bubble b{color:var(--text);}
.pro-bubble .az{color:var(--accent);font-weight:800;}
.pro-bubble::after{content:"";position:absolute;top:-9px;left:50%;margin-left:-8px;width:16px;height:16px;background:var(--white);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg);}
/* MOCKUP */
.hero-mockup{max-width:940px;margin:56px auto 0;background:var(--white);border-radius:20px;box-shadow:var(--shadow-lg);border:1px solid var(--border);overflow:hidden;}
.mockup-bar{background:var(--bg);padding:10px 16px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border);}
.mockup-dot{width:10px;height:10px;border-radius:50%;}
.mockup-url{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:3px 12px;font-size:0.72rem;color:var(--text3);margin-left:8px;flex:1;max-width:280px;}
.mockup-body{display:grid;grid-template-columns:200px 1fr;min-height:340px;}
.mockup-sidebar{background:var(--white);border-right:1px solid var(--border);padding:16px 12px;}
.mockup-nav-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;margin-bottom:3px;font-size:0.75rem;font-weight:600;color:var(--text2);}
.mockup-nav-item.active{background:var(--accent-light);color:var(--accent);}
.mockup-nav-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}
.mockup-content{padding:20px;background:var(--bg);}
@media(max-width:640px){.mockup-body{grid-template-columns:1fr;}.mockup-sidebar{display:none;}}
.mk-chat{display:flex;flex-direction:column;gap:10px;}
.mk-msg{max-width:78%;padding:11px 14px;border-radius:14px;font-size:0.78rem;line-height:1.5;}
.mk-user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px;font-weight:600;}
.mk-row{display:flex;align-items:flex-start;gap:8px;max-width:88%;}
.mk-row svg,.mk-row img{width:30px;flex-shrink:0;margin-top:3px;}
.mk-ai{background:var(--white);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:5px;}
.mk-note{display:block;margin-top:5px;font-size:0.72rem;color:var(--text3);}
.mk-input{margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--white);border:1px solid var(--border);border-radius:50px;padding:9px 9px 9px 16px;font-size:0.74rem;color:var(--text3);}
.mk-send{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.7rem;flex-shrink:0;}
@media(max-width:640px){.mk-msg,.mk-row{max-width:94%;}}
/* STATS */
.stats-strip{background:var(--accent);padding:30px 24px;}
.stats-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center;}
.stat-num{font-size:1.5rem;font-weight:900;color:#fff;letter-spacing:-0.8px;}
/* Sobre el azul de la marca, el blanco al 72 % se queda en 3,44:1. Al
   92 % pasa de 4,5 y sigue leyéndose como texto secundario. */
.stat-label{font-size:0.76rem;color:rgba(255,255,255,0.92);margin-top:3px;font-weight:500;line-height:1.4;}
@media(max-width:640px){.stats-inner{grid-template-columns:repeat(2,1fr);}}
/* SECTION */
section{padding:76px 24px;}
.section-inner{max-width:1140px;margin:0 auto;}
.section-badge{display:inline-block;background:var(--accent-light);color:var(--accent);font-size:0.7rem;font-weight:800;padding:5px 13px;border-radius:50px;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;}
.section-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;letter-spacing:-0.8px;margin-bottom:12px;line-height:1.15;}
.section-sub{font-size:1rem;color:var(--text2);max-width:580px;line-height:1.7;}
.section-header{margin-bottom:42px;}
.section-header.centro{text-align:center;max-width:640px;margin-left:auto;margin-right:auto;}
.section-header.centro .section-sub{margin-left:auto;margin-right:auto;}
.bg-suave{background:var(--bg);}
/* FEATURES */
.grupo{margin-bottom:44px;}
.grupo:last-child{margin-bottom:0;}
.grupo-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.grupo-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;}
.grupo-t{font-size:1.12rem;font-weight:800;letter-spacing:-0.4px;}
.grupo-s{font-size:0.81rem;color:var(--text2);margin-top:2px;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:900px){.features-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px){.features-grid{grid-template-columns:1fr;}}
.feature-card{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:20px;transition:all 0.2s;}
.feature-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-3px);}
.feature-title{font-size:0.95rem;font-weight:800;margin-bottom:7px;display:flex;align-items:center;gap:8px;}
.feature-desc{font-size:0.82rem;color:var(--text2);line-height:1.6;}
.feature-tag{display:inline-block;background:var(--accent);color:#fff;font-size:0.72rem;font-weight:800;padding:3px 9px;border-radius:50px;margin-top:11px;letter-spacing:0.4px;}
/* SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;}
.split.arriba{align-items:start;}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:30px;}}
.lista-check{list-style:none;margin-top:18px;}
.lista-check li{display:flex;align-items:flex-start;gap:11px;font-size:0.89rem;line-height:1.6;padding:9px 0;color:var(--text2);}
.lista-check li b{color:var(--text);font-weight:700;}
.tick{width:22px;height:22px;border-radius:50%;background:var(--accent-light);color:var(--accent);font-size:0.72rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.panel{background:var(--white);border:1.5px solid var(--border);border-radius:20px;padding:20px;box-shadow:var(--shadow);}
.panel-t{font-size:0.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-bottom:12px;}
.fila{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border);}
.fila:last-child{border-bottom:none;}
.fila-ic{width:34px;height:34px;border-radius:11px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:0.95rem;flex-shrink:0;}
.fila-txt{flex:1;min-width:0;}
.fila-n{font-size:0.83rem;font-weight:700;}
.fila-s{font-size:0.72rem;color:var(--text3);}
.fila-v{font-size:0.85rem;font-weight:800;white-space:nowrap;}
.chip{font-size:0.72rem;font-weight:800;padding:3px 9px;border-radius:50px;}
.pro-nota{display:flex;align-items:flex-start;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:13px;padding:12px 14px;margin-top:14px;}
.pro-nota svg,.pro-nota img{width:46px;flex-shrink:0;}
.pro-nota span{font-size:0.79rem;color:var(--text2);line-height:1.5;}
.pro-nota b{color:var(--text);}
/* V3 */
.hero-pie{max-width:720px;margin:18px auto 0;text-align:center;font-size:0.9rem;color:var(--text2);line-height:1.65;}
.stats-inner.pilares{grid-template-columns:repeat(3,1fr);max-width:1000px;}
@media(max-width:640px){.stats-inner.pilares{grid-template-columns:1fr;gap:16px;}}
.tipos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px;}
.tipo{border:1.5px solid var(--border);background:var(--white);border-radius:50px;padding:10px 18px;font-family:inherit;font-size:0.88rem;font-weight:700;color:var(--text2);cursor:pointer;transition:all .15s;}
.tipo:hover{border-color:var(--accent);color:var(--accent);}
.tipo.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.tipo-panel{max-width:760px;margin:0 auto;background:var(--white);border:1.5px solid var(--border);border-radius:20px;padding:28px 30px;box-shadow:var(--shadow);}
.tipo-cont{display:none;}
.tipo-cont.on{display:block;}
.tipo-t{font-size:1.15rem;font-weight:800;letter-spacing:-0.3px;margin-bottom:4px;}
.tipo-cont .lista-check{margin-top:8px;margin-bottom:14px;}
.capturas{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
/* Las capturas, flotando como el panel de arriba: menos borde y más
   sombra. Un marco grueso las convierte en cromos; una sombra blanda
   las pone sobre la página. */
.captura{margin:0;background:var(--white);border:1px solid rgba(226,232,240,.9);border-radius:18px;overflow:hidden;box-shadow:var(--sombra-flotante);}
.captura.grande{grid-column:1 / -1;}
.captura img{display:block;width:100%;height:auto;border-bottom:1px solid var(--border);}
.captura figcaption{padding:14px 18px;font-size:0.86rem;color:var(--text2);line-height:1.5;}
.captura figcaption b{color:var(--text);}
@media(max-width:700px){.capturas{grid-template-columns:1fr;}}
.flujo{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
@media(max-width:960px){.flujo{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.flujo{grid-template-columns:1fr;}}
.paso{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:20px 18px;position:relative;}
.paso-n{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:0.9rem;margin-bottom:12px;}
.paso-t{font-weight:800;font-size:0.98rem;margin-bottom:6px;}
.paso-d{font-size:0.82rem;color:var(--text2);line-height:1.55;}
.antes-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto;}
@media(max-width:640px){.antes-grid{grid-template-columns:1fr;}}
.antes-col{background:var(--white);border:1.5px solid var(--border);border-radius:18px;padding:24px 26px;}
.antes-col.con{border-color:var(--accent);box-shadow:0 8px 32px rgba(37,99,235,0.12);}
.antes-t{font-size:0.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-bottom:12px;}
.antes-col.con .antes-t{color:var(--accent);}
.antes-col ul{list-style:none;}
.antes-col li{font-size:0.88rem;line-height:1.5;padding:8px 0 8px 26px;border-bottom:1px solid #f0f2f8;position:relative;color:var(--text2);}
.antes-col li:last-child{border-bottom:none;}
.antes-col li::before{content:"✕";position:absolute;left:0;top:8px;color:#cbd5e1;font-weight:800;}
.antes-col.con li{color:var(--text);}
.antes-col.con li::before{content:"✓";color:var(--green);}
/* VERTICALES */
.vert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:900px){.vert-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px){.vert-grid{grid-template-columns:1fr;}}
.vert-card{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:8px;}
.vert-ic{width:40px;height:40px;border-radius:12px;background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-size:1.15rem;}
.vert-t{font-size:1rem;font-weight:800;letter-spacing:-0.3px;}
.vert-d{font-size:0.82rem;color:var(--text2);line-height:1.6;flex:1;}
.vert-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.vert-tags span{font-size:0.72rem;font-weight:700;color:var(--text2);background:var(--bg);border:1px solid var(--border);border-radius:50px;padding:3px 9px;}
.price-uno{max-width:760px;margin:0 auto;}
.price-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;text-align:left;}
@media(max-width:640px){.price-cols{grid-template-columns:1fr;}}
/* VERIFACTU */
.verifactu-banner{background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 100%);border-radius:22px;padding:36px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;}
@media(max-width:820px){.verifactu-banner{grid-template-columns:1fr;text-align:center;justify-items:center;}}
.verifactu-banner .pro{width:96px;}
.vb-title{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:8px;}
.vb-desc{font-size:0.86rem;color:rgba(255,255,255,0.68);line-height:1.65;}
.vb-badge{background:rgba(16,185,129,0.18);border:1px solid var(--green);color:#6ee7b7;padding:8px 18px;border-radius:50px;font-size:0.78rem;font-weight:700;white-space:nowrap;}
/* STEPS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.steps{grid-template-columns:1fr;}}
.step{text-align:center;}
.step-num{width:52px;height:52px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:900;color:#fff;margin:0 auto 15px;box-shadow:0 4px 14px rgba(37,99,235,0.32);}
.step-title{font-size:0.97rem;font-weight:800;margin-bottom:7px;}
.step-desc{font-size:0.83rem;color:var(--text2);line-height:1.6;}
/* PRICING */
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:720px;margin:0 auto;}
@media(max-width:580px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{border:2px solid var(--border);border-radius:20px;padding:30px;background:var(--white);position:relative;text-align:left;}
.price-card.featured{border-color:var(--accent);box-shadow:0 8px 32px rgba(37,99,235,0.18);}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:0.7rem;font-weight:800;padding:4px 16px;border-radius:50px;white-space:nowrap;}
.price-plan{font-size:0.75rem;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.price-amount{font-size:2.5rem;font-weight:900;letter-spacing:-1.5px;margin-bottom:4px;}
.price-amount span{font-size:1rem;font-weight:600;color:var(--text2);}
.price-desc{font-size:0.82rem;color:var(--text2);margin-bottom:22px;}
.price-features{list-style:none;margin-bottom:26px;}
.price-features li{display:flex;align-items:flex-start;gap:8px;font-size:0.84rem;padding:6px 0;border-bottom:1px solid #f0f2f8;line-height:1.45;}
.price-features li:last-child{border-bottom:none;}
.price-check{color:var(--green);font-weight:800;flex-shrink:0;}
.price-x{color:var(--text3);flex-shrink:0;}
.toggle-wrap{display:inline-flex;align-items:center;gap:8px;background:var(--bg2);border-radius:50px;padding:5px;margin-bottom:36px;}
.toggle-wrap button.on{background:var(--accent);color:#fff;}
/* FAQ */
.faq-list{max-width:720px;margin:0 auto;}
.faq-item{background:var(--white);border:1.5px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden;}
.faq-q{padding:17px 20px;font-size:0.9rem;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq-q:hover{color:var(--accent);}
.faq-arrow{font-size:0.78rem;color:var(--text3);flex-shrink:0;transition:transform 0.2s;}
.faq-item.open .faq-arrow{transform:rotate(180deg);}
.faq-a{padding:0 20px;max-height:0;overflow:hidden;transition:all 0.3s;}
.faq-item.open .faq-a{max-height:520px;padding:0 20px 18px;}
.faq-a p{font-size:0.85rem;color:var(--text2);line-height:1.7;}
/* CTA FINAL */
.cta-final{text-align:center;background:linear-gradient(135deg,var(--accent) 0%,#4338ca 100%);padding:70px 24px;}
.cta-final .pro{width:150px;margin:0 auto 18px;}
.cta-final h2{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:900;color:#fff;letter-spacing:-1px;margin-bottom:13px;}
.cta-final p{font-size:1rem;color:rgba(255,255,255,0.78);margin-bottom:30px;line-height:1.65;}
.btn-white{background:#fff;color:var(--accent);padding:14px 32px;border-radius:50px;font-size:0.95rem;font-weight:800;border:none;cursor:pointer;transition:all 0.2s;display:inline-block;box-shadow:0 6px 20px rgba(0,0,0,0.15);}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,0.2);}
.waitlist-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:470px;margin:0 auto 10px;}
.waitlist-form input{flex:1;min-width:210px;padding:13px 20px;border-radius:50px;border:2px solid rgba(255,255,255,0.5);background:rgba(255,255,255,0.96);font-family:inherit;font-size:0.92rem;color:var(--text);outline:none;}
.waitlist-msg{font-size:0.86rem;font-weight:700;margin-top:8px;min-height:20px;color:#fff;}
/* FOOTER */
footer{background:var(--text);color:rgba(255,255,255,0.5);padding:46px 24px 30px;}
.footer-inner{max-width:1140px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px;}
@media(max-width:760px){.footer-top{grid-template-columns:1fr 1fr;gap:26px;}}
@media(max-width:480px){.footer-top{grid-template-columns:1fr;}}
.footer-brand p{font-size:0.81rem;line-height:1.65;margin-top:10px;max-width:280px;}
.footer-col-title{font-size:0.72rem;font-weight:800;color:rgba(255,255,255,0.8);text-transform:uppercase;letter-spacing:1.4px;margin-bottom:13px;}
/* Cuarenta y cuatro píxeles de alto. Antes eran diecisiete, con ocho de
   separación: veinticuatro enlaces apilados en los que el pulgar acierta
   por suerte. El alto va en el enlace, no en el margen, para que la zona
   que se toca sea la misma que se ve. */
.footer-col a{display:flex;align-items:center;min-height:44px;font-size:0.82rem;margin-bottom:0;transition:color 0.2s;}
.footer-col a:hover{color:#fff;}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:0.76rem;gap:12px;flex-wrap:wrap;}
.footer-logo{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.footer-logo-icon{width:28px;height:28px;border-radius:7px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.footer-logo-icon img{width:100%;height:100%;object-fit:cover;}
.footer-logo-text{font-size:0.95rem;font-weight:800;color:#fff;}


/* ══ RELIEVE ════════════════════════════════════════════════════════
 *
 * La web no tenía UNA SOLA regla de tres dimensiones: ni perspectiva, ni
 * giros, ni profundidad. Cuatro animaciones en total, y la de Pro era un
 * sube-y-baja.
 *
 * Y un sube-y-baja no da volumen: la imagen se mueve, pero sigue siendo
 * plana —no tiene caras—. Lo que sí lo da es girar unos grados según
 * dónde está quien mira, que es el truco de las fotos en relieve: el
 * cerebro deduce el volumen del cambio de ángulo, no del movimiento.
 *
 * TRES COSAS, Y TODAS SE APAGAN SOLAS
 *
 * UNO· Pro se gira hacia ti. Seis grados como mucho; con más parece un
 * juguete. Y el halo de detrás se queda más quieto que él: dos planos a
 * velocidades distintas es lo que separa el fondo de la figura.
 *
 * DOS· Las capturas son pantallas, no dibujos. Perspectiva, un giro más
 * suave que el de Pro —son cinco a la vez, y cinco cosas girando a la
 * misma fuerza marean— y una sombra de dos capas: una pegada, que apoya
 * la pieza en el papel, y otra difusa, que la levanta.
 *
 * TRES· Llegan girando al desplazar. Entran un poco inclinadas y se
 * enderezan al entrar en pantalla. Se hace con animaciones atadas al
 * desplazamiento, que ya se usan en esta casa, así que donde no estén no
 * pasa nada: se ven derechas desde el principio.
 *
 * El giro lo escribe relieve.js en --giro-x y --giro-y. Si ese fichero no
 * corre —sin ratón, con el movimiento reducido, o si falla— las variables
 * valen cero y todo se queda quieto y recto. Ninguna regla de aquí
 * depende de que el JavaScript llegue.
 */

.hero-pro .pro-halo,
.captura{
  --giro-x:0deg;
  --giro-y:0deg;
  transform:perspective(1100px) rotateX(var(--giro-x)) rotateY(var(--giro-y));
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

/* El halo se queda atrás: menos giro y un pelín hundido. Dos planos a
   distinta velocidad es lo que separa la figura del fondo. */
.hero-pro .pro-halo::before{
  transform:translateZ(-60px) scale(1.06);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

/* Y Pro se adelanta. Va en `translate`, no en `transform`, y eso NO es un
   capricho: Pro ya lleva la animación `flota`, que escribe `transform` a
   cada fotograma y se come cualquier transform escrito aquí —medido: el
   translateZ no llegaba a aplicarse, la pieza se quedaba plana en el
   plano cero—. `translate` es una propiedad aparte que se compone con la
   animación en vez de pelearse con ella. */
.hero-pro .pro-halo .pro{translate:0 0 38px;}

/* Una captura es una pantalla: se apoya y se levanta. */
.captura img{
  box-shadow:0 1px 2px rgba(15,23,42,.14), 0 18px 44px -12px rgba(15,23,42,.28);
  transition:box-shadow .45s cubic-bezier(.2,.8,.2,1);
}
.captura:hover img{
  box-shadow:0 2px 4px rgba(15,23,42,.16), 0 34px 70px -14px rgba(37,99,235,.34);
}

/* Llegan enderezándose. Donde no haya animaciones por desplazamiento, se
   ven rectas desde el principio: es un adorno, no un requisito. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes se-endereza{
      from{opacity:0;transform:perspective(1100px) rotateX(7deg) translateY(26px);}
      to  {opacity:1;transform:perspective(1100px) rotateX(0) translateY(0);}
    }
    .captura{
      animation:se-endereza linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 62%;
    }
    /* Al pasar el ratón manda el giro, no la entrada: si no, la pieza
       pelea consigo misma y da un tirón. */
    .captura:hover{animation:none;}
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-pro .pro-halo,
  .captura,
  .hero-pro .pro-halo::before,
  .hero-pro .pro-halo .pro{transform:none;transition:none;animation:none;}
}


/* ══ EN EL MÓVIL ══
   Dos teléfonos con capturas de verdad y, al lado, lo que hace la app
   cuando la llevas encima. El marco del teléfono es borde y radio, no una
   imagen: pesa cero y se ve bien en cualquier pantalla.

   El botón de Google Play lo manda /js/play.js. Aquí solo están los dos
   aspectos que puede tener —el de verdad y el de "muy pronto"—, para que
   el día que la app esté aprobada no haya que tocar también el estilo. */
.movil-bloque{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;}
.movil-fotos{display:flex;justify-content:center;align-items:flex-end;gap:18px;}
.movil-tel{
  width:min(232px,42vw);border-radius:30px;overflow:hidden;background:#0f172a;
  border:7px solid #0f172a;box-shadow:var(--shadow-lg);flex:0 0 auto;
}
.movil-tel img{display:block;width:100%;height:auto;border-radius:23px;}
/* El segundo baja un poco: dos teléfonos a la misma altura parecen una
   plantilla; desnivelados parecen dos teléfonos. */
.movil-tel-2{width:min(196px,36vw);transform:translateY(26px);}

.movil-lista{list-style:none;display:flex;flex-direction:column;gap:16px;margin-bottom:26px;}
.movil-lista li{position:relative;padding-left:30px;color:var(--text2);line-height:1.65;font-size:0.97rem;}
.movil-lista li b{color:var(--text);font-weight:800;}
.movil-lista li::before{
  content:'';position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--accent-light);border:2px solid var(--accent);
}
.movil-botones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:12px;}

.play-btn{
  display:inline-flex;align-items:center;gap:11px;padding:11px 22px;border-radius:50px;
  background:#0f172a;color:#fff;border:2px solid #0f172a;transition:all 0.2s;
}
.play-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,23,42,0.28);}
.play-txt{display:flex;flex-direction:column;line-height:1.15;text-align:left;}
.play-small{font-size:0.58rem;font-weight:700;letter-spacing:1.3px;opacity:0.75;}
.play-txt strong{font-size:1.02rem;font-weight:800;letter-spacing:-0.2px;}
/* "Muy pronto": apagado y sin manita, porque no lleva a ningún sitio.
   Lo pone /js/play.js mientras la app no esté publicada. */
.play-pronto{background:transparent;color:var(--text2);border-color:var(--border);cursor:default;}
.play-pronto:hover{transform:none;box-shadow:none;}
.play-pronto svg path{fill:var(--text3);}
.play-soon{font-size:0.85rem;color:var(--text2);line-height:1.6;margin-bottom:18px;}

/* El formulario de la lista de espera nació en el cierre, que es azul
   oscuro: de ahí el blanco. Aquí el fondo es claro y hay que devolverle
   el color, o el aviso de "listo" se escribe en blanco sobre blanco. */
.movil-texto .waitlist-form{margin:0;max-width:430px;justify-content:flex-start;}
.movil-texto .waitlist-form input{border:2px solid var(--border);background:var(--white);}
.movil-texto .waitlist-form input:focus{border-color:var(--accent);}
.movil-texto .waitlist-msg{color:var(--accent);text-align:left;}

@media(max-width:900px){
  .movil-bloque{grid-template-columns:1fr;gap:34px;}
  .movil-fotos{order:2;}
  .movil-texto{order:1;}
  .movil-tel-2{transform:translateY(18px);}
  .movil-texto .waitlist-form{justify-content:center;max-width:none;}
  .movil-texto .waitlist-msg{text-align:center;}
  .movil-botones{justify-content:center;}
  .movil-lista li{text-align:left;}
  .play-soon{text-align:center;}
}


/* ══ LA APP DE ANDROID, ARRIBA DEL TODO ══
   Dos botones que no pueden parecer lo mismo, porque no lo son: el del
   APK descarga un fichero de verdad y el de Play todavía no lleva a
   ningún sitio. El primero va relleno; el segundo, apagado, es el mismo
   .play-pronto que ya existe.

   Y los dos nacen con hidden —el del APK hasta que el servidor confirma
   que el fichero está—, así que hace falta que hidden gane: sin esto,
   display:inline-flex lo enseña igualmente y el botón aparece un
   instante antes de saber si hay algo que descargar. */
[hidden]{display:none !important;}

.hero-app{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;}
.hero-wl{margin-bottom:16px;max-width:520px;}
.hero-wl .play-soon{margin-bottom:10px;}

.apk-btn{
  display:inline-flex;align-items:center;gap:11px;padding:11px 22px;border-radius:50px;
  background:#0f172a;color:#fff;border:2px solid #0f172a;transition:all 0.2s;
  box-shadow:0 6px 20px rgba(15,23,42,0.22);
}
.apk-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,23,42,0.3);}
/* El verde es el de Android y solo está en el icono: identifica de qué
   teléfono hablamos sin meter un segundo color en la página. */
.apk-btn svg{color:#3ddc84;flex-shrink:0;}
.apk-txt{display:flex;flex-direction:column;line-height:1.2;text-align:left;}
.apk-txt strong{font-size:0.95rem;font-weight:800;letter-spacing:-0.2px;}
/* Versión y tamaño los escribe /js/play.js con lo que diga el servidor:
   antes de que conteste pone "APK" a secas y nunca una cifra inventada. */
.apk-info{font-size:0.7rem;font-weight:600;opacity:0.72;}
.apk-lg{padding:14px 26px;}
.apk-lg .apk-txt strong{font-size:1rem;}

/* El de Play, arriba, va en pequeño: al lado del que funciona tiene que
   leerse como lo que es, un "todavía no". */
.play-chip{padding:9px 18px;}
.play-chip .play-txt strong{font-size:0.92rem;}

.apk-aviso{font-size:0.82rem;color:var(--text2);line-height:1.6;margin-bottom:12px;}
/* La huella entera no cabe en una línea de móvil y no se puede cortar por
   donde sea: o se lee entera o no sirve para comprobar nada. */
.apk-aviso code{display:block;margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.7rem;color:var(--text3);word-break:break-all;line-height:1.5;}

@media(max-width:900px){
  .hero-app{justify-content:center;}
  .hero-wl{margin-left:auto;margin-right:auto;}
  .hero-wl .play-soon{text-align:center;}
}

/* Arriba los dos botones comparten renglón con el resto del hero, que no
   es ancho: un punto menos de relleno y caben en una línea. */
.hero-app .apk-btn{padding:10px 18px;}
.hero-app .apk-txt strong{font-size:0.9rem;}

/* ══ EL PANEL FLOTANDO Y LA DEMOSTRACIÓN DE PRO ══
 *
 * La portada enseña la aplicación trabajando, no una lista de cosas que
 * hace. El panel flota sobre un fondo casi blanco con una sombra grande
 * y blanda, y dentro ocurre algo: el cursor pulsa, Pro entra desde la
 * derecha y contesta con una cifra.
 *
 * Todo con transform y opacity. Y todo apagado si el sistema pide menos
 * movimiento: entonces se ve el final —Pro abierto con la respuesta—,
 * que es lo que había que enseñar.
 *
 * Los tokens nuevos viven en :root, con los demás. Una sombra escrita a
 * mano en un sitio es una sombra que no se parece a la del sitio de al
 * lado seis meses después. */
:root{
  /* La sombra del panel que flota: grande, blanda y con muy poca tinta.
     --shadow-lg es para tarjetas; esto es para una cosa que levita. */
  --sombra-flotante:0 40px 90px -30px rgba(15,23,42,.35), 0 8px 24px -12px rgba(15,23,42,.12);
  /* La textura del fondo: un punteado finísimo. Sin esto, un fondo casi
     blanco se ve como un folio en blanco, no como una superficie. */
  --textura:radial-gradient(circle at 1px 1px, rgba(37,99,235,.07) 1px, transparent 0);
  --dur-rapida:.18s;
  --dur-media:.28s;
  --curva:cubic-bezier(.2,.8,.3,1);
}

.hero{position:relative;}
/* El punteado va en una capa aparte y detrás: encima del degradado del
   hero y debajo de todo lo que se lee. */
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--textura);background-size:22px 22px;opacity:.6;
}
.hero-inner,.que-haces,.hero-mockup,.hero-pie{position:relative;z-index:1;}

.dm{box-shadow:var(--sombra-flotante);border-color:rgba(226,232,240,.9);}
.dm-demo{
  margin-left:auto;font-size:.64rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--text3);background:var(--bg2);border-radius:999px;padding:3px 10px;white-space:nowrap;
}
.dm-lienzo{position:relative;overflow:hidden;min-height:340px;}

.dm-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.dm-tarjeta{
  background:var(--white);border:1px solid var(--border);border-radius:14px;padding:13px 14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:transform var(--dur-media) var(--curva),box-shadow var(--dur-media) var(--curva);
}
.dm-tarjeta:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.dm-rotulo{font-size:.62rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);}
.dm-cifra{font-size:1.32rem;font-weight:900;letter-spacing:-.6px;color:var(--text);margin-top:3px;font-variant-numeric:tabular-nums;}
.dm-pie{font-size:.68rem;color:var(--text2);margin-top:2px;}
.dm-verde{color:var(--green);font-weight:700;}

.dm-grafico{display:flex;align-items:flex-end;gap:7px;height:76px;margin-top:14px;}
.dm-grafico span{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--accent) 0%,#93b4fb 100%);opacity:.85;}

.dm-boton{
  margin-top:14px;background:var(--accent);color:#fff;border:none;border-radius:999px;
  padding:10px 20px;font-family:inherit;font-size:.78rem;font-weight:800;cursor:pointer;
  box-shadow:0 6px 18px rgba(37,99,235,.28);transition:transform var(--dur-rapida) var(--curva);
}
.dm-pulsado{transform:scale(.94);}

/* EL PANEL DE PRO
   Fuera de la derecha, y entra deslizándose cuando se le pulsa. Igual
   que en la aplicación: la misma idea y el mismo movimiento. */
.dm-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(290px,72%);
  background:var(--white);border-left:1px solid var(--border);
  box-shadow:-18px 0 40px -24px rgba(15,23,42,.45);
  padding:14px;display:flex;flex-direction:column;gap:10px;
  transform:translateX(102%);transition:transform .42s var(--curva);
}
.dm-panel-si{transform:none;}
.dm-panel-cab{display:flex;align-items:center;gap:9px;}
.dm-panel-cab img{width:34px;height:34px;object-fit:contain;flex-shrink:0;}
.dm-panel-cab b{display:block;font-size:.84rem;color:var(--text);}
.dm-panel-cab small{display:block;font-size:.66rem;color:var(--text3);}
.dm-pregunta{
  background:var(--accent);color:#fff;border-radius:12px 12px 4px 12px;
  padding:9px 12px;font-size:.76rem;font-weight:600;line-height:1.45;min-height:38px;align-self:flex-end;max-width:94%;
}
/* El palito que parpadea mientras se escribe. */
.dm-cursor-txt{display:inline-block;width:2px;height:.9em;background:currentColor;margin-left:2px;vertical-align:-1px;animation:dm-parpadeo 1s steps(2) infinite;}
@keyframes dm-parpadeo{50%{opacity:0;}}
.dm-respuesta{
  background:var(--bg2);border-radius:12px 12px 12px 4px;padding:10px 12px;
  font-size:.74rem;line-height:1.55;color:var(--text);
  opacity:0;transform:translateY(8px);transition:opacity var(--dur-media) var(--curva),transform var(--dur-media) var(--curva);
}
.dm-si{opacity:1;transform:none;}

/* El cursor de la demostración. */
.dm-cursor{
  position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;
  background:rgba(37,99,235,.22);border:2px solid var(--accent);
  margin:-9px 0 0 -9px;opacity:0;pointer-events:none;
  transition:transform .75s var(--curva),opacity var(--dur-media) linear;
}

@media(max-width:760px){
  /* En 375 px, la barra del navegador no tiene sitio para la dirección Y
     el aviso de demostración: salía cortado por el borde. Manda el
     aviso —es lo que hay que poder leer— y la dirección se va. */
  .mockup-url{display:none;}
  .dm-demo{margin-left:0;font-size:.6rem;}
  .dm-fila{grid-template-columns:1fr;}
  .dm-grafico{height:56px;}
  .dm-panel{width:86%;}
}

@media (prefers-reduced-motion:reduce){
  .dm-cursor,.dm-panel,.dm-respuesta,.dm-tarjeta,.dm-boton{transition:none;}
  .dm-cursor-txt{animation:none;}
}

/* ══ EL MISMO LENGUAJE EN TODA LA PÁGINA ══
 *
 * Lo que se toca se levanta un poco. Es el mismo gesto en las tarjetas
 * de oficio, en las funciones, en los planes y en las de confianza: una
 * página donde cada bloque reacciona distinto se lee como seis páginas
 * pegadas.
 *
 * 200–300 ms y la misma curva que la demostración, del token. Y nada de
 * esto depende del color: lo que cambia es la altura y la sombra, que se
 * ven igual sin distinguir el azul.
 *
 * LO QUE NO SE HACE: LOS NÚMEROS NO CUENTAN SOLOS
 *
 * Estaba en la idea original —cifras que suben al entrar en pantalla—,
 * y no se ha hecho a propósito. Las únicas cifras de esta página son los
 * precios, y un precio que se mueve es un precio que no se puede leer de
 * un vistazo ni copiar de un vistazo. Donde no hay nada que medir, una
 * animación solo entretiene. */
.feature-card,.tranq,.qh,.price-card,.tipo-cont,.movil-tel{
  transition:transform var(--dur-media) var(--curva),box-shadow var(--dur-media) var(--curva),border-color var(--dur-media) var(--curva);
}
.feature-card:hover,.tranq:hover,.qh:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.movil-tel:hover{transform:translateY(-6px);}
.movil-tel-2:hover{transform:translateY(20px);}

/* El dedo no tiene "hover": en un móvil lo que hay es el toque, y lo que
   se nota es que el bloque se hunde un poco al pulsarlo. */
@media(hover:none){
  .feature-card:active,.tranq:active,.qh:active,.price-card:active{transform:scale(.99);}
  .feature-card:hover,.tranq:hover,.qh:hover,.price-card:hover,.movil-tel:hover{transform:none;box-shadow:none;}
}

@media (prefers-reduced-motion:reduce){
  .feature-card,.tranq,.qh,.price-card,.tipo-cont,.movil-tel{transition:none;}
  .feature-card:hover,.tranq:hover,.qh:hover,.price-card:hover,.movil-tel:hover{transform:none;}
}

/* ══ TRES MOMENTOS ══
 *
 * Una idea por bloque y, al lado, el trozo de aplicación que la hace.
 * Se alternan los lados para que la página tenga ritmo: tres bloques
 * iguales seguidos se leen como una tabla.
 *
 * Los paneles NO son capturas: son los mismos cuadros y los mismos
 * tokens que la demostración de arriba, así que cambian con el producto
 * en vez de quedarse viejos. */
#momentos{background:var(--white);}
.mom{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  max-width:980px;margin:0 auto 64px;
}
.mom:last-child{margin-bottom:0;}
/* El segundo al revés: el panel a la izquierda y el texto a la derecha. */
.mom-vuelta .mom-txt{order:2;}
.mom-n{
  font-size:.72rem;font-weight:900;letter-spacing:1.4px;color:var(--accent);
  background:var(--accent-light);border-radius:999px;padding:4px 12px;display:inline-block;margin-bottom:12px;
}
.mom-t{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:900;letter-spacing:-.6px;line-height:1.2;margin-bottom:10px;}
.mom-d{font-size:.98rem;color:var(--text2);line-height:1.7;}
.mom-nota{margin-top:12px;font-size:.8rem;color:var(--text3);line-height:1.6;border-left:2px solid var(--border);padding-left:10px;}

.mom-panel{
  position:relative;background:var(--white);border:1px solid var(--border);border-radius:18px;
  padding:34px 18px 18px;box-shadow:var(--sombra-flotante);
  transition:transform var(--dur-media) var(--curva);
}
.mom-panel:hover{transform:translateY(-4px);}
.mom-panel .dm-demo{position:absolute;top:10px;right:12px;margin:0;}

.mom-linea{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 2px;border-bottom:1px solid var(--border);font-size:.88rem;}
.mom-et{font-size:.74rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.mom-total{display:flex;justify-content:space-between;align-items:baseline;padding:13px 2px 4px;font-size:1.05rem;font-weight:900;color:var(--text);}
.mom-total b{color:var(--accent);font-size:1.3rem;font-variant-numeric:tabular-nums;}
.mom-accion{
  margin-top:12px;text-align:center;background:var(--accent);color:#fff;border-radius:999px;
  padding:11px 14px;font-size:.82rem;font-weight:800;
}

.mom-deuda{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--border);}
.mom-deuda b{display:block;font-size:.88rem;color:var(--text);}
.mom-deuda small{display:block;font-size:.72rem;color:var(--text3);}
.mom-punto{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.mom-rojo{background:var(--red);}
.mom-ambar{background:var(--orange);}
.mom-eur{margin-left:auto;font-weight:800;font-size:.92rem;font-variant-numeric:tabular-nums;white-space:nowrap;}

.mom-rotulo{font-size:.72rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);}
.mom-gordo{font-size:2.1rem;font-weight:900;letter-spacing:-1.2px;color:var(--text);margin:2px 0 14px;font-variant-numeric:tabular-nums;}
.mom-dos{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mom-dos div{background:var(--bg);border-radius:12px;padding:10px 12px;}
.mom-dos b{display:block;font-size:1rem;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums;}
.mom-plazo{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text2);font-weight:700;}

@media(max-width:860px){
  .mom{grid-template-columns:1fr;gap:22px;margin-bottom:46px;}
  /* En una columna manda el orden de lectura: primero lo que se cuenta,
     luego lo que se enseña. El "al revés" del escritorio aquí sobra. */
  .mom-vuelta .mom-txt{order:0;}
  .mom-panel{padding-top:38px;}
}

@media (prefers-reduced-motion:reduce){
  .mom-panel{transition:none;}
  .mom-panel:hover{transform:none;}
}

/* ══ EL RESTO DE LA PÁGINA, EN EL MISMO IDIOMA ══
 *
 * Las secciones de abajo estaban bien escritas y mal vestidas: marcos de
 * 1,5 px, sombras tímidas y cada bloque con su propia idea de lo que es
 * una tarjeta. Aquí se igualan al panel del hero —menos borde, la sombra
 * buena— sin tocar una sola palabra de lo que dicen.
 *
 * Nada de esto depende del color: lo que cambia es la altura y la
 * sombra, que se ven igual sin distinguir el azul. */

/* El panel de impuestos: el mismo que flota arriba. Y con su aviso,
   porque enseña 892 € y 1.284,50 € de un negocio que no existe. */
.panel-flota{
  position:relative;border:1px solid rgba(226,232,240,.9);box-shadow:var(--sombra-flotante);
  padding-top:34px;
}
.panel-flota .dm-demo{position:absolute;top:10px;right:12px;margin:0;}

/* LOS CINCO PASOS DEL TALLER
   Dejan de ser cinco cajas sueltas: una línea los cose, y el número sale
   del borde como la pestaña de una carpeta. Es un recorrido, y así se
   lee como un recorrido. */
.flujo{position:relative;}
.flujo::before{
  content:'';position:absolute;left:8%;right:8%;top:38px;height:2px;
  background:linear-gradient(90deg,transparent,var(--border) 12%,var(--border) 88%,transparent);
  z-index:0;
}
.paso{
  position:relative;z-index:1;border:1px solid rgba(226,232,240,.9);
  box-shadow:var(--sombra-flotante);padding-top:30px;
  transition:transform var(--dur-media) var(--curva),box-shadow var(--dur-media) var(--curva);
}
.paso:hover{transform:translateY(-4px);}
.paso-n{
  position:absolute;top:-17px;left:18px;margin:0;
  box-shadow:0 6px 16px rgba(37,99,235,.35);border:3px solid var(--white);
  width:38px;height:38px;
}

/* ANTES Y DESPUÉS
   La columna de "hoy" se queda plana y apagada; la de la aplicación
   flota. La diferencia entre las dos ES el argumento de la sección, así
   que se ve antes de leer nada. */
.antes-col{border:1px solid rgba(226,232,240,.9);box-shadow:none;background:var(--bg);}
.antes-col.con{background:var(--white);box-shadow:var(--sombra-flotante);border-color:rgba(37,99,235,.25);}

/* Las ocho de confianza y las dos herramientas gratis: mismo cuerpo. */
.tranq{border:1px solid rgba(226,232,240,.9);box-shadow:0 2px 10px -4px rgba(15,23,42,.12);}
.tranq:hover{box-shadow:var(--sombra-flotante);}

@media(max-width:900px){
  /* Sin la línea: en una columna no hay recorrido que coser, y la línea
     cruzaría las tarjetas por la mitad. */
  .flujo::before{display:none;}
}

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