/* ============================================================
   POTENCIA DIGITAL — v13: navegador de secciones (emblemas)
   ============================================================ */
.secnav{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:4px;padding:10px 8px;
  background:rgba(12,8,25,.5);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.08);border-radius:44px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.secnav-i{position:relative;width:42px;height:42px;display:grid;place-items:center;
  opacity:.5;filter:saturate(.55);transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .25s,filter .25s;cursor:pointer;text-decoration:none}
.secnav-i img{max-width:30px;max-height:30px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
.secnav-i:hover{opacity:.92;filter:saturate(.9)}
.secnav-i.on{opacity:1;filter:saturate(1.15);transform:scale(1.45)}
.secnav-i.on img{filter:drop-shadow(0 0 9px rgba(255,120,150,.9))}
.secnav-i span{position:absolute;left:50px;top:50%;transform:translateY(-50%) translateX(-6px);white-space:nowrap;
  background:#241640;border:1px solid #3a2963;color:#efe6ff;padding:5px 11px;border-radius:9px;
  font-family:"League Spartan",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.02em;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.secnav-i:hover span{opacity:1;transform:translateY(-50%)}

/* móvil / tablet estrecho: barra horizontal abajo */
@media(max-width:880px){
  .secnav{left:50%;right:auto;top:auto;bottom:14px;transform:translateX(-50%);
    flex-direction:row;gap:1px;border-radius:32px;padding:6px 8px}
  .secnav-i{width:40px;height:40px}
  .secnav-i img{max-width:26px;max-height:26px}
  .secnav-i span{display:none}
  .secnav-i.on{transform:scale(1.3)}
}
@media(max-width:380px){.secnav-i{width:36px;height:36px}.secnav-i img{max-width:23px;max-height:23px}}

/* ============================================================
   TIPOGRAFÍA UNIFICADA — una sola familia en toda la web
   ============================================================ */
body,input,textarea,select,button,
p,li,small,span,em,strong,summary,details,figcaption,label,td,th{
  font-family:"League Spartan",system-ui,sans-serif}
body{letter-spacing:.005em}
.lead,p,li{font-weight:400}
h1,h2,h3,h4,.kicker,.btn,.logo{font-family:"League Spartan",sans-serif}
.browser-bar em{font-family:"League Spartan",sans-serif}

/* ============================================================
   TRANSICIONES ENTRE SECCIONES — fundido largo + brillo suave
   ============================================================ */
.wipe{height:340px;margin:-170px 0;position:relative;z-index:2;pointer-events:none;overflow:hidden}
/* el ::before base (v3) usa inset:0, lo que recorta el blur justo en el borde de la caja
   y deja un canto duro visible; le damos margen de sangrado para que el desenfoque
   se apague ANTES de llegar al límite recortado por overflow:hidden */
.wipe::before{clip-path:none;filter:blur(18px);top:-40px;left:-40px;right:-40px;bottom:-40px}
.wipe::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:230px;border-radius:50%;opacity:.55;filter:blur(52px)}
.wipe.to-playa::after{background:radial-gradient(closest-side,rgba(47,212,194,.4),transparent)}
.wipe.to-fuego::after{background:radial-gradient(closest-side,rgba(255,120,60,.4),transparent)}
.wipe.to-agora::after{background:radial-gradient(closest-side,rgba(123,47,247,.4),transparent)}
.wipe.to-vice::after{background:radial-gradient(closest-side,rgba(227,50,168,.4),transparent)}
.wipe.to-noche::after{background:radial-gradient(closest-side,rgba(120,140,255,.32),transparent)}
.wipe.to-amanecer::after{background:radial-gradient(closest-side,rgba(255,180,110,.4),transparent)}
/* el cambio de color de fondo del capítulo, más pausado */
body{transition:background-color 1.6s cubic-bezier(.4,0,.2,1)}
/* los fundidos de los scrubs, más largos aún */
.scrub-stick::before,.scrub-stick::after{height:340px}
/* el fundido de entrada al duelo (competencia) debe terminar en el mismo tono
   oscuro que deja el wipe justo antes, para que no se note el salto de color */
#scrub-arena .scrub-stick{--fade-top:#190a10}

/* ============================================================
   FRASES ÉPICAS — entrada tipo título de película
   ============================================================ */
.latin-div{padding:150px 26px 140px;text-align:center;position:relative}
.latin-div em{display:block;font-family:"League Spartan",sans-serif;font-style:italic;font-weight:700;
  font-size:clamp(30px,5.2vw,62px);letter-spacing:.03em;line-height:1.12;color:#e8cf8e;
  text-shadow:0 2px 30px rgba(232,207,142,.35);
  opacity:0;transform:scale(1.14) translateY(10px);filter:blur(9px);
  transition:opacity 1.5s cubic-bezier(.2,.7,.2,1),transform 1.9s cubic-bezier(.2,.7,.2,1),filter 1.5s}
.latin-div span{display:block;margin-top:26px;font-family:"League Spartan",sans-serif;font-weight:600;
  font-size:clamp(13px,1.5vw,16px);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  max-width:720px;margin-left:auto;margin-right:auto;line-height:1.8;
  opacity:0;transform:translateY(16px);transition:opacity 1.2s .55s,transform 1.2s .55s}
.latin-div.in em{opacity:1;transform:none;filter:blur(0)}
.latin-div.in span{opacity:1;transform:none}
/* línea que se abre a los lados, como un telón */
.latin-div::before,.latin-div::after{content:"";position:absolute;top:50%;height:1px;width:0;
  background:linear-gradient(90deg,transparent,rgba(232,207,142,.55));transition:width 1.8s .35s ease-out}
.latin-div::before{left:4vw}
.latin-div::after{right:4vw;transform:scaleX(-1)}
.latin-div.in::before,.latin-div.in::after{width:min(22vw,300px)}
/* variante del capítulo del fuego: mismos tamaños, sus colores */
.latin-fuego em{color:#ffb454;text-shadow:0 2px 30px rgba(255,140,60,.4)}
.latin-fuego span{color:rgba(255,180,120,.8)}
.latin-fuego::before,.latin-fuego::after{background:linear-gradient(90deg,transparent,rgba(255,154,60,.55))}
@media(max-width:720px){.latin-div{padding:104px 22px 96px}}

/* ============================================================
   TÍTULOS DE SECCIÓN — que se noten
   ============================================================ */
.kicker{font-size:13.5px;letter-spacing:.34em;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;margin-bottom:18px}
.cap-playa .kicker,.cap-noche .kicker,.cap-fuego .kicker,.cap-amanecer .kicker{-webkit-text-fill-color:currentColor}
/* subrayado en TODOS los títulos de sección (estén o no dentro de .reveal) */
.wrap h2,.claim h2{position:relative}
.wrap>h2,.wrap>.reveal>h2,.wrap>div>h2{padding-bottom:20px;margin-bottom:8px}
.wrap>h2::after,.wrap>.reveal>h2::after,.wrap>div>h2::after{
  content:"";position:absolute;left:0;bottom:0;width:82px;height:4px;border-radius:3px;
  background:var(--grad);box-shadow:0 2px 16px rgba(227,50,168,.5)}
/* excepciones: títulos que no son de sección */
.art-body h2::after,.art-rel h2::after,.cta-hero h2::after,.claim h2::after{display:none}
h2{font-size:clamp(30px,4.4vw,52px);font-weight:900;letter-spacing:-.01em}

/* ============================================================
   COHERENCIA VISUAL — radios de esquina unificados
   ============================================================ */
.svc-card,.nw-card,.rv-card,.carac,.agora-cell,.stat,.vid-panel,.cala,.art-hero,.pf-shot .browser{
  border-radius:18px}
.fuego-point,.brasa,.art-tldr,.faq details,.proc article{border-radius:14px}
.svc-card .im,.nw-im{border-radius:18px 18px 0 0}

/* ============================================================
   MÓVIL — transiciones sin líneas + servicios más ágiles
   ============================================================ */
@media(max-width:880px){
  /* nada de bordes duros entre capítulos */
  .cap-playa,.cap-fuego,.cap-noche,.cap-amanecer,.cap-agora,.wrap{border:0!important}
  .wipe{height:220px;margin:-110px 0}
  .wipe::before{filter:blur(22px)}
  /* la animación de las tarjetas, mucho más rápida y corta */
  .fly{transition:transform .5s cubic-bezier(.2,.8,.3,1) var(--d,0ms),opacity .38s var(--d,0ms),
    clip-path .5s var(--d,0ms)!important}
  .fly-l{transform:translateX(-26vw) rotate(-2deg)}
  .fly-r{transform:translateX(26vw) rotate(2deg)}
  .fly-c{transform:translateY(16vh) scale(.86)}
}

/* Quiénes somos — enfoque humano y cercano */
.somos-promesas{list-style:none;display:grid;gap:14px;margin:26px 0 6px}
.somos-promesas li{position:relative;padding-left:26px;color:var(--dim);font-size:15.5px;line-height:1.5}
.somos-promesas li b{color:var(--txt);font-family:"League Spartan",sans-serif;font-weight:800}
.somos-promesas li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#3ee6d2,#0e7c72);box-shadow:0 0 10px rgba(47,212,194,.5)}
.somos-firma{margin-top:22px;font-family:"League Spartan",sans-serif;font-weight:700;color:#3ee6d2;
  letter-spacing:.02em;font-size:14.5px}

/* Artículos como páginas (blog) — formato periódico, ancho */
.art{max-width:1240px;margin:0 auto;padding:112px 40px 90px}
@media(max-width:720px){.art{padding:96px 20px 70px}}
.art-back{display:inline-block;color:var(--red2,#ff5a7a);font-family:"League Spartan",sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.04em;margin-bottom:26px;text-decoration:none}
.art-back:hover{color:#fff}
.art-head .art-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.art-head h1{font-family:"League Spartan",sans-serif;font-weight:900;font-size:clamp(30px,5vw,50px);line-height:1.05;margin:0 0 16px}
.art-lead{color:var(--dim);font-size:19px;line-height:1.55;margin:0 0 18px}
.art-author{font-family:"League Spartan",sans-serif;font-weight:700;font-size:13.5px;color:#3ee6d2;letter-spacing:.03em}
.art-hero{margin:30px 0;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(10,6,26,.6)}
.art-hero img{width:100%;display:block}
/* una sola columna, pero a lo ancho: se lee cómodo y ocupa pantalla */
.art-body{font-size:18px;line-height:1.85;column-count:1}
.art-body p{margin:0 0 24px;color:#d9d3e8}
.art-body h2{font-size:clamp(23px,2.6vw,32px);font-weight:900;margin:44px 0 16px;color:var(--txt);padding:0}
.art-body h2::after{display:none}
.art-body h3{font-size:clamp(19px,2vw,24px);font-weight:800;margin:32px 0 12px;color:#ffb9c7}
.art-body ul{margin:0 0 24px;padding-left:22px}
.art-body li{margin-bottom:10px;color:#d9d3e8}
/* resumen destacado al principio del artículo */
.art-tldr{margin:0 0 34px;padding:22px 26px;border-radius:16px;
  background:linear-gradient(150deg,rgba(225,19,29,.10),rgba(123,47,247,.10));
  border-left:4px solid var(--red2,#ff5a7a)}
.art-tldr b{display:block;font-family:"League Spartan",sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red2,#ff5a7a);margin-bottom:8px}
.art-tldr p{margin:0;color:#efe9ff;font-size:16.5px;line-height:1.7}
.art-cta{margin:46px 0;padding:30px;border-radius:20px;text-align:center;
  background:linear-gradient(150deg,rgba(225,19,29,.12),rgba(123,47,247,.12));border:1px solid var(--line)}
.art-cta p{font-family:"League Spartan",sans-serif;font-weight:800;font-size:20px;margin:0 0 16px}
.art-rel{margin-top:56px}
.art-rel h2{font-family:"League Spartan",sans-serif;font-weight:900;font-size:24px;margin-bottom:20px}
.art-rel .nw-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:640px){.art-rel .nw-grid{grid-template-columns:1fr}}
/* tarjetas de noticia como enlaces */
.nw-im{display:block}
.nw-card h3 a{color:inherit;text-decoration:none}
.nw-card h3 a:hover{color:var(--red2,#ff5a7a)}
a.nw-toggle{display:inline-block;text-decoration:none}


/* ============================================================
   CLAIM (Ayer te hacíamos una web / Hoy creamos tu ecosistema)
   entrada coreografiada: tacha → texto degradado → cta
   ============================================================ */
.orb.reveal{opacity:0;transition:opacity 1.4s var(--d,0ms)}
.orb.reveal.in{opacity:.35}
.claim .was{position:relative;display:inline-block;text-decoration:none;padding-bottom:.06em}
.claim .was::after{content:"";position:absolute;left:0;right:100%;bottom:.14em;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--magenta));box-shadow:0 0 14px rgba(225,19,29,.6);
  transition:right 1.9s cubic-bezier(.65,0,.35,1) .5s}
.claim h2.reveal.in .was::after{right:0}
.claim .now{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(16px) scale(1.05);
  transition:opacity .9s 1.35s,filter .9s 1.35s,transform .9s 1.35s cubic-bezier(.2,.8,.2,1)}
.claim h2.reveal.in .now{opacity:1;filter:blur(0);transform:none}
.claim p.reveal{transition-delay:1.85s!important}
.claim .btn-main.reveal{transition-delay:2.05s!important}
.claim .btn-main{transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s,opacity .7s,filter .7s}
.claim .btn-main:hover{transform:translateY(-3px) scale(1.045);box-shadow:0 16px 44px rgba(225,19,29,.55)}
.claim .btn-main:active{transform:translateY(-1px) scale(1.01)}
@media(max-width:600px){
  .claim .was::after{transition-duration:1.3s}
  .claim .now{transition-delay:1s}
  .claim p.reveal{transition-delay:1.35s!important}
  .claim .btn-main.reveal{transition-delay:1.5s!important}
}