/* UrraHosting — sistema de diseño compartido
   Tokens derivados por muestreo de píxeles reales de los mockups aprobados. */

:root{
  --bg:#0b0f18;
  --bg-elevated:#0f1622;
  --surface:#141b28;
  --surface-2:#1a2233;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --fg:#ffffff;
  --muted:#9aa4b5;
  --muted-2:#6b7688;

  --accent:#fc6b11;
  --accent-2:#ff8a3d;
  --accent-ink:#2b0e00;
  --violet:#7c4ef7;
  --violet-ink:#ffffff;
  --green:#2ea746;
  --red:#ef4444;

  --light-bg:#f6f7fa;
  --light-surface:#ffffff;
  --light-border:#e6e8ee;
  --ink:#12151c;
  --ink-muted:#5b6472;

  --radius-pill:999px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-lg:0 24px 48px -12px rgba(5,8,14,.45);
  --shadow-md:0 12px 28px -8px rgba(5,8,14,.35);
  --shadow-sm:0 4px 12px rgba(5,8,14,.18);

  --container:1220px;
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'Consolas', monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--light-bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:700;letter-spacing:-0.02em;color:var(--fg)}
p{margin:0}
.dark h1,.dark h2,.dark h3,.dark h4,
section.light h1,section.light h2,section.light h3,section.light h4{color:inherit}

