/* ==========================================================================
   IFPCM - Hoja de estilos
   Paleta y tipografia derivadas de la placa institucional:
   azul de esmalte, oro del relieve, blanco de la paloma.
   ========================================================================== */

/* --- 0. Tipografias autohospedadas (sin pedidos a Google) --------------- */
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/saira-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/saira-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/saira-condensed-latin-700-normal.woff2') format('woff2'); }

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap;
    src: url('../fonts/ibm-plex-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
    --noche:      #060D1B;
    --azul-900:   #0B1832;
    --azul-800:   #0F2148;
    --azul-700:   #143063;
    --azul-500:   #1B54B0;
    --oro-600:    #A8802C;
    --oro-500:    #C69B3C;
    --oro-300:    #E8CE86;
    --hielo:      #EDF1F7;
    --hielo-2:    #DCE4F0;
    --tinta:      #0E1524;
    --gris:       #4C5872;
    --blanco:     #FFFFFF;

    --f-display: 'Saira Condensed', 'Arial Narrow', Arial, sans-serif;
    --f-cuerpo:  'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --f-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --ancho: 1180px;
    --gap: clamp(20px, 3vw, 40px);
    --sec-y: clamp(72px, 8.5vw, 128px);
    --r: 3px;
    --hair: rgba(198, 155, 60, .30);
    --trans: 260ms cubic-bezier(.2, .7, .3, 1);
}

/* --- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--f-cuerpo);
    font-size: clamp(16px, .55vw + 14.5px, 17.5px);
    line-height: 1.68;
    color: var(--tinta);
    background: var(--blanco);
    overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: var(--azul-500); text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3 {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: .012em;
    margin: 0;
    text-transform: uppercase;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--oro-500);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--oro-500); color: var(--noche);
    padding: 12px 20px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: clamp(18px, 4vw, 32px);
}

/* --- 3. Franja superior ------------------------------------------------- */
.franja {
    background: var(--noche);
    color: rgba(255, 255, 255, .62);
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.franja__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 38px;
}
.franja__lema { color: var(--oro-300); }
.franja__datos { display: flex; align-items: center; gap: 14px; }
.franja a { color: inherit; text-decoration: none; }
.franja a:hover { color: var(--blanco); }
.franja__sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .22); }

@media (max-width: 720px) {
    .franja__lema { display: none; }
    .franja__in { justify-content: center; }
}

/* --- 4. Barra de navegacion -------------------------------------------- */
.barra {
    position: sticky; top: 0; z-index: 90;
    background: rgba(6, 13, 27, .90);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(198, 155, 60, .22);
    transition: background var(--trans), box-shadow var(--trans);
}
.barra.esta-fija { background: rgba(6, 13, 27, .985); box-shadow: 0 10px 34px rgba(0, 0, 0, .32); }

.barra__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 70px; }

.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca__placa { width: 44px; height: 44px; object-fit: contain; }
.marca__txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca__txt strong {
    font-family: var(--f-display); font-size: 22px; letter-spacing: .1em;
    color: var(--blanco); text-transform: uppercase;
}
.marca__txt em {
    font-family: var(--f-mono); font-style: normal; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--oro-300);
}

.menu { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.menu__lista { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 26px); list-style: none; margin: 0; padding: 0; }
.menu__lista a {
    font-family: var(--f-mono); font-size: 12px; letter-spacing: .09em;
    text-transform: uppercase; color: rgba(255, 255, 255, .78);
    text-decoration: none; padding: 6px 0; position: relative;
}
.menu__lista a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
    background: var(--oro-500); transition: right var(--trans);
}
.menu__lista a:hover { color: var(--blanco); }
.menu__lista a:hover::after { right: 0; }

.hamb { display: none; }

