/* ============================================================
   1. VARIABLES DE MARCA
   ============================================================ */
:root{
  --deep:        #060e1c;
  --deep-2:      #0a1a32;
  --deep-3:      #0f2748;
  --light:       #f4f8fc;
  --light-2:     #e7eef8;
  /* Acentos extraídos del logo */
  --green:       #45bf5b;
  --green-deep:  #0c9363;
  --azure:       #0aa1e4;   /* azul brillante del logo v2 */
  --cyan:        #19c5ef;   /* acento eléctrico (highlights del logo) */
  --cobalt:      #0a52b8;
  --navy:        #1d3451;
  --blue:        #0aa1e4;
  /* Gradientes */
  --grad: linear-gradient(125deg, #45bf5b 0%, #12a06a 22%, #0aa1e4 60%, #0a52b8 100%);
  --grad-cta: linear-gradient(120deg, #0aa1e4 0%, #0a52b8 100%);
  --grad-soft: linear-gradient(120deg, rgba(10,161,228,.14), rgba(12,147,99,.14));
  /* Texto */
  --on-dark:        #e9eff8;
  --on-dark-muted:  #93a6c2;
  --on-light:       #15273f;
  --on-light-muted: #4f6178;
  /* Cristal / bordes */
  --glass:        rgba(255,255,255,.045);
  --glass-border: rgba(255,255,255,.10);
  --radius:       20px;
  --radius-sm:    14px;
  --shadow:       0 24px 60px -24px rgba(0,0,0,.65);
  --maxw:         1180px;
  --logo: url("logo-huma.png");
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
}

/* ============================================================
   2. BASE
   ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--font-body); background:var(--deep); color:var(--on-dark); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.1; font-weight:700; letter-spacing:-.02em; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
section{ position:relative; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
::selection{ background:rgba(10,161,228,.35); color:#fff; }
:focus-visible{ outline:2px solid var(--azure); outline-offset:3px; border-radius:6px; }

.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:18px; }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--grad); border-radius:2px; }

/* Enlace de salto (accesibilidad) */
.skip{ position:absolute; left:-999px; top:8px; z-index:200; background:var(--azure); color:#fff; padding:10px 16px; border-radius:10px; }
.skip:focus{ left:16px; }

/* ============================================================
   3. BOTONES
   ============================================================ */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:.97rem; padding:14px 26px; border-radius:50px; cursor:pointer; border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; white-space:nowrap; overflow:hidden; }
.btn-primary{ background:var(--grad-cta); color:#fff; box-shadow:0 14px 34px -12px rgba(10,161,228,.55); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 46px -12px rgba(10,82,184,.6); }
/* brillo que cruza el botón al pasar el ratón */
.btn-primary::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); transition:left .6s ease; }
.btn-primary:hover::after{ left:140%; }
.btn-ghost{ background:transparent; color:var(--on-dark); border-color:var(--glass-border); }
.btn-ghost:hover{ border-color:var(--cyan); background:var(--glass); transform:translateY(-3px); }
.btn svg{ width:18px; height:18px; }

/* ============================================================
   4. NAVEGACIÓN
   ============================================================ */
header.nav{ position:fixed; inset:0 0 auto 0; z-index:100; padding:18px 0; transition:padding .3s, background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent; }
header.nav.scrolled{ padding:10px 0; background:rgba(6,14,28,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--glass-border); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; }
.brand-logo{ display:block; width:178px; height:66px; background:var(--logo) left center/contain no-repeat; }
.footer-logo{ width:196px; height:72px; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a{ font-size:.93rem; color:var(--on-dark-muted); font-weight:500; transition:color .2s; position:relative; }
.nav-links a:hover{ color:var(--on-dark); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--grad); border-radius:2px; transition:width .25s ease; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--on-dark); border-radius:2px; transition:.3s; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   5. HERO
   ============================================================ */
.hero{ padding:172px 0 96px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* Aurora animada (mancha de gradiente que respira) */
.aurora{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform; }
.aurora.a1{ top:-160px; left:8%; width:520px; height:520px; background:radial-gradient(closest-side, rgba(10,161,228,.55), transparent); animation:drift1 16s ease-in-out infinite; }
.aurora.a2{ top:-60px; right:4%; width:480px; height:480px; background:radial-gradient(closest-side, rgba(69,191,91,.40), transparent); animation:drift2 19s ease-in-out infinite; }
.aurora.a3{ bottom:-180px; left:38%; width:560px; height:420px; background:radial-gradient(closest-side, rgba(10,82,184,.45), transparent); animation:none; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(60px,40px); } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-50px,50px); } }
@keyframes drift3{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(40px,-40px); } }
/* Glow que sigue al cursor */
.cursor-glow{ position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(closest-side, rgba(25,197,239,.16), transparent); transform:translate(-50%,-50%); pointer-events:none; opacity:0; transition:opacity .4s; z-index:1; }
.contours{ position:absolute; inset:0; width:100%; height:100%; opacity:.45; }
/* Textura de grano sutil (premium) */
.grain{ position:absolute; inset:0; opacity:.05; pointer-events:none; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero-grid{ position:relative; z-index:3; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero-copy{ max-width:600px; }
.hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:40px; background:var(--glass); border:1px solid var(--glass-border); font-size:.82rem; color:var(--on-dark-muted); margin-bottom:22px; }
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(69,191,91,.6); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(69,191,91,.6);} 70%{ box-shadow:0 0 0 9px rgba(69,191,91,0);} 100%{ box-shadow:0 0 0 0 rgba(69,191,91,0);} }
.hero h1{ font-size:clamp(2.4rem, 5.4vw, 4.05rem); font-weight:800; margin-bottom:22px; }
.hero p.lead{ font-size:clamp(1.04rem, 1.6vw, 1.18rem); color:var(--on-dark-muted); margin-bottom:34px; max-width:540px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:10px 26px; }
.hero-trust span{ display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--on-dark-muted); }
.hero-trust svg{ width:17px; height:17px; color:var(--green); flex:none; }

