/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 21 2026 | 09:30:38 */
/* =========================================================================
   WEBBLE · Estilos de las paginas de diseno web
   Un unico archivo para /diseno-web-pymes/, /diseno-web-dentistas/,
   /diseno-web-inmobiliarias/, /diseno-web-restaurantes/,
   /diseno-web-abogados/ y /diseno-tienda-online/.

   Antes cada pagina llevaba estos ~40 KB metidos dentro de su contenido.
   Al vivir aqui: el navegador se lo descarga una vez y lo reutiliza, las
   paginas adelgazan, y ningun optimizador vuelve a meter las tijeras
   dentro del contenido de la pagina.

   NO tocar a mano. Se genera a partir de los HTML maestros.
   Generado el 05/08/2026.
   ========================================================================= */

/* ══════════ TRONCO COMUN · sistema de diseno ══════════ */

/* ---- RESET + TOKENS ---- */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Google Font",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#fff;color:#0A0E16;-webkit-font-smoothing:antialiased}
:root{
  --navy:#0A0E16;
  --blue:#1a73e8;
  --blue-light:#e8f0fd;
  --green:#16a34a;
  --green-light:#dcfce7;
  --red:#dc2626;
  --red-light:#fee2e2;
  --gray:#F4F6F9;
  --gray-mid:#f9fafb;
  --border:#e5e7eb;
  --muted:#6b7280;
  --hint:#9ca3af;
  --amber:#d97706;
  --amber-light:#fef3c7;
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--navy);line-height:1.2;font-weight:500}

/* ---- UTILS ---- */