/* --- 5. Botones -------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--f-display); font-size: 17px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
    padding: 13px 26px; border: 1px solid transparent; border-radius: var(--r);
    cursor: pointer; transition: transform var(--trans), background var(--trans), color var(--trans), border-color var(--trans);
}
.btn--oro {
    background: linear-gradient(180deg, var(--oro-300), var(--oro-500) 60%, var(--oro-600));
    color: var(--noche); border-color: var(--oro-600);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn--oro:hover { transform: translateY(-2px); }
.btn--linea { border-color: rgba(255, 255, 255, .42); color: var(--blanco); background: transparent; }
.btn--linea:hover { border-color: var(--oro-500); color: var(--oro-300); transform: translateY(-2px); }
.btn--sm { font-size: 14px; padding: 9px 18px; }

.sec--clara .btn--linea { border-color: var(--azul-700); color: var(--azul-700); }
.sec--clara .btn--linea:hover { border-color: var(--oro-600); color: var(--oro-600); }

.enlace {
    display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
    font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--azul-500); text-decoration: none;
    padding-top: 14px;
}
.enlace svg { width: 18px; height: 18px; transition: transform var(--trans); }
.enlace:hover { color: var(--oro-600); }
.enlace:hover svg { transform: translateX(4px); }

/* --- 6. Escudo y encabezados ------------------------------------------- */
.escudo { width: 13px; height: 15px; fill: var(--oro-500); flex: none; }
.escudo--vin { margin-top: 5px; }

.eyebrow {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--oro-600); margin: 0 0 16px;
}
.eyebrow--claro { color: var(--oro-300); }

.enc { max-width: 760px; margin-bottom: clamp(34px, 4vw, 58px); }
.enc__eyebrow {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--oro-600); margin: 0 0 14px;
}
.enc__eyebrow span { position: relative; padding-right: 14px; }
.enc__titulo { font-size: clamp(34px, 5.4vw, 62px); color: var(--azul-900); }
.enc--claro .enc__eyebrow { color: var(--oro-300); }
.enc--claro .enc__titulo { color: var(--blanco); }
.enc--centro { margin-inline: auto; text-align: center; }
.enc--centro .enc__eyebrow { justify-content: center; }

.tit { font-size: clamp(30px, 4.4vw, 52px); color: var(--azul-900); }
.tit--claro { color: var(--blanco); }

.sub {
    font-size: clamp(19px, 1.6vw, 23px); letter-spacing: .05em;
    color: var(--azul-700); margin: 0 0 18px;
}
.sub--centro { text-align: center; }
.sec--oscura .sub, .sec--noche .sub { color: var(--oro-300); }

/* --- 7. Secciones ------------------------------------------------------- */
.sec { padding-block: var(--sec-y); position: relative; scroll-margin-top: 72px; }
.sec--clara { background: var(--hielo); }
.sec--oscura { background: var(--azul-900); color: rgba(255, 255, 255, .80); }
.sec--noche { background: var(--noche); color: rgba(255, 255, 255, .80); }
.sec--oscura a, .sec--noche a { color: var(--oro-300); }

.sec__intro {
    max-width: 620px; margin: -18px 0 clamp(34px, 4vw, 54px);
    font-size: 1.06em; color: var(--gris);
}
.sec__intro--claro { color: rgba(255, 255, 255, .72); margin-inline: auto; text-align: center; }

/* Filete dorado entre secciones */
.sec--oscura + .sec--clara, .sec--noche + .sec--clara,
.sec--clara + .sec--oscura, .sec--clara + .sec--noche { border-top: 1px solid var(--hair); }

/* --- 8. Hero ----------------------------------------------------------- */
.hero {
    position: relative; isolation: isolate;
    background: var(--noche); color: var(--blanco);
    padding-top: clamp(48px, 6vw, 84px);
    scroll-margin-top: 72px;
}
.hero__fondo { position: absolute; inset: 0; z-index: -2; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(105deg, rgba(6, 13, 27, .96) 0%, rgba(11, 24, 50, .90) 46%, rgba(20, 48, 99, .70) 100%),
        radial-gradient(120% 80% at 78% 30%, rgba(27, 84, 176, .38), transparent 60%);
}

