/* ============================================================
   OES — Organización Estudiantil Socialista
   Sistema visual derivado del manual de marca.
   Firma: retícula de construcción + inicial ornamental fundida
   ============================================================ */

/* Playfair Display (fuente ornamental) se carga vía wp_enqueue_style() en functions.php
   (mejor rendimiento que @import: permite preconnect y evita bloqueo en cascada) */

/* ---------- Tipografías oficiales de marca (autohospedadas) ----------
   AVISO DE LICENCIA: los archivos de "MADE Outer Sans" incluidos son de uso
   PERSONAL según su propio license.txt; el sitio de la OES es de uso público/
   organizacional. Antes de publicar hace falta comprar la licencia comercial
   en pixelsurplus.com/products/made-outer-sans o sustituir esta fuente por
   una de licencia libre. Ver assets/fonts/ y wp-content/themes/oes/README-FONTS.md. */
/* Se carga solo el corte Black, como peso normal(400): así conserva el mismo
   comportamiento que 'Archivo Black' en el prototipo (familia de un único
   peso, usada sin necesidad de font-weight:900 en cada regla existente). */
@font-face{
  font-family:'MADE Outer Sans';
  src:url('fonts/MadeOuterSans-Black.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Mozilla Text';
  src:url('fonts/MozillaText-Variable.ttf') format('truetype-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Clandy';
  src:url('fonts/Clandy-Regular.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Clandy';
  src:url('fonts/Clandy-Italic.otf') format('opentype');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

:root{
  --red:#FA3B1E;
  --red-ink:#D42E12;
  --black:#0C0C0C;
  --white:#FFFFFF;
  --gray:#CFCFCF;
  --gray-2:#E4E4E1;

  --line:rgba(12,12,12,.30);
  --line-strong:rgba(12,12,12,.85);
  --line-on-red:rgba(12,12,12,.55);

  --font-display:'MADE Outer Sans', 'Archivo Black', system-ui, -apple-system, sans-serif;
  --font-body:'Mozilla Text', 'Archivo', system-ui, -apple-system, sans-serif;
  --font-orn:'Clandy', Georgia, 'Times New Roman', serif;

  --maxw:1240px;
  --pad:clamp(1.15rem, 4vw, 3.5rem);
  --nav-h:66px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--black);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

::selection{background:var(--red);color:var(--black)}

/* ---------- Tipografía ---------- */
h1,h2,h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:-.015em;
  margin:0;
  font-weight:400;
}
.display{
  font-size:clamp(3rem, 11vw, 8rem);
  line-height:.88;
}
.h-section{
  font-size:clamp(2.1rem, 6.2vw, 4.5rem);
  letter-spacing:-.02em;
}
.h-sub{font-size:clamp(1.4rem, 3.4vw, 2.2rem)}

/* Inicial ornamental fundida (gesto del manual) */
.orn{
  font-family:var(--font-orn);
  font-style:italic;
  font-weight:400;
  font-size:1.18em;
  line-height:0;
  letter-spacing:0;
  padding-right:.08em;
}

.eyebrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.24em;
  display:inline-block;
}
.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  max-width:60ch;
}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* ---------- Layout base ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(3.5rem, 8vw, 7rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--black{background:var(--black);color:var(--white)}
.section--red{background:var(--red);color:var(--black)}
.section--gray{background:var(--gray-2)}

.section-head{position:relative;margin-bottom:clamp(2rem,4vw,3.5rem);max-width:74ch;padding-top:.6rem}
.section-head .eyebrow{color:var(--red-ink);margin-bottom:1rem}
.section--red .section-head .eyebrow,
.section--black .section-head .eyebrow{color:inherit}

/* Marcas de esquina ("plano técnico"): eco discreto de la retícula del hero
   en la cabecera de cada sección de título, para que la firma visual del
   manual de marca no viva solo en la portada. */
.section-head::before,
.section-head::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  opacity:.4;
  pointer-events:none;
}
.section-head::before{
  top:0;
  left:-2px;
  border-top:1.5px solid currentColor;
  border-left:1.5px solid currentColor;
}
.section-head::after{
  top:0;
  right:-2px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
}

/* etiqueta vertical recurrente */
.vlabel{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  white-space:nowrap;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  background:var(--black);color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--pad);
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.nav__brand{display:flex;align-items:center;color:var(--red);height:100%}
.nav__brand .logo-svg{height:30px;width:auto}
.nav__menu{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem)}
.nav__link{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:.74rem;
  letter-spacing:.12em;
  padding:.4rem 0;
  position:relative;
  color:var(--white);
  transition:color .18s ease;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--red);transition:right .22s ease;
}
.nav__link:hover::after,
.nav__link:focus-visible::after{right:0}
.nav__link:hover,.nav__link:focus-visible{color:var(--red)}
.nav__link--active{color:var(--red)}
.nav__link--active::after{right:0}
.nav__link--cta{
  background:var(--red);color:var(--black);
  padding:.55rem .9rem;
}
.nav__link--cta::after{display:none}
.nav__link--cta:hover,.nav__link--cta:focus-visible{
  color:var(--black);background:var(--white)
}
.nav__toggle{
  display:none;
  width:42px;height:34px;border:1px solid rgba(255,255,255,.35);
  background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:0 8px;
}
.nav__toggle span{height:2px;background:var(--white);display:block;transition:.2s}

