/* ═══════════════════════════════════════════════════════════
   HOSTIBERI — Estilos principales
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --sea:#1a7a8c; --sea-dk:#0d4d5c; --sea-md:#2a9aad;
  --turq:#4cbfa0; --turq-l:#7dd9c2;
  --bg:#f2fafc; --bg2:#e6f4f7;
  --text:#0d2d36; --mid:#3a6070; --lite:#7a9baa;
  --white:#fff;
  --rmd:16px; --rlg:24px; --rxl:32px;
  --s1:0 2px 12px rgba(13,77,92,.08);
  --s2:0 8px 32px rgba(13,77,92,.12);
  --s3:0 24px 64px rgba(13,77,92,.18);
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Space Grotesk',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; line-height:1.6; }
a { text-decoration:none; color:inherit; }
h1, h2, h3, h4 { font-family:'Outfit',sans-serif; font-weight:800; line-height:1.15; }

/* ── NAV ────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 64px;
  transition:background .35s, box-shadow .35s, backdrop-filter .35s;
}
.nav.scrolled { background:rgba(242,250,252,.93); backdrop-filter:blur(16px); box-shadow:var(--s1); }
[data-variant="b"] .nav.scrolled { background:rgba(8,23,40,.93); }
.nav-logo img { height:100px; width:auto; }

.nav-links { display:flex; gap:36px; align-items:center; }
.nav-links a { font-size:14px; font-weight:500; color:var(--mid); transition:color .2s; }
.nav-links a:hover { color:var(--sea); }
[data-variant="b"] .nav-links a { color:rgba(255,255,255,.65); }
[data-variant="b"] .nav-links a:hover { color:var(--turq); }

.nav-cta {
  background:var(--sea); color:#fff !important;
  padding:10px 24px; border-radius:50px; font-weight:600; font-size:14px;
  transition:background .2s, transform .2s, box-shadow .2s !important;
}
.nav-cta:hover { background:var(--sea-dk) !important; transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,122,140,.35); }

/* hamburger */
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:4px; z-index:250;
}
.nav-toggle span {
  display:block; width:24px; height:2px;
  background:var(--text); border-radius:2px;
  transition:transform .3s, opacity .3s;
}
[data-variant="b"] .nav-toggle span { background:#fff; }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; overflow:hidden;
  background:var(--bg); transition:background .5s;
}
[data-variant="b"] .hero { background:#081728; }

.orbs { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.orb  { position:absolute; border-radius:50%; filter:blur(90px); animation:floatOrb 9s ease-in-out infinite; }
.o1   { width:700px; height:700px; background:radial-gradient(circle,var(--turq),transparent 70%); opacity:.22; top:-250px; right:-150px; }
.o2   { width:450px; height:450px; background:radial-gradient(circle,var(--sea-md),transparent 70%); opacity:.18; bottom:50px; left:-100px; animation-delay:-5s; }
.o3   { width:280px; height:280px; background:radial-gradient(circle,var(--turq-l),transparent 70%); opacity:.14; top:38%; right:28%; animation-delay:-3s; }
@keyframes floatOrb { 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-50px) scale(1.08); } }

#pCanvas { position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .5s; pointer-events:none; }
[data-variant="b"] #pCanvas { opacity:1; }

.hero-inner {
  position:relative; z-index:2; width:100%; max-width:1400px;
  margin:0 auto; padding:130px 64px 220px;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(76,191,160,.12); border:1px solid rgba(76,191,160,.3);
  color:var(--sea); font-size:11px; font-weight:700; padding:7px 16px;
  border-radius:50px; margin-bottom:28px; letter-spacing:.07em; text-transform:uppercase;
}
[data-variant="b"] .hero-badge { color:var(--turq-l); background:rgba(76,191,160,.1); border-color:rgba(76,191,160,.25); }

.bdot { width:6px; height:6px; border-radius:50%; background:var(--turq); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(1.6); } }

