/* =====================================================
   HEADER COMPARTIDO — MISMO DISEÑO QUE INDEX.HTML
   Neutraliza estilos antiguos de las páginas internas.
===================================================== */

:root{
  --shared-green:#0f5a3f;
  --shared-green-2:#184f3a;
  --shared-gold:#c9a54d;
}

html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}

.site-header{
  height:98px !important;
  background:rgba(255,255,255,.98) !important;
  display:flex !important;
  align-items:center !important;
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  width:100% !important;
  z-index:2000 !important;
  border-bottom:1px solid rgba(19,74,52,.08) !important;
  box-shadow:none !important;
  color:#17231f !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.site-header .shell{
  width:min(1180px,calc(100% - 48px)) !important;
  margin-inline:auto !important;
}

.site-header .nav-row{
  display:flex !important;
  align-items:center !important;
  gap:26px !important;
  height:100% !important;
  min-height:0 !important;
  position:relative !important;
}

.site-header .brand{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:290px !important;
  text-decoration:none !important;
  color:inherit !important;
}

.site-header .brand::after{content:none !important;display:none !important}

.site-header .brand img.brand-logo{
  width:82px !important;
  height:82px !important;
  min-width:82px !important;
  max-width:82px !important;
  object-fit:contain !important;
  flex-shrink:0 !important;
  border-radius:0 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}

.site-header .brand span{
  display:block !important;
  font-family:"DM Sans",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:400 !important;
  color:#b39a55 !important;
  line-height:1.1 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  white-space:nowrap !important;
}

.site-header .brand strong{
  display:block !important;
  font-family:"DM Sans",Arial,sans-serif !important;
  color:#6b943a !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  margin-top:2px !important;
}

.site-header .main-nav{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:26px !important;
  font-family:"DM Sans",Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  color:#303d38 !important;
}

.site-header .main-nav a,
.site-header .main-nav > a:not(.nav-cta){
  position:relative !important;
  padding:10px 0 !important;
  color:#303d38 !important;
  font-family:"DM Sans",Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.55 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  opacity:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}

.site-header .main-nav a:hover,
.site-header .main-nav > a:not(.nav-cta):hover{
  color:#303d38 !important;
}

.site-header .main-nav a::after,
.site-header .main-nav > a:not(.nav-cta)::after{
  content:none !important;
  display:none !important;
}

.site-header .main-nav a.active{
  color:var(--shared-gold) !important;
}
.site-header .main-nav a.active::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:2px !important;
  width:auto !important;
  height:2px !important;
  background:var(--shared-gold) !important;
  transform:none !important;
}

.site-header .header-cta{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:14px 22px !important;
  border-radius:12px !important;
  background:#184f3a !important;
  color:#fff !important;
  font-family:"DM Sans",Arial,sans-serif !important;
  font-weight:700 !important;
  font-size:13px !important;
  line-height:1.55 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  white-space:nowrap !important;
  box-shadow:0 9px 24px rgba(15,73,51,.16) !important;
  text-decoration:none !important;
  opacity:1 !important;
}

.site-header .menu-toggle{
  display:none !important;
  border:0 !important;
  background:none !important;
  font-size:30px !important;
  color:#184f3a !important;
  padding:0 !important;
  line-height:1 !important;
  cursor:pointer !important;
}

@media(max-width:1050px){
  .site-header .main-nav{gap:16px !important}
  .site-header .main-nav a,
  .site-header .main-nav > a:not(.nav-cta){font-size:12px !important}
  .site-header .header-cta{padding:12px 15px !important}
}

@media(max-width:1024px){
  .site-header .brand{min-width:245px !important}
  .site-header .brand img.brand-logo{
    width:72px !important;height:72px !important;
    min-width:72px !important;max-width:72px !important;
  }
}

@media(max-width:850px){
  .site-header{height:80px !important}
  .site-header .shell{width:min(100% - 32px,1180px) !important}
  .site-header .brand{min-width:0 !important;gap:8px !important}
  .site-header .brand img.brand-logo{
    width:64px !important;height:64px !important;
    min-width:64px !important;max-width:64px !important;
  }
  .site-header .brand span{display:block !important;font-size:9px !important}
  .site-header .brand strong{font-size:15px !important}
  .site-header .menu-toggle{
    display:block !important;
    margin-left:auto !important;
    z-index:2102 !important;
  }
  .site-header .header-cta{display:none !important}
  .site-header .main-nav{
    position:absolute !important;
    top:80px !important;
    left:0 !important;
    right:0 !important;
    margin:0 !important;
    background:#fff !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:12px 24px 22px !important;
    box-shadow:0 16px 30px rgba(0,0,0,.1) !important;
    border:0 !important;
    border-radius:0 !important;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    max-height:calc(100vh - 80px) !important;
    overflow-y:auto !important;
    z-index:2101 !important;
  }
  .site-header .main-nav.open{display:flex !important}
  .site-header .main-nav a,
  .site-header .main-nav > a:not(.nav-cta){
    padding:12px !important;
    border-bottom:1px solid #eee !important;
    font-size:12px !important;
    text-transform:none !important;
    letter-spacing:normal !important;
  }
  .site-header .main-nav a.active::after{display:none !important}
}

