:root{
  --page:#F7F9FB; --soft:#EEF2F6; --surface:#ffffff; --ink:#2A363F; --muted:#5f6b75; --line:#e2e7ec;
  --amber:#FFB41F; --amber-soft:#FFF3DA; --amber-text:#8f6400;   /* antes #b9810a: no llegaba al contraste mínimo (AA 4,5) sobre blanco ni sobre --amber-soft */ --cyan:#6ECFEA; --teal:#2E86A6; --blue:#3183D7; --blue2:#2256A5; --red:#E71D24; --lilac:#9759D3; --green:#1FA971;
  --font-title:'Raleway',sans-serif; --font-body:'Poppins',sans-serif;
  --shadow:0 6px 24px rgba(42,54,63,.08); --shadow-sm:0 2px 10px rgba(42,54,63,.06); --shadow-lg:0 30px 60px -22px rgba(33,42,50,.30);
  --amber2:#FF7A00; --grad-warm:linear-gradient(135deg,#FFC24B,#FF7A00); --ink-deep:#202A32;
  /* Tema oscuro por página (header + hero). Por defecto negro = como la home. */
  --hero-top:#000; --hero-grad:#000;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--page);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
svg{display:block}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4,h5{font-family:var(--font-title);color:var(--ink)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:9px;padding:13px 24px;font-weight:600;font-size:15px;font-family:var(--font-body);cursor:pointer;transition:.2s;border:none;white-space:nowrap}
.btn-primary{background:var(--amber);color:#2A363F}   /* fijo: en n8n --ink es claro y el texto no se leía */
.btn-primary:hover{background:#ffc245;transform:translateY(-1px)}
.btn-ghost{border:1.5px solid #cfd6dd;color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--amber);color:#9a6b04}
.link{color:#2A363F;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:5px}
.link:hover{text-decoration:underline}
.eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--amber-text);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px;background:var(--amber-soft);border:1px solid rgba(255,180,31,.45);padding:6px 14px;border-radius:30px}
.eyebrow svg{width:15px;height:15px}

/* Preheader: barra de avisos encima de la cabecera (includes/preheader.php; se edita en el panel).
   Colores y alto llegan como variables en el atributo style. Se va con el scroll; la cabecera sigue fija. */
.preheader{position:relative;z-index:61;background:var(--ph-bg,#2A363F);color:var(--ph-fg,#fff);font:500 13.5px/1.35 var(--font-body)}
.ph-in{min-height:var(--ph-h,38px);display:flex;align-items:center;justify-content:center;padding:5px 16px;text-align:center}
.ph-msg{margin:0;display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px}
.ph-msg strong,.ph-msg b{font-weight:700}
.ph-msg a:not(.ph-btn){color:var(--ph-acc,#FFB41F);text-decoration:underline;text-underline-offset:2px}
.ph-btn{display:inline-flex;align-items:center;min-height:24px;padding:3px 12px;border-radius:999px;background:var(--ph-acc,#FFB41F);color:var(--ph-btn-fg,#2A363F);font-weight:700;font-size:12.5px;line-height:1.2;white-space:nowrap;transition:filter .2s ease}
.ph-btn:hover,.ph-btn:focus-visible{filter:brightness(1.08)}
.preheader a:focus-visible{outline:2px solid var(--ph-fg,#fff);outline-offset:2px}
/* barra fija (opción del panel): se queda arriba y la cabecera se pega justo debajo (header top:--cab-off) */
.preheader.ph-fija{position:sticky;top:0}
/* con la cabecera blanca (.scrolled), su backdrop-filter hace que lo position:fixed de dentro se mida desde
   la propia cabecera y no desde la ventana: ahí el panel del menú y el velo van a 76 px, sin sumar la barra */
header.scrolled .mega .dropdown:not(#_),header.scrolled::after{top:76px}
/* carrusel: los mensajes apilados en la misma celda; solo se ve el .is-on */
.ph-rot{display:grid;width:100%}
.ph-rot>.ph-msg{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease,visibility .45s}
.ph-rot>.ph-msg.is-on{opacity:1;visibility:visible;transform:none}
.ph-quieto .ph-rot>.ph-msg{transition:none;transform:none}
/* cinta: dos copias seguidas que se desplazan media pista (sin salto al volver a empezar) */
.ph-cinta{width:100%;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ph-pista{display:flex;width:max-content;animation:ph-cinta var(--ph-dur,24s) linear infinite}
.ph-copia{display:flex}
.ph-copia>.ph-msg{flex-wrap:nowrap;white-space:nowrap;padding-right:64px}
.ph-cinta:hover .ph-pista,.ph-cinta:focus-within .ph-pista{animation-play-state:paused}
@keyframes ph-cinta{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ph-pista{animation:none;width:auto;justify-content:center}.ph-copia[aria-hidden]{display:none}.ph-cinta{-webkit-mask:none;mask:none}.ph-copia{flex-wrap:wrap;justify-content:center}.ph-copia>.ph-msg{white-space:normal;padding:0 12px}}
@media(max-width:600px){.preheader{font-size:12.5px}.ph-in{padding:5px 12px}.ph-btn{font-size:12px;padding:2px 10px}}

/* Header */
header{position:sticky;top:var(--cab-off,0px);z-index:60;background:var(--hero-top);border-bottom:1px solid transparent;transition:background .28s ease,border-color .28s ease,box-shadow .28s ease}
header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 6px 20px rgba(42,54,63,.08)}
header:not(.scrolled) .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
header:not(.scrolled) .burger{color:#fff}
header.scrolled .navlink{color:#374550}
header.scrolled .navlink:hover{color:var(--ink);background:var(--soft)}
header.scrolled .phone{color:var(--ink)} /* el mismo color que el fondo del pie */
.nav{display:flex;align-items:center;gap:30px;height:76px}
header .wrap{max-width:none} /* el header usa el mismo ancho que .hero (sin tope de 1160px) */
/* Mismo SVG (icono + texto) en header y footer; solo cambia el color del texto
   (currentColor) según el fondo — el tamaño no varía nunca, ni al hacer scroll. */
.brand-link{margin-right:22px}
.logo-mark{height:32px;width:auto;display:block;color:#fff;transition:color .2s ease}
header.scrolled .logo-mark{color:#000}
.menu{display:flex;align-items:center;gap:6px;flex:1}
.navitem{position:relative;display:flex;align-items:center;height:76px}
.navlink{display:inline-flex;align-items:center;gap:5px;padding:10px 14px;font-size:15px;font-weight:500;color:#e7edf2;border-radius:8px;cursor:pointer;transition:color .2s ease,background .2s ease}
.navlink:hover{color:#fff;background:rgba(255,255,255,.12)}
.navlink svg{width:14px;height:14px;transition:.2s}
.navitem:hover .navlink svg,.navitem.is-open .navlink svg{transform:rotate(180deg)}
/* Los títulos del menú son <button>: solo abren su desplegable (decidido 2026-11-07), no llevan a ninguna página */
button.navlink{background:transparent;border:0;font-family:inherit;line-height:inherit;margin:0}
.right{display:flex;align-items:center;gap:14px;margin-left:auto}
.phone{color:#8fd3ec;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;transition:color .2s ease}
/* Botón «Agente»: abre el chat (consent.js → window.imChat). Aro de degradado que gira
   (conic-gradient de fondo y ::before opaco encima a 2px del borde: SIN mask, que Safari/iPhone
   pintaba mal) con un brillo difuminado detrás (::after); al pasar el ratón el brillo crece, el giro
   se acelera y los destellos del icono parpadean. El relleno es el color de la cabecera
   (--hero-top, siempre sólido) + un velo blanco (--ag-fill), igual que el antiguo fondo translúcido. */
@property --ag-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.agente{--ag-dur:6s;--ag-base:var(--hero-top);--ag-fill:rgba(255,255,255,.06);position:relative;flex-shrink:0;isolation:isolate;display:inline-flex;align-items:center;gap:7px;padding:9px 16px 9px 13px;min-height:40px;border:0;border-radius:999px;background:conic-gradient(from var(--ag-ang),#6C63FF,#00D4AA,var(--amber),#6C63FF);animation:ag-gira var(--ag-dur) linear infinite;color:#fff;font:600 14px/1 var(--font-body);cursor:pointer;transition:color .25s ease,transform .25s ease}
.agente::before{content:"";position:absolute;inset:2px;z-index:-1;border-radius:inherit;background:linear-gradient(var(--ag-fill),var(--ag-fill)) var(--ag-base);pointer-events:none}
.agente::after{content:"";position:absolute;inset:-3px;z-index:-2;border-radius:inherit;background:conic-gradient(from var(--ag-ang),#6C63FF,#00D4AA,var(--amber),#6C63FF);filter:blur(3px);opacity:.3;animation:ag-gira var(--ag-dur) linear infinite;transition:opacity .3s ease;pointer-events:none}
.agente-ico{fill:currentColor;overflow:visible}
/* «Iniciar sesión»: misma píldora y borde de 2px que el botón Agente (aquí liso); al pasar el ratón se rellena */
.login{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 11px;min-height:40px;border:2px solid rgba(255,255,255,.30);border-radius:999px;color:#fff;font:600 14px/1 var(--font-body);transition:background .25s ease,color .25s ease,border-color .25s ease}
.login svg{width:18px;height:18px;flex-shrink:0}
.login:hover,.login:focus-visible{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.55)}
header.scrolled .login{color:var(--ink);border-color:#cfd6dd}
header.scrolled .login:hover,header.scrolled .login:focus-visible{background:var(--soft);border-color:#b8c2cb}
body.theme-n8n header.scrolled .login{color:#fff;border-color:rgba(255,255,255,.30)}
body.theme-n8n header.scrolled .login:hover{background:rgba(255,255,255,.10)}
.agente-ico path{transform-box:fill-box;transform-origin:center}
.agente:hover,.agente:focus-visible{--ag-dur:1.6s;--ag-fill:rgba(255,255,255,.09);transform:translateY(-1px)}
.agente:hover::after,.agente:focus-visible::after{opacity:.6}
.agente:hover .s1{animation:ag-late 1.2s ease-in-out infinite}
.agente:hover .s2{animation:ag-late 1.2s ease-in-out .3s infinite}
.agente:hover .s3{animation:ag-late 1.2s ease-in-out .6s infinite}
.agente:active{transform:translateY(0) scale(.97)}
header.scrolled .agente{--ag-base:#fff;--ag-fill:transparent;color:var(--ink)}
header.scrolled .agente:hover,header.scrolled .agente:focus-visible{--ag-fill:#f7f6ff}
body.theme-n8n header.scrolled .agente{--ag-base:#0b0e12;--ag-fill:rgba(255,255,255,.06);color:#fff}
@keyframes ag-gira{to{--ag-ang:360deg}}
@keyframes ag-late{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55) rotate(45deg);opacity:.55}}
@media(prefers-reduced-motion:reduce){.agente,.agente::after,.agente .agente-ico path{animation:none!important}.agente:hover{transform:none}}
/* Ningún texto de la cabecera se parte en dos líneas; por debajo de 1040 px el teléfono se queda solo en el menú */
header .navlink,.right>a{white-space:nowrap}
@media(max-width:1040px){.right .phone{display:none}}
@media(max-width:1100px){.nav{gap:18px}.brand-link{margin-right:0}.navlink{padding:10px 10px}.right{gap:10px}}
/* El mismo botón en todos los anchos; solo icono en móviles muy estrechos */
@media(max-width:340px){.agente{padding:0;width:42px;height:42px;justify-content:center}.agente-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* Cabecera en móvil: logo + Agente + menú («Iniciar sesión» y «Contactar» van dentro del menú) */
@media(max-width:600px){.brand-link{margin-right:0}.right{gap:10px}}
.burger{display:none;color:var(--ink);background:none;border:none;cursor:pointer}

/* Dropdowns */
.dropdown{position:absolute;top:100%;left:0;padding-top:12px;display:none}
.navitem:hover .dropdown,.navitem:focus-within .dropdown,.navitem.is-open .dropdown{display:block}
.navitem.is-shut .dropdown{display:none}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.mega .dropdown{position:fixed;left:0;right:0;top:calc(76px + var(--cab-off,0px));padding-top:0}
.mega .panel{width:100%;border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;box-shadow:var(--shadow);padding:22px 0}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mitem{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:11px;transition:.15s}
.mitem:hover{background:var(--soft)}
.mitem .mi{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.mitem .mi svg{width:26px;height:26px}
/* logos de marca (n8n, OpenClaw): relleno en el color del icono, nunca trazo */
.mitem .mi svg.mi-logo{fill:var(--ink);stroke:none!important}
.mitem h4{font-size:15px;margin-bottom:2px}
.mitem p{font-size:12.5px;color:var(--muted);line-height:1.45}
/* Menú grande tipo Hostinger (2026-10-17): pestañas a la izquierda (.mx-rail), productos
   en el centro (.mx-items) y una tarjeta destacada a la derecha (.mx-card) por pestaña.
   La tarjeta usa el mismo degradado que el plan destacado. */
.mx{display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:start}
.mx.mx-norail{grid-template-columns:1fr}
.mx-rail{display:flex;flex-direction:column;gap:4px;padding-right:20px;border-right:1px solid var(--line);align-self:stretch}
.mx-tab{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;border-radius:10px;background:none;font:600 14.5px var(--font-body);color:var(--ink);cursor:pointer;text-align:left;transition:background .15s,color .15s}
.mx-tab svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.mx-tab:hover{background:var(--soft)}
.mx-pane{display:none;grid-template-columns:1fr 290px;gap:28px;align-items:stretch}
.mx-pane.active{display:grid}
/* cambio de pestaña (footer.php): sale lo de la sección actual y entra lo nuevo, escalonado */
.mx-pane.is-sale .mx-h,.mx-pane.is-sale .mitem,.mx-pane.is-sale .mx-zones a,.mx-pane.is-sale .mx-card{animation:mx-sale .17s ease-in forwards}
.mx-pane.is-entra .mx-h,.mx-pane.is-entra .mitem,.mx-pane.is-entra .mx-zones a,.mx-pane.is-entra .mx-card{animation:mx-entra .38s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--mx-i,0) * 35ms)}
.mx-pane.is-entra .mx-card{animation-delay:calc(var(--mx-i,0) * 35ms + 60ms)}
@keyframes mx-sale{to{opacity:0;transform:translateY(-8px)}}
@keyframes mx-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mx-pane.is-sale *,.mx-pane.is-entra *{animation:none!important}}
.mx-h{font:700 11.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px 12px}
.mx-h2{margin-top:18px}
.mx-grid,.mx-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 12px;align-content:start}
.mx-zones{display:flex;flex-wrap:wrap;gap:8px;padding-left:12px}
.mx-zones a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:500;transition:.15s}
.mx-zones a svg{width:14px;height:14px;color:var(--teal)}
.mx-zones a:hover{border-color:var(--teal);background:var(--soft)}
.mx-card{display:flex;flex-direction:column;gap:8px;min-height:230px;padding:22px;border-radius:18px;color:#c3ced7;font-size:13.5px;line-height:1.5;
  background:
    radial-gradient(circle at 27% 8%, rgba(46,134,166,.30), transparent 42%),
    radial-gradient(circle at 76% 4%, rgba(49,131,215,.22), transparent 46%),
    linear-gradient(165deg,#2A363F 0%,#1a232b 24%,#0b1116 50%,#000 100%);
  border:1px solid rgba(46,134,166,.45);box-shadow:0 22px 44px -26px rgba(11,17,22,.8)}
.mx-card strong{font-family:var(--font-title);font-size:19px;line-height:1.25;color:#fff}
.mx-card-k{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8fd3ec}
.mx-card-btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:10px;background:#fff;color:#2A363F;font-weight:600;font-size:14px;transition:background .2s}
.mx-card-btn svg{width:15px;height:15px}
.mx-card:hover .mx-card-btn{background:var(--amber)}
.mx-specs{display:flex;flex-wrap:wrap;gap:6px}
.mx-specs span{padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:11.5px;font-weight:700}
.mx-card-fino{font-size:11px;color:#8a97a1}
.mx-search{margin-top:auto;display:flex;background:#fff;border-radius:10px;overflow:hidden}
/* Tarjeta de IndedLabs Chat: colores de su marca (violeta #6C63FF → aguamarina #00D4AA) y una
   mini conversación animada. :not(#_) le da prioridad sobre las variantes de tema del panel. */
.mx-card.mx-chat:not(#_){position:relative;overflow:hidden;gap:10px;color:#A0A0B0;
  background:radial-gradient(120% 80% at 100% 0%,rgba(108,99,255,.45),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(0,212,170,.22),transparent 60%),#0A0A0F;
  border:1px solid rgba(139,131,255,.55);box-shadow:0 0 0 1px rgba(0,212,170,.12),0 18px 44px -18px rgba(108,99,255,.75)}
.mx-chat strong{font-size:18px;line-height:1.2}
.mxc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mxc-pill{padding:4px 10px;border-radius:999px;background:linear-gradient(135deg,#6C63FF,#00D4AA);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mxc-marca{font-size:11.5px;font-weight:700;color:#8B83FF}
.mxc-conv{display:flex;flex-direction:column;gap:6px;min-height:84px;padding:10px;border-radius:12px;background:#12121A;border:1px solid #2A2A3A}
.mxc-b{max-width:88%;padding:6px 10px;border-radius:12px;font-size:12px;line-height:1.35;opacity:0}
.mxc-u{align-self:flex-end;background:#2A2A3A;color:#fff;border-bottom-right-radius:4px;animation:mxcU 7s infinite}
.mxc-ia{align-self:flex-start;background:linear-gradient(135deg,#6C63FF,#4A42D4);color:#fff;border-bottom-left-radius:4px;animation:mxcIA 7s infinite}
.mxc-t{align-self:flex-start;display:none;gap:4px;padding:8px 10px;background:#1A1A25;animation:mxcT 7s infinite}
.mxc-t i{width:6px;height:6px;border-radius:50%;background:#8B83FF;animation:mxcDot 1s infinite}
.mxc-t i:nth-child(2){animation-delay:.15s}.mxc-t i:nth-child(3){animation-delay:.3s}
.mxc-sub{font-size:12.5px;line-height:1.45}
.mx-card.mx-chat:not(#_) .mxc-btn{background:linear-gradient(135deg,#6C63FF,#00D4AA);color:#fff;font-weight:700}
.mx-card.mx-chat:not(#_):hover .mxc-btn{background:linear-gradient(135deg,#7d75ff,#14e3b9);box-shadow:0 8px 22px -8px rgba(0,212,170,.8)}
@keyframes mxcU{0%,4%{opacity:0;transform:translateY(6px)}8%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mxcT{0%,15%{display:none;opacity:0}16%,30%{display:flex;opacity:1}31%,100%{display:none;opacity:0}}
@keyframes mxcIA{0%,31%{opacity:0;transform:translateY(6px)}35%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mxcDot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@media(prefers-reduced-motion:reduce){.mxc-b{animation:none!important;opacity:1}.mxc-t{display:none!important}}
.mx-search:focus-within{box-shadow:0 0 0 2px var(--amber)}
.mx-search input{flex:1;min-width:0;border:none;outline:none;padding:12px 14px;font:500 14px var(--font-body);color:#2A363F;background:#fff}
.mx-search button{display:flex;align-items:center;justify-content:center;width:48px;border:none;background:var(--amber);color:#2A363F;cursor:pointer}
.mx-search button svg{width:18px;height:18px}
/* Panel flotante (como Hostinger): no ocupa todo el ancho, deja 8px bajo el header y
   oscurece la página. Su color sigue al header: oscuro arriba (sobre el hero oscuro),
   blanco cuando el header ya se ha vuelto blanco al hacer scroll; en n8n siempre oscuro.
   Solo escritorio: en móvil manda el acordeón. */
@media(min-width:901px){
  /* ancho: desde el inicio del menú hasta el final de «Iniciar sesión» (--mx-l/--mx-r los mide
     el JS de footer.php; sin JS, 24px a cada lado) */
  .mega .dropdown{top:calc(76px + var(--cab-off,0px));padding:8px var(--mx-r,24px) 0 var(--mx-l,24px);z-index:2}
  .mega .panel{--mp-bg:#fff;--mp-line:rgba(0,0,0,.10);--mp-tx:var(--ink);--mp-mut:var(--muted);--mp-hov:var(--soft);--mp-sel:rgba(46,134,166,.12);--mp-ico:#2A363F;
    max-width:none;margin:0;padding:24px 28px;background:var(--mp-bg);border:1px solid var(--mp-line);border-radius:16px;box-shadow:0 24px 60px -24px rgba(0,0,0,.45)}
  header:not(.scrolled) .mega .panel,body.theme-n8n header .mega .panel{--mp-bg:#101417;--mp-line:rgba(255,255,255,.15);--mp-tx:#fff;--mp-mut:#9aa6b0;--mp-hov:rgba(255,255,255,.07);--mp-sel:rgba(255,255,255,.12);--mp-ico:#e7edf2}
  header .mega .mx{max-width:none;padding:0}
  /* (2026-10-18) El panel oscuro ya NO toma el degradado del hero de cada página: siempre el
     #101417 de la home (decisión del cliente). Blanco al hacer scroll, igual que antes. */
  .mega .mitem h4{color:var(--mp-tx)}
  .mega .mitem p{color:var(--mp-mut)}
  .mega .mitem:hover{background:var(--mp-hov)}
  .mega .mitem .mi svg{stroke:var(--mp-ico)}
  .mega .mitem .mi svg.mi-logo{fill:var(--mp-ico)}
  .mx-rail{border-right-color:var(--mp-line)}
  .mx-tab{color:var(--mp-tx);border-radius:40px}
  .mx-tab svg{color:var(--mp-mut)}
  /* Pestaña activa con los colores del logo: píldora teal y hover en cian suave */
  .mx-tab:hover{background:rgba(110,207,234,.16)}
  .mx-tab[aria-selected="true"]{background:var(--teal);color:#fff}
  .mx-tab[aria-selected="true"] svg{color:#fff}
  .mx-h{color:var(--mp-mut)}
  .mx-zones a{border-color:var(--mp-line);color:var(--mp-tx)}
  .mx-zones a:hover{background:var(--mp-hov);border-color:var(--teal)}
  /* velo que oscurece la página (pointer-events:none: el ratón «lo atraviesa» y el menú se cierra al salir) */
  header::after{content:"";position:fixed;top:calc(76px + var(--cab-off,0px));left:0;right:0;height:100vh;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1}
  header:has(.mega:hover)::after,header:has(.mega:focus-within)::after{opacity:1}
}

/* Barra de dominios (bloque propio, encima del hero) */
/* Buscador de dominios de la home: dentro del hero, encima del vídeo, en «liquid glass» (caja
   translúcida que difumina el vídeo de detrás, borde y reflejo finos). No lleva .hero-topbar: sigue
   visible cuando el vídeo se amplía y se va con el hero. Botón ámbar con forma de píldora. */
/* Ancho y posición respecto a la tarjeta del vídeo (unidades cq* de .hero-stage): 25 px de aire a cada lado
   y 40 arriba. En el hero cinemático la tarjeta empieza reducida (scale .9 → borde a un 5 % del escenario) y
   al ampliarse ocupa todo; el buscador la sigue con la misma transición. */
.hero-stage{container-type:inline-size}
.hero-domain{position:relative;z-index:3;width:calc(100cqw - 50px);margin:-65px 0 34px 25px}
.hero-pin.is-cinema .hero-stage{container-type:size}
.hero-pin.is-cinema .hero-domain{position:absolute;top:calc(5cqh + 40px);left:calc(5cqw + 25px);width:calc(90cqw - 50px);margin:0}
.hero-pin.is-cinema.is-zoomed .hero-domain{top:40px;left:25px;width:calc(100cqw - 50px)}
.hero-pin.is-cinema.cine-anim .hero-domain{transition:top .7s cubic-bezier(.22,.61,.36,1),left .7s cubic-bezier(.22,.61,.36,1),width .7s cubic-bezier(.22,.61,.36,1)}
/* el resto del contenido se centra en el hueco que queda debajo del buscador */
.hero-pin.is-cinema .hero-stage>.wrap{padding-top:calc(5cqh + 40px + 64px);transition:padding-top .7s cubic-bezier(.22,.61,.36,1)}
.hero-pin.is-cinema.is-zoomed .hero-stage>.wrap{padding-top:calc(40px + 64px)}
.hero-domain .domain{position:relative;max-width:100%;width:100%;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06) 55%,rgba(255,255,255,.10));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.22);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.30);transition:border-color .25s ease,box-shadow .25s ease}
.hero-domain .domain:focus-within{border-color:rgba(255,255,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 0 0 3px rgba(255,180,31,.25),0 12px 32px rgba(0,0,0,.30)}
.hero-domain .domain .pfx{color:rgba(255,255,255,.7)}
.hero-domain .domain input{color:#fff;width:0} /* width:0 + flex:1: el ancho propio del input (size=20) ensanchaba el hero en móvil */
.hero-domain .domain input::placeholder{color:rgba(255,255,255,.7)}
.hero-domain .domain button{background:var(--amber);color:var(--ink);border-radius:999px}
.hero-domain .domain button:hover{background:#FFC24B}

/* Hero */
.herowrap{background:var(--hero-top);padding-bottom:24px}
.hero{position:relative;overflow:hidden;padding:104px 0 92px;text-align:center;background:var(--hero-grad);margin:0 24px;border-radius:18px}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-anim{position:absolute;inset:-25%;
  background:radial-gradient(circle at 22% 28%,rgba(255,180,31,.30),transparent 40%),radial-gradient(circle at 80% 22%,rgba(110,207,234,.40),transparent 42%),radial-gradient(circle at 62% 82%,rgba(49,131,215,.26),transparent 46%),radial-gradient(circle at 38% 78%,rgba(46,134,166,.22),transparent 44%);
  filter:blur(26px);animation:drift 20s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-2.5%) scale(1.1)}100%{transform:translate(-3%,2%) scale(1.05)}}
/* El overlay oscuro se mantiene siempre (en todas las fases): es lo que hace legible
   el texto sobre el vídeo, tanto en el estado normal como en el modo pantalla completa. */
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,24,30,.55),rgba(12,16,21,.78))}

/* ── Hero cinemático (home): en un punto fijo del scroll (no continuo: se dispara
   solo) el vídeo anclado (sticky) se amplía con un zoom MUY sutil (solo transform,
   nunca layout, para que no dé tirones) y la barra de LiteSpeed/cPanel se desvanece.
   El titular no se mueve hasta que ha terminado de ampliar; a partir de ahí los 3
   titulares se van sucediendo DE UNO EN UNO: el que sale sube un poco y desaparece
   del todo ANTES de que el siguiente entre desde un poco más abajo (nunca a la vez).
   Al terminar el recorrido el vídeo vuelve a su tamaño de card pero se queda con el
   ÚLTIMO titular (si subes, se deshace en el mismo orden). Ver flow.js, sección 6.
   Funciona en escritorio y móvil (altura en dvh para encajar con la barra del navegador);
   solo con "menos movimiento" no se activa (.hero-pin sin .is-cinema = hero normal con
   solo el primer titular). */
.hero-pin{position:relative;height:auto;padding-bottom:24px;background:var(--hero-top)}
.hero-stage{position:relative;overflow:hidden;padding:104px 0 92px;text-align:center;margin:0 24px;border-radius:18px;background:var(--hero-top)}
/* Modelo IONOS: el ESCENARIO ocupa toda la pantalla (sticky, alto completo bajo el
   header), así que SIEMPRE llena el viewport → no hay huecos vacíos ni al cargar ni al
   final (la card ocupa la pantalla desde el principio; debajo va la sección siguiente).
   En reposo el vídeo está enmarcado a scale(.9) (pequeño margen oscuro alrededor); al
   ampliar pasa a scale(1) + esquinas a 0 = edge-to-edge. Todo con transform (GPU, fluido). */
.hero-pin.is-cinema .hero-stage{position:sticky;top:calc(76px + var(--cab-off,0px));height:calc(100vh - 76px - var(--cab-off,0px));height:calc(100dvh - 76px - var(--cab-off,0px));margin:0;border-radius:0;padding:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hero-pin.is-cinema .hero-bg{border-radius:22px;transform-origin:50% 50%;transform:scale(.9)}
.hero-pin.is-cinema.is-zoomed .hero-bg{transform:scale(1);border-radius:0}
.hero-pin.is-cinema.is-zoomed .hero-topbar{opacity:0;transform:translateY(-14px);pointer-events:none}

.hero-slide-group{position:relative}
/* Los 3 titulares se apilan en la MISMA celda de grid, no con position:absolute:
   así el grupo toma solo la altura del más alto y crece si el texto es más largo.
   Con la altura fija de 240px que había antes, un titular de más de dos líneas se
   desbordaba por arriba (tapando la barra de dominios) y por abajo (sobre los cuadros). */
.hero-pin.is-cinema .hero-slide-group{display:grid;min-height:240px}
.hero-slide-text{display:none}
.hero-text-1{display:block}
.hero-pin.is-cinema .hero-slide-text{display:flex;grid-area:1/1;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateY(22px);pointer-events:none}
.hero-pin.is-cinema .hero-slide-text.is-in{opacity:1;transform:translateY(0);pointer-events:auto}
.hero-pin.is-cinema .hero-slide-text.is-out-up{opacity:0;transform:translateY(-22px)}
.hero-pin.is-cinema .hero-slide-text.is-out-down{opacity:0;transform:translateY(22px)}

/* Las transiciones SOLO se activan tras el primer pintado (.cine-anim lo añade el JS
   con un par de rAF). Así, al cargar la página, el hero parte YA en su tamaño card y
   con el primer titular fijo, sin ninguna animación de entrada (nada de "aparece a
   full screen y se reduce"). A partir de ahí, el scroll sí anima con estas transiciones. */
.hero-pin.is-cinema.cine-anim .hero-bg{transition:transform .7s cubic-bezier(.22,.61,.36,1),border-radius .7s ease}
.hero-pin.is-cinema.cine-anim .hero-topbar{transition:opacity .45s ease,transform .45s ease}
.hero-pin.is-cinema.cine-anim .hero-slide-text{transition:opacity .4s ease,transform .4s ease}
.hero-slide-text h2{font-size:clamp(34px,4.6vw,54px);line-height:1.08;letter-spacing:-1.2px;font-weight:800;color:#fff;max-width:760px;margin:0 auto}
.hero-text-3 h2{margin-bottom:14px}

/* ── Tema por página: cada página juega con un color en el header/hero,
   en degradado moderno hacia negro. Se activa con una clase en <body>. ── */
body.theme-wp{
  --hero-top:#0a0e12; /* casi negro: header + marco del hero */
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(46,134,166,.24), transparent 46%),
    linear-gradient(165deg,#2A363F 0%,#1a232b 24%,#0b1116 50%,#000 100%);
}
/* En WP no hay vídeo: el .hero-anim por defecto mete un blob ÁMBAR (se vuelve
   marrón sobre el slate) y blobs abajo que tapan el negro. Lo reemplazamos por
   un brillo frío SOLO arriba, dejando la mitad inferior en negro. */
body.theme-wp .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(46,134,166,.30), transparent 42%),
    radial-gradient(circle at 76% 12%, rgba(49,131,215,.22), transparent 46%);
}
/* Hosting Web (hosting profesional): GRAFITO/ACERO — base casi negra neutra con un brillo
   frío acero/cian muy sutil (sin color fuerte). Sobrio y "premium", distinto del azul de
   WP y del lila de Woo. */
body.theme-web{
  --hero-top:#0c0f11;
  --hero-grad:
    radial-gradient(120% 110% at 30% 0%, rgba(150,170,185,.16), transparent 50%),
    linear-gradient(165deg,#343a3f 0%,#20252a 26%,#0f1215 52%,#000 100%);
}
body.theme-web .hero-anim{
  background:
    radial-gradient(circle at 30% 14%, rgba(174,190,203,.16), transparent 46%),
    radial-gradient(circle at 76% 12%, rgba(110,207,234,.12), transparent 48%);
}
/* Hosting n8n: acento ROSA de la marca nueva de n8n (Accent Pink #FF91AC y su escala oscura #87003C/#5A0026/
   #44001B, guidelines.n8n.design/colors; cambio de marca del 14-10-2026; antes era el coral #ea4b71).
   Rosa claro → texto NEGRO encima (#191919, como hace n8n), nunca blanco. */
body.theme-n8n{
  --hero-top:#1a0610;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(255,145,172,.30), transparent 52%),
    linear-gradient(165deg,#5A0026 0%,#3a0019 24%,#1a0610 50%,#000 100%);
  --p2-ac:#FF91AC; --p2-glow:rgba(255,145,172,.7);
}
body.theme-n8n .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(255,145,172,.34), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(135,0,60,.40), transparent 46%);
}
/* ── n8n: PÁGINA COMPLETA EN OSCURO. A diferencia del resto (claras con hero oscuro),
   esta es negra de arriba abajo con un fondo de red neuronal. Se consigue volteando los
   tokens de color bajo body.theme-n8n; se parchean los pocos colores fijos. ── */
body.theme-n8n{
  --page:#06080b; --surface:#0e141b; --soft:#182029; --ink:#eef2f6; --muted:#9fb0bd;
  --line:rgba(255,255,255,.10);
}
body.theme-n8n .herowrap{background:transparent;position:relative;z-index:2}
body.theme-n8n .flow{background:transparent}
body.theme-n8n .flow-bg{display:none}
/* el footer usa var(--ink) como fondo (aquí es claro) → lo fijamos oscuro */
/* position+z-index: sin ellos, el fondo fijo .n8n-neural (opaco, z-index:0) tapaba el footer entero */
body.theme-n8n footer{background:#080b0e;position:relative;z-index:2}
body.theme-n8n .social a:hover{color:#10151b}
/* HEADER: en n8n NO se aclara al hacer scroll, se mantiene oscuro */
body.theme-n8n header.scrolled{background:rgba(9,12,16,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.5)}
body.theme-n8n header.scrolled .navlink{color:#e7edf2}
body.theme-n8n header.scrolled .navlink:hover{color:#fff;background:rgba(255,255,255,.10)}
body.theme-n8n header.scrolled .phone{color:#8fd3ec}
body.theme-n8n header.scrolled .logo-mark{color:#fff}
body.theme-n8n header.scrolled .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
body.theme-n8n header.scrolled .burger{color:#fff}
/* parches de componentes con color fijo para que se lean en oscuro */
body.theme-n8n .subnav-link.active{background:#FF91AC;color:#191919}
body.theme-n8n .feat-list li{color:#c3ced7}
body.theme-n8n .link{color:#7fd3ee}
body.theme-n8n .band{background:linear-gradient(135deg,rgba(255,145,172,.14),rgba(16,22,30,.65));border-color:rgba(255,145,172,.4)}
body.theme-n8n .band p{color:#c3ced7}
body.theme-n8n .band .t .em{color:#FFBCCA}
body.theme-n8n .plan.featured{background:linear-gradient(160deg,#3a0019,#160910)}

/* Fondo de red neuronal (fijo detrás de todo). Nodos en malla + conexiones por cercanía,
   con glow y parpadeo. Respeta prefers-reduced-motion. */
.n8n-neural{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(135% 100% at 50% -18%,#101b26 0%,#080c11 55%,#05070a 100%)}
.n8n-neural .nn-net{position:absolute;inset:0;width:100%;height:100%}
.nn-glow{position:absolute;border-radius:50%;filter:blur(90px)}
.nn-glow.g1{width:600px;height:600px;background:radial-gradient(circle,rgba(255,145,172,.42),transparent 70%);top:-140px;left:-120px;animation:nnDrift 22s ease-in-out infinite alternate}
.nn-glow.g2{width:680px;height:680px;background:radial-gradient(circle,rgba(46,134,166,.42),transparent 70%);bottom:-180px;right:-140px;animation:nnDrift 27s ease-in-out infinite alternate-reverse}
.nn-glow.g3{width:460px;height:460px;background:radial-gradient(circle,rgba(151,89,211,.30),transparent 70%);top:38%;left:42%;animation:nnDrift 31s ease-in-out infinite alternate}
.nn-link{stroke-width:1;opacity:.14;animation:nnLink 7s ease-in-out infinite}
.nn-node{animation:nnNode 4.5s ease-in-out infinite}
.nn-node.c{filter:drop-shadow(0 0 5px rgba(255,145,172,.75))}
.nn-node.y{filter:drop-shadow(0 0 5px rgba(110,207,234,.7))}
@keyframes nnNode{0%,100%{opacity:.28}50%{opacity:1}}
@keyframes nnLink{0%,100%{opacity:.05}50%{opacity:.2}}
@keyframes nnDrift{0%{transform:translate(0,0)}100%{transform:translate(40px,34px)}}
@keyframes mnavIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes mnavBack{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@media(min-width:901px){.mnav{display:none!important}}

@media(prefers-reduced-motion:reduce){ .nn-node,.nn-link,.nn-glow{animation:none} }
/* WooCommerce: acento lila sobre el mismo degradado hacia negro. */
body.theme-woo{
  --hero-top:#180d24;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(151,89,211,.46), transparent 52%),
    linear-gradient(165deg,#4f2c72 0%,#2d1942 24%,#150c1f 50%,#000 100%);
}
body.theme-woo .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(173,105,230,.5), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(126,86,214,.36), transparent 46%);
}

/* ── Hero "editor": texto a la izquierda + mockup del editor WP a la derecha ── */
.hero-edit{text-align:left}
.hero-edit .hero-grid{display:grid;grid-template-columns:1.02fr 1.16fr;gap:48px;align-items:center}
.hero-edit .hero-copy{max-width:560px}
.hero-edit .sub{margin:18px 0 6px;max-width:none}
.hero-edit .sub2{margin:0 0 30px;max-width:560px}
.hero-edit .hero-cta{justify-content:flex-start}
.hero-note{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:18px;color:#c3ced7;font-size:14px;font-weight:600}
.hero-note svg{width:18px;height:18px;color:var(--cyan);flex-shrink:0}

/* Mockup del editor de bloques de WordPress (decorativo) */
.hero-visual{position:relative}
.wpmock{position:relative;width:100%;max-width:560px;margin-left:auto;padding-top:26px;line-height:1.4}
.wpmock-win{position:relative;display:flex;background:var(--surface);border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);box-shadow:0 34px 70px -24px rgba(0,0,0,.6),0 8px 20px rgba(0,0,0,.32)}
/* sidebar negra de WP */
.wpmock-side{flex-shrink:0;width:46px;background:var(--ink-deep);display:flex;flex-direction:column;align-items:center;gap:13px;padding:13px 0}
.wpmock-side .wp{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--ink-deep);display:flex;align-items:center;justify-content:center}
.wpmock-side .wp svg{width:18px;height:18px}
.wpmock-side .si{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.18)}
.wpmock-side .si.on{background:var(--blue)}
/* canvas: la web que se edita */
.wpmock-canvas{flex:1;min-width:0;background:linear-gradient(180deg,#fbfcfd,#eef2f6);padding:14px 15px 16px}
.cv-nav{display:flex;gap:16px;justify-content:center;font-size:9px;font-weight:600;color:#5b6770;margin-bottom:12px}
.cv-stage{position:relative;border-radius:11px;overflow:hidden;height:228px}
.cv-illus{position:absolute;inset:0;width:100%;height:100%}
.cv-selected{position:absolute;left:12px;top:48px;width:62%;height:70px;border:1.5px solid var(--blue);border-radius:6px;box-shadow:0 0 0 3px rgba(49,131,215,.18)}
.cv-bt{position:absolute;left:12px;top:14px;z-index:3;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 9px;box-shadow:var(--shadow);font-size:9.5px;font-weight:700;color:var(--ink)}
.cv-bt .ai{color:#2a6fbf}
.cv-bt i{font-style:italic;font-family:var(--font-title)}
.cv-heading{position:absolute;left:14px;top:54px;max-width:64%;font-family:var(--font-title);font-weight:800;font-size:25px;line-height:1.05;letter-spacing:-.5px;color:#1c2730}
.cv-buttons{position:absolute;left:14px;bottom:16px;display:flex;gap:8px}
.cv-btn{font-size:9px;font-weight:600;color:#fff;background:var(--ink);border-radius:20px;padding:6px 12px}
.cv-btn.ghost{background:rgba(255,255,255,.88);color:var(--ink)}
/* barra superior flotante */
.wpmock-top{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:7px 11px;box-shadow:0 16px 32px -10px rgba(0,0,0,.5)}
.wpmock-top .ti{width:17px;height:17px;border-radius:5px;background:#eef2f6;color:#5b6770;display:flex;align-items:center;justify-content:center;font-size:10px}
.wpmock-top .ti.add{background:var(--blue);color:#fff;font-weight:700}
.wpmock-top .doc{font-size:9px;color:#5b6770;background:#f1f4f7;border-radius:6px;padding:4px 16px;white-space:nowrap}
.wpmock-top .save{font-size:9px;font-weight:700;color:#fff;background:#2a6fbf;border-radius:7px;padding:5px 12px}
/* tarjetas flotantes superpuestas */
.wpmock-card{position:absolute;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 22px 48px -16px rgba(0,0,0,.55)}
.wpmock-card.prod{right:-4px;bottom:30px;width:188px;padding:13px}
.wpmock-card.prod h6{font-family:var(--font-title);font-size:12.5px;font-weight:800;color:var(--ink)}
.wpmock-card.prod p{font-size:9px;color:var(--muted);margin-top:3px}
.wpmock-card.prod .pimg{position:relative;height:78px;border-radius:9px;margin-top:9px;background:linear-gradient(135deg,#e7dcff,#c5aeee)}
.wpmock-card.prod .price{position:absolute;top:6px;right:6px;background:var(--surface);border-radius:12px;font-size:9px;font-weight:800;color:var(--ink);padding:3px 9px;box-shadow:var(--shadow-sm)}
.wpmock-card.ai{right:40px;bottom:-16px;width:212px;padding:12px 14px}
.wpmock-card.ai .row{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;color:var(--ink)}
.wpmock-card.ai .spark{color:var(--blue);font-size:13px}
.wpmock-card.ai .bar{height:5px;border-radius:3px;background:#e7ebef;margin-top:10px;overflow:hidden}
.wpmock-card.ai .bar i{display:block;height:100%;width:100%;transform:scaleX(.62);transform-origin:left;will-change:transform;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--cyan));animation:wpAi 2.6s ease-in-out infinite}
/* ⚠️ Anima scaleX, NO width. Animar width dispara un recálculo de layout en cada
   frame, en bucle infinito; scaleX lo resuelve el compositor sobre una capa ya
   pintada. Mismo efecto visual, coste cero. No revertir a width. */
@keyframes wpAi{0%{transform:scaleX(.16)}50%{transform:scaleX(.8)}100%{transform:scaleX(.16)}}

/* Mockup del catálogo/carrito de una tienda WooCommerce (decorativo) */
.shopmock{position:relative;width:100%;max-width:560px;margin-left:auto;padding-top:26px;line-height:1.4}
.shopmock-win{position:relative;background:var(--surface);border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);box-shadow:0 34px 70px -24px rgba(0,0,0,.6),0 8px 20px rgba(0,0,0,.32)}
.sc-nav{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#f1f4f7;border-bottom:1px solid var(--line)}
.sc-nav .dot{width:8px;height:8px;border-radius:50%}
.sc-nav .dot.r{background:#E71D24}.sc-nav .dot.y{background:#FFB41F}.sc-nav .dot.g{background:#2bb673}
.sc-nav .url{margin-left:8px;font-size:10px;color:#6b7782;background:#fff;border-radius:6px;padding:3px 10px;border:1px solid var(--line)}
.shopmock-canvas{padding:18px 18px 20px;background:linear-gradient(180deg,#fbfcfd,#eef2f6)}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sc-item{position:relative;height:92px;border-radius:11px;border:1px solid #d7dde3}
.sc-item.a{background:linear-gradient(135deg,#FFF3DA,#FFE1A6)}
.sc-item.b{background:linear-gradient(135deg,#E8F6FB,#C7E9F4)}
.sc-item.c{background:linear-gradient(135deg,#EAF1FB,#CBDDF5)}
.sc-item.d{background:linear-gradient(135deg,#FDEFE3,#F7D9BE)}
.sc-item .tag{position:absolute;left:8px;bottom:8px;background:var(--surface);font-size:10px;font-weight:700;color:var(--ink);border-radius:10px;padding:3px 8px;box-shadow:var(--shadow-sm)}
.sc-cta{margin-top:14px;text-align:center;background:var(--ink);color:#fff;font-size:12px;font-weight:700;border-radius:10px;padding:11px}
/* barra superior flotante: resumen del carrito */
.shopmock-top{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:8px 14px;box-shadow:0 16px 32px -10px rgba(0,0,0,.5)}
.shopmock-top .ti{width:18px;height:18px;color:var(--lilac)}
.shopmock-top .doc{font-size:11px;font-weight:600;color:#5b6770}
.shopmock-top .save{font-size:11px;font-weight:800;color:#fff;background:#8a4cc6;border-radius:7px;padding:5px 12px}
/* tarjetas flotantes superpuestas */
.shopmock-card{position:absolute;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 22px 48px -16px rgba(0,0,0,.55)}
.shopmock-card.cart{right:-4px;bottom:30px;width:188px;padding:13px}
.shopmock-card.cart h6{font-family:var(--font-title);font-size:12.5px;font-weight:800;color:var(--ink)}
.shopmock-card.cart p{font-size:9px;color:var(--muted);margin-top:3px}
.shopmock-card.cart .pimg{position:relative;height:78px;border-radius:9px;margin-top:9px;background:linear-gradient(135deg,#e7dcff,#c5aeee)}
.shopmock-card.cart .price{position:absolute;top:6px;right:6px;background:var(--surface);border-radius:12px;font-size:9px;font-weight:800;color:var(--ink);padding:3px 9px;box-shadow:var(--shadow-sm)}
.shopmock-card.pay{right:40px;bottom:-16px;width:206px;padding:12px 14px}
.shopmock-card.pay .row{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;color:var(--ink)}
.shopmock-card.pay .row svg{width:14px;height:14px;color:var(--lilac);flex-shrink:0}
.shopmock-card.pay .bar{height:5px;border-radius:3px;background:#e7ebef;margin-top:10px;overflow:hidden}
.shopmock-card.pay .bar i{display:block;height:100%;width:100%;transform:scaleX(.62);transform-origin:left;will-change:transform;border-radius:3px;background:linear-gradient(90deg,var(--lilac),var(--cyan));animation:wpAi 2.6s ease-in-out infinite}

@media(max-width:900px){
  .hero-edit{text-align:center}
  .hero-edit .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-edit .hero-copy{order:-1;max-width:640px;margin:0 auto}
  .hero-edit .sub,.hero-edit .sub2{margin-left:auto;margin-right:auto}
  .hero-edit .hero-cta{justify-content:center}
  .hero-note{justify-content:center}
  .wpmock{margin:0 auto;max-width:440px}
  .shopmock{margin:0 auto;max-width:440px}
}
@media(max-width:540px){
  .wpmock-card,.shopmock-card{display:none} /* en móvil pequeño evitamos amontonar las tarjetas */
}
@media(prefers-reduced-motion:reduce){
  .wpmock-card.ai .bar i,.shopmock-card.pay .bar i{animation:none;transform:scaleX(.64)}
}

/* ============================================================
   SUB-MENÚ DE ANCLAS — botones centrados (sin barra). El JS lo fija
   bajo el header al hacer scroll (.is-stuck), porque .flow tiene
   overflow:hidden y rompe position:sticky.
   ============================================================ */
.subnav{padding:6px 0 2px;text-align:center}
.subnav-inner{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm)}
.subnav-link{display:inline-flex;align-items:center;padding:8px 16px;font-size:14px;font-weight:600;color:var(--muted);
  background:transparent;border-radius:8px;white-space:nowrap;transition:color .2s,background .2s}
.subnav-link:hover{color:var(--ink);background:var(--soft)}
.subnav-link.active{color:#fff;background:var(--ink)}
/* Estado fijo bajo el header (lo activa flow.js) */
.subnav.is-stuck{position:fixed;top:var(--subnav-top,72px);left:0;right:0;z-index:55;padding:10px 0;pointer-events:none}
.subnav.is-stuck .subnav-inner{pointer-events:auto}
/* las secciones ancla no quedan tapadas por header+submenú al saltar */
#planes,#rendimiento,#caracteristicas,#faq{scroll-margin-top:calc(132px + var(--cab-off,0px))}
.hero .wrap,.hero-stage .wrap{position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#ffd479;background:rgba(255,255,255,.16);border:1px solid rgba(255,180,31,.55);border-radius:30px;padding:7px 16px;margin-bottom:24px}
.badge svg{width:15px;height:15px}
.hero h1,.hero-slide-text h1{font-size:clamp(40px,5.6vw,64px);line-height:1.04;letter-spacing:-1.4px;font-weight:800;color:#fff}
.hero .sub,.hero-slide-text .sub{margin:18px auto 6px;color:#e9eef3;font-size:clamp(19px,2.4vw,23px);font-weight:600;max-width:660px}
.hero .sub2,.hero-slide-text .sub2{color:#c3ced7;font-size:16px;max-width:560px;margin:0 auto 30px}
/* Domain search */
.domain{display:flex;max-width:580px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px;box-shadow:var(--shadow)}
.domain .pfx{display:flex;align-items:center;padding:0 6px 0 14px;color:#9aa7b2}
.domain input{flex:1;border:none;outline:none;padding:12px 10px;font-family:var(--font-body);font-size:16px;color:var(--ink);background:transparent;min-width:0}
.domain button{flex-shrink:0;background:#2A363F;color:#fff}
.domain button:hover{background:#1d262d}
.domain button .dom-ico{display:none} /* en escritorio el botón lleva texto */
/* En móvil el botón pasa a ser solo un icono de lupa (no se come el ancho) y quitamos la
   lupa de la izquierda para que el placeholder "Registra tu dominio…" se vea entero. */
@media(max-width:600px){
  .domain .pfx{display:none}
  .domain input{padding-left:14px}
  .domain button{padding:0;width:46px;align-self:stretch;justify-content:center;gap:0}
  .domain button .dom-btn-txt{display:none}
  .domain button .dom-ico{display:block}
}
.tlds{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:16px;color:#cdd7de;font-size:13px}
.tlds b{color:var(--cyan);font-family:var(--font-title);font-weight:700}

/* Stats */
.stats{display:flex;justify-content:center;flex-wrap:wrap;margin-top:40px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
.stat{flex:1;min-width:150px;padding:20px 18px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .n{color:var(--ink);font-size:20px;font-weight:700;font-family:var(--font-title)}
.stat .l{color:var(--muted);font-size:13px;margin-top:2px}

/* Sections */
section{padding:88px 0}
.sec-head{text-align:center;max-width:760px;margin:0 auto 54px}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head h2{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-1px;line-height:1.1}
.sec-head p{color:var(--muted);margin-top:14px;font-size:17px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:32px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-warm);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card .ico{width:60px;height:60px;border-radius:16px;background:linear-gradient(140deg,#FFF6E4,#FFE7BD);border:1px solid rgba(255,180,31,.35);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.card .ico svg{width:30px;height:30px}
.card .ico img{width:34px;height:34px;object-fit:contain}
.kicker{display:inline-block;color:var(--amber-text);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px}
.card h3{font-size:21px;margin-bottom:12px;letter-spacing:-.3px}
.card p{color:var(--muted);font-size:15px;flex:1;margin-bottom:22px;line-height:1.6}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.6px;margin-bottom:18px;font-weight:800;line-height:1.12}
.split p{color:var(--muted);font-size:16px;margin-bottom:16px;line-height:1.7}
.visual{position:relative;border-radius:24px;border:1px solid var(--line);background:radial-gradient(120% 120% at 0% 0%,#ffffff,#EAEFF4 72%);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:34px;box-shadow:var(--shadow)}
.visual::after{content:"";position:absolute;top:-70px;right:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,180,31,.22),transparent 70%);pointer-events:none}
.visual svg{position:relative;width:100%;height:auto;max-width:430px}

/* checklist */
.checks{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:8px}
.checks li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:#3b4751;line-height:1.6}
.checks .dot{flex-shrink:0;width:26px;height:26px;border-radius:8px;background:var(--grad-warm);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;box-shadow:0 6px 14px -6px rgba(255,122,0,.6)}
.checks .dot svg{width:15px;height:15px}
.checks b{color:var(--ink)}

/* Band */
/* overflow:clip y no solo hidden: con hidden, al enfocar el botón (tabulador) el navegador desplazaba el recuadro por dentro y cortaba el texto de la izquierda */
.band{position:relative;overflow:hidden;overflow:clip;background:linear-gradient(120deg,#FFF1D2,#FFFCF6);border:1px solid rgba(255,180,31,.5);border-radius:26px;padding:52px;display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.band::before{content:"";position:absolute;right:-90px;bottom:-130px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,0,.18),transparent 70%);pointer-events:none}
.band .t{flex:1;min-width:280px;position:relative}
.band h2{font-size:clamp(24px,3vw,32px);margin-bottom:12px;letter-spacing:-.6px;font-weight:800}
.band .t .em{color:var(--amber-text);font-weight:700}
.band p{color:#5a5340;font-size:16px;line-height:1.65}
.band .btn{position:relative}

/* Advisor */
.advisor{display:flex;align-items:flex-start;gap:26px;background:linear-gradient(135deg,#ffffff,#F5F8FB);border:1px solid var(--line);border-radius:26px;padding:44px;box-shadow:var(--shadow)}
.advisor .av{width:74px;height:74px;border-radius:20px;background:var(--grad-warm);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 12px 26px -10px rgba(255,122,0,.55)}
.advisor .av svg{width:36px;height:36px}
.advisor h3{font-size:24px;margin-bottom:2px;letter-spacing:-.3px}
.advisor .small{color:var(--amber-text);font-weight:600;font-size:14px;margin-bottom:12px}
.advisor p{color:var(--muted);font-size:15px;margin-bottom:10px;line-height:1.7}

/* FAQ */
.faq{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.q{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.q>h3{margin:0;font:inherit}
.q.open,.q:hover{border-color:rgba(255,180,31,.55);box-shadow:var(--shadow)}
.q-head{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;background:none;border:none;color:inherit;padding:21px 24px;cursor:pointer;font-size:16.5px;font-weight:600;font-family:var(--font-title)}
.q-head .pm{color:var(--amber);font-size:28px;line-height:1;transition:.25s;flex-shrink:0}
.q.open .q-head .pm{transform:rotate(45deg)}
.q-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.q-body p{padding:0 24px 24px;color:var(--muted);font-size:15px;line-height:1.7}

/* Scroll reveal — activado por JS; sin JS, el contenido se ve igual */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* Footer */
footer{background:var(--ink);padding:58px 0 30px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px}
.foot .foot-t.h5-next{margin-top:24px}
.foot .logo-mark{height:32px;margin-bottom:14px;color:#fff}
.foot p.desc{color:#aab4bd;font-size:14px;max-width:280px}
.foot .foot-t{color:#fff;font-size:15px;line-height:1.3;font-weight:700;margin:0 0 16px}  /* h2 (antes h5: saltaba niveles de encabezado) */
.foot a{color:#aab4bd;font-size:14px;display:block;margin-bottom:10px}
.foot a:hover{color:var(--amber)}
.copy{border-top:1px solid #3a4650;margin-top:44px;padding-top:24px;text-align:center;color:#a9b5bf;font-size:13px}
.social{display:flex;gap:10px;margin-top:18px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;border-radius:11px;background:rgba(255,255,255,.06);color:#aab4bd;transition:background .2s,color .2s}
.social a:hover{background:var(--amber);color:var(--ink)}
.social svg{width:19px;height:19px}

/* Prueba social (franja compacta de opiniones, justo tras el hero) */
.trustbar-sec{padding:36px 0 10px}
.trust-caption{text-align:center;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:16px}
.trustrow{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.trustbadge{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 22px;box-shadow:var(--shadow-sm);color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.trustbadge:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(255,180,31,.5)}
.tb-head{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-title);font-weight:700;font-size:14.5px}
.tb-logo{display:inline-flex}
.tb-head svg{width:18px;height:18px}
.tb-rate{display:inline-flex;align-items:center;gap:8px}
.tb-stars{display:inline-flex;gap:1px;color:var(--amber)}
.tb-stars svg{width:14px;height:14px}
.tb-score{font-family:var(--font-title);font-weight:800;font-size:17px;letter-spacing:-.3px}
.tb-score small{font-size:12px;font-weight:600;color:var(--muted)}

@media(max-width:900px){
  .right .phone,.right .btn-ghost,.right .login{display:none}
  .burger{display:block}
  .nav{justify-content:space-between}
  .cards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:30px}
  .split .visual{order:-1}
  .foot{grid-template-columns:1fr 1fr}
  section{padding:56px 0}
  .band,.advisor{padding:30px}

  /* Menú móvil: el <nav> de escritorio se oculta y el burger abre la capa .mnav */
  .menu{display:none}
  .mnav:not([hidden]){position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:#fff;
    --ink:#2A363F;--muted:#5f6b75;--line:#e2e7ec;--soft:#EEF2F6;--surface:#fff;color:var(--ink)} /* colores fijos: en n8n las variables van invertidas */
  .mnav-top{display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 24px;flex-shrink:0}
  .mnav .logo-mark{color:#000}
  .mnav-x{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:none;color:var(--ink);cursor:pointer}
  .mnav-x svg{width:26px;height:26px}
  .mnav-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 24px 24px}
  .mnav-lvl{display:none}
  .mnav-lvl.active{display:block;animation:mnavIn .22s ease}
  .mnav-lvl.active.from-back{animation-name:mnavBack}
  .mnav-h{margin:16px 0 6px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .mnav-go{display:flex;align-items:center;gap:14px;width:100%;padding:14px 0;background:none;border:none;font:500 16.5px var(--font-body);color:var(--ink);text-align:left;cursor:pointer}
  .mnav-go span{flex:1}
  .mnav-go svg{width:22px;height:22px;flex-shrink:0}
  .mnav-go svg:last-child{width:18px;height:18px;color:var(--muted)}
  .mnav hr{margin:10px 0;border:none;border-top:1px solid var(--line)}
  .mnav-back{display:flex;align-items:center;gap:8px;padding:12px 0 8px;background:none;border:none;font:700 14px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:pointer}
  .mnav-back svg{width:18px;height:18px;transform:rotate(180deg)}
  .mnav .mitem{margin:0 -10px;padding:12px 10px}
  .mnav .mx-zones{padding:4px 0 8px}
  .mnav-search{margin-top:8px}
  .mnav-search .mx-search{border:1px solid var(--line)}
  .mnav-foot{display:flex;gap:10px;flex-shrink:0;padding:14px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);box-shadow:0 -8px 20px rgba(42,54,63,.06)}
  /* botones del pie del menú: las mismas píldoras que la cabecera de escritorio (borde liso para
     «Iniciar sesión»; «Contactar» en ámbar), con icono */
  .mnav-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 12px;white-space:nowrap;border-radius:999px;font:600 15px/1 var(--font-body);transition:background .2s ease,border-color .2s ease}
  .mnav-btn svg{width:18px;height:18px;flex-shrink:0}
  .mnav-login{border:2px solid #cfd6dd;color:var(--ink)}
  .mnav-login:hover,.mnav-login:focus-visible{background:var(--soft);border-color:#b8c2cb}
  .mnav-contacto{border:2px solid var(--amber);background:var(--amber);color:var(--ink)}
  .mnav-contacto:hover,.mnav-contacto:focus-visible{background:#FFC24B;border-color:#FFC24B}
  @media(max-width:360px){.mnav-btn svg{display:none}} /* en los más estrechos el texto no cabría con icono */
  body.mnav-open{overflow:hidden}
  /* promos en el menú móvil: la misma tarjeta que en escritorio, a todo el ancho */
  .mnav-promo{margin:18px 0 6px;max-width:420px} /* en tablet, a todo el ancho quedaban estiradas */
  .mnav-promo .mx-card{min-height:0;padding:18px;border-radius:16px;color:#c3ced7;
    background:radial-gradient(circle at 27% 8%,rgba(46,134,166,.30),transparent 42%),linear-gradient(165deg,#2A363F 0%,#1a232b 30%,#0b1116 60%,#000 100%);
    border:1px solid rgba(46,134,166,.45)}
  .mnav-promo .mx-card strong{color:#fff}
  body.mnav-open #iachat-widget,body.mnav-open #im-chat-gate,body.mnav-open #im-chat-card,body.mnav-open #im-cookie-btn{display:none} /* tapaban «Contactar» */
}

/* Respeta a quien prefiere menos movimiento */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-anim{animation:none}
  .reveal{opacity:1!important;transform:none!important}
  *{transition-duration:.01ms!important}
}

/* ============================================================
   CAPA ULTRA-MODERNA (post-hero) — movimiento, capas y fondos.
   Todo afecta solo al contenido dentro de <main class="flow">.
   Nunca al hero ni al footer.
   ============================================================ */

/* Lienzo de contenido que se desliza por encima del hero */
.flow{position:relative;z-index:2;margin-top:-36px;border-radius:34px 34px 0 0;background:linear-gradient(180deg,#F7F9FB,#EEF3F8);overflow:hidden}
.flow>section{position:relative;z-index:1}

/* Blobs de color con parallax */
.flow-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.flow-bg .blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;will-change:transform}
.flow-bg .b1{width:520px;height:520px;background:radial-gradient(circle,rgba(255,180,31,.55),transparent 70%);top:80px;left:-180px}
.flow-bg .b2{width:560px;height:560px;background:radial-gradient(circle,rgba(110,207,234,.5),transparent 70%);top:1000px;right:-220px}
.flow-bg .b3{width:600px;height:600px;background:radial-gradient(circle,rgba(49,131,215,.38),transparent 70%);top:2100px;left:-200px}

/* Reveals direccionales (los activa el JS añadiendo .in) */
.r{opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity}
.r-l{transform:translateX(-56px)}
.r-r{transform:translateX(56px)}
.r-u{transform:translateY(54px)}
.r-s{transform:scale(.92)}
.r.in{opacity:1;transform:none}
.r[data-d="1"]{transition-delay:.07s}.r[data-d="2"]{transition-delay:.14s}.r[data-d="3"]{transition-delay:.21s}

/* Franja de confianza en movimiento (marquee infinito) */
/* Franja de tecnologías (estática, centrada) */
.techbar{position:relative;z-index:1;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.techbar .row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 52px}
.techbar .logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-title);font-weight:800;font-size:19px;letter-spacing:-.3px;color:var(--ink);opacity:.92}
.techbar .logo svg{width:26px;height:26px;flex-shrink:0}

/* Sección oscura inmersiva con aurora animada */
.sec-dark{position:relative;overflow:hidden;contain:paint;background:radial-gradient(120% 120% at 50% -10%,#1b2026,#05070a 58%,#000);color:#e8eef3;border-radius:34px;margin:14px 24px}
.sec-dark .aurora{position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 24% 30%,rgba(46,134,166,.28),transparent 42%),radial-gradient(circle at 82% 24%,rgba(110,207,234,.34),transparent 42%),radial-gradient(circle at 62% 84%,rgba(49,131,215,.30),transparent 46%);
  filter:blur(40px);animation:aurora 18s ease-in-out infinite alternate}
/* ⚠️ SIN `will-change:transform` a propósito. Dejarlo fijo mantiene viva para
   siempre una capa de compositor enorme (inset:-30%) con un blur de 40px, y en
   WordPress y WooCommerce hay DOS auroras seguidas dentro de contenedores con
   border-radius + overflow:hidden, lo que obliga a componerlas con máscara
   redondeada. Como la animación es translate puro, el navegador ya promueve la
   capa MIENTRAS anima y la suelta cuando el IntersectionObserver la pausa. */
@keyframes aurora{0%{transform:translate(0,0)}50%{transform:translate(5%,-5%)}100%{transform:translate(-5%,3.5%)}}
.sec-dark .wrap{position:relative;z-index:1}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p{color:#c4d0da}
.sec-dark .card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:none}   /* tarjetas sobre fondo oscuro (p. ej. PrestaShop > rendimiento) */
.sec-dark .link{color:#ffd479}
/* Enlaces dentro del texto del hero oscuro (p. ej. «escríbenos» en /contacto/): mismo ámbar que .sec-dark, subrayado para que se vea que es un enlace */
.hero .sub a,.hero .sub2 a{color:#ffd479;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.hero .sub a:hover,.hero .sub2 a:hover{color:var(--amber)}
.sec-dark .eyebrow{background:rgba(255,180,31,.14);border-color:rgba(255,180,31,.4);color:#ffd479}
.sec-dark .visual{box-shadow:0 40px 90px -34px rgba(0,0,0,.65)}

/* Tarjetas con tilt 3D (las activa el JS) + cuadrícula escalonada */
.tilt{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.cards.stagger .card:nth-child(2){margin-top:36px}

@media(max-width:900px){
  .flow{margin-top:-26px;border-radius:26px 26px 0 0}
  .sec-dark{margin:10px 12px;border-radius:24px}
  .cards.stagger .card:nth-child(2){margin-top:0}
  .r-l,.r-r{transform:translateY(48px)}
}
@media(prefers-reduced-motion:reduce){
  .marquee .track{animation:none}
  .sec-dark .aurora{animation:none}
  .r{opacity:1;transform:none}
}

/* ============================================================
   PÁGINAS DE SERVICIO — planes/precios y utilidades reutilizables.
   ============================================================ */

/* CTA dentro del hero (sobre fondo oscuro) */
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.hero .btn-ghost:hover{border-color:var(--amber);color:#fff}

/* Lista de características con check (planes + "incluido en todos los planes") */
.feat-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.feat-list li{display:flex;gap:9px;align-items:flex-start;font-size:13.8px;color:#3b4751;line-height:1.5}
.feat-list .ck{flex-shrink:0;width:18px;height:18px;border-radius:6px;background:var(--amber-soft);color:var(--amber-text);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.feat-list .ck svg{width:12px;height:12px}
.feat-list b{color:var(--ink);font-weight:600}

/* Planes / pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:18px;align-items:stretch}
/* ── ANCHO DE LA REJILLA DE PLANES ──
   Cada línea de características debe caber en UNA sola línea. Medido con Poppins 13.8px:
   el texto más largo es "Bases de datos ilimitadas" (~173px); sumando check (18) + gap (9)
   + tooltip (19) + padding de la tarjeta (21×2) + el marco extra del plan destacado (7×2),
   una tarjeta necesita ~275px. En el .wrap de 1160px sólo caben 4×264px → se partirían.
   Por eso la rejilla se sale del .wrap hacia los lados en pantallas grandes.
   El min() garantiza que NUNCA desborde el viewport (deja 20px a cada lado), y el
   minmax(285px) hace que por debajo pase a 3 columnas —holgadas— en vez de apretar 4. */
@media(min-width:1100px){
  .plans{
    width:min(calc(100% + 160px), calc(100vw - 40px));
    margin-left:calc((100% - min(calc(100% + 160px), calc(100vw - 40px))) / 2);
  }
}
.plan{position:relative;display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.plan:hover{transform:translateY(-6px)}
/* transform crea un contexto de apilamiento que encierra al tooltip: sin este
   z-index, la tarjeta vecina (posterior en el DOM) taparía el globo. */
.plan:hover,.plan:focus-within{z-index:40}
.plan-body{display:flex;flex-direction:column;flex:1;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px 21px;box-shadow:var(--shadow-sm);transition:box-shadow .28s,border-color .28s}
.plan:hover .plan-body{box-shadow:var(--shadow-lg)}
/* Plan destacado: marco oscuro (color del header de esta página) con solapa "Más popular" arriba */
.plan.featured{background:linear-gradient(160deg,#2A363F,#1a232b);border-radius:24px;padding:46px 7px 7px;box-shadow:var(--shadow)}
.plan.featured .plan-body{border:none;border-radius:18px;box-shadow:none}
.plan.featured:hover .plan-body{box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.plan-flag{position:absolute;top:0;left:0;right:0;height:46px;display:flex;align-items:center;justify-content:center;gap:7px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.plan-flag svg{width:15px;height:15px;color:var(--amber)}
/* El marco del destacado SOBRESALE (arriba 46px con la solapa, 7px a los lados y abajo) en vez
   de empujar su contenido: así la tarjeta blanca de dentro mide y empieza igual que las demás
   y precio, botón y características quedan a la misma altura en todos los planes.
   Solo con columnas lado a lado; en una sola columna se queda como estaba (no pisa a la de arriba).
   row-gap: si la rejilla pasa a 2 filas, deja sitio para la solapa del destacado de la 2.ª fila. */
@media(min-width:640px){
  .plans{row-gap:64px;margin-top:66px}   /* el aire que se come la solapa del destacado */
  .plan.featured{margin:-46px -7px -7px}
}
.plan .pname{font-family:var(--font-title);font-weight:800;font-size:21px;letter-spacing:-.3px}
.plan .ptier{color:var(--amber-text);font-size:12.5px;font-weight:600;margin-bottom:18px}
.plan .price{display:flex;align-items:baseline;gap:3px}
.plan .price .amt{font-family:var(--font-title);font-weight:800;font-size:40px;letter-spacing:-1.5px;color:var(--ink)}
.plan .price .per{color:var(--muted);font-size:14px;font-weight:600}
.plan .was{font-size:13px;color:var(--muted);margin-top:4px}
.plan .was s{color:#9aa7b2}
.plan .annual{font-size:12.5px;color:var(--amber-text);font-weight:600;margin-top:3px}
.plan .btn{width:100%;justify-content:center;margin:18px 0}
.plan-div{border:none;border-top:1px solid var(--line);margin:2px 0 18px}

/* Nota de la oferta */
.offer-note{max-width:760px;margin:28px auto 0;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}
/* Desplegable "Ver todas las características" (comparativa integrada bajo los planes) */
.cmp-toggle{margin-top:26px;text-align:center}
.cmp-toggle>summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:11px 22px;border:1.5px solid #cfd6dd;border-radius:9px;background:transparent;
  font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--ink);transition:border-color .2s,color .2s}
.cmp-toggle>summary::-webkit-details-marker{display:none}
.cmp-toggle>summary:hover{border-color:var(--amber);color:var(--amber-text)}
.cmp-toggle>summary .chev{width:16px;height:16px;transition:transform .25s}
.cmp-toggle[open]>summary .chev{transform:rotate(180deg)}
.cmp-toggle .close-txt{display:none}
.cmp-toggle[open] .open-txt{display:none}
.cmp-toggle[open] .close-txt{display:inline}
.cmp-toggle .cmp-wrap{margin-top:24px;text-align:left}

/* Comparativa de planes (tabla focalizada) */
/* `overflow-x:auto` obliga al navegador a hacer desplazable también el eje Y, y el globo
   del tooltip —que sobresale de su fila— generaba un scroll VERTICAL indeseado.
   En escritorio la tabla cabe de sobra, así que no hace falta ningún scroll: usamos
   `clip` (recorta para respetar el border-radius pero NO crea contenedor de scroll) con
   un margen generoso para que el tooltip se siga viendo entero. */
.cmp-wrap{overflow:clip;overflow-clip-margin:90px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);background:var(--surface)}
/* Solo cuando la tabla de verdad no cabe volvemos al scroll horizontal. */
@media(max-width:1180px){
  .cmp-wrap{overflow-x:auto;overflow-clip-margin:0;-webkit-overflow-scrolling:touch}
  /* ahí el eje Y vuelve a ser desplazable: el globo va debajo y pegado al borde
     izquierdo, que es donde menos sobresale de la fila */
  .cmp tbody th .tip-b{top:calc(100% + 6px);left:0;transform:translateY(4px);max-width:220px}
  .cmp tbody th .tip:hover .tip-b,.cmp tbody th .tip:focus-visible .tip-b{transform:translateY(0)}
  .cmp tbody th .tip-b::after{top:auto;bottom:100%;left:14px;transform:none;
    border-color:transparent;border-bottom-color:var(--ink-deep)}
}
.cmp{width:100%;border-collapse:collapse;min-width:720px}
.cmp th,.cmp td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--line)}
.cmp thead th{vertical-align:bottom;padding:24px 18px 20px}
.cmp .cmp-corner{text-align:left;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--muted);vertical-align:bottom}
.cmp .cmp-plan{display:block;font-family:var(--font-title);font-weight:800;font-size:19px;color:var(--ink);letter-spacing:-.3px}
.cmp .cmp-price{display:block;margin:5px 0 13px;font-family:var(--font-title);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.5px}
.cmp .cmp-price small{font-size:12px;font-weight:600;color:var(--muted)}
.cmp .cmp-btn{padding:8px 18px;font-size:13px}
.cmp tbody th{text-align:left;font-family:var(--font-body);font-weight:600;color:var(--muted);font-size:14px;white-space:nowrap}
.cmp tbody td{color:var(--ink);font-weight:600;font-size:14.5px}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp .col-feat{background:rgba(255,180,31,.08)}
.cmp thead .col-feat .cmp-plan{color:var(--amber-text)}

/* "Incluido en todos los planes" — banda oscura inmersiva a TODO EL ANCHO, con fondo en parallax */
.incl-dark{margin:0;border-radius:0;padding:92px 0;overflow:hidden;contain:paint;
  background:radial-gradient(120% 130% at 50% -10%,#1b2832,#0a1116 52%,#05080b)}
/* Capa de "imagen" propia (rejilla tech) que se desplaza al hacer scroll (flow.js).
   Para usar una foto real: background-image:url('/assets/tu-imagen.jpg');background-size:cover; */
.incl-dark .incl-bg{position:absolute;left:0;right:0;top:-22%;height:144%;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.4px,transparent 1.6px);background-size:30px 30px;
  opacity:.55;will-change:transform}
.incl-dark .incl-overlay{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,11,.55),rgba(5,8,11,.12) 42%,rgba(5,8,11,.7))}
.incl-dark .incl-skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:60%;z-index:0;pointer-events:none;opacity:.7}
.incl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.incl-card{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;
  padding:30px 26px;transition:transform .28s cubic-bezier(.2,.7,.2,1),background .28s,border-color .28s}
.incl-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.07);border-color:rgba(255,180,31,.4)}
.incl-card h3{display:flex;align-items:center;gap:11px;color:#fff;font-size:17px;letter-spacing:-.2px;margin-bottom:20px}
.incl-card h3 .ig{flex-shrink:0;width:38px;height:38px;border-radius:11px;background:rgba(255,180,31,.16);border:1px solid rgba(255,180,31,.34);color:var(--amber);display:inline-flex;align-items:center;justify-content:center}
.incl-card h3 .ig svg{width:20px;height:20px}
.incl-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.incl-list li{display:flex;gap:11px;align-items:flex-start;color:#c7d2db;font-size:14px;line-height:1.5}
.incl-list .ck{flex-shrink:0;width:20px;height:20px;border-radius:6px;background:rgba(110,207,234,.18);border:1px solid rgba(110,207,234,.3);color:var(--cyan);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.incl-list .ck svg{width:12px;height:12px}
@media(max-width:900px){
  .incl-cards{grid-template-columns:1fr;gap:16px}
  .incl-dark{padding:60px 0}
}
@media(prefers-reduced-motion:reduce){ .incl-dark .incl-bg{transform:none!important} }

/* Incluido en todos los planes */
.incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:42px;box-shadow:var(--shadow-sm)}
.incl-col h3{display:flex;align-items:center;gap:9px;font-size:16px;margin-bottom:18px;letter-spacing:-.2px}
.incl-col h3 .ig{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--amber-soft);color:var(--amber-text);display:inline-flex;align-items:center;justify-content:center}
.incl-col h3 .ig svg{width:17px;height:17px}

@media(max-width:900px){
  .incl-grid{grid-template-columns:1fr;gap:28px;padding:30px}
}

/* ============================================================
   PROCESADOR 3D — experimento: el chip gira (rotateZ) según el
   avance del scroll (lo controla flow.js). Decorativo; con
   prefers-reduced-motion queda quieto y legible.
   ============================================================ */
.cpu-stage{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center;perspective:1200px;perspective-origin:50% 42%}
.cpu-glow{position:absolute;width:540px;height:540px;max-width:90vw;border-radius:50%;
  background:radial-gradient(circle,rgba(255,180,31,.38),rgba(110,207,234,.16) 45%,transparent 66%);
  filter:blur(14px);z-index:0;animation:cpuGlow 5.5s ease-in-out infinite alternate}
.cpu-float{position:relative;z-index:1;transform-style:preserve-3d;animation:cpuFloat 6s ease-in-out infinite alternate}
.cpu{--s:300px;--d:34px;position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;
  transform:rotateX(56deg) rotateZ(var(--spin,-18deg));will-change:transform}
.cpu .face{position:absolute;border-radius:16px;overflow:hidden;backface-visibility:hidden}
.cpu .face.top{width:var(--s);height:var(--s);left:calc(50% - var(--s)/2);top:calc(50% - var(--s)/2);
  transform:translateZ(calc(var(--d)/2));background:linear-gradient(150deg,#222b33,#10151a);
  border:1px solid #0a0e12;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.cpu .face.bottom{width:var(--s);height:var(--s);left:calc(50% - var(--s)/2);top:calc(50% - var(--s)/2);
  transform:rotateX(180deg) translateZ(calc(var(--d)/2));background:#0a0e12}
.cpu .face.edge{background:linear-gradient(#2b343d,#0d1115);box-shadow:inset 0 1px 0 rgba(202,161,74,.4)}
.cpu .face.north{width:var(--s);height:var(--d);left:calc(50% - var(--s)/2);top:calc(50% - var(--d)/2);transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.cpu .face.south{width:var(--s);height:var(--d);left:calc(50% - var(--s)/2);top:calc(50% - var(--d)/2);transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.cpu .face.east{width:var(--d);height:var(--s);left:calc(50% - var(--d)/2);top:calc(50% - var(--s)/2);transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.cpu .face.west{width:var(--d);height:var(--s);left:calc(50% - var(--d)/2);top:calc(50% - var(--s)/2);transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.cpu .face.top svg{position:absolute;inset:0;width:100%;height:100%}
.cpu-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;pointer-events:none}
.cpu-label .brand{font-family:var(--font-title);font-weight:800;font-size:27px;letter-spacing:1px;color:#eef3f7;line-height:1}
.cpu-label .model{font-family:var(--font-title);font-weight:700;font-size:14px;letter-spacing:5px;color:var(--amber);line-height:1}
.cpu-label .sub{font-family:var(--font-body);font-weight:500;font-size:10px;letter-spacing:1.5px;color:#8c99a4;text-transform:uppercase;margin-top:4px}
.cpu-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:14px}
.cpu-tag{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:7px 16px;font-size:13px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-sm)}
.cpu-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad-warm)}
@keyframes cpuFloat{0%{transform:translateY(-8px)}100%{transform:translateY(10px)}}
@keyframes cpuGlow{0%{opacity:.7;transform:scale(.96)}100%{opacity:1;transform:scale(1.06)}}
@media(max-width:900px){
  .cpu{--s:212px;--d:26px}
  .cpu-stage{min-height:340px}
  .cpu-label .brand{font-size:19px}
  .cpu-label .model{font-size:11px;letter-spacing:3px}
  .cpu-glow{width:360px;height:360px}
}
@media(prefers-reduced-motion:reduce){
  .cpu-float{animation:none}
  .cpu-glow{animation:none}
}

/* ============================================================
   PÁGINA "PONER MI WEB ONLINE" (/poner-mi-web-online/)
   Landing para quien se ha hecho la web y no sabe publicarla.
   Tema VERDE (--green): color libre, no usado por ninguna otra página.
   ============================================================ */
body.theme-start{
  --hero-top:#07130e;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(31,169,113,.34), transparent 50%),
    linear-gradient(165deg,#1c3b30 0%,#122a22 24%,#0a1712 50%,#000 100%);
}
body.theme-start .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(31,169,113,.34), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(110,207,234,.20), transparent 46%);
}

/* ── Mockup del hero: el navegador con la web ya publicada (decorativo) ── */
.launchmock{position:relative;width:100%;max-width:560px;margin-left:auto;padding-top:26px;line-height:1.4}
.launchmock-win{position:relative;background:var(--surface);border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);box-shadow:0 34px 70px -24px rgba(0,0,0,.6),0 8px 20px rgba(0,0,0,.32)}
.lm-nav{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#f1f4f7;border-bottom:1px solid var(--line)}
.lm-nav .dot{width:8px;height:8px;border-radius:50%}
.lm-nav .dot.r{background:#E71D24}.lm-nav .dot.y{background:#FFB41F}.lm-nav .dot.g{background:var(--green)}
.lm-nav .url{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font-size:10.5px;font-weight:600;color:#5b6770;
  background:#fff;border-radius:6px;padding:4px 12px;border:1px solid var(--line)}
.lm-nav .url svg{width:11px;height:11px;color:var(--green);flex-shrink:0}
.lm-canvas{padding:16px 18px 20px;background:linear-gradient(180deg,#fbfcfd,#eef2f6)}
.lm-head{height:8px;border-radius:4px;background:#dde4ea;width:44%;margin-bottom:14px}
.lm-hero{position:relative;height:112px;border-radius:12px;border:1px solid #d7dde3;
  background:linear-gradient(135deg,#E9F7F1,#CFEEE0);padding:16px 18px;margin-bottom:12px}
.lm-hero .lm-t1{display:block;height:11px;width:66%;border-radius:5px;background:#2A363F;opacity:.82}
.lm-hero .lm-t2{display:block;height:7px;width:46%;border-radius:4px;background:#5f6b75;opacity:.42;margin-top:9px}
.lm-hero .lm-cta{position:absolute;left:18px;bottom:16px;font-size:9.5px;font-weight:700;color:#fff;
  background:#157a52;border-radius:20px;padding:6px 14px}   /* verde más oscuro: contraste AA con texto blanco */
.lm-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lm-box{display:block;height:52px;border-radius:10px;border:1px solid #d7dde3}
.lm-box.a{background:linear-gradient(135deg,#FFF3DA,#FFE1A6)}
.lm-box.b{background:linear-gradient(135deg,#E8F6FB,#C7E9F4)}
.lm-box.c{background:linear-gradient(135deg,#EAF7F1,#C6E9D9)}
/* barra superior flotante: el aviso de "ya está online" */
.launchmock-top{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:8px 14px;box-shadow:0 16px 32px -10px rgba(0,0,0,.5)}
.launchmock-top .ti{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.launchmock-top .ti svg{width:11px;height:11px}
.launchmock-top .doc{font-size:11px;font-weight:600;color:#5b6770;white-space:nowrap}
.launchmock-top .save{font-size:11px;font-weight:800;color:#fff;background:#157a52;border-radius:7px;padding:5px 12px}
/* tarjeta flotante: estado de la publicación */
.launchmock-card{position:absolute;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 22px 48px -16px rgba(0,0,0,.55)}
.launchmock-card.status{right:-6px;bottom:-14px;width:212px;padding:13px 15px}
.launchmock-card.status .row{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.launchmock-card.status .pulse{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(31,169,113,.55);animation:lmPulse 2.2s ease-out infinite}
.launchmock-card.status .bar{height:5px;border-radius:3px;background:#e7ebef;margin-top:10px;overflow:hidden}
.launchmock-card.status .bar i{display:block;height:100%;width:100%;transform:scaleX(.62);transform-origin:left;will-change:transform;border-radius:3px;
  background:linear-gradient(90deg,var(--green),var(--cyan));animation:wpAi 2.6s ease-in-out infinite}
.launchmock-card.status p{font-size:9.5px;color:var(--muted);margin-top:7px}
@keyframes lmPulse{0%{box-shadow:0 0 0 0 rgba(31,169,113,.55)}70%{box-shadow:0 0 0 9px rgba(31,169,113,0)}100%{box-shadow:0 0 0 0 rgba(31,169,113,0)}}
@media(max-width:900px){ .launchmock{margin:0 auto;max-width:440px} }
@media(max-width:540px){ .launchmock-card{display:none} }
@media(prefers-reduced-motion:reduce){
  .launchmock-card.status .bar i{animation:none;transform:scaleX(.64)}
  .launchmock-card.status .pulse{animation:none}
}

/* ── Traductor de palabros (dentro de .sec-dark) ── */
.jargon{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:980px;margin:0 auto}
.jg{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px 26px;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),background .28s,border-color .28s}
.jg:hover{transform:translateY(-5px);background:rgba(255,255,255,.075);border-color:rgba(31,169,113,.45)}
.jg dt{font-family:var(--font-title);font-weight:800;font-size:17.5px;letter-spacing:-.2px;color:#fff;margin-bottom:8px}
.jg dd{color:#c4d0da;font-size:14.5px;line-height:1.62}
.jg dd em{color:#7fe0b6;font-style:normal;font-weight:600}
.jargon-foot{text-align:center;max-width:640px;margin:34px auto 0;color:#c4d0da;font-size:15px}
.jargon-foot .link{color:#7fe0b6}
@media(max-width:900px){ .jargon{grid-template-columns:1fr} }

/* ── Pasos numerados ── */
.steps{list-style:none;counter-reset:none;display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:980px;margin:0 auto}
.step{display:flex;gap:20px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:22px;padding:28px 30px;box-shadow:var(--shadow-sm);transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(31,169,113,.4)}
.step-n{flex-shrink:0;width:46px;height:46px;border-radius:14px;background:linear-gradient(140deg,#E9F7F1,#C6E9D9);
  border:1px solid rgba(31,169,113,.35);color:#127750;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-weight:800;font-size:20px}
.step-b h3{font-size:19px;letter-spacing:-.3px;margin-bottom:9px}
.step-b p{color:var(--muted);font-size:15px;line-height:1.65}
@media(max-width:900px){ .steps{grid-template-columns:1fr} .step{padding:24px} }

/* ── Plan único recomendado (en vez de la tabla de 4) ── */
.oneplan{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;max-width:940px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}
.op-main{background:linear-gradient(165deg,#12241d,#0a1712);color:#fff;padding:44px 38px;display:flex;flex-direction:column}
.op-flag{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#7fe0b6;background:rgba(31,169,113,.16);border:1px solid rgba(31,169,113,.42);border-radius:30px;padding:6px 14px;margin-bottom:20px}
.op-name{font-family:var(--font-title);font-weight:800;font-size:26px;letter-spacing:-.4px;color:#fff}
.op-price{display:flex;align-items:baseline;gap:4px;margin-top:6px}
.op-price .amt{font-family:var(--font-title);font-weight:800;font-size:52px;letter-spacing:-2px;color:#fff;line-height:1}
.op-price .per{color:#9fb8ad;font-size:15px;font-weight:600}
.op-was{color:#9fb8ad;font-size:13.5px;margin-top:8px}
.op-was s{color:#71877e}
.op-plain{color:#c4d0da;font-size:15px;line-height:1.65;margin:18px 0 24px}
.op-main .btn{align-self:flex-start}
.op-note{color:#8fa89d;font-size:12px;line-height:1.55;margin-top:18px}
.op-side{padding:44px 38px}
.op-side h3{font-size:19px;letter-spacing:-.3px;margin-bottom:20px}
.op-side .feat-list li{font-size:15px}
.op-side .feat-list .ck{background:#E9F7F1;color:#127750}
.op-more{color:var(--muted);font-size:14px;line-height:1.65;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
@media(max-width:900px){
  .oneplan{grid-template-columns:1fr}
  .op-main,.op-side{padding:32px 26px}
  .op-price .amt{font-size:44px}
}

/* anclas de esta página: que el header no las tape al saltar */
#que-hace-falta,#palabros,#pasos,#miedos,#plan,#ayuda{scroll-margin-top:calc(96px + var(--cab-off,0px))}

/* ── Tooltip de ayuda (?) en las specs de los planes ────────────────────────
   Explica el término sin engordar la tarjeta: la línea se ve igual de limpia y
   quien no sabe qué es un vCore lo descubre sin salir de la tabla.
   Accesible: es un <button> real, se abre con hover Y con foco (teclado y tap
   en móvil, donde el tap da foco), y el texto va en aria-label para lectores. */
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;margin-left:5px;padding:0;width:15px;height:15px;flex-shrink:0;
  border:none;background:none;cursor:help;color:var(--muted);opacity:.55;transition:opacity .18s,color .18s}
.tip:hover,.tip:focus-visible{opacity:1;color:var(--amber-text)}
/* El interrogante es un SVG (no un carácter de texto): un glifo nunca se centra bien
   dentro de un círculo porque su caja incluye ascendentes y descendentes asimétricos. */
.tip-i{display:block;width:15px;height:15px}
.tip-i svg{display:block;width:100%;height:100%}
/* área táctil de 44px sin alterar el layout */
.tip::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px}
.tip-b{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  z-index:30;width:max-content;max-width:238px;padding:11px 13px;border-radius:11px;
  background:var(--ink-deep);color:#e7edf2;font-family:var(--font-body);font-size:12.5px;font-weight:400;
  line-height:1.5;text-align:left;letter-spacing:0;white-space:normal;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.tip-b::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--ink-deep)}
/* :focus-visible, NO :focus — un <button> conserva el foco después del clic, así que
   con :focus el globo se quedaba fijado hasta pinchar en otro sitio. :focus-visible sólo
   se activa con teclado, que es donde hace falta; el ratón se queda sólo con :hover. */
.tip:hover .tip-b,.tip:focus-visible .tip-b{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* En táctil no hay hover: ahí sí queremos que el tap lo abra y lo deje abierto hasta
   tocar fuera, así que en esos dispositivos (y sólo en esos) volvemos a :focus. */
@media(hover:none){
  .tip:focus .tip-b{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .cmp tbody th .tip:focus .tip-b{transform:translateY(-50%) translateX(0)}
}
/* en la comparativa el contenedor hace scroll (overflow-x:auto obliga a overflow-y:auto),
   así que hacia arriba el globo se recortaría en la primera fila: lo sacamos a la derecha. */
.cmp tbody th .tip-b{bottom:auto;top:50%;left:calc(100% + 12px);transform:translateY(-50%) translateX(-4px)}
.cmp tbody th .tip:hover .tip-b,.cmp tbody th .tip:focus-visible .tip-b{transform:translateY(-50%) translateX(0)}
.cmp tbody th .tip-b::after{top:50%;left:-6px;bottom:auto;transform:translateY(-50%);
  border-color:transparent;border-right-color:var(--ink-deep)}
@media(max-width:900px){ .tip-b{max-width:200px} }

/* ── Medidor de potencia de cada plan (campo 'power' de includes/pricing.php) ──
   Al mover RAM, CPU e I/O a la ampliación técnica, las tarjetas de Seed/Early/Growth
   quedaban casi idénticas y nada justificaba el salto de precio. Esto enseña la
   escalera de rendimiento de un vistazo, sin una sola palabra técnica. */
.plan .power{margin:16px 0 2px;padding-top:14px;border-top:1px dashed var(--line)}
.plan .power-l{display:block;color:var(--muted);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px}
.plan .power-bar{display:flex;gap:4px}
.plan .power-bar i{flex:1;height:7px;border-radius:4px;background:#e4e9ee}
.plan .power-bar i.on{background:var(--grad-warm);box-shadow:0 3px 8px -3px rgba(255,122,0,.65)}

/* ============================================================================
   SISTEMA v2 — fusionado en styles.css el 2026-09-19.
   Nació como capa aparte para poder comparar el rediseño con las páginas
   anteriores sin romperlas. Aprobado por el cliente, se fusionó aquí y tanto
   aquel archivo como los duplicados de comparación han desaparecido.

   Va AL FINAL del archivo a propósito: varias reglas de aquí (.sec-head, .hero h1,
   .plan .was) reescriben otras de más arriba con la MISMA especificidad, así que
   lo que decide cuál gana es el orden de aparición. No mover este bloque ni meter
   reglas nuevas de esos selectores por debajo sin comprobar qué pisan.
   ========================================================================== */

:root{
  /* derivados de los tokens existentes, para no repetir rgba() por todo el archivo */
  --ink-soft:#3b4751;
  --amber-line:rgba(255,180,31,.45);
}

/* ────────────────────────────────────────────────────────────────────────────
   1) RITMO DE SECCIÓN
   El problema del original no es ninguna sección suelta: es que todas tienen la
   misma forma y el mismo fondo, así que el ojo no encuentra dónde empieza una y
   acaba la otra. Alternamos fondo y apretamos el aire vertical.
   ──────────────────────────────────────────────────────────────────────────── */
/* OJO: nada de `section{...}` a pelo para el ritmo vertical. Una regla así gana a
   .domainbar y a .trustbar-sec (están en el mismo árbol) y les rompe su propio
   espaciado. El ritmo se pide sección a sección con estas clases. */
section.tight{padding-top:0}
/* AIRE ENTRE SECCIONES — una sola regla para toda la web (2026-10-20). Cada sección lleva 88 px arriba
   y abajo (56 en móvil). Si dos secciones SEGUIDAS tienen el mismo fondo (las dos «normales», sin
   .sec-alt ni .sec-dark), no se suman los dos espacios (176 px): la segunda empieza sin espacio arriba y
   entre ellas queda el de una sola sección. Si cambia el fondo, cada una conserva el suyo, así el texto
   nunca queda pegado al borde de un fondo. Sustituye a los style="padding-top:0" puestos a mano.
   Una sección con fondo propio en línea (style="background:…") cuenta como fondo distinto. */
.flow > section:not(.sec-alt):not(.sec-dark):not([style*="background"]) + section:not(.sec-alt):not(.sec-dark):not([style*="background"]){padding-top:0}

/* Banda clara sobre el fondo --page: separa sin añadir una tarjeta más */
section.sec-alt{background:var(--surface);border-block:1px solid var(--line)}

/* Cabecera de sección: por defecto ALINEADA A LA IZQUIERDA.
   El centrado constante es lo que aplana la página; se reserva para las
   secciones que de verdad son un alto en el camino (.sec-head.mid). */
.sec-head{text-align:left;margin:0 0 40px;max-width:720px}
.sec-head.mid{text-align:center;margin-inline:auto}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-1.1px}
.sec-head p{font-size:17px;max-width:64ch}

/* ────────────────────────────────────────────────────────────────────────────
   2) .qa — TRATAMIENTO DEL H2 EN PREGUNTA
   Todos los H2 nuevos son preguntas (long-tail + citabilidad IA). El signo de
   apertura cuelga en el margen: marca "esto es una pregunta que esta página
   responde" sin gastar una etiqueta de texto. Es estructura, no decoración.
   ──────────────────────────────────────────────────────────────────────────── */
.qa{position:relative}
.qa>h2,.qa>h3{font-weight:800;letter-spacing:-.9px;line-height:1.12}

/* Volada tipográfica de verdad: se saca al margen el "¿" QUE YA ESTÁ EN EL TEXTO,
   con text-indent negativo, y se colorea con ::first-letter (la especificación
   mete en ::first-letter la puntuación que precede a la primera letra).
   NO se usa un ::before con content:"¿": duplicaría el signo, y además dejaría
   el título incompleto para quien lo lea sin CSS o desde un lector de pantalla. */
@media(min-width:901px){
  .qa{padding-left:26px}
  .qa>h2,.qa>h3{text-indent:-.52em}
  .qa>h2::first-letter,.qa>h3::first-letter{color:var(--amber)}
}
/* Primera frase = la respuesta directa (featured snippet). Se ve que lo es. */
.lead{font-size:18.5px;line-height:1.6;color:var(--ink-soft);font-weight:500;margin-bottom:16px}
.lead b,.lead strong{color:var(--ink);font-weight:700}
.sec-dark .lead b,.sec-dark .lead strong{color:#fff}

/* ────────────────────────────────────────────────────────────────────────────
   3) .renew — LA SEGUNDA FACTURA
   La pieza de la que cuelga la credibilidad de toda la página. El sector entero
   esconde el precio de renovación en el carrito; aquí es el elemento más grande
   de su sección. 12 meses en ámbar + el 13 volcado a ink.
   ──────────────────────────────────────────────────────────────────────────── */
.renew{
  background:var(--surface);border:1px solid var(--line);border-radius:26px;
  padding:clamp(24px,3.4vw,44px);box-shadow:var(--shadow);
}
.renew-top{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between;margin-bottom:30px}
.renew-top h3{font-size:clamp(21px,2.4vw,27px);letter-spacing:-.5px;max-width:22ch}
.renew-plan{display:flex;gap:8px;flex-wrap:wrap}
.renew-plan button{
  font-family:var(--font-body);font-size:13.5px;font-weight:600;cursor:pointer;
  padding:9px 16px;min-height:44px;border-radius:9px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--muted);transition:.18s;
}
.renew-plan button:hover{border-color:var(--amber);color:var(--ink)}
.renew-plan button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* La tira de meses. 13 celdas: 1-12 oferta, 13 renovación. */
.renew-strip{display:grid;grid-template-columns:repeat(12,1fr) 1.55fr;gap:5px;align-items:end;margin-bottom:14px}
.renew-m{
  position:relative;border-radius:7px;background:var(--amber-soft);
  border:1px solid var(--amber-line);height:56px;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
  font-size:10.5px;font-weight:600;color:var(--amber-text);
}
/* el mes 13: más alto, oscuro, y con el precio dentro. Es el golpe visual. */
.renew-m.after{
  height:92px;background:var(--ink);border-color:var(--ink);color:#fff;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;padding-bottom:0;
  box-shadow:0 14px 30px -14px rgba(42,54,63,.55);
}
.renew-m.after .rp{font-family:var(--font-title);font-size:19px;font-weight:800;letter-spacing:-.4px;line-height:1}
.renew-m.after .rl{font-size:10px;font-weight:500;opacity:.72}
.renew-foot{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:16px;margin-top:6px}
.renew-now{font-size:14.5px;color:var(--muted)}
.renew-now b{font-family:var(--font-title);font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.4px}
.renew-note{font-size:13.5px;color:var(--muted);max-width:62ch;line-height:1.6}
.renew-note b{color:var(--ink)}
@media(max-width:760px){
  /* en móvil 13 columnas no caben: 4 meses por fila y el 13 a lo ancho */
  .renew-strip{grid-template-columns:repeat(4,1fr);gap:6px}
  .renew-m{height:44px;font-size:10px}
  .renew-m.after{grid-column:1/-1;height:76px}
}

/* ────────────────────────────────────────────────────────────────────────────
   4) .ticket — EL HILO DE SOPORTE
   El diferencial nº1 vivía dentro de un acordeón cerrado. Aquí se enseña:
   un ticket con su hora, su técnico y la frase honesta, tal cual.
   ──────────────────────────────────────────────────────────────────────────── */
.ticket{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  overflow:hidden;box-shadow:var(--shadow);
}
.ticket-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--ink);color:#fff;padding:14px 22px;font-size:13px;
}
.ticket-bar .tid{font-family:var(--font-title);font-weight:700;letter-spacing:.02em}
.ticket-bar .st{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  background:rgba(31,169,113,.18);border:1px solid rgba(31,169,113,.5);color:#7fe3b8;
  padding:4px 12px;border-radius:30px;font-size:11.5px;font-weight:600;
}
.ticket-bar .st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.ticket-msg{display:flex;gap:16px;padding:22px;border-bottom:1px solid var(--line)}
.ticket-msg:last-child{border-bottom:0}
.ticket-msg.them{background:linear-gradient(180deg,#FFFDF7,#FFF9EC)}
.ticket-av{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--font-title);font-weight:800;font-size:15px;
  background:var(--soft);color:var(--muted);border:1px solid var(--line);
}
.ticket-msg.them .ticket-av{background:var(--grad-warm);color:#fff;border-color:transparent}
.ticket-who{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.ticket-who b{font-family:var(--font-title);font-size:14.5px;letter-spacing:-.1px}
.ticket-who time{font-size:11.5px;color:var(--muted)}
.ticket-msg p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin-bottom:9px}
.ticket-msg p:last-child{margin-bottom:0}
.ticket-msg p b{color:var(--ink)}
@media(max-width:600px){ .ticket-msg{padding:18px 16px;gap:12px} }

/* ────────────────────────────────────────────────────────────────────────────
   5) .bento — REJILLA ASIMÉTRICA
   Sustituye al enésimo grid de 3 tarjetas iguales. La primera celda pesa el
   doble porque su contenido pesa el doble; el resto queda tranquilo.
   ──────────────────────────────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bento .bx{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;
  display:flex;flex-direction:column;gap:9px;transition:border-color .22s,box-shadow .22s;
}
.bento .bx:hover{border-color:var(--amber-line);box-shadow:var(--shadow-sm)}
.bento .bx.wide{grid-column:span 2}
.bento .bx.tall{grid-row:span 2}
.bento .bx h3{font-size:17.5px;letter-spacing:-.25px}
.bento .bx p{font-size:14.5px;color:var(--muted);line-height:1.62}
.bento .bi{
  width:40px;height:40px;border-radius:11px;background:var(--amber-soft);
  border:1px solid var(--amber-line);color:var(--amber-text);
  display:grid;place-items:center;margin-bottom:4px;
}
.bento .bi svg{width:21px;height:21px}
/* La celda destacada: fondo ink, el único bloque oscuro de la rejilla. */
.bento .bx.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.bento .bx.dark h3{color:#fff}
.bento .bx.dark p{color:#c4d0da}
.bento .bx.dark .bi{background:rgba(255,180,31,.18);border-color:rgba(255,180,31,.4);color:var(--amber)}
.bento .bx.dark .big{font-family:var(--font-title);font-size:clamp(30px,4.4vw,44px);font-weight:800;letter-spacing:-1.4px;line-height:1;color:var(--amber)}
/* enlaces dentro de la caja oscura: .link es var(--ink) = el mismo color que el fondo → ámbar (sobre oscuro sí contrasta) */
.bento .bx.dark a,.bento .bx.dark a.link{color:var(--amber);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.bento .bx.dark a:hover{color:#ffd27a}
@media(max-width:900px){
  .bento{grid-template-columns:1fr}
  .bento .bx.wide{grid-column:auto}
  .bento .bx.tall{grid-row:auto}
}

/* ────────────────────────────────────────────────────────────────────────────
   6) .pains — "¿TE SUENA ALGUNA DE ESTAS FRASES?"
   Los dolores del cliente (SEO-PLAN §2.4) en su propia voz. Entrecomillado real,
   no tarjeta con icono: son citas, y se leen como citas.
   ──────────────────────────────────────────────────────────────────────────── */
.pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;list-style:none}
.pains li{
  position:relative;background:var(--soft);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 22px;font-size:15.5px;line-height:1.55;color:var(--ink-soft);font-style:italic;
}
.pains li::before{
  content:"“";position:absolute;top:-2px;left:16px;
  font-family:var(--font-title);font-size:54px;font-weight:800;color:var(--amber);opacity:.35;line-height:1;
}
.pains li span{display:block;margin-top:12px;font-style:normal;font-size:13.5px;font-weight:600;color:var(--amber-text)}

/* ────────────────────────────────────────────────────────────────────────────
   7) .related — ENLAZADO INTERNO CONTEXTUAL
   Prioridad 4 del plan resuelta en un componente (includes/related-v2.php) en vez
   de a mano página por página. Anchors de keyword, no "saber más →".
   ──────────────────────────────────────────────────────────────────────────── */
.related{border-top:1px solid var(--line);padding-top:30px}
.related h2{font-size:16px;font-weight:700;letter-spacing:-.2px;margin-bottom:18px;color:var(--muted)}
.related ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.related a{
  display:block;height:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;transition:border-color .2s,transform .2s;
}
.related a:hover{border-color:var(--amber);transform:translateY(-2px)}
.related a b{display:block;font-family:var(--font-title);font-size:15.5px;font-weight:700;letter-spacing:-.2px;margin-bottom:3px}
.related a span{font-size:13.5px;color:var(--muted);line-height:1.5}

/* ────────────────────────────────────────────────────────────────────────────
   8) PLANES v2 — la tarjeta lleva las DOS cifras, no un tachado
   ──────────────────────────────────────────────────────────────────────────── */
.plan .was{
  display:inline-flex;align-items:baseline;gap:6px;
  background:var(--soft);border:1px solid var(--line);border-radius:8px;
  padding:5px 11px;font-size:12.5px;color:var(--muted);font-weight:500;
}
.plan .was s{text-decoration:none;color:var(--ink);font-weight:700}
.plan .was b{color:var(--ink);font-weight:700}

/* ────────────────────────────────────────────────────────────────────────────
   9) HERO — un punto de foco, no tres tamaños de texto compitiendo
   (no aplica a la home: su hero de vídeo queda intacto)
   ──────────────────────────────────────────────────────────────────────────── */
.hero h1{letter-spacing:-1.6px;line-height:1.06}
.hero .sub{font-size:clamp(17px,2.1vw,21px);font-weight:500;max-width:30ch}
.hero .sub2{max-width:54ch;opacity:.86}
/* fila de pruebas duras bajo el CTA: dato concreto, no adjetivo */
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:20px;list-style:none}
.hero-facts li{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;
  color:rgba(255,255,255,.88);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:30px;padding:6px 14px;
}
.hero-facts li svg{width:14px;height:14px;flex-shrink:0;color:var(--amber)}

/* ────────────────────────────────────────────────────────────────────────────
   10) Texto decorativo de los mockups del hero
   En las originales ese texto era un <h6>, lo que metía un salto h1 → h6 → h2
   en la jerarquía de la página por una etiqueta de un mockup decorativo.
   Aquí es un <b class="mk"> con el mismo aspecto y sin valor semántico.
   ──────────────────────────────────────────────────────────────────────────── */
.wpmock-card.prod .mk,
.shopmock-card .mk{
  display:block;font-family:var(--font-title);font-size:12.5px;font-weight:800;color:var(--ink);
}

/* ────────────────────────────────────────────────────────────────────────────
   11) .restore — LÍNEA DE TIEMPO DE UNA RESTAURACIÓN
   Sección exclusiva de WordPress: «me rompió un plugin». Cuenta el minuto a
   minuto de volver atrás, que es lo que de verdad tranquiliza.
   ──────────────────────────────────────────────────────────────────────────── */
.restore{list-style:none;display:grid;gap:0;counter-reset:rs}
.restore li{
  position:relative;padding:0 0 26px 58px;counter-increment:rs;
}
.restore li::before{
  content:counter(rs);position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-family:var(--font-title);font-weight:800;font-size:15px;
}
/* el hilo que une los pasos: es una secuencia real, por eso va numerada */
.restore li::after{
  content:"";position:absolute;left:17.5px;top:40px;bottom:6px;width:2px;background:var(--line);
}
.restore li:last-child{padding-bottom:0}
.restore li:last-child::after{display:none}
.restore li:last-child::before{background:var(--green)}
.restore b{display:block;font-family:var(--font-title);font-size:17px;letter-spacing:-.2px;margin-bottom:5px}
.restore span{display:block;font-size:14.5px;color:var(--muted);line-height:1.6}
.restore em{font-style:normal;color:var(--amber-text);font-weight:600;font-size:13px}

/* ────────────────────────────────────────────────────────────────────────────
   12) Accesibilidad y movimiento (DESIGN.md §3)
   ──────────────────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  body *,body *::before,body *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important
  }
}

/* ── n8n es la única página oscura: estos componentes se invierten ahí ── */
body.theme-n8n .renew,
body.theme-n8n .ticket,
body.theme-n8n .bento .bx,
body.theme-n8n .related a{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
body.theme-n8n .bento .bx p,
body.theme-n8n .related a span{color:#b9c6d1}
body.theme-n8n .pains li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#d3dde5}
body.theme-n8n .sec-alt{background:transparent;border-block-color:rgba(255,255,255,.1)}

/* ============================================================================
   TEMAS DE COLOR DE LAS PÁGINAS NUEVAS (DESIGN.md §1 «Tema de color por página»)
   Ya usados: negro/home · grafito/web · azul-teal/wp · lila/woo · coral/n8n ·
   verde/poner-mi-web. Estos tres son los que faltaban por asignar.
   Viven aquí y no en styles.css para no tocar el archivo compartido mientras la
   capa v2 esté pendiente de aprobación; al fusionar, se mueven allí.
   ========================================================================== */
:root{
  --copper:#B87333;   /* servidores dedicados — metal, rack, hardware */
  --indigo:#4F46C9;   /* reseller / agencias — partner técnico */
  --mautic:#4E5E9E;   /* plugin Mautic — azul pizarra, el color de marca de Mautic */
  --magenta:#C2367E;  /* afiliados — programa de comisiones */
}

/* ── Servidores dedicados: cobre ── */
body.theme-ded{
  --hero-top:#140d07;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(184,115,51,.42), transparent 52%),
    linear-gradient(165deg,#5a3c1c 0%,#37240f 24%,#1a1108 50%,#000 100%);
}
body.theme-ded .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(214,146,74,.46), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(255,180,31,.20), transparent 46%);
}

/* ── Certificados SSL: verde lima (el «verde de conexión segura»). Era oro y se confundía
   con el cobre de dedicados; el lima es el tono más alejado de los demás temas. ── */
body.theme-ssl{
  --hero-top:#0e1205;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(132,190,40,.38), transparent 52%),
    linear-gradient(165deg,#3f5214 0%,#26320c 24%,#131906 50%,#000 100%);
}
body.theme-ssl .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(160,210,60,.40), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(110,207,234,.16), transparent 46%);
}

/* ── Hosting PrestaShop: como su web (prestashop.es, 2026-10-18): fondo negro #1d1d1b y el titular
   en su azul pastel #a4dbe8, con un brillo azul/lila muy suave. El pastel sobre negro tiñe poco el
   fondo; lo que lo hace reconocible es el titular azul, igual que en su portada. ── */
body.theme-ps{
  --hero-top:#0b0b0a;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(164,219,232,.22), transparent 55%),
    linear-gradient(165deg,#1d1d1b 0%,#141413 40%,#000 100%);
}
body.theme-ps .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(164,219,232,.30), transparent 46%),
    radial-gradient(circle at 76% 12%, rgba(222,205,231,.22), transparent 46%);
}
body.theme-ps .hero h1{color:#a4dbe8}
body.theme-ps .hero .badge{color:#a4dbe8;border-color:rgba(164,219,232,.5);background:rgba(164,219,232,.10)}

/* ── Reseller / agencias: índigo ── */
body.theme-res{
  --hero-top:#0b0c1c;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(79,70,201,.46), transparent 52%),
    linear-gradient(165deg,#2c2a6e 0%,#1b1a42 24%,#0d0d1e 50%,#000 100%);
}
body.theme-res .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(109,101,226,.50), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(110,207,234,.20), transparent 46%);
}

/* ── Migraciones: mandarina (movimiento; distinto del cobre de dedicados, más vivo y rojizo) ── */
body.theme-mig{
  --hero-top:#1c0d05;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(240,110,40,.46), transparent 52%),
    linear-gradient(165deg,#6b2f0f 0%,#421c08 24%,#1f0d04 50%,#000 100%);
}
body.theme-mig .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(255,128,56,.45), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(110,207,234,.18), transparent 46%);
}

/* ── Afiliados: magenta ── */
body.theme-afi{
  --hero-top:#1a0a14;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(194,54,126,.44), transparent 52%),
    linear-gradient(165deg,#5e1f40 0%,#3a1228 24%,#1c0a14 50%,#000 100%);
}
body.theme-afi .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(224,86,158,.48), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(255,180,31,.18), transparent 46%);
}

/* ────────────────────────────────────────────────────────────────────────────
   .rack — GAMAS DE SERVIDOR DEDICADO
   No es una tabla de precios de 4 planes: son 9 máquinas en 3 gamas. La rejilla
   agrupa por gama y cada tarjeta enseña la spec, que es lo que compara quien
   busca un dedicado (núcleos, RAM, frecuencia), no una lista de features.
   ──────────────────────────────────────────────────────────────────────────── */
.rangeblock{margin-bottom:34px}
.rangeblock:last-child{margin-bottom:0}
.rangehead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px;
  border-bottom:1px solid var(--line);padding-bottom:12px}
.rangehead h3{font-size:21px;letter-spacing:-.4px}
.rangehead span{font-size:14px;color:var(--muted)}
.rack{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.srv{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .2s,box-shadow .2s}
.srv:hover{border-color:rgba(184,115,51,.5);box-shadow:var(--shadow-sm)}
.srv .sname{font-family:var(--font-title);font-weight:800;font-size:16px;letter-spacing:-.2px}
.srv .sprice{font-family:var(--font-title);font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1}
.srv .sprice small{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.srv dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13.5px;margin-top:2px}
.srv dt{color:var(--muted)}
.srv dd{font-weight:600;text-align:right}
.srv .btn{margin-top:auto;justify-content:center}
@media(max-width:900px){ .rack{grid-template-columns:1fr} }

/* ────────────────────────────────────────────────────────────────────────────
   .vs — RESELLER vs AGENCIAS
   Las dos modalidades enfrentadas. Es la decisión real que tiene que tomar quien
   llega a esa página, y ningún competidor se la explica.
   ──────────────────────────────────────────────────────────────────────────── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.vs-col{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.vs-col.pick{border-color:var(--indigo);box-shadow:0 18px 40px -22px rgba(79,70,201,.55)}
.vs-top{padding:24px 26px 20px;border-bottom:1px solid var(--line)}
.vs-col.pick .vs-top{background:linear-gradient(140deg,rgba(79,70,201,.10),transparent)}
.vs-top h3{font-size:22px;letter-spacing:-.4px;margin-bottom:6px}
.vs-top .who{font-size:14px;color:var(--muted);line-height:1.55}
.vs-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  background:var(--indigo);color:#fff;border-radius:30px;padding:4px 12px;margin-bottom:10px}
.vs-body{padding:22px 26px 26px}
.vs-body dl{display:grid;gap:14px;margin-bottom:20px}
.vs-body dt{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.03em;margin-bottom:3px}
.vs-body dd{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.vs-body dd b{color:var(--ink)}
@media(max-width:900px){ .vs{grid-template-columns:1fr} }

/* ────────────────────────────────────────────────────────────────────────────
   .comm — TABLA DE COMISIONES DE AFILIADOS
   El dato que busca quien llega a «programa afiliados hosting» es uno: cuánto.
   Va grande y arriba, no escondido en una FAQ.
   ──────────────────────────────────────────────────────────────────────────── */
.comm{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.comm-2{grid-template-columns:repeat(2,1fr)}
.comm-c{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;
  display:flex;flex-direction:column;gap:8px}
.comm-c .pct{font-family:var(--font-title);font-size:clamp(34px,5vw,48px);font-weight:800;
  letter-spacing:-2px;line-height:1;color:var(--magenta)}
.comm-c h3{font-size:16.5px;letter-spacing:-.2px}
.comm-c p{font-size:14px;color:var(--muted);line-height:1.6}
.comm-c .rec{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:11.5px;font-weight:700;border-radius:30px;padding:4px 11px;
  background:rgba(194,54,126,.10);border:1px solid rgba(194,54,126,.35);color:#9c2463}
@media(max-width:900px){ .comm{grid-template-columns:1fr} }

/* ── VPS: turquesa. Último tema de color libre; distinto del verde (--green,
   «poner mi web online») y del teal de marca (--teal), más cian que ambos. ── */
:root{ --turq:#00A99D; }
body.theme-vps{
  --hero-top:#041413;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(0,169,157,.40), transparent 52%),
    linear-gradient(165deg,#0d4a45 0%,#082e2b 24%,#041917 50%,#000 100%);
}
body.theme-vps .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(37,205,190,.46), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(110,207,234,.22), transparent 46%);
}
/* la tarjeta de máquina (.srv) se reutiliza de dedicados; solo cambia el acento */
body.theme-vps .srv:hover{border-color:rgba(0,169,157,.55)}
body.theme-vps .renew-m{background:rgba(0,169,157,.10);border-color:rgba(0,169,157,.35);color:#0a7d74}

/* ── Diseño web: azul marino. Último tema libre; sobrio a propósito, para que
   los trabajos del cliente respiren sin competir con el fondo. Más oscuro y
   menos saturado que el índigo de reseller (--indigo) y que --blue. ── */
:root{ --navy:#16306B; }
body.theme-dis{
  --hero-top:#050914;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(42,84,180,.42), transparent 52%),
    linear-gradient(165deg,#16306B 0%,#0d1d43 24%,#070d1d 50%,#000 100%);
}
body.theme-dis .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(63,110,214,.46), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(110,207,234,.22), transparent 46%);
}

/* ── .works — trabajos reales de clientes ──────────────────────────────────
   Sin capturas (no las tenemos) y sin inventar sectores: la rejilla se apoya en
   la tipografía y en la inicial, no en una imagen de relleno. */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.work{
  display:flex;align-items:center;gap:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  transition:border-color .22s,transform .22s;
}
.work:hover{border-color:rgba(22,48,107,.45);transform:translateY(-3px)}
.work .wi{
  flex-shrink:0;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--font-title);font-weight:800;font-size:19px;letter-spacing:-.5px;
  background:linear-gradient(140deg,rgba(22,48,107,.12),rgba(110,207,234,.18));
  border:1px solid rgba(22,48,107,.22);color:var(--navy);
}
.work b{display:block;font-family:var(--font-title);font-size:16px;letter-spacing:-.25px;line-height:1.25}
.work span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
@media(max-width:900px){ .works{grid-template-columns:1fr} }

/* ── .combo — la pieza de «diseño + hosting en el mismo sitio» ───────────── */
.combo{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface)}
.combo-c{padding:30px 28px}
.combo-c h3{font-size:18px;letter-spacing:-.3px;margin-bottom:10px}
.combo-c p{font-size:14.5px;color:var(--muted);line-height:1.62}
.combo-c ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px}
.combo-c li{display:flex;gap:10px;font-size:14px;color:var(--v2-ink-soft,#3b4751);line-height:1.5}
.combo-c li::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--navy);margin-top:7px}
.combo-mid{display:grid;place-items:center;background:var(--navy);color:#fff;padding:0 26px;
  font-family:var(--font-title);font-weight:800;font-size:22px}
.combo-c.alt{background:linear-gradient(160deg,rgba(22,48,107,.05),transparent)}
@media(max-width:900px){
  .combo{grid-template-columns:1fr}
  .combo-mid{padding:14px;font-size:18px}
}

/* ── NAP del pie: dirección en todas las páginas (señal local) ── */
.foot-nap{font-style:normal;font-size:13px;line-height:1.6;color:rgba(255,255,255,.55);margin-top:14px}

/* ────────────────────────────────────────────────────────────────────────────
   PLUGIN MAUTIC (wp-mautic-integration-…php) — azul pizarra, el de la marca Mautic.
   Free vs Pro reutiliza .vs (reseller) y la comparativa reutiliza .cmp.
   ──────────────────────────────────────────────────────────────────────────── */
body.theme-mautic{
  --hero-top:#0b0d16;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(78,94,158,.50), transparent 52%),
    linear-gradient(165deg,#2b3460 0%,#1a1f3a 24%,#0c0e1a 50%,#000 100%);
}
body.theme-mautic .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(110,128,200,.46), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(255,180,31,.16), transparent 46%);
}
body.theme-mautic .vs-col.pick{border-color:var(--mautic);box-shadow:0 18px 40px -22px rgba(78,94,158,.6)}
body.theme-mautic .vs-col.pick .vs-top{background:linear-gradient(140deg,rgba(78,94,158,.12),transparent)}
body.theme-mautic .vs-tag{background:var(--mautic)}
.vs-price{font-family:var(--font-title);font-weight:800;font-size:34px;letter-spacing:-1px;color:var(--ink);margin-top:12px;line-height:1}
.vs-price small{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.vs-body .btn+.btn{margin-top:10px}
.vs-body .btn{width:100%;justify-content:center}

/* Comparativa de funciones: grupos y marcas sí/no (texto accesible en .sr) */
.cmp.cmp-feats{min-width:560px}
.cmp.cmp-feats tbody th{white-space:normal;max-width:420px}
.cmp tbody tr.grp th{padding-top:24px;font-family:var(--font-title);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--soft)}
.cmp .mk{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px}
.cmp .mk svg{width:15px;height:15px}
.cmp .mk.yes{background:rgba(31,169,113,.14);color:var(--green)}
.cmp .mk.no{color:#b3bcc4}
.cmp td small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ¿Cuál es mi IP? — la IP en grande, copiable */
.ipbox{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:22px 24px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);max-width:640px}
.ipbox .lbl{width:100%;font-size:13px;font-weight:600;letter-spacing:.04em;color:#aab4bd;text-transform:uppercase}
.ipbox .ip{font-family:var(--font-title);font-weight:800;font-size:clamp(26px,4.4vw,40px);letter-spacing:-.5px;color:#fff;word-break:break-all;line-height:1.15}
.ipbox .ver{font-size:12.5px;font-weight:700;color:var(--ink);background:var(--amber);border-radius:30px;padding:4px 11px}
.ipbox .btn{margin-left:auto}
@media(max-width:900px){.ipbox .btn{margin-left:0}}

/* Banda de CTA justo después de una sección con fondo propio (.sec-alt): sin esto quedaba
   pegada al borde de esa sección, porque la sección de la banda va con padding-top:0
   (inline o .tight). !important para ganar al style inline de algunas páginas. */
section.sec-alt + section:has(> .wrap > .band){padding-top:64px !important}
@media(max-width:900px){section.sec-alt + section:has(> .wrap > .band){padding-top:44px !important}}

/* ────────────────────────────────────────────────────────────────────────────
   PÁGINAS LEGALES (aviso-legal.php, politica-de-cookies.php) — texto copiado literal de la
   web antigua; aquí solo va el diseño, inspirado en el suyo: banda gris a dos columnas con el
   título grande en mayúsculas a la izquierda, y debajo índice fijo + texto, al ancho del .wrap.
   ──────────────────────────────────────────────────────────────────────────── */
.hero-legal{padding-bottom:64px}
.hero-legal .hero-copy{max-width:860px}
.hero-legal h1{font-size:clamp(28px,4.2vw,48px)}
.hero-legal .sub2{margin-top:22px}
/* .flow lleva overflow:hidden, que ANULA position:sticky (ver nota del .subnav). En las legales se
   cambia por overflow:clip: recorta igual (las esquinas redondeadas) pero no crea un contenedor de
   scroll, así que el índice .legal-toc sí se queda fijo al bajar. */
.flow:has(.legal-doc){overflow:clip}
.legal-split{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.legal-band{padding:72px 0}
.legal-band .legal-big{font-family:var(--font-title);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,4.2vw,52px);line-height:1.05;letter-spacing:-1.2px;color:var(--ink);margin:0}
.legal-lead{font-size:clamp(16px,1.6vw,19px);line-height:1.7;color:var(--ink-soft)}
.legal-lead .legal-big{font-size:clamp(26px,3vw,38px);margin-bottom:16px}
.legal-lead ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.legal-lead li{position:relative;padding-left:22px}
.legal-lead li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:3px;background:var(--amber)}
.legal-aside .legal-ico{display:block;width:min(260px,70%);height:auto;margin:0 auto}
.legal-sec{padding-top:72px}
.legal-doc{align-items:start;grid-template-columns:280px 1fr;gap:64px}
.legal-toc{position:sticky;top:calc(110px + var(--cab-off,0px));display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 140px);overflow:auto;
  padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}
.legal-toc-t{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.legal-toc a{display:block;padding:7px 10px;border-radius:8px;font-size:13.5px;line-height:1.35;color:var(--ink-soft)}
.legal-toc a.lv1{font-weight:700;color:var(--ink);margin-top:6px}
.legal-toc a.lv1:first-of-type{margin-top:0}
.legal-toc a.lv2{padding-left:18px;font-size:12.5px;text-transform:lowercase}
.legal-toc a.lv2::first-letter{text-transform:uppercase}
.legal-toc a:hover{background:var(--soft);color:var(--ink)}
.legal{max-width:820px;color:var(--ink-soft);font-size:16px;line-height:1.8;overflow-wrap:anywhere}
.legal h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.6px;color:var(--ink);margin:56px 0 18px;padding-top:28px;border-top:1px solid var(--line)}
.legal > h2:first-child{margin-top:0;padding-top:0;border-top:none}
.legal p{margin:0 0 14px}
.legal .legal-sub{margin-top:34px}
.legal .legal-sub strong{font-family:var(--font-title);font-size:15px;font-weight:800;letter-spacing:.05em;color:var(--ink)}
/* Grupos de la lista de terceros («Para prestar los servicios…», «Para el chat…»): bloque con barra amber */
.legal .legal-grupo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:30px 0 12px;padding:12px 16px;
  border-left:4px solid var(--amber);border-radius:0 12px 12px 0;background:var(--amber-soft);
  font-family:var(--font-title);font-size:18px;font-weight:800;line-height:1.35;letter-spacing:-.2px;color:var(--ink)}
.legal .legal-grupo span{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--amber-text)}
.legal ul,.legal ol{margin:0 0 16px 22px}
.legal li{margin-bottom:6px}
.legal li > ul{margin-top:6px;margin-bottom:0}
.legal a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--amber-text)}
.legal [id],.legal-band [id]{scroll-margin-top:calc(120px + var(--cab-off,0px))}
.legal .legal-cta{margin-top:30px;text-align:left}
@media(max-width:900px){
  .legal-split,.legal-doc{grid-template-columns:1fr;gap:28px}
  .legal-band{padding:48px 0}
  .legal-aside .legal-ico{width:150px}
  .legal-toc{display:none}   /* en móvil el índice sería un bloque largo antes del texto */
  .legal-sec{padding-top:48px}
}
.copy .legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:12px}
.copy .legal-links a{display:inline-block;margin:0;color:#a9b5bf;font-size:13px;padding:6px 0}
.copy .legal-links a:hover{color:var(--amber)}
.legal-toc a.active{background:var(--ink);color:#fff}
.legal-toc a.active:hover{background:var(--ink);color:#fff}

/* Imágenes de las landings de diseño web por ciudad (ilustraciones propias en SVG) */
.dw-img{margin:0;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--surface)}
.dw-img img{display:block;width:100%;height:auto}
.dw-img.dw-mid{max-width:880px;margin:0 auto 44px}

/* ────────────────────────────────────────────────────────────────────────────
   TABLA DE MÁQUINAS (.spec) — dedicados y VPS. Una fila por máquina, specs en
   columnas para comparar de un vistazo. El acento sale del tema de la página:
   cobre en dedicados, turquesa en VPS. En móvil cada fila se vuelve una ficha.
   ──────────────────────────────────────────────────────────────────────────── */
.spec{--acc:var(--amber);--acc-rgb:255,180,31}
body.theme-ded .spec{--acc:var(--copper);--acc-rgb:184,115,51}
body.theme-vps .spec{--acc:var(--turq);--acc-rgb:0,169,157}
.spec-wrap{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.spec{width:100%;border-collapse:collapse;font-size:14.5px}
.spec thead th{background:linear-gradient(180deg,rgba(var(--acc-rgb),.14),rgba(var(--acc-rgb),.06));color:var(--ink);font-family:var(--font-body);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:16px 18px;border-bottom:2px solid var(--acc)}
.spec td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-soft)}
.spec tbody tr.spec-row{transition:background .18s}
.spec tbody tr.spec-row:hover{background:rgba(var(--acc-rgb),.06)}
.spec tbody tr:last-child td{border-bottom:none}
.spec .s-name{font-family:var(--font-title);font-weight:800;font-size:17px;color:var(--ink);letter-spacing:-.2px;white-space:nowrap}
.spec .s-name small{display:block;font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:2px}
.spec .s-strong{color:var(--ink);font-weight:700}
.spec .s-price{white-space:nowrap}
.spec .s-price b{font-family:var(--font-title);font-weight:800;font-size:24px;letter-spacing:-.6px;color:var(--ink)}
.spec .s-price span{font-size:13px;font-weight:600;color:var(--muted)}
.spec .s-price em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.spec .s-cta{text-align:right;white-space:nowrap}
.spec .s-cta .btn{padding:10px 18px;font-size:14px}
.spec tr.spec-group td{background:var(--soft);padding:14px 18px;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.spec tr.spec-group:first-child td{border-top:none}
.spec tr.spec-group b{font-family:var(--font-title);font-size:15px;font-weight:800;color:var(--ink);padding-left:12px;border-left:4px solid var(--acc);margin-right:10px}
.spec tr.spec-group span{font-size:13.5px;color:var(--muted)}
.spec .chip{display:inline-block;font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 10px;background:rgba(var(--acc-rgb),.14);color:var(--ink)}
@media(max-width:900px){
  .spec-wrap{background:transparent;border:none;box-shadow:none;overflow:visible}
  .spec thead{display:none}
  .spec,.spec tbody,.spec tr,.spec td{display:block;width:100%}
  .spec tr.spec-group td{background:transparent;border:none;padding:22px 2px 10px}
  .spec tr.spec-row{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--acc);border-radius:18px;box-shadow:var(--shadow-sm);padding:8px 18px 18px;margin-bottom:14px}
  .spec td{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);text-align:right}
  .spec td::before{content:attr(data-label);font-size:12.5px;font-weight:600;color:var(--muted);text-align:left}
  .spec td.s-name{display:block;text-align:left;border-bottom:none;padding-top:10px}
  .spec td.s-name::before,.spec td.s-cta::before{content:none}
  .spec td.s-cta{display:block;border-bottom:none;padding-top:14px}
  .spec td.s-cta .btn{width:100%;justify-content:center}
}

/* Descripción del plan bajo el nombre (sustituye a .ptier y al medidor de potencia, 2026-10-17).
   Altura FIJA de 3 líneas en todas las fichas: así precio, botón y características quedan
   alineados. El texto nunca pasa de 3 líneas (line-clamp) aunque la ficha se estreche. */
.plan .pdesc{font-size:13.5px;line-height:1.5;color:var(--muted);margin:6px 0 18px;
  height:calc(1.5em * 3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

/* ────────────────────────────────────────────────────────────────────────────
   PLAN DESTACADO — DEFINITIVO (aprobado por el cliente 2026-10-17): la ficha ENTERA en
   oscuro con el degradado del hero de hosting WordPress, texto en blanco, botón ámbar y la
   etiqueta «Más popular» como píldora sobre el borde. Sustituye al marco oscuro con solapa
   (sus reglas antiguas siguen más arriba, anuladas por este bloque). Se probaron antes un
   difuminado ámbar claro y un degradado lila→azul; el cliente eligió este.
   ──────────────────────────────────────────────────────────────────────────── */
.plan.featured{background:none;padding:0;box-shadow:none;border-radius:22px}
@media(min-width:640px){
  .plans{margin-top:34px}
  .plan.featured{margin:0}
}
/* El MISMO degradado que el hero de hosting WordPress (body.theme-wp:
   --hero-grad + .hero-anim): pizarra → negro con brillo teal y azul arriba. */
.plan.featured .plan-body{
  background:
    radial-gradient(circle at 27% 8%, rgba(46,134,166,.30), transparent 42%),
    radial-gradient(circle at 76% 4%, rgba(49,131,215,.22), transparent 46%),
    radial-gradient(120% 110% at 22% 0%, rgba(46,134,166,.24), transparent 46%),
    linear-gradient(165deg,#2A363F 0%,#1a232b 24%,#0b1116 50%,#000 100%);
  border:1px solid rgba(46,134,166,.45);border-radius:22px;color:#fff;
  box-shadow:0 26px 50px -24px rgba(11,17,22,.85)}
.plan.featured:hover .plan-body{box-shadow:0 30px 58px -22px rgba(11,17,22,.95)}
.plan.featured .pname,.plan.featured .price .amt{color:#fff}
.plan.featured .pdesc,.plan.featured .price .per{color:#c3ced7}
/* «Renueva a…» es una píldora de fondo claro: en la ficha oscura, fondo translúcido */
.plan.featured .was{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#c3ced7}
.plan.featured .was b,.plan.featured .was s{color:#fff}
.plan.featured .annual{color:#ffd27a}
.plan.featured .plan-div{border-top-color:rgba(255,255,255,.16)}
.plan.featured .feat-list li{color:#dde4ea}
.plan.featured .feat-list b{color:#fff}
.plan.featured .feat-list .ck{background:rgba(110,207,234,.16);color:#8fd3ec}
.plan.featured .tip{color:#c3ced7}
.plan.featured .tip:hover,.plan.featured .tip:focus-visible{color:#ffd27a}
.plan-flag{position:absolute;top:0;left:50%;right:auto;transform:translate(-50%,-50%);z-index:3;height:auto;
  padding:7px 16px;border-radius:999px;background:var(--grad-warm);color:#2A363F;white-space:nowrap;
  box-shadow:0 8px 18px -8px rgba(255,122,0,.7);font-size:11.5px}
.plan-flag svg{color:#2A363F}
/* n8n (página oscura): el mismo efecto con su coral */
body.theme-n8n .plan.featured{background:none}
body.theme-n8n .plan.featured .plan-body{
  background:radial-gradient(130% 70% at 50% -10%, rgba(255,145,172,.32), transparent 62%),linear-gradient(180deg,#2a0d18 0%,var(--surface) 60%);
  border-color:rgba(255,145,172,.6);box-shadow:0 22px 46px -24px rgba(255,145,172,.55)}
body.theme-n8n .plan-flag{background:#FF91AC;color:#191919}   /* rosa claro de n8n: texto negro (contraste ~10:1) */
body.theme-n8n .plan-flag svg{color:#191919}

/* ────────────────────────────────────────────────────────────────────────────
   .pcalc — «lo que pagas hoy y después» (2026-10-17). Sustituye a la tira .renew:
   bloques que se leen de izquierda a derecha con flecha. Hosting (includes/renew.php)
   y VPS. El primer bloque en ámbar (hoy), el resto neutros; el más barato marcado.
   ──────────────────────────────────────────────────────────────────────────── */
.pcalc{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:28px}
.pcalc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-bottom:22px}
.pcalc-top h3{font-size:19px;letter-spacing:-.3px}
.pcalc-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:12px}
.pcalc-steps.two{grid-template-columns:1fr auto 1fr}
.pcalc-step{display:flex;flex-direction:column;gap:6px;justify-content:center;padding:20px 22px;border-radius:16px;
  background:var(--soft);border:1px solid var(--line)}
.pcalc-step.now{background:var(--amber-soft);border-color:rgba(255,180,31,.55)}
.pcalc-step.best{background:#fff;border:1.5px solid var(--ink)}
.pcalc-l{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pcalc-step.now .pcalc-l{color:var(--amber-text)}
.pcalc-p{font-size:15px;font-weight:600;color:var(--muted)}
.pcalc-p b{font-family:var(--font-title);font-weight:800;font-size:34px;letter-spacing:-1px;color:var(--ink)}
.pcalc-s{font-size:13px;color:var(--muted)}
.pcalc-s b{color:var(--ink)}
.pcalc-arrow{display:flex;align-items:center;justify-content:center;color:var(--amber-text)}
.pcalc-arrow svg{width:26px;height:26px}
.pcalc-or{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);font-size:14px}
.pcalc-note{margin-top:18px;font-size:13.5px;color:var(--muted)}
@media(max-width:900px){
  .pcalc{padding:20px}
  .pcalc-steps,.pcalc-steps.two{grid-template-columns:1fr}
  .pcalc-arrow svg{transform:rotate(90deg)}
}

/* NÚMEROS ALINEADOS (2026-10-17). Raleway usa por defecto cifras «de estilo antiguo»: el 6 y el 8
   suben y el 3, 4, 5, 7 y 9 bajan de la línea, así que en los precios parecía que algún número
   estaba «elevado» (el 8 de 8,49). lining-nums los pone todos a la misma altura. Se hereda en toda
   la web; si en algún sitio se pone tabular-nums, escribir «lining-nums tabular-nums». */
html{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.foot .foot-lab{margin-top:-4px;font-size:13px}
.foot .foot-lab a{display:inline;margin:0;color:#d6dde3;text-decoration:underline;text-underline-offset:2px}
.foot .foot-lab a:hover{color:var(--amber)}
.hero-facts li a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.hero-facts li a:hover{color:var(--amber)}
/* variante compacta: en escritorio, las etiquetas en una sola fila */
.hero-facts.compact li{font-size:12.5px;padding:5px 12px;gap:6px;white-space:nowrap}
@media(min-width:900px){.hero-facts.compact{flex-wrap:nowrap}}

/* Subtítulo (.sub) de los heroes con texto a la izquierda: `.hero .sub` (más abajo en el
   archivo, misma especificidad) le ponía margin:auto y lo centraba DENTRO de la columna, así
   que salía sangrado respecto al H1. En escritorio va pegado a la izquierda; en móvil sigue
   centrado (regla del @media de .hero-edit). Afecta a todas las páginas con .hero-edit. */
@media(min-width:901px){.hero.hero-edit .sub{margin-left:0;margin-right:0}}

/* ────────────────────────────────────────────────────────────────────────────
   PRO del plugin Mautic (2026-10-17): mismo estilo que el plan «Más popular» de los precios
   (degradado del hero de WordPress, texto blanco, botón ámbar), en la tarjeta PRO (.vs-col.pick)
   y en la columna PRO de la comparativa (.cmp-feats .col-feat).
   ──────────────────────────────────────────────────────────────────────────── */
body.theme-mautic .vs-col.pick{
  background:
    radial-gradient(circle at 27% 6%, rgba(46,134,166,.30), transparent 42%),
    radial-gradient(circle at 76% 2%, rgba(49,131,215,.22), transparent 46%),
    radial-gradient(120% 110% at 22% 0%, rgba(46,134,166,.24), transparent 46%),
    linear-gradient(165deg,#2A363F 0%,#1a232b 24%,#0b1116 50%,#000 100%);
  border-color:rgba(46,134,166,.45);box-shadow:0 26px 50px -24px rgba(11,17,22,.85);color:#fff}
body.theme-mautic .vs-col.pick .vs-top{background:none;border-bottom-color:rgba(255,255,255,.12)}
body.theme-mautic .vs-col.pick .vs-top h3,body.theme-mautic .vs-col.pick .vs-price{color:#fff}
body.theme-mautic .vs-col.pick .vs-top .who,body.theme-mautic .vs-col.pick .vs-price small{color:#c3ced7}
body.theme-mautic .vs-col.pick .vs-body dt{color:#8fa0b0}
body.theme-mautic .vs-col.pick .vs-body dd{color:#dde4ea}
body.theme-mautic .vs-col.pick .vs-body dd b{color:#fff}
body.theme-mautic .vs-col.pick .vs-tag{background:var(--grad-warm);color:#2A363F}

/* columna PRO de la comparativa: oscura de arriba abajo */
.cmp.cmp-feats thead th.col-feat{background:linear-gradient(165deg,#2A363F 0%,#1a232b 55%,#0b1116 100%)}
.cmp.cmp-feats thead th.col-feat .cmp-plan,.cmp.cmp-feats thead th.col-feat .cmp-price{color:#fff}
.cmp.cmp-feats thead th.col-feat .cmp-price small{color:#c3ced7}
.cmp.cmp-feats tbody td.col-feat{background:#141c22;color:#fff;border-bottom-color:rgba(255,255,255,.08)}
.cmp.cmp-feats tbody td.col-feat small{color:#c3ced7}
.cmp.cmp-feats td.col-feat .mk.yes{background:rgba(110,207,234,.16);color:#8fd3ec}
.cmp.cmp-feats td.col-feat .mk.no{color:#5f6b75}
/* La columna PRO oscura toca las esquinas derechas, y .cmp-wrap no las recorta (overflow-clip-margin
   de 90px para los tooltips): se redondean las propias celdas de las esquinas. */
.cmp.cmp-feats thead tr:first-child th:last-child{border-top-right-radius:18px}
.cmp.cmp-feats tbody tr:last-child td:last-child{border-bottom-right-radius:18px}

/* Heroes con texto a la izquierda: aprovechar el ancho (2026-10-17, «los textos quedan muy
   apilados»). Antes el contenido iba en la caja de 1160px con la columna de texto a ~500px y
   el .sub cortado a 30ch, así que el H1 salía en 4 líneas. Ahora: caja de 1320px, el texto se
   lleva más ancho que la ilustración y el sub/sub2 a una medida de lectura cómoda.
   Solo escritorio ancho; por debajo de 1100px se queda como estaba. */
@media(min-width:1101px){
  .hero-edit:not(.hero-legal) .hero-grid{max-width:1400px;grid-template-columns:1.35fr 1fr;gap:56px}
  .hero-edit:not(.hero-legal) .hero-copy{max-width:none}
  .hero.hero-edit h1{font-size:clamp(44px,3.9vw,58px)}
  .hero.hero-edit .sub{max-width:none}
  .hero.hero-edit .sub2{max-width:64ch;margin-left:0;margin-right:0} /* .hero .sub2 lo centraba con margin:auto → salía sangrado */
}

/* Lista de cookies en la política de cookies (la pinta assets/consent.js en #consentimiento) */
.legal-cookies{overflow-x:auto;margin:6px 0 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.legal-cookies table{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px}
.legal-cookies th,.legal-cookies td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line);line-height:1.5}
.legal-cookies th{background:var(--soft);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.legal-cookies td:first-child{font-weight:600;color:var(--ink);min-width:150px}
.legal-cookies td:nth-child(2){white-space:nowrap}
.legal-cookies td:nth-child(3){min-width:120px}
.legal-cookies tr:last-child td{border-bottom:none}
.legal-cookies > p{padding:12px 14px;margin:0}

/* ── 404 y mantenimiento: los «hamsters técnicos» (2026-10-17) ── */
/* sin tema de color propio (negro como la home): el color lo pone el hamster */
.w404-ruta{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:rgba(255,255,255,.12);color:#ffd479;padding:2px 8px;border-radius:6px;white-space:nowrap;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
/* 404: cartel de SE BUSCA + hamster detective + minijuego de los cajones */
.sb{width:100%;max-width:440px;margin-left:auto;display:block;overflow:visible}
.sb-detective{animation:sbbote 1.4s ease-in-out infinite alternate}
.sb-lupa{transform-box:view-box;transform-origin:58px 6px;animation:sblupa 2.6s ease-in-out infinite}
.sb-sello{opacity:0;transform-box:view-box;transform-origin:226px 230px;transform:scale(1.8)}
.sb.cerrado .sb-sello{animation:sbsello .45s cubic-bezier(.2,1.6,.4,1) .6s forwards}
@keyframes sbbote{to{transform:translateY(-4px)}}
@keyframes sblupa{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}
@keyframes sbsello{to{opacity:.92;transform:scale(1)}}
.caj-rack{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:980px;margin:0 auto;padding:18px;background:#2A363F;border-radius:20px;box-shadow:var(--shadow-lg)}
.caj{position:relative;min-height:128px;border:none;border-radius:12px;background:#1b232a;color:#fff;cursor:pointer;font-family:var(--font-body);text-align:left;overflow:hidden;padding:0;transition:transform .2s}
.caj:hover:not(.abierto),.caj:focus-visible:not(.abierto){transform:translateY(-3px)}
.caj-frente{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 18px;transition:transform .45s cubic-bezier(.6,0,.3,1)}
.caj-led{width:9px;height:9px;border-radius:50%;background:#28c840;box-shadow:0 0 8px #28c840;animation:mtled 1.3s steps(2,jump-none) infinite}
.caj-nombre{flex:1;font-weight:700;font-size:14px;color:#cfd6dd}
.caj-asa{width:34px;height:8px;border-radius:4px;background:#3d4a55}
.caj-dentro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:12px 16px;background:#FFF8E7;color:var(--ink);font-size:13px;line-height:1.4;opacity:0;transition:opacity .3s .2s}
.caj-ico svg{width:44px;height:44px;display:block}
.caj.abierto{cursor:default}
.caj.abierto .caj-frente{transform:translateX(100%)}
.caj.abierto .caj-dentro{opacity:1}
.caj-estado{text-align:center;margin-top:18px;color:var(--muted);font-size:15px;min-height:1.6em}
.caj-estado b{color:#E71D24}
@media(max-width:900px){.caj-rack{grid-template-columns:repeat(2,1fr);padding:12px;gap:10px}.sb{margin:0 auto}}
@media(prefers-reduced-motion:reduce){.sb *,.caj-led{animation:none!important}.sb.cerrado .sb-sello{opacity:.92;transform:none}}
/* Escena animada del mantenimiento (mantenimiento-area-de-clientes.php) */
.mt{width:100%;max-width:680px;margin-left:auto;display:block;overflow:visible}
@media(min-width:1101px){.hero-mant:not(.hero-legal) .hero-grid{grid-template-columns:1fr 1.15fr}}
.hm-ojo,.mt-chispas{transform-box:fill-box;transform-origin:center} /* solo estos: con fill-box en todo, los transform="rotate/scale" del SVG se descolocan */
.mt-led{animation:mtled 1.1s steps(2,jump-none) infinite}
.mt-led.b{animation-duration:1.7s}
.mt-cartel{transform-origin:50% 0;transform-box:view-box;transform-origin:530px 82px;animation:mtcartel 3s ease-in-out infinite}
.mt-llave{transform-origin:52px 8px;transform-box:view-box;animation:mtllave .9s ease-in-out infinite alternate}
.mt-chispas{animation:mtchispa .9s ease-out infinite}
.mt-codigo{animation:mtcodigo 1.6s steps(4) infinite}
.mt-vapor path{animation:mtvapor 2.4s ease-in-out infinite}
.mt-pata{animation:mtpata .22s ease-in-out infinite alternate}
.mt-pata.b{animation-delay:.11s}
.mt-paseo{animation:mtpaseo 9s linear infinite}
.mt-paseo .hm-pie{animation:mtpie .3s ease-in-out infinite alternate}
.mt-paseo .hm-pie.p2{animation-direction:alternate-reverse}
.mt-paseo .hm{animation:mtbote .3s ease-in-out infinite alternate}
.h-teclea .hm-ojo{animation:mtparpadeo 4s infinite}
@keyframes mtled{50%{opacity:.2}}
@keyframes mtcartel{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes mtllave{from{transform:rotate(-24deg)}to{transform:rotate(18deg)}}
@keyframes mtchispa{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(10px,-14px) scale(.4)}}
@keyframes mtcodigo{to{transform:translateY(-6px)}}
@keyframes mtvapor{0%{opacity:0;transform:translateY(6px)}40%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
@keyframes mtpata{to{transform:translateY(-6px)}}
@keyframes mtpaseo{0%{transform:translateX(-90px)}100%{transform:translateX(360px)}}
@keyframes mtpie{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
@keyframes mtbote{to{transform:translateY(-3px)}}
@keyframes mtparpadeo{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.mt-progreso{max-width:680px;margin:18px 0 0 auto}
.mt-barra{height:12px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.mt-barra span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#FFC24B,#FF7A00);transition:width .9s cubic-bezier(.3,1.4,.5,1)}
.mt-progreso p{margin-top:10px;color:#c3ced7;font-size:14px;min-height:1.5em}
.mt-progreso b{color:#ffd479;font-variant-numeric:tabular-nums lining-nums;margin-right:6px}
@media(prefers-reduced-motion:reduce){.mt *{animation:none!important}}
@media(max-width:900px){.mt,.mt-progreso{margin-left:auto;margin-right:auto}}

/* Declaración responsable de VeriFactu (página sin indexar) */
.dr-doc{max-width:760px;margin:0 auto}
.dr-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.dr-item{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.dr-item h2{font-size:18px;margin-bottom:10px}
.dr-pdf{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:underline}
.dr-pdf svg{width:20px;height:20px;color:var(--teal);flex-shrink:0}
@media(max-width:700px){.dr-list{grid-template-columns:1fr}}

/* n8n (fondo oscuro): el nivel del plan en ámbar claro, el ocre no se leía */
body.theme-n8n .plan .ptier{color:#ffd27a}

/* n8n: orientación de qué plan elegir, bajo las tarjetas de «n8n self-hosted» */
.n8n-plan-guia{max-width:820px;margin:26px auto 0;text-align:center;font-size:15px;line-height:1.65;color:var(--muted)}
.n8n-plan-guia b{color:var(--ink)}

/* ── OpenClaw (/hosting-openclaw/, 2026-11-01): body «theme-n8n theme-claw». Hereda TODO el modo oscuro de
   n8n y aquí solo se cambian los acentos coral por el ROJO de la marca OpenClaw (#ff4d4d / #991b1b, de su
   logo oficial). Con doble clase (body.theme-n8n.theme-claw) gana a las reglas de n8n sin depender del orden.
   Texto blanco sobre rojo: #c62828 / #d32f2f (el #ff4d4d no llega al contraste mínimo). ── */
body.theme-n8n.theme-claw{
  --hero-top:#1a0707;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(255,77,77,.36), transparent 52%),
    linear-gradient(165deg,#3f1414 0%,#280c0c 24%,#170707 50%,#000 100%);
}
body.theme-n8n.theme-claw .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(255,77,77,.38), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(153,27,27,.34), transparent 46%);
}
body.theme-n8n.theme-claw .nn-glow.g1{background:radial-gradient(circle,rgba(255,77,77,.48),transparent 70%)}
body.theme-n8n.theme-claw .nn-glow.g2{background:radial-gradient(circle,rgba(153,27,27,.45),transparent 70%)}
body.theme-n8n.theme-claw .nn-glow.g3{background:radial-gradient(circle,rgba(255,140,110,.22),transparent 70%)}
body.theme-n8n.theme-claw .nn-node.c{filter:drop-shadow(0 0 5px rgba(255,77,77,.8))}
body.theme-n8n.theme-claw .nn-node.y{filter:drop-shadow(0 0 5px rgba(255,180,168,.6))}
body.theme-n8n.theme-claw .subnav-link.active{background:#d32f2f;color:#fff}
body.theme-n8n.theme-claw .band{background:linear-gradient(135deg,rgba(255,77,77,.16),rgba(16,22,30,.65));border-color:rgba(255,77,77,.4)}
body.theme-n8n.theme-claw .band .t .em{color:#ff9a9a}
body.theme-n8n.theme-claw .plan.featured .plan-body{
  background:radial-gradient(130% 70% at 50% -10%, rgba(255,77,77,.38), transparent 62%),linear-gradient(180deg,#2c1010 0%,var(--surface) 60%);
  border-color:rgba(255,77,77,.6);box-shadow:0 22px 46px -24px rgba(255,77,77,.6)}
body.theme-n8n.theme-claw .plan-flag{background:#c62828;color:#fff}
body.theme-n8n.theme-claw .plan-flag svg{color:#fff}
body.theme-n8n.theme-claw{--p2-ac:#ff4d4d;--p2-glow:rgba(255,77,77,.7)}
body.theme-n8n.theme-claw .plan.featured{background:none}
body.theme-n8n.theme-claw .p2-vd .p2-h-ico{background:rgba(255,77,77,.14);color:#ff9a9a}
body.theme-n8n.theme-claw .p2-vd:hover{border-color:rgba(255,77,77,.45)}

/* ────────────────────────────────────────────────────────────────────────────
   BLOG (2026-10-18) — índice /blog/ (blog.php), artículo (blog-articulo.php) y su
   texto (.post), que sale del editor del panel del blog. Tema propio: BURDEOS
   (ninguna otra página lo usa; el magenta de afiliados es más rosado).
   ──────────────────────────────────────────────────────────────────────────── */
body.theme-blog{
  --hero-top:#140709;
  --hero-grad:
    radial-gradient(120% 110% at 22% 0%, rgba(150,32,58,.44), transparent 52%),
    linear-gradient(165deg,#561826 0%,#360f18 24%,#1b080c 50%,#000 100%);
}
body.theme-blog .hero-anim{
  background:
    radial-gradient(circle at 27% 16%, rgba(178,52,80,.44), transparent 44%),
    radial-gradient(circle at 76% 12%, rgba(255,180,31,.16), transparent 46%);
}
.hero-post{padding-bottom:64px}
.hero-post .hero-copy{max-width:900px}
.hero-post h1{font-size:clamp(30px,4.4vw,52px);line-height:1.08}
.hero-post .sub2{margin-top:20px}
.post-migas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;margin-bottom:18px;color:#c3ced7}
.post-migas a{color:#ffd479;padding:6px 0}
.post-migas a:hover{text-decoration:underline}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:#c3ced7;margin:0}
.post-meta span+span::before{content:"·";margin-right:18px;opacity:.6}
.post-previa{position:sticky;top:0;z-index:70;background:var(--amber);color:#2A363F;text-align:center;font-size:14px;font-weight:600;padding:8px 16px}
.post-previa a{text-decoration:underline}

/* Artículo: índice fijo a la izquierda + texto (como las legales; ver la nota del overflow:clip) */
.flow:has(.post-doc){overflow:clip}
.post-sec{padding-top:64px}
.post-doc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start}
.post-doc.sin-indice{grid-template-columns:minmax(0,1fr)}
.post-doc.sin-indice .post{margin:0 auto}
.post-toc{position:sticky;top:calc(110px + var(--cab-off,0px));max-height:calc(100vh - 140px);overflow:auto;
  padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}
.post-toc summary{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;cursor:pointer;list-style:none}
.post-toc summary::-webkit-details-marker{display:none}
.post-toc a{display:block;padding:7px 10px;border-radius:8px;font-size:13.5px;line-height:1.35;color:var(--ink-soft)}
.post-toc a.lv2{padding-left:20px;font-size:12.5px}
.post-toc a:hover{background:var(--soft);color:var(--ink)}
.post-toc a.active{background:var(--ink);color:#fff}

.post{max-width:760px;color:var(--ink-soft);font-size:17px;line-height:1.8;overflow-wrap:break-word}
.post > :first-child{margin-top:0}
.post p{margin:0 0 18px}
.post h2{font-size:clamp(25px,2.8vw,32px);line-height:1.2;letter-spacing:-.6px;color:var(--ink);margin:52px 0 16px}
.post h3{font-size:clamp(19px,2vw,22px);line-height:1.3;letter-spacing:-.3px;color:var(--ink);margin:34px 0 12px}
.post h4{font-size:17px;color:var(--ink);margin:26px 0 10px}
.post [id]{scroll-margin-top:calc(120px + var(--cab-off,0px))}
.post a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.post a:hover{color:var(--amber-text)}
/* Los botones dentro del artículo (la llamada a la acción del final) siguen el patrón de la web:
   amarillo con texto oscuro y sin subrayar. Sin esto, la regla de los enlaces del texto los pintaba azules. */
.post .btn{text-decoration:none}
.post .btn-primary,.post .btn-primary:hover{color:#2A363F}
.post strong,.post b{color:var(--ink)}
.post ul,.post ol{margin:0 0 20px 24px}
.post li{margin-bottom:8px;padding-left:4px}
.post li::marker{color:var(--amber-text);font-weight:700}
.post blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:4px solid var(--amber);font-size:18px;color:var(--ink)}
.post blockquote p:last-child{margin-bottom:0}
.post code,.post kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink)}
.post pre{margin:0 0 22px;padding:18px 20px;border-radius:14px;background:#1d252c;color:#e7edf2;overflow:auto;font-size:14.5px;line-height:1.65}
.post pre code{background:none;border:none;padding:0;color:inherit;font-size:inherit}
.post hr{border:none;border-top:1px solid var(--line);margin:40px 0}
.post mark{background:var(--amber-soft);color:var(--ink);padding:0 3px;border-radius:3px}
.post img{max-width:100%;height:auto;border-radius:16px}
.post figure{margin:30px 0}
.post figcaption{font-size:14px;color:var(--muted);margin-top:10px;text-align:center}
.post .post-img img{display:block;width:100%;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--surface)}
.post-portada{margin:0 0 36px}
.post-portada img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow)}
/* Recuadros del editor: aviso (info), aviso-ok (consejo), aviso-alerta (cuidado) */
.post .aviso,.post .aviso-ok,.post .aviso-alerta{margin:26px 0;padding:18px 22px;border-radius:14px;border:1px solid rgba(46,134,166,.3);background:rgba(46,134,166,.07);font-size:16px}
.post .aviso-ok{border-color:rgba(31,169,113,.35);background:rgba(31,169,113,.08)}
.post .aviso-alerta{border-color:rgba(231,29,36,.3);background:rgba(231,29,36,.06)}
.post .aviso > :last-child,.post .aviso-ok > :last-child,.post .aviso-alerta > :last-child{margin-bottom:0}
/* Bloque de terminal (comandos): como pre pero con la barra de una ventana */
.post .terminal{margin:0 0 22px;border-radius:14px;overflow:hidden;background:#1d252c}
.post .terminal::before{content:"";display:block;height:30px;background:#2a343c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='12'%3E%3Ccircle cx='6' cy='6' r='5' fill='%23E71D24'/%3E%3Ccircle cx='24' cy='6' r='5' fill='%23FFB41F'/%3E%3Ccircle cx='42' cy='6' r='5' fill='%231FA971'/%3E%3C/svg%3E") 14px center no-repeat}
.post .terminal pre{margin:0;border-radius:0}
.post-tabla{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.post table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.post th,.post td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.post th{background:var(--soft);color:var(--ink);font-weight:700}
.post tr:last-child td{border-bottom:none}
.post-cta{margin-top:48px;padding:40px}
.post-cta h2{margin:0 0 10px}

/* Tarjetas de artículo (índice y «Sigue leyendo») */
.blog-sec{padding-top:64px}
.post-mas{padding-top:72px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{display:flex}
.post-card[hidden]{display:none}
.post-card-a{display:flex;flex-direction:column;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.post-card-a:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--amber)}
.post-card-img{display:block;aspect-ratio:1200/630;background:var(--soft)}
.post-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.post-card-t{display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px;flex:1}
.post-card-cat{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-text)}
.post-card h2,.post-card h3{font-size:19px;line-height:1.3;letter-spacing:-.3px}
.post-card-x{font-size:14.5px;color:var(--muted);line-height:1.55}
.post-card-m{margin-top:auto;padding-top:6px;font-size:13px;color:var(--muted)}
.post-card.destacada{grid-column:1/-1}
.post-card.destacada .post-card-a{display:grid;grid-template-columns:1.15fr 1fr}
.post-card.destacada .post-card-img{aspect-ratio:auto;min-height:100%}
.post-card.destacada .post-card-t{justify-content:center;padding:36px 40px}
.post-card.destacada h2{font-size:clamp(23px,2.6vw,30px)}
.post-card.destacada .post-card-x{font-size:16px}
.blog-cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.blog-cats a{display:inline-flex;align-items:center;min-height:44px;padding:9px 18px;border-radius:30px;border:1px solid var(--line);background:var(--surface);font:600 14px var(--font-body);color:var(--ink);transition:.15s}
.blog-cats a:hover{border-color:var(--amber)}
.blog-cats a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.blog-paginas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px}
.blog-paginas a,.blog-paginas span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:600;color:var(--ink)}
.blog-paginas a:hover{border-color:var(--amber)}
.blog-paginas span[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.blog-vacio{color:var(--muted);font-size:16px;padding:20px 0}
.blog-vacio[hidden]{display:none}
@media(max-width:900px){
  .post-doc{grid-template-columns:minmax(0,1fr);gap:24px}
  .post-toc{position:static;max-height:none}
  .post-toc summary{margin:0;font-size:13px}
  .post-toc details[open] summary{margin-bottom:8px}
  .post-sec{padding-top:40px}
  .post{font-size:16.5px}
  .post-grid{grid-template-columns:1fr}
  .post-card.destacada .post-card-a{grid-template-columns:1fr}
  .post-card.destacada .post-card-img{aspect-ratio:1200/630}
  .post-card.destacada .post-card-t{padding:22px 24px 24px}
  .post-cta{padding:28px}
}
@media(min-width:901px) and (max-width:1100px){.post-grid{grid-template-columns:repeat(2,1fr)}}

/* Buscador del blog (/blog/?q=) */
.blog-buscar{display:flex;align-items:center;gap:10px;max-width:640px;margin:0 0 22px;padding:6px 6px 6px 18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
.blog-buscar:focus-within{border-color:var(--amber)}
.blog-buscar svg{color:var(--muted);flex-shrink:0}
.blog-buscar input{flex:1;min-width:0;min-height:44px;border:none;background:none;font:400 16px var(--font-body);color:var(--ink);outline:none}
.blog-buscar .btn{padding:11px 20px}
.blog-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blog-resultado{color:var(--ink-soft);margin:-6px 0 22px}
.blog-resultado a,.blog-vacio a{color:var(--teal);text-decoration:underline}
.blog-buscar{position:relative}
.blog-sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-height:60vh;overflow:auto}
.blog-sug[hidden]{display:none}
.blog-sug a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;color:var(--ink)}
.blog-sug li[aria-selected="true"] a,.blog-sug a:hover{background:var(--soft)}
.blog-sug-t{font-weight:600;font-size:15px;line-height:1.35}
.blog-sug-c{font-size:12.5px;color:var(--muted)}
.blog-sug-todos a{font-size:14px;font-weight:600;color:var(--teal);border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:4px}

/* Hero cinemático de la home EN MÓVIL (2026-10-20): el contenido (titular de 4 líneas, dos frases y los
   4 recuadros) era más alto que el vídeo y, al ir centrado, el titular asomaba por encima del vídeo
   (y en móviles bajitos quedaba tapado por la barra de dominios). Aquí se compacta para que quepa
   dentro del recuadro del vídeo; «safe center» hace que, si aun así no cabe, se recorte por abajo y no
   por arriba (nunca se pierde el titular). */
.hero-pin.is-cinema .hero-stage{justify-content:safe center}
@media(max-width:600px){
  .hero-pin.is-cinema .hero-slide-group{min-height:0}
  .hero-pin.is-cinema .hero-slide-text h1{font-size:clamp(28px,8.4vw,36px);letter-spacing:-.8px}
  .hero-pin.is-cinema .hero-slide-text h2{font-size:clamp(26px,7.6vw,34px);letter-spacing:-.6px}
  .hero-pin.is-cinema .hero-slide-text .sub{font-size:16.5px;line-height:1.45;margin:12px auto 4px}
  .hero-pin.is-cinema .hero-slide-text .sub2{font-size:14.5px;line-height:1.5;margin:6px auto 14px}
  .hero-pin.is-cinema .badge.hero-topbar{display:none}   /* en móvil sobra: los recuadros ya dicen LiteSpeed */
  .hero-pin.is-cinema .stats{margin-top:14px}
  .hero-pin.is-cinema .stat{flex:1 1 45%;min-width:0;padding:8px 6px}
  .hero-pin.is-cinema .stat .n{font-size:16px}
  .hero-pin.is-cinema .stat .l{font-size:11.5px;line-height:1.3}
}
@media(max-width:600px) and (max-height:760px){
  .hero-pin.is-cinema .hero-text-1 .sub2{display:none}
}
@media(max-width:600px) and (max-height:700px){
  .hero-pin.is-cinema .hero-slide-text .sub{font-size:15.5px;margin:8px auto 2px}
  .hero-pin.is-cinema .stats{margin-top:10px}
  .hero-pin.is-cinema .hero-slide-text h1{font-size:clamp(26px,8vw,32px)}
  .hero-pin.is-cinema .stat{padding:6px 6px}
}
/* Portátiles con poca altura útil (1366×768 con la barra del navegador ≈ 650 px): el buscador ocupa la
   parte de arriba del vídeo, así que el resto se compacta para que quepa dentro de la tarjeta. */
@media(min-width:601px) and (max-height:860px){
  .hero-pin.is-cinema .hero-text-1 .sub2{display:none}
  .hero-pin.is-cinema .stats{margin-top:26px}
}
@media(min-width:601px) and (max-height:740px){
  .hero-pin.is-cinema .badge.hero-topbar{display:none}
  .hero-pin.is-cinema .hero-slide-group{min-height:0}
  .hero-pin.is-cinema .hero-slide-text h1{font-size:clamp(36px,4.4vw,52px)}
  .hero-pin.is-cinema .hero-slide-text h2{font-size:clamp(32px,4vw,46px)}
  .hero-pin.is-cinema .stats{margin-top:18px}
  .hero-pin.is-cinema .stat{padding:12px 16px}
}

/* Reseller (2026-10-20): una sola modalidad mientras no exista la licencia de agencia */
.vs.vs-uno{grid-template-columns:minmax(0,760px);justify-content:center}