.hero__in {
    display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr);
    align-items: center; gap: clamp(24px, 4vw, 64px);
    padding-bottom: clamp(52px, 6vw, 86px);
}

.hero__titulo {
    font-size: clamp(38px, 7.2vw, 82px);
    line-height: .96; letter-spacing: .005em; margin: 0 0 14px;
}
.hero__titulo span { display: block; }
.hero__titulo span:nth-child(2) { color: var(--oro-300); }

.hero__lema {
    font-family: var(--f-mono); font-size: clamp(11px, 1vw, 12.5px);
    letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255, 255, 255, .70);
    padding-top: 14px; margin: 0 0 22px;
    border-top: 1px solid var(--hair);
    max-width: 520px;
}
.hero__bajada { max-width: 540px; font-size: 1.08em; color: rgba(255, 255, 255, .84); margin-bottom: 30px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Placa con barrido metalico (una sola vez al cargar) */
.hero__placa { position: relative; justify-self: center; max-width: 420px; }
.hero__placa img {
    width: 100%; filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .55));
    animation: entra-placa 1100ms cubic-bezier(.16, .84, .3, 1) both;
}
.hero__brillo {
    position: absolute; inset: 6%;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
    mix-blend-mode: overlay; pointer-events: none;
    clip-path: circle(46% at 50% 50%);
    animation: barrido 1600ms 900ms ease-in-out 1 both;
}
@keyframes entra-placa {
    from { opacity: 0; transform: scale(.86) translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@keyframes barrido {
    from { transform: translateX(-120%); opacity: 0; }
    35%  { opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}

/* Franja de datos institucionales */
.hero__datos { border-top: 1px solid var(--hair); background: rgba(6, 13, 27, .58); }
.hero__datos-in { display: grid; grid-template-columns: repeat(3, 1fr); }
.dato { padding: 22px clamp(14px, 2vw, 26px) 22px 0; }
.dato + .dato { border-left: 1px solid rgba(255, 255, 255, .12); padding-left: clamp(16px, 2.4vw, 34px); }
.dato__label {
    display: block; font-family: var(--f-mono); font-size: 10.5px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--oro-300); margin-bottom: 6px;
}
.dato__valor {
    display: block; font-family: var(--f-display); font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 600; letter-spacing: .045em; text-transform: uppercase; color: var(--blanco);
    line-height: 1.2;
}

@media (max-width: 900px) {
    .hero__in { grid-template-columns: 1fr; text-align: left; }
    .hero__placa { order: -1; max-width: 220px; justify-self: start; }
    .hero__datos-in { grid-template-columns: 1fr; }
    .dato { padding: 16px 0; }
    .dato + .dato { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding-left: 0; }
}

/* --- 9. Video ---------------------------------------------------------- */
.video__cab { max-width: 720px; margin-bottom: clamp(28px, 3.6vw, 48px); }
.video__cita {
    margin: 22px 0 0; padding-left: 20px; border-left: 2px solid var(--oro-500);
    font-style: italic; color: rgba(255, 255, 255, .80);
}
.video__cita cite {
    display: block; margin-top: 8px; font-family: var(--f-mono); font-style: normal;
    font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-300);
}
.video__marco {
    border: 1px solid var(--hair); padding: 8px;
    background: linear-gradient(180deg, rgba(198, 155, 60, .10), transparent);
}
.video__marco video { width: 100%; aspect-ratio: 16 / 9; background: #000; object-fit: cover; }

/* --- 10. Mision -------------------------------------------------------- */
.mision__grid {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr);
    gap: clamp(28px, 4vw, 60px); align-items: start;
}
.p--guia { font-size: 1.16em; color: var(--tinta); }
.mision__texto p + p { color: var(--gris); }

.entornos { border-top: 2px solid var(--oro-500); padding-top: 22px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
    font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--azul-700); background: var(--blanco);
    border: 1px solid var(--hielo-2); padding: 7px 12px; border-radius: 100px;
}

