/* ==========================================================================
   Sheron Systems — styles.css
   Production stylesheet recreated pixel-fidelity from the design handoff.
   ========================================================================== */

:root{
  /* --------------------------------------------------------------------
     Paleta Sheron — escala azul de la referencia.
     Ni blanco puro ni negro puro: los extremos son #F0F3FA y azul marino.
     -------------------------------------------------------------------- */
  --p-050:#F0F3FA;   /* tarjetas claras, texto sobre oscuro */
  --p-100:#D5DEEF;   /* fondo claro base, descripciones sobre oscuro */
  --p-200:#B1C9EF;   /* bordes, líneas, fondos de icono, zonas secundarias */
  --p-300:#8AAEE0;   /* acento suave */
  --p-400:#628ECB;   /* acento principal: iconos, enlaces, botones */
  --p-500:#395886;   /* base oscura */
  --p-600:#2C4570;   /* azul marino más profundo (degradados) */
  --p-700:#1E3355;   /* azul marino profundo */
  --p-800:#142A4A;   /* el tono más oscuro de la web, nunca negro */

  --black:#142A4A;
  --blue-black:#1E3355;
  --night:#2C4570;
  --white-1:#F0F3FA;
  --white-2:#D5DEEF;
  --ink:#08162A;          /* títulos sobre claro */
  --ink-2:#13243B;        /* texto principal en tarjetas claras */
  --text-dark:#53647A;    /* secundario sobre claro */
  --text-light:#D5DEEF;   /* secundario sobre oscuro */
  --electric:#628ECB;
  --blue-soft:#8AAEE0;

  /* Backgrounds */
  --bg-deep:#142A4A;
  --bg-body:#142A4A;
  --bg-webs:#395886;
  --bg-auto:#1E3355;
  --bg-proceso:#F0F3FA;
  --bg-footer:#10223C;
  /* Las tarjetas oscuras no comparten tono: dos superficies distintas */
  --card-grad-top:#395886;
  --card-grad-bottom:#24395C;
  --card-alt:#2C4570;

  /* Blue system */
  --blue-btn:#628ECB;
  --blue-accent:#628ECB;
  --blue-light:#8AAEE0;

  /* Text */
  --white:#F0F3FA;
  --gray-100:#F0F3FA;
  --gray-200:#D5DEEF;
  --gray-300:#D5DEEF;
  --gray-400:#D5DEEF;
  --gray-500:#B1C9EF;
  --gray-600:#8AAEE0;

  /* Accents — solo estados concretos, en tonos poco saturados */
  --green:#7FBFA0;
  --teal:#79B4C4;
  --purple:#8AAEE0;
  --star:#D9C07A;
  --error:#D99A9A;

  /* Borders — azul claro sobre oscuro */
  --border-soft:rgba(177,201,239,.16);
  --border-mid:rgba(177,201,239,.26);
  --border-slate:rgba(98,142,203,.30);
  --border-blue:rgba(98,142,203,.55);

  /* Sombras unificadas — siempre con tinte azul */
  --shadow-light:0 1px 2px rgba(57,88,134,.06),0 18px 44px rgba(57,88,134,.14);
  --shadow-light-hover:0 1px 2px rgba(57,88,134,.07),0 28px 64px rgba(57,88,134,.20);
  --shadow-blue:0 6px 20px rgba(98,142,203,.38);

  --ease:cubic-bezier(.22,1,.36,1);
  --container:1240px;
  --container-contact:1100px;
  --container-legal:880px;
  --measure:66ch;         /* 60–70 caracteres por línea */
}

*,*::before,*::after{box-sizing:border-box}
/* The [hidden] attribute must always win over any class/inline "display"
   declaration elsewhere (equal-specificity class rules like .btn-continue or
   .form-fields, or an inline style="display:flex", would otherwise silently
   override it and leave the element visible). This keeps the multi-step
   contact form showing exactly one step at a time. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Geist,system-ui,-apple-system,sans-serif;
  background:var(--bg-body);
  color:var(--gray-100);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:var(--blue-accent);text-decoration:none}
a:hover{color:var(--blue-light)}
button,input,select,textarea{font-family:inherit}
ul{margin:0;padding:0}
::selection{background:var(--blue-btn);color:#fff}
:focus-visible{outline:2px solid var(--blue-accent);outline-offset:2px}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue-btn);color:#fff;
  padding:10px 18px;border-radius:0 0 10px 0;font-weight:600;
}
.skip-link:focus{left:0}

.h-label{margin:0 0 18px;color:var(--electric);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.h-title{margin:0 0 22px;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(32px,4.6vw,58px);letter-spacing:-.02em;line-height:1.04;max-width:min(100%,30ch)}
.h-title span{display:block;background:linear-gradient(180deg,#F0F3FA 30%,#D5DEEF 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-title span+span{background:linear-gradient(180deg,#F0F3FA 20%,#D5DEEF 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-title em,.h-blue{font-style:normal;background:linear-gradient(90deg,#8AAEE0,#628ECB);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-sub{margin:0;color:var(--text-light);font-size:clamp(15.5px,1.7vw,17.5px);line-height:1.72;max-width:min(var(--measure),100%)}
.head-block{padding-bottom:6px}

/* Ruta ATRAE → POSICIONA → CONVIERTE: azul salvo el estado final, en verde */
.route{margin-top:30px;display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.route-item{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--white-1)}
.route-dot{width:7px;height:7px;border-radius:50%;background:var(--electric);box-shadow:0 0 8px rgba(98,142,203,.55)}
.route-dot.green{background:var(--green);box-shadow:0 0 8px rgba(127,191,160,.45)}
.route-dot.gray{background:var(--gray-400);box-shadow:none}
.route-dot.purple{background:var(--blue-soft);box-shadow:0 0 8px rgba(138,174,224,.5)}
.route-sep{width:36px;height:1px;background:linear-gradient(90deg,rgba(98,142,203,.7),rgba(98,142,203,.12))}

/* ==========================================================================
   SISTEMA DE BOTONES
   Principal  → azul eléctrico sólido, texto blanco, sombra azul, +2px hover.
   Secundario → transparente con borde azul fino sobre oscuro; blanco con
                borde azul sobre claro (ver bloque .sec-light más abajo).
   Las clases originales se conservan para no tocar el HTML ni el JS.
   ========================================================================== */
.pill-cta,.hero-cta,.auto-close-cta,.web-cta-btn,.seo-mini-cta,.stack-cta,
.faq-side-btn,.alt-btn,.btn-back,.btn-continue,.btn-submit,.btn-again,.nav-cta{
  border-radius:99px;font-weight:700;letter-spacing:.08em;
  transition:background .25s,border-color .25s,color .25s,gap .25s,transform .2s,box-shadow .25s;
}
.pill-cta:hover,.hero-cta:hover,.auto-close-cta:hover,.web-cta-btn:hover,
.seo-mini-cta:hover,.stack-cta:hover,.faq-side-btn:hover,.alt-btn:hover,
.btn-back:hover,.btn-again:hover{transform:translateY(-2px)}

/* Secundario sobre oscuro */
.pill-cta{
  display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--white-1);
  border:1px solid rgba(98,142,203,.55);padding:14px 30px;font-size:13.5px;cursor:pointer;
}
.pill-cta:hover{border-color:var(--electric);background:rgba(98,142,203,.10);color:var(--white-1);gap:15px}
.pill-cta svg{transition:transform .25s}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);filter:blur(5px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .7s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:none;filter:blur(0)}
[data-reveal][data-ranim="left"]{transform:translateX(-36px)}
[data-reveal][data-ranim="left"].is-visible{transform:none}
[data-reveal][data-ranim="right"]{transform:translateX(36px)}
[data-reveal][data-ranim="right"].is-visible{transform:none}
[data-reveal][data-ranim="scale"]{transform:scale(.94)}
[data-reveal][data-ranim="scale"].is-visible{transform:none}