h1.htitle { font-size:clamp(44px,4.5vw,76px); margin-bottom:24px; color:var(--text); transition:color .5s; }
[data-variant="b"] h1.htitle { color:#fff; }
.htitle .acc {
  background:linear-gradient(135deg,var(--sea-dk) 0%,var(--sea) 40%,var(--turq) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
[data-variant="b"] .htitle .acc {
  background:linear-gradient(135deg,var(--turq-l) 0%,var(--turq) 50%,var(--sea-md) 100%);
  -webkit-background-clip:text; background-clip:text;
}

.hsub { font-size:18px; color:var(--mid); max-width:500px; margin-bottom:40px; line-height:1.75; transition:color .5s; }
[data-variant="b"] .hsub { color:rgba(255,255,255,.6); }

.hbtns { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.btn-p {
  background:linear-gradient(135deg,var(--sea-dk),var(--sea-md)); color:#fff;
  padding:15px 36px; border-radius:50px; font-weight:700; font-size:15px;
  box-shadow:0 8px 28px rgba(26,122,140,.32); transition:transform .2s,box-shadow .2s; display:inline-block;
}
.btn-p:hover { transform:translateY(-3px); box-shadow:0 16px 44px rgba(26,122,140,.38); }
.btn-g {
  color:var(--sea); font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:50px; border:1.5px solid rgba(26,122,140,.25);
  transition:border-color .2s,background .2s,color .2s;
}
.btn-g:hover { border-color:var(--sea); background:rgba(26,122,140,.05); }
[data-variant="b"] .btn-g { color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.2); }
[data-variant="b"] .btn-g:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); }

.hstats { margin-top:52px; padding-top:36px; border-top:1px solid rgba(26,122,140,.12); }
[data-variant="b"] .hstats { border-color:rgba(255,255,255,.1); }
.sv { font-family:'Outfit',sans-serif; font-size:36px; font-weight:900; color:var(--sea); line-height:1; }
[data-variant="b"] .sv { color:var(--turq); }
.sl { font-size:12px; color:var(--lite); margin-top:5px; letter-spacing:.02em; }
[data-variant="b"] .sl { color:rgba(255,255,255,.4); }

/* browser mockup */
.hero-r { position:relative; }
.bmock { background:#fff; border-radius:var(--rxl); box-shadow:var(--s3); overflow:hidden; transition:box-shadow .5s; }
[data-variant="b"] .bmock {
  background:rgba(255,255,255,.06); border:1px solid rgba(76,191,160,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(76,191,160,.12);
}
.bbar { background:var(--bg2); padding:12px 16px; display:flex; align-items:center; gap:7px; }
[data-variant="b"] .bbar { background:rgba(255,255,255,.04); }
.bdd  { width:10px; height:10px; border-radius:50%; }
.burl { flex:1; margin-left:10px; height:9px; border-radius:5px; background:rgba(26,122,140,.12); }
[data-variant="b"] .burl { background:rgba(76,191,160,.1); }
.bbody { padding:22px; display:flex; flex-direction:column; gap:10px; }
.mhero {
  width:100%; height:130px; border-radius:10px;
  background:linear-gradient(135deg,rgba(26,122,140,.15) 0%,rgba(76,191,160,.1) 100%);
  position:relative; overflow:hidden;
}
[data-variant="b"] .mhero { background:linear-gradient(135deg,rgba(76,191,160,.12) 0%,rgba(42,154,173,.06) 100%); }
.mcards { margin-top:4px; } /* rejilla Bootstrap (row row-cols-3) */
.mcard  { height:56px; border-radius:8px; background:rgba(26,122,140,.08); animation:shimmer 2.5s ease-in-out infinite; }
.mcard:nth-child(2) { animation-delay:.5s; }
.mcard:nth-child(3) { animation-delay:1s; }
[data-variant="b"] .mcard { background:rgba(76,191,160,.07); }
@keyframes shimmer { 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
.mline { height:8px; border-radius:4px; background:rgba(26,122,140,.1); }
[data-variant="b"] .mline { background:rgba(76,191,160,.1); }

.fbadge {
  position:absolute; background:#fff; border-radius:14px;
  padding:10px 16px; display:flex; align-items:center; gap:9px;
  box-shadow:0 8px 32px rgba(13,77,92,.16);
  font-size:13px; font-weight:600; color:var(--sea);
  animation:floatBadge 4s ease-in-out infinite;
}
[data-variant="b"] .fbadge { background:rgba(255,255,255,.1); border:1px solid rgba(76,191,160,.25); color:var(--turq-l); backdrop-filter:blur(12px); }
.fb1 { top:-18px; right:-24px; animation-delay:0s; }
.fb2 { bottom:28px; left:-40px; animation-delay:-2.2s; }
@keyframes floatBadge { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

#wCanvas { position:absolute; bottom:0; left:0; width:100%; height:220px; z-index:1; pointer-events:none; transition:opacity .5s; }
[data-variant="b"] #wCanvas { opacity:.35; }

/* ── SECTIONS SHARED ─────────────────────────────────────── */
.sw   { max-width:1400px; margin:0 auto; padding:100px 64px; }
.stag { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--turq); margin-bottom:12px; }
.stitle { margin-bottom:14px; }
.ssub { font-size:17px; color:var(--mid); max-width:580px; line-height:1.75; margin-bottom:60px; }

/* ── SERVICES ────────────────────────────────────────────── */
#servicios { background:var(--white); }
/* .sgrid: rejilla gestionada por Bootstrap (row/row-cols) */
.scard {
  background:var(--white); border:1.5px solid rgba(26,122,140,.1);
  border-radius:var(--rlg); padding:36px 32px;
  cursor:pointer; transition:box-shadow .25s,border-color .25s;
  transform-style:preserve-3d; will-change:transform;
}
.scard:hover { border-color:var(--sea); box-shadow:0 24px 64px rgba(26,122,140,.14), 0 0 0 1px var(--sea); }
[data-variant="b"] .scard:hover { border-color:var(--turq); box-shadow:0 24px 64px rgba(76,191,160,.18), 0 0 40px rgba(76,191,160,.12); }
.sicon {
  width:56px; height:56px;
  background:linear-gradient(135deg,rgba(26,122,140,.1),rgba(76,191,160,.1));
  border-radius:16px; display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; transition:background .25s;
}
.scard:hover .sicon { background:linear-gradient(135deg,var(--sea),var(--turq)); }
.sicon svg { color:var(--sea); transition:color .25s; }
.scard:hover .sicon svg { color:#fff; }
.scard h3 { font-size:19px; margin-bottom:10px; }
.scard p  { color:var(--mid); font-size:14px; line-height:1.65; }
.slink {
  display:inline-flex; align-items:center; gap:5px; margin-top:18px;
  font-size:13px; font-weight:600; color:var(--sea);
  opacity:0; transform:translateX(-8px); transition:opacity .2s,transform .2s;
}
.scard:hover .slink { opacity:1; transform:translateX(0); }

/* ── WHY US ──────────────────────────────────────────────── */
#porque { background:var(--bg2); }
.wgrid  { --bs-gutter-y:2rem; } /* rejilla Bootstrap (row + col-lg-6); gutter-x en @media abajo */
.reasons { display:flex; flex-direction:column; gap:36px; }
.reason  { display:flex; gap:22px; align-items:flex-start; }
.rn {
  font-family:'Outfit',sans-serif; font-size:52px; font-weight:900; line-height:1;
  background:linear-gradient(135deg,var(--sea),var(--turq));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  min-width:60px;
}
.reason h4 { font-size:18px; font-weight:700; margin-bottom:7px; }
.reason p  { color:var(--mid); font-size:14px; line-height:1.6; }
/* .metrics: rejilla Bootstrap (row row-cols-2) */
.metric  { background:#fff; border-radius:var(--rmd); padding:30px 24px; box-shadow:var(--s1); border:1px solid rgba(26,122,140,.07); text-align:center; }
.mv { font-family:'Outfit',sans-serif; font-size:44px; font-weight:900; color:var(--sea); line-height:1; }
.ml { font-size:13px; color:var(--mid); margin-top:7px; }

/* ── PORTFOLIO ───────────────────────────────────────────── */
#portfolio { background:var(--white); }
/* .pgrid: rejilla Bootstrap (row row-cols-*) */
.pitem { border-radius:var(--rlg); overflow:hidden; position:relative; aspect-ratio:4/3; cursor:pointer; }
.pbg   { width:100%; height:100%; transition:transform .45s cubic-bezier(.25,.46,.45,.94); }
.pitem:hover .pbg { transform:scale(1.06); }
.pover {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(13,77,92,.92) 0%,transparent 55%);
  opacity:0; transition:opacity .3s; display:flex; align-items:flex-end; padding:28px;
}
.pitem:hover .pover { opacity:1; }
.ptag {
  display:inline-block; background:rgba(76,191,160,.25); border:1px solid var(--turq);
  color:var(--turq-l); font-size:10px; font-weight:700; padding:4px 10px; border-radius:4px;
  margin-bottom:8px; text-transform:uppercase; letter-spacing:.06em;
}
.pinfo h4 { color:#fff; font-size:17px; }
.pinfo p  { color:rgba(255,255,255,.65); font-size:13px; margin-top:4px; }
.plabel {
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; font-family:'Space Grotesk',monospace; font-size:12px;
  color:rgba(255,255,255,.3); text-align:center; line-height:1.8;
}
.plabel svg { opacity:.25; }

/* ── TESTIMONIALS ────────────────────────────────────────── */
#testimonios { background:var(--bg2); }
.ttrack {
  display:flex; gap:24px; overflow-x:auto; scrollbar-width:none;
  padding-bottom:4px; cursor:grab;
}
.ttrack::-webkit-scrollbar { display:none; }
.ttrack.grab { cursor:grabbing; }
.tcard  { background:#fff; border-radius:var(--rlg); padding:32px; min-width:340px; max-width:340px; flex-shrink:0; box-shadow:var(--s1); }
.tstars { display:flex; gap:3px; margin-bottom:14px; color:#f59e0b; font-size:14px; }
.tq     { font-size:38px; line-height:1; color:var(--turq); font-family:Georgia,serif; margin-bottom:10px; }
.ttxt   { font-size:14px; color:var(--mid); line-height:1.7; margin-bottom:24px; }
.tau    { display:flex; align-items:center; gap:12px; }
.tav    {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--sea),var(--turq));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:14px;
}
.tname { font-weight:600; font-size:14px; }
.trole { font-size:12px; color:var(--lite); }

/* ── CTA ─────────────────────────────────────────────────── */
.cta {
  position:relative; overflow:hidden; text-align:center; padding:130px 64px;
  background:var(--text);
}
@keyframes gmove { 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
.cta::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 15% 80%,rgba(76,191,160,.12) 0%,transparent 50%),
    radial-gradient(circle at 85% 20%,rgba(26,122,140,.18) 0%,transparent 50%);
}
.cta-in    { position:relative; z-index:1; max-width:720px; margin:0 auto; }
.cta-in h2 { color:#fff; margin-bottom:20px; }
.cta-in p  { color:rgba(255,255,255,.75); font-size:18px; margin-bottom:44px; line-height:1.7; }
.cbtns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn-w {
  background:#fff; color:var(--sea-dk); padding:15px 40px; border-radius:50px;
  font-weight:700; font-size:15px; box-shadow:0 8px 28px rgba(0,0,0,.2);
  transition:transform .2s,box-shadow .2s; display:inline-block;
}
.btn-w:hover { transform:translateY(-3px); box-shadow:0 16px 44px rgba(0,0,0,.25); }
.btn-ow {
  border:2px solid rgba(255,255,255,.45); color:#fff;
  padding:13px 36px; border-radius:50px; font-weight:600; font-size:15px;
  transition:border-color .2s,background .2s; display:inline-block;
}
.btn-ow:hover { border-color:#fff; background:rgba(255,255,255,.1); }

/* ── FOOTER ──────────────────────────────────────────────── */
footer { background:var(--text); color:rgba(255,255,255,.6); padding:64px 64px 40px; }
.fgrid {
  max-width:1400px; margin:0 auto;
  --bs-gutter-y:32px; /* rejilla Bootstrap; gutter-x en @media abajo */
  padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08);
}
.fbrand p { font-size:14px; line-height:1.75; margin-top:16px; max-width:280px; }
.fcol h5  {
  color:#fff; font-family:'Outfit',sans-serif; font-size:13px;
  font-weight:700; margin-bottom:20px; text-transform:uppercase; letter-spacing:.08em;
}
.fcol ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.fcol ul li a { font-size:13px; transition:color .2s; }
.fcol ul li a:hover { color:var(--turq); }
.fbot {
  max-width:1400px; margin:0 auto; padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; font-size:13px;
}

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.rv { opacity:0; transform:translateY(38px); transition:opacity .75s cubic-bezier(.25,.46,.45,.94),transform .75s cubic-bezier(.25,.46,.45,.94); }
.rv.vis { opacity:1; transform:translateY(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}
.d4{transition-delay:.4s} .d5{transition-delay:.5s} .d6{transition-delay:.6s}

/* ── VARIANT SWITCHER ────────────────────────────────────── */
#vsw {
  position:fixed; bottom:24px; right:24px; z-index:300;
  background:#fff; border-radius:50px;
  padding:5px 6px 5px 14px;
  box-shadow:0 8px 32px rgba(13,77,92,.18);
  display:flex; align-items:center; gap:6px;
  font-family:'Space Grotesk',sans-serif;
}
#vsw-label { font-size:11px; font-weight:700; color:var(--mid); text-transform:uppercase; letter-spacing:.07em; }
.vsw-b {
  border:none; cursor:pointer; padding:7px 15px; border-radius:50px;
  font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:600;
  transition:background .2s,color .2s; background:transparent; color:var(--mid);
}
.vsw-b.active           { background:var(--sea); color:#fff; }
.vsw-b:hover:not(.active){ background:var(--bg2); }


/* ═══════════════════════════════════════════════════════════
   PÁGINAS INTERIORES — componentes compartidos
   ═══════════════════════════════════════════════════════════ */

/* ── NAV DROPDOWN ─────────────────────────────────────────── */
.nav-item { position:relative; }
.nav-item > a { display:inline-flex; align-items:center; gap:5px; }
.nav-item > a .arr {
  font-size:9px; opacity:.6; transition:transform .2s;
  display:inline-block;
}
.nav-item:hover > a .arr { transform:rotate(180deg); }

.nav-drop {
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:#fff; border-radius:14px;
  box-shadow:0 16px 48px rgba(13,77,92,.14);
  padding:8px; min-width:230px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:300;
}
/* invisible hover bridge so the cursor can travel from the link
   to the dropdown without crossing dead space */
.nav-drop::before {
  content:""; position:absolute;
  left:0; right:0; top:-18px; height:18px;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
[data-variant="b"] .nav-drop { background:#0d2d3a; }

.nav-drop a {
  display:block; padding:9px 14px; border-radius:8px;
  font-size:13px; color:var(--text); font-weight:500;
  transition:background .15s, color .15s;
  white-space:nowrap;
}
[data-variant="b"] .nav-drop a { color:rgba(255,255,255,.8); }
.nav-drop a:hover { background:var(--bg); color:var(--sea); }
[data-variant="b"] .nav-drop a:hover { background:rgba(76,191,160,.1); color:var(--turq); }
.nav-drop .drop-all {
  font-weight:700; color:var(--sea);
  border-bottom:1px solid rgba(26,122,140,.1);
  margin-bottom:4px; padding-bottom:10px;
}
[data-variant="b"] .nav-drop .drop-all { color:var(--turq); border-color:rgba(76,191,160,.15); }

/* mobile dropdown toggle btn */
.nav-item .nav-arr-btn {
  background:none; border:none; cursor:pointer; padding:4px; margin-left:2px;
  color:inherit; font-size:10px; transition:transform .2s; display:none;
}
.nav-item.open .nav-arr-btn { transform:rotate(180deg); }

/* ── BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--lite); flex-wrap:wrap;
  margin-bottom:20px;
}
.breadcrumb a { color:var(--mid); transition:color .2s; }
.breadcrumb a:hover { color:var(--sea); }
.breadcrumb .sep { opacity:.4; }
[data-variant="b"] .breadcrumb { color:rgba(255,255,255,.35); }
[data-variant="b"] .breadcrumb a { color:rgba(255,255,255,.55); }
[data-variant="b"] .breadcrumb a:hover { color:var(--turq); }

/* ── PAGE HERO (interior pages) ───────────────────────────── */
.page-hero {
  position:relative; overflow:hidden;
  background:var(--bg); padding:150px 64px 80px;
  transition:background .5s;
}
[data-variant="b"] .page-hero { background:#081728; }
.page-hero .orbs { position:absolute; inset:0; pointer-events:none; }
.page-hero-inner { position:relative; z-index:1; max-width:1400px; margin:0 auto; }
.page-hero h1 { font-size:clamp(36px,4vw,60px); margin-bottom:16px; }
[data-variant="b"] .page-hero h1 { color:#fff; }
.page-hero p { font-size:17px; color:var(--mid); max-width:620px; line-height:1.75; }
[data-variant="b"] .page-hero p { color:rgba(255,255,255,.6); }

/* ── CONTACT PAGE ─────────────────────────────────────────── */
.contact-grid { --bs-gutter-y:2rem; } /* rejilla Bootstrap (row + col-lg-7/5); gutter-x en @media abajo */
.cform { display:flex; flex-direction:column; gap:20px; }
.field-row.row { row-gap:16px; } /* rejilla Bootstrap (row + col-sm-6) */
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-size:13px; font-weight:600; color:var(--text); }
.field input, .field select, .field textarea {
  font-family:'Space Grotesk',sans-serif;
  font-size:14px; color:var(--text);
  background:#fff; border:1.5px solid rgba(26,122,140,.18);
  border-radius:10px; padding:12px 16px;
  transition:border-color .2s, box-shadow .2s;
  outline:none; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--sea);
  box-shadow:0 0 0 3px rgba(26,122,140,.1);
}
.field textarea { resize:vertical; min-height:130px; }
.field select { cursor:pointer; }
.btn-submit {
  background:linear-gradient(135deg,var(--sea-dk),var(--sea-md));
  color:#fff; border:none; cursor:pointer;
  padding:15px 36px; border-radius:50px; font-weight:700; font-size:15px;
  font-family:'Space Grotesk',sans-serif;
  box-shadow:0 8px 28px rgba(26,122,140,.32);
  transition:transform .2s,box-shadow .2s; align-self:flex-start;
}
.btn-submit:hover { transform:translateY(-3px); box-shadow:0 16px 44px rgba(26,122,140,.38); }

.contact-sidebar { display:flex; flex-direction:column; gap:20px; }
.contact-card {
  background:#fff; border-radius:var(--rlg); padding:28px;
  box-shadow:var(--s1); border:1px solid rgba(26,122,140,.07);
}
.contact-card h4 { font-size:16px; margin-bottom:18px; }
.cinfo-item {
  display:flex; align-items:flex-start; gap:14px;
  padding:12px 0; border-bottom:1px solid rgba(26,122,140,.06);
}
.cinfo-item:last-child { border-bottom:none; padding-bottom:0; }
.cinfo-icon {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(26,122,140,.1),rgba(76,191,160,.1));
  display:flex; align-items:center; justify-content:center;
}
.cinfo-icon svg { color:var(--sea); }
.cinfo-text strong { display:block; font-size:13px; font-weight:600; color:var(--text); }
.cinfo-text span   { font-size:13px; color:var(--mid); }
.map-placeholder {
  width:100%; height:180px; border-radius:var(--rmd);
  background:linear-gradient(135deg,rgba(26,122,140,.1),rgba(76,191,160,.08));
  display:flex; align-items:center; justify-content:center;
  font-family:monospace; font-size:12px; color:var(--lite); text-align:center;
  border:1px solid rgba(26,122,140,.1);
}

/* ── SERVICES PAGE ────────────────────────────────────────── */
.svc-big-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.svc-big-card {
  background:#fff; border:1.5px solid rgba(26,122,140,.1);
  border-radius:var(--rlg); padding:40px 36px;
  transition:box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column;
}
.svc-big-card:hover { border-color:var(--sea); box-shadow:var(--s2); }
.svc-big-icon {
  width:64px; height:64px;
  background:linear-gradient(135deg,rgba(26,122,140,.1),rgba(76,191,160,.1));
  border-radius:18px; display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; transition:background .25s;
}
.svc-big-card:hover .svc-big-icon { background:linear-gradient(135deg,var(--sea),var(--turq)); }
.svc-big-icon svg { color:var(--sea); transition:color .25s; }
.svc-big-card:hover .svc-big-icon svg { color:#fff; }
.svc-big-card h3 { font-size:22px; margin-bottom:12px; }
.svc-big-card > p { color:var(--mid); font-size:14px; line-height:1.7; margin-bottom:22px; }
.feat-list { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:28px; }
.feat-list li { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--mid); }
.feat-list li::before {
  content:''; width:16px; height:16px; flex-shrink:0;
  background:linear-gradient(135deg,var(--sea),var(--turq));
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='3 8 6 11 13 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.svc-big-card .btn-g { margin-top:auto; align-self:flex-start; }

/* ── SERVICE DETAIL ───────────────────────────────────────── */
.feat-grid { margin-top:8px; } /* rejilla Bootstrap (row row-cols-*) */
.feat-item {
  background:#fff; border-radius:var(--rmd); padding:24px;
  border:1px solid rgba(26,122,140,.08); box-shadow:var(--s1);
  display:flex; flex-direction:column; gap:10px;
}
.feat-item-icon {
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,rgba(26,122,140,.1),rgba(76,191,160,.1));
  display:flex; align-items:center; justify-content:center;
}
.feat-item-icon svg { color:var(--sea); }
.feat-item h4 { font-size:15px; font-weight:700; }
.feat-item p  { font-size:13px; color:var(--mid); line-height:1.6; }

.process-steps { display:flex; flex-direction:column; gap:0; position:relative; }
.process-steps::before {
  content:''; position:absolute; left:23px; top:46px; bottom:46px;
  width:2px; background:linear-gradient(to bottom,var(--sea),var(--turq));
  opacity:.2;
}
.step {
  display:flex; gap:24px; align-items:flex-start;
  padding:24px 0; position:relative;
}
.step-n {
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--sea),var(--sea-md));
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-weight:800; font-size:16px; color:#fff;
  box-shadow:0 4px 16px rgba(26,122,140,.28); z-index:1;
}
.step-body h4 { font-size:17px; font-weight:700; margin-bottom:7px; }
.step-body p  { font-size:14px; color:var(--mid); line-height:1.65; }

/* FAQ Accordion */
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-item {
  background:#fff; border-radius:var(--rmd);
  border:1.5px solid rgba(26,122,140,.1);
  overflow:hidden; transition:border-color .2s;
}
.faq-item.open { border-color:var(--sea); }
.faq-q {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; cursor:pointer;
  font-size:15px; font-weight:600; color:var(--text);
  user-select:none;
}
.faq-q .faq-icon {
  width:24px; height:24px; border-radius:50%;
  background:rgba(26,122,140,.1); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; transition:background .2s, transform .2s;
}
.faq-item.open .faq-icon { background:var(--sea); transform:rotate(45deg); }
.faq-icon svg { color:var(--sea); }
.faq-item.open .faq-icon svg { color:#fff; }
.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.25,.46,.45,.94), padding .35s;
  padding:0 24px;
}
.faq-item.open .faq-a {
  max-height:400px;
  padding:0 24px 20px;
}
.faq-a p { font-size:14px; color:var(--mid); line-height:1.7; }

/* ── BLOG PAGE ────────────────────────────────────────────── */
.blog-cats {
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px;
}
.blog-cat {
  padding:8px 18px; border-radius:50px; font-size:13px; font-weight:600;
  border:1.5px solid rgba(26,122,140,.2); color:var(--mid);
  cursor:pointer; transition:all .2s; background:transparent;
  font-family:'Space Grotesk',sans-serif;
}
.blog-cat.active, .blog-cat:hover { background:var(--sea); color:#fff; border-color:var(--sea); }

.blog-featured {
  border-radius:var(--rxl); overflow:hidden;
  --bs-gutter-x:0; /* rejilla Bootstrap (row + col-lg-7/5) */
  background:#fff; box-shadow:var(--s2);
  margin-bottom:40px;
  transition:box-shadow .25s;
}
.blog-featured:hover { box-shadow:var(--s3); }
.blog-feat-img {
  min-height:340px;
  background:linear-gradient(135deg,#0d4d5c 0%,#2a9aad 50%,#4cbfa0 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:monospace; font-size:12px; color:rgba(255,255,255,.3);
}
.blog-feat-body { padding:40px; display:flex; flex-direction:column; justify-content:center; }
.blog-cat-pill {
  display:inline-block; background:rgba(76,191,160,.12);
  border:1px solid rgba(76,191,160,.3); color:var(--sea);
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:50px;
  margin-bottom:16px; text-transform:uppercase; letter-spacing:.06em;
}
.blog-feat-body h2 { font-size:clamp(20px,2.5vw,28px); margin-bottom:14px; line-height:1.25; }
.blog-feat-body p  { font-size:14px; color:var(--mid); line-height:1.7; margin-bottom:24px; }
.blog-meta { display:flex; gap:16px; font-size:12px; color:var(--lite); margin-top:auto; padding-top:16px; border-top:1px solid rgba(26,122,140,.07); }

/* .blog-grid: rejilla Bootstrap (row row-cols-*) */
.blog-card {
  background:#fff; border-radius:var(--rlg); overflow:hidden;
  box-shadow:var(--s1); transition:box-shadow .25s, transform .25s;
  display:flex; flex-direction:column;
}
.blog-card:hover { box-shadow:var(--s2); transform:translateY(-4px); }
.blog-card-img {
  height:180px;
  background:linear-gradient(135deg,var(--sea-dk),var(--sea-md));
  display:flex; align-items:center; justify-content:center;
  font-family:monospace; font-size:11px; color:rgba(255,255,255,.3);
}
.blog-card-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.blog-card-body h3 { font-size:16px; margin-bottom:10px; line-height:1.35; }
.blog-card-body p  { font-size:13px; color:var(--mid); line-height:1.65; margin-bottom:16px; flex:1; }
.blog-card-meta { display:flex; gap:12px; font-size:11px; color:var(--lite); margin-top:auto; padding-top:12px; border-top:1px solid rgba(26,122,140,.06); }
.read-more { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--sea); margin-top:12px; }
.read-more svg { transition:transform .2s; }
.blog-card:hover .read-more svg { transform:translateX(3px); }

/* ── BLOG ARTICLE ─────────────────────────────────────────── */
.article-layout { --bs-gutter-y:2rem; } /* rejilla Bootstrap (row + col-lg-8/4); gutter-x en @media abajo */
.article-content { font-size:16px; line-height:1.85; color:var(--text); }
.article-content h2 { font-size:clamp(22px,3vw,30px); margin:40px 0 16px; }
.article-content h3 { font-size:clamp(18px,2.5vw,22px); margin:32px 0 12px; }
.article-content p  { margin-bottom:20px; color:var(--mid); }
.article-content ul, .article-content ol { padding-left:24px; margin-bottom:20px; }
.article-content li { margin-bottom:8px; color:var(--mid); }
.article-content blockquote {
  border-left:3px solid var(--turq); padding:16px 24px; margin:28px 0;
  background:rgba(76,191,160,.06); border-radius:0 10px 10px 0;
  font-style:italic; color:var(--sea-dk);
}
[data-variant="b"] .article-content { color:#fff; }
[data-variant="b"] .article-content p,
[data-variant="b"] .article-content li { color:rgba(255,255,255,.72); }
[data-variant="b"] .article-content blockquote { background:rgba(76,191,160,.1); color:var(--turq-l); }
[data-variant="b"] .article-content .highlight-box {
  background:linear-gradient(135deg,rgba(76,191,160,.14),rgba(76,191,160,.05));
  border-color:rgba(76,191,160,.22);
}
.article-content .highlight-box {
  background:linear-gradient(135deg,rgba(26,122,140,.06),rgba(76,191,160,.04));
  border:1px solid rgba(26,122,140,.12); border-radius:var(--rmd);
  padding:24px; margin:28px 0;
}
.article-sidebar { position:sticky; top:90px; display:flex; flex-direction:column; gap:20px; }
.sidebar-card {
  background:#fff; border-radius:var(--rlg); padding:24px;
  box-shadow:var(--s1); border:1px solid rgba(26,122,140,.07);
}
.sidebar-card h4 { font-size:14px; font-weight:700; margin-bottom:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--sea); }
.related-list { display:flex; flex-direction:column; gap:12px; }
.related-item { display:flex; flex-direction:column; gap:4px; }
.related-item a { font-size:13px; font-weight:600; color:var(--text); transition:color .2s; }
.related-item a:hover { color:var(--sea); }
.related-item span { font-size:11px; color:var(--lite); }
.author-card { display:flex; gap:14px; align-items:center; }
.author-av {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--sea),var(--turq));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:16px;
}
.author-name { font-weight:600; font-size:14px; }
.author-role { font-size:12px; color:var(--lite); }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag {
  padding:5px 12px; border-radius:50px; font-size:11px; font-weight:600;
  background:var(--bg); color:var(--mid); border:1px solid rgba(26,122,140,.1);
  cursor:pointer; transition:all .2s;
}
.tag:hover { background:var(--sea); color:#fff; border-color:var(--sea); }

/* article header */
.article-header {
  background:linear-gradient(135deg,var(--sea-dk),var(--sea-md));
  padding:160px 64px 80px; position:relative; overflow:hidden;
}
.article-header h1 { color:#fff; font-size:clamp(28px,4vw,52px); max-width:800px; margin-bottom:20px; }
.article-header .ameta { display:flex; gap:20px; color:rgba(255,255,255,.65); font-size:14px; }

/* ── PORTFOLIO PAGE ─────────────────────────────────── */
.port-section { background:var(--white); transition:background .35s; }
[data-variant="b"] .port-section { background:#081728; }

.port-wave-sep { background:var(--white); transition:background .35s; }
[data-variant="b"] .port-wave-sep { background:#081728; }

.port-filters {
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:52px;
}
.pf-btn {
  padding:8px 20px; border-radius:50px; font-size:13px; font-weight:600;
  border:1.5px solid rgba(26,122,140,.2); color:var(--mid);
  cursor:pointer; transition:all .2s; background:transparent;
  font-family:'Space Grotesk',sans-serif;
}
.pf-btn.active, .pf-btn:hover { background:var(--sea); color:#fff; border-color:var(--sea); }
[data-variant="b"] .pf-btn { color:rgba(255,255,255,.7); border-color:rgba(76,191,160,.25); }
[data-variant="b"] .pf-btn.active, [data-variant="b"] .pf-btn:hover { background:var(--turq); color:#081728; border-color:var(--turq); font-weight:700; }

/* featured project */
.port-featured {
  border-radius:var(--rxl); overflow:hidden;
  --bs-gutter-x:0; /* rejilla Bootstrap (row + col-lg-7/5) */
  background:#fff; box-shadow:var(--s2); margin-bottom:40px;
  transition:box-shadow .3s, transform .3s;
}
[data-variant="b"] .port-featured {
  background:#0d2338;
  border:1px solid rgba(76,191,160,.15);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.port-featured:hover { box-shadow:var(--s3); }
[data-variant="b"] .port-featured:hover { box-shadow:0 16px 48px rgba(0,0,0,.45); }

.port-feat-visual {
  min-height:400px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#eef4f7;
}
[data-variant="b"] .port-feat-visual {
  background:#132a40;
  border-right:1px solid rgba(76,191,160,.1);
}
.port-feat-visual .pf-label {
  font-family:monospace; font-size:12px; color:var(--mid); opacity:.6;
  text-align:center; line-height:2; z-index:1;
}
[data-variant="b"] .port-feat-visual .pf-label { color:rgba(255,255,255,.6); }
.port-feat-body {
  padding:48px 44px; display:flex; flex-direction:column; justify-content:center;
}
.port-cat {
  display:inline-block; background:rgba(76,191,160,.12);
  border:1px solid rgba(76,191,160,.3); color:var(--sea);
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:50px;
  margin-bottom:18px; text-transform:uppercase; letter-spacing:.07em;
  width:fit-content;
}
[data-variant="b"] .port-cat { color:var(--turq-l); background:rgba(76,191,160,.15); border-color:rgba(76,191,160,.35); }
.port-feat-body h2 { font-size:clamp(22px,2.5vw,30px); margin-bottom:14px; line-height:1.2; }
[data-variant="b"] .port-feat-body h2 { color:#fff; }
.port-feat-body p  { font-size:14px; color:var(--mid); line-height:1.75; margin-bottom:24px; }
[data-variant="b"] .port-feat-body p { color:rgba(255,255,255,.7); }
.port-techs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.port-tech {
  padding:5px 12px; border-radius:6px; font-size:11px; font-weight:600;
  background:var(--bg); color:var(--mid); border:1px solid rgba(26,122,140,.1);
  font-family:monospace;
}
[data-variant="b"] .port-tech { background:#081728; color:rgba(255,255,255,.75); border-color:rgba(76,191,160,.2); }
.port-feat-meta {
  display:flex; gap:20px; font-size:12px; color:var(--lite);
  padding-top:20px; border-top:1px solid rgba(26,122,140,.07);
}
[data-variant="b"] .port-feat-meta { border-color:rgba(76,191,160,.12); color:rgba(255,255,255,.5); }
.port-feat-meta strong { color:var(--text); font-weight:600; }
[data-variant="b"] .port-feat-meta strong { color:#fff; }

/* project grid */
/* .port-grid-full: rejilla Bootstrap (row row-cols-*) */
.port-card {
  border-radius:var(--rlg); overflow:hidden;
  background:#fff; box-shadow:var(--s1);
  display:flex; flex-direction:column;
  transition:box-shadow .3s, transform .3s, border-color .3s;
}
[data-variant="b"] .port-card {
  background:#0d2338;
  border:1px solid rgba(76,191,160,.12);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.port-card:hover { box-shadow:var(--s2); transform:translateY(-4px); }
[data-variant="b"] .port-card:hover {
  border-color:var(--turq);
  box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 24px rgba(76,191,160,.12);
}
.port-card-img {
  aspect-ratio:16/9; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#eef4f7;
}
[data-variant="b"] .port-card-img {
  background:#132a40;
  border-bottom:1px solid rgba(76,191,160,.1);
}
.port-card-img img,
.port-feat-visual img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; z-index:2;
}
.port-card-img .pf-label {
  font-family:monospace; font-size:11px; color:var(--mid); opacity:.6;
  text-align:center; line-height:1.8; z-index:1;
}
[data-variant="b"] .port-card-img .pf-label { color:rgba(255,255,255,.6); }
.port-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,77,92,.85) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
  display:flex; align-items:flex-end; padding:20px;
  z-index:3;
}
[data-variant="b"] .port-card-overlay {
  background:linear-gradient(to top, rgba(8,23,40,.92) 0%, transparent 65%);
}
.port-card:hover .port-card-overlay { opacity:1; }
.port-card-body { padding:22px; flex:1; display:flex; flex-direction:column; gap:10px; }
.port-card-body h3 { font-size:16px; font-weight:700; line-height:1.3; }
[data-variant="b"] .port-card-body h3 { color:#fff; }
.port-card-body p  { font-size:13px; color:var(--mid); line-height:1.65; flex:1; }
[data-variant="b"] .port-card-body p { color:rgba(255,255,255,.7); }
.port-card-techs { display:flex; flex-wrap:wrap; gap:6px; }
.port-card-techs .port-tech { font-size:10px; padding:3px 9px; }
.port-card-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:12px; border-top:1px solid rgba(26,122,140,.07);
}
[data-variant="b"] .port-card-footer { border-color:rgba(76,191,160,.1); }
.port-card-footer span { font-size:11px; color:var(--lite); }
[data-variant="b"] .port-card-footer span { color:rgba(255,255,255,.45); }
.port-card-link {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; color:var(--sea);
  transition:gap .2s;
}
[data-variant="b"] .port-card-link { color:var(--turq); }
.port-card:hover .port-card-link { gap:8px; }

/* stats bar */
.port-stats { margin-bottom:72px; } /* rejilla Bootstrap (row row-cols-*) */
.port-stat {
  background:#fff; border-radius:var(--rmd); padding:28px 24px;
  box-shadow:var(--s1); border:1px solid rgba(26,122,140,.07); text-align:center;
}
[data-variant="b"] .port-stat {
  background:#0d2338;
  border-color:rgba(76,191,160,.15);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
[data-variant="b"] .port-stat .mv { color:var(--turq); }
[data-variant="b"] .port-stat .ml { color:rgba(255,255,255,.65); }

/* pagination in dark theme */
.port-pagination a {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  border:1.5px solid rgba(26,122,140,.2); background:transparent;
  color:var(--mid); font-weight:600; font-family:'Space Grotesk',sans-serif;
  text-decoration:none; transition:all .2s;
}
.port-pagination a:hover {
  border-color:var(--sea); color:var(--sea); background:rgba(26,122,140,.06);
}
.port-pagination .page-active {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  border:1.5px solid var(--sea); background:var(--sea);
  color:#fff; font-weight:700; font-family:'Space Grotesk',sans-serif;
}
[data-variant="b"] .port-pagination a {
  border-color:rgba(76,191,160,.25); color:rgba(255,255,255,.7);
}
[data-variant="b"] .port-pagination a:hover {
  border-color:var(--turq); color:var(--turq); background:rgba(76,191,160,.08);
}
[data-variant="b"] .port-pagination .page-active {
  background:var(--turq); color:#081728; border-color:var(--turq);
}

/* ── HOSTING PLANS ────────────────────────────────────────── */
.plan-switch { display:inline-flex; gap:4px; padding:5px; background:rgba(26,122,140,.07); border-radius:50px; margin-bottom:14px; }
.plan-switch button {
  font-family:'Outfit',sans-serif; font-size:14px; font-weight:600; cursor:pointer;
  border:none; background:none; color:var(--mid); padding:11px 26px; border-radius:50px;
  transition:background .25s, color .25s, box-shadow .25s;
}
.plan-switch button.active { background:var(--white); color:var(--sea); box-shadow:var(--s1); }
.plan-note { font-size:13px; color:var(--lite); margin-bottom:44px; }
.plan-group { display:none; }
.plan-group.active { display:block; }
.plans { align-items:start; } /* rejilla Bootstrap (row row-cols-*) */
.plan {
  position:relative; display:flex; flex-direction:column; gap:18px;
  background:var(--white); border:1px solid rgba(26,122,140,.1);
  border-radius:var(--rmd); padding:30px 26px 32px; box-shadow:var(--s1);
  transition:transform .3s, box-shadow .3s;
}
.plan:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(13,77,92,.13); }
.plan-name { font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; color:var(--sea); letter-spacing:.02em; }
.plan-for { font-size:13px; color:var(--mid); line-height:1.6; min-height:42px; }
.plan-price { display:flex; align-items:baseline; gap:5px; padding-bottom:18px; border-bottom:1px solid rgba(26,122,140,.1); }
.plan-price .amt { font-family:'Outfit',sans-serif; font-size:38px; font-weight:800; letter-spacing:-.02em; color:var(--text); line-height:1; }
.plan-price .per { font-size:13px; font-weight:600; color:var(--lite); }
.plan-feats { list-style:none; display:flex; flex-direction:column; gap:11px; flex:1; }
.plan-feats li { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--mid); line-height:1.55; }
.plan-feats li svg { flex:none; margin-top:3px; color:var(--turq); }
.plan-feats li strong { color:var(--text); font-weight:700; }
.plan-btn {
  display:block; text-align:center; font-family:'Outfit',sans-serif; font-size:14px; font-weight:700;
  padding:14px 20px; border-radius:10px; border:1.5px solid var(--sea); color:var(--sea);
  transition:background .25s, color .25s;
}
.plan-btn:hover { background:var(--sea); color:#fff; }
/* featured */
.plan.hot { background:var(--text); border-color:transparent; box-shadow:0 22px 54px rgba(13,45,54,.28); }
[data-variant="b"] .plan.hot { background:linear-gradient(160deg,var(--sea-dk),var(--sea)); }
.plan.hot .plan-name { color:var(--turq-l); }
.plan.hot .plan-for { color:rgba(255,255,255,.68); }
.plan.hot .plan-price { border-color:rgba(255,255,255,.16); }
.plan.hot .plan-price .amt { color:#fff; }
.plan.hot .plan-price .per { color:rgba(255,255,255,.5); }
.plan.hot .plan-feats li { color:rgba(255,255,255,.78); }
.plan.hot .plan-feats li strong { color:#fff; }
.plan.hot .plan-btn { background:var(--turq); border-color:var(--turq); color:#08252b; }
.plan.hot .plan-btn:hover { background:#fff; border-color:#fff; color:var(--text); }
.plan-tag {
  position:absolute; top:-11px; left:26px;
  font-family:'Outfit',sans-serif; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em;
  background:var(--turq); color:#08252b; padding:5px 12px; border-radius:50px;
}

/* ── EMAIL MARKETING PLANS ────────────────────────────────── */
/* .plans.three: usar row-cols-lg-3 en el marcado */
.plan-vol { font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; color:var(--text); margin-top:-6px; }
.plan.hot .plan-vol { color:#fff; }
.plan-save { font-size:12px; font-weight:600; color:var(--turq); min-height:17px; }
.bill-save { display:inline-flex; align-items:center; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--turq); color:#08252b; padding:3px 8px; border-radius:50px; margin-left:8px; }

/* ── POR QUÉ NOSOTROS ─────────────────────────────────────── */
.why-reasons { --bs-gutter-y:56px; margin-top:56px; } /* rejilla Bootstrap; gutter-x en @media abajo */
.why-reasons .reason p { max-width:none; }

/* ── QUIENES SOMOS ────────────────────────────────────────── */
.qs-intro { --bs-gutter-y:2.75rem; } /* rejilla Bootstrap (row + col-lg-7/5); gutter-x en @media abajo */
.qs-intro .lead { font-size:20px; line-height:1.7; color:var(--text); font-weight:500; margin-bottom:22px; }
.qs-intro p { font-size:16px; line-height:1.8; color:var(--mid); }
.qs-intro p + p { margin-top:16px; }
.qs-shot { border-radius:var(--rlg); overflow:hidden; box-shadow:0 20px 54px rgba(13,77,92,.14); }
.qs-shot image-slot { display:block; width:100%; aspect-ratio:4/5; }
/* timeline */
.tl { display:flex; flex-direction:column; gap:0; margin-top:52px; }
.tl-row { --bs-gutter-y:10px; padding:30px 0; border-top:1px solid rgba(26,122,140,.12); } /* rejilla Bootstrap (row + col-auto/col); gutter-x en @media abajo */
.tl-row .tl-year { flex:0 0 120px; }
.tl-row:last-child { border-bottom:1px solid rgba(26,122,140,.12); }
.tl-year { font-family:'Outfit',sans-serif; font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--turq); line-height:1; }
.tl-body h4 { font-family:'Outfit',sans-serif; font-size:19px; font-weight:700; color:var(--text); margin-bottom:8px; }
.tl-body p { font-size:15px; line-height:1.75; color:var(--mid); max-width:620px; }
/* valores */
.qs-vals { margin-top:44px; } /* rejilla Bootstrap (row row-cols-*) */
.qs-val { background:var(--white); border:1px solid rgba(26,122,140,.1); border-radius:var(--rmd); padding:32px 28px; box-shadow:var(--s1); }
.qs-val .n { font-family:'Outfit',sans-serif; font-size:13px; font-weight:800; color:var(--turq); letter-spacing:.1em; margin-bottom:16px; }
.qs-val h4 { font-family:'Outfit',sans-serif; font-size:19px; font-weight:700; color:var(--text); margin-bottom:10px; }
.qs-val p { font-size:14.5px; line-height:1.75; color:var(--mid); }
/* datos empresa */
.qs-facts { margin-top:44px; } /* rejilla Bootstrap (row row-cols-*) */
.qs-fact { border-left:2px solid var(--turq); padding-left:20px; }
.qs-fact dt { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--lite); margin-bottom:8px; }
.qs-fact dd { font-size:15.5px; line-height:1.65; color:var(--text); font-weight:500; }
.qs-fact dd a { color:var(--sea); font-weight:600; }
.qs-fact dd a:hover { color:var(--turq); }



/* ═══════════════════════════════════════════════════════════
   CONTENT THEMES — envoltorios de contenido dinámico (tabla `contenido`)
   La vista se resuelve desde `contenido.layout` (theme1..theme4).
   El cuerpo real llega en .article-content vía el editor de bloques.
   ═══════════════════════════════════════════════════════════ */

/* filete/onda reutilizable antes del CTA */
.ct-wave { background:var(--white); }
[data-variant="b"] .ct-wave { background:#081728; }
.ct-wave svg { display:block; width:100%; height:60px; }

/* ── THEME 1 · Servicio (basado en new_design/servicio-detalle.html) ── */
.ct1-title {
  background:linear-gradient(135deg,var(--sea-dk),var(--sea),var(--turq));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
[data-variant="b"] .ct1-title {
  background:linear-gradient(135deg,var(--sea-md),var(--turq),var(--turq-l));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.page-hero .ct1-lead { max-width:640px; }
.ct1-body { background:var(--white); transition:background .35s; }
[data-variant="b"] .ct1-body { background:#081728; }
.ct1-body .sw { padding-top:72px; padding-bottom:80px; }
.ct1-featured {
  width:100%; aspect-ratio:16/9; max-height:460px; overflow:hidden;
  border-radius:var(--rlg); margin:0 0 44px; box-shadow:var(--s1);
}
.ct1-featured img { width:100%; height:100%; object-fit:cover; display:block; }
.ct1-article { margin:0 auto; }

/* ── THEME 2 · Inmersivo ─────────────────────────────────── */
.ct2-hero {
  position:relative; min-height:62vh;
  display:flex; align-items:flex-end;
  padding:180px 64px 120px;
  background:var(--sea-dk) center/cover no-repeat;
}
.ct2-hero--flat { background:linear-gradient(135deg,var(--sea-dk),var(--sea-md)); min-height:auto; }
.ct2-hero-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; width:100%; }
.ct2-hero-inner h1 { color:#fff; font-size:clamp(34px,4.4vw,58px); margin-bottom:18px; max-width:16ch; }
.ct2-hero-inner p { color:rgba(255,255,255,.82); font-size:18px; line-height:1.7; max-width:60ch; }
.ct2-crumb, .ct2-crumb a { color:rgba(255,255,255,.6); }
.ct2-crumb a:hover { color:#fff; }
.ct2-body { background:var(--bg2); transition:background .35s; padding:0 24px 96px; }
[data-variant="b"] .ct2-body { background:#0d2338; }
.ct2-card {
  max-width:860px; margin:-88px auto 0; position:relative; z-index:2;
  background:var(--white); border-radius:var(--rxl);
  padding:64px clamp(24px,5vw,72px); box-shadow:var(--s3);
}
/* Tarjeta de continuación: tras un shortcode a ancho completo ya no se eleva sobre el hero */
.ct2-card--cont { margin-top:72px; }
[data-variant="b"] .ct2-card { background:#0f2b40; }
/* El hero oscuro de theme2 arranca bajo el nav fijo: forzamos el estado
   "scrolled" del nav (fondo + blur) para legibilidad, sin depender del scroll
   ni tocar el markup del header. */
body:has(.ct2-hero) .nav { background:rgba(242,250,252,.93); backdrop-filter:blur(16px); box-shadow:var(--s1); }
[data-variant="b"] body:has(.ct2-hero) .nav { background:rgba(8,23,40,.93); }

/* ── THEME 3 · Documento ─────────────────────────────────── */
.ct3-section { background:var(--white); transition:background .35s; }
[data-variant="b"] .ct3-section { background:#081728; }
.ct3-wrap {
  max-width:1200px; margin:0 auto; padding:132px 64px 96px;
  --bs-gutter-y:2.5rem; /* rejilla Bootstrap (row + col-lg-4/8); gutter-x en @media abajo */
}
/* Tramo de continuación tras un shortcode: sin el hueco reservado al nav fijo */
.ct3-wrap--cont { padding-top:72px; }
.ct3-aside { position:sticky; top:112px; }
.ct3-aside h1 { font-size:clamp(26px,2.6vw,36px); margin:14px 0 16px; }
.ct3-aside p { font-size:15px; line-height:1.7; color:var(--mid); }
.ct3-meta { margin-top:18px; font-size:13px; color:var(--lite); }
[data-variant="b"] .ct3-aside h1 { color:#fff; }
[data-variant="b"] .ct3-aside p { color:rgba(255,255,255,.65); }
[data-variant="b"] .ct3-meta { color:rgba(255,255,255,.4); }
.ct3-main .article-content { max-width:72ch; }

/* ── THEME 4 · Minimal ───────────────────────────────────── */
.ct4-wrap { max-width:680px; margin:0 auto; padding:140px 24px 110px; }
/* Tramo de continuación tras un shortcode: sin el hueco reservado al nav fijo */
.ct4-wrap--cont { padding-top:72px; }
[data-variant="b"] body:has(.ct4-wrap) { background:#081728; }
.ct4-title { font-size:clamp(30px,4vw,44px); margin:16px 0 20px; letter-spacing:-.01em; }
[data-variant="b"] .ct4-title { color:#fff; }
.ct4-lead { font-size:19px; line-height:1.6; color:var(--mid); }
[data-variant="b"] .ct4-lead { color:rgba(255,255,255,.65); }
.ct4-rule { border:0; height:1px; background:rgba(26,122,140,.16); margin:40px 0 44px; }
[data-variant="b"] .ct4-rule { background:rgba(255,255,255,.14); }
.ct4-article { font-size:17.5px; line-height:1.9; }

/* ── THEME 5 · Editorial (variante, duplicado de theme1) ──── */
.ct5-body { background:var(--white); transition:background .35s; }
[data-variant="b"] .ct5-body { background:#081728; }
.ct5-body .sw { padding-top:64px; padding-bottom:80px; }
.ct5-featured {
  width:100%; aspect-ratio:16/9; max-height:460px; overflow:hidden;
  border-radius:var(--rlg); margin:0 0 44px; box-shadow:var(--s1);
}
.ct5-featured img { width:100%; height:100%; object-fit:cover; display:block; }
.ct5-article { max-width:74ch; margin:0 auto; }

/* Utilidades de Bootstrap no incluidas en bootstrap-grid.min.css */
.h-100 { height:100% !important; }
.w-100 { width:100% !important; }

/* ── REJILLA BOOTSTRAP · separación horizontal solo en escritorio ──────────
   Estas filas apilan a 1 columna por debajo de 992px; el gutter-x grande
   solo tiene sentido cuando hay dos columnas. */
@media (min-width: 992px) {
  .hero-inner    { --bs-gutter-x:80px; }
  .wgrid         { --bs-gutter-x:100px; }
  .contact-grid  { --bs-gutter-x:64px; }
  .article-layout{ --bs-gutter-x:64px; }
  .qs-intro      { --bs-gutter-x:80px; }
  .ct3-wrap      { --bs-gutter-x:72px; }
  .fgrid         { --bs-gutter-x:48px; }
}
@media (min-width: 768px) {
  .tl-row        { --bs-gutter-x:36px; }
  .why-reasons   { --bs-gutter-x:72px; }
}