.funciones { margin-top: clamp(44px, 5vw, 76px); border-top: 1px solid var(--hielo-2); padding-top: clamp(32px, 4vw, 52px); }
.lista-escudo {
    list-style: none; margin: 0; padding: 0;
    columns: 2; column-gap: clamp(28px, 4vw, 60px);
}
.lista-escudo li {
    display: flex; gap: 11px; align-items: flex-start;
    break-inside: avoid; padding: 9px 0;
    border-bottom: 1px solid var(--hielo-2);
    color: var(--gris); font-size: .98em;
}

@media (max-width: 860px) {
    .mision__grid { grid-template-columns: 1fr; }
    .lista-escudo { columns: 1; }
}

/* --- 11. Sociedad ------------------------------------------------------ */
.sociedad__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 4vw, 58px); align-items: start;
}
.bloque + .bloque { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .12); }
.bloque__tit {
    font-size: clamp(20px, 1.9vw, 26px); color: var(--oro-300);
    letter-spacing: .05em; margin-bottom: 10px;
}
.bloque p { color: rgba(255, 255, 255, .76); }

.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mosaico__f { margin: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.mosaico__f img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 700ms var(--trans); }
.mosaico__f:nth-child(1) { grid-row: span 2; }
.mosaico__f:nth-child(1) img { aspect-ratio: 4 / 5.2; }
.mosaico__f:nth-child(4) { grid-column: 1 / -1; }
.mosaico__f:nth-child(4) img { aspect-ratio: 16 / 6.4; }
.mosaico__f:hover img { transform: scale(1.05); }

@media (max-width: 860px) {
    .sociedad__grid { grid-template-columns: 1fr; }
    .mosaico__f:nth-child(1) { grid-row: auto; }
    .mosaico__f:nth-child(1) img { aspect-ratio: 4 / 3; }
    .mosaico__f:nth-child(4) img { aspect-ratio: 16 / 9; }
}

/* --- 12. Servicios ----------------------------------------------------- */
.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.serv {
    display: flex; flex-direction: column;
    background: var(--blanco); border: 1px solid var(--hielo-2);
    padding: clamp(24px, 2.4vw, 32px); position: relative;
    transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.serv::before {
    content: ''; position: absolute; top: 0; left: 0; width: 42px; height: 2px;
    background: var(--oro-500); transition: width var(--trans);
}
.serv:hover { transform: translateY(-4px); border-color: var(--hair); box-shadow: 0 16px 38px rgba(11, 24, 50, .10); }
.serv:hover::before { width: 100%; }
.serv__ico { color: var(--azul-500); margin-bottom: 16px; }
.serv__ico .ico { width: 34px; height: 34px; }
.serv__tit { font-size: clamp(19px, 1.7vw, 23px); color: var(--azul-900); letter-spacing: .04em; margin-bottom: 10px; }
.serv__txt { color: var(--gris); font-size: .97em; margin-bottom: 4px; }

/* --- 13. Credenciales (Unete) ------------------------------------------ */
.credenciales { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.cred {
    display: flex; flex-direction: column;
    background: linear-gradient(155deg, var(--azul-800), var(--azul-900) 62%, var(--noche));
    border: 1px solid var(--hair);
    padding: clamp(26px, 3vw, 40px);
    position: relative; overflow: hidden;
}
.cred::after {
    content: ''; position: absolute; right: -40px; bottom: -40px; width: 190px; height: 190px;
    border: 1px solid rgba(198, 155, 60, .16); border-radius: 50%;
}
.cred__cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.cred__label {
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--noche); background: var(--oro-500); padding: 5px 11px;
}
.cred__placa { opacity: .9; }
.cred__tit { font-size: clamp(22px, 2.2vw, 30px); color: var(--blanco); margin-bottom: 12px; }
.cred__txt { color: rgba(255, 255, 255, .74); font-size: .98em; margin-bottom: 26px; }
.cred__btn { align-self: flex-start; margin-top: auto; }

/* --- 14. Galeria ------------------------------------------------------- */
.galeria { columns: 4; column-gap: 12px; }
.galeria__it {
    display: block; width: 100%; margin: 0 0 12px; padding: 0;
    border: 1px solid var(--hielo-2); background: none; cursor: zoom-in;
    break-inside: avoid; overflow: hidden; transition: border-color var(--trans);
}
.galeria__it img { width: 100%; transition: transform 800ms var(--trans), filter var(--trans); }
.galeria__it:hover { border-color: var(--oro-500); }
.galeria__it:hover img { transform: scale(1.04); }

@media (max-width: 1000px) { .galeria { columns: 3; } }
@media (max-width: 700px)  { .galeria { columns: 2; } }

/* Lupa / lightbox */
.lupa {
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4, 8, 18, .94); padding: clamp(12px, 4vw, 48px);
}
.lupa[hidden] { display: none; }
.lupa__img { max-width: 100%; max-height: 86vh; object-fit: contain; border: 1px solid rgba(198, 155, 60, .35); }
.lupa__cerrar, .lupa__nav {
    position: absolute; background: rgba(255, 255, 255, .07); color: var(--blanco);
    border: 1px solid rgba(255, 255, 255, .22); cursor: pointer;
    width: 48px; height: 48px; font-size: 26px; line-height: 1;
    display: grid; place-items: center; transition: background var(--trans);
}
.lupa__cerrar:hover, .lupa__nav:hover { background: rgba(198, 155, 60, .3); }
.lupa__cerrar { top: 18px; right: 18px; }
.lupa__nav--prev { left: 14px; }
.lupa__nav--next { right: 14px; }
.lupa__contador {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: rgba(255, 255, 255, .7);
}