/* Visual del hero: navegador realista + teléfono + chips */
.hero-visual{ position:relative; perspective:1400px; }
.mockup{ position:relative; z-index:2; border-radius:var(--radius); overflow:hidden; background:#fff; border:1px solid var(--glass-border); box-shadow:var(--shadow); animation:floaty 7s ease-in-out infinite; }
.mockup-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:#0c1626; border-bottom:1px solid rgba(255,255,255,.06); }
.mockup-bar i{ width:11px; height:11px; border-radius:50%; }
.mockup-bar i:nth-child(1){ background:#ff5f57; } .mockup-bar i:nth-child(2){ background:#febc2e; } .mockup-bar i:nth-child(3){ background:#28c840; }
.mockup-bar .url{ margin-left:10px; font-size:.7rem; color:#7e90ab; background:rgba(255,255,255,.06); padding:4px 12px; border-radius:30px; }
/* Mini sitio realista dentro del navegador */
.site{ background:#0a1422; color:#e9eff8; }
.site-hero{ padding:22px 22px 26px; background:radial-gradient(120% 90% at 15% -10%, rgba(10,161,228,.35), transparent 60%), radial-gradient(120% 90% at 100% 120%, rgba(69,191,91,.28), transparent 60%); }
.site-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.site-logo{ width:46px; height:9px; border-radius:6px; background:var(--grad); }
.site-menu{ display:flex; gap:9px; }
.site-menu i{ width:26px; height:6px; border-radius:4px; background:rgba(255,255,255,.18); }
.site-h{ height:15px; width:78%; border-radius:8px; background:linear-gradient(90deg,#fff,rgba(255,255,255,.5)); margin-bottom:9px; }
.site-h.s2{ width:55%; }
.site-p{ height:7px; width:90%; border-radius:5px; background:rgba(255,255,255,.16); margin-bottom:7px; }
.site-p.s2{ width:70%; }
.site-cta{ height:26px; width:108px; border-radius:30px; background:var(--grad-cta); margin-top:16px; }
.site-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px 22px 22px; background:#0a1422; }
.site-card{ height:64px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); position:relative; }
.site-card::before{ content:""; position:absolute; top:11px; left:11px; width:20px; height:20px; border-radius:6px; background:var(--grad); }
.site-card::after{ content:""; position:absolute; bottom:12px; left:11px; right:11px; height:6px; border-radius:4px; background:rgba(255,255,255,.14); }
/* Teléfono superpuesto (demuestra responsive) */
.phone{ position:absolute; z-index:3; left:-46px; bottom:-30px; width:118px; height:236px; border-radius:24px; background:#0a1422; border:5px solid #0c1626; box-shadow:0 26px 50px -18px rgba(0,0,0,.7); overflow:hidden; animation:floaty 8s ease-in-out infinite .5s; }
.phone .ph-hero{ height:118px; background:radial-gradient(120% 90% at 30% 0%, rgba(10,161,228,.5), transparent 60%), #0c1a30; padding:16px 12px; }
.phone .ph-logo{ width:34px; height:7px; border-radius:5px; background:var(--grad); margin-bottom:18px; }
.phone .ph-h{ height:10px; width:80%; border-radius:5px; background:#fff; margin-bottom:6px; }
.phone .ph-h.s2{ width:55%; }
.phone .ph-btn{ height:18px; width:64px; border-radius:20px; background:var(--grad-cta); margin-top:12px; }
.phone .ph-body{ padding:12px; display:grid; gap:8px; }
.phone .ph-row{ height:34px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }

.chip{ position:absolute; z-index:4; display:flex; align-items:center; gap:8px; background:rgba(10,20,36,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--glass-border); border-radius:14px; padding:10px 14px; font-size:.82rem; font-weight:600; font-family:var(--font-display); box-shadow:0 16px 40px -16px rgba(0,0,0,.7); white-space:nowrap; }
.chip svg{ width:16px; height:16px; color:var(--green); flex:none; }
.chip.c1{ top:-4%;  right:-6%;  animation:floaty 6s ease-in-out infinite; }
.chip.c2{ top:42%;  right:-12%; animation:floaty 7.5s ease-in-out infinite .6s; }
.chip.c3{ bottom:30%; left:-16%; animation:floaty 6.8s ease-in-out infinite .3s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-13px);} }

.scroll-cue{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--on-dark-muted); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.scroll-cue .mouse{ width:22px; height:36px; border:2px solid var(--on-dark-muted); border-radius:14px; position:relative; }
.scroll-cue .mouse::before{ content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:3px; height:7px; border-radius:3px; background:var(--on-dark-muted); animation:scrolldot 1.8s infinite; }
@keyframes scrolldot{ 0%,100%{ opacity:0; transform:translate(-50%,0);} 40%{ opacity:1; transform:translate(-50%,0);} 80%{ opacity:0; transform:translate(-50%,12px);} }

/* ============================================================
   6. BANDA DE SECTORES + STATS
   ============================================================ */
.strip{ border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); padding:22px 0; overflow:hidden; background:var(--deep-2); }
.strip-label{ text-align:center; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#b7c5d8; margin-bottom:14px; }
.marquee{ display:flex; gap:54px; width:max-content; animation:scrollx 28s linear infinite; }
.marquee span{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:#b7c5d8; }
@keyframes scrollx{ to{ transform:translateX(-50%);} }

.stats{ background:var(--deep); padding:60px 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ text-align:center; padding:22px; border-radius:var(--radius); background:var(--glass); border:1px solid var(--glass-border); }
.stat b{ font-family:var(--font-display); font-weight:800; font-size:2.9rem; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; line-height:1; gap:0.05em; }
.stat > span{ color:var(--on-dark-muted); font-size:.9rem; margin-top:8px; display:block; }

/* ============================================================
   7. SECCIONES
   ============================================================ */
.section{ padding:96px 0; }
.section.light{ background:var(--light); color:var(--on-light); }
.section.light .eyebrow{ color:var(--azure); }
.section-head{ max-width:680px; margin-bottom:54px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section h2{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom:16px; }
.section .sub{ font-size:1.06rem; color:var(--on-light-muted); }
.section.dark{ background:var(--deep); }
.section.dark .sub{ color:var(--on-dark-muted); }

.prob-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.prob-card{ background:#fff; border:1px solid var(--light-2); border-radius:var(--radius); padding:32px 28px; transition:transform .3s, box-shadow .3s; }
.prob-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(10,22,38,.28); }
.prob-num{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:var(--grad-soft); color:var(--azure); margin-bottom:20px; }
.prob-card h3{ font-size:1.16rem; margin-bottom:10px; }
.prob-card p{ color:var(--on-light-muted); font-size:.97rem; }

/* Servicios */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc-card{ position:relative; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:32px 28px; overflow:hidden; transition:transform .3s, border-color .3s; transform-style:preserve-3d; }
.svc-card::before{ content:""; position:absolute; inset:0; background:var(--grad-soft); opacity:0; transition:opacity .3s; }
.svc-card:hover{ border-color:rgba(69,191,91,.35); }
.svc-card:hover::before{ opacity:1; }
.svc-card > *{ position:relative; z-index:1; }
.svc-icon{ width:52px; height:52px; border-radius:14px; background:var(--grad-cta); display:grid; place-items:center; margin-bottom:20px; box-shadow:0 12px 28px -10px rgba(10,161,228,.5); }
.svc-icon svg{ width:26px; height:26px; color:#fff; }
.svc-card h3{ font-size:1.18rem; margin-bottom:11px; }
.svc-card p{ color:var(--on-dark-muted); font-size:.96rem; }

/* ============================================================
   8. DEMO GRATUITA
   ============================================================ */
.demo-invite{ position:relative; overflow:hidden; background:linear-gradient(145deg,#071427 0%,#0a1d38 58%,#07182a 100%); }
.demo-invite::before{ content:""; position:absolute; width:620px; height:620px; right:-250px; top:-320px; border-radius:50%; background:radial-gradient(circle,rgba(10,161,228,.28),transparent 66%); pointer-events:none; }
.demo-invite-grid{ position:relative; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(45px,7vw,100px); align-items:center; }
.demo-invite-copy .sub{ max-width:600px; color:var(--on-dark-muted); }
.demo-invite-points{ display:grid; gap:12px; margin:30px 0 32px; }
.demo-invite-points div{ display:flex; align-items:center; gap:13px; }
.demo-invite-points span{ flex:none; display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(25,197,239,.28); border-radius:10px; color:var(--cyan); background:rgba(10,161,228,.08); font-family:var(--font-display); font-weight:800; font-size:.68rem; }
.demo-invite-points p{ color:#d8e4f0; font-size:.94rem; }
.demo-invite-cta{ min-width:220px; }
.demo-invite-visual{ position:relative; min-height:440px; }
.demo-browser{ position:absolute; inset:18px 0 8px 22px; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:20px; background:#f6f8fb; box-shadow:0 42px 90px -35px rgba(0,0,0,.85),0 0 70px -28px rgba(10,161,228,.6); transform:perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.demo-browser-bar{ height:38px; display:flex; align-items:center; gap:6px; padding:0 14px; background:#0b1728; }
.demo-browser-bar i{ width:7px; height:7px; border-radius:50%; background:#ff6c67; }
.demo-browser-bar i:nth-child(2){ background:#f1bd52; }.demo-browser-bar i:nth-child(3){ background:#47c780; }
.demo-browser-bar span{ margin:auto; transform:translateX(-14px); padding:4px 38px; border-radius:20px; background:rgba(255,255,255,.07); color:#758aa4; font-size:.58rem; }
.demo-browser-screen{ padding:22px 25px 25px; color:#102037; }
.demo-browser-nav{ display:flex; align-items:center; gap:14px; height:24px; }
.demo-browser-nav b{ width:74px; height:8px; border-radius:5px; background:#102037; margin-right:auto; }
.demo-browser-nav span{ width:38px; height:4px; border-radius:3px; background:#a8b2bf; }
.demo-browser-nav em{ width:49px; height:17px; border-radius:10px; background:linear-gradient(110deg,var(--green),var(--azure)); }
.demo-browser-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:23px; align-items:center; padding:31px 0 26px; }
.demo-browser-hero small{ display:block; width:70px; height:5px; margin-bottom:13px; border-radius:3px; background:var(--azure); }
.demo-browser-hero strong{ display:block; width:100%; height:15px; margin-bottom:7px; border-radius:4px; background:#102037; }
.demo-browser-hero strong:nth-of-type(2){ width:72%; }
.demo-browser-hero p{ width:88%; height:26px; margin:15px 0; border-radius:4px; background:repeating-linear-gradient(#aab5c2 0 3px,transparent 3px 9px); opacity:.7; }
.demo-browser-faux-button{ display:block; width:88px; height:24px; border-radius:13px; background:linear-gradient(110deg,var(--green),var(--azure)); }
.demo-browser-hero figure{ height:178px; margin:0; border-radius:52px 12px 52px 12px; background:linear-gradient(145deg,rgba(10,161,228,.85),rgba(69,191,91,.75)); box-shadow:18px 18px 0 -7px #d9e9ed; }
.demo-browser-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.demo-browser-cards i{ height:65px; border:1px solid #e1e6ec; border-radius:10px; background:linear-gradient(160deg,#fff,#edf3f7); box-shadow:0 10px 25px -20px #102037; }
.demo-mobile{ position:absolute; right:-10px; bottom:-14px; width:145px; height:285px; padding:17px 12px; overflow:hidden; border:6px solid #0b1728; border-radius:26px; background:#fbfcfe; box-shadow:0 25px 55px -18px rgba(0,0,0,.75); }
.demo-mobile::before{ content:""; position:absolute; width:48px; height:8px; left:50%; top:4px; transform:translateX(-50%); border-radius:0 0 7px 7px; background:#0b1728; }
.demo-mobile div{ height:98px; margin-bottom:14px; border-radius:13px; background:linear-gradient(145deg,#09244a,#0aa1e4); }
.demo-mobile b,.demo-mobile span{ display:block; height:8px; margin-bottom:7px; border-radius:4px; background:#17263b; }
.demo-mobile span{ width:75%; height:4px; background:#a9b5c3; }
.demo-mobile i{ display:block; height:62px; margin-top:15px; border-radius:12px; background:#e9f4f6; }

/* ============================================================
   9. DIFERENCIAL
   ============================================================ */
.diff{ background:var(--deep-2); }
.diff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.diff-list{ list-style:none; display:grid; gap:16px; }
.diff-list li{ display:flex; gap:14px; align-items:flex-start; }
.diff-check{ width:30px; height:30px; flex:none; border-radius:9px; background:var(--grad-soft); display:grid; place-items:center; margin-top:2px; }
.diff-check svg{ width:16px; height:16px; color:var(--green); }
.diff-list b{ font-family:var(--font-display); font-weight:600; }
.diff-list p{ color:var(--on-dark-muted); font-size:.94rem; margin-top:2px; }
.diff-visual{ position:relative; border-radius:var(--radius); padding:42px; background:var(--glass); border:1px solid var(--glass-border); overflow:hidden; }
.diff-visual .peak-bg{ position:absolute; inset:0; opacity:.55; }
.diff-stats{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.diff-stats b{ font-family:var(--font-display); font-weight:800; font-size:2.4rem; display:flex; align-items:center; flex-wrap:nowrap; gap:0.05em; }
.diff-stats span{ color:var(--on-dark-muted); font-size:.9rem; }

/* ============================================================
   10. PROCESO
   ============================================================ */
.proc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.proc-card{ position:relative; padding:32px 24px; border-radius:var(--radius); background:#fff; border:1px solid var(--light-2); transition:transform .3s, box-shadow .3s; }
.proc-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(10,22,38,.28); }
.proc-step{ font-family:var(--font-display); font-weight:800; font-size:.92rem; color:#fff; width:42px; height:42px; border-radius:50%; background:var(--grad-cta); display:grid; place-items:center; margin-bottom:20px; }
.proc-card h3{ font-size:1.1rem; margin-bottom:9px; }
.proc-card p{ color:var(--on-light-muted); font-size:.94rem; }

/* ============================================================
   11. PLANES
   ============================================================ */
.plans-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.plan{ position:relative; border-radius:var(--radius); padding:36px 30px; background:var(--glass); border:1px solid var(--glass-border); transition:transform .3s, border-color .3s; }
.plan:hover{ transform:translateY(-6px); }
.plan.featured{ background:linear-gradient(180deg, rgba(10,161,228,.10), rgba(69,191,91,.05)), var(--deep-2); border-color:rgba(25,197,239,.4); transform:scale(1.04); box-shadow:0 30px 70px -30px rgba(10,161,228,.5); }
.plan.featured:hover{ transform:scale(1.04) translateY(-6px); }
.plan-tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--grad-cta); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 16px; border-radius:30px; }
.plan h3{ font-size:1.3rem; margin-bottom:6px; }
.plan .plan-desc{ color:var(--on-dark-muted); font-size:.92rem; min-height:42px; margin-bottom:18px; }
.plan .price{ font-family:var(--font-display); margin-bottom:24px; }
.plan .price b{ font-size:2.5rem; font-weight:800; }
.plan .price small{ font-size:.9rem; color:var(--on-dark-muted); font-weight:500; }
.plan ul{ list-style:none; display:grid; gap:12px; margin-bottom:28px; }
.plan ul li{ display:flex; gap:11px; align-items:flex-start; font-size:.93rem; }
.plan ul svg{ width:17px; height:17px; color:var(--green); flex:none; margin-top:3px; }
.plan .btn{ width:100%; }
.plans-note{ text-align:center; margin-top:36px; color:var(--on-dark-muted); font-size:.92rem; max-width:760px; margin-inline:auto; }
.plans-note b{ color:var(--on-dark); }

/* ============================================================
   12. TESTIMONIOS
   ============================================================ */
.tst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tst{ background:#fff; border:1px solid var(--light-2); border-radius:var(--radius); padding:30px 28px; display:flex; flex-direction:column; gap:16px; }
.tst .stars{ display:flex; gap:3px; color:#f7b500; }
.tst .stars svg{ width:18px; height:18px; color:#f7b500; }
.tst p{ color:var(--on-light); font-size:1rem; line-height:1.65; flex:1; }
.tst .who{ display:flex; align-items:center; gap:12px; }
.tst .av{ width:44px; height:44px; border-radius:50%; background:var(--grad-cta); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; }
.tst .who b{ display:block; font-family:var(--font-display); font-size:.95rem; color:var(--on-light); }
.tst .who span{ font-size:.82rem; color:var(--on-light-muted); }

/* ============================================================
   13. SOBRE NOSOTROS
   ============================================================ */
.about-grid{ max-width:740px; margin-left:auto; margin-right:auto; }
.about-copy p{ color:var(--on-light-muted); margin-bottom:18px; font-size:1.04rem; }
.about-badges{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.about-badges span{ background:#fff; border:1px solid var(--light-2); padding:9px 16px; border-radius:30px; font-family:var(--font-display); font-weight:600; font-size:.85rem; }

/* ============================================================
   14. FAQ
   ============================================================ */
.faq-wrap{ max-width:820px; margin-inline:auto; display:grid; gap:14px; }
.faq{ background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-sm); overflow:hidden; }
.faq button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; background:none; border:0; cursor:pointer; color:var(--on-dark); font-family:var(--font-display); font-weight:600; font-size:1.02rem; text-align:left; }
.faq .ic{ width:26px; height:26px; flex:none; border-radius:8px; background:var(--grad-soft); display:grid; place-items:center; transition:transform .3s; }
.faq .ic svg{ width:15px; height:15px; color:var(--cyan); }
.faq.open .ic{ transform:rotate(45deg); }
.faq .ans{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq .ans p{ padding:0 24px 22px; color:var(--on-dark-muted); font-size:.97rem; }

/* ============================================================
   15. CTA + FORMULARIO
   ============================================================ */
.cta{ padding:100px 0; position:relative; overflow:hidden; background:linear-gradient(160deg, var(--deep-2) 0%, var(--deep) 60%); }
.cta .aurora.a1{ top:-200px; left:20%; opacity:.4; }
.cta .aurora.a2{ bottom:-220px; right:10%; top:auto; opacity:.35; }
.cta-grid{ position:relative; z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.cta-copy h2{ font-size:clamp(2rem, 4.2vw, 2.9rem); margin-bottom:18px; }
.cta-copy p{ color:var(--on-dark-muted); font-size:1.08rem; margin-bottom:28px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; }
/* Formulario */
.form-card{ background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:34px; backdrop-filter:blur(12px); }
.form-card h3{ font-size:1.2rem; margin-bottom:6px; }
.form-card .fh{ color:var(--on-dark-muted); font-size:.92rem; margin-bottom:22px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.84rem; font-weight:600; margin-bottom:7px; color:var(--on-dark); }
.field input, .field select, .field textarea{ width:100%; padding:13px 15px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); color:var(--on-dark); font-family:var(--font-body); font-size:.95rem; transition:border-color .2s, background .2s; }
.field input::placeholder, .field textarea::placeholder{ color:#64778f; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--azure); background:rgba(255,255,255,.06); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2393a6c2' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; }
.field textarea{ resize:vertical; min-height:90px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-card .btn{ width:100%; margin-top:6px; }
.form-note{ font-size:.78rem; color:var(--on-dark-muted); text-align:center; margin-top:12px; }

/* ============================================================
   16. FOOTER + WHATSAPP
   ============================================================ */
footer{ background:var(--deep); border-top:1px solid var(--glass-border); padding:60px 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.foot-brand p{ color:var(--on-dark-muted); font-size:.94rem; margin:16px 0 22px; max-width:300px; }
.foot-social{ display:flex; gap:12px; }
.foot-social a{ width:40px; height:40px; border-radius:11px; border:1px solid var(--glass-border); display:grid; place-items:center; color:var(--on-dark-muted); transition:.25s; }
.foot-social a:hover{ color:#fff; background:var(--grad-cta); border-color:transparent; transform:translateY(-3px); }
.foot-social svg{ width:19px; height:19px; }
.foot-col h4{ font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:18px; font-weight:600; }
.foot-col ul{ list-style:none; display:grid; gap:11px; }
.foot-col a, .foot-col li{ color:var(--on-dark); font-size:.93rem; transition:color .2s; }
.foot-col a:hover{ color:var(--cyan); }
.foot-bottom{ border-top:1px solid var(--glass-border); padding-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; font-size:.86rem; color:var(--on-dark-muted); }

.wa-float{ position:fixed; right:22px; bottom:22px; z-index:90; width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 14px 34px -8px rgba(37,211,102,.6); transition:transform .25s; }
.wa-float:hover{ transform:scale(1.08) translateY(-2px); }
.wa-float svg{ width:30px; height:30px; color:#fff; }

/* ============================================================
   17. REVELADO + RESPONSIVE
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; } .reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; } .reveal[data-delay="4"]{ transition-delay:.32s; }
/* El contenido crítico del primer pantallazo debe ser visible desde la carga inicial. */
.hero .reveal{ opacity:1; transform:none; }

@media (max-width:980px){
  .hero-grid, .diff-grid, .cta-grid{ grid-template-columns:1fr; gap:48px; }
  .demo-invite-grid{ grid-template-columns:1fr; }
  .demo-invite-copy{ max-width:680px; }
  .demo-invite-visual{ max-width:720px; width:100%; margin:auto; }
  .hero-visual{ max-width:440px; margin:0 auto; }
  .prob-grid, .svc-grid, .work-grid, .proc-grid, .plans-grid, .tst-grid, .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .plan.featured{ transform:none; } .plan.featured:hover{ transform:translateY(-6px); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .nav-links, .nav-cta .btn{ display:none; }
  .burger{ display:flex; }
  .brand-logo{ width:152px; height:56px; }
  .nav-links.open{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:rgba(6,14,28,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--glass-border); padding:10px 24px 22px; }
  .nav-links.open li{ padding:13px 0; border-bottom:1px solid var(--glass-border); }
  .nav-links.open a{ font-size:1rem; }
  .hero{ padding:140px 0 80px; }
  .prob-grid, .svc-grid, .work-grid, .proc-grid, .plans-grid, .tst-grid, .stats-grid, .form-row, .foot-grid{ grid-template-columns:1fr; }
  .section{ padding:72px 0; }
  .demo-invite-visual{ min-height:330px; }
  .demo-browser{ inset:8px 5px 8px 0; transform:none; }
  .demo-browser-screen{ padding:17px; }
  .demo-browser-nav span{ display:none; }
  .demo-browser-hero{ gap:13px; padding:23px 0 19px; }
  .demo-browser-hero figure{ height:135px; border-radius:35px 10px; }
  .demo-browser-cards i{ height:48px; }
  .demo-mobile{ display:none; }
  .phone{ display:none; }
  .chip.c2{ right:-6%; } .chip.c3{ left:-4%; }
  .foot-bottom{ flex-direction:column; text-align:center; }
  /* El movimiento decorativo no aporta información en pantallas pequeñas y
     añade trabajo continuo durante la carga y el desplazamiento. */
  .aurora.a1,.aurora.a2,.mockup,.phone,.chip,.marquee,.scroll-cue .mouse::before{ animation:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   19. MEJORAS UI/UX
   ============================================================ */

/* Barra de progreso de scroll */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--grad); z-index: 201; border-radius: 0 3px 3px 0;
  transition: width .08s linear; pointer-events: none;
}

/* Stats: borde gradiente sutil + color en números */
.stat {
  background: var(--glass) padding-box,
    linear-gradient(135deg, rgba(69,191,91,.22), rgba(10,161,228,.22)) border-box;
  border: 1px solid transparent;
}
.stat b { color: var(--cyan); }

/* Marquee: punto separador entre sectores */
.marquee span { position: relative; }
.marquee span::after {
  content: "";
  position: absolute; right: -27px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--grad); opacity: .5;
}

/* Reto: acento izquierdo en hover */
.prob-card { border-left: 3px solid transparent; transition: transform .3s, box-shadow .3s, border-left-color .3s; }
.prob-card:hover { border-left-color: var(--azure); }

/* Servicios: icono con color distinto por tarjeta */
.svc-card:nth-child(2) .svc-icon { background: linear-gradient(135deg, var(--green), var(--green-deep)); box-shadow: 0 12px 28px -10px rgba(69,191,91,.45); }
.svc-card:nth-child(3) .svc-icon { background: linear-gradient(135deg, #6366f1, var(--cobalt)); box-shadow: 0 12px 28px -10px rgba(99,102,241,.45); }
.svc-card:nth-child(4) .svc-icon { background: linear-gradient(135deg, var(--cobalt), #0f2f7a); box-shadow: 0 12px 28px -10px rgba(10,82,184,.45); }
.svc-card:nth-child(5) .svc-icon { background: linear-gradient(135deg, var(--azure), var(--cyan)); box-shadow: 0 12px 28px -10px rgba(25,197,239,.45); }
.svc-card:nth-child(6) .svc-icon { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 12px 28px -10px rgba(168,85,247,.45); }

/* Plan destacado: glow más pronunciado */
.plan.featured {
  box-shadow: 0 30px 70px -30px rgba(10,161,228,.55),
              0 0 60px -20px rgba(10,161,228,.18),
              inset 0 1px 0 rgba(255,255,255,.10);
}

/* Testimonios: comilla decorativa de fondo */
.tst { position: relative; overflow: hidden; }
.tst::before {
  content: "\201C";
  position: absolute; top: -8px; right: 16px;
  font-size: 6rem; line-height: 1;
  color: var(--azure); opacity: .10;
  font-family: Georgia, serif; pointer-events: none;
}

/* FAQ: estado abierto con acento de color */
.faq.open { border-color: rgba(25,197,239,.38); background: rgba(25,197,239,.03); }

/* Formulario: glow suave en foco */
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 4px rgba(10,161,228,.14);
}

/* Svc-card hover: acento verde en borde */
.svc-card:hover { border-color: rgba(25,197,239,.38); }

/* ---- PASO 1: ELEVAR ---- */

/* Hero h1: más impacto; tamaño máximo mayor, tracking más apretado */
.hero h1 { font-size: clamp(2.7rem, 5.8vw, 4.6rem); letter-spacing: -.035em; line-height: 1.03; margin-bottom: 26px; }

/* h2 de secciones: escala ligeramente mayor */
.section h2 { font-size: clamp(2.05rem, 3.8vw, 2.95rem); letter-spacing: -.022em; }

/* Lead más legible */
.hero p.lead { font-size: clamp(1.06rem, 1.7vw, 1.22rem); line-height: 1.7; }

/* ---- PASO 2: SISTEMATIZAR ---- */

/* Stat-icon: contexto visual por cada métrica */
.stat-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--grad-soft); display: grid; place-items: center; margin: 0 auto 16px; }
.stat-icon svg { width: 22px; height: 22px; color: var(--cyan); }
.stat { padding: 28px 20px; }

/* Proceso: línea conector entre pasos (sólo desktop) */
@media (min-width: 981px) {
  .proc-grid { position: relative; }
  .proc-grid::before {
    content: "";
    position: absolute;
    top: 53px;
    left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(10,161,228,.32) 20%, rgba(10,82,184,.32) 80%, transparent);
    z-index: 0;
  }
  .proc-card { position: relative; z-index: 1; }
  .proc-step { position: relative; z-index: 2; }
}

/* Footer: reemplaza borde sólido con línea de gradiente de marca */
footer { border-top: 0; position: relative; }
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--azure) 30%, var(--green) 70%, transparent 100%);
  opacity: 0.45;
}

/* Diferencial: cada stat con tratamiento de tarjeta */
.diff-stats > div {
  padding: 18px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .25s, border-color .25s;
}
.diff-stats > div:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.diff-stats b { font-size: 2.2rem; }

/* Sección light: textura de puntos sutil para diferenciarse del dark */
.section.light {
  background-color: var(--light);
  background-image: radial-gradient(rgba(10,161,228,.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Planes: hover más suave */
.plan { transition: transform .35s ease, border-color .35s, box-shadow .35s; }

/* ---- PASO 3: ACCESIBILIDAD ---- */

/* Asegurar focus-visible en todos los elementos interactivos */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, select:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Reduced-motion: sin barra de progreso animada */
@media (prefers-reduced-motion: reduce) {
  #scroll-progress { transition: none; }
  .marquee { animation-play-state: paused; }
}

/* Language switcher */
.lang-switch { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px; color: rgba(255,255,255,.88); padding: 6px 10px;
  cursor: pointer; font-size: .79rem; font-family: var(--font-body);
  transition: background .15s, border-color .15s; font-weight: 600;
  letter-spacing: .06em; line-height: 1;
}
.lang-btn:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.22); }
.lang-btn svg { opacity: .7; flex-shrink: 0; }
.lang-chevron { transition: transform .18s; opacity: .6 !important; }
.lang-switch.open .lang-chevron { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #0c1322; border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; overflow: hidden; min-width: 145px;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .18s, transform .18s; z-index: 200;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.85);
}
.lang-switch.open .lang-menu { opacity: 1; pointer-events: auto; transform: none; }
.lang-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 14px; background: none; border: 0;
  color: rgba(255,255,255,.6); cursor: pointer; font-size: .84rem;
  text-align: left; transition: background .12s, color .12s; font-family: var(--font-body);
}
.lang-menu button:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); }
.lang-menu button.lang-active { color: var(--azure); font-weight: 600; }

/* Aviso de cookies */
.cookie-consent {
  position: fixed;
  left: clamp(14px, 3vw, 34px);
  bottom: clamp(14px, 3vw, 30px);
  z-index: 500;
  width: min(520px, calc(100vw - 28px));
  padding: 1px;
  border-radius: 24px;
  background: linear-gradient(125deg, rgba(69,191,91,.75), rgba(25,197,239,.85), rgba(10,82,184,.7));
  box-shadow: 0 28px 80px -24px rgba(0,0,0,.88), 0 0 46px -18px rgba(25,197,239,.42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px) scale(.98);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.cookie-consent[hidden] { display: none; }
.cookie-consent.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.cookie-consent.is-leaving {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(.98);
}
.cookie-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px 17px;
  padding: 20px;
  border-radius: 23px;
  background:
    radial-gradient(circle at 8% 0%, rgba(25,197,239,.15), transparent 36%),
    linear-gradient(145deg, rgba(15,39,72,.98), rgba(6,14,28,.985));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}
.cookie-illustration {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px -18px rgba(0,0,0,.8);
}
.cookie-illustration svg { width: 48px; height: 48px; filter: drop-shadow(0 7px 8px rgba(0,0,0,.3)); }
.cookie-copy { align-self: center; }
.cookie-copy h2 {
  margin: 0 0 6px;
  color: #fff;
  font: 700 1.06rem/1.25 var(--font-head);
  letter-spacing: -.015em;
}
.cookie-copy p {
  margin: 0;
  color: var(--on-dark-muted);
  font-size: .86rem;
  line-height: 1.55;
}
.cookie-actions {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cookie-choice {
  min-height: 43px;
  padding: 11px 16px;
  border-radius: 12px;
  color: #fff;
  font: 700 .86rem/1 var(--font-body);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.cookie-reject {
  border: 1px solid rgba(25,197,239,.7);
  background: rgba(10,161,228,.12);
  box-shadow: 0 12px 25px -16px rgba(10,161,228,.8);
}
.cookie-accept {
  border: 1px solid rgba(25,197,239,.75);
  background: var(--grad-cta);
  box-shadow: 0 12px 25px -13px rgba(10,161,228,.9);
}
.cookie-choice:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 16px 30px -13px rgba(25,197,239,.95);
}
.cookie-choice:active { transform: translateY(0); }
@media (max-width: 560px) {
  .cookie-card { grid-template-columns: 54px 1fr; gap: 13px; padding: 16px; }
  .cookie-illustration { width: 54px; height: 54px; border-radius: 17px; }
  .cookie-illustration svg { width: 41px; height: 41px; }
  .cookie-actions { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-consent, .cookie-choice { transition: none; }
}


/* 2026-09-26: navegación tablet + detalle de planes */
@media (min-width:681px) and (max-width:1180px){
  .nav-inner{display:grid;grid-template-columns:auto 1fr auto;gap:14px;}
  .nav-inner>nav{min-width:0;display:flex;justify-content:center;}
  .nav-links{gap:clamp(12px,1.7vw,22px);justify-content:center;}
  .nav-links a{font-size:clamp(.78rem,1.15vw,.9rem);}
  .nav-cta{gap:9px;}
  .nav-cta>.btn{display:none;}
  .brand-logo{width:150px;height:58px;}
}
.plan-modal[hidden]{display:none;}
.plan-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;}
.plan-modal-backdrop{position:absolute;inset:0;background:rgba(3,9,18,.78);backdrop-filter:blur(8px);}
.plan-modal-dialog{position:relative;z-index:1;width:min(860px,100%);max-height:min(780px,calc(100vh - 48px));overflow:auto;background:var(--deep-2);border:1px solid var(--glass-border);border-radius:24px;padding:38px;box-shadow:0 35px 90px -30px rgba(0,0,0,.8);}
.plan-modal-dialog h2{font-size:clamp(1.8rem,4vw,2.65rem);margin-bottom:12px;}
.plan-modal-intro,.plan-modal-note,.plan-modal-dialog p{color:var(--on-dark-muted);}
.plan-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:28px 0;}
.plan-modal-grid h3{font-size:1.05rem;margin-bottom:14px;}
.plan-modal-grid ul{list-style:none;display:grid;gap:10px;}
.plan-modal-grid li{position:relative;padding-left:22px;color:var(--on-dark-muted);}
.plan-modal-grid li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800;}
.plan-maintenance{margin-top:20px;padding:18px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-border);}
.plan-maintenance b,.plan-maintenance span{display:block;}
.plan-maintenance b{margin-bottom:5px;color:var(--on-dark);}
.plan-maintenance span{color:var(--on-dark-muted);font-size:.9rem;}
.plan-modal-note{font-size:.86rem;margin-bottom:22px;}
.plan-modal-close{position:absolute;top:15px;right:17px;width:40px;height:40px;border:1px solid var(--glass-border);border-radius:50%;background:var(--glass);color:var(--on-dark);font-size:1.6rem;cursor:pointer;}
body.plan-modal-open{overflow:hidden;}
@media(max-width:680px){
  .plan-modal{padding:12px;}
  .plan-modal-dialog{padding:30px 22px 24px;max-height:calc(100vh - 24px);}
  .plan-modal-grid{grid-template-columns:1fr;gap:20px;}
}


/* 2026-09-26: proceso como recorrido visual, no como tarjetas */
#proceso .proc-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px;
  padding:28px 12px 8px;
  align-items:start;
}
#proceso .proc-grid::before{
  content:"";
  position:absolute;
  z-index:0;
  left:8%; right:8%; top:57px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--azure) 48%,var(--cobalt));
  opacity:.28;
}
#proceso .proc-card{
  position:relative;
  z-index:1;
  padding:0 10px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:center;
  transition:transform .25s ease;
}
#proceso .proc-card:nth-child(even){margin-top:72px;}
#proceso .proc-card:hover{transform:translateY(-4px);box-shadow:none;}
#proceso .proc-step{
  position:relative;
  width:58px;height:58px;
  margin:0 auto 22px;
  border:7px solid #fff;
  box-shadow:0 0 0 1px rgba(10,161,228,.16),0 12px 30px -12px rgba(10,82,184,.55);
  font-size:1rem;
}
#proceso .proc-step::after{
  content:"";
  position:absolute;
  inset:-13px;
  border:1px solid rgba(10,161,228,.17);
  border-radius:50%;
}
#proceso .proc-card h3{font-size:1.08rem;margin-bottom:9px;}
#proceso .proc-card p{max-width:230px;margin:0 auto;color:var(--on-light-muted);font-size:.92rem;}
@media (min-width:981px){
  #proceso .proc-grid::after{
    content:"→";
    position:absolute;
    right:5.4%;top:37px;
    color:var(--cobalt);
    font-size:1.6rem;
    font-weight:800;
    opacity:.55;
  }
}
@media (max-width:980px) and (min-width:681px){
  #proceso .proc-grid{grid-template-columns:repeat(2,1fr);gap:42px 54px;padding-inline:50px;}
  #proceso .proc-grid::before{left:25%;top:57px;bottom:80px;width:50%;height:auto;background:linear-gradient(180deg,var(--green),var(--azure),var(--cobalt));opacity:.12;}
  #proceso .proc-card:nth-child(even){margin-top:46px;}
}
@media (max-width:680px){
  #proceso .proc-grid{display:flex;flex-direction:column;gap:0;padding:8px 0 0 8px;}
  #proceso .proc-grid::before{left:35px;right:auto;top:24px;bottom:40px;width:3px;height:auto;background:linear-gradient(180deg,var(--green),var(--azure),var(--cobalt));opacity:.28;}
  #proceso .proc-card,#proceso .proc-card:nth-child(even){display:grid;grid-template-columns:58px 1fr;column-gap:20px;margin:0;padding:0 0 34px;text-align:left;}
  #proceso .proc-step{grid-row:1 / span 2;grid-column:1;margin:0;border-width:6px;}
  #proceso .proc-card h3{grid-column:2;margin:7px 0 7px;}
  #proceso .proc-card p{grid-column:2;margin:0;max-width:none;}
}


/* 2026-09-26: variación editorial para reducir repetición de tarjetas */
.prob-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--light-2);
  border-bottom:1px solid var(--light-2);
}
.prob-card{
  position:relative;
  background:transparent;
  border:0;
  border-radius:0;
  padding:38px 38px 38px 0;
  box-shadow:none;
}
.prob-card + .prob-card{padding-left:38px;border-left:1px solid var(--light-2);}
.prob-card:hover{transform:none;box-shadow:none;}
.prob-num{
  font-family:var(--font-display);
  font-size:clamp(2.7rem,5vw,4.6rem);
  line-height:1;
  font-weight:800;
  letter-spacing:-.07em;
  color:transparent;
  -webkit-text-stroke:1px rgba(10,82,184,.28);
  margin-bottom:24px;
}
.prob-card h3{max-width:250px;}
@media(max-width:760px){
  .prob-grid{grid-template-columns:1fr;}
  .prob-card,.prob-card + .prob-card{padding:26px 0;border-left:0;border-top:1px solid var(--light-2);}
  .prob-card:first-child{border-top:0;}
  .prob-card{display:grid;grid-template-columns:62px 1fr;gap:0 18px;}
  .prob-num{grid-row:1 / span 2;font-size:2.6rem;margin:0;}
  .prob-card h3,.prob-card p{grid-column:2;}
}

/* Compromisos como manifiesto numerado */
.tst-grid{
  display:block;
  max-width:980px;
  margin:0 auto;
  border-top:1px solid var(--light-2);
}
.tst{
  display:grid;
  grid-template-columns:minmax(170px,.7fr) minmax(260px,1.4fr);
  align-items:center;
  gap:40px;
  padding:28px 4px;
  border:0;
  border-bottom:1px solid var(--light-2);
  border-radius:0;
  background:transparent;
}
.tst .who{grid-column:1;grid-row:1;align-items:center;}
.tst>p{grid-column:2;grid-row:1;font-size:1.02rem;margin:0;color:var(--on-light-muted);}
.tst .av{
  width:42px;height:42px;
  background:transparent;
  color:var(--cobalt);
  border:1px solid rgba(10,82,184,.22);
  font-family:var(--font-display);
  font-size:.78rem;
}
.tst:hover{transform:none;box-shadow:none;}
@media(max-width:680px){
  .tst{grid-template-columns:1fr;gap:12px;padding:24px 0;}
  .tst .who,.tst>p{grid-column:1;grid-row:auto;}
  .tst>p{padding-left:60px;}
}

/* 2026-09-27: detalle comercial ampliado de planes */
.plan-modal-audience{margin:20px 0 4px;padding:15px 18px;border-left:3px solid var(--azure);background:rgba(10,161,228,.055);border-radius:0 12px 12px 0;}
.plan-modal-audience b,.plan-modal-audience span{display:block;}
.plan-modal-audience b{color:var(--on-dark);font-size:.84rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;}
.plan-modal-audience span{color:var(--on-dark-muted);line-height:1.55;}
.plan-maintenance{margin-top:8px;}
.plan-maintenance .plan-renewal{margin-top:14px;}

/* 2026-09-27: auditoría responsive global */
img,svg,video,iframe{max-width:100%;}
.wrap,.nav-inner,.hero-grid,.cta-grid,.about-grid{min-width:0;}
.plan,.svc-card,.prob-card,.tst,.faq,.form-card{min-width:0;}
.plan h3,.plan p,.section-head h2,.section-head p,.about-copy h2,.about-copy p{overflow-wrap:anywhere;}
@media(max-width:980px){.plan-modal-dialog{width:min(760px,100%);}.plan-modal-grid{gap:22px}.plan-modal-dialog{padding:34px 30px}}
@media(max-width:680px){
  .wrap{width:min(100% - 32px,var(--max));}
  .plan-modal{padding:8px;align-items:end}.plan-modal-dialog{width:100%;max-height:calc(100dvh - 16px);padding:30px 18px 20px;border-radius:20px 20px 14px 14px;overscroll-behavior:contain}
  .plan-modal-dialog h2{font-size:1.65rem;padding-right:34px}.plan-modal-intro{font-size:.94rem}.plan-modal-grid{grid-template-columns:1fr;gap:22px;margin:22px 0}.plan-modal-grid ul{gap:8px}.plan-modal-audience{padding:13px 14px;margin-top:17px}.plan-maintenance{padding:15px}.plan-modal-note{line-height:1.5}.plan-modal-dialog .btn{width:100%;text-align:center;justify-content:center}
  .form-card,.plan{max-width:100%;overflow:hidden}
  .cta-grid input,.cta-grid textarea,.cta-grid select{max-width:100%;min-width:0}
}

/* 2026-09-27: detalle interactivo de servicios */
.svc-card[data-service-details]{cursor:pointer;}
.svc-card[data-service-details]:focus-visible{outline:2px solid var(--azure);outline-offset:4px;}
.service-modal[hidden]{display:none}.service-modal{position:fixed;inset:0;z-index:305;display:grid;place-items:center;padding:24px}.service-modal-backdrop{position:absolute;inset:0;background:rgba(3,9,18,.78);backdrop-filter:blur(8px)}.service-modal-dialog{position:relative;z-index:1;width:min(820px,100%);max-height:min(760px,calc(100vh - 48px));overflow:auto;background:var(--deep-2);border:1px solid var(--glass-border);border-radius:24px;padding:38px;box-shadow:0 35px 90px -30px rgba(0,0,0,.8)}.service-modal-dialog h2{font-size:clamp(1.8rem,4vw,2.55rem);margin-bottom:12px}.service-modal-intro,.service-modal-note,.service-modal-dialog p{color:var(--on-dark-muted)}.service-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:28px 0}.service-modal-grid h3{font-size:1.05rem;margin-bottom:14px}.service-modal-grid ul{list-style:none;display:grid;gap:10px}.service-modal-grid li{position:relative;padding-left:22px;color:var(--on-dark-muted)}.service-modal-grid li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:800}.service-modal-note{padding:14px 16px;border-left:3px solid var(--azure);background:rgba(10,161,228,.055);border-radius:0 12px 12px 0;font-size:.86rem;line-height:1.55;margin-bottom:22px}.service-modal-close{position:absolute;top:15px;right:17px;width:40px;height:40px;border:1px solid var(--glass-border);border-radius:50%;background:var(--glass);color:var(--on-dark);font-size:1.6rem;cursor:pointer}body.service-modal-open{overflow:hidden}
@media(max-width:680px){.service-modal{padding:8px;align-items:end}.service-modal-dialog{width:100%;max-height:calc(100dvh - 16px);padding:30px 18px 20px;border-radius:20px 20px 14px 14px;overscroll-behavior:contain}.service-modal-dialog h2{font-size:1.65rem;padding-right:34px}.service-modal-intro{font-size:.94rem}.service-modal-grid{grid-template-columns:1fr;gap:22px;margin:22px 0}.service-modal-grid ul{gap:8px}.service-modal-dialog .btn{width:100%;text-align:center;justify-content:center}}

/* 2026-09-27: proceso conectado 1 → 2 → 3 → 4 */
#proceso .proc-grid{position:relative;}
#proceso .proc-step{position:relative;z-index:3;background:var(--light);box-shadow:0 0 0 8px var(--light);}
@media(min-width:981px){
  #proceso .proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;padding-top:20px;}
  #proceso .proc-grid::before{content:'';position:absolute;z-index:0;left:12.5%;right:12.5%;top:73px;height:46px;border-top:3px solid rgba(10,161,228,.38);border-radius:50%;background:none;opacity:1;}
  #proceso .proc-card{position:relative;z-index:1;margin:0!important;}
  #proceso .proc-card:nth-child(even){padding-top:42px;}
  #proceso .proc-card:nth-child(even) .proc-step{transform:translateY(-42px);margin-bottom:-30px;}
  #proceso .proc-card:not(:last-child)::after{content:'›';position:absolute;z-index:4;top:20px;right:-23px;color:var(--azure);font-size:2rem;font-weight:800;line-height:1;}
  #proceso .proc-card:nth-child(even)::after{top:62px;}
  #proceso .proc-grid::after{display:none!important;}
}
@media(min-width:681px) and (max-width:980px){
  #proceso .proc-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 70px;padding:18px 42px 0;}
  #proceso .proc-grid::before{content:'';position:absolute;left:25%;right:25%;top:72px;bottom:90px;width:auto;height:auto;border:3px solid rgba(10,161,228,.22);border-left-color:rgba(69,191,91,.28);border-radius:90px;background:none;opacity:1;}
  #proceso .proc-card,#proceso .proc-card:nth-child(even){margin:0;padding:0;position:relative;z-index:1;}
  #proceso .proc-card:nth-child(3),#proceso .proc-card:nth-child(4){margin-top:38px;}
}
@media(max-width:680px){
  #proceso .proc-grid{display:flex;flex-direction:column;gap:0;padding:8px 0 0 6px;}
  #proceso .proc-grid::before{content:'';position:absolute;left:34px;top:30px;bottom:48px;width:3px;height:auto;border:0;border-radius:4px;background:linear-gradient(180deg,var(--green),var(--azure) 50%,var(--cobalt));opacity:.5;}
  #proceso .proc-card,#proceso .proc-card:nth-child(even){display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:20px;margin:0;padding:0 0 38px;text-align:left;position:relative;z-index:1;}
  #proceso .proc-step,#proceso .proc-card:nth-child(even) .proc-step{grid-row:1 / span 2;grid-column:1;margin:0;transform:none;box-shadow:0 0 0 6px var(--light);}
  #proceso .proc-card:not(:last-child)::after{content:'↓';position:absolute;left:26px;bottom:5px;color:var(--azure);font-size:1.05rem;font-weight:800;z-index:4;background:var(--light);line-height:1;}
}


/* 2026-09-27: proceso serpenteante inspirado en recorrido continuo */
#proceso .proc-grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:250px 250px;
  gap:0;
  max-width:1000px;
  min-height:600px;
  margin:0 auto;
  padding:0;
}
#proceso .proc-grid::before,#proceso .proc-grid::after{display:none!important;}
#proceso .proc-route{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:0;
}
#proceso .proc-route-line{
  fill:none;
  stroke:url(#procRouteGradient);
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.48;
}
#proceso .proc-card{
  position:absolute;
  z-index:2;
  width:260px;
  padding:0;
  margin:0!important;
  border:0;
  background:transparent;
  box-shadow:none;
  text-align:center;
}
#proceso .proc-card:nth-of-type(1){left:50px;top:30px;}
#proceso .proc-card:nth-of-type(2){right:45px;top:30px;}
#proceso .proc-card:nth-of-type(3){left:180px;top:270px;}
#proceso .proc-card:nth-of-type(4){right:70px;top:460px;}
#proceso .proc-card:hover{transform:translateY(-4px);box-shadow:none;}
#proceso .proc-step{
  position:relative;
  width:76px;height:76px;
  margin:0 auto 17px;
  border:8px solid #fff;
  border-radius:50%;
  background:var(--grad-cta);
  box-shadow:0 0 0 3px rgba(10,161,228,.20),0 14px 32px -15px rgba(10,82,184,.65);
  color:#fff;
  font-size:1.05rem;
}
#proceso .proc-step::after{display:none;}
#proceso .proc-card h3{font-size:1.08rem;margin-bottom:8px;}
#proceso .proc-card p{max-width:245px;margin:0 auto;color:var(--on-light-muted);font-size:.91rem;}

@media(max-width:980px){
  #proceso .proc-grid{max-width:720px;min-height:560px;}
  #proceso .proc-route{opacity:.9;}
  #proceso .proc-card{width:220px;}
  #proceso .proc-card:nth-of-type(1){left:15px;}
  #proceso .proc-card:nth-of-type(2){right:15px;}
  #proceso .proc-card:nth-of-type(3){left:100px;top:270px;}
  #proceso .proc-card:nth-of-type(4){right:25px;top:440px;}
}
@media(max-width:680px){
  #proceso .proc-grid{display:flex;flex-direction:column;min-height:0;padding:8px 0 0 8px;gap:0;}
  #proceso .proc-route{display:none;}
  #proceso .proc-grid::before{
    display:block!important;
    content:"";
    position:absolute;
    left:36px;top:25px;bottom:46px;width:4px;height:auto;
    border-radius:99px;
    background:linear-gradient(180deg,var(--green),var(--azure),var(--cobalt));
    opacity:.35;
  }
  #proceso .proc-card,#proceso .proc-card:nth-of-type(1),#proceso .proc-card:nth-of-type(2),#proceso .proc-card:nth-of-type(3),#proceso .proc-card:nth-of-type(4){
    position:relative;left:auto;right:auto;top:auto;width:100%;
    display:grid;grid-template-columns:62px 1fr;column-gap:20px;
    padding:0 0 38px;text-align:left;
  }
  #proceso .proc-step{grid-row:1 / span 2;grid-column:1;width:60px;height:60px;margin:0;border-width:6px;}
  #proceso .proc-card h3{grid-column:2;margin:7px 0;}
  #proceso .proc-card p{grid-column:2;margin:0;max-width:none;}
}


/* 2026-09-27 FINAL: recorrido HUMA coherente en desktop, tablet y móvil.
   Este bloque prevalece sobre iteraciones anteriores del proceso. */
#proceso{overflow:hidden;}
#proceso .section-head{margin-bottom:34px;}
#proceso .proc-grid{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:1000px!important;
  height:520px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:0!important;
}
#proceso .proc-grid::before,#proceso .proc-grid::after{display:none!important;}
#proceso .proc-route{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;height:100%!important;
  z-index:0!important;overflow:visible!important;pointer-events:none!important;
}
#proceso .proc-route-line{
  fill:none!important;stroke:url(#procRouteGradient)!important;
  stroke-width:5!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  opacity:.38!important;
}
#proceso .proc-card{
  position:absolute!important;z-index:2!important;
  width:250px!important;margin:0!important;padding:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
  text-align:center!important;
}
#proceso .proc-card:nth-of-type(1){left:4%!important;top:44px!important;}
#proceso .proc-card:nth-of-type(2){left:37.5%!important;top:44px!important;}
#proceso .proc-card:nth-of-type(3){right:4%!important;left:auto!important;top:44px!important;}
#proceso .proc-card:nth-of-type(4){right:7%!important;left:auto!important;top:400px!important;}
#proceso .proc-step{
  display:grid!important;place-items:center!important;position:relative!important;
  width:76px!important;height:76px!important;margin:0 auto 16px!important;
  border:7px solid #f4f8fc!important;border-radius:50%!important;
  background:linear-gradient(135deg,var(--green),var(--azure) 55%,var(--cobalt))!important;
  box-shadow:0 0 0 2px rgba(10,161,228,.16),0 14px 30px -17px rgba(10,82,184,.7)!important;
  color:#fff!important;font:800 1.05rem/1 var(--font-display)!important;
  transform:none!important;
}
#proceso .proc-step::after{display:none!important;}
#proceso .proc-card h3{font-size:1.06rem!important;margin:0 0 7px!important;color:var(--on-light)!important;}
#proceso .proc-card p{max-width:235px!important;margin:0 auto!important;color:var(--on-light-muted)!important;font-size:.9rem!important;line-height:1.55!important;}
#proceso .proc-card:hover{transform:translateY(-3px)!important;box-shadow:none!important;}
#proceso .proc-card::after{display:none!important;}

@media (min-width:681px) and (max-width:980px){
  #proceso .proc-grid{max-width:720px!important;height:600px!important;}
  #proceso .proc-route{display:none!important;}
  #proceso .proc-grid::before{
    display:block!important;content:""!important;position:absolute!important;
    left:50%!important;top:48px!important;bottom:52px!important;width:4px!important;height:auto!important;
    transform:translateX(-50%)!important;border:0!important;border-radius:99px!important;
    background:linear-gradient(180deg,var(--green),var(--azure) 52%,var(--cobalt))!important;opacity:.28!important;
  }
  #proceso .proc-card{width:44%!important;text-align:left!important;}
  #proceso .proc-card:nth-of-type(1){left:2%!important;right:auto!important;top:22px!important;}
  #proceso .proc-card:nth-of-type(2){left:auto!important;right:2%!important;top:160px!important;}
  #proceso .proc-card:nth-of-type(3){left:2%!important;right:auto!important;top:300px!important;}
  #proceso .proc-card:nth-of-type(4){left:auto!important;right:2%!important;top:438px!important;}
  #proceso .proc-step{margin:0 0 13px!important;}
  #proceso .proc-card:nth-of-type(2) .proc-step,#proceso .proc-card:nth-of-type(4) .proc-step{margin-left:auto!important;margin-right:0!important;}
  #proceso .proc-card:nth-of-type(2),#proceso .proc-card:nth-of-type(4){text-align:right!important;}
  #proceso .proc-card p{margin:0!important;max-width:270px!important;}
  #proceso .proc-card:nth-of-type(2) p,#proceso .proc-card:nth-of-type(4) p{margin-left:auto!important;}
}
@media (max-width:680px){
  #proceso .section-head{margin-bottom:28px;}
  #proceso .proc-grid{height:auto!important;min-height:610px!important;padding:0 2px!important;}
  #proceso .proc-route{display:none!important;}
  #proceso .proc-grid::before{
    display:block!important;content:""!important;position:absolute!important;
    left:31px!important;top:32px!important;bottom:38px!important;width:4px!important;height:auto!important;
    border:0!important;border-radius:99px!important;
    background:linear-gradient(180deg,var(--green),var(--azure) 52%,var(--cobalt))!important;opacity:.3!important;
  }
  #proceso .proc-card,#proceso .proc-card:nth-of-type(1),#proceso .proc-card:nth-of-type(2),#proceso .proc-card:nth-of-type(3),#proceso .proc-card:nth-of-type(4){
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;
    width:100%!important;min-height:145px!important;
    display:grid!important;grid-template-columns:62px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;column-gap:18px!important;align-content:start!important;
    padding:0 0 24px!important;text-align:left!important;
  }
  #proceso .proc-step{
    grid-column:1!important;grid-row:1 / span 2!important;
    width:60px!important;height:60px!important;margin:0!important;border-width:6px!important;
  }
  #proceso .proc-card h3{grid-column:2!important;grid-row:1!important;margin:7px 0 6px!important;font-size:1rem!important;}
  #proceso .proc-card p{grid-column:2!important;grid-row:2!important;margin:0!important;max-width:none!important;font-size:.89rem!important;}
}

/* 2026-09-27g: recorrido orgánico continuo del proceso */
#proceso .proc-path{position:absolute;z-index:0;pointer-events:none;overflow:visible;}
#proceso .proc-path path{fill:none;stroke:url(#none);stroke:rgba(10,161,228,.34);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
#proceso .proc-card::after{display:none!important;}
@media(min-width:981px){
  #proceso .proc-grid::before,#proceso .proc-grid::after{display:none!important;}
  #proceso .proc-grid{grid-template-columns:repeat(4,1fr);gap:34px;padding-top:20px;min-height:300px;}
  #proceso .proc-path{display:block;left:0;top:0;width:100%;height:210px;}
  #proceso .proc-card{padding-top:38px!important;}
  #proceso .proc-card:nth-child(even){padding-top:112px!important;}
  #proceso .proc-card:nth-child(even) .proc-step{transform:none;margin-bottom:18px;}
}
@media(min-width:681px) and (max-width:980px){
  #proceso .proc-grid::before,#proceso .proc-grid::after{display:none!important;}
  #proceso .proc-path{display:none;}
  #proceso .proc-grid{grid-template-columns:1fr 1fr;gap:54px 70px;padding:18px 42px 0;}
  #proceso .proc-card{position:relative;padding-left:0!important;}
  #proceso .proc-card:nth-child(2),#proceso .proc-card:nth-child(4){transform:translateY(34px);}
  #proceso .proc-card::before{content:'';position:absolute;z-index:0;left:52px;top:52px;width:calc(100% + 70px);height:calc(100% + 42px);border:3px solid rgba(10,161,228,.26);border-left:0;border-bottom:0;border-radius:0 70px 0 0;pointer-events:none;}
  #proceso .proc-card:nth-child(2)::before{left:auto;right:52px;border-left:3px solid rgba(10,161,228,.26);border-right:0;border-top:0;border-bottom:3px solid rgba(10,161,228,.26);border-radius:0 0 0 70px;}
  #proceso .proc-card:nth-child(3)::before{border-bottom:0;}
  #proceso .proc-card:last-child::before{display:none;}
}
@media(max-width:680px){
  #proceso .proc-grid::before,#proceso .proc-grid::after{display:none!important;}
  #proceso .proc-path{display:none;}
  #proceso .proc-grid{padding:12px 0 0;gap:0;}
  #proceso .proc-card,#proceso .proc-card:nth-child(even){grid-template-columns:72px minmax(0,1fr);column-gap:18px;padding:0 0 48px!important;transform:none;}
  #proceso .proc-card:nth-child(even){grid-template-columns:minmax(0,1fr) 72px;text-align:right;}
  #proceso .proc-card:nth-child(even) .proc-step{grid-column:2;grid-row:1 / span 2;justify-self:end;}
  #proceso .proc-card:nth-child(even) h3,#proceso .proc-card:nth-child(even) p{grid-column:1;}
  #proceso .proc-card:nth-child(odd) .proc-step{grid-column:1;grid-row:1 / span 2;}
  #proceso .proc-card:nth-child(odd) h3,#proceso .proc-card:nth-child(odd) p{grid-column:2;}
  #proceso .proc-card::before{content:'';position:absolute;z-index:0;top:46px;height:calc(100% - 2px);width:calc(100% - 68px);border:3px solid rgba(10,161,228,.28);pointer-events:none;}
  #proceso .proc-card:nth-child(odd)::before{left:35px;border-left:3px solid rgba(69,191,91,.30);border-bottom:3px solid rgba(10,161,228,.28);border-top:0;border-right:3px solid rgba(10,161,228,.28);border-radius:0 0 54px 0;}
  #proceso .proc-card:nth-child(even)::before{right:35px;border-right:3px solid rgba(10,82,184,.30);border-bottom:3px solid rgba(10,161,228,.28);border-top:0;border-left:3px solid rgba(10,161,228,.28);border-radius:0 0 0 54px;}
  #proceso .proc-card:last-child::before{display:none;}
  #proceso .proc-step,#proceso .proc-card:nth-child(even) .proc-step{position:relative;z-index:2;margin:0;transform:none;box-shadow:0 0 0 7px var(--light);}
  #proceso .proc-card h3{margin-top:7px;}
}

/* 2026-09-27h — auditoría final: geometría autoritativa del proceso */
#proceso{overflow:hidden;}
#proceso .proc-route{display:none!important;}
#proceso .proc-grid,#proceso .proc-card,#proceso .proc-step{box-sizing:border-box;}
#proceso .proc-grid::before,#proceso .proc-grid::after,#proceso .proc-card::before,#proceso .proc-card::after{content:none!important;display:none!important;}
#proceso .proc-card:hover{transform:none!important;}
@media(min-width:981px){
 #proceso .proc-grid{position:relative!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:34px!important;width:100%!important;max-width:1120px!important;height:auto!important;min-height:330px!important;margin:0 auto!important;padding:36px 0 0!important;align-items:start!important;}
 #proceso .proc-path{display:block!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:190px!important;z-index:0!important;overflow:visible!important;}
 #proceso .proc-path path{fill:none!important;stroke:rgba(10,161,228,.34)!important;stroke-width:4!important;stroke-linecap:round!important;stroke-linejoin:round!important;vector-effect:non-scaling-stroke!important;}
 #proceso .proc-card,#proceso .proc-card:nth-of-type(n){position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:auto!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;text-align:center!important;z-index:2!important;background:transparent!important;border:0!important;box-shadow:none!important;}
 #proceso .proc-card:nth-of-type(2),#proceso .proc-card:nth-of-type(4){margin-top:72px!important;}
 #proceso .proc-step,#proceso .proc-card:nth-of-type(n) .proc-step{display:grid!important;place-items:center!important;width:76px!important;height:76px!important;margin:0 auto 18px!important;transform:none!important;border:7px solid #f4f8fc!important;border-radius:50%!important;background:linear-gradient(135deg,var(--green),var(--azure) 55%,var(--cobalt))!important;box-shadow:0 0 0 2px rgba(10,161,228,.16),0 14px 30px -17px rgba(10,82,184,.7)!important;color:#fff!important;position:relative!important;z-index:3!important;}
 #proceso .proc-card h3{margin:0 auto 8px!important;max-width:245px!important;}
 #proceso .proc-card p{margin:0 auto!important;max-width:245px!important;}
}
@media(min-width:681px) and (max-width:980px){
 #proceso .proc-grid{position:relative!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:58px 64px!important;width:100%!important;max-width:720px!important;height:auto!important;min-height:0!important;margin:0 auto!important;padding:20px 28px 12px!important;}
 #proceso .proc-path{display:none!important;}
 #proceso .proc-card,#proceso .proc-card:nth-of-type(n){position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:auto!important;min-height:190px!important;margin:0!important;padding:0!important;text-align:center!important;transform:none!important;}
 #proceso .proc-card:nth-of-type(2),#proceso .proc-card:nth-of-type(4){margin-top:54px!important;}
 #proceso .proc-card:nth-of-type(1)::after,#proceso .proc-card:nth-of-type(3)::after{content:''!important;display:block!important;position:absolute!important;z-index:0!important;left:50%!important;top:38px!important;width:calc(100% + 64px)!important;height:150px!important;border:3px solid rgba(10,161,228,.26)!important;border-left:0!important;border-bottom:0!important;border-radius:0 78px 0 0!important;pointer-events:none!important;}
 #proceso .proc-card:nth-of-type(2)::after{content:''!important;display:block!important;position:absolute!important;z-index:0!important;right:50%!important;top:128px!important;width:calc(100% + 64px)!important;height:120px!important;border:3px solid rgba(10,161,228,.26)!important;border-right:0!important;border-top:0!important;border-radius:0 0 0 78px!important;pointer-events:none!important;}
 #proceso .proc-step{position:relative!important;z-index:2!important;margin:0 auto 15px!important;transform:none!important;}
 #proceso .proc-card p{margin:0 auto!important;max-width:270px!important;}
}
@media(max-width:680px){
 #proceso .proc-path{display:none!important;}
 #proceso .proc-grid{position:relative!important;display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:10px 0 0!important;gap:0!important;}
 #proceso .proc-card,#proceso .proc-card:nth-of-type(n){position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;min-height:150px!important;margin:0!important;padding:0 0 34px!important;display:grid!important;grid-template-columns:68px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:18px!important;text-align:left!important;transform:none!important;}
 #proceso .proc-card:nth-of-type(even){grid-template-columns:minmax(0,1fr) 68px!important;text-align:right!important;}
 #proceso .proc-card:nth-of-type(odd) .proc-step{grid-column:1!important;grid-row:1/span 2!important;}
 #proceso .proc-card:nth-of-type(odd) h3,#proceso .proc-card:nth-of-type(odd) p{grid-column:2!important;}
 #proceso .proc-card:nth-of-type(even) .proc-step{grid-column:2!important;grid-row:1/span 2!important;}
 #proceso .proc-card:nth-of-type(even) h3,#proceso .proc-card:nth-of-type(even) p{grid-column:1!important;}
 #proceso .proc-card:not(:last-of-type)::after{content:''!important;display:block!important;position:absolute!important;top:30px!important;height:calc(100% - 10px)!important;width:calc(100% - 66px)!important;border-bottom:3px solid rgba(10,161,228,.30)!important;pointer-events:none!important;z-index:0!important;}
 #proceso .proc-card:nth-of-type(odd):not(:last-of-type)::after{left:34px!important;border-left:3px solid rgba(69,191,91,.30)!important;border-right:3px solid rgba(10,161,228,.30)!important;border-radius:0 0 52px 0!important;}
 #proceso .proc-card:nth-of-type(even):not(:last-of-type)::after{right:34px!important;border-right:3px solid rgba(10,82,184,.30)!important;border-left:3px solid rgba(10,161,228,.30)!important;border-radius:0 0 0 52px!important;}
 #proceso .proc-step,#proceso .proc-card:nth-of-type(n) .proc-step{position:relative!important;z-index:2!important;width:60px!important;height:60px!important;margin:0!important;transform:none!important;box-shadow:0 0 0 6px var(--light)!important;}
 #proceso .proc-card h3{margin:7px 0 6px!important;}
 #proceso .proc-card p{margin:0!important;max-width:none!important;}
}

/* Auditoría de grids y cabecera en anchos intermedios */
@media(min-width:981px) and (max-width:1180px){.nav-links{gap:14px!important}.nav-links a{font-size:.82rem!important}.brand-logo{width:148px!important}.hero-grid{gap:38px!important}.svc-grid,.plans-grid{gap:18px!important}.plan{padding-inline:24px!important}}
@media(min-width:681px) and (max-width:900px){.svc-grid,.plans-grid,.tst-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.plans-grid .plan:last-child{grid-column:1/-1;width:min(360px,100%);justify-self:center}.plan.featured{transform:none!important}}

/* 2026-09-27i — proceso estable: ruta independiente del contenido */
#proceso .proc-path-mobile{display:none!important;}
@media(min-width:981px){
 #proceso .proc-path-desktop{display:block!important;}
 #proceso .proc-card:nth-of-type(2),#proceso .proc-card:nth-of-type(4){margin-top:72px!important;}
}
@media(min-width:681px) and (max-width:980px){
 #proceso .proc-card::before,#proceso .proc-card::after{content:none!important;display:none!important;}
 #proceso .proc-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:48px 56px!important;padding:24px!important;}
 #proceso .proc-card,#proceso .proc-card:nth-of-type(n){position:relative!important;width:auto!important;min-height:170px!important;margin:0!important;text-align:center!important;}
 #proceso .proc-card:nth-of-type(2),#proceso .proc-card:nth-of-type(4){margin-top:46px!important;}
 #proceso .proc-path-desktop{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:.8!important;}
 #proceso .proc-path-desktop path{stroke:rgba(10,161,228,.24)!important;stroke-width:4!important;}
}
@media(max-width:680px){
 #proceso{overflow:hidden!important;}
 #proceso .proc-grid{position:relative!important;display:block!important;width:100%!important;height:620px!important;min-height:620px!important;padding:0!important;margin:0!important;}
 #proceso .proc-grid::before,#proceso .proc-grid::after,#proceso .proc-card::before,#proceso .proc-card::after{content:none!important;display:none!important;}
 #proceso .proc-path-desktop{display:none!important;}
 #proceso .proc-path-mobile{display:block!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:620px!important;z-index:0!important;overflow:visible!important;}
 #proceso .proc-path-mobile path{fill:none!important;stroke:rgba(10,161,228,.30)!important;stroke-width:4!important;stroke-linecap:round!important;stroke-linejoin:round!important;vector-effect:non-scaling-stroke!important;}
 #proceso .proc-card,#proceso .proc-card:nth-of-type(n){position:absolute!important;display:block!important;width:calc(100% - 92px)!important;min-height:0!important;margin:0!important;padding:0!important;left:auto!important;right:auto!important;top:auto!important;text-align:left!important;z-index:2!important;}
 #proceso .proc-card:nth-of-type(1){left:0!important;top:10px!important;padding-left:78px!important;}
 #proceso .proc-card:nth-of-type(2){right:0!important;top:160px!important;padding-right:78px!important;text-align:right!important;}
 #proceso .proc-card:nth-of-type(3){left:0!important;top:310px!important;padding-left:78px!important;}
 #proceso .proc-card:nth-of-type(4){right:0!important;top:460px!important;padding-right:78px!important;text-align:right!important;}
 #proceso .proc-step,#proceso .proc-card:nth-of-type(n) .proc-step{position:absolute!important;top:0!important;width:60px!important;height:60px!important;margin:0!important;border-width:6px!important;box-shadow:0 0 0 6px var(--light)!important;}
 #proceso .proc-card:nth-of-type(odd) .proc-step{left:4px!important;}
 #proceso .proc-card:nth-of-type(even) .proc-step{right:4px!important;left:auto!important;}
 #proceso .proc-card h3,#proceso .proc-card:nth-of-type(n) h3{display:block!important;margin:6px 0 7px!important;max-width:none!important;font-size:1rem!important;line-height:1.3!important;}
 #proceso .proc-card p,#proceso .proc-card:nth-of-type(n) p{display:block!important;margin:0!important;max-width:none!important;font-size:.88rem!important;line-height:1.5!important;}
}
@media(max-width:390px){
 #proceso .proc-grid{height:660px!important;min-height:660px!important;}
 #proceso .proc-path-mobile{height:650px!important;}
 #proceso .proc-card,#proceso .proc-card:nth-of-type(n){width:calc(100% - 76px)!important;}
 #proceso .proc-card:nth-of-type(1),#proceso .proc-card:nth-of-type(3){padding-left:70px!important;}
 #proceso .proc-card:nth-of-type(2),#proceso .proc-card:nth-of-type(4){padding-right:70px!important;}
 #proceso .proc-card:nth-of-type(2){top:170px!important}#proceso .proc-card:nth-of-type(3){top:330px!important}#proceso .proc-card:nth-of-type(4){top:500px!important}
}

/* 2026-09-27k — corrección móvil validada desde captura real */
@media(max-width:680px){
 #proceso .proc-grid{height:650px!important;min-height:650px!important;overflow:visible!important;}
 #proceso .proc-path-mobile{display:block!important;left:0!important;top:0!important;width:100%!important;height:650px!important;z-index:0!important;}
 #proceso .proc-card,#proceso .proc-card:nth-of-type(n){display:block!important;position:absolute!important;box-sizing:border-box!important;width:auto!important;max-width:none!important;min-width:0!important;min-height:0!important;margin:0!important;transform:none!important;overflow:visible!important;z-index:2!important;}
 #proceso .proc-card:nth-of-type(1){top:8px!important;left:0!important;right:0!important;padding:0 12px 0 82px!important;text-align:left!important;}
 #proceso .proc-card:nth-of-type(2){top:164px!important;left:0!important;right:0!important;padding:0 82px 0 12px!important;text-align:right!important;}
 #proceso .proc-card:nth-of-type(3){top:322px!important;left:0!important;right:0!important;padding:0 12px 0 82px!important;text-align:left!important;}
 #proceso .proc-card:nth-of-type(4){top:482px!important;left:0!important;right:0!important;padding:0 82px 0 12px!important;text-align:right!important;}
 #proceso .proc-step,#proceso .proc-card:nth-of-type(n) .proc-step{display:grid!important;place-items:center!important;position:absolute!important;top:0!important;width:60px!important;height:60px!important;margin:0!important;padding:0!important;transform:none!important;z-index:3!important;}
 #proceso .proc-card:nth-of-type(odd) .proc-step{left:4px!important;right:auto!important;}
 #proceso .proc-card:nth-of-type(even) .proc-step{right:4px!important;left:auto!important;}
 #proceso .proc-card h3,#proceso .proc-card:nth-of-type(n) h3{display:block!important;width:auto!important;max-width:none!important;margin:7px 0 8px!important;padding:0!important;font-size:1rem!important;line-height:1.25!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}
 #proceso .proc-card p,#proceso .proc-card:nth-of-type(n) p{display:block!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;font-size:.88rem!important;line-height:1.48!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}
}
@media(max-width:390px){
 #proceso .proc-grid{height:700px!important;min-height:700px!important;}
 #proceso .proc-path-mobile{height:680px!important;}
 #proceso .proc-card:nth-of-type(1){top:8px!important}#proceso .proc-card:nth-of-type(2){top:174px!important}#proceso .proc-card:nth-of-type(3){top:346px!important}#proceso .proc-card:nth-of-type(4){top:522px!important}
}


/* Process route — authoritative responsive layout (2026-09-27)
   Separate geometries prevent the route from crossing copy on tablet portrait. */
#proceso .proc-grid{
  position:relative!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  width:100%!important;max-width:1100px!important;height:330px!important;min-height:0!important;
  margin:0 auto!important;padding:0!important;gap:0!important;overflow:visible;
}
#proceso .proc-grid::before,#proceso .proc-grid::after{display:none!important}
#proceso .proc-path{position:absolute;inset:0;width:100%;height:190px;z-index:0;pointer-events:none;overflow:visible}
#proceso .proc-path path{fill:none;stroke:#76c9ee;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.68}
#proceso .proc-path-tablet{display:none}
#proceso .proc-route{display:none!important}
#proceso .proc-card,
#proceso .proc-card:nth-of-type(1),#proceso .proc-card:nth-of-type(2),
#proceso .proc-card:nth-of-type(3),#proceso .proc-card:nth-of-type(4){
  position:relative!important;left:auto!important;right:auto!important;top:auto!important;
  width:auto!important;margin:0!important;padding:25px 16px 0!important;text-align:center!important;
  display:block!important;z-index:2!important;transform:none;
}
#proceso .proc-card:nth-of-type(2),#proceso .proc-card:nth-of-type(4){padding-top:95px!important}
#proceso .proc-step,#proceso .proc-card:nth-child(even) .proc-step{
  width:68px;height:68px;margin:0 auto 18px!important;transform:none!important;border:7px solid #fff!important;
  box-shadow:0 0 0 2px rgba(10,161,228,.18),0 12px 28px -14px rgba(10,82,184,.6)!important;
}
#proceso .proc-card h3{margin:0 0 8px!important}
#proceso .proc-card p{margin:0 auto!important;max-width:245px!important}

@media (orientation:portrait) and (min-width:701px){
  #proceso .proc-grid{
    grid-template-columns:1fr 1fr!important;grid-template-rows:270px 270px!important;
    max-width:820px!important;height:620px!important;
  }
  #proceso .proc-path-desktop{display:none!important}
  #proceso .proc-path-tablet{display:block!important;height:620px!important}
  #proceso .proc-card,
  #proceso .proc-card:nth-of-type(1),#proceso .proc-card:nth-of-type(2),
  #proceso .proc-card:nth-of-type(3),#proceso .proc-card:nth-of-type(4){
    position:absolute!important;width:300px!important;padding:0!important;
  }
  #proceso .proc-card:nth-of-type(1){left:40px!important;top:35px!important}
  #proceso .proc-card:nth-of-type(2){right:40px!important;top:35px!important}
  #proceso .proc-card:nth-of-type(3){left:40px!important;top:305px!important}
  #proceso .proc-card:nth-of-type(4){right:40px!important;top:500px!important}
  #proceso .proc-card p{max-width:290px!important}
}
@media (max-width:700px){
  #proceso .proc-grid{display:flex!important;flex-direction:column!important;height:auto!important;padding:6px 0 0 4px!important}
  #proceso .proc-path{display:none!important}
  #proceso .proc-grid::before{
    content:""!important;display:block!important;position:absolute!important;left:34px!important;top:28px!important;bottom:48px!important;
    width:4px!important;height:auto!important;border:0!important;border-radius:99px!important;
    background:linear-gradient(180deg,var(--green),var(--azure),var(--cobalt))!important;opacity:.35!important;
  }
  #proceso .proc-card,
  #proceso .proc-card:nth-of-type(1),#proceso .proc-card:nth-of-type(2),
  #proceso .proc-card:nth-of-type(3),#proceso .proc-card:nth-of-type(4){
    position:relative!important;display:grid!important;grid-template-columns:62px minmax(0,1fr)!important;
    column-gap:18px!important;width:100%!important;padding:0 0 38px!important;text-align:left!important;
  }
  #proceso .proc-step,#proceso .proc-card:nth-child(even) .proc-step{
    grid-row:1 / span 2!important;grid-column:1!important;width:60px;height:60px;margin:0!important;border-width:6px!important;
  }
  #proceso .proc-card h3{grid-column:2!important;margin:7px 0!important}
  #proceso .proc-card p{grid-column:2!important;margin:0!important;max-width:none!important}
}