@media (max-width:860px){
  .nav__toggle{display:flex}
  .nav__menu{
    position:absolute;top:var(--nav-h);left:0;right:0;
    background:var(--black);
    flex-direction:column;align-items:stretch;gap:0;
    border-bottom:1px solid rgba(255,255,255,.14);
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .nav--open .nav__menu{max-height:420px}
  .nav__link{padding:1rem var(--pad);border-top:1px solid rgba(255,255,255,.1)}
  .nav__link::after{display:none}
  .nav__link--cta{background:var(--red);text-align:left}
}

/* ============================================================
   HERO (firma)
   ============================================================ */
.hero{background:var(--red);color:var(--black);overflow:hidden;position:relative}
.hero::after{
  /* Grano fotográfico sutil, a juego con la textura de los carteles/pancartas
     de la organización — evita que el rojo del hero quede plano. */
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  mix-blend-mode:overlay;
  opacity:.5;
}
.hero__video{
  /* Vídeo directo sobre el rojo corporativo, sin capa blanca de por medio;
     opacidad baja para que el rojo y la legibilidad manden sobre el vídeo. */
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:grayscale(1);opacity:.18;
  pointer-events:none;
}
.hero__video-overlay{display:none}
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
}
.hero__poster{
  position:relative;
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(3rem,7vw,6rem) var(--pad) clamp(3.5rem,8vw,6.5rem);
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;
}
.hero__grid{
  position:absolute;inset:clamp(1rem,3vw,2.2rem);
  width:calc(100% - clamp(2rem,6vw,4.4rem));
  height:calc(100% - clamp(2rem,6vw,4.4rem));
  pointer-events:none;
}
.hero__grid--portrait{display:none}
/* La retícula "landscape" (1000x600) solo se ve bien si la caja del hero es
   realmente ancha; como su altura depende de 100vh menos la nav, la MISMA
   ventana ancha puede resultar en una caja angosta/alta según cuánto chrome
   vertical reserve cada navegador (barra de marcadores, zoom, DPI...). Por eso
   el criterio es la relación de aspecto real de la ventana, no solo el ancho:
   así la retícula "portrait" entra en cualquier navegador cuando la caja se
   vuelve más alta que ancha, en vez de depender de un ancho fijo. */
@media (max-width:760px), (max-aspect-ratio:4/5){
  .hero__grid--landscape{display:none}
  .hero__grid--portrait{display:block}
}
.hero__vlabel{
  position:absolute;left:clamp(1.1rem,3vw,2.4rem);top:50%;
  transform:translateY(-50%) rotate(180deg);
  color:var(--black);
}
.hero__content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(1.2rem,3vw,2rem);
  padding-inline:clamp(0rem,6vw,3rem);
}
.hero__logo .logo-svg{
  /* Sin fondo detrás: el logo queda recortado con transparencia (como un PNG
     con alpha), dejando ver el rojo/vídeo a través de los huecos de las letras. */
  width:min(560px,74vw);height:auto;color:var(--black);
}
.hero__name{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.5rem,4.4vw,3.1rem);
  line-height:1;
  letter-spacing:-.01em;
}
.hero__scroll{
  position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.68rem;letter-spacing:.25em;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.hero__scroll svg{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.hero__scroll svg{animation:none}}
@media (max-width:640px){
  .hero__vlabel{display:none}
  .hero__content{padding-inline:0}
}

/* ============================================================
   BLOQUES DE CONTENIDO (imagen + texto alternos)
   ============================================================ */
.rows{display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,5.5rem)}
.row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
.row--flip .row__media{order:2}
.row__num{
  font-family:var(--font-display);color:var(--red-ink);
  font-size:.8rem;letter-spacing:.2em;margin-bottom:.9rem;display:block;
}
.row__title{font-size:clamp(1.5rem,3.2vw,2.4rem);margin-bottom:1rem}
@media (max-width:760px){
  .row,.row--flip{grid-template-columns:1fr}
  .row--flip .row__media{order:0}
}

