/* ============================================================
   SIE PARK · v2-interiores.css · Integra las páginas interiores
   al sistema v2: MISMA paleta, MISMA tipografía, MISMO cascarón.
   Carga DESPUÉS de styles.css y v2.css.
   ============================================================ */

/* 1 · La paleta vieja se re-mapea a los tokens v2: todo componente
      heredado (chips, tarjetas, formularios) adopta los azules v2. */
:root{
  --navy:#0B1831; --navy-elev:#172B4F; --navy-depth:#081226; --navy-aux:#AEB9CB;
  --orange:#F1A03E; --orange-dark:#E08F2B;
  --paper:#FFFFFF; --white:#FFFFFF;
  --gray-s:#EEF2F4; --gray-l:#EEF2F4; --gray-b:#E3E8EE;
  --gray-d:#46536A; --gray-m:#8494AB;
}

/* 2 · Tipografía v2 en todo */
body{font-family:'DM Sans',Arial,sans-serif;background:#fff;padding-top:84px}
h1,h2,h3,h4,h5,.form-title,.eyebrow,.btn,.btn-primary,.btn-ghost{font-family:'Manrope',Arial,sans-serif}
h1,h2{letter-spacing:-.025em}
.eyebrow{letter-spacing:.18em;color:var(--orange)}
.btn,.btn-primary,.btn-ghost{border-radius:0;letter-spacing:.08em}

/* 3 · Cascarón: compensación del header fijo y héroes de página */
.pg-hero{padding-top:64px!important;background:#fff}
.v2-header-int{position:fixed;top:0;left:0;right:0}

/* 4 · Menú móvil heredado (nav.js) en piel v2 */
.nav-mobile{background:var(--navy-depth);border-bottom:1px solid rgba(255,255,255,.12);top:84px}
.nav-mobile a{color:#E7ECF4;border-color:rgba(255,255,255,.08)}
.nav-mobile a:hover{color:var(--orange)}
.nav-mobile .nm-group{color:#8DA0BC}
.v2-header-int .nav-burger span{background:#fff}
.v2-header-int .nav-burger{display:none;margin-left:0;background:none;border:0;cursor:pointer;padding:10px;min-width:44px;min-height:44px;flex-direction:column;gap:5px;justify-content:center;align-items:center}
@media (max-width:1190px){
  .v2-header-int .v2-nav,.v2-header-int .v2-cta-nav,.v2-header-int .v2-accesos{display:none}
  .v2-header-int .nav-burger{display:flex;margin-left:auto}
}

/* 5 · Piezas fotográficas que vivían en estilos-v16
   (prefijo .fotos-operacion: sin él ganaba la regla general de cuatro columnas de styles.css) */
.fotos-operacion--claro figcaption{color:var(--gray-d)}
.fotos-operacion .fo-grid--dev{grid-template-columns:2.16fr 1.08fr 1.5fr}
.fotos-operacion .fo-grid--dev picture{height:235px}
@media (max-width:860px){.fotos-operacion .fo-grid--dev{grid-template-columns:1fr 1fr}.fotos-operacion .fo-grid--dev picture{height:190px}.fotos-operacion .fo-grid--dev picture:first-child{grid-column:1/-1}}

/* 6 · Afinaciones de contraste tras el re-mapa */
.sec-sistema,.sec-diag{background:var(--navy)}
.muro__etiqueta{color:var(--gray-m)}

/* r13: los grids heredados desbordaban 28px a 360px (min-width:auto en hijos de grid; pasaba también en v16) */
.fact-grid > *, .pen-grid > *{min-width:0}

/* r15: reflow a 320px — títulos fluidos y filas a una columna (los estilos
   inline de página ganan en cascada, por eso el !important puntual) */
@media (max-width:359px){
  h1{font-size:clamp(26px,9vw,34px)}
  h2{font-size:clamp(22px,8vw,28px)}
  h1,h2{overflow-wrap:anywhere}
  .pen-2col{grid-template-columns:1fr !important}
  .frow{grid-template-columns:1fr !important}
}

/* r15.1: si el visitante rota el teléfono, el widget normal (300px) ya no ensancha la página */
.cf-turnstile{max-width:100%;overflow-x:auto}