/* ═══════════════════════════════════════════════════════════════════════════
   HeliOx · VERSIÓN FINAL · PPT «HeliOx ajustes web 2026» sobre la V6 (13/10)
   ───────────────────────────────────────────────────────────────────────────
   Carga DESPUÉS de heliox.css, componentes.css, v5final.css y v6.css. Solo
   va lo que pide el PPT; el sistema (piezas con 10 px de gris, radio 8,
   Montserrat + Playfair cursiva, Brown Pro) no cambia.

   Contraste nuevo (contraste.py):
     blanco / #1A78B8 («Ver más opiniones») ....... 4,75:1
     blanco / #0E74B8 (su hover) .................. 4,99:1
     blanco / #0A2E4D (banda de sectores) ........ 13,90:1
     #BFD0DA / #0A2E4D (verticales) ............... 8,77:1
     #004B87 / #EAF4F8 (pastillas del detalle) .... 7,98:1
     blanco / vídeo bajo el velo (frase del hero, 31 px → texto grande) ≥ 3,4:1
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ LOGOTIPOS · un solo sistema ═══════════════════════════════════════
   Todos en SVG (oficiales o vectorizados del original del cliente) y
   recortados a su tinta. Se igualan por PESO ÓPTICO, no por altura: cada
   <img class="logo"> trae --k (≈ √(3 ÷ proporción), con ajuste a ojo para
   las marcas muy negras o muy finas) y cada contexto fija la altura base
   --lh, discreta. Así un logotipo apaisado (Conecta, CCEP) no se queda en
   una línea ni uno compacto (La Sirena, Comesur) se come la pieza. */
img.logo{display:block;height:calc(var(--lh,26px) * var(--k,1));width:auto;max-width:100%;
  max-height:none;object-fit:contain;object-position:left center}

/* ═══ NAVEGACIÓN · el enlace aterriza en su sección ═══════════════════════
   El desfase venía de sumar dos márgenes: `scroll-padding-top` en <html>
   (112 px) y `scroll-margin-top` en cada sección (100 px). Al pulsar un
   enlace se veían ~200 px de la sección anterior. Ahora la sección arranca
   justo bajo la cápsula: cada pieza ya trae su propio aire por dentro. */
html{scroll-padding-top:0}
section[id]{scroll-margin-top:0}
/* «Por qué HeliOx» no lleva aire arriba (su titular va en la primera celda) */
#nosotros{scroll-margin-top:clamp(72px,6vw,90px)}

/* ═══ CABECERA · el descriptor en la cursiva de la web ════════════════════ */
.hdr__desc{font-family:var(--serif-it);font-style:italic;font-weight:400;
  font-size:.9375rem;line-height:1.22;letter-spacing:0;text-transform:none}
/* seis entradas: el menú se aprieta antes de tocar el descriptor */
.hdr__izq{gap:clamp(20px,2.2vw,36px)}
.nav{gap:clamp(16px,1.7vw,28px);flex-wrap:nowrap}
.nav a{white-space:nowrap}
/* el menú, siempre a la derecha, con aire antes de «Hablemos» */
@media (min-width:1241px){
  .hdr__izq{flex:1 1 auto}
  .hdr__nav{margin-left:auto;margin-right:clamp(24px,2.6vw,40px)}
}
@media (max-width:1380px) and (min-width:761px){
  .nav a{font-size:.75rem;letter-spacing:.03em}
}
/* Por debajo de 1240 px las seis entradas no caben junto al descriptor:
   el menú pasa a la hamburguesa (mismo desplegable que en móvil). */
