/* ==========================================================
   GRUPO 8 BJ · SISTEMA VISUAL COMPARTIDO
   Cargar SIEMPRE al final, después del CSS específico de cada página.
   Este archivo gobierna header, escala tipográfica, heroes, CTA y footer.
   ========================================================== */

:root{
  --site-hero-secondary-size:clamp(3.35rem,4.25vw,4.6rem);
  --site-hero-secondary-line:.92;
  --site-h2-size:clamp(2.55rem,3.7vw,3.8rem);
  --site-h2-line:.95;
  --site-copy-size:1rem;
  --site-copy-line:1.6;
  --site-footer:#203759;
  --site-cta:#2E5288;
  --site-hero-blue-rgb:23,110,214;
  --site-hero-copy-start:168px;
}

/* ---------- HEADER / NAVEGACIÓN ---------- */
.hero-header,
.hero-header.header-scrolled,
.hero-header.header-hidden{
  z-index:1000;
  opacity:1;
}

@media (min-width:721px){
  .hero-header,
  .hero-header.header-scrolled,
  .hero-header.header-hidden{
    position:fixed;
    top:20px;
    left:50%;
    width:var(--header-shell-width,min(calc(100vw - 24px),1480px));
    max-width:1480px;
    transform:translateX(-50%) !important;
    padding-left:var(--header-inner-gutter,24px);
    padding-right:var(--header-inner-gutter,24px);
    align-items:center;
    height:88px;
    min-height:88px;
    background:rgba(255,255,255,.97);
    border-radius:18px;
    box-shadow:0 9px 26px rgba(27,65,123,.18);
    transition:height .24s ease,min-height .24s ease,box-shadow .24s ease,background-color .24s ease;
  }

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

  .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 .main-nav a{
    font-size:.92rem;
    white-space:nowrap;
  }

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

@media (min-width:1101px){
  .hero-header,
  .hero-header.header-scrolled{
    grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:clamp(18px,2vw,30px);
  }
  .hero-header .main-nav{
    position:static;
    display:flex;
    min-width:0;
    justify-content:center;
    align-items:center;
    gap:clamp(18px,1.8vw,30px);
    padding:0;
    background:transparent;
    box-shadow:none;
  }
  .hero-header .menu-toggle{display:none}
}

@media (min-width:721px) and (max-width:1100px){
  .hero-header,
  .hero-header.header-scrolled{
    grid-template-columns:auto auto 1fr;
    column-gap:14px;
    padding-right:24px;
  }
  .hero-header .menu-toggle{
    width:42px;
    height:42px;
    display:block;
    justify-self:end;
    border:0;
    border-radius:12px;
    background:#EEF5FF;
  }
  .hero-header .menu-toggle span{
    width:18px;
    height:2px;
    display:block;
    margin:4px auto;
    background:var(--ink);
  }
  .hero-header .main-nav{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:20px;
    border-radius:16px;
    background:#fff;
    box-shadow:var(--shadow);
  }
  .hero-header .main-nav.open{display:flex}
  .hero-header .btn-header{justify-self:end}
}

@media (max-width:720px){
  .hero-header,
  .hero-header.header-scrolled,
  .hero-header.header-hidden{
    position:fixed;
    top:10px;
    left:50%;
    width:calc(100% - 20px);
    height:60px;
    min-height:60px;
    padding:0 13px;
    transform:translateX(-50%) !important;
  }
}


/* ---------- ANCLAS INTERNAS DEL HOME ----------
   El header fijo no debe quedar flotando sobre las tarjetas del hero.
   En desktop dejamos el inicio de la sección casi bajo el borde superior
   del header; el padding propio de cada sección crea el aire visual. */
@media (min-width:721px){
  #ser-scout,
  #secciones,
  #historia,
  #familias,
  #ven-a-conocernos{
    scroll-margin-top:96px !important;
  }
}

@media (max-width:720px){
  #ser-scout,
  #secciones,
  #historia,
  #familias,
  #ven-a-conocernos{
    scroll-margin-top:78px !important;
  }
}

/* ---------- HEROES SECUNDARIOS ---------- */
@media (min-width:721px){
  .about-hero,
  .hero-secciones,
  .families-hero{
    min-height:560px;
    border-radius:0 0 28px 28px;
  }

  .about-hero-inner,
  .hero-secciones .hero-inner,
  .families-hero-inner{
    min-height:560px;
    display:flex;
    align-items:flex-start;
    padding-top:var(--site-hero-copy-start);
    padding-bottom:54px;
  }

  .about-hero-copy,
  .hero-secciones .hero-copy,
  .families-hero-copy{
    width:auto;
    max-width:760px;
    margin-bottom:0;
    color:#fff;
  }

  .about-hero-copy h1,
  .hero-secciones .hero-copy h1,
  .families-hero-copy h1{
    width:auto;
    max-width:760px;
    margin:8px 0 22px;
    color:#fff;
    font-size:var(--site-hero-secondary-size);
    line-height:var(--site-hero-secondary-line);
    letter-spacing:-.052em;
    white-space:normal;
  }

  .about-hero-copy h1 span,
  .hero-secciones .hero-copy h1 span,
  .families-hero-copy h1 span{
    display:block;
    color:var(--yellow);
  }

  .about-hero-copy p,
  .hero-secciones .hero-copy p,
  .families-hero-copy p{
    max-width:590px;
    margin:0;
    color:#fff;
    font-size:1.04rem;
    line-height:1.58;
  }
}