/* ---------- utility ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section-sm{padding:64px 0}
.text-center{text-align:center}
.mono{font-family:var(--font-mono)}
.accent{color:var(--accent) !important}
.violet{color:var(--violet)}
.hide-mobile{display:block}
.show-mobile{display:none}

.on-dark{background:var(--bg);color:var(--fg)}
.on-elevated{background:var(--bg-elevated);color:var(--fg)}
.on-light{background:var(--light-bg);color:var(--ink)}
.on-white{background:var(--light-surface);color:var(--ink)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  margin-bottom:14px;
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.eyebrow.on-dark-eyebrow{color:var(--accent-2)}

.section-header{max-width:640px;margin:0 auto 48px;text-align:center}
.section-header h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15}
.section-header p{margin-top:14px;color:var(--ink-muted);font-size:17px}
.on-dark .section-header p,.on-elevated .section-header p{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 26px;border-radius:var(--radius-pill);
  font-weight:600;font-size:15px;border:1px solid transparent;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px -8px rgba(252,107,17,.55)}
.btn-primary:hover{background:oklch(from var(--accent) calc(l - 0.05) c h)}
.btn-primary:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(252,107,17,.4)}

.btn-outline-dark{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn-outline-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.btn-outline-dark:focus-visible{outline:3px solid #fff;outline-offset:2px}

.btn-outline-light{background:transparent;border-color:var(--light-border);color:var(--ink)}
.btn-outline-light:hover{background:#f0f1f4;border-color:#cfd3dc}
.btn-outline-light:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.btn-violet{background:var(--violet);color:#fff;box-shadow:0 10px 24px -8px rgba(124,78,247,.55)}
.btn-violet:hover{background:#6c3ef0}
.btn-violet:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(124,78,247,.4)}

.btn-outline-accent{background:transparent;border-color:rgba(252,107,17,.55);color:var(--accent)}
.btn-outline-accent:hover{background:rgba(252,107,17,.1)}
.btn-outline-accent:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.btn-green{background:#16a34a;color:#fff;box-shadow:0 10px 24px -8px rgba(22,163,74,.5)}
.btn-green:hover{background:#128a3f}

.btn-blue{background:#2f8fe0;color:#fff;box-shadow:0 10px 24px -8px rgba(47,143,224,.5)}
.btn-blue:hover{background:#2778bd}

.btn-block{width:100%}
.btn-sm{padding:10px 18px;font-size:13.5px}
.btn-lg{padding:17px 30px;font-size:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14.5px;color:var(--accent)}
.link-arrow svg{width:15px;height:15px;transition:transform .15s ease}
.link-arrow:hover svg{transform:translateX(3px)}
.link-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- navbar ---------- */
.navbar{
  position:sticky;top:0;z-index:60;
  background:rgba(11,15,24,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:16px 24px;max-width:var(--container);margin:0 auto}
.brand{justify-self:start;display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff}
.brand-mark{width:34px;height:34px;flex:none}
.brand b{color:var(--accent);font-weight:700}
.nav-links{justify-self:center;display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--muted);padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s ease}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff;border-bottom-color:var(--accent)}
.nav-links a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.nav-right{justify-self:end;display:flex;align-items:center;gap:12px}
.nav-pill{
  display:flex;align-items:center;gap:6px;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-pill);
  padding:9px 14px;font-size:13px;color:var(--muted);background:rgba(255,255,255,.03);
}
.nav-pill svg{width:14px;height:14px}
.nav-burger{display:none;background:none;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:9px;color:#fff}
.nav-burger svg{width:20px;height:20px;display:block}

/* ---------- page hero (sub pages) ---------- */
.page-hero{position:relative;padding:64px 0 56px;background:var(--bg);overflow:hidden}
.page-hero .container{position:relative;z-index:2}
.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.page-hero h1{font-size:clamp(32px,4.2vw,50px);line-height:1.08;color:#fff}
.page-hero p.lead{margin-top:16px;color:var(--muted);font-size:17px;max-width:480px}
.page-hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.page-hero-media img{width:100%;height:100%;object-fit:cover;object-position:78% 35%}
.page-hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg, var(--bg) 0%, var(--bg) 14%, rgba(11,15,24,.9) 34%, rgba(11,15,24,.5) 54%, rgba(11,15,24,.12) 74%, transparent 94%),
    linear-gradient(180deg, rgba(11,15,24,.45) 0%, transparent 22%, transparent 80%, var(--bg) 100%);
}
.hero-check-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px}
.hero-check-row span{display:flex;align-items:center;gap:8px;font-size:14px;color:#e7e9ee;font-weight:500}
.hero-check-row svg{width:16px;height:16px;color:var(--accent);flex:none}

/* ---------- home hero ---------- */
.hero{position:relative;background:var(--bg);padding:60px 0 0;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(60% 55% at 78% 15%, rgba(252,107,17,.14), transparent 70%);
  pointer-events:none;
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding-bottom:48px}
.hero-copy h1{font-size:clamp(34px,4.6vw,54px);line-height:1.08;color:#fff}
.hero-copy p.lead{margin:18px 0 28px;color:var(--muted);font-size:17.5px;max-width:460px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:80% 30%}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg, var(--bg) 0%, var(--bg) 12%, rgba(11,15,24,.9) 32%, rgba(11,15,24,.55) 50%, rgba(11,15,24,.15) 70%, transparent 92%),
    linear-gradient(180deg, rgba(11,15,24,.5) 0%, transparent 20%, transparent 78%, var(--bg) 100%);
}
.stat-row{display:flex;gap:34px;flex-wrap:wrap}
.stat-item{display:flex;align-items:center;gap:10px}
.stat-item .stat-icon{width:38px;height:38px;border-radius:10px;background:rgba(252,107,17,.12);display:flex;align-items:center;justify-content:center;color:var(--accent);flex:none}
.stat-item .stat-icon svg{width:18px;height:18px}
.stat-item b{display:block;font-size:16px;color:#fff;font-family:var(--font-display)}
.stat-item span{font-size:12.5px;color:var(--muted)}

/* ---------- combo cards ---------- */
.combo-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin:0 auto}
.combo-card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:28px;overflow:hidden;
}
.combo-card::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 100% at 100% 0%, rgba(124,78,247,.16), transparent 60%);pointer-events:none}
.combo-badge{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;
  background:var(--violet);color:#fff;font-size:12px;font-weight:700;
  padding:6px 12px;border-radius:var(--radius-pill);margin-bottom:16px;
}
.combo-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px}
.combo-card h3{font-size:20px;color:#fff;margin-bottom:8px}
.combo-card p{color:var(--muted);font-size:14.5px;max-width:280px}
.combo-icon{width:76px;height:66px;flex:none;border-radius:12px;overflow:hidden}
.combo-icon img{width:100%;height:100%;object-fit:contain;background:var(--surface-2)}
.combo-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;padding-top:18px;border-top:1px solid var(--border)}
.combo-tag{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);background:var(--surface-2);border-radius:var(--radius-pill);padding:5px 11px}
.combo-tag i{width:6px;height:6px;border-radius:50%;background:var(--violet);flex:none}
.combo-price{position:relative;z-index:1;margin-bottom:18px}
.combo-price .old{font-size:13px;color:var(--muted-2);text-decoration:line-through;display:block;margin-bottom:2px}
.combo-price .label{font-size:12.5px;color:var(--muted)}
.combo-price .now{font-family:var(--font-display);font-size:30px;color:#fff;font-weight:700}
.combo-price .per{font-size:13px;color:var(--muted);font-weight:500}
.combo-foot{text-align:center;margin-top:32px;color:var(--muted)}
.combo-foot p{margin-bottom:10px}

/* ---------- plans ---------- */
.plans-toolbar{display:flex;justify-content:center;margin-bottom:8px}
.billing-toggle{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--border);}
.billing-toggle span{font-size:13.5px;color:var(--muted)}
.switch{position:relative;width:42px;height:24px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-strong);flex:none}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s ease}
.switch.on{background:var(--accent)}
.switch.on::after{transform:translateX(18px)}
.switch-btn{background:none;border:none;padding:0}