/* =========================================================
   HUMA PROCESS INFOGRAPHIC — rebuilt component
   No global SVG, fixed-height canvas or absolute-positioned copy.
   ========================================================= */
#proceso{overflow:hidden}
#proceso .process-flow{
  --process-node:72px;
  --process-gap:22px;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--process-gap);
  max-width:1120px;
  margin:48px auto 0;
  padding:0;
}
#proceso .process-item{
  min-width:0;
  display:grid;
  grid-template-rows:minmax(116px,auto) var(--process-node) minmax(116px,auto);
  justify-items:center;
  align-items:center;
  position:relative;
}
#proceso .process-copy{
  width:100%;
  max-width:245px;
  text-align:center;
  align-self:end;
  padding:0 4px 18px;
}
#proceso .process-copy h3{font-size:1.08rem;line-height:1.18;margin:0 0 8px}
#proceso .process-copy p{color:var(--on-light-muted);font-size:.92rem;line-height:1.5;margin:0}
#proceso .process-node{
  grid-row:2;
  width:var(--process-node);height:var(--process-node);
  display:grid;place-items:center;
  border-radius:50%;
  border:7px solid #fff;
  background:var(--grad-cta);
  box-shadow:0 0 0 2px rgba(10,161,228,.16),0 12px 28px -16px rgba(10,82,184,.58);
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  line-height:1;
  z-index:2;
}
#proceso .process-item:nth-child(even) .process-copy{grid-row:3;align-self:start;padding:18px 4px 0}
#proceso .process-item:nth-child(odd) .process-copy{grid-row:1}
#proceso .process-connector{
  position:absolute;
  z-index:1;
  top:calc(50% - 2px);
  left:calc(50% + var(--process-node)/2 + 8px);
  width:calc(100% - var(--process-node) - 16px + var(--process-gap));
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(69,191,91,.42),rgba(10,161,228,.58),rgba(10,82,184,.48));
}
#proceso .process-connector::after{
  content:"";
  position:absolute;
  right:-1px;top:50%;
  width:9px;height:9px;
  border-top:3px solid rgba(10,130,210,.72);
  border-right:3px solid rgba(10,130,210,.72);
  transform:translateY(-50%) rotate(45deg);
}