@media(max-width:600px){
  .site-header .shell{width:min(100% - 24px,1180px) !important}
}

@media(max-width:480px){
  .site-header .brand img.brand-logo{
    width:58px !important;height:58px !important;
    min-width:58px !important;max-width:58px !important;
  }
  .site-header .brand span{font-size:8px !important}
  .site-header .brand strong{font-size:14px !important}
  .site-header .menu-toggle{font-size:29px !important}
}

/* =====================================================
   SELLO DE AGUA EN HERO DE PÁGINAS INTERNAS
===================================================== */
.about-page-hero,.team-hero,.community-hero{position:relative !important;overflow:hidden !important}
.page-hero-watermark{
  position:absolute;
  z-index:2;
  left:58%;
  top:50%;
  transform:translate(-50%,-50%);
  width:360px;
  max-width:30vw;
  height:auto;
  opacity:.12;
  filter:saturate(.9) contrast(.95);
  pointer-events:none;
  user-select:none;
  border-radius:50%;
  mix-blend-mode:multiply;
}
.about-page-hero-content,.team-hero-content,.community-hero-content{position:relative;z-index:3 !important}

/* Protecciones responsive generales de páginas internas */
.about-page-hero-text,.team-hero-text,.community-hero-text{max-width:min(680px,100%) !important}
.about-page-hero-text h1,.team-hero-text h1,.community-hero-text h1{
  overflow-wrap:break-word;
}
.footer-premium a{overflow-wrap:anywhere}

@media (max-width:1100px){
  .site-header .main-nav{gap:16px !important;font-size:12px !important}
  .site-header .header-cta{padding:12px 15px !important}
  .site-header .brand{min-width:245px !important}
  .site-header .brand img.brand-logo{width:72px !important;height:72px !important;min-width:72px !important;max-width:72px !important}
}

@media (max-width:900px){
  .site-header{height:80px !important}
  .site-header .shell{width:min(100% - 32px,1180px)}
  .site-header .brand{min-width:0 !important;gap:8px !important}
  .site-header .brand img.brand-logo{width:64px !important;height:64px !important;min-width:64px !important;max-width:64px !important}
  .site-header .brand span{font-size:9px !important}
  .site-header .brand strong{font-size:15px !important}
  .site-header .menu-toggle{display:block !important;margin-left:auto !important;z-index:2102 !important}
  .site-header .header-cta{display:none !important}

  .site-header .main-nav{
    position:absolute !important;
    top:80px !important;
    left:-16px !important;
    right:-16px !important;
    margin:0 !important;
    background:#fff !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:12px 24px 22px !important;
    box-shadow:0 16px 30px rgba(0,0,0,.12) !important;
    border-top:1px solid rgba(19,74,52,.08) !important;
    max-height:calc(100vh - 80px) !important;
    overflow-y:auto !important;
    z-index:2101 !important;
  }
  .site-header .main-nav.open{display:flex !important}
  .site-header .main-nav a{
    padding:13px 12px !important;
    border-bottom:1px solid #eee !important;
    font-size:14px !important;
  }
  .site-header .main-nav a:last-child{border-bottom:0 !important}
  .site-header .main-nav a.active::after{display:none !important}

  .page-hero-watermark{left:55%;top:48%;width:310px;max-width:48vw;opacity:.11}

  /* footer interno más estable en tablet */
  .footer-premium-main{gap:28px !important}
}

