/* ===================================================================== Rotary Distrito 4060 · sistema visual (paleta y tipografía oficiales) ===================================================================== */ :root{ --azure:#005DAA; --sky:#01B4E7; --royal:#17458F; --gold:#F7A81B; --cranberry:#D91B5C; --turquoise:#009999; --violet:#872175; --orange:#FF7600; --powder:#C9DEE9; --slate:#687D90; --mist:#9EA6B4; --silver:#E7E7E8; --cloud:#E6E5D8; --crimson:#C10042; --skyblue:#019FCB; --charcoal:#58585A; --black:#000000; --white:#FFFFFF; --ink:#0E1B33; /* texto sobre claro: Royal muy oscurecido por opacidad del fondo */ --font:"Open Sans", Arial, sans-serif; --serif:Georgia, "Times New Roman", serif; --step--1:clamp(.82rem, .78rem + .2vw, .9rem); --step-0:clamp(1rem, .95rem + .25vw, 1.125rem); --step-1:clamp(1.15rem, 1.02rem + .55vw, 1.45rem); --step-2:clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem); --step-3:clamp(2rem, 1.25rem + 3vw, 3.8rem); --step-4:clamp(2.5rem, 1.1rem + 5.8vw, 6.4rem); --gutter:clamp(1rem, .6rem + 2vw, 2.5rem); --max:1240px; --radius:28px; --radius-sm:16px; --nav-h:56px; --section:clamp(4.5rem, 3rem + 6vw, 9rem); --ease-out:cubic-bezier(.22,1,.36,1); --ease-inout:cubic-bezier(.77,0,.18,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px} body{margin:0; font-family:var(--font); font-size:var(--step-0); line-height:1.6; color:var(--ink); background:#fff; overflow-x:clip} /* Reset del tema WordPress (Impreza fuerza color y padding-top en h1-h6) */ h1,h2,h3,h4,h5,h6{color:inherit; padding-top:0; margin-top:0} img,svg,video{display:block; max-width:100%} a{color:inherit} button,input,select{font:inherit; color:inherit} :focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px} .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0} .skip{position:fixed; left:1rem; top:-4rem; z-index:100; background:var(--gold); color:#000; padding:.7rem 1rem; border-radius:10px; font-weight:700; text-decoration:none; transition:top .18s} .skip:focus{top:1rem} .material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 500; font-size:20px; line-height:1; vertical-align:middle} /* ---------- Tipografía y estructura ---------- */ .display{font-stretch:75%; font-weight:800; text-transform:uppercase; line-height:.95; letter-spacing:.005em; margin:0} .eyebrow{display:inline-block; font-stretch:75%; font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:var(--step--1); margin:0 0 .8rem; color:var(--azure)} .on-dark .eyebrow{color:var(--gold)} .wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)} .section{padding:var(--section) 0} .section__head{display:grid; grid-template-columns:1.1fr 1fr; gap:1.5rem 3rem; align-items:end; margin-bottom:clamp(2rem, 1.5rem + 2vw, 3.5rem)} .section__head h2{font-size:var(--step-3)} .section__head p{margin:0; font-size:var(--step-1); color:var(--slate); max-width:46ch} .on-dark{color:#fff} .on-dark .section__head p{color:var(--powder)} @media (max-width:820px){ .section__head{grid-template-columns:1fr} } /* ---------- Botones y cristal ---------- */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:0 1.4rem; border-radius:999px; border:0; cursor:pointer; font-weight:700; text-decoration:none; white-space:nowrap; transition:transform .18s var(--ease-out), box-shadow .2s, background .2s} .btn:active{transform:scale(.97)} .btn--gold{background:var(--gold); color:#000; box-shadow:0 8px 24px rgba(247,168,27,.32)} .btn--gold:hover{box-shadow:0 12px 32px rgba(247,168,27,.5)} /* Botón primario de marca (carmesí #C10042): Únete (header), Unirme a Interact/Rotaract, Quiero unirme y Encuentra tu club */ .gnav__cta, .jfinal__actions .btn--gold, .youth__join, .join__actions .btn--gold{ background:var(--crimson) !important; color:#fff !important; border:1px solid transparent !important; box-shadow:0 8px 24px rgba(193,0,66,.32) !important; } .gnav__cta:hover, .jfinal__actions .btn--gold:hover, .youth__join:hover, .join__actions .btn--gold:hover{ background:#fff !important; color:var(--crimson) !important; border-color:var(--crimson) !important; box-shadow:0 12px 32px rgba(193,0,66,.35) !important; } /* Botón secundario de marca (carmesí #C10042): Quiero unirme junto a Encuentra tu club */ .join__actions .btn--line{ background:#fff !important; color:var(--crimson) !important; border:1px solid var(--crimson) !important; } .join__actions .btn--line:hover{ background:var(--crimson) !important; color:#fff !important; border-color:var(--crimson) !important; } .btn--royal{background:var(--royal); color:#fff} .btn--royal:hover{background:var(--azure)} .btn--line{border:1.5px solid currentColor; background:transparent} .btn--line:hover{background:rgba(255,255,255,.12)} .glass{position:relative; isolation:isolate; background:rgba(10,30,70,.34); -webkit-backdrop-filter:blur(18px) saturate(175%); backdrop-filter:blur(18px) saturate(175%); border:1px solid rgba(255,255,255,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 1px rgba(255,255,255,.1), inset 0 0 24px rgba(255,255,255,.07), 0 14px 44px rgba(0,0,0,.24)} .glass::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; background:radial-gradient(120% 80% at var(--gx,30%) -20%, rgba(255,255,255,.3), transparent 55%)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:rgba(10,30,70,.9)} } /* ---------- Navegación (barra global fina, estilo Apple) ---------- */ .gnav{position:fixed; z-index:60; inset:0 0 auto 0; height:var(--nav-h); color:#fff; background:transparent; border-bottom:1px solid transparent; transition:background .35s, color .35s, border-color .35s, backdrop-filter .35s} .gnav.is-light{background:rgba(255,255,255,.78); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); color:var(--ink); border-bottom-color:rgba(0,0,0,.08)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .gnav.is-light{background:rgba(255,255,255,.96)} } .gnav__bar{max-width:1180px; height:100%; margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; gap:1rem} .gnav__brand{position:relative; display:flex; flex:none; height:36px} .gnav__brand img{height:36px; width:auto; transition:opacity .35s} .gnav__brand .logo-color{position:absolute; inset:0; opacity:0} .gnav.is-light .gnav__brand .logo-white{opacity:0} .gnav.is-light .gnav__brand .logo-color{opacity:1} .gnav__list{display:flex; align-items:center; gap:.1rem; margin:0 auto; padding:0; list-style:none} .gnav__list > li{position:relative; margin:0} .gnav__link{display:inline-flex; align-items:center; gap:.1rem; min-height:44px; padding:0 .75rem; border-radius:10px; text-decoration:none; font-weight:500; font-size:.86rem; letter-spacing:-.005em; color:inherit; background:none; border:0; cursor:pointer; opacity:.86; transition:opacity .2s, background .2s} .gnav__link:hover, .gnav__link[aria-expanded="true"], .gnav__link[aria-current="page"]{opacity:1} .gnav__link[aria-current="page"]{font-weight:700} .gnav__link .material-symbols-outlined{font-size:18px; transition:transform .3s var(--ease-out)} .gnav__link[aria-expanded="true"] .material-symbols-outlined{transform:rotate(180deg)} .gnav__menu{position:absolute; top:calc(100% + 8px); left:50%; min-width:260px; padding:.4rem; margin:0; list-style:none; border-radius:18px; color:var(--ink); background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px); box-shadow:0 20px 50px rgba(8,20,48,.22), 0 0 0 1px rgba(0,0,0,.05); opacity:0; visibility:hidden; transform:translate(-50%, -6px) scale(.98); transform-origin:50% 0; transition:opacity .2s, transform .25s var(--ease-out), visibility 0s .25s} .gnav__menu.is-open{opacity:1; visibility:visible; transform:translate(-50%, 0) scale(1); transition:opacity .2s, transform .25s var(--ease-out)} .gnav__menu a{display:flex; align-items:center; min-height:42px; padding:0 .85rem; border-radius:12px; color:inherit; text-decoration:none; font-weight:500; font-size:.88rem} .gnav__menu a:hover{background:rgba(23,69,143,.08)} /* El header de Impreza pinta a:hover de azul; la barra conserva sus colores */ #gnav .gnav__link:hover, #gnav .gnav__menu a:hover{color:inherit} #gnav .gnav__cta:hover{color:#000} /* Escritorio con mouse: resalta el enlace y abre el submenú al pasar el cursor */ @media (hover:hover) and (min-width:1001px){ .gnav__list > li:hover > .gnav__link{opacity:1; background:rgba(255,255,255,.14)} .gnav.is-light .gnav__list > li:hover > .gnav__link{background:rgba(23,69,143,.08)} .gnav__list > li:hover > .gnav__link .material-symbols-outlined{transform:rotate(180deg)} .gnav__list > li:hover > .gnav__menu{opacity:1; visibility:visible; transform:translate(-50%, 0) scale(1); transition:opacity .2s, transform .25s var(--ease-out)} .gnav__menu::before{content:""; position:absolute; left:0; right:0; bottom:100%; height:12px} } .gnav__cta{flex:none; min-height:34px; padding:0 1rem; font-size:.84rem; box-shadow:none} .gnav__toggle{display:none; margin-left:auto; width:44px; height:44px; border-radius:12px; border:0; background:none; color:inherit; cursor:pointer} @media (max-width:1000px){ .gnav{height:auto; min-height:var(--nav-h)} .gnav__bar{flex-wrap:wrap; height:auto; min-height:var(--nav-h)} .gnav__toggle{display:grid; place-items:center} .gnav__list{display:none; order:3; width:100%; flex-direction:column; align-items:stretch; margin:0; padding:.2rem 0 .6rem; max-height:70svh; overflow:auto} .gnav__cta{display:none} .gnav[data-open="true"]{background:rgba(8,20,48,.94)} .gnav.is-light[data-open="true"]{background:rgba(255,255,255,.97)} .gnav[data-open="true"] .gnav__list{display:flex} .gnav[data-open="true"] .gnav__cta{display:flex; order:4; width:100%; min-height:46px; margin:0 0 .8rem} .gnav__link{justify-content:space-between; width:100%; font-size:1rem; min-height:48px} .gnav__menu{position:static; transform:none; opacity:1; visibility:visible; display:none; background:transparent; box-shadow:none; color:inherit; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0 0 .4rem .6rem} .gnav__menu.is-open{display:block; transform:none} } /* ---------- Portada: escenario fijo que se encoge al bajar ---------- */ .stage-wrap{position:relative; height:190svh} .stage{position:sticky; top:0; height:100svh; min-height:620px; overflow:hidden; color:#fff; background:#000; isolation:isolate} .stage__mesh{position:absolute; inset:-10%; width:120%; height:120%; filter:blur(60px) saturate(120%); opacity:calc(1 - var(--p,0) * .35); z-index:-3} .stage__grain{position:absolute; inset:0; z-index:-2; opacity:.09; mix-blend-mode:overlay; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .stage::after{content:""; position:absolute; inset:auto 0 0 0; height:28%; z-index:2; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.55), transparent)} .stage__copy{position:relative; z-index:3; text-align:center; padding:calc(var(--nav-h) + clamp(1.5rem, 1rem + 3vh, 3.5rem)) var(--gutter) 0; transform:translateY(calc(var(--p,0) * -18vh)); opacity:calc(1 - var(--p,0) * 1.8)} .stage__eyebrow{margin:0 0 .7rem; font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--powder); opacity:0; animation:fadeUp .9s .1s var(--ease-out) forwards} .stage__title{margin:0; font-weight:800; font-size:clamp(2.8rem, 1.2rem + 6.4vw, 7rem); line-height:.98; letter-spacing:-.035em; opacity:0; animation:fadeUp 1.1s .2s var(--ease-out) forwards; background:linear-gradient(180deg, #fff 30%, #C9DEE9); -webkit-background-clip:text; background-clip:text; color:transparent} .stage__lede{margin:.9rem auto 0; max-width:52ch; font-size:clamp(1.05rem, .95rem + .5vw, 1.4rem); font-weight:500; color:rgba(255,255,255,.82); opacity:0; animation:fadeUp 1s .4s var(--ease-out) forwards} @keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}} .group{position:absolute; z-index:1; left:50%; bottom:0; width:min(1180px, 100%); height:min(64svh, calc(100svh - 300px)); translate:-50% 0; transform:translateY(calc(var(--p,0) * -4vh)) scale(calc(1 - var(--p,0) * .1)); transform-origin:50% 100%; pointer-events:none} .person{position:absolute; bottom:0; width:auto; max-width:none; transform-origin:50% 100%; filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)) brightness(var(--b,1)) saturate(var(--s,1)); transition:filter .5s var(--ease-out), transform .7s var(--ease-out); animation:personIn 1.2s var(--d,.5s) var(--ease-out) backwards} .person--gob{height:100%; left:50%; translate:-50% 0; --d:.45s; z-index:2} .person--rdr{height:86%; left:50%; translate:calc(-50% - min(25vw, 330px)) 0; --d:.65s} .person--rdi{height:86%; left:50%; translate:calc(-50% + min(25vw, 330px)) 0; --d:.75s} @keyframes personIn{from{opacity:0; transform:translateY(40px) scale(.98)} to{opacity:1; transform:none}} .group__floor{position:absolute; left:10%; right:10%; bottom:-6%; height:22%; border-radius:50%; background:radial-gradient(closest-side, rgba(1,180,231,.35), transparent); filter:blur(20px)} .stage[data-focus]:not([data-focus=""]) .person{--b:.32; --s:.5} .stage[data-focus="rotary"] .person[data-k="rotary"], .stage[data-focus="rotaract"] .person[data-k="rotaract"], .stage[data-focus="interact"] .person[data-k="interact"]{--b:1.06; --s:1.05} .picker{position:absolute; z-index:4; left:50%; bottom:clamp(1rem, 3vh, 2rem); translate:-50% 0; display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:.3rem; width:min(1040px, calc(100% - 2*var(--gutter))); padding:.35rem; border-radius:24px; background:rgba(10,24,56,.45); opacity:calc(1 - var(--p,0) * 2.2); animation:fadeUp 1s .9s var(--ease-out) backwards} .pick{display:flex; align-items:center; gap:.8rem; min-height:64px; padding:.55rem .9rem; border-radius:18px; color:#fff; text-decoration:none; transition:background .3s var(--ease-out)} .pick img{height:30px; width:auto; flex:none} .pick__who{display:flex; flex-direction:column; min-width:0; line-height:1.25} .pick__who strong{font-size:.86rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .pick__who span{font-size:.76rem; color:rgba(255,255,255,.7)} .pick__go{margin-left:auto; font-size:20px; opacity:.5; transition:transform .3s var(--ease-out), opacity .3s} .pick:hover, .pick:focus-visible{background:rgba(255,255,255,.14)} .pick:hover .pick__go, .pick:focus-visible .pick__go{opacity:1; transform:translateX(3px)} .pick--main{background:rgba(255,255,255,.1)} .stage__hint{position:absolute; z-index:4; left:50%; bottom:calc(clamp(1rem, 3vh, 2rem) + 86px); translate:-50% 0; display:none} @media (max-width:900px){ .picker{grid-template-columns:1fr; gap:.15rem; width:calc(100% - 2*var(--gutter)); border-radius:20px} .pick{min-height:52px; padding:.4rem .8rem} .pick img{height:24px} .pick__who{flex-direction:row; gap:.5rem; align-items:baseline} .pick__who strong{font-size:.8rem} .pick__who span{display:none} .group{height:min(46svh, calc(100svh - 430px)); bottom:150px} .person--rdr, .person--rdi{height:80%} .person--rdr{translate:calc(-50% - 30vw) 0} .person--rdi{translate:calc(-50% + 30vw) 0} .stage::after{height:45%} } /* la sección siguiente sube como una hoja sobre la portada */ .stage-wrap ~ section, .stage-wrap ~ .marquee, main ~ footer{position:relative; z-index:5} .sheet{position:relative; z-index:5; margin-top:-90svh; border-radius:32px 32px 0 0; box-shadow:0 -30px 60px rgba(0,0,0,.25)} /* cortina de color al entrar a «Nuestros clubes» */ .curtain{position:fixed; inset:0; z-index:95; background:var(--cc, var(--royal)); pointer-events:none; clip-path:circle(0px at var(--ox,50%) var(--oy,50%)); transition:clip-path .75s var(--ease-inout)} .curtain.is-on{clip-path:circle(150vmax at var(--ox,50%) var(--oy,50%))} /* ---------- Cifras ---------- */ .stats{background:var(--royal); color:#fff; padding:clamp(2.5rem, 2rem + 2vw, 4rem) 0} .stats__grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:1.5rem; margin:0; padding:0; list-style:none} .stats__grid li{border-left:1px solid rgba(255,255,255,.25); padding-left:1.2rem} .stats__num{display:block; font-stretch:75%; font-weight:800; font-size:clamp(2.4rem, 1.6rem + 2.6vw, 4.2rem); line-height:1; font-variant-numeric:tabular-nums; color:var(--gold)} .stats__label{display:block; margin-top:.4rem; font-weight:600; color:var(--powder); font-size:var(--step--1)} @media (max-width:900px){ .stats__grid{grid-template-columns:repeat(2, 1fr)} .stats__grid li:last-child{grid-column:1 / -1} } /* ---------- Causas ---------- */ .causes{background:#fff} .causes__track{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 1fr); gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 var(--gutter) 1rem; scrollbar-width:thin; max-width:calc(var(--max) + 2*var(--gutter)); margin:0 auto} @media (min-width:1100px){ .causes__track{grid-auto-flow:row; grid-template-columns:repeat(4, 1fr); overflow:visible} .cause:first-child{grid-column:span 2; grid-row:span 2} .cause:nth-child(6), .cause:nth-child(7){grid-column:span 2; min-height:260px} } .cause{position:relative; min-height:300px; border-radius:var(--radius); overflow:hidden; color:#fff; scroll-snap-align:start; background:var(--royal); isolation:isolate} .cause img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transform:scale(1.04); transition:transform 1.2s var(--ease-out)} .cause::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.1) 60%)} .cause__body{position:absolute; inset:auto 0 0 0; padding:1.3rem 1.4rem} .cause__num{font-stretch:75%; font-weight:800; font-size:.85rem; letter-spacing:.14em; color:var(--gold)} .cause h3{margin:.2rem 0 0; font-stretch:75%; font-weight:800; text-transform:uppercase; font-size:clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height:1} .cause p{margin:.55rem 0 0; font-size:.92rem; line-height:1.45; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease-out), opacity .4s} .cause:first-child h3{font-size:clamp(1.8rem, 1.2rem + 2vw, 3rem)} @media (hover:hover){ .cause:hover img{transform:scale(1.1)} .cause:hover p{max-height:8em; opacity:1} } @media (hover:none){ .cause p{max-height:none; opacity:1} } /* ---------- Viaje + proyectos ---------- */ .journey{position:relative; height:280vh; background:#0b2e5c; margin-bottom:-2px} /* Evita una línea blanca (fondo del body) entre el final del viaje animado y la sección de proyectos en móvil, por redondeo de subpíxeles con el 100svh del pin */ .journey__sticky{position:sticky; top:0; height:100svh; overflow:hidden} .journey__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform, opacity} .journey__img--clouds{transform:scale(calc(1.18 - var(--p,0) * .25)) translateY(calc(var(--p,0) * -6%)); opacity:calc(1 - clamp(0, (var(--p,0) - .48) * 4.5, 1))} .journey__img--mount{transform:scale(calc(1.25 - clamp(0, (var(--p,0) - .45) * 1.6, 1) * .25)); opacity:clamp(0, (var(--p,0) - .46) * 4.5, 1)} .journey__veil{position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(23,69,143,.9))} .journey__mist{position:absolute; inset:0; pointer-events:none; background:#fff; opacity:calc(var(--mist,0) * .85)} .journey__copy{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:0 var(--gutter); color:#fff} .journey__copy > div{max-width:900px} .journey__copy--a{opacity:var(--ca,1); transform:translateY(calc((.2 - var(--p,0)) * 120px))} .journey__copy--b{align-items:end; padding-bottom:12vh; opacity:clamp(0, (var(--p,0) - .72) * 5, 1); transform:translateY(calc((1 - var(--p,0)) * 80px))} .journey__copy h2{font-size:var(--step-4); text-shadow:0 8px 40px rgba(0,0,0,.35)} .journey__copy p{margin:.8rem auto 0; max-width:44ch; font-size:var(--step-1); text-shadow:0 2px 16px rgba(0,0,0,.45)} .projects{position:relative; background:var(--royal); padding:2.5rem 0 var(--section); overflow:hidden; color:#fff} .carousel{position:relative; max-width:1400px; margin:0 auto} .carousel__viewport{position:relative; height:clamp(480px, 60vw, 600px); perspective:1600px; touch-action:pan-y} .slide{position:absolute; top:0; left:50%; width:min(80vw, 860px); height:100%; margin-left:calc(min(80vw, 860px) / -2); border-radius:var(--radius); overflow:hidden; color:#fff; background:var(--bg); transform:translateX(calc(var(--o) * 62%)) scale(calc(1 - min(var(--abs), 2) * .16)) rotateY(calc(var(--o) * -8deg)); opacity:calc(1 - min(var(--abs), 3) * .3); z-index:calc(10 - var(--abs)); transition:transform .8s var(--ease-out), opacity .8s var(--ease-out), filter .8s var(--ease-out); filter:saturate(calc(1 - min(var(--abs),1) * .4)) brightness(calc(1 - min(var(--abs),1) * .3)); box-shadow:0 30px 80px rgba(0,0,0,.4); display:grid; grid-template-columns:1.1fr 1fr; cursor:pointer} .slide[aria-hidden="true"] *{pointer-events:none} .slide.is-active{cursor:default} .slide__art{position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:clamp(1rem, 3vw, 2rem); min-height:200px} .slide__art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.4s var(--ease-out)} .slide.is-active .slide__art img{transform:scale(1)} .slide__art::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 58%)} .slide__stat{position:relative; z-index:1; margin:0; color:#fff} .slide__num{font-stretch:75%; font-weight:800; font-size:clamp(3rem, 1.8rem + 5vw, 6.2rem); line-height:.85; display:block; font-variant-numeric:tabular-nums} .slide__unit{display:block; font-weight:600; max-width:20ch; margin-top:.35rem} .slide__body{padding:clamp(1.2rem, 3vw, 2.4rem); display:flex; flex-direction:column; gap:.75rem} .slide__area{align-self:flex-start; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.35rem .8rem; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3)} .slide__title{font-size:var(--step-3)} .slide__place{font-weight:700; opacity:.9; margin:0; display:flex; align-items:center; gap:.3rem} .slide__desc{margin:0; font-family:var(--serif); line-height:1.55} .slide__how{margin:auto 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.4rem} .slide__how li{font-size:.78rem; padding:.3rem .65rem; border-radius:8px; background:rgba(0,0,0,.2)} .slide--dark{color:#000} .slide--dark .slide__area{background:rgba(0,0,0,.08); border-color:rgba(0,0,0,.25)} .slide--dark .slide__how li{background:rgba(255,255,255,.45)} @media (max-width:760px){ .slide{grid-template-columns:1fr; grid-template-rows:200px 1fr; width:86vw; margin-left:-43vw; transform:translateX(calc(var(--o) * 92%)) scale(calc(1 - min(var(--abs), 2) * .1))} .carousel__viewport{height:min(660px, 158vw)} .slide__desc{font-size:.95rem} } .carousel__controls{display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2.2rem} .carousel__btn{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#fff} .carousel__dots{display:flex} .carousel__dots button{width:40px; height:44px; border:0; background:none; cursor:pointer; display:grid; place-items:center; padding:0} .carousel__dots button::after{content:""; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); transition:width .4s var(--ease-out), background .4s} .carousel__dots button[aria-current="true"]::after{width:26px; border-radius:6px; background:var(--gold)} .note{text-align:center; color:var(--powder); font-size:.8rem; margin:1.4rem var(--gutter) 0} @media (max-width:560px){ .carousel__dots button{width:24px} .carousel__controls{gap:.4rem} } /* ---------- Clubes en acción (noticias reales) ---------- */ .news{background:#F4F6F9} .news__grid{display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:minmax(150px, auto); gap:1rem} .post{position:relative; display:flex; align-items:flex-end; min-height:280px; border-radius:var(--radius); overflow:hidden; color:#fff; text-decoration:none; isolation:isolate; grid-column:span 2} .post:nth-child(1){grid-column:span 4; grid-row:span 2; min-height:520px} .post:nth-child(2), .post:nth-child(3){grid-column:span 2} .post img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease-out)} .post::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(10,25,60,.88), rgba(10,25,60,.05) 65%)} .post__body{padding:1.3rem 1.4rem; position:relative; z-index:4} .post__cat{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px; background:var(--royal); margin-bottom:.6rem} .post h3{margin:0; font-weight:700; font-size:clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height:1.25} .post:nth-child(1) h3{font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem)} .post time{display:block; margin-top:.5rem; font-size:.82rem; color:var(--powder)} .post:hover img{transform:scale(1.06)} .post:hover h3{color:var(--skyblue)} .post:focus-visible{outline-offset:4px} .news__more{display:flex; justify-content:center; margin-top:2.5rem} @media (max-width:900px){ .news__grid{grid-template-columns:1fr 1fr} .post, .post:nth-child(n){grid-column:span 1; grid-row:auto; min-height:260px} .post:nth-child(1){grid-column:1 / -1; min-height:360px} } @media (max-width:560px){ .news__grid{grid-template-columns:1fr} } /* ---------- Gobernación ---------- */ .gov{position:relative; background:radial-gradient(120% 120% at 80% 30%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%); color:#fff; overflow:hidden} .gov__grid{display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:2rem} .gov__copy{padding:var(--section) 0} .gov h2{font-size:var(--step-4)} .gov__role{margin:.8rem 0 1.6rem; font-size:var(--step-1); color:var(--powder)} .gov__theme{display:flex; gap:1rem; align-items:flex-start; padding:1.2rem 1.4rem; border-radius:var(--radius-sm); margin-bottom:1.8rem; max-width:44ch} .gov__theme .material-symbols-outlined{color:var(--gold); font-size:28px} .gov__theme p{margin:0} .gov__photo{align-self:end; justify-self:center; width:min(560px, 100%)} .gov__photo img{width:100%; height:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.4))} @media (max-width:860px){ .gov__grid{grid-template-columns:1fr} .gov__copy{padding-bottom:0} } /* ---------- Juventud ---------- */ .youth__grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem} .ycard{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:420px; padding:clamp(1.5rem, 1rem + 2vw, 2.6rem); border-radius:var(--radius); overflow:hidden; color:#fff; isolation:isolate; text-decoration:none} .ycard img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease-out)} .ycard::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, var(--tint) 10%, color-mix(in srgb, var(--tint) 30%, transparent) 70%)} .ycard--rotaract{--tint:#D91B5C} .ycard--interact{--tint:#005DAA} .ycard__logo{height:44px; width:auto; margin-bottom:auto} .ycard h3{margin:0; font-stretch:75%; font-weight:800; text-transform:uppercase; font-size:var(--step-3); line-height:.95} .ycard p{margin:.7rem 0 1.3rem; max-width:40ch} .ycard .btn{align-self:flex-start} .ycard:hover img.bg{transform:scale(1.06)} @media (max-width:820px){ .youth__grid{grid-template-columns:1fr} .ycard{min-height:360px} } /* ---------- Únete ---------- */ .join{position:relative; overflow:hidden; color:#fff; text-align:center; padding:var(--section) var(--gutter)} .join video, .join img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2} .join::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(23,69,143,.9), rgba(0,93,170,.82))} .join{isolation:isolate} .join h2{font-size:var(--step-3); max-width:20ch; margin:0 auto} .join p{max-width:58ch; margin:1.2rem auto 2rem; font-size:var(--step-1)} .join__actions{display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem} /* ---------- Pie ---------- */ .footer{background:#000; color:var(--mist); padding:4rem 0 2rem; font-size:.92rem} .footer__grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2rem} .footer h3{color:#fff; font-stretch:75%; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.9rem; margin:0 0 .8rem} .footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.45rem} .footer a{color:#fff; text-decoration:none; opacity:.85} .footer a:hover{opacity:1; text-decoration:underline} .footer__logos{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; margin-bottom:1rem} .footer__logos img{height:42px; width:auto} /* Impreza envuelve el footer en una sección con padding sobre fondo blanco */ #page-footer{background:#000} #page-footer > .l-section{padding-top:0; padding-bottom:0} .footer__legal{margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.15); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.82rem} @media (max-width:900px){ .footer__grid{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .footer__grid{grid-template-columns:1fr} } /* ---------- Página «Nuestros clubes» ---------- */ .ch{position:relative; padding:calc(120px + 4vh) 0 3rem; color:#fff; background:var(--tone, var(--royal)); overflow:hidden; transition:background .6s var(--ease-out)} .ch[data-tipo="rotary"]{--tone:var(--royal)} .ch[data-tipo="rotaract"]{--tone:#B3124A} .ch[data-tipo="interact"]{--tone:var(--azure)} .ch__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.18; mix-blend-mode:luminosity} .ch .wrap{position:relative} .ch h1{font-size:var(--step-4)} .ch__lede{max-width:56ch; font-size:var(--step-1); margin:1rem 0 2rem; color:var(--powder)} .tabs{display:inline-flex; flex-wrap:wrap; gap:.3rem; padding:.35rem; border-radius:999px} .tab{display:inline-flex; align-items:center; gap:.55rem; min-height:48px; padding:0 1.1rem; border-radius:999px; border:0; background:none; color:#fff; cursor:pointer; font-weight:700; transition:background .25s, color .25s} .tab img{height:22px; width:auto} .tab[aria-pressed="true"]{background:#fff; color:var(--ink)} .tab[aria-pressed="true"] img{filter:brightness(0) saturate(100%)} .tab__count{font-size:.78rem; font-weight:700; opacity:.7} @media (max-width:600px){ .tabs{display:grid; grid-template-columns:1fr 1fr; border-radius:22px; width:100%} .tab{justify-content:center; border-radius:16px; padding:0 .6rem} } .filters{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin:2rem 0 1.5rem} .field{display:flex; align-items:center; gap:.5rem; min-height:50px; padding:0 1rem; border-radius:999px; background:#fff; border:1.5px solid var(--silver); flex:1 1 260px; max-width:420px} .field:focus-within{border-color:var(--azure)} .field input, .field select{border:0; outline:0; background:none; width:100%; min-height:46px} .field--select{flex:0 1 260px} .result-count{margin-left:auto; color:var(--slate); font-weight:600} @media (max-width:640px){ .result-count{margin-left:0; width:100%} } .clubs{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; margin:0 0 var(--section); padding:0; list-style:none} .club{display:flex; flex-direction:column; gap:.4rem; height:100%; padding:1.3rem 1.4rem; border-radius:var(--radius-sm); background:#fff; border:1px solid var(--silver); text-decoration:none; color:var(--ink); transition:transform .35s var(--ease-out), box-shadow .35s, border-color .35s; animation:cardIn .5s var(--ease-out) both} .club:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(23,69,143,.14); border-color:transparent} .club__type{align-self:flex-start; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.25rem .6rem; border-radius:999px; color:#fff; background:var(--royal)} .club[data-t="rotaract"] .club__type{background:var(--cranberry)} .club h2{margin:.3rem 0 0; font-size:1.15rem; line-height:1.25} .club__prov{display:flex; align-items:center; gap:.25rem; color:var(--slate); font-size:.9rem} .club__go{margin-top:auto; padding-top:.6rem; display:inline-flex; align-items:center; gap:.25rem; font-weight:700; color:var(--azure); font-size:.9rem} @keyframes cardIn{from{opacity:0; transform:translateY(14px)}} .empty{grid-column:1 / -1; text-align:center; padding:4rem 1rem; border-radius:var(--radius); background:#F4F6F9} .empty h2{margin:.6rem 0 .4rem; font-stretch:75%; font-weight:800; text-transform:uppercase; font-size:var(--step-2)} .empty p{margin:0 auto 1.4rem; max-width:48ch; color:var(--slate)} .ch-enter{position:fixed; inset:0; z-index:95; background:var(--cc, var(--royal)); pointer-events:none; animation:curtainOut .7s .05s var(--ease-inout) forwards} @keyframes curtainOut{to{clip-path:circle(0px at 50% 30%)}} .ch-enter{clip-path:circle(150vmax at 50% 30%)} .rv{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .9s var(--ease-out)} .rv.is-in{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:1ms !important; animation-delay:0s !important; transition-duration:1ms !important; scroll-behavior:auto !important} .stage__eyebrow, .stage__title, .stage__lede{opacity:1; transform:none} .rv{opacity:1; transform:none} } /* ---------- Títulos de sección: más frescos (Open Sans, sin mayúsculas) ---------- */ .section__head .display, .gov h2.display, .join h2.display, .youth .display{font-stretch:100%; text-transform:none; letter-spacing:-.03em; line-height:1.02; font-weight:800} .section__head h2{font-size:clamp(2rem, 1.2rem + 3vw, 3.6rem)} .eyebrow{letter-spacing:.12em; font-stretch:100%; font-weight:700; font-size:.78rem} .news{background:#fff} .causes{background:#fff} .stats{background:var(--royal)} /* ---------- Portada: slideshow de los clubes en acción detrás de los líderes ---------- */ .stage__mesh{display:none} .slideshow{position:absolute; inset:-2%; z-index:-3; overflow:hidden; filter:blur(1.5px) saturate(.92); transform:scale(calc(1 + var(--p,0) * .06))} .slideshow__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.1); transition:opacity 1.8s var(--ease-inout), transform 9s linear} .slideshow__img.is-on{opacity:1; transform:scale(1)} .stage__shade{position:absolute; inset:0; z-index:-2; pointer-events:none; background: linear-gradient(to bottom, rgba(0,8,24,.82) 0%, rgba(0,8,24,.55) 26%, rgba(0,8,24,.25) 50%, rgba(0,8,24,.55) 80%, rgba(0,8,24,.9) 100%), radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0,8,24,.55) 100%), linear-gradient(rgba(23,69,143,.28), rgba(23,69,143,.28))} /* sombra suave detrás de cada líder para separarlo de las fotos */ .halo{position:absolute; bottom:-4%; left:50%; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, rgba(0,8,24,.78), rgba(0,8,24,.42) 55%, rgba(0,8,24,0)); filter:blur(14px)} .halo--gob{width:min(54vw, 720px); height:108%; translate:-50% 0} .halo--rdr{width:min(36vw, 480px); height:96%; translate:calc(-50% - min(25vw, 330px)) 0} .halo--rdi{width:min(36vw, 480px); height:96%; translate:calc(-50% + min(25vw, 330px)) 0} .group__floor{background:radial-gradient(closest-side, rgba(0,8,24,.7), transparent)} @media (max-width:900px){ .halo--gob{width:92vw} .halo--rdr{width:60vw; translate:calc(-50% - 30vw) 0} .halo--rdi{width:60vw; translate:calc(-50% + 30vw) 0} } /* ---------- Viaje: la foto entra como una tarjeta que crece hasta llenar la pantalla ---------- */ .journey{background:#fff} .journey__frame{position:absolute; inset:0; overflow:hidden; background:#0b2550; clip-path:inset(var(--fy,0px) var(--fx,0px) round var(--fr,0px))} .journey__img--clouds{transform:scale(calc(1.12 - var(--p,0) * .12))} .journey__veil{background: linear-gradient(to bottom, rgba(0,8,24,.55), rgba(0,8,24,.25) 35%, rgba(0,8,24,.35) 65%, rgba(23,69,143,1) 100%)} .journey__copy--a .display{text-shadow:0 6px 40px rgba(0,0,0,.55)} .journey__mist{background:#0b2550} .projects{margin-top:-1px} @media (prefers-reduced-motion:reduce){ .slideshow__img{transition:none} .journey__frame{clip-path:none} } /* ===================================================================== Portada en dos actos: 1) slideshow + titular 2) los líderes suben Variables que calcula el JS: --pt (salida del titular), --pa (centro), --pb (laterales), --pc (selector) ===================================================================== */ .stage-wrap{height:360svh} .slideshow{filter:blur(calc(1px + var(--pa,0) * 9px)) saturate(calc(.95 - var(--pa,0) * .25)) brightness(calc(1 - var(--pa,0) * .38)); transform:scale(calc(1.02 + var(--pa,0) * .06)) translate3d(var(--mx,0px), var(--my,0px), 0); transition:transform 1.2s var(--ease-out)} .stage__copy{position:absolute; inset:0 0 auto 0; display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; padding:var(--nav-h) var(--gutter) 6vh; transform:translateY(calc(var(--pt,0) * -14vh)); opacity:calc(1 - var(--pt,0))} .stage__title{font-size:clamp(3rem, 1.2rem + 7.6vw, 8.5rem)} .stage__lede{max-width:46ch} .stage__hint{position:absolute; z-index:4; left:50%; bottom:clamp(1.5rem, 4vh, 3rem); translate:-50% 0; display:flex; text-align:center; width:max-content; max-width:80vw; flex-direction:column; align-items:center; gap:.2rem; font-size:.82rem; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.75); opacity:calc(1 - var(--pt,0) * 2.5)} .stage__hint .material-symbols-outlined{font-size:26px; animation:hint 2.2s var(--ease-inout) infinite} @keyframes hint{0%,100%{transform:translateY(0); opacity:.6} 50%{transform:translateY(6px); opacity:1}} .stage__act2{position:absolute; z-index:3; left:0; right:0; top:calc(var(--nav-h) + clamp(1rem, 4vh, 3rem)); text-align:center; padding:0 var(--gutter); opacity:var(--pa,0); transform:translateY(calc((1 - var(--pa,0)) * 30px))} .stage__eyebrow2{margin:0 0 .5rem; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)} .stage__title2{margin:0; font-weight:800; letter-spacing:-.03em; line-height:1; font-size:clamp(1.8rem, 1rem + 2.8vw, 3.6rem); color:#fff} .group{height:min(60svh, calc(100svh - 330px)); transform:none; opacity:1} .person{animation:none} .person--gob{opacity:var(--pa,0); transform:translateY(calc((1 - var(--pa,0)) * 26vh)) scale(calc(.94 + var(--pa,0) * .06))} .person--rdr{opacity:var(--pb,0); transform:translateY(calc((1 - var(--pb,0)) * 30vh)) translateX(calc((1 - var(--pb,0)) * 4vw))} .person--rdi{opacity:var(--pb,0); transform:translateY(calc((1 - var(--pb,0)) * 30vh)) translateX(calc((1 - var(--pb,0)) * -4vw))} .halo--gob{opacity:var(--pa,0)} .halo--rdr, .halo--rdi{opacity:var(--pb,0)} .group__floor{opacity:var(--pa,0)} .picker{animation:none; opacity:var(--pc,0); transform:translateY(calc((1 - var(--pc,0)) * 24px)); pointer-events:var(--pe, none)} @media (max-width:900px){ .group{height:min(48svh, calc(100svh - 430px)); bottom:214px} .stage__act2{top:calc(var(--nav-h) + 1rem)} } @media (max-width:600px){ .picker{bottom:calc(max(16px, env(safe-area-inset-bottom)) + 66px)} .group{height:min(42svh, calc(100svh - 470px)); bottom:286px} } @media (max-height:640px) and (min-width:901px){ .stage__act2{display:none} .group{height:calc(100svh - 190px)} } html.lenis, html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-stopped{overflow:hidden} /* ---------- Interacciones de ratón ---------- */ .cause, .post, .ycard, .club, .slide, .gov__theme, .pick{--sx:50%; --sy:50%} .cause::before, .post::before, .ycard::before, .club::before, .gov__theme::after, .pick::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; opacity:0; background:radial-gradient(420px circle at var(--sx) var(--sy), rgba(255,255,255,.16), transparent 45%); transition:opacity .35s} .club{position:relative} .club::before{background:radial-gradient(360px circle at var(--sx) var(--sy), rgba(1,180,231,.12), transparent 50%)} .pick{position:relative} @media (hover:hover){ .cause:hover::before, .post:hover::before, .ycard:hover::before, .club:hover::before, .gov__theme:hover::after, .pick:hover::after{opacity:1} } .tilt:not(.rv), .tilt.rv.is-in{transform:perspective(1000px) rotateX(calc(var(--rx,0) * 1deg)) rotateY(calc(var(--ry,0) * 1deg)); transition:opacity .8s var(--ease-out)} .magnet{translate:calc(var(--tx,0) * 1px) calc(var(--ty,0) * 1px); transition:box-shadow .2s, background .2s} /* ---------- Asistente y WhatsApp ---------- */ .assist{position:fixed; z-index:80; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:flex-end; gap:.6rem} .chatfab{display:inline-flex; align-items:center; gap:.5rem; min-height:52px; padding:0 1.15rem 0 1rem; border:0; border-radius:999px; cursor:pointer; color:#fff; font-weight:700; font-size:.92rem; background:linear-gradient(180deg, #1d55a8, var(--royal)); box-shadow:0 12px 30px rgba(23,69,143,.4), inset 0 1px 0 rgba(255,255,255,.25)} .chatfab .material-symbols-outlined{font-size:22px} .assist.is-open .chatfab .chatfab__txt{display:none} .bot{position:absolute; right:0; bottom:calc(100% + .7rem); width:min(390px, calc(100vw - 32px)); height:min(580px, calc(100svh - 120px)); display:flex; flex-direction:column; overflow:hidden; border-radius:24px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px); color:var(--ink); box-shadow:0 30px 80px rgba(8,20,48,.35), 0 0 0 1px rgba(0,0,0,.06); transform-origin:100% 100%; animation:botIn .35s var(--ease-out)} .bot[hidden]{display:none} @keyframes botIn{from{opacity:0; transform:translateY(10px) scale(.96)}} .bot__head{display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid rgba(0,0,0,.07)} .bot__head img{height:30px; width:auto} .bot__head div{display:flex; flex-direction:column; line-height:1.2; flex:1} .bot__head strong{font-size:.95rem} .bot__head span{font-size:.74rem; color:var(--slate)} .bot__close{width:40px; height:40px; border-radius:50%; border:0; background:rgba(0,0,0,.05); cursor:pointer; display:grid; place-items:center} .bot__log{flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; overscroll-behavior:contain} .msg{max-width:88%; padding:.65rem .9rem; border-radius:18px; font-size:.9rem; line-height:1.45; animation:fadeUp .3s var(--ease-out)} .msg--bot{align-self:flex-start; background:#EEF2F8; border-bottom-left-radius:6px} .msg--me{align-self:flex-end; background:var(--royal); color:#fff; border-bottom-right-radius:6px} .msg a{color:var(--azure); font-weight:700} .msg ol, .msg ul{margin:.4rem 0; padding-left:1.1rem} .msg li{margin:.2rem 0} .bot__muted{color:var(--slate); font-size:.8rem} .dots{display:inline-flex; gap:4px} .dots i{width:6px; height:6px; border-radius:50%; background:var(--slate); animation:dot 1s infinite} .dots i:nth-child(2){animation-delay:.15s} .dots i:nth-child(3){animation-delay:.3s} @keyframes dot{0%,100%{opacity:.3; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)}} .bot__chips{display:flex; gap:.4rem; overflow-x:auto; padding:.2rem 1rem .6rem; scrollbar-width:none} .bot__chips button, .bot__chips a{flex:none; min-height:36px; padding:0 .8rem; border-radius:999px; border:1px solid rgba(23,69,143,.2); background:#fff; color:var(--royal); font-weight:600; font-size:.8rem; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center} .bot__chips button:hover, .bot__chips a:hover{background:#EEF2F8} .bot__form{display:flex; gap:.4rem; padding:.7rem; border-top:1px solid rgba(0,0,0,.07)} .bot__form input{flex:1; min-height:46px; padding:0 1rem; border-radius:999px; border:1.5px solid var(--silver); background:#fff; outline:0} .bot__form input:focus{border-color:var(--azure)} .bot__form button{width:46px; height:46px; border-radius:50%; border:0; background:var(--royal); color:#fff; cursor:pointer; display:grid; place-items:center} /* El tema (Impreza) trae un estilo global para button[type=submit] más específico que lo deja cuadrado y rosado; forzamos el botón redondo del asistente por encima */ .bot__form button[type="submit"]{width:46px !important; height:46px !important; min-width:0 !important; padding:0 !important; margin:0 !important; border-radius:50% !important; border:0 !important; background:var(--royal) !important; color:#fff !important; display:grid !important; place-items:center !important; text-transform:none !important; font-size:1rem !important; line-height:1 !important; box-shadow:none !important; flex:none} .bot__form button[type="submit"]:hover{background:var(--azure) !important} @media (max-width:600px){ .chatfab{width:52px; padding:0; justify-content:center} .chatfab__txt{display:none} .bot{position:fixed; inset:auto 8px 8px 8px; width:auto; height:min(78svh, 620px); bottom:calc(max(16px, env(safe-area-inset-bottom)) + 64px)} } @media (prefers-reduced-motion:reduce){ .tilt, .magnet{transform:none; translate:none} } /* móviles de poca altura: sin subtítulo del acto 2 y selector compacto */ @media (max-width:600px) and (max-height:720px){ .stage__act2{display:none} .picker .pick{min-height:44px; padding:.25rem .7rem} .group{height:calc(100svh - 300px); bottom:236px} } /* ===================================================================== Detalles finos (GSAP · Lenis · ideas de React Bits portadas a CSS/JS propio) ===================================================================== */ /* slideshow sin desenfoque animado: la versión borrosa ya viene hecha y solo cambia su opacidad */ .slideshow{filter:none; transform:scale(1.03) translate3d(var(--mx,0px), var(--my,0px), 0)} .slideshow--blur{opacity:var(--pa,0)} .slideshow--blur .slideshow__img{transform:scale(1.04)} /* titular de portada dividido en letras */ .stage__title.is-split{background:none; color:#fff; animation:none; opacity:1; text-shadow:0 10px 50px rgba(0,8,24,.45)} .split-line{padding-bottom:.06em} /* texto con brillo que recorre (ShinyText) */ .shiny{background:linear-gradient(110deg, var(--gold) 0%, var(--gold) 42%, #fff6dc 50%, var(--gold) 58%, var(--gold) 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 4.5s 1.2s var(--ease-inout) infinite} @keyframes shine{0%{background-position:100% 0} 45%,100%{background-position:0 0}} /* manifiesto que se ilumina palabra a palabra (ScrollReveal) */ .manifesto{background:#fff; padding:clamp(5rem, 3rem + 7vw, 10rem) 0 clamp(3rem, 2rem + 3vw, 5rem)} .manifesto__text{margin:0; max-width:24ch; font-weight:700; letter-spacing:-.03em; line-height:1.12; font-size:clamp(1.9rem, 1rem + 3.4vw, 4.2rem); color:var(--ink)} .manifesto__text .word{display:inline-block; will-change:opacity} /* franja de causas que acelera con el scroll (ScrollVelocity) */ .marquee{background:#fff; padding:0 0 clamp(2rem, 1rem + 3vw, 4rem); overflow:hidden; user-select:none} .marquee__row{overflow:hidden; white-space:nowrap} .marquee__track{display:inline-flex; align-items:center; will-change:transform} .marquee__track span{font-stretch:75%; font-weight:800; text-transform:uppercase; font-size:clamp(2.4rem, 1.4rem + 4vw, 5.4rem); line-height:1.05; color:var(--royal); letter-spacing:.005em} .marquee__track i{display:inline-block; width:.35em; height:.35em; margin:0 .55em; border-radius:50%; background:var(--gold); font-size:clamp(2.4rem, 1.4rem + 4vw, 5.4rem)} .marquee__row--outline span{color:transparent; -webkit-text-stroke:1.5px rgba(23,69,143,.45)} .marquee__row--outline i{background:transparent; box-shadow:inset 0 0 0 2px rgba(247,168,27,.6)} /* clubes: sin animación CSS cuando GSAP Flip se encarga */ .clubs.flip .club{animation:none} @media (prefers-reduced-motion:reduce){ .shiny{animation:none; color:var(--gold); background:none} } /* sombra extra detrás del titular ahora que las fotos van nítidas */ .stage__copy::before{content:""; position:absolute; z-index:-1; left:50%; top:50%; width:min(1100px, 120vw); height:60%; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side, rgba(0,8,24,.55), rgba(0,8,24,0)); pointer-events:none} /* ===================================================================== JUVENTUD EN ROTARY · portada (escena fija en tres actos) Variables que calcula el JS: --y1 collage entra · --y2 titular sale/foto aparece · --y3 foto crece --y4 cita entra · --y4o cita sale · --y5 caminos (Interact / Rotaract) · --ype eventos de puntero ===================================================================== */ .youth-wrap{position:relative; z-index:5; height:420svh; background:#0b2550} .youth{position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden; color:#fff; background:radial-gradient(120% 90% at 50% 40%, #163a73 0%, #0b2550 48%, #040b19 100%)} .youth__collage{position:absolute; inset:0} .yc{position:absolute; margin:0; border-radius:22px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); transform:translate3d(calc((1 - var(--y1,0)) * var(--sx) + var(--y3,0) * var(--sx) * .9 + var(--mxn,0) * 1px * var(--d)), calc((1 - var(--y1,0)) * var(--sy) + var(--y3,0) * var(--sy) * .7 + var(--myn,0) * 1px * var(--d)), 0) scale(calc(.8 + var(--y1,0) * .2)); opacity:calc(var(--y1,0) * (1 - var(--y3,0))); will-change:transform, opacity} .yc img{width:100%; height:100%; object-fit:cover; display:block} .yc--1{left:5%; top:13%; width:clamp(120px, 14vw, 240px); aspect-ratio:4/5} .yc--2{left:3%; top:57%; width:clamp(170px, 21vw, 360px); aspect-ratio:16/9} .yc--3{left:25%; top:73%; width:clamp(140px, 15vw, 250px); aspect-ratio:4/3} .yc--4{right:5%; top:11%; width:clamp(120px, 14vw, 240px); aspect-ratio:4/5} .yc--5{right:7%; top:53%; width:clamp(120px, 13vw, 220px); aspect-ratio:4/5} .yc--6{right:25%; top:74%; width:clamp(150px, 16vw, 260px); aspect-ratio:16/9} .youth__intro{position:absolute; inset:0; z-index:2; display:grid; place-content:center; text-align:center; padding:0 var(--gutter); pointer-events:none; opacity:calc(var(--y1,0) * (1 - var(--y2,0))); transform:translateY(calc((1 - var(--y1,0)) * 40px - var(--y2,0) * 8vh))} .youth__intro .eyebrow{margin-bottom:1rem} .youth__title{margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.02; font-size:clamp(2.4rem, 1rem + 5.2vw, 6.2rem); text-shadow:0 10px 50px rgba(0,8,24,.5)} .rot{display:inline-grid; vertical-align:top; justify-items:start; overflow:hidden; padding-bottom:.08em; color:var(--gold)} .rot__w{grid-area:1 / 1; white-space:nowrap} .rot__w:not(:first-child){visibility:hidden} .youth__lede{margin:1.2rem auto 0; max-width:40ch; font-size:var(--step-1); color:rgba(255,255,255,.8)} .youth__full{position:absolute; inset:0; z-index:3; opacity:var(--y2,0); clip-path:inset(calc((1 - var(--y3,0)) * 25%) calc((1 - var(--y3,0)) * 32%) round calc((1 - var(--y3,0)) * 28px))} .youth__fullimg, .youth__fullsoft{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} .youth__fullimg{transform:scale(calc(1.18 - var(--y3,0) * .18))} .youth__fullsoft{opacity:var(--y5,0); filter:blur(16px) brightness(.5) saturate(.8); transform:scale(1.1); will-change:opacity} .youth__full::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,8,24,.88), rgba(0,8,24,.15) 55%, rgba(0,8,24,.35)); opacity:var(--y3,0)} .youth__quote{position:absolute; z-index:4; left:var(--gutter); right:var(--gutter); bottom:clamp(2.5rem, 10vh, 6rem); margin:0 auto; max-width:1100px; opacity:calc(var(--y4,0) - var(--y4o,0)); transform:translateY(calc((1 - var(--y4,0)) * 40px - var(--y4o,0) * 30px)); pointer-events:none} .youth__quote p{margin:0; max-width:26ch; font-weight:700; letter-spacing:-.025em; line-height:1.12; font-size:clamp(1.6rem, .9rem + 2.6vw, 3.4rem); text-shadow:0 6px 30px rgba(0,0,0,.5)} .paths{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:clamp(1rem, 2.4vh, 1.8rem); padding:calc(var(--nav-h) + 1rem) var(--gutter) 2.5rem; opacity:var(--y5,0); transform:translateY(calc((1 - var(--y5,0)) * 48px)); pointer-events:var(--ype, none)} /* La versión del scroll queda oculta: solo se usa como plantilla para el popup «Quiero unirme» (youth.js la clona en .ypop) */ .youth > .paths{display:none !important} .paths__head{text-align:center} .paths__q{margin:0 0 .9rem; font-weight:800; letter-spacing:-.03em; font-size:clamp(1.8rem, 1rem + 2.6vw, 3.4rem)} .paths__toggle{display:inline-flex; gap:.3rem; padding:.35rem; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2)} .chip{min-height:44px; padding:0 1.3rem; border-radius:999px; border:0; background:none; color:#fff; font-weight:700; cursor:pointer; transition:background .3s, color .3s} .chip:hover{background:rgba(255,255,255,.12)} .chip[aria-pressed="true"]{background:#fff; color:var(--ink)} .paths__cards{display:grid; grid-template-columns:1fr 1fr; gap:1rem; width:min(980px, 100%)} .path{position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:clamp(1.1rem, 1rem + 1vw, 1.8rem); border-radius:24px; overflow:hidden; isolation:isolate; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); transition:opacity .45s var(--ease-out), transform .6s var(--ease-out), background .45s, border-color .45s} .path--interact{--pc2:var(--sky)} .path--rotaract{--pc2:var(--cranberry)} .path::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(380px circle at var(--sx,50%) var(--sy,50%), color-mix(in srgb, var(--pc2) 35%, transparent), transparent 60%)} .path:hover::after{opacity:1} .path__logo{height:34px; width:auto} .path h3{margin:.9rem 0 .35rem; font-weight:800; letter-spacing:-.02em; font-size:clamp(1.3rem, 1rem + 1vw, 1.9rem)} .path p{margin:0 0 1rem; color:rgba(255,255,255,.84); font-size:.98rem} .path__num{color:var(--gold); font-variant-numeric:tabular-nums} .path__link{margin-top:auto; display:inline-flex; align-items:center; gap:.3rem; min-height:44px; color:#fff; font-weight:700; text-decoration:none; border-bottom:2px solid var(--pc2)} .path__link .material-symbols-outlined{transition:transform .3s var(--ease-out)} .path__link:hover .material-symbols-outlined{transform:translateX(4px)} .youth[data-path]:not([data-path=""]) .path{opacity:.35; transform:scale(.97)} .youth[data-path="interact"] .path--interact, .youth[data-path="rotaract"] .path--rotaract, .youth[data-path="rotary"] .path--rotary{opacity:1; background:color-mix(in srgb, var(--pc2) 26%, rgba(255,255,255,.05)); border-color:var(--pc2); transform:translateY(-6px)} /* El camino elegido debe ganarle a la regla que atenúa los demás (esa es más específica por su :not()) */ .youth[data-path="interact"]:not([data-path=""]) .path--interact, .youth[data-path="rotaract"]:not([data-path=""]) .path--rotaract, .youth[data-path="rotary"]:not([data-path=""]) .path--rotary{opacity:1; transform:translateY(-6px)} .youth__note{position:absolute; z-index:6; right:var(--gutter); bottom:.6rem; margin:0; font-size:.72rem; color:rgba(255,255,255,.55); opacity:var(--y1,0)} .sheet-after{margin-top:-55svh; border-radius:32px 32px 0 0; box-shadow:0 -30px 60px rgba(0,0,0,.35)} .youth-wrap ~ section{position:relative; z-index:6} @media (max-width:760px){ .yc--3, .yc--6{display:none} .yc--1{left:4%; top:11%; width:30vw} .yc--4{right:4%; top:9%; width:30vw} .yc--2{left:-6%; top:68%; width:52vw} .yc--5{right:4%; top:66%; width:30vw} .rot{display:grid; justify-items:center} .youth__full{clip-path:inset(calc((1 - var(--y3,0)) * 30%) calc((1 - var(--y3,0)) * 12%) round calc((1 - var(--y3,0)) * 24px))} .paths__cards{grid-template-columns:1fr; gap:.6rem} .path{padding:1rem 1.1rem} .path h3{margin:.5rem 0 .2rem} .path p{margin-bottom:.4rem; font-size:.9rem} .paths{justify-content:flex-start; padding-top:calc(var(--nav-h) + 1.4rem)} } @media (max-width:760px) and (max-height:760px){ .path p{display:none} .paths__q{font-size:1.6rem} } /* ===================================================================== Transición especial entre páginas (View Transitions entre documentos) ===================================================================== */ @view-transition{navigation:auto} ::view-transition-group(juv-hero){animation-duration:.95s; animation-timing-function:cubic-bezier(.77,0,.18,1)} ::view-transition-old(root){animation:vtOut .45s cubic-bezier(.77,0,.18,1) both} ::view-transition-new(root){animation:vtIn .75s .12s cubic-bezier(.22,1,.36,1) both} @keyframes vtOut{to{opacity:0; transform:scale(.97)}} @keyframes vtIn{from{opacity:0; transform:translateY(24px)}} @media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} .youth-wrap{height:auto} .youth{position:relative; height:auto; overflow:visible; display:flex; flex-direction:column; gap:2rem; padding:calc(var(--nav-h) + 3rem) var(--gutter) 4rem} .youth__intro, .youth__quote, .paths{position:relative; inset:auto; opacity:1; transform:none; pointer-events:auto; left:auto; right:auto; bottom:auto} .youth__intro{order:1} .youth__collage{order:2} .youth__quote{order:3} .paths{order:4; padding:0} .youth__note{position:static; order:5; opacity:1} .youth__collage{position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem} .yc{position:relative; inset:auto; left:auto; right:auto; top:auto; width:auto; transform:none; opacity:1; display:block} .youth__full{display:none} .sheet-after{margin-top:0} } /* ===================================================================== PÁGINA JUVENTUD (juventud.html) ===================================================================== */ .jhero{position:relative; height:100svh; min-height:620px; overflow:hidden; color:#fff; background:#0b2550; isolation:isolate} .jhero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; view-transition-name:juv-hero; transform:scale(calc(1 + var(--jp,0) * .12)) translateY(calc(var(--jp,0) * 6vh))} .jhero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(0,8,24,.92) 0%, rgba(0,8,24,.45) 45%, rgba(0,8,24,.25) 70%, rgba(0,8,24,.55) 100%)} .jhero__content{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; max-width:var(--max); margin:0 auto; padding:calc(var(--nav-h) + 1.5rem) var(--gutter) clamp(2.5rem, 9vh, 6rem); opacity:calc(1 - var(--jp,0) * 1.6); transform:translateY(calc(var(--jp,0) * -50px))} .jhero__title{margin:0; max-width:15ch; font-weight:800; letter-spacing:-.035em; line-height:1; font-size:clamp(2.5rem, 1rem + 5.4vw, 6.4rem); text-shadow:0 10px 50px rgba(0,8,24,.5)} .jhero__lede{margin:1.2rem 0 0; max-width:44ch; font-size:var(--step-1); color:rgba(255,255,255,.85)} .jhero__actions{display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2rem; margin-top:1.8rem} .jhero__logos{display:flex; gap:1.4rem; align-items:center} .jhero__logos img{height:36px; width:auto} .jhero__note{position:absolute; right:var(--gutter); bottom:.6rem; margin:0; font-size:.72rem; color:rgba(255,255,255,.55)} .page-juv .manifesto__text{max-width:22ch} /* programas: imagen fija + capítulos */ .chapters{padding:var(--section) 0 0; background:#fff} .chapters__grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem, 1rem + 4vw, 5rem); align-items:start} .chapters__media{position:sticky; top:calc(var(--nav-h) + 1.5rem); height:calc(100svh - var(--nav-h) - 3rem); border-radius:var(--radius); overflow:hidden; background:#0b2550; box-shadow:0 30px 80px rgba(8,20,48,.25)} .chapters__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity .9s var(--ease-out), transform 1.6s var(--ease-out)} .chapters__media img.is-on{opacity:1; transform:scale(1)} .chapters__tag{position:absolute; left:1rem; bottom:1rem; padding:.4rem .8rem; border-radius:999px; font-size:.75rem; font-weight:600; color:#fff; background:rgba(0,8,24,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)} .chapters__tag:empty{display:none} .chapter{min-height:88svh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.9rem; padding:3rem 0} .chapter__img{display:none} .chapter__logo{height:40px; width:auto} .chapter__chip{display:inline-block; padding:.35rem .85rem; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--cranberry)} .chapter__chip--sky{background:var(--azure)} .chapter h3{margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.05; font-size:clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); color:var(--ink); max-width:16ch} .chapter p{margin:0; font-size:var(--step-1); color:var(--charcoal); max-width:40ch; line-height:1.55} .chapter__facts{list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.7rem} .chapter__facts li{display:flex; align-items:center; gap:.7rem; font-weight:600; color:var(--ink)} .chapter__facts .material-symbols-outlined{width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:#EEF2F8; color:var(--royal); font-size:22px} .jcount{color:var(--cranberry); font-size:1.4em; font-variant-numeric:tabular-nums} @media (max-width:900px){ .chapters__grid{grid-template-columns:1fr} .chapters__media{display:none} .chapter{min-height:auto; padding:1.5rem 0 2.5rem} .chapter__img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); margin-bottom:.6rem} } /* tres pasos con línea que se dibuja */ .joinsteps-sec{background:#F4F6F9} .joinsteps{position:relative; list-style:none; margin:0; padding:0 0 0 clamp(3.5rem, 2rem + 4vw, 6rem); display:grid; gap:clamp(2rem, 1rem + 3vw, 3.5rem); max-width:900px} .joinsteps__line{position:absolute; left:clamp(1.3rem, .6rem + 1.6vw, 2.2rem); top:.4rem; bottom:.4rem; width:2px; background:rgba(23,69,143,.15)} .joinsteps__line span{position:absolute; inset:0; background:linear-gradient(var(--gold), var(--cranberry)); transform-origin:50% 0; transform:scaleY(var(--jl,0))} .jstep{position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start} .jstep__n{position:absolute; left:calc(-1 * clamp(3.5rem, 2rem + 4vw, 6rem) + clamp(1.3rem, .6rem + 1.6vw, 2.2rem) - 22px); top:0; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--royal); font-weight:800; font-size:.9rem; box-shadow:0 0 0 2px rgba(23,69,143,.2), 0 10px 24px rgba(23,69,143,.15)} .jstep h3{margin:.4rem 0 .4rem; font-weight:800; letter-spacing:-.02em; font-size:clamp(1.3rem, 1rem + 1vw, 1.9rem); color:var(--ink)} .jstep p{margin:0 0 .6rem; color:var(--charcoal); max-width:52ch} .jstep__link{display:inline-flex; align-items:center; gap:.3rem; min-height:44px; font-weight:700; color:var(--azure); text-decoration:none} /* celebraciones */ .celebr{background:radial-gradient(120% 120% at 20% 0%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%); color:#fff} .celebr__grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem} .jcard{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:2.5rem; min-height:220px; padding:1.5rem; border-radius:var(--radius); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16)} .jcard .material-symbols-outlined{font-size:34px; color:var(--gold)} .jcard h3{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.15; font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem)} .jcard::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(360px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.14), transparent 55%)} .jcard:hover::before{opacity:1} @media (max-width:900px){ .celebr__grid{grid-template-columns:1fr 1fr} .jcard{min-height:170px} } @media (max-width:480px){ .celebr__grid{grid-template-columns:1fr} } /* galería */ .gallery__cols{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-rows:clamp(170px, 18vw, 250px); grid-auto-flow:dense; gap:1rem} .gimg{position:relative; margin:0; border-radius:var(--radius); overflow:hidden; isolation:isolate} .gimg img{display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out)} .gimg figcaption{position:absolute; left:.8rem; bottom:.8rem; padding:.35rem .75rem; border-radius:999px; font-size:.8rem; font-weight:600; color:#fff; background:rgba(0,8,24,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)} .gimg figcaption em{font-style:normal; opacity:.7} .gimg:hover img{transform:scale(1.05)} .gimg::before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.18), transparent 50%)} .gimg:hover::before{opacity:1} /* llamada final */ .jfinal{position:relative; isolation:isolate; overflow:hidden; color:#fff; padding:var(--section) 0; text-align:center} .jfinal__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2} .jfinal::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(0,8,24,.82), rgba(11,37,80,.9))} .jfinal h2{font-stretch:100%; text-transform:none; letter-spacing:-.035em; font-weight:800; font-size:clamp(2.4rem, 1.2rem + 4.4vw, 5.4rem); margin:0 0 2.2rem} .jfinal__cards{margin:0 auto; text-align:left} .jfinal__back{display:inline-flex; align-items:center; gap:.4rem; min-height:44px; margin-top:2rem; color:rgba(255,255,255,.8); font-weight:600; text-decoration:none} .jfinal__back:hover{color:#fff} @media (max-width:760px){ .jfinal__cards{grid-template-columns:1fr} } /* entrada sin View Transitions: la cortina que viene de la portada se retira */ .page-enter{position:fixed; inset:0; z-index:95; background:var(--cc, #0b2550); pointer-events:none; clip-path:circle(150vmax at 50% 50%); animation:curtainOut .8s .05s var(--ease-inout) forwards} @media (prefers-reduced-motion:reduce){ .jhero__img, .jhero__content{transform:none; opacity:1} .chapters__media img{transition:none} .joinsteps__line span{transform:none} } /* portada de Juventud: el texto a la izquierda sobre una sombra lateral; las caras quedan libres a la derecha */ .jhero__img{object-position:68% 40%} .jhero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg, rgba(0,8,24,.78) 0%, rgba(0,8,24,.45) 38%, rgba(0,8,24,0) 62%)} .jhero__title{font-size:clamp(2.4rem, 1rem + 4.4vw, 5.4rem); max-width:13ch} @media (max-width:760px){ .jhero__img{object-position:62% 30%} .jhero::before{background:linear-gradient(0deg, rgba(0,8,24,.6), rgba(0,8,24,0) 60%)} } /* avisos de imágenes ilustrativas: a la izquierda, lejos del botón del asistente */ .youth__note, .jhero__note{right:auto; left:var(--gutter)} /* ===================================================================== PÁGINAS INTERIORES (¿Qué es Rotary?, Distrito, Contacto): mismo lenguaje que Juventud ===================================================================== */ .phero{position:relative; height:88svh; min-height:560px; overflow:hidden; color:#fff; background:#0b2550; isolation:isolate} .phero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transform:scale(calc(1 + var(--jp,0) * .12)) translateY(calc(var(--jp,0) * 6vh))} .phero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(0,8,24,.72) 0%, rgba(0,8,24,0) 22%), linear-gradient(90deg, rgba(0,8,24,.8) 0%, rgba(0,8,24,.45) 45%, rgba(0,8,24,.15) 75%), linear-gradient(to top, rgba(0,8,24,.85), rgba(0,8,24,0) 55%)} .phero__content{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; max-width:var(--max); margin:0 auto; padding:calc(var(--nav-h) + 1.5rem) var(--gutter) clamp(4rem, 12vh, 8rem); opacity:calc(1 - var(--jp,0) * 1.6); transform:translateY(calc(var(--jp,0) * -50px))} .phero__title{margin:0; max-width:14ch; font-weight:800; letter-spacing:-.035em; line-height:1; font-size:clamp(2.4rem, 1rem + 4.6vw, 5.6rem)} .phero__lede{margin:1.1rem 0 0; max-width:46ch; font-size:var(--step-1); color:rgba(255,255,255,.85)} /* la primera sección sube como una hoja sobre la portada (igual que en la página de inicio) */ .phero + section, .jhero + section, .ch + section{position:relative; z-index:2; margin-top:-40px; border-radius:32px 32px 0 0; background:#fff} /* lema y valores */ .values{background:radial-gradient(120% 120% at 80% 0%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%); color:#fff} .values__grid{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem, 1rem + 4vw, 5rem); align-items:center} .values__motto{font-stretch:100%; text-transform:none; letter-spacing:-.035em; font-weight:800; font-size:clamp(2.2rem, 1rem + 3.6vw, 4.6rem)} .values__lede{margin:1rem 0 1.6rem; font-size:var(--step-1); color:var(--powder); max-width:40ch} .values__list{list-style:none; margin:0; padding:0; display:grid; gap:.2rem} .values__list li{display:flex; align-items:baseline; gap:1rem; padding:.9rem 0; border-bottom:1px solid rgba(255,255,255,.16); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.5rem, 1rem + 1.6vw, 2.4rem)} .values__list span{font-size:.8rem; font-weight:700; color:var(--gold); letter-spacing:.1em} @media (max-width:820px){ .values__grid{grid-template-columns:1fr} } /* lista tipográfica con foto flotante que sigue al cursor */ .flist{list-style:none; margin:0; padding:0; border-top:1px solid rgba(14,27,51,.12)} .flist__item{position:relative; display:grid; grid-template-columns:3.2rem 1fr 1.2fr auto; align-items:center; gap:1rem; min-height:76px; padding:1.1rem .4rem; border-bottom:1px solid rgba(14,27,51,.12); color:var(--ink); text-decoration:none; transition:padding .45s var(--ease-out), color .3s} .flist__n{font-size:.8rem; font-weight:700; color:var(--slate); letter-spacing:.1em} .flist__t{font-weight:800; letter-spacing:-.025em; font-size:clamp(1.25rem, 1rem + 1.3vw, 2.1rem); line-height:1.1} .flist__d{color:var(--slate)} .flist__go{color:var(--royal); transition:transform .4s var(--ease-out)} .flist__item:hover, .flist__item:focus-visible{padding-left:1.2rem; color:var(--royal)} .flist__item:hover .flist__go{transform:translateX(6px)} .flist--docs .flist__t{font-size:clamp(1.1rem, .95rem + .8vw, 1.6rem)} @media (max-width:760px){ .flist__item{grid-template-columns:2.4rem 1fr auto} .flist__d{display:none} } .fimg{position:fixed; z-index:40; top:0; left:0; width:clamp(220px, 22vw, 340px); aspect-ratio:4/3; border-radius:18px; overflow:hidden; pointer-events:none; box-shadow:0 30px 60px rgba(8,20,48,.35); opacity:0; transform:translate3d(-50%,-50%,0) scale(.85) rotate(-4deg); will-change:transform, opacity} .fimg img{width:100%; height:100%; object-fit:cover} /* línea de tiempo */ .tl{position:relative; list-style:none; margin:0; padding:0; display:grid; gap:clamp(2.5rem, 1.5rem + 3vw, 4.5rem)} .tl__line{position:absolute; left:calc(50% - 1px); top:0; bottom:0; width:2px; background:rgba(23,69,143,.12)} .tl__line span{position:absolute; inset:0; background:linear-gradient(var(--gold), var(--royal)); transform-origin:50% 0; transform:scaleY(var(--tl,0))} .tl__item{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center} .tl__year{justify-self:end; font-stretch:75%; font-weight:800; font-size:clamp(3rem, 1.5rem + 5vw, 6.5rem); line-height:.9; color:var(--royal); letter-spacing:-.01em} .tl__item:nth-child(odd) .tl__year{order:2; justify-self:start} .tl__card{max-width:460px} .tl__item:nth-child(odd) .tl__card{justify-self:end; text-align:right} .tl__when{margin:0 0 .3rem; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cranberry)} .tl__card h3{margin:0 0 .4rem; font-weight:800; letter-spacing:-.02em; font-size:clamp(1.3rem, 1rem + 1vw, 1.8rem); color:var(--ink)} .tl__card p{margin:0; color:var(--charcoal)} .tl__card img{margin-top:1rem; width:100%; border-radius:16px} .tl__item::before{content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; translate:-50% -50%; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--gold)} @media (max-width:760px){ .tl__line, .tl__item::before{left:12px} .tl__item{grid-template-columns:1fr; gap:.4rem; padding-left:2.4rem} .tl__item:nth-child(n) .tl__year{order:0; justify-self:start; font-size:2.6rem} .tl__item:nth-child(n) .tl__card{justify-self:start; text-align:left} .tl__item::before{top:1.3rem} } /* franja de llamada final */ .cta-band{background:radial-gradient(120% 140% at 0% 100%, #1d55a8 0%, var(--royal) 50%, #0b2550 100%); color:#fff} .cta-band__in{display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-end; justify-content:space-between} .cta-band h2{font-stretch:100%; text-transform:none; letter-spacing:-.03em; font-weight:800; font-size:clamp(1.9rem, 1rem + 2.4vw, 3.2rem); max-width:18ch} .cta-band p{color:var(--powder); max-width:52ch; margin:.8rem 0 0} .cta-band__actions{display:flex; flex-wrap:wrap; gap:.8rem} /* contacto */ .contact__grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem, 1rem + 4vw, 5rem); align-items:start} .contact h2{font-stretch:100%; text-transform:none; letter-spacing:-.03em; font-weight:800; font-size:clamp(2rem, 1rem + 2.6vw, 3.4rem); color:var(--ink)} .contact__list{list-style:none; margin:2rem 0; padding:0; display:grid; gap:1.2rem} .contact__list li{display:flex; gap:1rem; align-items:flex-start} .contact__list .material-symbols-outlined{width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#EEF2F8; color:var(--royal); flex:none} .contact__list span:not(.material-symbols-outlined){display:block; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)} .contact__list a, .contact__list p{margin:0; font-weight:700; font-size:1.1rem; color:var(--ink); text-decoration:none} .contact__social-t{font-weight:700; margin:0 0 .6rem} .contact__social{display:flex; flex-wrap:wrap; gap:.5rem} .contact__social a{display:inline-flex; align-items:center; min-height:44px; padding:0 1.1rem; border-radius:999px; border:1.5px solid rgba(23,69,143,.25); color:var(--royal); font-weight:700; text-decoration:none} .contact__social a:hover{background:#EEF2F8} .cform{display:grid; gap:1rem; padding:clamp(1.4rem, 1rem + 2vw, 2.4rem); border-radius:var(--radius); background:#F4F6F9} .cform h3{margin:0 0 .4rem; font-weight:800; letter-spacing:-.02em; font-size:1.5rem; color:var(--ink)} .cform label{display:grid; gap:.35rem; font-weight:600; font-size:.92rem; color:var(--ink)} .cform input, .cform select, .cform textarea{min-height:48px; padding:.7rem 1rem; border-radius:14px; border:1.5px solid var(--silver); background:#fff; font:inherit; color:var(--ink)} .cform textarea{resize:vertical} .cform input:focus, .cform select:focus, .cform textarea:focus{outline:none; border-color:var(--azure); box-shadow:0 0 0 4px rgba(0,93,170,.12)} .cform [aria-invalid="true"]{border-color:var(--cranberry)} .cform__err{margin:0; color:var(--cranberry); font-weight:600} .cform__note{margin:0; font-size:.82rem; color:var(--slate)} .cform .btn{justify-self:start} @media (max-width:860px){ .contact__grid{grid-template-columns:1fr} } /* ===================================================================== EFECTOS DE CURSOR comunes a todo el sitio ===================================================================== */ /* luz suave que sigue al cursor en las secciones oscuras */ .cglow{position:fixed; z-index:3; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(closest-side, rgba(1,180,231,.22), rgba(0,93,170,.08) 55%, transparent); opacity:0; transition:opacity .5s; will-change:transform} .cglow.is-on{opacity:1} /* rastro de fotos reales que aparecen y se desvanecen tras el cursor */ .trail-img{position:absolute; z-index:1; width:clamp(120px, 12vw, 190px); aspect-ratio:4/5; border-radius:14px; overflow:hidden; pointer-events:none; box-shadow:0 20px 40px rgba(8,20,48,.3)} .trail-img img{width:100%; height:100%; object-fit:cover} [data-trail]{position:relative; overflow:hidden} [data-trail] > .wrap{position:relative; z-index:2} @media (prefers-reduced-motion:reduce){ .cglow, .trail-img, .fimg{display:none} .phero__img, .phero__content{transform:none; opacity:1} } /* ===================================================================== MÓVIL: pensado para el dedo, no solo encogido ===================================================================== */ .flist__thumb{display:none} @media (max-width:760px){ /* escenas fijas más cortas: menos recorrido de pulgar para el mismo relato */ .stage-wrap{height:280svh} .youth-wrap{height:330svh} .journey{height:220vh} /* la lista con foto flotante muestra la foto en línea (no hay cursor) */ .flist__thumb{display:block; width:56px; height:56px; border-radius:14px; object-fit:cover; grid-row:span 1} .flist__item{grid-template-columns:56px 1fr auto; gap:.9rem; min-height:84px} .flist__n{display:none} /* respuesta táctil inmediata */ .cause, .post, .ycard, .path, .club, .gimg, .jcard, .pick, .flist__item, .btn{-webkit-tap-highlight-color:transparent} .cause:active, .post:active, .path:active, .club:active, .gimg:active, .jcard:active, .pick:active{transform:scale(.98); transition:transform .15s} .btn:active{transform:scale(.96)} /* tipografía y ritmo cómodos en pantalla pequeña */ .section{padding:clamp(3.5rem, 2.5rem + 6vw, 5rem) 0} .section__head{margin-bottom:1.6rem} .phero{height:78svh} .phero__content{padding-bottom:4.5rem} /* la fila de causas se desliza con el dedo y deja ver la siguiente tarjeta */ .causes__track{grid-auto-columns:78vw; scroll-padding:0 var(--gutter)} .cause{min-height:340px} .cause p{max-height:none; opacity:1} } @media (hover:none){ .tilt, .magnet{transform:none !important; translate:none !important} } /* Líderes: al pasar el ratón por encima, la persona se adelanta un poco y su botón se marca */ .person{transition:filter .5s var(--ease-out), scale .6s cubic-bezier(.34,1.56,.64,1)} .person.is-hot{scale:1.035; filter:drop-shadow(0 36px 50px rgba(0,0,0,.5)) brightness(1.08) saturate(1.08)} .pick.is-hot{background:rgba(255,255,255,.16)} .pick.is-hot .pick__go{opacity:1; transform:translateX(3px)} @media (prefers-reduced-motion: reduce){ .person.is-hot{scale:1} } /* Carrusel de proyectos: las tarjetas laterales también reaccionan al ratón (--h) y todas siguen al arrastre (--dx) */ @property --h{syntax:''; inherits:false; initial-value:0} .carousel__viewport{cursor:grab; user-select:none; -webkit-user-select:none} .carousel__viewport.is-drag{cursor:grabbing} .carousel__viewport img{-webkit-user-drag:none} .slide{ transform:translateX(var(--dx,0px)) translateX(calc(var(--o) * 62% - var(--o) * var(--h) * 5%)) translateY(calc(var(--h) * -12px)) scale(calc(1 - min(var(--abs), 2) * .16 + var(--h) * .04)) rotateY(calc(var(--o) * -8deg * (1 - var(--h) * .6))); filter:saturate(calc(1 - min(var(--abs),1) * .4 + var(--h) * .35)) brightness(calc(1 - min(var(--abs),1) * .3 + var(--h) * .24)); transition:transform .8s var(--ease-out), opacity .8s var(--ease-out), filter .8s var(--ease-out), --h .5s var(--ease-out)} .slide .slide__art img{transition:transform 1s var(--ease-out)} @media (hover:hover){ .slide:not(.is-active):hover{--h:1} .slide:hover .slide__art img{transform:scale(1.04)} } .carousel__viewport.is-drag .slide{transition:--h .5s var(--ease-out); --h:0} @media (max-width:760px){ .slide{transform:translateX(var(--dx,0px)) translateX(calc(var(--o) * 92%)) scale(calc(1 - min(var(--abs), 2) * .1))} } /* ---------- Gobernación: semblanza con fotos recortadas ---------- Escritorio: los capítulos pasan con el scroll y la escena fija cambia de persona, palabra de fondo y halo. Móvil (≤860px): cada capítulo es una tarjeta con su foto, en un carrusel horizontal con puntos. */ .govx{position:relative; isolation:isolate; color:#fff; padding:var(--section) 0 clamp(4rem, 8vw, 7rem); overflow:clip; background:radial-gradient(110% 80% at 72% 45%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%)} .govx .eyebrow{color:var(--gold)} .govx__name{font-size:var(--step-4); font-weight:800; letter-spacing:-.03em; line-height:1.02; margin:0; max-width:16ch} .govx__role{margin:.9rem 0 0; font-size:var(--step-1); color:var(--powder); max-width:52ch} .govx__role strong{color:#fff} .govx__hint{display:flex; align-items:center; gap:.5rem; margin:1.6rem 0 0; font-size:.86rem; font-weight:600; color:var(--powder)} .govx__hint .material-symbols-outlined{font-size:22px; color:var(--gold); animation:govHint 2.4s ease-in-out infinite} .govx__hint-m{display:none} @keyframes govHint{50%{transform:translateY(5px)}} .govx__story{position:relative; display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); width:min(1240px, calc(100% - 2 * var(--gutter))); margin:0 auto} .govx__chapters{grid-column:1; grid-row:1; list-style:none; margin:0; padding:0 0 12svh} .govx__ch{min-height:86svh; display:flex; align-items:center} .govx__mfig{display:none} .govx__copy{max-width:32rem; opacity:.18; transform:translateY(28px); transition:opacity .7s var(--ease-out), transform .9s var(--ease-out)} .govx__ch.is-on .govx__copy{opacity:1; transform:none} .govx__kicker{display:flex; align-items:center; gap:.6rem; margin:0 0 .8rem; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)} .govx__kicker span{display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:50%; border:1px solid rgba(247,168,27,.5); letter-spacing:0; font-variant-numeric:tabular-nums} .govx__title{margin:0 0 1rem; font-size:var(--step-3); font-weight:800; letter-spacing:-.02em; line-height:1.05} .govx__txt{margin:0; font-family:var(--serif); font-size:var(--step-1); line-height:1.6; color:rgba(255,255,255,.88)} .govx__stage{grid-column:2; grid-row:1; position:sticky; top:0; height:100svh; align-self:start} .govx__halo{position:absolute; left:50%; bottom:4%; width:min(46vw, 640px); aspect-ratio:1; translate:-50% 0; border-radius:50%; background:radial-gradient(closest-side, var(--tone, #01B4E7), transparent 100%); opacity:.4; transition:background .9s var(--ease-out)} .govx__word{position:absolute; left:50%; top:34%; white-space:nowrap; font-weight:800; font-size:var(--wsize, 9rem); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.3); transform:translate(calc(-50% + var(--mx) * -16px), calc(-50% + var(--my) * -10px))} .govx__word.is-swap{animation:govWord .9s var(--ease-out)} @keyframes govWord{from{opacity:0; letter-spacing:.06em; filter:blur(8px)}} .govx__fig{position:absolute; bottom:0; left:50%; height:min(84svh, 940px); width:auto; max-width:none; translate:-50% 0; transform-origin:50% 100%; opacity:0; transform:translateY(6%) scale(.96); transition:opacity .6s var(--ease-out), transform 1s var(--ease-out)} .govx__fig.is-past{transform:translateY(-2%) scale(1.03)} .govx__fig.is-on{opacity:1; transform:translate(calc(var(--mx) * 10px), calc(var(--my) * 6px)) scale(1); transition:opacity .8s .1s var(--ease-out), transform 1.1s var(--ease-out)} .govx__floor{position:absolute; left:12%; right:12%; bottom:-3%; height:12%; border-radius:50%; background:radial-gradient(closest-side, rgba(0,8,24,.6), transparent)} .govx__rail{grid-column:2; grid-row:1; position:sticky; top:0; height:100svh; align-self:start; justify-self:end; display:flex; align-items:center; z-index:3} .govx__rail ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem} .govx__rail button{display:flex; align-items:center; justify-content:flex-end; gap:.6rem; width:100%; padding:.5rem 0 .5rem .8rem; border:0; background:none; cursor:pointer; font:inherit; font-size:.78rem; font-weight:600; color:rgba(255,255,255,.55); text-shadow:0 1px 8px rgba(0,0,0,.5); transition:color .3s} .govx__rail button span{order:2; font-variant-numeric:tabular-nums; opacity:.7} .govx__rail button::after{content:""; order:3; width:16px; height:2px; border-radius:2px; background:currentColor; transition:width .4s var(--ease-out), background .3s} .govx__rail button:hover{color:#fff} .govx__rail button[aria-current]{color:#fff} .govx__rail button[aria-current]::after{width:34px; background:var(--gold)} .govx__rail button:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:6px} .govx__quote{margin:clamp(3rem, 7vw, 5rem) auto 0; max-width:60rem; text-align:center} .govx__quote p{margin:0; font-family:var(--serif); font-size:clamp(1.3rem, 1rem + 1.6vw, 2.3rem); line-height:1.35; font-style:italic} .govx__quote cite{display:block; margin-top:1rem; font-style:normal; font-size:.86rem; color:var(--powder); letter-spacing:.04em} @media (max-width:860px){ .govx__hint-d{display:none} .govx__hint-m{display:inline} .govx__hint .material-symbols-outlined{animation-name:govHintX} .govx__story{display:block; width:auto; margin-top:1.6rem} .govx__stage{display:none} .govx__chapters{position:relative; display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 var(--gutter) .4rem; scroll-padding-inline:var(--gutter); scrollbar-width:none; overscroll-behavior-x:contain} .govx__chapters::-webkit-scrollbar{display:none} .govx__ch{flex:0 0 min(86%, 420px); min-height:0; display:block; scroll-snap-align:start; border-radius:var(--radius); overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); transform:scale(.95); opacity:.6; transition:transform .5s var(--ease-out), opacity .5s} .govx__ch.is-on{transform:none; opacity:1} .govx__mfig{display:block; position:relative; margin:0; height:min(42svh, 340px); overflow:hidden; background:radial-gradient(60% 55% at 50% 78%, color-mix(in srgb, var(--tone) 60%, transparent), transparent 75%)} .govx__mfig img{position:absolute; bottom:0; left:50%; translate:-50% 0; height:94%; width:auto; max-width:none; transform:translateY(4%); transition:transform .9s var(--ease-out)} .govx__ch.is-on .govx__mfig img{transform:none} .govx__mword{position:absolute; top:10%; left:50%; translate:-50% 0; white-space:nowrap; font-weight:800; font-size:var(--wsize, 3.4rem); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.3)} .govx__mfig::after{content:""; position:absolute; inset:auto 0 0; height:22%; background:linear-gradient(to top, rgba(11,37,80,.85), transparent)} .govx__copy{max-width:none; opacity:1; transform:none; padding:0 1.2rem 1.4rem; margin-top:-.4rem; position:relative} .govx__title{font-size:1.45rem} .govx__txt{font-size:.95rem; line-height:1.55} .govx__rail{position:static; height:auto; display:block; margin-top:1rem} .govx__rail ol{flex-direction:row; justify-content:center; gap:0} .govx__rail button{width:auto; padding:.9rem .35rem; font-size:0; gap:0} .govx__rail button span{display:none} .govx__rail button::after{width:8px; height:8px; border-radius:8px; background:rgba(255,255,255,.4)} .govx__rail button[aria-current]::after{width:26px} } @keyframes govHintX{50%{transform:translateX(6px)}} @media (prefers-reduced-motion: reduce){ .govx__fig, .govx__copy, .govx__ch, .govx__mfig img{transition:none} .govx__word.is-swap, .govx__hint .material-symbols-outlined{animation:none} } /* Semblanza: portada de una sola pantalla (texto + pareja + adelantos) y recorrido completo plegado tras el botón */ .govx{padding-top:0; --mx:0; --my:0} .govx__intro{position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:end; width:min(1240px, calc(100% - 2 * var(--gutter))); margin:0 auto; min-height:min(calc(100svh - var(--nav-h)), 860px); padding-top:clamp(2rem, 5vh, 3.5rem)} .govx__giant{position:absolute; left:50%; bottom:clamp(8rem, 30vh, 16rem); translate:-50% 0; z-index:0; white-space:nowrap; pointer-events:none; user-select:none; font-weight:800; font-size:var(--gsize, 15vw); line-height:.8; letter-spacing:-.05em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.16); transform:translate(calc(var(--mx, 0) * -18px), calc(var(--my, 0) * -8px))} .govx__head{position:relative; z-index:2; align-self:center; padding:1rem 0 3rem} .govx__name{font-size:clamp(2.4rem, 1.2rem + 3.6vw, 4.6rem); line-height:.98; letter-spacing:-.035em; max-width:none} .govx__name span{display:block} .govx__name span + span{color:var(--powder)} .govx__motto{display:flex; flex-direction:column; gap:.3rem; margin:1.4rem 0 0; padding-left:1rem; border-left:3px solid var(--gold); font-size:var(--step-1); font-weight:700; color:#fff} .govx__motto span{font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)} .govx__lead{margin:1.2rem 0 0; font-family:var(--serif); font-size:1.05rem; line-height:1.6; color:rgba(255,255,255,.82); max-width:42ch} .govx__more{display:inline-flex; align-items:center; gap:.8rem; margin-top:1.8rem; padding:.85rem .85rem .85rem 1.5rem; border:0; border-radius:999px; cursor:pointer; background:var(--gold); color:#0b2550; font:inherit; font-weight:700; font-size:1rem; box-shadow:0 12px 32px rgba(247,168,27,.3); transition:transform .2s var(--ease-out), box-shadow .3s var(--ease-out)} .govx__more-n{font-size:.78rem; font-weight:600; opacity:.7} .govx__more .material-symbols-outlined{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(11,37,80,.12); transition:transform .5s var(--ease-out)} .govx__more:hover{box-shadow:0 16px 40px rgba(247,168,27,.5)} .govx__more:hover .material-symbols-outlined{transform:translateY(2px)} .govx__more:active{transform:scale(.97)} .govx__more[aria-expanded="true"] .material-symbols-outlined{transform:rotate(180deg)} .govx__more:focus-visible, .govx__less:focus-visible, .govx__teasers button:focus-visible{outline:2px solid #fff; outline-offset:3px} .govx__hero{position:relative; z-index:1; margin:0; height:calc(min(calc(100svh - var(--nav-h)), 860px) - clamp(2rem, 5vh, 3.5rem)); align-self:end} .govx__hero img{position:absolute; bottom:0; left:50%; height:100%; width:auto; max-width:none; transform:translate(calc(-50% + var(--mx, 0) * 10px), calc(var(--my, 0) * 5px))} .govx__hero .govx__halo{width:min(46vw, 640px); bottom:10%; opacity:.5} .govx__hero .govx__floor{bottom:-2%} .govx__teasers{position:absolute; z-index:3; right:0; bottom:clamp(2rem, 8vh, 5rem); list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; width:min(250px, 24vw)} .govx__teasers li:nth-child(2){translate:-28px 0} .govx__teasers li:nth-child(3){translate:-8px 0} .govx__teasers button{display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:.6rem; width:100%; padding:.8rem 1rem; text-align:left; cursor:pointer; border-radius:18px; border:1px solid rgba(255,255,255,.22); color:#fff; font:inherit; background:rgba(11,37,80,.45); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 14px 34px rgba(0,0,0,.25); transition:transform .35s var(--ease-out), background .3s, border-color .3s} .govx__teasers strong{grid-column:1; font-size:1.25rem; font-weight:800; line-height:1; color:var(--gold)} .govx__teasers span:not(.material-symbols-outlined){grid-column:1; margin-top:.3rem; font-size:.8rem; line-height:1.3; color:rgba(255,255,255,.85)} .govx__teasers .material-symbols-outlined{grid-column:2; grid-row:1 / span 2; font-size:20px; opacity:.6; transition:transform .35s var(--ease-out), opacity .3s} .govx__teasers button:hover{transform:translateX(-6px); background:rgba(11,37,80,.65); border-color:rgba(247,168,27,.6)} .govx__teasers button:hover .material-symbols-outlined{opacity:1; transform:translateX(3px)} .govx__teasers button:active{transform:scale(.98)} .govx__body[hidden]{display:none} .govx__body{padding-top:clamp(2rem, 5vw, 4rem); border-top:1px solid rgba(255,255,255,.1)} .govx__hint{margin:0 auto 1rem} .govx__end{text-align:center} .govx__less{display:inline-flex; align-items:center; gap:.4rem; margin-top:2rem; padding:.7rem 1.2rem; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; font:inherit; font-weight:600; font-size:.9rem; cursor:pointer; transition:background .3s} .govx__less:hover{background:rgba(255,255,255,.18)} .govx:has(.govx__body[hidden]){padding-bottom:0} @media (max-width:1100px) and (min-width:861px){ .govx__teasers{width:210px} .govx__lead{display:none} } @media (max-width:860px){ .govx__intro{grid-template-columns:1fr; min-height:0; padding-top:0} .govx__giant{top:clamp(4.5rem, 16svh, 8rem); bottom:auto} .govx__hero{order:-1; height:min(46svh, 400px)} .govx__hero .govx__halo{width:90vw} .govx__head{padding:1rem 0 1.4rem} .govx__name{font-size:clamp(2rem, 9vw, 2.6rem)} .govx__motto{margin-top:1rem; font-size:1.05rem} .govx__lead{display:none} .govx__more{width:100%; justify-content:space-between; margin-top:1.3rem} .govx__teasers{position:static; width:auto; flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; gap:.6rem; margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter) 2.5rem; scrollbar-width:none} .govx__teasers::-webkit-scrollbar{display:none} .govx__teasers li{flex:0 0 min(64%, 240px); scroll-snap-align:start; translate:none !important} .govx__teasers button{height:100%} .govx__body{margin-top:0} } /* Tercer camino: socio rotario (selector por edad, Juventud y ¿Qué es Rotary?) */ .path--rotary{--pc2:var(--gold)} .paths__cards{grid-template-columns:repeat(3, minmax(0, 1fr)); width:min(1180px, 100%)} .socio{background:radial-gradient(120% 120% at 15% 0%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%); color:#fff} .socio .section__head p{color:var(--powder)} .socio .path{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16)} .socio__sub{margin:clamp(3rem, 6vw, 4.5rem) 0 1.4rem; font-size:var(--step-2); font-weight:800; letter-spacing:-.02em} .socio__steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(1rem, 3vw, 2.4rem)} .socio__steps li{padding-top:1.1rem; border-top:2px solid var(--gold)} .socio__steps span{font-size:.8rem; font-weight:700; letter-spacing:.1em; color:var(--gold)} .socio__steps h4{margin:.5rem 0 .5rem; font-size:1.2rem; font-weight:800} .socio__steps p{margin:0; color:rgba(255,255,255,.84); line-height:1.6} .socio__actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem} .socio__src{margin:1.4rem 0 0; font-size:.78rem; color:var(--mist)} @media (max-width:900px){ .paths__cards, .socio__steps{grid-template-columns:1fr} } @media (max-width:760px){ .youth .paths__cards{gap:.45rem} .youth .path{padding:.8rem 1rem} .youth .path__logo{height:26px} .youth .path h3{font-size:1.15rem; margin:.35rem 0 .1rem} .youth .path p{display:none; font-size:.84rem; margin-bottom:.2rem} .youth[data-path="interact"] .path--interact p, .youth[data-path="rotaract"] .path--rotaract p, .youth[data-path="rotary"] .path--rotary p{display:block} .youth .path{display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:.8rem} .youth .path__logo{grid-row:1 / span 2} .youth .path h3, .youth .path p, .youth .path__link{grid-column:2} .youth .path__link{margin-top:0; justify-self:start} .youth .path__link{min-height:36px} .youth .chip{padding:0 .9rem; font-size:.86rem} } /* ---------- Imagen pública: repositorio de marca para los socios ---------- */ .rlinks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem} .rlink{position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:1rem; row-gap:.35rem; height:100%; padding:1.4rem 1.4rem 1.5rem; border-radius:var(--radius-sm); background:#fff; border:1px solid rgba(14,27,51,.1); color:var(--ink); text-decoration:none; box-shadow:0 1px 2px rgba(14,27,51,.04); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s} .rlink__i{grid-row:1 / span 2; display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:color-mix(in srgb, var(--azure) 10%, #fff); color:var(--azure); font-size:26px} .rlink__t{font-weight:800; font-size:1.1rem; letter-spacing:-.01em; padding-right:1.6rem} .rlink__d{color:var(--slate); font-size:.92rem; line-height:1.5} .rlink__go{position:absolute; top:1.3rem; right:1.2rem; font-size:20px; color:var(--mist); transition:transform .35s var(--ease-out), color .3s} .rlink:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(14,27,51,.12); border-color:color-mix(in srgb, var(--azure) 35%, transparent)} .rlink:hover .rlink__go{color:var(--azure); transform:translate(2px, -2px)} .rlink:focus-visible{outline:2px solid var(--azure); outline-offset:3px} .rlinks li:first-child .rlink{background:var(--azure); color:#fff; border-color:var(--azure)} .rlinks li:first-child .rlink__i{background:rgba(255,255,255,.16); color:#fff} .rlinks li:first-child .rlink__d, .rlinks li:first-child .rlink__go{color:rgba(255,255,255,.82)} .steps-sec, .voice-sec{background:radial-gradient(120% 120% at 85% 0%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%); color:#fff} .steps-sec .section__head p, .voice-sec .section__head p{color:var(--powder)} .lsteps{list-style:none; margin:0 0 2.4rem; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:1rem; counter-reset:s} .lsteps li{position:relative; padding:1.3rem 1.2rem 1.4rem; border-radius:var(--radius-sm); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14)} .lsteps span{display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--gold); color:#0b2550; font-weight:800; font-size:.85rem} .lsteps h3{margin:1rem 0 .4rem; font-size:1.08rem; font-weight:800} .lsteps p{margin:0; font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.82)} .dodont{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem 2rem} .dodont li{display:flex; gap:.8rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid rgba(14,27,51,.1); font-size:1rem; line-height:1.5} .dodont .material-symbols-outlined{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-size:18px; color:#fff} .dodont .ok .material-symbols-outlined{background:var(--turquoise)} .dodont .no .material-symbols-outlined{background:var(--cranberry)} .swatches{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.2rem} .sw{display:flex; flex-direction:column; gap:.2rem} .sw__b{display:block; width:100%; padding:0; border:0; background:none; cursor:copy; border-radius:var(--radius-sm)} .sw__chip{display:block; aspect-ratio:16/10; border-radius:var(--radius-sm); background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out)} .sw__b:hover .sw__chip{transform:translateY(-3px); box-shadow:0 14px 30px color-mix(in srgb, var(--c) 40%, transparent)} .sw__b:active .sw__chip{transform:scale(.97)} .sw__b:focus-visible{outline:2px solid var(--azure); outline-offset:3px} .sw strong{margin-top:.6rem; font-size:1rem} .sw code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9rem; color:var(--royal)} .sw > span{font-size:.82rem; color:var(--slate)} .sw.is-copied code::after{content:" · copiado"; color:var(--turquoise); font-family:'Open Sans', sans-serif; font-weight:700} .swatches__msg{margin:1rem 0 0; min-height:1.2em; font-size:.9rem; color:var(--slate)} .type-sec{background:var(--cloud, #E6E5D8)} .type-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem, 5vw, 5rem); align-items:center} .type-sec__p{font-size:var(--step-1); color:var(--slate); max-width:46ch} .fonts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem} .fonts li{display:flex; flex-direction:column; padding:1.2rem 1.3rem; border-radius:var(--radius-sm); background:#fff} .fonts__s{font-size:3.2rem; line-height:1; color:var(--azure); margin-bottom:.8rem} .fonts strong{font-size:1rem} .fonts li > span:last-child{font-size:.85rem; color:var(--slate)} .voice{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 4rem)} .voice__attrs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem} .voice__attrs li{display:flex; flex-direction:column; gap:.3rem; padding:1.2rem; border-radius:var(--radius-sm); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14)} .voice__attrs strong{font-size:1.25rem; color:var(--gold)} .voice__attrs span{font-size:.92rem; color:rgba(255,255,255,.82)} .voice__photo h3{margin:0 0 1rem; font-size:1.3rem} .voice__photo ul{margin:0; padding-left:1.1rem; display:grid; gap:.7rem; color:rgba(255,255,255,.86); line-height:1.55} .camps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem} .camps li{display:flex; flex-direction:column; padding:1.4rem; border-radius:var(--radius-sm); border:1px solid rgba(14,27,51,.1); border-top:4px solid var(--gold)} .camps li:nth-child(2){border-top-color:var(--cranberry)} .camps li:nth-child(3){border-top-color:var(--orange)} .camps li:nth-child(4){border-top-color:var(--azure)} .camps li:nth-child(5){border-top-color:var(--sky)} .camps li:nth-child(6){border-top-color:var(--violet)} .camps h3{margin:0 0 .5rem; font-size:1.15rem; font-weight:800} .camps p{margin:0 0 1rem; color:var(--slate); line-height:1.55; font-size:.95rem} .camps li > span{margin-top:auto; font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--azure)} @media (max-width:1000px){ .lsteps{grid-template-columns:repeat(2, minmax(0, 1fr))} .rlinks, .camps{grid-template-columns:repeat(2, minmax(0, 1fr))} .swatches{grid-template-columns:repeat(2, minmax(0, 1fr))} } @media (max-width:760px){ .rlinks, .camps, .lsteps, .dodont, .type-grid, .voice, .voice__attrs{grid-template-columns:1fr} .swatches{gap:.9rem} .fonts__s{font-size:2.4rem} } /* ---------- Únete: opciones de contacto (panel y contacto.html#unirse) ---------- */ .jopts{list-style:none; margin:0; padding:0; display:grid; gap:.7rem} .jopt{display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:1rem; align-items:center; padding:1rem 1.1rem; border-radius:18px; text-decoration:none; color:var(--ink); background:#fff; border:1px solid rgba(14,27,51,.12); transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s} .jopt::after{content:"arrow_forward"; font-family:'Material Symbols Outlined'; grid-column:3; grid-row:1 / span 2; font-size:22px; color:var(--mist); transition:transform .3s var(--ease-out), color .3s} .jopt__i{grid-row:1 / span 2; display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:#fff} .jopt__i svg{width:26px; height:26px} .jopt__i .material-symbols-outlined{font-size:26px} .jopt--wa .jopt__i{background:#25D366} .jopt--mail .jopt__i{background:var(--azure)} .jopt--ig .jopt__i{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%)} .jopt__t{font-weight:800; font-size:1.05rem} .jopt__d{font-size:.88rem; color:var(--slate); overflow-wrap:anywhere} .jopt:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(14,27,51,.14); border-color:rgba(0,93,170,.3)} .jopt:hover::after{color:var(--azure); transform:translateX(3px)} .jopt:active{transform:scale(.98)} .jopt:focus-visible{outline:2px solid var(--azure); outline-offset:3px} .unirse{background:radial-gradient(120% 120% at 85% 0%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%); color:#fff} .unirse__in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 5rem); align-items:center} .unirse__in > div p:last-child{font-size:var(--step-1); color:var(--powder); max-width:40ch} @media (max-width:760px){ .unirse__in{grid-template-columns:1fr} } /* ---------- Únete: 1 elige · 2 descubre (solo el programa elegido) · 3 escribe ---------- Curvas: --u-out para entradas y cambios de estado; hover solo con ratón; sin movimiento con «reducir movimiento». */ :root{--u-out:cubic-bezier(.23, 1, .32, 1)} .upick--interact, .upath--interact, .ustep3[data-prog="interact"]{--pc2:var(--sky)} .upick--rotaract, .upath--rotaract, .ustep3[data-prog="rotaract"]{--pc2:var(--cranberry)} .upick--rotary, .upath--rotary, .ustep3[data-prog="rotary"]{--pc2:var(--gold)} .phero + section.ustep1, .ustep1{background:radial-gradient(120% 120% at 85% 0%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%); color:#fff} .ustepper{list-style:none; margin:0 0 2.2rem; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; font-size:.85rem; font-weight:600; color:rgba(255,255,255,.55)} .ustepper li{display:flex; align-items:center; gap:.5rem; transition:color .3s ease} .ustepper span{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; border:1.5px solid currentColor; font-size:.78rem; transition:background .3s ease, color .3s ease, border-color .3s ease} .ustepper li.is-on{color:#fff} .ustepper li.is-on span{background:var(--gold); border-color:var(--gold); color:#0b2550} .ustepper li.is-done span{background:#fff; border-color:#fff; color:var(--royal)} .ustep1 h2{font-size:var(--step-4); margin:0} .ustep1__lede{margin:.8rem 0 2.2rem; font-size:var(--step-1); color:var(--powder); max-width:48ch} .ustep1__note{margin:1.2rem 0 0; font-size:.78rem; color:rgba(255,255,255,.55)} .upicks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem} .upick{--sx:50%; --sy:50%; position:relative; isolation:isolate; display:flex; align-items:flex-end; width:100%; aspect-ratio:4/5; max-height:520px; padding:0; overflow:hidden; text-align:left; cursor:pointer; border-radius:28px; border:1.5px solid rgba(255,255,255,.16); background:#0b2550; color:#fff; font:inherit; transition:transform .5s var(--u-out), opacity .4s ease, border-color .3s ease, box-shadow .5s var(--u-out)} .upick__bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.2s var(--u-out), filter .5s ease; filter:saturate(.9)} .upick::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,37,80,.05) 20%, rgba(11,37,80,.55) 55%, rgba(8,24,52,.94) 100%)} .upick::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s ease; background:radial-gradient(420px circle at var(--sx) var(--sy), rgba(255,255,255,.16), transparent 60%)} .upick__in{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; width:100%; padding:1.6rem} .upick__logo{height:30px; width:auto; margin-bottom:.4rem} .upick strong{font-size:clamp(1.6rem, 1rem + 1.8vw, 2.4rem); font-weight:800; letter-spacing:-.02em; line-height:1.05} .upick__line{color:rgba(255,255,255,.82); font-size:.95rem; line-height:1.4} .upick__go{display:inline-flex; align-items:center; gap:.35rem; margin-top:.8rem; padding:.55rem .9rem .55rem 1.1rem; border-radius:999px; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-weight:700; font-size:.9rem; transition:background .3s ease} .upick__go .material-symbols-outlined{font-size:18px; transition:transform .4s var(--u-out)} .upick .upick__ok{position:absolute; z-index:2; top:1.1rem; right:1.1rem; font-size:30px; color:var(--pc2); opacity:0; transform:scale(.8); transition:opacity .25s ease, transform .4s var(--u-out)} .upick:active{transform:scale(.98)} .upick:focus-visible{outline:2px solid #fff; outline-offset:4px} @media (hover:hover) and (pointer:fine){ .upick:hover{border-color:color-mix(in srgb, var(--pc2) 70%, transparent); box-shadow:0 30px 60px rgba(0,0,0,.35)} .upick:hover .upick__bg{transform:scale(1.1)} .upick:hover::after{opacity:1} .upick:hover .upick__go{background:var(--pc2); color:#0b2550} .upick:hover .upick__go .material-symbols-outlined{transform:translateX(3px)} } .upick[aria-pressed="true"]{border-color:var(--pc2); box-shadow:0 0 0 4px color-mix(in srgb, var(--pc2) 35%, transparent), 0 30px 60px rgba(0,0,0,.35)} .upick[aria-pressed="true"] .upick__ok{opacity:1; transform:none} .upick[aria-pressed="true"] .upick__go{background:var(--pc2); color:#0b2550} .upick[aria-pressed="true"] .upick__go-t{font-size:0} .upick[aria-pressed="true"] .upick__go-t::before{content:"Elegido"; font-size:.9rem} .upicks:has([aria-pressed="true"]) .upick:not([aria-pressed="true"]){opacity:.5; transform:scale(.97)} .upicks:has([aria-pressed="true"]) .upick:not([aria-pressed="true"]) .upick__bg{filter:saturate(.3)} /* paso 2: solo el programa elegido */ .ustep2[hidden], .upath[hidden]{display:none !important} .ustep2{background:#fff} .upath{display:block} .upath__hero{position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:clamp(320px, 52vh, 520px); border-radius:var(--radius); overflow:hidden; color:#fff} .upath__img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover} .upath__hero::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(8,24,52,.92) 0%, rgba(8,24,52,.6) 45%, rgba(8,24,52,.05) 100%)} .upath__head{padding:clamp(1.6rem, 4vw, 3.2rem); max-width:40rem} .upath__head .eyebrow{color:var(--pc2)} .upath h2{margin:0; font-size:var(--step-4); outline:none} .upath__desc{margin:1rem 0 0; font-size:var(--step-1); color:rgba(255,255,255,.88); line-height:1.55} .upath__stats{list-style:none; margin:clamp(1.6rem, 4vw, 2.6rem) 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem} .upath__stats li{padding:1.2rem 0 0; border-top:3px solid var(--pc2)} .upath__stats strong{display:block; font-weight:800; font-stretch:75%; font-size:clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); line-height:.95; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums} .upath__stats span{display:block; margin-top:.4rem; color:var(--slate); font-size:.95rem} .upath__grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem, 5vw, 4rem); align-items:start} .upath__facts{list-style:none; margin:0; padding:0; display:grid; gap:1rem} .upath__facts li{display:flex; gap:.8rem; align-items:flex-start; font-size:1.05rem; line-height:1.5} .upath__facts .material-symbols-outlined{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-size:18px; color:#0b2550; background:var(--pc2)} .upath__next{padding:1.8rem; border-radius:var(--radius); background:color-mix(in srgb, var(--pc2) 9%, #fff); border:1px solid color-mix(in srgb, var(--pc2) 28%, transparent)} .upath__next h3{margin:0 0 1.2rem; font-size:1.25rem; font-weight:800} .upath__steps{position:relative; list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:1.1rem} .upath__steps::before{content:""; position:absolute; left:15px; top:16px; bottom:16px; width:2px; background:color-mix(in srgb, var(--pc2) 45%, transparent); transform-origin:top; transform:scaleY(var(--line, 1))} .upath__steps li{position:relative; display:flex; gap:1rem; align-items:flex-start} .upath__steps span{flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--pc2); color:#0b2550; font-weight:800; font-size:.9rem} .upath__steps p{margin:.25rem 0 0; line-height:1.5} .upath__links{display:flex; flex-wrap:wrap; gap:.6rem} .upath__links .btn--line{color:var(--ink); border-color:rgba(14,27,51,.25)} /* paso 3: datos → vista previa → envío por el canal elegido (mismo lenguaje oscuro del paso 1) */ .ustep3{background:radial-gradient(120% 120% at 15% 0%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%); color:#fff} .ustep3 .eyebrow{color:var(--gold)} .ustep3__head{max-width:46rem; margin-bottom:2.2rem} .ustep3__head h2{margin:0; font-size:var(--step-4)} .ustep3__lede{margin:.8rem 0 0; font-size:var(--step-1); color:var(--powder)} .usend{display:grid; grid-template-columns:1.25fr 1fr; gap:1rem; align-items:start} .uform, .usend__out{padding:clamp(1.3rem, 3vw, 2rem); border-radius:28px; background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.14)} .uform{display:grid; gap:1rem} .uform__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem} .uform label{display:grid; gap:.45rem; font-weight:600; font-size:.92rem; color:rgba(255,255,255,.9)} .uform__opt{font-weight:400; color:rgba(255,255,255,.55)} .uform input, .uform select, .uform textarea{width:100%; min-height:50px; padding:.75rem 1rem; border-radius:14px; border:1.5px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; font:inherit; font-size:1rem; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease} .uform select{appearance:none; background-image:linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:2.5rem} .uform select option{color:var(--ink)} .uform textarea{resize:vertical; min-height:96px} .uform ::placeholder{color:rgba(255,255,255,.4)} .uform input:focus, .uform select:focus, .uform textarea:focus{outline:none; border-color:var(--gold); background:rgba(255,255,255,.12); box-shadow:0 0 0 4px rgba(247,168,27,.18)} .uform [aria-invalid="true"]{border-color:#ff8fae} .uform__hint{margin:-.3rem 0 0; font-size:.82rem; color:rgba(255,255,255,.6)} .usend__out{position:sticky; top:calc(var(--nav-h) + 1rem)} .usend__out h3{margin:0 0 .8rem; font-size:1.05rem; font-weight:800} .usend__preview{margin:0; padding:1rem 1.1rem; border-radius:18px 18px 18px 6px; background:#fff; color:var(--ink); font:inherit; font-size:.92rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; min-height:7.5rem; box-shadow:0 12px 30px rgba(0,0,0,.2)} .usend__preview:empty::before{content:"Tu mensaje aparecerá aquí mientras completas el formulario."; color:var(--slate)} .usend__status{margin:.8rem 0 0; font-size:.86rem; color:var(--powder); min-height:1.3em} .usend__status.is-ready{color:#7ee2a8} .usend__via{margin:1.2rem 0 .6rem; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65)} .usend__btns{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.5rem} .usend__b{text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:.45rem; padding:.9rem .4rem; border-radius:18px; border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font:inherit; font-weight:700; font-size:.88rem; cursor:pointer; transition:transform .16s var(--u-out), opacity .3s ease, background .3s ease, border-color .3s ease} .usend__i{display:grid; place-items:center; width:44px; height:44px; border-radius:14px; color:#fff; transition:transform .4s var(--u-out)} .usend__i svg{width:24px; height:24px} .usend__b--wa .usend__i{background:#25D366} .usend__b--mail .usend__i{background:var(--azure)} .usend__b--ig .usend__i{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%)} .usend__b[aria-disabled="true"]{opacity:.38; cursor:not-allowed} .usend__b[aria-disabled="true"] .usend__i{filter:grayscale(1)} .usend__b:not([aria-disabled="true"]):active{transform:scale(.97)} .usend__b:focus-visible{outline:2px solid #fff; outline-offset:3px} @media (hover:hover) and (pointer:fine){ .usend__b:not([aria-disabled="true"]):hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4)} .usend__b:not([aria-disabled="true"]):hover .usend__i{transform:translateY(-2px)} } .usend.is-ready .usend__b{animation:usendOn .45s var(--u-out) both} .usend.is-ready .usend__b:nth-child(2){animation-delay:.05s} .usend.is-ready .usend__b:nth-child(3){animation-delay:.1s} @keyframes usendOn{from{transform:scale(.95)}} .usend__note{margin:1rem 0 0; font-size:.78rem; line-height:1.5; color:rgba(255,255,255,.55)} .ustep3__alt{margin:1.6rem 0 0; font-size:.9rem; color:var(--powder)} .ustep3__alt a{color:#fff} @media (max-width:900px){ .usend{grid-template-columns:1fr} .usend__out{position:static} } @media (max-width:560px){ .uform__row{grid-template-columns:1fr} } @media (prefers-reduced-motion: reduce){ .usend.is-ready .usend__b{animation:none} } @media (max-width:860px){ .upicks{grid-template-columns:1fr; gap:.7rem} .upick{aspect-ratio:auto; min-height:150px} .upick__in{padding:1.2rem; flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:.8rem} .upick__logo{margin:0; height:24px} .upick strong{flex-basis:100%; font-size:1.6rem} .upick__go{margin-top:.3rem} .upicks:has([aria-pressed="true"]) .upick:not([aria-pressed="true"]){transform:none} .upath__hero{min-height:420px} .upath__hero::before{background:linear-gradient(180deg, rgba(8,24,52,.1) 0%, rgba(8,24,52,.75) 50%, rgba(8,24,52,.95) 100%)} .upath__stats{grid-template-columns:1fr; gap:.4rem} .upath__stats li{display:flex; align-items:baseline; gap:1rem; padding-top:.8rem} .upath__stats strong{font-size:2.4rem; min-width:4.2ch} .upath__grid{grid-template-columns:1fr} } @media (prefers-reduced-motion: reduce){ .upick, .upick__bg, .upick__ok{transition:opacity .2s ease, border-color .2s ease} .upick:hover .upick__bg{transform:scale(1.04)} .upicks:has([aria-pressed="true"]) .upick:not([aria-pressed="true"]){transform:none} } .ustep1 .eyebrow{color:var(--gold)} /* Asistente: respuestas de IA */ .msg--bot p{margin:0 0 .5rem} .msg--bot p:last-of-type{margin-bottom:0} .bot__ai{display:block; margin-top:.6rem; font-size:.72rem; color:var(--slate)} .gimg video{display:block; width:100%; height:100%; object-fit:cover; background:#0b2550} /* Galería en cuadrícula (las columnas CSS hacían desaparecer fotos en Chrome) y visor a pantalla completa */ .gimg--tall{grid-row:span 2} .gimg--wide{grid-column:span 2} [data-lightbox] .gimg{cursor:zoom-in} [data-lightbox] .gimg:focus-visible{outline:3px solid var(--azure); outline-offset:3px} .gimg__zoom{position:absolute; top:.8rem; right:.8rem; z-index:3; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; background:rgba(0,8,24,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transform:scale(.9); transition:opacity .25s ease, transform .3s var(--ease-out); pointer-events:none} .gimg:hover .gimg__zoom, .gimg:focus-visible .gimg__zoom{opacity:1; transform:none} @media (hover:none){ .gimg__zoom{opacity:1; transform:none} } @media (max-width:760px){ .gallery__cols{grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:150px; gap:.6rem} .gimg--wide{grid-column:span 2} .gimg figcaption{font-size:.72rem; left:.5rem; bottom:.5rem} } .lbox{width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; color:#fff; overflow:hidden} .lbox::backdrop{background:rgba(4,12,28,.94)} .lbox[open]{animation:lbIn .3s cubic-bezier(.23,1,.32,1)} @keyframes lbIn{from{opacity:0}} .lbox__stage{position:absolute; inset:0; display:grid; place-items:center; padding:clamp(3.5rem, 7vh, 5rem) clamp(1rem, 6vw, 6rem) clamp(5rem, 11vh, 7rem)} .lbox__media{max-width:100%; max-height:100%; width:auto; height:auto; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.5); animation:lbMedia .35s cubic-bezier(.23,1,.32,1)} @keyframes lbMedia{from{opacity:0; transform:scale(.96)}} .lbox__cap{position:absolute; left:0; right:0; bottom:clamp(1rem, 3vh, 2rem); text-align:center; padding:0 4rem; font-weight:600} .lbox__cap span{display:block; margin-top:.2rem; font-size:.8rem; font-weight:500; color:rgba(255,255,255,.6)} .lbox__btn{position:absolute; z-index:2; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:#fff; cursor:pointer; transition:background .2s ease, transform .16s ease} .lbox__btn:hover{background:rgba(255,255,255,.22)} .lbox__btn:active{transform:scale(.95)} .lbox__btn:focus-visible{outline:2px solid #fff; outline-offset:3px} .lbox__x{top:1rem; right:1rem} .lbox__prev{left:1rem; top:50%; translate:0 -50%} .lbox__next{right:1rem; top:50%; translate:0 -50%} @media (max-width:760px){ .lbox__prev, .lbox__next{top:auto; bottom:1rem; translate:none} .lbox__cap{bottom:5rem; padding:0 1rem} .lbox__stage{padding:4rem .75rem 8rem} } @media (prefers-reduced-motion: reduce){ .lbox[open], .lbox__media{animation:none} } .jfinal__lede{margin:-1rem auto 1.8rem; max-width:44ch; font-size:var(--step-1); color:var(--powder)} .jfinal__actions{display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem} .jfinal__alt{margin:1.4rem 0 0; color:rgba(255,255,255,.8)} .jfinal__alt a{color:#fff; font-weight:700} /* Únete: sugerencias de provincias */ .ucombo{position:relative} .ucombo__list{position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px); max-height:248px; overflow:auto; margin:0; padding:.35rem; list-style:none; border-radius:16px; background:#fff; color:var(--ink); box-shadow:0 24px 50px rgba(0,8,24,.35); overscroll-behavior:contain; transform-origin:top; animation:comboIn .18s cubic-bezier(.23,1,.32,1)} @keyframes comboIn{from{opacity:0; transform:translateY(-4px) scale(.98)}} .ucombo__list li{padding:.65rem .8rem; border-radius:10px; cursor:pointer; font-weight:500} .ucombo__list li[aria-selected="true"], .ucombo__list li:hover{background:color-mix(in srgb, var(--azure) 12%, #fff)} .ucombo__list mark{background:none; color:var(--azure); font-weight:800} @media (prefers-reduced-motion: reduce){ .ucombo__list{animation:none} } /* Escena de líderes: más presencia y menos vacío bajo el titular; el borde inferior de los recortes se funde (máscara) para que nunca se vea el corte, ni quietos ni mientras suben al hacer scroll */ .group{height:min(70svh, calc(100svh - 240px)); -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%); mask-image:linear-gradient(to bottom, #000 78%, transparent 100%)} .person--rdr, .person--rdi{height:90%} .person--rdr{translate:calc(-50% - min(27vw, 360px)) 0} .person--rdi{translate:calc(-50% + min(27vw, 360px)) 0} .halo--rdr{translate:calc(-50% - min(27vw, 360px)) 0} .halo--rdi{translate:calc(-50% + min(27vw, 360px)) 0} @media (max-height:640px) and (min-width:901px){ .group{height:calc(100svh - 190px)} } @media (max-width:900px){ .group{height:min(54svh, calc(100svh - 360px)); bottom:170px; -webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent 100%); mask-image:linear-gradient(to bottom, #000 70%, transparent 100%)} .person--rdr, .person--rdi{height:84%} .person--rdr, .halo--rdr{translate:calc(-50% - 30vw) 0} .person--rdi, .halo--rdi{translate:calc(-50% + 30vw) 0} /* entrada en móvil: suben poco y aparecen desde la niebla de la máscara */ .person--gob{transform:translateY(calc((1 - var(--pa,0)) * 10vh)) scale(calc(.96 + var(--pa,0) * .04))} .person--rdr{transform:translateY(calc((1 - var(--pb,0)) * 12vh)) translateX(calc((1 - var(--pb,0)) * 3vw))} .person--rdi{transform:translateY(calc((1 - var(--pb,0)) * 12vh)) translateX(calc((1 - var(--pb,0)) * -3vw))} } @media (max-width:600px){ .group{height:min(50svh, calc(100svh - 400px)); bottom:200px} } @media (max-width:600px) and (max-height:720px){ .group{height:calc(100svh - 280px); bottom:170px} } /* Líderes: al enfocar a un representante, se desliza hacia el centro y pasa por delante del Gobernador (el cambio de capa ocurre a mitad del recorrido); al soltar vuelve atrás. Detrás de cada uno, un brillo suave con el color de su programa: Rotaract cranberry, Rotary azul, Interact celeste. */ .person{transition:filter .5s var(--ease-out), scale .6s cubic-bezier(.34,1.56,.64,1), translate .7s cubic-bezier(.22,1,.36,1), z-index 0s .32s} .person.is-hot{z-index:3; transition:filter .5s var(--ease-out), scale .6s cubic-bezier(.34,1.56,.64,1), translate .7s cubic-bezier(.22,1,.36,1), z-index 0s .14s} .person.is-hot{scale:1.06} .halo{transition:translate .7s cubic-bezier(.22,1,.36,1)} @media (min-width:901px){ .person--gob{translate:calc(-50% + var(--hg, 0px)) 0} .person--rdr, .halo--rdr{translate:calc(-50% - min(27vw, 360px) + var(--hr, 0px)) 0} .person--rdi, .halo--rdi{translate:calc(-50% + min(27vw, 360px) + var(--hi, 0px)) 0} .stage[data-focus="rotaract"]{--hr:min(9vw, 120px); --hg:min(3vw, 40px)} .stage[data-focus="interact"]{--hi:calc(-1 * min(9vw, 120px)); --hg:calc(-1 * min(3vw, 40px))} } .halo::after{content:""; position:absolute; inset:-12% -6% 10%; border-radius:50%; opacity:0; transition:opacity .6s var(--ease-out), transform .8s var(--ease-out); transform:scale(.9); background:radial-gradient(closest-side, var(--glow), transparent 72%)} .halo--rdr{--glow:rgba(217,27,92,.55)} .halo--gob{--glow:rgba(0,93,170,.6)} .halo--rdi{--glow:rgba(1,180,231,.55)} .halo::after{opacity:.28} .stage[data-focus="rotaract"] .halo--rdr::after, .stage[data-focus="rotary"] .halo--gob::after, .stage[data-focus="interact"] .halo--rdi::after{opacity:1; transform:scale(1.08)} .stage[data-focus]:not([data-focus=""]) .halo::after{opacity:.12} .stage.stage[data-focus="rotaract"] .halo--rdr::after, .stage.stage[data-focus="rotary"] .halo--gob::after, .stage.stage[data-focus="interact"] .halo--rdi::after{opacity:1} @media (prefers-reduced-motion: reduce){ .person, .halo{transition:filter .3s ease, opacity .3s ease} .stage[data-focus]{--hr:0px; --hi:0px; --hg:0px} } /* el mismo paso al frente al enfocar desde los botones de abajo (no solo al pasar sobre la persona) */ .stage[data-focus="rotaract"] .person--rdr, .stage[data-focus="interact"] .person--rdi{z-index:3; scale:1.06; transition:filter .5s var(--ease-out), scale .6s cubic-bezier(.34,1.56,.64,1), translate .7s cubic-bezier(.22,1,.36,1), z-index 0s .14s} .stage[data-focus="rotary"] .person--gob{scale:1.035} @media (prefers-reduced-motion: reduce){ .stage[data-focus] .person{scale:1} } /* ---------- Portal hacia «Nuestros clubes» ---------- Salida (portada, ~1,1 s): la persona elegida avanza y crece, las otras se apartan y se apagan; el color se abre desde su pecho en dos capas (tinte y sólido, 90 ms de diferencia); luego entran logo, nombre, cifra y una línea. Llegada (clubes): la misma composición se retira hacia arriba y el encabezado sube escalonado. */ .curtain{background:none} .curtain::before, .curtain::after{content:""; position:absolute; inset:0; clip-path:circle(0px at var(--ox,50%) var(--oy,50%)); transition:clip-path .85s cubic-bezier(.77,0,.175,1)} .curtain::before{background:color-mix(in srgb, var(--cc) 55%, #fff)} .curtain::after{background:radial-gradient(120% 90% at var(--ox,50%) var(--oy,50%), color-mix(in srgb, var(--cc) 82%, #fff) 0%, var(--cc) 45%, color-mix(in srgb, var(--cc) 70%, #000) 100%); transition-delay:.09s} .curtain.is-on{clip-path:none} .curtain.is-on::before, .curtain.is-on::after{clip-path:circle(150vmax at var(--ox,50%) var(--oy,50%))} .curtain.is-portal.is-on::before{transition-delay:.22s} .curtain.is-portal.is-on::after{transition-delay:.31s} .curtain__in{position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; color:#fff; text-align:center; padding:0 var(--gutter)} .curtain__in img{height:clamp(54px, 7vw, 84px); width:auto; margin-bottom:.8rem} .curtain__t{margin:0; font-weight:800; letter-spacing:-.03em; font-size:clamp(2.2rem, 1.2rem + 4vw, 4.6rem); line-height:1} .curtain__n{margin:.4rem 0 0; font-size:var(--step-1); color:rgba(255,255,255,.85)} .curtain__bar{display:block; width:min(220px, 50vw); height:3px; margin-top:1.4rem; border-radius:3px; background:rgba(255,255,255,.25); overflow:hidden; position:relative} .curtain__bar::after{content:""; position:absolute; inset:0; background:#fff; transform-origin:0 50%; transform:scaleX(0)} .curtain.is-on .curtain__in > *{animation:portalIn .6s cubic-bezier(.23,1,.32,1) both} .curtain.is-on .curtain__in img{animation-delay:.6s} .curtain.is-on .curtain__t{animation-delay:.68s} .curtain.is-on .curtain__n{animation-delay:.76s} .curtain.is-on .curtain__bar{animation-delay:.8s} .curtain.is-on .curtain__bar::after{animation:portalBar .45s .84s cubic-bezier(.65,0,.35,1) forwards} @keyframes portalIn{from{opacity:0; transform:translateY(18px) scale(.96); filter:blur(6px)}} @keyframes portalBar{to{transform:scaleX(1)}} /* la persona elegida avanza; las demás se apartan hacia fuera y se apagan */ .stage.is-leaving .person{transition:opacity .45s ease, translate .7s cubic-bezier(.22,1,.36,1), scale .7s cubic-bezier(.22,1,.36,1), filter .4s ease} .stage.is-leaving[data-go="rotary"] .person--gob, .stage.is-leaving[data-go="rotaract"] .person--rdr, .stage.is-leaving[data-go="interact"] .person--rdi{scale:1.14; z-index:3} .stage.is-leaving[data-go="rotary"] .person:not(.person--gob), .stage.is-leaving[data-go="rotaract"] .person:not(.person--rdr), .stage.is-leaving[data-go="interact"] .person:not(.person--rdi){opacity:0 !important} .stage.is-leaving .picker, .stage.is-leaving .stage__act2{opacity:0 !important; transition:opacity .3s ease} /* llegada a «Nuestros clubes» */ .ch-enter{clip-path:inset(0 0 0 0); background:radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--cc) 82%, #fff) 0%, var(--cc) 45%, color-mix(in srgb, var(--cc) 70%, #000) 100%); animation:chReveal .9s .35s cubic-bezier(.77,0,.175,1) forwards} @keyframes chReveal{to{clip-path:inset(0 0 100% 0)}} .ch-enter .curtain__in > *{animation:portalOut .5s .2s cubic-bezier(.55,0,1,.45) forwards} @keyframes portalOut{to{opacity:0; transform:translateY(-28px); filter:blur(4px)}} .is-entering .ch .wrap > *{animation:chUp .9s cubic-bezier(.23,1,.32,1) both} .is-entering .ch .wrap > :nth-child(1){animation-delay:.6s} .is-entering .ch .wrap > :nth-child(2){animation-delay:.68s} .is-entering .ch .wrap > :nth-child(3){animation-delay:.76s} .is-entering .ch .wrap > :nth-child(4){animation-delay:.84s} @keyframes chUp{from{opacity:0; transform:translateY(26px)}} @media (prefers-reduced-motion: reduce){ .curtain::before, .curtain::after{transition:opacity .3s ease; clip-path:none; opacity:0} .curtain.is-on::before, .curtain.is-on::after{opacity:1} .curtain.is-on .curtain__in > *, .ch-enter .curtain__in > *, .is-entering .ch .wrap > *{animation:none} .ch-enter{animation:fadeOut .4s .2s ease forwards} @keyframes fadeOut{to{opacity:0}} } /* Estela que disipa el filtro (lienzo creado por fx.js entre la foto filtrada y el texto) */ .reveal-trail{position:absolute; inset:0; pointer-events:none} .join img.bg{z-index:-3} .join::after{z-index:-2} /* Nuestros clubes: una foto por programa que cruza al cambiar de pestaña */ .ch__bg{opacity:0; transform:scale(1.04); transition:opacity .9s cubic-bezier(.23,1,.32,1), transform 1.4s cubic-bezier(.23,1,.32,1)} .ch__bg.is-on{opacity:.18; transform:none} @media (prefers-reduced-motion: reduce){ .ch__bg{transition:opacity .3s ease; transform:none} } /* ---------- Noticias automáticas: portada (últimas + Instagram) y archivo ---------- */ .latest, .igfeed{margin-top:clamp(2.5rem, 5vw, 3.5rem)} .latest__head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; padding-bottom:.8rem; border-bottom:2px solid var(--ink)} .latest__head h3{margin:0; font-size:var(--step-2); font-weight:800; letter-spacing:-.02em} .latest__upd{font-size:.82rem; color:var(--slate)} .latest__list, .archive__list{list-style:none; margin:0; padding:0} .latest__list{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:2.5rem} .nitem{display:grid; grid-template-columns:auto 1fr; column-gap:1rem; row-gap:.2rem; padding:1rem 0; border-bottom:1px solid rgba(14,27,51,.1)} .nitem time{grid-row:1 / span 2; min-width:6.5em; font-size:.8rem; font-weight:700; color:var(--azure); padding-top:.15rem} .nitem a{color:var(--ink); font-weight:700; line-height:1.4; text-decoration:none; transition:color .2s ease} .nitem a:hover{color:var(--azure); text-decoration:underline; text-underline-offset:3px} .nitem__src{font-size:.82rem; color:var(--slate)} .nitem__src b{color:var(--cranberry)} .igfeed__grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem} .igacc{display:flex; flex-direction:column; align-items:center; gap:.8rem; padding:1.6rem 1rem; border-radius:var(--radius-sm); border:1px solid rgba(14,27,51,.1); color:var(--ink); text-decoration:none; font-weight:700; transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out)} .igacc img{height:40px; width:auto} .igacc:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(14,27,51,.1)} .igpost{position:relative; display:block; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden} .igpost img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)} .igpost span{position:absolute; left:.6rem; bottom:.6rem; padding:.25rem .6rem; border-radius:999px; font-size:.75rem; font-weight:700; color:#fff; background:rgba(0,8,24,.55)} .igpost:hover img{transform:scale(1.05)} .archive__bar{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1rem; margin-bottom:1.6rem} .archive__q{flex:1 1 280px; display:flex; align-items:center; gap:.5rem; padding:0 1rem; min-height:52px; border-radius:999px; border:1.5px solid rgba(14,27,51,.15)} .archive__q input{flex:1; border:0; outline:0; font:inherit; font-size:1rem; background:none; min-height:48px} .archive__q:focus-within, .archive__y select:focus{border-color:var(--azure); box-shadow:0 0 0 4px rgba(0,93,170,.12)} .archive__y select{min-height:52px; padding:0 1rem; border-radius:999px; border:1.5px solid rgba(14,27,51,.15); font:inherit; background:#fff} .archive__count{margin:0 0 0 auto; font-size:.86rem; color:var(--slate)} .archive__month{padding:1.6rem 0 .4rem; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--slate)} .archive__month:first-child{padding-top:0} .archive__empty{padding:2rem 0; color:var(--slate)} .archive__note{margin-top:2rem; font-size:.82rem; color:var(--slate)} @media (max-width:760px){ .latest__list{grid-template-columns:1fr} .igfeed__grid{grid-template-columns:1fr} .igacc{flex-direction:row; justify-content:flex-start; padding:1rem} .igacc img{height:30px} .archive__count{margin:0} } /* Noticias: tarjetas sin foto con fondo de marca, página de cada noticia e Instagram por pestañas */ .post.no-img{background:radial-gradient(120% 120% at 85% 0%, #1d55a8 0%, var(--royal) 50%, #0b2550 100%)} .post.no-img::before{content:""; position:absolute; right:-8%; top:-12%; width:62%; aspect-ratio:1; z-index:-1; opacity:.1; background:url("logos/rotary-s-blanco.svg") center/contain no-repeat} .post--live .post__cat{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .nart{padding:calc(var(--nav-h) + clamp(2rem, 6vh, 4rem)) 0 clamp(2rem, 5vw, 4rem)} .nart__wrap{max-width:860px} .nart__back{display:inline-flex; align-items:center; gap:.35rem; min-height:44px; color:var(--azure); font-weight:700; text-decoration:none} .nart__back:hover{text-decoration:underline; text-underline-offset:3px} .nart__loading{color:var(--slate)} .nart__meta{display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:1.2rem 0 .8rem; font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--slate)} .nart__meta span{color:var(--cranberry)} .nart__title{margin:0; font-size:clamp(2rem, 1.2rem + 3vw, 3.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.08} .nart__lede{margin:1.2rem 0 0; font-family:var(--serif); font-size:var(--step-1); line-height:1.6; color:#34405a} .nart__fig{position:relative; margin:2rem 0 0; border-radius:var(--radius); overflow:hidden; background:#E7E7E8} .nart__fig img{display:block; width:100%; max-height:560px; object-fit:cover} .nart__fig.no-img{display:none} .nart__fig figcaption{position:absolute; right:.8rem; bottom:.8rem; padding:.25rem .6rem; border-radius:999px; font-size:.72rem; color:#fff; background:rgba(0,8,24,.55)} .nart__body{margin-top:2rem; font-family:var(--serif); font-size:1.12rem; line-height:1.75; color:#1f2a40} .nart__body img{max-width:100%; height:auto; border-radius:var(--radius-sm); margin:1rem 0} .nart__body a{color:var(--azure)} .nart__credit{margin-top:2.4rem; padding:1.4rem 1.6rem; border-radius:var(--radius-sm); background:#F4F6F9; border-left:4px solid var(--gold)} .nart__credit p{margin:0 0 1rem; color:var(--slate); line-height:1.55} .nart__credit .btn--line{color:var(--ink); border-color:rgba(14,27,51,.25)} .nmore{background:#F7F8FA} .nmore__grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem} .nmore .post{min-height:260px; grid-column:auto !important; grid-row:auto !important} .nmore .post h3{font-size:1.1rem !important} .igtabs{margin-top:clamp(2.5rem, 5vw, 3.5rem)} .igtabs__follow{display:inline-flex; align-items:center; gap:.3rem; font-weight:700; color:var(--azure); text-decoration:none} .igtabs__follow .material-symbols-outlined{font-size:18px} .igtabs__tabs{display:inline-flex; gap:.3rem; padding:.3rem; margin-bottom:1rem; border-radius:999px; background:#F1F3F7} .igtabs__tabs button{display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:0 1.1rem; border:0; border-radius:999px; background:none; font:inherit; font-weight:700; color:var(--slate); cursor:pointer; transition:background .25s ease, color .25s ease, box-shadow .25s ease} .igtabs__tabs button img{height:22px; width:auto} .igtabs__tabs button[aria-selected="true"]{background:#fff; color:var(--ink); box-shadow:0 4px 14px rgba(14,27,51,.1)} .igtabs__tabs button:focus-visible{outline:2px solid var(--azure); outline-offset:2px} .igtabs__frame{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(14,27,51,.1); background:#fff; height:clamp(520px, 62vw, 760px)} .igtabs__frame iframe{display:block; width:100%; height:100%; border:0} .igtabs__wait{margin:0; padding:2rem; color:var(--slate)} @media (max-width:760px){ .nmore__grid{grid-template-columns:1fr} .igtabs__tabs{display:flex} .igtabs__tabs button{flex:1; justify-content:center; padding:0 .6rem} .igtabs__tabs button img{display:none} .igtabs__frame{height:620px} } .nart__ex{padding-left:1.2rem; border-left:3px solid rgba(14,27,51,.12)} .nart__exh{font-family:'Open Sans', sans-serif; font-size:.78rem !important; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)} .igcards{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem} .igcard{display:flex; flex-direction:column; gap:.4rem; padding:1.6rem; min-height:220px; border-radius:var(--radius); color:#fff; text-decoration:none; background:linear-gradient(150deg, var(--c1), var(--c2)); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out)} .igcard--rotary{--c1:#17458F; --c2:#0b2550} .igcard--rotaract{--c1:#D91B5C; --c2:#8f0f3b} .igcard--interact{--c1:#01B4E7; --c2:#005DAA} .igcard img{height:34px; width:auto; margin-bottom:auto} .igcard strong{font-size:1.2rem; margin-top:1.4rem} .igcard span{opacity:.85} .igcard em{font-style:normal; font-weight:700; margin-top:.6rem} .igcard:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(14,27,51,.2)} @media (max-width:760px){ .igcards{grid-template-columns:1fr} .igcard{min-height:150px} } /* Archivo de noticias en tarjetas con foto */ .archive__list{display:grid; gap:2.4rem} .nmonth .archive__month{padding:0 0 .9rem; margin:0; border-bottom:1px solid rgba(14,27,51,.1); margin-bottom:1.2rem} .ngrid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.2rem} .ncard2{display:flex; flex-direction:column; border-radius:var(--radius-sm); overflow:hidden; background:#fff; border:1px solid rgba(14,27,51,.1); color:var(--ink); text-decoration:none; transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out)} .ncard2__img{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:radial-gradient(120% 120% at 85% 0%, #1d55a8 0%, var(--royal) 50%, #0b2550 100%)} .ncard2.no-img .ncard2__img::before{content:""; position:absolute; inset:18% 25%; opacity:.18; background:url("logos/rotary-s-blanco.svg") center/contain no-repeat} .ncard2__img img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out)} .ncard2__b{display:flex; flex-direction:column; gap:.45rem; padding:1rem 1.1rem 1.2rem} .ncard2__cat{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--cranberry)} .ncard2 strong{font-size:1.06rem; line-height:1.3} .ncard2__r{font-size:.9rem; line-height:1.5; color:var(--slate)} .ncard2--big{grid-column:span 2; flex-direction:row} .ncard2--big .ncard2__img{flex:1.2; aspect-ratio:auto; min-height:300px} .ncard2--big .ncard2__b{flex:1; justify-content:center; padding:1.6rem} .ncard2--big strong{font-size:1.5rem} @media (hover:hover){ .ncard2:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(14,27,51,.12)} .ncard2:hover .ncard2__img img{transform:scale(1.05)} } .ncard2:focus-visible{outline:2px solid var(--azure); outline-offset:3px} @media (max-width:1000px){ .ngrid{grid-template-columns:repeat(2, minmax(0, 1fr))} } @media (max-width:640px){ .ngrid{grid-template-columns:1fr} .ncard2--big{grid-column:auto; flex-direction:column} .ncard2--big .ncard2__img{min-height:0; aspect-ratio:16/10} .ncard2--big strong{font-size:1.15rem} } /* ===== Tarjetas de club con la foto de su última actividad ===== */ .club--foto{position:relative; overflow:hidden; min-height:230px; color:#fff; border-color:transparent; isolation:isolate; justify-content:flex-end} .club--foto .club__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .7s var(--ease-out)} .club--foto::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, color-mix(in srgb, var(--royal) 92%, #000) 8%, color-mix(in srgb, var(--royal) 55%, transparent) 55%, transparent 100%)} .club--foto[data-t="rotaract"]::after{background:linear-gradient(to top, color-mix(in srgb, #B3124A 92%, #000) 8%, color-mix(in srgb, #B3124A 55%, transparent) 55%, transparent 100%)} .club--foto .club__type{background:rgba(255,255,255,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); margin-bottom:auto} .club--foto .club__prov{color:rgba(255,255,255,.85)} .club--foto .club__go{color:var(--gold); border-top:1px solid rgba(255,255,255,.22); padding-top:.7rem; margin-top:.4rem} .club--foto:hover .club__img{transform:scale(1.05)} .club--foto:hover{box-shadow:0 22px 48px rgba(11,37,80,.35)} /* ===== Ficha de club ===== */ .clubh{padding-bottom:5.5rem} .clubh.has-foto .ch__bg{opacity:.62; mix-blend-mode:normal} .clubh.has-foto::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, color-mix(in srgb, var(--tone) 92%, #000) 0%, color-mix(in srgb, var(--tone) 70%, transparent) 55%, transparent 100%), linear-gradient(to top, color-mix(in srgb, var(--tone) 80%, #000), transparent 60%)} .clubh__back{display:inline-flex; align-items:center; gap:.35rem; margin-bottom:1.6rem; color:rgba(255,255,255,.82); text-decoration:none; font-weight:600; font-size:.92rem; transition:color .2s, transform .25s var(--ease-out)} .clubh__back:hover{color:#fff; transform:translateX(-3px)} .clubh h1{max-width:16ch} .clubh__actions{display:flex; flex-wrap:wrap; gap:.8rem} .clubh__actions .btn{color:#fff} .clubh__actions .btn--gold{color:#000} .clubd__grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem} .cinfo{display:flex; flex-direction:column; gap:.55rem; padding:1.6rem; border-radius:var(--radius-sm); background:#fff; border:1px solid var(--silver); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out)} .cinfo:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(23,69,143,.12)} .cinfo__i{width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--azure) 10%, #fff); color:var(--azure)} .cinfo h3{margin:.3rem 0 0; font-size:1.15rem} .cinfo p{margin:0; color:var(--charcoal); overflow-wrap:anywhere} .cinfo a{color:var(--azure)} .cinfo__big{font-size:var(--step-1); font-weight:700; color:var(--ink)!important} .cinfo__next{padding:.6rem .8rem; border-radius:10px; background:color-mix(in srgb, var(--gold) 16%, #fff); font-size:.92rem} .cinfo__link{margin-top:auto; padding-top:.5rem; display:inline-flex; align-items:center; gap:.3rem; font-weight:700; font-size:.92rem; text-decoration:none} .cinfo__link + .cinfo__link{margin-top:0} .cinfo__link .material-symbols-outlined{font-size:1.05em; transition:transform .25s var(--ease-out)} .cinfo__link:hover .material-symbols-outlined{transform:translate(2px, -2px)} .cinfo__dl{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:0} .cinfo__dl dt{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--slate)} .cinfo__dl dd{margin:.1rem 0 0; font-weight:700; color:var(--ink)} .clubd__team{margin-top:var(--section)} .clubd__per{color:var(--azure)} .officers{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem} .officer{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.9rem; align-items:center; padding:1rem 1.1rem; border-radius:var(--radius-sm); background:#F5F7FA} .officer strong{grid-column:2; line-height:1.25} .officer span:last-child{grid-column:2; font-size:.85rem; color:var(--slate)} .officer__av{grid-row:1 / 3; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--royal); color:#fff; font-weight:800; font-size:.9rem; letter-spacing:.02em} .officer--lead{background:radial-gradient(120% 140% at 0% 0%, #1d55a8 0%, var(--royal) 60%, #0b2550 100%); color:#fff} .officer--lead span:last-child{color:var(--gold)} .officer--lead .officer__av{background:var(--gold); color:#000} @media (max-width:900px){.clubd__grid{grid-template-columns:1fr}} /* ===== Revistas ===== */ .mags{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, 1fr); gap:1.4rem} @media (max-width:1000px){.mags{grid-template-columns:repeat(3, 1fr)}} .mag{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:.8rem} .mag__cover{position:relative; aspect-ratio:3 / 4; border-radius:14px; overflow:hidden; padding:1.2rem; display:flex; flex-direction:column; justify-content:flex-end; gap:.35rem; color:#fff; background:radial-gradient(130% 90% at 100% 0%, #1d55a8 0%, var(--royal) 50%, #0b2550 100%); box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 14px 30px rgba(11,37,80,.22); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out)} .mag__cover::before{content:""; position:absolute; right:-28%; top:-14%; width:95%; aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle, transparent 0 18px, rgba(255,255,255,.07) 18px 19px); opacity:1; transition:transform 1.2s var(--ease-out)} .mag__cover::after{content:""; position:absolute; left:0; top:0; bottom:0; width:10px; background:linear-gradient(90deg, rgba(0,0,0,.28), transparent)} .mag__no{font-size:clamp(2.4rem, 1.6rem + 2vw, 3.2rem); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--gold)} .mag__name{font-size:.82rem; font-weight:700; line-height:1.3; max-width:16ch} .mag__ed{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--powder)} .mag__go{display:inline-flex; align-items:center; gap:.3rem; font-weight:700; color:var(--azure); font-size:.95rem} .mag:hover .mag__cover, .mag:focus-visible .mag__cover{transform:translateY(-6px) rotate(-1deg); box-shadow:0 26px 50px rgba(11,37,80,.32)} .mag:hover .mag__cover::before{transform:rotate(40deg)} .mag:focus-visible .mag__cover{outline:3px solid var(--sky); outline-offset:3px} .shelves-sec{background:radial-gradient(120% 120% at 85% 0%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%); color:#fff} .shelves-sec .section__head p{color:var(--powder)} .shelves{display:grid; gap:1.6rem} .shelf h3{margin:0 0 .7rem; font-size:1rem; display:flex; align-items:baseline; gap:.6rem} .shelf h3 small{font-weight:600; color:var(--powder); font-size:.85rem} .shelf ul{list-style:none; margin:0; padding:0 0 .4rem; display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:thin} .shelf > span{display:block; margin-top:.35rem; font-size:.8rem; color:var(--powder)} .shelf li{flex:0 0 auto; padding:.55rem .85rem; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-size:.85rem; white-space:nowrap} .shelves__cta{margin-top:2.4rem} .flipd{width:min(1100px, 100vw - 2rem); height:min(860px, 100svh - 2rem); max-width:none; max-height:none; padding:0; border:0; border-radius:var(--radius-sm); overflow:hidden; background:#0b2550; color:#fff} .flipd[open]{display:flex; flex-direction:column; animation:flipIn .45s var(--ease-out)} .flipd::backdrop{background:rgba(6,18,40,.72); backdrop-filter:blur(6px)} .flipd__bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem .7rem .7rem 1.2rem} .flipd__t{margin:0; font-size:1rem; font-weight:700} .flipd__x{all:unset; cursor:pointer; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; transition:background .2s} .flipd__x:hover, .flipd__x:focus-visible{background:rgba(255,255,255,.14)} .flipd__frame{flex:1; background:#fff} .flipd__alt{height:100%; display:grid; place-content:center; justify-items:center; gap:1rem; padding:2rem; text-align:center; background:#0b2550} .flipd__alt p{margin:0; color:var(--powder)} .flipd__frame iframe{width:100%; height:100%; border:0; display:block} @keyframes flipIn{from{opacity:0; transform:translateY(16px) scale(.98)}} @media (max-width:600px){.mags{grid-template-columns:1fr 1fr; gap:1rem} .flipd{width:100vw; height:100svh; border-radius:0}} @media (prefers-reduced-motion:reduce){.club--foto .club__img, .mag__cover, .mag__cover::before, .cinfo{transition:none} .flipd[open]{animation:none}} @media (max-width:700px){.clubh.has-foto::before{background:linear-gradient(to top, color-mix(in srgb, var(--tone) 94%, #000) 0%, color-mix(in srgb, var(--tone) 78%, transparent) 55%, color-mix(in srgb, var(--tone) 55%, transparent) 100%)}} /* ===== Ficha de club: legibilidad del encabezado con foto ===== */ .clubh.has-foto::before{content:none} .clubh .ch__bg{z-index:0} .clubh__scrim{position:absolute; inset:0; z-index:1; pointer-events:none} .clubh.has-foto .clubh__scrim{background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 90%, #000) 0%, color-mix(in srgb, var(--tone) 78%, transparent) 38%, color-mix(in srgb, var(--tone) 30%, transparent) 72%, transparent 100%), linear-gradient(to top, rgba(4,14,34,.7) 0%, rgba(4,14,34,0) 45%)} .clubh .wrap{z-index:2} .clubh__back{display:flex; width:fit-content} .clubh__eb{color:var(--gold); margin-bottom:.6rem} .clubh.has-foto h1, .clubh.has-foto .clubh__eb{text-shadow:0 2px 24px rgba(4,14,34,.45)} .clubh.has-foto .clubh__lede{color:#fff; text-shadow:0 1px 14px rgba(4,14,34,.6)} @media (max-width:700px){.clubh.has-foto .clubh__scrim{background:linear-gradient(to top, color-mix(in srgb, var(--tone) 94%, #000) 0%, color-mix(in srgb, var(--tone) 82%, transparent) 55%, color-mix(in srgb, var(--tone) 60%, transparent) 100%)}} /* ===== Ficha de club: noticias, Instagram y edición ===== */ .clubn, .clubig{margin-top:var(--section)} .clubn__grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem} .clubig__frame{border-radius:var(--radius); overflow:hidden; border:1px solid rgba(14,27,51,.1); background:#fff; height:var(--igh, 430px)} .clubig__frame iframe{display:block; width:100%; height:1200px; border:0} .clubig__frame.is-card{height:auto; border:0; background:none} .clubig__frame .igcard{min-height:160px; justify-content:flex-end} .clubig__follow{margin-top:1.2rem; color:var(--royal)} .clubig__follow:hover{background:color-mix(in srgb, var(--royal) 8%, transparent)} .clubadm{margin-top:var(--section); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.6rem; padding-bottom:0; border-top:1px solid var(--silver)} .clubadm p{margin:0; color:var(--slate); font-size:.95rem} .clubadm__btn{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; padding:.7rem 1.1rem; border-radius:999px; border:1.5px solid var(--silver); font-weight:700; font-size:.92rem; color:var(--royal); transition:border-color .2s, background .2s, transform .2s var(--ease-out)} .clubadm__btn:hover{border-color:var(--royal); background:color-mix(in srgb, var(--royal) 6%, #fff)} .clubadm__btn:active{transform:scale(.97)} .clubadm__btn:focus-visible{outline:3px solid var(--sky); outline-offset:2px} .cedit{width:min(620px, 100vw - 2rem); max-height:min(860px, 100svh - 2rem); padding:0; border:0; border-radius:var(--radius-sm); background:#fff; color:var(--ink); box-shadow:0 30px 80px rgba(6,18,40,.35)} .cedit[open]{animation:flipIn .4s var(--ease-out)} .cedit::backdrop{background:rgba(6,18,40,.6); backdrop-filter:blur(6px)} .cedit__bar{position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:.8rem .8rem .8rem 1.5rem; background:var(--royal); color:#fff} .cedit__t{margin:0; font-size:1.05rem} .cedit form{display:grid; gap:1rem; padding:1.5rem} .cedit fieldset{display:grid; gap:.9rem; margin:0; padding:0 0 1.2rem; border:0; border-bottom:1px solid var(--silver)} .cedit legend{padding:0 0 .6rem; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--azure)} .cedit label{display:grid; gap:.35rem; font-weight:600; font-size:.9rem} .cedit .uform__opt{color:var(--slate); font-weight:400} .cedit input, .cedit select{width:100%; min-height:46px; padding:.6rem .9rem; border-radius:12px; border:1.5px solid var(--silver); background:#F7F9FC; font:inherit; font-size:16px; color:var(--ink); transition:border-color .2s, box-shadow .2s} .cedit input:focus, .cedit select:focus{outline:none; border-color:var(--azure); background:#fff; box-shadow:0 0 0 4px rgba(0,93,170,.14)} .cedit__row{display:grid; grid-template-columns:1fr 1fr; gap:.9rem} .cedit__lead, .cedit__hint{margin:0; color:var(--slate); font-size:.92rem} .cedit__err{margin:0; min-height:1.2em; color:var(--cranberry); font-weight:600; font-size:.9rem} .cedit__err:empty{display:none} .cedit__actions{display:flex; flex-wrap:wrap; gap:.7rem} .cedit__out{background:transparent; color:var(--slate); border:1.5px solid var(--silver)} .cedit button[disabled]{opacity:.6; pointer-events:none} .ctoast{position:fixed; left:50%; bottom:1.5rem; z-index:120; margin:0; transform:translateX(-50%); padding:.8rem 1.2rem; border-radius:999px; background:var(--ink); color:#fff; font-weight:600; font-size:.92rem; box-shadow:0 14px 40px rgba(6,18,40,.3); animation:toastIn .35s var(--ease-out); transition:opacity .4s, transform .4s var(--ease-out); max-width:calc(100vw - 2rem); text-align:center} .ctoast.is-out{opacity:0; transform:translate(-50%, 10px)} @keyframes toastIn{from{opacity:0; transform:translate(-50%, 12px)}} @media (max-width:900px){.clubn__grid{grid-template-columns:1fr}} @media (max-width:600px){.cedit__row{grid-template-columns:1fr} .cedit{width:100vw; max-height:100svh; border-radius:0}} @media (prefers-reduced-motion:reduce){.cedit[open], .ctoast{animation:none}} .clubn__grid .post:nth-child(n){grid-column:auto; grid-row:auto; min-height:320px} .clubn__grid .post:nth-child(1) h3{font-size:inherit} .cedit form[hidden]{display:none} /* ===== Ficha de club como panel ===== */ .clubh{padding-bottom:6.5rem} .clubh__in{display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:2.5rem; align-items:end} .clubh h1{margin:.2rem 0 1rem; max-width:14ch; font-size:clamp(2.6rem, 1.2rem + 5vw, 5.8rem); line-height:.95; text-wrap:balance} .clubh__chips{list-style:none; margin:0 0 1.6rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem} .chip{display:inline-flex; align-items:center; gap:.3rem; padding:.42rem .85rem; border-radius:999px; font-size:.86rem; font-weight:700; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24)} .clubh__chips .chip{height:44px; line-height:1} .chip .material-symbols-outlined{font-size:1.05em} .chip--tipo{background:var(--gold); border-color:var(--gold); color:#000} .cmeet{position:relative; padding:1.35rem; border-radius:22px; background:#fff; color:var(--ink); box-shadow:0 2px 6px rgba(4,14,34,.12), 0 30px 70px rgba(4,14,34,.38); animation:meetIn .9s .15s var(--ease-out) backwards} @keyframes meetIn{from{opacity:0; transform:translateY(24px); filter:blur(6px)}} .cmeet__k{display:flex; align-items:center; gap:.4rem; margin:0 0 1rem; font-size:.85rem; font-weight:700; color:var(--slate)} .cmeet__k .material-symbols-outlined{font-size:1.15rem; color:var(--azure)} .cmeet__in{margin-left:auto; padding:.2rem .6rem; border-radius:999px; background:color-mix(in srgb, var(--gold) 22%, #fff); color:#6b4500; font-size:.78rem} .cmeet__when{display:flex; align-items:center; gap:1rem} .cmeet__cal{display:grid; place-items:center; flex:0 0 auto; width:66px; padding:.45rem 0 .5rem; border-radius:14px; background:var(--royal); color:#fff; line-height:1} .cmeet__cal span{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--powder)} .cmeet__cal b{font-size:2rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-top:.15rem} .cmeet__when strong{display:block; font-size:1.3rem; text-transform:capitalize; letter-spacing:-.01em} .cmeet__time{display:block; color:var(--slate); font-size:.92rem; margin-top:.1rem} .cmeet__where{margin:1rem 0 0; padding-top:1rem; border-top:1px solid var(--silver); font-size:.9rem; color:var(--charcoal)} .cmeet__tbd{margin:0; font-size:1.15rem; font-weight:700} .cmeet__acts{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem} .cmeet__acts a{display:inline-flex; align-items:center; gap:.35rem; padding:.55rem .85rem; border-radius:999px; background:color-mix(in srgb, var(--azure) 9%, #fff); color:var(--royal); font-weight:700; font-size:.85rem; text-decoration:none; transition:background .2s, transform .2s var(--ease-out)} .cmeet__acts a:hover{background:color-mix(in srgb, var(--azure) 16%, #fff)} .cmeet__acts a:active{transform:scale(.97)} .cmeet__acts .material-symbols-outlined{font-size:1.1rem} .ch + section.cdash{background:#F2F4F8; padding:clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 var(--section)} .cstats{display:flex; flex-wrap:wrap; margin:0 0 1.2rem; padding:0; border-radius:22px; background:#fff; border:1px solid rgba(14,27,51,.06)} .cstats div{flex:1 1 160px; padding:1.1rem 1.4rem} .cstats div + div{border-left:1px solid var(--silver)} .cstats dd{margin:0; font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; color:var(--royal); font-variant-numeric:tabular-nums} .cstats dt{font-size:.85rem; color:var(--slate); font-weight:600} .cgrid{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:1.2rem; align-items:start} .cpanel{padding:1.5rem; border-radius:24px; background:#fff; border:1px solid rgba(14,27,51,.06); box-shadow:0 1px 2px rgba(14,27,51,.04), 0 14px 34px rgba(14,27,51,.06)} .cpanel[hidden]{display:none} .cpanel__head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.1rem} .cpanel__head h2{margin:0; font-size:1.35rem; font-weight:800; letter-spacing:-.02em} .cpanel__meta, .cpanel__src{font-size:.85rem; color:var(--slate)} .cpanel__src{margin:1rem 0 0} .cpanel__more, .cig__follow{display:inline-flex; align-items:center; gap:.2rem; font-weight:700; font-size:.9rem; color:var(--azure); text-decoration:none} .cpanel__more:hover, .cig__follow:hover{text-decoration:underline; text-underline-offset:3px} .cig__follow .material-symbols-outlined{font-size:1.05rem} .cig{grid-column:span 8} .ccontact{grid-column:span 4} .cteam{grid-column:span 7} .cnews{grid-column:span 5} .cgrid:not(:has(.cig:not([hidden]))) .ccontact, .cgrid:not(:has(.cnews:not([hidden]))) .cteam{grid-column:span 12} .cgrid:not(:has(.cteam:not([hidden]))) .cnews{grid-column:span 12} .cgrid:not(:has(.cig:not([hidden]))) .ccontact .ccontact__list{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:.4rem} /* Instagram */ .cig__who{display:flex; align-items:center; gap:.75rem; margin:-.2rem 0 1rem} .cig__who img{width:44px; height:44px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--gold)} .cig__who strong{display:block; line-height:1.2} .cig__who span span{font-size:.85rem; color:var(--slate)} .cig__grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.6rem} .igp{position:relative; display:block; aspect-ratio:1; border-radius:16px; overflow:hidden; background:var(--powder); color:#fff; text-decoration:none; isolation:isolate} .igp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; transition:transform .6s var(--ease-out)} .igp__badge{position:absolute; top:.5rem; right:.5rem; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(4,14,34,.45)} .igp__badge .material-symbols-outlined{font-size:1.05rem} .igp__over{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:.4rem; padding:.8rem; background:linear-gradient(to top, rgba(4,14,34,.88) 0%, rgba(4,14,34,.35) 55%, rgba(4,14,34,0) 100%); opacity:0; transition:opacity .3s var(--ease-out)} .igp__txt{font-size:.8rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden} .igp__meta{display:flex; align-items:center; gap:.25rem; font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums} .igp__meta .material-symbols-outlined{font-size:1rem; margin-left:.35rem} .igp__meta .material-symbols-outlined:first-child{margin-left:0} .igp__meta time{margin-left:auto; font-weight:600; opacity:.85} .igp:hover img, .igp:focus-visible img{transform:scale(1.06)} .igp:hover .igp__over, .igp:focus-visible .igp__over{opacity:1} .igp:focus-visible{outline:3px solid var(--sky); outline-offset:2px} @media (hover:none){.igp__over{opacity:1; background:linear-gradient(to top, rgba(4,14,34,.8) 0%, rgba(4,14,34,0) 50%)} .igp__txt{display:none}} .cig__note{margin:.9rem 0 0; font-size:.85rem; color:var(--slate)} /* Contacto */ .ccontact{background:radial-gradient(130% 100% at 100% 0%, #1d55a8 0%, var(--royal) 50%, #0b2550 100%); border:0; color:#fff} .ccontact h2{color:#fff} .ccontact__list{list-style:none; margin:0; padding:0; display:grid; gap:.4rem} .crow{display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem; border-radius:14px; color:#fff; text-decoration:none; transition:background .2s, transform .2s var(--ease-out)} .crow:hover{background:rgba(255,255,255,.08)} .crow:active{transform:scale(.98)} .crow:focus-visible{outline:2px solid var(--gold); outline-offset:2px} .crow__i{display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.12)} .crow__t{flex:1; min-width:0} .crow__t b{display:block; font-size:.95rem} .crow__t span{display:block; font-size:.84rem; color:var(--powder); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .crow > .material-symbols-outlined{font-size:1.1rem; opacity:.6; transition:transform .25s var(--ease-out), opacity .2s} .crow:hover > .material-symbols-outlined{opacity:1; transform:translate(2px, -2px)} .crow--main{background:var(--gold); color:#000; margin-bottom:.3rem} .crow--main:hover{background:#ffb836} .crow--main .crow__i{background:rgba(0,0,0,.1)} .crow--main .crow__t span{color:rgba(0,0,0,.65)} /* Directiva */ .cteam__lead{display:flex; align-items:center; gap:1rem; padding:1rem; border-radius:18px; background:color-mix(in srgb, var(--azure) 7%, #fff); margin-bottom:.6rem} .cteam__lead strong{display:block; font-size:1.1rem; line-height:1.25} .cteam__lead span span{color:var(--azure); font-weight:700; font-size:.88rem} .cteam__av{display:grid; place-items:center; flex:0 0 auto; width:58px; height:58px; border-radius:50%; background:var(--gold); color:#000; font-weight:800; font-size:1.05rem} .cteam__av--s{width:38px; height:38px; font-size:.8rem; background:color-mix(in srgb, var(--royal) 10%, #fff); color:var(--royal)} .cteam__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; column-gap:1.4rem} .cteam__list li{display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--silver); min-width:0} .cteam__list strong{display:block; font-size:.92rem; line-height:1.25} .cteam__list span span{display:block; font-size:.8rem; color:var(--slate)} /* Noticias */ .cnews__list{list-style:none; margin:0; padding:0; display:grid; gap:.3rem} .cnew{display:flex; gap:.9rem; align-items:center; padding:.55rem; margin:0 -.55rem; border-radius:14px; color:var(--ink); text-decoration:none; transition:background .2s} .cnew:hover{background:#F2F4F8} .cnew__img{flex:0 0 auto; width:92px; aspect-ratio:4 / 3; border-radius:10px; overflow:hidden; background:radial-gradient(120% 120% at 85% 0%, #1d55a8 0%, var(--royal) 60%)} .cnew__img img{width:100%; height:100%; object-fit:cover; display:block} .cnew__t span{display:block; font-size:.78rem; font-weight:700; color:var(--azure)} .cnew__t strong{font-size:.95rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden} .cdash .clubadm{margin-top:2rem; padding-left:0; padding-right:0} @media (max-width:1000px){ .clubh__in{grid-template-columns:1fr; gap:1.6rem} .cmeet{max-width:440px} .cgrid > .cpanel{grid-column:1 / -1} .ccontact{order:-1} } @media (max-width:600px){ .clubh{padding-bottom:5rem} .cpanel{padding:1.2rem; border-radius:20px} .cig__grid{grid-template-columns:1fr 1fr} .cteam__list{grid-template-columns:1fr} .cstats div{flex-basis:45%; padding:.9rem 1rem} .cstats div + div{border-left:0} .cstats div:nth-child(even){border-left:1px solid var(--silver)} .cstats div:nth-child(n+3){border-top:1px solid var(--silver)} } @media (prefers-reduced-motion:reduce){.cmeet{animation:none} .igp img, .crow{transition:none}} .cpanel__meta, .cpanel__src, .cmeet__k, .cmeet__time, .cig__note, .cig__who span span, .cstats dt, .cteam__list span span, .cdash .clubadm p{color:#53657A} .cmeet__place{display:flex; align-items:flex-start; gap:.55rem; margin:1rem 0 0; padding:.8rem .9rem; border-radius:14px; background:color-mix(in srgb, var(--gold) 14%, #fff)} .cmeet__place .material-symbols-outlined{color:#a86a00; font-size:1.35rem; margin-top:.05rem; font-variation-settings:'FILL' 1} .cmeet__place b{display:block; font-size:1.08rem; line-height:1.3; color:var(--ink)} .cmeet__place span span{display:block; font-size:.78rem; font-weight:700; color:#7a5200; margin-top:.1rem} .cig__live{grid-column:1 / -1; height:calc(150px + 25vw); max-height:560px; border-radius:16px; overflow:hidden; border:1px solid var(--silver)} .cig__live iframe{width:100%; height:1100px; border:0; display:block} .cig__live .igcard{min-height:160px; height:100%; justify-content:flex-end} /* ===== Proyectos del club ===== */ .cproj{grid-column:1 / -1} .cproj__grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem} .cproj__empty{grid-column:1 / -1; padding:2rem; text-align:center; color:#53657A; border:1.5px dashed var(--silver); border-radius:18px} .pcard{all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:flex; flex-direction:column; justify-content:flex-end; width:100%; aspect-ratio:4 / 5; border-radius:22px; overflow:hidden; color:#fff; isolation:isolate; background:var(--royal); box-shadow:0 1px 2px rgba(14,27,51,.08), 0 16px 36px rgba(14,27,51,.14); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); animation:pcardIn .8s var(--d, 0ms) var(--ease-out) backwards} @keyframes pcardIn{from{opacity:0; transform:translateY(28px) scale(.97)}} .pcard__media{position:absolute; inset:0; z-index:-2} .pcard__media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s var(--ease-out), filter .6s var(--ease-out)} .pcard::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(8,25,58,.96) 0%, rgba(11,37,80,.78) 38%, rgba(11,37,80,.15) 70%, rgba(11,37,80,0) 100%); transition:opacity .5s} .pcard__tags{position:absolute; top:.9rem; left:.9rem; right:.9rem; display:flex; gap:.4rem; flex-wrap:wrap} .pcard__state, .pcard__ej{padding:.3rem .65rem; border-radius:999px; font-size:.74rem; font-weight:800; letter-spacing:.02em; background:rgba(255,255,255,.92); color:var(--royal)} .pcard__state[data-e="Completado"]{background:#e3f6ee; color:#0b6b48} .pcard__ej{background:var(--gold); color:#000} .pcard__body{display:flex; flex-direction:column; gap:.45rem; padding:1.3rem} .pcard__area{font-size:.76rem; font-weight:700; color:var(--gold)} .pcard__t{font-size:clamp(1.25rem, 1rem + .7vw, 1.55rem); line-height:1.15; letter-spacing:-.02em} .pcard__r{font-size:.9rem; line-height:1.45; color:rgba(255,255,255,.86); opacity:0} .pcard__nums{font-size:.82rem; color:rgba(255,255,255,.8)} .pcard__nums b{color:#fff; font-variant-numeric:tabular-nums} .pcard__go{display:inline-flex; align-items:center; gap:.3rem; margin-top:.2rem; font-weight:800; font-size:.9rem; color:var(--gold); opacity:.0; transform:translateY(8px); transition:opacity .35s, transform .45s var(--ease-out)} .pcard__go .material-symbols-outlined{font-size:1.1rem; transition:transform .4s var(--ease-out)} .pbar{display:block; height:6px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden} .pbar i{display:block; height:100%; width:var(--p); border-radius:inherit; background:linear-gradient(90deg, var(--gold), #ffd166); transform-origin:left; animation:pbarIn 1.2s calc(var(--d, 0ms) + .3s) var(--ease-out) backwards} @keyframes pbarIn{from{transform:scaleX(0)}} @media (hover:hover){ .pcard:hover{transform:translateY(-8px); box-shadow:0 2px 4px rgba(14,27,51,.08), 0 30px 60px rgba(14,27,51,.28)} .pcard:hover .pcard__media img{transform:scale(1.08); filter:saturate(1.15)} .pcard:hover .pcard__r{opacity:1} .pcard:hover .pcard__go{opacity:1; transform:none} .pcard:hover .pcard__go .material-symbols-outlined{transform:translateX(4px)} } .pcard__r{max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out), opacity .4s} @media (hover:hover){.pcard:hover .pcard__r{max-height:6em}} @media (hover:none){.pcard__go{opacity:1; transform:none}} .pcard:focus-visible{outline:3px solid var(--sky); outline-offset:3px} .pcard:focus-visible .pcard__go{opacity:1; transform:none} .pcard:active{transform:scale(.985)} /* vista del proyecto */ .pview{width:100vw; height:100svh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#fff; color:var(--ink); overflow:hidden} .pview::backdrop{background:rgba(6,18,40,.5)} .pview__in{height:100%; overflow-y:auto; overscroll-behavior:contain} .pview__x{all:unset; cursor:pointer; position:fixed; top:1rem; right:1rem; z-index:3; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--ink); box-shadow:0 6px 20px rgba(4,14,34,.25); transition:transform .25s var(--ease-out)} .pview__x:hover{transform:rotate(90deg)} .pview__x:focus-visible{outline:3px solid var(--sky); outline-offset:2px} .pv__hero{position:relative; height:min(68svh, 640px); min-height:380px; display:flex; align-items:flex-end; color:#fff; isolation:isolate; overflow:hidden; background:var(--royal)} .pv__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2} .pv__shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(6,20,48,.94) 0%, rgba(11,37,80,.55) 45%, rgba(11,37,80,.05) 80%)} .pv__head{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter) clamp(2rem, 1.5rem + 2vw, 3.5rem)} .pv__club{margin:0 0 .6rem; font-weight:700; color:var(--powder)} .pv__club b{color:var(--gold)} .pv__t{margin:0; max-width:18ch; font-size:clamp(2.2rem, 1.2rem + 4vw, 4.8rem); line-height:.98; letter-spacing:-.035em; font-weight:800; text-wrap:balance} .pv__chips{list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:1.2rem 0 0; padding:0} .pv__chips li{padding:.4rem .8rem; border-radius:999px; font-size:.84rem; font-weight:700; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26)} .pv__chips li:first-child{background:var(--gold); border-color:var(--gold); color:#000} .pv__body{max-width:var(--max); margin:0 auto; padding:clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--gutter) 5rem; display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:clamp(2rem, 1rem + 3vw, 4rem); align-items:start} .pv__body > *{animation:pvIn .7s .25s var(--ease-out) backwards} .pv__body > aside{animation-delay:.35s} @keyframes pvIn{from{opacity:0; transform:translateY(22px)}} .pv__main{grid-column:1; grid-row:1} .pv__fund{grid-column:2; grid-row:1; position:sticky; top:1.5rem; padding:1.5rem; border-radius:24px; background:radial-gradient(130% 100% at 100% 0%, #1d55a8 0%, var(--royal) 50%, #0b2550 100%); color:#fff; box-shadow:0 24px 60px rgba(11,37,80,.3)} .pv__pct{margin:0 0 .7rem; font-size:.95rem; color:var(--powder)} .pv__pct b{display:block; font-size:3.2rem; line-height:1; letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums} .pbar--big{height:10px} .pv__nums{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:1.1rem 0 0} .pv__nums dt{font-size:.78rem; color:var(--powder); font-weight:600} .pv__nums dd{margin:.1rem 0 0; font-weight:800; font-size:1.1rem; font-variant-numeric:tabular-nums} .pv__ben{display:flex; align-items:center; gap:.6rem; margin:1.2rem 0 0; padding:.8rem; border-radius:14px; background:rgba(255,255,255,.08)} .pv__ben .material-symbols-outlined{color:var(--gold)} .pv__donar{width:100%; justify-content:center; margin-top:1.3rem; font-size:1.05rem; padding:1rem} .pv__note{margin:.7rem 0 0; font-size:.82rem; color:var(--powder); text-align:center} .pv__lead{margin:0 0 2rem; font-size:clamp(1.2rem, 1rem + .6vw, 1.5rem); line-height:1.45; font-weight:600; max-width:60ch} .pv__main h3{display:flex; align-items:center; gap:.5rem; margin:2.2rem 0 .8rem; font-size:1.25rem; letter-spacing:-.01em} .pv__main h3 .material-symbols-outlined{color:var(--azure)} .pv__main p{max-width:68ch; line-height:1.65; color:var(--charcoal)} .pv__acts{list-style:none; counter-reset:a; margin:0; padding:0; display:grid; gap:.6rem; max-width:68ch} .pv__acts li{counter-increment:a; position:relative; display:flex; gap:.9rem; align-items:flex-start; padding:.9rem 1rem; border-radius:14px; background:#F2F4F8; line-height:1.45} .pv__acts li::before{content:counter(a); flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--royal); color:#fff; font-weight:800; font-size:.85rem} .pv__gal{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:.6rem} .pv__gal img{width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:14px; display:block} .pv__ej{margin-top:2rem !important; padding:1rem 1.1rem; border-radius:14px; background:color-mix(in srgb, var(--gold) 16%, #fff); color:#5c3d00 !important; font-size:.92rem} ::view-transition-group(p-img), ::view-transition-group(p-title){animation-duration:.6s; animation-timing-function:cubic-bezier(.22,1,.36,1)} ::view-transition-old(root), ::view-transition-new(root){animation-duration:.35s} ::view-transition-old(p-title), ::view-transition-new(p-title){height:auto} /* donar */ .pdon{width:min(460px, 100vw - 2rem); padding:0; border:0; border-radius:24px; background:#fff; color:var(--ink); box-shadow:0 30px 80px rgba(6,18,40,.4)} .pdon[open]{animation:flipIn .4s var(--ease-out)} .pdon::backdrop{background:rgba(6,18,40,.55); backdrop-filter:blur(4px)} .pdon__in{position:relative; padding:1.8rem 1.5rem 1.5rem; text-align:center} .pdon__x{all:unset; cursor:pointer; position:absolute; top:.7rem; right:.7rem; width:40px; height:40px; display:grid; place-items:center; border-radius:50%} .pdon__x:hover{background:#F2F4F8} .pdon__i{display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%; background:color-mix(in srgb, var(--gold) 22%, #fff); color:#a86a00} .pdon__i .material-symbols-outlined{font-size:2rem; font-variation-settings:'FILL' 1} .pdon h2{margin:.8rem 0 .5rem; font-size:1.4rem; letter-spacing:-.02em} .pdon p{margin:0 auto; max-width:36ch; color:#53657A; line-height:1.5} .pdon__ops{display:grid; gap:.5rem; margin-top:1.3rem; text-align:left} .pdon .crow{color:var(--ink); background:#F2F4F8} .pdon .crow:hover{background:#e8ecf3} .pdon .crow__i{background:#fff} .pdon .crow__t span{color:#53657A} .pdon .crow--main{background:var(--gold); color:#000} .pdon .crow--main:hover{background:#ffb836} .pdon .crow--main .crow__i{background:rgba(0,0,0,.1)} /* gestión en «Editar» */ .cedit__tabs{display:flex; gap:.3rem; margin:1rem 1.5rem 0; padding:.3rem; border-radius:999px; background:#F2F4F8} .cedit__tabs[hidden], .cedit__projs[hidden], .pman[hidden], .pform[hidden]{display:none} .cedit__tabs button{all:unset; cursor:pointer; flex:1; text-align:center; padding:.55rem .8rem; border-radius:999px; font-weight:700; font-size:.9rem; color:#53657A; transition:background .2s, color .2s} .cedit__tabs button[aria-selected="true"]{background:#fff; color:var(--royal); box-shadow:0 1px 3px rgba(14,27,51,.12)} .cedit__tabs button:focus-visible{outline:2px solid var(--sky)} .pman{display:grid; gap:1rem; padding:1.5rem} .pman__list{list-style:none; margin:0; padding:0; display:grid; gap:.5rem} .pman__list li{display:flex; align-items:center; gap:.8rem; padding:.55rem; border-radius:14px; background:#F7F9FC; border:1px solid var(--silver)} .pman__list img, .pman__ph{width:56px; height:56px; border-radius:10px; object-fit:cover; flex:0 0 auto; background:var(--powder)} .pman__t{flex:1; min-width:0} .pman__t strong{display:block; font-size:.95rem; line-height:1.25} .pman__t span{font-size:.8rem; color:#53657A} .pman__b{all:unset; cursor:pointer; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; color:var(--royal)} .pman__b:hover{background:#fff} .pman__b--del{color:var(--cranberry)} .pman__b:focus-visible{outline:2px solid var(--sky)} .pman__new{justify-self:start} .pform__thumbs{list-style:none; margin:0 0 .6rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem} .pform__thumbs li{position:relative; width:84px; height:84px} .pform__thumbs img{width:100%; height:100%; object-fit:cover; border-radius:10px; display:block} .pform__thumbs button{all:unset; cursor:pointer; position:absolute; top:-6px; right:-6px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff} .pform__thumbs button .material-symbols-outlined{font-size:.95rem} .pform__thumbs span{position:absolute; left:4px; bottom:4px; padding:.1rem .4rem; border-radius:6px; background:var(--gold); color:#000; font-size:.65rem; font-weight:800} .pform__add{display:inline-flex !important; grid-auto-flow:column; align-items:center; gap:.4rem !important; cursor:pointer; padding:.6rem .9rem; border-radius:12px; border:1.5px dashed var(--azure); color:var(--azure); font-weight:700; width:fit-content} .pform__add input{position:absolute; width:1px; height:1px; opacity:0} .pform__add:focus-within{outline:2px solid var(--sky)} .cedit textarea{width:100%; padding:.6rem .9rem; border-radius:12px; border:1.5px solid var(--silver); background:#F7F9FC; font:inherit; font-size:16px; color:var(--ink); resize:vertical} .cedit textarea:focus{outline:none; border-color:var(--azure); background:#fff; box-shadow:0 0 0 4px rgba(0,93,170,.14)} @media (max-width:1000px){.cproj__grid{grid-template-columns:1fr 1fr} .pv__body{grid-template-columns:1fr} .pv__fund{grid-column:1; grid-row:auto; position:static} .pv__main{grid-row:auto}} @media (max-width:600px){ .cproj__grid{grid-template-columns:1fr} .pcard{aspect-ratio:5 / 4} .pv__hero{height:58svh; min-height:340px} .pdon{width:100vw; max-width:none; margin:auto 0 0; border-radius:24px 24px 0 0} } @media (prefers-reduced-motion:reduce){.pcard, .pbar i, .pv__body > *, .pdon[open]{animation:none} .pcard, .pcard__media img{transition:none}} /* el panel no se estira con textos largos (direcciones, correos) */ .cgrid > .cpanel, .ccontact__list li, .crow{min-width:0} .crow__t span{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical} /* Rotaract: mismo panel, en su color */ html[data-prog="rotaract"]{--tone-p:#B3124A; --tone-p2:#D91B5C; --tone-d:#5e0a29} html[data-prog="rotaract"] .ccontact, html[data-prog="rotaract"] .pv__fund{background:radial-gradient(130% 100% at 100% 0%, var(--tone-p2) 0%, var(--tone-p) 50%, var(--tone-d) 100%)} html[data-prog="rotaract"] .cmeet__cal, html[data-prog="rotaract"] .pv__acts li::before{background:var(--tone-p)} html[data-prog="rotaract"] .cstats dd, html[data-prog="rotaract"] .cteam__lead span span, html[data-prog="rotaract"] .pv__main h3 .material-symbols-outlined, html[data-prog="rotaract"] .cpanel__more, html[data-prog="rotaract"] .cig__follow, html[data-prog="rotaract"] .cnew__t span{color:var(--tone-p)} html[data-prog="rotaract"] .cteam__lead{background:color-mix(in srgb, var(--tone-p2) 8%, #fff)} html[data-prog="rotaract"] .cteam__av--s{background:color-mix(in srgb, var(--tone-p2) 12%, #fff); color:var(--tone-p)} html[data-prog="rotaract"] .cmeet__acts a{background:color-mix(in srgb, var(--tone-p2) 9%, #fff); color:var(--tone-p)} html[data-prog="rotaract"] .pcard, html[data-prog="rotaract"] .pv__hero{background:var(--tone-p)} html[data-prog="rotaract"] .pcard::after{background:linear-gradient(to top, rgba(60,6,26,.96) 0%, rgba(120,10,50,.78) 38%, rgba(120,10,50,.15) 70%, transparent 100%)} html[data-prog="rotaract"] .pv__shade{background:linear-gradient(to top, rgba(60,6,26,.94) 0%, rgba(120,10,50,.55) 45%, rgba(120,10,50,.05) 80%)} html[data-prog="interact"] .ccontact, html[data-prog="interact"] .pv__fund{background:radial-gradient(130% 100% at 100% 0%, #0a8fd0 0%, var(--azure) 50%, #003a6b 100%)} .cig__live:has(.igcard){height:auto; border:0} .cig__live .igcard{min-height:0; padding:1.2rem 1.4rem; flex-direction:row; align-items:center; justify-content:space-between; gap:1rem; border-radius:16px} /* ===== Portada: noticias al final (orden: proyectos → gobernación → juventud → noticias → únete) ===== */ /* proyectos (royal liso) funde con la gobernación sin costura */ .projects + .govx{background:linear-gradient(to bottom, var(--royal) 0, rgba(23,69,143,0) 280px), radial-gradient(110% 80% at 72% 45%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%)} /* noticias: hoja clara que sube sobre la escena de Juventud */ .news.sheet-after{background:#fff; padding-bottom:calc(var(--section) + 40px)} /* el cierre entra como otra hoja sobre las noticias */ .news + .join{margin-top:-40px; border-radius:32px 32px 0 0; box-shadow:0 -24px 50px rgba(11,37,80,.18)} @media (max-width:760px){ .news.sheet-after{border-radius:26px 26px 0 0} .news + .join{margin-top:-28px; border-radius:26px 26px 0 0} .news.sheet-after{padding-bottom:calc(var(--section) + 28px)} } .igtabs__frame.is-grid{height:auto; border:0; background:none; border-radius:0; overflow:visible} .igtabs__frame.is-grid .igcard{min-height:160px} @media (max-width:600px){.igtabs__frame .cig__grid{grid-template-columns:1fr 1fr}} /* ---------- Botones de marca (pautas de identidad visual de Rotary) ---------- Primario: relleno, al pasar el cursor se invierte. Secundario: con borde, al pasar el cursor se rellena. Azure en Rotary, cranberry en Rotaract. */ .btn.btn--pri, .btn.btn--sec{--btn-c:#019FCB; border:1px solid var(--btn-c); box-shadow:none; transition:transform .18s var(--ease-out), background .2s, color .2s, border-color .2s} html[data-prog="rotaract"] .btn.btn--pri, html[data-prog="rotaract"] .btn.btn--sec{--btn-c:#C10042} .btn.btn--pri{background:var(--btn-c); color:#fff} .btn.btn--pri:hover{background:#fff; color:var(--btn-c)} .btn.btn--sec{background:#fff; color:var(--btn-c)} .btn.btn--sec:hover{background:var(--btn-c); color:#fff} .btn.btn--pri:disabled, .btn.btn--pri[aria-disabled="true"]{background:#BCBDC0; border-color:#BCBDC0; color:#fff; cursor:not-allowed} .btn.btn--sec:disabled, .btn.btn--sec[aria-disabled="true"]{background:#fff; border-color:#BCBDC0; color:#BCBDC0; cursor:not-allowed} /* En la tarjeta de reunión, los secundarios ganan a los estilos de enlace de .cmeet__acts */ html .cmeet__acts a.btn--sec{min-height:40px; padding:0 1rem; font-size:.85rem; background:#fff; color:var(--btn-c)} html .cmeet__acts a.btn--sec:hover{background:var(--btn-c); color:#fff} /* Ficha del club en WordPress: foto del funcionario y texto «sobre el club» */ .cteam__av img{width:100%; height:100%; border-radius:50%; object-fit:cover} .cabout{grid-column:1 / -1} .clubh strong, .cdash strong{font-weight:700} .clubadm__acts{display:flex; flex-wrap:wrap; gap:.6rem} /* Sobre el panel de color del proyecto, el botón de donar es el secundario; al rellenarse lo delimita un borde blanco */ .pv__fund .btn.btn--sec:hover{border-color:#fff} /* Impreza pone overflow:hidden a .l-canvas por debajo de 900px: eso crea un contenedor de scroll y rompe las escenas fijas (position:sticky) de la portada, el viaje y juventud en móvil. clip recorta igual sin romperlas. */ @media (max-width:899px){ .l-canvas{overflow:visible; overflow-x:clip} } /* Portadas de página: si el titular no cabe en la altura de la portada (pantallas bajas o con zoom), la portada crece en lugar de meter el texto debajo de la barra fija */ .phero{display:flex; height:auto; min-height:max(88svh, 560px)} .jhero{display:flex; height:auto; min-height:max(100svh, 620px)} .phero__content, .jhero__content{position:relative; inset:auto; flex:1; width:100%; padding-top:calc(var(--nav-h) + clamp(2rem, 7vh, 4.5rem))} @media (max-width:760px){ .phero{min-height:max(78svh, 560px)} } /* Página de la Gobernación: la semblanza abre la página, debajo de la barra fija */ main > .govx:first-child{padding-top:var(--nav-h)} /* En escritorio, como en los capítulos: el texto centrado bajo la barra y la foto apoyada abajo con aire arriba */ @media (min-width:861px){ main > .govx:first-child{padding-top:0} main > .govx:first-child .govx__intro{min-height:100svh; padding-top:calc(var(--nav-h) + 2svh)} main > .govx:first-child .govx__hero{height:min(84svh, 940px)} main > .govx:first-child .govx__name{font-size:clamp(2.4rem, min(1.2rem + 3.6vw, 9svh), 4.6rem)} } @media (min-width:861px) and (max-height:760px){ main > .govx:first-child .govx__motto{margin-top:1rem} main > .govx:first-child .govx__lead{margin-top:.9rem} main > .govx:first-child .govx__more{margin-top:1.2rem} } /* «¿Preguntas?» minimizado en el lugar del antiguo botón de WhatsApp (sobre el «volver arriba» del tema); al pasar el cursor o con el foco del teclado se expande hacia la izquierda */ .assist{bottom:calc(max(16px, env(safe-area-inset-bottom)) + 62px)} .chatfab{gap:0; padding:0 15px; transition:gap .35s var(--ease-out), padding .35s var(--ease-out)} .chatfab__txt{max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transition:max-width .35s var(--ease-out), opacity .2s} @media (hover:hover){ .chatfab:hover, .chatfab:focus-visible{gap:.5rem; padding:0 1.15rem 0 1rem} .chatfab:hover .chatfab__txt, .chatfab:focus-visible .chatfab__txt{max-width:8em; opacity:1} } .bot{height:min(580px, calc(100svh - 190px))} @media (max-width:600px){ .bot{bottom:calc(max(16px, env(safe-area-inset-bottom)) + 126px); height:min(78svh, 620px, calc(100svh - 160px))} } /* Botón «volver arriba» del tema: redondo y centrado debajo de «¿Preguntas?» */ .w-toplink{margin:0 !important; right:max(20px, env(safe-area-inset-right)) !important; bottom:max(16px, env(safe-area-inset-bottom)); width:44px !important; height:44px !important; line-height:44px !important; border-radius:50% !important; background:rgba(14,27,51,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(4,14,34,.25)} .w-toplink:not(.w-btn) i{font-size:1.25em} /* Carruseles horizontales: el gesto vertical siempre mueve la página. Las tarjetas aún sin revelar (desplazadas por su animación de entrada) les daban unos píxeles de scroll vertical propio y se cortaban por arriba al deslizar. */ .shelf ul, .bot__chips{overflow-y:hidden} @media (max-width:1099px){ .causes__track{overflow-y:hidden} } @media (max-width:860px){ .govx__chapters, .govx__teasers{overflow-y:hidden} } @media (max-width:560px){ #accion .news__grid{overflow-y:hidden} } /* Proyectos en móvil: las etiquetas van pegadas al texto; home.js ajusta el alto a la tarjeta más alta */ @media (max-width:760px){ .slide__how{margin-top:.2rem} } /* Gobernación en móvil: todo centrado; el gobernador y su esposa de medio cuerpo, fundidos con el fondo por abajo; sin el lema ni los momentos destacados (siguen dentro de la semblanza) */ @media (max-width:860px){ .govx__hero{height:auto; aspect-ratio:10 / 9; overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent 99%); mask-image:linear-gradient(to bottom, #000 70%, transparent 99%)} .govx__hero img{top:0; bottom:auto; width:100%; height:auto} .govx__hero .govx__floor{display:none} .govx__head{margin-top:-2.2rem; text-align:center} .govx__name{margin-inline:auto} .govx__motto, .govx__teasers{display:none} .govx__more{width:auto; justify-content:center} .govx__intro{padding:calc(var(--nav-h) + 1rem) 0 2.5rem} main > .govx:first-child{padding-top:0} } /* «Quiero unirme» del lema de Juventud: abre «¿Cuántos años tienes?» en una ventana (youth.js) */ .youth__join{margin-top:1.4rem; pointer-events:var(--qpe, auto)} .ypop{width:min(1180px, calc(100vw - 2rem)); max-width:none; max-height:calc(100svh - 2rem); margin:auto; padding:clamp(3rem, 5vw, 3.6rem) clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); border:1px solid rgba(255,255,255,.14); border-radius:28px; color:#fff; overflow:auto; overscroll-behavior:contain; background:radial-gradient(120% 90% at 85% 0%, #1d55a8 0%, var(--royal) 45%, #0b2550 100%); box-shadow:0 30px 80px rgba(4,14,34,.5)} .ypop::backdrop{background:rgba(4,14,34,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)} .ypop[open]{animation:ypopIn .45s var(--ease-out)} @keyframes ypopIn{from{opacity:0; transform:translateY(24px) scale(.98)}} .ypop .paths{position:static; inset:auto; opacity:1; transform:none; pointer-events:auto; padding:0} /* Revelado en dos pasos dentro del popup: primero la pregunta, las tarjetas y el CTA aparecen tras elegir la edad */ .ypop .paths__cards, .ypop .paths__cta{display:none} .youth[data-path]:not([data-path=""]) .ypop .paths__cards{display:grid} .youth[data-path]:not([data-path=""]) .ypop .paths__cta{display:inline-flex} .ypop__x{position:absolute; top:.8rem; right:.8rem; z-index:2; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; transition:background .2s} .ypop__x:hover{background:rgba(255,255,255,.22)} .ypop__x:focus-visible{outline:2px solid var(--gold); outline-offset:2px} @media (max-width:760px){ .ypop{width:100vw; height:100svh; max-height:100svh; margin:0; border:0; border-radius:0; padding:4.2rem var(--gutter) 2rem} } @media (prefers-reduced-motion:reduce){ .ypop[open]{animation:none} } /* Celulares angostos: los tres chips de edad en una sola línea */ @media (max-width:400px){ .youth .chip{white-space:nowrap; padding:0 .7rem; font-size:.8rem} } /* ---------- Portada en móvil ---------- */ @media (max-width:560px){ /* «Gente de acción»: el titular se ve chico en el celular porque el clamp parte casi siempre del mínimo; lo subimos */ .stage__title{font-size:clamp(3.4rem, 2rem + 9vw, 5rem)} /* «Clubes en acción»: carrusel deslizable, como «Nuestras causas», en lugar de seis tarjetas apiladas */ #accion .news__grid{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82vw; gap:.8rem; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter) .6rem; scroll-padding:0 var(--gutter); scrollbar-width:none} #accion .news__grid::-webkit-scrollbar{display:none} #accion .news__grid .post, #accion .news__grid .post:nth-child(n){grid-column:auto; grid-row:auto; min-height:340px; scroll-snap-align:start} #accion .news__grid .post:nth-child(1) h3{font-size:1.3rem} /* «Más noticias del distrito»: las cuatro más recientes; el resto, en el archivo */ #accion .latest__list > li:nth-child(n+5){display:none} /* Footer: los grupos de enlaces en dos columnas */ .footer__grid{grid-template-columns:1fr 1fr; gap:1.6rem 1.2rem} .footer__grid > div:first-child{grid-column:1 / -1} } /* Impreza pinta a:hover de azul (.no-touch a:hover): en la ficha cada enlace conserva su color */ .cdash .cnew:hover{color:var(--ink)} .cdash .crow:hover, .cdash .igp:hover, .clubh .clubh__back:hover{color:#fff} .cdash .crow--main:hover{color:#000} .cdash .cpanel__more:hover, .cdash .cig__follow:hover{color:var(--azure)} html[data-prog="rotaract"] .cdash .cpanel__more:hover, html[data-prog="rotaract"] .cdash .cig__follow:hover{color:var(--tone-p)}