/* Tablet: independent 2x2 snake, 1 → 2 → 3 → 4. */
@media (min-width:768px) and (max-width:1023px){
  #proceso .process-flow{
    --process-node:68px;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"one two" "four three";
    column-gap:110px;
    row-gap:52px;
    max-width:760px;
    margin-top:42px;
  }
  #proceso .process-item{grid-template-rows:auto var(--process-node);min-height:190px}
  #proceso .process-item-1{grid-area:one}
  #proceso .process-item-2{grid-area:two}
  #proceso .process-item-3{grid-area:three}
  #proceso .process-item-4{grid-area:four}
  #proceso .process-copy,
  #proceso .process-item:nth-child(even) .process-copy,
  #proceso .process-item:nth-child(odd) .process-copy{
    grid-row:1;align-self:end;padding:0 4px 16px;max-width:270px;
  }
  #proceso .process-node{grid-row:2}
  #proceso .process-connector{top:auto;bottom:calc(var(--process-node)/2 - 2px)}
  #proceso .process-item-1 .process-connector{
    left:calc(50% + var(--process-node)/2 + 8px);
    width:calc(50% + 110px - var(--process-node) - 16px);
  }
  #proceso .process-item-2 .process-connector{
    left:calc(50% - 2px);
    top:calc(100% - var(--process-node)/2 + 8px);
    bottom:auto;
    width:4px;
    height:calc(52px + var(--process-node) - 16px);
    background:linear-gradient(180deg,rgba(10,161,228,.52),rgba(10,82,184,.48));
  }
  #proceso .process-item-2 .process-connector::after{
    right:auto;left:50%;top:auto;bottom:-1px;
    transform:translateX(-50%) rotate(135deg);
  }
  #proceso .process-item-3 .process-connector{
    left:auto;right:calc(50% + var(--process-node)/2 + 8px);
    width:calc(50% + 110px - var(--process-node) - 16px);
    background:linear-gradient(270deg,rgba(69,191,91,.42),rgba(10,161,228,.58),rgba(10,82,184,.48));
  }
  #proceso .process-item-3 .process-connector::after{
    right:auto;left:-1px;transform:translateY(-50%) rotate(225deg);
  }
}