/* --- 15. Donaciones ---------------------------------------------------- */
.medios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.medio {
    background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12);
    padding: clamp(24px, 2.6vw, 34px); text-align: center;
    display: flex; flex-direction: column; gap: 16px; height: 100%;
}
.medio__tit {
    font-size: clamp(19px, 1.7vw, 23px); color: var(--oro-300);
    letter-spacing: .1em; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.medio__qr { background: var(--blanco); padding: 12px; align-self: center; }
.medio__qr img { width: 190px; height: 190px; object-fit: contain; }
.medio__qr--falta {
    background: rgba(255, 255, 255, .06); border: 1px dashed rgba(198, 155, 60, .5);
    width: 100%; min-height: 190px; display: grid; place-items: center;
    padding: 18px; font-size: 12.5px; color: var(--oro-300);
}
.medio__qr--falta code { font-family: var(--f-mono); font-size: 11px; display: block; margin-top: 6px; word-break: break-all; }
.medio__datos { margin: 0; text-align: left; }
.medio__datos .fila { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.medio__datos dt {
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--oro-300); margin-bottom: 4px;
}
.medio__datos dd {
    margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-family: var(--f-mono); font-size: 13px; color: var(--blanco); word-break: break-word;
}
.copiar {
    flex: none; background: transparent; border: 1px solid rgba(198, 155, 60, .5);
    color: var(--oro-300); font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; padding: 4px 9px; cursor: pointer; transition: background var(--trans);
}
.copiar:hover { background: rgba(198, 155, 60, .2); }
.copiar.ok { background: var(--oro-500); color: var(--noche); border-color: var(--oro-500); }
.medio__nota { font-size: .88em; color: rgba(255, 255, 255, .58); margin-top: auto; }

/* --- 16. Contacto ------------------------------------------------------ */
.contacto__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.ficha { border-top: 2px solid var(--oro-500); padding-top: 22px; }
.ficha__ico { color: var(--oro-300); display: block; margin-bottom: 14px; }
.ficha__ico .ico { width: 26px; height: 26px; }
.ficha__tit {
    font-size: 17px; letter-spacing: .12em; color: var(--blanco); margin-bottom: 10px;
}
.ficha p { color: rgba(255, 255, 255, .76); margin-bottom: .4em; }
.ficha a { text-decoration: none; }
.ficha a:hover { text-decoration: underline; }

.contacto__cta {
    margin-top: clamp(40px, 4.6vw, 66px); padding-top: clamp(28px, 3vw, 42px);
    border-top: 1px solid rgba(255, 255, 255, .12); text-align: center;
}
.contacto__cta p {
    font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 32px);
    text-transform: uppercase; letter-spacing: .05em; color: var(--blanco); margin-bottom: 22px;
}
.contacto__botones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --- 17. Pie ----------------------------------------------------------- */
.pie { background: var(--noche); color: rgba(255, 255, 255, .66); border-top: 1px solid var(--hair); }
.pie__in {
    display: grid; grid-template-columns: 1.3fr .8fr 1fr; gap: clamp(24px, 3vw, 46px);
    padding-block: clamp(38px, 4.4vw, 62px);
}
.pie__marca { display: flex; gap: 14px; align-items: flex-start; }
.pie__nombre {
    font-family: var(--f-display); font-size: 19px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--blanco); margin-bottom: 4px; line-height: 1.16;
}
.pie__lema { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-300); }
.pie__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie__menu a, .pie__contacto a {
    font-family: var(--f-mono); font-size: 12px; letter-spacing: .07em;
    color: rgba(255, 255, 255, .7); text-decoration: none;
}
.pie__menu a:hover, .pie__contacto a:hover { color: var(--oro-300); }
.pie__contacto { display: grid; gap: 8px; align-content: start; }
.pie__contacto p { font-size: 12.5px; color: rgba(255, 255, 255, .5); margin: 4px 0 0; }