/* Home conserva mayor presencia; comparte el mismo ritmo. */
.hero-card .hero-copy h1{
  line-height:.9;
  letter-spacing:-.035em;
}

.hero-card .hero-copy p{line-height:1.55}

/* Contacto es una página de acción: banner deliberadamente más corto. */
@media (min-width:721px){
  .visit-banner,
  .gallery-banner{min-height:340px}
  .visit-banner-inner,
  .gallery-banner-inner{
    min-height:340px;
    align-items:flex-start;
    padding-top:168px;
    padding-bottom:22px;
  }
  .visit-banner-copy,
  .gallery-banner-copy{transform:none}
  .visit-banner-copy h1,
  .gallery-banner-copy h1{
    margin:0 0 18px;
    font-size:clamp(2.85rem,3.8vw,4.05rem);
    line-height:.94;
    letter-spacing:-.05em;
  }
}

/* ---------- ESCALA DE TÍTULOS DE SECCIÓN ---------- */
.scout-title-block h2,
.sections-html-copy h2,
.activities-title-block h2,
.history-heading-row h2,
.moments-heading-row h2,
.families-bridge-copy h2,
.conocenos-page .story-copy h2,
.capability-copy h2,
.closing-section h2,
.teamwork-copy h2,
.age-copy h2,
.method-heading h2,
.families-heading h2,
.prepared-copy h2,
.communication-grid h2,
.faq-heading-row h2,
.location-copy h2,
.visit-form-copy h2{
  font-size:var(--site-h2-size);
  line-height:var(--site-h2-line);
  letter-spacing:-.045em;
}

/* Una sola lógica de lectura para copys de introducción. */
.scout-intro,
.activities-intro,
.families-heading>p,
.prepared-copy p,
.communication-copy p,
.teamwork-copy p,
.method-heading p,
.visit-form-copy>p{
  font-size:var(--site-copy-size);
  line-height:var(--site-copy-line);
}

/* ---------- CTA FINAL COMPARTIDO ---------- */
.visit-cta{
  position:relative;
  overflow:hidden;
  padding:72px 0;
  color:#fff;
  background:var(--site-cta);
}
.visit-cta h2{
  margin:0;
  color:#fff;
  font-size:clamp(2.25rem,3.35vw,3rem);
  line-height:1.08;
  letter-spacing:-.04em;
}
.visit-cta-copy p{
  max-width:540px;
  margin:0 0 22px;
  color:#fff;
  font-size:1rem;
  line-height:1.62;
}

