/* IBERFIT WEB · V6.31 visual polish
   Objetivo: separar cabecera/contenido, calidez de superficie y menor densidad superior. */
:root{
  --v631-canvas:#faf7f1;
  --v631-canvas-soft:#f7f1e8;
  --v631-surface:#fffdf9;
  --v631-header:#eadbc6;
  --v631-header-line:rgba(31,61,43,.20);
}

/* Lienzo más cálido, sin perder la identidad crema IBERFIT. */
body{
  background:
    radial-gradient(circle at 8% 0%,rgba(184,151,58,.045),transparent 30rem),
    linear-gradient(180deg,var(--v631-canvas-soft) 0,var(--v631-canvas) 34rem,#fbf8f3 100%);
}
main{background:#fbf8f3}
.section-cream{
  background:linear-gradient(180deg,#efe3d3 0,#f6eee4 58%,#f8f3ec 100%)!important;
  border-block:1px solid rgba(184,151,58,.14)!important;
}

/* Cabecera inequívocamente separada del contenido. */
.site-header{
  background:rgba(234,219,198,.985)!important;
  border-bottom:1px solid var(--v631-header-line)!important;
  box-shadow:
    inset 0 -1px 0 rgba(184,151,58,.18),
    0 9px 26px rgba(20,44,31,.09)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
}
.site-header.scrolled{
  background:rgba(231,214,191,.99)!important;
  box-shadow:
    inset 0 -1px 0 rgba(184,151,58,.22),
    0 13px 34px rgba(20,44,31,.13)!important;
}
.site-header .nav{min-height:74px}
.site-header .brand{gap:.78rem}
.site-header .brand-mark{
  width:44px!important;height:44px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 2px 3px rgba(31,61,43,.13));
}
.site-header .brand-text{padding-left:0!important}
.site-header .brand-text span{font-size:1.42rem!important}
.site-header .brand-text small{font-size:.65rem!important;letter-spacing:.065em!important}
.site-header .navlinks{gap:1.05rem;font-size:.88rem}
.site-header .nav-actions{gap:.55rem}
.site-header .lang-switch{font-size:.76rem}
.site-header .nav-cta{min-height:44px;padding:.78rem 1.05rem;font-size:.86rem}

/* Primer bloque: más respiración y un límite visual claro frente a la cabecera. */
.hero{
  background:
    radial-gradient(circle at 82% 12%,rgba(184,151,58,.075),transparent 28rem),
    linear-gradient(180deg,#f7efe4 0,#fbf8f3 100%);
  border-bottom:1px solid rgba(31,61,43,.10);
}
.hero-grid.hero-grid-no-media{max-width:1080px}
.hero-grid-no-media .hero-text{max-width:900px}
.hero-grid-no-media h1{
  max-width:13ch!important;
  font-size:clamp(3.25rem,6.6vw,6.35rem)!important;
  line-height:.96!important;
}
.hero-grid-no-media .lead{max-width:44rem!important}
.hero-grid-no-media .hero-support{max-width:41rem!important}
.hero-grid-no-media .hero-actions{margin-top:2.15rem!important}
.hero-grid-no-media .hero-meta{max-width:44rem!important}

/* Superficies marfil en lugar de blanco puro. */
.card:not(.card-dark),
.explore-card,
.intent-route,
.price-card:not(.featured),
.report-preview,
.report-bio-grid>div,
.iri-showcase-link,
.orientador-card,
.contact-option,
.premium-process .copy{
  background:var(--v631-surface)!important;
}
.btn-secondary{background:rgba(255,250,244,.90)!important}
.btn-secondary:hover{background:#fffdf9!important}

/* Menos ruido en cabeceras medianas: conservar todas las rutas, pero agruparlas en menú. */
@media (max-width:1380px){
  .site-header .brand-text small{display:none!important}
  .site-header .brand-text{padding-left:.62rem!important}
}
@media (min-width:861px) and (max-width:1380px){
  body.nav-panel-open{overflow:hidden;overscroll-behavior:none}
  .site-header{isolation:isolate}
  .site-header .nav{position:relative;flex-wrap:nowrap}
  .site-header .nav-cta{display:inline-flex!important}
  .site-header .menu-toggle{
    display:inline-flex!important;
    min-height:44px;
    padding:.62rem .9rem;
    border-radius:999px;
    background:rgba(255,250,244,.72);
    border-color:rgba(184,151,58,.36);
  }
  .site-header .navlinks{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    width:min(360px,calc(100vw - 48px));
    flex-direction:column;
    align-items:stretch;
    gap:.15rem;
    padding:.8rem;
    background:rgba(248,241,231,.985);
    border:1px solid rgba(184,151,58,.25);
    border-radius:22px;
    box-shadow:0 24px 60px rgba(12,35,23,.18);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    max-height:calc(100dvh - var(--nav-panel-top,76px) - 1rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:101;
  }
  .site-header .navlinks.open{display:flex}
  .nav-panel-backdrop{
    position:fixed;
    inset:0;
    z-index:90;
    border:0;
    padding:0;
    background:rgba(4,22,16,.28);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease,visibility .22s ease;
  }
  .nav-panel-backdrop.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .site-header .navlinks>a{
    width:100%;
    padding:.72rem .82rem;
    border-radius:13px;
  }
  .site-header .navlinks>a:hover,
  .site-header .navlinks>a:focus-visible,
  .site-header .navlinks>a.active{background:rgba(31,61,43,.07)}
  .site-header .navlinks>a:after{display:none}
  .site-header .nav-mobile-languages{
    display:flex!important;
    align-items:center;
    gap:.45rem;
    margin-top:.35rem;
    padding:.7rem .55rem .15rem;
    border-top:1px solid rgba(31,61,43,.1);
  }
  .site-header .nav-mobile-languages a{
    min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:.45rem .75rem;
    border:1px solid rgba(31,61,43,.1);
    border-radius:999px;
    font-size:.78rem;font-weight:800;
  }
  .site-header .lang-switch{display:none!important}
}
@media (max-width:1180px){
  .site-header .nav-cta{padding:.72rem .95rem;font-size:.82rem}
}
@media (max-width:720px){
  .site-header .nav{min-height:64px}
  .site-header .brand-mark{width:42px!important;height:42px!important;padding:0!important;border-radius:0!important}
  .hero{padding-block:3.35rem 3rem!important}
  .hero-grid-no-media h1{font-size:clamp(2.65rem,13vw,3.9rem)!important}
}


/* Progressive enhancement real: sin JS, el contenido y la navegación nunca quedan ocultos. */
html:not(.js-v631) .reveal{
  opacity:1!important;
  transform:none!important;
  visibility:visible!important;
}
html:not(.js-v631) .menu-toggle{display:none!important}
@media (max-width:1380px){
  html:not(.js-v631) .site-header .nav{flex-wrap:wrap!important}
  html:not(.js-v631) .site-header .navlinks{
    display:flex!important;
    position:static!important;
    width:100%!important;
    max-width:none!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:.35rem .85rem!important;
    margin:.25rem 0 .65rem!important;
    padding:.55rem 0 0!important;
    background:transparent!important;
    border:0!important;
    border-top:1px solid rgba(31,61,43,.10)!important;
    border-radius:0!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  html:not(.js-v631) .site-header .navlinks>a{
    width:auto!important;
    padding:.5rem .25rem!important;
  }
  html:not(.js-v631) .site-header .nav-mobile-languages{display:none!important}
  html:not(.js-v631) .site-header .lang-switch{display:flex!important}
}


/* V6.31 mobile refinement: readable hero + premium logo support. */
.site-header .brand-mark{
  width:48px!important;
  height:48px!important;
  padding:5px!important;
  background:rgba(255,252,246,.94)!important;
  border:1px solid rgba(184,151,58,.24)!important;
  border-radius:15px!important;
  box-shadow:0 6px 18px rgba(31,61,43,.09)!important;
  object-fit:contain!important;
}
@media (max-width:720px){
  .site-header .nav{min-height:66px}
  .site-header .brand{gap:.68rem}
  .site-header .brand-mark{
    width:46px!important;
    height:46px!important;
    padding:5px!important;
    border-radius:14px!important;
    background:rgba(255,252,246,.96)!important;
    border:1px solid rgba(184,151,58,.26)!important;
    box-shadow:0 5px 14px rgba(31,61,43,.09)!important;
  }
  .site-header .brand-text{padding-left:0!important}
  .site-header .brand-text span{font-size:1.30rem!important}
  .hero-grid-no-media .hero-text{max-width:100%!important;padding-left:.82rem!important}
  .hero-grid-no-media h1{
    max-width:100%!important;
    font-size:clamp(2.2rem,10.4vw,3.05rem)!important;
    line-height:.98!important;
    letter-spacing:-.04em!important;
  }
  .hero-grid-no-media .lead,
  .hero-grid-no-media .hero-support{max-width:100%!important}
  h1,h2,h3,h4{max-width:100%}
}
@media (max-width:420px){
  .hero-grid-no-media h1{font-size:clamp(2.08rem,10vw,2.62rem)!important}
  .site-header .brand-text span{font-size:1.23rem!important}
}


/* V6.31 mobile-safe typography + isolated brand mark. */
.site-header .brand{gap:.70rem}
.site-header .brand-text{padding-left:0!important}
.site-header .brand-mark{
  border-radius:50%!important;
  background:rgba(255,252,246,.96)!important;
  border:1px solid rgba(184,151,58,.30)!important;
  box-shadow:
    0 6px 18px rgba(31,61,43,.09),
    inset 0 0 0 1px rgba(255,255,255,.48)!important;
}
@media (max-width:720px){
  .hero-grid,.hero-text,.page-hero .container{min-width:0;width:100%}
  .hero h1,.page-hero h1,.hero-grid-no-media h1,h2,h3,h4{
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .hero h1,.page-hero h1,.hero-grid-no-media h1{
    max-width:100%!important;
    font-size:clamp(2.16rem,10.35vw,3.05rem)!important;
    line-height:1!important;
    letter-spacing:-.038em!important;
    text-wrap:balance;
  }
  .hero-grid-no-media .hero-text{
    max-width:100%!important;
    padding-left:.64rem!important;
  }
  .eyebrow,.kicker{
    max-width:100%;
    white-space:normal;
    line-height:1.35;
  }
  .site-header .brand-mark{
    width:46px!important;
    height:46px!important;
    padding:5px!important;
    border-radius:50%!important;
  }
}
@media (max-width:360px){
  .site-header .brand{gap:.56rem}
  .site-header .brand-mark{width:44px!important;height:44px!important;padding:4px!important}
  .site-header .brand-text span{font-size:1.17rem!important}
  .hero h1,.page-hero h1,.hero-grid-no-media h1{font-size:clamp(2.02rem,10.1vw,2.42rem)!important}
  .hero-grid-no-media .hero-text{padding-left:.52rem!important}
}