/* ==========================================================
   GRUPO 8 BJ · HERO AJUSTADO
   rutas:
   HTML -> assets/css/styles.css
   CSS  -> ../img/hero-grupo8.png
========================================================== */

:root{
  --blue:#2A6FC3;
  --blue-deep:#244E98;
  --blue-bright:#176ED6;

  --yellow:#F9CA32;
  --yellow-hover:#FFD84F;

  --ink:#0D2A6B;
  --text:#365076;
  --muted:#73809A;

  --white:#FFFFFF;
  --soft:#F6FAFF;
  --line:#DCE8F5;

  --container:1224px;
  --hero-max:1480px;
  --page-gutter:24px;
  --radius:18px;

  --shadow:0 15px 38px rgba(24,53,108,.12);
  --shadow-soft:0 9px 24px rgba(24,53,108,.09);
}

/* BASE */

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}

.container{
  width:min(calc(100% - 48px),var(--container));
  margin-inline:auto;
}


/* TYPE */

h1,h2,h3{
  margin-top:0;
  font-family:"Bricolage Grotesque",sans-serif;
}

h1{
  margin:0;
  color:#fff;
  font-size:clamp(3.3rem,4.8vw,4.8rem);
  font-weight:800;
  line-height:.88;
  letter-spacing:-.02em;
}

h2{
  margin:0 0 14px;
  color:var(--ink);
  font-size:clamp(2.1rem,3vw,3.1rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.045em;
}

h2 span{color:var(--blue-bright)}

h3{color:var(--ink)}

p{
  margin-top:0;
  color:fff;
}

.eyebrow{
  display:inline-block;
  margin-bottom:12px;
  color:var(--yellow);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.095em;
  text-transform:uppercase;
}

.eyebrow-blue{color:var(--blue-bright)}

.text-link{
  color:var(--blue-bright);
  font-weight:700;
}


/* BUTTONS */

.btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-weight:700;
  white-space:nowrap;
  transition:.2s ease;
}

.btn:hover{transform:translateY(-2px)}

.btn-primary{
  color:#17346F;
  background:var(--yellow);
  
}

.btn-primary:hover{background:var(--yellow-hover)}

.btn-outline{
  color:#fff;
  border-color:rgba(255,255,255,.88);
  background:rgba(31,78,148,.18);
  backdrop-filter:blur(7px);
}


/* ==========================================================
   HERO
========================================================== */

.hero-wrap{
  padding:0 24px;
}

.hero-card{
  position:relative;
  width:100%;
  max-width:var(--hero-max);
  height:710px;
  margin:0 auto;
  overflow:hidden;
  border-radius:0 0 26px 26px;
  background:#CFE9FB;
  box-shadow:0 14px 40px rgba(27,65,123,.11);
}


/*
   FOTO.
   IMPORTANTE: la ruta parte desde assets/css/styles.css,
   por eso el hero está en ../img/
*/
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/hero-aventura.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/*
   Degradado limpio.
   Se eliminó el clip-path/polígono que producía
   la sombra triangular rara.
*/
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      90deg,
      rgba(26,108,209,.92) 0%,
      rgba(31,105,199,.84) 29%,
      rgba(38,103,190,.42) 43%,
      rgba(38,103,190,.08) 53%,
      rgba(38,103,190,0) 63%
    );
}


/* HEADER DENTRO DEL HERO */

.hero-header{
  position:absolute;
  z-index:20;
  top:20px;
  left:48%;
  width:min(calc(100% - 96px),1480px);
  min-height:70px;

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;

  padding:0 100px;
  border-radius:18px;
  background:rgba(255,255,255,.97);
  box-shadow:0 9px 26px rgba(27,65,123,.18);
  transform:translateX(-48%);
}

.brand{
  min-width:190px;
  display:flex;
  align-items:center;
  gap:10px;
}

.brand img{
  width:39px;
  height:44px;
  object-fit:contain;
}

.brand span{
  display:flex;
  flex-direction:column;
  line-height:1;
}

.brand strong{
  color:var(--ink);
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:1.02rem;
  font-weight:800;
}

.brand small{
  margin-top:5px;
  color:#6881AB;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.05em;
}

.main-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
}

.main-nav a{
  position:relative;
  padding:8px 0;
  color:#223D73;
  font-size:.92rem;
  font-weight:700;
}

