/* Tema «banca» v3 · sistema de un neobanco (referencia CSS Design Awards) llevado a la marca del cliente: fotos a sangre
   o con un solo corte diagonal, tarjetas redondeadas, vidrio esmerilado, píldoras con ↘ y el sol del logo como gesto
   (rayos que se dibujan). Movimiento nativo: View Transitions entre páginas y animaciones ligadas al scroll.
   No reproduce código, textos, imágenes ni logo de la referencia. Colores del logo del cliente. */
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/LibreFranklin-var-latin.woff2) format('woff2'); }

:root {
  --azul: var(--brand, #009cdf);          /* marca: triángulos, rayas, viñetas, títulos grandes */
  --azul-600: var(--brand-text, #0072a8);  /* enlaces y texto azul pequeño (≥ 4,5:1 sobre blanco) */
  --azul-800: var(--brand-deep, #005a86);  /* bandas oscuras */
  --noche: #0b2233;
  --cielo: #e3f3fb;
  --crema: #fbf6ec;
  --dorado: var(--brand-2, #e4a92d);       /* píldora principal (texto noche), acentos */
  --dorado-texto: #8a5a00;
  --pizarra: #4a5b68;
  --linea: rgba(11, 34, 51, .18);
  --linea-osc: rgba(255, 255, 255, .35);
  --f: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --g: 20px;                               /* margen lateral */
  --sec: 64px;                             /* relleno vertical de sección */
  --h-header: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --d-ui: 300ms;                           /* interacción (Emil: ≤ 300 ms) */
  --motion-language: "expressive/in-out/normal"; /* direction.json → motion_language (lo comprueba INV-21) */
  --t-display: clamp(30px, 2.2vw + 22px, 56px);
  --t-h2: clamp(24px, 1vw + 20px, 40px);
  --t-h3: clamp(19px, .5vw + 17px, 24px);
  --t-lead: clamp(17px, .3vw + 16px, 19px);
}
@media (min-width: 768px) { :root { --g: 30px; --sec: 80px; } }
@media (min-width: 1024px) { :root { --g: 40px; --sec: 100px; --h-header: 119px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Los destinos de ancla quedan bajo la cabecera con scroll-margin (no scroll-padding en html: hacía que el navegador
   desplazara la página al enfocar la propia cabecera fija, p. ej. al abrir el menú). */
main [id] { scroll-margin-top: calc(var(--h-header) + 16px); }
body { margin: 0; font: 400 16px/1.625 var(--f); color: var(--noche); background: #fff; overflow-x: clip; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-600); text-underline-offset: 3px; }
a:hover { color: var(--noche); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }
ul { margin: 0; padding: 0; list-style: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--noche); color: #fff; padding: 12px 20px; border-radius: 50px; }
.skip:focus { left: 8px; }
::selection { background: var(--dorado); color: var(--noche); }

.shell { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--g); }
.narrow { max-width: 760px; }
.section { padding-block: var(--sec); position: relative; }
.bg-cielo { background: var(--cielo); }
.bg-crema { background: var(--crema); }
.bg-noche { background: var(--noche); color: #fff; }
.bg-azul { background: var(--azul-800); color: #fff; }
.bg-grad { background: linear-gradient(120deg, var(--azul-600) 0%, var(--azul-800) 70%); color: #fff; }
:is(.bg-noche, .bg-azul, .bg-grad) a:not(.btn) { color: #fff; }
/* Tipografía */
.display { font-size: var(--t-display); line-height: 1.2; max-width: 16ch; }
.h2 { font-size: var(--t-h2); line-height: 1.3; }
.h3 { font-size: var(--t-h3); line-height: 1.4; }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--pizarra); max-width: 62ch; }
:is(.bg-noche, .bg-azul, .bg-grad) .lead { color: rgba(255, 255, 255, .86); }
.body-copy { max-width: 68ch; }
.body-copy > * + * { margin-top: 1em; }
.body-copy h2 { font-size: 26px; line-height: 1.3; margin-top: 1.6em; }
.body-copy h3 { font-size: 21px; line-height: 1.35; margin-top: 1.4em; }
.body-copy ul { padding-left: 0; }
.rule { display: block; width: 72px; height: 10px; background: var(--dorado); margin-bottom: 24px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--noche); }
.eyebrow::before { content: ''; width: 10px; height: 12px; background: var(--azul); clip-path: polygon(0 0, 100% 50%, 0 100%); flex: none; }
:is(.bg-noche, .bg-azul, .bg-grad) .eyebrow { color: #fff; }
:is(.bg-noche, .bg-azul, .bg-grad) .eyebrow::before { background: var(--dorado); }
@media (min-width: 1024px) { .eyebrow { font-size: 15px; line-height: 24px; } }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 20px; } .mt-l { margin-top: 32px; } .mt-xl { margin-top: 56px; }

/* Píldoras con flecha ↘ (la firma de botones de la referencia) */
.btn { position: relative; display: inline-flex; align-items: center; min-height: 52px; padding: 12px 58px 12px 24px; border-radius: 50px; border: 1.5px solid transparent; font: 600 16px/20px var(--f); text-decoration: none; cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.btn::after { content: ''; position: absolute; right: 22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .3s ease; }
.btn:hover::after { transform: translate(3px, 3px); }
.btn.no-arrow { padding-right: 24px; }
.btn.no-arrow::after { content: none; }
:root { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 5v8H5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.btn-gold { background: var(--dorado); color: var(--noche); }
.btn-gold:hover { background: color-mix(in srgb, var(--dorado) 88%, #000); color: var(--noche); }
.btn-blue { background: var(--azul-600); color: #fff; }
.btn-blue:hover { background: var(--azul-800); color: #fff; }
.btn-dark { background: var(--noche); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-line { background: transparent; color: var(--noche); border-color: currentColor; }
.btn-line:hover { background: var(--noche); color: #fff; border-color: var(--noche); }
:is(.bg-noche, .bg-azul, .bg-grad) .btn-line { color: #fff; }
:is(.bg-noche, .bg-azul, .bg-grad) .btn-line:hover { background: #fff; color: var(--noche); border-color: #fff; }
.btn-sm { min-height: 44px; padding-block: 10px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 559px) { .actions > .btn { flex: 1 1 100%; } }
.go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--azul-600); text-decoration: none; }
.go::before { content: ''; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M8 6l5 5-5 5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/100% no-repeat; }
.go:hover { color: var(--noche); }

/* Cabecera: logo + (acciones en píldora / navegación) en dos filas desde 1024 */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; transition: box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow: 0 2px 5px rgba(11, 34, 51, .12); }
.header-sentinel { position: absolute; top: 16px; height: 1px; width: 1px; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--h-header); }
.site-header .brand { display: inline-flex; align-items: center; flex: none; }
.site-header .brand img { width: auto; height: 40px; }
@media (min-width: 1024px) { .site-header .brand img { height: 52px; } }
.site-header .rows { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.site-header .pills { display: flex; align-items: center; gap: 12px; }
.site-header .pills .btn { min-height: 45px; padding: 10px 50px 10px 20px; font-size: 15px; }
.site-header .pills .btn::after { right: 18px; }
.site-header nav.main { display: none; gap: 26px; }
.site-header nav.main a { color: var(--noche); font-size: 15px; font-weight: 500; line-height: 18px; text-decoration: none; padding-block: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.site-header nav.main a:hover, .site-header nav.main a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--azul); text-underline-offset: 6px; }
.site-header .toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--noche); cursor: pointer; }
.site-header .toggle svg { width: 28px; height: 28px; }
.site-header .pills .d-only { display: none; }
@media (min-width: 1024px) {
  .site-header nav.main { display: flex; }
  .site-header .toggle, .mobile-nav { display: none !important; }
  .site-header .pills .d-only { display: inline-flex; }
}
@media (max-width: 1023px) { .site-header .rows { flex-direction: row; align-items: center; } .site-header .pills .btn { padding-right: 20px; } .site-header .pills .btn::after { content: none; } }
@media (max-width: 359px) { .site-header .pills .btn { padding-inline: 14px; font-size: 14px; } }
.mobile-nav { position: fixed; inset: var(--h-header) 0 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; background: var(--noche); color: #fff; padding: 12px var(--g) 120px; opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; }
.mobile-nav[data-state='open'] { opacity: 1; transform: none; }
.mobile-nav[hidden] { display: none; }
.mobile-nav .grp { border-bottom: 1px solid var(--linea-osc); }
.mobile-nav .grp > p { padding-top: 20px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dorado); }
.mobile-nav a { display: flex; align-items: center; min-height: 48px; color: #fff; text-decoration: none; font-size: 18px; line-height: 28px; }
.mobile-nav .actions { margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { .mobile-nav { transition: none; transform: none; } }

/* Lista con ▶ */
.ticks { display: grid; gap: 10px; margin-top: 18px; }
.ticks li { position: relative; padding-left: 22px; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 10px; background: var(--azul); clip-path: polygon(0 0, 100% 50%, 0 100%); }
:is(.bg-noche, .bg-azul, .bg-grad) .ticks li::before { background: var(--dorado); }

/* Acordeón */
.acc { margin-top: 32px; border-top: 1px solid var(--linea); }
.acc details { border-bottom: 1px solid var(--linea); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding-block: 14px; cursor: pointer; list-style: none; font-weight: 600; font-size: 18px; line-height: 1.4; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--azul), var(--azul)) center / 100% 2px no-repeat, linear-gradient(var(--azul), var(--azul)) center / 2px 100% no-repeat; transition: transform .3s ease; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc .ans { padding: 0 0 22px; max-width: 72ch; }
.acc .ans > * + * { margin-top: .8em; }
.acc-group + .acc-group { margin-top: 56px; }

/* Documentos */
.docs { margin-top: 28px; border-top: 1px solid var(--linea); }
.docs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 16px; border-bottom: 1px solid var(--linea); }
.docs .t { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 17px; line-height: 1.4; }
.docs .t::before { content: ''; flex: none; width: 26px; height: 32px; background: var(--azul); clip-path: polygon(0 0, 70% 0, 100% 25%, 100% 100%, 0 100%); }
.docs .m { font-size: 13px; color: var(--pizarra); font-weight: 400; display: block; }

/* Noticias: artículo */
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: rgba(255, 255, 255, .8); margin-top: 16px; }
.stale { margin: 0 0 24px; padding: 14px 18px; background: var(--crema); border-left: 4px solid var(--dorado); font-size: 15px; }
.article-figure { margin: 0 0 32px; }
.article-figure img { width: 100%; height: auto; }

/* Formulario (lib/forms.mjs) con la piel del tema */
.form-panel { background: #fff; padding: 28px; box-shadow: 5px 25px 50px rgba(11, 34, 51, .12); color: var(--noche); }
.form { display: grid; gap: 18px; }
.form .fields { display: grid; gap: 18px; }
@media (min-width: 640px) { .form .fields { grid-template-columns: 1fr 1fr; } .form .field.wide, .form .field:has(textarea) { grid-column: 1 / -1; } }
.field .opt { font-weight: 400; color: var(--pizarra); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { font: 16px/1.4 var(--f); min-height: 52px; padding: 12px 20px; border-radius: 30px; border: 1px solid rgba(11, 34, 51, .25); background: #fff; color: var(--noche); }
.field textarea { border-radius: 20px; min-height: 120px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 156, 223, .35); }
.field .hint { font-size: 13px; color: var(--pizarra); }
.field .err { font-size: 13px; color: #b3261e; min-height: 0; }
.field.check { flex-direction: row; align-items: flex-start; gap: 12px; }
.field.check input { width: 24px; height: 24px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--azul-600); }
.field.check label { font-weight: 400; font-size: 14px; padding-block: 8px; margin-block: -8px; }
.form .hp { position: absolute; left: -9999px; }
.form .btn[type='submit'] { justify-self: start; border: 0; }
.form-status { font-size: 14px; }
.btn-solid { background: var(--dorado); color: var(--noche); border: 0; }
.btn-solid:hover { background: color-mix(in srgb, var(--dorado) 88%, #000); color: var(--noche); }

/* Pie */
.pre-footer { background: linear-gradient(120deg, var(--azul) 0%, var(--azul-800) 80%); color: #fff; }
.site-footer { background: var(--noche); color: #fff; padding-block: 64px 32px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .top { display: grid; gap: 40px; }
@media (min-width: 1024px) { .site-footer .top { grid-template-columns: 1.1fr 3fr; } }
.site-footer .mark img { width: 120px; height: auto; }
.site-footer .cols { display: grid; gap: 32px 24px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .site-footer .cols { grid-template-columns: repeat(4, 1fr); } }
.site-footer h2 { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dorado); }
.site-footer .cols ul { margin-top: 12px; }
.site-footer .cols a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.4; }
.site-footer .reg { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linea-osc); font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .75); display: grid; gap: 8px; }
.site-footer .legal { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.site-footer .legal a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .social { display: flex; gap: 10px; margin-top: 20px; }
.site-footer .social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea-osc); border-radius: 50px; font-size: 14px; }

/* Barra de acción móvil (kit/site.js: data-state shown|hidden) */
.m-bar { display: none; }
@media (max-width: 1023px) {
  .site-footer { padding-bottom: calc(32px + 76px + env(safe-area-inset-bottom)); }
  .m-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom)); background: var(--cielo); box-shadow: 0 -2px 10px rgba(11, 34, 51, .1); transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
  .m-bar[data-state='shown'] { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
  .m-bar .btn { width: 100%; justify-content: center; padding-inline: 12px; min-height: 48px; font-size: 15px; }
  .m-bar .btn::after { content: none; }
}

/* Movimiento: aparición única, 500 ms, escalonada 80 ms; nada con reduced-motion */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .3s var(--ease), transform .3s var(--ease); transition-delay: var(--delay, 0ms); }
.reveal[data-shown='true'] { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .reveal { opacity: 1; transform: none; }
}
/* La foto de cabecera no anima: es el LCP (una entrada desde opacidad 0 lo retrasa). */

/* Datos clave grandes */
.facts { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 28px; }
.facts > div { border-left: 3px solid var(--dorado); padding-left: 14px; }
.facts strong { display: block; font-size: clamp(20px, 1vw + 16px, 26px); line-height: 1.2; font-weight: 600; }
.facts span { display: block; margin-top: 4px; font-size: 14px; color: var(--pizarra); }
:is(.bg-noche, .bg-azul, .bg-grad) .facts span { color: rgba(255, 255, 255, .8); }

/* «Leer más» / detalle desplegable */
.more { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.more > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; list-style: none; font-weight: 600; color: var(--azul-600); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: ''; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .3s ease; }
.more[open] > summary::after { transform: rotate(45deg); }
.more-body { padding-bottom: 20px; }
.more-body > * + * { margin-top: .8em; }
:is(.bg-noche, .bg-azul, .bg-grad) .more { border-color: var(--linea-osc); }
:is(.bg-noche, .bg-azul, .bg-grad) .more > summary { color: #fff; }
.more + .more { border-top: 0; }

/* Accesos con ▶ (quiénes somos) */
.links { display: grid; gap: 2px; }
.links a { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; color: var(--noche); text-decoration: none; border-bottom: 1px solid var(--linea); }
.links a::before { content: ''; width: 10px; height: 12px; background: var(--azul); clip-path: polygon(0 0, 100% 50%, 0 100%); flex: none; transition: transform .3s ease; }
.links a:hover::before { transform: translateX(4px); }

/* Chips (fondeadores) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 10px 18px; border: 1px solid var(--linea); border-radius: 50px; background: #fff; font-weight: 600; font-size: 15px; }

/* Texto legal */
.legal-sec { padding-block: 32px; font-size: 14px; line-height: 22px; color: var(--pizarra); }
.legal-sec p + p { margin-top: .6em; }

/* ===================== v3 · movimiento nativo ===================== */
/* Transiciones entre páginas (View Transitions entre documentos): la cabecera queda quieta, el contenido funde y la
   foto de un producto viaja desde su panel en la portada hasta la cabecera de su ficha. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .28s var(--ease) both vt-out; }
::view-transition-new(root) { animation: .42s var(--ease) both vt-in; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: var(--ease-io); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* Barra de lectura: avanza con el scroll de la página (scroll-timeline, sin JS). */
.progress { display: none; }
.kick { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-600); }
:is(.bg-noche, .impact, .hx) .kick { color: var(--dorado); }
.kick + .h2 { margin-top: 10px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; }
.cap { position: absolute; right: 12px; bottom: 10px; z-index: 3; font-size: 11px; letter-spacing: .02em; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none; }

/* ---------- Hero: titular palabra a palabra, foto que se abre en diagonal, rayos del sol que se dibujan ---------- */
.hx { position: relative; display: grid; background: var(--noche); color: #fff; overflow: clip; isolation: isolate; }
.hx-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 12% 20%, rgba(0, 156, 223, .35), transparent 70%), radial-gradient(40% 50% at 45% 110%, rgba(228, 169, 45, .18), transparent 70%); }
.hx-copy { padding: 44px var(--g) 40px; position: relative; z-index: 2; }
.hx-kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado); }
.hx-title { margin-top: 16px; font-size: clamp(44px, 6vw + 12px, 96px); line-height: .98; font-weight: 700; letter-spacing: -.035em; max-width: 9ch; }
.hx-title .w { display: inline-block; overflow: clip; overflow-clip-margin: .12em; padding-bottom: .06em; vertical-align: bottom; }
.hx-title .w > span { display: inline-block; }
.hx-title .gold { color: var(--dorado); }
.hx-lead { margin-top: 22px; max-width: 44ch; font-size: var(--t-lead); line-height: 1.6; color: rgba(255, 255, 255, .84); }
.hx-intent { margin-top: 30px; }
.hx-intent > p { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.hx-intent ul { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.hx-intent a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 18px; border-radius: 50px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; backdrop-filter: blur(6px); transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease); }
.hx-intent a::after { content: ''; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transform: rotate(-45deg); transition: transform .25s var(--ease); }
.hx-intent a:hover { background: var(--dorado); border-color: var(--dorado); color: var(--noche); transform: translateY(-2px); }
.hx-intent a:hover::after { transform: rotate(-45deg) translate(2px, 2px); }
.hx-media { position: relative; margin: 0; min-height: 360px; }
.hx-photo { position: absolute; inset: 0; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
.hx-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.rays { position: absolute; left: -40px; top: -30px; width: 170px; height: 170px; z-index: 2; pointer-events: none; }
.rays line { stroke: var(--dorado); stroke-width: 7; stroke-linecap: round; }
.hx-chip { position: absolute; left: var(--g); bottom: 22px; z-index: 3; display: grid; gap: 2px; padding: 14px 20px 14px 18px; border-radius: 18px; background: rgba(11, 34, 51, .72); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(14px) saturate(1.3); color: #fff; max-width: 260px; }
.hx-chip strong { font-size: 26px; line-height: 1.1; font-weight: 700; color: var(--dorado); font-variant-numeric: tabular-nums; }
.hx-chip span { font-size: 14px; color: rgba(255, 255, 255, .85); }
@media (min-width: 1024px) {
  .hx { grid-template-columns: 1.05fr 1fr; min-height: min(calc(100dvh - var(--h-header)), 820px); }
  .hx-copy { align-self: center; padding: 72px 0 72px max(var(--g), calc((100vw - 1440px) / 2 + var(--g))); }
  .hx-media { min-height: 0; }
  .hx-photo { clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
  .rays { left: -30px; top: auto; bottom: 40px; width: 230px; height: 230px; }
  .hx-chip { left: 18%; bottom: 48px; }
}
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) { .hx-media { min-height: 280px; } }

/* ---------- Manifiesto: cada palabra se enciende al pasar por la pantalla ---------- */
.manifest { padding-block: calc(var(--sec) + 20px); }
.mf-grid { display: grid; gap: 48px; align-items: start; }
.mf-text { font-size: clamp(26px, 1.8vw + 16px, 50px); line-height: 1.22; font-weight: 600; letter-spacing: -.02em; max-width: 24ch; }
.mf-text .w { display: inline; }
.mf-ph { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) { .mf-grid { grid-template-columns: 1.35fr 1fr; gap: 80px; } .mf-side { position: sticky; top: calc(var(--h-header) + 32px); } }

/* ---------- Productos: paneles que se expanden (escritorio), tarjetas altas (móvil) ---------- */
.prods { background: #f4f8fb; }
.hint-desk { display: none; font-size: 14px; color: var(--pizarra); }
.panels { display: grid; gap: 14px; margin-top: 40px; }
.pnl { position: relative; display: flex; align-items: flex-end; min-height: 440px; overflow: clip; border-radius: 22px; background: var(--noche); color: #fff; text-decoration: none; isolation: isolate; }
.pnl-ph { position: absolute; inset: 0; z-index: -1; }
.pnl-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.pnl::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 34, 51, 0) 30%, rgba(11, 34, 51, .92) 100%); }
.pnl-body { padding: 26px; width: 100%; }
.pnl-tag { display: inline-block; padding: 4px 12px; border-radius: 50px; background: var(--dorado); color: var(--noche); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pnl h3 { margin-top: 12px; font-size: clamp(24px, 1vw + 18px, 34px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.pnl-more p { margin-top: 10px; color: rgba(255, 255, 255, .88); max-width: 40ch; }
.pnl-more .pnl-amt { font-weight: 700; color: var(--dorado); }
.pnl-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 44px; font-weight: 600; }
.pnl-go::after { content: ''; width: 36px; height: 36px; border-radius: 50%; background: #fff var(--arrow-r) center / 14px no-repeat; transition: transform .3s var(--ease); }
:root { --arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5' fill='none' stroke='%230b2233' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pnl:hover .pnl-ph img, .pnl:focus-visible .pnl-ph img { transform: scale(1.06); }
.pnl:hover .pnl-go::after { transform: translateX(4px); }
@media (min-width: 700px) and (max-width: 1023px) { .panels { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) and (hover: hover) {
  .hint-desk { display: block; }
  .panels { display: flex; height: min(620px, 72vh); min-height: 520px; gap: 12px; }
  .pnl { flex: 1 1 0; min-width: 0; min-height: 0; transition: flex-grow .3s var(--ease-io); }
  .panels:not(:hover, :focus-within) .pnl:first-child, .pnl:hover, .pnl:focus-visible { flex-grow: 2.6; }
  .pnl-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s var(--ease), opacity .3s ease; }
  .pnl-more > * { min-height: 0; }
  .panels:not(:hover, :focus-within) .pnl:first-child .pnl-more, .pnl:hover .pnl-more, .pnl:focus-visible .pnl-more { grid-template-rows: 1fr; opacity: 1; transition-delay: .1s; }
  .pnl-more p { min-width: 32ch; }
}
@media (min-width: 1024px) and (hover: none) { .panels { grid-template-columns: repeat(4, 1fr); } }
.pnl-more { overflow: clip; }

/* ---------- Sumaq Warmi: relato con la foto fija y una línea que se llena paso a paso ---------- */
.story { padding-block: var(--sec); background: var(--crema); }
.st-grid { display: grid; gap: 40px; }
.st-ph { position: relative; aspect-ratio: 4 / 5; overflow: clip; border-radius: 0 120px 0 0; }
.st-ph img { width: 100%; height: 100%; object-fit: cover; }
.st-label { margin-top: 36px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dorado-texto); }
.st-steps { list-style: none; margin: 18px 0 0; padding: 0 0 0 36px; position: relative; counter-reset: st; view-timeline: --pasos block; }
.st-steps::before, .st-steps::after { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: rgba(11, 34, 51, .12); }
.st-steps::after { background: var(--dorado); transform-origin: 50% 0; transform: scaleY(1); }
.st-steps li { position: relative; padding-block: 14px; counter-increment: st; }
.st-steps li::before { content: counter(st); position: absolute; left: -36px; top: 12px; width: 25px; height: 25px; border-radius: 50%; background: var(--noche); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; z-index: 1; }
.st-steps p { font-size: 17px; line-height: 1.55; }
@media (min-width: 1024px) { .st-grid { grid-template-columns: 1fr 1.1fr; gap: 88px; align-items: start; } .st-media { position: sticky; top: calc(var(--h-header) + 32px); } }

/* ---------- Cifras ---------- */
.impact { background: var(--noche); color: #fff; padding-block: var(--sec); position: relative; overflow: clip; }
.impact::before { content: ''; position: absolute; right: -10%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0, 156, 223, .28), transparent 65%); pointer-events: none; }
.nums { display: grid; gap: 32px; margin-top: 48px; }
@media (min-width: 700px) { .nums { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .nums { grid-template-columns: repeat(4, 1fr); } }
.num { border-top: 1px solid var(--linea-osc); padding-top: 20px; }
.num strong { display: block; font-size: clamp(38px, 2.6vw + 22px, 64px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: var(--dorado); font-variant-numeric: tabular-nums; }
.num span { display: block; margin-top: 10px; color: rgba(255, 255, 255, .84); max-width: 26ch; }

/* ---------- Educación: foto a sangre que se acerca con el scroll y tarjeta encima ---------- */
.edu { position: relative; padding-block: 0 var(--sec); background: #fff; }
.edu-ph { position: relative; height: clamp(300px, 55vw, 640px); overflow: clip; }
.edu-ph img { width: 100%; height: 100%; object-fit: cover; }
.edu-card { position: relative; z-index: 2; margin-top: -120px; max-width: 640px; padding: 36px; background: #fff; border-radius: 24px; box-shadow: 0 30px 60px rgba(11, 34, 51, .14); }
@media (max-width: 559px) { .edu-card { margin-top: -60px; padding: 26px 22px; } }

/* ---------- Agencias por región ---------- */
.big { color: var(--azul-600); font-variant-numeric: tabular-nums; }
.tablist { display: flex; gap: 8px; margin-top: 32px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.tablist::-webkit-scrollbar { display: none; }
.tabs:not(.is-js) .tablist { display: none; }
.tablist button { flex: none; min-height: 46px; padding: 10px 18px; border-radius: 50px; border: 1px solid var(--linea); background: #fff; color: var(--noche); font: 600 15px/1 var(--f); cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.tablist button span { margin-left: 6px; font-weight: 500; opacity: .6; }
.tablist button[aria-selected='true'] { background: var(--noche); border-color: var(--noche); color: #fff; }
.tablist button:hover:not([aria-selected='true']) { border-color: var(--noche); }
.tabs.is-js .tabpanel[data-hidden] { display: none; }
.tabs:not(.is-js) .nojs-h { position: static !important; width: auto; height: auto; clip: auto; margin-top: 28px; font-size: 20px; }
.tabpanel { animation: tab-in .45s var(--ease); }
@keyframes tab-in { from { opacity: 0; transform: translateY(10px); } }
.ag-list { margin-top: 24px; display: grid; border-top: 1px solid var(--linea); }
@media (min-width: 900px) { .ag-list { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.ag-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--linea); }
.ag-list strong { display: block; font-size: 17px; }
.ag-list li span { display: block; font-size: 14px; color: var(--pizarra); }
.ag-list .go { flex: none; font-size: 14px; }

/* ---------- Noticias tipográficas (sin banners recortados) ---------- */
.news { background: #f4f8fb; }
.tiles { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 260px; padding: 28px; border-radius: 22px; text-decoration: none; color: #fff; background: var(--noche); overflow: clip; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tile.t1 { background: var(--azul-800); }
.tile.t2 { background: var(--dorado); color: var(--noche); }
.tile::before { content: ''; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 36px solid currentColor; opacity: .08; transition: transform .3s var(--ease); }
.tile-meta { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tile h3 { font-size: clamp(21px, .6vw + 18px, 26px); line-height: 1.25; letter-spacing: -.01em; }
.tile-go { margin-top: auto; width: 44px; height: 44px; border-radius: 50%; background: #fff var(--arrow-r) center / 16px no-repeat; transition: transform .3s var(--ease); }
.tile:hover { transform: translateY(-6px); box-shadow: 0 24px 40px rgba(11, 34, 51, .18); color: #fff; }
.tile.t2:hover { color: var(--noche); }
.tile:hover::before { transform: scale(1.25); }
.tile:hover .tile-go { transform: translateX(6px); }

.mf-links { margin-top: 44px; max-width: 520px; }
.manifest .kick { margin-bottom: 18px; }
.edu { padding-bottom: calc(var(--sec) * .5); }
@media (min-width: 1024px) { .edu .shell { display: flex; justify-content: flex-end; } }

/* ---------- Marco de foto con el corte de marca (una esquina en diagonal); se destapa al entrar ---------- */
.unveil { position: relative; overflow: clip; clip-path: polygon(0 0, 100% 0, 100% 86%, 80% 100%, 0 100%); background: var(--cielo); }
.unveil img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Cabecera dinámica: se esconde al bajar y vuelve al subir ---------- */
.site-header { transition: transform .3s var(--ease), box-shadow .3s ease; }
.site-header[data-hidden] { transform: translateY(-100%); }
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(11, 34, 51, .10); }
:root:has(.site-header[data-hidden]) :is(.mf-side, .st-media, .rail-head) { top: 24px; }

/* ---------- Volver arriba: aparece al bajar, su aro dibuja cuánto se ha leído ---------- */
.to-top { position: fixed; right: 20px; bottom: 24px; z-index: 46; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--noche); color: #fff; cursor: pointer; box-shadow: 0 10px 30px rgba(11, 34, 51, .3); opacity: 0; transform: translateY(16px) scale(.9); visibility: hidden; transition: opacity .3s ease, transform .3s var(--ease), visibility 0s .3s, background-color .25s ease; }
.to-top[data-state='shown'] { opacity: 1; transform: none; visibility: visible; transition: opacity .3s ease, transform .3s var(--ease), visibility 0s, background-color .25s ease; }
.to-top svg { width: 100%; height: 100%; display: block; }
.to-top circle { fill: none; stroke-width: 3; }
.to-top .ring-bg { stroke: rgba(255, 255, 255, .15); }
.to-top .ring { stroke: var(--dorado); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--read, 0)); transform: rotate(-90deg); transform-origin: 50% 50%; stroke-linecap: round; }
.to-top path { transition: transform .3s var(--ease); }
@media (max-width: 1023px) { .to-top { right: 14px; bottom: calc(88px + env(safe-area-inset-bottom)); width: 48px; height: 48px; } }

/* ---------- Botones: el relleno entra desde la izquierda al pasar ---------- */
.btn { overflow: clip; isolation: isolate; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--fill, rgba(255, 255, 255, .22)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease-io); }
.btn:hover::before { transform: scaleX(1); }
.btn-gold { --fill: #f3c35d; }
.btn-gold:hover { background: var(--dorado); }
.btn-blue { --fill: var(--azul-800); }
.btn-line { --fill: var(--noche); }
.btn-line:hover { background: transparent; }
.btn-glass { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(8px); --fill: #fff; }
.btn-glass:hover { color: var(--noche); }
.btn-dark { --fill: #000; }

/* ---------- Titulares de sección: palabras que suben al entrar ---------- */
.rise .w { display: inline-block; overflow: clip; overflow-clip-margin: .1em; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: bottom; }
.rise .w > span { display: inline-block; }
.h2 { letter-spacing: -.02em; font-weight: 700; }
.sec-head .h2 { max-width: 22ch; }

/* ---------- Cabecera interior (misma coreografía que la portada) ---------- */
.phx .hx-title { font-size: clamp(38px, 3.4vw + 16px, 80px); max-width: 14ch; }
.phx .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-bottom: 18px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.phx .crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; }
.phx .crumbs a:hover { text-decoration: underline; }
.phx .crumbs [aria-current] { max-width: 28ch; overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
.phx .hx-kicker { margin-bottom: 14px; }
.phx .hx-title { margin-top: 0; }
.phx .hx-media { min-height: 300px; }
.phx .actions { margin-top: 28px; }
.phx.solo { grid-template-columns: 1fr; }
.phx.solo .hx-copy { padding-block: 40px 64px; }
.phx.solo .hx-title { max-width: 20ch; font-size: clamp(34px, 2.8vw + 16px, 68px); }
.article-meta { color: rgba(255, 255, 255, .8); }
@media (min-width: 1024px) {
  .phx { min-height: min(calc(88svh - var(--h-header)), 640px); }
  .phx.solo { min-height: 0; }
  .phx.solo .hx-copy { padding-block: 72px 96px; }
  }
/* ---------- Secciones ---------- */
.tint { background: #f4f8fb; }
.dark-band { background: var(--noche); color: #fff; position: relative; overflow: clip; }
.dark-band::before { content: ''; position: absolute; left: -15%; top: -40%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0, 156, 223, .25), transparent 65%); pointer-events: none; }
.dark-band .kick { color: var(--dorado); }
.dark-band .lead { color: rgba(255, 255, 255, .85); }
.dark-band .ticks li::before { background: var(--dorado); }
.dark-band.manifest { padding-block: var(--sec); }
.vision { font-size: clamp(20px, .8vw + 16px, 28px); line-height: 1.45; max-width: 46ch; color: rgba(255, 255, 255, .88); margin-top: 12px; }
.whom .ticks { max-width: 72ch; }
.two { display: grid; gap: 56px; }
@media (min-width: 1024px) { .two { grid-template-columns: 1fr 1fr; gap: 80px; } }
.two .ticks { margin-top: 24px; }

/* Texto + foto */
.duo { display: grid; gap: 40px; align-items: center; }
.duo-ph { aspect-ratio: 4 / 3; }
.duo-ph.tall { aspect-ratio: 4 / 5; }
.duo .facts { margin-top: 28px; }
@media (min-width: 1024px) { .duo { grid-template-columns: 1fr 1fr; gap: 88px; } .duo.flip .duo-ph { order: -1; } .duo.solo { grid-template-columns: minmax(0, 780px); } }
.prod-row .duo-ph { aspect-ratio: 5 / 4; }

/* Carril: cabeza fija + contenido */
.rail { display: grid; gap: 32px; align-items: start; }
.rail-ph { margin-top: 32px; aspect-ratio: 4 / 3; max-width: 420px; }
@media (min-width: 1024px) { .rail { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 88px; } .rail-head { position: sticky; top: calc(var(--h-header) + 32px); } }
.rail-body .acc { margin-top: 0; }
.rail-body .st-steps { margin-top: 0; }

/* Tarjetas de beneficios / valores */
.feats { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 700px) { .feats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .feats { grid-template-columns: repeat(3, 1fr); } }
.feat { position: relative; padding: 28px 26px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease; }
.tint .feat { border-color: transparent; }
.feat::before { content: ''; display: block; width: 64px; height: 4px; border-radius: 4px; background: var(--dorado); margin-bottom: 20px; transform: scaleX(.44); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.feat:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(11, 34, 51, .1); }
.feat:hover::before { transform: none; }
.feat h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.feat p { margin-top: 10px; color: var(--pizarra); }
.feat .feat-v { font-size: 18px; font-weight: 700; color: var(--noche); }
.feats.on-dark .feat { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); }
.feats.on-dark .feat p { color: rgba(255, 255, 255, .82); }

/* Tarjetas de producto en rejilla (otros productos) */
.pcards { display: grid; gap: 14px; margin-top: 36px; }
@media (min-width: 700px) { .pcards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pcards { grid-template-columns: repeat(3, 1fr); } }
.pcards .pnl { min-height: 400px; }

/* Llamada a la acción: caja noche redondeada con el sol */
.cta3 { padding-block: var(--sec); }
.cta3-box { position: relative; overflow: clip; display: grid; gap: 28px; padding: 44px 28px; border-radius: 28px; background: radial-gradient(80% 120% at 100% 0%, rgba(0, 156, 223, .45), transparent 60%), var(--noche); color: #fff; }
.cta3-box .rays { position: absolute; right: -40px; bottom: -60px; left: auto; top: auto; width: 220px; height: 220px; opacity: .8; }
.cta3-box .h2 { color: #fff; max-width: 20ch; }
.cta3-box .lead { color: rgba(255, 255, 255, .85); }
.cta3-box > * { position: relative; }
.cta3-box .btn-line { color: #fff; --fill: #fff; }
.cta3-box .btn-line:hover { color: var(--noche); }
@media (min-width: 900px) { .cta3-box { grid-template-columns: 1fr auto; align-items: center; padding: 64px 72px; } }

/* Pasos (todas las páginas) */
.st-steps p { max-width: 62ch; }

/* Acordeón con apertura animada (interpolate-size + ::details-content, donde exista) */
:root { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
details[open]::details-content { block-size: auto; }
.acc summary { transition: color .25s ease; }
.acc summary:hover { color: var(--azul-600); }
.dark-band .acc summary:hover { color: var(--dorado); }

/* Agencias: buscador + tarjetas */
.finder { display: grid; gap: 10px; max-width: 560px; }
.finder label { font-weight: 700; font-size: 15px; }
.finder input { font: 17px/1.4 var(--f); min-height: 58px; padding: 14px 22px 14px 52px; border-radius: 50px; border: 1px solid rgba(11, 34, 51, .25); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2233' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 20px 50% / 20px no-repeat; color: var(--noche); }
.finder input:focus-visible { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(0, 156, 223, .25); }
.finder-count { font-size: 14px; color: var(--pizarra); min-height: 20px; }
.region { margin-top: 48px; }
.region-h { font-size: 24px; display: flex; align-items: center; gap: 12px; }
.region-h span { font-size: 14px; font-weight: 600; padding: 2px 10px; border-radius: 50px; background: var(--cielo); color: var(--azul-800); }
.region[hidden], .branch[hidden] { display: none; }
.branches { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 700px) { .branches { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .branches { grid-template-columns: repeat(3, 1fr); } }
.branch { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 20px; background: #f4f8fb; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s ease; }
.tint .branch { background: #fff; }
.branch:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(11, 34, 51, .1); background: #fff; }
.branch-type { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-600); }
.branch h3 { font-size: 20px; line-height: 1.3; }
.branch .meta { color: var(--pizarra); font-size: 15px; }
.branch .meta a { display: inline-flex; align-items: center; min-height: 44px; }
.branch .go { margin-top: auto; padding-top: 6px; }
.finder-empty { margin-top: 32px; font-size: 18px; }

/* Nosotros: panorámica real, equipo */
.pano { margin: 0; background: var(--noche); overflow: clip; }
.pano img { width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.pano figcaption { padding-block: 14px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.impact-ph { margin-top: 56px; aspect-ratio: 21 / 9; }
.team { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 700px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .team { grid-template-columns: repeat(3, 1fr); } }
.team li { padding: 20px 22px; border-radius: 18px; background: #f4f8fb; }
.team strong { display: block; font-size: 18px; }
.team span { display: block; margin-top: 4px; color: var(--pizarra); }
.chips li { transition: transform .3s var(--ease), border-color .3s ease; }
.chips li:hover { transform: translateY(-2px); border-color: var(--azul); }

/* Preguntas frecuentes: barra de temas fija */
.topic-bar { position: sticky; top: var(--h-header); z-index: 40; background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid var(--linea); }
:root:has(.site-header[data-hidden]) .topic-bar { top: 0; }
.topic-bar ul { display: flex; gap: 8px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.topic-bar ul::-webkit-scrollbar { display: none; }
.topic-bar a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 50px; border: 1px solid var(--linea); color: var(--noche); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .25s ease, color .25s ease; }
.topic-bar a:hover { background: var(--noche); color: #fff; }
.topic-bar li { list-style: none; }
main:has(.topic-bar) [id] { scroll-margin-top: calc(var(--h-header) + 80px); }

/* Transparencia: índice fijo + documentos */
.toc ul { margin-top: 14px; display: grid; gap: 2px; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--noche); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--linea); }
.toc a:hover { color: var(--azul-600); }
.doc-sec + .doc-sec { margin-top: 72px; }
.docs li { transition: background-color .25s ease; }
.docs li:hover { background: #f4f8fb; }

/* Noticias: filtro y archivo */
.chips-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-filter button { min-height: 44px; padding: 8px 18px; border-radius: 50px; border: 1px solid var(--linea); background: #fff; color: var(--noche); font: 600 14px/1 var(--f); cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.chips-filter button[aria-pressed='true'] { background: var(--noche); color: #fff; border-color: var(--noche); }
.tile[hidden] { display: none; }
.tile p { color: rgba(255, 255, 255, .86); font-size: 15px; }
.tile.t2 p { color: var(--noche); }
.archive { margin-top: 24px; border-top: 1px solid var(--linea); }
.archive a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; min-height: 56px; align-items: center; padding-block: 12px; border-bottom: 1px solid var(--linea); color: var(--noche); text-decoration: none; font-weight: 600; }
.archive a:hover { color: var(--azul-600); }
.archive small { color: var(--pizarra); font-weight: 400; }
.article .article-figure { aspect-ratio: auto; background: none; clip-path: none; margin-bottom: 40px; border-radius: 20px; }
.article .article-figure img { height: auto; }
.article .body-copy { font-size: 18px; line-height: 1.7; }

/* Formularios */
.form-panel { border-radius: 24px; }
.form-sec .duo { align-items: start; }
.legal-sec .more { border-color: var(--linea); }

/* ---------- Coreografía y scroll: solo con movimiento permitido ---------- */
@media (prefers-reduced-motion: no-preference) {
  .site-header { view-transition-name: cabecera; }
  [style*='--vt'] { view-transition-name: var(--vt); }
  .hx-title .w > span { animation: rise .9s var(--ease) both; animation-delay: calc(120ms + min(var(--i), 6) * 90ms); }
  .hx-kicker, .hx-lead, .phx .crumbs, .phx .actions, .article-meta { animation: fade .8s var(--ease) both .45s; }
  .hx-intent li { animation: fade .6s var(--ease) both; animation-delay: calc(700ms + var(--i) * 60ms); }
  .hx-photo { animation: open 1.1s var(--ease-io) both .1s; }
  .hx-photo img { animation: settle 1.6s var(--ease) both .1s; }
  .rays line { stroke-dasharray: 1; animation: draw .7s var(--ease) both; animation-delay: calc(900ms + var(--i) * 60ms); }
  .hx-chip { animation: chip .7s var(--ease) both 1.2s; }
  @keyframes rise { from { transform: translateY(105%); } }
  @keyframes fade { from { opacity: 0; transform: translateY(12px); } }
  @keyframes open { from { clip-path: polygon(70% 0, 100% 0, 100% 100%, 55% 100%); } }
  @keyframes settle { from { transform: scale(1.12); } }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes chip { from { opacity: 0; transform: translateY(20px) scale(.96); } }
  @media (min-width: 1024px) { @keyframes open { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 78% 100%); } } }
  .tabpanel { animation: tab-in .45s var(--ease); }
  @keyframes tab-in { from { opacity: 0; transform: translateY(10px); } }

  @supports (animation-timeline: view()) {
    .progress { display: block; position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; background: var(--dorado); transform-origin: 0 50%; animation: grow linear both; animation-timeline: scroll(root); }
    @keyframes grow { from { transform: scaleX(0); } }
    /* Titulares: cada palabra sube al entrar, escalonada por su índice. */
    .rise .w > span { animation: rise linear both; animation-timeline: view(); animation-range: entry calc(20% + var(--i) * 6%) entry calc(80% + var(--i) * 6%); }
    /* Texto grande (≥ 22 px, 600): el tono de partida ya cumple 3:1, así que se lee en todo momento. */
    .mf-text .w > span { animation: lit linear both; animation-timeline: view(); animation-range: entry 90% cover 45%; }
    .dark-band .mf-text .w > span { animation-name: lit-dark; }
    @keyframes lit { from { color: #56687a; } }
    @keyframes lit-dark { from { color: #93a3b0; } }
    .unveil { animation: unveil linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .unveil img { animation: zoom-out linear both; animation-timeline: view(); animation-range: entry 0% exit 0%; }
    @keyframes unveil { from { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 0, 0 0); } }
    @keyframes zoom-out { from { transform: scale(1.22); } }
    .st-steps::after { animation: fill linear both; animation-timeline: --pasos; animation-range: cover 15% cover 70%; }
    @keyframes fill { from { transform: scaleY(0); } }
    .st-steps li { animation: step linear both; animation-timeline: view(); animation-range: entry 70% cover 40%; }
    @keyframes step { from { transform: translateX(14px); } }
    .edu-ph img, .pano img { animation: push linear both; animation-timeline: view(); animation-range: entry 0% exit 30%; }
    @keyframes push { from { transform: scale(1.18) translateY(-4%); } to { transform: scale(1) translateY(0); } }
    :is(.pnl, .num, .tile, .feat, .branch, .team li) { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    @keyframes lift { from { opacity: 0; translate: 0 50px; } }
    .lead, .facts, .ticks li { animation: blur-in linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    @keyframes blur-in { from { opacity: 0; filter: blur(8px); translate: 0 16px; } }
    .cta3-box { animation: grow-box linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes grow-box { from { transform: scale(.92); border-radius: 60px; } }
    .progress-ring-fallback { display: none; }
  }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Formularios: texto (y foto) a la izquierda, formulario a la derecha */
.fb { display: grid; gap: 36px; align-items: start; }
.fb-ph { margin-top: 32px; aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .fb { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; } .fb-txt { position: sticky; top: calc(var(--h-header) + 32px); } }
:root:has(.site-header[data-hidden]) .fb-txt { top: 24px; }
.tint .form-panel { box-shadow: 0 30px 60px rgba(11, 34, 51, .08); }
.toc a[aria-current='true'], .topic-bar a[aria-current='true'] { color: var(--azul-600); }
.topic-bar a[aria-current='true'] { background: var(--noche); color: #fff; border-color: var(--noche); }
.toc a[aria-current='true']::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dorado); margin-right: 10px; flex: none; }
/* Móvil: el botón de volver arriba vive dentro de la barra de acción (no flota sobre el contenido). */
@media (max-width: 1023px) {
  .m-bar { padding-right: calc(var(--g) + 58px); }
  .to-top { right: var(--g); bottom: calc(10px + env(safe-area-inset-bottom)); width: 48px; height: 48px; box-shadow: none; }
  .mf-text { font-size: clamp(22px, 5.4vw, 30px); }
}
/* Teléfono apaisado o tableta: una foto vertical nunca ocupa más que la pantalla. */
@media (max-width: 1023px) { .unveil, .st-ph { max-height: 78svh; } .mf-ph, .st-ph, .duo-ph.tall { aspect-ratio: 4 / 3; } }

/* Pulsación, superficies del navegador y áreas táctiles */
.btn:active { transform: scale(.97); }
.to-top:active { transform: scale(.97); }
html { caret-color: var(--azul-600); scrollbar-color: var(--azul-800) #eef4f8; }
.site-header .brand { min-height: 48px; }
.field.check label a { display: inline-block; padding-block: 14px; margin-block: -14px; }
/* Con «reducir movimiento» los paneles no se pliegan: todo el detalle queda a la vista. */
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: reduce) {
  .panels .pnl { flex-grow: 1; }
  .pnl-more { grid-template-rows: 1fr; opacity: 1; }
  .pnl-more p { min-width: 0; }
}
/* Cabecera interior sin foto: el sol de la marca como imagen */
.phx-mark { position: absolute; right: 6%; top: 50%; width: min(26vw, 300px); aspect-ratio: 380 / 300; overflow: clip; translate: 0 -50%; pointer-events: none; }
.phx-mark img { width: 100%; height: auto; display: block; }
@media (max-width: 767px) { .phx-mark { width: 120px; right: 12px; top: auto; bottom: 16px; translate: none; }
  .phx.solo .hx-copy { padding-bottom: 150px; } }
@media (prefers-reduced-motion: no-preference) { .phx-mark { animation: mark-in 1.1s var(--ease) both .2s; } @keyframes mark-in { from { rotate: -25deg; scale: .85; } } }
.phx.solo .hx-copy { position: relative; z-index: 2; max-width: 780px; }
@media (min-width: 1024px) { .phx.solo .hx-copy { padding-right: 0; } }
/* «Quiero…»: píldoras con la base de .btn */
.hx-intent .btn { min-height: 46px; padding: 10px 18px; gap: 10px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff; font-size: 15px; font-weight: 500; --fill: var(--dorado); }
.hx-intent .btn::after { position: static; margin: 0; width: 12px; height: 12px; transform: rotate(-45deg); }
.hx-intent .btn:hover { color: var(--noche); border-color: var(--dorado); background: rgba(255, 255, 255, .07); }
.hx-intent .btn:hover::after { transform: rotate(-45deg) translate(2px, 2px); }
/* Escala cerrada de titulares (≤ 8 tamaños): 98 · 65 · 34 · 26 · 24 · 20 a 1440. */
.phx.solo .hx-title { font-size: clamp(38px, 3.4vw + 16px, 80px); }
.pnl h3 { font-size: var(--t-h2); }
.body-copy h3 { font-size: 20px; }
.nojs-h { font-size: 20px; }
.feat-v a { display: inline-flex; align-items: center; min-height: 44px; }
.site-header .pills .toggle { order: 99; }
.ticks a { display: inline-block; padding-block: 13px; margin-block: -13px; }
@media (min-width: 1024px) { .phx.solo { min-height: 360px; } .phx.solo .hx-copy { max-width: 64%; } }

/* ===================== Ronda de revisión 1 (Ojos) ===================== */
/* Texto sobre fondos oscuros: toda banda oscura aclara su texto secundario (Impacto tenía 2,3:1). */
:is(.impact, .dark-band, .cta3-box, .hx) .lead { color: rgba(255, 255, 255, .85); }
/* Cabecera sin foto: el sol nunca pisa el texto; por debajo de 1024 va abajo a la derecha, bajo el texto. */
@media (max-width: 1023px) {
  .phx-mark { width: 120px; right: var(--g); left: auto; top: auto; bottom: 16px; translate: none; }
  .phx.solo .hx-copy { padding-bottom: 150px; }
}
/* Documentos: el botón siempre en su columna, alineado a la derecha. */
.docs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; }
/* Menú de escritorio: sin cortes de línea entre 1024 y 1280. */
.site-header nav.main a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) { .site-header nav.main { gap: 16px; } .site-header nav.main a { font-size: 14px; } }
/* Teléfono apaisado: cabecera en dos columnas y todo lo importante en el primer pantallazo. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) and (max-width: 1023px) {
  .hx { grid-template-columns: 1.15fr 1fr; min-height: calc(100dvh - var(--h-header)); }
  .hx-copy { padding: 14px var(--g) 18px; align-self: center; }
  .hx-media { min-height: 0; }
  .hx-photo { clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
  .hx-title { font-size: clamp(28px, 8vh, 40px); margin-top: 6px; }
  .phx .hx-title { font-size: clamp(26px, 7.5vh, 36px); }
  .hx-kicker, .phx .hx-kicker { margin-bottom: 4px; font-size: 11px; }
  .phx .crumbs { margin-bottom: 0; }
  .phx .crumbs a { min-height: 44px; }
  .hx-lead { margin-top: 8px; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hx-intent { margin-top: 10px; }
  .hx-intent > p { display: none; }
  .hx-intent ul { margin-top: 0; gap: 6px; }
  .phx .actions { margin-top: 12px; }
  .hx-chip { left: 22%; bottom: 12px; padding: 8px 12px; }
  .hx-chip strong { font-size: 18px; }
  .rays { width: 110px; height: 110px; left: 4%; top: auto; bottom: 8px; }
  .phx.solo .hx-copy { padding-bottom: 18px; max-width: 70%; }
  .phx-mark { width: 110px; bottom: 50%; translate: 0 50%; }
}
/* Llamada a la acción en móvil: los rayos van arriba a la derecha, lejos de los botones. */
@media (max-width: 899px) { .cta3-box .rays { top: -50px; right: -50px; bottom: auto; width: 150px; height: 150px; opacity: .6; } .cta3-box > div:first-of-type { padding-right: 60px; } }
/* Tarjetas en móvil: carrusel deslizable con la siguiente asomando (antes 9 tarjetas apiladas). */
@media (max-width: 699px) {
  .feats { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); margin-inline: calc(var(--g) * -1); padding: 4px var(--g) 12px; scrollbar-width: none; }
  .feats::-webkit-scrollbar { display: none; }
  .feat { scroll-snap-align: start; }
}
/* Migas en una línea: la página actual se recorta con puntos suspensivos. */
.phx .crumbs { flex-wrap: nowrap; min-width: 0; }
.phx .crumbs > * { flex: none; }
.phx .crumbs [aria-current] { flex: 1 1 auto; min-width: 0; max-width: none; }
/* Temas de preguntas: bordes que se desvanecen para indicar que hay más. */
.topic-bar ul { mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); padding-inline: 8px; }
/* Carril: la foto acompaña a lo alto de la columna. */
@media (min-width: 1024px) { .rail-ph { max-width: none; aspect-ratio: 4 / 5; } }
/* Nosotros: valores tipográficos, historias en filas, equipo en una fila. */
.values { display: grid; gap: 32px; margin-top: 40px; }
@media (min-width: 900px) { .values { grid-template-columns: repeat(3, 1fr); gap: 0; } .value { padding-inline: 32px; border-left: 1px solid var(--linea); } .value:first-child { padding-left: 0; border-left: 0; } }
.value h3 { font-size: var(--t-h2); color: var(--azul-600); letter-spacing: -.02em; }
.value p { margin-top: 14px; color: var(--pizarra); max-width: 40ch; }
.rows-ed { border-top: 1px solid var(--linea); }
.rows-ed li { display: grid; gap: 8px; padding-block: 22px; border-bottom: 1px solid var(--linea); }
@media (min-width: 700px) { .rows-ed li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 32px; } }
.rows-ed h3 { font-size: 20px; line-height: 1.3; }
.rows-ed p { color: var(--pizarra); }
.team { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Trabaja con nosotros: beneficios como lista clara. */
.big-ticks { gap: 14px; margin-top: 0; }
.big-ticks li { font-size: 18px; font-weight: 600; }
.rail-body .feats { margin-top: 32px; }
@media (min-width: 1100px) { .rail-body .feats { grid-template-columns: 1fr 1fr; } }
/* Educación: gerencias zonales. */
.zonas { display: grid; gap: 8px; margin-top: 20px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.zonas a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--linea); color: var(--noche); text-decoration: none; font-weight: 600; transition: border-color .25s ease, transform .3s var(--ease); }
.zonas a:hover { border-color: var(--azul); transform: translateY(-2px); }
.zonas small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azul-600); }
.zona[hidden] { display: none; }
.st-h { font-size: 20px; line-height: 1.3; }
.st-steps li .st-h + p { margin-top: 4px; color: var(--pizarra); }
/* Noticias: botón «Mostrar más». */
.more-news { justify-content: center; margin-top: 40px; }
.more-news[hidden] { display: none; }
/* Teléfonos: uno por línea y sin cortar el anexo. */
.meta.phones { display: grid; justify-items: start; }
/* Barra móvil: rótulos en una línea. */
.m-bar .btn { white-space: nowrap; font-size: 14px; }
/* Rejillas de una columna: la columna nunca crece por un hijo ancho (el carrusel de tarjetas desbordaba en 375). */
.rail, .duo, .fb, .two, .st-grid, .mf-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .rail { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo.solo { grid-template-columns: minmax(0, 780px); }
  .fb { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .st-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .mf-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.btn, .btn::before { transition-duration: var(--d-ui); }

/* ===================== Ronda de revisión 2 (Ojos) ===================== */
/* Las líneas de tiempo del scroll: overflow:clip en lugar de hidden (hidden convierte al padre en contenedor de
   scroll y congela view(); la foto de Impacto no se destapaba). */
/* Migas en una línea sin ensanchar la columna del titular (regresión: .hx-copy medía 416 px en 344). */
.hx > *, .hx-copy, .phx .crumbs { min-width: 0; }
.phx .crumbs { max-width: 100%; }
/* Volver arriba en móvil: solo junto a la barra; cuando la barra se oculta (pie a la vista) se oculta también. */
@media (max-width: 1023px) { .m-bar:not([data-state='shown']) ~ .to-top { opacity: 0; visibility: hidden; pointer-events: none; } }
/* Pasos: la línea dorada va detrás de los números. */
.st-steps { isolation: isolate; }
.st-steps::before, .st-steps::after { z-index: -1; }
/* Botones sin cortes de línea en pantallas estrechas. */
.site-header .pills .btn, .cta3-box .btn { white-space: nowrap; }
@media (max-width: 380px) { .cta3-box .btn { font-size: 15px; padding-left: 18px; padding-right: 44px; } .cta3-box .btn::after { right: 16px; } }
@media (max-width: 359px) { .m-bar .btn { padding-inline: 8px; font-size: 13px; } .site-header .pills .btn { padding-inline: 12px; font-size: 13px; } }
/* Panorámica en móvil: más alta, recortando los lados. */
@media (max-width: 767px) { .pano img { height: 240px; object-fit: cover; object-position: 50% 45%; } }
/* Títulos de documentos sin huérfanas. */
.docs .t span { text-wrap: pretty; }
/* Agencias: accesos por región y tarjetas compactas en móvil. */
.region-jump ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.region-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 50px; border: 1px solid var(--linea); color: var(--noche); text-decoration: none; font-weight: 600; font-size: 14px; transition: background-color .25s ease, color .25s ease; }
.region-jump a:hover { background: var(--noche); color: #fff; }
.region-jump span { font-weight: 500; opacity: .7; }
@media (max-width: 699px) { .branch { padding: 18px; gap: 4px; } .branches { gap: 10px; } .region { margin-top: 36px; } }
/* Filtros de noticias en móvil: una fila deslizable, no cinco filas de chips. */
@media (max-width: 699px) { .chips-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--g) * -1); padding-inline: var(--g); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .chips-filter::-webkit-scrollbar { display: none; } .chips-filter button { flex: none; } }

/* ===================== Ronda de revisión 3 (Ojos) ===================== */
/* Filas editoriales sobre banda oscura: texto claro (2,3:1 → 12:1). */
.dark-band .rows-ed, .dark-band .rows-ed li { border-color: var(--linea-osc); }
.dark-band .rows-ed p { color: rgba(255, 255, 255, .82); }
/* Portátil bajo (≤ 760 px de alto): la portada cabe entera con sus accesos. */
@media (min-width: 1024px) and (max-height: 760px) {
  .hx-copy { padding-block: 28px; }
  .hx-title { font-size: clamp(44px, min(6vw + 12px, 9.5vh), 96px); margin-top: 10px; }
  .hx-lead { margin-top: 14px; }
  .hx-intent { margin-top: 16px; }
  .hx-intent > p { display: none; }
  .hx-intent ul { margin-top: 0; }
}
/* aspect-ratio + overflow:clip conserva la altura mínima automática (clip no es contenedor de scroll): la caja
   crecía hasta la imagen completa (el sello tapaba el botón de /gracias). min-height:0 la devuelve a su proporción. */
.phx-mark, .unveil, .edu-ph, .pnl-ph { min-height: 0; }
/* Pasos: al entrar se desplaza el texto, no el círculo (que queda sobre la línea). */
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .st-steps li { animation: none; }
  .st-steps li > :is(p, h3) { animation: step linear both; animation-timeline: view(); animation-range: entry 70% cover 40%; }
} }
/* Pantallas de 320–380: botones en una línea. */
@media (max-width: 380px) { .btn { white-space: nowrap; font-size: 14px; padding-left: 16px; padding-right: 40px; } .btn::after { right: 14px; } .btn.no-arrow { padding-right: 16px; } }

/* ===================== Ronda de revisión 4 (Ojos) ===================== */
/* Tarjetas: el generador fija el ancho de cada una (--span) para cerrar siempre las filas de 6 columnas. */
@media (min-width: 700px) and (max-width: 1099px) { .feats > .feat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .feats { grid-template-columns: repeat(6, 1fr); }
  .feats > .feat { grid-column: span var(--span, 2); }
  .feats > .feat.feat-lg h3 { font-size: var(--t-h3); }
  .feats > .feat.feat-lg p { font-size: 17px; max-width: 52ch; }
  .rail-body .feats { grid-template-columns: repeat(2, 1fr); }
  .rail-body .feats > .feat { grid-column: auto; }
  .rail-body .feats > .feat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Portada compacta también en portátiles de 768 px de alto (1366×768). */
@media (min-width: 1024px) and (max-height: 820px) {
  .hx-copy { padding-block: 28px; }
  .hx-title { font-size: clamp(44px, min(6vw + 12px, 9.5vh), 96px); margin-top: 10px; }
  .hx-lead { margin-top: 14px; }
  .hx-intent { margin-top: 16px; }
  .hx-intent > p { display: none; }
  .hx-intent ul { margin-top: 0; }
}
/* Equipo en filas: nombre y cargo. */
.team-rows { margin-top: 32px; }
@media (min-width: 900px) { .team-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } }
/* Redes: enlaces separados. */
.feat-v { display: flex; flex-wrap: wrap; gap: 4px 18px; }
/* Paneles de producto: degradado más denso bajo el texto (contraste ≥ 4,5:1 sobre fotos claras). */
.pnl::after { background: linear-gradient(180deg, rgba(11, 34, 51, 0) 18%, rgba(11, 34, 51, .55) 45%, rgba(11, 34, 51, .95) 78%); }
.pnl-body { text-shadow: 0 1px 12px rgba(11, 34, 51, .45); }
/* Páginas cortas (gracias, 404): en móvil sin sello, que se repetía con el del pie. */
@media (max-width: 767px) { .phx.short .phx-mark { display: none; } .phx.short.solo .hx-copy { padding-bottom: 56px; } }

/* ===================== Ronda de revisión 5 (Ojos) ===================== */
/* Portada en pantallas de 600–660 px de alto: todo el bloque de accesos dentro, con margen. */
@media (min-width: 1024px) and (max-height: 660px) {
  .hx-copy { padding-block: 18px; }
  .hx-title { font-size: clamp(40px, 8.5vh, 96px); }
  .hx-lead { margin-top: 10px; }
  .hx-intent { margin-top: 12px; }
  .hx-intent .btn { min-height: 44px; padding-block: 8px; }
}
/* Filtros de noticias: una fila deslizable en todos los anchos. */
.chips-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-bottom: 4px; }
.chips-filter::-webkit-scrollbar { display: none; }
.chips-filter button { flex: none; }
/* Páginas cortas: sin sello hasta tableta. */
@media (max-width: 1023px) { .phx.short .phx-mark { display: none; } .phx.short.solo .hx-copy { padding-bottom: 56px; } }
/* Agencias: la última fila se estira; nunca queda una tarjeta sola a un tercio. */
@media (min-width: 700px) { .branches { display: flex; flex-wrap: wrap; } .branch { flex: 1 1 calc(50% - 14px); min-width: 0; } }
@media (min-width: 1100px) { .branch { flex-basis: calc(33.333% - 14px); } }
/* Redes: dos por fila. */
.feat-v:has(a + a) { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 20px; }
/* Volver arriba más discreto en escritorio. */
@media (min-width: 1024px) { .to-top { right: 24px; bottom: 24px; width: 52px; height: 52px; } }
/* Tableta: la última tarjeta impar de producto ocupa la fila. */
@media (min-width: 700px) and (max-width: 1099px) { .pcards > .pnl:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 320px; } }
/* Teléfono apaisado: los accesos «Quiero…» en una sola fila deslizable. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) and (max-width: 1023px) {
  .hx-intent ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-bottom: 2px; }
  .hx-intent ul::-webkit-scrollbar { display: none; }
  .hx-intent li { flex: none; }
  .hx-kicker, .phx .hx-kicker { font-size: 12px; }
}
/* Páginas cortas: solo el brillo azul (el dorado quedaba cortado sobre el pie). */
.phx.short .hx-glow { background: radial-gradient(60% 70% at 12% 20%, rgba(0, 156, 223, .35), transparent 70%); }
/* Canales: el desplegable de condiciones sigue a la lista sin doble filete. */
.rail-body .acc + .mt-l { margin-top: 0; }
.rail-body .acc + .mt-l > .more { border-top: 0; }

/* ===================== Ronda de revisión 6 (Ojos) ===================== */
/* Cifras por encima del halo decorativo. */
.impact::before { z-index: 0; }
.impact > .shell { position: relative; z-index: 1; }
/* Filtros de noticias: más compactos y con barra fina visible en escritorio (alcanzables con ratón). */
@media (min-width: 1024px) { .chips-filter { scrollbar-width: thin; mask-image: none; } .chips-filter button { padding: 8px 13px; } }
/* Entradilla antes de una lista en el carril: aire antes del primer filete. */
.rail-body .lead + .acc { margin-top: 28px; }
/* Páginas cortas: el mensaje termina antes del pie (banda blanca entre ambos). */
main:has(> .phx.short) { padding-bottom: 0; }
.phx.short { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.phx.short .hx-copy { padding-bottom: 72px; }
/* Ronda 7: filtros con desvanecido también en escritorio (y barra fina); pie legal alineado; volver arriba en la navegación. */
@media (min-width: 1024px) { .chips-filter { mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 32px; } .site-header nav.main { align-items: center; } }
.site-footer .legal { align-items: center; }
/* Documentos a 320: palabras largas con guiones y el botón debajo del título. */
.docs .t { hyphens: manual; overflow-wrap: anywhere; }
@media (max-width: 359px) { .docs li { grid-template-columns: minmax(0, 1fr); } .docs li .btn { justify-self: start; } }
/* Pie a 320: columnas que no crecen por su contenido y redes que pasan de línea. */
.site-footer .top { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .site-footer .top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 3fr); } }
.site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .site-footer .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer .social { flex-wrap: wrap; }
.site-footer .cols a { overflow-wrap: break-word; }
/* Texto de artículos: una URL o palabra larga se parte en lugar de desbordar. */
.body-copy { overflow-wrap: break-word; }
/* Ronda 8: titulares con palabras largas a 320 (sin partir palabras: el tamaño baja con el ancho). */
@media (max-width: 380px) { .phx .hx-title { font-size: clamp(28px, 9.4vw, 38px); } }
.hx-title { overflow-wrap: break-word; }
@media (max-width: 380px) { .phx.long-word .hx-title { font-size: clamp(24px, 7.6vw, 34px); } }
/* Filtros de noticias en escritorio: rejilla ordenada, todos a la vista (sin carril oculto). */
@media (min-width: 1024px) { .chips-filter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow: visible; mask-image: none; padding-right: 0; gap: 8px; } .chips-filter button { width: 100%; } }
/* ≤ 380 px: una sola escala para todos los titulares interiores (antes competían tres reglas: 24/30/38 px). */
@media (max-width: 380px) { .hx.phx .hx-title { font-size: clamp(26px, 9vw, 34px); } .hx.phx.long-word .hx-title { font-size: clamp(22px, 7.2vw, 28px); } }
/* Ronda 10: la cifra del hero a la derecha, lejos de los rayos del sol (abajo a la izquierda). */
@media (min-width: 1024px) { .hx-chip { left: auto; right: 40px; } }
/* Ronda 10: filtros de noticias (solo temas con 2+ noticias) en una fila de chips a su medida. */
@media (min-width: 1024px) { .chips-filter { display: flex; flex-wrap: wrap; } .chips-filter button { width: auto; white-space: nowrap; } }
@media (min-width: 700px) { .chips-filter { display: flex; flex-wrap: wrap; overflow: visible; mask-image: none; padding-right: 0; } .chips-filter button { width: auto; white-space: nowrap; } }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) and (max-width: 1023px) { .hx-chip { left: auto; right: 12px; } }
@media (orientation: landscape) and (max-height: 500px) and (max-width: 767px) { .hx .rays { display: none; } }
/* Ronda 12: paneles plegados con el título en vertical (a 1024–1280 no cabía «Empresarial»); al abrirse, horizontal. */
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .panels .pnl h3 { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font-size: clamp(22px, 1.4vw + 10px, 30px); }
  .panels:not(:hover, :focus-within) .pnl:first-child h3, .panels .pnl:hover h3, .panels .pnl:focus-visible h3 { writing-mode: horizontal-tb; rotate: none; white-space: normal; font-size: var(--t-h2); }
}
/* Volver arriba de escritorio: a la izquierda de las acciones (lejos del logotipo en 1024). */
@media (min-width: 1024px) { .site-header .pills { position: relative; } }
/* Ronda 13: el sol de la tarjeta final entero dentro de la tarjeta en móvil; la tira de temas solo se desvanece a la derecha. */
@media (max-width: 899px) { .cta3-box .rays { top: 14px; right: 14px; width: 96px; height: 96px; opacity: .5; } .cta3-box > div:first-of-type { padding-right: 96px; } }
.topic-bar ul { mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); }
/* Ronda 13: los paneles y tarjetas-enlace no heredan el color de hover de los enlaces de texto. */
.pnl:hover, .pnl:focus-visible, .tile:not(.t2):hover, .tile:not(.t2):focus-visible { color: #fff; }
.tile.t2:hover, .tile.t2:focus-visible { color: var(--noche); }
.tile p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.topic-bar ul.at-end, .chips-filter.at-end { mask-image: none; }
.feat-v a { overflow-wrap: anywhere; }
.feat-list { margin-top: 32px; display: grid; gap: 10px 32px; }
@media (min-width: 700px) { .feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feat-list.on-dark li::before { background: var(--dorado); }
.feat-list + .feats { margin-top: 28px; }
/* Ronda 17 */
@media (max-width: 379px) { .tile p { -webkit-line-clamp: 6; } }
@media (max-width: 1023px) { .m-bar:has(~ .to-top[data-state='hidden']) { padding-right: var(--g); } }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) and (max-width: 1023px) { .phx:not(:has(.actions)) .hx-lead { -webkit-line-clamp: 3; } }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) and (max-width: 1023px) {
  .phx .actions { flex-wrap: nowrap; gap: 8px; }
  .phx .actions > .btn { flex: none; padding: 10px 38px 10px 16px; font-size: 14px; min-height: 44px; }
  .phx .actions > .btn::after { right: 14px; }
  .phx .hx-lead { -webkit-line-clamp: 3; }
}

/* Ronda 21: los subtítulos de los artículos son h2 (orden de encabezados) con la talla de subtítulo;
   los pasos que la fuente dejó sueltos van numerados con el dorado de la marca. */
/* Por debajo del titular también en las cabeceras .long (misma clamp que .pnl h3: A2 no suma tallas). */
.article .body-copy h2 { font-size: clamp(22px, 1.4vw + 10px, 30px); line-height: 1.25; margin-top: 1.4em; }
.steps-ol { list-style: none; counter-reset: paso; display: grid; gap: 12px; margin-top: 18px; padding: 0; }
.steps-ol li { counter-increment: paso; position: relative; padding-left: 40px; min-height: 28px; }
.steps-ol li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--dorado); color: var(--noche); }
/* Un apartado dentro de un subtítulo (h3 bajo h2) se lee un escalón por debajo. */
.article .body-copy h2 ~ h3 { font-size: var(--t-h3); font-weight: 700; margin-top: 1.2em; }
/* Ronda 22: un titular largo (> 60 caracteres) no llena el primer pantallazo: talla display y medida de 24ch. */
.phx.long .hx-title { font-size: var(--t-display); max-width: 30ch; }
@media (min-width: 900px) { .phx.long .hx-title { font-size: var(--t-h2); } }
@media (max-width: 380px) { .phx.long .hx-title { font-size: clamp(24px, 7.6vw, 34px); } }
/* Ronda 24: en móvil apaisado el titular largo no ocupa todo el alto (3–4 líneas medidas a 844×390 y 667×375). */
@media (orientation: landscape) and (max-height: 500px) { .phx.long .hx-title { font-size: var(--t-h2); max-width: 44ch; } }
/* Petición del cliente: en escritorio «volver arriba» flota abajo a la derecha (no en la cabecera).
   Al pulsarlo el foco pasa al documento, sin enseñar «Saltar al contenido». */
body:focus { outline: none; }
/* Ronda 26: en táctil apaisado (≥ 1024) el hover no se queda pegado; al final de la página el botón flotante
   queda en el relleno del pie, bajo la fila legal (a 1024 tapaba «Créditos de fotos»). */
@media (hover: hover) { .to-top:hover { background: var(--azul-800); } .to-top:hover path { transform: translateY(-2px); } }
@media (min-width: 1024px) { .site-footer { padding-bottom: 100px; } }