@keyframes heroIn{from{opacity:0;transform:translateY(30px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes panBg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
@keyframes dashFlow{to{stroke-dashoffset:-18}}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100}
.nav-bg{position:absolute;inset:0;background:rgba(20,42,74,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-soft);box-shadow:0 8px 30px rgba(0,0,0,.28);opacity:0;transition:opacity .35s ease}
.nav-bg.is-scrolled{opacity:1}
.nav-inner{position:relative;max-width:var(--container);margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo img{height:36px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links > a,.nav-link{color:var(--gray-300);font-size:14.5px;font-weight:500;transition:color .2s}
.nav-links > a:hover,.nav-link:hover{color:#fff}
.nav-link.is-active{color:var(--blue-accent)!important}
.nav-dropdown{position:relative;padding:24px 0}
.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:6px;color:var(--gray-300);font-size:14.5px;font-weight:500;transition:color .2s;cursor:pointer;background:none;border:none}
.nav-dropdown-menu{position:absolute;top:60px;left:-18px;min-width:230px;background:var(--card-alt);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.nav-dropdown.is-open .nav-dropdown-menu{opacity:1;visibility:visible;transform:none}
.nav-dropdown-menu a{display:flex;align-items:center;gap:11px;color:var(--gray-100);font-size:14px;font-weight:600;padding:11px 13px;border-radius:9px;transition:background .2s,color .2s}
.nav-dropdown-menu a:hover{background:rgba(98,142,203,.14);color:var(--blue-accent)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--electric);color:#fff;border:1px solid transparent;padding:9px 18px;font-size:12.5px;box-shadow:0 4px 14px rgba(98,142,203,.28)}
.nav-cta:hover{color:#fff;transform:translateY(-2px);background:#7BA3D8;box-shadow:0 8px 22px rgba(98,142,203,.4);gap:12px}
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(255,255,255,.05);border:1px solid var(--border-mid);border-radius:10px;cursor:pointer}
.nav-right{display:flex;align-items:center;gap:12px}

.mobile-menu{position:absolute;top:76px;left:12px;right:12px;background:var(--card-alt);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.5);padding:12px;display:none;flex-direction:column;gap:2px}
.mobile-menu.is-open{display:flex}
.mobile-menu a{border-radius:10px;transition:background .2s,color .2s}
.mobile-menu a.top{color:#fff;font-weight:600;padding:13px 14px}
.mobile-menu a.sub{color:var(--gray-400);font-weight:500;font-size:14px;padding:9px 14px 9px 30px}
.mobile-menu a:hover{background:rgba(255,255,255,.05);color:var(--blue-accent)}
.mobile-menu a.submit{margin-top:8px;background:var(--blue-btn);color:#fff;text-align:center;font-weight:600;padding:14px;text-align:center}
.mobile-menu a.submit:hover{background:var(--blue-accent);color:#fff}

@media(max-width:920px){
  .nav-links{display:none!important}
  .nav-burger{display:inline-flex!important}
  .nav-cta{display:none!important}
}
@media(min-width:921px){
  .mobile-menu{display:none!important}
}

/* ==========================================================================
   HERO
   ========================================================================== */
#inicio{position:relative;overflow:hidden;background:var(--black)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 22%}
.hero-overlay-h{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,42,74,.84) 0%,rgba(20,42,74,.56) 34%,rgba(20,42,74,.08) 58%,transparent 75%);pointer-events:none}
.hero-overlay-v{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,42,74,.38) 0%,transparent 20%,transparent 76%,var(--black) 100%);pointer-events:none}
.hero-pad{position:relative;max-width:var(--container);margin:0 auto;padding:140px 24px 110px;min-height:100svh;display:flex;align-items:center}
.hero-content{max-width:640px}
.hero-h1{margin:0 0 20px;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(52px,8vw,110px);letter-spacing:-.03em;line-height:.94;animation:heroIn .9s var(--ease) .15s both}
.hero-h1 span{display:block;background:linear-gradient(180deg,#FFFFFF 30%,#B1C9EF 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-h1 .grad{background:linear-gradient(90deg,#F0F3FA 0%,#8AAEE0 55%,#628ECB 82%,#8AAEE0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-subline{display:flex;align-items:center;gap:14px;margin:0 0 30px;animation:heroIn .9s var(--ease) .38s both}
.hero-subline .bar{flex:none;width:38px;height:2px;border-radius:2px;background:linear-gradient(90deg,#628ECB,rgba(98,142,203,.2));box-shadow:0 0 8px rgba(98,142,203,.5)}
.hero-subline p{margin:0;font-family:Kanit,Geist,sans-serif;font-weight:400;font-size:clamp(18px,2.2vw,25px);letter-spacing:.045em;line-height:1.4}
.hero-cta-wrap{animation:heroIn .9s var(--ease) .52s both}
/* CTA principal del hero: botón primario del sistema */
.hero-cta{
  display:inline-flex;align-items:center;gap:12px;background:var(--electric);color:#fff;
  border:1px solid transparent;padding:17px 34px;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:var(--shadow-blue);
}
.hero-cta:hover{color:#fff;transform:translateY(-2px);background:#7BA3D8;box-shadow:0 10px 30px rgba(98,142,203,.42)}
.hero-cta:hover svg{transform:translateX(4px)}
.hero-cta svg{transition:transform .25s}
.hero-benefits{display:flex;flex-direction:column;gap:16px;margin-top:38px;max-width:420px}
.hero-benefit{display:flex;align-items:center;gap:13px;animation:heroIn .8s var(--ease) both}
.hero-benefit .ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:rgba(44,69,112,.6);border:1px solid rgba(98,142,203,.28);box-shadow:0 0 14px rgba(98,142,203,.10)}
.hero-benefit p{margin:0;font-size:14.5px;line-height:1.5}
.hero-benefit .t{display:block;color:var(--white-1);font-weight:700;letter-spacing:.06em}
.hero-benefit .s{color:var(--text-light);font-weight:500}
.hero-scroll{position:absolute;bottom:26px;left:50%;margin-left:-22px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(20,42,74,.4);backdrop-filter:blur(8px);animation:floatY 2.6s ease-in-out infinite;transition:border-color .2s}
.hero-scroll:hover{border-color:var(--blue-accent)}

@media(max-width:860px){
  .hero-bg{object-position:70% 50%!important}
  .hero-pad{padding-top:120px!important;padding-bottom:96px!important;align-items:flex-start!important}
}
@media(max-width:640px){
  .hero-benefit .ico{width:38px!important;height:38px!important}
  /* Mobile hero: show only the earth/space side of the background (no
     character) with a top-to-bottom scrim instead of the desktop's
     left-to-right one, so the text always sits on a clean dark area. */
  .hero-bg{object-position:8% 30%!important}
  .hero-overlay-h{background:linear-gradient(180deg,rgba(20,42,74,.55) 0%,rgba(20,42,74,.22) 42%,rgba(20,42,74,.55) 100%)!important}
}

/* ==========================================================================
   SECTORES marquee
   ========================================================================== */
#sectores{position:relative;background:var(--bg-body);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);overflow:hidden}
.sectores-topline{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(98,142,203,.8),transparent);background-size:200% 100%;animation:panBg 7s ease-in-out infinite}
.sectores-glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 100% at 50% 50%,rgba(98,142,203,.05),transparent 70%);pointer-events:none}
.sectores-wrap{position:relative;padding:26px 0 30px}
.sectores-label{margin:0 0 16px;text-align:center;color:var(--blue-accent);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.sectores-marquee-outer{position:relative}
.sectores-marquee{display:flex;gap:14px;overflow-x:hidden;padding:4px 0;width:100%;scrollbar-width:none}
.sectores-marquee::-webkit-scrollbar{display:none}
.sector-pill{flex:none;display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);border:1px solid var(--border-slate);border-radius:99px;padding:10px 20px;font-size:14px;font-weight:600;letter-spacing:.05em;color:var(--gray-100);white-space:nowrap;transition:opacity .25s,transform .25s,border-color .25s}
.sector-pill:hover{transform:translateY(-2px);border-color:rgba(98,142,203,.55)}
.sector-pill svg{flex:none}
.fade-l,.fade-r{position:absolute;top:0;bottom:0;width:110px;pointer-events:none;z-index:2}
.fade-l{left:0;background:linear-gradient(90deg,#142A4A,transparent)}
.fade-r{right:0;background:linear-gradient(270deg,#142A4A,transparent)}
/* Marquee must keep scrolling (just slower, per design spec) even with
   reduced-motion — never wrap it into a static multi-row grid. */

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
#servicios{background:var(--bg-deep);scroll-margin-top:80px}
.section-pad{max-width:var(--container);margin:0 auto;padding:110px 24px}
.head-block{max-width:920px}
.svc-grid{margin-top:54px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;color:inherit;background:linear-gradient(180deg,var(--card-grad-top),var(--card-grad-bottom));border:1px solid var(--border-slate);border-radius:26px;padding:36px 30px;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.svc-card:hover{color:inherit;transform:translateY(-8px);border-color:rgba(98,142,203,.6);box-shadow:0 34px 80px rgba(98,142,203,.25)}
.svc-card.blue{border-color:rgba(98,142,203,.35);box-shadow:0 0 34px rgba(98,142,203,.1)}
.svc-card.blue:hover{border-color:rgba(98,142,203,.7);box-shadow:0 34px 80px rgba(98,142,203,.3)}
.svc-card.green:hover{border-color:rgba(127,191,160,.5);box-shadow:0 34px 80px rgba(127,191,160,.16)}
.svc-num{position:absolute;top:-26px;right:-6px;font-family:Kanit,sans-serif;font-weight:900;font-size:130px;line-height:1;color:rgba(177,201,239,.07);pointer-events:none}
.svc-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--blue-light)}
.svc-kicker.green{color:var(--green)}
.svc-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid rgba(98,142,203,.45);border-radius:15px;background:rgba(98,142,203,.12);box-shadow:0 0 22px rgba(98,142,203,.2)}
.svc-icon.green{border-color:rgba(127,191,160,.4);background:rgba(127,191,160,.1);box-shadow:0 0 22px rgba(127,191,160,.15)}
.svc-card h3{margin:0;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:25px;letter-spacing:.01em;color:#fff}
.svc-card p.desc{margin:0;font-size:14.5px;line-height:1.6;color:var(--gray-400)}
.svc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.svc-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--gray-200)}
.svc-list li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--blue-accent)}
.svc-list.green li::before{background:var(--green)}
.svc-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:.08em;color:var(--blue-accent);transition:gap .25s;background:none;border:none;cursor:pointer;padding:0}
.svc-cta.green{color:var(--green)}
.svc-card:hover .svc-cta{gap:13px}

.hosting-band{position:relative;overflow:hidden;margin-top:22px;border:1px solid var(--border-soft);background:linear-gradient(180deg,#395886,var(--card-grad-bottom));border-radius:20px;padding:30px 32px}
.hosting-topline{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(98,142,203,.9),transparent);background-size:200% 100%;animation:panBg 6s ease-in-out infinite}
.hosting-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:22px 34px}
.hosting-intro{min-width:250px;flex:1.1;align-self:center}
.hosting-intro .k{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--blue-light)}
.hosting-intro h3{margin:0 0 8px;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(19px,2vw,24px);letter-spacing:.01em;color:#fff}
.hosting-intro p{margin:0;font-size:13.5px;line-height:1.6;color:var(--gray-400)}
.hosting-opt{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:250px;background:rgba(255,255,255,.025);border:1px solid var(--border-slate);border-radius:14px;padding:18px 20px;transition:border-color .25s}
.hosting-opt:hover{border-color:rgba(98,142,203,.5)}
.hosting-opt.highlight{background:rgba(98,142,203,.06);border-color:rgba(98,142,203,.4)}
.hosting-opt.highlight:hover{border-color:rgba(98,142,203,.7)}
.hosting-opt p{margin:0;font-size:13px;line-height:1.5}
.hosting-opt .t{display:block;font-weight:700;letter-spacing:.06em;color:#fff}
.hosting-opt .s{color:var(--gray-400)}

@media(max-width:900px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .svc-grid>a:last-child{grid-column:1/-1}
}
@media(max-width:640px){
  .svc-grid{grid-template-columns:1fr;gap:14px}
  .svc-grid>a:last-child{grid-column:auto}
  .hosting-grid>div{padding-left:0!important;border-left:none!important}
}

/* ==========================================================================
   TIPOS DE WEB
   ========================================================================== */
#webs{position:relative;background:var(--bg-webs);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);scroll-margin-top:80px;overflow:hidden}
.webs-body{padding:44px 0 110px}
.webs-track{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.web-card-wrap{transition:filter .35s ease,opacity .35s ease}
.web-card{position:relative;width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,rgba(57,88,134,.92),rgba(30,51,85,.92));border:1px solid var(--border-slate);border-radius:24px;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.web-card:hover{transform:translateY(-8px);border-color:rgba(98,142,203,.6);box-shadow:0 30px 70px rgba(20,42,74,.55)}
.web-card.premium{background:linear-gradient(180deg,#44659A,#2C4570);border-color:rgba(98,142,203,.55);box-shadow:0 18px 50px rgba(20,42,74,.5),0 0 0 1px rgba(98,142,203,.10);transform:translateY(-6px)}
.web-card-num{position:absolute;bottom:-30px;right:-4px;font-family:Kanit,sans-serif;font-weight:900;font-size:120px;line-height:1;color:rgba(177,201,239,.06);pointer-events:none;z-index:0}
.web-card-top{position:relative;background:#2C4570;padding:14px 14px 0}
.web-card-dots{display:flex;align-items:center;gap:5px;margin-bottom:10px}
/* :not(.lbl) es necesario: la etiqueta es un <span> hermano de los puntos
   y sin excluirla heredaba el 8x8 redondo, quedando aplastada a un punto. */
.web-card-dots span:not(.lbl){flex:none;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.web-card-dots .lbl{flex:none;margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.12em;white-space:nowrap}
.web-card-media{position:relative;height:230px;border-radius:12px 12px 0 0;overflow:hidden;background-size:200% 200%;animation:panBg 9s ease-in-out infinite}
.web-card-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.web-card-body{position:relative;padding:24px;display:flex;flex-direction:column;gap:12px;flex:1;z-index:1}
.web-card-body h3{margin:0;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:23px;letter-spacing:.01em;color:#fff}
.web-card-body p.frase{margin:0;font-size:14.5px;color:var(--text-light);line-height:1.65}
.web-ideal{border-left:2px solid var(--blue-accent);background:rgba(255,255,255,.03);border-radius:0 10px 10px 0;padding:10px 14px}
.web-ideal .k{margin:0;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--gray-400)}
.web-ideal .v{margin:4px 0 2px;font-size:13px;font-weight:700;letter-spacing:.04em;color:#fff}
.web-ideal .e{margin:0;font-size:12px;color:var(--gray-500)}
.web-incs{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.web-incs li{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.5;color:var(--gray-200)}
.web-incs svg{flex:none}
.web-cta-btn{margin-top:auto;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--white-1);border:1px solid rgba(98,142,203,.40);padding:13px 20px;font-size:13px;cursor:pointer}
.web-cta-btn:hover{border-color:var(--electric);background:rgba(98,142,203,.12);gap:13px}
.webs-nav{display:none;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.webs-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border-mid);border-radius:50%;background:rgba(255,255,255,.04);cursor:pointer;transition:border-color .2s,background .2s}
.webs-nav-btn:hover{border-color:var(--blue-accent);background:rgba(98,142,203,.12)}
.webs-dots{display:flex;gap:9px}
.webs-dot{width:9px;height:9px;border-radius:99px;border:none;cursor:pointer;padding:0;transition:width .3s,background .3s;background:rgba(255,255,255,.28)}
.webs-dot.is-active{width:26px;background:var(--blue-accent)}

@media(max-width:820px){
  .webs-track{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .webs-track::-webkit-scrollbar{display:none}
  .webs-track>.web-card-wrap{min-width:100%;scroll-snap-align:center}
  .webs-nav{display:flex}
}

/* ==========================================================================
   SEO
   ========================================================================== */
#seo{background:var(--bg-deep);scroll-margin-top:80px}
.seo-grid{margin-top:54px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.seo-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,var(--card-grad-top),var(--card-grad-bottom));border:1px solid var(--border-slate);border-radius:26px;padding:36px 32px;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.seo-card:hover{transform:translateY(-7px);border-color:rgba(98,142,203,.65);box-shadow:0 30px 70px rgba(98,142,203,.28)}
.seo-card.teal:hover{border-color:rgba(121,180,196,.55);box-shadow:0 30px 70px rgba(121,180,196,.18)}
.seo-card-num{position:absolute;top:-26px;right:-6px;font-family:Kanit,sans-serif;font-weight:900;font-size:130px;line-height:1;color:rgba(177,201,239,.07);pointer-events:none}
.seo-card-glow{position:absolute;top:0;left:0;width:60%;height:45%;background:radial-gradient(ellipse at 15% 0%,rgba(98,142,203,.14),transparent 70%);pointer-events:none}
.seo-card.teal .seo-card-glow{background:radial-gradient(ellipse at 15% 0%,rgba(121,180,196,.1),transparent 70%)}
.seo-card .kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--blue-light)}
.seo-card.teal .kicker{color:var(--teal)}
.seo-card .ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid rgba(98,142,203,.45);border-radius:15px;background:rgba(98,142,203,.12);box-shadow:0 0 22px rgba(98,142,203,.2)}
.seo-card.teal .ico{border-color:rgba(121,180,196,.45);background:rgba(121,180,196,.12);box-shadow:0 0 22px rgba(121,180,196,.18)}
.seo-card h3{margin:0;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:24px;letter-spacing:.01em;color:#fff}
.seo-card p.desc{margin:0;font-size:14.5px;line-height:1.6;color:var(--gray-400)}
.seo-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.seo-card ul li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--gray-200)}
.seo-card ul svg{flex:none}
.seo-panel{position:relative;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.seo-panel-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(98,142,203,.08),transparent 70%);border-radius:14px;pointer-events:none}
.seo-search{position:relative;display:flex;align-items:center;gap:10px}
.seo-search .chip{flex:1;display:inline-flex;align-items:center;gap:8px;background:rgba(20,42,74,.6);border:1px solid var(--border-slate);border-radius:99px;padding:7px 13px;font-size:11.5px;color:var(--gray-200)}
.seo-search .win{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--gray-500)}
.seo-kw{position:relative}
.seo-kw-row{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.seo-kw-row .term{font-size:11.5px;font-weight:600;color:#fff}
.seo-kw-row .term.dim{font-weight:500;color:var(--gray-200)}
.seo-kw-row .stat{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700}
.seo-kw-row .rank{color:var(--blue-light)}
.seo-kw-row .rank.dim{color:var(--gray-400)}
.seo-kw-row .delta{display:inline-flex;align-items:center;gap:2px;color:var(--green)}
.seo-bar-track{height:7px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.seo-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#628ECB,#628ECB);box-shadow:0 0 10px rgba(98,142,203,.55)}
.seo-bar-fill.dim{background:rgba(77,148,255,.45);box-shadow:none}
.seo-bar-fill.dim2{background:rgba(77,148,255,.3)}
.seo-illustrative{position:relative;margin:2px 0 0;font-size:10.5px;color:var(--gray-500);letter-spacing:.04em}
.seo-map{position:relative;height:118px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background-color:#2C4570;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px}
.seo-map .road-v{position:absolute;top:0;bottom:0;left:38%;width:13px;background:rgba(121,180,196,.12);transform:skewX(-18deg)}
.seo-map .road-h{position:absolute;left:0;right:0;top:56%;height:10px;background:rgba(121,180,196,.1)}
.seo-map .pulse{position:absolute;left:50%;top:44%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:radial-gradient(circle,rgba(121,180,196,.5),transparent 70%);animation:pulseDot 2.2s ease-in-out infinite}
.seo-map .pin{position:absolute;left:50%;top:44%;transform:translate(-50%,-86%);filter:drop-shadow(0 4px 10px rgba(121,180,196,.8))}
.seo-map .rating{position:absolute;right:10px;bottom:9px;display:flex;align-items:center;gap:5px;background:rgba(20,42,74,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:11px;font-weight:700;border-radius:8px;padding:4px 9px}
.seo-map .sample{position:absolute;left:10px;bottom:9px;background:rgba(20,42,74,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);color:var(--gray-500);font-size:10px;font-weight:600;border-radius:8px;padding:4px 9px;letter-spacing:.04em}
.seo-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(98,142,203,.5);background:rgba(98,142,203,.14);border-radius:99px;padding:8px 16px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue-light)}
.seo-badge.teal{border-color:rgba(121,180,196,.5);background:rgba(121,180,196,.12);color:var(--teal)}
.seo-mini-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);color:#fff;border:1px solid var(--border-mid);border-radius:10px;padding:13px 24px;font-size:13px;font-weight:700;letter-spacing:.07em;transition:border-color .2s,background .2s,gap .25s}
.seo-mini-cta:hover{border-color:var(--blue-accent);background:rgba(98,142,203,.12);color:#fff;gap:14px}
.seo-mini-cta.teal:hover{border-color:var(--teal);background:rgba(121,180,196,.1)}

/* ==========================================================================
   AUTOMATIZACIÓN
   ========================================================================== */
#automatizacion{position:relative;background:var(--bg-auto);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden;scroll-margin-top:80px}
.auto-parallax{position:absolute;top:-160px;right:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(98,142,203,.14),transparent 65%);pointer-events:none}
.flow-panel{position:relative;overflow:hidden;margin-top:52px;background:linear-gradient(180deg,#395886,var(--card-grad-bottom));border:1px solid var(--border-soft);border-radius:22px;padding:26px 22px}
.flow-title{margin:0 0 18px;font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--blue-light);text-align:center}
.flow-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 0}
.flow-step{display:flex;align-items:center;min-width:0}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 6px;min-width:118px}
.flow-node .ico{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border:1px solid rgba(98,142,203,.45);border-radius:15px;background:rgba(98,142,203,.12);box-shadow:0 0 20px rgba(98,142,203,.18)}
.flow-node p.t{margin:0;font-size:12.5px;font-weight:700;color:#fff;text-align:center;line-height:1.3}
.flow-node p.s{margin:0;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--green)}
.flow-arrow{flex:none;margin:0 2px 34px}
.flow-arrow path:first-child{animation:dashFlow 1s linear infinite}
.auto-grid{margin-top:22px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.auto-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,rgba(57,88,134,.85),rgba(30,51,85,.95));border:1px solid var(--border-slate);border-radius:24px;padding:30px 28px;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.auto-card:hover{transform:translateY(-6px);border-color:rgba(98,142,203,.5);box-shadow:0 22px 54px rgba(20,42,74,.5)}
.auto-card-num{position:absolute;top:-24px;right:-4px;font-family:Kanit,sans-serif;font-weight:900;font-size:112px;line-height:1;color:rgba(177,201,239,.06);pointer-events:none}
.auto-card .ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(98,142,203,.45);border-radius:14px;background:rgba(98,142,203,.12);box-shadow:0 0 20px rgba(98,142,203,.18)}
.auto-card h3{margin:0;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:19px;letter-spacing:.02em;color:#fff}
.auto-card p.desc{margin:0;font-size:14px;line-height:1.65;color:var(--text-light)}
.auto-demo{background:rgba(44,69,112,.55);border:1px solid rgba(138,174,224,.14);border-radius:12px;padding:13px;display:flex;flex-direction:column;gap:8px;transition:transform .3s}
.auto-card:hover .auto-demo{transform:translateY(-2px)}
.auto-field{display:flex;align-items:center;gap:8px;background:rgba(20,42,74,.55);border:1px solid var(--border-slate);border-radius:8px;padding:6px 11px;font-size:11px;color:var(--gray-400)}
.auto-field.active{border-color:rgba(98,142,203,.4);justify-content:space-between}
.auto-field .k{color:var(--gray-500);font-weight:600}
.auto-field .v{color:var(--blue-light);font-weight:700}
.auto-send-btn{align-self:flex-start;background:rgba(98,142,203,.85);border-radius:7px;padding:6px 15px;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#fff;box-shadow:0 0 14px rgba(98,142,203,.4)}
.auto-status-list{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.auto-status{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--gray-200)}
.auto-status.done{color:var(--green);font-weight:700}
.auto-bubble{background:rgba(98,142,203,.18);border:1px solid rgba(98,142,203,.35);border-radius:11px 11px 11px 3px;padding:7px 13px;font-size:11.5px;font-weight:600;color:var(--gray-200);align-self:flex-start}
.auto-bubble.reply{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;background:rgba(127,191,160,.12);border:1px solid rgba(127,191,160,.35);border-radius:11px 11px 3px 11px}
.auto-tags{flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:8px!important}
.auto-tag{border:1px solid rgba(98,142,203,.5);background:rgba(98,142,203,.14);border-radius:8px;padding:6px 12px;font-size:11.5px;font-weight:700;color:var(--blue-light)}
.auto-tag.ok{display:inline-flex;align-items:center;gap:6px;border-color:rgba(127,191,160,.4);background:rgba(127,191,160,.1);color:var(--green)}
.auto-footbadge{margin-top:auto}
.auto-footbadge span{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(127,191,160,.45);background:rgba(127,191,160,.1);border-radius:99px;padding:7px 14px;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--green)}
.auto-close{margin-top:52px;text-align:center}
.auto-close p{margin:0 0 20px;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(19px,2.2vw,26px);letter-spacing:.02em;line-height:1.25}
.auto-close .l1{background:linear-gradient(180deg,#FFFFFF 30%,#B1C9EF 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.auto-close .l2{background:linear-gradient(90deg,#8AAEE0,#628ECB);-webkit-background-clip:text;background-clip:text;color:transparent}
.auto-close-cta{display:inline-flex;align-items:center;gap:10px;background:rgba(20,42,74,.55);color:#fff;border:1px solid rgba(98,142,203,.6);border-radius:99px;padding:15px 32px;font-size:13.5px;font-weight:700;letter-spacing:.08em;box-shadow:0 0 26px rgba(98,142,203,.22);transition:border-color .25s,transform .25s,box-shadow .25s,gap .25s}
.auto-close-cta:hover{border-color:var(--blue-accent);color:#fff;transform:translateY(-2px);box-shadow:0 0 40px rgba(98,142,203,.4);gap:15px}

@media(max-width:820px){
  .auto-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   PROYECTOS
   ========================================================================== */
#proyectos{background:var(--bg-deep);scroll-margin-top:80px;position:relative}
.proyectos-intro{max-width:780px;margin-bottom:72px}
.proyectos-hint{margin:0;display:inline-flex;align-items:center;gap:8px;color:var(--gray-500);font-size:13px;font-weight:600}
.stack-card{position:sticky;display:flex;align-items:stretch;box-sizing:border-box;overflow:hidden;border-radius:26px;background:linear-gradient(180deg,var(--card-grad-top),var(--card-grad-bottom));border:1px solid var(--border-slate);box-shadow:0 -6px 44px rgba(0,0,0,.55),0 24px 70px rgba(0,0,0,.45);transform-origin:center top;will-change:transform,opacity,filter}
.stack-card.premium{box-shadow:0 -6px 44px rgba(0,0,0,.55),0 30px 80px rgba(0,0,0,.5)}
/* La tarjeta central invierte la superficie: blanco grisaceo sobre oscuro.
   Mismo criterio que la tarjeta destacada de Servicios, a la inversa. */
.stack-card.premium{background:linear-gradient(180deg,#FFFFFF,var(--white-2));border-color:rgba(98,142,203,.45)}
.stack-card.premium .stack-info h3{color:var(--ink)}
.stack-card.premium .stack-info .msg{color:var(--text-dark)}
.stack-card.premium .stack-info .sector{color:var(--electric)}
.stack-card.premium .stack-meta{border-color:rgba(57,88,134,.20)}
.stack-card.premium .stack-meta .k{color:#6B7C93}
.stack-card.premium .stack-meta .v{color:var(--ink)}
.stack-card.premium .stack-num{color:rgba(57,88,134,.05)}
.stack-card.premium .stack-media-fade{background:linear-gradient(90deg,rgba(255,255,255,0) 60%,rgba(255,255,255,.6))}
.stack-card.premium .stack-cta{background:#FFFFFF;color:var(--electric);border-color:rgba(98,142,203,.45)}
.stack-card.premium .stack-cta:hover{background:rgba(98,142,203,.07);color:var(--electric);border-color:var(--electric)}

/* Apilado dominó: cada tarjeta se detiene un poco más abajo que la anterior,
   de modo que se vea una franja del borde superior de la que queda debajo.
   Al ir por nth-child, añadir un proyecto nuevo no requiere tocar el HTML:
   entra en la secuencia solo. Paso de 34px (antes eran 15px y apenas se
   apreciaba el escalonado). */
.stack-card{top:110px}
.stack-card+.stack-card{margin-top:13vh}
.stack-card:nth-child(2){top:144px}
.stack-card:nth-child(3){top:178px}
.stack-card:nth-child(4){top:212px}
.stack-card:nth-child(5){top:246px}
.stack-card:nth-child(6){top:280px}
.stack-card:nth-child(7){top:314px}
.stack-card:nth-child(8){top:348px}
.stack-glow{position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(98,142,203,.85),transparent);z-index:2}
.stack-media{position:relative;flex:0 0 65%;min-width:0;overflow:hidden;background:#2C4570;aspect-ratio:16/9}
.stack-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.stack-card:hover .stack-media video{transform:scale(1.03)}
.stack-media-fade{position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(30,51,85,.55));pointer-events:none}
.stack-badge{position:absolute;left:14px;top:14px;background:rgba(20,42,74,.7);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);color:var(--gray-100);font-size:10.5px;font-weight:700;letter-spacing:.05em;border-radius:99px;padding:4px 11px;text-transform:uppercase;z-index:2}
.stack-info{position:relative;flex:1;display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,30px);z-index:1}
.stack-num{position:absolute;top:-24px;right:2px;font-family:Kanit,sans-serif;font-weight:900;font-size:118px;line-height:1;color:rgba(177,201,239,.07);pointer-events:none}
.stack-info .kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em}
.stack-info h3{margin:0;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(20px,2vw,26px);letter-spacing:.01em;color:#fff;line-height:1.05}
.stack-info .sector{margin:0;font-size:13px;font-weight:600;color:var(--blue-accent)}
.stack-info .msg{margin:0;font-size:14.5px;color:var(--text-light);line-height:1.65;max-width:var(--measure)}
.stack-meta{display:flex;flex-direction:column;gap:10px;padding:12px 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.stack-meta .k{margin:0 0 3px;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--gray-500)}
.stack-meta .v{margin:0;font-size:13.5px;font-weight:500;color:#fff}
.stack-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--white-1);border:1px solid rgba(98,142,203,.40);padding:11px 22px;font-size:12.5px}
.stack-cta:hover{border-color:var(--electric);background:rgba(98,142,203,.12);color:var(--white-1);gap:14px}

@media(max-width:820px){
  .stack-card{flex-direction:column;min-height:0!important}
  .stack-media{flex:none!important;height:auto;aspect-ratio:16/9}
  .stack-info{gap:11px!important}
  .stack-info a{align-self:stretch!important;justify-content:center}
}

/* ==========================================================================
   PROCESO
   ========================================================================== */
#proceso{position:relative;background:var(--bg-proceso);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);overflow:hidden;scroll-margin-top:80px}
.proceso-glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 80% at 50% 30%,rgba(98,142,203,.05),transparent 70%);pointer-events:none}
.proceso-pad{position:relative;max-width:var(--container);margin:0 auto;padding:76px 24px 72px}
.proceso-track{margin-top:44px;position:relative}
.proceso-line-bg{position:absolute;top:23px;left:0;right:0;height:2px;background:rgba(255,255,255,.06)}
.proceso-line-fill{position:absolute;top:23px;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#628ECB,#628ECB);box-shadow:0 0 12px rgba(98,142,203,.6);transition:transform .1s linear}
.proceso-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.proceso-item{position:relative;display:flex;flex-direction:column;gap:8px}
.proceso-item .ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(98,142,203,.55);border-radius:14px;background:#395886;box-shadow:0 0 18px rgba(98,142,203,.28);transition:transform .25s,box-shadow .25s}
.proceso-item .ico:hover{transform:translateY(-2px);box-shadow:0 0 26px rgba(98,142,203,.45)}
.proceso-item h3{margin:6px 0 0;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:16px;letter-spacing:.04em;color:#fff}
.proceso-item p{margin:0;font-size:14px;color:var(--gray-400);line-height:1.5}
.garantias{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.025);border:1px solid var(--border-soft);border-radius:18px;overflow:hidden}
.garantia{display:flex;align-items:center;gap:12px;padding:20px 22px}
.garantia.bordered{border-left:1px solid var(--border-soft)}
.garantia svg{flex:none}
.garantia p.t{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;color:#fff}
.garantia p.s{margin:2px 0 0;font-size:12.5px;color:var(--gray-400)}

@media(max-width:900px){
  .proceso-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .garantias{grid-template-columns:repeat(2,1fr)}
  .garantias .garantia:nth-child(3){border-left:none}
  .garantias .garantia:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
}
@media(max-width:640px){
  .proceso-list{grid-template-columns:1fr;gap:14px}
}
@media(max-width:560px){
  .garantias{grid-template-columns:1fr}
  .garantias .garantia{border-left:none!important;border-top:1px solid rgba(255,255,255,.08)}
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
/* Iluminación radial azul suave detrás del contenedor del formulario */
#contacto{position:relative;background:radial-gradient(ellipse 90% 60% at 50% 0%,#3E6199 0%,var(--night) 38%,var(--blue-black) 68%,var(--black) 100%);overflow:hidden;scroll-margin-top:80px}
.contacto-glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:760px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(98,142,203,.14),transparent 70%);pointer-events:none}
.contacto-pad{position:relative;max-width:var(--container-contact);margin:0 auto;padding:100px 24px 110px}
.contacto-head{text-align:center;max-width:760px;margin:0 auto 46px}
.contacto-head .h-sub{margin:0 0 14px;max-width:none}
.contacto-head .badge{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--blue-light)}
.contacto-box{background:linear-gradient(180deg,#2C4570,var(--card-grad-bottom));border:1px solid var(--border-slate);border-radius:26px;padding:clamp(26px,4vw,44px);box-shadow:0 0 50px rgba(98,142,203,.1),0 30px 80px rgba(0,0,0,.45)}
.garantias-ct{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--border-soft)}
.garantias-ct span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--gray-100)}

.form-step-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.form-step-label{margin:0;font-size:13px;font-weight:700;color:var(--gray-400);letter-spacing:.1em;text-transform:uppercase}
.form-step-pct{margin:0;font-size:13px;font-weight:700;color:var(--blue-accent)}
.form-progress-track{height:6px;background:rgba(255,255,255,.07);border-radius:99px;margin-bottom:28px;overflow:hidden}
.form-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#628ECB,#628ECB);border-radius:99px;transition:width .4s ease;box-shadow:0 0 12px rgba(98,142,203,.6)}
.form-step-title{margin:0 0 6px;font-size:21px;font-weight:700;letter-spacing:-.01em;color:#fff}
.form-step-hint{margin:0 0 18px;font-size:13px;color:var(--gray-500)}
.form-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.form-opt{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:var(--gray-200);border-radius:10px;padding:12px 14px;font-size:14px;font-weight:500;cursor:pointer;text-align:left;transition:all .18s;min-height:44px}
.form-opt:hover{border-color:var(--blue-accent)}
.form-opt.is-on{border-color:#628ECB;background:rgba(98,142,203,.16);color:#fff;font-weight:600}
.form-opt-box{flex:none;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:6px;border:1.5px solid rgba(255,255,255,.3);background:transparent;transition:all .18s}
.form-opt.is-on .form-opt-box{border:1.5px solid #628ECB;background:#628ECB;box-shadow:0 0 10px rgba(98,142,203,.5)}
.form-input,.form-textarea{width:100%;box-sizing:border-box;padding:13px 15px;border:1px solid rgba(177,201,239,.22);border-radius:12px;font-size:15px;background:#2C4570;color:var(--white-1)}
.form-input::placeholder,.form-textarea::placeholder{color:#6B7C93}
.form-input:focus,.form-textarea:focus{border-color:var(--blue-accent);box-shadow:0 0 0 3px rgba(98,142,203,.2);outline:none}
.form-otro{margin-top:12px}
.form-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:14px}
.form-fields label{display:block;font-size:13px;font-weight:600;color:var(--gray-200);margin-bottom:6px}
.form-fields .full{grid-column:1/-1}
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--gray-400);line-height:1.5;cursor:pointer}
.form-consent input{margin-top:2px;width:16px;height:16px;accent-color:#628ECB}
.form-summary{display:flex;flex-direction:column;border:1px solid var(--border-soft);border-radius:12px;overflow:hidden;margin-top:14px}
.form-summary-row{display:flex;gap:16px;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.form-summary-row .k{color:var(--gray-400);font-weight:500;flex:none}
.form-summary-row .v{color:#fff;font-weight:600;text-align:right}
.form-summary-note{margin:14px 0 0;font-size:13px;color:var(--gray-400);line-height:1.5}
.form-err{margin:14px 0 0;font-size:13.5px;font-weight:600;color:var(--error);display:none}
.form-err.show{display:block}
@keyframes formErrShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.form-err.shake{animation:formErrShake .4s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.form-err.shake{animation:none}}
.form-actions{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:12px;margin-top:28px;align-items:center}
.btn-back,.btn-continue,.btn-submit{display:inline-flex;min-height:50px;box-sizing:border-box}
.btn-back{align-items:center;justify-content:center;background:transparent;border:1px solid rgba(98,142,203,.40);color:var(--white-1);border-radius:99px;padding:14px 26px;font-size:13.5px;font-weight:600;letter-spacing:.05em;cursor:pointer;transition:border-color .2s,color .2s,transform .2s,background .2s}
.btn-back:hover{border-color:var(--blue-accent);color:#fff;background:rgba(255,255,255,.04);transform:translateY(-1px)}
.btn-continue{align-items:center;justify-content:center;gap:9px;background:#628ECB;border:none;color:#fff;border-radius:99px;padding:15px 34px;font-size:14px;font-weight:700;letter-spacing:.07em;cursor:pointer;box-shadow:var(--shadow-blue);transition:background .2s,gap .25s,transform .2s,opacity .3s,box-shadow .3s}
.btn-continue:hover:not(:disabled){background:#7BA3D8;gap:14px;transform:translateY(-2px);box-shadow:0 10px 30px rgba(98,142,203,.42)}
.btn-continue:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}
.btn-submit{align-items:center;justify-content:center;background:#628ECB;border:none;color:#fff;border-radius:99px;padding:15px 34px;font-size:14px;font-weight:700;letter-spacing:.07em;cursor:pointer;box-shadow:var(--shadow-blue);transition:background .2s,transform .2s,box-shadow .25s}
.btn-submit:hover:not(:disabled){background:#7BA3D8;transform:translateY(-2px);box-shadow:0 10px 30px rgba(98,142,203,.42)}
.btn-submit:disabled{cursor:wait;opacity:.75}
@media(max-width:539px){.form-actions{column-gap:12px}.btn-back,.btn-continue,.btn-submit{flex:1 1 auto}}
.form-submit-note{margin:9px 0 0;font-size:12.5px;color:var(--gray-500)}
.form-sent{text-align:center;padding:30px 10px}
.form-sent .check{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(98,142,203,.15);box-shadow:0 0 30px rgba(98,142,203,.3);margin-bottom:18px}
.form-sent h3{margin:0 0 10px;font-size:22px;font-weight:700;color:#fff}
.form-sent p{margin:0 0 22px;font-size:15px;color:var(--gray-400);line-height:1.6;max-width:380px;margin-left:auto;margin-right:auto}
.btn-again{background:rgba(255,255,255,.04);border:1px solid var(--border-mid);color:var(--gray-100);border-radius:10px;padding:12px 22px;font-size:14px;font-weight:600;cursor:pointer}
.btn-again:hover{border-color:var(--blue-accent);color:var(--blue-accent)}

.or-divider{display:flex;align-items:center;gap:16px;margin:34px 0 22px}
.or-divider span.line{flex:1;height:1px;background:rgba(255,255,255,.09)}
.or-divider span.txt{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--gray-500)}
.alt-contact{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.alt-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:transparent;border:1px solid rgba(177,201,239,.20);border-radius:99px;padding:15px 20px;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--text-light)}
.alt-btn:hover{border-color:rgba(98,142,203,.55);color:var(--white-1)}
.alt-btn.wa{border-color:rgba(177,201,239,.20)}
.alt-btn.wa:hover{border-color:rgba(127,191,160,.5)}
.contact-fine{margin:16px 0 0;text-align:center;font-size:13px;color:var(--gray-500);line-height:1.5}
.contact-location{margin:26px 0 0;text-align:center;font-size:12.5px;color:var(--gray-500);letter-spacing:.04em}

@media(max-width:640px){
  .alt-contact{grid-template-columns:1fr}
}

/* ==========================================================================
   FAQ
   ========================================================================== */
#faq{background:var(--bg-deep);scroll-margin-top:80px}
.faq-grid{max-width:var(--container);margin:0 auto;padding:96px 24px;display:grid;grid-template-columns:minmax(280px,.8fr) 1.4fr;gap:56px;align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side .h-sub{margin:0 0 26px;max-width:none}
.faq-side .k2{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gray-500)}
.faq-side-links{display:flex;flex-wrap:wrap;gap:10px}
.faq-side-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--border-slate);border-radius:10px;padding:11px 18px;font-size:12.5px;font-weight:700;letter-spacing:.05em;color:#fff;transition:transform .2s,border-color .2s}
.faq-side-btn:hover{transform:translateY(-2px);border-color:var(--blue-accent);color:#fff}
.faq-side-btn.wa{border-color:rgba(127,191,160,.3)}
.faq-side-btn.wa:hover{border-color:rgba(127,191,160,.7)}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-row{background:rgba(255,255,255,.025);border:1px solid var(--border-slate);border-radius:14px;overflow:hidden;transition:border-color .3s}
.faq-row.is-open{border-color:rgba(98,142,203,.55)}
.faq-row h3{margin:0}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;background:none;border:none;text-align:left;padding:16px 18px;font-size:14.5px;font-weight:600;color:#fff;cursor:pointer;transition:color .2s}
.faq-q:hover{color:var(--blue-accent)}
.faq-q svg{flex:none;transition:transform .3s ease}
.faq-row.is-open .faq-q svg{transform:rotate(180deg)}
.faq-panel{overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease}
.faq-row.is-open .faq-panel{max-height:420px;opacity:1}
.faq-panel p{margin:0;padding:0 18px 16px;font-size:13.5px;color:var(--gray-400);line-height:1.65;max-width:640px}

@media(max-width:900px){
  .faq-grid{grid-template-columns:1fr;gap:36px}
  .faq-side{position:static}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{position:relative;background:var(--bg-footer);color:var(--gray-400);border-top:1px solid rgba(177,201,239,.15);overflow:hidden}
.footer-glow{position:absolute;top:0;left:15%;width:340px;height:150px;background:radial-gradient(ellipse,rgba(98,142,203,.09),transparent 70%);pointer-events:none}
.footer-grid{position:relative;max-width:var(--container);margin:0 auto;padding:56px 24px 0;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.footer-brand{min-width:220px}
.footer-brand img{height:42px;width:auto;margin:0 0 14px}
.footer-brand p{margin:0 0 16px;font-size:13.5px;line-height:1.65;max-width:280px}
.footer-social{display:flex;gap:9px;margin-bottom:14px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(177,201,239,.18);border-radius:10px;color:var(--text-light);transition:border-color .2s,color .2s}
.footer-social a:hover{border-color:var(--blue-accent);color:var(--blue-accent)}
.footer-social a.wa:hover{border-color:rgba(127,191,160,.7);color:var(--green)}
.footer-loc{margin:0;font-size:12.5px;color:var(--gray-500);line-height:1.6}
.footer-col p.title{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--blue-soft)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.footer-col ul a{color:var(--gray-400)}
.footer-col ul a:hover{color:var(--blue-accent)}
.footer-bottom{position:relative;max-width:var(--container);margin:40px auto 0;padding:22px 24px;border-top:1px solid rgba(177,201,239,.12);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:12px;letter-spacing:.06em;color:var(--gray-500)}
.footer-bottom p{margin:0}

@media(max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   LEGAL PAGE
   ========================================================================== */
.legal-body{background:var(--bg-deep);color:var(--gray-200)}
.legal-header{position:sticky;top:0;z-index:50;background:rgba(5,7,11,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-soft)}
.legal-header-inner{max-width:var(--container-legal);margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.legal-header-inner img{height:32px;width:auto;display:block}
.legal-back{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-slate);border-radius:99px;padding:9px 18px;font-size:13px;font-weight:600;color:var(--gray-100);transition:border-color .2s,color .2s}
.legal-back:hover{border-color:var(--blue-accent);color:#fff}
.legal-main{max-width:var(--container-legal);margin:0 auto;padding:60px 24px 90px}
.legal-kicker{margin:0 0 14px;color:var(--blue-accent);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.legal-h1{margin:0 0 10px;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(30px,5vw,46px);letter-spacing:-.02em;line-height:1;color:#fff}
.legal-updated{margin:0 0 8px;font-size:14px;color:var(--gray-400)}
.legal-index{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 50px}
.legal-index a{border:1px solid var(--border-slate);border-radius:99px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--gray-200)}
.legal-index a:hover{border-color:var(--blue-accent);color:var(--blue-accent)}
.legal-section{scroll-margin-top:90px;margin-bottom:56px}
.legal-section h2{margin:0 0 18px;font-family:Kanit,Geist,sans-serif;font-weight:900;text-transform:uppercase;font-size:24px;color:#fff;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:12px}
.legal-section p{margin:0 0 14px;font-size:14.5px;line-height:1.75}
.legal-section ul{margin:0 0 14px;padding-left:20px;font-size:14.5px;line-height:1.9}
.legal-section strong{color:#fff}
.legal-footer{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.legal-footer p{margin:0;font-size:13px;color:var(--gray-500)}

/* ==========================================================================
   RITMO DE FONDOS  —  claro / oscuro alternado
   Hero oscuro · Sectores + Servicios claro · Tipos de web azul noche ·
   SEO claro · Automatización oscuro · Proyectos oscuro · Proceso claro ·
   Contacto oscuro · FAQ claro · Footer el más oscuro.

   Las transiciones entre bloques se hacen con un degradado corto en el
   propio background de la sección (no con overlays), así no hay que tocar
   z-index ni el orden del contenido y el corte nunca es duro.
   ========================================================================== */
.sec-light,.sec-dark{position:relative}

.sec-dark{
  background-repeat:no-repeat;
  background-image:linear-gradient(180deg,rgba(240,243,250,.05),rgba(240,243,250,0) 140px)!important;
}
/* El hero y contacto ya traen su propio fondo compuesto */
#inicio,#contacto{background-image:none!important}

/* ==========================================================================
   SECCIONES CLARAS
   La sección clara redefine los tokens de color; todo lo que ya usaba
   var(--gray-*), var(--border-*)… hereda el valor claro solo. Debajo quedan
   únicamente los sitios donde el color estaba escrito a mano.
   ========================================================================== */
.sec-light{
  /* Grises invertidos */
  --gray-100:var(--text-dark);
  --gray-200:var(--text-dark);
  --gray-300:var(--text-dark);
  --gray-400:var(--text-dark);
  --gray-500:#6B7C93;
  --gray-600:#6B7C93;
  /* Acentos legibles sobre claro */
  --blue-light:var(--electric);
  --green:#5FA37E;
  --teal:#4F8896;
  --purple:var(--electric);
  --border-soft:rgba(57,88,134,.14);
  --border-mid:rgba(57,88,134,.20);
  --border-slate:rgba(57,88,134,.16);
  color:var(--text-dark);
  /* Blanco frío, nunca blanco puro, con entrada suave desde el bloque oscuro */
  background-color:var(--white-1)!important;
  background-repeat:no-repeat;
  background-image:linear-gradient(180deg,rgba(30,51,85,.10),rgba(30,51,85,0) 150px)!important;
}

/* Iconos SVG con el color escrito en el atributo stroke */
.sec-light svg[stroke="#628ECB"]{stroke:var(--electric)}
.sec-light svg[stroke="#7FBFA0"]{stroke:#5FA37E}
.sec-light svg[stroke="#79B4C4"]{stroke:#4F8896}
.sec-light svg[stroke="#8AAEE0"]{stroke:#6B7C93}

/* ---------- Cabeceras: título en azul negro, acento en azul eléctrico ---------- */
.sec-light .h-title span,
.sec-light .h-title span+span{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.sec-light .h-title em,.sec-light .h-blue{background:none;-webkit-text-fill-color:currentColor;color:var(--electric)}
.sec-light .h-label{color:var(--electric)}
.sec-light .h-sub{color:var(--text-dark)}
.sec-light .route-item{color:var(--ink)}
.sec-light .route-dot{box-shadow:none}
.sec-light .route-sep{background:linear-gradient(90deg,rgba(98,142,203,.55),rgba(98,142,203,.10))}

/* ---------- Tarjeta clara base: blanco, borde gris azulado, sombra amplia ---------- */
.sec-light .svc-card,
.sec-light .seo-card,
.sec-light .faq-row,
.sec-light .hosting-opt,
.sec-light .proceso-item .ico,
.sec-light .garantias{
  background:#FFFFFF;border-color:rgba(57,88,134,.16);box-shadow:var(--shadow-light);
}
.sec-light .svc-card:hover,
.sec-light .seo-card:hover{border-color:rgba(98,142,203,.42);box-shadow:var(--shadow-light-hover)}
.sec-light .svc-num,
.sec-light .seo-card-num{color:rgba(57,88,134,.045)}
.sec-light .svc-card h3,
.sec-light .seo-card h3,
.sec-light .hosting-intro h3,
.sec-light .hosting-opt .t,
.sec-light .seo-kw-row .term,
.sec-light .proceso-item h3,
.sec-light .garantia p.t,
.sec-light .faq-q{color:var(--ink)}
/* Iconos: contenedor azul muy suave con borde fino, sin glow */
.sec-light .svc-icon,
.sec-light .seo-card .ico{
  background:rgba(98,142,203,.07);border-color:rgba(98,142,203,.22);box-shadow:none;
}
.sec-light .svc-icon.green{background:rgba(95,163,126,.08);border-color:rgba(95,163,126,.25)}
.sec-light .seo-card-glow,.sec-light .seo-panel-glow,.sec-light .sectores-glow{display:none}

/* Botón secundario sobre claro: blanco con borde azul y texto azul */
.sec-light .pill-cta,
.sec-light .seo-mini-cta,
.sec-light .faq-side-btn{
  background:#FFFFFF;color:var(--electric);border:1px solid rgba(98,142,203,.42);box-shadow:var(--shadow-light);
}
.sec-light .pill-cta:hover,
.sec-light .seo-mini-cta:hover,
.sec-light .faq-side-btn:hover{background:rgba(98,142,203,.06);color:var(--electric);border-color:var(--electric)}
.sec-light .faq-side-btn.wa,.sec-light .faq-side-btn.wa:hover{border-color:rgba(95,163,126,.40);color:#5FA37E}

/* ---------- Sectores (marquesina de entrada) ---------- */
.sec-light .sector-pill{background:#FFFFFF;border-color:rgba(57,88,134,.14);color:var(--text-dark)}
.sec-light .sector-pill:hover{border-color:rgba(98,142,203,.45)}
.sec-light .fade-l{background:linear-gradient(90deg,var(--white-1),rgba(240,243,250,0))}
.sec-light .fade-r{background:linear-gradient(270deg,var(--white-1),rgba(240,243,250,0))}
.sec-light .sectores-label{color:var(--electric)}

/* ---------- SERVICIOS: tres tarjetas con contraste alternado ----------
   Diseño web clara · SEO oscura destacada en el centro · Automatización
   clara con acentos verdes. La tarjeta central invierte la superficie. */
.sec-light .svc-card.blue{
  background:linear-gradient(180deg,var(--night),var(--blue-black));
  border-color:rgba(98,142,203,.55);
  box-shadow:0 1px 2px rgba(57,88,134,.06),0 24px 60px rgba(44,69,112,.28);
}
.sec-light .svc-card.blue:hover{border-color:rgba(98,142,203,.8);box-shadow:0 1px 2px rgba(57,88,134,.06),0 32px 74px rgba(44,69,112,.36)}
.sec-light .svc-card.blue h3{color:var(--white-1)}
.sec-light .svc-card.blue p.desc{color:var(--text-light)}
.sec-light .svc-card.blue .svc-list li{color:var(--gray-200);color:#D5DEEF}
.sec-light .svc-card.blue .svc-kicker{color:var(--blue-soft)}
.sec-light .svc-card.blue .svc-cta{color:var(--blue-soft)}
.sec-light .svc-card.blue .svc-num{color:rgba(240,243,250,.06)}
.sec-light .svc-card.blue .svc-icon{background:rgba(98,142,203,.16);border-color:rgba(98,142,203,.45)}
.sec-light .svc-card.blue svg[stroke="#628ECB"]{stroke:var(--blue-soft)}

/* Banda de hosting: azul muy claro */
.sec-light .hosting-band{background:linear-gradient(180deg,#D5DEEF,var(--white-1));border-color:rgba(57,88,134,.14);box-shadow:none}
.sec-light .hosting-opt.highlight{background:rgba(98,142,203,.06);border-color:rgba(98,142,203,.28)}

/* ---------- SEO: tarjeta blanca + tarjeta azul noche ---------- */
.sec-light .seo-panel{background:var(--white-2);border-color:rgba(57,88,134,.14)}
.sec-light .seo-search .chip{background:#FFFFFF;border-color:rgba(57,88,134,.16)}
.sec-light .seo-bar-track{background:rgba(57,88,134,.14)}
.sec-light .seo-bar-fill{box-shadow:none}
.sec-light .seo-bar-fill.dim{background:rgba(98,142,203,.45)}
.sec-light .seo-bar-fill.dim2{background:rgba(98,142,203,.26)}
/* SEO local: superficie azul noche con acentos azul verdoso */
.sec-light .seo-card.teal{
  background:linear-gradient(180deg,var(--night),var(--blue-black));
  border-color:rgba(121,180,196,.30);
  box-shadow:0 1px 2px rgba(57,88,134,.06),0 24px 60px rgba(44,69,112,.28);
}
.sec-light .seo-card.teal:hover{border-color:rgba(121,180,196,.55);box-shadow:0 1px 2px rgba(57,88,134,.06),0 32px 74px rgba(44,69,112,.36)}
.sec-light .seo-card.teal h3{color:var(--white-1)}
.sec-light .seo-card.teal p.desc{color:var(--text-light)}
.sec-light .seo-card.teal ul li{color:#D5DEEF}
.sec-light .seo-card.teal .kicker{color:var(--teal);color:#79B4C4}
.sec-light .seo-card.teal .seo-card-num{color:rgba(240,243,250,.06)}
.sec-light .seo-card.teal .ico{background:rgba(121,180,196,.14);border-color:rgba(121,180,196,.40)}
.sec-light .seo-card.teal svg[stroke="#79B4C4"]{stroke:#79B4C4}
.sec-light .seo-card.teal .seo-map{border-color:rgba(138,174,224,.16)}
.sec-light .seo-card.teal .seo-badge.teal{background:rgba(121,180,196,.14);border-color:rgba(121,180,196,.45);color:#79B4C4}
.sec-light .seo-card.teal .seo-mini-cta{background:transparent;color:var(--white-1);border-color:rgba(121,180,196,.45);box-shadow:none}
.sec-light .seo-card.teal .seo-mini-cta:hover{background:rgba(121,180,196,.12);color:var(--white-1);border-color:#79B4C4}

/* ---------- PROCESO: claro y compacto, línea azul eléctrica ---------- */
.sec-light .proceso-glow{display:none}
.sec-light .proceso-line-bg{background:rgba(57,88,134,.18)}
.sec-light .proceso-line-fill{box-shadow:none}
.sec-light .proceso-item .ico{border-radius:14px}
.sec-light .proceso-item .ico:hover{box-shadow:var(--shadow-light-hover)}
.sec-light .proceso-item p{color:var(--text-dark);line-height:1.65}
/* Banda de garantías en azul muy claro */
.sec-light .garantias{background:#D5DEEF;border-color:rgba(57,88,134,.14);box-shadow:none}
.sec-light .garantia.bordered{border-left-color:rgba(57,88,134,.16)}
.sec-light .garantia p.s{color:var(--text-dark)}

/* ---------- FAQ ---------- */
.sec-light .faq-row{background:#FFFFFF}
.sec-light .faq-row.is-open{border-color:rgba(98,142,203,.55);box-shadow:0 1px 2px rgba(57,88,134,.04),0 14px 36px rgba(98,142,203,.12)}
.sec-light .faq-q:hover{color:var(--electric)}
.sec-light .faq-panel p{color:var(--text-dark);line-height:1.72}
.sec-light .faq-side .k2{color:#6B7C93}

/* ==========================================================================
   REDISEÑO SEGÚN IMAGEN DE REFERENCIA
   Servicios y Tipos de páginas web invierten la polaridad de sus tarjetas:
   sección clara con tarjetas oscuras, y sección oscura con tarjetas claras.
   Las tres tarjetas de cada bloque comparten sistema visual; la distinción
   se lleva solo en iconos, etiquetas y CTA.
   ========================================================================== */

/* ---------- Bloque claro de entrada: marquesina + servicios ---------- */
#sectores.sec-light{
  background-color:var(--p-100)!important;
  background-image:linear-gradient(180deg,rgba(20,42,74,.12),rgba(20,42,74,0) 140px)!important;
}
#sectores .sector-pill{background:var(--p-050);border-color:var(--p-200);color:var(--ink-2)}
#sectores .fade-l{background:linear-gradient(90deg,var(--p-100),rgba(213,222,239,0))}
#sectores .fade-r{background:linear-gradient(270deg,var(--p-100),rgba(213,222,239,0))}

#servicios.sec-light{
  background-color:var(--p-100)!important;
  background-image:linear-gradient(180deg,var(--p-100) 0%,var(--p-050) 55%)!important;
}

/* ---------- SERVICIOS · tres tarjetas oscuras ---------- */
#servicios .svc-card{
  background:linear-gradient(160deg,var(--p-500) 0%,#24395C 100%);
  border:1px solid rgba(98,142,203,.35);
  box-shadow:0 1px 2px rgba(57,88,134,.10),0 20px 48px rgba(57,88,134,.22);
}
#servicios .svc-card:hover{
  transform:translateY(-6px);
  border-color:rgba(98,142,203,.65);
  /* Glow discreto: iluminación interior superior, sin cambiar el color base */
  box-shadow:0 1px 2px rgba(57,88,134,.10),0 28px 64px rgba(57,88,134,.30),
             inset 0 44px 64px -44px rgba(138,174,224,.40);
}
#servicios .svc-card h3{color:var(--p-050)}
#servicios .svc-card p.desc{color:var(--p-100)}
#servicios .svc-card .svc-list li{color:var(--p-100)}
#servicios .svc-card .svc-num{color:rgba(240,243,250,.07)}
#servicios .svc-card .svc-icon{
  background:rgba(240,243,250,.08);border-color:rgba(98,142,203,.45);box-shadow:none;
}
/* Acentos por tarjeta: solo icono, etiqueta y CTA */
#servicios .svc-card .svc-kicker,
#servicios .svc-card .svc-cta{color:var(--p-300)}
#servicios .svc-card svg[stroke]{stroke:var(--p-300)}
#servicios .svc-card .svc-list li::before{background:var(--p-300)}
/* 02 · SEO — azul más intenso */
#servicios .svc-card.blue .svc-kicker,
#servicios .svc-card.blue .svc-cta{color:var(--p-200)}
#servicios .svc-card.blue svg[stroke]{stroke:var(--p-200)}
#servicios .svc-card.blue .svc-icon{background:rgba(98,142,203,.30);border-color:rgba(98,142,203,.70)}
#servicios .svc-card.blue .svc-list li::before{background:var(--p-400)}
/* 03 · Automatización — verde azulado muy suave, solo en icono y CTA */
#servicios .svc-card.green .svc-kicker,
#servicios .svc-card.green .svc-cta{color:#9CC8CE}
#servicios .svc-card.green svg[stroke]{stroke:#9CC8CE}
#servicios .svc-card.green .svc-icon{background:rgba(121,180,196,.18);border-color:rgba(121,180,196,.45)}
#servicios .svc-card.green .svc-list li::before{background:#79B4C4}
#servicios .svc-card .svc-cta svg{transition:transform .25s var(--ease)}
#servicios .svc-card:hover .svc-cta svg{transform:translateX(4px)}

/* ---------- SERVICIOS · banda de hosting ---------- */
#servicios .hosting-band{
  background:linear-gradient(180deg,var(--p-200) 0%,var(--p-100) 100%);
  border-color:rgba(57,88,134,.18);box-shadow:none;
}
#servicios .hosting-intro .k{color:#3F6DA8}
#servicios .hosting-intro h3{color:var(--ink)}
#servicios .hosting-intro p{color:var(--text-dark)}
#servicios .hosting-opt{
  background:var(--p-050);border:1px solid var(--p-300);box-shadow:var(--shadow-light);
}
#servicios .hosting-opt .t{color:var(--ink-2)}
#servicios .hosting-opt .s{color:var(--text-dark)}
#servicios .hosting-opt.highlight{background:var(--p-050);border-color:var(--p-400);box-shadow:0 1px 2px rgba(57,88,134,.08),0 12px 30px rgba(98,142,203,.22)}
#servicios .hosting-opt svg[stroke]{stroke:var(--p-400)}

/* ---------- Transición Servicios → Tipos de web ----------
   Degradado vertical suave rematado por una línea azul muy fina. */
#webs.sec-dark{
  background-color:var(--p-500)!important;
  background-image:
    linear-gradient(180deg,rgba(240,243,250,.14),rgba(240,243,250,0) 180px),
    linear-gradient(180deg,var(--p-500) 0%,var(--p-600) 100%)!important;
  border-top:1px solid var(--p-400);
  border-bottom:1px solid rgba(177,201,239,.18);
}

/* ---------- TIPOS DE WEB · cabecera sobre azul ---------- */
#webs .h-label{color:var(--p-300)}
#webs .h-title span,#webs .h-title span+span{
  background:none;-webkit-text-fill-color:currentColor;color:var(--p-050);
}
#webs .h-title em{background:none;-webkit-text-fill-color:currentColor;color:var(--p-300)}
#webs .h-sub{color:var(--p-100)}
#webs .route-item{color:var(--p-050)}
#webs .route-dot{background:var(--p-300);box-shadow:none}
#webs .route-dot.gray{background:var(--p-100)}
#webs .route-dot.purple{background:var(--p-200)}
#webs .route-sep{background:linear-gradient(90deg,rgba(177,201,239,.55),rgba(177,201,239,.12))}

/* ---------- TIPOS DE WEB · tres tarjetas claras ---------- */
#webs .web-card{
  background:var(--p-050);
  border:1px solid var(--p-200);
  box-shadow:0 1px 2px rgba(20,42,74,.10),0 26px 56px rgba(20,42,74,.32);
}
#webs .web-card:hover{
  transform:translateY(-6px);
  border-color:var(--p-400);
  box-shadow:0 1px 2px rgba(20,42,74,.10),0 34px 70px rgba(20,42,74,.40);
}
#webs .web-card-top{background:var(--p-100)}
#webs .web-card-dots span:not(.lbl){background:var(--p-200)}
#webs .web-card-num{color:rgba(57,88,134,.08)}
#webs .web-card-body h3{color:var(--ink-2)}
#webs .web-card-body p.frase{color:var(--text-dark)}
/* "IDEAL PARA": fondo azul muy suave para separarlo del resto */
#webs .web-ideal{background:rgba(177,201,239,.38);border-radius:0 12px 12px 0}
#webs .web-ideal .k{color:var(--text-dark)}
#webs .web-ideal .v{color:var(--ink-2)}
#webs .web-ideal .e{color:#6B7C93}
#webs .web-incs li{color:var(--text-dark)}
#webs .web-incs svg[stroke]{stroke:var(--p-400)}
/* Botón secundario claro con borde azul */
#webs .web-cta-btn{
  background:var(--p-050);color:var(--p-400);border:1px solid var(--p-400);
}
#webs .web-cta-btn:hover{background:rgba(98,142,203,.10);color:#4C79B4;border-color:#4C79B4}
/* Premium: mismo fondo claro, destacada por borde, elevación y CTA sólido */
#webs .web-card.premium{
  background:var(--p-050);
  border:1.5px solid var(--p-400);
  box-shadow:0 1px 2px rgba(20,42,74,.10),0 30px 64px rgba(20,42,74,.42),0 0 0 4px rgba(98,142,203,.12);
  transform:translateY(-8px);
}
#webs .web-card.premium:hover{transform:translateY(-14px);box-shadow:0 1px 2px rgba(20,42,74,.10),0 38px 78px rgba(20,42,74,.48),0 0 0 4px rgba(98,142,203,.18)}
#webs .web-card.premium .web-cta-btn{background:var(--p-400);color:var(--p-050);border-color:var(--p-400)}
#webs .web-card.premium .web-cta-btn:hover{background:#4C79B4;color:var(--p-050);border-color:#4C79B4}
/* Flechas del carrusel móvil sobre fondo azul */
#webs .webs-nav-btn{border-color:var(--p-200);background:rgba(240,243,250,.08)}
#webs .webs-nav-btn:hover{border-color:var(--p-050);background:rgba(240,243,250,.16)}
#webs .webs-nav-btn svg[stroke]{stroke:var(--p-050)}
#webs .webs-dot{background:rgba(240,243,250,.35)}
#webs .webs-dot.is-active{background:var(--p-200)}

@media(max-width:900px){
  /* En tablet la tercera tarjeta de servicios ocupa el ancho completo */
  #servicios .svc-card:hover,#webs .web-card:hover{box-shadow:0 1px 2px rgba(57,88,134,.10),0 18px 40px rgba(57,88,134,.22)}
  #webs .web-card.premium{transform:none}
  #webs .web-card.premium:hover{transform:translateY(-6px)}
}

/* ==========================================================================
   AUTOMATIZACIÓN — rediseño según referencia
   Sección azul profunda, banda horizontal en azul pastel como elemento
   principal y cuatro tarjetas claras homogéneas. Solo color y composición:
   el HTML, el orden y las animaciones existentes se mantienen.
   ========================================================================== */
#automatizacion.sec-dark{
  background-color:var(--p-500)!important;
  background-image:
    linear-gradient(180deg,rgba(240,243,250,.10),rgba(240,243,250,0) 170px),
    linear-gradient(180deg,var(--p-500) 0%,#2A4066 100%)!important;
  border-top:1px solid rgba(177,201,239,.18);
  border-bottom:1px solid rgba(177,201,239,.18);
}
#automatizacion .auto-parallax{background:radial-gradient(circle,rgba(177,201,239,.16),transparent 65%)}

/* ---------- Cabecera sobre el azul profundo ---------- */
#automatizacion .h-label{color:var(--p-300)}
#automatizacion .h-title span{background:none;-webkit-text-fill-color:currentColor;color:var(--p-050)}
#automatizacion .h-title span+span{background:none;-webkit-text-fill-color:currentColor;color:var(--p-300)}
#automatizacion .h-title em{background:none;-webkit-text-fill-color:currentColor;color:var(--p-300)}
#automatizacion .h-sub{color:var(--p-100)}
#automatizacion .route-item{color:var(--p-050)}
#automatizacion .route-dot{background:var(--p-300);box-shadow:none}
#automatizacion .route-dot.green{background:#8FC7AE;box-shadow:none}
#automatizacion .route-sep{background:linear-gradient(90deg,rgba(177,201,239,.55),rgba(177,201,239,.12))}

/* ---------- FLUJO AUTOMATIZADO: una sola interfaz, azul pastel ---------- */
#automatizacion .flow-panel{
  background:linear-gradient(100deg,var(--p-200) 0%,#9DBAE8 55%,var(--p-300) 100%);
  border:1px solid rgba(138,174,224,.65);
  border-radius:22px;
  box-shadow:0 2px 6px rgba(20,42,74,.14),0 30px 66px rgba(20,42,74,.34);
  padding:30px 24px 26px;
}
#automatizacion .flow-title{color:var(--p-500);letter-spacing:.18em}
#automatizacion .flow-node .ico{
  background:var(--p-050);border:1px solid rgba(98,142,203,.42);
  box-shadow:0 1px 2px rgba(20,42,74,.10),0 8px 18px rgba(20,42,74,.12);
}
#automatizacion .flow-node p.t{color:#203653}
#automatizacion .flow-node p.s{color:#3D7F66}
#automatizacion .flow-node p.s svg[stroke]{stroke:#4E9C7D}
#automatizacion .flow-arrow path{stroke:var(--p-400)}
/* La línea superior deja de parpadear: ahora se dibuja una sola vez */
#automatizacion .flow-panel .hosting-topline{
  height:2px;background:linear-gradient(90deg,rgba(98,142,203,0),var(--p-400),rgba(98,142,203,0));
  animation:none;transform-origin:left center;
}

/* ---------- Las cuatro tarjetas: misma base clara ---------- */
#automatizacion .auto-card{
  background:linear-gradient(180deg,var(--p-050) 0%,var(--p-100) 100%);
  border:1px solid rgba(98,142,203,.42);
  box-shadow:0 1px 2px rgba(20,42,74,.06),0 18px 44px rgba(20,42,74,.20);
}
#automatizacion .auto-card:hover{
  transform:translateY(-6px);
  border-color:rgba(98,142,203,.70);
  box-shadow:0 1px 2px rgba(20,42,74,.08),0 26px 60px rgba(20,42,74,.28);
}
#automatizacion .auto-card-num{color:rgba(138,174,224,.22)}
#automatizacion .auto-card .ico{
  background:rgba(177,201,239,.45);border-color:rgba(98,142,203,.42);box-shadow:none;
}
#automatizacion .auto-card h3{color:#203653}
#automatizacion .auto-card p.desc{color:var(--text-dark)}

/* ---------- Mini interfaces internas, todas claras ---------- */
#automatizacion .auto-demo{
  background:var(--p-050);border:1px solid var(--p-200);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
#automatizacion .auto-field{background:var(--p-050);border:1px solid var(--p-200);color:var(--p-500)}
#automatizacion .auto-field.active{border-color:rgba(98,142,203,.55)}
#automatizacion .auto-field .k{color:var(--text-dark)}
#automatizacion .auto-field .v{color:var(--p-400)}
#automatizacion .auto-send-btn{background:var(--p-400);color:var(--p-050);box-shadow:0 4px 12px rgba(98,142,203,.35)}
#automatizacion .auto-status{color:var(--p-500)}
#automatizacion .auto-status svg[stroke="#628ECB"]{stroke:var(--p-300)}   /* pendiente */
#automatizacion .auto-status.done{color:#3D7F66}
#automatizacion .auto-bubble{background:var(--p-100);border:1px solid var(--p-200);color:var(--p-500)}
#automatizacion .auto-bubble.reply{background:rgba(143,199,174,.22);border-color:rgba(143,199,174,.55);color:#3D7F66}
#automatizacion .auto-tag{background:var(--p-050);border:1px solid var(--p-200);color:var(--p-500)}
#automatizacion .auto-tag.ok{background:rgba(143,199,174,.20);border-color:rgba(143,199,174,.55);color:#3D7F66}
#automatizacion .auto-footbadge span{
  background:rgba(143,199,174,.18);border:1px solid rgba(143,199,174,.55);color:#3D7F66;
}
#automatizacion .auto-demo svg[stroke="#7FBFA0"]{stroke:#4E9C7D}
/* La mini interfaz se anima con suavidad en hover, sin cambiar de color */
#automatizacion .auto-card:hover .auto-demo{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 22px rgba(20,42,74,.12)}
#automatizacion .auto-demo{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}

/* ---------- Cierre sobre el fondo oscuro ---------- */
#automatizacion .auto-close .l1{background:none;-webkit-text-fill-color:currentColor;color:var(--p-050)}
#automatizacion .auto-close .l2{background:none;-webkit-text-fill-color:currentColor;color:var(--p-300)}
#automatizacion .auto-close-cta{
  background:transparent;border:1px solid var(--p-300);color:var(--p-050);box-shadow:none;
}
#automatizacion .auto-close-cta:hover{
  background:var(--p-400);border-color:var(--p-400);color:var(--p-050);
  transform:translateY(-2px);box-shadow:0 8px 22px rgba(98,142,203,.38);gap:15px;
}

/* ---------- Microanimación de entrada del bloque horizontal ----------
   La clase la pone el JS una única vez (IntersectionObserver que deja de
   observar). Si el JS no corre, no hay clase y todo se ve en su estado
   final: la animación nunca es requisito para que el bloque sea legible. */
@keyframes flowLineDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes flowNodeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes flowFadeIn{from{opacity:0}to{opacity:1}}
.flow-panel.is-flow-in .hosting-topline{animation:flowLineDraw .9s var(--ease) both}
.flow-panel.is-flow-in .flow-node{animation:flowNodeIn .55s var(--ease) both}
.flow-panel.is-flow-in .flow-step:nth-child(1) .flow-node{animation-delay:.25s}
.flow-panel.is-flow-in .flow-step:nth-child(2) .flow-node{animation-delay:.40s}
.flow-panel.is-flow-in .flow-step:nth-child(3) .flow-node{animation-delay:.55s}
.flow-panel.is-flow-in .flow-step:nth-child(4) .flow-node{animation-delay:.70s}
.flow-panel.is-flow-in .flow-arrow{animation:flowFadeIn .4s ease both}
.flow-panel.is-flow-in .flow-step:nth-child(1) .flow-arrow{animation-delay:.36s}
.flow-panel.is-flow-in .flow-step:nth-child(2) .flow-arrow{animation-delay:.51s}
.flow-panel.is-flow-in .flow-step:nth-child(3) .flow-arrow{animation-delay:.66s}
/* Los estados se encienden uno a uno, después de su módulo */
.flow-panel.is-flow-in .flow-node p.s{animation:flowFadeIn .45s ease both}
.flow-panel.is-flow-in .flow-step:nth-child(1) .flow-node p.s{animation-delay:.85s}
.flow-panel.is-flow-in .flow-step:nth-child(2) .flow-node p.s{animation-delay:1.00s}
.flow-panel.is-flow-in .flow-step:nth-child(3) .flow-node p.s{animation-delay:1.15s}
.flow-panel.is-flow-in .flow-step:nth-child(4) .flow-node p.s{animation-delay:1.30s}

@media(max-width:640px){
  /* El bloque horizontal se convierte en una ruta vertical */
  #automatizacion .flow-row{flex-direction:column;align-items:stretch;gap:0}
  #automatizacion .flow-step{flex-direction:column;align-items:center;width:100%}
  #automatizacion .flow-node{min-width:0;width:100%}
  #automatizacion .flow-arrow{margin:2px 0 4px;transform:rotate(90deg)}
  #automatizacion .flow-node p.t{font-size:14px}
  #automatizacion .flow-node p.s{font-size:14px}
  #automatizacion .flow-title{font-size:12px}
  #automatizacion .auto-card p.desc{font-size:14px}
  #automatizacion .auto-close-cta{font-size:14px}
  #automatizacion .auto-footbadge span{font-size:12px}
  /* Las mini interfaces son maquetas decorativas (aria-hidden): se quedan
     por debajo de 14px a propósito, si no dejarían de parecer una interfaz.
     Aun así ninguna baja de 11.5px. */
  #automatizacion .auto-send-btn{font-size:11.5px}
}

/* ==========================================================================
   MOVIL / TABLET
   Se conserva la alternancia de fondos, pero los bloques claros se acortan
   para que no ocupen pantallas enteras, y los botones pasan a ancho completo.
   ========================================================================== */
@media(max-width:640px){
  .section-pad{padding:72px 20px}
  .faq-grid{padding:68px 20px}
  .contacto-pad{padding:72px 20px 80px}
  .proceso-pad{padding:60px 20px 56px}
  .webs-body{padding:34px 0 72px}
  .hero-cta,.pill-cta,.seo-mini-cta,.stack-cta,.auto-close-cta,.faq-side-btn,.alt-btn{
    width:100%;justify-content:center;align-self:stretch;
  }
  .faq-side-links{flex-direction:column}
  .h-title{font-size:clamp(28px,7.4vw,38px)}

  /* Legibilidad en móvil: el texto de lectura y las etiquetas de botón
     suben a 14px. Los eyebrows en mayúsculas (01 — ATRAE, IDEAL PARA,
     ESENCIAL…) se quedan por debajo a propósito: son un recurso
     tipográfico de la referencia, pero ninguno baja ya de 12px. */
  #servicios .hosting-opt .t,#servicios .hosting-opt .s,
  #webs .web-ideal .v,#webs .web-ideal .e,
  #webs .web-incs li,#servicios .svc-list li,#servicios .hosting-intro p{font-size:14px}
  .web-cta-btn,.svc-cta,.pill-cta,.seo-mini-cta,.stack-cta,.faq-side-btn,.alt-btn{font-size:14px}
  #webs .web-card-dots .lbl{font-size:12px}
  #webs .web-ideal .k,#servicios .hosting-intro .k{font-size:12px}
  #servicios .svc-kicker{font-size:12.5px}
  .route-item{font-size:13px}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}