/* ==========================================================================
   Capa común del sitio · Scopus Consulting
   La cargan todas las páginas, español e inglés, después de /styles.css.
   No cambia el marcado ni la retícula: afina tipografía, estados, foco
   y la entrada de las secciones. Lo específico de la portada vive en home.css.
   ========================================================================== */

:root{--sc-site-ease:cubic-bezier(.23,1,.32,1)}

/* Tipografía: sin palabras huérfanas en los títulos y cifras alineadas en columnas de datos. */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.s15,.s19,.s20,.s21{font-variant-numeric:tabular-nums}

/* Superficies del navegador: también son parte del diseño. */
::selection{background:#162660;color:#DFF7FF}
html{accent-color:#162660}

/* El anillo de foco marina desaparece sobre los fondos azul marino del sitio.
   El halo claro lo hace visible en los dos fondos sin cambiar de color por sección. */
:focus-visible{outline:2px solid #162660;outline-offset:3px;box-shadow:0 0 0 5px rgba(223,247,255,.85)}

/* ── Una sola respuesta al puntero en todo el sitio ──────────────────────
   El CSS original cambia de color de golpe en sus veinte estados :hover y no
   da ninguna señal al pulsar. Aquí solo se añaden el tiempo y la curva —los
   colores no se tocan— y el hundido del pulsado, igual en las 34 páginas.
   El movimiento reducido ya anula todo esto con la regla global de styles.css. */
.s13,.s14,.s28,.s36,.s59,.s64,.s80,.s93,.s98,.s106,.s119,.s167,.s169,.s211,.s223,
.hdr-lang,.hdr-cta,.hdr-home,.ft-map-l,.e404-link,.gl-link{
  transition:color 150ms var(--sc-site-ease),background-color 150ms var(--sc-site-ease),
             border-color 150ms var(--sc-site-ease),transform 160ms var(--sc-site-ease)}
/* El menú ya cambiaba de color al pasar el puntero, pero entre dos azules casi
   iguales: no se percibía. Ahora asoma el mismo subrayado que lleva la página
   actual, a media fuerza: la interfaz enseña su propio idioma. */
.hdr-nav a{transition:color 150ms var(--sc-site-ease),border-color 150ms var(--sc-site-ease)}
@media (hover:hover) and (pointer:fine){
  .hdr-nav a:not([aria-current="page"]):hover{border-bottom-color:rgba(208,230,253,.5)}
}

/* Lo que se pulsa se hunde. Solo en lo que tiene tamaño de botón: escalar un
   bloque grande de texto lo emborrona sin aportar nada. */
.s13:active,.s14:active,.s36:active,.s64:active,.s80:active,.hdr-cta:active,.hdr-home:active{transform:scale(.97)}

/* ── Páginas de metodología (las 7, en español e inglés) ─────────────────
   Las celdas con relleno y borde se leían como tarjetas. Mismo contenido y misma
   retícula, pero sobre filetes: la ficha técnica pasa a leerse como una tabla de
   informe y las listas como un índice. */
.s135,.s143,.s149{background:none;border:0}
/* Sin el relleno de celda las cuatro columnas caben con menos ancho mínimo: si se deja el
   original se parten en dos filas y abren un hueco. */
.s135{grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr));gap:0 clamp(16px,2.2vw,34px)}
.s136{background:none;padding:16px 0 18px;border-top:1px solid #B8DAF2}
.s138{font-size:clamp(24px,2.4vw,32px)}
.s143{gap:0}
.s144{background:none;padding:18px 2px;border-bottom:1px solid #B8DAF2;align-items:flex-start}
.s143 > li:first-child{border-top:1px solid #B8DAF2}
.s149{gap:0}
.s150{background:none;padding:clamp(20px,2.4vw,28px) clamp(20px,2vw,28px) clamp(22px,2.6vw,32px) 0;border-top:1px solid rgba(208,230,253,.32)}

/* ── Resto del sitio: índices, panel médico y contacto ───────────────────
   El mismo patrón de celda rellena con borde, tratado igual que en las metodologías.
   En las rejillas de varias columnas se cambia el relleno por una calle entre columnas. */
.s65,.s105,.s175,.s181,.s226{background:none;border:0}
.s65,.s181,.s226{gap:0}
.s105,.s175{gap:0 clamp(20px,3vw,44px)}
.s65 > *,.s105 > *,.s175 > *,.s226 > *{background:none;border-top:1px solid #B8DAF2;padding-left:0;padding-right:0}
.s181 > *{background:none;border-top:1px solid rgba(208,230,253,.32);padding-left:0;padding-right:0}
/* En varias rejillas el relleno no está en la celda sino en el enlace de dentro. */
.s106,.s176,.s182,.s192,.s198,.s18{background:none;padding-left:0;padding-right:0}

/* ── Ir al inicio desde cualquier página ─────────────────────────────────
   La casita se lee antes que el logotipo y dice a dónde lleva. */
.hdr-home{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:40px;height:40px;margin-inline-start:-8px;color:#D0E6FD;
  transition:color 150ms var(--sc-site-ease),background-color 150ms var(--sc-site-ease),transform 120ms var(--sc-site-ease)}
.hdr-home svg{width:21px;height:21px;display:block}
.hdr-home:hover{color:#FFFFFF;background:rgba(208,230,253,.14)}
.hdr-home:active{transform:translateY(1px)}

/* ── Ilustraciones sobre fondo claro ─────────────────────────────────────
   El azul pálido del trazo (#D0E6FD) es el correcto sobre marina, pero sobre
   los fondos claros del panel médico y de servicios casi no se percibía.
   Se oscurece el trazo y se suben los dos escalones más tenues. */
.s157 .ilu,.s103 .ilu{color:#1B3E72}
.s157 .ilu [opacity=".1"],.s103 .ilu [opacity=".1"]{opacity:.2}
.s157 .ilu [opacity=".2"],.s103 .ilu [opacity=".2"],
.s157 .ilu [opacity=".22"],.s103 .ilu [opacity=".22"],
.s157 .ilu [opacity=".24"],.s103 .ilu [opacity=".24"],
.s157 .ilu [opacity=".26"],.s103 .ilu [opacity=".26"]{opacity:.42}

/* ── Federalización de los servicios estatales (panel médico, ES e inglés) ──
   Dos columnas sobre filete, con la cifra al frente: es una tabla de datos, no una tarjeta. */
.fed{margin-top:clamp(40px,5vw,72px);border-top:1px solid #162660;padding-top:clamp(24px,3vw,36px)}
.fed__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(22px,2.6vw,34px)}
.fed__col{border-top:1px solid #B8DAF2;padding-top:18px}
.fed__k{display:flex;align-items:baseline;gap:14px}
.fed__n{font-family:Marcellus,Georgia,serif;font-size:clamp(30px,3vw,40px);line-height:1;color:#162660;font-variant-numeric:tabular-nums}
.fed__t{font-size:16px;font-weight:600;line-height:1.35;color:#101C42}
.fed__who{font-family:'Noto Sans Mono',monospace;font-size:12.5px;line-height:1.7;color:#3F5C7A;margin:10px 0 14px}
.fed__list{font-size:15.5px;line-height:1.85;color:#28437A}
.fed__note{font-family:'Noto Sans Mono',monospace;font-size:12.5px;line-height:1.8;color:#3F5C7A;margin-top:clamp(22px,2.6vw,34px);max-width:74ch}

/* El logo de la metodología cierra su sección de método: pequeño, centrado y sin más. */
.meth-mark{display:flex;justify-content:center;margin:clamp(28px,3.6vw,48px) 0 0}
.meth-mark img{width:72px;height:72px;object-fit:contain;opacity:.9}

/* ══ Tratamiento por tipo de página ═══════════════════════════════════════
   Las cinco que solo llevaban la capa común. No cambia una palabra ni un dato:
   se reencuadra lo que ya existe con la gramática de la portada —filete, cifra
   en mono, serif en el titular—. La clase de página la pone src/pages.mjs y el
   marcado es idéntico en español e inglés, así que esto sirve para los dos. */

/* El menú va fijo: ningún ancla debe aterrizar debajo de él. */
[id]{scroll-margin-top:calc(var(--sc-hdr,72px) + 20px)}

/* ── Casos · cada caso, un expediente ───────────────────────────────────── */
.pg-casos .s192{padding:clamp(26px,3.2vw,46px) 0;
  grid-template-columns:minmax(0,.66fr) minmax(0,1fr);gap:clamp(20px,4vw,72px)}
.pg-casos .s193{font-size:clamp(25px,2.6vw,36px);line-height:1.1;margin:12px 0}
.pg-casos .s194{display:inline-block;border-top:1px solid #B8DAF2;padding-top:12px}
.pg-casos .s195{gap:clamp(20px,2.6vw,30px)}
/* El segundo bloque es el desenlace: filete marina en vez de gris. */
.pg-casos .s195 > div + div{border-top:1px solid #162660;padding-top:clamp(16px,2vw,22px)}
.pg-casos .s196{font-family:'Noto Sans Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.2em}
.pg-casos .s197,.pg-casos .s162{font-size:16.5px;line-height:1.72}

/* ── Insights · índice de notas, no tarjetas ────────────────────────────── */
.pg-insights .s198{padding:clamp(24px,3vw,40px) 0;
  grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:clamp(16px,3.4vw,60px);align-items:start}
.pg-insights .s199{grid-column:auto}
.pg-insights .s200{font-size:clamp(24px,2.5vw,34px);line-height:1.12;margin-bottom:14px}
.pg-insights .s201{max-width:68ch}
.pg-insights .s202{text-decoration:none;border-bottom:1px solid rgba(22,38,96,.35);padding-bottom:3px}
@media (hover:hover) and (pointer:fine){.pg-insights .s198:hover .s202{border-bottom-color:#162660}}

/* ── Servicios · las siete en un riel, como en la portada ───────────────── */
/* Una sola columna: siete piezas con descripción no son un catálogo de tarjetas,
   son un índice. Así la marca y el número tienen su calle y el texto respira. */
.pg-servicios .s105{grid-template-columns:1fr}
/* El rótulo baja al tamaño de meta del resto del sitio: a 17 px partía palabras. */
.pg-servicios .s107 .s15{font-size:14px;letter-spacing:.08em;line-height:1.5}
.pg-servicios .s106{display:grid;grid-template-columns:clamp(128px,14vw,196px) minmax(0,1fr);
  column-gap:clamp(18px,2.6vw,44px);row-gap:8px;align-items:start;height:auto;padding:clamp(22px,2.8vw,36px) 0}
.pg-servicios .s107{grid-row:span 3;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px}
.pg-servicios .s109{font-size:clamp(27px,2.8vw,40px)}
.pg-servicios .s45{max-width:70ch}
.pg-servicios .s110{margin-top:2px;border-top:0;padding-top:0}

/* ── Glosario · índice alfabético fijo y el término a la vista ──────────── */
.pg-glosario .gl-az{position:sticky;top:var(--sc-hdr,64px);z-index:20;display:flex;flex-wrap:wrap;gap:2px;
  background:#EFFBFF;border-top:1px solid #162660;border-bottom:1px solid #B8DAF2;padding:8px 0;margin-bottom:6px}
.pg-glosario .gl-az__l{display:flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;
  font-family:'Noto Sans Mono',monospace;font-size:13px;color:#162660;
  transition:background-color 150ms var(--sc-site-ease),color 150ms var(--sc-site-ease)}
@media (hover:hover) and (pointer:fine){.pg-glosario .gl-az__l:hover{background:#D0E6FD}}
.pg-glosario .gl-az__l:active{background:#162660;color:#DFF7FF}
/* La definición puede ser larga: el término se queda arriba mientras se lee. */
.pg-glosario .gl-dt{position:sticky;top:calc(var(--sc-hdr,64px) + 56px)}

/* ── Contacto · el formulario es el protagonista ────────────────────────── */
/* Con los campos aligerados, el recuadro del fieldset era la línea más fuerte de
   la página. Se cambia por la misma cabecera de filete que usan las secciones. */
.pg-contacto fieldset{border:0;padding:0;margin:0}
.pg-contacto .s213{display:block;width:100%;border-top:1px solid #162660;padding:16px 0 14px}
/* Aire entre el filete de un grupo y el campo que lo precede: dos líneas seguidas
   a 16 px se leían como una sola pieza. */
.pg-contacto fieldset + fieldset{margin-top:clamp(14px,1.8vw,24px)}
.pg-contacto .s215{gap:7px}
.pg-contacto .s216{font-family:'Noto Sans Mono',monospace;font-size:12px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:#3F5C7A}
/* Campos de filete, como el resto del sitio, en vez de cajas rellenas. */
.pg-contacto .s217{background:transparent;border:0;border-bottom:1px solid #B8DAF2;padding:12px 2px;
  transition:border-color 150ms var(--sc-site-ease)}
.pg-contacto .s219{background:transparent;border:1px solid #B8DAF2;padding:14px 16px;
  transition:border-color 150ms var(--sc-site-ease)}
@media (hover:hover) and (pointer:fine){
  .pg-contacto .s217:hover,.pg-contacto .s219:hover{border-color:#5E88B5}
}
.pg-contacto .s217:focus,.pg-contacto .s219:focus{border-color:#162660}

@media (max-width:860px){
  .pg-casos .s192,.pg-insights .s198{grid-template-columns:1fr}
  .pg-servicios .s106{grid-template-columns:1fr}
  .pg-servicios .s107{grid-row:auto;flex-direction:row;align-items:center;gap:16px}
  .pg-glosario .gl-dt{position:static}
}

/* Las ilustraciones de las páginas se dibujan solas al entrar, una vez, como la
   figura de la portada. Un barrido, no un movimiento perpetuo. */
.sc-rv .ilu{clip-path:inset(0 100% 0 0)}
.sc-rv .ilu.is-drawn{clip-path:inset(0 0 0 0);transition:clip-path 1100ms var(--sc-site-ease)}
@media (prefers-reduced-motion:reduce){
  .sc-rv .ilu{clip-path:none}
  .sc-rv .ilu.is-drawn{transition:none}
}

/* Entrada de secciones. La clase la pone site.js: sin JS no se esconde nada. */
.sc-rv main section > *{opacity:0;transform:translateY(10px)}
.sc-rv main section > *.is-rv{opacity:1;transform:none;
  transition:opacity 520ms var(--sc-site-ease),transform 520ms var(--sc-site-ease)}
@media (prefers-reduced-motion:reduce){
  .sc-rv main section > *{opacity:1;transform:none}
  .sc-rv main section > *.is-rv{transition:none}
}