.wb{max-width:1200px;margin:0 auto}
.tag{display:inline-block;font-size:12px;font-weight:500;color:var(--blue);text-transform:uppercase;letter-spacing:.1em;background:var(--blue-light);padding:6px 16px;border-radius:20px;margin-bottom:20px}
.tag--green{color:var(--green);background:var(--green-light)}
.btn-primary{display:inline-block;background:var(--blue);color:#fff;border-radius:9px;padding:14px 28px;font-size:15px;font-weight:500;border:none;cursor:pointer;transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out);font-family:inherit}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(26,115,232,.28)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--navy);border:1px solid var(--border);border-radius:9px;padding:14px 22px;font-size:15px;font-weight:500;cursor:pointer;transition:transform .18s var(--ease-out);font-family:inherit}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-ghost:active{transform:scale(.97)}
.btn-light{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#eaf1fb;border:1px solid rgba(255,255,255,.30);border-radius:9px;padding:13px 22px;font-size:15px;font-weight:500;transition:transform .18s var(--ease-out),border-color .18s var(--ease-out),background .18s var(--ease-out);font-family:inherit}
.btn-light:hover{transform:translateY(-2px);border-color:#fff;background:rgba(255,255,255,.06)}
.btn-light:active{transform:scale(.97)}
.ico{width:22px;height:22px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- SECCIÓN BASE ---- */

.sec{padding:100px 80px}
.sec--gray{background:var(--gray)}
.sec--white{background:#fff}
.sec--dark{position:relative;background:radial-gradient(120% 140% at 85% -10%,#1b2b4d 0%,#0A0E16 66%);color:#fff;overflow:hidden}
.sec--dark:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.sec--dark .split,.sec--dark .sec-header{position:relative}
.sec--dark h2,.sec--dark .split h2{color:#fff}
.sec--dark .split p.lead{color:#c4d2e6}
.sec--dark .tag{background:rgba(127,179,242,.14);color:#7fb3f2}
.sec--dark .check{color:#eaf1fb}
.sec--dark .canvas{background-color:rgba(255,255,255,.02);background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);border-color:rgba(255,255,255,.10)}
.sec-header{text-align:center;margin-bottom:64px}
.sec-title{font-size:38px;font-weight:500;color:var(--navy);margin:0 0 16px;line-height:1.2}
.sec-sub{font-size:17px;color:var(--muted);max-width:660px;margin:0 auto;line-height:1.7}
.sec--dark .sec-title{color:#fff}
.sec--dark .sec-sub{color:#c4d2e6}

/* ---- HERO ---- */

.hero{position:relative;padding:104px 80px 100px;background:radial-gradient(125% 135% at 82% -20%,#142138 0%,#070911 60%);color:#fff;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:24px 24px;opacity:.55;pointer-events:none}
.hero:after{content:"";position:absolute;right:-220px;bottom:-260px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(26,115,232,.10),transparent 68%);pointer-events:none}
.hero-in{position:relative;max-width:880px;margin:0 auto}
.hero-eye{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7fb3f2;border:1px solid rgba(127,179,242,.32);border-radius:20px;padding:7px 15px;margin-bottom:22px}
.hero-eye i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.hero h1{font-size:54px;font-weight:500;color:#fff;line-height:1.12;letter-spacing:-.01em;margin:0 0 22px}
.hero h1 em{font-style:normal;color:#7fb3f2}
.hero-sub{font-size:19px;color:#c4d2e6;line-height:1.75;max-width:640px}
.hero-sub .hl{color:#fff;font-weight:500;border-bottom:2px solid #7fb3f2;padding-bottom:1px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;font-size:13px;color:#9fb1cc}
.hero-trust b{color:#fff;font-weight:500}
.crumb{position:relative;max-width:880px;margin:0 auto 20px;font-size:12.5px;color:#8ea3c2;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.crumb a{color:#8ea3c2;transition:color .18s var(--ease-out)}
.crumb a:hover{color:#7fb3f2}
.crumb span[aria-current]{color:#c4d2e6}
.crumb i{opacity:.5}

/* ---- CREDENCIALES ---- */

.creds{padding:26px 80px;display:flex;align-items:center;justify-content:space-between;background:var(--gray-mid);border-top:.5px solid var(--border);border-bottom:.5px solid var(--border)}
.cred-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.cred-sep{width:.5px;height:36px;background:var(--border)}

/* ---- DOS PUNTOS DE PARTIDA ---- */

.sit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:1000px;margin:0 auto;align-items:stretch}
.sit{background:#fff;border:.5px solid var(--border);border-radius:18px;padding:32px 32px 34px;display:flex;flex-direction:column;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s var(--ease-out)}
.sit:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(16,24,40,.08);border-color:#c9d6e6}
.sit-head{display:flex;align-items:center;gap:13px;margin-bottom:8px}
.sit-ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--amber-light);color:var(--amber)}
.sit:nth-child(2) .sit-ic{background:var(--red-light);color:var(--red)}
.sit-head h3{font-size:20px;font-weight:500;margin:0}
.sit-quote{font-size:14px;color:var(--hint);font-style:italic;margin:0 0 20px 55px}
.sit-list{list-style:none;display:flex;flex-direction:column;gap:13px;flex:1}
.sit-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.6;color:var(--navy)}
.sit-list .m{width:21px;height:21px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;background:#eceff3;color:var(--hint)}
.sit-list .m svg{width:11px;height:11px}
.sit-sol{margin-top:24px;padding-top:20px;border-top:.5px solid var(--border);font-size:14.5px;line-height:1.6;color:var(--navy);display:flex;gap:11px;align-items:flex-start}
.sit-sol .m{width:21px;height:21px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;background:var(--green-light);color:var(--green)}
.sit-sol .m svg{width:11px;height:11px}
.sit-sol b{font-weight:500}
.sit-foot{max-width:1000px;margin:30px auto 0;text-align:center;font-size:15px;color:var(--muted);line-height:1.7}
.sit-foot b{color:var(--navy);font-weight:500}
.sit-src{display:block;font-size:12.5px;color:var(--hint);margin-top:8px}

/* ---- BLOQUES 2 COLUMNAS ---- */

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:1120px;margin:0 auto}
.split h2{font-size:34px;font-weight:500;line-height:1.2;margin:0 0 16px}
.split p.lead{font-size:17px;color:var(--muted);line-height:1.75;margin:0 0 8px}
.checks{margin-top:22px;display:grid;gap:13px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--navy);line-height:1.5}
.cc{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.cc .ico{width:13px;height:13px}
.check .cc{background:var(--green-light);color:var(--green)}
.sec--dark .check .cc{background:rgba(22,163,74,.22);color:#5fd58c}
.tech-tags{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.tech-tags span{font-size:13px;font-weight:500;color:var(--navy);background:#fff;border:.5px solid var(--border);border-radius:9px;padding:9px 14px;display:flex;align-items:center;gap:8px}
.tech-tags span:before{content:"";width:7px;height:7px;border-radius:2px;background:var(--blue)}

/* ---- MOCKUP VENTANA macOS sobre lienzo de puntos ---- */

.canvas{position:relative;padding:28px;border-radius:18px;background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:15px 15px;background-color:var(--gray-mid);border:.5px solid var(--border)}
.sec--gray .canvas{background-color:#fff}
.win{background:#fff;border:.5px solid var(--border);border-radius:12px;box-shadow:0 14px 40px rgba(16,24,40,.10);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:.5px solid var(--border);background:#fcfcfd}
.dot{width:8px;height:8px;border-radius:50%}
.win-label{margin-left:8px;font-size:11px;color:var(--hint);font-weight:500}
.win-body{padding:16px}

/* mockup · SERP local con pin (el eje de la página) */
.serp{display:grid;gap:12px}
.serp .sbar{display:flex;align-items:center;gap:9px;border:.5px solid var(--border);border-radius:22px;padding:9px 15px;background:#fff}
.serp .sbar svg{width:14px;height:14px;color:var(--hint);flex-shrink:0}
.serp .sbar .q{font-size:12.5px;color:var(--navy)}
.serp .map{height:82px;border-radius:9px;background:linear-gradient(135deg,#e3ecdc,#eef4e9);position:relative;overflow:hidden;border:.5px solid var(--border)}
.serp .map:before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,transparent 28%,rgba(255,255,255,.85) 28%,rgba(255,255,255,.85) 32%,transparent 32%),
  linear-gradient(0deg,transparent 54%,rgba(255,255,255,.85) 54%,rgba(255,255,255,.85) 58%,transparent 58%),
  linear-gradient(90deg,transparent 68%,rgba(255,255,255,.6) 68%,rgba(255,255,255,.6) 70%,transparent 70%)}
.serp .pin{position:absolute;left:31%;top:30%;width:20px;height:20px;border-radius:50% 50% 50% 0;background:var(--red);transform:rotate(-45deg);box-shadow:0 4px 10px rgba(220,38,38,.35);animation:pinDrop 3.6s var(--ease-out) infinite}
.serp .pin:after{content:"";position:absolute;left:6px;top:6px;width:8px;height:8px;border-radius:50%;background:#fff}
.serp .pin.b{left:62%;top:56%;background:#9aa6b6;box-shadow:none;animation:none;transform:rotate(-45deg) scale(.8)}
@keyframes pinDrop{0%,8%{transform:rotate(-45deg) translateY(-16px);opacity:0}18%,84%{transform:rotate(-45deg) translateY(0);opacity:1}100%{transform:rotate(-45deg) translateY(-16px);opacity:0}}
.serp .res{border:.5px solid var(--border);border-radius:9px;padding:11px 13px;background:#fff;position:relative}
.serp .res.top{border-color:#bfe6cb;background:linear-gradient(180deg,#f4fbf6,#fff);box-shadow:0 8px 20px rgba(22,163,74,.10)}
.serp .res .rk{position:absolute;right:11px;top:11px;font-size:10px;font-weight:600;color:#fff;background:var(--green);border-radius:12px;padding:2px 8px}
.serp .res .u{font-size:10.5px;color:var(--green);margin-bottom:5px}
.serp .res .t{height:8px;width:62%;border-radius:3px;background:var(--blue);margin-bottom:7px}
.serp .res .d{height:5px;border-radius:2px;background:#e6ebf2;margin-bottom:4px}
.serp .res .d.s{width:72%}
.serp .res .stars{margin-top:7px;font-size:10px;color:var(--amber);letter-spacing:1px}
.serp .res .call{margin-top:9px;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:500;color:#fff;background:var(--blue);border-radius:14px;padding:4px 11px;animation:callPulse 3.6s var(--ease-out) infinite}
.serp .res .call svg{width:10px;height:10px}
@keyframes callPulse{0%,58%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(26,115,232,.4)}66%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(26,115,232,0)}}
.serp .res.dim{opacity:.5}

/* mockup · web de negocio local */
.pyw{display:grid;gap:11px}
.pyw .nav{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:.5px solid var(--border)}
.pyw .nav .dot-b{width:11px;height:11px;border-radius:50%;background:var(--blue);flex-shrink:0}
.pyw .nav .bd{width:38px;height:7px;border-radius:3px;background:var(--navy)}
.pyw .nav .lks{display:flex;gap:7px;margin-left:auto}
.pyw .nav .lks i{width:20px;height:6px;border-radius:2px;background:#e6ebf2}
.pyw .nav .btn{width:38px;height:16px;border-radius:5px;background:var(--green)}
.pyw .hd{display:grid;grid-template-columns:1fr .8fr;gap:14px;align-items:center}
.pyw .hd .h{height:10px;width:88%;border-radius:3px;background:var(--navy)}
.pyw .hd .h.s{width:64%;margin-top:7px;height:7px;background:#dfe5ee}
.pyw .hd .cta{height:18px;width:64px;border-radius:5px;background:var(--blue);margin-top:12px}
.pyw .hd .img{height:74px;border-radius:9px;background:linear-gradient(135deg,#bcd7f7,#e8f0fd);position:relative;overflow:hidden}
.pyw .hd .img:after{content:"";position:absolute;left:14px;bottom:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.6)}
.pyw .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pyw .feats .c{border:.5px solid var(--border);border-radius:9px;padding:10px}
.pyw .feats .c .ic{width:17px;height:17px;border-radius:5px;background:var(--blue-light);margin-bottom:8px}
.pyw .feats .c:nth-child(2) .ic{background:var(--green-light)}
.pyw .feats .c:nth-child(3) .ic{background:var(--amber-light)}
.pyw .feats .c .l{height:5px;border-radius:2px;background:#e6ebf2;margin-bottom:4px}
.pyw .feats .c .l.s{width:60%}
.pyw .form{border:.5px solid var(--border);border-radius:9px;padding:11px;background:var(--gray-mid);display:grid;gap:7px}
.pyw .form .fl{height:14px;border-radius:4px;background:#fff;border:.5px solid var(--border)}
.pyw .form .fb{height:16px;width:80px;border-radius:5px;background:var(--green);margin-top:2px}

/* mockup · editor WordPress */
.wped .wtop{background:var(--navy);color:#fff;display:flex;align-items:center;gap:9px;padding:10px 14px;font-size:12px;font-weight:500}
.wped .wtop .wp{width:17px;height:17px;border-radius:50%;background:#21759b;display:flex;align-items:center;justify-content:center;font-size:9px}
.wped .wtop .save{margin-left:auto;background:var(--green);padding:3px 10px;border-radius:6px;font-size:10.5px;animation:wSave 4s var(--ease-out) infinite}
@keyframes wSave{0%,60%{transform:scale(1)}68%{transform:scale(1.07)}76%,100%{transform:scale(1)}}
.wped .wbody{display:grid;grid-template-columns:56px 1fr;min-height:150px}
.wped .wside{background:var(--gray);border-right:.5px solid var(--border);padding:11px 8px;display:grid;gap:9px;align-content:start}
.wped .wside i{height:7px;border-radius:3px;background:#dfe5ee}
.wped .wside i:nth-child(2){background:var(--blue);width:70%}
.wped .wcanvas{padding:14px;display:grid;gap:9px}
.wped .wblock{border:1px dashed transparent;border-radius:7px;padding:8px}
.wped .wblock.on{animation:wSel 4s var(--ease-out) infinite}
@keyframes wSel{0%,20%{border-color:transparent;background:transparent}30%,90%{border-color:var(--blue);background:rgba(26,115,232,.05)}100%{border-color:transparent;background:transparent}}
.wped .wblock .h{height:8px;width:56%;border-radius:3px;background:var(--navy);margin-bottom:6px}
.wped .wblock .l{height:5px;border-radius:2px;background:#e6ebf2;margin-bottom:4px}
.wped .wblock .l.s{width:68%}
.wped .wcaret{display:inline-block;width:2px;height:10px;background:var(--blue);vertical-align:-1px;animation:wblink 1s steps(1) infinite}
@keyframes wblink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ---- RESULTADOS ---- */

.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto}
.case{background:#fff;border:.5px solid var(--border);border-radius:16px;padding:32px 28px;text-align:center;transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s var(--ease-out)}
.case:hover{border-color:#93c4f8;transform:translateY(-3px);box-shadow:0 12px 32px rgba(26,115,232,.08)}
.case .n{font-size:44px;font-weight:500;color:var(--blue);line-height:1}
.case .l{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.5}
.case .c{font-size:11px;font-weight:500;color:var(--blue);background:var(--blue-light);padding:3px 12px;border-radius:20px;margin-top:16px;display:inline-block;text-transform:uppercase;letter-spacing:.06em}
.case-note{max-width:1000px;margin:26px auto 0;text-align:center;font-size:13px;color:var(--hint)}

/* ---- PROCESO ---- */

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1120px;margin:0 auto}
.step{background:#fff;border:.5px solid var(--border);border-radius:16px;padding:28px 26px;position:relative;transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s var(--ease-out)}
.step:hover{border-color:#93c4f8;transform:translateY(-3px);box-shadow:0 14px 32px rgba(16,24,40,.07)}
.step-ic{width:44px;height:44px;border-radius:12px;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step:last-child .step-ic{background:var(--green-light);color:var(--green)}
.step-n{position:absolute;top:26px;right:26px;font-size:11px;font-weight:500;color:var(--blue);background:var(--blue-light);padding:4px 11px;border-radius:20px}
.step:last-child .step-n{color:var(--green);background:var(--green-light)}
.step h3{font-size:17px;font-weight:500;margin:0 0 8px}
.step p{font-size:13.5px;color:var(--muted);line-height:1.7}
.step .wk{font-size:12px;color:var(--hint);margin-top:12px;display:flex;align-items:center;gap:6px}
.step .wk svg{width:12px;height:12px}
.steps-note{max-width:1120px;margin:30px auto 0;text-align:center;font-size:14px;color:var(--muted)}
.steps-note b{color:var(--navy);font-weight:500}

/* ---- PRECIOS ---- */

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;max-width:1080px;margin:0 auto}
.plan{background:#fff;border:.5px solid var(--border);border-radius:18px;padding:32px 28px;position:relative;display:flex;flex-direction:column;transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}
.plan:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,24,40,.07)}
.plan--hot{border:1.5px solid var(--green);box-shadow:0 16px 40px rgba(22,163,74,.12)}
.plan--hot:before{content:"El más elegido";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:11px;font-weight:500;letter-spacing:.04em;padding:5px 14px;border-radius:20px;white-space:nowrap}
.plan h4{font-size:18px;font-weight:500}
.plan .who{font-size:12.5px;color:var(--hint);margin-top:4px}
.plan .pr{font-size:30px;font-weight:500;color:var(--navy);margin:12px 0 4px}
.plan ul{list-style:none;margin:16px 0 24px;flex:1}
.plan li{font-size:14px;color:var(--navy);margin:11px 0;padding-left:26px;position:relative;line-height:1.4}
.plan li:before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--green-light)}
.plan li:after{content:"";position:absolute;left:6px;top:5px;width:4px;height:7px;border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}
.plan .btn-primary,.plan .btn-ghost{text-align:center;justify-content:center}
.plans-note{max-width:1080px;margin:30px auto 0;text-align:center;font-size:14px;color:var(--muted)}
.plans-note b{color:var(--navy);font-weight:500}

/* ---- SECTORES ---- */

.sct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1120px;margin:0 auto}
.sct{background:#fff;border:.5px solid var(--border);border-radius:14px;padding:26px 28px;transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s var(--ease-out);display:block;position:relative}
.sct:hover{border-color:#93c4f8;transform:translateY(-3px);box-shadow:0 8px 24px rgba(26,115,232,.08)}
.sct-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.sct-ic{width:44px;height:44px;border-radius:11px;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center}
.sct-arrow{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);color:var(--navy);display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease-out),background .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out)}
.sct:hover .sct-arrow{background:var(--blue);border-color:var(--blue);color:#fff}
.sct-name{font-size:18px;font-weight:500;color:var(--navy);margin-bottom:5px}
.sct-desc{font-size:13px;color:var(--muted);line-height:1.5}

/* ---- FAQ ---- */

.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1120px;margin:0 auto;align-items:start}
.faq-item{background:#fff;border-radius:14px;border:.5px solid var(--border);overflow:hidden;transition:border-color .2s var(--ease-out)}
.faq-item.open{border-color:#93c4f8}
.faq-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px;cursor:pointer}
.faq-q{font-size:15px;font-weight:500;color:var(--navy);line-height:1.4;flex:1}
.faq-icon{width:24px;height:24px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#fff;position:relative}
.faq-icon:before,.faq-icon:after{content:"";position:absolute;background:#fff;border-radius:2px}
.faq-icon:before{width:11px;height:1.5px}
.faq-icon:after{width:1.5px;height:11px;transition:opacity .2s,transform .2s}
.faq-item.open .faq-icon:after{opacity:0;transform:rotate(90deg)}
.faq-body{font-size:14px;color:var(--muted);line-height:1.75;padding:0 24px 22px;display:none}
.faq-item.open .faq-body{display:block}
.faq-body strong{color:var(--navy);font-weight:500}
.faq-body a{color:var(--blue)}

/* ---- CTA FINAL ---- */

.cta-final{position:relative;background:radial-gradient(120% 160% at 20% 0%,#1b2b4d 0%,#0A0E16 72%);text-align:center;padding:100px 80px;overflow:hidden}
.cta-final:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.cta-final .wb{position:relative}
.cta-final h2{font-size:40px;font-weight:500;color:#fff;margin:0 0 14px;line-height:1.2}
.cta-final p{font-size:18px;color:#c4d2e6;max-width:620px;margin:0 auto 32px;line-height:1.7}
.cta-mini{font-size:13px;color:#8ea3c2;margin-top:18px}

/* ---- REVEAL ---- */

.wb-anim .reveal{opacity:0;transform:translateY(20px) scale(.985);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.wb-anim .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wb-anim .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .gsh-c{animation:none!important;opacity:1!important;transform:none!important}
  .gsh-rich,.wped .wtop .save,.wped .wblock.on,.wped .wcaret{animation:none!important;opacity:1!important;transform:none!important;box-shadow:none!important}
}

/* ---- RESPONSIVE ---- */

@media(max-width:980px){
  .sec{padding:72px 28px}
  .hero{padding:60px 28px 64px}
  .creds{padding:22px 28px}
  .split{grid-template-columns:1fr;gap:36px}
  .split .canvas{order:2}
  .sit-grid{grid-template-columns:1fr;max-width:560px}
  .steps{grid-template-columns:1fr 1fr}
  .sct-grid{grid-template-columns:1fr 1fr}
  .case-grid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:460px}
  .faq-grid{grid-template-columns:1fr}
  .cta-final{padding:72px 28px}
}
@media(max-width:560px){
  .sec{padding:56px 20px}
  .hero{padding:48px 20px 44px}
  .hero h1{font-size:32px}
  .hero-sub,.split p.lead,.sec-sub{font-size:15px}
  .sec-title,.split h2,.cta-final h2{font-size:26px}
  .sec-header{margin-bottom:40px}
  .creds{flex-wrap:wrap;padding:14px 16px}
  .cred-item{min-width:50%;padding:10px 0;border-bottom:.5px solid var(--border)}
  .cred-sep{display:none}
  .steps{grid-template-columns:1fr}
  .sct-grid{grid-template-columns:1fr}
  .sit{padding:26px 22px 28px}
  .sit-quote{margin-left:0}
  .hero-btns a,.cta-final .btn-primary{width:100%;text-align:center}
}

/* ---- FIX · el tema (Astra) pisa el color de los enlaces en :visited/:hover/:active.
   Estas reglas tienen más especificidad y devuelven el color correcto a los botones. ---- */

a.btn-primary:link,a.btn-primary:visited,a.btn-primary:hover,a.btn-primary:focus,a.btn-primary:active{color:#fff}
a.btn-light:link,a.btn-light:visited,a.btn-light:hover,a.btn-light:focus,a.btn-light:active{color:#eaf1fb}
a.btn-ghost:link,a.btn-ghost:visited,a.btn-ghost:hover,a.btn-ghost:focus,a.btn-ghost:active{color:var(--navy)}
a.sct:link,a.sct:visited,a.sct:hover,a.sct:focus,a.sct:active{color:inherit}
.crumb a:link,.crumb a:visited,.crumb a:focus,.crumb a:active{color:#8ea3c2}
.crumb a:hover{color:#7fb3f2}

/* ---- FOCO · Astra pinta un borde punteado al hacer clic. Se quita para el raton
   pero se conserva (mejor) para quien navega con teclado. ---- */

a.btn-primary:focus,a.btn-light:focus,a.btn-ghost:focus,a.sct:focus,.crumb a:focus{outline:none}
a.btn-primary:focus-visible,a.btn-light:focus-visible,a.btn-ghost:focus-visible,a.sct:focus-visible,.crumb a:focus-visible{outline:2px solid #7fb3f2;outline-offset:3px}

/* ---- MOCKUP MOVIL (S05) · sustituye a la ventana genérica ---- */

.ph{width:296px;margin:0 auto;background:#fff;border:1px solid #dfe6ef;border-radius:36px;padding:9px;box-shadow:0 22px 50px rgba(16,24,40,.13);position:relative}
.ph-notch{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:76px;height:5px;border-radius:3px;background:#e6eaf0;z-index:2}
.ph-scr{border-radius:28px;overflow:hidden;background:#fff;border:.5px solid #eef1f5;display:flex;flex-direction:column}
.ph-url{flex-shrink:0;background:#f4f6f9;border-bottom:.5px solid var(--border);padding:15px 0 9px;text-align:center;font-size:10.5px;color:var(--hint)}
.ph-head{flex-shrink:0;padding:14px 16px;border-bottom:.5px solid var(--border)}
.ph-head{display:flex;align-items:center;justify-content:space-between}
.ph-brand{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--navy)}
.ph-brand i{width:16px;height:16px;border-radius:5px;background:var(--blue);flex-shrink:0}
.ph-menu{display:flex;flex-direction:column;gap:3px}
.ph-menu span{width:15px;height:1.5px;border-radius:2px;background:#9aa6b8}
.ph-star{color:#f5a623;font-size:11px;letter-spacing:-1px}
.ph-body{padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.ph-h{height:9px;border-radius:3px;background:var(--navy);width:74%}
.ph-l{height:6px;border-radius:3px;background:#e8ecf1}
.ph-l.s{width:58%}
.ph-serv{display:flex;flex-direction:column;gap:7px;margin-top:5px}
.ph-rev{border:.5px solid var(--border);border-radius:9px;padding:10px 11px;display:flex;flex-direction:column;gap:6px;margin-top:9px;background:#fbfcfe}
.ph-rev .r{height:5px;border-radius:3px;background:#e8ecf1}
.ph-rev .r.s{width:64%}
.ph-srv{border:.5px solid var(--border);border-radius:9px;padding:9px 11px;display:flex;align-items:center;gap:9px}
.ph-srv i{width:20px;height:20px;border-radius:6px;background:var(--blue-light);flex-shrink:0}
.ph-srv:nth-child(2) i{background:#dcfce7}
.ph-srv:nth-child(3) i{background:#fef3c7}
.ph-srv span{height:6px;border-radius:3px;background:#e8ecf1;flex:1}
.ph-bar{flex-shrink:0;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px 11px 13px;border-top:.5px solid var(--border);background:#fff}
.ph-b{border-radius:9px;padding:8px 3px;text-align:center;font-size:10px;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1}
.ph-b svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ph-b.call{background:var(--blue);color:#fff}
.ph-b.wa{background:#25d366;color:#fff}
.ph-b.frm{background:#fff;color:var(--navy);border:1px solid var(--border)}
@media(max-width:560px){ .ph{width:262px} }

/* ---- AJUSTE MOVIL · alineación coherente ----------------------------------
   En pantalla estrecha, un titular centrado se parte en líneas desiguales y
   parece texto justificado. En móvil TODO el contenido va a la izquierda.
   Única excepción a propósito: el bloque final de contacto, que se mantiene
   centrado porque es el cierre de la página y lleva un solo botón. -------- */

@media(max-width:560px){
  .sec-header{text-align:left;margin-bottom:34px}
  .sec-sub{margin-left:0;max-width:none}
  .sit-foot,.case-note,.steps-note,.plans-note{text-align:left;margin-left:0;max-width:none}
  .case .c,.step-n{font-size:12px}
  .sit-foot .sit-src{margin-top:10px}
  /* el bloque final también a la izquierda: centrado se partía en 4 líneas desiguales */
  .cta-final{text-align:left}
  .cta-final p{margin-left:0;max-width:none}
  .cta-final .cta-mini{margin:18px 0 0}
  /* los dos botones del hero eran de ancho completo pero uno alineaba el texto
     a la izquierda y el otro al centro: se igualan */
  .hero-btns a{justify-content:center}
  /* la etiqueta del hero ocupa dos líneas en móvil; se ajusta para que lo parezca a propósito */
  .hero-eye{border-radius:14px;padding:9px 14px;line-height:1.5;letter-spacing:.10em}
}

/* ---- BLOQUE NORMATIVA (S07) ---- */

.law{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto}
.law-col{background:#fff;border:.5px solid var(--border);border-radius:18px;padding:30px 30px 32px}
.law-col.no{background:#fffbfb;border-color:#f3d9d9}
.law-col.si{background:#fbfefc;border-color:#d6efde}
.law-h{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.law-h i{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.law-col.no .law-h i{background:var(--red-light);color:var(--red)}
.law-col.si .law-h i{background:var(--green-light);color:var(--green)}
.law-h i svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.law-h h3{font-size:18px;font-weight:500;margin:0}
.law-sub{font-size:13.5px;color:var(--muted);margin:0 0 20px 45px;line-height:1.55}
.law-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.law-list li{font-size:14.5px;line-height:1.55;padding:11px 14px;border-radius:10px;background:#fff;border:.5px solid var(--border)}
.law-col.no .law-list li{color:var(--muted);text-decoration:line-through;text-decoration-color:#e4a9a9;text-decoration-thickness:1px}
.law-col.si .law-list li{color:var(--navy)}
.law-foot{max-width:1000px;margin:26px auto 0;text-align:center;font-size:14px;color:var(--muted);line-height:1.7}
.law-foot b{color:var(--navy);font-weight:500}
.law-src{display:block;font-size:12.5px;color:var(--hint);margin-top:9px}
@media(max-width:980px){ .law{grid-template-columns:1fr;max-width:560px} }
@media(max-width:560px){ .law-col{padding:26px 22px 28px} .law-sub{margin-left:0} .law-foot{text-align:left} }

/* ---- CIERRE HACIA EL HUB (sustituye a la rejilla de otros sectores) ---- */

.hublink{max-width:1000px;margin:0 auto;background:#fff;border:.5px solid var(--border);border-radius:16px;padding:26px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;transition:border-color .22s var(--ease-out),box-shadow .22s var(--ease-out)}
.hublink:hover{border-color:#93c4f8;box-shadow:0 8px 24px rgba(26,115,232,.08)}
.hublink .t{font-size:17px;font-weight:500;color:var(--navy);margin-bottom:4px}
.hublink .d{font-size:14px;color:var(--muted);line-height:1.6}
@media(max-width:560px){ .hublink{padding:22px;flex-direction:column;align-items:flex-start} .hublink .btn-ghost{width:100%;justify-content:center} }

/* ---- BLINDAJE DE MARGENES ---------------------------------------------
   Astra define margenes propios para h1..h4 que pesan mas que el reset
   universal de arriba. Sin esto, cada titular arrastra un hueco por debajo
   y las tarjetas de preguntas se estiran. Fijamos todos los titulares que
   usa la pagina, uno a uno. --------------------------------------------- */

.hero h1,.sec h2,.sec h3,.sec h4,.cta-final h2,.sec-title,.faq-q,
.vs2-h h3,.law-h h3,.pstep h3,.sit-head h3,.step h3,.plan h4,.hublink .t{margin-top:0}
.faq-q{margin-bottom:0}
.sec-title{margin:0 0 14px}
.split h2{margin:0 0 16px}
.hero h1{margin:0 0 22px}
.cta-final h2{margin:0 0 14px}
.vs2-h h3,.law-h h3{margin:0}
.pstep h3{margin:0 0 7px}
.sit-head h3{margin:0}
.step h3{margin:0 0 8px}
.plan h4{margin:0 0 4px}
.sec p,.hero p,.cta-final p{margin-top:0}

/* ---- BLINDAJE DE TIPOGRAFIA -------------------------------------------
   Astra estiliza los titulares con selectores del tipo `.entry-content h3`,
   que en CSS pesan mas que nuestras clases sueltas (.faq-q, .sec-title...).
   Sin esto, el tema convierte las preguntas en 24px/600 y rompe la escala.
   Duplicamos el nombre de la clase para subir la especificidad sin tener
   que tocar el HTML ni recurrir a !important. -------------------------- */

.hero.hero h1{font-size:54px;font-weight:500;color:#fff;line-height:1.12;letter-spacing:-.01em;margin:0 0 22px}
.sec-title.sec-title{font-size:38px;font-weight:500;color:var(--navy);line-height:1.2;margin:0 0 16px}
.split.split h2{font-size:34px;font-weight:500;line-height:1.2;margin:0 0 16px}
.sec--dark .split.split h2{color:#fff}
.cta-final.cta-final h2{font-size:40px;font-weight:500;color:#fff;line-height:1.2;margin:0 0 14px}
.faq-q.faq-q{font-size:15px;font-weight:500;color:var(--navy);line-height:1.4;margin:0;flex:1}
.sit-head.sit-head h3{font-size:20px;font-weight:500;line-height:1.3;margin:0}
.vs2-h.vs2-h h3,.law-h.law-h h3{font-size:18px;font-weight:500;line-height:1.3;margin:0}
.step.step h3{font-size:17px;font-weight:500;line-height:1.3;margin:0 0 8px}
.pstep.pstep h3{font-size:16px;font-weight:500;line-height:1.3;margin:0 0 7px}
.plan.plan h4{font-size:18px;font-weight:500;line-height:1.3;margin:0 0 4px}
.hublink.hublink .t{font-size:17px;font-weight:500;line-height:1.4;margin:0 0 4px}
@media(max-width:560px){
  .hero.hero h1{font-size:32px}
  .sec-title.sec-title,.split.split h2,.cta-final.cta-final h2{font-size:26px}
}

.cta-final .cta-mini,.cta-final.cta-final .cta-mini{font-size:13px;line-height:1.6;color:#8ea3c2;max-width:none;margin:18px auto 0}

/* ---- Fondo del bloque final: color solido + degradado por separado, para
   que si algo pisa el degradado el fondo oscuro se mantenga. ---- */

.cta-final.cta-final{background-color:#0A0E16;background-image:radial-gradient(120% 160% at 20% 0%,#1b2b4d 0%,#0A0E16 72%);background-repeat:no-repeat}


/* mockup · GOOGLE SHOPPING + resultado con datos de producto (el eje de la pagina) */
.gsh{display:grid;gap:12px}
.gsh-bar{display:flex;align-items:center;gap:9px;border:.5px solid var(--border);border-radius:22px;padding:9px 15px;background:#fff}
.gsh-bar svg{width:14px;height:14px;color:var(--hint);flex-shrink:0}
.gsh-bar .q{font-size:12.5px;color:var(--navy)}
.gsh-tabs{display:flex;gap:16px;border-bottom:.5px solid var(--border);padding:0 2px}
.gsh-tabs span{font-size:11px;color:var(--hint);padding-bottom:8px;position:relative}
.gsh-tabs span.on{color:var(--blue);font-weight:500}
.gsh-tabs span.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--blue)}
.gsh-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.gsh-c{border:.5px solid var(--border);border-radius:9px;padding:9px;background:#fff;position:relative;opacity:0;animation:gshIn .7s var(--ease-out) forwards}
.gsh-c:nth-child(1){animation-delay:.15s}
.gsh-c:nth-child(2){animation-delay:.45s}
.gsh-c:nth-child(3){animation-delay:.75s}
@keyframes gshIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.gsh-c .im{height:60px;border-radius:6px;overflow:hidden;margin-bottom:9px;display:flex;align-items:center;justify-content:center}
.gsh-c .im svg{width:52px;height:52px;display:block}
.gsh-c .pz{font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:4px}
.gsh-c .ln{height:5px;border-radius:2px;background:#e6ebf2;margin-bottom:4px}
.gsh-c .ln.s{width:66%}
.gsh-c .sh{font-size:9.5px;color:var(--hint);margin-top:7px}
.gsh-c.mine{border-color:#bfe6cb;background:linear-gradient(180deg,#f4fbf6,#fff);box-shadow:0 8px 20px rgba(22,163,74,.10)}
.gsh-c.mine .sh{color:var(--green)}
.gsh-c .badge{position:absolute;right:-4px;top:-8px;font-size:9px;font-weight:600;color:#fff;background:var(--green);border-radius:12px;padding:2px 8px;box-shadow:0 3px 8px rgba(22,163,74,.28)}
.gsh-org{border:.5px solid var(--border);border-radius:9px;padding:11px 13px;background:#fff}
.gsh-org .u{font-size:10.5px;color:var(--green);margin-bottom:5px}
.gsh-org .t{height:8px;width:58%;border-radius:3px;background:var(--blue);margin-bottom:7px}
.gsh-org .d{height:5px;border-radius:2px;background:#e6ebf2;margin-bottom:4px}
.gsh-org .d.s{width:70%}
.gsh-rich{margin-top:9px;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;color:var(--navy);background:var(--gray-mid);border:.5px solid var(--border);border-radius:14px;padding:4px 11px;animation:richOn 5s var(--ease-out) infinite}
.gsh-rich b{font-weight:600;color:var(--green)}
.gsh-rich i{width:6px;height:6px;border-radius:50%;background:var(--green);font-style:normal}
@keyframes richOn{0%,55%,100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}62%{box-shadow:0 0 0 5px rgba(22,163,74,.16)}}


/* ══════════ COMPONENTES PROPIOS · DENTISTAS ══════════ */

/* ---- RECORRIDO DEL PACIENTE (S03) ---- */

.path{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1080px;margin:0 auto;position:relative}
.path:before{content:"";position:absolute;top:31px;left:12%;right:12%;height:2px;background:var(--border)}
.path:after{content:"";position:absolute;top:31px;left:12%;height:2px;background:var(--blue);width:0;animation:pathFill 7s var(--ease-in-out) infinite}
@keyframes pathFill{0%{width:0}12%{width:0}70%{width:76%}100%{width:76%}}
.pstep{position:relative;text-align:center;padding:0 16px}
.pdot{width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;position:relative;z-index:1;color:var(--hint);transition:all .4s var(--ease-out)}
.pdot svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pstep:nth-child(1) .pdot{animation:dotOn 7s var(--ease-out) infinite;animation-delay:.2s}
.pstep:nth-child(2) .pdot{animation:dotOn 7s var(--ease-out) infinite;animation-delay:1.6s}
.pstep:nth-child(3) .pdot{animation:dotOn 7s var(--ease-out) infinite;animation-delay:3s}
.pstep:nth-child(4) .pdot{animation:dotOn 7s var(--ease-out) infinite;animation-delay:4.4s}
@keyframes dotOn{0%,8%{border-color:var(--border);color:var(--hint);background:#fff;transform:scale(1)}
 14%{border-color:var(--blue);color:var(--blue);background:var(--blue-light);transform:scale(1.08)}
 90%,100%{border-color:var(--blue);color:var(--blue);background:var(--blue-light);transform:scale(1)}}
.pstep h3{font-size:16px;font-weight:500;margin:0 0 7px}
.pstep p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0}
.pstep .pq{display:block;font-size:12.5px;color:var(--hint);font-style:italic;margin-top:9px}
@media(max-width:980px){
  .path{grid-template-columns:1fr;gap:26px;max-width:420px}
  .path:before,.path:after{display:none}
  .pstep{text-align:left;display:grid;grid-template-columns:64px 1fr;gap:18px;padding:0}
  .pdot{margin:0}
}

/* ---- RESERVA DE CITA ANIMADA (S06) ---- */

.book{width:330px;margin:0 auto;background:#fff;border:1px solid #dfe6ef;border-radius:20px;box-shadow:0 22px 50px rgba(16,24,40,.13);overflow:hidden}
.book-top{background:var(--navy);color:#fff;padding:14px 18px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:9px}
.book-top i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.book-body{padding:18px;position:relative;min-height:274px}
.bscreen{position:absolute;left:18px;right:18px;top:18px;opacity:0;animation:bScreen 12s var(--ease-out) infinite}
.bscreen:nth-child(1){animation-delay:0s}
.bscreen:nth-child(2){animation-delay:4s}
.bscreen:nth-child(3){animation-delay:8s}
@keyframes bScreen{0%{opacity:0;transform:translateY(8px)}4%{opacity:1;transform:none}30%{opacity:1;transform:none}34%{opacity:0;transform:translateY(-8px)}100%{opacity:0}}
.blab{font-size:11.5px;font-weight:500;color:var(--hint);text-transform:uppercase;letter-spacing:.09em;margin-bottom:12px}
.bopt{border:1px solid var(--border);border-radius:11px;padding:13px 15px;font-size:14px;color:var(--navy);margin-bottom:9px;display:flex;align-items:center;justify-content:space-between}
.bopt.sel{border-color:var(--blue);background:var(--blue-light);font-weight:500}
.bopt .chk{width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;display:none;align-items:center;justify-content:center}
.bopt.sel .chk{display:flex}
.bopt .chk svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.bslot{border:1px solid var(--border);border-radius:9px;padding:10px 0;text-align:center;font-size:13px;color:var(--navy)}
.bslot.sel{border-color:var(--blue);background:var(--blue);color:#fff;font-weight:500}
.bslot.off{color:var(--hint);background:#f7f9fb;text-decoration:line-through}
.bdone{text-align:center;padding:14px 0 4px}
.bcheck{width:56px;height:56px;border-radius:50%;background:var(--green-light);color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:bPop .55s var(--ease-out) backwards;animation-delay:8.3s}
.bcheck svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes bPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.bdone h4{font-size:16px;font-weight:500;color:var(--navy);margin:0 0 6px}
.bdone p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0}
.bnote{font-size:12px;color:var(--hint);text-align:center;padding:12px 18px 16px;border-top:.5px solid var(--border);line-height:1.5}
@media(max-width:560px){ .book{width:100%;max-width:330px} }

/* ---- FICHA DE TRATAMIENTO (S05) ---- */

.trt-top{background:#f4f6f9;border-bottom:.5px solid var(--border);padding:11px 14px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--hint)}
.trt-top .dot{width:9px;height:9px;border-radius:50%;background:#e2e6ec}
.trt-url{background:#fff;border:.5px solid var(--border);border-radius:20px;padding:4px 12px;flex:1;text-align:center}
.trt-url b{color:var(--navy);font-weight:500}
.trt-body{padding:20px}
.trt-tag{display:inline-block;font-size:11px;font-weight:500;color:var(--blue);background:var(--blue-light);border-radius:20px;padding:5px 12px;margin-bottom:12px}
.trt-h{height:11px;border-radius:3px;background:var(--navy);width:58%;margin-bottom:10px}
.trt-l{height:7px;border-radius:3px;background:#e8ecf1;margin-bottom:7px}
.trt-l.s{width:72%}
.trt-price{display:flex;align-items:center;gap:12px;border:.5px solid var(--border);border-radius:12px;padding:14px 16px;margin:16px 0 12px}
.trt-price .p{font-size:22px;font-weight:500;color:var(--navy)}
.trt-price .f{font-size:12.5px;color:var(--green);background:var(--green-light);border-radius:20px;padding:5px 11px;font-weight:500;animation:fPulse 4s var(--ease-in-out) infinite}
@keyframes fPulse{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.06)}}
.trt-rows{display:flex;flex-direction:column;gap:8px}
.trt-row{border:.5px solid var(--border);border-radius:9px;padding:10px 13px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.trt-row b{color:var(--navy);font-weight:500}

@media (prefers-reduced-motion:reduce){
  .path:after,.pdot,.bscreen,.bcheck,.trt-price .f{animation:none!important}
  .path:after{width:76%}
  .pdot{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
  .bscreen{opacity:1;position:relative;left:auto;right:auto;top:auto;margin-bottom:18px;transform:none}
  .book-body{min-height:0}
}


/* ══════════ COMPONENTES PROPIOS · INMOBILIARIAS ══════════ */

/* ---- COMPARATIVA PORTAL vs WEB PROPIA (S03) ---- */

.vs2{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto}
.vs2-col{border-radius:18px;padding:30px 30px 32px;border:.5px solid var(--border);background:#fff}
.vs2-col.portal{background:#fffbfb;border-color:#f3d9d9}
.vs2-col.propia{background:#fbfefc;border-color:#d6efde}
.vs2-h{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.vs2-h i{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vs2-col.portal .vs2-h i{background:var(--red-light);color:var(--red)}
.vs2-col.propia .vs2-h i{background:var(--green-light);color:var(--green)}
.vs2-h i svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vs2-h h3{font-size:18px;font-weight:500;margin:0}
.vs2-list{list-style:none;display:flex;flex-direction:column;gap:13px}
.vs2-list li{display:flex;gap:11px;font-size:14.5px;line-height:1.6;color:var(--navy);align-items:flex-start}
.vs2-list .m{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px}
.vs2-list .m svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vs2-col.portal .m{background:#fdeaea;color:var(--red)}
.vs2-col.propia .m{background:var(--green-light);color:var(--green)}
.vs2-cost{margin-top:20px;padding-top:18px;border-top:.5px solid var(--border);font-size:13.5px;color:var(--muted);line-height:1.6}
.vs2-cost b{color:var(--navy);font-weight:500}
@media(max-width:980px){ .vs2{grid-template-columns:1fr;max-width:560px} }
@media(max-width:560px){ .vs2-col{padding:26px 22px 28px} }

/* ---- BUSCADOR DE INMUEBLES ANIMADO (S06) ---- */

.srch{background:#fff;border:1px solid #dfe6ef;border-radius:18px;box-shadow:0 22px 50px rgba(16,24,40,.13);overflow:hidden;max-width:440px;margin:0 auto}
.srch-top{background:#f4f6f9;border-bottom:.5px solid var(--border);padding:11px 14px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--hint)}
.srch-top .dot{width:9px;height:9px;border-radius:50%;background:#e2e6ec}
.srch-url{background:#fff;border:.5px solid var(--border);border-radius:20px;padding:4px 12px;flex:1;text-align:center}
.srch-url b{color:var(--navy);font-weight:500}
.srch-filters{display:flex;gap:7px;padding:15px;flex-wrap:wrap;border-bottom:.5px solid var(--border)}
.chip{font-size:12.5px;border:1px solid var(--border);border-radius:20px;padding:7px 14px;color:var(--muted);background:#fff;transition:all .4s var(--ease-out)}
.chip.on{animation:chipOn 9s var(--ease-out) infinite}
.chip:nth-child(1).on{animation-delay:.4s}
.chip:nth-child(2).on{animation-delay:1.5s}
.chip:nth-child(3).on{animation-delay:2.6s}
@keyframes chipOn{0%,4%{background:#fff;border-color:var(--border);color:var(--muted)}
 10%,88%{background:var(--blue);border-color:var(--blue);color:#fff}
 96%,100%{background:#fff;border-color:var(--border);color:var(--muted)}}
.srch-count{padding:12px 15px 0;font-size:12.5px;color:var(--hint)}
.srch-count b{color:var(--navy);font-weight:500}
.srch-list{padding:12px 15px 16px;display:flex;flex-direction:column;gap:10px}
.pcard{border:.5px solid var(--border);border-radius:12px;overflow:hidden;display:grid;grid-template-columns:96px 1fr;opacity:0;animation:pIn .6s var(--ease-out) forwards}
.pcard:nth-child(1){animation-delay:3.2s}
.pcard:nth-child(2){animation-delay:3.4s}
.pcard:nth-child(3){animation-delay:3.6s}
@keyframes pIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pcard .img{background:linear-gradient(135deg,#dbe6f5,#eef3fa);position:relative;min-height:78px}
.pcard .img:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:22px;border-radius:3px;background:rgba(255,255,255,.75)}
.pcard .info{padding:11px 13px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.pcard .p{font-size:15px;font-weight:500;color:var(--navy)}
.pcard .d{font-size:12px;color:var(--muted)}
.pcard .meta{display:flex;align-items:center;gap:7px;margin-top:2px}
.pcard .cee{font-size:10px;font-weight:600;color:#fff;border-radius:3px;padding:2px 6px;background:#22a35a}
.pcard .cee.d2{background:#f5a623}
.pcard .cee.e{background:#e8663d}
.pcard .ref{font-size:11px;color:var(--hint)}
@media(max-width:560px){ .srch{max-width:100%} }

@media (prefers-reduced-motion:reduce){
  .chip.on,.pcard{animation:none!important;opacity:1!important;transform:none!important}
  .chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
}


/* ══════════ COMPONENTES PROPIOS · RESTAURANTES ══════════ */

/* ---- REPARTO DEL TICKET (S03) ---- */

.tick{max-width:1000px;margin:0 auto;background:#fff;border:.5px solid var(--border);border-radius:18px;padding:34px 36px 30px}
.tick-row{margin-bottom:26px}
.tick-row:last-of-type{margin-bottom:0}
.tick-lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.tick-lab .n{font-size:16px;font-weight:500;color:var(--navy)}
.tick-lab .v{font-size:14px;color:var(--muted)}
.tick-lab .v b{color:var(--navy);font-weight:500}
.tick-bar{height:38px;border-radius:9px;overflow:hidden;display:flex;background:#eef1f5}
.tick-bar i{display:block;height:100%;font-style:normal;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:#fff;white-space:nowrap;width:0;animation:tickGrow 1.1s var(--ease-out) forwards}
.tick-row.plat i.fee{background:var(--red);animation-delay:.15s}
.tick-row.plat i.rest{background:#9fb1c7;animation-delay:.3s}
.tick-row.own i.fee{background:var(--amber);animation-delay:.45s}
.tick-row.own i.rest{background:var(--green);animation-delay:.6s}
@keyframes tickGrow{from{width:0}to{width:var(--w)}}
.tick-note{margin-top:24px;padding-top:20px;border-top:.5px solid var(--border);font-size:14px;color:var(--muted);line-height:1.7}
.tick-note b{color:var(--navy);font-weight:500}
.tick-src{display:block;font-size:12.5px;color:var(--hint);margin-top:9px}
@media(max-width:560px){ .tick{padding:26px 22px} .tick-bar i{font-size:11px} }

/* ---- CARTA CON ALERGENOS (S05) ---- */

.carta{max-width:430px;margin:0 auto;background:#fff;border:1px solid #dfe6ef;border-radius:18px;box-shadow:0 22px 50px rgba(16,24,40,.13);overflow:hidden}
.carta-top{background:var(--navy);color:#fff;padding:15px 20px;display:flex;align-items:center;justify-content:space-between}
.carta-top .t{font-size:14px;font-weight:500}
.carta-top .s{font-size:11px;color:#9fb1cc}
.carta-sec{padding:14px 20px 6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hint)}
.dish{padding:12px 20px;border-bottom:.5px solid var(--border);display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.dish:last-child{border-bottom:none}
.dish .l .n{font-size:14.5px;font-weight:500;color:var(--navy);margin-bottom:5px}
.dish .l .d{font-size:12.5px;color:var(--muted);line-height:1.5}
.dish .p{font-size:14.5px;font-weight:500;color:var(--navy);white-space:nowrap}
.alg{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.alg span{font-size:10px;font-weight:600;border-radius:4px;padding:3px 7px;background:var(--amber-light);color:#8a5a00}
.alg span.v{background:var(--green-light);color:#15803d}
.carta-foot{padding:13px 20px;background:#f7f9fb;border-top:.5px solid var(--border);font-size:11.5px;color:var(--hint);text-align:center}
@media(max-width:560px){ .carta{max-width:100%} }

/* ---- SOLICITUD DE RESERVA (S06) ---- */

.resv{max-width:400px;margin:0 auto;background:#fff;border:1px solid #dfe6ef;border-radius:18px;box-shadow:0 22px 50px rgba(16,24,40,.13);overflow:hidden}
.resv-top{background:#f4f6f9;border-bottom:.5px solid var(--border);padding:13px 18px;font-size:12.5px;color:var(--muted);font-weight:500}
.resv-body{padding:18px}
.resv-lab{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--hint);margin:0 0 9px}
.resv-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:16px}
.resv-b{border:1px solid var(--border);border-radius:9px;padding:11px 0;text-align:center;font-size:13.5px;color:var(--navy)}
.resv-b.on{border-color:var(--blue);background:var(--blue);color:#fff;font-weight:500}
.resv-b.off{color:var(--hint);background:#f7f9fb}
.resv-cta{background:var(--blue);color:#fff;border-radius:10px;padding:13px 0;text-align:center;font-size:14.5px;font-weight:500;margin-top:4px}
.resv-foot{padding:12px 18px;border-top:.5px solid var(--border);font-size:11.5px;color:var(--hint);text-align:center;line-height:1.5}
@media(max-width:560px){ .resv{max-width:100%} }

@media (prefers-reduced-motion:reduce){ .tick-bar i{animation:none!important;width:var(--w)!important} }

.cta-final .cta-mini,.cta-final.cta-final .cta-mini{font-size:13px;line-height:1.6;color:#8ea3c2;max-width:none;margin:18px auto 0}


/* ══════════ COMPONENTES PROPIOS · ABOGADOS ══════════ */

/* ---- FICHA DE PROFESIONAL (S03) ---- */

.lw{max-width:400px;margin:0 auto;background:#fff;border:1px solid #dfe6ef;border-radius:18px;box-shadow:0 22px 50px rgba(16,24,40,.13);overflow:hidden}
.lw-top{background:var(--navy);color:#fff;padding:14px 20px;font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:9px}
.lw-top i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.lw-body{padding:22px 20px}
.lw-head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.lw-av{width:62px;height:62px;border-radius:50%;background:linear-gradient(140deg,#dbe6f5,#eef3fa);flex-shrink:0;position:relative}
.lw-av:after{content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.8)}
.lw-name{font-size:16px;font-weight:500;color:var(--navy);margin-bottom:3px}
.lw-role{font-size:13px;color:var(--muted)}
.lw-col{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;font-weight:500;color:var(--blue);background:var(--blue-light);border-radius:20px;padding:4px 10px}
.lw-rows{display:flex;flex-direction:column;gap:9px}
.lw-row{border:.5px solid var(--border);border-radius:10px;padding:11px 13px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:12px}
.lw-row b{color:var(--navy);font-weight:500}
.lw-foot{padding:13px 20px;background:#f7f9fb;border-top:.5px solid var(--border);font-size:11.5px;color:var(--hint);text-align:center;line-height:1.5}
@media(max-width:560px){ .lw{max-width:100%} }

/* ---- BUSQUEDA REAL → PAGINA (S05) ---- */

.qmap{display:flex;flex-direction:column;gap:12px;max-width:520px;margin:0 auto}
.qm{background:#fff;border:.5px solid var(--border);border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.qm .q{font-size:13.5px;color:var(--muted);font-style:italic;line-height:1.45}
.qm .ar{width:28px;height:28px;border-radius:50%;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qm .ar svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.qm .p{font-size:13.5px;font-weight:500;color:var(--navy);line-height:1.4}
.qm .p small{display:block;font-size:11.5px;color:var(--hint);font-weight:400;margin-top:3px}
@media(max-width:560px){
  .qm{grid-template-columns:1fr;gap:10px;text-align:left}
  .qm .ar{transform:rotate(90deg)}
}


/* ══════════ COMPONENTES PROPIOS · TIENDA ══════════ */

/* ---- COSTE A TRES AÑOS (S03) ---- */

.cost{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto}
.cost-col{border-radius:18px;border:.5px solid var(--border);padding:30px 30px 26px;background:#fff}
.cost-col.plat{background:#fffbfb;border-color:#f3d9d9}
.cost-col.woo{background:#fbfdff;border-color:#cfe0fb}
.cost-h{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.cost-h i{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-style:normal;font-size:15px;font-weight:600}
.cost-col.plat .cost-h i{background:var(--red-light);color:var(--red)}
.cost-col.woo .cost-h i{background:var(--blue-light);color:var(--blue)}
.cost-h h3{font-size:18px;font-weight:500;margin:0}
.cost-sub{font-size:13.5px;color:var(--muted);margin:0 0 20px 47px;line-height:1.5}
.cost-line{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:.5px dashed var(--border);font-size:14px;color:var(--muted)}
.cost-line:last-of-type{border-bottom:none}
.cost-line b{color:var(--navy);font-weight:500}
.cost-tot{margin-top:16px;padding-top:16px;border-top:1.5px solid var(--border);display:flex;justify-content:space-between;align-items:baseline}
.cost-tot span{font-size:13.5px;color:var(--muted)}
.cost-tot .n{font-size:26px;font-weight:500;color:var(--navy)}
.cost-col.plat .cost-tot .n{color:var(--red)}
.cost-col.woo .cost-tot .n{color:var(--blue)}
@media(max-width:980px){ .cost{grid-template-columns:1fr;max-width:520px} }
@media(max-width:560px){ .cost-col{padding:26px 22px} .cost-sub{margin-left:0} }

/* animacion S03 · las lineas de coste entran una a una y el total sube
   solo cuando el bloque aparece en pantalla (clase .in que pone el JS) */
.reveal.in .cost-line{animation:costLine .5s var(--ease-out) backwards}
.reveal.in .cost-line:nth-of-type(1){animation-delay:.10s}
.reveal.in .cost-line:nth-of-type(2){animation-delay:.28s}
.reveal.in .cost-line:nth-of-type(3){animation-delay:.46s}
.reveal.in .cost-line:nth-of-type(4){animation-delay:.64s}
@keyframes costLine{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.reveal.in .cost-tot{animation:costTot .6s var(--ease-out) .86s backwards}
@keyframes costTot{from{opacity:0}to{opacity:1}}
.cost-col.woo .cost-tot .n{position:relative}
.reveal.in .cost-col.woo .cost-tot .n{animation:cero .7s var(--ease-out) 1.15s backwards}
@keyframes cero{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}

/* ---- FICHA DE PRODUCTO (S05) ---- */

.prod{max-width:430px;margin:0 auto;background:#fff;border:1px solid #dfe6ef;border-radius:18px;box-shadow:0 22px 50px rgba(16,24,40,.13);overflow:hidden}
.prod-top{background:#f4f6f9;border-bottom:.5px solid var(--border);padding:11px 14px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--hint)}
.prod-top .dot{width:9px;height:9px;border-radius:50%;background:#e2e6ec}
.prod-url{background:#fff;border:.5px solid var(--border);border-radius:20px;padding:4px 12px;flex:1;text-align:center}
.prod-url b{color:var(--navy);font-weight:500}
.prod-img{height:174px;background:radial-gradient(120% 120% at 50% 20%,#fff 0%,#eaf1f9 62%,#dde8f5 100%);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prod-img:after{content:"";position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:150px;height:12px;border-radius:50%;background:rgba(26,58,110,.10);filter:blur(4px)}
/* la prenda crece un poco con la talla elegida: es el mismo ciclo de 9 s */
.prod-ph{width:200px;height:180px;position:relative;z-index:1}
.prod-shot{position:absolute;inset:0;opacity:0;animation:stockSwap 9s var(--ease-out) infinite}
.prod-shot.v2{animation-delay:3s}
.prod-shot.v3{animation-delay:6s}
.prod-shot svg{width:100%;height:100%;display:block}
.prod-tag{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:600;color:#fff;background:var(--green);border-radius:20px;padding:4px 10px}
.prod-zoom{position:absolute;right:12px;bottom:12px;z-index:2;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.9);border:.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.prod-zoom svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.prod-thumbs{display:flex;gap:7px;padding:12px 20px 0}
.prod-thumbs span{width:42px;height:42px;border-radius:9px;border:1px solid var(--border);background:radial-gradient(120% 120% at 50% 25%,#fff,#eef3f9);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:thumbOn 9s var(--ease-out) infinite}
.prod-thumbs span.t2{animation-delay:3s}
.prod-thumbs span.t3{animation-delay:6s}
.prod-thumbs span svg{width:32px;height:32px;display:block}
@keyframes thumbOn{0%,1%{border-color:var(--border);box-shadow:none}
 4%,32%{border-color:var(--blue);box-shadow:0 0 0 2px rgba(26,115,232,.14)}
 36%,100%{border-color:var(--border);box-shadow:none}}
.prod-body{padding:18px 20px}
.prod-name{font-size:16px;font-weight:500;color:var(--navy);margin-bottom:4px}
.prod-ref{font-size:11.5px;color:var(--hint);margin-bottom:12px}
.prod-pz{position:relative;height:30px;margin-bottom:14px}
.prod-price{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:10px;opacity:0;animation:stockSwap 9s var(--ease-out) infinite}
.prod-price.v2{animation-delay:3s}
.prod-price.v3{animation-delay:6s}
.prod-price .p{font-size:24px;font-weight:500;color:var(--navy)}
.prod-price .old{font-size:14px;color:var(--hint);text-decoration:line-through}
.prod-price .iva{font-size:11.5px;color:var(--muted)}
.prod-var{margin-bottom:13px}
.prod-lab{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hint);margin-bottom:7px}
.prod-opts{display:flex;gap:6px;flex-wrap:wrap}
.prod-o{border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--navy);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.prod-o i{width:11px;height:11px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.prod-o.on{border-color:var(--blue);background:var(--blue-light);color:var(--blue);font-weight:500}
.prod-o.off{color:var(--hint);background:#f7f9fb;text-decoration:line-through}
/* la talla se selecciona sola cada 3 s y el stock cambia con ella */
.prod-o.v1,.prod-o.v2,.prod-o.v3{animation:varOn 9s var(--ease-out) infinite}
.prod-o.v2{animation-delay:3s}
.prod-o.v3{animation-delay:6s}
@keyframes varOn{0%,1%{border-color:var(--border);background:transparent;color:var(--navy)}
 4%{border-color:var(--blue);background:var(--blue-light);color:var(--blue);transform:scale(1.05)}
 8%,32%{border-color:var(--blue);background:var(--blue-light);color:var(--blue);transform:scale(1)}
 36%,100%{border-color:var(--border);background:transparent;color:var(--navy);transform:scale(1)}}
.prod-stocks{position:relative;height:19px;margin-bottom:13px}
.prod-stock{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--green);opacity:0;animation:stockSwap 9s var(--ease-out) infinite}
.prod-stock.v2{animation-delay:3s}
.prod-stock.v3{animation-delay:6s;color:var(--amber)}
@keyframes stockSwap{0%{opacity:0;transform:translateY(5px)}4%,32%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-5px)}}
.prod-stock i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:stockPulse 2.6s var(--ease-in-out) infinite}
@keyframes stockPulse{0%,100%{opacity:1}50%{opacity:.35}}
.prod-btn{background:var(--blue);color:#fff;border-radius:10px;padding:13px 0;text-align:center;font-size:14.5px;font-weight:500;margin-bottom:11px}
.prod-legal{font-size:11.5px;color:var(--hint);line-height:1.6;display:flex;flex-direction:column;gap:5px}
.prod-legal span{display:flex;align-items:center;gap:7px}
.prod-legal svg{width:12px;height:12px;stroke:var(--green);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
@media(max-width:560px){ .prod{max-width:100%} }

/* ---- PASOS DE COMPRA (S06) ---- */

.chk{max-width:440px;margin:0 auto;background:#fff;border:1px solid #dfe6ef;border-radius:18px;box-shadow:0 22px 50px rgba(16,24,40,.13);overflow:hidden}
.chk-bar{display:flex;background:#f4f6f9;border-bottom:.5px solid var(--border)}
.chk-st{flex:1;text-align:center;padding:13px 4px;font-size:11.5px;font-weight:500;color:var(--hint);position:relative;animation:chkTab 15s var(--ease-out) infinite}
.chk-st.p2{animation-delay:5s}
.chk-st.p3{animation-delay:10s}
@keyframes chkTab{0%{color:var(--hint);background:transparent}
 2%,31%{color:var(--blue);background:#fff}
 34%,100%{color:var(--hint);background:transparent}}
.chk-st:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue);transform:scaleX(0);animation:chkTabLine 15s var(--ease-out) infinite}
.chk-st.p2:after{animation-delay:5s}
.chk-st.p3:after{animation-delay:10s}
@keyframes chkTabLine{0%{transform:scaleX(0)}3%,31%{transform:scaleX(1)}34%,100%{transform:scaleX(0)}}
.chk-body{padding:20px;position:relative;min-height:232px}
.chk-scr{position:absolute;left:20px;right:20px;top:20px;opacity:0;animation:chkScr 15s var(--ease-out) infinite}
.chk-scr.p2{animation-delay:5s}
.chk-scr.p3{animation-delay:10s}
@keyframes chkScr{0%{opacity:0;transform:translateX(10px)}3%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateX(-10px)}}
.chk-tip{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:11.5px;line-height:1.45;color:var(--muted);background:var(--blue-light);border-radius:9px;padding:9px 11px}
.chk-tip svg{width:14px;height:14px;color:var(--blue);flex-shrink:0}
.chk-pays{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.chk-m{border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:12px;color:var(--muted)}
.chk-m.on{border-color:var(--blue);background:var(--blue-light);color:var(--blue);font-weight:500}
.chk-pay.ghost{background:#fff;color:var(--navy);border:1px solid var(--border)}
.chk-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:.5px solid var(--border);font-size:14px;color:var(--navy)}
.chk-row:last-of-type{border-bottom:none}
.chk-row .s{font-size:12.5px;color:var(--muted)}
.chk-row b{font-weight:500}
.chk-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1.5px solid var(--border)}
.chk-tot .n{font-size:22px;font-weight:500;color:var(--navy)}
.chk-pay{margin-top:16px;background:var(--navy);color:#fff;border-radius:10px;padding:14px 0;text-align:center;font-size:14.5px;font-weight:500}
.chk-note{padding:12px 20px;background:#f7f9fb;border-top:.5px solid var(--border);font-size:11.5px;color:var(--hint);text-align:center;line-height:1.5}
@media(max-width:560px){ .chk{max-width:100%} .chk-st{font-size:10.5px} .chk-body{min-height:246px} }

/* ---- Movimiento reducido: se para el punto de stock ---- */

@media (prefers-reduced-motion:reduce){
  .chk-st,.chk-st:after,.chk-scr{animation:none}
  .chk-st:after{transform:scaleX(0)}
  .chk-st.p2{color:var(--blue);background:#fff}
  .chk-st.p2:after{transform:scaleX(1)}
  .chk-body{min-height:0}
  .chk-scr{position:relative;left:auto;right:auto;top:auto;opacity:0;transform:none}
  .chk-scr.p2{opacity:1}
  .prod-stock i,.prod-o.v1,.prod-o.v2,.prod-o.v3,.prod-shot,.prod-thumbs span{animation:none}
  .prod-shot{opacity:0}
  .prod-shot.v2{opacity:1}
  .prod-thumbs span.t2{border-color:var(--blue)}
  .prod-o.v2{border-color:var(--blue);background:var(--blue-light);color:var(--blue);font-weight:500}
  .prod-stocks,.prod-pz{height:auto}
  .prod-stock,.prod-price{position:relative;opacity:0;animation:none}
  .prod-stock.v2,.prod-price.v2{opacity:1}
}


/* ══════════ EXCEPCIONES POR PAGINA ══════════
   Lo unico que difiere entre paginas y no puede unificarse.
   Se acota con la clase que WordPress pone en el <body>. */

/* /diseno-web-pymes/ · la etiqueta del plan lleva texto propio */
body.page-id-12016 .plan--hot:before{content:"El más elegido por pymes"}

/* ═════════════════════════════════════════════════════════════════════
   PAGINA: /agencia-seo-ecommerce/  ·  anadido el 07/08/2026
   Componentes propios: .cat (mapa del catalogo), .ia (respuesta de IA),
   .keys (llavero plano) y .tl (linea de vida de una URL).
   ═════════════════════════════════════════════════════════════════ */
.hublink + .hublink{margin-top:16px}
.law-h h3,.step h3,.plan h4,.hublink .t,.tl-i h3{margin-top:0}
.tl-i.tl-i h3{font-size:18px;font-weight:500;line-height:1.3;margin:0 0 9px}

/* nota de la seccion de plataformas: mas aire y algo menos de cuerpo que
   la del proceso, porque sus tarjetas son mas cortas y quedaba pegada */
#plataformas .steps-note{margin-top:46px;max-width:940px}
/* el cierre de la linea de tiempo necesita separarse de la ultima columna */
#agotados .law-foot{margin-top:56px}
@media(max-width:560px){ #plataformas .steps-note{margin-top:30px} }

/* Las columnas de rejilla no encogen por debajo de su contenido salvo que se
   les diga. Sin esto, el mockup del catalogo desbordaba a lo ancho en movil y
   arrastraba a toda la seccion, con scroll horizontal en toda la pagina. */
#catalogo .split > *, #ia .split > *, #tuyo .split > *{min-width:0}

/* ---- S03 · EL MAPA DEL CATALOGO: URLs que se multiplican ---- */
.cat{max-width:460px;margin:0 auto;background:#fff;border:1px solid #dfe6ef;border-radius:18px;box-shadow:0 22px 50px rgba(16,24,40,.13);overflow:hidden}
.cat-top{background:#f4f6f9;border-bottom:.5px solid var(--border);padding:11px 14px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--hint)}
.cat-top .dot{width:9px;height:9px;border-radius:50%;background:#e2e6ec}
.cat-url{background:#fff;border:.5px solid var(--border);border-radius:20px;padding:4px 12px;flex:1;text-align:center}
.cat-url b{color:var(--navy);font-weight:500}
.cat-body{padding:20px}
.cat-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--navy);padding:8px 0}
.cat-row .lvl{width:14px;flex:none}
.cat-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-row .pill{font-size:10.5px;font-weight:600;border-radius:20px;padding:2px 9px;white-space:nowrap}
.cat-row .pill.ok{background:var(--green-light);color:var(--green)}
.cat-row .pill.bad{background:var(--red-light);color:var(--red)}
.cat-row .pill.dim{background:var(--gray);color:var(--hint)}
.cat-row.sub{padding-left:16px;color:var(--muted)}
.cat-row.sub2{padding-left:32px;color:var(--muted);font-size:12px}
.cat-sep{height:.5px;background:var(--border);margin:6px 0}
.cat-filters{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.cat-f{font-size:11px;border:1px solid var(--border);border-radius:7px;padding:5px 9px;color:var(--muted);background:#fff}
.cat-f.on{border-color:var(--blue);background:var(--blue-light);color:var(--blue);font-weight:500}
.cat-count{margin-top:14px;padding-top:14px;border-top:1.5px solid var(--border);display:flex;justify-content:space-between;align-items:baseline}
.cat-count span{font-size:12.5px;color:var(--muted)}
.cat-count .n{font-size:26px;font-weight:500;transition:color .4s var(--ease-out)}
.cat-count .n.bad{color:var(--red)}
.cat-count .n.ok{color:var(--green)}
.cat-note{padding:11px 20px;background:#f7f9fb;border-top:.5px solid var(--border);font-size:11.5px;color:var(--hint);text-align:center;line-height:1.5}
@media(max-width:560px){ .cat{max-width:100%} }
.reveal.in .cat-f{animation:catF .5s var(--ease-out) backwards}
.reveal.in .cat-f:nth-child(1){animation-delay:.20s}
.reveal.in .cat-f:nth-child(2){animation-delay:.45s}
.reveal.in .cat-f:nth-child(3){animation-delay:.70s}
.reveal.in .cat-f:nth-child(4){animation-delay:.95s}
@keyframes catF{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- S04 · LA IA RECOMENDANDO PRODUCTOS (banda oscura) ----------------
   Ciclo de 14 s: se escribe la pregunta, piensa, y la respuesta aparece
   linea a linea hasta citar la tienda. -------------------------------- */
.ia{font-size:13px;line-height:1.6}
.ia-cycle{animation:iaFade 14s var(--ease-out) infinite}
@keyframes iaFade{0%,2%{opacity:0}5%,95%{opacity:1}100%{opacity:0}}
.ia-msg{display:flex;gap:9px;align-items:flex-start;margin-bottom:14px}
.ia-av{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}
.ia-av.you{background:var(--gray);color:var(--muted)}
.ia-av.bot{background:#0d1117;color:#fff}
.ia-q{background:var(--gray);border-radius:12px;padding:9px 13px;color:var(--navy);max-width:100%}
.ia-q b{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;font-weight:400;width:0;animation:iaType 14s steps(40,end) infinite}
@keyframes iaType{0%{width:0}12%{width:40ch}100%{width:40ch}}
.ia-a{flex:1;min-width:0}
.ia-dots{display:inline-flex;gap:4px;padding:9px 2px;animation:iaDots 14s var(--ease-out) infinite}
.ia-dots i{width:5px;height:5px;border-radius:50%;background:var(--hint);animation:iaBlink 1.1s var(--ease-in-out) infinite}
.ia-dots i:nth-child(2){animation-delay:.18s}
.ia-dots i:nth-child(3){animation-delay:.36s}
@keyframes iaBlink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes iaDots{0%,13%{opacity:0}14%,21%{opacity:1}22%,100%{opacity:0;height:0;padding:0}}
.ia-line{opacity:0;margin-bottom:9px;color:var(--navy);animation:iaLine 14s var(--ease-out) infinite}
.ia-line:nth-of-type(1){animation-delay:0s}
.ia-rec{display:flex;gap:9px;align-items:flex-start;border:.5px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#fff;opacity:0;animation:iaLine 14s var(--ease-out) infinite}
.ia-rec .num{width:18px;height:18px;border-radius:50%;background:var(--gray);color:var(--muted);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.ia-rec .tx{flex:1;min-width:0}
.ia-rec .nm{font-weight:500;color:var(--navy);margin-bottom:2px}
.ia-rec .ds{font-size:11.5px;color:var(--muted);line-height:1.5}
.ia-rec.mine{border-color:#bfe6cb;background:linear-gradient(180deg,#f4fbf6,#fff);box-shadow:0 8px 20px rgba(22,163,74,.10)}
.ia-rec.mine .num{background:var(--green-light);color:var(--green)}
.ia-src{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--green);background:var(--green-light);border-radius:20px;padding:3px 10px;margin-top:6px}
.ia-src svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ia-line.f1,.ia-rec.f1{animation-delay:0s}
@keyframes iaLine{0%,23%{opacity:0;transform:translateY(6px)}
 28%,92%{opacity:1;transform:none}
 100%{opacity:0;transform:none}}
.ia-rec.f2{animation-name:iaLine2}
@keyframes iaLine2{0%,29%{opacity:0;transform:translateY(6px)}34%,92%{opacity:1;transform:none}100%{opacity:0}}
.ia-rec.f3{animation-name:iaLine3}
@keyframes iaLine3{0%,35%{opacity:0;transform:translateY(6px)}40%,92%{opacity:1;transform:none}100%{opacity:0}}
.ia-rec.f4{animation-name:iaLine4}
@keyframes iaLine4{0%,41%{opacity:0;transform:translateY(6px)}46%,92%{opacity:1;transform:none}100%{opacity:0}}
.ia-glow{animation:iaGlow 14s var(--ease-out) infinite}
@keyframes iaGlow{0%,46%{box-shadow:0 8px 20px rgba(22,163,74,.10)}
 52%{box-shadow:0 0 0 4px rgba(22,163,74,.18),0 8px 20px rgba(22,163,74,.10)}
 60%,100%{box-shadow:0 8px 20px rgba(22,163,74,.10)}}
.ia-foot{font-size:11px;color:var(--hint);border-top:.5px solid var(--border);margin-top:12px;padding-top:10px;display:flex;align-items:center;gap:6px}
.ia-foot i{width:6px;height:6px;border-radius:50%;background:var(--green);font-style:normal}

/* ---- S08 · LLAVES: formas planas sobre fondo tintado ------------------ */
.keys{position:relative;border-radius:22px;padding:34px 20px 30px;
  background:radial-gradient(120% 120% at 50% 0%,#eef4fd 0%,#e6eefb 100%);overflow:hidden}
.keys:after{content:"";position:absolute;right:-70px;bottom:-90px;width:240px;height:240px;border-radius:50%;
  background:rgba(26,115,232,.06);pointer-events:none}
.keys svg{width:100%;max-width:430px;height:auto;display:block;margin:0 auto;position:relative}
.keys text{font-family:inherit;font-size:13.5px;font-weight:600}
.keys-legend{position:relative;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.keys-legend span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--navy)}
.keys-legend i{width:9px;height:9px;border-radius:50%;flex:none}
.kg{transform-origin:212px 90px;opacity:0}
.reveal.in .kg{animation:kDrop .75s var(--ease-out) forwards, kSwing 5.2s var(--ease-in-out) infinite}
.reveal.in .kg.k1{animation-delay:.15s,1.0s}
.reveal.in .kg.k2{animation-delay:.40s,1.2s}
.reveal.in .kg.k3{animation-delay:.65s,1.4s}
@keyframes kDrop{from{opacity:0;transform:translateY(-16px) rotate(var(--rot,0deg))}
 to{opacity:1;transform:translateY(0) rotate(var(--rot,0deg))}}
@keyframes kSwing{0%,100%{transform:rotate(calc(var(--rot,0deg) - 2.2deg))}
 50%{transform:rotate(calc(var(--rot,0deg) + 2.2deg))}}
.kg.k1{--rot:-26deg}
.kg.k2{--rot:0deg}
.kg.k3{--rot:26deg}
.k-ring{opacity:0}
.reveal.in .k-ring{animation:kFade .6s var(--ease-out) forwards}
@keyframes kFade{to{opacity:1}}
.k-seal{opacity:0;transform-origin:212px 300px}
.reveal.in .k-seal{animation:kSeal .7s var(--ease-out) 1.35s forwards}
@keyframes kSeal{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.10)}100%{opacity:1;transform:scale(1)}}
.keys-foot{position:relative;text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.6}
.keys-foot b{color:var(--navy);font-weight:500}

/* ---- S05 · LINEA DE VIDA DE UNA URL DE PRODUCTO ---------------------- */
.tl{position:relative;max-width:1020px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.tl:before{content:"";position:absolute;left:16%;right:16%;top:11px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#e9b8b8 0%,#f0cf95 50%,#9fd6b3 100%);transform:scaleX(0);transform-origin:left}
.tl.in:before{animation:tlLine 1.3s var(--ease-out) .15s forwards}
@keyframes tlLine{to{transform:scaleX(1)}}
.tl-i{text-align:center;position:relative;opacity:0;transform:translateY(10px)}
.tl.in .tl-i{animation:tlIn .6s var(--ease-out) forwards}
.tl.in .tl-i:nth-child(2){animation-delay:.45s}
.tl.in .tl-i:nth-child(3){animation-delay:.8s}
.tl.in .tl-i:nth-child(4){animation-delay:1.15s}
@keyframes tlIn{to{opacity:1;transform:none}}
.tl-dot{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;position:relative;z-index:1}
.tl-dot:after{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.tl-i.bad .tl-dot{border-color:var(--red);color:var(--red)}
.tl-i.mid .tl-dot{border-color:var(--amber);color:var(--amber)}
.tl-i.ok .tl-dot{border-color:var(--green);color:var(--green);box-shadow:0 0 0 0 rgba(22,163,74,.30)}
.tl.in .tl-i.ok .tl-dot{animation:tlPulse 2.2s var(--ease-out) 1.7s 2}
@keyframes tlPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.32)}70%{box-shadow:0 0 0 12px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.tl-code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:700;letter-spacing:.06em;border-radius:20px;padding:4px 12px;margin-bottom:12px}
.tl-i.bad .tl-code{background:var(--red-light);color:var(--red)}
.tl-i.mid .tl-code{background:var(--amber-light);color:var(--amber)}
.tl-i.ok .tl-code{background:var(--green-light);color:var(--green)}
.tl-i h3{font-size:18px;font-weight:500;margin:0 0 9px;line-height:1.3}
.tl-i p{font-size:14.5px;color:var(--muted);line-height:1.7;max-width:300px;margin:0 auto}
.tl-i p code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--gray);border-radius:5px;padding:1px 5px;color:var(--navy)}
@media(max-width:980px){
  .tl{grid-template-columns:1fr;gap:34px;max-width:520px;padding-left:40px}
  .tl:before{left:11px;right:auto;top:6%;bottom:6%;width:2px;height:auto;
    background:linear-gradient(180deg,#e9b8b8 0%,#f0cf95 50%,#9fd6b3 100%);transform:scaleY(0);transform-origin:top}
  .tl.in:before{animation:tlLineV 1.3s var(--ease-out) .15s forwards}
  @keyframes tlLineV{to{transform:scaleY(1)}}
  .tl-i{text-align:left}
  .tl-dot{position:absolute;left:-40px;top:2px;margin:0}
  .tl-i p{max-width:none;margin:0}
}

/* ---- MOVIMIENTO REDUCIDO (pagina de ecommerce) ---- */
@media (prefers-reduced-motion:reduce){
  .cat-f{animation:none!important;opacity:1!important;transform:none!important}
  .tl-i{opacity:1!important;transform:none!important;animation:none!important}
  .tl:before{transform:scaleX(1)!important;animation:none!important}
  .tl-i.ok .tl-dot{animation:none!important}
  .kg,.k-ring,.k-seal{animation:none!important;opacity:1!important}
  .kg.k1{transform:rotate(-26deg)} .kg.k3{transform:rotate(26deg)}
  .k-seal{transform:none}
  .ia-cycle,.ia-q b,.ia-line,.ia-rec,.ia-glow,.ia-dots i{animation:none!important;opacity:1!important;transform:none!important}
  .ia-q b{width:auto}
  .ia-dots{display:none}
}


/* ═══ PAGINA: /diseno-web-seo/  ·  anadido el 07/08/2026 ═══════════════════
   Componentes propios: .dec (tabla de decisiones), .fun (embudo de CRO) y
   .cwv (medidores de Core Web Vitals).
   ══════════════════════════════════════════════════════════════════════ */
#orden .split > *, #velocidad .split > *, #tuyo .split > *{min-width:0}

/* ---- S03 · TABLA DE DECISIONES ---- */
.dec{max-width:560px;margin:0 auto}
.dec-hd{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;padding:0 0 11px;
  border-bottom:1.5px solid var(--border);font-size:11px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--hint)}
.dec-hd span:last-child{color:#c08a8a}
.dec-r{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:center;
  padding:15px 0;border-bottom:.5px solid var(--border);opacity:0}
.dec-r:last-of-type{border-bottom:none}
.reveal.in .dec-r{animation:decIn .55s var(--ease-out) both}
.reveal.in .dec-r:nth-of-type(2){animation-delay:.12s}
.reveal.in .dec-r:nth-of-type(3){animation-delay:.30s}
.reveal.in .dec-r:nth-of-type(4){animation-delay:.48s}
.reveal.in .dec-r:nth-of-type(5){animation-delay:.66s}
.reveal.in .dec-r:nth-of-type(6){animation-delay:.84s}
@keyframes decIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dec-a{font-size:14px;color:var(--navy);line-height:1.45;display:flex;gap:9px;align-items:flex-start;min-width:0}
.dec-a i{width:16px;height:16px;border-radius:5px;background:var(--green-light);color:var(--green);
  flex:none;margin-top:2px;display:flex;align-items:center;justify-content:center}
.dec-a i svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.dec-b{font-size:13px;color:var(--red);line-height:1.45;display:flex;gap:8px;align-items:flex-start;min-width:0}
.dec-b i{width:16px;height:16px;flex:none;margin-top:2px;color:#d99}
.dec-b i svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sec .dec-pie{margin-top:20px;padding-top:16px;border-top:1.5px solid var(--border);
  font-size:13px;color:var(--muted);line-height:1.65}
.dec-pie b{color:var(--navy);font-weight:500}
@media(max-width:560px){
  .dec{max-width:100%}
  .dec-hd{display:none}
  .dec-r{grid-template-columns:1fr;gap:7px;padding:14px 0}
  .dec-b{padding-left:25px}
}

/* ---- S04 · EMBUDO DE CONVERSION (banda oscura) ---- */
.fun{display:grid;gap:28px}
.fun-col{position:relative}
.fun-tit{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.fun-tit i{width:8px;height:8px;border-radius:50%;font-style:normal;flex:none}
.fun-col.antes .fun-tit{color:#e9a5a5}
.fun-col.antes .fun-tit i{background:#e9a5a5}
.fun-col.ahora .fun-tit{color:#7fd8a0}
.fun-col.ahora .fun-tit i{background:#7fd8a0}
.fun-paso{margin-bottom:13px}
.fun-et{display:block;font-size:12.5px;color:#c4d2e6;line-height:1.5;margin-bottom:5px}
.fun-et b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.fun-barra{display:block;height:20px;border-radius:6px;transform-origin:left;transform:scaleX(0);max-width:100%}
.reveal.in .fun-barra{animation:funBar .9s var(--ease-out) forwards}
.reveal.in .fun-paso:nth-of-type(2) .fun-barra{animation-delay:.15s}
.reveal.in .fun-paso:nth-of-type(3) .fun-barra{animation-delay:.45s}
@keyframes funBar{to{transform:scaleX(1)}}
.fun-col.antes .fun-barra{background:linear-gradient(90deg,rgba(233,165,165,.62),rgba(233,165,165,.24))}
.fun-col.ahora .fun-barra{background:linear-gradient(90deg,rgba(127,216,160,.68),rgba(127,216,160,.28))}
.fun-fin{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:#9fb1cc;display:flex;align-items:baseline;gap:9px}
.fun-fin b{font-size:22px;font-weight:600}
.fun-col.antes .fun-fin b{color:#e9a5a5}
.fun-col.ahora .fun-fin b{color:#7fd8a0}

/* ---- S05 · MEDIDORES DE VELOCIDAD ---- */
.cwv{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:620px;margin:0 auto}
.cwv-m{text-align:center}
.cwv-m svg{width:100%;max-width:120px;height:auto;display:block;margin:0 auto}
.cwv-arco{fill:none;stroke:#e9edf3;stroke-width:9;stroke-linecap:round}
.cwv-val{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:126;stroke-dashoffset:126}
.reveal.in .cwv-val{animation:cwvFill 1.4s var(--ease-out) forwards}
.reveal.in .cwv-m:nth-child(2) .cwv-val{animation-delay:.25s}
.reveal.in .cwv-m:nth-child(3) .cwv-val{animation-delay:.5s}
@keyframes cwvFill{to{stroke-dashoffset:var(--off,28)}}
.cwv-n{font-size:20px;font-weight:600;color:var(--navy);margin-top:-26px}
.cwv-k{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--green);margin-top:8px}
.cwv-d{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:5px;max-width:170px;margin-left:auto;margin-right:auto}
.sec .cwv-pie{max-width:660px;margin:44px auto 0;text-align:center;font-size:13px;color:var(--hint);line-height:1.7}
@media(max-width:560px){ .cwv{gap:10px} .cwv-n{font-size:17px;margin-top:-22px} .cwv-d{font-size:11px} .sec .cwv-pie{margin-top:38px;text-align:left} }

/* ---- MOVIMIENTO REDUCIDO ---- */
@media (prefers-reduced-motion:reduce){
  .dec-r{opacity:1!important;transform:none!important;animation:none!important}
  .fun-barra{transform:scaleX(1)!important;animation:none!important}
  .cwv-val{stroke-dashoffset:var(--off,28)!important;animation:none!important}
}


/* ═══ correcciones diseno-web-seo (margenes que pisaba .sec p) ═══ */
#velocidad .cwv-pie{margin:44px auto 0}
#orden .dec .dec-pie{margin-top:20px}
.reveal.in .dec-r:nth-of-type(2){animation-delay:.12s}
.reveal.in .dec-r:nth-of-type(3){animation-delay:.30s}
.reveal.in .dec-r:nth-of-type(4){animation-delay:.48s}
.reveal.in .dec-r:nth-of-type(5){animation-delay:.66s}
.reveal.in .dec-r:nth-of-type(6){animation-delay:.84s}
@media(max-width:560px){ #velocidad .cwv-pie{margin-top:38px} }


/* ═══ notas de cierre · arreglo global ═══════════════════════════════════
   .sec p,.hero p,.cta-final p{margin-top:0} es mas especifico que las clases
   de una sola palabra, asi que estaba dejando TODAS las notas de cierre del
   sitio pegadas al bloque de arriba. Con .sec delante recuperan su margen.
   ══════════════════════════════════════════════════════════════════════ */
.sec .case-note{margin-top:26px}
.sec .steps-note{margin-top:30px}
.sec .plans-note{margin-top:30px}
.sec .law-foot{margin-top:26px}


/* ═══ COMPONENTES PROPIOS DE /agencia-seo-pymes/ ═══════════════════════════
   Puntos de corte 980 y 560. min-width:0 en hijos de rejilla. Los margenes de
   las notas de cierre necesitan .sec o el id delante.
   ══════════════════════════════════════════════════════════════════════ */
#primera .split > *, #mes .split > *{min-width:0}

/* ---- S03 · CLICS POR POSICION EN GOOGLE ---- */
.ctr{max-width:600px;margin:0 auto}
.ctr-g{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;align-items:end;height:186px}
.ctr-c{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.ctr-p{font-size:11px;font-weight:600;color:var(--navy);text-align:center;margin-bottom:5px;
  font-variant-numeric:tabular-nums;opacity:0}
.reveal.in .ctr-p{animation:ctrTxt .5s var(--ease-out) both;animation-delay:.75s}
@keyframes ctrTxt{from{opacity:0}to{opacity:1}}
.ctr-v{border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--blue),#8fb3f2);
  height:var(--h,10%);transform:scaleY(0);transform-origin:bottom}
.ctr-c:nth-child(n+4) .ctr-v{background:linear-gradient(180deg,#b9c8de,#dde4ee)}
.reveal.in .ctr-v{animation:ctrUp .65s var(--ease-out) forwards}
.reveal.in .ctr-c:nth-child(2) .ctr-v{animation-delay:.06s}
.reveal.in .ctr-c:nth-child(3) .ctr-v{animation-delay:.12s}
.reveal.in .ctr-c:nth-child(4) .ctr-v{animation-delay:.18s}
.reveal.in .ctr-c:nth-child(5) .ctr-v{animation-delay:.24s}
.reveal.in .ctr-c:nth-child(6) .ctr-v{animation-delay:.30s}
.reveal.in .ctr-c:nth-child(7) .ctr-v{animation-delay:.36s}
.reveal.in .ctr-c:nth-child(8) .ctr-v{animation-delay:.42s}
.reveal.in .ctr-c:nth-child(9) .ctr-v{animation-delay:.48s}
.reveal.in .ctr-c:nth-child(10) .ctr-v{animation-delay:.54s}
@keyframes ctrUp{to{transform:scaleY(1)}}
.ctr-x{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:9px}
.ctr-n{font-size:11px;color:var(--hint);text-align:center;font-variant-numeric:tabular-nums;min-width:0}
.ctr-ejes{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;
  padding-top:13px;border-top:1.5px solid var(--border);gap:14px}
.ctr-ejes span{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hint)}
.ctr-ejes b{font-size:13px;font-weight:500;color:var(--navy)}
.ctr-pie{max-width:600px;font-size:13px;color:var(--muted);line-height:1.65}
.ctr-pie b{color:var(--navy);font-weight:500}
#primera .ctr-pie{margin:22px auto 0}
@media(max-width:560px){
  .ctr-g{height:150px;gap:3px}
  .ctr-x{gap:3px}
  .ctr-p{font-size:9.5px}
  .ctr-n{font-size:9.5px}
  .ctr-ejes{flex-direction:column;gap:6px}
}

/* ---- S04 · LAS BUSQUEDAS QUE VALEN DINERO (banda oscura) ---- */
.kws{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.kw{display:inline-flex;align-items:center;border-radius:999px;padding:8px 15px;
  font-size:13px;line-height:1.25;opacity:0}
.kw.c{background:rgba(127,216,160,.15);color:#a6ecc2;border:1px solid rgba(127,216,160,.32)}
.kw.m{background:rgba(122,162,247,.13);color:#aec8fc;border:1px solid rgba(122,162,247,.3)}
.kw.i{background:rgba(255,255,255,.045);color:#8296b3;border:1px solid rgba(255,255,255,.09)}
.kw.g{font-size:15px;padding:10px 18px;font-weight:500}
.reveal.in .kw{animation:kwIn .45s var(--ease-out) both}
.reveal.in .kw:nth-child(1){animation-delay:.05s}
.reveal.in .kw:nth-child(2){animation-delay:.11s}
.reveal.in .kw:nth-child(3){animation-delay:.17s}
.reveal.in .kw:nth-child(4){animation-delay:.23s}
.reveal.in .kw:nth-child(5){animation-delay:.29s}
.reveal.in .kw:nth-child(6){animation-delay:.35s}
.reveal.in .kw:nth-child(7){animation-delay:.41s}
.reveal.in .kw:nth-child(8){animation-delay:.47s}
.reveal.in .kw:nth-child(9){animation-delay:.53s}
.reveal.in .kw:nth-child(10){animation-delay:.59s}
.reveal.in .kw:nth-child(11){animation-delay:.65s}
.reveal.in .kw:nth-child(12){animation-delay:.71s}
@keyframes kwIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.kw-leg{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12)}
.kw-l{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#9fb1cc;min-width:0}
.kw-l i{width:9px;height:9px;border-radius:50%;flex:none}
.kw-l.c i{background:#7fd8a0}
.kw-l.m i{background:#7aa2f7}
.kw-l.i i{background:#5b6b85}

/* ---- S05 · separacion de la nota de cierre de la linea de tiempo ---- */
#mes .law-foot{margin-top:48px}

/* ---- MOVIMIENTO REDUCIDO (SEO para pymes) ---- */
@media (prefers-reduced-motion:reduce){
  .ctr-v{transform:scaleY(1)!important;animation:none!important}
  .ctr-p{opacity:1!important;animation:none!important}
  .kw{opacity:1!important;transform:none!important;animation:none!important}
}


/* ═══ COMPONENTES DE /agencia-seo-startups/ ═════════════════════════════ */
#informe .split > *{min-width:0}
.pln{max-width:720px;margin:0 auto}
.pln-ejes{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-bottom:9px}
.pln-ejes span{font-size:10px;color:var(--hint);text-align:center;font-variant-numeric:tabular-nums}
.pln-r{margin-bottom:26px}
.pln-r:last-of-type{margin-bottom:0}
.pln-t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.pln-r.ok .pln-t{color:var(--green)}
.pln-b{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:11px}
.pln-c{height:30px;border-radius:4px;background:#e4e9f1;transform:scaleY(0);transform-origin:bottom}
.reveal.in .pln-c{animation:plnIn .45s var(--ease-out) forwards}
.reveal.in .pln-r.ok .pln-c{animation-delay:.25s}
@keyframes plnIn{to{transform:scaleY(1)}}
.pln-c.a{background:#cdd8e8}
.pln-c.b{background:#9fb8e0}
.pln-c.v{background:var(--green)}
.pln-lg{display:flex;flex-wrap:wrap;gap:14px;margin-top:11px}
.pln-l{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);min-width:0}
.pln-l i{width:10px;height:10px;border-radius:3px;flex:none}
.pln-l.a i{background:#cdd8e8}
.pln-l.b i{background:#9fb8e0}
.pln-l.v i{background:var(--green)}
.pln-h{margin-top:12px;font-size:13.5px;color:var(--navy);line-height:1.5}
.pln-h b{font-weight:500}
.pln-r.ok .pln-h b{color:var(--green)}
.pln-pie{max-width:720px;font-size:13px;color:var(--muted);line-height:1.65}
.pln-pie b{color:var(--navy);font-weight:500}
#plazos .pln-pie{margin:30px auto 0}
@media(max-width:560px){
  .pln-c{height:24px;border-radius:3px}
  .pln-b,.pln-ejes{gap:2px}
  .pln-ejes span{font-size:8.5px}
  .pln-h{font-size:13px}
}
.mat{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.mat-c{min-width:0}
.mat-t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7b8ba6}
.mat-c.ok .mat-t{color:#a6ecc2}
.mat-n{font-size:30px;font-weight:500;color:#fff;line-height:1;margin-top:9px;font-variant-numeric:tabular-nums}
.mat-c.ok .mat-n{color:#a6ecc2}
.mat-n small{font-size:12.5px;font-weight:400;color:#8ea3c2;margin-left:5px}
.mat-g{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:15px}
.mat-d{aspect-ratio:1/1;border-radius:3px;background:rgba(255,255,255,.08)}
.mat-d.on{background:#7fd8a0;opacity:0;transform:scale(.4)}
.reveal.in .mat-d.on{animation:matIn .45s var(--ease-out) both}
.reveal.in .mat-c.ok .mat-d.on{animation-delay:.25s}
@keyframes matIn{to{opacity:1;transform:none}}
.mat-w{font-size:12.5px;color:#9fb1cc;line-height:1.6;margin-top:14px}
.mat-w b{color:#fff;font-weight:500}
.sec .mat-pie{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:#9fb1cc;line-height:1.7}
.mat-pie b{color:#fff;font-weight:500}
@media(max-width:560px){ .mat{grid-template-columns:1fr;gap:26px} }
.arq{max-width:720px;margin:0 auto}
.arq-h{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;padding:0 0 11px;border-bottom:1.5px solid var(--border);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--hint)}
.arq-i{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;align-items:baseline;padding:13px 0;border-bottom:.5px solid var(--border);opacity:0}
.arq-i:last-of-type{border-bottom:none}
.reveal.in .arq-i{animation:arqIn .5s var(--ease-out) both}
.reveal.in .arq-i:nth-of-type(2){animation-delay:.09s}
.reveal.in .arq-i:nth-of-type(3){animation-delay:.18s}
.reveal.in .arq-i:nth-of-type(4){animation-delay:.27s}
.reveal.in .arq-i:nth-of-type(5){animation-delay:.36s}
.reveal.in .arq-i:nth-of-type(6){animation-delay:.45s}
.reveal.in .arq-i:nth-of-type(7){animation-delay:.54s}
@keyframes arqIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.arq-u{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--navy);min-width:0;overflow-wrap:anywhere;display:flex;gap:8px;align-items:baseline}
.arq-u span{color:var(--hint);flex:none}
.arq-i.nueva .arq-u{color:var(--blue)}
.arq-d{font-size:13px;color:var(--muted);line-height:1.55;min-width:0}
.arq-tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:2px 9px;margin-left:7px;vertical-align:1px}
.arq-i.nueva .arq-tag{background:var(--green-light);color:var(--green)}
.arq-i.ya .arq-tag{background:var(--gray);color:var(--hint)}
.arq-i.cae .arq-tag{background:var(--red-light);color:var(--red)}
@media(max-width:560px){
  .arq-h{display:none}
  .arq-i{grid-template-columns:1fr;gap:6px;padding:14px 0}
}
@media (prefers-reduced-motion:reduce){
  .pln-c{transform:none!important;animation:none!important}
  .mat-d.on,.arq-i{opacity:1!important;transform:none!important;animation:none!important}
}


/* ═══ COMPONENTES DE /agencia-seo-abogados/ ═════════════════════════════ */
#serp .split > *{min-width:0}
.tri{max-width:700px;margin:0 auto}
.tri-i{display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:center;padding:16px 0;border-bottom:.5px solid var(--border);opacity:0}
.tri-i:last-of-type{border-bottom:none}
.reveal.in .tri-i{animation:triIn .5s var(--ease-out) both}
.reveal.in .tri-i:nth-of-type(2){animation-delay:.11s}
.reveal.in .tri-i:nth-of-type(3){animation-delay:.22s}
.reveal.in .tri-i:nth-of-type(4){animation-delay:.33s}
.reveal.in .tri-i:nth-of-type(5){animation-delay:.44s}
@keyframes triIn{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
.tri-q{font-size:15.5px;color:var(--navy);line-height:1.45;min-width:0}
.tri-v{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:3px 11px;white-space:nowrap;justify-self:end}
.tri-v.si{background:var(--green-light);color:var(--green)}
.tri-v.no{background:var(--gray);color:var(--hint)}
.tri-v.mal{background:var(--red-light);color:var(--red)}
.tri-w{grid-column:1/-1;font-size:13px;color:var(--muted);line-height:1.6}
.tri-w b{color:var(--navy);font-weight:500}
.tri-pie{max-width:700px;font-size:13px;color:var(--muted);line-height:1.65}
.tri-pie b{color:var(--navy);font-weight:500}
#llamadas .tri-pie{margin:26px auto 0}
@media(max-width:560px){
  .tri-i{grid-template-columns:1fr;gap:7px}
  .tri-v{justify-self:start}
  .tri-q{font-size:15px}
}
.srp{max-width:520px}
.srp-b{padding:0 0 0 18px;border-left:3px solid;margin-bottom:22px;opacity:0}
.srp-b:last-of-type{margin-bottom:0}
.reveal.in .srp-b{animation:srpIn .5s var(--ease-out) both}
.reveal.in .srp-b:nth-of-type(2){animation-delay:.15s}
.reveal.in .srp-b:nth-of-type(3){animation-delay:.30s}
@keyframes srpIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.srp-b.ads{border-color:#e9a5a5}
.srp-b.map{border-color:#7aa2f7}
.srp-b.org{border-color:#7fd8a0}
.srp-t{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.srp-b.ads .srp-t{color:#e9a5a5}
.srp-b.map .srp-t{color:#aec8fc}
.srp-b.org .srp-t{color:#a6ecc2}
.srp-h{font-size:15px;color:#fff;line-height:1.45;margin-top:5px;font-weight:500}
.srp-w{font-size:12.5px;color:#9fb1cc;line-height:1.65;margin-top:6px}
.srp-flota{display:flex;align-items:center;gap:12px;margin:22px 0;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7b8ba6}
.srp-flota:before,.srp-flota:after{content:"";flex:1;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 5px,transparent 5px 10px)}
.sec .srp-pie{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:#9fb1cc;line-height:1.7}
.srp-pie b{color:#fff;font-weight:500}
.aut{max-width:600px;margin:0 auto}
.aut-c{padding-top:20px;border-top:2px solid var(--navy)}
.aut-r{display:flex;gap:16px;align-items:flex-start}
.aut-av{width:54px;height:54px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;background:var(--blue-light);color:var(--blue)}
.aut-b{min-width:0}
.aut-n{font-size:17px;font-weight:500;color:var(--navy);line-height:1.3}
.aut-col{font-size:12.5px;color:var(--muted);margin-top:4px}
.aut-col b{color:var(--navy);font-weight:500}
.aut-m{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.aut-t{font-size:11.5px;border-radius:20px;padding:4px 11px;background:var(--gray);color:var(--muted)}
.aut-f{margin-top:16px;padding-top:13px;border-top:1px dashed var(--border);font-size:12.5px;color:var(--hint);line-height:1.6}
.aut-s{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;padding-top:24px;border-top:1.5px solid var(--border)}
.aut-si{min-width:0;opacity:0}
.reveal.in .aut-si{animation:autIn .5s var(--ease-out) both}
.reveal.in .aut-si:nth-of-type(2){animation-delay:.13s}
.reveal.in .aut-si:nth-of-type(3){animation-delay:.26s}
@keyframes autIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.aut-sn{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green)}
.aut-sh{font-size:14.5px;font-weight:500;color:var(--navy);line-height:1.35;margin-top:6px}
.aut-sw{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:6px}
.aut-pie{max-width:600px;font-size:13px;color:var(--muted);line-height:1.65}
.aut-pie b{color:var(--navy);font-weight:500}
#firma .aut-pie{margin:26px auto 0}
@media(max-width:560px){
  .aut-s{grid-template-columns:1fr;gap:22px}
  .aut-av{width:46px;height:46px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .tri-i,.srp-b,.aut-si{opacity:1!important;transform:none!important;animation:none!important}
}


/* ═══ COMPONENTES DE /agencia-seo-psicologos/ ═══════════════════════════ */
#agenda .split > *{min-width:0}
.voz{max-width:620px;margin:0 auto}
.voz-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hint);margin-bottom:14px}
.voz-h.ok{color:var(--green)}
.voz-g{margin-bottom:34px}
.voz-g:last-of-type{margin-bottom:0}
.voz-i{padding:13px 0 13px 20px;border-left:2px solid var(--green);opacity:0}
.voz-i + .voz-i{margin-top:4px}
.reveal.in .voz-i{animation:vozIn .5s var(--ease-out) both}
.reveal.in .voz-i:nth-of-type(2){animation-delay:.10s}
.reveal.in .voz-i:nth-of-type(3){animation-delay:.20s}
.reveal.in .voz-i:nth-of-type(4){animation-delay:.30s}
@keyframes vozIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.voz-q{font-size:16.5px;color:var(--navy);line-height:1.45}
.voz-w{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:6px}
.voz-w b{color:var(--navy);font-weight:500}
.voz-g.pro .voz-i{border-left-color:#e2e7ee;padding-top:10px;padding-bottom:10px}
.voz-g.pro .voz-q{font-size:15px;color:var(--hint)}
.voz-pie{max-width:620px;font-size:13px;color:var(--muted);line-height:1.65}
.voz-pie b{color:var(--navy);font-weight:500}
#palabras .voz-pie{margin:26px auto 0}
@media(max-width:560px){ .voz-q{font-size:15px} .voz-g.pro .voz-q{font-size:14px} }
.ag{max-width:400px}
.ag-d,.ag-g{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.ag-d{margin-bottom:10px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:#7b8ba6}
.ag-g{margin-bottom:7px}
.ag-c{height:32px;border-radius:6px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
.ag-c.f{background:rgba(122,162,247,.28);border-color:transparent}
.ag-c.n{background:rgba(127,216,160,.55);border-color:transparent;opacity:0}
.reveal.in .ag-c.n{animation:agIn .45s var(--ease-out) both}
.reveal.in .ag-g:nth-of-type(2) .ag-c.n{animation-delay:.20s}
.reveal.in .ag-g:nth-of-type(3) .ag-c.n{animation-delay:.40s}
.reveal.in .ag-g:nth-of-type(4) .ag-c.n{animation-delay:.60s}
.reveal.in .ag-g:nth-of-type(5) .ag-c.n{animation-delay:.80s}
@keyframes agIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.ag-leg{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.ag-l{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#9fb1cc;min-width:0}
.ag-l i{width:11px;height:11px;border-radius:3px;flex:none}
.ag-l.f i{background:rgba(122,162,247,.6)}
.ag-l.n i{background:rgba(127,216,160,.75)}
.ag-l.v i{background:rgba(255,255,255,.12)}
.sec .ag-pie{margin-top:22px;font-size:12.5px;color:#9fb1cc;line-height:1.7}
.ag-pie b{color:#fff;font-weight:500}
@media(max-width:560px){ .ag-c{height:27px} .ag-d,.ag-g{gap:5px} }
@media (prefers-reduced-motion:reduce){
  .voz-i,.ag-c.n{opacity:1!important;transform:none!important;animation:none!important}
}

/* ═══ COMPONENTES DE /agencia-seo-inmobiliarias/ ════════════════════════ */
#quien .split > *{min-width:0}
.vid{max-width:700px;margin:0 auto}
.vid-t{display:flex;gap:3px}
.vid-s{padding:16px 14px 0 0;border-top:5px solid;min-width:0;opacity:0}
.reveal.in .vid-s{animation:vidIn .5s var(--ease-out) both}
.reveal.in .vid-s:nth-of-type(2){animation-delay:.16s}
.reveal.in .vid-s:nth-of-type(3){animation-delay:.32s}
.reveal.in .vid-s:nth-of-type(4){animation-delay:.48s}
@keyframes vidIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vid-s.a{flex:14;border-color:#cbd8ea}
.vid-s.b{flex:20;border-color:#8fb3f2}
.vid-s.c{flex:26;border-color:var(--green)}
.vid-s.d{flex:22;border-color:var(--red)}
.vid-n{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hint)}
.vid-h{font-size:14.5px;font-weight:500;color:var(--navy);line-height:1.35;margin-top:6px}
.vid-s.d .vid-h{color:var(--red)}
.vid-w{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:6px}
.vid-sal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;padding-top:24px;border-top:1.5px solid var(--border)}
.vid-o{min-width:0}
.vid-c{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:700;letter-spacing:.05em;border-radius:20px;padding:3px 11px;display:inline-block}
.vid-o.no .vid-c{background:var(--red-light);color:var(--red)}
.vid-o.si .vid-c{background:var(--green-light);color:var(--green)}
.vid-o.ok .vid-c{background:var(--blue-light);color:var(--blue)}
.vid-o p{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:9px}
.vid-o b{color:var(--navy);font-weight:500}
.vid-pie{max-width:700px;font-size:13px;color:var(--muted);line-height:1.65}
.vid-pie b{color:var(--navy);font-weight:500}
#fichas .vid-pie{margin:26px auto 0}
@media(max-width:560px){
  .vid-t{flex-direction:column;gap:0}
  .vid-s{flex:none!important;padding:14px 0 18px;border-top-width:4px}
  .vid-sal{grid-template-columns:1fr;gap:20px}
}
.qui{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.qui-c{min-width:0}
.qui-t{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#7b8ba6}
.qui-q{font-size:14.5px;color:#fff;line-height:1.4;margin:7px 0 14px}
.qui-l{display:flex;flex-direction:column;gap:6px}
.qui-e{font-size:12.5px;line-height:1.35;border-radius:7px;padding:8px 11px;background:rgba(255,255,255,.05);color:#8ea3c2;min-width:0;opacity:0}
.reveal.in .qui-e{animation:quiIn .4s var(--ease-out) both}
.reveal.in .qui-e:nth-child(2){animation-delay:.05s}
.reveal.in .qui-e:nth-child(3){animation-delay:.10s}
.reveal.in .qui-e:nth-child(4){animation-delay:.15s}
.reveal.in .qui-e:nth-child(5){animation-delay:.20s}
.reveal.in .qui-e:nth-child(6){animation-delay:.25s}
.reveal.in .qui-e:nth-child(7){animation-delay:.30s}
.reveal.in .qui-e:nth-child(8){animation-delay:.35s}
@keyframes quiIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.qui-e.tu{background:rgba(127,216,160,.18);color:#a6ecc2;font-weight:500}
.qui-e.hueco{background:none;border:1px dashed rgba(127,216,160,.4);color:#7fd8a0}
.qui-v{font-size:12.5px;color:#9fb1cc;line-height:1.65;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.qui-v b{color:#fff;font-weight:500}
.sec .qui-pie{margin-top:26px;font-size:12.5px;color:#9fb1cc;line-height:1.7}
.qui-pie b{color:#fff;font-weight:500}
@media(max-width:560px){ .qui{grid-template-columns:1fr;gap:30px} }
@media (prefers-reduced-motion:reduce){
  .vid-s,.qui-e{opacity:1!important;transform:none!important;animation:none!important}
}


/* ═══ COMPONENTES DE /agencia-geo/ ══════════════════════════════════════ */
#flujo .split > *{min-width:0}
.res{max-width:620px;margin:0 auto}
.res-p{display:flex;gap:11px;align-items:flex-start;padding-bottom:18px;border-bottom:1.5px solid var(--border);margin-bottom:20px}
.res-av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;background:var(--gray);color:var(--muted)}
.res-av.bot{background:var(--navy);color:#fff}
.res-t{font-size:14.5px;color:var(--navy);line-height:1.5;min-width:0}
.res-a{font-size:15px;color:var(--navy);line-height:1.85;min-width:0}
.res-cit{display:inline-block;font-size:10px;font-weight:700;border-radius:5px;padding:1px 6px;background:var(--gray);color:var(--muted);vertical-align:2px;margin:0 1px;opacity:0}
.res-cit.tu{background:var(--green-light);color:var(--green)}
.reveal.in .res-cit{animation:resCit .45s var(--ease-out) both}
.reveal.in .res-cit:nth-of-type(1){animation-delay:.55s}
.reveal.in .res-cit:nth-of-type(2){animation-delay:.75s}
.reveal.in .res-cit:nth-of-type(3){animation-delay:.95s}
@keyframes resCit{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.res-f{margin-top:24px;padding-top:18px;border-top:1.5px solid var(--border)}
.res-fh{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--hint);margin-bottom:12px}
.res-fi{display:flex;gap:11px;align-items:baseline;font-size:13px;color:var(--muted);padding:8px 0;line-height:1.5;min-width:0}
.res-fi b{font-weight:700;color:var(--hint);flex:none;font-size:10px;border-radius:5px;padding:2px 6px;background:var(--gray)}
.res-fi.tu{color:var(--navy)}
.res-fi.tu b{background:var(--green-light);color:var(--green)}
.res-pie{max-width:620px;font-size:13px;color:var(--muted);line-height:1.65}
.res-pie b{color:var(--navy);font-weight:500}
#respuesta .res-pie{margin:26px auto 0}
@media(max-width:560px){ .res-a{font-size:14.5px;line-height:1.8} }
.flu{max-width:520px}
.flu-p{position:relative;padding:0 0 24px 26px;border-left:2px solid rgba(255,255,255,.13);opacity:0}
.flu-p:last-of-type{border-left-color:transparent;padding-bottom:0}
.reveal.in .flu-p{animation:fluIn .5s var(--ease-out) both}
.reveal.in .flu-p:nth-of-type(2){animation-delay:.15s}
.reveal.in .flu-p:nth-of-type(3){animation-delay:.30s}
.reveal.in .flu-p:nth-of-type(4){animation-delay:.45s}
@keyframes fluIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.flu-p:before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:#7aa2f7;box-shadow:0 0 0 4px rgba(122,162,247,.15)}
.flu-p.ok:before{background:#7fd8a0;box-shadow:0 0 0 4px rgba(127,216,160,.15)}
.flu-n{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#7b8ba6}
.flu-h{font-size:14.5px;font-weight:500;color:#fff;line-height:1.4;margin-top:5px}
.flu-w{font-size:12.5px;color:#9fb1cc;line-height:1.65;margin-top:6px}
.flu-qs{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.flu-q{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;border-radius:6px;padding:5px 9px;background:rgba(122,162,247,.12);color:#aec8fc;min-width:0}
.sec .flu-pie{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:#9fb1cc;line-height:1.7}
.flu-pie b{color:#fff;font-weight:500}
@media (prefers-reduced-motion:reduce){
  .res-cit,.flu-p{opacity:1!important;transform:none!important;animation:none!important}
}



/* ═══════════════════════════════════════════════════════════
   MADRE · /automatizaciones-ia/
   ═══════════════════════════════════════════════════════════ */
/* ══════════ S03 · EL COSTE DE LA TAREA REPETITIVA ══════════
   Tabla de datos reales, no mockup. Las filas entran una a una y el total
   se cuenta solo. El movimiento ES el argumento: ver cómo se acumulan las
   horas es el mensaje de la sección. */
.tar{max-width:1000px;margin:0 auto;background:#fff;border:.5px solid var(--border);border-radius:18px;overflow:hidden}
.tar-hd,.tar-row{display:grid;grid-template-columns:1fr 92px 92px 104px;gap:14px;align-items:center;padding:15px 28px}
.tar-hd{background:var(--gray-mid);border-bottom:.5px solid var(--border);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.tar-hd span:not(:first-child),.tar-row .n{text-align:right}
.tar-row{border-bottom:.5px solid var(--border);font-size:14.5px;color:var(--navy)}
.tar-row .t{display:flex;align-items:center;gap:12px;line-height:1.45;min-width:0}
.tar-row .t i{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--blue-light);color:var(--blue)}
.tar-row .t i svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tar-row:nth-child(3) .t i{background:var(--amber-light);color:var(--amber)}
.tar-row:nth-child(4) .t i{background:var(--green-light);color:var(--green)}
.tar-row:nth-child(5) .t i{background:var(--red-light);color:var(--red)}
.tar-row .n{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.tar-row .n.big{color:var(--navy);font-weight:500;font-size:16px}
.tar-tot{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:22px 28px;background:var(--navy);color:#fff}
.tar-tot .l{font-size:14.5px;color:#c4d2e6;line-height:1.5}
.tar-tot .l b{color:#fff;font-weight:500}
.tar-tot .v{font-size:34px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.tar-foot{max-width:1000px;margin:26px auto 0;text-align:center;font-size:15px;color:var(--muted);line-height:1.7}
.tar-foot b{color:var(--navy);font-weight:500}
.tar-src{display:block;font-size:12.5px;color:var(--hint);margin-top:9px}
.reveal.in .tar-row{animation:tarIn .5s var(--ease-out) backwards}
.reveal.in .tar-row:nth-of-type(2){animation-delay:.10s}
.reveal.in .tar-row:nth-of-type(3){animation-delay:.26s}
.reveal.in .tar-row:nth-of-type(4){animation-delay:.42s}
.reveal.in .tar-row:nth-of-type(5){animation-delay:.58s}
@keyframes tarIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.reveal.in .tar-tot{animation:tarTot .6s var(--ease-out) .80s backwards}
@keyframes tarTot{from{opacity:0}to{opacity:1}}
@media(max-width:980px){
  .tar-hd{display:none}
  .tar-row{grid-template-columns:1fr auto;gap:6px 14px;padding:16px 22px}
  .tar-row .t{grid-column:1 / -1;margin-bottom:4px}
  .tar-row .n{text-align:left;font-size:13px}
  .tar-row .n:before{content:attr(data-l) " ";color:var(--hint)}
  .tar-row .n.big{text-align:right}
  .tar-tot{padding:20px 22px;grid-template-columns:1fr;gap:8px}
  .tar-tot .v{font-size:28px}
}
@media(max-width:560px){ .tar-foot{text-align:left} }

/* ══════════ S04 · EL RELEVO: ANTES A MANO / DESPUÉS SOLO ══════════
   Dos columnas con la misma cadena de cuatro herramientas. En la de la
   izquierda, entre cada par hay una persona copiando; en la derecha, una
   línea por la que viaja el dato. El movimiento ES el argumento: se ve
   pasar el dato de un extremo a otro sin que nadie lo toque. */
.rel{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:none}
.rel-c{border-radius:14px;padding:20px 18px 22px;border:.5px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.rel-c.si{border-color:rgba(95,213,140,.28);background:rgba(22,163,74,.07)}
.rel-h{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.rel-c.no .rel-h{color:#f0a6a6}
.rel-c.si .rel-h{color:#5fd58c}
.rel-h b{margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none;font-size:11.5px;color:#8ea3c2}
.rel-t{display:block;font-size:12.5px;text-align:center;padding:9px 8px;border-radius:9px;background:rgba(255,255,255,.07);border:.5px solid rgba(255,255,255,.14);color:#eaf1fb;line-height:1.3}
.rel-c.si .rel-t{background:rgba(26,115,232,.20);border-color:rgba(127,179,242,.40)}
.rel-j{height:34px;position:relative;display:flex;align-items:center;justify-content:center}
.rel-j:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.14)}
.rel-c.si .rel-j:before{background:rgba(95,213,140,.35)}
.rel-p{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:#f0a6a6;background:#141c2c;border:.5px solid rgba(240,166,166,.34);border-radius:20px;padding:3px 9px;white-space:nowrap}
.rel-p svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ⚠️ nth-of-type cuenta divs: rel-h es el div nº1, así que los tres
   rel-j son el 2, el 3 y el 4. No son el 2, el 4 y el 6. */
.rel-dot{position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;background:#5fd58c;transform:translateX(-50%);box-shadow:0 0 0 4px rgba(95,213,140,.16);animation:relRun 2.4s var(--ease-in-out) infinite}
@keyframes relRun{0%{top:-4px;opacity:0}14%{opacity:1}86%{opacity:1}100%{top:calc(100% - 5px);opacity:0}}
.rel-c.si .rel-j:nth-of-type(2) .rel-dot{animation-delay:0s}
.rel-c.si .rel-j:nth-of-type(3) .rel-dot{animation-delay:.5s}
.rel-c.si .rel-j:nth-of-type(4) .rel-dot{animation-delay:1s}
.rel-foot{margin-top:20px;padding-top:18px;border-top:.5px solid rgba(255,255,255,.10);font-size:12.5px;color:#9fb1cc;line-height:1.6}
.rel-foot b{color:#fff;font-weight:500}
@media(max-width:980px){ .rel{max-width:520px;margin:0 auto} }
@media(max-width:400px){ .rel{grid-template-columns:1fr} }

/* ══════════ S05 · LA CADENA DEL AGENTE, CON REVISIÓN HUMANA ══════════
   Carril vertical con bifurcación: los pasos se encienden en cascada y
   uno de ellos abre una rama hacia una persona. El "human in the loop"
   es el argumento de la sección, así que tiene que verse. */
.agn{max-width:520px;margin:0 auto;position:relative;padding-left:6px}
.agn:before{content:"";position:absolute;left:24px;top:26px;bottom:26px;width:2px;background:var(--border)}
.agn:after{content:"";position:absolute;left:24px;top:26px;width:2px;height:0;background:var(--blue);animation:agnFill 9s var(--ease-in-out) infinite}
@keyframes agnFill{0%,4%{height:0}62%,100%{height:calc(100% - 52px)}}
.agn-s{position:relative;display:grid;grid-template-columns:50px 1fr;gap:16px;align-items:flex-start;margin-bottom:16px}
.agn-s:last-child{margin-bottom:0}
.agn-d{width:38px;height:38px;border-radius:11px;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--hint);position:relative;z-index:1;margin-left:5px;transition:all .4s var(--ease-out)}
.agn-d svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.agn-s:nth-child(1) .agn-d{animation:agnOn 9s var(--ease-out) infinite;animation-delay:.3s}
.agn-s:nth-child(2) .agn-d{animation:agnOn 9s var(--ease-out) infinite;animation-delay:1.4s}
.agn-s:nth-child(3) .agn-d{animation:agnOn 9s var(--ease-out) infinite;animation-delay:2.5s}
.agn-s:nth-child(4) .agn-d{animation:agnOn 9s var(--ease-out) infinite;animation-delay:3.6s}
.agn-s:nth-child(5) .agn-d{animation:agnOn 9s var(--ease-out) infinite;animation-delay:4.7s}
@keyframes agnOn{0%,3%{border-color:var(--border);color:var(--hint);background:#fff;transform:scale(1)}
 7%{border-color:var(--blue);color:var(--blue);background:var(--blue-light);transform:scale(1.10)}
 12%,92%{border-color:var(--blue);color:var(--blue);background:var(--blue-light);transform:scale(1)}
 100%{border-color:var(--border);color:var(--hint);background:#fff;transform:scale(1)}}
.agn-b{background:#fff;border:.5px solid var(--border);border-radius:12px;padding:13px 16px;min-width:0}
.agn-b .h{font-size:14.5px;font-weight:500;color:var(--navy);line-height:1.35}
.agn-b .d{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:4px}
.agn-s.hum .agn-d{border-style:dashed}
.agn-s.hum .agn-b{background:var(--amber-light);border-color:#f0dcaa}
.agn-s.hum .agn-b .h{color:#7a4d05}
.agn-s.hum .agn-b .d{color:#8a6320}
.agn-s.hum .agn-d{animation-name:agnHum}
@keyframes agnHum{0%,3%{border-color:var(--border);color:var(--hint);background:#fff;transform:scale(1)}
 7%{border-color:var(--amber);color:var(--amber);background:var(--amber-light);transform:scale(1.10)}
 12%,92%{border-color:var(--amber);color:var(--amber);background:var(--amber-light);transform:scale(1)}
 100%{border-color:var(--border);color:var(--hint);background:#fff;transform:scale(1)}}
.agn-leg{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:26px auto 0;max-width:520px;font-size:12.5px;color:var(--muted)}
.agn-leg span{display:inline-flex;align-items:center;gap:7px}
.agn-leg i{width:10px;height:10px;border-radius:3px;background:var(--blue);flex-shrink:0}
.agn-leg i.h{background:var(--amber)}
@media(max-width:560px){
  .agn{padding-left:0;max-width:100%}
  .agn:before,.agn:after{left:18px}
  .agn-s{grid-template-columns:42px 1fr;gap:12px}
  .agn-d{width:34px;height:34px;margin-left:0}
}

/* ══════════ S06 · LA BANDEJA QUE SE VACÍA ══════════
   Mensajes entrando por tres canales; el asistente responde y uno se
   escala a una persona. Vuelve a contar la promesa: no contesta a todo. */
.inb{max-width:440px;margin:0 auto;background:#fff;border:1px solid #dfe6ef;border-radius:18px;box-shadow:0 22px 50px rgba(16,24,40,.13);overflow:hidden}
.inb-top{background:var(--navy);color:#fff;padding:14px 18px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500}
.inb-top i{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
.inb-top .c{margin-left:auto;font-size:11px;color:#9fb1cc;font-weight:400}
.inb-list{padding:14px;display:flex;flex-direction:column;gap:9px;min-height:288px}
.inb-m{border:.5px solid var(--border);border-radius:11px;padding:11px 13px;display:grid;grid-template-columns:28px 1fr;gap:11px;align-items:flex-start;opacity:0}
.reveal.in .inb-m{animation:inbIn .6s var(--ease-out) forwards}
.reveal.in .inb-m:nth-child(1){animation-delay:.3s}
.reveal.in .inb-m:nth-child(2){animation-delay:1.2s}
.reveal.in .inb-m:nth-child(3){animation-delay:2.1s}
.reveal.in .inb-m:nth-child(4){animation-delay:3.0s}
@keyframes inbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.inb-ch{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.inb-ch svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.inb-ch.wa{background:#25d366}
.inb-ch.web{background:var(--blue)}
.inb-ch.mail{background:#7c3aed}
.inb-q{font-size:13px;color:var(--navy);line-height:1.45}
.inb-a{font-size:12px;line-height:1.5;margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--green-light);color:#14532d;display:flex;gap:7px;align-items:flex-start;opacity:0}
.reveal.in .inb-a{animation:inbA .5s var(--ease-out) forwards}
.reveal.in .inb-m:nth-child(1) .inb-a{animation-delay:.8s}
.reveal.in .inb-m:nth-child(2) .inb-a{animation-delay:1.7s}
.reveal.in .inb-m:nth-child(3) .inb-a{animation-delay:2.6s}
.reveal.in .inb-m:nth-child(4) .inb-a{animation-delay:3.5s}
@keyframes inbA{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.inb-a svg{width:12px;height:12px;flex-shrink:0;margin-top:2px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.inb-a.esc{background:var(--amber-light);color:#7a4d05}
.inb-foot{padding:13px 18px;background:#f7f9fb;border-top:.5px solid var(--border);font-size:11.5px;color:var(--hint);text-align:center;line-height:1.5}
@media(max-width:560px){ .inb{max-width:100%} }

/* ══════════ S07 · EMBUDO CON DISPARADORES ══════════
   Barras de embudo: cuántos entran, cuántos siguen y en qué punto el
   sistema manda el mensaje. Enseña el dato, no decora. */
.emb{max-width:1000px;margin:0 auto;background:#fff;border:.5px solid var(--border);border-radius:18px;padding:34px 36px 30px}
.emb-cap{font-size:13px;color:var(--muted);margin-bottom:22px;padding-bottom:16px;border-bottom:.5px solid var(--border);line-height:1.6}
.emb-cap b{color:var(--navy);font-weight:500}
.emb-r{margin-bottom:22px}
.emb-r:last-of-type{margin-bottom:0}
.emb-l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.emb-l .n{font-size:15px;font-weight:500;color:var(--navy)}
.emb-l .v{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.emb-l .v b{color:var(--navy);font-weight:500}
.emb-bar{height:34px;border-radius:9px;background:#eef1f5;overflow:hidden;position:relative}
/* ⚠️ nada de :nth-of-type aquí: cuenta por etiqueta y el .emb-cap es
   también un div, así que descolocaría los colores y los retardos. */
.emb-bar i{display:block;height:100%;width:0;border-radius:9px;background:var(--blue);animation:embGrow 1.1s var(--ease-out) forwards}
.emb-r.r1 .emb-bar i{animation-delay:.10s;background:var(--blue)}
.emb-r.r2 .emb-bar i{animation-delay:.28s;background:#4a91ec}
.emb-r.r3 .emb-bar i{animation-delay:.46s;background:#7ab0f1}
.emb-r.r4 .emb-bar i{animation-delay:.64s;background:var(--green)}
@keyframes embGrow{from{width:0}to{width:var(--w)}}
.emb-trg{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--navy);background:var(--gray-mid);border:.5px solid var(--border);border-radius:9px;padding:7px 12px}
.emb-trg svg{width:13px;height:13px;color:var(--amber);flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.emb-trg b{font-weight:500}
.emb-note{margin-top:26px;padding-top:20px;border-top:.5px solid var(--border);font-size:14px;color:var(--muted);line-height:1.7}
.emb-note b{color:var(--navy);font-weight:500}
@media(max-width:560px){ .emb{padding:26px 22px} .emb-bar{height:28px} }

/* ---- BLINDAJE · titulares de sección dentro de una banda oscura ----
   `.sec-title.sec-title{color:var(--navy)}` pesa lo mismo que
   `.sec--dark .sec-title` y va después, así que ganaba y dejaba el titular
   navy sobre navy. Hasta ahora no se veía porque ninguna banda oscura usaba
   `.sec-header`: todas usaban `.split`, que sí tenía su excepción. ---- */
.sec--dark .sec-title.sec-title{color:#fff}
.sec--dark .sec-sub.sec-sub{color:#c4d2e6}

/* ---- BLINDAJE · notas de cierre propias de esta página ---- */
#coste .tar-foot{margin:26px auto 0}
#marketing .emb-note{margin-top:26px}
#limites .law-foot{margin:26px auto 0}


/* ═══════════════════════════════════════════════════════════
   MARKETING AUTOMATION · /agencia-marketing-automation/
   ═══════════════════════════════════════════════════════════ */
/* ══════════ S03 · LOS CINCO DÍAS ══════════
   Tres columnas: momento, qué pasa sin automatizar, qué pasa con ello.
   Las filas entran en cascada y la columna de la izquierda se va poniendo
   roja: el movimiento cuenta cómo se enfría el contacto. */
.crn{max-width:1040px;margin:0 auto;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 1px 0 var(--border) inset,0 -1px 0 var(--border) inset}
.crn-hd,.crn-r{display:grid;grid-template-columns:132px 1fr 1fr;gap:0}
.crn-hd{background:var(--gray-mid);border-bottom:.5px solid var(--border)}
.crn-hd span{padding:14px 20px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.crn-hd span.no{color:var(--hint)}
.crn-hd span.si{color:var(--blue)}
.crn-r{border-bottom:.5px solid var(--border)}
.crn-r:last-of-type{border-bottom:none}
.crn-t{padding:18px 20px;font-size:13px;font-weight:500;color:var(--navy);background:var(--gray-mid);border-right:.5px solid var(--border);display:flex;align-items:center;line-height:1.4}
.crn-c{padding:18px 20px;font-size:14px;line-height:1.55;display:flex;gap:10px;align-items:flex-start}
.crn-c.no{color:var(--muted);background:var(--gray-mid);border-right:.5px solid var(--border)}
.crn-c.si{color:var(--navy)}
.crn-c i{width:19px;height:19px;border-radius:50%;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center}
.crn-c i svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.crn-c.no i{background:#e9edf2;color:#9aa6b8}
.crn-c.si i{background:var(--blue-light);color:var(--blue)}
.crn-r.fin .crn-c.no{background:#e9edf2;font-weight:500;color:#5b6675}
.crn-r.fin .crn-c.si{background:var(--blue-light);font-weight:500}
.reveal.in .crn-r{animation:crnIn .5s var(--ease-out) backwards}
.reveal.in .crn-r:nth-of-type(2){animation-delay:.12s}
.reveal.in .crn-r:nth-of-type(3){animation-delay:.30s}
.reveal.in .crn-r:nth-of-type(4){animation-delay:.48s}
.reveal.in .crn-r:nth-of-type(5){animation-delay:.66s}
.reveal.in .crn-r:nth-of-type(6){animation-delay:.84s}
@keyframes crnIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.crn-foot{max-width:1040px;margin:26px auto 0;text-align:center;font-size:15px;color:var(--muted);line-height:1.7}
.crn-foot b{color:var(--navy);font-weight:500}
.crn-src{display:block;font-size:12.5px;color:var(--hint);margin-top:9px}
@media(max-width:768px){
  .crn-hd{display:none}
  .crn-r{grid-template-columns:1fr}
  .crn-t{border-right:none;border-bottom:.5px solid var(--border);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--hint);padding:11px 18px}
  .crn-c{padding:14px 18px}
  .crn-c.no{border-right:none;border-bottom:.5px solid var(--border)}
  .crn-c:before{content:"Sin automatizar";font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--hint);position:absolute;margin-top:-11px}
  .crn-c{position:relative;padding-top:30px}
  .crn-c.si:before{content:"Automatizado";color:var(--blue)}
}
@media(max-width:560px){ .crn-foot{text-align:left} }

/* ══════════ S05 · LA PUNTUACIÓN QUE SUBE SOLA ══════════
   Una ficha de contacto real: cada cosa que hace suma puntos y la barra
   avanza hasta el umbral. Al cruzarlo salta el aviso al comercial. */
.sco{max-width:440px;margin:0 auto;background:#fff;border:.5px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(16,24,40,.09)}
.sco-hd{padding:18px 22px;border-bottom:.5px solid var(--border);display:flex;align-items:center;gap:12px}
.sco-av{width:38px;height:38px;border-radius:50%;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;flex-shrink:0}
.sco-nm{font-size:15px;font-weight:500;color:var(--navy);line-height:1.3}
.sco-em{font-size:12px;color:var(--hint);margin-top:2px}
.sco-body{padding:18px 22px 20px}
.sco-lb{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--hint);margin-bottom:8px}
.sco-lb b{font-size:19px;color:var(--navy);font-weight:500;font-variant-numeric:tabular-nums}
.sco-bar{height:10px;border-radius:6px;background:#eef1f5;overflow:hidden;position:relative}
.sco-bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#7ab0f1,var(--blue));animation:scoFill 3.4s var(--ease-out) forwards}
@keyframes scoFill{0%{width:0}22%{width:22%}45%{width:40%}68%{width:58%}100%{width:82%}}
.sco-um{position:absolute;left:60%;top:-3px;bottom:-3px;width:2px;background:var(--green);border-radius:2px}
.sco-umt{font-size:11px;color:var(--green);margin-top:7px;display:block;text-align:right}
.sco-ev{list-style:none;margin:18px 0 0;display:flex;flex-direction:column;gap:9px}
.sco-ev li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--navy);opacity:0;line-height:1.35}
.reveal.in .sco-ev li{animation:scoEv .45s var(--ease-out) forwards}
.reveal.in .sco-ev li:nth-child(1){animation-delay:.5s}
.reveal.in .sco-ev li:nth-child(2){animation-delay:1.3s}
.reveal.in .sco-ev li:nth-child(3){animation-delay:2.1s}
.reveal.in .sco-ev li:nth-child(4){animation-delay:2.9s}
@keyframes scoEv{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.sco-ev .p{margin-left:auto;font-size:12px;font-weight:500;color:var(--blue);background:var(--blue-light);border-radius:20px;padding:3px 10px;flex-shrink:0}
.sco-ev i{width:22px;height:22px;border-radius:7px;background:var(--gray);color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sco-ev i svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sco-foot{padding:16px 22px;background:var(--green-light);border-top:.5px solid #bfe6cb;display:flex;align-items:center;gap:11px;font-size:13px;color:#14532d;line-height:1.45;opacity:0}
.reveal.in .sco-foot{animation:scoEv .5s var(--ease-out) 3.5s forwards}
.sco-foot svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sco-foot b{font-weight:500}
@media(max-width:560px){ .sco{max-width:100%} }

/* ══════════ S07 · LA SECUENCIA SE BIFURCA ══════════
   Un correo, dos caminos según lo que haga la persona. Es la mecánica
   entera del marketing automation en una imagen. */
.flj{max-width:620px;margin:0 auto}
.flj-n{background:rgba(255,255,255,.05);border:.5px solid rgba(255,255,255,.13);border-radius:12px;padding:13px 16px;text-align:center}
.flj-n .h{font-size:14px;font-weight:500;color:#eaf1fb;line-height:1.35}
.flj-n .d{font-size:12px;color:#9fb1cc;margin-top:3px;line-height:1.45}
.flj-n.hot{border-color:rgba(95,213,140,.45);background:rgba(22,163,74,.14)}
.flj-n.hot .h{color:#bdf0d0}
.flj-l{height:26px;position:relative}
.flj-l:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.16)}
.flj-fork{height:26px;position:relative}
.flj-fork:before{content:"";position:absolute;left:25%;right:25%;top:calc(50% - 1px);height:2px;background:rgba(255,255,255,.16)}
.flj-fork:after{content:"";position:absolute;left:50%;top:0;height:50%;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.16)}
.flj-fork span{position:absolute;top:calc(50% - 1px);width:2px;height:50%;background:rgba(255,255,255,.16)}
.flj-fork span.a{left:25%}
.flj-fork span.b{left:calc(75% - 2px)}
.flj-br{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.flj-c{display:flex;flex-direction:column;gap:10px}
.flj-tag{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-align:center;border-radius:20px;padding:5px 10px}
.flj-tag.si{color:#bdf0d0;background:rgba(22,163,74,.18)}
.flj-tag.no{color:#e8c98f;background:rgba(224,176,106,.16)}
.flj-merge{height:26px;position:relative}
.flj-merge:before{content:"";position:absolute;left:25%;right:25%;bottom:calc(50% - 1px);height:2px;background:rgba(255,255,255,.16)}
.flj-merge:after{content:"";position:absolute;left:50%;bottom:0;height:50%;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.16)}
.flj-merge span{position:absolute;top:0;width:2px;height:50%;background:rgba(255,255,255,.16)}
.flj-merge span.a{left:25%}
.flj-merge span.b{left:calc(75% - 2px)}
.flj-note{max-width:620px;margin:26px auto 0;text-align:center;font-size:14px;color:var(--muted);line-height:1.7}
.flj-note b{color:var(--navy);font-weight:500}
@media(max-width:560px){
  .flj-br{grid-template-columns:1fr;gap:14px}
  .flj-fork:before,.flj-fork span,.flj-merge:before,.flj-merge span{display:none}
  .flj-fork,.flj-merge{height:20px}
  .flj-fork:after,.flj-merge:after{height:100%;top:0;bottom:auto}
  .flj-note{text-align:left}
}

/* ══════════ S05 y S06 · EL CATÁLOGO DE FLUJOS ══════════
   Antes cada flujo eran cuatro o cinco líneas de prosa y el catálogo se
   leía como un tostón. Ahora cada uno cabe en dos: el nombre y una tubería
   de tres nodos con el recorrido. La condición para que se pague deja de
   ser una frase y pasa a ser una cifra. Por los conectores viaja un punto
   al entrar la fila: el dato moviéndose, que es de lo que va la página. */
.ruta-in{max-width:1120px;margin:0 auto 26px;background:var(--blue-light);border:.5px solid #c9def9;border-radius:14px;padding:16px 22px;font-size:14.5px;color:var(--navy);line-height:1.65;display:flex;gap:12px;align-items:flex-start}
.ruta-in svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;color:var(--blue);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ruta-in b{font-weight:500}
.ruta-g{list-style:none;max-width:1120px;margin:0 auto;padding:0;border-top:.5px solid var(--border)}
.ruta{display:grid;grid-template-columns:38px 1fr 250px;gap:20px;padding:18px 4px;border-bottom:.5px solid var(--border);align-items:center}
.ruta-i{width:34px;height:34px;border-radius:10px;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ruta--hot .ruta-i{background:var(--blue);color:#fff}
.ruta-i svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ruta-b h3{font-size:16.5px;font-weight:500;margin:0 0 9px;line-height:1.3;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ruta-hot{font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);background:var(--blue-light);border-radius:20px;padding:3px 9px;white-space:nowrap}
.ruta-p{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
.ruta-p span{font-size:12.5px;line-height:1.3;color:var(--muted);background:var(--gray);border-radius:7px;padding:6px 10px;white-space:nowrap}
.ruta-p span.fin{color:var(--navy);background:var(--blue-light)}
.ruta-p em{position:relative;width:26px;height:2px;background:var(--border);margin:0 5px;flex-shrink:0}
.ruta-p em:after{content:"";position:absolute;top:-2px;left:0;width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:0}
.reveal.in .ruta-p em:after{animation:rutaGo 1s var(--ease-out) forwards;animation-delay:calc(.25s + var(--r)*.09s + var(--k)*.22s)}
@keyframes rutaGo{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:20px;opacity:0}}
.ruta-w{font-size:12.5px;line-height:1.55;color:var(--hint);padding-left:22px;border-left:.5px solid var(--border)}
.ruta-w b{display:block;font-size:14px;color:var(--navy);font-weight:500;margin-bottom:3px}
.ruta-w a{color:var(--blue)}
.ruta-foot{max-width:1120px;margin:28px auto 0;text-align:center;font-size:15px;color:var(--muted);line-height:1.7}
.ruta-foot b{color:var(--navy);font-weight:500}
@media(max-width:980px){
  .ruta{grid-template-columns:38px 1fr;gap:6px 16px;padding:20px 2px;align-items:start}
  /* al envolver, el conector se queda huérfano al final del renglón: fuera */
  .ruta-p em{display:none}
  .ruta-p{gap:6px}
  .ruta-i{margin-top:2px}
  .ruta-w{grid-column:2;padding-left:0;border-left:none;padding-top:11px;margin-top:7px;border-top:.5px solid var(--border)}
  .ruta-w b{display:inline;margin-right:7px}
}
@media(max-width:560px){
  .ruta-p span{font-size:12px;padding:5px 9px}
  .ruta-p em{width:16px;margin:0 4px}
  .ruta-b h3{font-size:15.5px}
  .ruta-foot{text-align:left}
  .ruta-in{padding:15px 17px;font-size:14px}
}

/* ══════════ S09 · LO QUE LA IA LEE DE VERDAD ══════════
   Sustituye al bloque de dos columnas «no lo arregla / sí lo arregla». Un
   mensaje escrito por una persona entra tal cual y salen los campos, uno a
   uno, con lo seguro que está de cada uno. El último campo va vacío a
   propósito: lo que no está en el texto, no se inventa. Es la respuesta
   honesta a «dónde entra aquí la inteligencia artificial». */
.cls{max-width:470px;margin:0 auto}
.cls-in{font-size:14.5px;line-height:1.7;color:var(--navy);background:#fff;border:.5px solid var(--border);
  border-radius:14px;padding:18px 20px;position:relative}
.cls-in:before{content:"Mensaje recibido";position:absolute;top:-9px;left:16px;background:#fff;padding:0 8px;
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--hint)}
.cls-ar{display:flex;align-items:center;gap:10px;margin:14px 0 14px 4px;font-size:12px;color:var(--hint)}
.cls-ar i{width:22px;height:22px;border-radius:7px;background:var(--blue-light);color:var(--blue);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cls-ar i svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  animation:clsSpin 3.6s linear infinite}
@keyframes clsSpin{to{transform:rotate(360deg)}}
.cls-out{list-style:none;margin:0;padding:0}
.cls-out li{display:grid;grid-template-columns:104px 1fr auto;gap:14px;align-items:baseline;
  padding:12px 4px;border-bottom:.5px solid var(--border);opacity:0}
.cls-out li:last-child{border-bottom:none}
.reveal.in .cls-out li{animation:clsIn .45s var(--ease-out) forwards}
.reveal.in .cls-out li:nth-child(1){animation-delay:.7s}
.reveal.in .cls-out li:nth-child(2){animation-delay:1.05s}
.reveal.in .cls-out li:nth-child(3){animation-delay:1.4s}
.reveal.in .cls-out li:nth-child(4){animation-delay:1.75s}
.reveal.in .cls-out li:nth-child(5){animation-delay:2.2s}
@keyframes clsIn{from{opacity:0;transform:translateY(-6px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.cls-k{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hint)}
.cls-v{font-size:14.5px;color:var(--navy);font-weight:500;line-height:1.4}
.cls-c{font-size:12px;color:var(--blue);font-variant-numeric:tabular-nums}
.cls-out li.vacio .cls-v{color:var(--hint);font-weight:400;font-style:italic}
.cls-out li.vacio .cls-c{color:var(--amber)}
.cls-pie{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.cls-pie b{color:var(--navy);font-weight:500}
@media(max-width:560px){
  .cls{max-width:100%}
  .cls-out li{grid-template-columns:1fr auto;gap:4px 12px}
  .cls-k{grid-column:1 / -1}
}

/* ══════════ S07 · LA TUBERÍA DEL REDACTOR ══════════
   Antes eran seis bloques con dos líneas de texto cada uno: se leía como
   un manual. Ahora son seis fases con dos o tres palabras, un pulso que
   las recorre en orden y la sexta separada en ámbar, que es la que hay que
   ver. Todo lo que explicaba cada bloque cabe en un párrafo debajo. */
.pip{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pip-s{position:relative;text-align:center;padding:20px 12px 18px;border-radius:14px;
  background:rgba(255,255,255,.045);border:.5px solid rgba(255,255,255,.11);opacity:0}
.reveal.in .pip-s{animation:pipIn .5s var(--ease-out) forwards;animation-delay:calc(.15s + var(--i)*.22s)}
@keyframes pipIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.pip-n{font-size:11px;letter-spacing:.08em;color:#7fb3f2;font-variant-numeric:tabular-nums;display:block;margin-bottom:9px}
.pip-t{font-size:14.5px;font-weight:500;color:#fff;line-height:1.35}
.pip-s:not(:last-child):after{content:"";position:absolute;right:-10px;top:50%;width:10px;height:2px;
  background:rgba(255,255,255,.16);z-index:1}
.pip-s:not(:last-child):before{content:"";position:absolute;right:-10px;top:calc(50% - 2px);width:6px;height:6px;
  border-radius:50%;background:#7fb3f2;opacity:0;z-index:2;
  animation:pipGo .9s var(--ease-out) infinite;animation-delay:calc(1.6s + var(--i)*.28s)}
@keyframes pipGo{0%{transform:translateX(-2px);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateX(8px);opacity:0}}
.pip-s.hum{background:rgba(224,176,106,.10);border-color:rgba(224,176,106,.45);box-shadow:0 0 0 1px rgba(224,176,106,.12)}
.pip-s.hum .pip-n{color:#e0b06a}
.pip-s.hum .pip-t{color:#f0d9a8}
.pip-note{max-width:820px;margin:30px auto 0;text-align:center;font-size:15px;color:#c4d2e6;line-height:1.8}
.pip-note b{color:#fff;font-weight:500}
.pip-f{max-width:1060px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:28px auto 0;padding-top:22px;border-top:.5px solid rgba(255,255,255,.10)}
.pip-f .k{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8ea3c2;margin-bottom:5px}
.pip-f .v{font-size:14px;color:#eaf1fb;line-height:1.5}
.pip-f .v b{font-weight:500;color:#fff}
@media(max-width:1000px){
  .pip{grid-template-columns:repeat(3,1fr);gap:12px}
  .pip-s:not(:last-child):after,.pip-s:not(:last-child):before{display:none}
}
@media(max-width:600px){ .pip{grid-template-columns:repeat(2,1fr)} .pip-f{grid-template-columns:1fr;gap:18px} }
@media(max-width:560px){ .pip-note{text-align:left} }
@media(max-width:560px){
  .cls{max-width:100%}
  .cls-out li{grid-template-columns:1fr auto;gap:4px 12px}
  .cls-k{grid-column:1 / -1}
}

/* ══════════ S07 · EL MONTAJE, ESCRITO A MEDIDA QUE PASA ══════════
   Antes eran seis tarjetas en rejilla. Ahora es una sola columna de líneas
   que se van escribiendo: se lee como un proceso ejecutándose, no como un
   catálogo. La última línea es la persona, y va en ámbar. */
.pln{max-width:640px;margin:0 auto}
.pln-l{display:grid;grid-template-columns:26px 1fr;gap:16px;padding:15px 0;border-bottom:.5px solid rgba(255,255,255,.10);opacity:0}
.pln-l:last-of-type{border-bottom:none}
.reveal.in .pln-l{animation:plnIn .5s var(--ease-out) forwards}
.reveal.in .pln-l:nth-of-type(1){animation-delay:.2s}
.reveal.in .pln-l:nth-of-type(2){animation-delay:.65s}
.reveal.in .pln-l:nth-of-type(3){animation-delay:1.1s}
.reveal.in .pln-l:nth-of-type(4){animation-delay:1.55s}
.reveal.in .pln-l:nth-of-type(5){animation-delay:2s}
.reveal.in .pln-l:nth-of-type(6){animation-delay:2.5s}
@keyframes plnIn{from{opacity:0;transform:translateX(-10px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.pln-n{font-size:12px;color:#7fb3f2;font-variant-numeric:tabular-nums;padding-top:3px;letter-spacing:.04em}
.pln-t{font-size:15.5px;font-weight:500;color:#fff;line-height:1.4}
.pln-d{font-size:13.5px;color:#9fb1cc;line-height:1.6;margin-top:5px}
.pln-l.hum .pln-n{color:#e0b06a}
.pln-l.hum .pln-t{color:#f0d9a8}
.pln-l.hum{border-top:.5px solid rgba(224,176,106,.28);margin-top:8px}
.pln-car{display:inline-block;width:2px;height:15px;background:#7fb3f2;vertical-align:-2px;margin-left:4px;
  animation:plnBlink .9s steps(1) infinite,plnGo .4s var(--ease-out) 3.1s forwards}
@keyframes plnBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@keyframes plnGo{to{opacity:0}}
.pln-f{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px;padding-top:20px;border-top:.5px solid rgba(255,255,255,.10)}
.pln-f .k{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8ea3c2;margin-bottom:5px}
.pln-f .v{font-size:14px;color:#eaf1fb;line-height:1.5}
.pln-f .v b{font-weight:500;color:#fff}
@media(max-width:760px){ .pln-f{grid-template-columns:1fr;gap:18px} }
@media(max-width:560px){ .pln-l{grid-template-columns:22px 1fr;gap:12px} }

/* ═══════════════════════════════════════════════════════════
   AGENTES DE IA · /agentes-ia-empresas/
   ═══════════════════════════════════════════════════════════ */
/* ══════════ S03 · LOS TRES NIVELES DE AUTONOMÍA ══════════
   Tres peldaños. Cada uno enseña cuánto hace solo (barra) y dónde está el
   freno. El tercero va marcado aparte a propósito: es el que casi nadie
   necesita y el que todo el mundo pide. */
.niv{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.niv-r{background:#fff;border:.5px solid var(--border);border-radius:16px;padding:26px 30px;display:grid;grid-template-columns:56px 1fr 250px;gap:26px;align-items:center;transition:border-color .22s var(--ease-out),box-shadow .22s var(--ease-out)}
.niv-r:hover{border-color:#93c4f8;box-shadow:0 12px 30px rgba(16,24,40,.07)}
.niv-r.top{border-color:var(--blue);box-shadow:0 16px 38px rgba(26,115,232,.10)}
.niv-r.warn{border-style:dashed;border-color:#e8d5a8;background:#fffdf7}
.niv-n{width:56px;height:56px;border-radius:15px;background:var(--gray);color:var(--hint);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:500;flex-shrink:0}
.niv-r.top .niv-n{background:var(--blue-light);color:var(--blue)}
.niv-r.warn .niv-n{background:var(--amber-light);color:var(--amber)}
.niv-b h3{font-size:19px;font-weight:500;margin:0 0 6px}
.niv-b p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0}
.niv-b .kw{font-size:12.5px;color:var(--hint);margin-top:9px;display:block}
.niv-m{display:flex;flex-direction:column;gap:9px}
.niv-bar{display:flex;gap:5px}
.niv-bar i{flex:1;height:7px;border-radius:4px;background:#eceff3}
.niv-bar i.on{background:var(--blue)}
.niv-r.warn .niv-bar i.on{background:var(--amber)}
.niv-lb{font-size:12px;color:var(--hint);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.niv-fr{display:inline-flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;color:var(--navy);background:var(--gray-mid);border:.5px solid var(--border);border-radius:9px;padding:9px 12px}
.niv-fr svg{width:13px;height:13px;flex-shrink:0;margin-top:2px;color:var(--green);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.niv-r.warn .niv-fr{background:var(--amber-light);border-color:#e8d5a8}
.niv-r.warn .niv-fr svg{color:var(--amber)}
.niv-foot{max-width:1080px;margin:26px auto 0;text-align:center;font-size:15px;color:var(--muted);line-height:1.7}
.niv-foot b{color:var(--navy);font-weight:500}
@media(max-width:980px){
  .niv-r{grid-template-columns:48px 1fr;gap:16px 18px;align-items:flex-start}
  .niv-n{width:48px;height:48px;font-size:19px;border-radius:13px}
  .niv-m{grid-column:1 / -1}
}
@media(max-width:560px){ .niv-r{padding:22px} .niv-foot{text-align:left} }

/* ══════════ S04 · EL PANEL DE PERMISOS ══════════
   Lo que el agente puede y no puede hacer, en interruptores. Uno intenta
   pasar por el que está cerrado y se queda esperando a una persona:
   ese es el argumento de la sección. */
.prm{max-width:430px;margin:0 auto;background:#0d1626;border:.5px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden}
.prm-hd{padding:15px 20px;border-bottom:.5px solid rgba(255,255,255,.10);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:#fff}
.prm-hd i{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
.prm-hd .c{margin-left:auto;font-size:11px;color:#8ea3c2;font-weight:400}
.prm-l{list-style:none;padding:8px 0}
.prm-l li{display:flex;align-items:center;gap:12px;padding:11px 20px;font-size:13.5px;color:#c4d2e6}
.prm-l li b{font-weight:500;color:#eaf1fb}
.prm-sw{margin-left:auto;width:38px;height:21px;border-radius:12px;background:rgba(255,255,255,.13);position:relative;flex-shrink:0;transition:background .3s var(--ease-out)}
.prm-sw:after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#8ea3c2;transition:transform .3s var(--ease-out),background .3s var(--ease-out)}
.prm-l li.on .prm-sw{background:rgba(26,115,232,.55)}
.prm-l li.on .prm-sw:after{transform:translateX(17px);background:#fff}
.prm-l li.off{color:#8ea3c2}
.prm-l li.off b{color:#c4d2e6}
.prm-ic{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#7fb3f2}
.prm-l li.off .prm-ic{color:#e0b06a}
.prm-ic svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prm-try{margin:4px 14px 12px;border-radius:11px;background:rgba(224,176,106,.12);border:.5px solid rgba(224,176,106,.32);padding:11px 14px;font-size:12.5px;color:#e8c98f;line-height:1.5;display:flex;gap:9px;align-items:flex-start;opacity:0}
.reveal.in .prm-try{animation:prmTry .6s var(--ease-out) 1.6s forwards}
@keyframes prmTry{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.prm-try svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prm-try b{color:#fff;font-weight:500}
.prm-l li.off .prm-sw{animation:prmShake 4s var(--ease-out) infinite}
@keyframes prmShake{0%,36%,46%,100%{transform:translateX(0)}39%{transform:translateX(-3px)}42%{transform:translateX(3px)}}
@media(max-width:560px){ .prm{max-width:100%} }

/* ══════════ S06 · EL REGISTRO ══════════
   Cada línea es algo que el agente hizo, con la hora y con quién lo aprobó.
   Es la respuesta física a «¿y cómo sé lo que ha hecho?». */
.log{max-width:1000px;margin:0 auto;background:#fff;border:.5px solid var(--border);border-radius:16px;overflow:hidden}
.log-hd{padding:14px 24px;background:var(--gray-mid);border-bottom:.5px solid var(--border);display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--hint)}
.log-hd .c{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:400;font-size:12px}
.log-l{list-style:none}
.log-l li{display:grid;grid-template-columns:74px 26px 1fr auto;gap:14px;align-items:center;padding:14px 24px;border-bottom:.5px solid var(--border);font-size:14px;color:var(--navy);line-height:1.45;opacity:0}
.log-l li:last-child{border-bottom:none}
.reveal.in .log-l li{animation:logIn .45s var(--ease-out) forwards}
.reveal.in .log-l li:nth-child(1){animation-delay:.2s}
.reveal.in .log-l li:nth-child(2){animation-delay:.7s}
.reveal.in .log-l li:nth-child(3){animation-delay:1.2s}
.reveal.in .log-l li:nth-child(4){animation-delay:1.7s}
.reveal.in .log-l li:nth-child(5){animation-delay:2.2s}
@keyframes logIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.log-h{font-size:12.5px;color:var(--hint);font-variant-numeric:tabular-nums}
.log-i{width:26px;height:26px;border-radius:8px;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.log-i svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.log-l li.hum .log-i{background:var(--amber-light);color:var(--amber)}
.log-b{font-size:11.5px;font-weight:500;border-radius:20px;padding:4px 11px;white-space:nowrap;background:var(--gray);color:var(--muted)}
.log-l li.hum .log-b{background:var(--amber-light);color:#7a4d05}
.log-l li.ok .log-b{background:var(--green-light);color:#14532d}
.log-foot{max-width:1000px;margin:26px auto 0;text-align:center;font-size:15px;color:var(--muted);line-height:1.7}
.log-foot b{color:var(--navy);font-weight:500}
@media(max-width:768px){
  .log-l li{grid-template-columns:1fr auto;gap:6px 12px;padding:14px 20px}
  .log-i{display:none}
  .log-h{grid-column:1 / -1;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
  .log-b{grid-column:2}
}
@media(max-width:560px){ .log-foot{text-align:left} }

/* ═══════════════════════════════════════════════════════════
   CHATBOT · /chatbot-para-empresas/
   ═══════════════════════════════════════════════════════════ */
/* ══════════ S03 · LAS DOS CONVERSACIONES ══════════
   La misma pregunta, dos chatbots. A la izquierda el de plantilla; a la
   derecha uno que está conectado a los datos de la empresa. Los mensajes
   entran escritos, así que se lee como una conversación de verdad. */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto;align-items:stretch}
.cmp-c{background:#fff;border:.5px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.cmp-c.si{border-color:#bcd7f7;box-shadow:0 16px 40px rgba(26,115,232,.10)}
.cmp-h{padding:15px 20px;border-bottom:.5px solid var(--border);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500}
.cmp-c.no .cmp-h{background:var(--gray-mid);color:var(--hint)}
.cmp-c.si .cmp-h{background:var(--blue-light);color:var(--blue)}
.cmp-h i{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cmp-c.no .cmp-h i{background:#eceff3;color:var(--hint)}
.cmp-c.si .cmp-h i{background:#fff;color:var(--blue)}
.cmp-h i svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cmp-b{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1;background:var(--gray-mid)}
.cmp-m{max-width:86%;font-size:13.5px;line-height:1.55;padding:11px 14px;border-radius:14px;opacity:0}
.cmp-m.q{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.cmp-m.a{align-self:flex-start;background:#fff;border:.5px solid var(--border);color:var(--navy);border-bottom-left-radius:5px}
.cmp-c.no .cmp-m.q{background:#9aa6b8}
.cmp-c.no .cmp-m.a{color:var(--muted)}
.reveal.in .cmp-m{animation:cmpIn .5s var(--ease-out) forwards}
.reveal.in .cmp-m:nth-child(1){animation-delay:.3s}
.reveal.in .cmp-m:nth-child(2){animation-delay:1.1s}
.reveal.in .cmp-m:nth-child(3){animation-delay:2.0s}
.reveal.in .cmp-m:nth-child(4){animation-delay:2.8s}
@keyframes cmpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cmp-v{margin-top:auto;padding:14px 20px;border-top:.5px solid var(--border);font-size:12.5px;line-height:1.5;display:flex;gap:9px;align-items:flex-start}
.cmp-c.no .cmp-v{background:var(--gray-mid);color:var(--hint)}
.cmp-c.si .cmp-v{background:var(--blue-light);color:#14396b}
.cmp-v svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cmp-v b{font-weight:500}
.cmp-foot{max-width:1000px;margin:26px auto 0;text-align:center;font-size:15px;color:var(--muted);line-height:1.7}
.cmp-foot b{color:var(--navy);font-weight:500}
@media(max-width:768px){ .cmp{grid-template-columns:1fr;max-width:520px} }
@media(max-width:560px){ .cmp-foot{text-align:left} }

/* ══════════ S05 · A QUÉ HORA PREGUNTAN ══════════
   Veinticuatro barras, una por hora. Las de la franja de oficina van en
   azul y el resto en gris: se ve de un vistazo cuántas caen con la
   persiana bajada. */
.hor{max-width:1000px;margin:0 auto;background:#fff;border:.5px solid var(--border);border-radius:18px;padding:32px 34px 26px}
.hor-leg{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:24px}
.hor-leg span{display:inline-flex;align-items:center;gap:8px}
.hor-leg i{width:11px;height:11px;border-radius:3px;background:#c9d3e0;flex-shrink:0}
.hor-leg i.ab{background:var(--blue)}
.hor-g{display:flex;align-items:flex-end;gap:4px;height:170px}
.hor-b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative;min-width:0}
.hor-b i{display:block;width:100%;height:0;border-radius:4px 4px 0 0;background:#c9d3e0;animation:horGrow .9s var(--ease-out) forwards}
.hor-b.ab i{background:var(--blue)}
@keyframes horGrow{from{height:0}to{height:var(--h)}}
.hor-b:nth-child(2n) i{animation-delay:.05s}
.hor-b:nth-child(3n) i{animation-delay:.12s}
.hor-ax{display:flex;gap:4px;margin-top:9px;font-size:10.5px;color:var(--hint);font-variant-numeric:tabular-nums}
.hor-ax span{flex:1;text-align:center;min-width:0}
.hor-ax span.h{color:var(--navy);font-weight:500}
.hor-out{margin-top:24px;padding-top:20px;border-top:.5px solid var(--border);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hor-big{font-size:40px;font-weight:500;color:var(--blue);line-height:1;font-variant-numeric:tabular-nums}
.hor-txt{font-size:15px;color:var(--muted);line-height:1.6;flex:1;min-width:220px}
.hor-txt b{color:var(--navy);font-weight:500}
.hor-foot{max-width:1000px;margin:26px auto 0;text-align:center;font-size:13px;color:var(--hint);line-height:1.6}
@media(max-width:768px){
  .hor{padding:24px 20px 20px}
  .hor-g{height:130px;gap:2px}
  .hor-ax{gap:2px;font-size:9px}
  .hor-ax span:not(.h){color:transparent}
}
@media(max-width:560px){
  .hor-foot{text-align:left}
  .hor-big{font-size:34px}
  .hor-out{flex-direction:column;align-items:flex-start;gap:10px}
  .hor-txt{min-width:0}
}

/* ══════════ S04 · LA RESPUESTA SE ESCRIBE SOLA ══════════
   Sustituye al panel de documentos con flechas. Aquí el movimiento es el
   lenguaje de un modelo: la respuesta aparece palabra a palabra con su
   cursor, y las dos fuentes se encienden justo cuando llega el dato que
   sale de cada una. Eso es «de dónde saca la respuesta», enseñado en vez
   de contado. */
.tok{max-width:470px;margin:0 auto}
.tok-q{font-size:12.5px;color:#8ea3c2;line-height:1.5;padding-bottom:14px;margin-bottom:16px;border-bottom:.5px solid rgba(255,255,255,.12)}
.tok-a{font-size:15.5px;line-height:1.75;color:#eaf1fb;margin:0;min-height:112px}
.tok-a i{font-style:normal;opacity:0;animation:tokIn .28s var(--ease-out) forwards;animation-delay:calc(.55s + var(--i)*.07s)}
.tok-a i.hl{color:#fff;font-weight:500;border-bottom:1.5px solid #7fb3f2;padding-bottom:1px}
@keyframes tokIn{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
.tok-car{display:inline-block;width:2px;height:16px;background:#7fb3f2;vertical-align:-2px;margin-left:2px;
  animation:tokBlink .9s steps(1) infinite, tokGo .4s var(--ease-out) 2.6s forwards}
@keyframes tokBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@keyframes tokGo{to{opacity:0;width:0}}
.tok-src{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:16px;border-top:.5px solid rgba(255,255,255,.12)}
.tok-s{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#8ea3c2;background:rgba(255,255,255,.04);
  border:.5px solid rgba(255,255,255,.12);border-radius:9px;padding:8px 12px;transition:none}
.tok-s svg{width:12px;height:12px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tok-s.a{animation:tokUse 4.6s var(--ease-out) 1.25s infinite}
.tok-s.b{animation:tokUse 4.6s var(--ease-out) 2.05s infinite}
@keyframes tokUse{
  0%{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#8ea3c2}
  6%{background:rgba(26,115,232,.26);border-color:#7fb3f2;color:#fff}
  38%{background:rgba(26,115,232,.18);border-color:rgba(127,179,242,.5);color:#c4d2e6}
  70%,100%{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#8ea3c2}}
.tok-no{margin-top:16px;background:rgba(224,176,106,.12);border:.5px solid rgba(224,176,106,.28);border-radius:11px;
  padding:12px 14px;font-size:12.5px;color:#e8c98f;line-height:1.55}
.tok-no b{color:#fff;font-weight:500}
@media(max-width:560px){ .tok{max-width:100%} .tok-a{font-size:15px;min-height:140px} }

/* ══════════ S06 · EL MAPA DE CONSULTAS ══════════
   Treinta y seis consultas entran desordenadas y se agrupan solas. Los
   puntos son el dato: veintidós se resuelven, ocho son comerciales y seis
   acaban en una persona. Sustituye a cuatro tarjetas que decían lo mismo
   sin enseñar nada. */
.vec{max-width:940px;margin:0 auto;position:relative;height:268px}
.vec i{position:absolute;width:12px;height:12px;border-radius:50%;left:var(--sx);top:var(--sy);
  transform:translate(-50%,-50%);opacity:0}
.vec.in i{animation:vecIn .5s var(--ease-out) var(--d) forwards,
  vecMove 1.7s var(--ease-in-out) calc(1.1s + var(--d)) forwards}
@keyframes vecIn{from{opacity:0;transform:translate(-50%,-50%) scale(.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes vecMove{to{left:var(--fx);top:var(--fy)}}
.vec i.ok{background:var(--blue)}
.vec i.com{background:#7ab0f1}
.vec i.esc{background:var(--amber)}
.vec-l{position:absolute;top:-6px;text-align:center;transform:translateX(-50%);opacity:0;width:190px}
.vec.in .vec-l{animation:vecIn .6s var(--ease-out) 2.9s forwards}
.vec-l .n{font-size:30px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.vec-l .t{font-size:14px;font-weight:500;color:var(--navy);margin-top:7px;line-height:1.35}
.vec-l .d{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.vec-l.a{left:18%} .vec-l.a .n{color:var(--blue)}
.vec-l.b{left:50%} .vec-l.b .n{color:#7ab0f1}
.vec-l.c{left:82%} .vec-l.c .n{color:var(--amber)}
.vec-foot{max-width:940px;margin:30px auto 0;text-align:center;font-size:15px;color:var(--muted);line-height:1.7}
.vec-foot b{color:var(--navy);font-weight:500}
@media(max-width:900px){
  .vec{height:auto;display:grid;grid-template-columns:1fr;gap:22px}
  .vec i{display:none}
  .vec-l{position:static;transform:none;width:auto;opacity:1;text-align:left;
    padding-left:18px;border-left:3px solid var(--border)}
  .vec.in .vec-l{animation:none}
  .vec-l.a{border-color:var(--blue)} .vec-l.b{border-color:#7ab0f1} .vec-l.c{border-color:var(--amber)}
}
@media(max-width:560px){ .vec-foot{text-align:left} }

/* ══════════ S07 · LA CONFIANZA DEL MODELO ══════════
   Dos preguntas y lo que el modelo cree de cada una. Cuando una opción se
   despega, contesta; cuando van las tres empatadas, no lo sabe y lo dice.
   Es la explicación honesta de por qué a veces escala, sin un solo bloque
   de «lo que sí y lo que no». */
.cnf{max-width:440px;margin:0 auto;background:#fff;border:.5px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(16,24,40,.08)}
.cnf-c{padding:20px 22px}
.cnf-c+.cnf-c{border-top:.5px solid var(--border)}
.cnf-q{font-size:13.5px;color:var(--navy);line-height:1.5;margin-bottom:14px}
.cnf-r{display:grid;grid-template-columns:1fr 42px;gap:10px;align-items:center;margin-bottom:9px;font-size:12.5px;color:var(--muted)}
.cnf-t{position:relative;height:26px;border-radius:7px;background:#f2f5f8;overflow:hidden;display:flex;align-items:center}
.cnf-t i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blue-light);border-radius:7px;
  animation:cnfGrow 1s var(--ease-out) forwards;animation-delay:var(--d)}
.cnf-t.top i{background:#cfe2fb}
@keyframes cnfGrow{to{width:var(--w)}}
.cnf-t span{position:relative;padding:0 11px;line-height:1.3;color:var(--navy);z-index:1}
.cnf-p{text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--hint)}
.cnf-t.top+.cnf-p{color:var(--blue);font-weight:500}
.cnf-o{margin-top:14px;padding-top:13px;border-top:.5px solid var(--border);font-size:12.5px;line-height:1.55;
  display:flex;gap:9px;align-items:flex-start;color:var(--muted)}
.cnf-o svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cnf-o b{color:var(--navy);font-weight:500}
.cnf-c.dude .cnf-o{color:#7a4d05}
.cnf-c.dude .cnf-o svg{color:var(--amber)}
.cnf-c.dude .cnf-o b{color:#7a4d05}
.cnf-c.dude{background:#fffdf7}
@media(max-width:560px){ .cnf{max-width:100%} }
/* ============ /agencia-marketing-automation/ - costura del catalogo ============
   Las dos mitades del catalogo son secciones distintas para poder alternar el
   fondo, pero el lector las lee como un solo bloque ("1 de 2" -> "2 de 2").
   Con el corte entero (100px + 100px) quedaba un agujero detras de la nota. */
#flujos-servicios{padding-bottom:56px}
#flujos-ecommerce{padding-top:56px}
@media(max-width:980px){
  #flujos-servicios{padding-bottom:40px}
  #flujos-ecommerce{padding-top:40px}
}
@media(max-width:560px){
  #flujos-servicios{padding-bottom:32px}
  #flujos-ecommerce{padding-top:32px}
}