.main-nav a::after{
  content:"";
  position:absolute;
  bottom:1px;
  left:0;
  right:100%;
  height:3px;
  border-radius:99px;
  background:var(--yellow);
  transition:right .2s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after{
  right:0;
}

.btn-header{
  min-height:46px;
  padding-inline:24px;
}

.menu-toggle{display:none}


/* HERO COPY */

.hero-copy{
  position:absolute;
  z-index:5;
  top:128px;
  left:max(48px, calc((100% - var(--container)) / 2));
  width:42%;
  max-width:590px;
}

.title-stroke{
  display:block;
  width:270px;
  height:4px;
  margin:12px 0 30px 4px;
  border-radius:999px;
  background:var(--yellow);
  transform:rotate(-2deg);
}

.hero-copy p{
  max-width:430px;
  margin-bottom:22px;
  color:#F8FBFF;
  font-size:1.08rem;
  line-height:1.5;
}

.hero-actions{
  display:flex;
  gap:11px;
  flex-wrap:wrap;
}


/* HAND NOTE */

.hero-note{
  position:absolute;
  z-index:6;
  top:125px;
  right:6.3%;
  color:#fff;
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:1.48rem;
  font-weight:650;
  line-height:1.05;
  text-align:center;
  transform:rotate(-5deg);
  text-shadow:0 2px 14px rgba(25,47,86,.20);
}

.hero-note span,
.hero-note strong{
  display:block;
}

.hero-note i{
  width:118px;
  height:3px;
  display:block;
  margin:8px auto 0;
  border-radius:99px;
  background:var(--yellow);
  transform:rotate(-4deg);
}

.spark{
  position:absolute;
  z-index:6;
  color:var(--yellow);
  font-size:1.7rem;
  font-weight:800;
}

.spark-left{
  top:185px;
  left:35%;
}

.spark-right{
  top:315px;
  right:3.5%;
}


/* STATS - MÁS ARRIBA */

.hero-stats{
  position:absolute;
  z-index:10;

  left:max(48px, calc((100% - var(--container)) / 2));
  right:max(48px, calc((100% - var(--container)) / 2));
  bottom:53px;

  display:grid;
  grid-template-columns:1fr 1.15fr 1fr 1.4fr;
  gap:12px;
}

.stat-card{
  position:relative;min-width:0;min-height:70px;display:flex;align-items:center;gap:10px;
  padding:12px 14px;border:1px solid rgba(255,255,255,.75);border-radius:13px;
  background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(25,63,119,.09);
}

.stat-icon{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;color:#126BCB;background:transparent}
.stat-icon svg{width:28px;height:28px;fill:currentColor}
.stat-card>div:last-child{min-width:0}
.stat-card strong,.stat-card span{display:block}
.stat-card strong{color:var(--ink);font-family:"Bricolage Grotesque",sans-serif;font-size:1rem;font-weight:800;line-height:1.25}
.stat-card span{margin-top:4px;color:#4A638D;font-size:.75rem;line-height:1.35}
a.stat-card:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
@media(hover:hover){a.stat-card:hover{background:#fff;box-shadow:0 5px 16px rgba(25,63,119,.16)}}


/*
   Curva inferior.
   Se reduce a una forma limpia, sin sombreado.
   Va DETRÁS de las cards.
*/
.hero-bottom-wave{
  position:absolute;
  z-index:4;

  left:-3%;
  right:-3%;
  bottom:-78px;

  height:104px;

  border-radius:50% 50% 0 0;
  background:#fff;
  transform:rotate(-1deg);
}


/* ==========================================================
   SECTIONS BELOW
========================================================== */

.section{
  padding:78px 0;
}

.section-soft{
  background:var(--soft);
}

.section-heading{
  margin-bottom:28px;
}

.split-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}

.section-heading>p{
  max-width:540px;
  margin-bottom:0;
}


/* EXPERIENCE */

.experience-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.experience-card{
  position:relative;
  min-height:310px;
  overflow:hidden;
  border-radius:18px;
  box-shadow:var(--shadow-soft);
}

.experience-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      0deg,
      rgba(15,42,105,.9) 0%,
      rgba(15,42,105,.42) 36%,
      rgba(15,42,105,.03) 72%
    );
}

.experience-copy{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
}

.experience-copy h3{
  margin-bottom:5px;
  color:#fff;
  font-size:1.28rem;
}

.experience-copy p{
  margin:0;
  color:#F3F6FD;
  font-size:.84rem;
}


/* SECTION CARDS */

.sections-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.section-card{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:17px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.section-card-head{
  min-height:77px;
  padding:15px 16px;
  color:#fff;
}

.section-card-head h3{
  margin:0 0 3px;
  color:inherit;
  font-size:1.15rem;
}

.section-card-head p{
  margin:0;
  color:inherit;
  font-size:.72rem;
}

.section-card img{
  width:100%;
  aspect-ratio:1.7/1;
  object-fit:cover;
}

.section-card>a{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  color:var(--ink);
  font-size:.8rem;
  font-weight:700;
}

.manada .section-card-head{
  color:#2B3546;
  background:#F9CA32;
}

.tropa .section-card-head{
  background:#14966B;
}

.comunidad .section-card-head{
  background:#2869D4;
}

.clan .section-card-head{
  background:#DF3E45;
}


/* ACTIVITIES */

.activity-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.activity-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:17px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.activity-card img{
  width:100%;
  height:175px;
  object-fit:cover;
}

.activity-body{
  padding:16px;
}

.activity-body h3{
  margin:0 0 8px;
  color:var(--ink);
  font-size:1rem;
}

.activity-body p{
  margin:0;
  font-size:.76rem;
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1100px){

  .hero-card{
    height:740px;
  }

  .hero-header{
    grid-template-columns:auto auto 1fr;
  }

  .main-nav{
    position:absolute;
    top:78px;
    left:0;
    right:0;

    display:none;
    flex-direction:column;
    align-items:flex-start;

    padding:20px;

    border-radius:16px;
    background:#fff;
    box-shadow:var(--shadow);
  }

  .main-nav.open{
    display:flex;
  }

  .menu-toggle{
    width:42px;
    height:42px;

    display:block;
    justify-self:end;

    border:0;
    border-radius:12px;

    background:#EEF5FF;
  }

  .menu-toggle span{
    width:18px;
    height:2px;

    display:block;

    margin:4px auto;

    background:var(--ink);
  }

  .hero-copy{
    width:51%;
  }

  .hero-note{
    display:none;
  }

  .hero-stats{
    left:7%;
    right:7%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    bottom:42px;
  }

  .experience-grid,
  .sections-grid,
  .activity-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:720px){

  .hero-wrap{
    padding:0;
  }

  .hero-card{
    height:1030px;
    border-radius:0 0 20px 20px;
  }

  .hero-header{
    top:10px;
    width:calc(100% - 20px);
    min-height:60px;

    grid-template-columns:1fr auto;

    padding:0 13px;
  }

  .btn-header{
    display:none;
  }

  .hero-photo{
    height:360px;
    bottom:auto;
    background-position:60% 45%;
  }

  .hero-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(38,103,190,.03) 0%,
        rgba(38,103,190,.08) 26%,
        rgba(31,105,199,.88) 40%,
        rgba(26,108,209,.97) 100%
      );
  }

  .hero-copy{
    top:390px;
    left:24px;
    right:24px;
    width:auto;
    max-width:none;
  }

  h1{
    font-size:clamp(3.1rem,14.5vw,4.2rem);
  }

  .desktop-break{
    display:none;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-actions .btn{
    width:100%;
  }

  .hero-stats{
    left:24px;
    right:24px;
    bottom:30px;

    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .stat-card{
    min-height:72px;
    padding:10px;
  }

  .stat-icon{
    width:28px;
    height:28px;
    flex-basis:28px;
  }

  .stat-icon svg{
    width:21px;
    height:21px;
  }

  .stat-card strong{
    font-size:.86rem;
  }

  .stat-card span{
    font-size:.65rem;
  }

  .hero-bottom-wave{
    display:none;
  }

  .container{
    width:min(calc(100% - 30px),var(--container));
  }

  .section{
    padding:60px 0;
  }

  .split-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .experience-grid,
  .sections-grid,
  .activity-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:460px){

  .hero-card{
    height:1040px;
  }

  .hero-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .stat-card{gap:6px;padding:10px 8px;min-height:80px}
  .stat-card strong{font-size:.82rem}
  .stat-card span{font-size:.70rem}
}

@media(prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

/* ==========================================================
   SMART HEADER
   Visible al inicio; se oculta al bajar y reaparece al subir.
   Mantiene exactamente el diseño y dimensiones actuales.
========================================================== */

.hero-header{
  position:fixed;
  z-index:1000;
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    opacity .22s ease,
    box-shadow .22s ease;
  will-change:transform;
}

.hero-header.header-hidden{
  transform:translateX(-50%) translateY(calc(-100% - 34px));
  opacity:.98;
}

#ser-scout{
  scroll-margin-top:112px;
}


/* ==========================================================
   ESTO ES SER SCOUT · OPCIÓN 2
   Ajustada para viewport de laptop
========================================================== */

.scout-experience-section{
  position:relative;
  overflow:hidden;
  padding:70px 0 76px;
  background:#fff;
}

.scout-experience-section::before,
.scout-experience-section::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  border:1.5px solid rgba(23,110,214,.10);
  border-radius:45% 55% 60% 40%;
  pointer-events:none;
}

.scout-experience-section::before{
  left:-190px;
  bottom:-155px;
  transform:rotate(22deg);
}

.scout-experience-section::after{
  right:-190px;
  bottom:-120px;
  transform:rotate(-19deg);
}

.scout-experience-wrap{
  position:relative;
  z-index:2;
}

.scout-experience-heading{
  display:grid;
  grid-template-columns:minmax(330px,.9fr) minmax(390px,1.1fr);
  align-items:end;
  gap:62px;
  margin-bottom:22px;
}

.scout-title-block h2{
  margin-bottom:0;
  font-size:clamp(2.55rem,3.7vw,3.8rem);
}

.scout-title-stroke{
  width:185px;
  height:6px;
  display:block;
  margin:8px 0 0 290px;
  border-radius:999px;
  background:var(--yellow);
  transform:rotate(2deg);
}

.scout-intro{
  max-width:550px;
  margin:0 0 5px auto;
  color:#5D6E91;
  font-size:1.08rem;
  line-height:1.45;
}

.scout-collage{
  position:relative;
  min-height:365px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  gap:18px;
  padding:8px 4px 0;
}

.scout-polaroid{
  position:relative;
  z-index:3;
  overflow:visible;
  margin:0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 16px 32px rgba(25,63,119,.11);
}

.scout-polaroid::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(25,63,119,.07);
  border-radius:18px;
  pointer-events:none;
}

.scout-polaroid img{
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:18px 18px 0 0;
}

.scout-polaroid-1{transform:rotate(-3deg) translateY(5px)}
.scout-polaroid-2{transform:rotate(2deg) translateY(15px)}
.scout-polaroid-3{transform:rotate(-2deg) translateY(0)}
.scout-polaroid-4{transform:rotate(3deg) translateY(10px)}

.tape{
  position:absolute;
  z-index:6;
  top:-13px;
  left:50%;
  width:86px;
  height:27px;
  opacity:.92;
  transform:translateX(-50%) rotate(-3deg);
  clip-path:polygon(3% 9%,96% 0,100% 88%,5% 100%);
}

.tape-yellow{background:rgba(249,202,50,.94)}
.tape-blue{background:rgba(35,111,226,.88)}

.scout-card-copy{
  min-height:108px;
  display:grid;
  grid-template-columns:48px 1fr;
  align-items:start;
  gap:12px;
  padding:14px 16px 16px;
  background:#fff;
  border-radius:0 0 18px 18px;
}

.scout-mini-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
}

