/* ====== CUSTOM CSS (tuyo, tal cual) ====== */
html, body { overflow-x: hidden; width: 100%; max-width: 100%; }
html { font-family: 'Poppins','Montserrat',sans-serif; }
:root { scroll-padding-top: 80px; }
@media (max-width: 860px){ :root { scroll-padding-top: 70px; } }
body { margin:0; }

/* ====== TOKENS: solo para el modo oscuro. El claro queda idéntico al tuyo. ====== */
:root{
  --pg:#ffffff; --ink:#1a2a3a; --ink2:#3b4a59; --ink3:#475569; --ink4:#64748b;
  --navy:#0b2a45; --navy2:#11314a; --navybg:#0b2a45; --navybg2:#15426e; --blue:#0077CC; --blue2:#2ca5f5;
  --soft:#f7fafc; --soft2:#eef5fb; --soft3:#f0f9ff; --soft4:#f8fafc; --soft5:#f9fafb;
  --soft6:#f4f7fa; --chip:#e0f3ff; --chipb:#d7ecfb; --chip2:#e8f4ff; --line:#e6eef7;
  --line2:#d8dee5; --acc:#e0f2fe; --foot:#0b1c2c; --footfg:#cdd9e4; --footdim:#8fa6b8;
  --footline:#1d4e6b; --wa:#25D366; --orange:#f95c2f; --teal:#4dc1c5;
  --fade:#fff; --cardsh:0 6px 18px rgba(0,0,0,.06);
}
body{ background:var(--pg); }

/* ====== PRELOADER ====== */
#sp-preload{ position:fixed; inset:0; z-index:10100; display:grid; place-items:center;
  background:#0b1c2c; transition:opacity .55s ease, visibility .55s ease; }
#sp-preload img{ width:min(230px,52vw); height:auto; opacity:0; transform:scale(.88);
  animation:spLogoIn 1100ms cubic-bezier(.16,1,.3,1) 120ms forwards; }
#sp-pre-txt{ position:absolute; bottom:clamp(74px,20vh,150px); left:0; right:0; margin:0; padding:0 24px;
  text-align:center; font-family:'Caveat',cursive; font-size:clamp(1.35rem,5.2vw,2rem); color:#9fd8da;
  opacity:0; transition:opacity .42s ease; }
#sp-pre-txt.on{ opacity:1; }
#sp-preload::after{ content:""; position:absolute; bottom:clamp(50px,15vh,116px); left:50%; translate:-50% 0;
  width:9px; height:9px; border-radius:50%; background:#4dc1c5;
  animation:spBeat 1400ms ease-in-out infinite; }
@keyframes spLogoIn{ from{opacity:0; transform:scale(.88) translateY(10px); filter:blur(8px);}
                     to{opacity:1; transform:scale(1) translateY(0); filter:blur(0);} }
@keyframes spBeat{ 0%{transform:translate(-50%,0) scale(1); opacity:.5} 12%{transform:translate(-50%,0) scale(1.9); opacity:1} 24%{transform:translate(-50%,0) scale(1); opacity:.5} 36%{transform:translate(-50%,0) scale(1.6); opacity:.9} 48%{transform:translate(-50%,0) scale(1); opacity:.5} 100%{transform:translate(-50%,0) scale(1); opacity:.5} }
html.sp-loaded #sp-preload{ opacity:0; visibility:hidden; pointer-events:none; }
@media (prefers-reduced-motion:reduce){
  #sp-preload img{ animation:none; opacity:1; transform:none; }
  #sp-preload::after{ animation:none; }
  #sp-pre-txt{ opacity:1; }
}

/* ====== GLOBAL SCROLL-REVEAL ENGINE (tuyo) ====== */
.sp-reveal{ opacity:0; transform:translateY(28px); transition:opacity 750ms cubic-bezier(.16,1,.3,1), transform 750ms cubic-bezier(.16,1,.3,1), filter 750ms ease; will-change:opacity, transform; }
.sp-reveal.from-left{ transform:translateX(-44px); }
.sp-reveal.from-right{ transform:translateX(44px); }
.sp-reveal.zoom{ transform:scale(.92); }
.sp-reveal.blur{ filter:blur(12px); transform:translateY(16px); }
.sp-reveal.visible{ opacity:1; transform:none; filter:none; }
.sp-reveal.delay-1{ transition-delay:90ms; } .sp-reveal.delay-2{ transition-delay:180ms; }
.sp-reveal.delay-3{ transition-delay:270ms; } .sp-reveal.delay-4{ transition-delay:360ms; }
.sp-reveal.delay-5{ transition-delay:450ms; } .sp-reveal.delay-6{ transition-delay:540ms; }
@media (prefers-reduced-motion:reduce){ .sp-reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; } }

/* ====== LANDING (tuyo) ====== */
.sp-land{ font-family:'Poppins',sans-serif; color:var(--ink); }
.sp-land *{ box-sizing:border-box; }
.sp-fullbleed{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }

/* HERO */
@keyframes spFadeUpBlur{ from{opacity:0; transform:translateY(30px); filter:blur(14px);} to{opacity:1; transform:translateY(0); filter:blur(0);} }
.sp-hero{ position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; min-height:90vh; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; }
.sp-hero-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.sp-hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,18,32,.46) 0%, rgba(6,18,32,.3) 42%, rgba(6,18,32,.7) 100%); }
.sp-hero-inner{ position:relative; z-index:1; padding:54px 22px 64px; max-width:880px; }
.sp-hero h1{ font-size:clamp(2.3rem,6.4vw,4rem); line-height:1.08; font-weight:800; margin:0 0 16px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.5), 0 0 1px rgba(0,0,0,.9), 0 3px 18px rgba(0,0,0,.55); -webkit-text-stroke:0.6px rgba(0,0,0,.35); opacity:0; animation:spFadeUpBlur 1300ms cubic-bezier(.16,1,.3,1) 150ms forwards; }
.sp-hero h1 .ln2{ display:block; }
.sp-hero h2{ font-size:clamp(1.2rem,3vw,1.85rem); font-weight:600; margin:0 0 18px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.5); opacity:0; animation:spFadeUpBlur 1300ms cubic-bezier(.16,1,.3,1) 450ms forwards; }
.sp-hero p{ font-size:clamp(1rem,2vw,1.16rem); font-weight:300; max-width:640px; margin:0 auto 26px; line-height:1.65; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.45); opacity:0; animation:spFadeUpBlur 1300ms cubic-bezier(.16,1,.3,1) 750ms forwards; }
.sp-hero p strong{ font-weight:600; }
.sp-hero p .nb{ white-space:nowrap; }
.sp-hero .sp-hero-cta{ display:flex; gap:11px; justify-content:center; flex-wrap:wrap; opacity:0; animation:spFadeUpBlur 1100ms cubic-bezier(.16,1,.3,1) 1050ms forwards; }
.sp-hero .sp-btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; font-weight:600; font-size:.98rem; text-decoration:none; transition:transform .2s ease, background .2s ease, box-shadow .2s ease; border:1.5px solid rgba(255,255,255,.6); background:rgba(255,255,255,.14); color:#fff; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.sp-hero .sp-btn:hover{ background:rgba(255,255,255,.26); transform:translateY(-2px); }
.sp-hero .sp-btn-wa{ background:rgba(37,211,102,.92); border-color:rgba(255,255,255,.4); box-shadow:0 6px 20px rgba(37,211,102,.4); }
.sp-hero .sp-btn-wa:hover{ background:#25D366; box-shadow:0 8px 26px rgba(37,211,102,.55); }
/* badge IKO en el hero (nuevo) */
.sp-hero-iko{ display:inline-flex; align-items:center; gap:10px; margin:22px auto 0; padding:6px 15px 6px 10px; border-radius:999px; background:rgba(255,255,255,.93); color:#0b2a45; font-size:.84rem; font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,.3); opacity:0; animation:spFadeUpBlur 1100ms cubic-bezier(.16,1,.3,1) 1320ms forwards; margin-top:34px; }
@media (max-width:600px){ .sp-hero-iko{ margin-top:26px; } }
.sp-hero-iko img{ height:26px; width:auto; display:block; }
.sp-hero-iko .st{ color:#f5a623; letter-spacing:1px; }
@media (max-width:600px){
  .sp-hero{ min-height:100dvh; }
  .sp-hero-inner{ padding:30px 18px 70px; }
  .sp-hero .sp-hero-cta{ flex-direction:column; align-items:stretch; gap:9px; }
  .sp-hero .sp-btn{ justify-content:center; }
  .sp-hero-iko{ font-size:.76rem; padding:5px 12px 5px 8px; }
  .sp-hero-iko img{ height:21px; }
}
@media (prefers-reduced-motion:reduce){ .sp-hero h1,.sp-hero h2,.sp-hero p,.sp-hero .sp-hero-cta,.sp-hero-iko{ animation:none!important; opacity:1!important; transform:none!important; filter:none!important; } }

/* SECTION SHELL */
.sp-section{ max-width:1000px; margin:0 auto; padding:62px 20px; }
.sp-section.tight{ padding:38px 20px; }
.sp-h2{ text-align:center; font-size:clamp(1.55rem,4vw,2.05rem); font-weight:800; color:var(--navy); margin:0 0 10px; }
.sp-lead{ text-align:center; font-size:1.04rem; color:var(--ink3); max-width:720px; margin:0 auto 26px; line-height:1.55; }
@media (max-width:600px){ .sp-section{ padding:46px 18px; } }

.sp-roundphoto{ text-align:center; padding:30px 20px; }
.sp-roundphoto img{ width:200px; height:200px; border-radius:50%; object-fit:cover; box-shadow:0 12px 30px rgba(0,0,0,.18); border:4px solid var(--pg); display:block; margin:0 auto; }
@media (max-width:600px){ .sp-roundphoto img{ width:160px; height:160px; } }

/* INTRO STRIP */
.sp-introstrip{ text-align:center; }
.sp-introstrip .sp-badges{ display:flex; justify-content:center; flex-wrap:wrap; gap:11px; margin-top:18px; }
.sp-introstrip .sp-chip{ background:var(--navybg); color:#fff; padding:9px 18px; border-radius:999px; font-size:.93rem; font-weight:500; }

/* ACCORDION */
.sp-acc{ border-radius:12px; background:var(--soft); box-shadow:0 6px 18px rgba(0,0,0,.05); margin-bottom:14px; padding:20px 22px; transition:background .3s ease; }
.sp-acc:hover{ background:var(--soft2); }
.sp-acc-head{ cursor:pointer; font-weight:600; font-size:1.16rem; position:relative; padding-right:46px; color:var(--navy2); }
.sp-acc-head::after{ content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:18px; color:var(--blue); background:var(--acc); border-radius:7px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; transition:transform .3s ease; }
.sp-acc-head.active::after{ content:'\2212'; }
.sp-acc-head .sp-acc-sub{ display:block; font-weight:500; font-size:.86rem; color:var(--blue); margin-top:4px; }
.sp-acc-body{ display:none; padding-top:14px; line-height:1.65; font-size:1rem; color:var(--ink2); }
.sp-acc-body h4{ margin:14px 0 6px; font-size:1.01rem; color:var(--blue); }
.sp-acc-body ul{ padding-left:20px; margin:6px 0; }
.sp-acc-body li{ margin:3px 0; }
.sp-wa-link{ display:inline-block; margin-top:16px; color:#fff; background:#25D366; padding:10px 18px; border-radius:999px; font-weight:600; font-size:.92rem; text-decoration:none; box-shadow:0 4px 12px rgba(37,211,102,.32); transition:transform .2s ease; }
.sp-wa-link:hover{ transform:translateY(-1px); }

/* REVIEWS */
.sp-reviews{ background:var(--soft5); padding:54px 20px; }
.sp-reviews h2{ text-align:center; font-size:clamp(1.5rem,4vw,2rem); font-weight:800; color:var(--navy); margin:0 0 6px; }
.sp-reviews p.sub{ text-align:center; color:var(--ink4); font-size:1rem; margin:0 auto 18px; max-width:560px; }
.sp-reviews .elf-wrap{ max-width:1100px; margin:0 auto; }
.sp-iko-bar{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:0 auto 24px; padding:14px 22px; max-width:560px; background:var(--pg); border:1px solid var(--line); border-radius:14px; box-shadow:var(--cardsh); }
.sp-iko-bar img{ height:46px; width:auto; }

.sp-iko-bar .score{ text-align:left; line-height:1.3; }
.sp-iko-bar .score b{ font-size:1.02rem; color:var(--ink); display:block; font-weight:700; }
.sp-iko-bar .score .st{ color:#f5a623; letter-spacing:2px; font-size:1.05rem; }
.sp-iko-bar .score small{ color:var(--ink4); font-size:.82rem; }
.sp-ikorevs{ max-width:1000px; margin:0 auto; display:grid; gap:12px; }
@media(min-width:780px){ .sp-ikorevs{ grid-template-columns:1fr 1fr; } }
.sp-rev{ background:var(--pg); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--cardsh); }
.sp-rev summary{ list-style:none; cursor:pointer; }
.sp-rev summary::-webkit-details-marker{ display:none; }
.sp-rev .who{ display:flex; align-items:center; gap:7px; font-size:.84rem; color:var(--ink4); margin-bottom:7px; flex-wrap:wrap; }
.sp-rev .who b{ font-weight:700; font-size:.96rem; color:var(--ink); }
.sp-rev .who .st{ margin-left:auto; color:#f5a623; font-size:.82rem; letter-spacing:1px; }
.sp-rev q{ display:block; font-size:1rem; color:var(--ink2); font-style:italic; }
.sp-rev .more{ display:inline-block; margin-top:9px; font-size:.82rem; font-weight:600; color:var(--blue); }
.sp-rev[open] .more{ display:none; }
.sp-rev .full{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:.94rem; color:var(--ink2); line-height:1.6; }
.sp-rev-note{ text-align:center; font-size:.86rem; color:var(--ink4); margin:18px auto 0; max-width:620px; }

/* PRICING */
.sp-price-summary{ max-width:1000px; margin:0 auto 40px; background:var(--soft4); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.05); padding:28px 24px; }
.sp-price-summary h2{ font-size:1.7rem; margin:0 0 20px; color:var(--ink); text-align:center; font-weight:800; }
.sp-ps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.sp-ps-block{ background:var(--pg); border:1px solid var(--line); border-radius:12px; padding:16px; }
.sp-ps-block h4{ font-size:1rem; color:var(--ink2); margin:0 0 8px; font-weight:700; }
.sp-ps-block h4 span{ display:block; font-weight:500; color:var(--ink4); font-size:.82rem; margin-top:2px; }
.sp-ps-block p{ font-size:.95rem; color:var(--ink3); margin:.3rem 0; }
.sp-ps-block .hr{ color:var(--ink4); font-size:.86rem; margin-left:4px; }
.sp-ps-block .ps-note{ margin-top:.7rem; font-size:.84rem; color:var(--ink4); line-height:1.4; }
@media (max-width:768px){ .sp-price-summary{ padding:20px 16px; } .sp-ps-grid{ grid-template-columns:1fr; } }
.sp-pricing{ max-width:1000px; margin:0 auto; }
.sp-tabs-intro{ max-width:760px; margin:0 auto 22px; text-align:center; font-size:1.04rem; color:var(--ink3); }
.sp-tabs-intro strong.title{ font-weight:800; font-size:1.2rem; display:block; margin-bottom:10px; color:var(--navy); }
.sp-tabs-intro strong.title#sp-choose-title{ cursor:pointer; transition:color .2s ease; }
.sp-tabs-intro strong.title#sp-choose-title:hover{ color:var(--blue); }
.sp-tabs-intro .sp-jump{ display:inline-block; font-size:.78rem; font-weight:600; color:var(--blue); background:var(--chip2); padding:3px 10px; border-radius:999px; margin-left:6px; vertical-align:middle; }
.sp-ratio-legend{ max-width:760px; margin:0 auto 24px; text-align:center; padding-top:6px; }
.sp-ratio-key{ display:block; font-size:.9rem; color:var(--ink3); margin-bottom:12px; }
.sp-ratio-key b{ color:var(--ink); font-weight:600; }
.sp-ratio-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.sp-ratio-chips span{ background:var(--soft3); border:1px solid var(--chipb); border-radius:999px; padding:6px 14px; font-size:.82rem; color:var(--ink2); }
.sp-ratio-chips span b{ color:var(--blue); font-weight:700; margin-right:5px; }
.sp-tabs-btns{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
@media (max-width:520px){ .sp-tabs-btns{ grid-template-columns:1fr; } }
.sp-tabs-btns button{ background:var(--chip); color:var(--ink); font-weight:600; padding:11px 12px; border:none; border-radius:9px; cursor:pointer; transition:all .25s ease; font-size:.9rem; line-height:1.25; font-family:inherit; }
.sp-tabs-btns button small{ display:block; font-weight:500; font-size:.72rem; opacity:.75; margin-top:2px; }
.sp-tabs-btns button.active,.sp-tabs-btns button:hover{ background:#2ca5f5; color:#fff; }
.sp-tabs-btns button.active small,.sp-tabs-btns button:hover small{ opacity:.9; }
.sp-view-toggle{ text-align:center; margin:6px 0 24px; }
.sp-view-toggle button{ background:var(--soft3); color:var(--ink); border:1px solid var(--chipb); padding:8px 14px; border-radius:9px; cursor:pointer; margin:0 4px; font-weight:600; font-size:.9rem; font-family:inherit; }
.sp-view-toggle button.active{ background:#2ca5f5; color:#fff; border-color:#2ca5f5; }
.sp-tabpane{ display:none; } .sp-tabpane.active{ display:block; }
.sp-pgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:18px; }
.sp-pcard{ background:var(--soft3); border-radius:16px; padding:44px 22px 26px; text-align:center; box-shadow:var(--cardsh); transition:transform .25s ease, box-shadow .25s ease; position:relative; }
.sp-pcard:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.1); }
.sp-pcard .sp-ratio{ display:inline-block; font-size:.78rem; font-weight:700; color:var(--ink); background:var(--chipb); border:1px solid var(--chipb); padding:3px 9px; border-radius:999px; margin-bottom:8px; }
.sp-pcard h3{ font-size:1.3rem; font-weight:800; color:var(--ink); margin:6px 0; }
.sp-pcard .sp-pl{ font-size:.95rem; color:var(--ink4); margin:2px 0 10px; }
.sp-pcard .sp-desc{ font-size:.95rem; color:var(--ink2); margin:0 auto 14px; max-width:28ch; }
.sp-pcard a{ display:inline-block; background:#2ca5f5; color:#fff; text-decoration:none; padding:12px 22px; border-radius:9px; font-weight:700; font-size:.92rem; letter-spacing:.02em; transition:background .25s ease; }
.sp-pcard a:hover{ background:#0e79c9; }
.sp-disc{ position:absolute; top:0; left:0; right:0; background:#4dc1c5; color:#07363a; font-size:.74rem; font-weight:700; padding:6px 10px; border-radius:16px 16px 0 0; line-height:1.2; display:flex; justify-content:center; gap:8px; }
.sp-disc .reg{ opacity:.7; font-weight:500; text-decoration:line-through; }
.sp-bottom-switch{ text-align:center; margin-top:26px; }
.sp-bottom-switch button{ background:var(--chip); color:var(--ink); font-weight:600; padding:10px 24px; border:none; border-radius:9px; cursor:pointer; transition:all .25s ease; font-size:.95rem; font-family:inherit; }
.sp-bottom-switch button:hover{ background:#2ca5f5; color:#fff; }
.sp-groups{ max-width:680px; margin:26px auto 0; background:linear-gradient(135deg,var(--navybg),var(--navybg2)); border-radius:16px; padding:24px; text-align:center; color:#fff; box-shadow:0 10px 28px rgba(11,42,69,.25); }
.sp-groups h4{ margin:0 0 8px; font-size:1.14rem; font-weight:700; color:#fff; }
.sp-groups p{ margin:0 0 16px; font-size:.96rem; color:#dfeaf4; line-height:1.55; }
.sp-groups a{ display:inline-flex; align-items:center; gap:7px; background:#25D366; color:#fff; text-decoration:none; padding:12px 24px; border-radius:999px; font-weight:700; font-size:.93rem; box-shadow:0 4px 14px rgba(37,211,102,.4); transition:transform .2s ease; }
.sp-groups a:hover{ transform:translateY(-2px); }

/* INFO */
.sp-info-title{ text-align:center; font-size:clamp(1.4rem,3.6vw,1.85rem); font-weight:800; color:var(--navy); margin:0 0 8px; }
.sp-info-sub{ text-align:center; font-size:1rem; color:var(--ink4); max-width:600px; margin:0 auto 26px; }
.sp-info{ max-width:680px; margin:0 auto; background:var(--soft4); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.04); padding:20px 22px; color:var(--ink2); line-height:1.6; }
.sp-info .g{ margin-bottom:14px; }
.sp-info h3{ font-size:1.05rem; font-weight:700; color:var(--ink); margin:0 0 .5rem; }
.sp-info ul{ list-style:none; margin:0; padding:0; }
.sp-info li{ display:flex; gap:.55rem; margin:.25rem 0; align-items:flex-start; }
.sp-info .dot{ flex:0 0 auto; color:var(--ink); margin-top:.05rem; }
.sp-info .note{ color:var(--ink4); font-size:.9rem; }

/* FEATURE BG */
.sp-feature{ position:relative; min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; }
.sp-feature .fade-top, .sp-feature .fade-bot{ position:absolute; left:0; right:0; height:90px; z-index:2; pointer-events:none; }
.sp-feature .fade-top{ top:0; background:linear-gradient(180deg, var(--fade), transparent); }
.sp-feature .fade-bot{ bottom:0; background:linear-gradient(0deg, var(--fade), transparent); }
.sp-feature-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:50% 78%; background-attachment:fixed; }
.sp-feature-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,18,32,.55) 0%, rgba(6,18,32,.72) 50%, rgba(6,18,32,.6) 100%); }
.sp-feature-inner{ position:relative; z-index:1; padding:70px 22px; max-width:760px; }
.sp-feature h2{ font-size:clamp(1.6rem,4.5vw,2.6rem); font-weight:800; margin:0 0 14px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.7), 0 2px 16px rgba(0,0,0,.6); }
.sp-feature p{ font-size:clamp(1rem,2.2vw,1.2rem); font-weight:300; line-height:1.65; margin:0 auto; max-width:620px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8), 0 1px 10px rgba(0,0,0,.6); }
@media (max-width:600px){ .sp-feature{ min-height:76vh; } .sp-feature-bg{ background-attachment:scroll; } }

/* STICKY REVEAL TITLE */
.sp-sticky-reveal{ position:relative; height:175vh; }
.sp-sticky-reveal .sticky-inner{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 20px; overflow:hidden; }
.sp-sticky-reveal .big-title{ font-size:clamp(1.9rem,6vw,3.4rem); font-weight:800; color:var(--navy); line-height:1.15; max-width:880px; }
.sp-sticky-reveal .big-title .word{ display:inline-block; opacity:.12; transition:opacity .5s ease, transform .5s ease; transform:translateY(6px); margin:0 .14em; }
.sp-sticky-reveal .big-title .word.on{ opacity:1; transform:translateY(0); }
.sp-sticky-reveal .big-title em{ font-style:normal; color:var(--blue); }
@media (max-width:600px){ .sp-sticky-reveal{ height:120vh; } }

/* SPLIT */
.sp-split{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; max-width:1000px; margin:0 auto; }
@media (max-width:780px){ .sp-split{ grid-template-columns:1fr; gap:22px; } }
.sp-split .sp-split-sm{ width:100%; aspect-ratio:16/9; object-fit:cover; max-width:460px; margin-inline:auto; border-radius:18px; box-shadow:0 14px 34px rgba(0,0,0,.12); display:block; }
.sp-split img{ width:100%; border-radius:18px; box-shadow:0 14px 34px rgba(0,0,0,.12); display:block; }
.sp-split h3{ font-size:1.5rem; font-weight:800; color:var(--navy); margin:0 0 14px; }
.sp-split p{ font-size:1.01rem; color:var(--ink2); line-height:1.7; margin:0 0 12px; }
.sp-highlight{ background:linear-gradient(135deg,var(--chip2),var(--chip)); border-left:5px solid var(--blue); border-radius:10px; padding:16px 18px; font-size:1.12rem; line-height:1.5; color:var(--ink); margin:0 0 18px; box-shadow:0 6px 18px rgba(0,119,204,.12); }
.sp-highlight strong{ color:var(--blue); font-weight:800; }
.sp-highlight .nb{ white-space:nowrap; }

.sp-gear-img{ max-width:360px; margin-inline:auto; aspect-ratio:4/5; object-fit:cover; }
@media (max-width:780px){ .sp-split > div[style*="order:2"]{ order:2 !important; } .sp-split > div[style*="order:1"]{ order:1 !important; } }

/* TRUST */
.sp-trust{ background:var(--soft6); padding:40px 20px; }
.sp-trust-grid{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.sp-trust-item{ flex:1 1 175px; background:var(--pg); padding:22px 18px; border-radius:14px; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.05); }
.sp-trust-item span{ font-size:26px; }
.sp-trust-item p{ margin:10px 0 0; font-weight:600; font-size:.97rem; color:var(--ink); }
@media (max-width:560px){ .sp-trust-item{ flex:1 1 140px; } }

/* IG MID */
.sp-ig-mid{ max-width:1000px; margin:0 auto; padding:56px 20px; text-align:center; }
.sp-ig-mid img{ width:100%; max-width:720px; border-radius:18px; box-shadow:0 14px 34px rgba(0,0,0,.12); display:block; margin:0 auto 22px; }
.sp-ig-mid h2{ font-size:1.65rem; font-weight:800; color:var(--navy); margin:0; }
.sp-ig-mid .handle{ font-size:1.5rem; font-weight:800; margin-top:8px; }
.sp-ig-mid .handle a{ color:var(--navy); text-decoration:none; }
@media (max-width:480px){ .sp-ig-mid .handle{ font-size:1.2rem; word-break:break-word; } }
.sp-face{ width:112px; height:112px; border-radius:50%; object-fit:cover; display:block; margin:0 auto; border:4px solid var(--pg); box-shadow:0 8px 22px rgba(0,0,0,.2); }
.sp-nazsq{ width:190px; height:190px; border-radius:16px; object-fit:contain; background:var(--soft); display:block; margin:0 auto 18px; box-shadow:0 10px 26px rgba(0,0,0,.18); }
.sp-ig-btn{ display:inline-block; background:var(--navybg); color:#fff; text-decoration:none; padding:12px 22px; border-radius:999px; font-weight:600; font-size:.95rem; }

.sp-vgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:430px; margin:28px auto 0; }
.sp-vcard{ margin:0; }
.sp-vwrap{ position:relative; }
.sp-unmute{ position:absolute; left:50%; bottom:12px; translate:-50% 0; display:inline-flex; align-items:center; gap:6px;
  background:rgba(11,28,44,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff;
  border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:7px 14px; font-family:'Poppins',sans-serif;
  font-size:.78rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.sp-unmute:hover{ background:rgba(11,28,44,.92); }
.sp-unmute[hidden]{ display:none !important; }
.sp-vcard video{ width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.16); display:block; background:#000; }
.sp-vcard figcaption{ font-size:.76rem; color:var(--ink4); margin-top:9px; }

/* CREDS */
.sp-creds{ background:var(--pg); padding:48px 20px; text-align:center; }
.sp-creds-inner{ max-width:820px; margin:0 auto; }
.sp-creds h2{ font-size:clamp(1.5rem,4vw,2rem); margin:0 0 26px; color:var(--navy); font-weight:800; }
.sp-creds .lvl{ font-size:1.32rem; font-weight:800; color:var(--navy); }
.sp-creds .sub{ font-size:1.04rem; font-weight:600; margin-top:18px; color:var(--ink2); }
.sp-creds .flags{ font-size:1.45rem; margin:14px 0; }
.sp-creds h3{ margin-top:36px; font-size:1.38rem; color:var(--navy2); font-weight:700; }

/* VIDEO LOOP */
.sp-loop{ position:relative; overflow:hidden; line-height:0; }
.sp-loop video{ width:100%; height:clamp(240px,42vw,470px); object-fit:cover; object-position:50% 72%; display:block; }
.sp-loop-fade{ position:absolute; left:0; right:0; height:80px; pointer-events:none; z-index:1; }
.sp-loop-fade.top{ top:0; background:linear-gradient(180deg, var(--fade), transparent); }
.sp-loop-fade.bot{ bottom:0; background:linear-gradient(0deg, var(--fade), transparent); }

/* FAQ */
.sp-faq{ max-width:800px; margin:0 auto; padding:0 4px; }
.sp-faq-item{ border-bottom:1px solid var(--line2); padding:16px 0; }
.sp-faq-q{ cursor:pointer; font-weight:700; font-size:1.1rem; position:relative; padding-right:28px; color:var(--ink); }
.sp-faq-q::after{ content:'+'; position:absolute; right:0; top:0; color:var(--blue); font-weight:700; transition:transform .3s ease; }
.sp-faq-q.active::after{ content:'\2212'; }
.sp-faq-a{ display:none; padding-top:10px; line-height:1.65; font-size:1rem; color:var(--ink2); }

/* FOOTER */
.sp-footer{ background:var(--foot); color:var(--footfg); padding:56px 20px 78px; text-align:center; font-size:.95rem; line-height:1.7; }
.sp-footer .brand{ font-size:1.5rem; font-weight:800; color:#fff; margin:0 0 4px; }
.sp-footer .tag{ font-family:'Caveat',cursive; font-size:1.5rem; color:var(--teal); margin:0 0 28px; }
.sp-footer h4{ font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:#6f8aa0; margin:26px 0 10px; font-weight:600; }
.sp-footer a{ color:#dfeaf4; text-decoration:none; transition:color .2s ease; }
.sp-footer a:hover{ color:#4dc1c5; }
.sp-footer .partners{ max-width:340px; width:100%; height:auto; margin:8px auto 0; display:block; border-radius:10px; background:#fff; padding:10px; }
.sp-footer .contact-line{ margin:4px 0; }
.sp-footer .legal{ font-size:.78rem; color:#6f8aa0; margin-top:30px; line-height:1.8; }
.sp-footer .legal a{ color:#9fb4c6; text-decoration:underline; }
.sp-footer .divider{ width:46px; height:3px; background:var(--footline); border-radius:2px; margin:30px auto; }

/* BOTTOM APP NAV BAR */
.sp-appbar-wrap{ opacity:0; visibility:hidden; position:fixed; left:50%; transform:translateX(-50%); bottom:calc(8px + env(safe-area-inset-bottom,0px)); z-index:9970; display:flex; flex-direction:column; align-items:center; gap:6px; max-width:calc(100% - 28px); transition:transform .4s cubic-bezier(.16,1,.3,1), bottom .35s ease; }
.sp-appbar{ display:flex; justify-content:space-between; align-items:center; gap:2px; width:auto; background:rgba(11,28,44,.82); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:8px 12px; box-shadow:0 10px 34px rgba(0,0,0,.35); transition:padding .3s ease, opacity .3s ease, transform .3s ease; }
.sp-appbar a{ display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:#cdd9e4; font-family:'Poppins',sans-serif; padding:2px 10px; transition:color .2s ease; }
.sp-appbar a:hover,.sp-appbar a:active{ color:#fff; }
.sp-appbar .ico{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:17px; transition:background .2s ease, transform .2s ease; }
.sp-appbar a:hover .ico{ background:rgba(77,193,197,.35); transform:translateY(-2px); }
.sp-appbar .lbl{ font-size:.6rem; font-weight:600; letter-spacing:.01em; }
.sp-appbar .wa .ico{ background:#25D366; }
.sp-appbar .wa:hover .ico{ background:#1da851; }
.sp-appbar .sp-applogo{ flex:0 0 auto; }
.sp-appbar .ico-logo{ width:52px; height:52px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; border:2.5px solid rgba(255,255,255,.85); box-shadow:0 4px 14px rgba(0,0,0,.35); background:#000; transition:transform .2s ease, box-shadow .2s ease; }
.sp-appbar .sp-applogo:hover .ico-logo{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.4); }
.sp-appbar .ico-logo img{ width:74%; height:auto; object-fit:contain; }
.sp-appbar-brand{ font-family:'Poppins',sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.04em; color:rgba(11,28,44,.55); text-decoration:none; text-shadow:0 1px 2px rgba(255,255,255,.6); transition:color .2s ease, opacity .3s ease; }
.sp-appbar-brand:hover{ color:var(--blue); }
@media (max-width:380px){ .sp-appbar a{ padding:2px 7px; } .sp-appbar .ico{ width:32px; height:32px; font-size:16px; } .sp-appbar .lbl{ font-size:.56rem; } }
.sp-appbar-wrap.sp-appbar-hidden{ transform:translateX(-50%) translateY(220%); }
html.sp-past-hero .sp-appbar-wrap{ opacity:1; visibility:visible; }
.wa-btn{ opacity:0; visibility:hidden; }
html.sp-past-hero .wa-btn{ opacity:1; visibility:visible; }
html.sp-past-hero .sp-appbar-wrap, html.sp-past-hero .wa-btn{ transition:opacity .45s ease, visibility .45s ease; }
.sp-appbar-wrap.sp-appbar-shrink{ bottom:calc(-6px + env(safe-area-inset-bottom,0px)); }
.sp-appbar-wrap.sp-appbar-shrink .sp-appbar{ padding:3px 6px; opacity:.88; transform:scale(.78); transform-origin:bottom center; }
.sp-appbar-wrap.sp-appbar-shrink .lbl{ font-size:.5rem; }
.sp-appbar-wrap.sp-appbar-shrink .sp-appbar-brand{ opacity:0; }

/* TOP HEADER */
.sp-topbar{ position:fixed; top:0; left:0; right:0; z-index:9960; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 20px; background:rgba(11,28,44,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); transform:translateY(0); transition:transform .45s cubic-bezier(.16,1,.3,1); font-family:'Poppins',sans-serif; }
.sp-topbar .tb-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.sp-topbar .tb-brand span{ overflow:hidden; text-overflow:ellipsis; }
.sp-topbar .tb-links{ flex:none; }
.sp-topbar .tb-brand img{ height:30px; width:auto; }
.sp-topbar .tb-brand span{ color:#fff; font-weight:700; font-size:.95rem; white-space:nowrap; }
.sp-topbar .tb-links{ display:flex; gap:4px; align-items:center; }
.sp-topbar .tb-links a{ color:#dfeaf4; text-decoration:none; font-size:.88rem; font-weight:500; padding:7px 12px; border-radius:8px; transition:background .2s ease; }
.sp-topbar .tb-links a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.tb-ico{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border-radius:999px; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.34); color:#fff; text-decoration:none; font-size:.8rem; font-weight:600; margin-left:5px; flex:none; white-space:nowrap; }
.tb-ico .lbl{ font-size:.78rem; }
@media (max-width:620px){ .tb-ico{ padding:0 10px; } .tb-ico .lbl{ display:none; } }
/* en movil el header queda limpio: solo logo + nombre + idiomas */
@media (max-width:760px){ .sp-topbar .tb-links a.tb-ico{ display:none; } }
.tb-ico:hover{ background:rgba(255,255,255,.26); }
@media (max-width:760px){ .sp-topbar .tb-links{ display:flex !important; } .sp-topbar .tb-links a:not(.tb-ico){ display:none; } }
@media (max-width:760px){ .sp-topbar .tb-links a:not(.tb-ico){ display:none; } .sp-topbar .tb-brand span{ font-size:.9rem; } }
.sp-land{ padding-bottom:0; }
@media (max-width:600px){ .sp-footer{ padding-bottom:84px; } }

/* LANGUAGE SWITCHER */
.lang-switcher-vertical{ display:flex; flex-direction:row; align-items:center; gap:4px; margin-left:8px; font-family:'Poppins',sans-serif; }
.sp-topbar .tb-links .lang-switcher-vertical a{ display:flex; font-size:12px; font-weight:700; color:#dfeaf4; text-decoration:none; padding:0 9px; height:32px; box-sizing:border-box; border-radius:8px; align-items:center; gap:5px; background:rgba(255,255,255,.10); white-space:nowrap; transition:background .2s ease, color .2s ease; }
.sp-topbar .tb-links .lang-switcher-vertical a:hover{ background:rgba(255,255,255,.28); color:#fff; }
.sp-topbar .tb-links .lang-switcher-vertical a i{ font-style:normal; font-size:14px; line-height:1; }
.sp-topbar .tb-links .lang-switcher-vertical a b{ font-weight:700; letter-spacing:.03em; }
.more-languages{ position:relative; display:flex; }
.more-toggle{ font-size:15px; background:rgba(255,255,255,.10); color:#fff; border:none; border-radius:8px; width:34px; height:32px; cursor:pointer; transition:background .2s ease; display:flex; align-items:center; justify-content:center; padding:0; flex:none; }
.more-toggle:hover{ background:rgba(255,255,255,.28); }
.more-dropdown{ display:none; position:absolute; top:38px; right:0; flex-direction:column; gap:5px; background:rgba(11,28,44,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 28px rgba(0,0,0,.4); border-radius:10px; padding:6px; z-index:10010; }
.more-dropdown.show{ display:flex; }
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.more-toggle.spin{ animation:spin .6s ease-in-out; }
@media (max-width:760px){
  .lang-switcher-vertical{ gap:3px; margin-left:4px; }
  .sp-topbar .tb-links .lang-switcher-vertical a{ display:flex; padding:0 7px; height:30px; gap:0; }
  .sp-topbar .tb-links .lang-switcher-vertical a b{ display:none; }
  .sp-topbar .tb-links .lang-switcher-vertical a i{ font-size:15px; }
  .sp-topbar .tb-links .more-dropdown a{ gap:5px; padding:0 10px; }
  .sp-topbar .tb-links .more-dropdown a b{ display:inline; }
  .more-toggle{ width:30px; height:30px; font-size:14px; }
  .more-dropdown{ top:36px; }
}
@media (max-width:480px){
  .sp-topbar{ padding:9px 12px; gap:6px; }
  .sp-topbar .tb-brand img{ height:26px; }
  .sp-topbar .tb-brand span{ font-size:.78rem; }
  .tb-ico{ padding:0 9px; margin-left:4px; height:32px; }
}
@media (max-width:400px){
  .sp-topbar .tb-brand span{ font-size:.74rem; }
  .tb-ico{ padding:0 7px; margin-left:3px; font-size:.9rem; }
}

/* COOKIE CONSENT */
#sp-cookie{ position:fixed; left:50%; top:62px; transform:translate(-50%,-20px); z-index:10050; max-width:380px; width:calc(100% - 24px); background:rgba(11,30,45,.95); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:12px 14px; color:#fff; font-family:'Poppins',system-ui,sans-serif; box-shadow:0 14px 40px rgba(0,0,0,.45); opacity:0; transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1); }
#sp-cookie.show{ opacity:1; transform:translate(-50%,0); }
#sp-cookie h4{ margin:0 0 4px; font-size:.86rem; font-weight:700; color:#fff !important; }
#sp-cookie p{ margin:0 0 9px; font-size:.72rem; line-height:1.45; color:rgba(255,255,255,.8); }
#sp-cookie p a{ color:#5cc6ff; text-decoration:underline; }
#sp-cookie .sp-ck-row{ display:flex; gap:6px; flex-wrap:wrap; }
#sp-cookie button{ flex:1; min-width:100px; border:none; border-radius:999px; padding:7px 10px; cursor:pointer; font-family:'Poppins',sans-serif; font-weight:700; font-size:.72rem; transition:all .2s ease; }
#sp-ck-accept{ background:#25D366; color:#fff; }
#sp-ck-essential{ background:rgba(255,255,255,.16); color:#fff; }
#sp-ck-reject{ background:transparent; color:#bcd; text-decoration:underline; flex:0 0 100%; font-weight:600; padding:2px; font-size:.7rem; }
@media (max-width:600px){ #sp-cookie{ top:56px; max-width:calc(100% - 16px); width:calc(100% - 16px); padding:10px 12px; border-radius:12px; } }

/* WHATSAPP FAB */
.wa-btn{ position:fixed; bottom:104px; right:18px; z-index:10000; pointer-events:auto; background-color:#25D366; border-radius:50%; width:60px; height:60px; display:flex; justify-content:center; align-items:center; box-shadow:0 2px 12px rgba(0,0,0,.18); text-decoration:none; border:1.5px solid rgba(255,255,255,.6); box-sizing:border-box; transition:box-shadow .25s ease; animation:waHeartbeat 5s ease-in-out infinite; }
.wa-btn:hover{ animation-play-state:paused; transform:scale(1.08); box-shadow:0 4px 20px rgba(37,211,102,.4); }
.wa-btn>*{ pointer-events:none; }
@keyframes waHeartbeat{ 0%{transform:scale(1)} 6%{transform:scale(1.035)} 12%{transform:scale(1)} 16%{transform:scale(1.025)} 22%{transform:scale(1)} 100%{transform:scale(1)} }
.wa-glow{ position:absolute; top:50%; left:50%; width:80px; height:80px; margin-top:-40px; margin-left:-40px; border-radius:50%; background:radial-gradient(circle, rgba(37,211,102,.3) 0%, rgba(37,211,102,0) 70%); animation:waGlow 5s ease-in-out infinite; z-index:-1; }
@keyframes waGlow{ 0%{opacity:.3;transform:scale(1)} 6%{opacity:.8;transform:scale(1.15)} 12%{opacity:.3;transform:scale(1)} 16%{opacity:.6;transform:scale(1.1)} 22%{opacity:.3;transform:scale(1)} 100%{opacity:.3;transform:scale(1)} }
.wa-wave{ position:absolute; top:-6px; left:-6px; width:72px; height:72px; animation:waRotate 10s linear infinite, waBreathe 6s ease-in-out infinite; }
@keyframes waRotate{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes waBreathe{ 0%{opacity:.1} 50%{opacity:.45} 100%{opacity:.1} }
.wa-online{ position:absolute; top:-2px; right:-2px; width:13px; height:13px; background-color:#ef4444; border-radius:50%; border:2.5px solid #fff; z-index:2; }
.wa-say{ position:absolute; bottom:calc(100% + 13px); right:0; width:max-content; max-width:min(54vw,186px);
  background:#fff; color:#12273a; font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:500; line-height:1.3;
  text-align:left; padding:7px 10px; border-radius:12px 12px 12px 3px; box-shadow:0 6px 18px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; transform:translateY(8px) scale(.92); transform-origin:bottom right;
  transition:opacity .28s ease, transform .32s cubic-bezier(.16,1,.3,1), visibility .28s; }
.wa-say::after{ content:""; position:absolute; bottom:-6px; right:13px; width:0; height:0;
  border-left:7px solid transparent; border-right:0 solid transparent; border-top:7px solid #fff; }
.wa-btn.wa-open .wa-say{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.wa-tooltip{ position:absolute; right:72px; top:50%; transform:translateY(-50%); background:#fff; color:#333; font-family:-apple-system,sans-serif; font-size:13px; font-weight:500; padding:6px 14px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.12); white-space:nowrap; opacity:0; transition:opacity .2s ease; }
.wa-btn:hover .wa-tooltip{ opacity:1; }
@media (max-width:768px){
  .wa-tooltip{ display:none; }
  .wa-say{ font-size:11px; max-width:min(58vw,172px); padding:7px 9px; }
  .wa-btn{ width:54px; height:54px; bottom:96px; right:14px; }
  .wa-btn svg.wa-icon{ width:28px; height:28px; }
  .wa-wave{ width:64px; height:64px; }
  .wa-glow{ width:66px; height:66px; margin-top:-33px; margin-left:-33px; }
}
:focus-visible{ outline:2.5px solid var(--blue); outline-offset:2px; }


.grp-tabs-btns{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
@media (max-width:820px){ .grp-tabs-btns{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px){ .grp-tabs-btns{ grid-template-columns:1fr; } }
.grp-tabs-btns button{ background:var(--chip); color:var(--ink); font-weight:600; padding:11px 12px;
  border:none; border-radius:9px; cursor:pointer; transition:all .25s ease; font-size:.88rem;
  line-height:1.25; font-family:inherit; }
.grp-tabs-btns button small{ display:block; font-weight:500; font-size:.72rem; opacity:.75; margin-top:2px; }
.grp-tabs-btns button.active, .grp-tabs-btns button:hover{ background:#2ca5f5; color:#fff; }
.grp-tabs-btns button.active small, .grp-tabs-btns button:hover small{ opacity:.9; }
.grp-view-toggle{ text-align:center; margin:6px 0 24px; }
.grp-view-toggle button{ background:var(--soft3); color:var(--ink); border:1px solid var(--chipb);
  padding:8px 14px; border-radius:9px; cursor:pointer; margin:0 4px; font-weight:600;
  font-size:.9rem; font-family:inherit; }
.grp-view-toggle button.active{ background:#2ca5f5; color:#fff; border-color:#2ca5f5; }
.grp-tabpane{ display:none; } .grp-tabpane.active{ display:block; }
.grp-pgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:18px; }
table.grp{ width:100%; border-collapse:collapse; margin-top:10px; font-size:.97rem; }
table.grp th{ background:var(--soft2); color:var(--ink); font-weight:700; text-align:left;
  padding:11px 13px; border:1px solid var(--line); }
table.grp td{ padding:11px 13px; border:1px solid var(--line); color:var(--ink2);
  font-variant-numeric:tabular-nums; }
table.grp tr:nth-child(even) td{ background:var(--soft); }

/* ===== BLOG ===== */
.post-hero{ position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  min-height:46vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.post-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.post-hero::after{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,18,32,.35), rgba(6,18,32,.84)); }
.post-hero .inner{ position:relative; z-index:2; max-width:820px; margin:0 auto; padding:120px 20px 44px; width:100%; }
.post-hero h1{ font-size:clamp(1.7rem,4.4vw,2.7rem); font-weight:800; margin:0; color:#fff; line-height:1.14;
  text-shadow:0 2px 16px rgba(0,0,0,.5); }
.post-meta{ font-size:.85rem; color:#cfe0ec; margin-top:12px; display:flex; gap:12px; flex-wrap:wrap; }
.post-body{ max-width:720px; margin:0 auto; padding:44px 20px 10px; font-size:1.06rem; line-height:1.78; color:var(--ink2); }
.post-body h2{ font-size:clamp(1.3rem,3vw,1.7rem); font-weight:800; color:var(--navy); margin:38px 0 12px; line-height:1.2; }
.post-body h3{ font-size:1.15rem; font-weight:700; color:var(--navy2); margin:28px 0 8px; }
.post-body p{ margin:0 0 17px; }
.post-body ul,.post-body ol{ margin:0 0 18px; padding-left:22px; }
.post-body li{ margin:6px 0; }
.post-body strong{ color:var(--ink); font-weight:600; }
.post-body a{ color:var(--blue); }
.post-body hr{ border:0; border-top:1px solid var(--line); margin:32px 0; }
.post-body table{ width:100%; border-collapse:collapse; margin:0 0 20px; font-size:.95rem; }
.post-body th,.post-body td{ border:1px solid var(--line); padding:8px 10px; text-align:left; }
.inline-note{ background:var(--soft3); border-left:4px solid var(--blue); border-radius:0 10px 10px 0;
  padding:12px 15px; font-size:.97rem; color:var(--ink2); }
.post-cta{ max-width:720px; margin:34px auto 0; background:linear-gradient(135deg,#0b2a45,#15426e);
  border-radius:16px; padding:28px 24px; text-align:center; color:#fff; box-shadow:0 10px 28px rgba(11,42,69,.22); }
.post-cta h3{ margin:0 0 8px; font-size:1.25rem; font-weight:800; color:#fff; }
.post-cta p{ margin:0 0 18px; color:#dfeaf4; font-size:.98rem; }
.post-cta-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.post-cta a{ display:inline-block; text-decoration:none; font-weight:700; font-size:.93rem;
  padding:12px 22px; border-radius:999px; }
.pc-main{ background:#fff; color:#0b2a45; }
.pc-wa{ background:#25D366; color:#fff; }
.related{ max-width:720px; margin:40px auto 0; padding:0 20px; }
.related h3{ font-size:1.05rem; font-weight:800; color:var(--navy); margin:0 0 14px; }
.related ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.related a{ display:block; background:var(--soft); border:1px solid var(--line); border-radius:11px;
  padding:13px 16px; text-decoration:none; color:var(--ink); font-size:.96rem; font-weight:500; }
.related a:hover{ border-color:var(--blue); color:var(--blue); }
.blog-list{ max-width:1000px; margin:0 auto; padding:110px 20px 60px; }
.blog-list h1{ font-size:clamp(1.8rem,5vw,2.5rem); font-weight:800; color:var(--navy); margin:0 0 8px; }
.blog-list .lead{ color:var(--ink3); margin:0 0 30px; font-size:1.04rem; }
.bl-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.bl-card{ background:var(--soft); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.bl-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.1); }
.bl-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.bl-card .t{ padding:14px 16px 18px; font-weight:600; font-size:1rem; color:var(--ink); line-height:1.35; }
.langbar{ max-width:1000px; margin:0 auto; padding:0 20px 8px; font-size:.86rem; color:var(--ink4); }
.langbar a{ color:var(--blue); text-decoration:none; margin-right:10px; }