/* ============================================================
   PLACEHOLDER DE IMAGEN
   ============================================================ */
.ph{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--gray);border:1px solid var(--line-strong);overflow:hidden;
  color:var(--black);width:100%;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), rgba(12,12,12,.32) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(12,12,12,.32) 50%, transparent calc(50% + .5px));
}
.ph__tag{
  position:relative;z-index:1;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.72rem;letter-spacing:.18em;text-align:center;
  background:var(--gray);padding:.5em .8em;border:1px solid var(--line-strong);
  line-height:1.3;
}
.ph--16x9{aspect-ratio:16/9}
.ph--4x3{aspect-ratio:4/3}
.ph--1x1{aspect-ratio:1/1}
.ph--3x4{aspect-ratio:3/4}
.ph--wide{aspect-ratio:21/9}
.ph--red{background:var(--red)}
.ph--red::before{background:
  linear-gradient(to top right, transparent calc(50% - .5px), rgba(12,12,12,.4) 50%, transparent calc(50% + .5px)),
  linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(12,12,12,.4) 50%, transparent calc(50% + .5px))}
.ph--red .ph__tag{background:var(--red)}
.ph--dark{background:var(--black);border-color:rgba(255,255,255,.35);color:var(--white)}
.ph--dark::before{background:
  linear-gradient(to top right, transparent calc(50% - .5px), rgba(255,255,255,.2) 50%, transparent calc(50% + .5px)),
  linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(255,255,255,.2) 50%, transparent calc(50% + .5px))}
.ph--dark .ph__tag{background:var(--black);border-color:rgba(255,255,255,.35);color:var(--white)}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.82rem;letter-spacing:.06em;
  padding:.95rem 1.5rem;border:1px solid var(--black);
  background:transparent;color:var(--black);cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .12s ease;
}
.btn:hover,.btn:focus-visible{background:var(--black);color:var(--white)}
.btn:active{transform:translateY(1px)}
.btn--red{background:var(--red);border-color:var(--red);color:var(--black)}
.btn--red:hover,.btn--red:focus-visible{background:var(--black);border-color:var(--black);color:var(--white)}
.btn--ghost-light{border-color:var(--white);color:var(--white)}
.btn--ghost-light:hover,.btn--ghost-light:focus-visible{background:var(--white);color:var(--black)}
.btn svg{width:1.05em;height:1.05em}

.backlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.74rem;letter-spacing:.14em;color:var(--red-ink);
}
.backlink:hover{text-decoration:underline}

/* ============================================================
   PROPUESTA (texto + libro 3D)
   ============================================================ */
.proposal{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.proposal__book{position:relative}
.proposal__book .ph{max-width:360px;margin-inline:auto}
.proposal__note{
  font-size:.78rem;letter-spacing:.02em;color:var(--red-ink);
  margin-top:1rem;text-align:center;font-family:var(--font-body);font-weight:600;
}

/* ============================================================
   MOCKUP 3D DEL LIBRO (Bases Políticas): portada real inclinada
   con sombra y sombreado de lomo, en vez de una imagen plana.
   ============================================================ */
.book-mockup{max-width:300px;margin-inline:auto;padding-block:1.5rem}
.book-mockup__cover{
  position:relative;overflow:hidden;
  border:1px solid var(--black);
  transform:perspective(900px) rotateY(-28deg);
  transform-origin:left center;
  box-shadow:22px 26px 40px -14px rgba(12,12,12,.5);
}
.book-mockup__cover img{display:block;width:100%;height:auto}
.book-mockup__cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right, rgba(12,12,12,.4) 0%, rgba(12,12,12,0) 7%);
}
@media (prefers-reduced-motion:no-preference){
  .book-mockup__cover{transition:transform .3s ease}
}
@media (max-width:640px){
  .book-mockup__cover{transform:perspective(700px) rotateY(-18deg)}
}
.download-box{
  border:1px solid var(--black);padding:clamp(1.4rem,3vw,2.2rem);
  margin-top:2rem;display:flex;flex-direction:column;gap:1rem;
  background:var(--gray-2);
}
@media (max-width:840px){.proposal{grid-template-columns:1fr}}