/* ---------- FOOTER CANÓNICO: EL MISMO EN TODAS LAS PÁGINAS ---------- */
.site-footer{
  background:var(--site-footer);
  color:#DCE5F2;
  padding:40px 0 0;
  font-size:15px;
  line-height:1.5;
}
.site-footer .footer-grid{
  display:grid;
  grid-template-columns:1.25fr .8fr .9fr 1.3fr;
  gap:40px;
  padding-bottom:16px;
}
.site-footer .footer-brand{display:flex;gap:13px;align-items:center;color:#fff;min-height:48px;width:fit-content}
.site-footer .footer-brand img{width:36px;height:48px;object-fit:contain;flex:none}
.site-footer .footer-brand strong{display:block;font-size:18px;letter-spacing:.03em}
.site-footer .footer-brand small{display:block;font-size:10px;letter-spacing:.14em}
.site-footer .footer-brand-block p{max-width:255px;margin:12px 0 0;color:#DCE5F2}
.site-footer h2{margin:0 0 8px;color:#fff;font-family:inherit;font-size:15px;line-height:1.5;font-weight:700;letter-spacing:0}
.site-footer .footer-nav ul{padding:0;margin:0;list-style:none}
.site-footer .footer-nav a{display:flex;align-items:center;min-height:30px;width:fit-content}
.site-footer .footer-contact address{font-style:normal}
.site-footer .footer-contact address a{display:block;padding:0;min-height:0}
.site-footer .footer-email{overflow-wrap:anywhere;font-size:14px;margin-top:8px}
.site-footer .footer-socials{display:flex;gap:8px;margin-top:8px}
.site-footer .footer-socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:4px;background:#347FBA;color:#fff}
.site-footer .footer-socials svg{width:21px;height:21px}
.site-footer .footer-socials a:hover{background:#28689C;color:#fff}
.site-footer .footer-bottom{border-top:1px solid #516581;padding:12px 0;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#C1CFE2}
.site-footer .footer-bottom p{margin:0;color:inherit}
.site-footer a:hover{color:var(--yellow)}

@media (max-width:1024px){
  .site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}

@media (max-width:720px){
  :root{
    --site-hero-secondary-size:clamp(2.7rem,11vw,3.55rem);
    --site-h2-size:clamp(2.3rem,10vw,3rem);
  }
  .about-hero-copy h1,
  .hero-secciones .hero-copy h1,
  .families-hero-copy h1{line-height:.95}
  .visit-cta{padding:50px 0}
  .site-footer{padding-top:24px}
  .site-footer .footer-grid{grid-template-columns:1fr;gap:22px;padding-bottom:20px}
  .site-footer .footer-nav a{min-height:44px}
  .site-footer .footer-brand-block p{max-width:300px}
  .site-footer .footer-bottom{flex-direction:column;gap:8px}
}


/* ---------- COLOR DE HERO UNIFICADO ----------
   Una sola tinta de marca (#176ED6); cambia solo la opacidad
   para adaptarse a la fotografía, no el tono de azul.
   ---------------------------------------------------------- */
@media (min-width:721px){
  .hero-card .hero-overlay,
  .about-hero-overlay,
  .hero-secciones .hero-blue,
  .families-hero-overlay,
  .visit-banner-overlay,
  .gallery-banner-overlay{
    background:linear-gradient(
      90deg,
      rgba(var(--site-hero-blue-rgb),.97) 0%,
      rgba(var(--site-hero-blue-rgb),.91) 30%,
      rgba(var(--site-hero-blue-rgb),.68) 45%,
      rgba(var(--site-hero-blue-rgb),.26) 58%,
      rgba(var(--site-hero-blue-rgb),0) 72%
    ) !important;
  }
}

@media (max-width:720px){
  .hero-card .hero-overlay,
  .about-hero-overlay,
  .hero-secciones .hero-blue,
  .families-hero-overlay,
  .visit-banner-overlay,
  .gallery-banner-overlay{
    background:linear-gradient(
      180deg,
      rgba(var(--site-hero-blue-rgb),.04) 0 25%,
      rgba(var(--site-hero-blue-rgb),.80) 49%,
      rgba(var(--site-hero-blue-rgb),.98) 72%
    ) !important;
  }
}

/* El acceso a Familias en Home informa sin competir con el CTA de visita. */
.families-bridge-link{
  display:inline-flex;
  align-items:center;
  margin-top:2px;
  font-weight:800;
}


/* ==========================================================
   AJUSTE FINAL · ALINEACIÓN EXACTA DE HEROES + GALERÍA
   ========================================================== */
@media (min-width:721px){
  /* Todos los heroes empiezan el eyebrow a la misma altura.
     Secciones heredaba position:absolute/top:128px del hero de Home;
     se neutraliza aquí de forma explícita. */
  .hero-card .hero-copy{
    top:var(--site-hero-copy-start) !important;
  }

  .about-hero-inner,
  .hero-secciones .hero-inner,
  .families-hero-inner{
    position:relative !important;
    align-items:flex-start !important;
    padding-top:0 !important;
  }

  .about-hero-copy,
  .hero-secciones .hero-copy,
  .families-hero-copy{
    position:absolute !important;
    top:var(--site-hero-copy-start) !important;
    left:0 !important;
    right:auto !important;
    bottom:auto !important;
    width:auto !important;
    max-width:760px !important;
    margin:0 !important;
    transform:none !important;
  }

  .visit-banner-copy{
    transform:none !important;
  }
}

/* Galería extendida: tres filas adicionales, manteniendo el lenguaje visual. */
.moments-more-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:190px;
  gap:16px;
  margin-top:16px;
}

.moments-more-grid .moment-extra-wide{
  grid-column:span 2;
}

@media(max-width:900px){
  .moments-more-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:180px;
  }
  .moments-more-grid .moment-extra-wide{grid-column:span 1}
}

@media(max-width:720px){
  .moments-more-grid{
    grid-template-columns:1fr;
    grid-auto-rows:220px;
    gap:12px;
    margin-top:12px;
  }
}

/* ==========================================================
   MOBILE 2026 · UNIFICACION FINAL DE MARGENES, HEROES Y HEADER
   Referencia horizontal: Hero de Home (24px de contenido por lado).
   Se carga al final para resolver reglas historicas sin afectar desktop.
   ========================================================== */
@media (max-width:720px){
  /* Un solo eje lateral para TODO el proyecto: 24px por lado. */
  .container{
    width:min(calc(100% - 48px), var(--container)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Header: shell a 10px del viewport, contenido estable y hamburger oscuro. */
  .hero-header,
  .hero-header.header-scrolled,
  .hero-header.header-hidden{
    top:10px !important;
    left:50% !important;
    width:calc(100% - 20px) !important;
    height:60px !important;
    min-height:60px !important;
    padding-left:13px !important;
    padding-right:13px !important;
    transform:translateX(-50%) !important;
  }

  .hero-header .menu-toggle{
    width:42px !important;
    height:42px !important;
    display:block !important;
    border:0 !important;
    border-radius:12px !important;
    background:#EEF5FF !important;
    opacity:1 !important;
  }

  .hero-header .menu-toggle span{
    width:18px !important;
    height:2px !important;
    display:block !important;
    margin:4px auto !important;
    background:#0D2A6B !important;
    opacity:1 !important;
  }

  /* Heroes secundarios: misma altura de arranque del copy en mobile. */
  .about-hero,
  .hero-secciones,
  .families-hero{
    min-height:620px !important;
    border-radius:0 0 20px 20px !important;
  }

  .about-hero-photo{
    height:300px !important;
    object-position:58% 40% !important;
  }

  .hero-secciones .hero-photo{
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:0 !important;
    width:100% !important;
    height:300px !important;
  }

  .hero-secciones .hero-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:52% 42% !important;
  }

  .families-hero-photo{
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:0 !important;
    height:300px !important;
    background-position:60% 42% !important;
  }

  .about-hero-inner,
  .hero-secciones .hero-inner,
  .families-hero-inner{
    min-height:620px !important;
    display:flex !important;
    align-items:flex-start !important;
    padding-top:340px !important;
    padding-bottom:40px !important;
  }

  .about-hero-copy,
  .hero-secciones .hero-copy,
  .families-hero-copy{
    position:static !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    transform:none !important;
  }

  .about-hero-copy h1,
  .hero-secciones .hero-copy h1,
  .families-hero-copy h1{
    width:100% !important;
    max-width:none !important;
    margin:8px 0 18px !important;
    font-size:clamp(2.6rem,11vw,3.35rem) !important;
    line-height:.94 !important;
    letter-spacing:-.05em !important;
    white-space:normal !important;
  }

  .about-hero-copy p,
  .hero-secciones .hero-copy p,
  .families-hero-copy p{
    max-width:none !important;
    margin:0 !important;
    font-size:.96rem !important;
    line-height:1.55 !important;
  }

  /* Contacto y Galeria: mismo ritmo vertical entre header, foto y copy. */
  .visit-banner,
  .gallery-banner{
    min-height:440px !important;
    border-radius:0 0 20px 20px !important;
  }

  .visit-banner-inner,
  .gallery-banner-inner{
    min-height:440px !important;
    align-items:flex-start !important;
    padding-top:230px !important;
    padding-bottom:32px !important;
  }

  .visit-banner-copy,
  .gallery-banner-copy{
    width:100% !important;
    margin:0 !important;
    transform:none !important;
  }

  .visit-banner-copy h1,
  .gallery-banner-copy h1{
    margin:0 0 16px !important;
    font-size:clamp(2.5rem,10.8vw,3.25rem) !important;
    line-height:.94 !important;
  }
}

/* HOME MOBILE: azul profundo para contraste con amarillo, sin alterar otros heroes. */
@media (max-width:720px){
  .hero-card .hero-overlay{
    background:linear-gradient(180deg,
      rgba(20,79,166,.03) 0%,
      rgba(20,79,166,.10) 25%,
      rgba(20,79,166,.76) 43%,
      #1555B0 59%,
      #1555B0 100%) !important;
  }
}

/* Ajustes finales mobile: Home / Conocenos */
@media (max-width:720px){
  /* El mismo azul de marca que usa el hero de Conocenos. */
  .hero-card .hero-overlay{
    background:linear-gradient(180deg,
      rgba(23,110,214,.04) 0%,
      rgba(23,110,214,.08) 25%,
      rgba(23,110,214,.80) 49%,
      rgba(23,110,214,.98) 72%,
      #176ED6 100%) !important;
  }
  /* Habilidades: dos tarjetas por fila tambien en telefonos pequenos. */
  .conocenos-page .capability-mosaic{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  .conocenos-page .capability-mosaic .capability-item{
    min-width:0 !important;
    width:auto !important;
    padding:14px 11px !important;
    min-height:128px !important;
  }
  .conocenos-page .capability-mosaic .capability-item h3{overflow-wrap:anywhere}
  /* Galeria de insignias: solo cuatro fotos en mobile, 2 x 2. */
  .conocenos-page .badge-photo-row{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .conocenos-page .badge-photo-row .badge-square:nth-of-type(n+5){display:none !important}
}