/* ══════════════════════════════════════════════════════════════
Alpha & Omega Community Center — hoja de estilo compartida
La usan index.html y todas las páginas internas.
══════════════════════════════════════════════════════════════ */
:root{
--paper:#F5F9FD;
--navy:#0D427A; /* el azul del logo — el único color suyo de verdad */
--royal:#2E7FD4;
--sky:#A8D0EF;
--ink:#08233F;
--muted:#5B7694;
--line:rgba(13,66,122,.14);
--serif:'Fraunces',Georgia,serif;
--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--shadow:0 18px 44px rgba(13,66,122,.13);
--shadow-lg:0 30px 70px rgba(13,66,122,.20);
}
*{margin:0;padding:0;box-sizing:border-box}
/* NUNCA overflow en : mata el scroll de la página entera */
body{font-family:var(--sans); color:var(--ink); background:var(--paper);
line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{display:block; max-width:100%}
a{color:inherit}
/* ── fondo de luz ───────────────────────────────────────── */
#bg{position:fixed; inset:0; z-index:0; width:100%; height:100%; display:block}
#bgfall{position:fixed; inset:0; z-index:0;
background:radial-gradient(1200px 700px at 20% 10%, #fff, #E3F0FB 45%, #BFDCF4 100%)}
#veil{position:fixed; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(245,249,253,.35), rgba(245,249,253,.86) 62%, var(--paper))}
/* polvo de luz: se mueve mientras bajas */
#dust{position:fixed; inset:0; z-index:1; pointer-events:none; width:100%; height:100%}
#prog{position:fixed; top:0; left:0; height:3px; z-index:60; transform-origin:0 50%;
width:100%; transform:scaleX(0);
background:linear-gradient(90deg,var(--royal),#7FC1F0,var(--navy))}
:root{--pad:clamp(16px,3.4vw,34px)}
.wrap{width:100%; max-width:1220px; margin:0 auto; padding:0 var(--pad)}
/* interruptor de idioma compacto para la cabecera móvil.
Texto, no banderas: una bandera es un país, no un idioma. */
.langshort{display:none; background:#fff; border:1px solid var(--line); border-radius:99px;
padding:8px 12px; font:inherit; font-size:12.5px; font-weight:700; color:var(--navy);
cursor:pointer; letter-spacing:.06em; flex:0 0 auto; white-space:nowrap}
.langshort b{color:var(--royal)}
.langshort:hover{border-color:var(--royal)}
main,header,footer{position:relative; z-index:2}
/* ── cabecera con menú desplegable ──────────────────────── */
header{position:sticky; top:0; z-index:40; background:rgba(245,249,253,.86);
backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.hd{display:flex; align-items:center; gap:clamp(10px,2vw,26px); height:72px}
/* el logo NUNCA se deforma ni se comprime */
.hd>a{flex:0 0 auto; display:block}
.hd>a>img{height:38px; width:auto; max-width:none; object-fit:contain}
/* ── menú hamburguesa (solo móvil) ──────────────────────── */
.burger{display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff;
border-radius:12px; cursor:pointer; padding:0; position:relative; flex:0 0 auto}
.burger i{position:absolute; left:12px; right:12px; height:2px; background:var(--navy);
border-radius:2px; transition:transform .3s ease, opacity .2s ease}
.burger i:nth-child(1){top:15px}
.burger i:nth-child(2){top:21px}
.burger i:nth-child(3){top:27px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu{position:fixed; inset:0; z-index:100; background:rgba(245,249,253,.97);
backdrop-filter:blur(16px); padding:20px clamp(20px,6vw,34px) 34px; overflow-y:auto;
opacity:0; pointer-events:none; transform:translateY(-12px);
transition:opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1)}
/* la X propia del panel: el menú tapa la cabecera, así que la hamburguesa
convertida en aspa quedaba debajo y no se podía pulsar */
.menu .mx{position:sticky; top:0; margin-left:auto; display:grid; place-items:center;
width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line);
color:var(--navy); font-size:24px; line-height:1; cursor:pointer; box-shadow:var(--shadow);
transition:transform .2s ease, background .2s ease}
.menu .mx:hover{background:var(--navy); color:#fff; transform:rotate(90deg)}
.menu.on{opacity:1; pointer-events:auto; transform:none}
.menu h5{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--royal);
font-weight:700; margin:22px 0 10px}
.menu a{display:flex; justify-content:space-between; align-items:center; gap:14px;
text-decoration:none; color:var(--navy); font-family:var(--serif); font-size:22px;
font-weight:600; padding:13px 0; border-bottom:1px solid var(--line)}
.menu a small{font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--muted)}
.menu a:active{color:var(--royal)}
.menu .mfoot{margin-top:28px; display:flex; gap:10px; flex-wrap:wrap}
.menu .mfoot .btn{flex:1 1 100%}
nav{display:flex; gap:clamp(8px,1.4vw,20px); margin-left:auto; align-items:center}
nav>div{position:relative}
nav a, nav .top{text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink);
opacity:.82; padding:8px 2px; border-bottom:2px solid transparent; cursor:pointer;
display:inline-flex; align-items:center; gap:5px; background:none; border-top:0;
border-left:0; border-right:0; font-family:inherit}
nav a:hover, nav .top:hover{opacity:1; border-bottom-color:var(--royal)}
nav .top::after{content:'▾'; font-size:10px; opacity:.6}
.drop{position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg);
padding:8px; min-width:268px; opacity:0; visibility:hidden; transition:.22s ease}
nav>div:hover .drop, nav>div:focus-within .drop{opacity:1; visibility:visible; transform:translate(-50%,0)}
.drop a{display:flex; justify-content:space-between; gap:14px; padding:10px 13px; border-radius:10px;
font-size:14px; opacity:1; border:0}
.drop a:hover{background:var(--paper); border:0}
.drop a small{color:var(--muted); font-size:12.5px; white-space:nowrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
border-radius:99px; border:1px solid transparent; cursor:pointer; font:inherit; font-weight:600;
transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn.give{background:var(--royal); color:#fff; padding:11px 24px; font-size:14.5px;
box-shadow:0 10px 24px rgba(46,127,212,.34)}
.btn.give:hover{background:var(--navy)}
.btn.ghost{background:#fff; color:var(--navy); border-color:var(--line); padding:11px 22px;
font-size:14.5px; box-shadow:var(--shadow)}
.btn.big{padding:16px 32px; font-size:16px; will-change:transform}
#lang{background:#fff; border:1px solid var(--line); border-radius:99px; padding:8px 14px;
font:inherit; font-size:13px; font-weight:600; color:var(--navy); cursor:pointer}
#lang b{background:var(--royal); color:#fff; font-size:10px; padding:2px 6px; border-radius:5px;
margin-right:7px; letter-spacing:.05em}
/* ── hero ───────────────────────────────────────────────── */
#hero{padding:clamp(38px,6vw,80px) 0 clamp(28px,4vw,50px); position:relative}
/* el vídeo, algo más grande y algo más arriba (encargo del usuario) */
.hgrid{display:grid; grid-template-columns:1fr 1.14fr; gap:clamp(26px,4vw,54px); align-items:center}
@media (min-width:1001px){ .vid{transform:translateY(-38px)} }
@media (min-width:1001px){ .seal{bottom:-6px} }
/* la fachada del centro, detrás de todo */
/* El lienzo del local + nubes. Todo el efecto vive en el shader. */
.facade{position:absolute; inset:0; z-index:0; pointer-events:none;
width:100%; height:100%; display:block;
/* La densidad de la bruma la decide el shader (espesa arriba, clara abajo).
Aquí solo un fundido corto al final, para no cortar en seco con la página. */
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%)}
#hero>.wrap{position:relative; z-index:2}
.eyebrow{display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
border-radius:99px; padding:7px 15px; font-size:12.5px; font-weight:600; color:var(--navy);
box-shadow:var(--shadow)}
.eyebrow i{width:8px; height:8px; border-radius:50%; background:var(--royal); display:block}
h1{font-family:var(--serif); font-weight:900; line-height:1.0; letter-spacing:-.028em;
font-size:clamp(36px,5.4vw,70px); margin-top:20px; color:var(--navy)}
h1 em{font-style:italic; font-weight:400; color:var(--royal)}
.lead{margin-top:20px; font-size:clamp(15.5px,1.35vw,18px); color:var(--muted); max-width:52ch}
/* sobre la foto del local el texto necesita halo, no un rectángulo opaco:
así se lee siempre y las nubes se siguen viendo detrás */
#hero .lead, #hero .quick{color:#123A5E;
text-shadow:0 1px 0 rgba(255,255,255,.95), 0 0 14px rgba(245,249,253,1),
0 0 28px rgba(245,249,253,.95), 0 0 46px rgba(245,249,253,.8)}
#hero h1{text-shadow:0 2px 26px rgba(245,249,253,.75)}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.quick{margin-top:24px; display:flex; flex-wrap:wrap; gap:9px 22px; font-size:14px; color:var(--muted)}
.quick a{color:var(--navy); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line)}
/* sello giratorio: gira con el scroll, se ve que la página está viva */
.seal{position:absolute; right:clamp(10px,3vw,44px); bottom:-34px; z-index:3;
width:clamp(104px,10vw,138px); aspect-ratio:1; pointer-events:none;
background:#fff; border-radius:50%; box-shadow:var(--shadow-lg);
display:grid; place-items:center}
.seal svg{position:absolute; inset:0; width:100%; height:100%; will-change:transform}
.seal text{font-family:var(--sans); font-size:15px; font-weight:700; fill:var(--navy);
letter-spacing:.09em}
.seal b{font-family:var(--serif); font-size:clamp(20px,2.2vw,28px); color:var(--royal);
font-weight:900; line-height:1}
/* 16:9 igual que la portada y que el vídeo: así no se recorta a nadie */
.vid{position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg);
background:#0A2440; aspect-ratio:16/9; cursor:pointer; border:1px solid rgba(255,255,255,.6)}
.vid img{width:100%; height:100%; object-fit:cover; opacity:.88; transition:transform .7s ease, opacity .4s}
.vid:hover img{transform:scale(1.05); opacity:1}
.vid iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vid .play{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.vid .play i{width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.94);
display:grid; place-items:center; box-shadow:0 12px 34px rgba(0,0,0,.34)}
.vid .play i::after{content:''; border-left:20px solid var(--navy); border-top:12px solid transparent;
border-bottom:12px solid transparent; margin-left:6px}
.vid .cap{position:absolute; left:0; right:0; bottom:0; padding:44px 20px 16px; color:#fff;
background:linear-gradient(transparent,rgba(4,18,36,.88)); font-size:13.5px; pointer-events:none}
.vid .cap b{display:block; font-family:var(--serif); font-size:18px; font-weight:600}
/* ── cinta ──────────────────────────────────────────────── */
.marq{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
background:rgba(255,255,255,.6); backdrop-filter:blur(8px); padding:16px 0; margin-top:clamp(24px,4vw,44px)}
.marq-in{display:flex; white-space:nowrap; will-change:transform}
.marq-in span{font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.6vw,34px);
color:var(--navy); padding:0 26px; display:inline-flex; align-items:center; gap:26px; opacity:.9}
.marq-in span::after{content:''; width:9px; height:9px; border-radius:50%; background:var(--royal);
display:block; opacity:.6}
/* ── números ────────────────────────────────────────────── */
.band{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line);
border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-top:clamp(26px,4vw,48px)}
.band div{background:#fff; padding:clamp(18px,2.4vw,28px); text-align:center}
.band b{display:block; font-family:var(--serif); font-weight:900; color:var(--navy);
font-size:clamp(28px,3.4vw,46px); line-height:1}
.band span{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
/* ── secciones ──────────────────────────────────────────── */
.sec{padding:clamp(48px,6.5vw,96px) 0}
.stitle{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
margin-bottom:clamp(22px,3vw,40px)}
h2{font-family:var(--serif); font-weight:600; letter-spacing:-.02em; line-height:1.04;
font-size:clamp(28px,3.8vw,48px); color:var(--navy)}
h2 em{font-style:italic; color:var(--royal)}
.stitle p{color:var(--muted); max-width:46ch; font-size:15.5px}
/* ── tarjetas de servicio ───────────────────────────────── */
/* Rejilla de 6 columnas: cada tarjeta ocupa 2 (o sea, tres por fila).
Las DOS ÚLTIMAS ocupan 3 cada una — mitad y mitad — para que la última
fila no quede coja con un hueco vacío a la derecha. */
.grid{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.7vw,22px)}
.grid > *{grid-column:span 2}
.grid > :nth-last-child(-n+2){grid-column:span 3}
.card{position:relative; background:#fff; border:1px solid var(--line); border-radius:20px;
overflow:hidden; text-decoration:none; display:flex; flex-direction:column;
box-shadow:var(--shadow); transform-style:preserve-3d;
transition:transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s, border-color .34s}
.card:hover{box-shadow:var(--shadow-lg); border-color:rgba(46,127,212,.42)}
/* filo de luz al pasar por encima */
.card::after{content:''; position:absolute; inset:0; border-radius:20px; pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(46,127,212,0); transition:box-shadow .34s}
.card:hover::after{box-shadow:inset 0 0 0 1px rgba(46,127,212,.35)}
/* la flecha aparece al pasar */
.card .body::after{content:'→'; position:absolute; right:20px; bottom:19px; font-size:17px;
color:var(--royal); opacity:0; transform:translateX(-8px);
transition:opacity .3s ease, transform .38s cubic-bezier(.16,1,.3,1)}
.card:hover .body::after{opacity:1; transform:none}
.card .thumb{aspect-ratio:16/10; overflow:hidden; background:linear-gradient(140deg,var(--sky),#fff)}
.card .thumb img{width:100%; height:100%; object-fit:cover; will-change:transform}
.card .thumb.icon{display:grid; place-items:center; background:linear-gradient(140deg,#E6F1FB,#CFE4F6)}
.card .thumb.icon svg{width:52px; height:52px; stroke:var(--navy); fill:none; stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round; opacity:.85}
.card .body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:7px; flex:1}
.card h3{font-family:var(--serif); font-size:21px; font-weight:600; color:var(--navy); line-height:1.15}
.card p{font-size:14px; color:var(--muted); flex:1}
.card .key{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
color:var(--royal); background:rgba(46,127,212,.09); border-radius:99px; padding:6px 12px;
align-self:flex-start}
.card.free .key{color:#15704A; background:rgba(21,112,74,.1)}
/* ── bloque detalle (páginas internas) ──────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,62px); align-items:center}
.split.flip .shot{order:2}
/* El hueco se reserva SIEMPRE con aspect-ratio, y lleva un degradado debajo
para que mientras la foto viaja no haya un rectángulo blanco. */
.shot{border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3;
background:linear-gradient(155deg,#dcebf8,#bcd8ef)}
.shot.board-shot{aspect-ratio:16/10}
.shot img{width:100%; height:100%; object-fit:cover; display:block; will-change:transform}
.shot img.no-parallax{object-position:center top; transform:none}
/* La animación SOLO existe si el JavaScript vive. Antes iba suelta, así que
sin JS las fotos se quedaban recortadas a cero y no se veían nunca. */
/* La foto entra IGUAL QUE EL TEXTO: mismo desvanecido, mismo empuje desde
abajo, misma curva y mismo tiempo que `.rev`. Como ya se descargan todas al
abrir la página, el desvanecido es decoración y no puede parecer una carga
lenta — que fue lo que falló en los intentos anteriores.
Va en el CONTENEDOR, no en el ![]()
: el paralaje del scroll reescribe el
transform de la imagen en cada fotograma y lo pisaría. */
html.anim .shot{opacity:0; transform:translateY(22px);
transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1)}
html.anim .shot.in{opacity:1; transform:none}
.facts{margin-top:22px; display:flex; flex-direction:column; gap:11px}
.facts div{display:flex; gap:12px; align-items:baseline; font-size:15px}
.facts b{min-width:112px; color:var(--navy); font-weight:600; font-size:13px;
letter-spacing:.05em; text-transform:uppercase}
.facts span{color:var(--muted)}
/* ── recursos ───────────────────────────────────────────── */
.res{background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(22px,3vw,36px);
box-shadow:var(--shadow)}
/* auto-FILL (no auto-fit) + stretch: todas las cajas del mismo ancho y alto,
aunque la última fila vaya a medias */
.res ul{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:10px; margin-top:18px; align-items:stretch}
.res li{display:flex}
.res li a{width:100%; min-height:78px; align-content:flex-start}
.res li a{display:flex; flex-direction:column; justify-content:flex-start; gap:5px;
text-decoration:none; position:relative; overflow:hidden;
border:1px solid var(--line); border-radius:13px; padding:14px 16px; font-size:14.5px;
background:var(--paper);
transition:border-color .26s, background .26s, transform .26s cubic-bezier(.16,1,.3,1), box-shadow .26s}
.res li a:hover{border-color:var(--royal); background:#fff;
transform:translateY(-3px); box-shadow:var(--shadow)}
/* barrita azul que crece por la izquierda al pasar */
.res li a::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
background:var(--royal); transform:scaleY(0); transform-origin:50% 0;
transition:transform .32s cubic-bezier(.16,1,.3,1)}
.res li a:hover::before{transform:scaleY(1)}
/* ── LÍNEA DEL TIEMPO (nosotros) ─────────────────────────── */
.linea{list-style:none; margin:26px 0 0; padding:0; position:relative}
/* el hilo vertical: se para en el último punto, no cuelga por debajo */
.linea::before{content:''; position:absolute; left:8px; top:10px; bottom:10px; width:2px;
background:linear-gradient(var(--royal), var(--sky))}
.linea li{position:relative; display:grid; grid-template-columns:104px 1fr; gap:clamp(14px,2.4vw,30px);
padding:0 0 clamp(22px,3vw,36px) 34px; align-items:start}
.linea li:last-child{padding-bottom:0}
/* el punto, encima del hilo */
.linea li::before{content:''; position:absolute; left:2px; top:7px; width:15px; height:15px;
border-radius:50%; background:#fff; border:3px solid var(--royal); box-sizing:border-box}
.linea li:last-child::before{background:var(--royal)}
.linea b{font-family:var(--serif); font-weight:900; font-size:clamp(19px,2.2vw,26px);
color:var(--navy); line-height:1.1; letter-spacing:-.01em}
.linea h4{margin:0 0 5px; font-size:15px; font-weight:600; color:var(--ink)}
.linea p{margin:0; font-size:14.5px; line-height:1.62; color:var(--muted); max-width:62ch}
@media (max-width:640px){
/* en móvil la fecha va encima del texto: 104px de columna se comen la pantalla */
.linea li{grid-template-columns:1fr; gap:6px; padding-left:30px}
.linea b{font-size:20px}
}
/* min-width:0 deja que el texto se parta; sin él la fila se sale de la pantalla */
.res li a > span{min-width:0; overflow-wrap:anywhere}
.res li a > span:first-child{color:var(--ink); font-weight:600; line-height:1.3}
.res li a > span:last-child{color:var(--muted); font-size:13px; line-height:1.35}
/* ── donación ───────────────────────────────────────────── */
#donar .box{background:linear-gradient(150deg,var(--navy),#12599F 62%,var(--royal));
color:#fff; border-radius:26px; padding:clamp(28px,4.5vw,62px); box-shadow:var(--shadow-lg)}
#donar h2, #donar h2 em{color:#fff}
#donar h2 em{color:#B9DCFA}
#donar p{color:rgba(255,255,255,.82); max-width:52ch; margin-top:14px}
.amts-hint{font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
color:rgba(255,255,255,.62); margin-top:26px; font-weight:600}
.amts{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px}
.amt{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); border-radius:16px;
padding:16px 20px; min-width:158px; cursor:pointer; transition:background .2s, transform .2s}
.amt:hover{background:rgba(255,255,255,.22); transform:translateY(-3px)}
.amt b{display:block; font-family:var(--serif); font-size:27px; font-weight:600}
.amt span{font-size:12.5px; color:rgba(255,255,255,.78)}
.amt.sel{background:#fff; color:var(--navy)}
.amt.sel span{color:var(--muted)}
#donar .btn.give{background:#fff; color:var(--navy); margin-top:24px}
#donar .btn.give:hover{background:#EAF3FC}
.tax{margin-top:16px; font-size:12.5px; color:rgba(255,255,255,.66)}
/* ── VENTANA DEL VÍDEO ──────────────────────────────────── */
.lb{position:fixed; inset:0; z-index:120; display:grid; place-items:center;
padding:clamp(14px,4vw,44px); opacity:0; pointer-events:none;
transition:opacity .3s ease}
.lb.on{opacity:1; pointer-events:auto}
.lb-bg{position:absolute; inset:0; background:rgba(6,22,44,.62); backdrop-filter:blur(9px)}
.lb-card{position:relative; width:min(880px,100%); background:#fff; border-radius:26px;
padding:clamp(10px,1.4vw,16px); box-shadow:0 50px 120px rgba(6,22,44,.45),
0 0 0 1px rgba(13,66,122,.10), 0 0 0 8px rgba(255,255,255,.55);
transform:translateY(22px) scale(.96); opacity:0;
transition:transform .48s cubic-bezier(.16,1,.3,1), opacity .34s ease}
.lb.on .lb-card{transform:none; opacity:1}
/* marco azul interior */
.lb-frame{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/9;
background:linear-gradient(150deg,#0D427A,#12599F 60%,#2E7FD4);
padding:clamp(5px,.7vw,9px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.lb-video{position:relative; width:100%; height:100%; border-radius:13px; overflow:hidden;
background:#08233F}
.lb-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.lb-load{position:absolute; inset:0; display:grid; place-items:center; color:#9FCDF3;
font-size:12px; letter-spacing:.24em; text-transform:uppercase}
.lb-foot{display:flex; align-items:center; justify-content:space-between; gap:16px;
flex-wrap:wrap; padding:16px clamp(8px,1.2vw,14px) 8px}
.lb-foot b{display:block; font-family:var(--serif); font-size:20px; font-weight:600;
color:var(--navy); line-height:1.15}
.lb-foot span{font-size:13.5px; color:var(--muted)}
.lb-x{position:absolute; top:-14px; right:-14px; width:44px; height:44px; border-radius:50%;
background:#fff; border:1px solid var(--line); color:var(--navy); font-size:22px; line-height:1;
cursor:pointer; box-shadow:var(--shadow); display:grid; place-items:center;
transition:transform .2s ease, background .2s ease}
.lb-x:hover{background:var(--navy); color:#fff; transform:rotate(90deg) scale(1.06)}
@media (max-width:640px){
.lb-card{border-radius:20px; box-shadow:0 30px 70px rgba(6,22,44,.5), 0 0 0 1px rgba(13,66,122,.1)}
.lb-x{top:-10px; right:-6px; width:38px; height:38px; font-size:19px}
.lb-foot{padding:14px 6px 4px}
.lb-foot .btn{width:100%}
}
/* ── EL MOTOR: sección clavada, el scroll es la línea de tiempo ── */
.morph{position:relative; height:360svh; z-index:2}
.morph .stick{position:sticky; top:0; height:100svh; overflow:hidden;
display:grid; place-items:center}
#morphcv{position:absolute; inset:0; width:100%; height:100%; display:block}
/* El texto va DELANTE, en grande, con los puntos detrás. */
.mcaps{position:absolute; inset:0; z-index:2; display:grid; place-items:center;
text-align:center; padding:0 clamp(16px,4vw,50px); pointer-events:none}
.mcap{grid-area:1/1; opacity:0; transition:opacity .4s ease; width:100%}
/* OJO al `>`: sin él esta regla pilla también los con los que el código
envuelve cada palabra del titular, y lo deja a 11px con píldora azul. */
.mcap > span{display:inline-block; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
color:var(--navy); font-weight:700; margin-bottom:14px;
background:rgba(255,255,255,.82); padding:7px 14px; border-radius:99px;
backdrop-filter:blur(6px)}
/* Anton: condensada, alta y gruesa. Relleno blanco, contorno y sombra en azul marino. */
.mcap h2{font-family:'Anton',Impact,'Arial Narrow',sans-serif; font-weight:400;
text-transform:uppercase; letter-spacing:.008em; line-height:1.02;
font-size:clamp(28px,6.2vw,88px); max-width:16ch; margin:0 auto; color:#fff;
-webkit-text-stroke:clamp(1.5px,.28vw,3.5px) var(--navy);
paint-order:stroke fill;
text-shadow:
0.055em 0.055em 0 rgba(13,66,122,.92),
0.11em 0.11em 0 rgba(13,66,122,.30),
0 0 26px rgba(255,255,255,.85)}
.mcap h2 em{font-style:normal; color:#9FCDF3}
.mhint{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted)}
.mhint::after{content:''; display:block; width:1px; height:30px; margin:10px auto 0;
background:linear-gradient(var(--muted),transparent)}
/* ══ PÁGINAS INTERNAS ═══════════════════════════════════ */
/* cabecera de página, con foto detrás */
.phero{position:relative; padding:clamp(46px,7vw,96px) 0 clamp(34px,4.5vw,64px); overflow:hidden}
.pheroimg{position:absolute; inset:0; z-index:0; overflow:hidden}
.pheroimg img{width:100%; height:100%; object-fit:cover; object-position:center 45%}
/* La cabecera se desvanece al llegar la foto, igual que el resto. Como está
arriba del todo no la revela el scroll: la revela su propio `load`. */
html.anim .pheroimg img{opacity:0; transition:opacity .9s ease}
html.anim .pheroimg img.ok{opacity:1}
/* El vídeo YA tiene su propia transición (el zoom del hover) y su opacidad de
reposo es .88, no 1. Aquí SOLO se pone a cero hasta que llega la foto:
si se vuelve a declarar `transition` se pierde el `transform .7s` y el zoom
deja de ser suave — pasa de normal a grande de un salto. */
html.anim .vid img:not(.ok){opacity:0}
.pheroimg::after{content:''; position:absolute; inset:0;
background:linear-gradient(100deg, rgba(245,249,253,.97) 0%, rgba(245,249,253,.90) 38%,
rgba(245,249,253,.62) 70%, rgba(245,249,253,.42) 100%)}
.phero > .wrap{position:relative; z-index:2}
.phero h1{max-width:17ch}
.phero .lead{max-width:54ch; color:#123A5E;
text-shadow:0 1px 0 rgba(255,255,255,.95), 0 0 16px rgba(245,249,253,1)}
/* dato gigante cuando no hay foto que valga (radio) */
.shot.bignum{display:grid; place-items:center; clip-path:none;
background:linear-gradient(150deg,var(--navy),#12599F 60%,var(--royal))}
.shot.bignum b{display:block; font-family:var(--serif); font-weight:900; color:#fff;
font-size:clamp(56px,9vw,124px); line-height:1; text-align:center}
.shot.bignum span{display:block; margin-top:12px; font-size:11.5px; letter-spacing:.26em;
text-transform:uppercase; color:rgba(255,255,255,.78); text-align:center}
/* rejilla de dos tarjetas */
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.two > *, .grid.two > :nth-last-child(-n+2){grid-column:span 1}
/* cierre de página */
.cierre{background:#fff; border:1px solid var(--line); border-radius:24px;
padding:clamp(28px,4vw,54px); text-align:center; box-shadow:var(--shadow)}
.cierre p{color:var(--muted); margin-top:14px; font-size:16px; max-width:56ch;
margin-left:auto; margin-right:auto}
.cierre .cta{justify-content:center}
.cierre-datos{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px;
margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.cierre-datos div{text-align:center}
.cierre-datos b{display:block; font-family:var(--serif); font-size:17px; color:var(--navy);
font-weight:600}
.cierre-datos span{display:block; font-size:13.5px; color:var(--muted); margin-top:2px}
/* mapa */
.mapwrap{border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg);
border:1px solid var(--line); aspect-ratio:16/9; background:var(--sky)}
.mapwrap iframe{width:100%; height:100%; border:0; display:block}
/* ── GALERÍA ─────────────────────────────────────────────── */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:clamp(8px,1vw,14px)}
.gitem{position:relative; padding:0; border:0; cursor:pointer; overflow:hidden;
border-radius:14px; background:var(--sky); aspect-ratio:1;
box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s}
.gitem:nth-child(6n+1){aspect-ratio:1/1.28}
.gitem:nth-child(6n+4){aspect-ratio:1.28/1}
.gitem img{width:100%; height:100%; object-fit:cover; display:block;
transition:transform .5s cubic-bezier(.16,1,.3,1), filter .4s}
.gitem:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.gitem:hover img{transform:scale(1.07)}
.gitem::after{content:''; position:absolute; inset:0; background:rgba(13,66,122,0);
transition:background .3s}
.gitem:hover::after{background:rgba(13,66,122,.10)}
html.anim .gitem{opacity:0; transform:translateY(24px) scale(.97);
transition:opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1)}
html.anim .gitem.in{opacity:1; transform:none}
/* la ventana también sirve para fotos */
/* con foto, el marco desaparece: el azul oscuro salía por detrás de la imagen */
.lb-frame.foto{aspect-ratio:auto; background:transparent; padding:0; box-shadow:none;
display:grid; place-items:center; border-radius:0}
.lb-frame.foto .lb-video{background:transparent; border-radius:0; height:auto;
display:grid; place-items:center}
.lb-frame.foto img{max-width:100%; max-height:78svh; width:auto; height:auto;
border-radius:14px; display:block}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px;
border-radius:50%; background:rgba(255,255,255,.92); border:1px solid var(--line);
color:var(--navy); font-size:20px; cursor:pointer; display:grid; place-items:center;
box-shadow:var(--shadow); z-index:3}
.lb-nav.prev{left:-6px} .lb-nav.next{right:-6px}
.lb-nav:hover{background:var(--navy); color:#fff}
/* ── acordeón de recursos (se pliega solo en móvil) ─────── */
.acc{border:0}
.acc > summary{list-style:none; cursor:default}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary .chev{display:none}
@media (max-width:640px){
.acc > summary{cursor:pointer; display:flex; align-items:center; justify-content:space-between;
gap:12px; background:#fff; border:1px solid var(--line); border-radius:14px;
padding:14px 16px; margin-bottom:10px; box-shadow:var(--shadow)}
.acc > summary .stitle{margin:0; display:block}
.acc > summary h2{font-size:20px; line-height:1.2}
.acc > summary .stitle p{display:none}
.acc > summary .chev{display:block; flex:0 0 auto; width:22px; height:22px;
transition:transform .3s ease; color:var(--royal)}
.acc[open] > summary .chev{transform:rotate(180deg)}
.acc[open] > summary{border-color:var(--royal)}
}
/* ── boletín ────────────────────────────────────────────── */
.news{background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
padding:clamp(24px,3.4vw,42px); display:grid; grid-template-columns:1.2fr 1fr;
gap:clamp(20px,3vw,44px); align-items:center}
.news h3{font-family:var(--serif); font-size:clamp(22px,2.6vw,32px); font-weight:600; color:var(--navy);
line-height:1.12}
.news p{color:var(--muted); font-size:15px; margin-top:10px; max-width:44ch}
.news .acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.news form{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.news input{flex:1; min-width:180px; border:1px solid var(--line); border-radius:99px;
padding:13px 18px; font:inherit; font-size:14.5px; color:var(--ink); background:var(--paper)}
.news input:focus{outline:2px solid var(--royal); outline-offset:1px; background:#fff}
.news small{display:block; margin-top:10px; font-size:12px; color:var(--muted)}
/* ── pie — claro, como el resto de la web ───────────────── */
footer{background:#fff; border-top:1px solid var(--line); color:var(--ink);
padding:clamp(34px,4.5vw,60px) 0 90px; margin-top:clamp(36px,5vw,76px)}
footer .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:clamp(20px,3vw,44px)}
/* `width:auto` NO sobra. El ![]()
lleva width="801" como atributo, y eso cuenta
como anchura pedida, no como proporción: `max-width:100%` lo recortaba al
ancho de la columna y el logo salía achatado. */
footer .brand img{height:46px; width:auto}
footer .brand p{color:var(--muted); font-size:14.5px; margin-top:14px; line-height:1.7}
footer .brand a.tel{display:inline-block; font-family:var(--serif); font-size:23px; font-weight:600;
color:var(--navy); text-decoration:none; margin-top:12px}
footer .brand a.tel:hover{color:var(--royal)}
footer h4{font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--royal);
margin-bottom:13px; font-weight:700}
footer a{color:var(--ink); text-decoration:none; display:block; padding:4px 0; font-size:14.5px; opacity:.8}
footer a:hover{opacity:1; color:var(--royal)}
/* interlineado apretado: con 1.9 los datos parecían sueltos */
footer .hours{font-size:14.5px; color:var(--muted); line-height:1.45}
footer .hours b{color:var(--ink); font-weight:600; display:inline-block; margin-top:2px}
footer .hours .sep{display:block; height:12px}
footer .social{display:flex; gap:9px; margin-top:14px}
footer .social a{width:38px; height:38px; border:1px solid var(--line); border-radius:11px;
display:grid; place-items:center; padding:0; font-size:15px; opacity:1}
footer .social a:hover{border-color:var(--royal); background:var(--paper)}
footer .fbot{border-top:1px solid var(--line); margin-top:clamp(26px,3vw,40px); padding-top:18px;
display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
font-size:12.5px; color:var(--muted)}
footer .fbot .ein{font-variant-numeric:tabular-nums}
/* ── barra móvil ────────────────────────────────────────── */
#bar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
border-top:1px solid var(--line); box-shadow:0 -12px 34px rgba(13,66,122,.13);
padding-bottom:env(safe-area-inset-bottom)} /* respeta la barra del iPhone */
#bar a{flex:1 1 0; min-width:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:4px;
padding:10px 4px 11px; text-decoration:none; color:var(--navy);
font-size:11px; font-weight:600; letter-spacing:.01em; line-height:1.1;
position:relative; transition:background .18s ease, color .18s ease}
#bar a svg{width:22px; height:22px; display:block; fill:none; stroke:currentColor;
stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
#bar a span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
#bar a::after{content:''; position:absolute; right:0; top:22%; bottom:22%; width:1px;
background:var(--line)}
#bar a:last-child::after{display:none}
#bar a:active{background:var(--paper)}
#bar a.pri{background:var(--royal); color:#fff}
#bar a.pri::after{display:none}
#bar a.pri:active{background:var(--navy)}
/* ── animación (solo si el JS está vivo) ────────────────── */
html.anim .rev{opacity:0; transform:translateY(22px);
transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1)}
html.anim .rev.in{opacity:1; transform:none}
html.anim .card{opacity:0; transform:translateY(30px) scale(.97); filter:blur(6px);
transition:opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1), filter .8s ease, box-shadow .3s}
html.anim .card.in{opacity:1; transform:none; filter:none}
/* La caja recorta para que la palabra "suba". Sin este colchón corta las colas
de la j/g/y y el remate de las cursivas: el texto se ve mocho. */
.kin .w{display:inline-block; overflow:hidden; vertical-align:bottom;
padding:.05em .18em .22em; margin:0 -.18em -.22em}
.kin .w>i{display:inline-block; font-style:inherit; transform:translateY(120%);
transition:transform 1s cubic-bezier(.16,1,.3,1)}
.kin.in .w>i{transform:none}
@media (max-width:1000px){
.hgrid{grid-template-columns:1fr}
.grid{grid-template-columns:repeat(2,1fr)}
.grid > *, .grid > :nth-last-child(-n+2){grid-column:span 1}
.split{grid-template-columns:1fr}
.split.flip .shot{order:0}
footer .cols{grid-template-columns:1fr 1fr}
.news{grid-template-columns:1fr}
nav{display:none}
}
/* En móvil la cabecera se queda SOLO con logo + hamburguesa.
Donar e idioma se van dentro del menú: así nada se sale del borde. */
/* En móvil la cabecera se queda con logo + DONAR + hamburguesa.
El idioma se va al menú: se detecta solo y se recuerda, así que es un repuesto.
Donar es el objetivo de la web y no se esconde. */
@media (max-width:1000px){
.burger{display:block; order:4; margin-left:0}
.hd > #lang{display:none}
.hd > .langshort{display:block; order:2; margin-left:auto}
.hd > .btn.give{order:3; margin-left:0}
}
/* el logo, dentro del menú abierto */
.menu .mlogo{display:block; margin-bottom:6px}
.menu .mlogo img{height:38px; width:auto}
@media (max-width:640px){
.grid{grid-template-columns:1fr}
.band{grid-template-columns:repeat(2,1fr)}
footer .cols{grid-template-columns:1fr}
#bar{display:flex}
body{padding-bottom:62px}
footer{padding-bottom:30px}
/* pantalla pequeña = texto MÁS grande, no más pequeño */
.lead{font-size:16.8px; line-height:1.62}
.card p{font-size:15px}
.card h3{font-size:22px}
.facts div{font-size:15.8px}
.stitle p, .res li a{font-size:15.5px}
.quick{font-size:14.6px}
.amt span{font-size:13.5px}
footer a, footer .brand p, footer .hours{font-size:15.5px}
/* botones menos altos y menos anchos */
.btn.big{padding:13px 24px; font-size:15.5px}
.btn.give, .btn.ghost{padding:10px 20px; font-size:14px}
.cta{gap:10px}
.hd{height:64px; gap:8px}
.hd>a>img{height:29px}
#lang{padding:7px 11px; font-size:12px}
/* compacto para que quepan logo + Donar + hamburguesa sin apreturas */
.hd > .btn.give{padding:9px 16px; font-size:13.5px; white-space:nowrap}
.burger{width:40px; height:40px}
.burger i{left:11px; right:11px}
.burger i:nth-child(1){top:13px}
.burger i:nth-child(2){top:19px}
.burger i:nth-child(3){top:25px}
/* EL VÍDEO, A PANTALLA COMPLETA EN MÓVIL */
.lb{padding:0; place-items:center}
.lb-bg{background:rgba(4,16,34,.94)}
.lb-card{width:100%; height:100%; border-radius:0; padding:0; box-shadow:none;
display:flex; flex-direction:column; justify-content:center; gap:0; background:transparent}
.lb-frame{border-radius:0; padding:0; background:#000; box-shadow:none}
.lb-video{border-radius:0}
.lb-foot{position:absolute; left:0; right:0; bottom:0; padding:16px 18px 22px;
background:linear-gradient(transparent,rgba(4,16,34,.92) 40%); color:#fff}
.lb-foot b{color:#fff}
.lb-foot span{color:rgba(255,255,255,.72)}
.lb-x{position:absolute; top:14px; right:14px; width:44px; height:44px; font-size:22px;
background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3)}
.lb-x:hover{background:#fff; color:var(--navy)}
/* el vídeo del hero, de borde a borde */
.vid{margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
width:calc(100% + var(--pad) * 2); border-radius:0; border-left:0; border-right:0}
/* el sello se montaba sobre el vídeo y le comía el rótulo */
.seal{display:none}
/* Anton, un punto más grande en móvil */
.mcap h2{font-size:clamp(34px,8.6vw,52px)}
.mcap > span{font-size:10.5px; letter-spacing:.24em}
/* páginas internas en móvil */
.res ul{grid-template-columns:1fr}
.res li a{min-height:0; padding:12px 14px}
.grid.two{grid-template-columns:1fr}
.gal{grid-template-columns:repeat(2,1fr)}
.gitem:nth-child(6n+1), .gitem:nth-child(6n+4){aspect-ratio:1}
.pheroimg::after{background:linear-gradient(180deg, rgba(245,249,253,.90) 0%,
rgba(245,249,253,.95) 45%, rgba(245,249,253,.98) 100%)}
.cierre{border-radius:20px}
.lb-nav{width:40px; height:40px}
.lb-nav.prev{left:4px} .lb-nav.next{right:4px}
.lb-frame.foto img{max-height:70svh}
}
/* Pantallas estrechas: cabecera apretada para que quepan
logo + EN·ES + Donar + hamburguesa SIN salirse. */
@media (max-width:430px){
.hd{gap:6px}
.hd>a>img{height:26px}
.langshort{padding:7px 9px; font-size:12px}
.hd > .btn.give{padding:8px 13px; font-size:13px}
.burger{width:38px; height:38px}
.burger i{left:10px; right:10px}
.burger i:nth-child(1){top:12px}
.burger i:nth-child(2){top:18px}
.burger i:nth-child(3){top:24px}
}
@media (prefers-reduced-motion:reduce){
html.anim .rev, html.anim .card{opacity:1; transform:none; filter:none; transition:none}
.kin .w>i{transform:none; transition:none}
html.anim .shot{opacity:1; transform:none; transition:none}
html.anim .pheroimg img{opacity:1; transition:none}
html.anim .vid img:not(.ok){opacity:.88}
.card,.btn{transition:none}
}