.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.plans-grid.cols-3{grid-template-columns:repeat(3,1fr)}
/* Cuando la API devuelve menos categorias que columnas (1 o 2), las tarjetas
   quedan pegadas a la izquierda con columnas vacias a la derecha si se usa
   repeat(3,1fr) a secas. catalog.js agrega "is-underfilled" (ver
   renderLandingCategories) solo cuando hay menos de CATEGORY_CAROUSEL_PAGE_SIZE
   tarjetas; auto-fit con un maximo fijo (no 1fr) hace que las columnas vacias
   colapsen a 0 en vez de repartir el ancho, y justify-content:center centra
   las columnas restantes. */
.plans-grid.cols-3.is-underfilled{grid-template-columns:repeat(auto-fit,minmax(280px,380px));justify-content:center}
.plan-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px;display:flex;flex-direction:column;position:relative;
}
.plan-card .plan-accent-bar{position:absolute;top:0;left:22px;right:22px;height:3px;border-radius:0 0 4px 4px}
.plan-card.t-orange .plan-accent-bar{background:var(--accent)}
.plan-card.t-green .plan-accent-bar{background:#22c55e}
.plan-card.t-blue .plan-accent-bar{background:#2f8fe0}
.plan-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#fff}
.plan-card.t-orange .plan-icon{background:var(--accent)}
.plan-card.t-green .plan-icon{background:#22c55e}
.plan-card.t-blue .plan-icon{background:#2f8fe0}
.plan-icon svg{width:20px;height:20px}
.plan-card h3{font-size:17px;color:#fff;margin-bottom:4px}
.plan-price{font-family:var(--font-display);font-size:28px;color:#fff;font-weight:700;margin:10px 0 6px;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.plan-price span{font-size:13px;color:var(--muted);font-weight:500;font-family:var(--font-body)}
.plan-price .plan-item-amount{font-size:36px;font-weight:800;line-height:1;color:#fff;font-family:var(--font-display)}
.plan-card.t-orange .plan-item-amount{color:var(--accent)}
.plan-card.t-green .plan-item-amount{color:#22c55e}
.plan-card.t-blue .plan-item-amount{color:#2f8fe0}
.plan-card .plan-desc{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.plan-specs{border-top:1px solid var(--border);padding-top:14px;margin-bottom:18px;display:flex;flex-direction:column;gap:10px}
.plan-specs .spec-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.plan-specs .spec-row b{color:#fff;font-weight:600}
.plan-features{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;flex:1}
.plan-features li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:#dfe3ea}
.plan-features svg{width:16px;height:16px;margin-top:1px;flex:none}
.plan-card.t-orange .plan-features svg{color:var(--accent)}
.plan-card.t-green .plan-features svg{color:#22c55e}
.plan-card.t-blue .plan-features svg{color:#2f8fe0}
.plan-card-cta-outline{margin-top:auto}

.plan-head-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.plan-head-row .plan-icon{margin-bottom:0}
.pill-outline{font-size:11.5px;color:var(--muted);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:5px 12px;flex:none}
.plan-price-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:20px}
.plan-price-box .amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-family:var(--font-display);font-weight:700}
.plan-price-box .price-amount{font-size:26px;font-weight:800;color:var(--accent)}
.plan-price-box .price-period{font-size:13px;color:var(--muted);font-weight:500;font-family:var(--font-body)}
.plan-price-box small{display:block;font-size:11.5px;color:var(--muted-2);margin-top:4px}
.plan-card.t-green h3{color:#22c55e}
.plan-card.t-blue h3{color:#2f8fe0}

.recommend-card{background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;align-items:flex-start}
.recommend-card h3{font-size:17px;color:#fff;margin-bottom:8px}
.recommend-card p{color:var(--muted);font-size:13.5px;margin-bottom:20px}

.trust-row{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;margin-top:56px}
.trust-item{display:flex;align-items:center;gap:10px;color:var(--ink-muted);font-size:13.5px}
.on-dark .trust-item,.on-elevated .trust-item{color:var(--muted)}
.trust-item svg{width:18px;height:18px;color:var(--accent);flex:none}

/* ---------- feature cards (nosotros) ---------- */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.feature-card{background:var(--light-surface);border:1px solid var(--light-border);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm); display:flex;gap:20px;}
.feature-icon{width:52px;height:52px;border-radius:14px;background:rgba(252,107,17,.1);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:18px;width:50%}
.feature-icon svg{width:24px;height:24px}
.feature-card h3{font-size:18px;color:var(--ink);margin-bottom:10px}
.feature-card p{color:var(--ink-muted);font-size:14.5px;margin-bottom:8px}
.feature-card p b{color:var(--ink)}
.feature-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.feature-list li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink)}
.feature-list svg{width:20px;height: 20px;color:var(--accent);border:1px solid;flex:none;border-radius:10px;padding:2px;}
.tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.tag-outline{border:1px solid var(--light-border);border-radius:var(--radius-pill);padding:7px 14px;font-size:13px;color:var(--ink-muted)}

/* ---------- story split ---------- */
.story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.story-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.story-media img{width:100%;display:block}
.story-copy h2{font-size:clamp(26px,3vw,36px);line-height:1.15;margin-bottom:18px}
.story-copy p{color:var(--ink-muted);font-size:15.5px;margin-bottom:14px}

.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.avatar-card{background:var(--light-surface);border:1px solid var(--light-border);border-radius:var(--radius-md);padding:22px 16px;text-align:center}
.avatar-circle{width:56px;height:56px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:16px;background:var(--accent);overflow:hidden}
.avatar-circle img{width:100%;height:100%;object-fit:cover}
.avatar-card h4{font-size:14.5px;color:var(--ink);margin-bottom:4px}
.avatar-card p{font-size:12.5px;color:var(--ink-muted)}

/* ---------- portfolio ---------- */
.section-head-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:20px}
.section-head-row .section-header{margin:0;text-align:left;max-width:520px}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.portfolio-card{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);display:block;transition:transform .18s ease, border-color .18s ease}
.portfolio-card:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.portfolio-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.portfolio-card img{width:100%;height:190px;object-fit:cover;display:block}
.portfolio-card{background:var(--surface)}
.pf-body{padding:20px}
.portfolio-card h4{font-size:15.5px;color:#fff;margin-bottom:6px}
.portfolio-card p{font-size:13.5px;color:var(--muted);margin-bottom:0}
.portfolio-card-light{background:var(--light-surface);border:1px solid var(--light-border)}
.portfolio-card-light h4{color:var(--ink)}
.portfolio-card-light p{color:var(--ink-muted);margin-bottom:10px}

/* ---------- csr / red panda ---------- */
.csr-section{position:relative;overflow:hidden}
.csr-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center}
.csr-copy{padding:32px 0;display:flex;flex-direction:column;justify-content:center}
.csr-copy h2{font-size:clamp(26px,3vw,34px);color:var(--ink);line-height:1.18;margin-bottom:16px}
.csr-copy p{color:var(--ink-muted);font-size:15px;margin-bottom:16px}
.csr-callout{display:flex;gap:12px;background:#fff4ec;border:1px solid #ffdcc2;border-radius:var(--radius-md);padding:16px 18px;margin-bottom:18px}
.csr-callout svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:2px}
.csr-callout p{margin:0;font-size:14px;color:#7a3311}
.csr-media{position:absolute;top:0;bottom:0;right:0;left:44%;z-index:0;border-radius:var(--radius-lg) 0 0 var(--radius-lg);overflow:hidden;pointer-events:none}
.csr-media img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;display:block}
.csr-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, var(--light-surface) 0%, var(--light-surface) 8%, rgba(255,255,255,.85) 20%, rgba(255,255,255,.35) 36%, transparent 58%);
}
.csr-overlay{
  position:absolute;left:20px;bottom:20px;right:20px;max-width:280px;z-index:1;
  background:rgba(11,15,24,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);
  padding:14px 16px;display:flex;gap:12px;align-items:flex-start;color:#fff;
}
.csr-overlay svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:2px}
.csr-overlay b{display:block;font-size:13.5px}
.csr-overlay span{font-size:12px;color:var(--muted)}

/* ---------- footer ---------- */
.footer{background:var(--bg-elevated);border-top:1px solid rgba(255,255,255,.06);padding:64px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:44px}
.footer-brand p{color:var(--muted);font-size:14px;margin:16px 0 20px;max-width:280px}
.footer-badges{display:flex;gap:10px;flex-wrap:wrap}
.footer-badge{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 12px}
.footer-badge svg{width:13px;height:13px;color:var(--accent)}
.footer h5{font-size:14px;color:#fff;margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:11px}
.footer-links a{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.footer-links a:hover{color:#fff}
.footer-links a svg{width:13px;height:13px;flex:none}
.footer-contact li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);margin-bottom:12px}
.footer-contact svg{width:15px;height:15px;color:var(--accent);flex:none}
.footer-contact a:hover{color:#fff}
.footer-social{display:flex;gap:10px;margin-top:18px}
.footer-social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.footer-social a:hover{color:#fff;border-color:var(--border-strong)}
.footer-social svg{width:15px;height:15px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--muted-2)}
.footer-bottom b{color:var(--muted)}
.footer-bottom .heart{color:var(--accent)}

/* ---------- generic dark card / info list (infraestructura, contacto) ---------- */
.infra-list{display:flex;flex-direction:column;gap:16px;max-width:940px;margin:0 auto}
.infra-row{
  display:flex;align-items:center;gap:20px;background:var(--light-surface);
  border-left:3px solid var(--accent);border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:22px 26px;box-shadow:var(--shadow-sm);
}
.infra-icon{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.infra-icon svg{width:21px;height:21px}
.infra-text{flex:1}
.infra-text h4{font-size:16px;color:var(--ink);margin-bottom:4px}
.infra-text p{font-size:14px;color:var(--ink-muted)}
.infra-value{text-align:right;flex:none;min-width:150px}
.infra-value b{display:block;font-family:var(--font-display);font-size:17px;color:var(--accent)}
.infra-value span{font-size:12px;color:var(--ink-muted)}
.infra-media{flex:none;width:150px;display:flex;justify-content:flex-end}
.infra-media img{border-radius:8px;max-height:64px;object-fit:contain}
.brand-wordmark-oracle{font-family:var(--font-display);font-weight:700;font-size:19px;color:#c74634;letter-spacing:.02em;text-align:right}
.brand-wordmark-oracle small{display:block;font-family:var(--font-mono);font-weight:500;font-size:9.5px;letter-spacing:.12em;color:var(--ink-muted);text-transform:uppercase}
.chip-intel{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:#0071c5;color:#fff;border-radius:8px;padding:8px 14px;line-height:1.1}
.chip-intel span{font-size:9px;letter-spacing:.05em}
.chip-intel b{font-family:var(--font-display);font-size:15px;letter-spacing:.03em}

.transparency-banner{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-top:40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px 38px;
  background:linear-gradient(100deg, rgba(11,15,24,.94), rgba(11,15,24,.72)), url('../img/hero-infraestructura.webp') center/cover;
  border:1px solid var(--border);
}
.transparency-banner .tb-left{display:flex;gap:16px;align-items:center;max-width:560px}
.transparency-banner .tb-icon{width:48px;height:48px;border-radius:12px;background:rgba(252,107,17,.16);border:1px solid rgba(252,107,17,.4);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.transparency-banner .tb-icon svg{width:22px;height:22px}
.transparency-banner h4{font-size:18px;color:#fff;margin-bottom:6px}
.transparency-banner p{font-size:14px;color:var(--muted)}

/* ---------- contact page ---------- */
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-92px;position:relative;z-index:3}
.info-card{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:26px 22px;text-align:center}
.info-icon{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--accent)}
.info-icon.whatsapp{color:#25d366}
.info-icon svg{width:20px;height:20px}
.info-card h4{font-size:15.5px;color:#fff;margin-bottom:8px}
.info-card p{font-size:13px;color:var(--muted);margin-bottom:10px}
.info-card a.value{color:var(--accent);font-weight:600;font-size:14px}
.info-card .value.wa{color:#25d366}
.info-card .value.static{color:#fff}
.info-card .value.small{font-size:12.5px;color:var(--muted);font-weight:500}

.contact-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin-top:56px;align-items:start}
.contact-form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px}
.contact-form-card h3{font-size:22px;color:#fff;margin-bottom:8px}
.contact-form-card > p{color:var(--muted);font-size:14.5px;margin-bottom:26px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group.full{grid-column:1 / -1}
.form-group label{font-size:13px;color:var(--muted);font-weight:500}
.form-group input,.form-group select,.form-group textarea{
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:13px 14px;color:#fff;font-family:var(--font-body);font-size:14.5px;
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--muted-2)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa4b5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.form-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted-2);margin-top:16px}
.form-note svg{width:14px;height:14px;color:var(--accent)}
.form-success{display:none;align-items:center;gap:12px;background:rgba(46,167,70,.12);border:1px solid rgba(46,167,70,.4);border-radius:var(--radius-md);padding:16px 18px;color:#7fe89b;font-size:14px;margin-top:16px}
.form-success.show{display:flex}
.form-success svg{width:20px;height:20px;flex:none;color:#2ea746}

.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;margin-bottom:20px}
.side-card h3{font-size:17px;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.side-card h3 svg{width:18px;height:18px;color:var(--accent)}
.side-card address{font-style:normal;color:var(--muted);font-size:14.5px;line-height:1.7;margin-bottom:18px}
.map-frame{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border)}
.side-card.help{display:flex;gap:14px;align-items:flex-start;padding:22px}
.side-card.help .help-icon{width:36px;height:36px;border-radius:10px;background:var(--surface-2);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.side-card.help .help-icon svg{width:18px;height:18px}
.side-card.help p{color:var(--muted);font-size:13.5px;margin:6px 0 14px}
.side-card.help h4{font-size:15px;color:#fff;margin-bottom:4px}

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;color:#fff;padding:19px 22px;font-size:15px;font-weight:600;text-align:left}
.faq-question svg{width:18px;height:18px;color:var(--muted);flex:none;transition:transform .2s ease}
.faq-item.open .faq-question svg{transform:rotate(180deg);color:var(--accent)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-answer-inner{padding:0 22px 20px;color:var(--muted);font-size:14px;line-height:1.65}
.faq-question:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- tag pills (gameservers) ---------- */
.game-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.game-tag{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:9px 16px;font-size:13.5px;color:#e7e9ee}
.game-tag svg{width:15px;height:15px;color:var(--accent)}
.game-tag.more{color:var(--accent);border-color:rgba(252,107,17,.4)}

.perk-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-top:48px}
.perk-item{background:var(--bg-elevated);padding:22px;display:flex;align-items:center;gap:14px}
.perk-item .perk-icon{width:38px;height:38px;border-radius:10px;background:rgba(252,107,17,.12);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.perk-item .perk-icon svg{width:18px;height:18px}
.perk-item h5{font-size:13.5px;color:#fff;margin-bottom:2px}
.perk-item p{font-size:12px;color:var(--muted)}

.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.guide-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.guide-media img{width:100%;display:block}
.guide-badge{position:absolute;left:16px;bottom:16px;right:16px;background:rgba(11,15,24,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);padding:12px 14px;display:flex;align-items:center;gap:10px;color:#fff}
.guide-badge img{width:22px;height:16px;border-radius:3px;flex:none}
.guide-badge b{font-size:13px;display:block}
.guide-badge span{font-size:11.5px;color:var(--muted)}
.guide-copy p{color:var(--muted);font-size:15px;margin-bottom:14px}

/* ---------- pagination (servicios) ---------- */
.pagination{display:flex;justify-content:center;gap:12px;margin-top:36px}
.pagination button{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:var(--radius-pill);padding:9px 16px;font-size:13.5px}
.pagination button svg{width:14px;height:14px}
.pagination .page-count{display:flex;align-items:center;font-size:13.5px;color:var(--muted);padding:0 6px}

.plan-count-badge{position:absolute;top:26px;right:26px;font-size:11.5px;color:var(--muted);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:4px 11px}
.free-trial-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(100deg, rgba(252,107,17,.14), rgba(252,107,17,.03));border:1px solid rgba(252,107,17,.32);border-radius:var(--radius-lg);padding:20px 26px;margin-bottom:40px}
.free-trial-banner .ftb-left{display:flex;align-items:center;gap:14px}
.free-trial-banner .ftb-icon{width:42px;height:42px;border-radius:10px;background:rgba(252,107,17,.18);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.free-trial-banner .ftb-icon svg{width:20px;height:20px}
.free-trial-banner h4{font-size:15px;color:#fff;margin-bottom:2px}
.free-trial-banner p{font-size:13px;color:var(--muted)}
.free-trial-banner p a{color:var(--accent);text-decoration:underline}

.more-recos-badge{display:inline-flex;align-items:center;gap:8px;background:var(--violet);color:#fff;font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:var(--radius-pill);margin-bottom:18px}
.more-recos-badge svg{width:14px;height:14px}

/* ---------- carrusel de planes ---------- */
.plan-carousel{position:relative}
.plan-carousel-track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -ms-overflow-style:none;scrollbar-width:none;margin:0 -4px;padding:4px;
}
.plan-carousel-track::-webkit-scrollbar{display:none}
.plan-carousel-track .plan-card{flex:0 0 calc((100% - 60px) / 4);scroll-snap-align:start;min-width:236px}
.plan-carousel-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-md)}

.carousel-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
.carousel-btn{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--surface);border:1px solid var(--border-strong);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease, border-color .15s ease;
}
.carousel-btn svg{width:18px;height:18px}
.carousel-btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--accent)}
.carousel-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.carousel-btn:disabled{opacity:.35;cursor:not-allowed}
.carousel-dots{display:flex;align-items:center;gap:8px}
.carousel-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:var(--border-strong);flex:none;transition:background .15s ease, transform .15s ease}
.carousel-dot.active{background:var(--accent);transform:scale(1.3)}
.carousel-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- misc ---------- */
.divider-soft{height:1px;background:var(--border);margin:0}
.center-cta{text-align:center;margin-top:16px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid,.page-hero-grid,.story-grid,.guide-grid,.csr-grid,.contact-layout{grid-template-columns:1fr}
  .hero-media::after,.page-hero-media::after{
    background:linear-gradient(180deg, var(--bg) 0%, rgba(11,15,24,.88) 38%, rgba(11,15,24,.55) 62%, rgba(11,15,24,.22) 82%, rgba(11,15,24,.1) 100%);
  }
  .plans-grid{grid-template-columns:repeat(2,1fr)}
  .plan-carousel-track .plan-card{flex:0 0 calc((100% - 20px) / 2)}
  .feature-grid,.combo-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .info-grid{grid-template-columns:1fr 1fr;margin-top:24px}
  .avatar-grid{grid-template-columns:1fr 1fr}
  .portfolio-grid{grid-template-columns:1fr}
  .perk-row{grid-template-columns:1fr 1fr}
  .csr-copy{padding:0 0 32px}
  .csr-media{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;height:260px;border-radius:var(--radius-lg);margin-bottom:8px}
  .csr-media::after{background:linear-gradient(180deg, transparent 55%, var(--light-surface) 100%)}
}
@media (max-width:760px){
  /* .nav-inner es grid en escritorio para centrar .nav-links, lo que le da
     justify-self:center. La especificacion de Box Alignment tambien aplica
     justify-self/align-self a cajas position:fixed (no solo a grid items),
     asi que sin resetearlo aqui el drawer movil (position:fixed) se encoge
     al ancho de su contenido y queda centrado en vez de cubrir el viewport
     completo pese a left:0/right:0. .nav-inner vuelve a flex por
     simplicidad (no hay nada que centrar con el menu oculto en el drawer).
     Ademas .navbar tiene backdrop-filter, que lo convierte en el
     containing block del drawer fijo - como .navbar solo mide ~68px de
     alto, "bottom:0" se resolvia contra el navbar y no contra la pantalla,
     truncando el drawer. Se usa height con vh (siempre relativo al
     viewport real) en vez de bottom para no depender del containing block. */
  .nav-inner{display:flex;justify-content:space-between}
  .nav-links{position:fixed;top:68px;left:0;right:0;height:calc(100vh - 68px);justify-self:stretch;align-self:stretch;background:var(--bg);flex-direction:column;align-items:flex-start;padding:28px 24px;gap:22px;transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto}
  .nav-links.open{transform:translateX(0)}
  .nav-burger{display:flex}
  .hide-mobile{display:none}
  .show-mobile{display:block}
  .nav-right .nav-pill{display:none}
  .nav-right .nav-cta-clientes{display:none}
  /* Movidos dentro de .nav-links por design-system.js (initNavMobileRelocation)
     cuando el viewport es movil, para no amontonar el pill de moneda/facturacion
     y el CTA "Clientes" junto al hamburger en la barra superior angosta. */
  .nav-links .nav-price-settings{width:100%;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
  .nav-links .nav-pill{width:100%;justify-content:center}
  .nav-links .nav-cta-clientes{width:100%}
  /* Con el CTA oculto (.hide-mobile), trial-banner.js hace que todo el
     banner abra el modal - el cursor deja eso claro en touch/hover devices. */
  .free-trial-banner{cursor:pointer}
  .plans-grid{grid-template-columns:1fr}
  #services-grid.plans-grid{
    display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;
    margin:0 -24px;padding:4px 24px 10px;
  }
  #services-grid.plans-grid::-webkit-scrollbar{display:none}
  #services-grid.plans-grid .plan-card{flex:0 0 84%;scroll-snap-align:start;min-width:0}
  .plan-carousel-track .plan-card{flex:0 0 84%}
  .carousel-controls{gap:14px}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .info-grid{grid-template-columns:1fr}
  .avatar-grid{grid-template-columns:1fr 1fr}
  .perk-row{grid-template-columns:1fr}
  .section{padding:64px 0}
  .transparency-banner{flex-direction:column;align-items:flex-start}
  .section-head-row{flex-direction:column;align-items:flex-start}
  .stat-row{gap:22px}
}