/* ============================================================
   APA · Liceo Francés Internacional de Málaga
   Dirección: "Blanco, rojo francés y tinta marina"
   · Lienzo blanco, un solo color comprometido (un rojo francés apagado)
     que ocupa regiones enteras; tinta marina en texto y pie
   · Schibsted Grotesk en titulares, Hanken Grotesk en texto (puente
     con la web del Liceo)
   · Listas y filetes en lugar de tarjetas; sin eyebrows
   · Un momento de animación autoral (hero); el resto, feedback
   ============================================================ */

:root{
  --red:#c8102e; --red-d:#a30d26; --red-l:#fbe9ec; --red-2:#a8323f;
  --blue:#152a6b; --blue-d:#0f1f52; --on-blue-2:#c5cde6;
  --ink:#141a24; --ink-2:#4a5260; --ink-3:#5d6573;
  --on-red-2:rgba(255,255,255,.9); --on-ink-2:#b9c0cc;
  --canvas:#ffffff; --canvas-2:#f4f4f6;
  --line:rgba(20,26,36,.12); --line-strong:rgba(20,26,36,.22);
  --r-btn:6px; --r-card:10px; --r-tag:4px;
  --wrap:1240px; --gutter:32px;
  --shadow-sm:0 1px 2px rgba(20,26,36,.06), 0 6px 18px -8px rgba(20,26,36,.14);
  --shadow:0 2px 6px rgba(20,26,36,.05), 0 24px 48px -20px rgba(20,26,36,.28);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --font-display:'Schibsted Grotesk','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scrollbar-color:#c4c8d0 var(--canvas-2); scrollbar-width:thin; }
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  caret-color:var(--red);
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; }
p{ margin:0 0 1em; text-wrap:pretty; }
a{ color:var(--blue); text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:rgba(21,42,107,.4); transition:text-decoration-color .2s; }
a:hover{ text-decoration-color:currentColor; }
::selection{ background:var(--red); color:#fff; }
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }
.band :focus-visible, .footer :focus-visible, .phero--photo :focus-visible, .offer--photo :focus-visible, .offer--band :focus-visible{ outline-color:#fff; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--canvas-2); }
::-webkit-scrollbar-thumb{ background:#c4c8d0; border:3px solid var(--canvas-2); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--red-2); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.skip{ position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r-btn); z-index:999; }
.skip:focus{ left:8px; }

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance; color:var(--ink); }
h1{ font-size:clamp(42px,5.4vw,76px); line-height:1.02; letter-spacing:-.035em; }
h2{ font-size:clamp(30px,3.4vw,46px); line-height:1.06; letter-spacing:-.03em; }
h3{ font-size:clamp(20px,1.7vw,24px); line-height:1.2; letter-spacing:-.015em; }
h4{ font-size:17px; line-height:1.3; letter-spacing:-.01em; }
.lede{ font-size:clamp(18px,1.4vw,21px); line-height:1.5; color:var(--ink-2); max-width:34em; }
.muted{ color:var(--ink-2); }
.small{ font-size:14px; color:var(--ink-3); }
.num{ font-variant-numeric:tabular-nums; }
.label{ font-size:13px; font-weight:600; color:var(--red-2); letter-spacing:.01em; }

/* ---------- Motion ---------- */
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes wipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes drift{ from{ transform:scale(1.06) translateX(-1%); } to{ transform:scale(1) translateX(0); } }
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:60ms; } .reveal[data-delay="2"]{ transition-delay:120ms; } .reveal[data-delay="3"]{ transition-delay:180ms; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__line, .hero__copy .lede, .hero__actions{ animation:none !important; opacity:1 !important; }
  .hero__photo{ animation:none !important; clip-path:none !important; }
  .hero__photo img{ animation:none !important; transform:none !important; }
  .mobile-nav a{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  border:1px solid transparent; border-radius:var(--r-btn); padding:14px 22px; font-weight:600; font-size:15.5px; line-height:1;
  text-decoration:none; white-space:nowrap;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .16s var(--ease-out), box-shadow .2s ease;
}
.btn:active{ transform:scale(.97); }
.btn svg{ width:18px; height:18px; flex:none; transition:transform .25s var(--ease-out); }
.btn--primary{ background:var(--red); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 20px -10px rgba(179,48,42,.55); }
.btn--primary:hover{ background:var(--red-d); }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:#000; }
.btn--white, .band .btn--white, .surface--band .btn--white, .offer--band .btn--white, .offer--photo .btn--white{ background:#fff; color:var(--blue-d); }
.btn--white:hover, .band .btn--white:hover{ background:#eceff6; color:var(--blue-d); }
.btn--outline{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn--outline:hover{ border-color:var(--ink); }
.band .btn--outline, .surface--band .btn--outline{ border-color:rgba(255,255,255,.35); color:#fff; }
.band .btn--outline:hover, .surface--band .btn--outline:hover{ border-color:#fff; }
.btn--sm{ padding:10px 16px; font-size:14px; }
@media (hover:hover) and (pointer:fine){ .btn:hover svg{ transform:translateX(3px); } }
.link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--blue); text-decoration:none; font-size:15.5px; }
button.link{ background:none; border:0; font-family:inherit; cursor:pointer; } /* sin esto, "Añadir al calendario" salía con el botón gris por defecto del navegador */
.link svg{ width:18px; height:18px; transition:transform .25s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .link:hover svg{ transform:translateX(4px); } .link:hover{ text-decoration:underline; text-underline-offset:.22em; } }
.band .link, .surface--band .link{ color:#fff; }

/* ---------- Proto strip + header ---------- */
.proto{ background:var(--canvas-2); color:var(--ink-2); font-size:12.5px; text-align:center; padding:7px 12px; border-bottom:1px solid var(--line); }
.proto a{ color:var(--ink); font-weight:600; }
.header{ position:sticky; top:0; z-index:80; background:rgba(255,255,255,.88); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid transparent; transition:border-color .3s; }
.header.is-stuck{ border-color:var(--line); }
.header__inner{ height:88px; display:flex; align-items:center; gap:20px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex:none; }
.brand__mark{ width:64px; height:64px; filter:drop-shadow(0 1px 2px rgba(20,26,36,.18)); }
.brand__name{ font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-.02em; line-height:1; display:block; }
.brand__sub{ display:block; font-size:12px; color:var(--ink-2); margin-top:5px; line-height:1.25; letter-spacing:.01em; }
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav__link{ text-decoration:none; color:var(--ink-2); font-weight:500; font-size:14.5px; padding:8px 11px; border-radius:var(--r-btn); transition:color .15s, background-color .15s; white-space:nowrap; }
.nav__link:hover{ color:var(--ink); background:var(--canvas-2); }
.nav__link.is-active{ color:var(--ink); font-weight:600; }
.header__cta{ display:flex; align-items:center; gap:10px; flex:none; }
.lang{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-btn); overflow:hidden; }
.lang__btn{ cursor:pointer; border:none; background:none; font:inherit; font-weight:600; font-size:12px; letter-spacing:.02em; padding:7px 9px; color:var(--ink-3); transition:background-color .15s,color .15s; display:inline-flex; align-items:center; gap:6px; }
.lang__btn svg{ width:18px; height:12px; border-radius:2px; box-shadow:0 0 0 .5px rgba(0,0,0,.15); flex:none; }
.lang__btn + .lang__btn{ border-left:1px solid var(--line); }
.lang__btn.is-active{ background:var(--ink); color:#fff; }
.burger{ display:none; cursor:pointer; border:1px solid var(--line); background:#fff; width:42px; height:42px; border-radius:var(--r-btn); align-items:center; justify-content:center; flex:none; }
.burger span{ display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:background-color .2s; }
.burger span::before,.burger span::after{ content:''; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease-io), top .3s var(--ease-io); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); } .burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
.mobile-nav{ display:none; position:fixed; left:0; right:0; bottom:0; background:var(--canvas); z-index:79; padding:28px var(--gutter) 40px; overflow:auto; }
.mobile-nav.is-open{ display:block; }
.mobile-nav a{ display:block; text-decoration:none; color:var(--ink); font-family:var(--font-display); font-size:32px; font-weight:600; letter-spacing:-.02em; padding:12px 0; border-bottom:1px solid var(--line); opacity:0; transform:translateY(12px); }
.mobile-nav.is-open a{ animation:rise .5s var(--ease-out) forwards; }
.mobile-nav a:nth-child(1){ animation-delay:40ms } .mobile-nav a:nth-child(2){ animation-delay:80ms } .mobile-nav a:nth-child(3){ animation-delay:120ms } .mobile-nav a:nth-child(4){ animation-delay:160ms } .mobile-nav a:nth-child(5){ animation-delay:200ms } .mobile-nav a:nth-child(6){ animation-delay:240ms } .mobile-nav a:nth-child(7){ animation-delay:280ms } .mobile-nav a:nth-child(8){ animation-delay:320ms } .mobile-nav a:nth-child(9){ animation-delay:360ms } .mobile-nav a:nth-child(10){ animation-delay:400ms }
.mobile-nav a.is-active{ color:var(--red); }
.mobile-nav .btn{ margin-top:24px; width:100%; border:none; font-size:17px; padding:16px; }
.mobile-nav .mobile-nav__lang{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; }
.mobile-nav .mobile-nav__lang-label{ width:100%; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px; }
.mobile-nav .mobile-nav__lang a{ font-family:var(--font-body); font-size:14px; border:1px solid var(--line); border-radius:var(--r-btn); padding:8px 14px; animation:none; opacity:1; transform:none; display:inline-flex; align-items:center; gap:8px; }
.mobile-nav .mobile-nav__lang a svg{ width:18px; height:12px; border-radius:2px; }
.mobile-nav .mobile-nav__lang a.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- Hero ---------- */
.hero{ position:relative; }
.hero__grid{ display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); gap:48px; align-items:stretch; min-height:min(720px, calc(100dvh - 72px)); }
.hero__copy{ display:flex; flex-direction:column; justify-content:center; padding:56px 0 64px; }
.hero__copy h1{ max-width:11ch; margin:0 0 26px; }
.hero__line{ display:block; opacity:0; animation:rise .8s var(--ease-out) forwards; }
.hero__line:nth-child(2){ animation-delay:70ms; } .hero__line:nth-child(3){ animation-delay:140ms; }
.hero__copy .lede{ opacity:0; animation:rise .8s var(--ease-out) 220ms forwards; }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:34px; opacity:0; animation:rise .8s var(--ease-out) 320ms forwards; }
.hero__media{ position:relative; margin-right:calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2 + var(--gutter))); }
.hero__photo{ position:absolute; inset:0; overflow:hidden; border-radius:var(--r-card) 0 0 var(--r-card); animation:wipe .9s var(--ease-out) 120ms both; }
.hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:42% 50%; filter:saturate(.92); animation:drift 1.6s var(--ease-out) 120ms both; }
.hero__caption{ position:absolute; left:20px; bottom:18px; color:#fff; font-size:12.5px; opacity:.85; text-shadow:0 1px 2px rgba(0,0,0,.3); }

/* ---------- Sections ---------- */
.sec{ padding:104px 0 112px; }
.sec--tight{ padding:72px 0 80px; }
.sec--soft{ background:var(--canvas-2); }
.band{ background:var(--blue-d); color:#fff; }
.band h2,.band h3,.band h4,.band h1{ color:#fff; }
.band .lede,.band .muted,.band .small{ color:var(--on-red-2); }
.band a{ color:#fff; text-decoration-color:rgba(255,255,255,.4); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:56px; }
.sec-head h2{ max-width:16ch; }
.sec-head .lede{ margin-top:14px; }
.sec-head--stack{ display:block; }

/* Roles (band) */
.roles{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.role h3{ font-size:clamp(26px,2.4vw,34px); letter-spacing:-.025em; margin-bottom:14px; }
.role p{ color:rgba(255,255,255,.92); font-size:16.5px; max-width:32em; margin-bottom:18px; }

/* Agenda rows */
.rows{ border-top:1px solid var(--line); }
.row{ display:grid; grid-template-columns:120px 1fr auto; gap:32px; align-items:start; padding:28px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.row__date{ font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-.03em; line-height:1; color:var(--red); font-variant-numeric:tabular-nums; }
.row__date small{ display:block; font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; }
.row h3{ margin-bottom:8px; }
.row p{ color:var(--ink-2); font-size:15.5px; max-width:60ch; margin-bottom:10px; }
.row__meta{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13.5px; color:var(--ink-3); }
.row__meta span{ display:inline-flex; gap:6px; align-items:center; }
.row__meta svg{ width:14px; height:14px; }
.row__kind{ font-size:13px; font-weight:600; color:var(--blue); margin-bottom:6px; display:inline-flex; gap:10px; align-items:center; }
.row__actions{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; padding-top:4px; }
.row[hidden]{ display:none; }
.agenda-layout{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:64px; align-items:start; }
.agenda-layout__aside{ position:sticky; top:96px; }
.agenda-layout__aside .lede{ margin:16px 0 26px; }

/* Filters */
.filters{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; }
.chip{ cursor:pointer; border:1px solid var(--line); background:#fff; border-radius:var(--r-btn); padding:9px 14px; font:inherit; font-weight:500; font-size:14px; color:var(--ink-2); transition:border-color .15s,color .15s,background-color .15s, transform .15s; display:inline-flex; align-items:center; gap:8px; }
.chip svg{ width:15px; height:15px; }
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip:active{ transform:scale(.97); }
.empty{ padding:48px 0; color:var(--ink-2); border-bottom:1px solid var(--line); }

/* Membership */
.member{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:72px; align-items:center; }
.member .price{ display:flex; align-items:baseline; gap:12px; margin:28px 0 6px; }
.member .price b{ font-family:var(--font-display); font-size:clamp(48px,5vw,72px); font-weight:700; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.member .price > span{ color:var(--ink-2); font-size:16px; }
.benefits{ list-style:none; margin:28px 0 0; padding:0; border-top:1px solid var(--line); }
.benefits li{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
.benefits svg{ width:20px; height:20px; flex:none; color:var(--blue); margin-top:2px; }
/* Carné de socio */
.carnet-wrap{ perspective:1200px; }
.carnet{ position:relative; aspect-ratio:1.586; border-radius:14px; background:linear-gradient(135deg,#213a8c 0%, var(--blue) 55%, #0f1f52 100%); color:#fff; padding:26px 28px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow); transform:rotate(-3deg); transition:transform .6s var(--ease-out); overflow:hidden; }
.carnet::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.14), transparent 55%); pointer-events:none; }
@media (hover:hover) and (pointer:fine){ .carnet-wrap:hover .carnet{ transform:rotate(0) translateY(-4px); } }
.carnet--flat{ transform:none; }
.carnet__top{ display:flex; justify-content:space-between; align-items:flex-start; }
.carnet__brand{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.01em; }
.carnet__brand svg{ width:46px; height:46px; flex:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.carnet__year{ font-size:12.5px; color:var(--on-blue-2); font-variant-numeric:tabular-nums; }
.carnet__name{ font-family:var(--font-display); font-size:clamp(22px,2.2vw,30px); font-weight:600; letter-spacing:-.02em; line-height:1.1; min-height:1.1em; }
.carnet__meta{ display:flex; justify-content:space-between; align-items:flex-end; font-size:12.5px; color:var(--on-blue-2); }
.carnet__meta b{ color:#fff; font-weight:600; display:block; font-size:13.5px; }
.carnet__chip{ width:38px; height:28px; border-radius:6px; background:linear-gradient(135deg,#e9d9a3,#c9ab5a); opacity:.9; }

/* Offers grid (asymmetric) */
.offers{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.offer{ grid-column:span 4; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:28px; display:flex; flex-direction:column; gap:10px; min-height:220px; transition:border-color .2s, transform .3s var(--ease-out), box-shadow .3s; }
.offer[hidden]{ display:none; }
@media (hover:hover) and (pointer:fine){ .offer:hover{ border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-sm); } }
.offer--photo{ grid-column:span 8; grid-row:span 2; position:relative; padding:0; overflow:hidden; border:none; min-height:440px; color:#fff; }
.offer--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.9); transition:transform 1.2s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .offer--photo:hover img{ transform:scale(1.04); } .offer--photo:hover{ transform:none; box-shadow:none; } }
.offer--photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,26,36,0) 30%, rgba(20,26,36,.84) 100%); }
.offer--photo .offer__body{ position:relative; z-index:1; margin-top:auto; padding:32px; }
.offer--photo h3{ color:#fff; font-size:clamp(24px,2.2vw,32px); }
.offer.offer--photo p{ color:rgba(255,255,255,.9); }
.offer--photo .offer__save{ color:#fff; }
.offer--band{ background:var(--blue-d); border-color:var(--blue-d); color:#fff; }
.offer.offer--band h3{ color:#fff; } .offer.offer--band p{ color:rgba(255,255,255,.9); } .offer.offer--band .offer__save{ color:#fff; }
.offer__cat{ font-size:13px; font-weight:600; color:var(--blue); }
.offer.offer--photo .offer__cat, .offer.offer--band .offer__cat{ color:rgba(255,255,255,.85); }
.offer h3{ font-size:20px; }
.offer p{ color:var(--ink-2); font-size:15px; margin:0; flex:1; }
.offer__foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; font-size:14px; }
.offer__save{ font-weight:600; color:var(--blue); }

/* Quote */
.quote{ display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:64px; align-items:end; }
.quote blockquote{ margin:0; font-family:var(--font-display); font-weight:500; font-size:clamp(24px,2.6vw,36px); line-height:1.25; letter-spacing:-.02em; text-wrap:pretty; }
.quote cite{ display:block; margin-top:22px; font-style:normal; font-size:15px; color:var(--ink-2); }
.quote cite b{ color:var(--ink); font-weight:600; }
.quote__aside{ border-left:1px solid var(--line); padding-left:32px; color:var(--ink-2); font-size:15.5px; }
.quote__aside b{ color:var(--ink); }

/* News */
.news{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.news-card{ text-decoration:none; color:inherit; display:block; }
.news-card__img{ aspect-ratio:3/2; overflow:hidden; border-radius:var(--r-card); background:var(--canvas-2); margin-bottom:18px; }
.news-card__img img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92); transition:transform 1s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .news-card:hover .news-card__img img{ transform:scale(1.04); } .news-card:hover h3{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em; } }
.news-card__date{ font-size:13.5px; color:var(--ink-3); margin-bottom:8px; font-variant-numeric:tabular-nums; display:flex; gap:10px; align-items:center; }
.news-card h3{ font-size:21px; margin-bottom:8px; }
.news-card p{ color:var(--ink-2); font-size:15.5px; margin:0; }

/* Statement */
.statement{ max-width:52ch; }
.statement h2{ font-size:clamp(28px,3vw,42px); }
.statement .lede{ margin:18px 0 26px; }

/* Demo label */
.demo{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--ink-3); border:1px dashed var(--line-strong); border-radius:var(--r-tag); padding:3px 8px; line-height:1.2; vertical-align:middle; }
.band .demo, .offer--band .demo, .surface--band .demo{ color:var(--on-red-2); border-color:rgba(255,255,255,.35); }

/* ---------- Page hero ---------- */
.phero{ padding:64px 0 40px; }
.phero h1{ max-width:14ch; margin:10px 0 20px; font-size:clamp(38px,4.8vw,64px); }
.phero--photo{ color:#fff; padding:0; position:relative; overflow:hidden; }
.phero--photo .phero__bg{ position:absolute; inset:0; }
.phero--photo .phero__bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); }
.phero--photo .phero__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,26,36,.9) 0%, rgba(20,26,36,.7) 45%, rgba(20,26,36,.25) 100%); }
.phero--photo .wrap{ position:relative; padding-top:96px; padding-bottom:96px; }
.phero--photo h1{ color:#fff; }
.phero--photo .lede{ color:var(--on-red-2); }
.crumbs{ font-size:13.5px; color:var(--ink-3); display:flex; gap:8px; align-items:center; }
.crumbs a{ color:inherit; text-decoration:none; } .crumbs a:hover{ text-decoration:underline; }
.phero--photo .crumbs{ color:var(--on-red-2); }

/* ---------- Generic content ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.split--rev > :first-child{ order:2; }
.split__media{ border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/3; }
.split__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92); }
.checks{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--ink-2); }
.checks svg{ width:20px; height:20px; flex:none; color:var(--blue); margin-top:2px; }
.items{ border-top:1px solid var(--line); }
.item{ padding:24px 0; border-bottom:1px solid var(--line); }
.item h3{ margin-bottom:8px; font-size:20px; }
.item p{ color:var(--ink-2); font-size:15.5px; margin:0; }
.items--2{ display:grid; grid-template-columns:1fr 1fr; column-gap:48px; border-top:none; }
.items--2 .item{ border-top:1px solid var(--line); border-bottom:none; }
.surface{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:28px; }
.surface h3{ margin-bottom:8px; }
.surface p{ color:var(--ink-2); font-size:15.5px; margin:0; }
.surface--band{ background:var(--blue-d); border-color:var(--blue-d); color:#fff; }
.surface.surface--band h3{ color:#fff; } .surface.surface--band p{ color:rgba(255,255,255,.9); }
.surface--soft{ background:var(--canvas-2); border-color:transparent; }
.doc{ display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit; padding:18px 0; border-bottom:1px solid var(--line); }
.doc .ic{ width:36px; height:36px; border-radius:8px; background:rgba(21,42,107,.07); color:var(--blue); display:grid; place-items:center; flex:none; }
.doc .ic svg{ width:18px; height:18px; }
.doc b{ display:block; font-weight:600; font-size:15.5px; } .doc span{ font-size:13.5px; color:var(--ink-3); }
@media (hover:hover) and (pointer:fine){ .doc:hover b{ text-decoration:underline; text-underline-offset:.15em; } }

/* People */
.people{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.person{ border-top:1px solid var(--line); padding-top:18px; }
.person__av{ width:72px; height:72px; border-radius:12px; display:grid; place-items:center; font-family:var(--font-display); font-size:24px; font-weight:600; color:#fff; background:var(--blue); margin-bottom:16px; }
.person__av--tbd{ background:var(--canvas-2); color:var(--ink-3); border:1px dashed var(--line-strong); }
.person b{ display:block; font-size:17px; font-weight:600; }
.person span{ display:block; font-size:14.5px; color:var(--ink-2); margin-top:3px; }
.person .demo{ margin-top:10px; }

/* Accordion (rows, no boxes) */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{ width:100%; cursor:pointer; background:none; border:none; text-align:left; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:24px; font:inherit; color:inherit; }
.acc__btn h3{ font-size:20px; }
.acc__btn .acc__pl{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; flex:none; transition:transform .3s var(--ease-io), background-color .2s, color .2s, border-color .2s; }
.acc__pl svg{ width:14px; height:14px; }
.acc__item.is-open .acc__pl{ transform:rotate(45deg); background:var(--ink); color:#fff; border-color:var(--ink); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease-io); }
.acc__panel > div{ overflow:hidden; color:var(--ink-2); max-width:70ch; font-size:16px; }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__item.is-open .acc__panel > div{ padding-bottom:26px; }
.acc__panel ul{ padding-left:20px; }
.acc__lead{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.acc__seats{ font-size:13px; font-weight:600; color:var(--red-2); white-space:nowrap; }

/* Timeline */
.tl{ position:relative; padding-left:28px; }
.tl::before{ content:''; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--line-strong); }
.tl__item{ position:relative; margin-bottom:28px; }
.tl__item:last-child{ margin-bottom:0; }
.tl__item::before{ content:''; position:absolute; left:-27px; top:7px; width:11px; height:11px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px var(--canvas); }
.surface--band .tl::before{ background:rgba(255,255,255,.3); } .surface--band .tl__item::before{ background:#fff; box-shadow:0 0 0 3px var(--blue-d); }
.tl__when{ font-size:13px; font-weight:600; color:var(--red-2); }
.surface--band .tl__when{ color:var(--on-red-2); }
.tl__item b{ display:block; font-size:17px; margin:3px 0 4px; font-weight:600; }
.tl__item p{ margin:0; color:var(--ink-2); font-size:15px; }
.surface.surface--band .tl__item p{ color:rgba(255,255,255,.9); }

/* Forms */
.form{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:36px; }
.form h3{ margin-bottom:22px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field label{ font-weight:600; font-size:14px; }
.field input,.field select,.field textarea{ font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--line-strong); border-radius:var(--r-btn); background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s; width:100%; }
.field input::placeholder,.field textarea::placeholder{ color:#858b96; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-l); }
.field input:user-invalid{ border-color:#b3261e; }
.field small{ color:var(--ink-3); font-size:13px; }
.field--check label{ display:flex; gap:10px; align-items:center; font-weight:500; cursor:pointer; }
input[type=checkbox]{ accent-color:var(--red); width:17px; height:17px; }
.chipset{ display:flex; flex-wrap:wrap; gap:8px; }
.chipset label{ display:inline-flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:var(--r-btn); padding:8px 12px; font-size:14.5px; font-weight:500; cursor:pointer; transition:border-color .15s, background-color .15s; }
.chipset label:has(input:checked){ border-color:var(--red); background:var(--red-l); }
.stepper{ display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--r-btn); overflow:hidden; }
.stepper button{ cursor:pointer; border:none; background:none; width:44px; height:46px; font-size:20px; font-weight:500; color:var(--ink); transition:background-color .15s; }
.stepper button:hover{ background:var(--canvas-2); }
.stepper output{ min-width:44px; text-align:center; font-weight:600; font-size:17px; font-variant-numeric:tabular-nums; }
.summary{ border-top:1px solid var(--line); margin:8px 0 22px; }
.summary__row{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15.5px; font-variant-numeric:tabular-nums; }
.summary__row:last-child{ font-weight:700; font-size:18px; }
.note{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); margin-top:16px; }
.note svg{ width:18px; height:18px; flex:none; color:var(--red-2); margin-top:2px; }
.toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,12px); background:var(--ink); color:#fff; padding:13px 18px; border-radius:var(--r-btn); font-weight:500; font-size:14.5px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .35s var(--ease-out); z-index:200; box-shadow:var(--shadow); }
.toast.is-on{ opacity:1; transform:translate(-50%,0); }
.inline-form{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.inline-form input{ flex:1; min-width:200px; font:inherit; font-size:15px; padding:12px 14px; border-radius:var(--r-btn); border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; }
.inline-form input::placeholder{ color:var(--on-red-2); }
.inline-form input:focus{ outline:none; border-color:#fff; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:start; }
.info-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.info-list li{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); }
.info-list .ic{ width:36px; height:36px; border-radius:8px; display:grid; place-items:center; flex:none; background:rgba(21,42,107,.07); color:var(--blue); }
.info-list .ic svg{ width:18px; height:18px; }
.info-list b{ display:block; font-size:15px; font-weight:600; } .info-list span{ color:var(--ink-2); font-size:15px; }
.map{ border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; margin-top:24px; }
.map iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.7); }

/* ---------- Propuesta page ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.compare__box{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:40px; text-align:center; }
.compare__label{ font-size:13.5px; font-weight:600; color:var(--ink-3); margin-bottom:22px; }
.logo-stage{ display:grid; place-items:center; min-height:240px; }
.logo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.logo-tile{ border-radius:var(--r-card); padding:32px; display:grid; place-items:center; align-content:center; min-height:210px; border:1px solid var(--line); margin:0; }
.logo-tile--band{ background:var(--red); border-color:var(--red); } .logo-tile--blue{ background:var(--blue); border-color:var(--blue); } .logo-tile--blue figcaption{ color:rgba(255,255,255,.75); } .logo-tile--soft{ background:var(--canvas-2); border-color:transparent; } .logo-tile--ink{ background:var(--ink); border-color:var(--ink); }
.logo-tile figcaption{ margin-top:16px; font-size:13px; font-weight:500; color:var(--ink-3); text-align:center; }
.logo-tile--band figcaption,.logo-tile--ink figcaption{ color:rgba(255,255,255,.7); }
.swatches{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.swatch{ border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line); background:#fff; }
.swatch i{ display:block; height:96px; }
.swatch div{ padding:12px 14px; font-size:13.5px; color:var(--ink-2); }
.swatch b{ display:block; font-size:14.5px; color:var(--ink); }
.swatch code{ color:var(--ink-3); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
.type-demo{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0; }
.type-demo .t1{ font-family:var(--font-display); font-size:clamp(36px,4.6vw,64px); font-weight:600; letter-spacing:-.035em; line-height:1.02; text-wrap:balance; }
.type-demo .t2{ font-size:18px; color:var(--ink-2); margin-top:18px; max-width:60ch; }
.type-demo__row{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.audit{ border-top:1px solid var(--line); }
.audit__row{ display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:26px 0; border-bottom:1px solid var(--line); }
.audit__row b{ display:block; font-size:16.5px; font-weight:600; margin-bottom:4px; }
.audit__row p{ margin:0; font-size:15px; color:var(--ink-2); }
.audit__k{ font-size:13px; font-weight:600; margin-bottom:8px; display:block; }
.audit__k--before{ color:var(--ink-3); } .audit__k--after{ color:var(--red); }
.audit__after{ border-left:1px solid var(--line); padding-left:48px; }
.feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px 40px; }
.feat{ border-top:1px solid var(--line); padding-top:16px; }
.feat b{ display:block; font-weight:600; font-size:16.5px; margin-bottom:6px; }
.feat p{ margin:0; font-size:14.5px; color:var(--ink-2); }
.roadmap{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cta-band{ display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.cta-band .lede{ margin:0; }

/* ---------- Footer ---------- */
.footer{ background:var(--blue); color:var(--on-blue-2); padding:72px 0 28px; }
/* Pie (oct-2026): fila de identidad (marca + texto | puente al Liceo) sobre una rejilla de 4 columnas iguales con títulos alineados */
.footer__top{ display:flex; justify-content:space-between; align-items:center; gap:32px 48px; flex-wrap:wrap; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.14); }
.footer__id{ min-width:0; }
.footer__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 48px; padding-top:44px; }
.footer .brand{ color:#fff; gap:18px; } .footer .brand__name{ font-size:30px; } .footer .brand__sub{ display:block; line-height:1.3; margin-top:6px; white-space:nowrap; }
@media (max-width:640px){ .footer .brand__sub{ white-space:normal; } }
.footer .brand__sub{ color:var(--on-blue-2); font-size:11.5px; letter-spacing:.11em; }
.footer p{ font-size:15px; max-width:52ch; margin:20px 0 0; }
.footer h4{ color:#fff; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin:0 0 18px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; font-size:15px; line-height:1.45; }
.footer a{ color:var(--on-blue-2); text-decoration:none; font-size:15px; }
.footer a:hover{ color:#fff; text-decoration:underline; }
.footer .social-row{ margin-top:0; }
.footer__bottom{ margin-top:56px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; }
.footer__bottom a{ font-size:13.5px; }
.footer__copy{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.footer__bottom .footer__credit{ padding-left:16px; border-left:1px solid rgba(255,255,255,.18); }
.footer__credit strong{ color:#fff; font-weight:600; }
@media (max-width:640px){ .footer__copy{ flex-direction:column; align-items:flex-start; gap:8px; } .footer__bottom .footer__credit{ padding-left:0; border-left:0; } }
/* Hasta 1500 px el botón flotante de WhatsApp (56 px + 24 px) cae sobre los enlaces legales al llegar al final: reservar su hueco */
@media (min-width:641px) and (max-width:1500px){ .footer{ padding-bottom:104px; } }
.bridge{ display:inline-flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.25); border-radius:var(--r-card); padding:12px 14px; text-decoration:none; margin-top:14px; transition:background-color .2s, border-color .2s; }
.bridge:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); text-decoration:none !important; }
.bridge b{ display:block; color:#fff; font-size:14px; font-weight:600; } .bridge span{ display:block; font-size:12.5px; color:var(--on-blue-2); }
.bridge .bridge__lf{ width:34px; height:34px; border-radius:50%; background:#fff; color:#1f5fa6; display:grid; place-items:center; font-family:Cinzel,serif; font-weight:800; font-size:12px; flex:none; }

/* ---------- Responsive ---------- */
@media (max-width:1500px){ .lang__btn span{ display:none; } .lang__btn{ padding:7px 8px; } .nav__link{ font-size:14px; padding:8px 8px; } }
@media (max-width:1280px){
  .nav{ display:none; } .burger{ display:flex; }
  .header__cta{ margin-left:auto; }
}
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; gap:0; min-height:0; }
  .hero__copy{ padding:44px 0 40px; }
  .hero__media{ margin-right:0; aspect-ratio:4/3; }
  .hero__photo{ border-radius:var(--r-card); }
  .roles{ grid-template-columns:1fr; gap:40px; }
  .agenda-layout{ grid-template-columns:1fr; gap:32px; } .agenda-layout__aside{ position:static; }
  .member{ grid-template-columns:1fr; gap:48px; }
  .offers{ grid-template-columns:1fr 1fr; } .offer,.offer--photo{ grid-column:span 1; grid-row:auto; } .offer--photo{ grid-column:span 2; min-height:320px; }
  .quote{ grid-template-columns:1fr; gap:28px; } .quote__aside{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:20px; }
  .news,.grid-3,.logo-grid,.roadmap{ grid-template-columns:1fr 1fr; }
  .people,.grid-4,.feats{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; gap:36px; } .split--rev > :first-child{ order:0; }
  .contact-grid{ grid-template-columns:1fr; }
  .swatches{ grid-template-columns:repeat(3,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__top{ align-items:flex-start; }
  .sec{ padding:80px 0 88px; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:40px; }
}
@media (max-width:640px){
  :root{ --gutter:20px; }
  body{ font-size:16px; }
  .header__inner{ height:72px; gap:10px; }
  .header .brand{ gap:8px; min-width:0; } .header .brand__mark{ width:46px; height:46px; } .header .brand__text{ min-width:0; }
  .header .brand__name{ font-size:17px; } .header .brand__sub{ font-size:10px; line-height:1.2; margin-top:3px; letter-spacing:0; max-width:160px; }
  .header__cta{ gap:8px; } .header__cta .btn{ display:none; } .burger{ width:40px; height:40px; }
  /* Idioma en móvil: un solo botón (bandera + caret) que despliega los otros dos */
  .header .lang{ position:relative; overflow:visible; }
  .header .lang__btn{ padding:0 7px; height:40px; gap:4px; }
  .header .lang__btn:not(.is-active){ display:none; }
  .header .lang__btn.is-active{ background:#fff; color:var(--ink); }
  .header .lang__btn.is-active::after{ content:''; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s; }
  .header .lang.is-open .lang__btn.is-active::after{ transform:translateY(1px) rotate(225deg); }
  .header .lang.is-open .lang__btn:not(.is-active){ display:inline-flex; position:absolute; right:-1px; top:calc(100% + 6px); min-width:120px; padding:0 12px; background:#fff; border:1px solid var(--line); border-radius:var(--r-btn); box-shadow:var(--shadow); color:var(--ink); }
  .header .lang.is-open .lang__btn:not(.is-active) span{ display:inline; }
  .header .lang.is-open .lang__btn:not(.is-active) ~ .lang__btn:not(.is-active){ top:calc(100% + 6px + 46px); }

  .hero__copy h1{ max-width:none; }
  .hero__actions{ gap:14px 20px; }
  .sec{ padding:64px 0 72px; } .sec--tight{ padding:48px 0 56px; }
  .row{ grid-template-columns:76px 1fr; gap:18px; padding:22px 0; }
  .row__date{ font-size:28px; }
  .row__actions{ grid-column:2; flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:flex-start; }
  .offers{ grid-template-columns:1fr; } .offer--photo{ grid-column:span 1; min-height:300px; }
  .news,.grid-2,.grid-3,.grid-4,.people,.feats,.compare,.logo-grid,.roadmap,.form__row,.items--2,.audit__row{ grid-template-columns:1fr; }
  .items--2{ column-gap:0; }
  .audit__after{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:14px; }
  .swatches{ grid-template-columns:1fr 1fr; }
  .footer__grid{ gap:32px 24px; }
  .footer__grid > div:nth-child(n+3){ grid-column:1 / -1; } /* el correo no cabe en media columna */
  .footer__top{ padding-bottom:36px; }
  .form{ padding:22px; }
  .phero--photo .wrap{ padding-top:64px; padding-bottom:64px; }
}

/* ---------- Hero con vídeo (portada) ---------- */
.hero-v{ position:relative; min-height:100dvh; display:grid; align-items:end; color:#fff; overflow:hidden; background:var(--ink); }
.hero-v__bg{ position:absolute; inset:0; }
.hero-v__bg video{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.95); }
.hero-v__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,26,36,.15) 0%, rgba(20,26,36,.05) 35%, rgba(20,26,36,.72) 100%), linear-gradient(90deg, rgba(20,26,36,.45) 0%, rgba(20,26,36,0) 60%); }
.hero-v__inner{ position:relative; padding-top:140px; padding-bottom:88px; }
.hero-v h1{ color:#fff; font-size:clamp(44px,6vw,92px); max-width:14ch; margin:0 0 22px; letter-spacing:-.04em; }
.hero-v .lede{ color:rgba(255,255,255,.88); max-width:30em; opacity:0; animation:rise .8s var(--ease-out) 220ms forwards; }
.hero-v .hero__actions{ margin-top:30px; }
.hero-v .link{ color:#fff; }
.hero-v__proof{ display:flex; align-items:center; gap:12px; margin-top:38px; font-size:14px; color:rgba(255,255,255,.8); opacity:0; animation:rise .8s var(--ease-out) 420ms forwards; }
.hero-v__proof .demo{ color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.35); }
.hero-v__scroll{ position:absolute; right:var(--gutter); bottom:28px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); writing-mode:vertical-rl; padding-bottom:36px; }
.hero-v__scroll::after{ content:''; position:absolute; left:50%; bottom:0; width:1px; height:28px; background:rgba(255,255,255,.7); animation:scrollcue 1.8s var(--ease-io) infinite; }
@keyframes scrollcue{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
.btn--lg{ padding:17px 28px; font-size:17px; }
@media (prefers-reduced-motion:reduce){ .hero-v .lede,.hero-v__proof{ animation:none!important; opacity:1!important; } .hero-v__scroll::after{ animation:none; } }

/* ---------- Momentos (bento) ---------- */
.moments{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:230px; gap:14px; }
.moment{ margin:0; position:relative; overflow:hidden; border-radius:var(--r-card); background:var(--canvas-2); }
.moment img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95); transition:transform 1.2s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .moment:hover img{ transform:scale(1.04); } }
.moment figcaption{ position:absolute; left:0; right:0; bottom:0; padding:48px 20px 18px; color:#fff; background:linear-gradient(180deg, rgba(20,26,36,0), rgba(20,26,36,.78)); }
.moment b{ display:block; font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-.01em; }
.moment span{ display:block; font-size:13px; color:rgba(255,255,255,.9); margin-top:2px; }
.m-a{ grid-column:span 4; grid-row:span 2; } .m-b{ grid-column:span 2; } .m-c{ grid-column:span 2; } .m-d,.m-e,.m-f{ grid-column:span 2; }
.moments--compact{ grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; } .moments--compact .moment{ grid-column:span 1; grid-row:span 1; }

/* ---------- Cierre (funnel) ---------- */
.final{ background:var(--blue-d); color:#fff; padding:128px 0 136px; text-align:center; }
.final h2{ color:#fff; font-size:clamp(34px,4.6vw,64px); max-width:18ch; margin:0 auto; }
.final .lede{ color:rgba(255,255,255,.92); margin:20px auto 0; }
.final .link{ color:#fff; }
.final .btn--white{ color:var(--blue-d); }

/* ---------- CTA fija en móvil ---------- */
.sticky-cta{ display:none; }
@media (max-width:640px){
  .sticky-cta{ display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:70; justify-content:center; align-items:center; height:52px; background:var(--red); color:#fff; font-weight:700; font-size:16px; border-radius:var(--r-btn); text-decoration:none; box-shadow:0 12px 30px -10px rgba(200,16,46,.6); }
  body{ padding-bottom:76px; }
  .hero-v{ min-height:92dvh; } .hero-v__inner{ padding-top:100px; padding-bottom:64px; } .hero-v__scroll{ display:none; }
  .moments{ grid-template-columns:1fr 1fr; grid-auto-rows:170px; } .m-a{ grid-column:span 2; grid-row:span 1; } .m-b,.m-c,.m-d,.m-e,.m-f{ grid-column:span 1; }
  .moments--compact{ grid-template-columns:1fr 1fr; }
  .final{ padding:80px 0 88px; }
}
@media (min-width:641px) and (max-width:960px){ .moments{ grid-template-columns:repeat(4,1fr); } .m-a{ grid-column:span 4; } .m-b,.m-c,.m-d,.m-e,.m-f{ grid-column:span 2; } }

/* ---------- Redes sociales ---------- */
.social-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.social-card{ min-width:0; } .social-card__body{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:960px){ .social-grid{ grid-template-columns:1fr; } }
.social-card{ display:flex; align-items:center; gap:16px; padding:22px 24px; border:1px solid var(--line); border-radius:var(--r-card); text-decoration:none; color:inherit; background:#fff; transition:border-color .2s, transform .3s var(--ease-out), box-shadow .3s; }
@media (hover:hover) and (pointer:fine){ .social-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-sm); } }
.social-card__ic{ width:48px; height:48px; border-radius:12px; background:var(--blue); color:#fff; display:grid; place-items:center; flex:none; }
.social-card__ic svg{ width:22px; height:22px; }
.social-card__body{ flex:1; min-width:0; }
.social-card__body b{ display:block; font-weight:600; font-size:16px; }
.social-card__body > span{ display:block; font-size:14px; color:var(--ink-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.social-card__body .demo{ margin-top:6px; }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; color:#fff; }
.social-row a:hover{ background:rgba(255,255,255,.12); }
.social-row svg{ width:17px; height:17px; }
/* ---------- Presidenta ---------- */
.pres{ display:flex; gap:28px; align-items:flex-start; }
.pres__photo{ flex:none; width:120px; height:120px; border-radius:50%; overflow:hidden; background:var(--canvas-2); }
.pres__photo img{ width:100%; height:100%; object-fit:cover; }
.pres__photo--pending{ display:grid; place-items:center; align-content:center; gap:4px; border:1.5px dashed var(--line-strong); color:var(--ink-3); font-size:11.5px; text-align:center; padding:8px; }
.pres__photo--pending svg{ width:22px; height:22px; }
.pres__photo--sm{ width:72px; height:72px; margin-bottom:16px; font-size:10px; border-radius:12px; }
@media (max-width:640px){ .social-grid{ grid-template-columns:1fr; } .pres{ flex-direction:column; gap:16px; } .pres__photo{ width:88px; height:88px; } }

/* ---------- Sello en el hero ---------- */
.hero-v__seal{ position:absolute; right:var(--gutter); top:48px; width:clamp(140px,16vw,240px); height:auto; filter:drop-shadow(0 12px 30px rgba(20,26,36,.45)); opacity:0; animation:rise .9s var(--ease-out) 500ms forwards; z-index:2; }
.hero-v__seal svg{ width:100%; height:auto; display:block; }
@media (max-width:960px){ .hero-v__seal{ top:24px; width:110px; } }
@media (max-width:640px){ .hero-v__seal{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hero-v__seal{ animation:none; opacity:1; } }

.emblem--mono svg{ filter:grayscale(1) contrast(1.15); }

/* ---------- Testimonios ---------- */
.testis{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.testi{ margin:0; padding:36px 32px 32px 0; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:22px; }
.testi + .testi{ padding-left:32px; }
.testi:last-child{ border-right:none; padding-right:0; }
.testi blockquote{ margin:0; font-family:var(--font-display); font-weight:500; font-size:clamp(19px,1.5vw,22px); line-height:1.35; letter-spacing:-.01em; text-wrap:pretty; flex:1; }
.testi blockquote::before{ content:'“'; display:block; font-size:64px; line-height:.6; color:var(--red); margin-bottom:14px; font-weight:800; }
.testi figcaption{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.testi figcaption > span:nth-child(2){ flex:1; min-width:0; }
.testi figcaption b{ display:block; font-size:15px; font-weight:600; }
.testi figcaption > span > span{ display:block; font-size:13.5px; color:var(--ink-2); }
.testi__av{ width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:15px; flex:none; }
.testi .demo{ align-self:flex-start; }
@media (max-width:960px){ .testis{ grid-template-columns:1fr; } .testi{ border-right:none; border-bottom:1px solid var(--line); padding:28px 0; } .testi + .testi{ padding-left:0; } .testi:last-child{ border-bottom:none; } }

/* ============================================================
   Sep-2026 · "Comunidad": personas en cada sección + accesibilidad
   ============================================================ */
/* Hero de portada: imagen de comunidad (vídeo opcional) */
.hero-v__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block; filter:saturate(.96); animation:drift 2.4s var(--ease-out) both; }
.hero-v__bg::after{ background:linear-gradient(180deg, rgba(20,26,36,.28) 0%, rgba(20,26,36,.06) 30%, rgba(20,26,36,.74) 100%), linear-gradient(90deg, rgba(20,26,36,.55) 0%, rgba(20,26,36,.1) 60%); }
@media (max-width:640px){ .hero-v__bg img, .hero-v__bg video{ object-position:72% 50%; } .hero-v__bg::after{ background:linear-gradient(180deg, rgba(20,26,36,.35) 0%, rgba(20,26,36,.15) 30%, rgba(20,26,36,.82) 100%); } }
.hero-v__media-btn{ position:absolute; left:var(--gutter); bottom:28px; z-index:3; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(20,26,36,.45); color:#fff; font:inherit; font-size:13px; font-weight:600; cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hero-v__media-btn svg{ width:16px; height:16px; }
.hero-v__media-btn:hover{ background:rgba(20,26,36,.7); }
@media (prefers-reduced-motion:reduce){ .hero-v__bg img{ animation:none; } }

/* Pila de avatares (prueba social) */
.avstack{ display:inline-flex; align-items:center; flex:none; }
.avstack img{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 2px 6px rgba(20,26,36,.25); margin-left:-10px; background:var(--canvas-2); }
.avstack img:first-child{ margin-left:0; }
.avstack__more{ width:38px; height:38px; border-radius:50%; margin-left:-10px; border:2px solid #fff; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; letter-spacing:-.02em; }
.hero-v__proof{ flex-wrap:wrap; gap:14px; }
.hero-v__proof b{ color:#fff; font-weight:700; }

/* Roles con fotografía */
.roles{ gap:32px; }
.role__img{ aspect-ratio:3/2; border-radius:var(--r-card); overflow:hidden; margin-bottom:22px; background:rgba(0,0,0,.15); box-shadow:0 24px 48px -24px rgba(0,0,0,.55); }
.role__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .role:hover .role__img img{ transform:scale(1.04); } }

/* Testimonios con retrato */
.testi__av{ overflow:hidden; background:var(--canvas-2); }
.testi__av img{ width:100%; height:100%; object-fit:cover; display:block; }
.testi__av--img{ width:52px; height:52px; }

/* Cierre con fotografía de comunidad */
.final{ position:relative; overflow:hidden; }
.final__bg{ position:absolute; inset:0; z-index:0; }
.final__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block; }
.final__bg img{ filter:saturate(.7) contrast(1.05); }
.final__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,31,82,.74) 0%, rgba(15,31,82,.84) 55%, rgba(12,24,64,.94) 100%); }
.final h2, .final .lede{ text-shadow:0 1px 2px rgba(0,0,0,.18); }
.final__inner{ position:relative; z-index:1; }
.final .avstack{ justify-content:center; margin-bottom:26px; }
.final .avstack img{ width:46px; height:46px; border-color:rgba(255,255,255,.9); }
.final .avstack__more{ width:46px; height:46px; background:#fff; color:var(--blue-d); }

/* Presidenta / junta: imagen de la junta en la cabecera de La APA */
.phero--photo.phero--people .phero__bg::after{ background:linear-gradient(90deg, rgba(20,26,36,.88) 0%, rgba(20,26,36,.62) 50%, rgba(20,26,36,.28) 100%); }

/* Accesibilidad: áreas táctiles ≥ 44px donde son controles principales, ≥ 32px en secundarios */
.lang__btn{ min-height:36px; }
.link{ padding:8px 0; margin:-8px 0; }
.row__actions .link{ min-height:40px; }
.btn--sm{ min-height:40px; }
.footer ul a, .footer__bottom a{ display:inline-block; padding:4px 0; margin:-4px 0; }
.social-row a{ width:44px; height:44px; }
.proto a{ display:inline-block; padding:6px 2px; margin:-6px 0; }
.mobile-nav__lang a{ min-height:44px; }
.chip{ min-height:40px; }
.stepper output{ min-height:46px; display:grid; place-items:center; }
.skip:focus{ left:8px; outline:2px solid #fff; outline-offset:2px; }

/* ---------- Pie: lockup oficial del Liceo (reglas con prefijo .bridge--lfim para ganar a `.bridge span{display:block;font-size:12.5px}`) (búho + Lycée Français International · MÁLAGA + banderas) ---------- */
.bridge--lfim{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:14px 20px; padding:14px 18px 14px 14px; }
/* En el pie: logo | filete | enlace, en una sola línea (sin margen superior heredado de .bridge) */
.footer__top .bridge--lfim{ margin-top:0; flex-wrap:nowrap; gap:22px; padding:16px 24px 16px 18px; }
.footer__top .bridge--lfim .bridge__go{ align-self:stretch; display:flex; align-items:center; padding-left:22px; border-left:1px solid rgba(255,255,255,.2); font-size:13.5px; }
@media (max-width:640px){ .footer__top .bridge--lfim{ flex-wrap:wrap; } .footer__top .bridge--lfim .bridge__go{ padding-left:0; border-left:none; } }
.bridge--lfim .lfim-logo{ display:inline-flex; align-items:center; gap:12px; color:#fff; }
.bridge--lfim .lfim-logo img{ width:58px; height:auto; display:block; flex:none; filter:drop-shadow(0 0 1px rgba(255,255,255,.5)); }
.bridge--lfim .lfim-logo__text{ display:flex; flex-direction:column; line-height:1; min-width:0; }
.bridge--lfim .lfim-logo__l1{ display:block; font-family:var(--font-body); font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; color:rgba(255,255,255,.92); }
.bridge--lfim .lfim-logo__l2{ display:block; font-family:'Cinzel',Georgia,'Times New Roman',serif; font-weight:700; font-size:23px; letter-spacing:.08em; text-transform:uppercase; margin-top:4px; color:#fff; }
/* Barra del logotipo oficial del Liceo (logo-src.png): 5 tramos iguales y contiguos, colores medidos en el PNG:
   azul #0b218c · crema #f9efdc · granate #701310 · oro #f3b23e · granate #701310 (el rojo central es común a ambas banderas) */
.bridge--lfim .lfim-logo__flags{ display:flex; align-items:stretch; gap:0; margin-top:6px; height:5px; width:96px; border-radius:1px; overflow:hidden; }
.bridge--lfim .lfim-logo__flags i{ flex:1; display:block; height:100%; }
.f-bl{ background:#0b218c; } .f-cr{ background:#f9efdc; } .f-rd{ background:#701310; } .f-gd{ background:#f3b23e; }
.bridge--lfim .bridge__go{ display:block; font-size:12.5px; color:var(--on-blue-2); white-space:nowrap; }
.bridge--lfim:hover .bridge--lfim .bridge__go{ display:block; color:#fff; }

/* ---------- La APA · objetivos oficiales (apalfmalaga.es/apa-2) ---------- */
.objectives{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; border-top:1px solid var(--line); counter-reset:obj; }
.objectives li{ counter-increment:obj; display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); font-size:17px; line-height:1.45; }
.objectives li::before{ content:counter(obj,decimal-leading-zero); font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.03em; color:var(--red); line-height:1.1; flex:none; min-width:2ch; font-variant-numeric:tabular-nums; }
.objectives__outro{ margin:26px 0 0; max-width:60ch; color:var(--ink-2); font-size:16.5px; }
@media (max-width:640px){ .objectives{ grid-template-columns:1fr; } }

/* ---------- Propuesta · La marca en la calle (maquetas) ---------- */
.merch{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; grid-auto-flow:row dense; }
.merch__tile{ margin:0; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.merch__tile--wide{ grid-column:span 2; }
.merch__tile--tall{ grid-row:span 2; }
.merch__stage{ flex:1; min-height:260px; display:grid; place-items:center; padding:18px; background:linear-gradient(180deg,#fff 0%,#eef0f3 100%); border-bottom:1px solid var(--line); }
.merch__stage svg{ width:100%; height:100%; max-height:340px; display:block; overflow:visible; }
.merch__tile--tall .merch__stage svg{ max-height:none; }
.merch__stage text{ font-family:var(--font-display); }
.merch__tile figcaption{ padding:18px 20px 20px; }
.merch__tile figcaption b{ display:block; font-family:var(--font-display); font-size:18px; letter-spacing:-.01em; color:var(--ink); margin-bottom:4px; }
.merch__tile figcaption p{ font-size:15px; line-height:1.5; color:var(--ink-2); margin:0 0 10px; }
.merch__spec{ display:inline-block; font-size:12.5px; font-weight:500; color:var(--ink-3); border-top:1px solid var(--line); padding-top:8px; }
.merch__pack{ margin:28px 0 0; max-width:70ch; font-size:17px; color:var(--ink-2); border-left:3px solid var(--red); padding-left:16px; }
.merch__pack b{ color:var(--ink); }
@media (max-width:960px){
  .merch{ grid-template-columns:1fr 1fr; }
  .merch__tile--tall{ grid-row:span 1; }
  .merch__tile--tall .merch__stage svg{ max-height:420px; }
}
@media (max-width:640px){
  .merch{ grid-template-columns:1fr; gap:16px; }
  .merch__tile--wide{ grid-column:span 1; }
  .merch__stage{ min-height:0; }
}
.mphotos{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:340px; gap:16px; }
.mphoto{ position:relative; margin:0; border-radius:var(--r-card); overflow:hidden; background:var(--ink); }
.mphoto--wide{ grid-column:span 2; } .mphoto--tall{ grid-row:span 2; }
.mphoto img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out); }
.mphoto:hover img{ transform:scale(1.03); }
.mphoto figcaption{ position:absolute; left:12px; bottom:12px; background:rgba(20,26,36,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:13.5px; font-weight:600; padding:6px 11px; border-radius:var(--r-tag); }
.mphotos__note{ font-size:13px; color:var(--ink-3); margin:12px 0 0; }
.mkit{ display:grid; grid-template-columns:1.25fr 1fr; gap:40px; align-items:center; margin:56px 0 72px; }
.mkit img{ width:100%; border-radius:var(--r-card); }
.mkit h3{ font-size:clamp(26px,2.6vw,36px); letter-spacing:-.025em; margin-bottom:14px; }
.mkit p{ font-size:18px; color:var(--ink-2); margin:0; }
.merch__h{ margin:0 0 24px; }
@media (max-width:960px){ .mphotos{ grid-template-columns:1fr 1fr; grid-auto-rows:240px; } .mphoto--tall{ grid-row:span 2; } .mkit{ grid-template-columns:1fr; gap:22px; } }
@media (max-width:640px){ .mphotos{ grid-template-columns:1fr; grid-auto-rows:auto; } .mphoto--wide{ grid-column:span 1; } .mphoto--tall{ grid-row:span 1; } .mphoto img{ height:auto; aspect-ratio:3/2; } .mphoto--tall img{ aspect-ratio:2/3; } }

/* ============================================================
   Logotipo actual de la APA (vectorizado): marca alta y estrecha (≈1:2,5)
   ============================================================ */
.brand__mark{ width:28px; height:70px; flex:none; filter:none; } /* proporción de la marca 948:2388 ≈ 0,4 — ancho explícito: con width:auto el flex la aplastaba */
.brand{ gap:14px; }
/* "APA": misma familia, tracking abierto como en el logotipo original, peso 700 */
.brand__name{ font-size:25px; letter-spacing:.16em; font-weight:700; line-height:1; margin-left:1px; }
.logo-word{ display:inline-flex; letter-spacing:.16em; }
/* Dos líneas: peso 500, un pelín más pequeñas y con más aire, tracking ligero; la segunda en tinta más clara */
/* Un paso más (sep-2026): las dos líneas en versalitas con tracking, como una firma tipográfica; mismo texto, mismos colores */
.brand__sub{ font-size:10px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; line-height:1.45; margin-top:7px; color:var(--ink-2); }
/* Siglas en Manrope 800 (elección de la Junta, sep-2026): geométrica y actual, mismo tracking y colores */
.brand__name{ font-family:'Manrope',var(--font-display); font-weight:800; font-size:24px; letter-spacing:.16em; }
.brand__text{ display:flex; flex-direction:column; }
.logo-word .lw-b{ color:#1b62a8; } .logo-word .lw-g{ color:#7a7c82; } .logo-word .lw-r{ color:#bf0411; }
.logo-word--mono{ color:#fff; }
.footer .brand__mark{ width:38px; height:96px; flex:none; }
@media (max-width:640px){ .footer .brand__mark{ width:30px; height:76px; } .footer .brand__name{ font-size:24px; } }
.footer .brand{ align-items:center; }
@media (max-width:640px){ .header .brand__mark{ width:21px; height:52px; } .header .brand__name{ font-size:18px; } .header .brand__sub{ font-size:8.5px; letter-spacing:.08em; max-width:220px; } }
/* Hero: marca en blanco, arriba a la derecha, como firma discreta */
.hero-v__seal--logo{ width:auto; filter:drop-shadow(0 8px 24px rgba(20,26,36,.45)); }
.hero-v__seal--logo svg{ height:clamp(150px,22vh,260px); width:auto; }
@media (max-width:960px){ .hero-v__seal--logo svg{ height:120px; } }
/* Carné: marca blanca */
.carnet__brand svg{ width:auto; height:46px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
/* Propuesta: tiles con la marca */
.logo-tile .logo{ width:auto; }

/* Propuesta: alternativa archivada (emblema circular) */
.phase2{ display:flex; gap:28px; align-items:center; margin-top:40px; padding:24px 28px; border:1px dashed var(--line-strong); border-radius:var(--r-card); background:var(--canvas-2); }
.phase2__art{ display:flex; gap:16px; align-items:center; flex:none; }
.phase2 b{ display:block; font-size:16.5px; font-weight:600; margin-bottom:6px; }
.phase2 p{ margin:0; font-size:15px; color:var(--ink-2); max-width:62ch; }
@media (max-width:640px){ .phase2{ flex-direction:column; align-items:flex-start; } }

/* ---------- Botón flotante de WhatsApp (abajo a la derecha) ---------- */
.wa{ position:fixed; right:24px; bottom:24px; z-index:75; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.wa-float{ position:relative; border:none; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 18px 0 14px; border-radius:999px; background:#25d366; color:#fff; text-decoration:none; font-weight:700; font-size:15px; box-shadow:0 10px 28px -8px rgba(37,211,102,.7), 0 2px 6px rgba(20,26,36,.18); transition:transform .25s var(--ease-out), box-shadow .25s; }
.wa-float svg{ width:26px; height:26px; flex:none; }
.wa-float__label{ line-height:1; }
@media (hover:hover) and (pointer:fine){ .wa-float:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(37,211,102,.75), 0 2px 6px rgba(20,26,36,.2); background:#1fbf5b; } }
.wa-float:focus-visible{ outline:2px solid #fff; outline-offset:3px; box-shadow:0 0 0 5px rgba(37,211,102,.45); }
@media (max-width:640px){
  .wa{ right:12px; bottom:76px; }
  .wa-float{ height:52px; width:52px; padding:0; justify-content:center; }
  .wa-float__label{ display:none; }
  body{ padding-bottom:76px; }
}
@media (prefers-reduced-motion:reduce){ .wa-float{ transition:none; } }

/* Tarjeta de WhatsApp con opciones rápidas */
.wa-panel{ width:min(340px, calc(100vw - 24px)); border-radius:16px; overflow:hidden; background:#efeae2; box-shadow:0 24px 60px -18px rgba(20,26,36,.45), 0 2px 8px rgba(20,26,36,.12); animation:rise .35s var(--ease-out) both; font-family:var(--font-body); }
.wa-panel__head{ display:flex; align-items:center; gap:12px; padding:14px 14px 14px 16px; background:#075e54; color:#fff; }
.wa-panel__av{ width:40px; height:40px; border-radius:50%; background:#25d366; display:grid; place-items:center; flex:none; } .wa-panel__av svg{ width:22px; height:22px; }
.wa-panel__who{ flex:1; min-width:0; line-height:1.25; } .wa-panel__who b{ display:block; font-size:15px; font-weight:700; } .wa-panel__who span{ display:block; font-size:12px; color:rgba(255,255,255,.8); margin-top:2px; }
.wa-panel__close{ cursor:pointer; border:none; background:transparent; color:#fff; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none; } .wa-panel__close svg{ width:18px; height:18px; transform:rotate(45deg); } .wa-panel__close:hover{ background:rgba(255,255,255,.14); }
.wa-panel__body{ padding:16px 14px 12px; background:#efeae2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23d9d1c6'/%3E%3Ccircle cx='80' cy='60' r='1.6' fill='%23d9d1c6'/%3E%3Ccircle cx='40' cy='100' r='1.6' fill='%23d9d1c6'/%3E%3C/svg%3E"); }
.wa-bubble{ display:inline-block; background:#fff; color:var(--ink); border-radius:12px 12px 12px 3px; padding:10px 14px; font-size:15px; box-shadow:0 1px 1px rgba(0,0,0,.06); max-width:88%; }
.wa-opts{ display:grid; gap:8px; margin-top:12px; }
.wa-opt{ display:flex; align-items:center; gap:10px; background:#fff; color:var(--ink); text-decoration:none; font-weight:600; font-size:14.5px; padding:12px 14px; border-radius:12px; border:1px solid rgba(20,26,36,.06); min-height:44px; transition:background-color .15s, transform .15s var(--ease-out); }
.wa-opt svg{ width:16px; height:16px; color:#128c7e; flex:none; }
@media (hover:hover) and (pointer:fine){ .wa-opt:hover{ background:#dcf8c6; transform:translateX(2px); } }
.wa-opt:focus-visible{ outline:2px solid #128c7e; outline-offset:2px; }
.wa-panel__foot{ margin-top:12px; font-size:12px; color:var(--ink-3); text-align:center; font-variant-numeric:tabular-nums; }
.wa-float.is-open{ background:#128c7e; }
@media (prefers-reduced-motion:reduce){ .wa-panel{ animation:none; } }

/* Carné: toque rojo — curva Eiffel del logo en rojo y filete rojo bajo "Socio de la APA" */
.carnet__meta > div:first-child{ position:relative; padding-top:10px; }
.carnet__meta > div:first-child::before{ content:''; position:absolute; left:0; top:0; width:28px; height:3px; border-radius:2px; background:#e8394a; }

/* Calendario de consejos (Representación) */
.council-date{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line, rgba(20,26,36,.12)); }
.council-date:first-child{ border-top:0; }
.council-date b{ font-weight:600; }
.council-date b::first-letter{ text-transform:uppercase; }
.council-date span{ color:var(--ink-3); white-space:nowrap; }
.council-date.is-past{ opacity:.55; }
.objectives li h3{ font-size:19px; margin:0 0 8px; }
.objectives li p{ margin:0 0 8px; font-size:16px; color:var(--ink-2); }
.objectives__motto{ margin:32px 0 0; font-family:var(--font-display); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue, #152a6b); }
.objectives__vote{ display:flex; gap:10px; align-items:flex-start; margin:18px 0 0; font-weight:600; }
.objectives__vote svg{ flex:none; width:18px; height:18px; color:var(--red); margin-top:3px; }

/* ============================================================
   Sep-2026 · Movimiento sutil y detalles (js/motion.js)
   Editorial y tranquilo: entradas cortas, curvas largas, nada rebota ni parpadea.
   Las reglas de entrada van bajo html.motion (lo pone motion.js si no hay
   prefers-reduced-motion); sin JS o con movimiento reducido todo se ve quieto.
   ============================================================ */
:root{ --header-h:88px; }
@media (max-width:640px){ :root{ --header-h:72px; } }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Cabecera: transparente sobre el vídeo de portada + progreso de lectura ---------- */
.header{ --sp:0; transition:background-color .35s ease, border-color .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease; }
.header::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--red); transform:scaleX(var(--sp)); transform-origin:0 50%; pointer-events:none; transition:opacity .3s ease; }
.header .brand__mark path, .header .logo-word span, .header .brand__sub, .header .nav__link, .header .lang, .header .lang__btn, .header .burger, .header .burger span, .header .burger span::before, .header .burger span::after{ transition:fill .35s ease, color .35s ease, background-color .35s ease, border-color .35s ease, transform .3s var(--ease-io), top .3s var(--ease-io); }
.header.is-over{ background:transparent; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.header.is-over::after{ opacity:0; }
.header.is-over .brand__mark path{ fill:#fff; }
.header.is-over .logo-word span{ color:#fff; }
.header.is-over .brand__sub{ color:rgba(255,255,255,.88); }
.header.is-over .nav__link{ color:rgba(255,255,255,.88); }
.header.is-over .nav__link:hover{ color:#fff; background:rgba(255,255,255,.12); }
.header.is-over .nav__link.is-active{ color:#fff; }
.header.is-over .lang{ border-color:rgba(255,255,255,.3); }
.header.is-over .lang__btn{ color:rgba(255,255,255,.85); }
.header.is-over .lang__btn + .lang__btn{ border-left-color:rgba(255,255,255,.22); }
.header.is-over .lang__btn.is-active{ background:rgba(255,255,255,.95); color:var(--ink); }
.header.is-over .burger{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
.header.is-over .burger span, .header.is-over .burger span::before, .header.is-over .burger span::after{ background:#fff; }
.header.is-over .burger[aria-expanded="true"] span{ background:transparent; }
.header.is-over :focus-visible{ outline-color:#fff; }
/* El hero de portada se mete bajo la cabecera y ocupa justo la pantalla */
.header--home ~ main > .hero-v:first-child{ margin-top:calc(-1 * var(--header-h)); min-height:calc(100dvh - var(--proto-h, 32px)); }

/* ---------- Hero de portada ---------- */
.hero-v{ --hp:0; }
.hero-v__bg{ transform:translate3d(0, calc(var(--hp) * 16vh), 0); }
.hero-v__bg::before{ content:''; position:absolute; inset:0; z-index:1; background:#0d1118; opacity:calc(var(--hp) * .5); pointer-events:none; }
.hero-v__bg::after{ z-index:1; background:linear-gradient(180deg, rgba(20,26,36,.58) 0, rgba(20,26,36,0) 200px), linear-gradient(180deg, rgba(20,26,36,.22) 0%, rgba(20,26,36,.04) 32%, rgba(20,26,36,.74) 100%), linear-gradient(90deg, rgba(20,26,36,.55) 0%, rgba(20,26,36,.1) 60%); }
.hero-v__inner{ width:100%; z-index:2; transform:translate3d(0, calc(var(--hp) * -7vh), 0); opacity:calc(1 - var(--hp) * 1.5); }
.hero-v__seal{ z-index:2; top:calc(var(--header-h) + 36px); right:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); translate:0 calc(var(--hp) * -9vh); }
@media (max-width:960px){ .hero-v__seal{ top:calc(var(--header-h) + 20px); } }
.hero-v h1 .hero__line{ opacity:1; animation:none; }
.w{ display:inline-block; overflow:hidden; vertical-align:top; padding:.1em .05em .16em; margin:-.1em -.05em -.16em; }
.w > span{ display:inline-block; }
/* Entrada: la imagen se asienta (zoom leve hacia atrás y luz), el titular sube palabra a palabra */
.motion .hero-v__bg > video, .motion .hero-v__bg > img{ animation:heroSettle 2.6s var(--ease-out) both; }
@keyframes heroSettle{ from{ transform:scale(1.08); filter:brightness(.6) saturate(.9); } to{ transform:none; filter:saturate(.96); } }
.motion .hero-v h1 .w > span{ transform:translateY(108%); animation:wordUp 1.1s var(--ease-out) both; animation-delay:calc(180ms + var(--i) * 55ms); }
@keyframes wordUp{ from{ transform:translateY(108%); } to{ transform:none; } }
.motion .hero-v .lede{ animation:rise 1s var(--ease-out) 650ms both; }
.motion .hero-v .hero__actions{ animation:rise 1s var(--ease-out) 780ms both; }
.motion .hero-v__proof{ animation:rise 1s var(--ease-out) 900ms both; }
.motion .hero-v__seal--logo{ animation:sealGrow 2s var(--ease-out) 500ms both; }
@keyframes sealGrow{ from{ opacity:0; clip-path:inset(100% -30% -30% -30%); } to{ opacity:1; clip-path:inset(-30% -30% -30% -30%); } }
/* Con el chip de la próxima cita a la derecha, el aviso vertical "Desliza" sobra */
.hero-v__scroll{ display:none; }
@keyframes fadeIn{ from{ opacity:0; } }

/* Chip "Próxima cita" (cristal) */
.hero-v__next{ position:absolute; right:var(--gutter); bottom:164px; width:min(330px, 32vw); display:grid; gap:5px; padding:16px 48px 16px 18px; border-radius:14px; color:#fff; text-decoration:none; background:rgba(20,26,36,.32); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 24px 48px -28px rgba(0,0,0,.7); transition:background-color .25s ease, border-color .25s ease; }
.hero-v__next:hover{ background:rgba(20,26,36,.5); border-color:rgba(255,255,255,.42); }
.hero-v__next:focus-visible{ outline-color:#fff; }
.hero-v__next-k{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.01em; color:rgba(255,255,255,.8); }
.hero-v__next-k::first-letter{ text-transform:uppercase; }
.hero-v__next-k i{ width:7px; height:7px; border-radius:50%; background:#ff5a6e; flex:none; box-shadow:0 0 0 3px rgba(255,90,110,.18); }
.motion .hero-v__next-k i{ animation:breathe 2.8s ease-in-out infinite; }
@keyframes breathe{ 50%{ opacity:.45; } }
.hero-v__next b{ font-family:var(--font-display); font-weight:600; font-size:17px; line-height:1.25; letter-spacing:-.01em; }
.hero-v__next-m{ font-size:13px; color:rgba(255,255,255,.76); font-variant-numeric:tabular-nums; }
.hero-v__next-go{ position:absolute; right:16px; top:50%; width:18px; height:18px; translate:0 -50%; transition:transform .3s var(--ease-out); }
.hero-v__next-go svg{ width:18px; height:18px; display:block; }
@media (hover:hover) and (pointer:fine){ .hero-v__next:hover .hero-v__next-go{ transform:translateX(3px); } }
.motion .hero-v__next{ animation:rise 1s var(--ease-out) 1050ms both; }
/* Tablet y móvil: el chip sube encima del titular, compacto (abajo lo taparían la barra "Hazte socio" y WhatsApp) */
@media (max-width:960px){
  .hero-v__inner{ display:flex; flex-direction:column; align-items:flex-start; }
  .hero-v .lede{ margin-bottom:0; }
  .hero-v__next{ order:-1; position:relative; right:auto; bottom:auto; width:auto; max-width:100%; margin:0 0 22px; padding:10px 42px 10px 14px; border-radius:12px; gap:2px; }
  .hero-v__next b{ font-size:15px; }
  .hero-v__next-m{ display:none; }
  .hero-v__next-go{ right:13px; }
  .motion .hero-v__next{ animation-delay:120ms; }
}
@media (max-width:640px){ .hero-v__inner{ padding-bottom:96px; } } /* deja sitio al botón Pausar vídeo bajo la prueba social */

/* ---------- Titulares palabra a palabra ---------- */
.motion .wsplit .w > span{ transform:translateY(106%); opacity:0; transition:transform 1s var(--ease-out), opacity .7s ease; transition-delay:calc(var(--i) * 42ms); }
.motion .wsplit.is-in .w > span{ transform:none; opacity:1; }

/* ---------- Fotos: se descubren al llegar y respiran con el scroll (parallax ± 3,5 %) ---------- */
.mr{ --dl:0ms; }
.mr[data-delay="1"]{ --dl:90ms; } .mr[data-delay="2"]{ --dl:180ms; }
.motion .mr{ clip-path:inset(7% 6% 7% 6% round var(--r-card)); transition:clip-path 1.3s var(--ease-out) var(--dl); }
.motion .mr.is-in{ clip-path:inset(0 0 0 0 round var(--r-card)); }
.motion .mr.mr-done{ clip-path:none; }
.motion .mr > img, .motion .mr > video{ scale:1.1; translate:0 var(--py, 0px); transform:scale(1.12); opacity:0; transition:transform 1.8s var(--ease-out) var(--dl), opacity .9s ease var(--dl); }
.motion .mr.is-in > img, .motion .mr.is-in > video{ transform:none; opacity:1; }
.motion .mr.mr-done > img, .motion .mr.mr-done > video{ transition:transform 1.2s var(--ease-out), opacity 1.2s ease; }
@media (hover:hover) and (pointer:fine){
  .motion .moment.mr.is-in:hover > img, .motion .moment.mr.is-in:hover > video, .motion .role:hover .mr.is-in > img, .motion .news-card:hover .mr.is-in > img, .motion .offer--photo.mr.is-in:hover > img, .motion .mphoto.mr.is-in:hover > img{ transform:scale(1.035); }
}
/* Fotos vivas (cinemagraph): el vídeo se funde sobre la foto cuando empieza a sonar... en silencio */
.moment > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.moment--live > img{ position:absolute; inset:0; }
.motion .mr[data-live].is-live > img{ opacity:0; transition:opacity 1.4s ease; }
.final__bg > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block; filter:saturate(.7) contrast(1.05); }
.final__bg > img{ position:relative; transition:opacity 1.4s ease; }
.final__bg--live.is-live > img{ opacity:0; }
.moment figcaption b, .moment figcaption span{ transition:transform .6s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .moment:hover figcaption b, .moment:hover figcaption span{ transform:translateY(-3px); } }

/* Cabeceras de página con foto: la imagen se asienta y hace un parallax suave */
.motion .phero__bg > img, .motion .phero__bg > video{ scale:1.12; translate:0 var(--py, 0px); animation:pheroSettle 2.2s var(--ease-out) both; }
.phero__bg > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9); }
.phero__bg[data-live] > img{ position:absolute; inset:0; transition:opacity 1.4s ease; }
.phero__bg[data-live].is-live > img{ opacity:0; }
@keyframes pheroSettle{ from{ transform:scale(1.07); filter:brightness(.6) saturate(.9); } to{ transform:none; filter:saturate(.9); } }
.motion .phero .crumbs{ animation:fadeIn .8s ease .1s both; }
.motion .phero .lede{ animation:rise 1s var(--ease-out) .45s both; }

/* ---------- Listas en cascada (agenda de portada, ofertas) ---------- */
.motion [data-stagger] > *{ opacity:0; translate:0 16px; transition:opacity .7s ease calc(var(--i, 0) * 80ms), translate 1s var(--ease-out) calc(var(--i, 0) * 80ms); }
.motion .offers[data-stagger] > .offer{ transition:opacity .7s ease calc(var(--i, 0) * 80ms), translate 1s var(--ease-out) calc(var(--i, 0) * 80ms), border-color .2s, transform .3s var(--ease-out), box-shadow .3s; }
.motion [data-stagger].is-in > *{ opacity:1; translate:0 0; }
/* Agenda: filete rojo que crece al pasar por una cita */
.row{ position:relative; }
@media (hover:hover) and (pointer:fine){
  .row::before{ content:''; position:absolute; left:-22px; top:30px; bottom:30px; width:2px; border-radius:2px; background:var(--red); transform:scaleY(0); transform-origin:50% 0; transition:transform .5s var(--ease-out); }
  .row:hover::before{ transform:scaleY(1); }
  .row__date{ transition:transform .5s var(--ease-out); }
  .row:hover .row__date{ transform:translateX(4px); }
}

/* ---------- Cuota: los "check" se dibujan uno tras otro ---------- */
.motion .member .benefits svg path{ stroke-dasharray:21; stroke-dashoffset:21; transition:stroke-dashoffset .7s var(--ease-out); transition-delay:calc(300ms + var(--i, 0) * 90ms); }
.motion .member .is-in .benefits svg path{ stroke-dashoffset:0; }

/* ---------- Carné: guilloché, chip, inclinación leve con reflejo, un destello al llegar ---------- */
.carnet{ --rx:0deg; --ry:0deg; transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); rotate:-3deg; transition:rotate .7s var(--ease-out), translate .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.carnet--flat{ rotate:0deg; }
@media (hover:hover) and (pointer:fine){ .carnet-wrap:hover .carnet{ transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); rotate:0deg; translate:0 -4px; box-shadow:0 2px 6px rgba(20,26,36,.05), 0 40px 64px -26px rgba(20,26,36,.42); } }
.motion .carnet-wrap .carnet:not(.is-live){ opacity:0; transform:perspective(1100px) rotateX(20deg) rotateY(-14deg) translateY(34px); transition:transform 1.5s var(--ease-out) .15s, opacity .9s ease .15s, rotate .7s var(--ease-out); }
.motion .carnet-wrap.is-in .carnet:not(.is-live){ opacity:1; transform:perspective(1100px) rotateX(0deg) rotateY(0deg); }
.carnet::after{ background:radial-gradient(90% 75% at var(--gx, 100%) var(--gy, 0%), rgba(255,255,255,.2), transparent 60%); }
.carnet__guilloche{ position:absolute; inset:0; background:url(/assets/guilloche.svg) center / cover no-repeat; opacity:.2; pointer-events:none; }
.carnet__sheen{ position:absolute; top:-20%; bottom:-20%; left:-60%; width:60%; background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.2) 45%, rgba(255,255,255,.05) 55%, transparent 100%); pointer-events:none; transform:translateX(0); opacity:0; }
.motion .carnet-wrap.is-in .carnet__sheen{ animation:sheen 1.8s var(--ease-io) 1.3s both; }
@keyframes sheen{ 0%{ transform:translateX(0); opacity:0; } 15%{ opacity:1; } 100%{ transform:translateX(330%); opacity:0; } }
.carnet__top, .carnet__name, .carnet__meta{ position:relative; }
.carnet__chip{ position:relative; background:linear-gradient(135deg,#f0e2b0 0%,#c9a955 55%,#e8d7a0 100%); box-shadow:inset 0 0 0 1px rgba(70,52,10,.18); }
.carnet__chip::before{ content:''; position:absolute; inset:6px 7px; border-radius:3px; border:1px solid rgba(90,70,20,.32); background:linear-gradient(rgba(90,70,20,.32),rgba(90,70,20,.32)) 50% 0 / 1px 100% no-repeat, linear-gradient(rgba(90,70,20,.32),rgba(90,70,20,.32)) 0 50% / 100% 1px no-repeat; }

/* ---------- Presidenta: anillo rojo que se dibuja y cita que se ilumina al leerla ---------- */
.pres__frame{ position:relative; flex:none; }
.pres__ring{ position:absolute; inset:-9px; width:calc(100% + 18px); height:calc(100% + 18px); rotate:-90deg; pointer-events:none; overflow:visible; }
.pres__ring circle{ fill:none; stroke:var(--red); stroke-width:1.25; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:0; }
.motion .pres__ring circle{ stroke-dashoffset:1; transition:stroke-dashoffset 2s var(--ease-out) .25s; }
.motion .pres.is-in .pres__ring circle{ stroke-dashoffset:0; }
.motion .quote blockquote.is-reading .qw{ color:rgba(20,26,36,.2); transition:color .5s ease; }
.motion .quote blockquote.is-reading .qw.on{ color:var(--ink); }

/* ---------- Cierre: las caras aparecen una a una ---------- */
.motion .final__inner .avstack > *{ opacity:0; transform:translateY(10px) scale(.94); transition:opacity .6s ease, transform .9s var(--ease-out); }
.motion .final__inner.is-in .avstack > *{ opacity:1; transform:none; }
.final__inner .avstack > :nth-child(2){ transition-delay:70ms; } .final__inner .avstack > :nth-child(3){ transition-delay:140ms; } .final__inner .avstack > :nth-child(4){ transition-delay:210ms; } .final__inner .avstack > :nth-child(5){ transition-delay:280ms; } .final__inner .avstack > :nth-child(6){ transition-delay:350ms; }

/* ---------- WhatsApp: entra una sola vez, al cargar ---------- */
.motion .wa--intro{ animation:rise .8s var(--ease-out) 1.8s both; }

/* ---------- Cambio de página: fundido corto (View Transitions) ---------- */
.header{ view-transition-name:apa-header; }
.proto{ view-transition-name:apa-proto; }
.wa{ view-transition-name:apa-wa; }
::view-transition-old(root){ animation:vtOut .2s ease both; }
::view-transition-new(root){ animation:vtIn .55s var(--ease-out) both; }
@keyframes vtOut{ to{ opacity:0; } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(10px); } }

@media (prefers-reduced-motion:reduce){
  .hero-v__next, .hero-v__scroll, .wa--intro{ animation:none !important; opacity:1 !important; }
  .hero-v__next-k i{ animation:none; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; }
}

/* Móvil: la barra fija "Hazte socio" entra al dejar atrás el botón del hero (y WhatsApp baja a su sitio mientras tanto) */
@media (max-width:640px){
  .sticky-cta{ transition:transform .5s var(--ease-out), opacity .3s ease; }
  .motion .hero-cta-in .sticky-cta{ transform:translateY(calc(100% + 24px)); opacity:0; pointer-events:none; }
  .motion .wa{ transition:bottom .5s var(--ease-out); }
  .motion .hero-cta-in .wa{ bottom:16px; }
}
.header.is-menu{ background:#fff; }

/* Portátiles de pantalla baja (768/720/864 px de alto): el hero entero cabe sin que la prueba social quede al borde */
@media (min-width:961px) and (max-height:880px){
  .hero-v__inner{ padding-top:110px; }
  .hero-v h1{ font-size:clamp(44px, min(6vw, 9vh), 92px); margin-bottom:18px; }
  .hero-v .hero__actions{ margin-top:26px; }
  .hero-v__proof{ margin-top:28px; }
  .hero-v__next{ bottom:154px; }
}

/* Botones de participación que abren WhatsApp: icono verde en los botones claros, blanco en los rojos; no se desplaza como las flechas */
.btn .btn__wa{ display:inline-flex; flex:none; }
.btn .btn__wa svg{ width:18px; height:18px; transform:none !important; }
.btn--outline .btn__wa{ color:#128c7e; }

/* Foto viva (vídeo) del bento: el VÍDEO nunca se escala ni se desplaza (ampliar un vídeo mientras se reproduce
   tiembla en Safari: Jero lo vio dos veces). Al pasar el ratón se funde en 0,15 s a su primer fotograma (idéntico:
   las personas están congeladas) y es esa FOTO la que hace el zoom leve, como las demás; al salir, vuelve al vídeo. */
.motion .moment--live.mr > video{ scale:1; translate:none; transform:none !important; transition:none; }
.motion .moment--live.mr > img{ scale:1; translate:none; }
.motion .moment--live.mr.is-live > img{ opacity:0; transform:none; transition:transform .7s var(--ease-out), opacity .3s ease .7s; }
@media (hover:hover) and (pointer:fine){
  .motion .moment--live.mr.is-live:hover > img{ opacity:1; transform:scale(1.035); transition:opacity .15s ease, transform 1.2s var(--ease-out) .15s; }
}

/* ---------- Elecciones de representantes de padres (/elecciones) ---------- */
.elec-when{ margin-top:18px; font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3vw,34px); line-height:1.15; letter-spacing:-.02em; color:var(--ink); }
.btn--pending{ white-space:normal; max-width:100%; text-align:left; background:var(--canvas-2); color:var(--ink-2); border:1.5px dashed var(--line-strong); cursor:default; }
.btn--pending svg{ width:18px; height:18px; }
.elec-seat{ display:flex; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }
.elec-seat:first-child{ border-top:1px solid var(--line); }
.elec-seat b{ flex:none; min-width:52px; font-family:var(--font-display); font-size:36px; font-weight:700; letter-spacing:-.03em; color:var(--red); line-height:1; }
.elec-seat span{ font-size:16.5px; font-weight:600; color:var(--ink); }
.elec-seat small{ display:block; font-size:14px; font-weight:400; color:var(--ink-3); margin-top:2px; }
.elec-lists{ display:grid; gap:24px; }
.elec-cols{ display:grid; grid-template-columns:2fr 1fr; gap:24px 40px; margin-top:18px; }
.elec-list{ margin:10px 0 0; padding-left:1.8em; font-size:15px; color:var(--ink-2); }
.elec-list li{ padding:3px 0; break-inside:avoid; }
.elec-list li::marker{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
.elec-list--long{ columns:2; column-gap:40px; }
.elec-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:28px; }
@media (max-width:760px){ .elec-cols{ grid-template-columns:1fr; } .elec-list--long{ columns:1; } }