@media (max-width:700px){
  .site-header .shell{width:min(100% - 24px,1180px)}
  .site-header .brand img.brand-logo{width:60px !important;height:60px !important;min-width:60px !important;max-width:60px !important}
  .site-header .brand span{font-size:9px !important}
  .site-header .brand strong{font-size:15px !important}

  .about-page-hero,.team-hero,.community-hero{
    min-height:520px !important;
  }
  .about-page-hero-content,.team-hero-content,.community-hero-content{
    width:min(100% - 32px,1180px) !important;
    margin-inline:auto !important;
  }
  .about-page-hero-text h1,.team-hero-text h1,.community-hero-text h1{
    font-size:clamp(38px,10vw,48px) !important;
    line-height:1.02 !important;
  }
  .about-page-hero-text p,.team-hero-text p,.community-hero-text p{
    font-size:15px !important;
    line-height:1.65 !important;
    max-width:100% !important;
  }
  .page-hero-watermark{
    left:50%;top:52%;
    width:280px;
    max-width:72vw;
    opacity:.12;
  }

  .footer-premium-main{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .footer-premium-contact{align-items:flex-start !important;text-align:left !important}
  .footer-premium-bottom{gap:10px !important;flex-wrap:wrap !important}
}

@media (max-width:480px){
  .site-header .brand img.brand-logo{width:58px !important;height:58px !important;min-width:58px !important;max-width:58px !important}
  .site-header .brand span{font-size:8px !important}
  .site-header .brand strong{font-size:14px !important}
  .site-header .menu-toggle{font-size:29px !important}
  .site-header .main-nav{left:-12px !important;right:-12px !important;padding-inline:18px !important}

  .about-page-hero,.team-hero,.community-hero{min-height:500px !important}
  .page-hero-watermark{width:245px;max-width:76vw;top:53%;opacity:.12}
  .about-page-hero-text h1,.team-hero-text h1,.community-hero-text h1{font-size:clamp(34px,10.5vw,43px) !important}
  .team-hero-button,.community-hero-button{max-width:100% !important;white-space:normal !important;text-align:center !important}

  .footer-premium-socials{flex-wrap:wrap !important}
  .footer-premium-bottom{flex-direction:column !important;align-items:flex-start !important}
}

@media (max-width:360px){
  .site-header .brand img.brand-logo{width:54px !important;height:54px !important;min-width:54px !important;max-width:54px !important}
  .site-header .brand span{display:none !important}
  .page-hero-watermark{width:220px;max-width:78vw}
}

/* =====================================================
   CORRECCIÓN DE CONFLICTOS CON CSS DE PÁGINAS INTERNAS
   reference-design.css agrega un segundo nombre de marca con ::after
   y controla el menú móvil con .active/opacity. Este bloque garantiza
   que todas las páginas se comporten igual que index.html.
===================================================== */
.site-header .brand::after{
  content:none !important;
  display:none !important;
}

@media (max-width:900px){
  .site-header .main-nav{
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    visibility:visible !important;
  }

  .site-header .main-nav:not(.open){
    display:none !important;
  }

  .site-header .main-nav.open{
    display:flex !important;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    visibility:visible !important;
  }
}
/* =====================================================
   MOBILE - MOSTRAR NOMBRE JUNTO AL LOGO
   Igual que index.html
===================================================== */

@media (max-width: 850px) {

    .site-header .brand {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
    }

    .site-header .brand span {
        display: flex !important;
        flex-direction: column !important;

        font-size: 10px !important;
        line-height: 1.08 !important;

        color: #b7955c !important;
        font-weight: 500 !important;

        white-space: nowrap;
    }

    .site-header .brand strong {
        display: block !important;

        margin-top: 2px;

        font-size: 16px !important;
        line-height: 1 !important;

        color: #5f8f3e !important;
        font-weight: 800 !important;

        letter-spacing: 0 !important;
    }
}


/* Celulares pequeños */
@media (max-width: 430px) {

    .site-header .brand {
        gap: 7px !important;
    }

    .site-header .brand span {
        font-size: 9px !important;
    }

    .site-header .brand strong {
        font-size: 15px !important;
    }
}
/* =====================================================
   LOGO HEADER - UN POCO MÁS GRANDE
===================================================== */

/* Escritorio */
.site-header .brand img {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    object-fit: contain !important;
}

/* Tablet */
@media (max-width: 1024px) {

    .site-header .brand img {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
    }
}

/* =====================================================
   LOGO HEADER - MÓVIL MÁS GRANDE
===================================================== */

@media (max-width: 850px) {

    .site-header .brand img {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;

        object-fit: contain !important;
        flex-shrink: 0 !important;
    }
}

/* Celulares pequeños */
@media (max-width: 430px) {

    .site-header .brand img {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
    }
}
/* =====================================================
   LOGO GRANDE - TODAS LAS PÁGINAS INTERNAS
===================================================== */

.site-header .brand img {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;

    object-fit: contain !important;
    flex-shrink: 0 !important;
}


/* TABLET */
@media (max-width: 1024px) {

    .site-header .brand img {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
    }
}


/* MÓVIL */
@media (max-width: 850px) {

    .site-header .brand img {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
    }
}


/* MÓVIL PEQUEÑO */
@media (max-width: 430px) {

    .site-header .brand img {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
    }
}
/* =====================================================
   FORZAR MISMO TAMAÑO DE LOGO QUE INDEX
===================================================== */

html body .site-header .shell .brand img {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;

    object-fit: contain !important;
    flex: 0 0 96px !important;
}

/* TABLET */
@media (max-width: 1024px) {
    html body .site-header .shell .brand img {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        flex-basis: 88px !important;
    }
}

/* MÓVIL */
@media (max-width: 850px) {
    html body .site-header .shell .brand img {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        flex-basis: 88px !important;
    }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 430px) {
    html body .site-header .shell .brand img {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        flex-basis: 82px !important;
    }
}
/* =====================================================
   AJUSTE FINO HEADER PAGINAS INTERNAS
   Más aire entre logo y hero
===================================================== */

.site-header .header-inner,
.site-header .shell {
    min-height: 118px !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .site-header .header-inner,
    .site-header .shell {
        min-height: 108px !important;
        padding-top: 8px !important;
        padding-bottom: 10px !important;
    }
}

/* Móvil */
@media (max-width: 850px) {
    .site-header .header-inner,
    .site-header .shell {
        min-height: 112px !important;
        padding-top: 8px !important;
        padding-bottom: 12px !important;
    }
}

/* Móviles pequeños */
@media (max-width: 430px) {
    .site-header .header-inner,
    .site-header .shell {
        min-height: 108px !important;
        padding-top: 7px !important;
        padding-bottom: 10px !important;
    }
}