/* Mobile: content-driven vertical timeline. */
@media (max-width:767px){
  #proceso .process-flow{
    --process-node:58px;
    display:flex;
    flex-direction:column;
    gap:0;
    width:100%;
    max-width:560px;
    margin:34px auto 0;
  }
  #proceso .process-item{
    display:grid;
    grid-template-columns:var(--process-node) minmax(0,1fr);
    grid-template-rows:auto;
    column-gap:18px;
    align-items:start;
    justify-items:stretch;
    min-height:0;
    padding:0 0 32px;
  }
  #proceso .process-node{
    grid-column:1;grid-row:1;
    width:var(--process-node);height:var(--process-node);
    border-width:6px;
    justify-self:center;
  }
  #proceso .process-copy,
  #proceso .process-item:nth-child(even) .process-copy,
  #proceso .process-item:nth-child(odd) .process-copy{
    grid-column:2;grid-row:1;
    width:auto;max-width:none;
    text-align:left;
    align-self:start;
    padding:5px 0 0;
  }
  #proceso .process-copy h3{font-size:1.02rem;margin-bottom:6px}
  #proceso .process-copy p{font-size:.9rem;line-height:1.48}
  #proceso .process-connector{
    top:var(--process-node);
    left:calc(var(--process-node)/2 - 2px);
    width:4px;
    height:calc(100% - var(--process-node) + 2px);
    border-radius:999px;
    background:linear-gradient(180deg,rgba(69,191,91,.42),rgba(10,161,228,.58),rgba(10,82,184,.48));
  }
  #proceso .process-connector::after{
    right:auto;left:50%;top:auto;bottom:2px;
    transform:translateX(-50%) rotate(135deg);
  }
  #proceso .process-item:last-child{padding-bottom:0}
}