/* ============================================================
   ACTUALIDAD (grid de artículos)
   ============================================================ */
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.5vw,2rem);
}
.card{
  display:flex;flex-direction:column;
  border:1px solid var(--black);background:var(--white);
  transition:transform .18s ease;
  height:100%;
}
.card:hover{transform:translateY(-4px)}
.card__media .ph{border:none;border-bottom:1px solid var(--black)}
.card__media-photo{overflow:hidden;border-bottom:1px solid var(--black);width:100%}
.card__media-photo img{width:100%;max-width:100%;height:100%;object-fit:cover;display:block}
.card__body{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.card__meta{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.66rem;letter-spacing:.16em;color:var(--red-ink);
}
.card__title{font-size:1.35rem;line-height:1.02}
.card__excerpt{font-size:.92rem;color:#333;flex:1}
.card__more{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.72rem;letter-spacing:.12em;color:var(--black);
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;
}
.card:hover .card__more{color:var(--red-ink)}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

/* ============================================================
   ARTÍCULO
   ============================================================ */
.article{max-width:760px;margin-inline:auto}
.article__meta{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.72rem;letter-spacing:.16em;color:var(--red-ink);margin:1.4rem 0 .8rem;
}
.article__title{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:1.5rem}
.article__hero{margin-bottom:2.5rem}
.article__body{font-size:1.05rem}
.article__body p{margin-bottom:1.4em}
.article__footer{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-strong);
}

/* ============================================================
   ÚNETE (formulario + redes)
   ============================================================ */
.join{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.form{display:flex;flex-direction:column;gap:1.3rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field__label{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.72rem;letter-spacing:.14em;
}
.field input,.field textarea{
  font-family:var(--font-body);font-size:1rem;
  padding:.85rem .9rem;border:1px solid var(--black);background:var(--white);
  color:var(--black);width:100%;resize:vertical;
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 2px rgba(250,59,30,.25);
}
.field input::placeholder,.field textarea::placeholder{color:#999}

.socials{display:flex;flex-wrap:wrap;gap:1.1rem}
.social{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  width:74px;
}
.social__ic{
  width:56px;height:56px;border:1px solid var(--black);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  color:var(--black);
}
.social__ic svg{width:26px;height:26px}
.social:hover .social__ic,.social:focus-visible .social__ic{
  background:var(--red);border-color:var(--red);color:var(--black);
}
.social__label{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.6rem;letter-spacing:.1em;
}
@media (max-width:840px){.join{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--black);color:var(--white);padding-block:clamp(2.5rem,5vw,4rem)}
.footer__inner{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;
}
.footer__brand .logo-svg{height:38px;color:var(--red);margin-bottom:1rem}
.footer__brand p{font-family:var(--font-display);text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;line-height:1.3}
.footer__col h4{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.72rem;letter-spacing:.16em;color:var(--red);margin:0 0 1rem;font-weight:400;
}
.footer__col a{display:block;font-size:.9rem;padding:.25rem 0;color:rgba(255,255,255,.85)}
.footer__col a:hover{color:var(--red)}
.footer__socials{display:flex;gap:.7rem;margin-top:.4rem}
.footer__socials a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;color:var(--white);
  transition:.18s;
}
.footer__socials a:hover{background:var(--red);border-color:var(--red);color:var(--black)}
.footer__socials svg{width:18px;height:18px}
.footer__legal{
  grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);
  margin-top:1.5rem;padding-top:1.5rem;
  font-size:.75rem;color:rgba(255,255,255,.5);line-height:1.7;
}
@media (max-width:760px){.footer__inner{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}}
@media (max-width:520px){.footer__inner{grid-template-columns:1fr}}

/* ============================================================
   ACCESIBILIDAD: enlace "saltar al contenido"
   ============================================================ */
.skip-link{
  position:absolute;top:-999px;left:0;z-index:200;
  background:var(--white);color:var(--black);
  padding:.9rem 1.4rem;font-family:var(--font-display);
  text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;
}
.skip-link:focus{top:0}

/* ============================================================
   CTA FIJA MÓVIL: acceso directo a ¡Únete! mientras se navega
   ============================================================ */
.mobile-cta{display:none}
@media (max-width:860px){
  .mobile-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:.7rem var(--pad);background:var(--white);
    border-top:1px solid var(--black);
  }
  .mobile-cta .btn{width:100%;justify-content:center}
  /* Deja hueco para que la barra fija no tape el pie de página */
  .footer{padding-bottom:calc(clamp(2.5rem,5vw,4rem) + 60px)}
}

/* ============================================================
   ANIMACIÓN DE SCROLL (sutil)
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Focus visible global ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}