.pie__legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
    padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, .1);
    font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
    color: rgba(255, 255, 255, .45);
}
.pie__legal p { margin: 0; }
.pie__legal a { color: var(--oro-300); text-decoration: none; }

@media (max-width: 820px) { .pie__in { grid-template-columns: 1fr; } }

/* --- 18. WhatsApp flotante --------------------------------------------- */
.flota {
    position: fixed; right: 18px; bottom: 18px; z-index: 100;
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    background: #1FA855; color: var(--blanco);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
    transition: transform var(--trans);
}
.flota svg { width: 30px; height: 30px; }
.flota:hover { transform: scale(1.08); }

/* --- 19. Menu movil ---------------------------------------------------- */
@media (max-width: 980px) {
    .hamb {
        display: grid; gap: 5px; place-content: center;
        width: 46px; height: 46px; padding: 0;
        background: transparent; border: 1px solid rgba(255, 255, 255, .28); cursor: pointer;
    }
    .hamb span { display: block; width: 22px; height: 2px; background: var(--blanco); transition: transform var(--trans), opacity var(--trans); }
    .hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .menu {
        position: fixed; inset: 0 0 0 auto; width: min(360px, 86vw);
        flex-direction: column; align-items: stretch; justify-content: center;
        gap: 26px; padding: 40px 32px;
        background: linear-gradient(160deg, var(--azul-900), var(--noche));
        border-left: 1px solid var(--hair);
        transform: translateX(100%); transition: transform 340ms cubic-bezier(.2, .8, .2, 1);
        z-index: 95;
    }
    .menu.abierto { transform: none; }
    .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
    .menu__lista li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .menu__lista a { display: block; padding: 15px 0; font-size: 14px; }
    .menu__cta { justify-content: center; }
    body.menu-abierto { overflow: hidden; }
}

/* --- 20. Revelado al hacer scroll ------------------------------------- */
[data-rev] { opacity: 0; transform: translateY(22px); transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .7, .3, 1); }
[data-rev].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
    [data-rev] { opacity: 1; transform: none; }
    .hero__brillo { display: none; }
}

/* --- 21. Impresion ---------------------------------------------------- */
@media print {
    .barra, .franja, .flota, .hero__brillo, .lupa, .galeria { display: none !important; }
    body { color: #000; background: #fff; }
    .sec--oscura, .sec--noche, .hero { background: #fff !important; color: #000 !important; }
}