/* =========================================================
   FINAL RESPONSIVE QA — interaction sizing and decorative containment
   ========================================================= */
/* Decorative hero artwork is intentionally clipped by .hero-bg; keep its
   geometry isolated from document layout at every viewport. */
.hero-bg .contours{overflow:hidden}
@media (hover:none),(pointer:coarse){
  .cursor-glow{display:none}
}

/* Interactive controls: preserve the visual design while providing a
   reliable touch target on tablet/mobile. */
.lang-btn{min-height:44px;padding-block:10px}
.lang-menu button{min-height:44px}
.burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
@media (max-width:980px){
  .nav-links.open a{display:flex;align-items:center;min-height:44px;padding-block:10px}
}
@media (max-width:767px){
  .wa-float{right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:54px;height:54px}
  .section{padding-top:76px;padding-bottom:76px}
  .section-head{margin-bottom:40px}
  .strip{padding-block:20px}
}


/* FINAL VISUAL QA — 2026-09-27 */
.nav-links a{min-height:44px;display:flex;align-items:center}
@media (min-width:981px) and (max-width:1180px){
  .chip.c1{right:0}
  .chip.c2{right:0}
  .chip.c3{left:-4%}
}
@media (max-width:767px){
  .foot-col a{display:inline-flex;align-items:center;min-height:44px}
}


/* Tablet process spacing correction — screenshot QA 2026-09-27 */
@media (min-width:768px) and (max-width:1023px){
  #proceso .process-flow{
    row-gap:88px;
  }
  #proceso .process-item-2 .process-connector{
    top:calc(100% - var(--process-node)/2 + 8px);
    height:56px;
  }
}