@media (max-width:1240px) and (min-width:761px){
  .nav{display:none}
  .burger{display:inline-flex;margin-left:auto;margin-right:clamp(12px,2vw,24px)}
  .hdr__nav{position:fixed;inset:86px 20px auto auto;width:min(360px,calc(100vw - 40px));
    background:var(--panel);border:1px solid rgba(24,21,19,.12);border-radius:20px;
    box-shadow:0 18px 44px -20px rgba(24,21,19,.38);padding:.5rem 1.25rem 1rem;
    transform:translate3d(0,-8px,0);opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease-suave),transform .4s var(--muelle),visibility 0s .3s}
  .hdr.is-abierta .hdr__nav{opacity:1;transform:none;visibility:visible;transition-delay:0s}
  .hdr.is-abierta .nav{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hdr.is-abierta .nav li{width:100%}
  .hdr.is-abierta .nav a{min-height:54px;width:100%;font-size:1rem;color:var(--tinta);
    border-bottom:1px solid rgba(24,21,19,.12)}
  html:is(:has(.hero--video),.pag-int) .hdr.is-abierta .nav a{color:var(--tinta)}
  html:is(:has(.hero--video),.pag-int) .hdr.is-abierta .nav a::after{background:var(--tinta)}
  .hdr.is-abierta .nav__cta{display:block}
  .hdr.is-abierta .nav__cta a{justify-content:center;margin-top:12px;border:0;border-radius:4px;
    background:var(--naran-btn,#B43802);color:#fff}
  .hdr__desc{white-space:nowrap}
  .hdr__desc span{display:block}
}

/* ═══ HERO · nuevas proporciones ══════════════════════════════════════════
   Maqueta del PPT: solo la jerarquía. La frase baja de cuerpo (unos 31 px
   a 1440, sigue siendo texto grande) y «Consultores que van más…» sube.
   La composición limpia de la V6 se mantiene: entre dos filetes a todo el
   ancho, con los botones a la derecha. */
.hero--video .hero__cont{padding-top:clamp(108px,14vh,140px)}
.hero__frase{font-size:min(2.15vw,2.4rem);line-height:1.16;letter-spacing:-.02em}
.hero--video .hero__frase{margin-bottom:clamp(32px,6vh,72px)}

.hero--video .hero__t{font-size:clamp(2.2rem,.8rem + 3.3vw,4rem);line-height:.98;letter-spacing:-.012em}

/* ── Credenciales: ocho logotipos reales, en blanco ───────────────────── */
.cred--vf{grid-template-columns:repeat(8,minmax(0,1fr))}
.cred--vf .cred__a{gap:12px;padding-inline:clamp(12px,1.2vw,20px)}
.cred--vf .cred__logo{height:44px;--lh:24px}
.cred--vf .cred__tx{font-size:.875rem;line-height:1.45}
.cred__ver{margin-top:auto;font-family:var(--titulo);font-weight:600;font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;opacity:.82}
.cred__ver span{display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1)}
a.cred__a:hover .cred__ver{opacity:1}
a.cred__a:hover .cred__ver span{transform:translateX(4px)}
a.cred__a:hover .cred__tx{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* no caben los ocho: carrusel que se desliza (con el dedo o la rueda) */
@media (max-width:1240px){
  .cred--vf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .cred--vf::-webkit-scrollbar{display:none}
  .cred--vf .cred__it{flex:0 0 min(240px,64vw);scroll-snap-align:start}
  .cred--vf .cred__it:last-child .cred__a{padding-right:clamp(16px,1.8vw,30px)}
}

@media (max-width:1024px){
  .hero__frase{font-size:clamp(1.3rem,.85rem + 1.9vw,1.8rem)}
}
@media (max-width:767px){
  .hero--video .hero__cont{padding-top:92px}
  .hero__frase{font-size:min(21px,5.6vw);line-height:1.2}
  .hero--video .hero__frase{margin-bottom:28px}
  .hero--video .hero__t{font-size:min(34px,9vw)}
}

/* ═══ NÚMEROS · cuatro cifras del cliente ═════════════════════════════════
   Ahora la banda es una pieza propia: la de sectores (oscura) la separa de
   los casos, así que recupera sus esquinas y el aire gris de abajo. */
.num5{padding-bottom:10px}
.num5__card{border-radius:0 0 8px 8px}
.cas{padding-top:0}
.cas__card{border-radius:8px}
.num5--vf .num5__v{align-items:baseline;color:var(--naran)}
.num5__mas{font-size:.55em;line-height:1;letter-spacing:0;margin-right:.04em;color:var(--naran)}
.num5--vf .num5__v{font-size:clamp(2.6rem,1.3rem + 3.1vw,4.9rem)}
.num5--vf .num5__it{gap:12px;min-width:0}
.num5--vf .num5__lab{max-width:11ch;min-width:0}
@media (max-width:1100px){
  .num5--vf .num5__it{flex-direction:column;align-items:flex-start;gap:8px}
  .num5--vf .num5__lab{max-width:none}
}

/* ═══ SECTORES · banda oscura con iconos ══════════════════════════════════ */
.sec7{background:var(--papel);padding:0 10px 10px}
.sec7__card{border-radius:8px;background:#0A2E4D;color:#fff;
  padding:clamp(48px,5.5vw,88px) clamp(20px,4.2vw,60px) clamp(44px,5vw,80px)}
.sec7__cab{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;
  margin-bottom:clamp(32px,4vw,56px);padding-bottom:clamp(18px,2vw,26px);border-bottom:1px solid rgba(255,255,255,.18)}
.sec7__cab .eye{order:2;margin:0}
.sec7__h{margin:0;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.8rem,1rem + 2.3vw,3.3rem);line-height:1.02;letter-spacing:-.01em;color:#fff}
.sec7__h em{font-family:var(--serif-it);font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:0;font-size:1.12em;color:#7FD0F0}
.sec7__l{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none}
.sec7__g{padding:4px clamp(14px,1.6vw,28px) 4px;box-shadow:inset 1px 0 0 rgba(255,255,255,.14)}
.sec7__g:first-child{padding-left:0;box-shadow:none}
.sec7__ico{display:block;width:34px;height:34px;margin-bottom:18px;fill:none;stroke:#7FD0F0;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sec7__t{min-height:2.5em;margin:0 0 14px;font-family:var(--titulo);font-weight:700;font-size:.9375rem;line-height:1.25;
  letter-spacing:.06em;text-transform:uppercase;color:#fff}
.sec7__s{margin:0;padding:0;list-style:none}
.sec7__s li{padding:7px 0;font-size:.9375rem;line-height:1.4;color:#BFD0DA;
  border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:1100px){
  .sec7__l{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
  .sec7__g:nth-child(4){padding-left:0;box-shadow:none}
}
@media (max-width:640px){
  .sec7__l{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .sec7__g:nth-child(4){padding-left:clamp(14px,1.6vw,28px);box-shadow:inset 1px 0 0 rgba(255,255,255,.14)}
  .sec7__g:nth-child(odd){padding-left:0;box-shadow:none}
  .sec7__g{padding-right:12px}
}

/* ═══ CASOS · logotipo, titular nuevo y resumen ═══════════════════════════ */
.caso5{min-height:0}
.caso5__logo{height:clamp(56px,4.8vw,68px);--lh:clamp(28px,2.4vw,34px)}
.caso5__sig--gnd{display:flex;flex-direction:column;gap:4px;font-size:clamp(1.4rem,1rem + .8vw,1.75rem)}
.caso5__sig--gnd small{font-family:var(--titulo);font-weight:600;font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris)}
.caso5__cab{display:flex;flex-direction:column;flex:1 1 auto}
.caso5__t{font-size:clamp(1rem,.92rem + .25vw,1.125rem);line-height:1.3;margin:0 0 10px}
.caso5__res{margin:0;font-size:.9375rem;line-height:1.55;color:#3C4046}

/* ═══ VOZ DEL CLIENTE ═════════════════════════════════════════════════════ */
/* en las tarjetas, los logotipos van en monocolor gris (solo aquí; en el
   detalle, el hero y los casos siguen a color) */
.vz6__logo{--lh:30px}
.vz6__logo img.logo{filter:brightness(0) invert(.6)}
.vz6__logo--sig{font-size:1.375rem;letter-spacing:.04em;color:#999999}
.vz6__q p{font-size:1.0625rem;line-height:1.5}
/* «Leer completa» con su «+» naranja */
.vz6 .vz__leer{display:inline-flex;align-items:center;gap:10px}
.vz__mas-i{position:relative;flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--naran);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.vz__mas-i::before,.vz__mas-i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;
  margin:-1px 0 0 -5px;border-radius:1px;background:#fff}
.vz__mas-i::after{transform:rotate(90deg)}
.vz__leer:hover .vz__mas-i{transform:rotate(90deg)}

/* «Ver más opiniones» tiene que destacar: azul claro y blanco en negrita */
.voz__mas{min-height:52px;padding:0 26px;border-radius:4px;background:#1A78B8;
  box-shadow:inset 0 0 0 1px rgba(127,208,240,.9);color:#fff;
  font-family:var(--titulo);font-size:.9375rem;font-weight:700;letter-spacing:.04em}
.voz__mas:hover{background:#0E74B8}
.voz__mas-n{font-weight:500;opacity:.9}

/* el detalle, con más color: logotipo, palabras clave en pastillas y las
   comillas naranjas */
.vzd__logo{height:48px;margin-bottom:20px;--lh:28px}
.vzd__k{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0 48px 0 0;list-style:none}
.vzd__k li{padding:7px 14px;border-radius:999px;background:#EAF4F8;color:var(--navy);
  font-family:var(--titulo);font-weight:600;font-size:.6875rem;line-height:1.2;letter-spacing:.08em;
  text-transform:uppercase}
.vzd__k:empty{display:none}
.vzd__c{font-family:var(--serif-it);font-style:italic;font-weight:400;font-size:1.9em;line-height:0;
  vertical-align:-.28em;color:var(--naran);margin:0 .06em}

/* ═══ POR QUÉ HELIOX · una foto más, sin naranja ni portátil ═════════════ */
.eq--v5f .eq__grid{grid-template-areas:
    "tit tit fa  fa"
    "cit p1  fc  p2"
    "p3  fd  fd  p4"}
.eq--fd{grid-area:fd}
.eq--v5f .eq--fa .eq__img{object-position:50% 22%}
.eq--v5f .eq--fc .eq__img{object-position:42% 50%}
.eq--v5f .eq--fd .eq__img{object-position:50% 30%}
@media (max-width:900px){
  .eq--v5f .eq__grid{grid-template-areas:
    "tit tit" "fa fa" "cit cit" "p1 p2" "fc fc" "p3 p4" "fd fd"}
}

/* ═══ ECOSISTEMA · el titular es la frase del cierre; sónar más claro ════ */
.eco__h{font-size:clamp(1.8rem,1rem + 2.2vw,3.2rem)}
.eco__h em{display:block;color:#7FD0F0}
.son__r{box-shadow:inset 0 0 0 1px rgba(127,208,240,.5)}
.son__r--3{background:rgba(64,160,200,.22)}
.son__r--2{background:rgba(72,170,210,.24)}
.son__r--1{background:rgba(96,186,224,.32)}
.son__barrido{background:conic-gradient(from 0deg,rgba(127,208,240,0) 0deg,rgba(127,208,240,0) 290deg,
    rgba(127,208,240,.26) 350deg,rgba(214,240,250,.7) 360deg)}
.son__logo{opacity:1}
.js .son__lab{opacity:calc(.42 + .58 * var(--k,0))}

/* ═══ EQUIPO · posarse encima basta; la foto funde con la «apoyada» ═════ */
.tm__foto{position:relative}
.tm__foto .tm__b{position:absolute;inset:0;opacity:0;filter:none;
  transition:opacity .9s cubic-bezier(.4,0,.2,1)}
@media (hover:hover) and (pointer:fine) and (min-width:1101px){
  .tm__p.is-activa .tm__foto{cursor:default}
    .tm__p.is-activa .tm__foto:hover .tm__b,
  .tm__p.is-activa.is-apoyada .tm__b{opacity:1;transition:opacity 1.1s cubic-bezier(.4,0,.2,1) .8s}
}
@media (max-width:1100px){.tm__foto .tm__b{display:none}}
@media (prefers-reduced-motion:reduce){.tm__foto .tm__b{transition:none}}

/* ═══ ALIANZAS · logotipo y palabras clave ════════════════════════════════
   La celda del logotipo baja de 110–150 px a 88–104 px y el logotipo a
   un tamaño de firma, no de cartel. */
.ali__k{margin:0}
.ali__logo{min-height:clamp(88px,7vw,104px);padding:18px 24px;justify-content:flex-start;--lh:28px}


/* ═══ HIDEOX · el rectángulo, más bajo ════════════════════════════════════
   De 560–720 px a 440–540 px: el panel abierto sigue cabiendo entero
   (antetítulo, titular, texto y la letra grande al pie). */
@media (min-width:861px){
  .hx__l{height:clamp(440px,34vw,540px)}
  .hx__p.is-activa .hx__k{transform:scale(1.35)}
}

/* ═══ CIERRE · foto de Alfredo ═══════════════════════════════════════════ */
.ftr--v6 .dir__foto{justify-self:end}
.ftr--v6 .dir__foto img{width:100%;height:100%;object-fit:cover}

/* ═══ PIE · lema + logotipo líquido, y el pie legal al final del todo ════ */
/* columnas en proporción: lema = 0,44 × logotipo de ancho → los dos salen
   del mismo alto (lema 300×150, logotipo 220×53,7). Las tres líneas, al
   mismo ancho con `textLength`, como en el ejemplo del cliente. */
.ftr__marca-xl{display:grid;grid-template-columns:minmax(0,.41fr) 1px minmax(0,1fr);align-items:center;
  gap:clamp(14px,1.8vw,28px);margin:clamp(40px,5vw,72px) clamp(20px,4.2vw,60px) 0}
.ftr__lema-xl{display:block;width:100%;height:auto;overflow:visible}
.ftr__lema-xl text{font-family:var(--titulo);font-weight:200;font-size:37px;letter-spacing:0;fill:var(--navy)}
.ftr__fil-xl{align-self:stretch;background:rgba(0,75,135,.35)}
.ftr__marca-xl .ftr__xl{margin:0;min-width:0}
.ftr--v6 .ftr__marca-xl + .ftr__base{margin-top:clamp(28px,3.5vw,48px)}
@media (max-width:640px){
  .ftr__marca-xl{grid-template-columns:1fr;gap:16px}
  .ftr__lema-xl{width:min(260px,70vw)}
  .ftr__fil-xl{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   V7 · PPT y vídeo del 14/10
   Contraste nuevo: blanco / #D34202 («¿Transformamos?») 4,62:1 · naranja
   claro #FF7A3D / #0A2E4D (cifras sobre la banda oscura) 5,36:1 · #7FD0F0 /
   #0A2E4D 8,06:1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera: descriptor en minúsculas, sin cursiva (se leía mal) ────── */
.hdr__desc{font-family:var(--sans);font-style:normal;font-weight:400;font-size:.875rem;
  line-height:1.3;letter-spacing:.01em;text-transform:lowercase}
@media (max-width:760px){.hdr__desc{font-size:.75rem}}
/* icono de LinkedIn junto a «Hablemos» */
.hdr__li{display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;margin-right:-12px;
  border-radius:4px;color:#fff;transition:background-color .25s var(--ease)}
.hdr__li svg{width:18px;height:18px;fill:currentColor}
.hdr__li:hover{background:rgba(255,255,255,.14)}
.hdr__li:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:760px){.hdr__in{gap:2px}.hdr__li{order:1;width:40px;margin:0 6px 0 auto}.burger{order:2}.hdr__desc{max-width:150px}}

/* ── Todos los «Hablemos» llevan al cierre de Alfredo ─────────────────── */
#hablemos{scroll-margin-top:clamp(84px,7vw,100px)}
.ftr .btn--naranja,.ftr .btn--naranja:hover{color:#fff}

/* ── Cifras + sectores: una sola pieza oscura («agua/mar») ────────────── */
.mez5{padding-bottom:10px}
.mez5__card{border-radius:8px}
.num5{padding-bottom:0}
.num5__card{border-radius:8px 8px 0 0;background:#0A2E4D;color:#fff}
.num5__t{color:#fff}
.num5__t em{color:#FF7A3D}
.num5--vf .num5__v,.num5__mas{color:#FF7A3D}
.num5__lab{color:#fff}
.num5__it{box-shadow:inset 1px 0 0 rgba(255,255,255,.16)}
.num5__it:first-child{box-shadow:none}
.sec7{padding-top:0}
.sec7__card{border-radius:0 0 8px 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.sec7__cab{border-bottom:0;padding-bottom:0}
.sec7__h{font-size:clamp(1.6rem,.9rem + 2vw,2.9rem)}
.sec7__h em{display:block}
.sec7__l{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){
  .sec7__l{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sec7__g:nth-child(4){padding-left:0;box-shadow:none}
}
@media (max-width:640px){
  .sec7__l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec7__g:nth-child(4){padding-left:clamp(14px,1.6vw,28px);box-shadow:inset 1px 0 0 rgba(255,255,255,.14)}
  .sec7__g:nth-child(odd){padding-left:0;box-shadow:none}
  .sec7__t{font-size:.8125rem;letter-spacing:.04em;min-height:0}
}
/* canales de venta, bajo los sectores */
.sec7__ct{margin:clamp(40px,4.5vw,64px) 0 18px;font-family:var(--titulo);font-weight:600;font-size:.75rem;
  letter-spacing:2.6px;text-transform:uppercase;color:#7FD0F0}
.can7{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;
  border-top:1px solid rgba(255,255,255,.18)}
.can7__it{display:flex;flex-direction:column;gap:6px;padding:18px clamp(12px,1.4vw,24px) 4px;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.12)}
.can7__it:first-child{padding-left:0;box-shadow:none}
.can7__t{font-family:var(--titulo);font-weight:700;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.can7__d{font-size:.9375rem;line-height:1.45;color:#BFD0DA}
@media (max-width:1100px){
  .can7{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
  .can7__it:nth-child(4){padding-left:0;box-shadow:none}
}
@media (max-width:640px){
  .can7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .can7__it:nth-child(4){padding-left:clamp(12px,1.4vw,24px);box-shadow:inset 1px 0 0 rgba(255,255,255,.12)}
  .can7__it:nth-child(odd){padding-left:0;box-shadow:none}
}

/* ── Casos: toda la pieza enlaza a su ficha ───────────────────────────── */
.caso5{position:relative}
.caso5__a{color:inherit;text-decoration:none}
.caso5__a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.caso5__a:focus-visible{outline:none}
.caso5:has(.caso5__a:focus-visible){outline:3px solid var(--navy);outline-offset:3px}
.caso5:hover .caso5__t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cas__der{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cas__todos{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--titulo);font-weight:600;
  font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);
  text-decoration:underline;text-underline-offset:5px}
.cas__todos span{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.cas__todos:hover span{transform:translateX(4px)}
/* sigla de GND (sin logotipo único) */
.sigla-gnd{display:inline-flex;flex-direction:column;gap:4px;font-family:var(--titulo);font-weight:700;
  font-size:clamp(1.4rem,1rem + .8vw,1.75rem);line-height:1;letter-spacing:.02em;color:var(--tinta)}
.sigla-gnd small{font-weight:600;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}

/* ── Cierre: foto de Alfredo cuadrada, con él y su reflejo centrados ──── */
/* la foto ya viene recortada (vf-alfredo-pasillo, 5:4) con Alfredo y su
   reflejo centrados: el marco usa su misma proporción y no recorta nada */
/* la foto ocupa toda su columna, que crece (44/50) para igualar el peso
   del bloque de la cita */
@media (min-width:981px){.ftr--v6 .ftr__top--dir{grid-template-columns:minmax(0,44fr) minmax(0,50fr)}}
.ftr--v6 .dir__foto{aspect-ratio:5/4;width:100%;max-width:none;justify-self:stretch}
.ftr--v6 .dir__foto img{object-position:50% 50%}
/* el lema y el logotipo líquido suben un poco */
.ftr__marca-xl{margin-top:clamp(24px,3vw,44px)}