.scout-mini-icon svg{
  width:23px;
  height:23px;
  fill:var(--ink);
}

.icon-blue{background:#DFF1FF}
.icon-yellow{background:#FFF0AE}

.scout-card-copy h3{
  margin:2px 0 4px;
  font-size:1.2rem;
}

.scout-card-copy p{
  margin:0;
  color:#5C6F94;
  font-size:.84rem;
  line-height:1.36;
}

.scout-doodle{
  position:absolute;
  z-index:2;
  color:var(--blue-bright);
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;
}

.scout-doodle-sign{
  top:-18px;
  right:3%;
  font-size:3.8rem;
  transform:rotate(-10deg);
}

.scout-doodle-heart{
  top:54px;
  left:69%;
  font-size:2.7rem;
  transform:rotate(-8deg);
}

.scout-doodle-note{
  left:0;
  bottom:-40px;
  font-size:1.05rem;
  line-height:1.05;
  transform:rotate(0deg);
}

.scout-route{
  position:absolute;
  z-index:1;
  left:25%;
  right:17%;
  bottom:-30px;
  height:46px;
  border-bottom:3px dashed #1F72DF;
  border-radius:0 0 55% 55%;
  transform:rotate(1deg);
  opacity:.9;
}

@media(max-width:1100px){

  .scout-experience-heading{
    grid-template-columns:1fr;
    gap:16px;
  }

  .scout-intro{
    margin-left:0;
  }

  .scout-title-stroke{
    margin-left:0;
  }

  .scout-collage{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:34px 22px;
    min-height:auto;
  }

  .scout-polaroid-1,
  .scout-polaroid-2,
  .scout-polaroid-3,
  .scout-polaroid-4{
    transform:none;
  }

  .scout-route,
  .scout-doodle{
    display:none;
  }
}

@media(max-width:720px){

  .scout-experience-section{
    padding:58px 0 66px;
  }

  .scout-experience-heading{
    margin-bottom:24px;
  }

  .scout-title-block h2{
    font-size:clamp(2.45rem,12vw,3.4rem);
  }

  .scout-intro{
    font-size:1rem;
  }

  .scout-collage{
    grid-template-columns:1fr;
    gap:20px;
  }

  .scout-polaroid img{
    height:235px;
  }

  .scout-card-copy{
    min-height:auto;
  }
}

/* ==========================================================
   SECCIONES · PROPUESTA 2 · HTML + COLLAGE
   Texto editable en HTML + collage visual derecho.
   Hover sin recortes.
========================================================== */

.sections-html-collage{
  position:relative;
  overflow:hidden;
  padding:72px 0 78px;
  background:#F4FAFF;
}

.sections-html-collage-inner{
  display:grid;
  grid-template-columns:28% 72%;
  align-items:center;
  gap:26px;
}


/* ---------- COPY HTML ---------- */

.sections-html-copy{
  position:relative;
  z-index:4;
}

.sections-html-copy h2{
  margin-bottom:0;
  font-size:clamp(2.7rem,3.65vw,4rem);
  line-height:.94;
}

.sections-html-copy h2 span{
  color:var(--blue-bright);
}

.sections-html-stroke{
  width:190px;
  height:6px;
  display:block;
  margin:10px 0 24px 116px;
  border-radius:999px;
  background:var(--yellow);
  transform:rotate(-1.5deg);
}

.sections-html-copy p{
  max-width:365px;
  margin-bottom:24px;
  color:#53678F;
  font-size:1.03rem;
  line-height:1.52;
}


/* ---------- COLLAGE ---------- */

.sections-collage-stage{
  position:relative;
  width:100%;
  overflow:visible;
}

.sections-collage-picture{
  display:block;
  width:100%;
}

.sections-collage-picture img{
  display:block;
  width:100%;
  height:auto;
}


/* ---------- HOTSPOTS ---------- */

/*
  Important:
  Click/hover areas now match ONLY the visible colored cards.
  This makes the interaction line up with what the user sees.
*/
.section-hotspot{
  position:absolute;
  z-index:10;
  display:block;
  border-radius:22px;
  outline:none;
}

/* Subtle lift effect exactly over the card */
.card-hover-feedback{
  position:absolute;
  inset:0;
  border-radius:22px;
  background:rgba(255,255,255,0);
  box-shadow:0 0 0 rgba(20,58,111,0);
  transform:translateY(0);
  transition:
    transform .2s cubic-bezier(.2,.8,.2,1),
    box-shadow .2s ease,
    background .2s ease;
  pointer-events:none;
}

.section-hotspot:hover .card-hover-feedback,
.section-hotspot:focus-visible .card-hover-feedback{
  transform:translateY(-4px);
  background:rgba(255,255,255,.06);
  box-shadow:0 12px 22px rgba(20,58,111,.14);
}

.section-hotspot:focus-visible{
  outline:3px solid #176ED6;
  outline-offset:3px;
}


/*
  Positions are based on the actual card rectangles in
  secciones-collage-right.webp (1274 x 765).
*/
.section-hotspot-manada{
  left:2.1%;
  top:64.1%;
  width:20.7%;
  height:16.3%;
}

.section-hotspot-tropa{
  left:24.35%;
  top:64.1%;
  width:20.2%;
  height:16.9%;
}

.section-hotspot-comunidad{
  left:46.15%;
  top:64.18%;
  width:21%;
  height:17.4%;
}

.section-hotspot-clan{
  left:68.7%;
  top:64.5%;
  width:22.3%;
  height:16.7%;
}


/* ---------- TABLET ---------- */

@media(max-width:1100px){

  .sections-html-collage{
    padding:66px 0 72px;
  }

  .sections-html-collage-inner{
    grid-template-columns:1fr;
    gap:28px;
  }

  .sections-html-copy{
    max-width:620px;
  }

  .sections-html-stroke{
    margin-left:0;
  }

  .sections-html-copy p{
    max-width:560px;
  }

  .sections-collage-stage{
    max-width:900px;
    margin-inline:auto;
  }
}


/* ---------- MOBILE ---------- */

@media(max-width:720px){

  .sections-html-collage{
    padding:56px 0 62px;
  }

  .sections-html-collage-inner{
    gap:22px;
  }

  .sections-html-copy h2{
    font-size:clamp(2.5rem,12vw,3.6rem);
  }

  .sections-html-copy p{
    font-size:1rem;
  }

  .sections-html-copy .btn{
    width:100%;
  }

  .sections-collage-stage{
    width:100%;
    overflow:hidden;
  }

  .section-hotspot-manada{
    left:2%;
    top:63%;
    width:22%;
    height:16%;
  }

  .section-hotspot-tropa{
    left:24.5%;
    top:63%;
    width:22%;
    height:16%;
  }

  .section-hotspot-comunidad{
    left:47%;
    top:63%;
    width:23%;
    height:16%;
  }

  .section-hotspot-clan{
    left:71%;
    top:63%;
    width:27%;
    height:16%;
  }
}

/* ==========================================================
   MOBILE FINAL · SECCIONES
   Recortes transparentes HD + tarjetas HTML clickeables
   Desktop NO se modifica.
========================================================== */

.sections-mobile-stack{display:none;}

@media(max-width:720px){

  .sections-html-collage{
    padding:34px 0 38px;
    background:#F4FAFF;
  }

  .sections-html-collage-inner{
    display:block;
  }

  .sections-html-copy{
    max-width:none;
    margin-bottom:14px;
  }

  .sections-html-copy .eyebrow{
    margin-bottom:8px;
    font-size:.67rem;
    letter-spacing:.11em;
  }

  .sections-html-copy h2{
    max-width:330px;
    font-size:clamp(2.05rem,10.2vw,2.75rem);
    line-height:.94;
  }

  .sections-html-stroke{
    width:150px;
    height:5px;
    margin:8px 0 18px 92px;
  }

  .sections-html-copy p{
    max-width:320px;
    margin-bottom:20px;
    font-size:.92rem;
    line-height:1.5;
  }

  .sections-html-copy .btn{
    width:100%;
    min-height:46px;
    justify-content:center;
    font-size:.92rem;
  }

  /* En móvil se oculta el collage raster y sus hotspots desktop */
  .sections-collage-picture,
  .section-hotspot{
    display:none!important;
  }

  .sections-collage-stage{
    width:100%;
    max-width:none;
    overflow:visible;
    margin:0;
  }

  .sections-mobile-stack{
    position:relative;
    display:grid;
    gap:6px;
    padding:8px 0 54px;
  }

  .mobile-section-item{
    position:relative;
    display:block;
    min-height:300px;
    text-decoration:none;
    isolation:isolate;
  }

  .mobile-art{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    min-height:235px;
    overflow:visible;
    transition:transform .24s cubic-bezier(.2,.8,.2,1);
  }

  .mobile-art img{
    position:relative;
    z-index:2;
    display:block;
    width:auto;
    max-width:95%;
    height:235px;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 10px 16px rgba(20,54,100,.10));
  }

  .mobile-section-tropa .mobile-art img,
  .mobile-section-clan .mobile-art img{
    height:245px;
  }

  .mobile-section-card{
    position:relative;
    z-index:4;
    width:min(92%, 335px);
    min-height:96px;
    display:grid;
    grid-template-columns:48px 1fr;
    align-items:start;
    gap:12px;
    margin:-22px auto 0;
    padding:14px 16px 15px;
    border-radius:20px;
    box-shadow:0 11px 24px rgba(20,58,111,.10);
    transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease;
  }

  .mobile-card-manada{background:linear-gradient(160deg,#FFF0AF,#FFF7D8)}
  .mobile-card-tropa{background:linear-gradient(160deg,#D1F2DD,#EDFDF4)}
  .mobile-card-comunidad{background:linear-gradient(160deg,#D1EAFF,#EFF8FF)}
  .mobile-card-clan{background:linear-gradient(160deg,#FFD3DB,#FFF0F2)}

  .mobile-card-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.48);
  }

  .mobile-card-icon svg{
    width:24px;
    height:24px;
    fill:#173A8C;
  }

  .mobile-card-copy{
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  .mobile-card-copy strong{
    color:#173A8C;
    font-family:"Bricolage Grotesque",sans-serif;
    font-size:1.05rem;
    line-height:1;
  }

  .mobile-card-copy small{
    margin-top:5px;
    color:#2D7FF9;
    font-size:.90rem;
    line-height:1.05;
    font-weight:800;
  }

  .mobile-card-copy em{
    margin-top:6px;
    color:#53678F;
    font-size:.77rem;
    line-height:1.35;
    font-style:normal;
  }

  .mobile-section-clan .mobile-card-copy small{color:#DD4051}

  .mobile-section-item:hover .mobile-art,
  .mobile-section-item:focus-visible .mobile-art{
    transform:translateY(-4px);
  }

  .mobile-section-item:hover .mobile-section-card,
  .mobile-section-item:focus-visible .mobile-section-card{
    transform:translateY(-3px);
    box-shadow:0 15px 29px rgba(20,58,111,.14);
  }

  .mobile-section-item:focus-visible{outline:none}
  .mobile-section-item:focus-visible .mobile-section-card{
    box-shadow:0 0 0 3px rgba(45,127,249,.24),0 15px 29px rgba(20,58,111,.14);
  }

  /* Fondo/doodles independientes de los recortes */
  .mobile-doodle{
    position:absolute;
    z-index:0;
    pointer-events:none;
  }

  .doodle-tree-left,
  .doodle-tree-right{
    color:#11936D;
    font-size:2.8rem;
    font-weight:800;
    line-height:1;
  }

  .doodle-tree-left{left:3%;bottom:45px;transform:rotate(-8deg)}
  .doodle-tree-right{right:5%;bottom:50px;transform:rotate(7deg)}

  .doodle-rays{
    left:7%;
    top:28px;
    width:58px;
    height:52px;
    background:
      linear-gradient(66deg,transparent 45%,#F9CA32 46% 51%,transparent 52%) 0 0/20px 38px no-repeat,
      linear-gradient(88deg,transparent 45%,#F9CA32 46% 51%,transparent 52%) 21px 0/20px 42px no-repeat,
      linear-gradient(110deg,transparent 45%,#F9CA32 46% 51%,transparent 52%) 41px 7px/18px 36px no-repeat;
  }

  .doodle-mountain{
    left:18%;
    top:22px;
    width:120px;
    height:74px;
    opacity:.36;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 74'%3E%3Cpath d='M5 65 38 20l20 25 15-18 42 38' fill='none' stroke='%2352AEEB' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:contain;
  }

  .doodle-spark{
    right:12%;
    top:28px;
    color:#176ED6;
    font-size:2.4rem;
    transform:rotate(8deg);
  }

  .doodle-flame{
    left:7%;
    top:36px;
    color:#F44D60;
    font-size:2.4rem;
    transform:rotate(-8deg);
  }

  .mobile-sections-note{
    position:relative;
    z-index:3;
    width:max-content;
    margin:2px 6px 0 auto;
    color:#173A8C;
    font-family:"Bricolage Grotesque",sans-serif;
    font-size:1rem;
    font-weight:800;
    line-height:1.02;
    text-align:right;
    transform:rotate(-7deg);
  }

  .mobile-sections-note::after{
    content:"";
    display:block;
    width:86px;
    height:4px;
    margin:5px 0 0 auto;
    border-radius:99px;
    background:#F9CA32;
  }

  .mobile-sections-route{
    position:absolute;
    left:8%;
    right:8%;
    bottom:10px;
    height:56px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 56'%3E%3Cpath d='M2 21c28 0 28 22 56 22s28-22 56-22 28 22 56 22 28-22 56-22 28 22 56 22 28-22 36-22' fill='none' stroke='%232D7FF9' stroke-width='3' stroke-linecap='round' stroke-dasharray='8 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:100% 100%;
    pointer-events:none;
  }
}

@media(max-width:420px){
  .sections-html-copy h2{font-size:clamp(1.95rem,10.7vw,2.45rem)}
  .sections-html-copy p{font-size:.88rem}
  .mobile-section-item{min-height:286px}
  .mobile-art{min-height:225px}
  .mobile-art img{height:225px;max-width:98%}
  .mobile-section-tropa .mobile-art img,
  .mobile-section-clan .mobile-art img{height:235px}
  .mobile-section-card{width:94%;padding:13px 14px 14px;grid-template-columns:46px 1fr}
  .mobile-card-icon{width:42px;height:42px}
  .mobile-card-copy strong{font-size:1rem}
  .mobile-card-copy small{font-size:.86rem}
  .mobile-card-copy em{font-size:.74rem}
}

/* ==========================================================
   ACTIVIDADES · 8 EXPERIENCIAS
   Desktop 4x2 · Tablet 2x4 · Mobile 1 columna
========================================================== */
.activities-showcase{
  position:relative;
  overflow:hidden;
  padding:78px 0 88px;
  background:#fff;
}

.activities-showcase::before,
.activities-showcase::after{
  content:"";
  position:absolute;
  width:290px;
  height:290px;
  border:1px solid rgba(23,110,214,.07);
  border-radius:46% 54% 58% 42%;
  pointer-events:none;
}
.activities-showcase::before{left:-190px;top:-180px}
.activities-showcase::after{right:-190px;bottom:-190px}

.activities-showcase-inner{position:relative;z-index:2}

.activities-showcase-heading{
  display:grid;
  grid-template-columns:minmax(340px,.9fr) minmax(420px,1.1fr);
  align-items:end;
  gap:72px;
  margin-bottom:34px;
}

.activities-title-block h2{
  margin-bottom:0;
  font-size:clamp(2.8rem,4vw,4.2rem);
  line-height:.93;
}

.activities-title-stroke{
  display:block;
  width:225px;
  height:6px;
  margin:9px 0 0 120px;
  border-radius:999px;
  background:var(--yellow);
  transform:rotate(-1deg);
}

.activities-intro{
  max-width:560px;
  margin:0 0 8px auto;
  color:#5D6E91;
  font-size:1.06rem;
  line-height:1.5;
}

.activities-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px 22px;
}

.activity-experience-card{
  display:block;
  cursor:default;
  overflow:hidden;
  border:1px solid rgba(24,74,135,.08);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 28px rgba(24,53,108,.10);
  transition:box-shadow .24s ease,border-color .24s ease;
}

.activity-experience-card:hover{
  box-shadow:0 18px 34px rgba(24,53,108,.14);
  border-color:rgba(24,74,135,.14);
}

.activity-image-wrap{
  height:210px;
  overflow:hidden;
}

.activity-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.activity-experience-card:hover .activity-image-wrap img{transform:scale(1.035)}

.activity-card-content{
  min-height:132px;
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:start;
  gap:14px;
  padding:16px 18px 18px;
}

.activity-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
}

.activity-icon svg{width:27px;height:27px;fill:currentColor}

.icon-yellow{color:#173A8C;background:#FFF0A9}
.icon-blue{color:#1955C9;background:#D9EBFF}
.icon-green{color:#13996D;background:#D6F6DF}
.icon-pink{color:#E6365C;background:#FFDDE5}
.icon-purple{color:#5E3BC6;background:#EEE3FF}
.icon-orange{color:#F06B2A;background:#FFE6D1}
.icon-teal{color:#139B85;background:#D6F5EE}
.icon-indigo{color:#2D52C9;background:#E0E6FF}

.activity-card-copy{
  min-width:0;
  min-height:74px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.activity-card-copy h3{
  min-height:0;
  margin:0 0 8px;
  color:var(--ink);
  font-size:1.15rem;
  line-height:1.08;
}

.activity-card-copy h3 span{font-size:.78em}

.activity-card-copy p{
  margin:0;
  color:#5C6F94;
  font-size:.87rem;
  line-height:1.42;
}


@media(max-width:1100px){
  .activities-showcase-heading{
    grid-template-columns:1fr;
    gap:16px;
  }

  .activities-title-stroke{margin-left:0}
  .activities-intro{margin-left:0;max-width:650px}
  .activities-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .activity-image-wrap{height:230px}
}

@media(max-width:720px){
  .activities-showcase{
    padding:58px 0 66px;
  }

  .activities-showcase-heading{
    margin-bottom:26px;
  }

  .activities-title-block h2{
    font-size:clamp(2.35rem,11.5vw,3.25rem);
    line-height:.95;
  }

  .activities-title-stroke{
    width:160px;
    height:5px;
    margin-top:8px;
  }

  .activities-intro{
    font-size:.96rem;
    line-height:1.48;
  }

  .activities-card-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .activity-experience-card{
    border-radius:18px;
  }

  .activity-image-wrap{
    height:220px;
  }

  .activity-card-content{
    min-height:auto;
    grid-template-columns:48px 1fr;
    gap:12px;
    padding:14px 15px 16px;
  }

  .activity-icon{
    width:44px;
    height:44px;
  }

  .activity-icon svg{
    width:24px;
    height:24px;
  }

  .activity-card-copy h3{
    min-height:0;
    font-size:1.1rem;
  }

  .activity-card-copy p{
    font-size:.83rem;
  }

}



/* Ajustes finos sección actividades: sin links en cards, mejor alineación */
.activity-card-content{align-items:center;}
.activity-icon{flex-shrink:0;}
.activity-card-copy h3, .activity-card-copy p{max-width:100%;}
.activity-card-copy p{display:block;}

/* ==========================================================
   RESTAURADAS · HISTORIA / MOMENTOS / FAQ
========================================================== */

.history-journey,
.moments-gallery,
.families-faq{
  position:relative;
  overflow:hidden;
}

.history-journey{
  padding:82px 0 86px;
  background:#fff;
}

.history-heading-row,
.moments-heading-row,
.faq-heading-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:34px;
}

.history-heading-row h2,
.moments-heading-row h2,
.faq-heading-row h2{
  margin-bottom:0;
}

.history-side-note{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  text-align:right;
}

.history-side-note strong{
  color:var(--ink);
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:1rem;
}

.history-side-note a{
  color:var(--blue-bright);
  font-size:.82rem;
  font-weight:700;
}

.history-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
  padding-top:18px;
}

.history-line{
  position:absolute;
  left:12.5%;
  right:12.5%;
  top:53px;
  height:2px;
  background:#CFE0F5;
}

.history-milestone{
  position:relative;
  z-index:2;
  text-align:center;
}

.history-dot{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  border:1px solid #D7E5F5;
  border-radius:50%;
  color:#5F76A2;
  background:#F4F8FD;
  box-shadow:0 8px 20px rgba(24,53,108,.08);
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:.85rem;
  font-weight:800;
}

.history-milestone-current .history-dot{
  color:#fff;
  border-color:#4D67B9;
  background:#4D67B9;
  box-shadow:0 10px 24px rgba(77,103,185,.24);
}

.history-milestone h3{
  margin:0 0 4px;
  font-size:.98rem;
}

.history-milestone p{
  max-width:180px;
  margin:0 auto;
  font-size:.76rem;
  line-height:1.4;
}


/* MOMENTOS */

.moments-gallery{
  padding:82px 0 88px;
  background:#F7FAFE;
}

.moments-grid{
  display:grid;
  grid-template-columns:1.5fr .85fr .85fr;
  grid-template-rows:190px 190px;
  gap:16px;
}

.moment{
  overflow:hidden;
  margin:0;
  border-radius:18px;
  background:#DCE8F5;
  box-shadow:0 10px 24px rgba(24,53,108,.08);
}

.moment-featured{
  grid-row:1 / 3;
}

.moment-wide{
  grid-column:3;
  grid-row:2;
}

.moment img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.moment:hover img{
  transform:scale(1.025);
}


/* FAQ */

.families-faq{
  padding:82px 0 92px;
  background:#EEF5FF;
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px;
}

.faq-item{
  overflow:hidden;
  border:1px solid #D3E2F5;
  border-radius:13px;
  background:#fff;
  box-shadow:0 4px 12px rgba(24,53,108,.04);
}

.faq-item summary{
  position:relative;
  display:flex;
  align-items:center;
  min-height:50px;
  padding:0 46px 0 16px;
  color:var(--ink);
  cursor:pointer;
  font-size:.9rem;
  font-weight:700;
  list-style:none;
}

.faq-item summary::-webkit-details-marker{display:none}

.faq-item summary::after{
  content:"+";
  position:absolute;
  top:50%;
  right:16px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--blue-bright);
  background:#EEF6FF;
  font-size:1rem;
  font-weight:800;
  transform:translateY(-50%);
  transition:transform .2s ease,background .2s ease;
}

.faq-item[open] summary::after{
  content:"−";
  background:#DFEDFF;
}

.faq-item p{
  margin:0;
  padding:0 16px 16px;
  color:#5D6E91;
  font-size:.84rem;
  line-height:1.5;
}

@media(max-width:900px){
  .history-heading-row,
  .moments-heading-row,
  .faq-heading-row{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .history-side-note{
    align-items:flex-start;
    text-align:left;
  }

  .history-timeline{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:34px 18px;
  }

  .history-line{display:none}

  .moments-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:220px 180px 180px;
  }

  .moment-featured{
    grid-column:1 / 3;
    grid-row:1;
  }

  .moment-wide{
    grid-column:auto;
    grid-row:auto;
  }
}

@media(max-width:720px){
  .history-journey,
  .moments-gallery,
  .families-faq{
    padding:58px 0 64px;
  }

  .history-timeline{
    grid-template-columns:1fr 1fr;
    gap:28px 14px;
  }

  .history-dot{
    width:66px;
    height:66px;
  }

  .history-milestone p{
    font-size:.72rem;
  }

  .moments-grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:12px;
  }

  .moment,
  .moment-featured,
  .moment-wide{
    grid-column:auto;
    grid-row:auto;
    height:220px;
  }

  .faq-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .faq-item summary{
    min-height:52px;
    font-size:.88rem;
  }
}


/* CIERRE Y FOOTER */
.visit-cta{
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:76px 0;
  background:#2E5288;
}

/* Montañas sutiles, integradas al fondo; no compiten con el texto */
.visit-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.38;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420' preserveAspectRatio='none'%3E%3Cpath d='M0 235L120 170L235 205L360 108L495 190L615 135L760 220L915 115L1060 198L1210 124L1375 202L1490 145L1600 190V420H0Z' fill='%233A5D8F'/%3E%3Cpath d='M0 290L155 225L285 260L425 185L575 250L735 175L880 265L1035 188L1180 262L1330 205L1455 248L1600 205V420H0Z' fill='%23264476' fill-opacity='.72'/%3E%3Cpath d='M0 338L180 295L350 326L525 270L705 328L895 278L1090 330L1270 288L1440 320L1600 278V420H0Z' fill='%23203866' fill-opacity='.48'/%3E%3C/svg%3E");
  background-size:cover;
  background-position:center 58%;
}

.visit-cta::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(37,72,123,.92) 0%,rgba(48,83,137,.82) 46%,rgba(62,96,148,.72) 100%);
}

.visit-cta-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(48px,7vw,110px);
  align-items:center;
}
.visit-cta .eyebrow{color:#fff;font-size:12px;letter-spacing:.14em;margin-bottom:18px}
.visit-cta h2{color:#fff;font-size:clamp(32px,3.5vw,48px);line-height:1.08;letter-spacing:-.04em;margin:0}
.visit-cta-copy{max-width:560px;justify-self:end;width:100%}
.visit-cta-copy p{font-size:17px;line-height:1.7;margin:0 0 24px;max-width:560px;color:#fff}
.visit-cta-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.visit-cta .btn{min-height:48px;font-size:14px}
.visit-secondary{border:1px solid #c9d6e9;border-radius:999px;color:#fff;background:transparent;padding:12px 24px}
.site-footer{background:#203759;color:#dce5f2;padding:40px 0 0;font-size:15px;line-height:1.5}
.footer-grid{display:grid;grid-template-columns:1.25fr .8fr .9fr 1.3fr;gap:40px;padding-bottom:16px}
.footer-brand{display:flex;gap:13px;align-items:center;color:#fff;min-height:48px;width:fit-content}
.footer-brand img{object-fit:contain;flex:none;width:36px;height:48px}
.footer-brand strong{display:block;font-size:18px;letter-spacing:.03em}
.footer-brand small{display:block;font-size:10px;letter-spacing:.14em}
.footer-brand-block p{max-width:255px;margin:12px 0 0;color:#dce5f2}
.site-footer h2{font-family:inherit;font-size:15px;line-height:1.5;color:#fff;font-weight:700;margin:0 0 8px}
.footer-nav ul{padding:0;margin:0;list-style:none}
.footer-nav a{display:flex;align-items:center;min-height:30px;width:fit-content}
.footer-contact address{font-style:normal}
.footer-contact address a{display:block;padding:0;min-height:0}
.footer-email{overflow-wrap:anywhere;font-size:14px;margin-top:8px}
.footer-socials{display:flex;gap:8px;margin-top:8px}
.footer-socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:4px;background:#347fba;color:#fff}
.footer-socials svg{width:21px;height:21px}
.footer-socials a:hover{background:#28689c;color:#fff}
.footer-bottom{border-top:1px solid #516581;padding:12px 0;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#c1cfe2}
.footer-bottom p{margin:0}
.site-footer a:hover{color:#f9ca32}
.visit-cta a:focus-visible,.site-footer a:focus-visible{outline:3px solid #f9ca32;outline-offset:5px;border-radius:4px}
@media(max-width:1024px){
  .footer-grid{gap:32px;grid-template-columns:1fr 1fr}
  .visit-cta-inner{grid-template-columns:1fr 1fr;gap:42px}
}
@media(max-width:820px){
  .visit-cta-inner{grid-template-columns:1fr;gap:28px}
  .visit-cta-copy{justify-self:start;max-width:620px}
}

@media(max-width:600px){
  .visit-cta .container,.site-footer .container{width:calc(100% - 48px)}
  .visit-cta{padding:48px 0}
  .visit-cta-inner{grid-template-columns:1fr;gap:26px}
  .visit-cta-copy p{font-size:16px}
  .visit-cta-actions{align-items:stretch;flex-direction:column}
  .visit-cta-actions .btn{justify-content:center;text-align:center}
  .site-footer{padding-top:24px}
  .footer-grid{grid-template-columns:1fr;gap:22px;padding-bottom:20px}
  .footer-nav a{min-height:44px}
  .footer-brand-block p{max-width:300px}
  .footer-bottom{flex-direction:column;gap:8px}
  .site-footer h2{margin-bottom:8px}
}



/* ==========================================================
   PREMIUM MARGINS · FINAL
   Hero ancho, contenido interior alineado al grid de 1180px.
   No ensancha globalmente las secciones.
========================================================== */
@media (min-width:1481px){
  .hero-copy{
    left:calc((100% - var(--container)) / 2);
  }
  .hero-stats{
    left:calc((100% - var(--container)) / 2);
    right:calc((100% - var(--container)) / 2);
  }
}

@media (max-width:1100px){
  .hero-card{
    width:calc(100% - 32px);
  }
}

@media (max-width:720px){
  .hero-card{
    width:100%;
    max-width:none;
    margin:0;
  }
}

/* ==========================================================
   HEADER 88px -> 64px AL HACER SCROLL
   ========================================================== */
@media (min-width:721px){
  .hero-header{
    height:88px;
    min-height:88px;
    transition:
      height .24s cubic-bezier(.22,.61,.36,1),
      min-height .24s cubic-bezier(.22,.61,.36,1),
      padding .24s cubic-bezier(.22,.61,.36,1),
      box-shadow .24s ease,
      background-color .24s ease;
  }

  .hero-header.header-scrolled{
    height:64px;
    min-height:64px;
    padding-top:0;
    padding-bottom:0;
    background:rgba(255,255,255,.985);
    box-shadow:0 7px 22px rgba(27,65,123,.16);
  }

  .hero-header .brand img,
  .hero-header .brand strong,
  .hero-header .brand small,
  .hero-header .btn-header{
    transition:.24s cubic-bezier(.22,.61,.36,1);
  }

  .hero-header.header-scrolled .brand img{
    width:34px;
    height:38px;
  }

  .hero-header.header-scrolled .brand strong{
    font-size:.94rem;
  }

  .hero-header.header-scrolled .brand small{
    margin-top:3px;
    font-size:.56rem;
  }

  .hero-header.header-scrolled .btn-header{
    min-height:40px;
    padding-inline:21px;
  }
}

/* ==========================================================
   HEADER · 
   ========================================================== */
@media (min-width:721px){
  .hero-header{
    left:50%;
    transform:translateX(-50%);

    /* Shell exterior: deja solo 12px por lado cuando el viewport aprieta */
    width:min(calc(100% - 24px), 1480px);

    /* El primer pixel del logo coincide con el primer pixel de .container.
       1480 - 1224 = 256 / 2 = 128px en desktop amplio.
       Al reducir, este espacio se vuelve fluido hasta un minimo de 12px. */
    padding-left:max(12px, calc((100% - var(--container)) / 2));
    padding-right:max(12px, calc((100% - var(--container)) / 2));

    grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:clamp(18px,2vw,30px);
  }

  /* Mantener proporciones: no escalar el logo por ancho de viewport */
  .hero-header .brand{
    min-width:190px;
    flex-shrink:0;
  }

  .hero-header .main-nav{
    min-width:0;
    gap:clamp(18px,1.8vw,30px);
  }

  .hero-header .btn-header{
    flex-shrink:0;
  }

  /* Estado compacto por scroll: solo cambia altura, no alineacion horizontal */
  .hero-header.header-scrolled{
    width:min(calc(100% - 24px), 1480px);
    padding-left:max(12px, calc((100% - var(--container)) / 2));
    padding-right:max(12px, calc((100% - var(--container)) / 2));
  }
}

/* Antes de comprimir elementos, pasar al modo menu compacto. */
@media (min-width:721px) and (max-width:1180px){
  .hero-header{
    grid-template-columns:auto 1fr auto;
  }
}

/* Mobile conserva su comportamiento propio. */
@media (max-width:720px){
  .hero-header{
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 20px);
    padding-left:13px;
    padding-right:13px;
  }
}

/* ==========================================================
   HEADER FINAL · 
   ========================================================== */
@media (min-width:721px){
  :root{
    --header-shell-width:min(calc(100vw - 24px), var(--hero-max));
    --page-content-start:max(24px, calc((100vw - var(--container)) / 2));
    --header-shell-start:calc((100vw - var(--header-shell-width)) / 2);
    --header-inner-gutter:max(12px, calc(var(--page-content-start) - var(--header-shell-start)));
  }

  .hero-header,
  .hero-header.header-scrolled{
    position:fixed;
    top:20px;
    left:50%;
    width:var(--header-shell-width);
    max-width:var(--hero-max);
    transform:translateX(-50%);

    /* Esta es la clave: se calcula desde el viewport, no desde el propio header. */
    padding-left:var(--header-inner-gutter);
    padding-right:var(--header-inner-gutter);

    grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:clamp(18px,2vw,30px);
  }

  .hero-header{
    height:88px;
    min-height:88px;
  }

  .hero-header.header-scrolled{
    height:64px;
    min-height:64px;
  }

  /* BBVA: cambia el alto del shell, no la escala horizontal de la marca. */
  .hero-header .brand,
  .hero-header.header-scrolled .brand{
    min-width:190px;
    margin:0;
    padding:0;
    flex-shrink:0;
  }

  .hero-header .brand img,
  .hero-header.header-scrolled .brand img{
    width:39px;
    height:44px;
  }

  .hero-header .brand strong,
  .hero-header.header-scrolled .brand strong{
    font-size:1.02rem;
  }

  .hero-header .brand small,
  .hero-header.header-scrolled .brand small{
    margin-top:5px;
    font-size:.62rem;
  }

  .hero-header .btn-header,
  .hero-header.header-scrolled .btn-header{
    min-height:46px;
    padding-inline:24px;
  }

  .hero-header .main-nav{
    min-width:0;
    justify-content:center;
    gap:clamp(18px,1.8vw,30px);
  }

  /* Mantiene el hero respirando debajo del menu al abrir la pagina. */
  .hero-copy{
    top:160px;
  }
}

/* En tablet, cambia de modalidad antes de deformar el header. */
@media (min-width:721px) and (max-width:1180px){
  .hero-header{
    grid-template-columns:auto 1fr auto;
  }
}

/* Mobile conserva el comportamiento especifico ya existente. */
@media (max-width:720px){
  .hero-header,
  .hero-header.header-scrolled{
    top:10px;
    left:50%;
    width:calc(100% - 20px);
    min-height:60px;
    height:60px;
    padding-left:13px;
    padding-right:13px;
    transform:translateX(-50%);
  }
}

/* ==========================================================
   HEADER  · EVITA DESBORDE DEL CTA EN MODO COMPACTO
   Mantiene el logo alineado al contenido y reserva aire a la derecha.
   ========================================================== */
@media (min-width:721px) and (max-width:1180px){
  .hero-header,
  .hero-header.header-scrolled{
    /* El logo conserva su eje; el lado derecho gana respiracion. */
    padding-left:var(--header-inner-gutter);
    padding-right:24px;
    grid-template-columns:auto 1fr auto;
    column-gap:18px;
  }

  .hero-header .brand{
    min-width:180px;
  }

  .hero-header .btn-header,
  .hero-header.header-scrolled .btn-header{
    min-width:0;
    max-width:220px;
    padding-inline:22px;
    margin:0;
    flex-shrink:1;
  }

  .hero-header .menu-toggle{
    margin-left:auto;
    margin-right:0;
  }
}

@media (min-width:721px) and (max-width:980px){
  .hero-header,
  .hero-header.header-scrolled{
    padding-right:18px;
    column-gap:12px;
  }

  .hero-header .brand{
    min-width:165px;
  }

  .hero-header .btn-header,
  .hero-header.header-scrolled .btn-header{
    max-width:205px;
    padding-inline:18px;
    font-size:.92rem;
  }
}

/* ==========================================================
   HERO HOME · SIN MARCO BLANCO
   ========================================================== */
.hero-wrap{
  padding-left:0 !important;
  padding-right:0 !important;
}

.hero-card{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  border-radius:0 0 26px 26px;
}

@media (max-width:1100px){
  .hero-card{
    width:100% !important;
  }
}