@font-face{font-family:Manuka;src:url(../assets/fonts/manuka-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manuka;src:url(../assets/fonts/manuka-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Haffer;src:url(../assets/fonts/haffer-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Haffer;src:url(../assets/fonts/haffer-500.woff2) format("woff2");font-weight:500;font-display:swap}
html.sigfont{--script:"Golden Plains",Georgia,serif}
@font-face{font-family:"Golden Plains";src:url(../assets/fonts/img-f5c7be63.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  /* superficies: crema de marca */
  --noir:#FDFAF0; --panel:#FFFDF7; --panel-2:#ffffff; --raise:#F3EDDD;
  /* acento: periwinkle de marca, rebajado hasta que se pueda leer sobre crema */
  --gold:#100D0A; --gold-hi:#100D0A; --gold-dim:rgba(16,13,10,.45);
  /* Paleta de marca. Periwinkle sobre crema da 2,02:1 y no vale para
     texto: se reserva para rellenos, hovers y texto sobre oscuro, donde
     da 8,54:1. Los dos tonos de acento de arriba son el mismo periwinkle
     rebajado hasta igualar el contraste que tenia el violeta anterior. */
  --peri:#93B1FF; --orange:#FF5721; --olive:#53553D;
  --camel:#B88F5E; --mint-fill:#D0FEF5;
  --clay:#CA3100; --mint:#00705A;
  /* tinta */
  --ivory:#100D0A; --muted:rgba(16,13,10,.66); --faint:rgba(16,13,10,.58);
  --line:rgba(16,13,10,.13); --line-2:rgba(16,13,10,.18);
  --display:Manuka,"Arial Narrow",sans-serif;
  --body:Haffer,"Helvetica Neue",Arial,sans-serif;
  --script:"Golden Plains",Georgia,serif;
  --pad:clamp(20px,5.2vw,96px);
  --ease:cubic-bezier(.19,1,.22,1);
  --lockmask:url("../assets/img/community/img-4e8d9060.png") no-repeat center/contain;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--noir) 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='.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");color:var(--ivory);font-family:var(--body);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit}
::selection{background:var(--gold);color:var(--noir)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

h1,h2,h3,.disp{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(52px,9.4vw,148px)}
h2{font-size:clamp(36px,6vw,88px)}
h3{font-size:clamp(21px,2.5vw,32px)}
.it{font-family:inherit;font-style:inherit;text-transform:inherit;font-weight:inherit;letter-spacing:inherit}
.eyebrow{font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 26px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-dim);flex:none}
.lead{font-size:clamp(17px,1.5vw,20.5px);line-height:1.6;max-width:58ch;color:var(--muted)}
.lead strong{color:var(--ivory);font-weight:500}
p{margin:0 0 1.1em}
.note{font-size:12.5px;color:var(--faint);letter-spacing:.01em;line-height:1.7}
.ymark{display:inline-block;height:.66em;width:calc(.66em * 2.456);vertical-align:baseline;background-color:currentColor;-webkit-mask:url(../assets/img/community/img-d1557a30.png) no-repeat center/contain;mask:url(../assets/img/community/img-d1557a30.png) no-repeat center/contain;margin-right:.04em;transform:translateY(.02em)}

/* preloader */
#pre{position:fixed;inset:0;z-index:200;background:var(--noir);display:grid;place-items:center;transition:transform .7s var(--ease)}
#pre.gone{transform:translateY(-101%)}
#pre .pw{overflow:hidden}
#pre .pw span{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--ivory);font-size:clamp(34px,6vw,86px);line-height:1;transform:translateY(105%);animation:preUp .9s .15s var(--ease) forwards}
#pre .cnt{position:absolute;right:var(--pad);bottom:60px;color:var(--gold);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
#pre .bar{position:absolute;left:var(--pad);right:var(--pad);bottom:44px;height:1px;background:rgba(147,177,255,.18)}
#pre .bar i{display:block;height:100%;width:0;background:var(--gold);animation:preBar .8s var(--ease) forwards}
@keyframes preUp{to{transform:none}}
@keyframes preBar{to{width:100%}}

/* header */
header{position:fixed;inset:0 0 auto;z-index:100;padding:0 var(--pad);height:84px;display:flex;align-items:center;justify-content:space-between;background:rgba(253,250,240,.9);backdrop-filter:blur(14px)}
header::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
header::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:var(--prog,0%);background:var(--gold);transition:width .1s linear}
.brandmark{display:flex;align-items:baseline;gap:2px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;letter-spacing:.01em;z-index:110;color:var(--ivory)}
.brandmark .ymark{height:.78em;width:calc(.78em * 2.456)}
.brandmark em{font-family:var(--display);font-weight:400;text-transform:none;font-size:.86em;color:var(--gold);margin-left:1px}
/* Marca y distintivo de fase. El z-index:110 se muda aqui desde
   .brandmark: lo necesita el bloque entero para verse sobre el panel del
   menu movil, y dentro de esta caja el de .brandmark ya no llegaria.
   El color es el periwinkle del pie (punto 8 del feedback): la tinta
   encima da 9,20:1, asi que puede llenar la pastilla entera. */
.brandwrap{display:flex;align-items:center;gap:10px;z-index:110}
.betatag{flex:none;font-family:var(--body);font-weight:500;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;line-height:1;white-space:nowrap;
  color:var(--ivory);background:var(--peri);border-radius:999px;padding:5px 9px 4px}
@media(max-width:520px){
  .betatag{font-size:8.5px;letter-spacing:.12em;padding:4px 7px 3px}
}
nav.main{display:flex;gap:clamp(10px,1.15vw,20px);align-items:center}

nav.main a{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;padding:6px 0;position:relative;color:var(--muted);transition:color .35s;display:inline-block}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .45s var(--ease)}
nav.main a:hover,nav.main a.on{color:var(--gold-hi)}
nav.main a:hover::after,nav.main a.on::after{width:100%}
.navcta{border:1px solid var(--line-2);padding:11px 20px 10px !important;color:var(--gold-hi) !important;transition:background .35s,color .35s,border-color .35s}
.navcta::after{display:none}
.navcta:hover{background:var(--gold);color:var(--noir) !important;border-color:var(--gold)}
.burger{display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;position:relative;z-index:110}
.burger span{display:block;height:1.5px;background:var(--ivory);margin:6px auto;width:25px;transition:.4s var(--ease)}
.burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

main{padding-top:84px}
section{padding:clamp(70px,9.5vw,150px) var(--pad);position:relative}
.wrap{max-width:1400px;margin:0 auto}
.page{display:none}
.page.live{display:block}

/* reveals */
.mask{overflow:hidden;display:block;padding:.16em 0 .18em;margin:-.16em 0 -.18em}
h1 .mask:nth-child(2)>*,h2 .mask:nth-child(2)>*{transition-delay:.07s}
h1 .mask:nth-child(3)>*,h2 .mask:nth-child(3)>*{transition-delay:.14s}
.mask>*{display:block;transform:translateY(140%);transition:transform .72s var(--ease)}
.in .mask>*,.mask.in>*{transform:none}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}.reveal[data-d="2"]{transition-delay:.14s}.reveal[data-d="3"]{transition-delay:.21s}
.wipe{position:relative;overflow:hidden}
.wipe img{transform:scale(1.08);transition:transform 1.1s var(--ease)}
.wipe.in img{transform:none}
@media(prefers-reduced-motion:reduce){
  .mask>*,.reveal,.wipe img{transform:none !important;opacity:1 !important;transition:none !important}
  #pre{display:none}
  .marq .track{animation:none !important}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:18px 30px;border:1px solid var(--peri);color:var(--ivory);background:var(--peri);cursor:pointer;transition:background .4s,color .4s,border-color .4s}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--noir)}
.btn.ghost{background:transparent;color:var(--gold-hi);border-color:var(--line-2)}
.btn.ghost:hover{background:rgba(147,177,255,.1);border-color:var(--gold)}
.btn .arr{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}

/* ================= HERO ================= */
.hero{min-height:calc(100svh - 84px);display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,5vw,80px);align-items:center;padding-top:clamp(26px,4vw,54px);padding-bottom:clamp(40px,5vw,70px)}
.hero .phase{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:9px 16px;margin-bottom:30px}
.hero .phase i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.hero h1{margin-bottom:14px}
.hero h1 .row2{color:var(--gold)}
.hero .sub{font-family:var(--display);font-size:clamp(21px,2.4vw,34px);line-height:1.2;color:var(--gold-hi);margin:0 0 26px}
.hero .lead{max-width:47ch;margin-bottom:38px}
.ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.ctaband .ctas{justify-content:center}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero .ctas .tiny{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* signature: the owner card */
.cardwrap{perspective:1400px;display:grid;place-items:center;padding:10px 0}
.ocard{position:relative;width:min(480px,92%);aspect-ratio:1.586;background:linear-gradient(128deg,#191512 0%,#100D0A 42%,#231E19 78%,#12100D 100%);border:1px solid rgba(194,210,255,.34);border-radius:16px;box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(16,13,10,.08);transform-style:preserve-3d;transition:transform .5s var(--ease);will-change:transform;overflow:hidden}
.ocard::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 160% at 12% 0%,rgba(147,177,255,.2),transparent 55%)}
.ocard .sheen{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(16,13,10,.14) 50%,transparent 58%);transform:translateX(-70%);animation:sheen 6.5s var(--ease) infinite}
@keyframes sheen{0%,55%{transform:translateX(-80%)}75%,100%{transform:translateX(80%)}}
.ocard .inn{position:absolute;inset:0;padding:clamp(20px,4.4vw,32px);display:flex;flex-direction:column;justify-content:space-between}
.ocard .top{display:flex;justify-content:space-between;align-items:flex-start}
.ocard .yb{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,3vw,30px);color:var(--ivory);letter-spacing:.01em;display:flex;align-items:baseline}
.ocard .yb em{font-family:var(--display);font-weight:400;text-transform:none;color:var(--gold-hi);font-size:.8em}
.ocard .tier{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(147,177,255,.45);padding:7px 12px 6px}
/* QR del YOUNG ID, en vez del chip azul de antes. Fondo blanco fijo, tanto
   en la piel clara como en la oscura (mas abajo): un QR necesita contraste
   real para leerse, un degradado no sirve como fondo. */
.ocard .qrbox{width:56px;height:56px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;padding:5px}
.ocard .qrbox img{width:100%;height:100%;display:block;image-rendering:pixelated}
.ocard .bot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.ocard .serial{font-size:clamp(13px,1.6vw,16px);letter-spacing:.24em;color:var(--gold-hi);font-weight:500}
.ocard .serial small{display:block;font-size:8.5px;letter-spacing:.3em;color:var(--faint);margin-bottom:7px}
.ocard .serialrow{display:inline-flex;align-items:center;gap:9px}
.ocard .idcopy{background:transparent;border:1px solid rgba(147,177,255,.45);border-radius:6px;color:inherit;opacity:.7;cursor:pointer;
  padding:4px;display:inline-flex;align-items:center;justify-content:center;line-height:0;transition:opacity .2s,background .2s}
.ocard .idcopy svg{width:12px;height:12px;display:block}
.ocard .idcopy:hover{opacity:1;background:rgba(253,250,240,.1)}
.ocard .idcopy.on{opacity:1;color:var(--mint,#D0FEF5);border-color:currentColor}
.ocard .holder{text-align:right;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ocard .holder b{display:block;color:var(--ivory);font-weight:500;font-size:11.5px;margin-top:5px;letter-spacing:.18em}
.cardnote{margin-top:26px;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* live strip */
.livestrip{padding-top:0;padding-bottom:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{background:var(--noir);padding:clamp(28px,3.4vw,46px) 24px;transition:background .5s}
.stat:hover{background:var(--panel)}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(42px,5.8vw,86px);line-height:.86;letter-spacing:-.02em;color:var(--gold-hi)}
.stat span{display:block;margin-top:14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.poolbar{padding:26px var(--pad) 30px;border-bottom:1px solid var(--line)}
.poolbar .row{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.poolbar .row b{color:var(--gold);font-weight:500}
.poolbar .tr{height:2px;background:rgba(147,177,255,.16);position:relative;overflow:hidden}
.poolbar .tr i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transition:width 1.6s var(--ease)}
.poolbar.in .tr i{width:41%}
.poolbar .note{margin:14px 0 0}

/* marquee */
.marq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:0;background:var(--panel)}
.marq .track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq span{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,3.2vw,42px);padding:20px 28px;color:rgba(16,13,10,.24);white-space:nowrap;transition:color .3s;display:flex;align-items:center;gap:28px}
.marq span:hover{color:var(--gold)}
.marq .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-dim);flex:none;padding:0}
@keyframes slide{to{transform:translateX(-50%)}}

/* pitch */
.pitch .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,100px);align-items:start}
.pitch h2 .it{display:block;color:var(--gold);font-size:.62em;margin-top:.1em}
.pitch .lead{margin-top:30px}
.photostack{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.photostack figure{margin:0;overflow:hidden;background:var(--panel)}
.photostack img{width:100%;height:100%;object-fit:cover;filter:saturate(.88)}
.photostack .tall{aspect-ratio:3/4.2}
.photostack .short{aspect-ratio:3/3.6;margin-top:52px}
.photostack figcaption{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);padding:12px 2px 0}
.whylist{list-style:none;margin:clamp(44px,6vw,80px) 0 0;padding:0;border-top:1px solid var(--line)}
.whylist li{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,42px);padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease),background .5s}
.whylist li:hover{padding-left:20px;background:rgba(147,177,255,.04)}
.whylist .num{font-family:var(--display);font-size:13px;letter-spacing:.14em;color:var(--gold);padding-top:.5em}
.whylist h3{font-size:clamp(21px,2.3vw,32px);color:var(--ivory);margin-bottom:10px;transition:color .35s}
.whylist li:hover h3{color:var(--gold-hi)}
.whylist p{margin:0;font-size:15px;color:var(--muted);max-width:60ch}

/* founder letter */
.founder{background:var(--panel)}
.founder .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,6vw,100px);align-items:start}
.founder .left{position:sticky;top:118px}
.founder .bigq{font-family:var(--display);font-size:clamp(27px,3.4vw,46px);line-height:1.18;color:var(--gold-hi);margin:0}
.founder .letter p{color:var(--muted);max-width:62ch}
.founder .letter p b{color:var(--ivory);font-weight:500}
.founder .sig{margin-top:38px}
.founder .sig .hand{font-family:var(--script);font-size:clamp(40px,4.6vw,62px);color:var(--gold-hi);line-height:1;transform:rotate(-3deg);display:inline-block}
.founder .sig span{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:10px}
.founder .motto{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(19px,2vw,27px);letter-spacing:.04em;color:rgba(16,13,10,.52)}

/* steps */
.steps{border-top:1px solid var(--line)}
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:clamp(44px,6vw,80px);border:1px solid var(--line)}
.step{background:var(--noir);padding:clamp(30px,3.4vw,48px) clamp(24px,2.6vw,38px);transition:background .5s}
.step:hover{background:var(--panel)}
.step .n{font-family:var(--display);font-weight:700;font-size:clamp(38px,4.4vw,64px);color:rgba(147,177,255,.4);line-height:.9;display:block;margin-bottom:24px}
.step h3{font-size:clamp(20px,2vw,27px);margin-bottom:12px}
.step p{margin:0;font-size:14.5px;color:var(--muted)}

/* full bleed */
.bleed{padding:0;position:relative;height:clamp(320px,52vw,640px);overflow:hidden}
.bleed img{position:absolute;inset:-14% 0;width:100%;height:128%;object-fit:cover;filter:saturate(.8) contrast(.94)}
.bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(253,250,240,.44) 0%,rgba(253,250,240,.28) 45%,rgba(253,250,240,.82) 100%)}
.bleed .cap{position:absolute;left:var(--pad);bottom:clamp(30px,4.4vw,62px);right:var(--pad);color:var(--ivory);z-index:2}
.bleed .cap p{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;margin:0 0 14px;color:var(--gold-hi)}
.bleed .cap h2{max-width:17ch}

/* perks preview grid */
.perkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(44px,6vw,80px)}
.perk{background:var(--noir);padding:clamp(28px,3vw,42px) clamp(22px,2.4vw,32px);transition:background .5s;position:relative}
.perk:hover{background:var(--panel)}
.perk .ic{font-family:var(--display);font-size:26px;color:var(--gold);display:block;margin-bottom:20px}
.perk h3{font-size:clamp(18px,1.7vw,23px);margin-bottom:10px}
.perk p{margin:0;font-size:14px;color:var(--muted)}

/* CTA band */
.ctaband{background:linear-gradient(140deg,#100D0A,#0B0908 55%,#191512);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.ctaband h2{margin-bottom:16px}
.ctaband h2 .it{color:var(--gold-hi)}
.ctaband .lead{margin:0 auto 40px}
.ctaband .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ================= OFFER PAGE ================= */
.kvtable{border:1px solid var(--line);margin-top:clamp(40px,5vw,70px)}
.kv{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);transition:background .4s}
.kv:last-child{border-bottom:0}
.kv:hover{background:rgba(147,177,255,.04)}
.kv .k{padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,34px);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line);display:flex;align-items:center}
.kv .v{padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,34px);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(19px,2.1vw,29px);color:var(--gold-hi);display:flex;align-items:center}
.kv .v small{font-family:var(--body);font-weight:300;text-transform:none;font-size:13px;color:var(--muted);margin-left:14px;letter-spacing:0}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(44px,6vw,80px)}
.trust .t{background:var(--noir);padding:clamp(30px,3.2vw,46px) clamp(24px,2.6vw,36px)}
.trust .t:hover{background:var(--panel)}
.trust .n{font-family:var(--display);font-size:13px;letter-spacing:.16em;color:var(--gold);display:block;margin-bottom:20px}
.trust h3{font-size:clamp(19px,1.9vw,26px);margin-bottom:12px}
.trust p{margin:0;font-size:14.5px;color:var(--muted)}
.riskbox{margin-top:clamp(44px,6vw,80px);border:1px solid var(--line-2);padding:clamp(26px,3vw,42px)}
.riskbox h3{font-size:15px;letter-spacing:.2em;color:var(--gold);margin-bottom:16px;font-family:var(--body);font-weight:500;text-transform:uppercase}
.riskbox p{font-size:14px;color:var(--muted);max-width:90ch}
.riskbox p:last-child{margin-bottom:0}
.vidph{margin-top:clamp(44px,6vw,80px);aspect-ratio:16/8.4;border:1px dashed var(--line-2);display:grid;place-items:center;background:var(--panel);position:relative;overflow:hidden}
.vidph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24;filter:saturate(.6)}
.vidph .inner{position:relative;text-align:center;z-index:2}
.vidph .play{width:76px;height:76px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;margin:0 auto 22px;color:var(--gold-hi);font-size:18px;transition:background .4s}
.vidph:hover .play{background:rgba(147,177,255,.14)}
.vidph p{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0}
.vidph .note{margin-top:10px;letter-spacing:.04em;text-transform:none}

/* ================= CLUB PAGE ================= */
.ladder{list-style:none;margin:clamp(44px,6vw,80px) 0 0;padding:0;counter-reset:tier}
.ladder li{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,50px);align-items:center;padding:clamp(26px,3vw,40px) clamp(4px,1vw,14px);border-top:1px solid var(--line);transition:background .5s,padding-left .5s var(--ease)}
.ladder li:last-child{border-bottom:1px solid var(--line)}
.ladder li:hover{background:rgba(147,177,255,.045);padding-left:26px}
.ladder .rank{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,52px);color:rgba(147,177,255,.4);line-height:.9;min-width:1.4em}
.ladder h3{font-size:clamp(22px,2.5vw,36px);transition:color .35s}
.ladder li:hover h3{color:var(--gold-hi)}
.ladder .req{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:8px;display:block}
.ladder p{margin:10px 0 0;font-size:14.5px;color:var(--muted);max-width:60ch}
.ladder .badge{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-hi);border:1px solid var(--line-2);padding:9px 14px 8px;white-space:nowrap}
@media(max-width:820px){.ladder li{grid-template-columns:auto 1fr}.ladder .badge{display:none}}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(44px,6vw,80px)}
.gallery figure{margin:0;overflow:hidden;background:var(--panel)}
.gallery img{width:100%;aspect-ratio:3/3.8;object-fit:cover;filter:saturate(.85);transition:transform .9s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figure:nth-child(2),.gallery figure:nth-child(7){margin-top:34px}
.gallery figure:nth-child(4),.gallery figure:nth-child(5){margin-top:-20px}
.gallery figcaption{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);padding:11px 2px 0}
@media(max-width:820px){.gallery{grid-template-columns:1fr 1fr}.gallery figure{margin-top:0 !important}}
.cities{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(44px,6vw,80px)}
.city{background:var(--noir);padding:clamp(26px,2.8vw,40px) clamp(22px,2.4vw,32px)}
.city:hover{background:var(--panel)}
.city h3{font-size:clamp(19px,1.9vw,26px);margin-bottom:8px}
.city span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.city p{margin:14px 0 0;font-size:13.5px;color:var(--muted)}

/* ================= DASHBOARD PAGE ================= */
.dash{display:grid;grid-template-columns:1fr .9fr;gap:clamp(34px,6vw,100px);align-items:center}
.phone{width:min(340px,86%);margin:0 auto;aspect-ratio:9/18.6;border-radius:44px;border:1px solid rgba(194,210,255,.34);background:#080605;box-shadow:0 50px 110px rgba(0,0,0,.65),inset 0 0 0 7px #080605;padding:16px 13px;position:relative}
.phone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);width:96px;height:24px;background:#080605;border-radius:14px;z-index:3}
.pscreen{width:100%;height:100%;border-radius:32px;background:linear-gradient(175deg,#17130F,#FDFAF0 60%);overflow:hidden;display:flex;flex-direction:column;padding:52px 18px 18px;gap:13px;position:relative}
.pscreen .ph-hi{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.pscreen .ph-name{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:23px;color:var(--ivory);line-height:1}
.pcard{background:linear-gradient(128deg,#191512,#100D0A 55%,#231E19);border:1px solid rgba(194,210,255,.3);border-radius:14px;padding:15px 16px;display:flex;justify-content:space-between;align-items:flex-end}
.pcard .l small{display:block;font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.pcard .l b{font-family:var(--display);font-weight:700;font-size:26px;color:var(--gold-hi);letter-spacing:.02em}
.pcard .qr{width:46px;height:46px;border-radius:8px;background:
  conic-gradient(var(--ivory) 25%,transparent 0 50%,var(--ivory) 0 75%,transparent 0) 0 0/14px 14px,
  #100D0A;border:1px solid rgba(16,13,10,.25);opacity:.85}
.prow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pstat{background:rgba(16,13,10,.045);border:1px solid rgba(147,177,255,.18);border-radius:12px;padding:12px 13px}
.pstat small{display:block;font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.pstat b{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ivory)}
.plist{display:flex;flex-direction:column;gap:9px;overflow:hidden}
.pitem{display:flex;justify-content:space-between;align-items:center;background:rgba(16,13,10,.035);border:1px solid rgba(147,177,255,.14);border-radius:11px;padding:11px 13px;font-size:11px;color:var(--muted)}
.pitem b{color:var(--gold-hi);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.dashlist{list-style:none;margin:clamp(36px,4vw,54px) 0 0;padding:0;border-top:1px solid var(--line)}
.dashlist li{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.2vw,34px);padding:clamp(18px,2.2vw,28px) 0;border-bottom:1px solid var(--line)}
.dashlist .num{font-family:var(--display);font-size:12px;letter-spacing:.14em;color:var(--gold);padding-top:.45em}
.dashlist h3{font-size:clamp(18px,1.9vw,25px);margin-bottom:8px}
.dashlist p{margin:0;font-size:14px;color:var(--muted);max-width:56ch}
.appslot{margin-top:clamp(44px,6vw,80px);border:1px dashed var(--line-2);padding:clamp(24px,2.6vw,36px);display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}
.appslot p{margin:0;font-size:13px;color:var(--muted);max-width:64ch}
.appslot code{font-size:11px;color:var(--gold-hi);background:rgba(147,177,255,.1);padding:3px 8px;border-radius:4px}

/* ================= FAQ ================= */
.faq{max-width:940px;margin:clamp(40px,5vw,70px) auto 0;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa button.q{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.4vw,36px);align-items:center;background:none;border:0;color:var(--ivory);text-align:left;padding:clamp(22px,2.6vw,32px) 4px;cursor:pointer;transition:color .35s}
.qa button.q:hover{color:var(--gold-hi)}
.qa .num{font-family:var(--display);font-size:12px;letter-spacing:.14em;color:var(--gold)}
.qa .qt{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(18px,2.1vw,28px);line-height:1}
.qa .pm{font-size:22px;color:var(--gold);transition:transform .45s var(--ease);line-height:1}
.qa.open .pm{transform:rotate(45deg)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.qa .a p{padding:0 4px 30px calc(12px + clamp(16px,2.4vw,36px));margin:0;font-size:15px;color:var(--muted);max-width:76ch}

/* ================= JOIN / CHECKOUT ================= */
.join{display:grid;grid-template-columns:1fr .92fr;gap:clamp(34px,6vw,100px);align-items:start}
.orderbox{border:1px solid var(--line-2);background:var(--panel);padding:clamp(26px,3vw,42px);position:sticky;top:116px}
.orderbox .ol{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:26px;display:flex;align-items:center;gap:12px}
.orderbox .ol::before{content:"";width:22px;height:1px;background:var(--gold-dim)}
.qty{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);margin-bottom:8px}
.qty button{width:58px;height:64px;background:none;border:0;color:var(--gold-hi);font-size:24px;cursor:pointer;transition:background .3s}
.qty button:hover{background:rgba(147,177,255,.1)}
.qty input{background:none;border:0;color:var(--ivory);font-family:var(--display);font-weight:700;font-size:34px;text-align:center;width:100%;letter-spacing:.03em}
.qty input:focus{outline:none}
.qtynote{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:26px;text-align:center}
.sumrow{display:flex;justify-content:space-between;padding:15px 2px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.sumrow b{color:var(--ivory);font-weight:500}
.sumrow.total{border-bottom:0;padding-top:22px;align-items:baseline}
.sumrow.total span{font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.sumrow.total b{font-family:var(--display);font-weight:700;font-size:clamp(34px,3.6vw,50px);color:var(--gold-hi);letter-spacing:.01em}
.field{margin-bottom:16px}
.field label{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.field input{width:100%;background:rgba(16,13,10,.04);border:1px solid var(--line);color:var(--ivory);padding:15px 16px;font-size:15px;transition:border-color .35s}
.field input:focus{outline:none;border-color:var(--gold)}
.field textarea{width:100%;background:rgba(16,13,10,.04);border:1px solid var(--line);color:var(--ivory);padding:15px 16px;font-size:15px;transition:border-color .35s;font-family:inherit;resize:vertical;min-height:120px}
.field textarea:focus{outline:none;border-color:var(--gold)}
.orderbox .btn{width:100%;justify-content:center;margin-top:10px}
.okmsg{display:none;border:1px solid var(--line-2);padding:26px;margin-top:18px;background:rgba(147,177,255,.07)}
.okmsg.show{display:block}
.okmsg b{color:var(--gold-hi);font-weight:500;display:block;margin-bottom:8px;letter-spacing:.06em}
.okmsg p{margin:0;font-size:13.5px;color:var(--muted)}
.joincopy h2 .it{color:var(--gold-hi)}
.incl{list-style:none;margin:34px 0 0;padding:0}
.incl li{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--muted);align-items:baseline}
.incl li::before{content:"—";color:var(--gold);flex:none}
.incl li b{color:var(--ivory);font-weight:500}

/* footer */
footer{border-top:1px solid var(--line);padding:clamp(60px,7vw,100px) var(--pad) 44px;background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,.8fr);gap:clamp(30px,4vw,70px);max-width:1380px;margin:0 auto}
.fgrid .yb{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:30px;display:flex;align-items:baseline;color:var(--ivory)}
.fgrid .yb em{font-family:var(--display);font-weight:400;text-transform:none;color:var(--gold);font-size:.8em;margin-left:1px}
.fgrid p{font-size:14px;color:var(--muted);max-width:34ch;margin-top:20px}
.fgrid .soc{display:flex;gap:12px;margin-top:26px}
.fgrid .soc a{width:42px;height:42px;border:1px solid var(--line-2);display:grid;place-items:center;font-size:10px;letter-spacing:.1em;color:var(--gold-hi);transition:background .35s,color .35s}
.fgrid .soc a:hover{background:var(--gold);color:var(--noir)}
.fgrid h3{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:6px 0 22px;font-weight:500}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:12px}
.fgrid li a{font-size:14px;color:var(--muted);transition:color .3s}
.fgrid li a:hover{color:var(--gold-hi)}
.fbot{max-width:1380px;margin:60px auto 0;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11.5px;color:var(--faint);letter-spacing:.04em}

/* responsive */
@media(max-width:1080px){
  .hero{grid-template-columns:1fr;min-height:0}
  .cardwrap{order:2}
  .pitch .grid,.founder .grid,.dash{grid-template-columns:1fr}
  .founder .left{position:static}
  .stats{grid-template-columns:1fr 1fr}
  .perkgrid,.cities{grid-template-columns:1fr 1fr}
  .trust,.stepgrid{grid-template-columns:1fr}
  .join{grid-template-columns:1fr}
  .orderbox{position:static;order:2}
  /* minmax(0,1fr) y no 1fr: por defecto una columna de rejilla no encoge
     por debajo de su contenido, y el logotipo del pie mide 243px sin poder
     partirse. Con 1fr las dos columnas sumaban 391px dentro de un
     contenedor de 335 y la pagina se desplazaba en horizontal. */
  .fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fgrid>div{min-width:0}
}
@media(max-width:1260px){
  nav.main{position:fixed;inset:0;background:var(--noir);flex-direction:column;justify-content:center;align-items:center;gap:26px;transform:translateY(-102%);transition:transform .6s var(--ease)}
  nav.main.open{transform:none}
  nav.main a{font-size:17px}
  .burger{display:block}
  .kv{grid-template-columns:1fr}
  .kv .k{border-right:0;border-bottom:1px dashed var(--line);padding-bottom:12px}
  .perkgrid,.cities,.stats{grid-template-columns:1fr}
}

/* ================= COMMUNITY ROUND — SUPPLEMENT ================= */

/* hero progress / spots */
.hero .poolbar{padding:0;border:0}
.poolbar .prow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.poolbar .prow b{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:0;color:var(--gold-hi);margin-right:6px}
.poolbar .track{height:3px;background:rgba(147,177,255,.16);position:relative;overflow:hidden;border-radius:2px}
.poolbar .track i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transition:width 1.5s var(--ease)}

/* stat notes */
.stat em.note{font-style:normal;max-width:26ch}

/* pitch two-column */
.pgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,84px);align-items:start}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}}

/* why list (downside / upside) */
.whylist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
.whylist>div{background:var(--noir);padding:clamp(22px,2.6vw,34px);transition:background .45s}
.whylist>div:hover{background:var(--panel)}
.whylist>div b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(17px,1.8vw,23px);color:var(--gold-hi);margin-bottom:12px;letter-spacing:.01em}
.whylist>div span{display:block;font-size:15px;line-height:1.65;color:var(--muted)}

/* founder letter */
.founder blockquote{margin:34px 0 0;padding:0;max-width:70ch}
.founder blockquote p{color:var(--muted);font-size:clamp(16.5px,1.5vw,19px);line-height:1.68}
.founder blockquote p:first-child{font-family:var(--display);font-size:clamp(21px,2.5vw,32px);line-height:1.28;color:var(--gold-hi)}
.founder .sig{margin-top:40px}
.founder .sig .script{font-family:var(--script);font-size:clamp(24px,2.4vw,34px);color:var(--gold-hi);line-height:1;transform:rotate(-3deg);display:inline-block}
.founder .sig em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:14px}
.founder .tag{margin-top:46px;padding-top:30px;border-top:1px solid var(--line);font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(19px,2vw,27px);letter-spacing:.04em;color:rgba(16,13,10,.52)}

/* steps: numeric badge */
.step b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,46px);line-height:.9;color:rgba(147,177,255,.45);margin-bottom:20px;letter-spacing:.01em}

/* tier cards */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0}
@media(max-width:960px){.ladder{grid-template-columns:1fr}}
.tcard{background:var(--panel);border:1px solid var(--line);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;transition:border-color .45s,background .45s,transform .5s var(--ease)}
.tcard:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-4px)}
.tcard .tier{align-self:flex-start;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-2);padding:8px 13px 7px;margin-bottom:26px}
.tcard h3{font-size:clamp(24px,2.6vw,34px);color:var(--ivory)}
.tcard .amt{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,2.8vw,38px);color:var(--gold-hi);margin:14px 0 16px;letter-spacing:.01em}
.tcard .tagline{font-family:var(--body);font-size:17px;line-height:1.4;color:var(--muted);margin:0 0 24px}
.tcard .incl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tcard .incl li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.tcard .incl li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--gold)}

/* ecosystem chain + people list */
.plist{display:flex;flex-direction:column;gap:0;overflow:visible}
.plist>div{display:flex;align-items:baseline;gap:clamp(16px,2.4vw,38px);padding:20px 4px;border-top:1px solid var(--line);transition:background .45s,padding-left .45s var(--ease)}
.plist>div:last-child{border-bottom:1px solid var(--line)}
.plist>div:hover{background:rgba(147,177,255,.05);padding-left:20px}
.plist>div b{font-family:var(--display);font-weight:700;font-size:15px;color:rgba(147,177,255,.5);min-width:2.4em;letter-spacing:.06em}
.plist>div span{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(16px,1.9vw,26px);letter-spacing:.01em;color:var(--ivory)}

/* trust / people blocks */
.trust>div{background:var(--panel);border:1px solid var(--line);padding:clamp(24px,2.8vw,36px)}
.trust>div h3{color:var(--gold-hi);margin-bottom:14px}
.trust>div p{margin:0;font-size:15px;line-height:1.66;color:var(--muted)}

/* video placeholder caption */
.vidph .play{position:relative;z-index:2}
.vidph .vcap{position:relative;z-index:2;text-align:center;padding:0 24px}
.vidph .vcap b{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:10px}
.vidph .vcap span{display:block;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:48ch;margin:0 auto}

/* faq icon */
.qa .ic{font-family:var(--display);font-size:20px;color:var(--gold);transition:transform .4s var(--ease);flex:none}
.qa.open .ic{transform:rotate(45deg)}

/* dashboard list + phone */
.dashlist li b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;color:var(--ivory);margin-bottom:7px;letter-spacing:.01em}
.dashlist li span{display:block;font-size:14.5px;line-height:1.6;color:var(--muted)}
.pscreen .ptop{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.pscreen .ptop span{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:15px;color:var(--ivory)}
.pscreen .ptop em{font-family:var(--display);text-transform:none;font-weight:400;color:var(--gold-hi);font-size:.82em}
.pscreen .ptop i{width:26px;height:26px;border-radius:50%;background:rgba(147,177,255,.2);border:1px solid var(--line-2)}
.pcardmini{background:linear-gradient(128deg,#191512,#100D0A 55%,#231E19);border:1px solid rgba(194,210,255,.3);border-radius:14px;padding:16px;margin-bottom:12px}
.pcardmini .lbl{display:inline-block;font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-2);padding:5px 9px 4px;margin-bottom:14px}
.pcardmini b{display:block;font-family:var(--display);font-weight:700;font-size:22px;color:var(--gold-hi);letter-spacing:.01em}
.pcardmini .sub{display:block;font-size:10px;letter-spacing:.16em;color:var(--faint);margin-top:7px}
.pscreen .pstat{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.pscreen .pstat span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.pscreen .pstat b{font-size:15px}
.prow2{display:flex;justify-content:space-between;align-items:center;padding:12px 13px;border:1px dashed var(--line-2);border-radius:11px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* reservation stepper + success */
.qty>div{text-align:center}
.qty>div b{display:block;font-family:var(--display);font-weight:700;font-size:34px;color:var(--ivory);line-height:1}
.qty>div span{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.okmsg{display:none}
.okmsg:not([hidden]){display:block;border:1px solid var(--line-2);background:rgba(147,177,255,.07);padding:26px;margin-top:8px}
.okmsg h3{color:var(--gold-hi);margin-bottom:12px;font-size:22px}
.okmsg p{color:var(--muted);font-size:15px;line-height:1.65}
form[hidden]{display:none}

/* cities */
.city b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(19px,2.1vw,27px);color:var(--ivory);margin-bottom:9px;letter-spacing:.01em}


.stepgrid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.stepgrid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.stepgrid.four{grid-template-columns:1fr}}
.tcard .incl li{border-bottom:0;padding:0 0 0 22px;display:block}
.tcard .incl li::before{content:"";display:block}

/* mobile nav: header's backdrop-filter creates a containing block for fixed children */
@media(max-width:1260px){
  header{backdrop-filter:none;background:rgba(253,250,240,.97)}
  /* El panel se puede desplazar si los enlaces no caben. Con
     justify-content:center y desbordamiento, lo que sobra queda fuera del
     area alcanzable por los dos extremos: en un movil con la barra del
     navegador, "Pre-register" se salia por abajo sin manera de llegar.
     El patron de margin:auto centra cuando cabe y deja desplazar cuando
     no. */
  nav.main{height:100svh;z-index:105;
    overflow-y:auto;overscroll-behavior:contain;
    justify-content:flex-start;
    padding-top:max(96px,env(safe-area-inset-top));
    padding-bottom:max(40px,env(safe-area-inset-bottom))}
  nav.main > :first-child{margin-top:auto}
  nav.main > :last-child{margin-bottom:auto}
  /* la barra de cookies esta a 350 y tapaba los ultimos enlaces */
  body:has(nav.main.open) .cookiebar{display:none}
}

.perkgrid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.perkgrid.three{grid-template-columns:1fr}}

/* ---- photo layer ---- */
.gallery.big{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery.big figure{margin:0;position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--panel)}
.gallery.big img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.gallery.big figure:hover img{transform:scale(1.05)}
.gallery.big figcaption{position:absolute;left:0;bottom:0;right:0;padding:14px 14px 12px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory);background:linear-gradient(to top,rgba(253,250,240,.85),transparent)}
@media(max-width:1000px){.gallery.big{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.gallery.big{grid-template-columns:repeat(2,1fr);gap:8px}}

.photostrip{padding:0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pstrack{display:flex;gap:10px;padding:10px 0;width:max-content;animation:psmove 60s linear infinite}
.photostrip:hover .pstrack{animation-play-state:paused}
.pstrack img{height:clamp(150px,19vw,260px);width:auto;object-fit:cover;flex:none;filter:saturate(.92)}
@keyframes psmove{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.pstrack{animation:none}}

.triptych{padding-bottom:0}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tri figure{margin:0;overflow:hidden;aspect-ratio:3/4;background:var(--panel)}
.tri img{width:100%;height:100%;object-fit:cover}
/* Antes la tercera foto se escondia por debajo de 760px. En las paginas
   nuevas esa tercera foto lleva contenido —un sector, una marca—, asi que
   esconderla era perder informacion. Ahora ocupa el ancho entero debajo
   de las otras dos. */
@media(max-width:760px){.tri{grid-template-columns:1fr 1fr}
  .tri figure:last-child{grid-column:1/-1;aspect-ratio:16/9}}

.tphoto{margin:-8px 0 24px;overflow:hidden;aspect-ratio:16/9;background:var(--noir)}
.tphoto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tcard:hover .tphoto img{transform:scale(1.06)}

/* ================= VISUAL SYSTEM v3 ================= */


/* --- dot-matrix scarcity meter --- */

/* --- asset stack --- */
.assetsec{padding-top:clamp(60px,7vw,110px)}
.assethead{margin-bottom:clamp(34px,4vw,56px)}
.assethead .eyebrow{margin-bottom:22px}
@media(max-width:900px){.assethead{grid-template-columns:1fr}}
.stackwrap{display:flex;flex-direction:column;gap:14px}
.stackbar{display:grid;grid-template-columns:minmax(140px,.24fr) 1fr;grid-template-areas:"l f" "l n";gap:2px 22px;align-items:center}
.stackbar .sl{grid-area:l;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.stackbar .sfill{grid-area:f;position:relative;display:flex;align-items:center;justify-content:flex-end;height:clamp(52px,6vw,78px);width:0;
  background:linear-gradient(90deg,rgba(147,177,255,.14),var(--c));border-right:2px solid var(--c);transition:width 1.5s var(--ease);padding-right:18px}
.stackbar .sfill b{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.2vw,44px);color:var(--noir);mix-blend-mode:normal;letter-spacing:-.01em}
.stackbar .sn{grid-area:n;font-size:11.5px;color:var(--faint);padding-top:6px}
@media(max-width:760px){.stackbar{grid-template-columns:1fr;grid-template-areas:"l" "f" "n"}.stackbar .sfill{height:46px}}

/* --- flywheel --- */
.flywrap{display:grid;grid-template-columns:1fr .9fr;gap:clamp(24px,4vw,70px);align-items:center;margin-top:clamp(40px,5vw,70px)}
@media(max-width:960px){.flywrap{grid-template-columns:1fr}}
.flywheel{width:100%;height:auto;max-width:560px;margin:0 auto;display:block;overflow:visible}
.flywheel .flyring{transition:stroke-dashoffset 2.6s var(--ease)}
.flywrap.in .flywheel .flyring{stroke-dashoffset:0}
.flywheel .fcore{font-family:var(--display);font-weight:700;font-size:34px;fill:var(--ivory);letter-spacing:.01em}
.flywheel .fcoresub{font-family:var(--body);font-size:15px;fill:var(--gold-hi)}
.flywheel .fnode circle{fill:var(--noir);stroke:rgba(147,177,255,.5);transition:fill .35s,stroke .35s,r .35s}
.flywheel .fnode text{font-family:var(--display);font-weight:700;font-size:15px;fill:rgba(16,13,10,.55);transition:fill .35s}
.flywheel .fnode.hot circle{fill:var(--gold);stroke:var(--gold-hi);r:23}
.flywheel .fnode.hot text{fill:var(--noir)}
.flylist{list-style:none;margin:0;padding:0;counter-reset:fly}
.flylist li{display:flex;gap:16px;align-items:baseline;padding:13px 12px;border-left:2px solid transparent;cursor:default;transition:background .35s,border-color .35s,color .35s}
.flylist li b{font-family:var(--display);font-weight:700;font-size:12px;color:rgba(147,177,255,.55);min-width:1.7em}
.flylist li span{font-size:15.5px;color:var(--muted);transition:color .35s}
.flylist li.hot{background:rgba(147,177,255,.07);border-left-color:var(--gold)}
.flylist li.hot span{color:var(--ivory)}
.flylist li.hot b{color:var(--gold-hi)}

/* --- orbit of verticals --- */
.orbitwrap{margin-top:clamp(40px,5vw,72px)}
.orbit{position:relative;width:min(620px,92vw);aspect-ratio:1;margin:0 auto}
.orbit .ov{position:absolute;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(10px,1.15vw,13.5px);letter-spacing:.06em;color:rgba(16,13,10,.5);white-space:nowrap;padding:9px 14px;border:1px solid var(--line);
  background:var(--noir);border-radius:40px;cursor:default;transition:color .35s,border-color .35s,background .35s,box-shadow .35s}
.orbit .ov:hover{color:var(--noir);background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 6px rgba(147,177,255,.12)}
.orbit .oring{position:absolute;inset:14%;border:1px dashed rgba(147,177,255,.22);border-radius:50%;animation:spin 68s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ocore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:44%}
.ocore b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(56px,8vw,110px);line-height:.85;color:var(--gold-hi)}
.ocore span{display:block;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.ocore em{display:block;font-family:var(--display);font-size:clamp(15px,1.7vw,21px);color:var(--ivory);margin-top:16px;min-height:1.4em}
.orbnote{text-align:center;margin-top:26px}
@media(max-width:620px){
  .orbit .ov{font-size:8.5px;padding:6px 9px;letter-spacing:.02em}
  .orbit{width:min(430px,96vw)}
  .ocore b{font-size:clamp(44px,15vw,72px)}
  .ocore em{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.orbit .oring{animation:none}}

/* --- term spec cards --- */
.termsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(40px,5vw,64px)}
.tspec{background:var(--noir);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:10px;transition:background .45s}
.tspec:hover{background:var(--panel)}
.tspec.big{grid-column:span 3;background:linear-gradient(120deg,rgba(147,177,255,.12),transparent 60%)}
.tspec.wide{grid-column:span 3}
.tspec .tk{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.tspec .tv{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.6vw,70px);line-height:.9;color:var(--gold-hi);letter-spacing:-.01em}
.tspec.big .tv{font-size:clamp(56px,9vw,130px)}
.tspec .tv i{font-style:normal;font-size:.5em;color:var(--gold)}
.tspec .tv.sm{font-size:clamp(20px,2.3vw,30px);line-height:1.1}
.tspec .tn{font-size:12.5px;color:var(--faint);line-height:1.6}
@media(max-width:860px){.termsgrid{grid-template-columns:1fr}.tspec.big,.tspec.wide{grid-column:span 1}}

/* --- ownership donut --- */
.ownwrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,70px);align-items:center;margin-top:clamp(40px,5vw,70px);
  border:1px solid var(--line);padding:clamp(26px,3.4vw,52px);background:var(--panel)}
@media(max-width:900px){.ownwrap{grid-template-columns:1fr}}
.ownchart svg{width:100%;height:auto;max-width:340px;margin:0 auto;display:block}
.owarc{transition:stroke-dashoffset 1.8s var(--ease)}
.owbig{font-family:var(--display);font-weight:700;font-size:34px;fill:var(--ivory)}
.owsub{font-size:9px;letter-spacing:.22em;text-transform:uppercase;fill:var(--muted);font-family:var(--body)}
.owcopy h3{color:var(--gold-hi);margin-bottom:16px}
.owcopy p{color:var(--muted);font-size:16px;line-height:1.65}
.owlist{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.owlist li{display:grid;grid-template-columns:minmax(110px,.28fr) 1fr;gap:18px;padding:15px 0;border-top:1px solid var(--line);align-items:baseline}
.owlist li b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:14px;color:var(--gold)}
.owlist li span{font-size:14.5px;color:var(--muted)}

/* --- timeline rail --- */
.railwrap{position:relative;margin-top:clamp(46px,5vw,76px)}
.rail{position:absolute;left:0;right:0;top:9px;height:1px;background:rgba(147,177,255,.2)}
.rail .railfill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transition:width 2.2s var(--ease)}
.railstops{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,38px)}
.stop{position:relative;padding-top:34px}
.stop .dot{position:absolute;top:4px;left:0;width:11px;height:11px;border-radius:50%;background:var(--noir);border:1.5px solid var(--gold);
  transform:scale(0);transition:transform .5s var(--ease)}
.railwrap.in .stop .dot{transform:scale(1)}
.railwrap.in .stop:nth-child(2) .dot{transition-delay:.35s}
.railwrap.in .stop:nth-child(3) .dot{transition-delay:.7s}
.railwrap.in .stop:nth-child(4) .dot{transition-delay:1.05s}
.stop b{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.stop h3{font-size:clamp(17px,1.9vw,24px);color:var(--ivory);margin-bottom:10px}
.stop p{font-size:14px;color:var(--muted);line-height:1.6;margin:0}
.stop.last h3{color:var(--gold-hi)}
@media(max-width:860px){.railstops{grid-template-columns:1fr 1fr}.rail{display:none}.stop{padding-top:26px}}
@media(max-width:520px){.railstops{grid-template-columns:1fr}}

/* --- simulator (reserve page) --- */
.simwrap{display:grid;grid-template-columns:1fr;gap:18px;margin:0 0 26px}
.simrow{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.simrow b{font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,46px);color:var(--gold-hi);letter-spacing:-.01em}
input[type=range].simslider{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:rgba(147,177,255,.25);outline:none;margin:6px 0 0}
input[type=range].simslider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);
  border:3px solid var(--noir);box-shadow:0 0 0 1px var(--gold-hi);cursor:pointer;transition:transform .2s}
input[type=range].simslider::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range].simslider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);border:3px solid var(--noir);cursor:pointer}
.simticks{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:10px}
.tierbadge{display:inline-flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--noir);
  background:var(--gold);padding:8px 14px 7px;transition:background .4s}
.tierbadge.t2{background:var(--gold-hi)}
.tierbadge.t3{background:var(--mint)}
.certviz{display:grid;grid-template-columns:repeat(auto-fill,minmax(9px,1fr));gap:4px;margin:18px 0 4px;min-height:22px}
.certviz i{display:block;aspect-ratio:1;background:var(--gold);opacity:.85;border-radius:1px;animation:cpop .4s var(--ease) backwards}
@keyframes cpop{from{transform:scale(.2);opacity:0}}
.certnote{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* --- magnetic cursor dot --- */

/* --- scroll progress ring --- */
#ring{position:fixed;right:26px;bottom:26px;z-index:90;width:52px;height:52px;opacity:0;transition:opacity .4s}
#ring.on{opacity:1}
#ring circle{fill:none;stroke-width:2}
#ring .bg{stroke:rgba(147,177,255,.2)}
#ring .fg{stroke:var(--gold-hi);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
@media(max-width:820px){#ring{display:none}}

/* ---- official YOUNG.COMMUNITY lockup ---- */
.lockup{display:block;background:currentColor;-webkit-mask:url("../assets/img/community/img-4e8d9060.png") no-repeat center/contain;
  mask:url("../assets/img/community/img-4e8d9060.png") no-repeat center/contain;aspect-ratio:5.6651}
.brandmark{color:var(--ivory);transition:color .4s}
/* El z-index:110 de .brandmark solo lo necesita la de la cabecera, que
   tiene que verse sobre el panel del menu movil. La del pie comparte
   clase, y con 110 se pintaba por encima del menu abierto: aparecia una
   segunda marca flotando en mitad de la lista. */
footer .brandmark{z-index:auto}
.brandmark:hover{color:var(--gold)}
.brandmark .lockup{height:22px;width:calc(22px * 5.6651)}
footer .brandmark .lockup{height:26px;width:calc(26px * 5.6651)}
#pre .lockup{height:clamp(30px,5.4vw,64px);width:auto;aspect-ratio:5.6651;color:var(--gold);margin:0 auto}
@media(max-width:760px){footer .brandmark .lockup{height:16px;width:calc(16px * 5.6651)}}
@media(max-width:520px){.brandmark .lockup{height:15px;width:calc(15px * 5.6651)}}

/* ================= MEMBERS' CHARTER ================= */
.charter{margin-top:clamp(40px,5vw,64px);border:1px solid var(--line-2);background:
  linear-gradient(160deg,rgba(147,177,255,.10),transparent 42%),var(--panel);position:relative;overflow:hidden}
.charter::before{content:"";position:absolute;inset:10px;border:1px solid rgba(147,177,255,.14);pointer-events:none}
.charter::after{content:"";position:absolute;right:-6%;bottom:-32%;width:78%;height:150%;opacity:.045;
  background:var(--ivory);-webkit-mask:url("../assets/img/community/img-4e8d9060.png") no-repeat center/contain;mask:url("../assets/img/community/img-4e8d9060.png") no-repeat center/contain;pointer-events:none}
.chead{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,2.4vw,34px);align-items:center;
  padding:clamp(26px,3.2vw,42px);border-bottom:1px solid var(--line);position:relative}
.chead .clock{display:block;height:26px;width:calc(26px * 5.6651);background:var(--ivory);
  -webkit-mask:url("../assets/img/community/img-4e8d9060.png") no-repeat center/contain;mask:url("../assets/img/community/img-4e8d9060.png") no-repeat center/contain}
.ckicker{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.chead h3{font-size:clamp(19px,2.2vw,30px);color:var(--ivory);margin:0}
.cterms{margin:0;padding:clamp(10px,1.4vw,18px) clamp(26px,3.2vw,42px) clamp(20px,2.4vw,30px);
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(26px,3.6vw,60px);position:relative}
.cterms>div{display:grid;grid-template-columns:minmax(96px,.34fr) 1fr;gap:20px;align-items:baseline;
  padding:clamp(15px,1.7vw,21px) 0;border-bottom:1px solid var(--line)}
.cterms dt{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.cterms dd{margin:0}
.cterms dd b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,2vw,26px);line-height:1.05;color:var(--gold-hi);letter-spacing:.01em}
.cterms dd span{display:block;font-size:13px;color:var(--faint);margin-top:6px;line-height:1.5}
.cfoot{margin:0;padding:0 clamp(26px,3.2vw,42px) clamp(24px,2.8vw,34px);font-size:11.5px;color:var(--faint);
  font-family:var(--body);position:relative}
@media(max-width:860px){.cterms{grid-template-columns:1fr}.chead{grid-template-columns:1fr auto}.chead .clock{grid-column:1/-1;margin-bottom:6px}}

/* ================= CAP TABLE BAR ================= */
.capwrap{margin-top:clamp(46px,5.5vw,80px)}
.caphead{max-width:74ch;margin-bottom:clamp(28px,3.2vw,44px)}
.caphead h3{font-size:clamp(24px,3vw,42px);color:var(--ivory);margin-bottom:16px}
.caphead p{font-size:clamp(15.5px,1.5vw,18px);color:var(--muted);line-height:1.65;margin:0}
.capbar{display:flex;height:clamp(84px,9vw,124px);border:1px solid var(--line-2);overflow:hidden}
.capbar .seg{display:flex;flex-direction:column;justify-content:center;padding:0 clamp(16px,2vw,28px);position:relative;
  transition:flex-basis 1.6s var(--ease)}
.capbar .seg b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(14px,1.7vw,22px);letter-spacing:.01em;line-height:1}
.capbar .seg i{display:block;font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-top:9px}
.capbar .founder{flex:0 0 100%;background:repeating-linear-gradient(135deg,rgba(147,177,255,.10) 0 7px,transparent 7px 14px),var(--panel-2)}
.capbar .founder b{color:var(--ivory)}
.capbar .founder i{color:var(--faint)}
.capbar .community{flex:0 0 0%;background:linear-gradient(120deg,var(--gold),var(--gold-hi));white-space:nowrap;overflow:hidden}
.capbar .community b,.capbar .community i{color:var(--noir)}
.capwrap.in .capbar .founder{flex-basis:78%}
.capwrap.in .capbar .community{flex-basis:22%}
.capscale{display:flex;justify-content:space-between;margin-top:10px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.caproles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(28px,3.4vw,46px)}
.caproles>div{background:var(--noir);padding:clamp(22px,2.6vw,32px);transition:background .45s}
.caproles>div:hover{background:var(--panel)}
.caproles b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:16px;color:var(--gold);margin-bottom:12px}
.caproles span{display:block;font-size:14.5px;line-height:1.62;color:var(--muted)}
@media(max-width:820px){.caproles{grid-template-columns:1fr}.capbar{height:auto;flex-direction:column}
  .capbar .seg{padding:18px clamp(16px,2vw,28px)}
  .capwrap.in .capbar .founder,.capwrap.in .capbar .community{flex-basis:auto}
  .capscale{display:none}}

/* ---- fotos repartidas ---- */
.join .duo{grid-column:1/-1;order:3;margin-top:0}
.photopair{padding-top:0;padding-bottom:0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:clamp(34px,4vw,56px) 0}
.duo figure{margin:0;position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--panel)}
.duo img,.solo img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.duo figure:hover img,.solo:hover img{transform:scale(1.05)}
.duo figcaption,.solo figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ivory);
  background:linear-gradient(to top,rgba(253,250,240,.85),transparent)}
.solo{margin:clamp(34px,4vw,56px) 0;position:relative;overflow:hidden;aspect-ratio:21/8;background:var(--panel);display:block}
@media(max-width:680px){.duo{grid-template-columns:1fr}.solo{aspect-ratio:16/10}}
.gallery.big.eight{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.gallery.big.eight{grid-template-columns:repeat(2,1fr)}}

/* ---- club framing ---- */
.clubsec{background:var(--noir);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.clubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(38px,4.5vw,64px)}
.clubcard{background:var(--panel);padding:clamp(26px,3.2vw,44px);transition:background .45s,transform .5s var(--ease)}
.clubcard:hover{transform:translateY(-4px)}
.clubcard:hover{background:var(--panel-2)}
.clubcard .cnum{display:block;font-family:var(--display);font-weight:700;font-size:13px;color:var(--gold);
  letter-spacing:.18em;margin-bottom:26px}
.clubcard h3{font-size:clamp(19px,2.1vw,27px);color:var(--ivory);margin-bottom:14px;line-height:1.05}
.clubcard p{margin:0;font-size:15px;line-height:1.65;color:var(--muted)}
@media(max-width:860px){.clubgrid{grid-template-columns:1fr}}

/* ================= NESTED ASSET AREAS ================= */
.nestwrap{display:grid;grid-template-columns:minmax(280px,.82fr) 1.18fr;gap:clamp(30px,5vw,80px);
  align-items:center;margin-top:clamp(34px,4vw,58px)}

.nestkey{margin:0;padding:0;display:flex;flex-direction:column}
.nestkey>div{display:grid;grid-template-columns:minmax(150px,.44fr) 1fr;gap:clamp(16px,2.4vw,36px);
  align-items:baseline;padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--line)}
.nestkey>div:last-child{border-bottom:1px solid var(--line)}
.nestkey dt{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.nestkey dt i{width:11px;height:11px;flex:none;border:1px solid}
.k1 dt i{border-color:rgba(147,177,255,.6);background:rgba(147,177,255,.13)}
.k2 dt i{border-color:rgba(194,210,255,.75);background:rgba(194,210,255,.22)}
.k3 dt i{border-color:var(--mint);background:rgba(208,254,245,.3)}
.nestkey dd{margin:0}
.nestkey dd b{display:block;font-family:var(--display);font-weight:700;line-height:.92;letter-spacing:-.01em;
  font-size:clamp(32px,4.4vw,62px);color:var(--ivory)}
.k2 dd b{color:var(--gold-hi)}
.k3 dd b{color:var(--mint)}
.nestkey dd span{display:block;margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--faint);max-width:44ch}
@media(max-width:900px){.nestwrap{grid-template-columns:1fr}.nest{max-width:330px}
  .nest::after{position:static;display:block;margin-bottom:10px;text-align:center}}

/* ================= LIGHT THEME REFINEMENT ================= */
body{background-color:var(--noir)}
::selection{background:var(--gold);color:#fff}

/* aire */
section{padding:clamp(80px,10vw,168px) var(--pad)}
.wrap{max-width:1400px;margin:0 auto}
.lead{line-height:1.7}
h2.in{letter-spacing:-.005em}

/* header */
header{background:rgba(253,250,240,.86);border-bottom:1px solid var(--line)}
@media(max-width:1260px){header{background:rgba(253,250,240,.98)}}
nav.main a{color:var(--muted)}
nav.main a:hover,nav.main a.on{color:var(--gold-hi)}
.navcta{border-color:var(--line-2);color:var(--gold-hi)}
.navcta:hover{background:var(--gold);color:#fff;border-color:var(--gold)}

/* botones */
.btn{background:var(--peri);color:var(--ivory);border:1px solid var(--peri)}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn.ghost{background:transparent;color:var(--gold-hi);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--gold);color:#fff;border-color:var(--gold)}

/* preloader */
#pre{background:var(--noir)}
#pre .lockup{color:var(--gold)}
#pre .cnt,#pre .pw span{color:var(--ivory)}
#pre .bar{background:rgba(16,13,10,.12)}
#pre .bar i{background:var(--gold)}

/* tarjeta de miembro: objeto oscuro deliberado sobre fondo claro */
.ocard{background:linear-gradient(128deg,#231E19,#100D0A 55%,#2B241E);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -40px rgba(16,13,10,.5)}
.ocard .inn,.ocard .yb,.ocard .serial,.ocard .holder,.ocard .yb em{color:#FDFAF0}
.ocard .serial small,.ocard .holder{color:rgba(253,250,240,.6)}
.ocard .holder b{color:#fff}
.ocard .tier{color:#C2D2FF;border-color:rgba(147,177,255,.45)}
.ocard .yb .ymark,.ocard .lockup{background:#fff}
.cardnote{color:var(--faint)}

/* tarjeta volteable del dashboard: .front y .back son dos .ocard
   superpuestos dentro de .flipinner, que es lo que gira de verdad.
   Estas reglas van despues de las de .ocard arriba a proposito, para
   ganar el empate de especificidad en width/position/aspect-ratio. */
.flipwrap{perspective:1800px;cursor:pointer;
  /* la inclinacion la lleva el envoltorio, no cada cara: la transicion
     que antes estaba en .ocard tiene que estar aqui o el giro da saltos */
  transition:transform .5s var(--ease);will-change:transform}
.flipinner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.flipwrap.flipped .flipinner{transform:rotateY(180deg)}
.flipface{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flipface.back{transform:rotateY(180deg)}
.backinn{position:absolute;inset:0;padding:clamp(20px,4.4vw,32px);display:flex;flex-direction:column;overflow:hidden}
.backinn .eyebrow{color:rgba(253,250,240,.6);flex:none;margin-bottom:14px}
.certlist{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px}
.certlist li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex:none;
  border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:8px}
.certlist li b{font-size:13px;letter-spacing:.1em;color:#FDFAF0;font-weight:500;white-space:nowrap}
.certlist li span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(253,250,240,.5);
  text-align:right}
.certempty{color:rgba(253,250,240,.5);font-size:13px;margin:0}
/* El boton va DEBAJO de la tarjeta, no encima.
   Arriba a la derecha chocaba con la etiqueta de nivel —y con un nombre
   largo como "Founders Circle" se montaban del todo—. Moverlo a la banda
   central tampoco valia: por el dorso esa banda la ocupa la lista de
   certificados, que va a todo el ancho, y tapaba el segundo. No hay
   ninguna posicion libre en las dos caras a la vez, asi que sale de la
   tarjeta. Ademas es lo correcto: es un control, no parte del carnet.
   El margen inferior de .dcard es el hueco que ocupa. */
.dcard{margin-bottom:52px}
.flipbtn{position:absolute;top:100%;margin-top:12px;right:0;z-index:5;display:flex;align-items:center;gap:6px;
  background:transparent;border:1px solid var(--line-2);color:var(--muted);
  border-radius:20px;padding:8px 14px 8px 11px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:background .3s}
.flipbtn:hover{background:var(--panel);color:var(--ivory);border-color:var(--gold)}
.flipicon{font-size:13px;display:inline-block}
/* Con movimiento reducido la tarjeta cambia de cara sin girar. En esta
   hoja no hay una regla global de prefers-reduced-motion: van por
   selector, asi que este giro 3D de 0,7s habria seguido ejecutandose.
   Es de los que peor sientan a quien tiene sensibilidad vestibular. */
@media(prefers-reduced-motion:reduce){
  .flipinner{transition:none}
  .flipbtn{transition:none}
}

/* texto sobre fotografía siempre claro */
.gallery.big figcaption,.duo figcaption,.solo figcaption{color:#fff;
  background:linear-gradient(to top,rgba(16,13,10,.82),transparent)}
.bleed .cap h2 span{color:#fff}
.bleed::after{background:linear-gradient(to top,rgba(16,13,10,.55),rgba(16,13,10,.15))}
.vidph .vcap b{color:#fff}
.vidph .vcap span{color:rgba(255,255,255,.82)}
.vidph::after{background:linear-gradient(to top,rgba(16,13,10,.7),rgba(16,13,10,.25))}

/* superficies */
.perk,.tcard,.trust>div,.caproles>div,.clubcard,.stop,.step,.qa,.orderbox,.riskbox{background:var(--panel)}
.charter{background:linear-gradient(160deg,rgba(16,13,10,.07),transparent 45%),var(--panel-2)}
.charter::after{background:var(--gold);opacity:.05}
.clubsec{background:var(--panel)}
.assetsec,.pitch,.founder{background:transparent}
.ctaband{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
footer{background:var(--panel-2);border-top:1px solid var(--line)}

/* medidor de plazas */

/* áreas anidadas */
.k1 dt i{border-color:rgba(16,13,10,.4);background:rgba(16,13,10,.09)}
.k2 dt i{border-color:var(--gold);background:rgba(16,13,10,.26)}
.k3 dt i{border-color:var(--clay);background:var(--clay)}
.k2 dd b{color:var(--gold)}
.k3 dd b{color:var(--clay)}

/* flywheel */
.flywheel .fnode circle{fill:var(--panel-2);stroke:rgba(16,13,10,.4)}
.flywheel .fnode text{fill:rgba(16,13,10,.5)}
.flywheel .fnode.hot circle{fill:var(--gold);stroke:var(--gold)}
.flywheel .fnode.hot text{fill:#fff}
.flywheel .flycore circle{fill:rgba(16,13,10,.06);stroke:rgba(16,13,10,.28)}
.flylist li.hot{background:rgba(16,13,10,.08)}

/* orbital */
.orbit .ov{background:var(--panel-2);border-color:var(--line);color:var(--muted)}
.orbit .ov:hover{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 0 0 6px rgba(16,13,10,.1)}
.orbit .oring{border-color:rgba(16,13,10,.2)}

/* cap table */
.capbar .founder{background:repeating-linear-gradient(135deg,rgba(16,13,10,.05) 0 7px,transparent 7px 14px),var(--raise)}
.capbar .founder b{color:var(--ivory)}
.capbar .community{background:linear-gradient(120deg,var(--gold),var(--gold-hi))}
.capbar .community b,.capbar .community i{color:#fff}

/* raíl y timeline */
.rail{background:rgba(16,13,10,.14)}
.stop .dot{background:var(--noir);border-color:var(--gold)}

/* formulario */
.field input{background:var(--panel-2);border:1px solid var(--line);color:var(--ivory)}
.field input:focus{border-color:var(--gold);outline:none}
.field input::placeholder{color:var(--faint)}
.field textarea{background:var(--panel-2);border:1px solid var(--line);color:var(--ivory)}
.field textarea:focus{border-color:var(--gold);outline:none}
.field textarea::placeholder{color:var(--faint)}
input[type=range].simslider{background:rgba(16,13,10,.16)}
input[type=range].simslider::-webkit-slider-thumb{background:var(--gold);border-color:var(--panel-2);box-shadow:0 0 0 1px var(--gold)}
.tierbadge{color:#fff}
.tierbadge.t2{background:var(--gold-hi)}
.tierbadge.t3{background:var(--clay)}
.certviz i{background:var(--gold)}
.okmsg:not([hidden]){background:rgba(16,13,10,.07);border-color:var(--line-2)}

/* teléfono */
.phone{background:#17130F;border-color:rgba(255,255,255,.12);box-shadow:0 50px 100px -50px rgba(16,13,10,.55)}
.pscreen{background:#17130F}
.pscreen .ptop span,.pscreen .pstat b{color:#FDFAF0}
.pscreen .pstat span,.pcardmini .sub{color:rgba(253,250,240,.55)}
.pcardmini{background:linear-gradient(128deg,#241E18,#17130F);border-color:rgba(255,255,255,.16)}
.pcardmini b{color:#C2D2FF}
.pcardmini .lbl{color:#C2D2FF;border-color:rgba(147,177,255,.4)}
.prow2{color:rgba(253,250,240,.72);border-color:rgba(255,255,255,.18)}

/* marquee y detalles */
.marq{border-color:var(--line)}
.marq span{color:rgba(16,13,10,.28)}
.marq span:hover{color:var(--gold)}
.founder .tag{color:rgba(16,13,10,.52)}
.riskbox{border-color:var(--line-2)}
#ring .bg{stroke:rgba(16,13,10,.15)}
#ring .fg{stroke:var(--gold)}
.photostrip{border-color:var(--line)}
.pstrack img{filter:none}

/* ================= PEOPLE ================= */
.leadgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);margin-top:clamp(48px,5.5vw,84px)}
.lead-card{background:var(--panel-2);border:1px solid var(--line);padding:clamp(20px,2.2vw,28px);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s}
.lead-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -40px rgba(16,13,10,.4);border-color:var(--line-2)}
.portrait{position:relative;overflow:hidden;aspect-ratio:1;background:var(--raise);margin-bottom:24px}
.portrait img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);filter:saturate(.96)}
.lead-card:hover .portrait img{transform:scale(1.04)}
.lead-card .role{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.lead-card h3{font-size:clamp(21px,2.3vw,30px);color:var(--ivory);margin:0 0 14px;line-height:1.02}
.lead-card p{margin:0;font-size:14.5px;line-height:1.68;color:var(--muted)}
@media(max-width:960px){.leadgrid{grid-template-columns:1fr;max-width:520px}}

.crew{list-style:none;margin:clamp(40px,4.5vw,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,32px)}
.crew li{display:flex;flex-direction:column;align-items:flex-start}
.crew .av{display:block;width:100%;aspect-ratio:1;overflow:hidden;background:var(--raise);margin-bottom:16px}
.crew .av img{width:100%;height:100%;object-fit:cover;filter:saturate(.94);transition:transform 1s var(--ease),filter .5s}
.crew li:hover .av img{transform:scale(1.05);filter:saturate(1)}
.crew b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:14.5px;color:var(--ivory);
  letter-spacing:.01em;line-height:1.15}
.crew .rl{font-size:12px;color:var(--faint);margin-top:7px;line-height:1.45}
.crew.board{grid-template-columns:repeat(5,1fr);max-width:none}
@media(max-width:1100px){.crew,.crew.board{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.crew,.crew.board{grid-template-columns:repeat(2,1fr)}}

/* ---- legibilidad sobre fotografía ---- */
.bleed{height:clamp(380px,56vw,660px)}
.bleed img{filter:saturate(.92) contrast(1.02) brightness(.92)}
.bleed::after{background:
  linear-gradient(180deg,rgba(16,13,10,.10) 0%,rgba(16,13,10,.30) 42%,rgba(16,13,10,.78) 100%),
  radial-gradient(120% 90% at 12% 88%,rgba(16,13,10,.62),transparent 62%)}
.bleed .cap{max-width:min(760px,74vw)}
.bleed .cap h2 span,.bleed .cap h2 .it{color:#fff !important;text-shadow:0 2px 30px rgba(16,13,10,.55)}
.bleed .cap h2 .it{opacity:1}
.bleed .cap p{color:#fff;opacity:.82}

/* pies de foto: sin barra gris, degradado limpio */
.gallery.big figcaption,.duo figcaption,.solo figcaption{
  background:linear-gradient(to top,rgba(16,13,10,.78) 0%,rgba(16,13,10,.42) 45%,transparent 100%);
  padding:32px 16px 14px;text-shadow:0 1px 12px rgba(16,13,10,.6)}
.solo figcaption{padding:52px 22px 20px}
.vidph::after{background:linear-gradient(to top,rgba(16,13,10,.78),rgba(16,13,10,.3))}

/* ---- charter: rejilla visual ---- */
.charter{border-color:var(--line);box-shadow:0 30px 70px -55px rgba(16,13,10,.5)}
.ctiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);border-top:1px solid var(--line)}
.ctiles li{background:var(--panel-2);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;
  min-height:clamp(190px,17vw,232px);transition:background .45s}
.ctiles li:hover{background:var(--panel)}
.cico{display:block;width:30px;height:30px;color:var(--gold);margin-bottom:auto;opacity:.85}
.cico svg{width:100%;height:100%;display:block}
.ck{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin:22px 0 9px}
.cv{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(19px,2vw,27px);line-height:1.02;color:var(--gold-hi)}
.cn{display:block;font-size:12px;line-height:1.55;color:var(--muted);margin-top:10px}
@media(max-width:1080px){.ctiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .ctiles{grid-template-columns:1fr}
  .ctiles li{min-height:0;display:grid;grid-template-columns:34px 1fr;gap:4px 16px;align-items:start;padding:20px}
  .cico{grid-row:1/span 3;margin:2px 0 0;width:24px;height:24px}
  .ck{margin:0 0 6px}
  .cn{margin-top:6px}
}
.cterms{display:none}

/* marca de agua solo en la cabecera del charter, muy tenue */
.charter::after{display:none}
.chead{position:relative;overflow:hidden;background:linear-gradient(120deg,rgba(16,13,10,.07),transparent 55%)}
.chead::after{content:"";position:absolute;right:-2%;top:50%;transform:translateY(-50%);
  width:46%;height:190%;opacity:.055;background:var(--gold);pointer-events:none;
  -webkit-mask:var(--lockmask);mask:var(--lockmask)}
.cfoot{border-top:1px solid var(--line);padding-top:clamp(18px,2vw,24px);margin-top:0}
.cico{width:26px;height:26px;opacity:1}
.ctiles li{min-height:clamp(178px,16vw,214px)}

/* ---- cap table, versión editorial ---- */
.capviz{margin-top:clamp(30px,3.4vw,52px)}
.capviz svg{width:100%;height:auto;display:block;overflow:visible}
.capviz rect{transition:width 1.7s var(--ease)}
.capwrap.in .cf{width:775px}
.capwrap.in .cr,.capwrap.in .cr0{width:225px}
.capwrap.in .cc{width:150px}
.capviz .lbl-f,.capviz .lbl-c{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:23px;letter-spacing:.01em;fill:var(--ivory)}
.capviz .lbl-c{fill:var(--gold)}
.capviz .sub-f,.capviz .sub-c{font-family:var(--body);font-size:13px;fill:var(--faint);letter-spacing:.02em}
.capviz .ticks line{stroke:rgba(16,13,10,.35);stroke-width:1.1}
.capviz .ticks text{font-family:var(--body);font-size:12px;letter-spacing:.16em;fill:var(--muted)}
.capviz .brk{opacity:0;transition:opacity .7s .9s}
.capwrap.in .capviz .brk{opacity:1}
@media(max-width:680px){
  .capviz .lbl-f,.capviz .lbl-c{font-size:34px}
  .capviz .sub-f,.capviz .sub-c{font-size:19px}
  .capviz .ticks text{font-size:17px}
  .capviz .sub-c{display:none}
}

/* tarjetas de rol, más finas */
.caproles{border:0;background:transparent;gap:clamp(20px,2.4vw,40px);margin-top:clamp(34px,4vw,58px)}
.caproles>div{background:transparent;border-top:1px solid var(--line);padding:24px 0 0}
.caproles>div:hover{background:transparent}
.caproles b{color:var(--gold);font-size:14px;letter-spacing:.02em}
.caproles span{font-size:14.5px}

/* ---- cap table en móvil ---- */
.capmob{display:none}
@media(max-width:760px){
  .capviz svg{display:none}
  .capmob{display:flex;flex-direction:column;gap:28px}
  .cmrow{display:flex;flex-direction:column;gap:12px}
  .cmhead b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
    font-size:19px;color:var(--ivory);letter-spacing:.01em}
  .cmrow.club .cmhead b{color:var(--gold)}
  .cmhead span{display:block;font-size:12.5px;color:var(--faint);margin-top:5px}
  .cmbar{display:flex;height:44px;border:1px solid rgba(16,13,10,.22);overflow:hidden}
  .cmbar i{display:block;height:100%}
  .cmbar .f{width:100%;background:rgba(16,13,10,.07)}
  .cmbar .c{width:66.6%;background:linear-gradient(90deg,var(--gold),var(--gold-hi))}
  .cmbar .r{width:33.4%;background:rgba(16,13,10,.1);
    background-image:repeating-linear-gradient(45deg,rgba(16,13,10,.42) 0 2px,transparent 2px 7px)}
  .cmscale{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--faint)}
  .cmrow.club .cmscale span:first-child{margin-left:calc(66.6% - 22px)}
}

/* ---- el YOUNG del hero es el logotipo ---- */
.heromark{display:block;width:min(64%,3.6em);aspect-ratio:2.5951;position:relative;margin-top:.1em}
.heromark::before,.heromark::after{content:"";position:absolute;inset:0;display:block}
.heromark::before{background:var(--gold);
  -webkit-mask:url("../assets/img/community/img-af29a2d2.png") no-repeat left center/contain;mask:url("../assets/img/community/img-af29a2d2.png") no-repeat left center/contain}
.heromark::after{background:var(--ivory);
  -webkit-mask:url("../assets/img/community/img-4901857c.png") no-repeat left center/contain;mask:url("../assets/img/community/img-4901857c.png") no-repeat left center/contain}
.hero h1 .row2{display:block}

/* preloader: el lockup entra completo, sin recorte */
#pre .pw{overflow:hidden;padding-bottom:.14em}
#pre .pw .lockup{display:block;height:clamp(26px,4.4vw,56px);width:calc(clamp(26px,4.4vw,56px) * 5.6651);
  color:var(--ivory);margin:0 auto;transform:translateY(115%);animation:preUp .9s .15s var(--ease) forwards}

/* ================= EL CERTIFICADO ================= */
/* esquinas */
.cframe::before,.cframe::after{content:"";position:absolute;width:26px;height:26px;border:1px solid rgba(16,13,10,.5);pointer-events:none}
.cframe::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.cframe::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.ctop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-bottom:clamp(30px,3.6vw,52px)}
.cno,.cyear{font-family:var(--body);font-weight:500;font-size:clamp(13px,1.2vw,16px);letter-spacing:.14em;color:var(--gold-hi)}
.cno small,.cyear small{display:block;font-size:8.5px;letter-spacing:.3em;color:var(--faint);margin-bottom:6px;font-weight:400}
.cyear{text-align:right}
.cmark{height:clamp(15px,1.6vw,21px);width:calc(clamp(15px,1.6vw,21px) * 5.6651);color:var(--ivory);margin:0 auto}

.ckick{text-align:center;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.ctitle{text-align:center;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(26px,3.4vw,48px);line-height:.98;color:var(--ivory);margin:0 auto clamp(34px,4.4vw,60px);max-width:20ch}
.ctitle em{display:block;font-family:var(--display);text-transform:none;font-weight:400;
  font-size:.78em;color:var(--gold);letter-spacing:0;margin-top:6px}

.cheroes{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,3vw,54px);align-items:start;
  border-top:1px solid rgba(16,13,10,.2);border-bottom:1px solid rgba(16,13,10,.2);
  padding:clamp(26px,3vw,44px) 0;text-align:center}
.cheroes>div{position:relative}
.cheroes>div:not(.mid)::after{content:"";position:absolute;top:8%;bottom:8%;right:calc(-1 * clamp(9px,1.5vw,27px));width:1px;background:rgba(16,13,10,.16)}
.cheroes>div:last-child::after{display:none}
.cheroes b{display:block;font-family:var(--display);font-weight:700;line-height:.86;letter-spacing:-.01em;
  font-size:clamp(44px,6.4vw,96px);color:var(--gold)}
.cheroes .mid b{color:var(--ivory)}
.cheroes b u{text-decoration:none;font-size:.5em;color:var(--gold-hi)}
.cheroes span{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.cheroes i{display:block;font-style:normal;font-size:12.5px;color:var(--faint);margin-top:8px;line-height:1.5}

.cterms2{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4vw,70px);
  padding:clamp(24px,2.8vw,40px) 0 clamp(28px,3.2vw,46px)}
.cterms2>div{display:flex;align-items:baseline;gap:14px;padding:11px 0}
.cterms2 .ct{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cterms2 .cd{flex:1;border-bottom:1px dotted rgba(16,13,10,.4);transform:translateY(-3px)}
.cterms2 b{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(14px,1.4vw,18px);color:var(--ivory);text-align:right}

.cbottom{display:grid;grid-template-columns:1fr 1.1fr auto;gap:clamp(22px,3.4vw,60px);align-items:end;
  border-top:1px solid rgba(16,13,10,.2);padding-top:clamp(26px,3vw,42px)}
.csig .script{display:block;font-family:var(--script);font-size:clamp(30px,3vw,44px);color:var(--ivory);
  transform:rotate(-2.5deg);line-height:1;margin-bottom:2px}
.csig .sigline{display:block;border-bottom:1px solid rgba(16,13,10,.4);margin:6px 0 10px}
.csig em{font-style:normal;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.cnote p{margin:0;font-family:var(--body);font-size:clamp(13px,1.2vw,15.5px);
  line-height:1.7;color:var(--muted)}

@media(max-width:920px){
  .cbottom{grid-template-columns:1fr auto;grid-template-areas:"sig sig" "note note"}
  .csig{grid-area:sig}.cnote{grid-area:note}
}
@media(max-width:680px){
  .cheroes{grid-template-columns:1fr;gap:26px}
  .cheroes>div:not(.mid)::after{display:none}
  .cterms2{grid-template-columns:1fr}
  .ctop{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .cyear{text-align:center}
}

/* ================= JOURNEY (roadmap vertical) ================= */
.journey{position:relative;margin-top:clamp(44px,5vw,76px);padding-left:clamp(0px,2vw,20px)}
.jrail{position:absolute;left:calc(clamp(0px,2vw,20px) + 15px);top:16px;bottom:16px;width:2px;
  background:rgba(16,13,10,.14);overflow:hidden;border-radius:2px}
.jrail .jfill{position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(var(--gold),var(--gold-hi));transition:height 2.4s var(--ease)}
.journey.in .jfill{height:100%}
.jsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(30px,4vw,58px)}
.jstep{position:relative;display:grid;grid-template-columns:32px 1fr;gap:clamp(20px,2.6vw,42px);align-items:start}
.jdot{position:relative;z-index:2;width:32px;height:32px;border-radius:50%;
  background:var(--panel-2);border:1.5px solid rgba(16,13,10,.45);box-shadow:0 4px 14px -8px rgba(16,13,10,.4);display:grid;place-content:center;
  transform:scale(.5);opacity:0;transition:transform .6s var(--ease),opacity .5s,border-color .5s}
.jdot i{width:9px;height:9px;border-radius:50%;background:rgba(16,13,10,.35);transition:background .5s}
.journey.in .jstep .jdot{transform:scale(1);opacity:1}
.journey.in .jstep:nth-child(2) .jdot{transition-delay:.5s}
.journey.in .jstep:nth-child(3) .jdot{transition-delay:1s}
.journey.in .jstep:nth-child(4) .jdot{transition-delay:1.5s}
.jstep.open .jdot{border-color:var(--gold)}
.jstep.open .jdot i{background:var(--gold);box-shadow:0 0 0 4px rgba(16,13,10,.14)}
.jstep.open .jdot{border-color:var(--gold);animation:jpulse 2.6s var(--ease) infinite}
@keyframes jpulse{0%,100%{box-shadow:0 0 0 0 rgba(16,13,10,.28)}50%{box-shadow:0 0 0 10px rgba(16,13,10,0)}}
.jhere{position:absolute;left:44px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#fff;background:var(--gold);
  padding:6px 10px 5px;pointer-events:none}
.jhere::before{content:"";position:absolute;left:-5px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:8px;height:8px;background:var(--gold)}
@media(max-width:900px){.jhere{display:none}}
.jstep.last .jdot{border-color:var(--gold-hi)}
.jstep.last .jdot i{background:var(--gold-hi)}
.jbody{padding-top:1px}
.jtime{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.jhead{display:flex;align-items:baseline;gap:16px;margin-bottom:12px}
.jnum{font-family:var(--display);font-weight:700;font-size:clamp(15px,1.4vw,19px);color:rgba(16,13,10,.4);letter-spacing:.02em}
.jhead h3{font-size:clamp(21px,2.4vw,32px);color:var(--ivory);line-height:1.02;margin:0}
.jstep.last .jhead h3{color:var(--gold)}
.jbody p{margin:0;font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.66;color:var(--muted);max-width:56ch}

/* barra de progreso lateral tipo "estás aquí" */
.jstep::after{content:"";position:absolute;left:15px;top:32px;width:2px;height:calc(100% + clamp(30px,4vw,58px));
  background:transparent;z-index:1}
.jstep:hover .jbody h3{color:var(--gold-hi)}
.jstep .jbody h3,.jstep:hover .jbody h3{transition:color .4s}

@media(max-width:640px){
  .jstep{gap:16px;grid-template-columns:28px 1fr}
  .jdot{width:28px;height:28px}
  .jrail{left:calc(clamp(0px,2vw,20px) + 13px)}
}

/* ================= STORY CHAPTERS ================= */
.storysec{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chapters{list-style:none;margin:clamp(44px,5vw,72px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px)}
.chapter{position:relative;padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line-2)}
.chapter::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--gold);transition:width 1.2s var(--ease)}
.chapter.in::before{width:100%}
.chapter:nth-child(2).in::before{transition-delay:.2s}
.chapter:nth-child(3).in::before{transition-delay:.4s}
.chapter:nth-child(4).in::before{transition-delay:.6s}
.chnum{display:block;font-family:var(--display);font-size:clamp(30px,3.4vw,52px);
  color:rgba(16,13,10,.34);line-height:1;margin-bottom:18px}
.chapter.now .chnum{color:var(--clay)}
.chbody h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(19px,2vw,27px);
  color:var(--ivory);margin:0 0 12px;letter-spacing:.01em}
.chapter.now .chbody h3{color:var(--gold)}
.chbody p{margin:0;font-size:14px;line-height:1.68;color:var(--muted)}
@media(max-width:1000px){.chapters{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.chapters{grid-template-columns:1fr}}

/* ================= PRIVILEGES ================= */
.privgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,34px);margin-top:clamp(40px,4.6vw,64px)}
.priv{background:var(--panel-2);border:1px solid var(--line);padding:clamp(26px,3vw,42px);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .45s}
.priv:hover{transform:translateY(-5px);box-shadow:0 32px 60px -44px rgba(16,13,10,.4);border-color:var(--line-2)}
.pico{display:block;width:32px;height:32px;color:var(--gold);margin-bottom:22px}
.pico svg{width:100%;height:100%}
.priv h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(19px,2vw,26px);
  color:var(--ivory);margin:0 0 12px;letter-spacing:.01em}
.priv p{margin:0;font-size:14.5px;line-height:1.68;color:var(--muted)}
@media(max-width:760px){.privgrid{grid-template-columns:1fr}}

/* ================= PULL QUOTE + FINALE ================= */
.pullq{padding-top:clamp(60px,7vw,110px);padding-bottom:clamp(60px,7vw,110px)}
.bigq{margin:0;max-width:none}
.bigq p{font-family:var(--display);font-size:clamp(26px,3.6vw,52px);line-height:1.22;
  color:var(--ivory);margin:0 0 26px;letter-spacing:-.005em}
.bigq em{color:var(--gold);font-style:italic}
.bigq cite{font-style:normal;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

.finale{position:relative;padding:0;height:clamp(480px,58vw,680px);overflow:hidden}
.finale img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(.95)}
.finale::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(16,13,10,.28),rgba(16,13,10,.66)),
  radial-gradient(90% 70% at 50% 88%,rgba(16,13,10,.5),transparent 70%)}
.fcap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;z-index:2;padding:0 var(--pad)}
.fcap h2 span{color:#fff !important;text-shadow:0 2px 30px rgba(16,13,10,.55)}
.fcap .btn.ghost.finw{color:#fff;border-color:rgba(255,255,255,.5)}
.fcap .btn.ghost.finw:hover{background:#fff;color:var(--ivory);border-color:#fff}

/* ================= YOUNG ID: nav ================= */
.navlink-auth{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin-right:18px;text-decoration:none;transition:color .3s}
.navlink-auth:hover{color:var(--gold-hi)}
.navchip{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-left:16px;
  padding:6px 14px 6px 6px;border:1px solid var(--line);border-radius:40px;background:var(--panel-2);
  transition:border-color .3s,box-shadow .3s}
.navchip:hover{border-color:var(--line-2);box-shadow:0 8px 20px -14px rgba(16,13,10,.4)}
.navchip i{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#fff;font-style:normal;
  font-family:var(--display);font-weight:700;font-size:13px;display:grid;place-content:center}
.navchip span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory)}
.navchip span{display:none}
.navchip{padding:5px}
@media(max-width:1260px){.navlink-auth{display:none}}

/* ================= modales ================= */
/* place-items:center dejaba INALCANZABLE la parte de arriba del modal:
   con una rejilla centrada, un hijo mas alto que el contenedor se
   desborda por arriba y por abajo, y un contenedor no scrollea por
   encima de su origen. Con flex y margin:auto en el modal se centra
   igual, pero cuando no cabe el borde superior si se alcanza.
   overscroll-behavior:contain evita que al llegar al final del modal el
   gesto siga en la pagina de detras. */
.ovl{position:fixed;inset:0;z-index:400;background:rgba(16,13,10,.44);backdrop-filter:blur(6px);
  display:flex;padding:clamp(24px,5vh,56px) 20px;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ovl > .modal{margin:auto}

/* El candado del fondo va en <html>, que es quien scrollea aqui: el
   overflow:hidden que habia en <body> no detenia nada. body en
   position:fixed con un top negativo conserva la posicion, que se
   restaura al cerrar. */
html.ovl-open,html.ovl-open body{overflow:hidden}
html.ovl-open body{position:fixed;left:0;right:0;width:100%}
.ovl[hidden]{display:none}
.navchip[hidden],.navlink-auth[hidden]{display:none !important}
/* hidden siempre gana sobre display */
[hidden]{display:none !important}
.modal{position:relative;width:min(480px,100%);background:var(--panel-2);border:1px solid var(--line);
  box-shadow:0 60px 120px -60px rgba(16,13,10,.6);padding:clamp(26px,4vw,40px)}
.modal.wide{width:min(600px,100%)}
.mx{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;background:transparent;
  font-size:22px;color:var(--faint);cursor:pointer;line-height:1}
.mx:hover{color:var(--ivory)}
.mlogo{display:block;height:16px;width:calc(16px * 5.6651);color:var(--ivory);margin-bottom:22px}
.mtabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:22px}
.mtab{flex:1;padding:12px 0;border:0;background:transparent;cursor:pointer;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.06em;
  color:var(--faint);border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.mtab.on{color:var(--ivory);border-bottom-color:var(--gold)}
.mform .field{margin-bottom:14px}
.frow{display:flex;gap:12px}
.frow .field{flex:1}
.mform select{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--ivory);
  padding:13px 12px;font:inherit;font-size:14px}
.mnote{font-size:12.5px;color:var(--muted);margin:0 0 18px;line-height:1.6}
.mnote.small{font-size:11px;color:var(--faint);margin:14px 0 0}
.merr{font-size:12.5px;color:#b4443a;background:rgba(202,49,0,.08);border:1px solid rgba(202,49,0,.25);
  padding:10px 12px;margin:0 0 14px;line-height:1.5}
.mbtn{width:100%;justify-content:center;margin-top:6px}
.mtitle{font-size:clamp(19px,2.2vw,25px);color:var(--ivory);margin:10px 0 20px;line-height:1.1}
/* Una sola casilla, sin lista ni scroll: el modal tiene que caber entero
   sin que el usuario mueva nada (ver 'Antes de pedir certificados'). */
.tck{display:flex;gap:14px;align-items:flex-start;padding:15px 16px;border:1px solid var(--line);
  cursor:pointer;margin-bottom:6px}
.tck:hover{background:var(--panel)}
.tcb{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--gold)}
.tck span{font-size:13px;line-height:1.6;color:var(--muted)}
.tck b{color:var(--ivory)}
#termsGo:disabled{opacity:.4;cursor:not-allowed}

/* ================= dashboard ================= */
.dhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  border-bottom:1px solid var(--line);padding-bottom:clamp(22px,2.6vw,34px)}
.dgreet{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(30px,4.2vw,58px);line-height:.96;color:var(--ivory);margin:0}
.dgreet em{font-style:normal;color:var(--gold)}
.dsub{margin:14px 0 0;font-size:14px;color:var(--faint)}
.dout{border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:11px 16px;transition:all .3s}
.dout:hover{border-color:var(--line-2);color:var(--ivory)}
/* ---- panel de administracion (conciliacion) ---- */
.admtablewrap{overflow-x:auto;margin-top:clamp(20px,2.6vw,32px)}
.admtable{width:100%;border-collapse:collapse;font-size:13.5px;min-width:820px}
.admtable th{text-align:left;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:10.5px;letter-spacing:.14em;color:var(--faint);padding:0 14px 12px;border-bottom:1px solid var(--line)}
.admtable td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
.admtable td b{display:block;font-weight:600}
.admtable td small{display:block;color:var(--faint);font-size:11.5px;margin-top:2px}
.admselect{font:inherit;font-size:13px;padding:7px 8px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer}
.admselect:focus{outline:none;border-color:var(--gold)}
.admdash{color:var(--faint)}
.admst{display:inline-block;padding:4px 10px;border-radius:20px;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;border:1px solid var(--line-2);white-space:nowrap}
.admst--created{color:#B88F5E;border-color:rgba(184,143,94,.4)}
.admst--paid{color:var(--mint);border-color:rgba(0,112,90,.4)}
.admst--failed,.admst--cancelled{color:var(--faint)}
.admactions{white-space:nowrap}
.admbtn{border:1px solid var(--line-2);background:transparent;color:var(--gold-hi);cursor:pointer;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;margin-right:8px;
  border-radius:3px;transition:all .3s}
.admbtn:hover{border-color:var(--gold);color:var(--gold-hi)}
.admbtn.red{color:#b4443a;border-color:rgba(202,49,0,.35)}
.admbtn.red:hover{border-color:#b4443a}
.dtabs{display:flex;gap:0;margin:clamp(26px,3vw,40px) 0 clamp(26px,3vw,40px);border-bottom:1px solid var(--line)}
.dtab{border:0;background:transparent;cursor:pointer;padding:14px 26px 14px 0;margin-right:26px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:16px;letter-spacing:.04em;
  color:var(--faint);border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.dtab.on{color:var(--ivory);border-bottom-color:var(--gold)}

.wgrid{display:grid;grid-template-columns:minmax(320px,480px) 1fr;gap:clamp(26px,4vw,64px);align-items:center}
.dcard{position:relative;width:100%;max-width:480px;aspect-ratio:480/302}
.wstats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.wstat{background:var(--panel-2);padding:clamp(20px,2.4vw,30px)}
.wstat span{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.wstat b{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.8vw,36px);color:var(--ivory);
  letter-spacing:.01em;text-transform:uppercase;line-height:1}
.wstat b.gold{color:var(--gold)}
.wcerts{margin-top:clamp(30px,3.6vw,50px)}
.wupsell{margin-top:clamp(30px,3.6vw,50px);border:1px solid var(--line-2);background:
  linear-gradient(120deg,rgba(16,13,10,.06),transparent 60%),var(--panel-2);
  padding:clamp(26px,3.4vw,46px)}
.wupsell h3{font-size:clamp(20px,2.4vw,30px);color:var(--ivory);margin:0 0 12px}
.wupsell p{margin:0 0 22px;font-size:16.5px;line-height:1.66;color:var(--muted);max-width:64ch}
.wpending{margin-top:clamp(30px,3.6vw,50px);display:flex;gap:18px;align-items:flex-start;
  border:1px solid var(--line);background:var(--panel);padding:clamp(22px,3vw,36px)}
.pdot{width:11px;height:11px;flex:none;border-radius:50%;background:var(--clay);margin-top:7px;
  animation:jpulse 2.4s var(--ease) infinite}
.wpending h3{font-size:clamp(17px,2vw,23px);color:var(--ivory);margin:0 0 8px}
.wpending p{margin:0;font-size:15.5px;line-height:1.66;color:var(--muted);max-width:66ch}

.pgroup{margin-bottom:clamp(34px,4vw,54px)}
.plist2{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.plist2 li{background:var(--panel-2);border:1px solid var(--line);padding:clamp(18px,2.2vw,28px);
  transition:transform .45s var(--ease),border-color .4s}
.plist2 li:hover{transform:translateY(-4px);border-color:var(--line-2)}
.plist2 b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:15.5px;color:var(--ivory);margin-bottom:8px;letter-spacing:.02em}
.plist2 span{display:block;font-size:12.5px;line-height:1.6;color:var(--muted)}
.plist2.premium b{color:var(--gold)}
.plist2 li.locked{opacity:.45;filter:saturate(.6)}

/* Ofertas populares de YOUNG.Deals. Hereda el lenguaje de .plist2 -misma
   caja, mismo borde, mismo levantamiento al pasar por encima- pero en
   cuatro columnas y con el descuento arriba, que es lo que se mira
   primero. Toda la tarjeta es el enlace: el area de pulsacion es la caja
   entera y no un renglon de texto, que en el movil es la diferencia entre
   acertar y no. */
.pdeals{list-style:none;margin:18px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.pdeal{--pd:clamp(18px,2.2vw,28px);
  display:flex;flex-direction:column;height:100%;
  background:var(--panel-2);border:1px solid var(--line);
  padding:var(--pd);color:var(--ivory);
  transition:transform .45s var(--ease),border-color .4s}
.pdeal:hover{transform:translateY(-4px);border-color:var(--line-2);color:var(--ivory)}
/* La foto sangra hasta el borde: los margenes negativos cancelan el relleno
   de la tarjeta, y por eso el relleno es una variable y no un numero suelto
   -si se cambia en un sitio, la foto lo sigue-. El fondo tapa el hueco
   mientras carga, que es diferida.
   4:3 es la proporcion que usa YOUNG.Deals en sus propias tarjetas
   (.pass__ph), y aqui ademas viene bien: tres de las cuatro fotos son
   verticales, y una caja mas apaisada les cortaba media escena. */
.pdealph{display:block;margin:calc(var(--pd) * -1) calc(var(--pd) * -1) 16px;
  aspect-ratio:4/3;overflow:hidden;background:var(--raise)}
.pdealph img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.pdeal:hover .pdealph img{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){
  .pdeal,.pdealph img{transition:none}
  .pdeal:hover{transform:none}
  .pdeal:hover .pdealph img{transform:none}
}
.pdealoff{display:block;font-family:var(--body);font-weight:500;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.pdealti{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:15.5px;letter-spacing:.02em;line-height:1.16;margin-bottom:8px}
/* Al fondo de la tarjeta: con titulos de una y de tres lineas, los locales
   quedan a la misma altura en las cuatro. */
.pdealwho{display:block;margin-top:auto;padding-top:10px;
  font-size:12.5px;line-height:1.5;color:var(--muted)}
.pdealsmore{margin:clamp(16px,2vw,24px) 0 0}
@media(max-width:960px){.pdeals{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pdeals{grid-template-columns:1fr}}
@media(max-width:960px){.wgrid{grid-template-columns:1fr}.plist2{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.plist2{grid-template-columns:1fr}.dhead{flex-direction:column;align-items:flex-start}}

/* ================= checkout demo ================= */
.buyrow{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,34px);margin:6px 0 16px}
.bstep{width:52px;height:52px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--gold-hi);
  font-size:24px;cursor:pointer;transition:all .25s;line-height:1}
.bstep:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.bqty{text-align:center;min-width:150px}
.bqty b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(44px,6vw,64px);
  line-height:.9;color:var(--ivory)}
.bqty span{display:block;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);margin-top:8px}
.bpresets{display:flex;justify-content:center;gap:8px;margin-bottom:20px}
.bpresets button{border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
  padding:8px 14px;font-size:12px;letter-spacing:.08em;transition:all .25s}
.bpresets button:hover,.bpresets button.on{background:var(--gold);color:#fff;border-color:var(--gold)}
.bsum{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:16px}
.bsum>div{background:var(--panel-2);padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.bsum span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.bsum b{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ivory);letter-spacing:.02em}
.certviz.small{max-height:90px;overflow:hidden;margin-bottom:6px}
/* La tabla se queda a dos columnas tambien en movil. A una sola columna
   crecia 106px y el modal dejaba de caber en pantalla; comprobado que a
   dos columnas no se desborda ningun texto ni en la pantalla mas estrecha
   que se puede probar. Los cuadraditos son decorativos (aria-hidden) y en
   movil el alto es lo que escasea, asi que ahi se esconden. */
@media(max-width:479px){.certviz.small{display:none}}

.dactions{margin-top:clamp(22px,2.6vw,34px)}

/* ---- checkout: tipografía grande ---- */
#buyOvl .modal.wide{width:min(660px,100%);padding:clamp(24px,3vw,36px)}
#buyOvl .mtitle{font-size:clamp(20px,2.4vw,27px);margin:8px 0 18px}
#buyOvl .eyebrow{font-size:11px}
.buyrow{gap:clamp(22px,3vw,36px);margin:2px 0 14px}
.bstep{width:50px;height:50px;font-size:24px}
.bqty{min-width:190px}
.bqty b{font-size:clamp(46px,5.4vw,64px)}
.bqty span{font-size:10px;margin-top:6px}
.bpresets{gap:8px;margin-bottom:16px}
.bpresets button{padding:9px 16px;font-size:14px;font-family:var(--display);font-weight:700;letter-spacing:.04em}
.bsum{margin-bottom:14px}
.bsum>div{padding:13px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.bsum span{font-size:10px}
.bsum b{font-size:clamp(16px,1.8vw,20px);text-transform:uppercase}
.blevel{color:var(--gold)}
.blevel.bl{color:var(--gold-hi)}
.blevel.fc{color:var(--clay)}
.bserial{color:var(--ivory)}
.certviz.small{max-height:64px;margin-bottom:10px}
#buyOvl .mbtn{padding-top:20px;padding-bottom:20px;font-size:15px}
#buyOvl .mnote.small{font-size:12px;line-height:1.6}

/* ---- account pane ---- */
/* Dos columnas de verdad, no cuatro celdas. Antes las tres cajas colgaban
   sueltas de la rejilla con align-items:start: la primera fila la medía
   "Your profile", que es la alta, y la contraseña caía a una segunda fila
   que arrancaba por debajo de ella. De ahí el hueco bajo el codigo de
   invitacion. Ahora la izquierda es .accol, stretch iguala las alturas de
   las dos columnas y .acpwd se come el sobrante para que terminen a la par. */
.acgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);align-items:stretch}
.accol{display:flex;flex-direction:column;gap:clamp(20px,3vw,44px);min-width:0}
.accol .acpwd{flex:1}
.acbox{background:var(--panel-2);border:1px solid var(--line);padding:clamp(24px,3vw,40px)}
.mok{font-size:12.5px;color:var(--mint);background:rgba(0,112,90,.1);border:1px solid rgba(0,112,90,.3);
  padding:10px 12px;margin:0 0 14px;line-height:1.5}
/* A una sola columna la caja de la izquierda ya no pinta nada, y encima
   dejaria el perfil el ultimo. Se disuelve con display:contents para que
   las tres cajas vuelvan a ser hijas de la rejilla, y el orden se fuerza
   al que habia antes: invitacion, perfil y contrasena. */
@media(max-width:900px){
  .acgrid{grid-template-columns:1fr}
  .accol{display:contents}
  .acprofile{order:2}
  .acpwd{order:3}
}

/* ================= v25: password toggles, links ================= */
.pwfield{position:relative}
.pwfield input{padding-right:46px}
.pweye{position:absolute;right:8px;bottom:6px;width:34px;height:34px;border:0;background:transparent;
  cursor:pointer;opacity:.45;transition:opacity .25s}
.pweye:hover{opacity:.9}
.pweye::before{content:"";position:absolute;inset:9px;border:1.4px solid currentColor;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;color:var(--ivory)}
.pweye::after{content:"";position:absolute;left:16px;top:15px;width:4px;height:4px;border-radius:50%;background:var(--ivory)}
.pweye.on::before{border-radius:2px;transform:rotate(-20deg)}
.mlink{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(16,13,10,.35)}
.mlink:hover{color:var(--gold-hi)}
.mcode{font-size:12.5px;color:var(--muted);background:var(--panel);border:1px dashed var(--line-2);
  padding:11px 13px;margin:0 0 14px;line-height:1.5}
.mcode b{font-family:var(--display);font-size:16px;color:var(--gold);letter-spacing:.14em;margin-left:4px}

/* ================= chip dropdown ================= */
.navchipwrap{position:relative;margin-left:16px}
.navchipwrap[hidden]{display:none !important}
.navchip{border:1px solid var(--line);border-radius:40px;background:var(--panel-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;padding:5px;transition:border-color .3s,box-shadow .3s}
.navchip:hover{border-color:var(--line-2);box-shadow:0 8px 20px -14px rgba(16,13,10,.4)}
.navmenu{position:absolute;right:0;top:calc(100% + 14px);min-width:216px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 50px -28px rgba(16,13,10,.42),0 2px 6px -2px rgba(16,13,10,.08);
  padding:8px;z-index:200;overflow:hidden}
.navmenu[hidden]{display:none}
/* la puntita que lo ata al boton del que cuelga */
.navmenu::before{content:"";position:absolute;top:-5px;right:22px;width:9px;height:9px;
  background:var(--panel-2);border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg);border-radius:2px 0 0 0}
/* de quien es esta cuenta */
.navmenu .nmwho{display:block;padding:10px 14px 12px;text-align:center;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);margin:0 4px 6px}
.navmenu a,.navmenu button{display:block;width:100%;text-align:center;border:0;background:transparent;
  cursor:pointer;padding:12px 16px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;border-radius:9px;
  transition:background .22s var(--ease),color .22s var(--ease)}
.navmenu a:hover,.navmenu button:hover{background:var(--panel);color:var(--ivory)}
/* el separador va por dentro, no cortando la caja de lado a lado */
.navmenu button{color:var(--clay);margin-top:6px;position:relative}
.navmenu button::before{content:"";position:absolute;top:-3px;left:14px;right:14px;height:1px;
  background:var(--line)}
.navmenu button:hover{background:rgba(202,49,0,.08);color:var(--clay)}
@media(max-width:420px){.navmenu{min-width:0;width:max(190px,60vw)}}

/* ================= dashboard: badge, historial, acciones ================= */
.tbadge{display:inline-grid;place-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:7px;
  border-radius:20px;background:var(--clay);color:#fff;font-family:var(--body);font-size:10px;letter-spacing:0;
  vertical-align:middle}
.dactions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,34px)}
.dactions .btn{padding:14px 22px;font-size:11px}
.histlist{list-style:none;margin:0;padding:0;border:1px solid var(--line);background:var(--panel-2)}
.histlist li{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.histlist li:last-child{border-bottom:0}
.histlist .hdate{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.histlist .hwhat{font-size:16px;color:var(--ivory)}
.histlist .hwhat small{display:block;font-size:11.5px;color:var(--faint);letter-spacing:.04em;margin-top:3px}
.histlist .hqty{font-family:var(--display);font-weight:700;font-size:22px;color:var(--gold);white-space:nowrap}

/* ================= pane club ================= */
.evlist,.brlist{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.evlist li{display:grid;grid-template-columns:78px 1fr auto;gap:22px;align-items:center;
  background:var(--panel-2);border:1px solid var(--line);padding:20px 22px;transition:border-color .35s}
@media(max-width:700px){
  .evlist li{grid-template-columns:56px 1fr;gap:14px;padding:18px}
  .evdate{border-right:0;padding-right:0}
  .evdate b{font-size:22px}
  .evbody{grid-column:2}
  .rsvp{grid-column:1/-1;width:100%;margin-top:4px}
}
.evlist li:hover{border-color:var(--line-2)}
.evdate{text-align:center;border-right:1px solid var(--line);padding-right:18px}
.evdate b{display:block;font-family:var(--display);font-weight:700;font-size:26px;color:var(--ivory);line-height:1}
.evdate span{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.evbody b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;
  color:var(--ivory);margin-bottom:5px;letter-spacing:.02em}
.evbody span{font-size:14.5px;line-height:1.6;color:var(--muted)}
.rsvp{border:1px solid var(--line-2);background:transparent;color:var(--gold-hi);cursor:pointer;
  padding:11px 18px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;transition:all .28s;white-space:nowrap}
.rsvp:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.rsvp.going{background:var(--mint);border-color:var(--mint);color:#fff}

.brlist li{background:var(--panel-2);border:1px solid var(--line)}
.brhead{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  border:0;background:transparent;cursor:pointer;padding:20px 22px;text-align:left}
.brhead b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;color:var(--ivory);letter-spacing:.02em}
.brhead small{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.brhead .dot{width:8px;height:8px;border-radius:50%;background:var(--clay);flex:none}
.brbody{padding:0 22px 24px;font-size:15.5px;line-height:1.75;color:var(--muted);max-width:74ch}
.brbody[hidden]{display:none}
.brbody p{margin:0 0 12px}

.refbox .refrow{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}
.refbox code{flex:1;min-width:240px;background:var(--panel);border:1px dashed var(--line-2);
  padding:14px 16px;font-family:var(--body);font-size:13.5px;color:var(--gold-hi);letter-spacing:.02em}

/* Misma idea que .refbox de arriba (caja punteada + boton de copiar), a
   tamano de celda de tabla — la usan los enlaces de invitacion del panel
   de admin, uno por codigo generado. */
.linkbox{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.linkbox code{background:var(--panel);border:1px dashed var(--line-2);padding:8px 10px;
  font-family:var(--body);font-size:12px;color:var(--gold-hi);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}

/* ================= danger zone ================= */
.danger{margin-top:clamp(26px,3vw,42px);border:1px solid rgba(202,49,0,.3);background:rgba(202,49,0,.04);
  padding:clamp(22px,2.6vw,32px);display:flex;justify-content:space-between;align-items:center;gap:24px}
.danger b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px;
  color:#b4443a;margin-bottom:8px;letter-spacing:.02em}
.danger span{font-size:14px;line-height:1.65;color:var(--muted);max-width:70ch}
.dout.red{border-color:rgba(202,49,0,.45);color:#b4443a;white-space:nowrap}
.dout.red:hover{background:#b4443a;color:#fff;border-color:#b4443a}
.btn.red{background:#b4443a;border-color:#b4443a}
.btn.red:hover{background:#A32800;border-color:#A32800}
.btn.red:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:700px){.danger{flex-direction:column;align-items:flex-start}}

/* ================= certificado personal ================= */
.certmodal{width:min(700px,100%);background:transparent;border:0;box-shadow:none;padding:0}
.certmodal .mx{color:#fff;top:-40px;right:0}
.pcert{background:linear-gradient(#FFFDF7,#FFFDF7);border:1px solid rgba(16,13,10,.16);
  box-shadow:0 44px 90px -50px rgba(16,13,10,.7);padding:clamp(8px,1vw,14px)}
.pcframe{border:1px solid rgba(16,13,10,.34);outline:1px solid rgba(16,13,10,.14);outline-offset:4px;
  padding:clamp(24px,3.4vw,48px) clamp(20px,3.4vw,52px);position:relative}
.pcert .ctitle{font-size:clamp(20px,2.6vw,34px);margin-bottom:18px}
.pcert .ctitle em{font-size:.92em;color:var(--gold);display:block;margin-top:10px}
.pcbody{text-align:center;font-family:var(--body);font-size:clamp(13px,1.4vw,16px);line-height:1.75;
  color:var(--muted);max-width:60ch;margin:0 auto clamp(24px,3vw,36px)}
.pcbody b{font-family:inherit;font-style:inherit;font-weight:600;color:var(--ivory);font-size:1em;letter-spacing:0}
.pcmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(16,13,10,.18);
  border:1px solid rgba(16,13,10,.18);margin-bottom:clamp(24px,3vw,36px)}
.pcmeta>div{background:#FFFDF7;padding:16px 18px;text-align:center}
.pcmeta span{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.pcmeta b{font-family:var(--display);font-weight:700;font-size:clamp(14px,1.6vw,19px);color:var(--gold-hi);
  text-transform:uppercase;letter-spacing:.02em}
@media(max-width:600px){.pcmeta{grid-template-columns:1fr}}

/* ================= member pass ================= */

/* ================= call slots ================= */

/* ================= lightbox ================= */
.lightovl{background:rgba(16,13,10,.94);backdrop-filter:blur(10px)}
.lightfig{margin:0;max-width:min(1200px,92vw);text-align:center}
.lightfig img{max-width:100%;max-height:78vh;display:block;margin:0 auto;box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.lightfig figcaption{margin-top:18px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.mx.light{position:fixed;top:22px;right:26px;color:#fff;font-size:32px;width:44px;height:44px}
.lnav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;font-size:19px;cursor:pointer;transition:all .28s}
.lnav:hover{background:#fff;color:var(--ivory)}
.lnav.prev{left:22px}.lnav.next{right:22px}
@media(max-width:700px){.lnav{width:42px;height:42px}.lnav.prev{left:8px}.lnav.next{right:8px}}
.gallery figure,.duo figure,.solo,.vidph{cursor:zoom-in}

/* ================= cookies ================= */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:350;background:var(--panel-2);
  border-top:1px solid var(--line);box-shadow:0 -20px 50px -40px rgba(16,13,10,.5);
  padding:18px clamp(18px,4vw,54px);display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.cookiebar[hidden]{display:none}
.cookiebar p{margin:0;font-size:13px;color:var(--muted);max-width:70ch}
.cookiebar>div{display:flex;gap:10px}
.cookiebar .btn{padding:12px 20px;font-size:10.5px}

/* ================= footer: newsletter + idioma ================= */
.nlform{margin-top:26px;max-width:340px}
.nllabel{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.nlrow{display:flex;gap:8px}
.nlrow input{flex:1;background:transparent;border:1px solid var(--line);color:var(--ivory);
  padding:12px 13px;font:inherit;font-size:13.5px}
.nlrow input:focus{outline:none;border-color:var(--gold)}
.nlrow .btn{padding:12px 20px;font-size:10.5px}
.langrow{display:flex;gap:6px;margin-top:26px}
.langrow button{border:1px solid var(--line);background:transparent;color:var(--faint);cursor:pointer;
  padding:8px 13px;font-size:10.5px;letter-spacing:.16em;transition:all .25s}
.langrow button:hover{color:var(--ivory);border-color:var(--line-2)}
.langrow button.on{background:var(--ivory);border-color:var(--ivory);color:var(--noir)}

/* ================= impresión del certificado ================= */


/* ---- v27: escala de lectura en modales y tarjetas de perks ---- */
.mtab{font-size:17px;padding:15px 0;letter-spacing:.05em}
.mform label,.field label{font-size:10.5px;letter-spacing:.2em}
.mform input,.mform select,.field input,.field select{font-size:15.5px;padding:15px 14px}
.mnote{font-size:14px;line-height:1.65}
.mnote.small{font-size:12.5px}
.merr,.mok{font-size:13.5px;padding:12px 14px}
.mtitle{font-size:clamp(21px,2.4vw,28px)}
.mbtn{padding-top:18px;padding-bottom:18px;font-size:12.5px}
.mlogo{height:19px;width:calc(19px * 5.6651);margin-bottom:26px}
.tck span{font-size:14.5px;line-height:1.65}
.tck{padding:17px 18px}

/* privilegios del dashboard, más legibles */
.plist2 li{padding:clamp(22px,2.6vw,32px)}
.plist2 b{font-size:24px;margin-bottom:13px;letter-spacing:.015em;line-height:1.08}
.plist2 span{font-size:15px;line-height:1.68}
.pgroup .eyebrow{font-size:11px;letter-spacing:.28em}

/* tarjetas de privilegios de la home */
.priv h3{font-size:clamp(21px,2.2vw,28px)}
.priv p{font-size:15.5px;line-height:1.7}

/* cabeceras de bloque del dashboard */
.dtab{font-size:18px}
.wstat span{font-size:10.5px;letter-spacing:.2em}
.eyebrow{font-size:11px}

/* ================= v28: escala de títulos pequeños ================= */
/* la display es condensada, a tamaños pequeños se lee diminuta:
   se sube el cuerpo y se abre el tracking */

/* tarjetas de privilegios y listas del dashboard */
.plist2 b{font-size:clamp(19px,1.9vw,23px);letter-spacing:.02em;margin-bottom:11px}
.plist>div b{font-size:clamp(18px,1.8vw,21px);letter-spacing:.02em}
.dashlist li b{font-size:clamp(18px,1.8vw,21px);letter-spacing:.02em}
.owlist li b{font-size:clamp(17px,1.7vw,20px);letter-spacing:.02em}
.flylist li b{font-size:clamp(15px,1.5vw,18px);letter-spacing:.03em}
.crew b{font-size:clamp(17px,1.7vw,20px);letter-spacing:.02em}
.caproles b{font-size:clamp(18px,1.8vw,21px);letter-spacing:.02em}
.danger b{font-size:clamp(19px,1.9vw,22px)}

/* pestañas y controles */
.dtab{font-size:clamp(18px,1.9vw,22px);letter-spacing:.03em}
.mtab{font-size:clamp(16px,1.6vw,18px);letter-spacing:.04em}
.bpresets button{font-size:clamp(16px,1.6vw,18px)}
.bsum b{font-size:clamp(21px,2.4vw,26px)}
.mcode b{font-size:19px}

/* numeración y contadores */
.whylist .num,.trust .n,.dashlist .num,.qa .num,.clubcard .cnum{font-size:clamp(15px,1.5vw,18px);letter-spacing:.04em}
.flywheel .fnode text{font-size:17px}
.jnum{font-size:clamp(17px,1.7vw,21px)}
.pcmeta b{font-size:clamp(16px,1.8vw,21px)}
.cterms2 b{font-size:clamp(16px,1.6vw,20px)}

/* club: eventos y briefings */
.evbody b{font-size:clamp(18px,1.8vw,21px)}
.brhead b{font-size:clamp(18px,1.8vw,21px)}
.histlist .hqty{font-size:clamp(19px,1.9vw,22px)}

/* maqueta del móvil y tarjeta */
.pstat b{font-size:clamp(20px,2vw,23px)}
.pscreen .ptop span{font-size:16px}
.cmhead b{font-size:clamp(20px,2vw,23px)}

/* subtítulos de sección en tarjetas */
.priv h3{font-size:clamp(21px,2.1vw,28px)}
.clubcard h3{font-size:clamp(21px,2.1vw,28px)}
.step h3{font-size:clamp(20px,2vw,26px)}
.chbody h3{font-size:clamp(21px,2.1vw,28px)}
.wupsell h3,.wpending h3{font-size:clamp(21px,2.1vw,27px)}

/* ================= banner obligatorio AFM ================= */
.afm{margin:clamp(26px,3vw,42px) 0;max-width:820px}
.afm img{display:block;width:100%;height:auto;border:1px solid rgba(16,13,10,.22);background:#fff}
.afmen{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--faint);letter-spacing:.02em;max-width:70ch}
.afm.small{margin:18px 0 6px;max-width:100%}
.afm.small .afmen{font-size:10.5px}
.afm.foot{margin:0 0 26px;max-width:560px}
.afm.foot .afmen{font-size:10.5px}


/* ================= legibilidad de la display en tamaños pequeños =================
   Manuka es muy condensada: por debajo de ~20px necesita más cuerpo y tracking. */
.plist2 b{font-size:18px;letter-spacing:.05em;line-height:1.25}
.plist>div b{font-size:17.5px;letter-spacing:.05em;line-height:1.25}
.caproles b{font-size:18px;letter-spacing:.05em}
.owlist li b{font-size:16.5px;letter-spacing:.05em}
.crew b{font-size:17px;letter-spacing:.045em}
.flylist li b{font-size:14.5px;letter-spacing:.08em}
.dashlist li b{font-size:19px;letter-spacing:.045em;line-height:1.25}
.trust .n{font-size:15px;letter-spacing:.09em}
.whylist .num{font-size:15px;letter-spacing:.09em}
.dashlist .num,.qa .num{font-size:14px;letter-spacing:.09em}
.clubcard .cnum{font-size:15px;letter-spacing:.09em}
.jnum{font-size:clamp(17px,1.5vw,21px);letter-spacing:.06em}
.pstat b{font-size:20px;letter-spacing:.03em}
.pscreen .ptop span{font-size:16px;letter-spacing:.04em}
.evbody b{font-size:18px;letter-spacing:.05em;line-height:1.28}
.brhead b{font-size:18px;letter-spacing:.05em;line-height:1.28}
.histlist .hqty{font-size:19px;letter-spacing:.03em}
.evdate b{letter-spacing:.02em}
.dtab{font-size:17.5px;letter-spacing:.06em}
.mtab{font-size:15.5px;letter-spacing:.07em}
.bsum b{font-size:clamp(16px,1.7vw,19px);letter-spacing:.035em}
.bpresets button{font-size:16px;letter-spacing:.06em}
.mcode b{font-size:17px;letter-spacing:.14em}
.cterms2 b{font-size:clamp(15.5px,1.5vw,19px);letter-spacing:.045em}
.pcmeta b{font-size:clamp(15.5px,1.7vw,20px);letter-spacing:.045em}
.cmhead b{font-size:20px;letter-spacing:.04em}
.capbar .seg b{letter-spacing:.045em}
.navchip i{font-size:14px}
.wstat b{letter-spacing:.03em}
.tierbadge{font-size:11.5px;letter-spacing:.16em;padding:8px 13px}
.orbit .ov{font-size:clamp(11px,1.2vw,14.5px);letter-spacing:.1em}
.flywheel .fnode text{font-size:16px;letter-spacing:.04em}
.cv{letter-spacing:.03em}
.priv h3,.chbody h3{letter-spacing:.035em}
.dgreet{letter-spacing:.02em}

/* ---- títulos pequeños: la display condensada no rinde bajo 20px,
        se usa la tipografía de texto en semibold ---- */
.plist2 b,.plist>div b,.caproles b,.owlist li b,.crew b,.flylist li b,
.dashlist li b,.evbody b,.brhead b,.pstat b,.cmhead b,.bsum b,
.cterms2 b,.pcmeta b,.wstat b,.histlist .hqty,.bpresets button,
.trust .n,.whylist .num,.dashlist .num,.qa .num,.clubcard .cnum,.jnum,
.pscreen .ptop span,.mcode b,.tierbadge,.orbit .ov,.flywheel .fnode text{
  font-family:var(--body) !important;font-weight:600 !important;
}
.plist2 b,.plist>div b,.caproles b,.owlist li b,.crew b,
.dashlist li b,.evbody b,.brhead b{
  font-size:15.5px !important;letter-spacing:.06em !important;line-height:1.4 !important;
}
.pstat b,.cmhead b,.wstat b{font-size:19px !important;letter-spacing:.02em !important}
.bsum b{font-size:clamp(16px,1.7vw,19px) !important;letter-spacing:.02em !important}
.cterms2 b,.pcmeta b{font-size:clamp(14px,1.4vw,16.5px) !important;letter-spacing:.04em !important}
.histlist .hqty{font-size:16px !important;letter-spacing:.02em !important}
.bpresets button{font-size:14.5px !important;letter-spacing:.05em !important}
.trust .n,.whylist .num,.dashlist .num,.qa .num,.clubcard .cnum{
  font-size:12px !important;letter-spacing:.16em !important}
.jnum{font-size:14px !important;letter-spacing:.16em !important}
.flylist li b{font-size:13px !important;letter-spacing:.1em !important}
.pscreen .ptop span{font-size:13.5px !important;letter-spacing:.06em !important}
.mcode b{font-size:15px !important;letter-spacing:.18em !important}
.tierbadge{font-size:10.5px !important;letter-spacing:.18em !important}
.orbit .ov{font-size:clamp(10.5px,1.1vw,13px) !important;letter-spacing:.12em !important}
.flywheel .fnode text{font-size:14px !important;letter-spacing:.06em !important}
/* pestañas: legibles pero manteniendo carácter */
.dtab,.mtab{font-family:var(--body) !important;font-weight:600 !important;
  font-size:13px !important;letter-spacing:.14em !important}

/* ---------- estado de carga de los botones ----------
   El giro se detiene con movimiento reducido: el boton sigue bloqueado y
   con su etiqueta, que es lo que comunica el estado. Solo se va la vuelta. */
.ldspin{display:inline-block;width:13px;height:13px;margin-right:9px;vertical-align:-2px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  opacity:.85;animation:ldspin .7s linear infinite}
.ldtxt{letter-spacing:inherit}
@keyframes ldspin{to{transform:rotate(360deg)}}
button[aria-busy="true"],a[aria-busy="true"]{cursor:progress;opacity:.78}
@media(prefers-reduced-motion:reduce){
  .ldspin{animation:none;border-right-color:currentColor;opacity:.5}
}

/* =====================================================================
   MOVIL
   Medido en un telefono de 411x890 con pantalla retina antes de escribir
   esto: 28 de 35 elementos pulsables por debajo de 44 px, y texto de
   hasta 8,5 px. Lo de abajo corrige las dos cosas sin mover el diseno.
   ===================================================================== */
@media(max-width:760px){

  /* --- 1. suelo de tamano de letra ---
     Nada por debajo de 11 px en un telefono. Los rotulos en versalitas se
     quedan pequenos a proposito, pero 8,5 px no se lee ni con buena vista. */
  /* Solo suben los que de verdad no se leen. Los rotulos en versalitas de
     10 y 11 px se quedan como estan: son una decision de diseno y a ese
     tamano con ese interletrado se leen. Por debajo de 10 px, no.
     La especificidad imita a la de la regla original (.ocard .serial small
     es 0-2-1), porque si no, no gana. */
  .ocard .serial small,.cno small,.cyear small{font-size:10.5px}
  .gallery figcaption,.gallery.big figcaption,
  .duo figcaption,.solo figcaption{font-size:10.5px}
  .nllabel{font-size:10.5px}
  .ocard .tier,.tcard .tier{font-size:10.5px}

  /* --- 2. area tactil de 44 px sin tocar la maquetacion ---
     Los enlaces de texto miden 15 px de alto porque esa es su linea. En vez
     de engordarlos —que descuadraria el pie— se les pone una zona pulsable
     invisible por encima y por debajo. El diseno no se entera. */
  footer a,.fbot a,.lockup a,.note a,
  .clb-go,.co-berkgo,.hm-ecolink,.fqlink,.fq2-inline,.ab-teamlink,.co-listen-k{position:relative}
  footer a::after,.fbot a::after,.lockup a::after,.note a::after,
  .clb-go::after,.co-berkgo::after,.hm-ecolink::after,.fqlink::after,
  .fq2-inline::after,.ab-teamlink::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%)}

  /* --- 3. controles de verdad: que midan 44 px ---
     Estos si se pulsan con el pulgar y conviene que sean grandes. */
  .langrow button{min-width:44px;min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
  .navlink-auth,.navchip{min-height:44px;display:inline-flex;align-items:center}
  nav.main a{min-height:44px;display:flex;align-items:center}
  .burger{width:44px;height:44px}
  .btn,.mbtn,.bstep,.flipbtn{min-height:44px}
  /* el desplegable de las fichas de Portfolio se pulsa con el pulgar */
  .pf-more summary{min-height:44px}
  .brandmark{min-height:44px;display:inline-flex;align-items:center}

  /* --- 4. zonas seguras del telefono ---
     En moviles con notch o barra inferior, el contenido fijo se metia debajo.
     El max() conserva el relleno normal cuando no hay notch que esquivar. */
  header,.nav,nav.main{padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right))}
  footer{padding-bottom:max(28px,env(safe-area-inset-bottom))}
  .ovl{padding-bottom:max(0px,env(safe-area-inset-bottom))}

  /* --- 5. no hacer zoom al enfocar un campo ---
     iOS amplia la pagina si el campo tiene menos de 16 px y luego no la
     devuelve a su sitio. Con 16 px no pasa. */
  input,select,textarea{font-size:16px}
}

/* El numero al final de los cuadraditos de certificados. Se alinea con
   ellos y usa cifras tabulares para que no baile al cambiar de cantidad. */

/* La confirmacion del pedido pasa a vivir dentro de un modal, asi que
   pierde su propio marco: una caja dentro de otra se ve mal. */
#okOvl .okmsg{border:0;background:none;padding:0;margin:0}
#okOvl .okmsg h3{margin:10px 0 14px}
#okOvl .okmsg p{margin:0 0 12px}
#okOvl .okmsg .note{font-size:13px;color:var(--faint)}
#okOvl .okcall{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
#okOvl .bookcall{margin-top:6px}

/* ---------- estado dentro de la tarjeta ----------
   Era el quinto cuadro de una fila de cuatro y dejaba el hueco impar.
   Va en la banda central, que quedo libre al sacar de ahi el boton de
   voltear. Punto de color + palabra: se entiende de un vistazo. */
/* En el flujo, no absoluto: .inn es un flex en columna con
   space-between y reparte el aire solo. Antes iba en top:50% con un
   margin-bottom en el chip para compensar, y se solapaban 4px. */
.cstatus{align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(253,250,240,.72);white-space:nowrap}
.cstatus::before{content:"";width:7px;height:7px;border-radius:50%;
  background:rgba(253,250,240,.4);flex:none}
.cstatus.on::before{background:var(--mint,#D0FEF5);box-shadow:0 0 0 3px rgba(208,254,245,.18)}
.cstatus.wait::before{background:var(--gold-hi)}


/* ---------- lista de certificados dentro del diploma ----------
   Un socio puede tener varios lotes: uno por cada aprobacion en #admin.
   El diploma solo hablaba del primero. */
.pclots{margin-top:26px;border-top:1px solid rgba(16,13,10,.22);padding-top:16px}
.pclotsh{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px}
.pclots ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pclots li{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:baseline;
  font-size:12px;padding-bottom:6px;border-bottom:1px solid rgba(16,13,10,.12)}
.pclots li:last-child{border-bottom:0;padding-bottom:0}
.pclots li b{font-family:var(--display);font-weight:700;letter-spacing:.08em;color:var(--ink,#17130F)}
.pclots .pcq{font-variant-numeric:tabular-nums;font-weight:600}
.pclots .pcq::after{content:" \00d7"}
.pclots .pcd,.pclots .pcc{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .pclots li{grid-template-columns:1fr auto;gap:4px 12px}
  .pclots .pcd,.pclots .pcc{grid-column:1/-1;font-size:10.5px}
}

/* ---------- impresion y PDF ----------
   El bloque de arriba ya aislaba el certificado. Faltaba decirle a la
   pagina que tamano tiene, y que conserve los colores: sin esto el
   navegador imprime los fondos en blanco y el diploma pierde el sentido. */



/* ---------- hueco del video del hero ----------
   Aqui estaba la rejilla de puntos de "1,000,000 certificates". Mantiene
   la misma huella (560 px de ancho maximo) para no mover el resto del
   hero. Cuando entre el <video> de verdad hereda estas mismas medidas,
   asi que la pagina no da un salto al sustituirlo. */
/* El video ya no vive en la columna del hero, sino en su propia banda:
   ahi cabia 560 px como mucho y quedaba pequeno y pegado a la izquierda. */
.vidsec{padding-top:0;padding-bottom:clamp(50px,6vw,90px)}
.herovid{margin:0 auto;width:min(1100px,100%);aspect-ratio:16/9;
  position:relative;overflow:hidden;border:1px solid var(--line);
  background:#100D0A;box-shadow:0 40px 90px -50px rgba(16,13,10,.45)}
/* el reproductor de verdad, dentro de la misma caja */
.herovid video{display:block;width:100%;height:100%;object-fit:cover;
  background:#100D0A;border:0}
/* El pie va ARRIBA: los controles del navegador ocupan la franja de
   abajo, asi que abajo se pisarian. */
.herovid figcaption{position:absolute;left:0;right:0;top:0;padding:16px 20px 34px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  pointer-events:none;text-shadow:0 1px 10px rgba(16,13,10,.7);
  background:linear-gradient(to bottom,rgba(16,13,10,.62),transparent)}


/* Support son cuatro personas: en una fila de cuatro sus fotos salen algo
   mayores que las de los grupos siguientes, que es la jerarquia que usa
   young.com (alli van a 207 px frente a 165 y 134). */
.crew.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.crew.four{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.crew.four{grid-template-columns:repeat(2,1fr)}}
.crewhead{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--faint);margin:clamp(56px,6vw,90px) 0 0}

/* ---------- la cita del fundador, con su cara al lado ----------
   Estaba centrada y sola en mitad de la pagina. Con el retrato al lado
   se sabe de quien es sin bajar la vista al pie. */
.qwrap{display:grid;grid-template-columns:clamp(150px,17vw,230px) minmax(0,1fr);
  gap:clamp(26px,4vw,60px);align-items:center;max-width:1120px;margin:0 auto}
.qface{margin:0;position:relative;overflow:hidden;aspect-ratio:1;
  background:var(--raise);border-radius:50%}
.qface img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.96)}
@media(max-width:760px){
  .qwrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px}
  .qface{width:clamp(120px,34vw,170px)}
}


/* La marca de muestra va sin escalar, para que se lea: se compensa el
   zoom del padre con el inverso. */
.cert::after{content:"Specimen";position:absolute;top:20px;left:20px;zoom:2.155;
  font-family:var(--body);font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);padding:4px 9px;background:var(--panel-2)}
@media(max-width:1100px){.cert{zoom:.41}}
@media(max-width:620px){.cert{zoom:.30}}

/* =================================================================
   THE OFFER, rehecha
   -----------------------------------------------------------------
   La anterior presentaba un instrumento financiero como un folleto de
   tarjetas, con un certificado falso a tamano real en medio. Ahora se
   presenta como lo que es: una ficha tecnica. Clausulas numeradas, una
   tabla de terminos y una tabla comparativa de niveles, que es como se
   comparan tres opciones sin tener que leerlas tres veces.

   El ritmo tipografico viene de los one-pagers de Hospitality y Media:
   secciones mucho mas aireadas (hasta 160 px frente a 110), titulares
   mas grandes y un contenedor mas ancho. Los colores son los de
   Community, que no se tocan.
   ================================================================= */

.ofopen{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(50px,6vw,96px)}
.ofbig{font-size:clamp(40px,7.4vw,116px);line-height:.94;letter-spacing:-.02em;margin:0}
.oflead{margin:clamp(26px,3vw,44px) 0 0;max-width:56ch;
  font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.66;color:var(--muted)}

/* los datos duros, en una fila con cifras alineadas */
.offacts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:clamp(44px,5vw,80px) 0 0;
  border-top:1px solid var(--line)}
.offacts>div{padding:clamp(24px,2.8vw,36px) clamp(20px,2.6vw,38px);
  border-right:1px solid var(--line);text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.offacts>div:last-child{border-right:0}
.offacts dt{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.offacts dd{margin:0;font-family:var(--display);font-weight:700;line-height:.96;
  font-size:clamp(26px,3.4vw,46px);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.offacts dd{display:inline-flex;align-items:baseline;justify-content:center;gap:.14em}
.offacts dd i{font-style:normal;font-size:.42em;letter-spacing:.04em;color:var(--faint);
  transform:translateY(-.06em)}
.offacts dd.sm{font-family:var(--body);font-weight:600;font-size:clamp(14px,1.4vw,17px);
  line-height:1.34;letter-spacing:0;color:var(--ivory)}
.offacts dd.sm i{display:block;margin:6px 0 0;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;transform:none}
@media(max-width:860px){
  .offacts{grid-template-columns:1fr 1fr}
  .offacts>div:nth-child(2n){border-right:0}
  .offacts>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---- las secciones numeradas ---- */
.ofsec{padding-top:clamp(64px,8.5vw,140px);padding-bottom:clamp(64px,8.5vw,140px)}
.ofkick{display:flex;align-items:baseline;gap:clamp(16px,2vw,30px);margin:0 0 clamp(14px,1.6vw,22px);
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,48px);line-height:1.02;letter-spacing:-.005em;color:var(--ivory)}
.ofkick span{flex:none;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.28em;
  color:var(--gold);padding-top:.5em}
.ofsub{margin:0 0 clamp(30px,3.4vw,52px);max-width:60ch;font-size:14.5px;line-height:1.68;color:var(--faint)}

/* ---- 01: las clausulas ---- */
.ofclauses{margin:0;padding:0;border-top:1px solid var(--line)}
.ofclauses>div{display:grid;grid-template-columns:minmax(200px,.34fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line)}
.ofclauses dt{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.6vw,20px);line-height:1.14;letter-spacing:.01em;color:var(--gold-hi)}
.ofclauses dd{margin:0;font-size:clamp(15px,1.45vw,17.5px);line-height:1.66;color:var(--muted);max-width:62ch}
@media(max-width:760px){.ofclauses>div{grid-template-columns:1fr;gap:10px}}

/* ---- las tablas ---- */
.oftw{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.oftable,.ofcmp{width:100%;border-collapse:collapse;text-align:left}
.oftable th,.oftable td{padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.oftable th{width:clamp(150px,24%,280px);font-weight:500;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);padding-right:24px}
.oftable td{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(14px,1.7vw,21px);letter-spacing:.02em;color:var(--ivory)}

/* comparativa de niveles */
.ofcmp{min-width:640px}
.ofcmp thead th{padding:0 14px clamp(18px,2vw,26px);border-bottom:1px solid var(--line-2);
  text-align:center;vertical-align:bottom}
.ofcmp thead td{border-bottom:1px solid var(--line-2)}
.ofcmp thead b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(13px,1.5vw,18px);letter-spacing:.03em;color:var(--ivory);line-height:1.1}
.ofcmp thead span{display:block;margin-top:8px;font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}
.ofcmp thead i{display:block;margin-top:6px;font-style:normal;font-size:11px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.ofcmp tbody th{font-weight:400;font-size:13.5px;line-height:1.5;color:var(--muted);
  padding:clamp(13px,1.5vw,17px) 24px clamp(13px,1.5vw,17px) 0;border-bottom:1px solid var(--line)}
.ofcmp tbody td{width:clamp(96px,13%,150px);text-align:center;border-bottom:1px solid var(--line);position:relative}
/* la marca de incluido: una palomita dibujada, sin fuente de iconos */
.ofcmp td.y::after{content:"";display:inline-block;width:11px;height:6px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg) translateY(-2px)}
.ofcmp td.n::after{content:"";display:inline-block;width:11px;height:1px;background:var(--line-2)}
.ofcmp .hi{background:rgba(16,13,10,.05)}
.ofcmp thead th.hi{background:rgba(16,13,10,.05)}

/* ---- 04: el camino ---- */
.ofroad{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,36px);counter-reset:paso}
.ofroad li{position:relative;padding-top:clamp(26px,3vw,40px);border-top:2px solid var(--line);counter-increment:paso}
.ofroad li.now{border-top-color:var(--gold)}
.ofroad li::before{content:counter(paso,decimal-leading-zero);position:absolute;top:-2px;left:0;
  transform:translateY(-130%);font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.2em;color:var(--faint)}
.ofroad li.now::before{color:var(--gold)}
.ofroad .when{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px}
.ofroad b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(14px,1.5vw,19px);line-height:1.14;color:var(--ivory);margin-bottom:12px}
.ofroad p{margin:0;font-size:13.5px;line-height:1.62;color:var(--faint)}
@media(max-width:1000px){.ofroad{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,44px)}}
@media(max-width:560px){.ofroad{grid-template-columns:1fr}}

/* ---- 05: las tres pruebas ---- */
.ofproof{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,52px);
  padding-top:clamp(8px,1vw,16px)}
.ofproof b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(14px,1.5vw,19px);color:var(--gold-hi);margin-bottom:14px;
  padding-top:18px;border-top:2px solid var(--line)}
.ofproof p{margin:0;font-size:14px;line-height:1.68;color:var(--muted)}
@media(max-width:860px){.ofproof{grid-template-columns:1fr}}

/* ---- la firma ---- */
.ofsign{margin-top:clamp(34px,4vw,56px);display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.ofsign .script{font-family:var(--script);font-size:clamp(28px,3.4vw,44px);color:var(--gold-hi);line-height:1}
.ofsign em{font-style:normal;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}

/* ---- fotos de la pagina ---- */
.ofband{position:relative;margin:0;padding:0;overflow:hidden;aspect-ratio:21/9;background:var(--raise)}
.ofband img{width:100%;height:100%;object-fit:cover;display:block}
.ofband figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(30px,4vw,52px) clamp(20px,5.2vw,96px) clamp(18px,2vw,28px);
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(16,13,10,.72),transparent);text-shadow:0 1px 10px rgba(16,13,10,.6)}
.ofduo{padding-top:0;padding-bottom:clamp(50px,6vw,96px)}
.ofduo .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
.ofduo figure{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--raise)}
.ofduo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.ofduo figure:hover img{transform:scale(1.04)}
.ofduo figcaption{position:absolute;left:0;right:0;bottom:0;padding:32px 16px 14px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(16,13,10,.78) 0%,rgba(16,13,10,.42) 45%,transparent 100%);
  text-shadow:0 1px 12px rgba(16,13,10,.6)}
@media(max-width:680px){.ofduo .wrap{grid-template-columns:1fr}}

/* ---------- la foto del edificio en "Asset-backed" ----------
   Aqui habia primero tres cuadrados encajados y luego una barra. Las dos
   eran un grafico de una sola cifra ocupando media seccion. En una
   seccion que habla de edificios que generan ingresos, la foto del
   edificio dice lo mismo y mejor; el 61% ya esta escrito en la lista de
   al lado. */
.assetshot{position:relative;margin:0;overflow:hidden;aspect-ratio:3/4;
  background:var(--raise);max-width:440px;width:100%}
.assetshot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.assetshot:hover img{transform:scale(1.04)}
.assetshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(16,13,10,.78) 0%,rgba(16,13,10,.42) 45%,transparent 100%);
  text-shadow:0 1px 12px rgba(16,13,10,.6)}
@media(max-width:900px){.assetshot{max-width:none;aspect-ratio:16/10}}

/* ---------- apertura de The Offer, en dos columnas ----------
   Como el hero del landing: el titular a un lado y el certificado al
   otro. La tarjeta usa .ocard, asi que hereda exactamente las mismas
   dimensiones (min(480px,92%), proporcion 1.586) y el mismo brillo. */
.ofintro{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,80px);
  align-items:center}
.ofintro-txt{min-width:0}
.ofcardwrap{display:flex;flex-direction:column;align-items:center;perspective:1200px}
@media(max-width:960px){
  .ofintro{grid-template-columns:1fr;gap:clamp(34px,6vw,56px)}
  .ofcardwrap{align-items:flex-start}
}
/* tres datos, no cuatro: el instrumento ya lo dice el pie de la tarjeta */
.offacts{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){
  .offacts{grid-template-columns:1fr 1fr}
  .offacts>div:nth-child(3){border-right:0}
}

/* ---------- filas de tres fotos ----------
   Sustituyen a las bandas de 21:8. Aquella proporcion, tan apaisada,
   tiraba el 70% de una foto vertical: en el brindis se comia la cara y
   en el restaurante dejaba media pared vacia. Casi todo el material de
   origen es vertical, asi que 3/4 en tres columnas le va mejor.

   Sin relleno arriba ni abajo: la seccion siguiente ya trae el suyo, y
   sumar los dos era lo que dejaba esos huecos enormes despues de cada
   banda. */
.triosec{padding-top:0;padding-bottom:0}
.tri.concap figure{position:relative}
.tri.concap figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(16,13,10,.78) 0%,rgba(16,13,10,.4) 46%,transparent 100%);
  text-shadow:0 1px 12px rgba(16,13,10,.6)}
.tri img{transition:transform 1.1s var(--ease)}
.tri figure:hover img{transform:scale(1.04)}
@media(max-width:680px){
  .tri{grid-template-columns:1fr 1fr;gap:8px}
  .tri figure:nth-child(3){grid-column:1/-1;aspect-ratio:16/10}
}

/* ---------- la carta del fundador, con su retrato al lado ---------- */
.fletter{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,5vw,76px);
  align-items:start}
.fletter-txt{min-width:0}
.fletter-foto{margin:0;position:relative;overflow:hidden;aspect-ratio:3/4;
  background:var(--raise);position:sticky;top:118px}
.fletter-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.fletter-foto:hover img{transform:scale(1.03)}
@media(max-width:900px){
  .fletter{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .fletter-foto{position:static;aspect-ratio:16/10;max-width:520px}
}

/* La nota bajo cada llamada a la accion. Importa: "Request your
   certificates" registra una preinscripcion, NO cobra (la pasarela de
   pago es todavia un stub en el backend), y quien pulsa tiene que
   saberlo antes, no despues. */
.ctanote{margin:clamp(18px,2vw,26px) 0 0;font-size:11.5px;letter-spacing:.02em;
  color:var(--faint);text-align:center}
.ctaband .lead{max-width:56ch;margin-left:auto;margin-right:auto;text-align:center}

/* =================================================================
   THE OFFER — 01 y 02, rediseñadas

   Reglas NUEVAS. Van al final de web/community/community.css, después
   del bloque de The Offer. No sustituyen nada: .ofclauses y .oftable
   siguen ahí y se pueden borrar cuando el cambio esté aprobado
   (.oftable la usa sólo la sección 02; .ofclauses, sólo la 01).

   Por qué así:

   01 pasa a ser un MECANISMO. Primero un diagrama de tres cajas y dos
   flechas —dónde están las acciones, dónde se quedan los votos, qué
   llega al socio— y debajo las cuatro cláusulas en tarjetas numeradas
   con un pictograma dibujado. El número grande da jerarquía sin
   añadir texto y el pictograma deja identificar cada cláusula de un
   vistazo, que es lo que una lista con filete no permitía.

   02 pasa a ser un DOCUMENTO EN NEGATIVO. Fondo oscuro, mismo radio y
   mismo brillo que el certificado de la apertura (.ocard): la carta se
   lee como el propio certificado ampliado. Los seis puntos van en
   rejilla de 3x2, etiqueta pequeña y valor en Manuka grande, cada uno
   bajo su propio filete superior (el mismo recurso de .ofproof y
   .ofroad). Ni tabla ni filas: 01 y 02 ya no se parecen en nada.

   Contraste sobre oscuro: --gold es tinta, como en la referencia, y
   sobre #100D0A no llega ni a 1.5:1, así que dentro de .ofplate el
   acento sube a la lavanda #93B1FF que la hoja ya usa en superficie
   oscura (.ocard, #pre .bar). Comprobado sobre el fondo de la placa:
   #93B1FF 5.9:1, #93B1FF 7.9:1, #FDFAF0 15:1.
   ================================================================= */

/* ---------- 01 · el mecanismo ---------- */
.ofmech{display:grid;
  grid-template-columns:1fr minmax(56px,.5fr) 1fr minmax(56px,.5fr) 1fr;
  align-items:stretch;gap:clamp(8px,1.2vw,18px);
  margin:0 0 clamp(38px,4.4vw,68px)}

.ofmech-node{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(14px,1.6vw,20px);padding:clamp(20px,2.2vw,30px);
  border:1px solid var(--line);background:var(--panel);
  transition:border-color .45s var(--ease)}
.ofmech-node.is-you{border-color:var(--line-2);background:rgba(16,13,10,.05)}
.ofmech-node:hover{border-color:var(--line-2)}
.ofmech-ico{flex:none;width:clamp(28px,3vw,36px);height:clamp(28px,3vw,36px);
  color:var(--gold);display:block}
.ofmech-node b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(14px,1.5vw,19px);line-height:1.1;letter-spacing:.01em;color:var(--ivory)}
.ofmech-tag{margin-top:auto;width:100%;padding-top:12px;border-top:1px solid var(--line);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi)}

/* la flecha: un filete que estira y una punta dibujada */
.ofmech-arr{position:relative;align-self:center;display:flex;align-items:center;gap:6px}
.ofmech-arr i{flex:1 1 auto;min-width:20px;height:1px;background:var(--line-2)}
.ofmech-arr svg{flex:none;width:9px;height:14px;color:var(--gold)}
.ofmech-arr em{position:absolute;left:50%;bottom:calc(50% + 9px);transform:translateX(-50%);
  white-space:nowrap;font-style:normal;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold)}

@media(max-width:860px){
  .ofmech{grid-template-columns:1fr;gap:0}
  .ofmech-arr{flex-direction:column;justify-content:center;height:66px;gap:8px}
  .ofmech-arr i{width:1px;height:auto;min-width:0;min-height:14px}
  .ofmech-arr svg{transform:rotate(90deg)}
  .ofmech-arr em{position:static;transform:none}
  .ofmech-tag{margin-top:4px}
}

/* ---------- 01 · las cuatro cláusulas, en tarjetas ---------- */
.ofcards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);
  margin:0;padding:0;counter-reset:ofc}
.ofcard{position:relative;overflow:hidden;counter-increment:ofc;
  padding:clamp(26px,3vw,44px);border:1px solid var(--line);background:var(--panel);
  transition:border-color .45s var(--ease),background .45s var(--ease)}
.ofcard:hover{border-color:var(--line-2);background:var(--panel-2)}

/* el número, grande y al fondo. Relleno flojo por defecto; contorno
   donde el navegador sepa dibujarlo. */
.ofcard::before{content:counter(ofc,decimal-leading-zero);
  position:absolute;top:-.16em;right:.04em;z-index:0;pointer-events:none;
  font-family:var(--display);font-weight:700;line-height:.8;
  font-size:clamp(76px,8.4vw,136px);letter-spacing:-.02em;
  color:rgba(16,13,10,.10)}
@supports(-webkit-text-stroke:1px red){
  .ofcard::before{color:transparent;-webkit-text-stroke:1px rgba(16,13,10,.24)}
}

.ofcard-ico{position:relative;z-index:1;display:block;
  width:clamp(34px,3.6vw,42px);height:clamp(34px,3.6vw,42px);
  color:var(--gold);margin:0 0 clamp(22px,2.6vw,34px)}
.ofcards dt{position:relative;z-index:1;margin:0 0 12px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,1.8vw,23px);line-height:1.1;letter-spacing:.01em;color:var(--gold-hi)}
.ofcards dd{position:relative;z-index:1;margin:0;max-width:44ch;
  font-size:clamp(14.5px,1.4vw,17px);line-height:1.66;color:var(--muted)}

@media(max-width:760px){.ofcards{grid-template-columns:1fr}}

/* ---------- 02 · la carta, en negativo ----------
   Mismo radio (16px) y mismo halo que .ocard: es el certificado de la
   apertura llevado a tamaño de página. */
.ofplate{position:relative;overflow:hidden;border-radius:16px;
  padding:clamp(16px,2vw,30px);
  background:linear-gradient(150deg,#231E19 0%,#17130F 46%,#241E18 100%);
  border:1px solid rgba(194,210,255,.22);
  box-shadow:0 40px 90px rgba(16,13,10,.28)}
.ofplate::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 160% at 12% 0%,rgba(147,177,255,.18),transparent 55%)}

.ofplate-grid{position:relative;z-index:1;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.4vw,52px) clamp(24px,3vw,46px);
  padding:clamp(18px,2.4vw,34px) clamp(18px,2.2vw,32px) clamp(26px,3vw,44px)}
.ofplate-grid>div{padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid rgba(253,250,240,.22)}
.ofplate-grid dt{margin:0 0 14px;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:#93B1FF}
.ofplate-grid dd{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,1.95vw,27px);line-height:1.1;letter-spacing:.015em;color:#FDFAF0}

@media(max-width:980px){.ofplate-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ofplate-grid{grid-template-columns:1fr}}

/* el pie: la firma y el sello */
.ofplate-foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:20px;
  align-items:flex-end;justify-content:space-between;
  border-top:1px solid rgba(253,250,240,.14);
  padding:clamp(20px,2.4vw,30px) clamp(18px,2.2vw,32px) clamp(8px,1.2vw,16px)}
.ofplate .ofsign{margin-top:0}
.ofplate .ofsign .script{color:#93B1FF}
.ofplate .ofsign em{color:rgba(253,250,240,.55)}

/* nada de lo anterior se mueve solo, pero por si acaso */
@media(prefers-reduced-motion:reduce){
  .ofcard,.ofmech-node{transition:none}
}

/* El numero de certificados, junto al titulillo. Antes colgaba al final
   de la fila de cuadraditos, donde quedaba suelto y costaba saber a que
   se referia. */
.wcerthead{display:flex;align-items:baseline;gap:12px}
.wcerthead b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.04em;
  color:var(--gold-hi);text-transform:none;font-variant-numeric:tabular-nums}
.wcerthead b:empty{display:none}

/* ================= impresion del certificado =================
   Antes salia un folio EN BLANCO, por dos motivos.

   Uno: la regla decia `body > *:not(#certOvl){display:none}`, pero
   #certOvl no cuelga de body, esta dos divs por dentro de <main>. Asi
   que ocultaba <main> entero y con el el certificado. Ahora se usa
   visibility, que si atraviesa ancestros: se esconde todo y se vuelve a
   mostrar solo la rama del certificado, este a la profundidad que este.

   Dos: el candado de scroll de los modales deja el body en
   position:fixed con un top negativo, y al imprimir eso saca el
   contenido fuera del papel. Aqui se anula.

   El papel es A4 HORIZONTAL, que es la forma del certificado. */
@page{size:A4 landscape;margin:0}

@media print{
  html.ovl-open,html.ovl-open body{overflow:visible !important;position:static !important;
    top:auto !important;left:auto !important;right:auto !important;width:auto !important}
  html,body{background:#fff !important}

  body *{visibility:hidden !important}
  #certOvl,#certOvl *{visibility:visible !important}

  #certOvl{position:absolute !important;left:0;top:0;right:auto;bottom:auto;
    width:100%;height:auto;display:block !important;
    background:#fff !important;backdrop-filter:none !important;padding:0 !important;
    overflow:visible !important}
  #certOvl .modal{max-width:none !important;width:100% !important;margin:0 !important;
    padding:0 !important;box-shadow:none !important;border:0 !important}
  /* los botones no se imprimen */
  #certOvl .mx,#certOvl .mbtn,#certOvl [data-close]{display:none !important}

  .pcert{width:100% !important;max-width:none !important;margin:0 !important;
    box-shadow:none !important}
  .pcert,.pcert *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pclots{break-inside:avoid}
  .afm{break-inside:avoid}
}


/* =================================================================
   FAQ (#p-faq) — prefijo .fq
   -----------------------------------------------------------------
   Antes era un acordeon plano de seis filas y una sola llamada a la
   accion al final. Ahora la pagina tiene el mismo ritmo que The Offer:
   apertura grande con la primera llamada arriba del todo, cifras
   duras, la pregunta importante fuera del acordeon, el resto por
   temas con filtro, y tres salidas antes del cierre.

   No hay ni un color nuevo: todo sale de las variables de :root. Los
   dos rgba() literales que aparecen son los mismos que ya usan
   .bleed::after y .charter, y estan anotados donde salen.

   Se apoya en piezas que ya existen: .btn, .qa (el acordeon y su JS),
   .riskbox, .ctanote, .eyebrow, .mask, .reveal, .wipe.
   ================================================================= */


/* ---------- apertura, en dos columnas ---------- */
.fqopen{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(50px,6vw,96px)}
.fqhead{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,80px);align-items:center}
.fqhead-txt{min-width:0}
.fqbig{font-size:clamp(40px,7.4vw,116px);line-height:.94;letter-spacing:-.02em;margin:0}
.fqlead{margin:clamp(26px,3vw,44px) 0 0;max-width:52ch;
  font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.66;color:var(--muted)}

/* la foto de la apertura: vertical, con degradado bajo el pie */
.fqshot{margin:0;position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--raise)}
.fqshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.fqshot:hover img{transform:scale(1.04)}
.fqshot figcaption,.fqtrio figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  /* mismo degradado que .ofduo figcaption: tinta sobre foto siempre con respaldo */
  background:linear-gradient(to top,rgba(16,13,10,.78) 0%,rgba(16,13,10,.42) 45%,transparent 100%);
  text-shadow:0 1px 12px rgba(16,13,10,.6)}
@media(max-width:960px){
  .fqhead{grid-template-columns:1fr;gap:clamp(34px,6vw,56px)}
  .fqshot{aspect-ratio:16/10}
}

/* ---------- filas de botones ---------- */
.fqctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:clamp(28px,3.2vw,42px)}
.fqctas.mid{justify-content:center}
/* .ctanote viene centrada de serie; en la apertura el texto va a la izquierda */
.fqopen .ctanote{text-align:left}
@media(max-width:960px){.fqctas .btn{flex:1 1 240px;justify-content:center}}

/* ---------- las cifras duras ----------
   El precio y la cantidad total llegan de YOUNG_OFFERING por
   #faqPrice y #faqSupply. Aqui no se escribe ningun numero de esos. */
.fqfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin:clamp(44px,5vw,80px) 0 0;border-top:1px solid var(--line)}
.fqfacts>div{padding:clamp(24px,2.8vw,36px) clamp(16px,2.2vw,32px);
  border-right:1px solid var(--line);text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.fqfacts>div:last-child{border-right:0}
.fqfacts dt{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.fqfacts dd{margin:0;font-family:var(--display);font-weight:700;line-height:.96;
  font-size:clamp(24px,3.2vw,44px);color:var(--gold-hi);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:baseline;justify-content:center;gap:.14em}
.fqfacts dd i{font-style:normal;font-size:.42em;letter-spacing:.04em;color:var(--faint);
  transform:translateY(-.06em)}
.fqfacts dd.sm{font-family:var(--body);font-weight:600;font-size:clamp(14px,1.4vw,17px);
  line-height:1.34;letter-spacing:0;color:var(--ivory);display:block}
.fqfacts dd.sm i{display:block;margin:6px 0 0;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;transform:none}
@media(max-width:860px){
  .fqfacts{grid-template-columns:1fr 1fr}
  .fqfacts>div:nth-child(2n){border-right:0}
  .fqfacts>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---------- la pregunta destacada ----------
   Fuera del acordeon a proposito: la respuesta que mas se busca no
   deberia costar un clic. */
.fqspot{padding-top:clamp(64px,8.5vw,140px);padding-bottom:clamp(64px,8.5vw,140px)}
.fqspot-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,72px);align-items:start;
  border-top:2px solid var(--gold);background:var(--panel);
  padding:clamp(30px,4.4vw,68px) clamp(24px,4vw,64px) clamp(34px,4.6vw,72px)}
.fqspot-kick{grid-column:1/-1;margin:0 0 clamp(18px,2.4vw,34px);
  font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold)}
.fqq{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,4.6vw,68px);line-height:.94;letter-spacing:-.01em;
  color:var(--ivory);margin:0;max-width:14ch}
.fqspot-a{min-width:0}
.fqa{margin:0;font-size:clamp(16px,1.55vw,20.5px);line-height:1.66;color:var(--muted);max-width:60ch}
.fqspot-a .fqlink{margin-top:clamp(24px,2.8vw,38px)}
@media(max-width:900px){
  .fqspot-in{grid-template-columns:1fr;gap:clamp(22px,3.6vw,34px)}
  .fqq{max-width:none}
}

/* ---------- enlace de texto, con su flecha ---------- */
.fqlink{display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--gold-hi);border-bottom:1px solid var(--line-2);padding-bottom:6px;
  transition:color .35s,border-color .35s}
.fqlink:hover{color:var(--gold);border-color:var(--gold)}
.fqlink .arr{display:inline-block;transition:transform .4s var(--ease)}
.fqlink:hover .arr{transform:translateX(5px)}

/* ---------- las tres fotos ----------
   Sin relleno propio: la seccion siguiente ya trae el suyo, y sumar
   los dos deja un hueco enorme. */
.fqtrio{padding-top:0;padding-bottom:0}
.fqtrio .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px)}
.fqtrio figure{margin:0;position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--raise)}
.fqtrio img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.fqtrio figure:hover img{transform:scale(1.04)}
@media(max-width:760px){
  .fqtrio .wrap{grid-template-columns:1fr 1fr;gap:8px}
  .fqtrio figure:nth-child(3){grid-column:1/-1;aspect-ratio:16/10}
}

/* ---------- secciones numeradas ---------- */
.fqsec{padding-top:clamp(64px,8.5vw,140px);padding-bottom:clamp(64px,8.5vw,140px)}
.fqkick{display:flex;align-items:baseline;gap:clamp(16px,2vw,30px);margin:0 0 clamp(14px,1.6vw,22px);
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,48px);line-height:1.02;letter-spacing:-.005em;color:var(--ivory)}
.fqkick span{flex:none;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.28em;
  color:var(--gold);padding-top:.5em}
.fqsub{margin:0 0 clamp(30px,3.4vw,52px);max-width:60ch;font-size:14.5px;line-height:1.68;color:var(--faint)}

/* ---------- filtro por temas, sin una linea de JavaScript ----------
   Cuatro radios ocultos (pero enfocables) y sus etiquetas. "All
   questions" viene marcado en el HTML: si algo falla, se ve todo.
   Los radios no se ocultan con display:none para que sigan llegando
   al teclado.

   Cada etiqueta va pegada a su radio (input:checked + label) y no
   colgando de un contenedor aparte: con la version anterior, Chrome
   no recalculaba el color de las etiquetas al cambiar de pestana y
   se quedaba marcada la primera. La lista si funciona por hermano
   general, que ahi el navegador si invalida.

   .fqfilter es la propia fila de pestanas: los radios, las etiquetas
   y .fqlist son todos hermanos, que es lo que ambos selectores
   necesitan. */
.fqfilter{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fqfilter>input{position:absolute;width:1px;height:1px;margin:0;padding:0;
  opacity:0;pointer-events:none;clip-path:inset(50%)}
.fqfilter>label{cursor:pointer;user-select:none;
  font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);padding:11px 18px 10px;
  transition:background .35s,color .35s,border-color .35s}
.fqfilter>label:hover{color:var(--gold-hi);border-color:var(--line-2)}
.fqfilter>input:checked+label{background:var(--gold);border-color:var(--gold);color:var(--noir)}
.fqfilter>input:focus-visible+label{outline:2px solid var(--gold);outline-offset:3px}

/* la lista rompe la fila y se lleva la raya que separa pestanas de preguntas */
.fqlist{flex:1 1 100%;min-width:0;
  margin-top:clamp(18px,2vw,26px);padding-top:clamp(26px,3vw,44px);
  border-top:1px solid var(--line)}

/* el filtro solo toca .fqgroup: la llamada a la accion intercalada no
   lleva esa clase, asi que se queda siempre a la vista */
#fqcat-own:checked~.fqlist .fqgroup:not([data-cat="own"]),
#fqcat-risk:checked~.fqlist .fqgroup:not([data-cat="risk"]){display:none}

/* ---------- grupos de preguntas ---------- */
.fqgroup{margin:0 0 clamp(34px,4vw,58px)}
.fqgroup:last-child{margin-bottom:0}
.fqgroup>h3{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,20px);
  font-size:clamp(15px,1.7vw,21px);color:var(--gold-hi);margin:0 0 clamp(14px,1.7vw,22px)}
.fqgroup>h3 em{flex:none;font-style:normal;font-family:var(--body);font-weight:500;
  font-size:9.5px;letter-spacing:.24em;color:var(--faint);transform:translateY(-.15em)}

/* el acordeon en si es .qa, que ya existe y ya tiene su JS.
   Aqui solo se le da contenedor, aire lateral y un canto de color
   cuando esta abierto. */
.fqqs{border-top:1px solid var(--line)}
.fqqs .qa{position:relative;transition:background .4s}
.fqqs .qa.open{background:var(--panel-2)}
.fqqs .qa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--ease)}
.fqqs .qa.open::before{transform:none}
.fqqs .qa button.q{padding-left:clamp(14px,1.6vw,24px);padding-right:clamp(14px,1.6vw,24px)}
.fqqs .qa .a p{padding-left:calc(clamp(14px,1.6vw,24px) + 12px + clamp(16px,2.4vw,36px));
  padding-right:clamp(14px,1.6vw,24px)}
@media(max-width:560px){
  .fqqs .qa .a p{padding-left:clamp(14px,1.6vw,24px)}
}

/* la caja de riesgo, dentro del grupo que le toca */
.fqrisk{margin-top:clamp(28px,3.2vw,44px)}

/* ---------- llamada a la accion intercalada ---------- */
.fqinline{margin:clamp(34px,4vw,58px) 0;text-align:center;
  border:1px solid var(--line-2);
  /* el mismo lavado de violeta que .charter */
  background:linear-gradient(160deg,rgba(16,13,10,.07),transparent 48%),var(--panel-2);
  padding:clamp(32px,4.2vw,62px) clamp(24px,3.4vw,54px) clamp(26px,3.4vw,48px)}
.fqinline h3{font-weight:400;font-size:clamp(22px,3vw,42px);line-height:1.02;margin:0 0 16px;color:var(--ivory)}
.fqinline p{margin:0 auto;max-width:52ch;font-size:14.5px;line-height:1.68;color:var(--muted)}
.fqinline .fqctas{margin-top:clamp(26px,3vw,38px)}
.fqinline .ctanote{margin-top:clamp(16px,1.8vw,22px)}

/* ---------- las tres salidas ---------- */
.fqroutes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.8vw,44px)}
.fqroute{display:flex;flex-direction:column;
  border-top:2px solid var(--line);padding-top:clamp(22px,2.6vw,34px);
  transition:border-color .45s var(--ease)}
.fqroute:hover{border-top-color:var(--gold)}
.fqroute b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,1.8vw,23px);line-height:1.1;color:var(--gold-hi);margin-bottom:14px}
.fqroute p{flex:1;margin:0 0 clamp(20px,2.4vw,30px);font-size:14px;line-height:1.66;color:var(--muted)}
.fqroute .fqlink{align-self:flex-start}
@media(max-width:860px){.fqroutes{grid-template-columns:1fr;gap:clamp(26px,4vw,38px)}}

/* ---------- cierre sobre foto ----------
   El rgba(253,250,240,...) es el valor de --noir, igual que en
   .bleed::after. Sin ese degradado la tinta oscura no se lee sobre
   la imagen. */
.fqfinal{position:relative;overflow:hidden;text-align:center;
  padding:clamp(90px,12vw,180px) var(--pad);
  border-top:1px solid var(--line);background:var(--raise)}
.fqfinal>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) contrast(.94)}
.fqfinal::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(253,250,240,.70) 0%,rgba(253,250,240,.86) 46%,rgba(253,250,240,.96) 100%)}
.fqfinal .wrap{position:relative;z-index:2}
.fqfinal h2{margin:0}
.fqfinal h2 .it{color:var(--gold-hi)}
.fqfinal .mask{display:inline-block}
.fqlead-c{margin-left:auto;margin-right:auto;text-align:center;max-width:44ch}
.fqfinal .fqctas{justify-content:center}

/* ---------- movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
  .fqshot img,.fqtrio img,.fqqs .qa::before,.fqroute,.fqlink .arr{transition:none !important}
}

/* =====================================================================
   THE OFFER · CERTIFICADO TIPO DIPLOMA
   ---------------------------------------------------------------------
   Mismo objeto que la tarjeta, otra piel. La raiz sigue siendo .ocard,
   asi que hereda sin tocar nada:
     · la caja       -> width:min(480px,92%) + aspect-ratio:1.586
     · el brillo     -> .ocard .sheen + @keyframes sheen
     · la inclinacion-> el JS de app.js engancha por .ocard
   Todo lo de aqui va prefijado con `dip`, y lo que pisa a la tarjeta
   oscura va bajo .ocard.dip (0-2-0) para ganar a las reglas de la piel
   clara de la linea 831, que son 0-1-0 y 0-2-0.

   Por que papel y no oscuro: la tarjeta oscura es el CARNET (un objeto
   que se lleva encima); el diploma es el DOCUMENTO que compras. El
   lenguaje de diploma del certificado grande —filete doble, sello,
   firma, numero de serie— es tinta sobre papel, y en negativo pierde la
   mitad de su gracia. Contra el fondo crema de la pagina (#FDFAF0) el
   papel (#FFFDF7) solo da 1,13:1, asi que la separacion NO la hace el
   relleno: la hacen el filo (borde de tinta al 18%) y una sombra
   proyectada de verdad. Es exactamente como se sostiene .pcert.
   El texto si contrasta de sobra: tinta #100D0A sobre papel 17:1,
   acento en tinta: 18,5:1 sobre crema.
   ===================================================================== */

/* ---------- el papel ---------- */
.ocard.dip{
  background:
    radial-gradient(120% 150% at 50% -25%, rgba(16,13,10,.07), transparent 62%),
    linear-gradient(160deg,#FFFDF7 0%,#FFFDF7 54%,#F6F0E2 100%);
  border:1px solid rgba(16,13,10,.18);
  border-radius:5px;              /* papel, no tarjeta. Sube a 16px si lo prefieres en familia */
  box-shadow:0 26px 58px -26px rgba(16,13,10,.5), 0 2px 6px rgba(16,13,10,.07);
  color:var(--ivory);
}

/* el resplandor violeta de la tarjeta se convierte en guilloche:
   dos tramas cruzadas muy tenues, apagadas en el centro con una
   mascara para que no ensucien el texto */
.ocard.dip::before{
  background:
    repeating-linear-gradient(58deg, rgba(16,13,10,.055) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-58deg, rgba(16,13,10,.05) 0 1px, transparent 1px 7px);
  -webkit-mask:radial-gradient(100% 78% at 50% 50%, transparent 34%, #000 100%);
  mask:radial-gradient(100% 78% at 50% 50%, transparent 34%, #000 100%);
}

/* el barrido: mismo movimiento, otra tinta. Sobre papel una banda oscura
   pareceria suciedad, asi que barre luz con un filo violeta detras */
.ocard.dip .sheen{
  background:linear-gradient(115deg,
    transparent 40%,
    rgba(255,255,255,.9) 48%,
    rgba(16,13,10,.10) 53%,
    transparent 62%);
}

/* ---------- marco de filete doble ---------- */
.dip-frame{
  position:absolute;
  inset:clamp(7px,1.5vw,10px);
  z-index:2;
  border:1px solid rgba(16,13,10,.4);
  outline:1px solid rgba(16,13,10,.15);
  outline-offset:3px;             /* 1+3+1 = 5px < 7px de inset: nunca toca el borde del papel */
  padding:clamp(12px,2.3vw,19px) clamp(14px,2.6vw,22px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;  /* tres bloques, reparto automatico: igual que .inn */
}

/* ---------- cabecera: serie · marca · ronda ---------- */
.dip-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.dip-no,.dip-yr{
  font-family:var(--body);font-weight:500;line-height:1.1;
  font-size:clamp(11px,1.15vw,13px);letter-spacing:.16em;color:var(--gold-hi);
}
.dip-yr{text-align:right}
.dip-no small,.dip-yr small{
  display:block;font-weight:400;font-size:8.5px;letter-spacing:.28em;white-space:nowrap;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.ocard.dip .dip-mark{
  height:clamp(11px,1.25vw,14px);
  width:calc(clamp(11px,1.25vw,14px) * 5.6651);
  background:var(--gold-hi);      /* pisa a .ocard .lockup{background:#fff}, que aqui seria invisible */
}

/* ---------- cuerpo: el titulo y la linea del titular ---------- */
.dip-mid{text-align:center}
.dip-kick{
  margin:0 0 clamp(5px,.8vw,8px);line-height:1.3;
  font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
}
.dip-title{
  margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.9vw,42px);line-height:.9;letter-spacing:.005em;color:var(--ivory);
}
.dip-title em{
  display:block;margin-top:5px;font-family:var(--display);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:.44em;color:var(--gold);
}
/* el gesto de diploma: el renglon en blanco que se rellena al emitirlo */
.dip-issued{
  display:flex;align-items:baseline;gap:11px;
  margin:clamp(11px,1.7vw,16px) 0 0;
}
.dip-issued .t{
  font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;line-height:1.3;
  color:var(--muted);white-space:nowrap;
}
.dip-issued .d{flex:1;border-bottom:1px dotted rgba(16,13,10,.45);transform:translateY(-3px)}
.dip-issued b{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(12px,1.25vw,15px);letter-spacing:.06em;line-height:1.3;
  color:var(--gold-hi);white-space:nowrap;
}

/* ---------- pie: los datos de carnet ----------
   Sustituye a la firma manuscrita, que salio en el Feedback 3 y dejo la
   tarjeta con dos bloques y un hueco en medio. Tres datos cortos, en el
   mismo registro que la cabecera -rotulo diminuto arriba, dato debajo-,
   repartidos a lo ancho para que el pie tenga el mismo peso visual que
   la cabecera y la tarjeta cierre. */
.dip-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;
  border-top:1px solid rgba(16,13,10,.18);padding-top:clamp(9px,1.3vw,13px)}
.dip-fitem{font-family:var(--body);font-weight:500;line-height:1.1;
  font-size:clamp(9.5px,1.1vw,11.5px);letter-spacing:.1em;color:var(--ivory);white-space:nowrap}
.dip-fitem small{display:block;font-size:7.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px}
.dip-fmid{text-align:center}
.dip-fend{text-align:right}
/* el sello es ornamento, no lectura: a 74px el rotulo interior cae a 4,3px.
   Se aprieta el interletrado para que quepa dentro del anillo de r=36 */

/* ---------- movil ---------- */
/* Dos cosas a la vez. Una: la regla de la linea 1832 sube a 10,5px los
   rotulos de 8,5px de la tarjeta y del certificado grande, y los del
   diploma van con ella. Dos: la caja encoge con la pantalla (a 375px son
   308x194) pero el texto no puede encoger igual, asi que hay que apretar
   marco, titulo, firma y sello o el contenido se sale. Medido: sin esto
   sobran 28px de contenido a 375px de ancho. */
@media(max-width:760px){
  .dip-no small,.dip-yr small,.dip-issued .t{font-size:10.5px;letter-spacing:.2em}
  .dip-no small,.dip-yr small{margin-bottom:3px}
  .dip-kick{font-size:10px;letter-spacing:.26em}
  .dip-frame{inset:6px;padding:9px 12px}
  .dip-title{font-size:clamp(21px,5.6vw,26px)}
  .dip-title em{margin-top:3px;font-size:.5em}   /* .44em de 21px son 9px: ilegible */
  .dip-issued{margin-top:5px}
}

/* telefono (430 hacia abajo): la caja baja a 330x208, luego 308x194 y
   luego 294x186. Segundo apreton, y un poco de holgura de mas para que
   la fuente de respaldo (mientras Manuka y Haffer no han cargado) no
   desborde el marco. */
@media(max-width:430px){
  /* la cabecera de tres piezas no cabe: con la marca en medio, los dos
     rotulos se salen 32px. Se va la marca, que esta en toda la pagina;
     el numero de serie solo esta aqui. */
  .ocard.dip .dip-mark{display:none}
  .dip-frame{padding:7px 10px}
  .dip-title{font-size:21px}
  .dip-kick{margin-bottom:3px}
  .dip-issued{margin-top:5px;gap:8px}
  .dip-issued b{font-size:11px;letter-spacing:.04em}
  .dip-no small,.dip-yr small{letter-spacing:.14em}
}

/* 320px: la caja se queda en 258x162 y ya no cabe la cabecera de tres
   piezas. Sale la marca del centro —la marca esta en toda la pagina, el
   numero de serie solo aqui— y se rebaja el cuerpo. Aqui los rotulos
   bajan de los 10,5px de la regla de la casa: a esta anchura la
   alternativa no es texto mas grande, es texto cortado. Medido con el
   sumatorio de los tres bloques, no con scrollHeight: en un flex con
   space-between scrollHeight miente, siempre da la altura de la caja. */
@media(max-width:340px){
  .dip-frame{inset:4px;padding:6px 9px}
  .dip-head{gap:6px}
  .dip-no,.dip-yr{font-size:10px}
  .dip-no small,.dip-yr small,.dip-issued .t{font-size:9.5px;letter-spacing:.12em;margin-bottom:2px}
  .dip-kick{font-size:9px;letter-spacing:.18em;margin-bottom:2px}
  .dip-title{font-size:20px}
  .dip-title em{margin-top:2px;font-size:.5em}
  .dip-issued{margin-top:3px;gap:7px}
  .dip-issued b{font-size:10.5px}
}

/* ---------- movimiento reducido ---------- */
/* el barrido es decorativo: se apaga entero. La inclinacion ya la
   descarta app.js por su cuenta. */
@media(prefers-reduced-motion:reduce){
  .ocard.dip .sheen{animation:none !important;transform:none;opacity:0}
}

/* ================= el certificado descargable =================
   Comparte maqueta con el diploma de The Offer (.dip): misma cabecera,
   mismo cuerpo, misma firma. Cambia la caja: aqui NO se hereda la
   proporcion 1.586 de la tarjeta, porque el destino es un folio.
   El folio se dibuja SIEMPRE a tamano real —A4 apaisado a 96 dpi son
   1122 x 794 px— y se encoge entero con zoom para caber en el modal.
   Asi la vista previa es exactamente lo que sale por la impresora. El
   factor lo pone app.js en --pcz, porque depende del ancho del modal.

   min-height y no height: si un socio tiene muchos lotes, la hoja
   crece en vez de recortarle la lista. */
.pcert.dip{width:1122px;min-height:794px;max-width:none;aspect-ratio:auto;
  zoom:var(--pcz,1);
  border-radius:5px;position:relative;overflow:visible;
  display:flex;flex-direction:column;justify-content:center}
.pcert.dip .dip-frame{position:static;inset:auto;height:auto;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:32px 54px}

/* el dato que faltaba: cuantos certificados */
.pcqty{margin:clamp(16px,2vw,26px) 0 0;display:flex;align-items:baseline;
  justify-content:center;gap:12px}
.pcqty b{font-family:var(--display);font-weight:700;line-height:.9;
  font-size:clamp(38px,6vw,68px);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.pcqty span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}

.pcert.dip .pcbody{margin:20px auto 0;max-width:62ch;text-align:center;
  font-family:var(--body);font-size:15px;line-height:1.6;color:var(--muted)}

/* los tres datos, en una banda */
.pcstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:clamp(20px,2.6vw,34px) 0 0;border-top:1px solid rgba(16,13,10,.2);
  border-bottom:1px solid rgba(16,13,10,.2)}
.pcstrip>div{padding:clamp(12px,1.6vw,18px) 10px;text-align:center;
  border-right:1px solid rgba(16,13,10,.14)}
.pcstrip>div:last-child{border-right:0}
.pcstrip span{display:block;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);margin-bottom:7px}
.pcstrip b{font-family:var(--display);font-weight:700;font-size:clamp(13px,1.5vw,17px);
  letter-spacing:.02em;color:var(--gold-hi)}


/* ---- la letra del folio ----
   El diploma de The Offer es una tarjeta del tamano de una de credito,
   y sus tamanos estaban pensados para eso. El certificado descargable
   comparte maqueta pero mide 1122 x 794 px: heredando aquellos tamanos,
   el nombre del titular salia a 11 px en un folio entero, mas pequeno
   que el pie de pagina de una factura.

   Aqui se reescribe la escala para el folio. Todo en px fijos y con
   .pcert.dip por delante: el folio mide siempre lo mismo, asi que su
   interior NO puede depender del ancho de la ventana. Los tres bloques
   @media de arriba (760, 430 y 340 px) aprietan .dip-* para que la
   tarjeta quepa en un movil; con estas reglas, mas especificas, no
   alcanzan al folio, que en un movil se ve entero porque se encoge con
   zoom, no recolocando su contenido.

   El titular manda: es lo unico que distingue este certificado de
   cualquier otro. */
.pcert.dip .dip-frame{inset:auto}
.pcert.dip .dip-head{gap:16px}
.pcert.dip .dip-no,.pcert.dip .dip-yr{font-size:15px;letter-spacing:.16em}
.pcert.dip .dip-no small,.pcert.dip .dip-yr small{font-size:10px;letter-spacing:.28em;margin-bottom:7px}
.pcert.dip .dip-mark{display:block;height:22px;width:calc(22px * 5.6651);background:var(--gold-hi)}

.pcert.dip .dip-kick{font-size:12px;letter-spacing:.34em;margin-bottom:12px}
.pcert.dip .dip-title{font-size:62px;line-height:.9}
.pcert.dip .dip-title em{margin-top:9px;font-size:.42em}

.pcert.dip .dip-issued{margin-top:22px;gap:18px}
.pcert.dip .dip-issued .t{font-size:11px;letter-spacing:.26em}
.pcert.dip .dip-issued .d{transform:translateY(-6px)}
.pcert.dip .dip-issued b{font-size:34px;letter-spacing:.04em}

.pcert.dip .pcqty{margin-top:16px}
.pcert.dip .pcqty b{font-size:56px}
.pcert.dip .pcqty span{font-size:12px}

.pcert.dip .pcstrip span{font-size:10px;margin-bottom:9px}
.pcert.dip .pcstrip b{font-size:17px}


.pcert.dip .pclotsh{font-size:11px}
.pcert.dip .pclots li{font-size:12.5px}
.pcert.dip .pclots li b{font-size:12.5px}

.pcert.dip .pclots{margin-top:13px}

/* El folio es apaisado: sobra sitio a lo ancho y falta a lo alto. Con
   los lotes en una sola columna, cinco lotes ya partian el certificado
   en dos hojas. A dos columnas caben el doble en el mismo alto. */
.pcert.dip .pclots ul{grid-template-columns:1fr 1fr;gap:6px 40px}
/* dentro del folio no manda el ancho de la ventana, manda el folio */
.pcert.dip .pclots li{grid-template-columns:1fr auto auto auto;gap:12px}
.pcert.dip .pclots .pcd,.pcert.dip .pclots .pcc{grid-column:auto;font-size:11px}

/* ---- en el papel ---- */
@media print{
  /* En apaisado la altura del folio son 210 mm, no 297: con 297 la hoja
     era mas alta que la pagina y el certificado se partia en dos. */
  .pcert.dip{border-radius:0 !important;border:0 !important;
    width:297mm !important;min-height:210mm;zoom:1 !important;
    display:flex;flex-direction:column;justify-content:center}
  /* Ni el marco ni la cifra se retocan aqui. Lo hacian —14mm/18mm de
     marco y 64px de cifra, contra 44/54 y 56px en pantalla— y con eso
     el contenido crecia 18px por encima de los 210mm del folio: el
     certificado se partia en dos hojas justo por el pie. Ahora papel y
     pantalla son la misma maqueta, que es de lo que iba el zoom. */
  .pcert.dip .dip-frame{flex:1;display:flex;flex-direction:column;justify-content:center}
  /* en un folio no hay hover ni brillo que valga */
  .pcert.dip .sheen{display:none !important}
  .pclots{break-inside:avoid}
}

/* ---------- bandas de foto: sin relleno propio ----------
   Medido: 350 px entre la foto y el titular siguiente. Se sumaban el
   relleno inferior de la seccion de la foto (144), el superior de la
   siguiente (144) y el margen del titulillo. Una foto ya es un descanso
   visual: no necesita 288 px de respiro detras. */
.fotosec{padding-top:0;padding-bottom:0}
.fotosec + section,.triosec + section{padding-top:clamp(52px,5.6vw,90px)}

/* Relleno colapsado entre secciones consecutivas. Sin esto se suman el de
   abajo de una y el de arriba de la siguiente: 144 + 144 = 288 px. Las
   bandas quedan fuera porque su relleno ES su altura. */
.page > section + section:not(.fotosec):not(.triosec):not(.bleed):not(.ctaband):not(.vidsec){
  padding-top:clamp(38px,4.2vw,68px)}
/* Y el de abajo de la que va delante. Con los titulares a 55 px el
   relleno de 144 por lado dejaba 216 px de vacio entre dos secciones. */
.page > section:has(+ section):not(.bleed):not(.ctaband):not(.fotosec):not(.triosec):not(.vidsec){
  padding-bottom:clamp(34px,3.8vw,62px)}
/* Contra la banda de cierre el relleno no se puede colapsar por arriba
   —la banda lo necesita para existir—, asi que se recorta por abajo en la
   seccion anterior. Medido: se pasaba de 396 px de aire. */
.page > section:has(+ .ctaband):not(.bleed):not(.fotosec):not(.triosec){
  padding-bottom:clamp(46px,5vw,84px)}


/* ============ HOME ============ */
/* =================================================================
   HOME (p-home) — reposicionamiento "Built to compound"
   Reglas NUEVAS. Todas prefijadas .hm-  · Van al final de
   web/community/community.css.

   Reutiliza del sistema: .wrap .eyebrow .lead .btn .in/.mask .it
   .reveal .wipe .bleed .ctaband .triosec/.tri .fotosec/.solo
   .hero .vidsec/.herovid .note

   Ni un color nuevo: todo sale de las variables de :root.
   ================================================================= */

/* ---------- utilidad: fila de botones fuera del hero ----------
   .ctas solo esta definida dentro de .hero en el archivo original,
   asi que fuera del hero los botones quedaban sin flex y el
   justify-content:center en linea no hacia nada. .hm-ctas lo arregla
   sin tocar la regla global. */
.hm-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hm-ctas.hm-mid{justify-content:center}

/* ================= HERO ================= */
.hm-hl{color:var(--gold)}
.hm-herolead{max-width:52ch;margin:22px 0 20px}
.hm-support{font-family:var(--display);font-size:clamp(19px,2vw,29px);line-height:1.25;color:var(--gold-hi);
  margin:0 0 34px;max-width:22ch}

.hm-heroart{margin:0;position:relative;overflow:hidden;
  aspect-ratio:4/5;max-height:min(70svh,720px);
  background:var(--raise);align-self:center;width:100%}
.hm-heroart img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.hm-heroart:hover img{transform:scale(1.03)}
.hm-heroart figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:46px 18px 16px;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(16,13,10,.72) 0%,rgba(16,13,10,.34) 48%,transparent 100%);
  text-shadow:0 1px 12px rgba(16,13,10,.6)}
@media(max-width:1080px){
  .hm-heroart{aspect-ratio:16/10;max-height:none;margin-top:clamp(28px,5vw,44px)}
}

/* ================= TWENTY YEARS ================= */
.hm-origin{border-top:1px solid var(--line);background:var(--panel)}
.hm-origrid{display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,4.6vw,72px);align-items:start;
  margin-top:clamp(30px,4vw,52px)}
.hm-origtxt{min-width:0}
.hm-origtxt .lead{max-width:56ch}
.hm-origtxt .lead:last-child{margin-bottom:0}
.hm-origfoto{margin:0;position:relative;overflow:hidden;aspect-ratio:4/3;
  background:var(--raise)}
.hm-origfoto img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.hm-origfoto:hover img{transform:scale(1.04)}
.hm-origfoto figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:42px 16px 14px;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(16,13,10,.74) 0%,rgba(16,13,10,.32) 50%,transparent 100%)}
@media(max-width:900px){.hm-origrid{grid-template-columns:1fr}}

/* --- linea temporal: cuatro tramos ---
   Cuatro columnas con una regla horizontal continua y un punto por
   tramo. Por debajo de 860px se convierte en linea vertical, para no
   provocar nunca desplazamiento horizontal. */
.hm-tlhead{margin:clamp(46px,6vw,84px) 0 0;font-size:10.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.hm-tl{--hm-g:clamp(16px,2.2vw,34px);
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hm-g)}
.hm-tlx{position:relative;min-width:0;padding-top:30px}
.hm-tlx::before{content:"";position:absolute;top:0;left:0;
  right:calc(var(--hm-g) * -1);height:1px;background:var(--line-2)}
.hm-tlx:last-child::before{right:0}
.hm-tlx::after{content:"";position:absolute;top:-4.5px;left:0;
  width:10px;height:10px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px var(--panel)}
.hm-tlk{display:block;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.hm-tlx h3{font-size:clamp(17px,1.65vw,23px);line-height:1.06;
  color:var(--ivory);margin-bottom:10px}
.hm-tlx p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
@media(max-width:860px){
  .hm-tl{grid-template-columns:1fr;gap:0}
  .hm-tlx{padding:0 0 26px 26px}
  .hm-tlx::before{top:10px;bottom:0;left:4.5px;right:auto;
    width:1px;height:auto}
  .hm-tlx:last-child::before{display:none}
  .hm-tlx::after{top:0;left:0}
}

/* --- cierre destacado --- */
.hm-mantra{margin:clamp(48px,6vw,86px) 0 0;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.95;letter-spacing:-.01em;
  font-size:clamp(28px,4.4vw,64px);color:var(--ivory)}
.hm-mantra span{display:block}
.hm-mantra .it{color:var(--gold-hi);line-height:1.05}

/* ================= THE COMPOUNDER ================= */
.hm-comp{border-top:1px solid var(--line)}

.hm-chainwrap{margin-top:clamp(38px,5vw,66px)}

/* El recorrido del compounder.
   Antes eran siete cajas blancas en serpentina con chevrones: parecia un
   diagrama de herramienta. Ahora es una sola linea con seis paradas
   —numero arriba, punto sobre la linea, rotulo abajo— y la linea se tiñe
   de gris a violeta de izquierda a derecha. Ese degradado es el unico
   dato del dibujo: cada paso deja mas que el anterior. */
.hm-chain{list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.hm-chain::before{content:"";position:absolute;left:0;right:0;top:34px;height:1px;
  background:linear-gradient(90deg,var(--line) 0%,var(--gold-dim) 55%,var(--gold) 100%)}
.hm-chain li{position:relative;min-width:0;padding:0 clamp(12px,1.4vw,22px) 0 0}
.hm-chain li::before{content:"";position:absolute;left:0;top:29px;
  width:11px;height:11px;border-radius:50%;
  background:var(--noir);border:1.5px solid var(--gold);
  transform:scale(.55);opacity:.55;
  transition:transform .55s var(--ease),opacity .55s var(--ease);
  transition-delay:calc(var(--i) * .07s)}
.hm-chainwrap.in .hm-chain li::before{transform:scale(1);opacity:1}
/* el ultimo punto es el que cierra el bucle: macizo */
.hm-chain li:last-child::before{background:var(--gold)}
.hm-chain li b{display:block;height:26px;
  font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.18em;
  color:var(--gold);font-variant-numeric:tabular-nums}
.hm-chain li h3{margin:26px 0 0;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(12.5px,1.15vw,15.5px);line-height:1.16;letter-spacing:.015em;
  color:var(--ivory);text-wrap:balance}

/* el retorno: una curva discontinua que vuelve al principio */
.hm-return{position:relative;margin:clamp(26px,3vw,40px) 0 0;
  padding-top:clamp(26px,3vw,38px);
  border:1px dashed var(--gold-dim);border-top:0;
  border-radius:0 0 clamp(24px,3vw,44px) clamp(24px,3vw,44px);
  text-align:center;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:12px;letter-spacing:.24em;color:var(--gold)}
.hm-return span{display:inline-block;margin-right:8px;font-size:15px;
  transform:translateY(1px)}

@media(max-width:860px){
  /* en columna la linea pasa a vertical, con las paradas en un rail */
  .hm-chain{grid-template-columns:1fr;gap:22px}
  .hm-chain::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto;
    background:linear-gradient(180deg,var(--line),var(--gold))}
  .hm-chain li{padding:0 0 0 30px}
  .hm-chain li::before{top:5px;left:0}
  .hm-chain li b{height:auto;margin-bottom:5px}
  .hm-chain li h3{margin:0;font-size:16px}
  .hm-return{padding-top:22px}
}
@media(prefers-reduced-motion:reduce){
  .hm-chain li::before{transition:none;transform:scale(1);opacity:1}
}

.hm-compgrid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,3.4vw,56px);margin-top:clamp(40px,5vw,72px)}
.hm-compgrid .lead{max-width:52ch;margin-bottom:0}
@media(max-width:820px){.hm-compgrid{grid-template-columns:1fr}}

.hm-drum{margin:clamp(40px,5vw,72px) 0 0;padding-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,34px);
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,3.6vw,52px);line-height:1;letter-spacing:-.01em}
.hm-drum span{color:var(--ivory)}
.hm-drum span:last-child{color:var(--gold)}

/* ================= MULTIPLE ENGINES ================= */
.hm-eng{background:var(--panel);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.hm-engrid{display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(28px,5vw,86px);align-items:start}
.hm-engtxt{min-width:0}
.hm-tags{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px}
.hm-tags li{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-hi);border:1px solid var(--line-2);padding:10px 15px 9px}
@media(max-width:900px){.hm-engrid{grid-template-columns:1fr}}

/* ================= ONE ECOSYSTEM — seis motores ================= */
.hm-ecolead{margin:clamp(24px,3vw,38px) 0 0;max-width:56ch}
.hm-ecogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,28px);margin-top:clamp(38px,5vw,64px)}
.hm-eng-card{display:block;min-width:0;background:var(--panel-2);
  border:1px solid var(--line);color:inherit;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.hm-eng-card:hover{transform:translateY(-5px);border-color:var(--line-2);
  box-shadow:0 32px 60px -46px rgba(16,13,10,.45)}
.hm-eng-card figure{margin:0;aspect-ratio:16/10;background:var(--raise)}
.hm-eng-card figure img{width:100%;height:100%;object-fit:cover}
.hm-eng-card:hover figure img{transform:scale(1.05)}
.hm-ecbody{padding:clamp(20px,2.2vw,30px)}
.hm-ecbody h3{font-size:clamp(18px,1.85vw,25px);line-height:1.05;
  color:var(--ivory);margin-bottom:12px;transition:color .35s}
.hm-eng-card:hover .hm-ecbody h3{color:var(--gold-hi)}
.hm-ecbody p{margin:0 0 18px;font-size:14.5px;line-height:1.62;
  color:var(--muted)}
.hm-ecgo{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--gold)}
.hm-ecgo .arr{display:inline-block;transition:transform .4s var(--ease)}
.hm-eng-card:hover .hm-ecgo .arr{transform:translateX(5px)}
.hm-ecocta{margin-top:clamp(30px,3.6vw,48px)}
@media(max-width:1040px){.hm-ecogrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.hm-ecogrid{grid-template-columns:1fr}}

/* ================= AND NOW, OWNERSHIP ================= */
.hm-own{border-top:1px solid var(--line)}
.hm-ownlead{margin:clamp(24px,3vw,38px) 0 0;max-width:64ch}
.hm-claims{list-style:none;margin:clamp(38px,4.8vw,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.hm-claim{background:var(--noir);padding:clamp(24px,2.8vw,38px);
  min-width:0;transition:background .45s}
.hm-claim:hover{background:var(--panel)}
.hm-cnum{display:block;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.16em;color:var(--gold);margin-bottom:20px}
.hm-claim b{display:block;font-family:var(--display);font-weight:400;
  text-transform:uppercase;line-height:.98;letter-spacing:-.01em;
  font-size:clamp(22px,2.4vw,34px);color:var(--gold-hi)}
.hm-claim b sup{font-family:var(--body);font-size:.42em;font-weight:500;
  vertical-align:baseline;position:relative;top:-.62em;letter-spacing:0}
.hm-claim em{display:block;margin-top:10px;font-family:var(--body);
  font-size:15.5px;line-height:1.4;color:var(--muted)}
.hm-fn{margin:clamp(18px,2vw,26px) 0 0;max-width:70ch}
.hm-owncta{margin-top:clamp(30px,3.6vw,48px)}
@media(max-width:900px){.hm-claims{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.hm-claims{grid-template-columns:1fr}}

/* ================= movimiento reducido ================= */
@media(prefers-reduced-motion:reduce){
  .hm-heroart img,.hm-origfoto img,.hm-eng-card figure img{
    transform:none !important;transition:none !important}
  .hm-step,.hm-eng-card{transition:none}
}

/* ============ COMPOUND ============ */
/* =================================================================
   HOW WE COMPOUND (#p-compound) — prefijo .cmp-
   -----------------------------------------------------------------
   Reglas NUEVAS. Van al final de web/community/community.css. No
   sustituyen ni modifican nada de lo que ya hay.

   La pagina reutiliza tal cual: .wrap .eyebrow .lead .btn .btn.ghost
   .in/.mask .it .reveal .wipe .bleed .ctaband .triosec/.tri.concap
   .ymark .arr. Lo unico propio es el volante, las tarjetas de
   asignacion de capital, la placa del ejemplo historico y el aviso.

   Ni un color nuevo: todo sale de las variables de :root. Los rgba()
   literales que aparecen son los mismos que la hoja ya usa:
     rgba(16,13,10,.05/.06/.2)  -> .ofmech-node.is-you, .orbit .oring
     rgba(202,49,0,.08)         -> .navmenu button:hover
     rgba(16,13,10,...)          -> pies de foto sobre imagen
     #93B1FF / #93B1FF / #FDFAF0 -> tinta sobre superficie oscura,
       exactamente la misma paleta y los mismos contrastes ya
       comprobados en .ofplate (5.9:1, 7.9:1 y 15:1 sobre #100D0A).
   ================================================================= */


/* ---------- apertura, en dos columnas ---------- */
.cmp-open{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(50px,6vw,96px)}
.cmp-head{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,80px);align-items:center}
.cmp-head-txt{min-width:0}
.cmp-big{font-size:clamp(40px,7.4vw,116px);line-height:.94;letter-spacing:-.02em;margin:0}
.cmp-lead{margin:clamp(26px,3vw,44px) 0 0;max-width:52ch;
  font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.66;color:var(--muted)}

/* los cuatro pilares del parrafo de entrada, en fichas */
.cmp-pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin:clamp(26px,3vw,40px) 0 0;padding:0}
.cmp-pills li{border:1px solid var(--line);padding:9px 15px 8px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--gold-hi);background:var(--panel)}

.cmp-shot{margin:0;position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--raise)}
.cmp-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.cmp-shot:hover img{transform:scale(1.04)}
/* mismo degradado que .ofduo figcaption: pie claro siempre con respaldo */
.cmp-shot figcaption,.cmp-split-shot figcaption,.cmp-listen-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(16,13,10,.78) 0%,rgba(16,13,10,.42) 45%,transparent 100%);
  text-shadow:0 1px 12px rgba(16,13,10,.6)}
@media(max-width:960px){
  .cmp-head{grid-template-columns:1fr;gap:clamp(34px,6vw,56px)}
  .cmp-shot{aspect-ratio:16/10}
}


/* ---------- ritmo comun de las secciones ---------- */
.cmp-sec{padding-top:clamp(64px,8.5vw,140px);padding-bottom:clamp(64px,8.5vw,140px)}
.cmp-sub{margin:clamp(24px,2.8vw,38px) 0 0;max-width:58ch;
  font-size:14.5px;line-height:1.68;color:var(--faint)}


/* =================================================================
   EL VOLANTE
   -----------------------------------------------------------------
   Nueve pasos colocados sobre una circunferencia real. Cada <li>
   lleva su indice en --i y de ahi sale el angulo; la posicion es

     translate(-50%,-50%) rotate(A) translate(R) rotate(-A)

   El ultimo rotate deshace el giro, asi que la ficha queda derecha
   con su centro exactamente en el punto (R,A) de la circunferencia.
   El ancho de ficha se ata al radio (.52R) para que el hueco entre
   fichas vecinas no dependa del tamano de pantalla.

   Por debajo de 1024px el circulo ya no cabe con el texto legible, asi
   que pasa a columna: mismas fichas, apiladas, y una nota al pie que
   dice que el ciclo vuelve a empezar (arriba lo dicen las puntas de
   flecha del anillo, que en columna se ocultan).
   ================================================================= */
.cmp-wheelwrap{--cmp-r:clamp(210px,25.5vw,320px);
  --cmp-nw:calc(var(--cmp-r) * .60);
  position:relative;width:calc(var(--cmp-r) * 2.66);max-width:100%;
  aspect-ratio:1;margin:clamp(40px,5vw,72px) auto 0}

.cmp-wheel{position:absolute;inset:0;list-style:none;margin:0;padding:0;counter-reset:cmpstep}

/* el anillo */
.cmp-wheel::before{content:"";position:absolute;left:50%;top:50%;z-index:0;
  width:calc(var(--cmp-r) * 2);height:calc(var(--cmp-r) * 2);
  margin:calc(var(--cmp-r) * -1) 0 0 calc(var(--cmp-r) * -1);
  border:1px dashed rgba(16,13,10,.28);border-radius:50%;pointer-events:none}

.cmp-node{--a:calc(var(--i) * 40deg - 90deg);
  position:absolute;left:50%;top:50%;z-index:2;counter-increment:cmpstep;
  width:var(--cmp-nw);text-align:center;
  padding:clamp(11px,1.1vw,15px) clamp(10px,1vw,14px);
  background:var(--panel-2);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 6px 18px -14px rgba(16,13,10,.55);
  font-size:clamp(13px,1.25vw,16px);line-height:1.2;
  transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--cmp-r)) rotate(calc(var(--a) * -1));
  transition:color .4s var(--ease)}
.cmp-node::before{content:counter(cmpstep,decimal-leading-zero) ". ";
  font-family:var(--display);font-weight:700;letter-spacing:.06em;
  color:var(--gold);font-variant-numeric:tabular-nums}
.cmp-node span{display:inline;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.015em;color:var(--ivory)}
.cmp-node:hover{border-color:var(--line-2);background:var(--panel-2)}
/* el ultimo paso es el que cierra: se marca con el aro, no con una caja */
.cmp-node.is-loop span{color:var(--gold);letter-spacing:.2em}

/* las puntas de flecha del anillo: entre ficha y ficha, tangentes */
/* Las puntas de flecha del aro se retiran: ensuciaban mas de lo que
   explicaban, y el sentido del ciclo ya lo dan la numeracion y el paso
   09, Repeat. */
.cmp-ticks{display:none}
.cmp-ticks i{--a:calc(var(--i) * 40deg - 70deg);
  position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-top:1.5px solid var(--gold-dim);border-right:1.5px solid var(--gold-dim);
  transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--cmp-r)) rotate(45deg)}

/* el nucleo */
.cmp-hub{position:absolute;left:50%;top:50%;z-index:1;
  width:calc(var(--cmp-r) * .96);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,1.4vw,18px);padding:6% 13%;text-align:center;
  background:radial-gradient(circle at 50% 45%,rgba(16,13,10,.07),transparent 68%);
  border:1px solid rgba(16,13,10,.16)}
.cmp-hub .ymark{color:var(--gold);height:clamp(11px,1.5vw,18px);
  width:calc(clamp(11px,1.5vw,18px) * 2.456);margin:0}
.cmp-hub b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(13px,1.6vw,21px);line-height:1.04;letter-spacing:.01em;color:var(--gold-hi)}

.cmp-back{display:none}

@media(max-width:1024px){
  .cmp-wheelwrap{width:100%;max-width:560px;aspect-ratio:auto;
    margin:clamp(34px,5vw,52px) auto 0}
  .cmp-wheel{position:static;display:grid;gap:8px}
  .cmp-wheel::before,.cmp-ticks{display:none}
  .cmp-node{position:static;width:auto;transform:none;text-align:left;
    display:grid;grid-template-columns:auto 1fr;align-items:baseline;
    gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
  .cmp-node:last-child{border-bottom:0}
  .cmp-node::before{margin:0}
  .cmp-node span{font-size:15px}
  .cmp-node.is-loop span{font-size:12.5px}
  .cmp-hub{position:static;width:auto;aspect-ratio:auto;border-radius:0;
    transform:none;margin-top:14px;padding:clamp(26px,5vw,38px) clamp(20px,4vw,32px);
    flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:14px}
  .cmp-hub b{font-size:clamp(17px,4.4vw,24px)}
  .cmp-back{display:flex;align-items:center;gap:10px;margin:16px 0 0;
    font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .cmp-back svg{width:15px;height:15px;flex:none}
}
@media(prefers-reduced-motion:reduce){
  .cmp-node,.cmp-shot img,.cmp-split-shot img,.cmp-listen-shot img{transition:none}
}


/* =================================================================
   CADA EURO TIENE UN TRABAJO
   Cinco tarjetas sobre una rejilla de seis columnas: tres arriba y
   dos abajo centradas, sin dejar el hueco suelto a la derecha.
   ================================================================= */
.cmp-jobslead{margin-top:clamp(26px,3vw,40px)}
.cmp-jobs{display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.6vw,24px);margin:clamp(38px,4.4vw,64px) 0 0;padding:0}
.cmp-job{grid-column:span 2;padding:clamp(24px,2.8vw,40px);
  border:1px solid var(--line);background:var(--panel);
  transition:border-color .45s var(--ease),background .45s var(--ease)}
.cmp-job:hover{border-color:var(--line-2);background:var(--panel-2)}
.cmp-job:nth-child(4){grid-column:2/span 2}
.cmp-job:nth-child(5){grid-column:4/span 2}
.cmp-job-ico{display:block;width:clamp(30px,3.2vw,38px);height:clamp(30px,3.2vw,38px);
  color:var(--gold);margin:0 0 clamp(20px,2.4vw,30px)}
.cmp-jobs dt{margin:0 0 12px;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.7vw,21px);line-height:1.1;letter-spacing:.01em;color:var(--gold-hi)}
.cmp-jobs dd{margin:0;max-width:42ch;font-size:clamp(14px,1.35vw,16px);
  line-height:1.66;color:var(--muted)}
@media(max-width:1040px){
  .cmp-jobs{grid-template-columns:repeat(2,1fr)}
  .cmp-job,.cmp-job:nth-child(4),.cmp-job:nth-child(5){grid-column:auto}
}
@media(max-width:620px){.cmp-jobs{grid-template-columns:1fr}}


/* ---------- seguir siendo emprendedores ---------- */
.cmp-split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,76px);align-items:center}
.cmp-split-txt{min-width:0}
.cmp-splitlead{margin-top:clamp(26px,3vw,40px)}
.cmp-split-txt .lead:last-child{margin-bottom:0}
.cmp-traits{list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin:clamp(22px,2.6vw,34px) 0 clamp(24px,2.8vw,36px);padding:0}
.cmp-traits li{padding:11px 17px 10px;border:1px solid var(--line-2);
  background:rgba(16,13,10,.05);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(13px,1.4vw,17px);letter-spacing:.02em;line-height:1;color:var(--gold-hi)}
.cmp-split-shot{margin:0;position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--raise)}
.cmp-split-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.cmp-split-shot:hover img{transform:scale(1.04)}
@media(max-width:900px){
  .cmp-split{grid-template-columns:1fr;gap:clamp(30px,5vw,48px)}
  .cmp-split-shot{aspect-ratio:16/10}
}


/* ---------- built to own: el parrafo tras la banda de foto ---------- */
.cmp-ownsec{padding-top:clamp(48px,6vw,88px)}
.cmp-ownlead{max-width:66ch;font-size:clamp(17px,1.7vw,23px);line-height:1.6;color:var(--ivory);margin:0}


/* =================================================================
   PENSAR EN DECADAS
   La placa en negativo es la misma pieza de .ofplate (mismo degradado,
   mismo radio, mismo halo y la misma tinta lavanda para el acento).
   La curva del fondo es decorativa y va aria-hidden: no lleva ejes ni
   escala porque no es un grafico, es la forma de la idea.
   ================================================================= */
.cmp-plate{position:relative;overflow:hidden;border-radius:16px;
  margin:clamp(34px,4vw,60px) 0 0;
  padding:clamp(28px,3.4vw,56px) clamp(24px,3vw,52px) clamp(28px,3.2vw,48px);
  background:linear-gradient(150deg,#231E19 0%,#17130F 46%,#241E18 100%);
  border:1px solid rgba(194,210,255,.22);
  box-shadow:0 40px 90px rgba(16,13,10,.28)}
.cmp-plate::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 160% at 12% 0%,rgba(147,177,255,.18),transparent 55%)}
.cmp-curve{position:absolute;left:0;right:0;bottom:0;z-index:0;
  width:100%;height:min(54%,240px);pointer-events:none}
.cmp-curve-f{fill:rgba(147,177,255,.08)}
.cmp-curve-l{fill:none;stroke:#93B1FF;stroke-width:1.4;opacity:.38}
.cmp-plate-in{position:relative;z-index:1}
.cmp-plate-k{margin:0 0 clamp(24px,3vw,40px);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:#93B1FF}

.cmp-jump{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(16px,2.4vw,40px)}
.cmp-jump-i b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5.4vw,74px);line-height:.94;letter-spacing:-.01em;
  color:#FDFAF0;font-variant-numeric:tabular-nums}
.cmp-jump-i.is-end b{color:#93B1FF}
.cmp-jump-i span{display:block;margin-top:clamp(10px,1.2vw,16px);max-width:26ch;
  font-size:11.5px;line-height:1.55;letter-spacing:.02em;color:rgba(253,250,240,.6)}
.cmp-jump-arr{display:flex;align-items:center;gap:6px;color:#93B1FF;align-self:start;
  margin-top:clamp(12px,1.6vw,26px)}
.cmp-jump-arr i{display:block;width:clamp(20px,4vw,64px);height:1px;background:rgba(147,177,255,.5)}
.cmp-jump-arr svg{flex:none;width:9px;height:14px}

.cmp-plate-ctx{margin:clamp(30px,3.6vw,52px) 0 0;max-width:84ch;
  font-size:13.5px;line-height:1.72;color:rgba(253,250,240,.68);
  border-top:1px solid rgba(253,250,240,.14);padding-top:clamp(20px,2.4vw,30px)}

@media(max-width:700px){
  .cmp-jump{grid-template-columns:1fr;gap:clamp(14px,3vw,22px)}
  .cmp-jump-arr{margin:0;align-self:start}
  .cmp-jump-arr i{width:44px}
  .cmp-jump-arr svg{transform:rotate(90deg)}
  .cmp-jump-i span{max-width:38ch}
}

/* ---------- el aviso, literal y destacado ---------- */
.cmp-warn{margin:clamp(22px,2.4vw,32px) 0 0;max-width:64ch;
  padding:clamp(15px,1.6vw,20px) clamp(16px,1.8vw,24px);
  border:1px solid var(--line);border-left:2px solid var(--clay);
  background:rgba(202,49,0,.06)}
.cmp-warn-k{margin:0 0 7px;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:500;color:var(--clay)}
.cmp-warn-t{margin:0;max-width:60ch;font-weight:400;
  font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ---------- y aun asi, el principio ---------- */
.cmp-princ{margin:clamp(40px,5vw,76px) 0 0;padding-top:clamp(24px,2.8vw,38px);
  border-top:2px solid var(--line)}
.cmp-princ-k{margin:0 0 clamp(16px,2vw,26px);max-width:50ch;
  font-size:14.5px;line-height:1.66;color:var(--muted)}
.cmp-princ-t{margin:0;max-width:22ch;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,4.4vw,62px);line-height:1;letter-spacing:-.01em;color:var(--gold-hi)}


/* ---------- escucha recomendada ---------- */
.cmp-listensec{padding-top:0}
.cmp-listen{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,64px);align-items:center}
.cmp-listen-shot{margin:0;position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--raise)}
.cmp-listen-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.cmp-listen-shot:hover img{transform:scale(1.04)}
.cmp-listen-txt{min-width:0}
.cmp-listen-txt h3{font-size:clamp(24px,3.2vw,42px);line-height:1.02;color:var(--ivory);margin:0}
.cmp-listen-note{margin:clamp(14px,1.6vw,20px) 0 0;font-size:12.5px;line-height:1.7;color:var(--faint)}
.cmp-listen-btn{margin-top:clamp(22px,2.6vw,34px)}
@media(max-width:860px){
  .cmp-listen{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .cmp-listen-shot{aspect-ratio:16/10}
}


/* ---------- la banda de cierre ----------
   .ctaband centra por text-align, asi que dos botones sueltos quedan
   pegados por un espacio de texto. Aqui van en flex con su hueco. */
.cmp-ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
@media(max-width:600px){.cmp-ctas .btn{flex:1 1 260px;justify-content:center}}

/* ============ ADVANTAGE ============
   Aqui faltaba la barra de cierre y el comentario se comia once
   reglas: .adv-opentxt, .adv-openlead, .adv-openfig y su @media.
   Por eso .adv-opengrid nunca llegaba a ser grid y la foto de la
   apertura se quedaba a 547 px con 688 de blanco al lado, que es
   el hueco que senalo el cliente. La apertura se rehizo con otros
   nombres (.adv-mast), asi que esas reglas ya no las usa nadie y
   se van con el comentario. */

.adv-flylead{margin:clamp(22px,2.6vw,34px) 0 0;max-width:52ch}


































  
  
  


/* ---------- la frase grande ---------- */
.adv-megaband{padding-top:clamp(52px,6vw,96px);padding-bottom:clamp(52px,6vw,96px);
  background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.adv-mega{margin:0 auto;max-width:min(940px,100%);text-align:center}
.adv-mega span{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,3.6vw,54px);line-height:.98;letter-spacing:-.005em;color:var(--ivory)}
.adv-mega em{display:block;margin-top:clamp(12px,1.5vw,22px);
  font-family:var(--display);font-size:clamp(24px,3.2vw,48px);
  line-height:1.08;color:var(--gold-hi)}

/* ---------- diagrama 2: el motor de oportunidades ---------- */
.adv-englead{margin:clamp(22px,2.6vw,34px) 0 0;max-width:64ch}
.adv-eng{--advg2:clamp(14px,1.7vw,24px);margin-top:clamp(34px,4.2vw,60px)}
.adv-enghint{display:none;margin:0 0 14px;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint)}
.adv-engscroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:6px 0 8px}
.adv-engin{min-width:min-content}
.adv-engtrack{list-style:none;margin:0;padding:0;display:flex;gap:var(--advg2);align-items:stretch}

/* min-width, no width: los siete pasos caben enteros en escritorio y a
   partir de ~1060px de ventana la cinta empieza a desplazarse sola */
.adv-engstep{position:relative;flex:1 1 0;min-width:clamp(120px,11vw,158px);
  border-top:1px solid var(--line-2);padding:clamp(18px,2vw,26px) 0 0}
.adv-engstep::after{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}
.adv-engstep i{display:block;font-style:normal;font-weight:500;font-size:10px;
  letter-spacing:.26em;color:var(--gold);margin-bottom:12px}
.adv-engstep b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,1.75vw,23px);line-height:1.02;letter-spacing:.01em;color:var(--ivory)}
/* la punta de flecha entre paso y paso, sobre el rail */
.adv-engstep+.adv-engstep::before{content:"";position:absolute;top:-4px;
  left:calc(var(--advg2) / -2 - 4px);width:7px;height:7px;
  border-top:1.4px solid var(--gold-dim);border-right:1.4px solid var(--gold-dim);
  transform:rotate(45deg)}
/* el paso fantasma que cierra el bucle */
.adv-engloop{border-top-style:dashed}
.adv-engloop::after{background:var(--noir);border:1px solid var(--gold);top:-5px;width:9px;height:9px}
.adv-engloop i{font-size:15px;letter-spacing:0;line-height:1;margin-bottom:9px}
.adv-engloop b{color:var(--gold-hi)}
.adv-engloop em{display:block;margin-top:10px;font-family:var(--body);font-size:14px;line-height:1.4;color:var(--gold)}

/* el carril de vuelta */
.adv-engrail{position:relative;margin:clamp(20px,2.4vw,32px) 0 0;
  height:clamp(26px,3vw,42px);border:1px dashed var(--line-2);border-top:0}
.adv-engrail::before{content:"";position:absolute;left:-5px;top:-1px;
  border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid var(--gold)}
/* la etiqueta va pegada a la izquierda, junto a la punta de vuelta, y no
   centrada: centrada se queda fuera de pantalla en cuanto la cinta pasa
   a desplazarse, que es justo cuando más falta hace leerla */
.adv-engrail span{position:absolute;left:18px;top:100%;transform:translateY(-50%);
  background:var(--noir);padding:0 14px 0 10px;white-space:nowrap;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
@media(max-width:1080px){.adv-enghint{display:block}}

/* ---------- gente emprendedora ---------- */
.adv-owngrid{display:grid;grid-template-columns:.86fr 1.14fr;
  gap:clamp(30px,5vw,84px);align-items:start}
.adv-ownfig{margin:0;position:sticky;top:118px;overflow:hidden;aspect-ratio:3/4;background:var(--raise)}
.adv-ownfig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.adv-ownfig:hover img{transform:scale(1.03)}
.adv-ownfig figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(16,13,10,.78) 0%,rgba(16,13,10,.4) 46%,transparent 100%);
  text-shadow:0 1px 12px rgba(16,13,10,.6)}
.adv-owntxt{min-width:0}
.adv-owntxt .lead{margin-top:clamp(24px,3vw,36px)}
.adv-pull{margin:clamp(30px,3.4vw,50px) 0;padding-left:clamp(16px,2vw,28px);
  border-left:2px solid var(--gold);
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,3vw,44px);line-height:.98;letter-spacing:.005em;color:var(--gold-hi)}
@media(max-width:900px){
  .adv-owngrid{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  /* en apaisado el encuadre centrado se comía la cara del retrato */
  .adv-ownfig{position:static;aspect-ratio:16/10;max-width:520px}
  .adv-ownfig img{object-position:center 16%}
}

/* ---------- las ideas ---------- */
.adv-ideagrid{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(26px,3.2vw,44px)}
.adv-seeds{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.adv-seeds li{display:flex;align-items:baseline;gap:clamp(12px,1.8vw,26px);
  padding:clamp(14px,1.7vw,22px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease),background .5s}
.adv-seeds li:hover{padding-left:14px;background:rgba(16,13,10,.045)}
.adv-seeds em{flex:none;width:clamp(92px,10vw,132px);
  font-family:var(--body);font-size:14px;line-height:1.3;color:var(--gold)}
.adv-seeds b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,1.8vw,24px);line-height:1.04;letter-spacing:.01em;color:var(--ivory)}
@media(max-width:900px){.adv-ideagrid{grid-template-columns:1fr}}
@media(max-width:420px){
  .adv-seeds li{flex-direction:column;align-items:flex-start;gap:7px}
  .adv-seeds em{width:auto}
}

/* ---------- cierre ---------- */
.adv-finalsec{padding-top:clamp(50px,6vw,96px)}
.adv-final{background:var(--panel);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:clamp(42px,5.6vw,90px) clamp(20px,3.4vw,56px);text-align:center}
.adv-finalbig{margin:0 auto;max-width:min(900px,100%);
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,4.2vw,64px);line-height:.96;letter-spacing:-.005em;color:var(--ivory)}
.adv-finalsub{margin:clamp(18px,2.2vw,30px) auto 0;max-width:min(760px,100%);
  font-family:var(--display);font-size:clamp(20px,2.5vw,36px);
  line-height:1.2;color:var(--gold-hi)}
.adv-finalsub em{color:var(--gold)}

/* ============ PORTFOLIO ============ */
/* ==================== PORTFOLIO (#p-portfolio) ====================
   Reglas nuevas de la pagina Portfolio. Prefijo .pf-
   No define colores nuevos: todo sale de las variables de :root.
   ------------------------------------------------------------------ */

/* Lista de las seis categorias bajo el titular del hero. Decorativa,
   sin enlaces: la navegacion de la web es el router, no el hash. */
.pf-cats{
  list-style:none;margin:clamp(30px,3.6vw,48px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;row-gap:12px;
  font-family:var(--body);font-weight:500;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.pf-cats li{display:flex;align-items:center}
.pf-cats li + li::before{
  content:"";flex:none;width:4px;height:4px;border-radius:50%;
  background:var(--gold-dim);margin:0 clamp(10px,1.4vw,18px);
}

/* Rejilla de fichas. Un pixel de fondo hace de linea de separacion,
   igual que .stepgrid y .trust. */
.pf-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(40px,5vw,72px);
}
.pf-card{
  background:var(--noir);display:flex;flex-direction:column;
  transition:background .5s;
}
.pf-card:hover{background:var(--panel)}

.pf-shot{margin:0;overflow:hidden;background:var(--panel);aspect-ratio:16/10}
.pf-shot img{
  width:100%;height:100%;object-fit:cover;object-position:center 45%;
  filter:saturate(.86);transition:transform 1.1s var(--ease);
}
.pf-card:hover .pf-shot img{transform:scale(1.05)}

.pf-body{
  flex:1;display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,36px) clamp(22px,2.2vw,32px) clamp(24px,2.4vw,32px);
}
.pf-n{
  display:block;font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.16em;color:var(--gold);margin-bottom:16px;
}
.pf-card h3{font-size:clamp(20px,2vw,27px);color:var(--ivory);margin-bottom:12px}
.pf-sum{
  font-family:var(--body);font-size:15.5px;line-height:1.45;
  color:var(--gold-hi);margin:0 0 clamp(18px,2.2vw,26px);max-width:36ch;
}

/* Los cuatro apartados fijos. Mismo orden y mismo aspecto en las seis
   fichas, para poder compararlas de un vistazo. */
.pf-f{border-top:1px solid var(--line);padding-top:15px;margin-bottom:15px}
.pf-lbl{
  margin:0 0 8px;font-family:var(--body);font-weight:500;font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);line-height:1.5;
}
.pf-f p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}

/* "Its role inside the ecosystem": el apartado que sostiene el mensaje
   del encargo. Va anclado al pie de cada ficha para que quede a la misma
   altura en toda la fila, y con mas contraste que los otros tres. */
.pf-role{margin-top:auto;margin-bottom:0;border-top:1px solid var(--line-2)}
.pf-role p{color:var(--ivory)}

.pf-note{margin-top:clamp(24px,2.8vw,38px);max-width:76ch}

@media(max-width:1260px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .pf-grid{grid-template-columns:1fr}
  .pf-shot{aspect-ratio:16/9}
  .pf-sum{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .pf-shot img,.pf-card{transition:none}
  .pf-card:hover .pf-shot img{transform:none}
}

/* ============ COOWN ============ */
/* =====================================================================
   CO-OWNERSHIP  ·  #p-coown
   ---------------------------------------------------------------------
   Sustituye a The Offer. Todo lo nuevo va prefijado con .co-
   Se reutiliza sin tocar: .wrap .eyebrow .lead .btn .in/.mask .it
   .reveal .wipe .bleed .ctaband .riskbox .triosec/.tri .cardwrap
   .ocard.dip (+ .dip-*) .afm .ofplate (solo como piel oscura del
   bloque Berkshire) .note

   Ni un color fuera de las variables. Los rgba() sueltos son los que
   la hoja ya usa: rgba(16,13,10,.05) para el realce violeta claro y
   #93B1FF / #93B1FF / #FDFAF0 sobre la placa oscura (mismos valores y
   mismos contrastes que .ofplate).

   Nada de esto necesita JavaScript salvo el pintado de precios:
   #coPrice, #coPrice2, #coPrice3, #coBuy y las celdas #coEx* / #coAlt*.
   El desplegable del segundo escenario es <details> nativo.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1 · APERTURA
   Misma reja que .ofintro: titular a la izquierda, el diploma a la
   derecha. El diploma es .ocard.dip, asi que hereda caja, brillo e
   inclinacion sin una sola regla nueva.
   ------------------------------------------------------------------ */
.co-open{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(50px,6vw,96px)}

.co-intro{display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(30px,5vw,80px);align-items:center}
.co-intro-txt{min-width:0}
.co-cardwrap{display:flex;flex-direction:column;align-items:center;perspective:1200px}

.co-big{font-size:clamp(40px,7.4vw,116px);line-height:.94;letter-spacing:-.02em;margin:0}
.co-lead{margin:clamp(26px,3vw,44px) 0 0;max-width:54ch;
  font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.66;color:var(--muted)}

@media(max-width:960px){
  .co-intro{grid-template-columns:1fr;gap:clamp(34px,6vw,56px)}
  .co-cardwrap{align-items:flex-start}
}


/* ---------------------------------------------------------------------
   2 · LOS CUATRO PUNTOS
   El bloque mas fuerte de la pagina. Se usa el recurso de .stats y
   .perkgrid —celdas separadas por un filete de 1px— porque es lo que
   en esta hoja lee como bloque macizo. Cada celda: pictograma, rotulo
   pequeno y la frase en Manuka grande. La primera lleva el precio, que
   sale de YOUNG_OFFERING y NUNCA se escribe aqui.
   ------------------------------------------------------------------ */
.co-pillars{list-style:none;margin:clamp(48px,5.4vw,86px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}

.co-pillar{background:var(--noir);
  padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,34px) clamp(30px,3.2vw,46px);
  display:flex;flex-direction:column;align-items:flex-start;
  transition:background .5s var(--ease)}
.co-pillar:hover{background:var(--panel)}
.co-pillar:first-child{background:rgba(16,13,10,.05)}
.co-pillar:first-child:hover{background:rgba(16,13,10,.08)}

.co-pill-ico{flex:none;display:block;color:var(--gold);
  width:clamp(30px,3.2vw,38px);height:clamp(30px,3.2vw,38px);
  margin:0 0 clamp(26px,3vw,40px)}

.co-pill-k{font-family:var(--body);font-weight:500;font-size:9.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--faint);
  margin:0 0 14px}

.co-pill-v{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(19px,2.1vw,28px);line-height:1.06;
  letter-spacing:.015em;color:var(--gold-hi)}

/* el precio: cifra grande y tabular, como .offacts dd */
.co-pill-num{font-size:clamp(34px,4.2vw,58px);line-height:.94;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.co-pill-s{margin-top:14px;font-size:11px;letter-spacing:.02em;color:var(--muted)}
.co-ast{font-family:var(--body);font-weight:500;font-size:.5em;
  color:var(--gold);vertical-align:super;line-height:0;margin-left:.12em}

.co-fnote{margin:clamp(16px,1.8vw,24px) 0 0;font-size:12px;line-height:1.6;
  color:var(--faint);letter-spacing:.01em;max-width:62ch}

@media(max-width:1000px){
  .co-pillars{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .co-pillars{grid-template-columns:1fr}
  .co-pill-ico{margin-bottom:20px}
}


/* ---------------------------------------------------------------------
   3 · SECCIONES
   Sin numeros de capitulo: la pagina anterior los llevaba (01, 02...)
   y eso es lenguaje de folleto de ronda. Aqui manda .eyebrow + titular.
   ------------------------------------------------------------------ */
.co-sec{padding-top:clamp(64px,8.5vw,140px);padding-bottom:clamp(64px,8.5vw,140px)}
.co-sec-tight{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,96px)}

/* Titular de seccion. Va en <h3> a proposito: el <h2> es el de la
   apertura y la jerarquia tiene que sostenerse. No lleva .in/.mask
   porque el barrido de app.js solo reparte la clase .in entre .reveal,
   .wipe, h1 y h2: un h3 enmascarado se quedaria invisible para siempre. */
.co-h{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,64px);line-height:.94;letter-spacing:-.012em;
  color:var(--ivory);margin:0 0 clamp(24px,2.8vw,40px);max-width:20ch}
.co-h-sm{font-size:clamp(26px,3.2vw,44px);max-width:22ch}

.co-sub{margin:calc(-1 * clamp(14px,1.6vw,22px)) 0 clamp(30px,3.4vw,52px);
  max-width:60ch;font-size:14.5px;line-height:1.68;color:var(--faint)}

.co-col{max-width:64ch}
.co-p{margin:0 0 1.15em;font-size:clamp(15px,1.45vw,17.5px);line-height:1.7;color:var(--muted)}
.co-p:last-child{margin-bottom:0}
.co-p-lead{font-size:clamp(17px,1.7vw,21px);line-height:1.58;color:var(--ivory)}

/* la frase que se dice en voz alta */
.co-say{font-family:var(--display);font-size:clamp(22px,3vw,42px);line-height:1.16;color:var(--gold-hi);
  margin:clamp(24px,2.6vw,38px) 0;max-width:22ch}
.co-say-2{margin-top:calc(-1 * clamp(14px,1.6vw,24px));color:var(--ivory);max-width:26ch}
.co-say-wide{max-width:26ch;margin:clamp(34px,4vw,60px) 0}
.co-say-sm{font-size:clamp(19px,2.1vw,28px);max-width:34ch;margin:clamp(26px,3vw,40px) 0 0}

/* subtitulo dentro de tarjeta (h4). No hay estilo global para h4. */
.co-sub-h{margin:0 0 14px;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(17px,1.9vw,24px);line-height:1.1;
  letter-spacing:.015em;color:var(--gold-hi)}


/* ---------------------------------------------------------------------
   4 · VALORACION
   El cliente la quiere corta. Dos parrafos y un solo dato a la vista.
   ------------------------------------------------------------------ */
.co-val{display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(26px,4vw,64px);align-items:start}
.co-val-txt{max-width:56ch}

.co-val-box{border:1px solid var(--line-2);background:rgba(16,13,10,.05);
  padding:clamp(26px,3vw,40px)}
.co-val-k{display:block;font-family:var(--body);font-weight:500;font-size:9.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.co-val-n{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(40px,5vw,72px);line-height:.9;letter-spacing:-.015em;
  color:var(--gold-hi);font-variant-numeric:tabular-nums}
.co-val-note{display:block;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--muted)}

@media(max-width:860px){.co-val{grid-template-columns:1fr}}


/* ---------------------------------------------------------------------
   5 · TU PEDAZO DE YOUNG
   La parte mas humana. La cuenta se escribe como una operacion, no
   como una tabla de rentabilidad.
   ------------------------------------------------------------------ */
.co-piece .co-say{margin-top:0}

.co-eq{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(8px,1.1vw,16px);
  margin:clamp(28px,3.4vw,48px) 0 0;padding:clamp(24px,2.8vw,38px) clamp(22px,2.6vw,36px);
  border-top:2px solid var(--gold);background:var(--panel)}
.co-eq-n{font-family:var(--display);font-weight:700;
  font-size:clamp(28px,3.6vw,52px);line-height:1;letter-spacing:-.01em;
  color:var(--ivory);font-variant-numeric:tabular-nums}
.co-eq-tot{color:var(--gold-hi)}
.co-eq-op{font-family:var(--body);font-weight:300;
  font-size:clamp(18px,2vw,28px);line-height:1;color:var(--faint)}
.co-eq-l{font-family:var(--body);font-weight:500;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

.co-ask{margin:clamp(44px,5vw,80px) 0 clamp(24px,2.8vw,38px);
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,2.9vw,40px);line-height:1.04;letter-spacing:-.005em;
  color:var(--ivory);max-width:26ch}

/* ---- las tablas ilustrativas ---- */
.co-tw{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.co-tab{width:100%;min-width:520px;border-collapse:collapse;text-align:left}
.co-tcap{caption-side:top;text-align:left;padding:0 0 16px;
  font-family:var(--body);font-weight:500;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}
.co-tab thead th{padding:0 20px clamp(14px,1.6vw,20px) 0;
  border-bottom:1px solid var(--line-2);font-weight:500;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--faint);vertical-align:bottom}
.co-tab thead th:nth-child(n+2),.co-tab tbody td{text-align:right;padding-right:0;padding-left:20px}
.co-tab tbody th{font-weight:400;font-size:13.5px;letter-spacing:.02em;color:var(--muted);
  padding:clamp(15px,1.8vw,22px) 20px clamp(15px,1.8vw,22px) 0;border-bottom:1px solid var(--line);
  white-space:nowrap}
.co-tab tbody td{padding:clamp(15px,1.8vw,22px) 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:700;font-size:clamp(17px,2vw,27px);
  line-height:1;letter-spacing:.005em;color:var(--ivory);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.co-tab tbody td:last-child{color:var(--gold-hi)}
.co-tab tbody tr:hover{background:rgba(16,13,10,.04)}
.co-tab tr.co-now th,.co-tab tr.co-now td{color:var(--gold)}
.co-tab tr.co-now th{color:var(--gold)}
.co-tnote{margin:14px 0 0}

/* el segundo escenario, plegado: es secundario y tiene que parecerlo */
.co-alt{margin:clamp(30px,3.4vw,48px) 0 0;border-top:1px solid var(--line)}
.co-alt-sum{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;
  padding:20px 0 0;font-family:var(--body);font-weight:500;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  transition:color .35s}
.co-alt-sum::-webkit-details-marker{display:none}
.co-alt-sum::after{content:"+";font-size:17px;line-height:0;color:var(--gold);
  transition:transform .4s var(--ease);display:inline-block}
.co-alt[open] .co-alt-sum::after{transform:rotate(45deg)}
.co-alt-sum:hover{color:var(--gold-hi)}
.co-alt .co-tw{margin-top:clamp(24px,2.8vw,38px);opacity:.86}
.co-alt .co-tab tbody td{font-size:clamp(15px,1.6vw,21px)}

.co-close{margin:clamp(36px,4.2vw,62px) 0 0;font-family:var(--display);
  font-weight:400;text-transform:uppercase;font-size:clamp(20px,2.6vw,36px);
  line-height:1.06;letter-spacing:-.005em;color:var(--gold-hi);max-width:24ch}

/* ---- el descargo obligatorio ----
   Va sobre .riskbox, que ya trae borde y relleno. Aqui sube el cuerpo y
   el contraste: es texto legal que tiene que verse, no letra pequena.
   Sin .reveal a proposito: sin JavaScript no puede quedar invisible. */
.co-disc{background:rgba(16,13,10,.05);border-color:var(--line-2)}
.co-disc p{font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.66;
  color:var(--ivory);max-width:78ch;margin:0}


/* ---------------------------------------------------------------------
   6 · BERKSHIRE
   La cifra va sobre .ofplate (la placa oscura de The Offer) para que se
   lea como un dato historico enmarcado y no como una promesa de YOUNG.
   Debajo, el contraste de preguntas y el descargo de que no es
   comparacion ni prediccion.
   ------------------------------------------------------------------ */
.co-berk{margin:0 0 clamp(34px,4vw,60px)}
.co-berk-row{position:relative;z-index:1;display:grid;
  grid-template-columns:1fr minmax(60px,.44fr) 1fr;align-items:center;
  gap:clamp(10px,1.6vw,26px);
  padding:clamp(30px,4vw,60px) clamp(22px,3vw,48px)}

.co-berk-node span{display:block;font-family:var(--body);font-weight:500;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:#93B1FF;margin-bottom:16px}
.co-berk-node b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5vw,72px);line-height:.92;letter-spacing:-.015em;
  color:#FDFAF0;font-variant-numeric:tabular-nums}
.co-berk-node.is-end b{color:#93B1FF}

.co-berk-arr{display:flex;align-items:center;gap:7px;color:#93B1FF}
.co-berk-arr i{flex:1 1 auto;min-width:18px;height:1px;background:rgba(253,250,240,.24)}
.co-berk-arr svg{flex:none;width:10px;height:16px}

@media(max-width:680px){
  .co-berk-row{grid-template-columns:1fr;gap:clamp(14px,3vw,22px)}
  .co-berk-arr{height:38px;flex-direction:column;justify-content:center;gap:8px}
  .co-berk-arr i{width:1px;height:auto;min-width:0;min-height:12px}
  .co-berk-arr svg{transform:rotate(90deg)}
}

/* la pregunta que no es y la que si */
.co-vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px);
  margin:clamp(34px,4vw,58px) 0 0}
.co-vs-c{border-top:2px solid var(--line);padding:clamp(20px,2.4vw,32px) 0 0}
.co-vs-c.is-yes{border-top-color:var(--gold)}
.co-vs-k{display:block;font-family:var(--body);font-weight:500;font-size:9.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.co-vs-c.is-yes .co-vs-k{color:var(--gold)}
.co-vs-q{margin:0;font-family:var(--display);font-size:clamp(19px,2.2vw,30px);line-height:1.24;color:var(--faint)}
.co-vs-c.is-yes .co-vs-q{color:var(--gold-hi)}
@media(max-width:760px){.co-vs{grid-template-columns:1fr}}

.co-listen{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  margin:clamp(30px,3.4vw,48px) 0 0;padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
  border:1px solid var(--line)}
.co-listen-k{font-family:var(--body);font-weight:500;font-size:9.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.co-listen-v{font-family:var(--body);font-weight:600;font-size:15px;
  letter-spacing:.02em;color:var(--ivory)}

.co-sec .co-disc{margin-top:clamp(30px,3.4vw,48px)}


/* ---------------------------------------------------------------------
   7 · LA VUELTA (Guaranteed Repurchase Option)
   El cliente lo quiere como caracteristica destacada, no como letra
   pequena: la seccion entera cambia de fondo, como hace .founder.
   ------------------------------------------------------------------ */
.co-back{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.co-purp{margin:clamp(36px,4vw,58px) 0 clamp(18px,2vw,26px);
  font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold)}

.co-steps{list-style:none;margin:0;padding:0;counter-reset:copaso;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px)}
.co-steps li{position:relative;counter-increment:copaso;
  padding-top:clamp(22px,2.4vw,32px);border-top:2px solid var(--line-2);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,1.8vw,23px);line-height:1.1;letter-spacing:.015em;
  color:var(--ivory)}
.co-steps li::before{content:counter(copaso,decimal-leading-zero);
  position:absolute;top:-2px;left:0;transform:translateY(-135%);
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.2em;
  color:var(--gold)}
@media(max-width:900px){.co-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.co-steps{grid-template-columns:1fr}}

.co-docnote{margin:clamp(30px,3.4vw,46px) 0 0;max-width:74ch}


/* ---------------------------------------------------------------------
   8 · PARA QUIEN ES
   Nueve grupos. Rejilla elastica para que la etiqueta larga
   ("Parties with whom YOUNG may exchange ownership") no rompa nada.
   ------------------------------------------------------------------ */
/* Tres columnas fijas, no auto-fit: los grupos son NUEVE, y el truco de
   los filetes (fondo --line y gap de 1px) deja una celda vacia gris en
   cuanto el numero de columnas no divide a nueve. Con 3 y con 1 encaja
   exacto; cualquier otro reparto se ve como un hueco muerto. */
.co-who{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line)}
.co-who li{background:var(--noir);
  padding:clamp(20px,2.2vw,30px) clamp(18px,2vw,26px);
  display:flex;align-items:center;gap:14px;
  font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.02em;
  line-height:1.35;color:var(--ivory);transition:background .45s var(--ease)}
.co-who li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--gold-dim);transition:background .45s var(--ease)}
.co-who li:hover{background:var(--panel)}
.co-who li:hover::before{background:var(--gold)}
@media(max-width:620px){.co-who{grid-template-columns:1fr}}


/* ---------------------------------------------------------------------
   9 · EMPLEADOS
   ------------------------------------------------------------------ */
.co-emp-grid{display:grid;grid-template-columns:.88fr 1.12fr;
  gap:clamp(28px,4.4vw,72px);align-items:center}
.co-emp-txt{min-width:0}

.co-shot{position:relative;margin:0;overflow:hidden;background:var(--raise);
  aspect-ratio:3/2}
.co-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.co-shot:hover img{transform:scale(1.04)}
.co-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(16,13,10,.78) 0%,rgba(16,13,10,.42) 45%,transparent 100%);
  text-shadow:0 1px 12px rgba(16,13,10,.6)}

/* la combinacion, encadenada con signos de mas.
   El "+" va DENTRO del li (que es flex con gap), no colgando fuera con
   un transform: asi no puede sobresalir del contenedor al plegarse y
   nunca provoca scroll horizontal. */
.co-combo{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:clamp(20px,2.2vw,28px) 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.co-combo li{display:flex;align-items:center;gap:16px;
  font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-hi)}
.co-combo li:not(:last-child)::after{content:"+";font-weight:300;
  font-size:16px;letter-spacing:0;color:var(--gold)}

@media(max-width:900px){
  .co-emp-grid{grid-template-columns:1fr}
  .co-shot{aspect-ratio:16/10}
}


/* ---------------------------------------------------------------------
   10 · NIVELES DE INFORMACION
   ------------------------------------------------------------------ */
.co-lv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
.co-lvc{border:1px solid var(--line);background:var(--panel);
  padding:clamp(26px,3vw,42px);transition:border-color .45s var(--ease)}
.co-lvc:hover{border-color:var(--line-2)}
.co-lvc.is-hi{border-color:var(--line-2);background:rgba(16,13,10,.05)}
.co-lvk{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(16px,1.8vw,23px);line-height:1.1;
  letter-spacing:.015em;color:var(--gold-hi);margin-bottom:16px;
  font-variant-numeric:tabular-nums}
.co-lvp{margin:0;font-size:14.5px;line-height:1.68;color:var(--muted);max-width:46ch}
@media(max-width:760px){.co-lv{grid-template-columns:1fr}}


/* ---------------------------------------------------------------------
   11 · MERCADO FUTURO
   Dos mecanismos, dos tarjetas, numeradas con palabra y no con cifra:
   confundirlos es justo lo que el cliente no quiere.
   ------------------------------------------------------------------ */
.co-mech{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
.co-mechc{border:1px solid var(--line);background:var(--panel);
  padding:clamp(26px,3vw,42px);transition:border-color .45s var(--ease),background .45s var(--ease)}
.co-mechc:hover{border-color:var(--line-2);background:var(--panel-2)}
.co-mechn{display:block;font-family:var(--body);font-weight:500;font-size:9.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.co-mechp{margin:0 0 1em;font-size:14.5px;line-height:1.68;color:var(--muted);max-width:48ch}
.co-mechp:last-child{margin-bottom:0}
@media(max-width:760px){.co-mech{grid-template-columns:1fr}}

.co-amb{margin:clamp(34px,4vw,58px) 0 0;padding-top:clamp(22px,2.6vw,34px);
  border-top:2px solid var(--gold)}
.co-amb-k{margin:0 0 clamp(16px,2vw,26px);font-family:var(--body);font-weight:500;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
/* cuatro celdas con el hueco de 1px sobre la linea, el recurso macizo de
   la casa; los signos de mas caen en los huecos */
.co-ambgrid{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.co-ambgrid li{position:relative;background:var(--panel-2);
  padding:clamp(18px,2.2vw,28px) clamp(14px,1.6vw,22px)}
.co-ambgrid li + li::before{content:"+";position:absolute;left:-1px;top:50%;
  transform:translate(-50%,-50%);width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--noir);color:var(--gold);font-size:14px;font-weight:300;line-height:1}
.co-ambgrid b{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(17px,2vw,27px);line-height:1.04;
  letter-spacing:-.005em;color:var(--ivory)}
.co-ambgrid span{display:block;margin-top:11px;font-size:13px;line-height:1.5;
  color:var(--muted)}
@media(max-width:860px){
  .co-ambgrid{grid-template-columns:1fr 1fr}
  .co-ambgrid li:nth-child(3)::before{display:none}
}
@media(max-width:520px){
  .co-ambgrid{grid-template-columns:1fr}
  .co-ambgrid li + li::before{left:50%;top:-1px}
}


/* ---------------------------------------------------------------------
   12 · LA FUNDACION
   Tarjeta, no banda: es una invitacion lateral. Sin una sola cifra:
   nada aqui puede sugerir que un porcentaje de cada compra vaya a la
   Fundacion, porque no es asi.
   ------------------------------------------------------------------ */
.co-fnd{border:1px solid var(--line-2);background:rgba(16,13,10,.05);
  padding:clamp(30px,4vw,64px)}
.co-fnd .co-p{max-width:62ch}
.co-fnd-cta{margin-top:clamp(26px,3vw,40px)}


/* ---------------------------------------------------------------------
   13 · LO LEGAL
   .riskbox y .afm van copiados del index tal cual. La seccion solo
   aprieta el relleno para que no queden flotando.
   ------------------------------------------------------------------ */
.co-legal{padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(48px,6vw,100px)}
.co-legal .riskbox{margin-top:0}


/* ---------------------------------------------------------------------
   14 · MOVIMIENTO REDUCIDO
   ------------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .co-pillar,.co-who li,.co-lvc,.co-mechc,.co-shot img,.co-alt-sum::after{transition:none}
}

/* ============ CLUB ============ */
/* ================= YOUNG CLUB (p-club) =================
   Prefijo .clb-  ·  Sin colores nuevos: todo sale de :root o de rgba()
   de los tonos que ya usa community.css (74,63,150 = violeta;
   27,24,34 = tinta). Va al final de community.css. */

/* ---- Club vs Co-Ownership: la separacion, arriba del todo ---- */
.clb-split{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  gap:clamp(16px,2.4vw,34px);margin-top:clamp(40px,5vw,68px)}
.clb-side{
  background:var(--panel);border:1px solid var(--line);
  padding:clamp(26px,2.8vw,40px) clamp(22px,2.4vw,34px);
  transition:border-color .45s,background .45s}
.clb-side:hover{border-color:var(--line-2);background:var(--panel-2)}
.clb-side-own{background:var(--raise)}  /* era un lavado gris en degradado: sobre crema parecia suciedad (Jesus, 8 sep) */
.clb-tag{
  display:inline-block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line-2);padding:8px 12px 7px;margin-bottom:22px}
.clb-side h3{font-size:clamp(20px,2.1vw,28px);margin-bottom:12px}
.clb-side p{margin:0;font-size:14.5px;color:var(--muted);max-width:44ch}
.clb-side p strong{color:var(--ivory);font-weight:500}

/* el nexo entre las dos cajas: una linea con un nudo */
.clb-join{position:relative;width:clamp(28px,3.4vw,54px);align-self:center;height:1px;background:var(--line-2)}
.clb-join::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:var(--gold)}
.clb-splitnote{margin:20px 0 0;max-width:74ch}

@media(max-width:860px){
  .clb-split{grid-template-columns:1fr;gap:0}
  .clb-join{width:1px;height:clamp(26px,5vw,40px);justify-self:center;background:var(--line-2)}
}

/* ---- los cuatro bloques ---- */
.clb-quad{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-top:clamp(44px,6vw,80px)}
.clb-block{
  background:var(--panel);padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,32px);
  display:flex;flex-direction:column;transition:background .5s}
.clb-block:hover{background:var(--panel-2)}
.clb-block-own{background:linear-gradient(170deg,rgba(16,13,10,.09),transparent 60%),var(--panel)}
.clb-block-own:hover{background:linear-gradient(170deg,rgba(16,13,10,.13),transparent 60%),var(--panel-2)}
.clb-n{
  font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,48px);
  line-height:.9;color:rgba(16,13,10,.48);display:block;margin-bottom:22px}
.clb-block h3{font-size:clamp(20px,2vw,27px);margin-bottom:12px}
.clb-block p{margin:0 0 24px;font-size:14.5px;color:var(--muted)}
.clb-go{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:var(--gold-hi);border-bottom:1px solid var(--line-2);padding-bottom:7px;
  align-self:flex-start;transition:color .35s,border-color .35s}
.clb-go:hover{color:var(--gold);border-color:var(--gold)}
.clb-go .arr{display:inline-block;transition:transform .4s var(--ease)}
.clb-go:hover .arr{transform:translateX(4px)}
.clb-go-flat{color:var(--muted)}

@media(max-width:1000px){.clb-quad{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.clb-quad{grid-template-columns:1fr}}

/* ---- lo que puede incluir el Club ---- */
.clb-perks{
  list-style:none;margin:clamp(44px,6vw,80px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.clb-perk{
  background:var(--panel);padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,28px);
  display:flex;align-items:center;gap:14px;transition:background .45s}
.clb-perk::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--gold);transition:background .4s}
.clb-perk:hover{background:var(--panel-2)}
.clb-perk:hover::before{background:var(--gold)}
.clb-perk b{
  font-family:var(--body);font-weight:500;font-size:13.5px;line-height:1.35;
  letter-spacing:.02em;color:var(--ivory)}
@media(max-width:1000px){.clb-perks{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.clb-perks{grid-template-columns:1fr}}

/* ---- el recorrido, en las dos direcciones ---- */
.clb-loopsec{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.clb-loop{
  margin-top:clamp(44px,5.5vw,74px);
  border:1px solid var(--line-2);background:var(--panel-2);
  padding:clamp(26px,3.2vw,48px) clamp(20px,2.8vw,44px)}
.clb-lane + .clb-lane{margin-top:0}
.clb-lanetag{
  display:flex;align-items:center;gap:12px;margin:0 0 22px;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.clb-dir{
  flex:none;display:grid;place-items:center;width:24px;height:24px;
  border:1px solid var(--line-2);border-radius:50%;font-size:12px;color:var(--gold-hi);
  line-height:1}

.clb-flowscroll{overflow-x:auto;overflow-y:hidden;padding-bottom:4px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.clb-flowscroll:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.clb-flow{
  list-style:none;margin:0 auto;padding:0;position:relative;
  display:flex;align-items:center;flex-wrap:nowrap;width:max-content}
.clb-flow::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(16,13,10,.22);z-index:0}
.clb-flow li{display:flex;align-items:center;position:relative;z-index:1}
.clb-flow li::after{
  content:"\2192";margin:0 clamp(10px,1.4vw,20px);flex:none;
  font-size:15px;line-height:1;color:var(--gold)}
.clb-flow li:last-child::after{content:none}
.clb-node{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid var(--line);
  padding:15px 20px 14px;font-size:13.5px;font-weight:500;line-height:1.25;
  color:var(--ivory);white-space:nowrap;transition:border-color .4s,background .4s}
.clb-node:hover{border-color:var(--line-2);background:var(--panel)}
.clb-node-own{
  border-color:var(--gold);color:var(--gold-hi);
  background:linear-gradient(150deg,rgba(16,13,10,.11),rgba(16,13,10,.04))}
.clb-opt{
  font-family:var(--body);font-style:normal;font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--line-2);
  padding:5px 8px 4px;white-space:nowrap}

/* el nexo entre los dos carriles */
.clb-swap{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:clamp(26px,3vw,40px) 0;padding:0;
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);
  position:relative}
.clb-swap::before,.clb-swap::after{
  content:"";flex:1 1 auto;height:1px;background:var(--line)}
.clb-swapic{flex:none;font-size:15px;letter-spacing:0;color:var(--gold);line-height:1}

.clb-loopnote{
  margin:clamp(26px,3vw,40px) 0 0;padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line);
  font-family:var(--display);font-size:clamp(16px,1.6vw,21px);
  line-height:1.5;color:var(--gold-hi);max-width:52ch}

/* movil: el diagrama se pone en vertical, sin scroll lateral */
@media(max-width:760px){
  .clb-flowscroll{overflow-x:visible}
  .clb-flow{flex-direction:column;align-items:stretch;width:auto;min-width:0}
  .clb-flow::before{display:none}
  .clb-flow li{flex-direction:column;align-items:stretch}
  .clb-flow li::after{
    margin:12px 0 12px 22px;transform:rotate(90deg);transform-origin:left center;
    align-self:flex-start}
  .clb-node{white-space:normal;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .clb-go .arr,.clb-node,.clb-side,.clb-perk{transition:none}
}

/* ---- botonera de cierre (el .ctas de la casa no es flex fuera del hero) ---- */
.clb-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.clb-ctas .btn{flex:1 1 260px;justify-content:center}}

/* ============ FOUNDATION ============ */
/* ================= YOUNG FOUNDATION (p-foundation) =================
   Prefijo .fnd-  ·  Ni un color nuevo: variables de :root y rgba() de los
   tonos que ya usa community.css. Va al final de community.css.
   La pagina es deliberadamente tipografica: no hay fotografia de personas,
   solo lugares del catalogo. */

/* ---- de donde sale la fuerza del ecosistema ---- */
.fnd-strength{
  list-style:none;margin:clamp(34px,4.4vw,60px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.fnd-strength li{
  background:var(--panel);min-width:0;
  padding:clamp(20px,2.2vw,30px) clamp(18px,2vw,26px) clamp(22px,2.4vw,32px);
  transition:background .5s}
.fnd-strength li:hover{background:var(--panel-2)}
.fnd-strength b{
  display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,1.55vw,21px);line-height:1.04;letter-spacing:.01em;
  color:var(--ivory);
  padding-top:clamp(13px,1.5vw,18px);border-top:2px solid var(--line-2)}
.fnd-strength span{
  display:block;margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--muted)}
@media(max-width:900px){.fnd-strength{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fnd-strength{grid-template-columns:1fr}}

/* ---- la aclaracion, dentro de la caja de la casa ---- */
.fnd-clear{margin-top:clamp(30px,3.4vw,46px);background:var(--panel)}
.fnd-clear p{max-width:58ch;font-size:14px}

/* ---- la frase grande: solo tipografia ---- */
.fnd-statementsec{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fnd-statement{text-align:center;display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,2.2vw,30px)}
.fnd-rule{display:block;width:1px;height:clamp(22px,2.6vw,40px);background:var(--line-2)}
.fnd-big{max-width:20ch}
.fnd-big .it{color:var(--gold-hi);display:block;margin-top:.06em}
.fnd-sub{
  margin:0;font-family:var(--body);font-weight:500;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}

/* ---- botonera de cierre (el .ctas de la casa no es flex fuera del hero) ---- */
.fnd-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.fnd-ctas .btn{flex:1 1 260px;justify-content:center}}

@media(prefers-reduced-motion:reduce){
  .fnd-strength li,.fnd-strength li::before{transition:none}
}

/* ============ ABOUT ============ */
/* ============================================================
   ABOUT  ·  #p-about
   Absorbe "The Story" y "The People". Prefijo .ab-
   Sin colores nuevos: todo sale de las variables de :root.
   ============================================================ */

/* ---------- hero ---------- */

/* h1 de pagina interior: el peso visual de un h2 del resto del sitio,
   pero con la jerarquia de encabezados correcta.
   Sin max-width a proposito: cada linea vive dentro de un
   .mask{overflow:hidden} y un recorte horizontal partiria la palabra. */
.ab-h1{font-size:clamp(34px,5.6vw,84px);letter-spacing:-.005em}
.ab-standfirst{margin-top:clamp(24px,2.6vw,34px);max-width:44ch}

/* ---------- cronologia ---------- */
.ab-story{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.ab-tl{list-style:none;margin:clamp(44px,5vw,78px) 0 0;padding:0}

.ab-era{position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(16px,3.4vw,64px);
  padding:clamp(24px,3vw,40px) 0 clamp(30px,3.6vw,52px);
  border-top:1px solid var(--line-2)}
.ab-era::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--gold);transition:width 1.2s var(--ease)}
.ab-era.in::before{width:100%}
.ab-era:nth-child(2).in::before{transition-delay:.12s}
.ab-era:nth-child(3).in::before{transition-delay:.24s}
.ab-era:nth-child(4).in::before{transition-delay:.36s}

.ab-erahead{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,20px)}
.ab-eranum{flex:none;font-family:var(--display);font-size:clamp(26px,3vw,46px);line-height:1;color:var(--gold-dim)}
.ab-erahead h3{font-size:clamp(20px,2.1vw,29px);letter-spacing:.02em;color:var(--ivory)}

.ab-erabody p{margin:0;font-size:clamp(14.5px,1.15vw,16px);line-height:1.72;color:var(--muted);max-width:56ch}

/* la linea de apoyo del primer tramo */
.ab-erabody p.ab-creed{margin-top:clamp(18px,2vw,26px);
  font-family:var(--display);font-size:clamp(17px,1.75vw,24px);line-height:1.46;
  color:var(--gold-hi);max-width:30ch;
  padding-left:clamp(14px,1.4vw,22px);border-left:1px solid var(--line-2)}

/* el tramo vivo */
.ab-now .ab-eranum{color:var(--clay)}
.ab-now .ab-erahead h3{color:var(--gold)}

@media(max-width:820px){
  .ab-era{grid-template-columns:minmax(0,1fr);gap:14px}
  .ab-erabody p{max-width:none}
  .ab-erabody p.ab-creed{max-width:none}
}

/* ---------- the next chapter ---------- */
.ab-nextlist{list-style:none;counter-reset:abn;
  margin:clamp(42px,4.8vw,70px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.ab-nextlist li{counter-increment:abn;background:var(--panel-2);
  padding:clamp(22px,2.4vw,34px);
  font-size:clamp(15px,1.25vw,17.5px);line-height:1.5;color:var(--ivory);
  display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.ab-nextlist li::before{content:counter(abn,decimal-leading-zero);
  font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:.26em;
  color:var(--gold)}
.ab-nextlist li.ab-nextlast{color:var(--gold-hi)}

@media(max-width:900px){
  .ab-nextlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .ab-nextlist{grid-template-columns:1fr}
}

/* ---------- people ---------- */
/* columnas medidas por el contenido, no por el ancho de pantalla:
   asi el retrato no crece hasta desequilibrar el texto. */
.ab-founder{display:grid;
  grid-template-columns:minmax(0,clamp(240px,30vw,430px)) minmax(0,46ch);
  justify-content:start;
  gap:clamp(24px,4vw,70px);align-items:center;
  margin-top:clamp(44px,5vw,80px)}
.ab-founderpic{margin:0;aspect-ratio:1;overflow:hidden;
  background:var(--raise);border:1px solid var(--line)}
.ab-founderpic img{width:100%;height:100%;object-fit:cover;filter:saturate(.96)}

.ab-role{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px}
.ab-founderbody h3{font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1;color:var(--ivory);margin-bottom:18px}
.ab-founderbody p{margin:0;font-size:clamp(15px,1.3vw,18px);line-height:1.68;color:var(--muted)}

/* Posicionamiento de YOUNG, NO una cita de nadie. */
.ab-founderbody p.ab-stance{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,2.6vw,36px);line-height:1;
  letter-spacing:-.005em;color:var(--gold-hi);
  margin:clamp(26px,3vw,40px) 0 10px;max-width:18ch}
.ab-stancenote{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}

@media(max-width:820px){
  .ab-founder{grid-template-columns:minmax(0,1fr);gap:26px}
  .ab-founderpic{max-width:420px}
  .ab-founderbody p.ab-stance{max-width:none}
}

/* dos perfiles menores */
.ab-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,32px);margin-top:clamp(32px,3.8vw,56px)}
.ab-mini{display:grid;grid-template-columns:clamp(88px,10vw,136px) minmax(0,1fr);
  gap:clamp(16px,2vw,26px);align-items:center;
  background:var(--panel-2);border:1px solid var(--line);
  padding:clamp(16px,1.8vw,24px);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.ab-mini:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 26px 54px -40px rgba(16,13,10,.4)}
.ab-minipic{margin:0;aspect-ratio:1;overflow:hidden;background:var(--raise)}
.ab-minipic img{width:100%;height:100%;object-fit:cover;filter:saturate(.94);
  transition:transform 1s var(--ease)}
.ab-mini:hover .ab-minipic img{transform:scale(1.05)}
.ab-minibody h3{font-size:clamp(18px,1.8vw,24px);line-height:1.02;color:var(--ivory);margin-bottom:10px}
.ab-minibody p{margin:0;font-size:14px;line-height:1.62;color:var(--muted)}

@media(max-width:820px){
  .ab-duo{grid-template-columns:1fr}
}
@media(max-width:420px){
  .ab-mini{grid-template-columns:1fr;gap:16px}
  .ab-minipic{max-width:150px}
}

/* enlace al equipo completo (dominio externo real) */
.ab-teamlink{margin:clamp(34px,4vw,58px) 0 0}
.ab-teamlink a{display:inline-flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--gold-hi);padding-bottom:7px;border-bottom:1px solid var(--line-2);
  transition:color .35s,border-color .35s}
.ab-teamlink a:hover{color:var(--gold);border-color:var(--gold)}
.ab-teamlink a:hover .arr{transform:translateX(5px)}
.ab-teamlink .arr{display:inline-block;transition:transform .4s var(--ease)}

/* ============ FAQ ============ */
/* =================================================================
   FAQ (#p-faq) — reglas NUEVAS. Prefijo .fq2-
   -----------------------------------------------------------------
   Todo lo demas (.fqopen, .fqhead, .fqshot, .fqspot, .fqtrio,
   .fqfilter, .fqlist, .fqgroup, .fqqs, .qa, .fqinline, .fqroutes,
   .fqfinal, .riskbox) ya esta en community.css y se reutiliza sin
   tocarlo. Aqui solo hay:

     1. las reglas de filtrado de los grupos nuevos,
     2. la cadena Build/Earn/Retain/Reinvest/Compound,
     3. respuestas del acordeon con mas de un bloque (parrafos y
        listas), que antes siempre eran un unico <p>,
     4. dos retoques menores: enlace dentro de respuesta y
        pestanas del filtro en pantallas estrechas.

   Ni un color nuevo: todo sale de las variables de :root.
   ================================================================= */


/* ---------- 1. filtro por temas ----------
   Mismo mecanismo que ya existia: radios ocultos hermanos de
   .fqlist, y el filtro solo toca .fqgroup, de modo que la llamada
   intercalada (.fqinline) nunca desaparece.

   Los grupos pasan de tres a cinco. #fqcat-own y #fqcat-risk ya
   tienen su regla en community.css (lineas ~2531-2533); se repiten
   aqui para que el bloque se lea completo, y repetirlas no cambia
   nada. La regla de #fqcat-cash que queda alli se queda huerfana:
   ese radio ya no existe en el HTML y no llega a marcarse nunca. */
#fqcat-about:checked~.fqlist .fqgroup:not([data-cat="about"]),
#fqcat-own:checked~.fqlist   .fqgroup:not([data-cat="own"]),
#fqcat-club:checked~.fqlist  .fqgroup:not([data-cat="club"]),
#fqcat-found:checked~.fqlist .fqgroup:not([data-cat="found"]),
#fqcat-risk:checked~.fqlist  .fqgroup:not([data-cat="risk"]){display:none}

/* seis pestanas ya no caben comodas a 375 px: se aprietan un poco */
@media(max-width:560px){
  .fq2-filter{gap:6px}
  .fq2-filter>label{font-size:9.5px;letter-spacing:.14em;padding:9px 12px 8px}
}


/* ---------- 2. la cadena ----------
   Sustituye a .fqfacts en la apertura. Aquella fila daba cifras de
   ronda (porcentaje de capital, anos hasta una salida a bolsa) que
   son justo el marco que el cliente retira. Esta dice como funciona
   la casa, sin prometer nada. */
.fq2-chain{margin-top:clamp(40px,5vw,74px)}

.fq2-chainlist{display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  margin:0;padding:0;list-style:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fq2-chainlist li{min-width:0;
  padding:clamp(22px,2.6vw,34px) clamp(12px,1.8vw,26px);
  border-right:1px solid var(--line)}
.fq2-chainlist li:last-child{border-right:0}
.fq2-chainlist i{display:block;font-style:normal;
  font-family:var(--body);font-weight:500;font-size:9.5px;letter-spacing:.26em;
  color:var(--faint);margin:0 0 12px}
.fq2-chainlist b{display:block;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,2.1vw,30px);line-height:.96;letter-spacing:-.005em;
  color:var(--ivory)}
/* el ultimo eslabon es el que da nombre a todo: se marca en violeta */
.fq2-chainlist li:last-child b{color:var(--gold-hi)}

.fq2-chainnote{margin:clamp(20px,2.4vw,30px) 0 0;max-width:56ch;
  font-family:var(--display);font-size:clamp(16px,1.6vw,21px);line-height:1.5;color:var(--muted)}

@media(max-width:900px){
  .fq2-chainlist{grid-template-columns:repeat(3,1fr)}
  .fq2-chainlist li{border-right:1px solid var(--line)}
  .fq2-chainlist li:nth-child(3n){border-right:0}
  .fq2-chainlist li:nth-child(-n+3){border-bottom:1px solid var(--line)}
}
@media(max-width:520px){
  .fq2-chainlist{grid-template-columns:1fr}
  .fq2-chainlist li{display:flex;align-items:baseline;gap:14px;
    padding:15px clamp(2px,1.6vw,10px);
    border-right:0;border-bottom:1px solid var(--line)}
  .fq2-chainlist li:last-child{border-bottom:0}
  .fq2-chainlist i{flex:none;width:2.6em;margin:0}
}


/* ---------- 3. respuestas de varios bloques ----------
   El acordeon de la casa da por hecho un unico <p> por respuesta:
   .qa .a p lleva 30px de aire por abajo, que entre dos parrafos
   seguidos abre un hueco enorme, y no hay ninguna regla para <ul>.
   Estas reglas se activan solo con la clase .fq2-a anadida al lado
   de .a, asi que las respuestas de un solo parrafo no cambian.
   El JS no se entera: sigue buscando '.a' y midiendo scrollHeight. */
.qa .a.fq2-a>p,
.qa .a.fq2-a>ul{padding-bottom:14px}
.qa .a.fq2-a>:last-child{padding-bottom:30px}

/* la lista hereda la sangria de los parrafos del acordeon para que
   el texto arranque en la misma columna */
.fqqs .qa .a.fq2-a>.fq2-blist{
  margin:0;list-style:none;
  padding-left:calc(clamp(14px,1.6vw,24px) + 12px + clamp(16px,2.4vw,36px));
  padding-right:clamp(14px,1.6vw,24px)}
.fq2-blist li{position:relative;padding-left:18px;
  font-size:15px;line-height:1.66;color:var(--muted);max-width:74ch}
.fq2-blist li+li{margin-top:9px}
/* el guion de la vineta, en violeta, alineado con la primera linea */
.fq2-blist li::before{content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--gold)}
@media(max-width:560px){
  .fqqs .qa .a.fq2-a>.fq2-blist{padding-left:clamp(14px,1.6vw,24px)}
}


/* ---------- 4. enlace dentro de una respuesta ----------
   .fqlink es un boton de texto en versalitas y no sirve para un
   enlace corriente en medio del cuerpo. */
.fq2-inline{color:var(--gold-hi);border-bottom:1px solid var(--line-2);
  transition:color .35s,border-color .35s}
.fq2-inline:hover{color:var(--gold);border-color:var(--gold)}


/* ---------- movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
  .fq2-inline{transition:none !important}
}


/* ================= la barra de navegacion =================
   Va al final a proposito: estas reglas y la base `nav.main a` tienen la
   misma especificidad, asi que decide cual aparece despues. Puesta antes,
   el nowrap se aplicaba pero el cuerpo de letra no, y el menu seguia
   midiendo 1193 px en vez de 971. */
/* Nueve entradas con rotulos largos. Entre el umbral del desplegable y
   los 1440 px la fila va al limite, asi que ahi se aprieta el rastreo y
   el cuerpo en vez de dejar que se salga. */
/* El menu bajo de nueve entradas a cinco, asi que este apretado ya no
   hace falta: se puso para que nueve rotulos largos cupieran en una fila
   sin partirse. Medido con las cinco actuales, la fila pide 947 px de
   ancho a cuerpo 11; con la marca y los margenes son unos 1.226, o sea
   que sigue cabiendo de sobra por encima del corte de 1.260.
   El nowrap se queda: es lo que evita que un rotulo se parta en dos
   lineas y descuadre la altura de la fila. */
@media(min-width:1261px){
  nav.main{gap:18px}
  nav.main a{white-space:nowrap;font-size:11px;letter-spacing:.1em}
  .navcta{padding:11px 19px 10px !important}
}
@media(min-width:1600px){
  nav.main{gap:24px}
  nav.main a{font-size:11.5px;letter-spacing:.12em}
  .navcta{padding:12px 22px 11px !important}
}


/* La linea que sustituye a las seis tarjetas de vertical en Home.
   Las tarjetas repetian, con los mismos titulares, lo que Portfolio
   desarrolla con sus cuatro apartados. Aqui basta con nombrarlas y
   mandar alli. */
.hm-ecogo{margin:clamp(20px,2.4vw,30px) 0 0;max-width:56ch;
  font-size:14.5px;line-height:1.62;color:var(--muted)}
.hm-ecolink{display:inline-block;margin-left:4px;white-space:nowrap;
  color:var(--gold-hi);border-bottom:1px solid var(--line-2);
  transition:color .35s,border-color .35s}
.hm-ecolink:hover{color:var(--gold);border-color:var(--gold)}
.hm-ecolink .arr{display:inline-block;margin-left:5px;transition:transform .4s var(--ease)}
.hm-ecolink:hover .arr{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.hm-ecolink,.hm-ecolink .arr{transition:none}}

/* "Sign in" como boton, junto a Pre-register. Antes era un enlace de
   texto y quedaba suelto entre el menu y la llamada a la accion. */
.navbtn{border:1px solid var(--line);padding:10px 15px 9px !important;
  color:var(--muted) !important;border-radius:2px;
  transition:background .35s,color .35s,border-color .35s}
.navbtn::after{display:none}
.navbtn:hover{border-color:var(--line-2);color:var(--gold-hi) !important;background:var(--panel)}
@media(min-width:1261px){nav.main .navbtn{margin-left:8px}}


/* Dos bandas de foto seguidas se tocaban: .triosec y .bleed van las dos a
   relleno cero, asi que en Portfolio la banda a sangre quedaba pegada a la
   fila de tres de arriba y al bloque de abajo. */
.triosec + .bleed,.fotosec + .bleed,.bleed + .triosec,.bleed + .fotosec{
  margin-top:clamp(34px,4vw,64px)}
.bleed + section:not(.ctaband):not(.bleed):not(.triosec):not(.fotosec){
  padding-top:clamp(46px,5vw,84px)}

/* La linea que sustituye al bloque de Berkshire en Co-Ownership. */
.co-berklink{padding-top:0 !important}
.co-berkline{margin:0;max-width:64ch;font-size:15px;line-height:1.65;color:var(--muted)}
.co-berkgo{display:inline-block;margin-left:4px;white-space:nowrap;color:var(--gold-hi);
  border-bottom:1px solid var(--line-2);transition:color .35s,border-color .35s}
.co-berkgo:hover{color:var(--gold);border-color:var(--gold)}
.co-berkgo .arr{display:inline-block;margin-left:5px;transition:transform .4s var(--ease)}
.co-berkgo:hover .arr{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.co-berkgo,.co-berkgo .arr{transition:none}}

/* "Your piece of YOUNG": la declaracion y la cuenta, lado a lado.
   Antes eran dos frases apiladas con margen negativo y medio ancho
   vacio a la derecha. */
.co-piecehead{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(26px,4vw,64px);align-items:center;
  margin:clamp(26px,3vw,44px) 0 0}
.co-say2{margin:0;font-family:var(--display);font-size:clamp(21px,2.7vw,38px);line-height:1.2;max-width:24ch}
.co-say2 .a{display:block;color:var(--faint)}
.co-say2 .b{display:block;margin-top:.34em;color:var(--gold-hi)}
.co-piecehead .co-eq{margin:0}
@media(max-width:900px){
  .co-piecehead{grid-template-columns:1fr;gap:clamp(24px,4vw,38px)}
  .co-say2{max-width:30ch}
}

/* Portfolio: el detalle de cada vertical, plegado.
   <details> nativo: sin JavaScript, con teclado, y el lector de pantalla
   anuncia solo si esta abierto. */
.pf-more{margin-top:auto;border-top:1px solid var(--line);padding-top:14px}
.pf-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;
  font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-hi);
  transition:color .35s}
.pf-more summary::-webkit-details-marker{display:none}
.pf-more summary:hover{color:var(--gold)}
.pf-more summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pf-plus{position:relative;flex:none;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line-2);transition:background .35s,border-color .35s,transform .45s var(--ease)}
.pf-plus::before,.pf-plus::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--gold-hi);transition:opacity .3s,background .35s}
.pf-plus::before{width:9px;height:1px;transform:translate(-50%,-50%)}
.pf-plus::after{width:1px;height:9px;transform:translate(-50%,-50%)}
.pf-more summary:hover .pf-plus{border-color:var(--gold);background:rgba(16,13,10,.06)}
/* abierto: el mas se convierte en menos y el circulo gira */
.pf-more[open] .pf-plus{transform:rotate(180deg)}
.pf-more[open] .pf-plus::after{opacity:0}
.pf-more[open] summary{margin-bottom:4px}
.pf-fold{padding-top:6px}
@media(prefers-reduced-motion:reduce){
  .pf-plus,.pf-more summary{transition:none}
  .pf-more[open] .pf-plus{transform:none}
}

/* ================= la cascada del ecosistema =================
   Antes era un anillo de ocho pasos alrededor de un nucleo. Se retira por
   dos motivos. Uno: ya hay una rueda en How We Compound y dos ruedas
   seguidas se leen como el mismo dibujo repetido. Dos, y mas importante:
   el contenido no es un ciclo de tareas sino una reaccion en cadena. Cada
   eslabon es "X crea Y", y la Y de uno es la X del siguiente.

   Por eso baja en escalera: cada eslabon un peldaño mas a la derecha, y
   el ultimo devuelve al primero. La sangria acumulada es el dato: se ve
   cuanto se ha recorrido desde el primer paso.
   ================================================================= */
.adv-cyc{--paso:clamp(10px,1.5vw,26px);margin:clamp(34px,4.4vw,64px) 0 0}
.adv-cyclist{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line)}
.adv-cyc-i{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px clamp(10px,1.2vw,18px);
  padding-top:clamp(14px,1.7vw,22px);padding-bottom:clamp(14px,1.7vw,22px);
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease)}
.adv-cyc-i:hover{background:var(--panel)}
.adv-cyc-i:nth-child(1){padding-left:calc(var(--paso) * 0)}
.adv-cyc-i:nth-child(2){padding-left:calc(var(--paso) * 1)}
.adv-cyc-i:nth-child(3){padding-left:calc(var(--paso) * 2)}
.adv-cyc-i:nth-child(4){padding-left:calc(var(--paso) * 3)}
.adv-cyc-i:nth-child(5){padding-left:calc(var(--paso) * 4)}
.adv-cyc-i:nth-child(6){padding-left:calc(var(--paso) * 5)}
.adv-cyc-i:nth-child(7){padding-left:calc(var(--paso) * 6)}
.adv-cyc-i:nth-child(8){padding-left:calc(var(--paso) * 7)}
.adv-cyc-i i{flex:none;font-style:normal;font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.2em;color:var(--gold);font-variant-numeric:tabular-nums;
  min-width:2.4em}
.adv-cyc-i b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.9vw,25px);line-height:1.06;letter-spacing:.005em;color:var(--ivory)}
.adv-cyc-i > span{font-family:var(--body);font-size:clamp(14px,1.5vw,19px);line-height:1.3;color:var(--muted)}
/* la punta de flecha que traia cada eslabon ya no hace falta: la cadena
   la dibuja la propia escalera */
.adv-cyc-a{display:none}
/* Y con ella la pieza de "vuelta al principio" del anillo: su SVG se
   quedo sin reglas de tamaño y se dibujaba a 1275x1275 px, tapando la
   pagina. La cascada cierra con .adv-cycend. */
.adv-cyc-rep{display:none}

/* el cierre: la flecha de vuelta al primer eslabon */
.adv-cycend{display:flex;align-items:flex-start;gap:12px;
  margin:clamp(18px,2.2vw,30px) 0 0;max-width:52ch;
  font-family:var(--display);font-size:clamp(15px,1.6vw,20px);line-height:1.42;color:var(--gold-hi)}
.adv-cycback{flex:none;font-style:normal;font-size:20px;line-height:1.1;color:var(--gold);
  transform:scaleX(-1)}

@media(max-width:700px){
  .adv-cyc{--paso:0px}
  .adv-cyc-i{gap:4px 12px}
  .adv-cyc-i b{font-size:16px}
  .adv-cyc-i > span{font-size:14.5px}
}


/* ============ EL RECORRIDO DE YOUNG CLUB ============ */
/* =============================================================================
   YOUNG CLUB · el recorrido, en las dos direcciones  (#p-club, .clb-loopsec)
   -----------------------------------------------------------------------------
   Sustituye el bloque "---- el recorrido, en las dos direcciones ----" de
   web/community/community.css (hoy, lineas ~4287-4359, desde `.clb-loopsec{`
   hasta el cierre del `@media(max-width:760px)`).
   Tambien es seguro pegado DESPUES de ese bloque: cada regla vieja que cambia
   de sentido se neutraliza aqui explicitamente (`.clb-flow::before{content:none}`,
   `border-top:0` en la nota, etc.).

   POR QUE LA LINEA CRUZABA LA CAJA (medido en el navegador, no supuesto):
   el z-index estaba bien. `.clb-node-own` tenia `background-color:rgba(0,0,0,0)`
   y solo un `background-image` de rgba(16,13,10,.11 -> .04): la caja era
   SEMITRANSPARENTE, asi que el rail (rgba(16,13,10,.22)) se veia por dentro.
   Lo mismo la etiqueta `.clb-opt`, que no tenia fondo ninguno y a la que el
   rail le pasaba justo por el centro. Aqui se arregla por partida doble:
     1) los dos elementos llevan fondo OPACO (base `--panel-2` + velo violeta);
     2) el rail continuo desaparece: el trazo se dibuja SOLO en el hueco entre
        paso y paso, asi que estructuralmente ya no puede cruzar nada.

   Ni un color nuevo: variables de :root y rgba() de --gold (74,63,150) y
   --ivory (27,24,34), los mismos tonos que ya usa community.css.
   Sin JavaScript. Todo prefijado .clb-.
   ============================================================================= */

.clb-loopsec{
  background:var(--panel);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- el tablero ---------- */
.clb-loop{
  position:relative;
  margin-top:clamp(44px,5.5vw,74px);
  border:1px solid var(--line-2);background:var(--panel-2);
  padding:clamp(26px,3.2vw,48px) clamp(20px,2.8vw,44px)}
/* escuadras: el bloque se lee como un plano, no como una caja mas */
.clb-loop::before,.clb-loop::after{
  content:"";position:absolute;width:15px;height:15px;pointer-events:none}
.clb-loop::before{
  top:-1px;left:-1px;
  border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
.clb-loop::after{
  bottom:-1px;right:-1px;
  border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}

/* ---------- cada direccion, sobre su propia mesa ---------- */
.clb-lane{
  background:var(--noir);border:1px solid var(--line);
  padding:clamp(20px,2.2vw,30px) clamp(14px,1.8vw,26px) clamp(22px,2.4vw,32px)}
.clb-lane + .clb-lane{margin-top:0}

/* micro-titular con la convencion de la casa (la de .eyebrow): Haffer 500,
   muy espaciado. Manuka en la casa solo baja de 15px para ordinales */
.clb-lanetag{
  display:flex;align-items:center;gap:13px;
  margin:0 0 clamp(20px,2.2vw,28px);
  font-family:var(--body);font-weight:500;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.clb-lanetag::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}

.clb-dir{
  flex:none;display:grid;place-items:center;width:26px;height:26px;
  border:1px solid var(--gold);border-radius:50%;
  font-family:var(--body);font-weight:500;font-size:12px;line-height:1;
  color:var(--gold);background:var(--panel-2)}
/* la segunda entrada es la del propietario: circulo macizo, otro peso */
.clb-lane-back .clb-dir{background:var(--gold);color:var(--panel-2)}

/* ---------- la pista ---------- */
.clb-flowscroll{
  overflow-x:auto;overflow-y:hidden;padding-bottom:6px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.clb-flowscroll:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.clb-flow{
  list-style:none;margin:0 auto;padding:0;position:relative;
  display:flex;align-items:stretch;flex-wrap:nowrap;width:max-content;
  counter-reset:clbstep}
/* el rail continuo se retira: era el que atravesaba las cajas */
.clb-flow::before{content:none}

.clb-flow li{
  display:flex;align-items:stretch;position:relative;z-index:1;
  counter-increment:clbstep}

/* conector = filete + punta maciza, dibujados con CSS (sin depender de que la
   fuente traiga el glifo) y presentes SOLO entre paso y paso */
.clb-flow li::before{
  content:"";order:2;align-self:center;flex:none;
  width:clamp(18px,1.7vw,26px);height:1px;background:var(--gold-dim);
  margin:0 0 0 clamp(8px,.9vw,13px);
  transition:background .4s var(--ease)}
.clb-flow li::after{
  content:"";order:3;align-self:center;flex:none;width:0;height:0;
  border-left:6px solid var(--gold);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  /* margen en formato largo: la regla vieja traia un margin-left de hasta
     20px que, pegado este archivo despues, ensanchaba el hueco */
  margin:0 clamp(8px,.9vw,13px) 0 0}
.clb-flow li:last-child::before,
.clb-flow li:last-child::after{display:none}
.clb-flow li:hover::before{background:var(--gold)}

/* ---------- cada paso, una ficha ---------- */
.clb-node{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:11px;
  width:clamp(146px,12vw,178px);
  padding:clamp(14px,1.4vw,17px) clamp(14px,1.4vw,17px) clamp(15px,1.5vw,18px);
  background:var(--panel-2);border:1px solid var(--line);
  font-family:var(--body);font-weight:500;font-size:13px;line-height:1.32;
  letter-spacing:.005em;color:var(--ivory);white-space:normal;
  transition:border-color .4s var(--ease),transform .5s var(--ease),
             box-shadow .5s var(--ease)}
/* el ordinal, en Manuka, con la misma receta que .whylist .num / .qa .num:
   13px, 400, .14em, oro. Numera el recorrido y da ritmo a la fila */
.clb-node::before{
  content:counter(clbstep,decimal-leading-zero);
  width:100%;
  font-family:var(--display);font-weight:400;font-size:13px;
  letter-spacing:.14em;line-height:1;color:var(--gold);
  padding-bottom:10px;border-bottom:1px solid var(--line)}
/* el fondo se repite en :hover a proposito: la regla vieja traia un
   `background:var(--panel)` en atajo que, pegado este archivo despues,
   borraba el velo del nodo destacado justo al pasar el raton */
.clb-node:hover{
  border-color:var(--line-2);transform:translateY(-3px);
  background-color:var(--panel-2);background-image:none;
  box-shadow:0 18px 30px -24px rgba(16,13,10,.45)}

/* el nodo bisagra (Co-Owner): fin de un camino y principio del otro.
   FONDO OPACO — base blanca + velo violeta. Antes era solo el velo, y por eso
   se le veia el rail por dentro. */
.clb-node-own{
  border-color:var(--gold);color:var(--gold-hi);
  background-color:var(--panel-2);
  background-image:linear-gradient(150deg,rgba(16,13,10,.13),rgba(16,13,10,.05))}
.clb-node-own::before{color:var(--gold-hi);border-bottom-color:var(--line-2)}
.clb-node-own:hover{
  border-color:var(--gold-hi);
  background-color:var(--panel-2);
  background-image:linear-gradient(150deg,rgba(16,13,10,.17),rgba(16,13,10,.07))}

/* la etiqueta OPTIONAL: tambien opaca, tambien la cruzaba el rail */
.clb-opt{
  align-self:flex-start;margin-top:1px;
  font-family:var(--body);font-style:normal;font-weight:500;font-size:8.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  background:var(--panel-2);border:1px solid var(--line-2);
  padding:5px 8px 4px;white-space:nowrap}

/* ---------- la bisagra entre los dos carriles ---------- */
.clb-swap{
  display:flex;align-items:center;justify-content:center;gap:15px;
  margin:clamp(24px,2.8vw,38px) 0;padding:0;position:relative;
  font-family:var(--body);font-weight:500;font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.clb-swap::before,.clb-swap::after{
  content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,rgba(16,13,10,0),var(--line-2))}
.clb-swap::after{
  background:linear-gradient(90deg,var(--line-2),rgba(16,13,10,0))}
.clb-swapic{
  position:relative;flex:none;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--gold);background:var(--panel-2);
  font-family:var(--body);font-size:15px;letter-spacing:0;line-height:1;
  color:var(--gold)}
/* dos muñones verticales: la bisagra toca los dos carriles */
.clb-swapic::before,.clb-swapic::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:1px;height:clamp(9px,1.1vw,14px);background:var(--line-2)}
.clb-swapic::before{bottom:100%;margin-bottom:6px}
.clb-swapic::after{top:100%;margin-top:6px}

/* ---------- el cierre ---------- */
.clb-loopnote{
  margin:clamp(26px,3vw,40px) 0 0;padding-top:0;border-top:0;
  font-family:var(--display);font-size:clamp(16px,1.6vw,21px);line-height:1.5;
  color:var(--gold-hi);max-width:52ch}
.clb-loopnote::before{
  content:"";display:block;width:54px;height:2px;background:var(--gold);
  margin:0 0 clamp(16px,1.8vw,22px)}

/* ---------- pantalla estrecha de escritorio: el carril de 5 pasos cabe ----
   sin sacar la barra de scroll horizontal (medido a 901, 1024 y 1180 px) */
@media(min-width:901px) and (max-width:1180px){
  .clb-node{
    width:clamp(110px,12vw,150px);font-size:12.5px;
    padding:13px 13px 14px;gap:10px}
  .clb-node::before{font-size:11.5px;padding-bottom:9px}
  .clb-flow li::before{
    width:clamp(13px,1.5vw,20px);margin:0 0 0 clamp(6px,.8vw,10px)}
  .clb-flow li::after{margin:0 clamp(6px,.8vw,10px) 0 0}
}

/* ---------- movil y tableta: el recorrido se pone en vertical, sin scroll
   lateral de pagina (el corte sube a 900px: por debajo, cinco fichas en fila
   quedan estrechisimas) ---------- */
@media(max-width:900px){
  .clb-lane{
    padding:clamp(18px,4.6vw,24px) clamp(14px,4vw,20px) clamp(20px,5vw,26px)}
  .clb-lanetag{font-size:10px;letter-spacing:.22em;gap:11px}
  .clb-flowscroll{overflow-x:visible;padding-bottom:0}
  .clb-flow{flex-direction:column;align-items:stretch;width:auto;min-width:0}
  .clb-flow li{flex-direction:column;align-items:stretch}
  .clb-node{width:auto;font-size:13.5px}
  /* el conector gira: filete vertical + punta hacia abajo */
  .clb-flow li::before{
    align-self:center;width:1px;height:17px;margin:12px 0 0}
  .clb-flow li::after{
    align-self:center;transform:none;   /* la regla vieja giraba el glifo 90deg */
    border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:6px solid var(--gold);border-bottom:0;
    margin:0 0 12px}
  .clb-swapic{width:34px;height:34px}
}

@media(prefers-reduced-motion:reduce){
  .clb-go .arr,.clb-node,.clb-side,.clb-perk,
  .clb-flow li::before{transition:none}
  .clb-node:hover{transform:none;box-shadow:none}
}


/* ============ PORTFOLIO: ESPACIOS Y CIUDADES ============ */
/* =====================================================================
   PORTFOLIO (#p-portfolio) · cierre de pagina
   Trio de fotos (.triosec/.tri) + banda a sangre (.bleed) + bloque
   "Where we build" (.cities/.city).

   Solo CSS: no hace falta tocar el marcado ni un solo texto ingles, asi
   que la traduccion no se pierde. Clases nuevas: ninguna; lo nuevo se
   apoya en un contador CSS (.pf-city-count) sobre el marcado existente.
   Ni un color fuera de las variables de :root.

   Va al final de web/community/community.css.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1 · AIRE ALREDEDOR DE LA BANDA A SANGRE
   ---------------------------------------------------------------------
   Medido a 1440, contenido contra contenido (no cajas):

     pie de foto del trio  ->  borde superior de la banda ....  70 px
     titular blanco de la banda -> "WHERE WE BUILD" .........   46 px

   Las cajas enganaban por dos motivos:

   a) La banda heredaba de `.triosec + section` un padding-top de 80 px
      que NO se ve: `.bleed img` es absoluta con `inset:-14% 0`, o sea que
      la foto tapa tambien el relleno. El unico hueco real era el
      margin-top de 58 px, de borde de foto a borde de foto.

   b) La seccion de las ciudades trae `style="padding-top:0"` en el HTML.
      Un estilo en linea gana a cualquier regla de la hoja, asi que la
      regla `.bleed + section{padding-top:...}` que ya existia nunca
      llegaba a aplicarse: el hueco por debajo era literalmente cero, y
      lo unico que separaba el titular blanco del siguiente era el
      `bottom` de su propio pie de foto (62 px menos el desbordamiento
      de la caja de linea). De ahi que el cliente lo viera pegado sobre
      todo por debajo.

   Objetivo: ~165 px de contenido a contenido, la mediana de la web. */

/* Arriba. El relleno invisible se retira para que el hueco sea el que
   dice el margen y nada mas. A 1440: 153 px de borde de foto a borde de
   foto, 165 px desde el pie de foto del trio (que va sobre la imagen,
   12 px por encima de su borde). */
#p-portfolio .triosec + .bleed{
  padding-top:0;
  margin-top:clamp(84px,10.6vw,156px);
}

/* Abajo. el padding-top:0 en linea que bloqueaba esto ya se retiro del HTML
   sin tocar el HTML. A 1440: 120 px de relleno + los 46 px que ya habia
   entre el titular blanco y el borde inferior de la foto = 166 px de
   contenido a contenido. */
#p-portfolio .bleed + section{
  padding-top:clamp(76px,8.3vw,120px);
}


/* ---------------------------------------------------------------------
   2 · "WHERE WE BUILD" · las cuatro ciudades
   ---------------------------------------------------------------------
   Venia de una pagina vieja: un titular y cuatro nombres sueltos en
   celdas bajas. Se reescribe con el mismo lenguaje que las seis fichas
   de verticales que hay justo encima en esta misma pagina, para que el
   cierre no parezca de otra web:

     · numero de indice en Manuka violeta, igual que `.pf-n`;
     · nombre grande, al mismo tamano que `.pf-card h3`;
     · direccion anclada al pie sobre una fina linea violeta, igual que
       `.pf-role` ancla "Its role inside the ecosystem" en las fichas,
       para que las cuatro direcciones queden a la misma altura;
     · celda mas alta y con el mismo hover a `--panel`.

   No se inventa ni un dato: numero, nombre y direccion son lo que ya
   habia en el marcado. */

#p-portfolio .cities{
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:clamp(40px,5vw,72px);
  counter-reset:pf-city-count;
}

#p-portfolio .city{
  background:var(--noir);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:clamp(196px,17vw,254px);
  padding:clamp(26px,2.6vw,36px) clamp(22px,2.2vw,32px) clamp(24px,2.4vw,32px);
  transition:background .5s;
}
#p-portfolio .city:hover{background:var(--panel)}

/* El indice. Mismo tamano, peso y color que `.pf-n` en las fichas. */
#p-portfolio .city::before{
  counter-increment:pf-city-count;
  content:counter(pf-city-count,decimal-leading-zero);
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:12px;
  line-height:1;
  letter-spacing:.16em;
  color:var(--gold);
  margin:0 0 clamp(30px,3.6vw,50px);
  transition:color .35s;
}
#p-portfolio .city:hover::before{color:var(--gold-hi)}

/* El nombre. `margin-bottom` fija el hueco minimo con la direccion;
   `margin-top:auto` en la direccion se come el sobrante y la deja
   alineada al pie en las cuatro celdas. */
#p-portfolio .city b{
  font-size:clamp(20px,2vw,27px);
  line-height:.94;
  margin:0 0 clamp(22px,2.4vw,34px);
  max-width:14ch;
}

/* La direccion. Deja de ser un rotulo en versalitas violeta y pasa a ser
   lo que es, un dato: cuerpo Haffer sobre linea `--line-2`. */
#p-portfolio .city span{
  width:100%;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line-2);
  font-family:var(--body);
  font-weight:300;
  font-size:12.5px;
  line-height:1.55;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--muted);
}


/* ---------------------------------------------------------------------
   3 · RESPONSIVE
   ---------------------------------------------------------------------
   La hoja base manda `.cities` a una sola columna ya a 1260 px, asi que
   en tableta salian cuatro tarjetas altas en fila india. Aqui: cuatro
   hasta 1100, dos hasta 620 y una sola por debajo, ya en horizontal
   (indice a la izquierda, nombre y direccion apilados) para que la
   pieza no se estire media pantalla en el movil. */

@media(max-width:1100px){
  #p-portfolio .cities{grid-template-columns:1fr 1fr}
}

@media(max-width:620px){
  #p-portfolio .cities{grid-template-columns:1fr}
  #p-portfolio .city{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:18px;
    min-height:0;
    padding:22px 20px;
  }
  #p-portfolio .city::before{
    grid-column:1;grid-row:1/3;
    align-self:start;
    margin:0;
    padding-top:4px;
  }
  #p-portfolio .city b{
    grid-column:2;grid-row:1;
    margin:0 0 6px;
    max-width:none;
  }
  #p-portfolio .city span{
    grid-column:2;grid-row:2;
    width:auto;
    margin:0;
    padding:0;
    border-top:0;
  }
}

@media(prefers-reduced-motion:reduce){
  #p-portfolio .city,
  #p-portfolio .city::before{transition:none}
}


/* ============ CO-OWNERSHIP: MEDIDA TIPOGRAFICA ============ */
/* =====================================================================
   CO-OWNERSHIP · PASADA DE MEDIDA TIPOGRAFICA
   ---------------------------------------------------------------------
   Solo medida y reparto de lineas. Ni un color nuevo, ni un texto
   tocado, ni una sola linea de JavaScript.

   Todo va acotado a #p-coown para no rozar el resto de la hoja.

   Por que em y no ch
   ------------------
   Casi todos estos titulares llevan font-size con clamp(...vw...): el
   cuerpo encoge con la ventana. Una medida en `em` encoge con el, asi
   que los caracteres por linea se mantienen constantes en todos los
   anchos; una medida en `ch` tambien, pero `ch` es el ancho del cero,
   que en Manuka (condensada, versalitas) y en Romie (italica) no se
   parece al ancho medio de caracter: 26ch de .co-ask media 344px y solo
   entraban 27 caracteres. Los valores de abajo salen de medir con Range
   las cajas de linea reales, no de estimar.
   ================================================================== */


/* ---------------------------------------------------------------------
   1 · EL TITULAR DE LA PREGUNTA (.co-ask)
   El encargo. Iba a max-width:26ch, que en Manuka a 40px son 344px de
   los 1275 que tenia libre la caja: se partia en tres lineas cortas
   (27 / 33 / 6 caracteres) y la tercera era la palabra "YEARS?" sola.
   Medido de una tirada, el titular ocupa 695px a 40px: 17,4em.
   Con 19em de tope cabe entero en una linea en escritorio y sigue
   cabiendo mientras el clamp del cuerpo acompana a la ventana.
   ------------------------------------------------------------------ */
#p-coown .co-ask{
  max-width:19em;
  text-wrap:balance;
}


/* ---------------------------------------------------------------------
   2 · LOS OTROS TITULARES DE CIERRE
   Mismo problema, menos evidente.
   ------------------------------------------------------------------ */

/* .co-close iba a 24ch = 286px y partia "for later." abajo. El texto
   entero mide 490px a 36px, o sea 13,6em; con 15em entra en una linea. */
#p-coown .co-close{
  max-width:15em;
  text-wrap:balance;
}

/* Los titulares de seccion iban a 20ch, que en Manuka son 6,63em. Nueve
   de los titulares de la pagina miden entre 4,7em y 9,7em de una sola
   tirada, y dos caian justo por encima del tope: "YOUNG Co-Owner
   Valuation" (6,65em) y "Two different mechanisms" (6,71em) se partian
   en dos con la ultima palabra sola. 7,4em les da el pelo que les
   faltaba sin mover ninguno de los demas: el unico que sigue en dos
   lineas es "Long-term ownership, with a way back.", que mide 9,7em y
   no cabe de ninguna manera; ese lo reparte balance.
   La regla lleva #id, asi que tambien gana a .co-h-sm (22ch = 7,27em):
   la diferencia es de seis pixeles y los dos titulares pequenos ya
   entraban en una linea. */
#p-coown .co-h,
#p-coown .co-h-sm{max-width:7.4em}

#p-coown .co-h,
#p-coown .co-h-sm,
#p-coown .co-sub-h{text-wrap:balance}


/* ---------------------------------------------------------------------
   3 · LAS FRASES EN ITALICA (.co-say y sus variantes)
   ------------------------------------------------------------------ */

/* Base: "The idea is not short-term trading." mide 604px a 42px, o sea
   14,4em. El tope de 22ch daba 540px y dejaba "trading." colgando en
   una segunda linea. 15em = 630px: entra de una. */
#p-coown .co-say{
  max-width:15em;
  text-wrap:balance;
}

/* La ancha iba a 26ch = 638px y se partia 29 / 16, con "closer to
   YOUNG." colgando. Medida de una tirada son 904px = 21,5em, y la
   seccion tiene 1275px libres: con 22em entra entera en una linea. */
#p-coown .co-say-wide{max-width:22em}

/* La pequena era la peor de la pagina: 34ch = 556px para 91 caracteres,
   tres lineas y la ultima con "it." y nada mas. Se le quita el tope y
   se deja que use la columna de .co-emp-txt; balance la parte en dos
   lineas parejas. */
#p-coown .co-say-sm{max-width:100%}

/* .co-say2 son dos frases en bloques distintos (.a y .b), asi que el
   balance hay que pedirlo en cada uno: en el padre no hace nada.
   La segunda iba 31 / 16. La columna de .co-piecehead manda a 618px,
   asi que no cabe de una; al menos se reparte pareja. */
#p-coown .co-say2{max-width:17em}
#p-coown .co-say2 .a,
#p-coown .co-say2 .b{text-wrap:balance}


/* ---------------------------------------------------------------------
   4 · EL CUERPO DE TEXTO
   Aqui el problema era el contrario: demasiado ancho. .co-col topa en
   64ch, que con Haffer a 17,5px son 676px, y ahi entran 88 caracteres
   por linea. A partir de unos 75 el ojo pierde el salto de linea.
   El caracter medio de Haffer mide 0,45em, asi que 30,5em = 534px son
   unos 68-70 caracteres, que es la medida que se quiere.
   Va sobre .co-p y no sobre .co-col a proposito: hay parrafos fuera de
   .co-col (en .co-val-txt, en .co-fnd y en .co-emp-txt) que median
   igual de largo. El selector con #id gana a .co-fnd .co-p.
   ------------------------------------------------------------------ */
#p-coown .co-p{
  max-width:30.5em;
  text-wrap:pretty;
}

/* El parrafo de entrada va a 21px, asi que 30,5em serian 640px y se le
   irian los caracteres por linea. Con 28em (588px) se queda en ~55. */
#p-coown .co-p-lead{max-width:28em}

/* .co-lead mide bien (65 caracteres, la reja lo acota a 638px);
   solo se le pide que no deje palabras sueltas al final. */
#p-coown .co-lead{text-wrap:pretty}


/* ---------------------------------------------------------------------
   5 · LAS NOTAS PEQUENAS
   Son las que peor median de toda la pagina: cuanto mas chico el
   cuerpo, mas caracteres caben en el mismo ancho, y estas iban con el
   tope heredado de un texto mucho mayor.
   ------------------------------------------------------------------ */

/* 74ch = 574px a 12,5px = 104 caracteres por linea. 32em = 400px = 73. */
#p-coown .co-docnote{max-width:32em}

/* 64ch = 596px a 15px = 98 caracteres por linea. 29em = 435px = 74. */
#p-coown .co-berkline{max-width:29em}

/* 60ch = 540px a 14,5px daban 83 de tope. 34em = 493px = 75, y la
   frase de 71 caracteres sigue cabiendo de una sin ir justa. */
#p-coown .co-sub{max-width:34em}

/* .co-fnote se queda como esta: 62ch son 462px, la nota entra en una
   linea de 73 caracteres y estrecharla solo conseguia partirla en dos
   dejando "participation terms." sola. Se mide bien tal cual. */

#p-coown .co-docnote,
#p-coown .co-berkline,
#p-coown .co-sub,
#p-coown .co-tnote,
#p-coown .co-lvp,
#p-coown .co-mechp,
#p-coown .co-val-note{text-wrap:pretty}


/* ---------------------------------------------------------------------
   6 · MOVIL
   No hace falta ninguna consulta de medios. Por debajo de unos 500px la
   ventana ya es mas estrecha que cualquiera de estos topes, asi que
   ninguno actua: la caja manda y no hay nada que pueda desbordar
   (medido a 375px: scrollWidth = clientWidth = 375, sin barra
   horizontal). Y balance sigue haciendo su trabajo alli donde el
   titular necesita dos lineas: sin balance .co-ask quedaria en 58 / 9
   caracteres, con "30 YEARS?" descolgado; con balance, en 33 / 34.
   ------------------------------------------------------------------ */


/* ---------------------------------------------------------------------
   LO QUE NO SE TOCA
   .co-big (el titular de apertura) tambien deja "building." sola en una
   tercera linea, pero ahi no es cuestion de medida: el titular esta
   partido a mano en dos <span class="mask"> para el barrido de app.js,
   y la palabra suelta va en italica de Romie, mucho mas ancha. Su caja
   son los 638px de la columna de .co-intro, y ensancharla significa
   tocar la reja que sostiene el diploma. Se deja como esta.
   ------------------------------------------------------------------ */


/* ================= suelo de letra en movil =================
   Va al FINAL a proposito. El bloque de movil de la casa esta sobre la
   linea 1840 y los tres bloques de las paginas nuevas se anadieron
   despues; con la misma especificidad decide el orden, asi que puesto
   arriba no llegaba a aplicarse y los rotulos seguian a 8,5 px.

   Nada por debajo de 10,5 px en un telefono. Los rotulos en versalitas se
   quedan pequenos a proposito, pero por debajo de ese tamano, con ese
   interletrado, dejan de leerse. */
@media(max-width:760px){
  .clb-opt,.clb-tag,.ab-role,.cmp-warn-k,.cmp-plate-k,.pf-lbl,
  .co-pill-k,.co-val-k,.co-mechn,.co-lvk,.fq2-chainnote,
  .pf-city-k,.adv-enghint,.co-amb-k,.fqgroup h3 em{font-size:10.5px}
}


/* ---------- las pestañas del dashboard, en movil ----------
   Cinco pestañas en un flex sin wrap suman 467 px en una pantalla de 375
   y empujaban la pagina entera de lado. Se hacen desplazables en vez de
   apilarlas: cinco filas se comerian la pantalla. */
@media(max-width:760px){
  .dtabs{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-wrap:nowrap}
  .dtabs::-webkit-scrollbar{display:none}
  .dtab{flex:none;white-space:nowrap;margin-right:20px;padding-right:20px}
  .dtab:last-child{margin-right:0;padding-right:0}
}


/* ================= los titulares =================
   Manuka en mayusculas, y el enfasis TAMBIEN. Antes el enfasis iba en
   italica de Romie; el cliente lo pidio fuera con un ejemplo concreto,
   "The next chapter" dentro de "Twenty years of entrepreneurship.", asi
   que .it ya no cambia de familia: hereda. Aqui solo va el interletrado.

   Su h2 lleva 4,2 px sobre 140 px, o sea .03em; la base de la hoja tenia
   -.01em, que aprieta en vez de abrir. El tamano NO se copia: ellos van a
   260 y 140 px, y nuestras paginas llevan mucho mas texto que las suyas.
   ================================================================= */
h1.in,h2.in,h3.in{letter-spacing:.03em}



/* ---------- la medida de los titulares ----------
   Medido a 1440: 86 px los de seccion y 107 los de apertura. El tamano se
   fijo cuando el enfasis todavia iba en Romie, que es mas ancha; ahora que
   todo va en Manuka sobraria sitio, pero el cliente los pidio expresamente
   mas pequenos, asi que se quedan. */
h1.in,h2.in,h3.in{font-size:clamp(27px,3.8vw,56px);line-height:1.04}
/* los de apertura de pagina mantienen su rango por encima */
.in.cmp-big,.in.co-big,.in.fqbig,.in.fnd-big,.in.ab-h1,.in.ofbig{
  font-size:clamp(32px,5vw,72px);line-height:1.02}
/* y el hero de Home se queda como estaba */
.hero h1.in{font-size:clamp(52px,9.4vw,148px);line-height:.9}


/* ================= sistema visual de young.com =================
   Copiado del tema Young World v2. Los valores son literales del CSS de
   referencia, no aproximaciones.
   ================================================================= */

/* --- el pie va en periwinkle, que es su uso principal en la marca --- */
footer{background:var(--peri);border-top:0;color:var(--ivory)}
footer a{color:var(--ivory)}
footer a:hover{color:var(--ivory);opacity:.62}
footer h3{color:var(--ivory)}
/* el acento sobre periwinkle da 3,82:1 a 10,5 px: no llega. En tinta,
   9,20:1, que ademas es lo que hace la referencia. */
footer .eyebrow,footer h3,footer h4{color:var(--ivory)}
footer .note,footer .fbot,footer p{color:rgba(16,13,10,.72)}
footer .brandmark{color:var(--ivory)}
footer .langrow button{border-color:rgba(16,13,10,.28);color:rgba(16,13,10,.72)}
footer .langrow button.on{background:var(--ivory);color:var(--peri);border-color:var(--ivory)}
footer .soc a{border-color:rgba(16,13,10,.28)}

/* --- botones: los de la referencia son planos y de alto contraste --- */
.btn{background:var(--ivory);color:var(--noir);border:2px solid var(--ivory);
  border-radius:2px;padding:20px 38px;
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.btn:hover{background:var(--peri);border-color:var(--peri);color:var(--ivory)}
.btn.ghost{background:transparent;color:var(--ivory);border:1px solid var(--ivory)}
.btn.ghost:hover{background:var(--ivory);color:var(--noir);border-color:var(--ivory)}
/* sobre fondo periwinkle el relleno tinta se mantiene, pero el fantasma
   necesita invertirse o desaparece */
footer .btn.ghost{border-color:var(--ivory)}

/* --- el diseno de referencia es plano: su unica sombra esta en el
       lightbox, y el nuestro llevaba 44 declaraciones --- */
.ocard,.pcert,.dcard,.pf-card,.hm-claim,.co-pillar,.clb-node,
.fnd-strength li,.adv-cyc-i,.cmp-node,.tri figure,.duo figure,
.gallery figure,.solo,.qa,.riskbox,.orderbox,.modal,
.herovid,.certmodal,.flipface,
.ocard .qrbox,.ocard.dip,.pcert.dip,.cmp-plate,.ofplate,
.co-berk,.adv-megaband,.clb-loop{box-shadow:none}

/* --- contenedor: 1440 y no 1400 --- */
.wrap{max-width:1440px}


/* --- el periwinkle deliberado ---
   En la referencia el color en texto no se hereda: se pide con una clase
   (.text-blue), y solo en piezas grandes. Aqui igual. */
.text-blue{color:var(--peri)}


/* ============ jerarquia de titulares y trazo a mano ============
   Dos cosas leidas del HTML de young.com (home, about, our-story,
   our-ventures y contact), no supuestas:

   1. El titular que da nombre a la pagina va sin clase, o sea al peso
      base (600 alli). Los de seccion llevan font-weight-regular (400) y
      los h3 font-weight-light (300). Los rotulos pequenos, sus h4
      "Ventures" y "YOUNG HQ", SI van en negrita: por eso aqui solo se
      aligeran los titulares grandes (.in) y no los h3 de tarjeta.
      Nuestra Manuka tiene 400 y 700, que son los dos peldanos que hacen
      falta.

   2. El trazo a mano es el SUYO, no una imitacion: es el `header-shape`
      que va justo debajo de su <h1>UNITE TO DISRUPT, viewBox 453x66.
      Ojo con el otro, el `header-scratch`: ese es el garabato grande que
      va sobre la foto, cuadrado y de 46 KB, y no vale para esto.
      Lo dibujan con un trazo de 50 px recortado por su propio contorno,
      o sea un pincel de grosor variable; aqui va el contorno relleno, que
      da la misma silueta en 6 KB. Se pinta con mask para que el color
      salga de --peri y no quede escrito dentro del archivo.

   Marca el titular de la pagina, que es lo que ya hace la marca en su
   sitio: dice "estas aqui", no adorna.
   ============================================================== */
:root{
  --scratch:url(../assets/img/scratch.svg);
}

/* los de seccion, mas ligeros */
h1.in,h2.in,h3.in{font-weight:400}
/* el de la pagina, en negrita */
h1.in.pgtitle,h2.in.pgtitle,h3.in.pgtitle,
h1.pgtitle,h2.pgtitle,.hero h1{font-weight:700}

.pgtitle::after{
  content:"";display:block;
  /* atado al cuerpo de letra, no al contenedor: el trazo tiene que
     guardar la misma relacion con el titular lo grande que sea este.
     Con el ancho en % salia de 132 px bajo un titular de 120 px y de
     249 bajo uno de 49, o sea al reves de como debia. */
  /* el suelo de 120 px es para que en los titulares de 27 px el trazo no
     baje de 2 px de grueso y deje de leerse como hecho a mano */
  width:max(4em,150px);max-width:100%;aspect-ratio:453/66;
  margin-top:.06em;
  /* Aire por debajo. En casi todas las paginas la separacion ya la pone
     el margen superior de la entradilla y estos 22 px se colapsan contra
     el, o sea que no suman nada; en Advantage, que no tenia ninguna, son
     los que evitan que el texto quede pegado al trazo. */
  margin-bottom:clamp(18px,1.6vw,24px);
  background-color:var(--peri);
  -webkit-mask:var(--scratch) no-repeat left center/contain;
          mask:var(--scratch) no-repeat left center/contain;
}
/* si el titular va centrado, el trazo tambien */
.center .pgtitle::after,[style*="text-align:center"] .pgtitle::after,
.pgtitle[style*="text-align:center"]::after{margin-inline:auto}


/* ============ el periwinkle como detalle ============
   El acento estaba, pero casi siempre por debajo de .25 de opacidad: de
   los 43 rgba con el periwinkle, 30 iban a .04-.22, o sea que sobre crema
   no se veian. Aqui pasa a marcas graficas donde SI se ve y donde no hay
   problema de contraste, porque no son texto:

   1. El guion de los 59 rotulos de seccion. Era tinta al 45%, un gris.
      Pasa a periwinkle y a 2 px para que registre como marca.
   2. La flecha curva con el rotulo a mano en los dos botones que de
      verdad convierten. La letra es Golden Plains, la misma de la firma
      del certificado, que es la unica manuscrita que tiene la casa.

   El texto de los rotulos NO cambia: periwinkle sobre crema da 2,02:1 y
   seria ilegible. Sigue en tinta.
   ==================================================== */
.eyebrow::before{background:var(--peri);height:2px}
/* en el pie el fondo YA es periwinkle, asi que alli el guion va en tinta */
footer .eyebrow::before{background:var(--ivory)}

/* Va SIEMPRE en linea propia, debajo de los botones, y la flecha apunta
   hacia arriba. Puesta al lado, apuntando a la izquierda, funcionaba a
   1280 y 1440 pero a 900 la fila envolvia y la flecha se quedaba senalando
   al vacio. Debajo y hacia arriba no depende de si la fila envuelve.
   flex:0 1 100% para que ocupe la linea y aun asi encoja lo que ocupa el
   margen izquierdo, en vez de desbordarla. */
.scrib{
  display:flex;flex:0 1 100%;align-items:center;
  /* hereda la alineacion del contenedor: hay filas de botones a la
     izquierda (.ctas) y filas centradas (.row). Y la sangria va como
     padding, no como margen, para que en las centradas quede simetrica
     y no descentre el rotulo. */
  justify-content:inherit;gap:10px;box-sizing:border-box;
  font-family:"Golden Plains",var(--display);
  font-size:clamp(19px,1.7vw,25px);line-height:1;
  color:rgba(16,13,10,.72);
  margin:2px 0 0;padding:0 clamp(10px,2vw,28px);white-space:nowrap;
  pointer-events:none;
}
.scrib i{
  flex:none;width:clamp(34px,3vw,48px);aspect-ratio:62/46;
  background-color:var(--peri);
  -webkit-mask:var(--scrib-arrow) no-repeat center/contain;
          mask:var(--scrib-arrow) no-repeat center/contain;
}
:root{
  --scrib-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 46' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M57 41C44 42 20 36 13 11'/%3E%3Cpath d='M5 25 12 9 27 16'/%3E%3C/svg%3E");
}
@media(max-width:640px){.scrib{display:none}}


/* El "estas aqui" del menu, en periwinkle.
   young.com pinta el enlace de la pagina activa con el acento
   (li.current-menu-item a{color:#93b1ff}). Aqui el menu va sobre crema y
   ese color como TEXTO daria 2,02:1, o sea ilegible, y encima nuestros
   enlaces son de 10 px. Asi que la senal va en la subrayadora, que es una
   marca grafica y no tiene ese problema, y el texto se queda en tinta. */
nav.main a::after{background:var(--peri);height:2px}


/* Ya no queda ninguna italica de verdad en el proyecto: Romie era la unica
   y se ha ido. El navegador sigue poniendo <em> e <i> en italica por su
   cuenta, y sin fuente que lo sostenga se la inventa inclinando la
   redonda, que es justo el efecto de "otra fuente" que sobraba. */
em,i{font-style:normal}


/* ======== FEEDBACK 2 — HOME ======== */
/* =====================================================================
   HOME (p-home) — feedback #2
   ---------------------------------------------------------------------
   Solo lo NUEVO o lo CAMBIADO. Todo lo que ya funcionaba (.hm-origrid,
   .hm-tl, .hm-chain, .hm-engrid, .hm-tags, .hm-ecogo/.hm-ecolink…) se
   queda como esta y no se repite aqui.
   Va al FINAL de web/community/community.css: varias reglas de abajo
   ganan por orden de aparicion, no por especificidad, y si se meten
   antes dejan de hacer efecto.

   Ni un color nuevo: todo sale de :root. Los dos lavados de periwinkle
   se declaran como color solido y no como capa translucida porque hay
   halos (box-shadow de los puntos de la linea de tiempo) que tienen que
   poder igualar el fondo exactamente.
      --hm-wash  = #93B1FF al 18 % sobre la crema #FDFAF0
      --hm-wash2 = #93B1FF al 26 % sobre la crema #FDFAF0
   Contraste comprobado: tinta #100D0A sobre los dos lavados y sobre el
   periwinkle macizo pasa de 9:1. El periwinkle solo se usa como
   RELLENO, nunca como color de texto sobre crema.
   ===================================================================== */

/* Eran #EAEDF3 y #E1E7F4, periwinkle al 18 y al 26% sobre la crema.
   El contraste estaba bien; la temperatura no: los dos tienen el azul
   por encima del rojo, o sea justo al reves que la crema de marca, y
   se leian como otro papel. Pasan a los dos tonos calidos de la casa. */
#p-home{--hm-wash:#F3EDDD; --hm-wash2:#EDE5D2}


/* =====================================================================
   1 · HERO: la pelicula dentro, el certificado encima
   =====================================================================
   .hero global sigue valiendo para las demas paginas. Aqui solo se pisa
   lo justo: fuera el min-height de 100svh (era lo que enterraba el
   video) y reparto de columnas casi a la par, porque la derecha ya no
   lleva una tarjeta suelta sino la pelicula. */

.hm-hero{
  min-height:0;
  grid-template-columns:1.02fr 1.04fr;
  align-items:center;
  padding-top:clamp(22px,3.2vw,44px);
  padding-bottom:clamp(38px,4.6vw,66px);
}
.hm-herotxt,.hm-herohead,.hm-herobody{min-width:0}
.hm-heroside{min-width:0;position:relative}

/* El titular baja de 148 a 112 px. No es capricho: con la pelicula al
   lado la columna de texto pierde 60 px y "compound." se salia. De paso
   acorta el hero, que es justo lo que hace falta.
   Se escribe tambien con .in porque la regla que fija el tamaño grande
   (.hero h1.in) tiene dos clases y ganaria a una sola. */
.hm-hero h1.pgtitle,
.hm-hero h1.pgtitle.in{font-size:clamp(46px,7.2vw,112px);line-height:.9}

/* ---------- la pelicula ---------- */
.hm-film{
  margin:0;position:relative;overflow:hidden;aspect-ratio:16/9;
  background:#100D0A;border:1px solid var(--line);
  box-shadow:0 40px 90px -50px rgba(16,13,10,.45);
}
.hm-film video{display:block;width:100%;height:100%;object-fit:cover;background:#100D0A;border:0}

/* El pie va ARRIBA porque abajo estan los controles. Mismo tratamiento
   que tenia .herovid. */
.hm-film figcaption{
  position:absolute;left:0;right:0;top:0;padding:14px 18px 34px;z-index:2;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  pointer-events:none;text-shadow:0 1px 10px rgba(16,13,10,.7);
  background:linear-gradient(to bottom,rgba(16,13,10,.62),transparent);
}

/* ---------- controles ----------
   El de sonido va primero y siempre visible: un video que arranca solo
   TIENE que dejar encender el sonido a la vista, no escondido detras de
   un hover. Los dos rotulos de cada boton estan en el HTML y se enseña
   uno u otro desde aqui: asi los traduce el motor de i18n como texto
   estatico y no hay que componer cadenas desde JavaScript. */
.hm-filmctl{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;gap:8px;align-items:center;padding:16px;
  background:linear-gradient(to top,rgba(16,13,10,.74),transparent);
}
.hm-fbtn{
  border:1px solid rgba(255,255,255,.44);background:rgba(16,13,10,.36);
  color:#fff;font-family:var(--body);font-weight:500;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 15px 9px;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .35s,border-color .35s,color .35s;
}
.hm-fbtn:hover{background:var(--peri);border-color:var(--peri);color:var(--ivory)}
.hm-flab{display:block}
.hm-film.is-muted .hm-foff,
.hm-film:not(.is-muted) .hm-fon,
.hm-film.is-paused .hm-fpause,
.hm-film:not(.is-paused) .hm-fplay{display:none}

@media(max-width:520px){
  .hm-filmctl{padding:12px}
  .hm-fbtn{font-size:9.5px;letter-spacing:.14em;padding:9px 11px 8px}
  .hm-film figcaption{padding:12px 14px 28px;font-size:9.5px;letter-spacing:.18em}
}

/* ---------- el certificado, montado sobre la pelicula ----------
   Margen negativo, no posicion absoluta: asi el bloque sigue ocupando
   su alto y el hero mide lo que mide de verdad. Se sale hacia la
   izquierda para que la composicion no sea otra vez dos cajas alineadas.
   .cardwrap (perspectiva + centrado) y la inclinacion del raton de
   app.js —que engancha por .ocard y usa el padre como zona sensible—
   siguen funcionando sin tocar nada. */
.hm-herocard{
  width:min(430px,92%);
  position:relative;z-index:2;padding:0;
  margin-top:calc(clamp(34px,4.2vw,64px) * -1);
  margin-left:calc(clamp(0px,3.4vw,54px) * -1);
}
.hm-herocard .ocard{width:100%}
.hm-herocard .cardnote{margin-top:16px;text-align:left;padding-left:2px}

/* En el proyecto no hay italica y no hay regla global que la apague:
   <em> dentro del titulo del diploma la heredaba del navegador. */
#p-home .dip-title em{font-style:normal}

/* Por debajo de 1080 la regla original apila el hero. Como esa regla
   esta ANTES en el archivo y tiene la misma especificidad que .hm-hero,
   hay que repetir el apilado aqui o el grid de dos columnas la pisaria. */
/* Apilado. Medido a 390 px: con el texto de una pieza la pelicula
   empezaba en el pixel 797, o sea otra vez por debajo del pliegue.
   .hm-herotxt pasa a display:contents, sus dos mitades se convierten en
   items del propio hero y la pelicula se cuela entre el titular y el
   parrafo. Asi entra a los 265 px, muy por encima del pliegue. */
@media(max-width:1080px){
  .hm-hero{grid-template-columns:1fr;row-gap:0}
  .hm-herotxt{display:contents}
  .hm-herohead{order:1}
  .hm-heroside{order:2;margin:clamp(26px,4vw,42px) 0 clamp(30px,4.6vw,46px)}
  .hm-herobody{order:3}
  .hm-herocard{margin-left:0;width:min(430px,88%);
    margin-top:calc(clamp(24px,4vw,46px) * -1)}
}

/* Movimiento reducido: el JS del bloque ya evita el arranque automatico.
   Aqui solo se apagan las transiciones. */
@media(prefers-reduced-motion:reduce){
  .hm-fbtn{transition:none}
}


/* =====================================================================
   2 · PERIWINKLE EN LOS FONDOS DE SECCION
   ===================================================================== */

.hm-origin{background:var(--hm-wash)}
/* el halo del punto de la linea de tiempo tiene que igualar al fondo
   nuevo o se ve un cerco crema */
.hm-tlx::after{box-shadow:0 0 0 4px var(--hm-wash)}
@media(max-width:820px){
  /* en movil la linea de tiempo pasa a vertical y el halo sigue siendo
     el que separa el punto del filete */
  .hm-tlx::after{box-shadow:0 0 0 4px var(--hm-wash)}
}

.hm-eng{background:var(--hm-wash2)}

/* el ultimo eslabon de la cadena es el que cierra el bucle: macizo y en
   periwinkle, para que se vea de un vistazo donde vuelve a empezar */
.hm-chain li:last-child::before{background:var(--peri);border-color:var(--peri)}


/* =====================================================================
   3 · GIVE COMPOUNDING TIME TO WORK — registro de la tarjeta del fundador
   =====================================================================
   Copia literal del lenguaje de .founder: fondo var(--panel), columna
   izquierda pegajosa, cita grande en Manuka 400 y en caja baja, firma
   manuscrita y filete. Lo unico que se añade es el retrato, que es lo
   que trae la energia humana. Ninguna caja: la estructura la hace la
   tipografia. */

.hm-princ{background:var(--panel);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.hm-princ-grid{display:grid;grid-template-columns:.66fr 1.34fr;
  gap:clamp(30px,5vw,86px);align-items:start}

.hm-princ-foto{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--raise);
  position:sticky;top:118px}
.hm-princ-foto img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.hm-princ-foto:hover img{transform:scale(1.03)}
/* el filo de periwinkle: la firma de color del bloque, sin texto encima */
.hm-princ-foto::after{content:"";position:absolute;left:0;bottom:0;
  width:42%;height:9px;background:var(--peri);z-index:2}

.hm-princ-txt{min-width:0;padding-top:clamp(0px,1.2vw,20px)}

/* misma escala que .founder .bigq: 46 px de tope, caja baja y peso 400,
   que es la regla de la casa para todo titular que no da nombre a la
   pagina */
.hm-princ-q{
  font-family:var(--display);font-weight:400;text-transform:none;
  font-size:clamp(27px,3.4vw,46px);line-height:1.16;letter-spacing:-.005em;
  color:rgba(16,13,10,.5);margin:0 0 clamp(22px,2.8vw,34px);
  /* nada de max-width en ch: Manuka es tan estrecha que su "0" mide .17em
     y 22ch se quedaban en 365 px, siete caracteres por linea (medido) */
  max-width:min(100%,760px);
}
.hm-princ-q .it{color:var(--gold-hi)}

.hm-princ-txt .lead{max-width:52ch;margin-bottom:0}
.hm-princ-sig{display:block;margin-top:clamp(26px,3.2vw,42px);max-width:250px}
.hm-princ-go{margin:clamp(22px,2.6vw,34px) 0 0}

/* mismo corte que el hero: por debajo de 1080 la columna de la foto se
   quedaba en 281 px y no aguantaba un retrato */
@media(max-width:1080px){
  .hm-princ-grid{grid-template-columns:1fr}
  /* relative, no static: el filo de periwinkle es un ::after absoluto y
     con static se colgaria de la seccion en vez de la foto */
  .hm-princ-foto{position:relative;top:auto;aspect-ratio:16/10;max-height:420px}
}
@media(prefers-reduced-motion:reduce){
  .hm-princ-foto img{transition:none}
}


/* =====================================================================
   4 · LA BANDA DE GENTE
   =====================================================================
   .bleed rebaja el color y oscurece bastante: en una foto de edificio da
   igual, en una foto de cuarenta personas se pierde justo lo que hay que
   ver. Se le devuelve el color y se aclara la mitad de arriba. */
.hm-people img{filter:saturate(.98) contrast(.98)}
.hm-people::after{background:linear-gradient(to top,
  rgba(16,13,10,.72) 0%,rgba(16,13,10,.30) 46%,rgba(16,13,10,.08) 100%)}
.hm-people .cap h2{max-width:20ch}


/* =====================================================================
   5 · AND NOW, OWNERSHIP — fuera las cuatro cajas iguales
   =====================================================================
   Antes: .hm-claims, cuatro celdas del mismo tamaño con filete alrededor.
   Ahora una rejilla de 12 columnas que NO se reparte a partes iguales:
     · el precio ocupa la mitad izquierda, en relleno de periwinkle y con
       la cifra a tamaño de titular;
     · la columna 7 se queda vacia a proposito, de canal;
     · la foto ocupa de la 8 a la 12 y las dos filas, y se sale por el
       borde derecho de la pantalla;
     · los tres puntos restantes pierden la caja, se escalonan hacia la
       derecha y cada uno va a un cuerpo distinto.
   El precio sigue viniendo de YOUNG_OFFERING por #hmPrice. */

.hm-ownhead{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,70px);align-items:end}
.hm-own2 .hm-ownlead{margin:0;max-width:56ch}

.hm-ownbody{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2.6vw,42px);row-gap:clamp(20px,2.6vw,36px);
  align-items:start;margin-top:clamp(40px,5vw,72px)}

.hm-onum{display:block;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.16em;color:var(--gold)}

.hm-oprice{grid-column:1/7;grid-row:1;background:var(--peri);
  padding:clamp(26px,3.2vw,44px) clamp(24px,3vw,40px);position:relative;z-index:2}
.hm-oprice .hm-onum{color:rgba(16,13,10,.62)}
.hm-obig{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.84;
  font-size:clamp(54px,7.6vw,118px);color:var(--ivory);
  margin:clamp(14px,1.8vw,24px) 0 0}
.hm-olab{display:block;margin-top:16px;font-family:var(--body);font-weight:500;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(16,13,10,.72)}

/* La foto sangra por la derecha hasta el borde de la pantalla.
   Aqui NO vale el truco de calc(50% - 50vw): dentro de un grid, los
   porcentajes de margen de un item se resuelven contra el ancho de SU
   CELDA, no contra el del contenedor, y la foto se salia 375 px (medido).
   Se calcula el margen que queda a la derecha de .wrap sin porcentajes:
   .wrap va centrada y mide min(1400px, 100vw - 2*--pad), asi que lo que
   sobra a cada lado es el mayor de --pad y (100vw - 1400px) / 2.
   body ya lleva overflow-x:hidden, no aparece barra horizontal. */
.hm-ownfoto{grid-column:8/13;grid-row:1/3;margin:0;position:relative;overflow:hidden;
  align-self:stretch;min-height:clamp(380px,44vw,620px);
  margin-right:calc(max(var(--pad), (100vw - 1400px) / 2) * -1);
  background:var(--raise)}
.hm-ownfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.hm-ownfoto:hover img{transform:scale(1.04)}
.hm-ownfoto figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:46px 22px 18px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 12px rgba(16,13,10,.6);
  background:linear-gradient(to top,rgba(16,13,10,.78) 0%,rgba(16,13,10,.4) 46%,transparent 100%)}

.hm-olist{grid-column:1/7;grid-row:2;list-style:none;margin:0;padding:0}
.hm-olist li{position:relative;min-width:0;
  padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--line-2)}
.hm-olist li:nth-child(2){margin-left:clamp(14px,3.2vw,52px)}
.hm-olist li:nth-child(3){margin-left:clamp(28px,6.4vw,104px)}
.hm-olist b{display:block;margin-top:12px;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.98;letter-spacing:-.01em;color:var(--gold-hi)}
.hm-olist li:nth-child(1) b{font-size:clamp(24px,3vw,42px)}
.hm-olist li:nth-child(2) b{font-size:clamp(22px,2.5vw,34px)}
.hm-olist li:nth-child(3) b{font-size:clamp(20px,2.1vw,28px)}
.hm-olist b sup{font-family:var(--body);font-size:.42em;font-weight:500;
  vertical-align:baseline;position:relative;top:-.62em;letter-spacing:0}
.hm-olist p{margin:10px 0 0;font-size:14.5px;line-height:1.6;
  color:var(--muted);max-width:46ch}

@media(max-width:900px){
  .hm-ownhead{grid-template-columns:1fr;align-items:start}
  .hm-own2 .hm-ownlead{margin-top:clamp(20px,3vw,30px)}
  .hm-ownbody{grid-template-columns:1fr}
  .hm-oprice,.hm-olist,.hm-ownfoto{grid-column:1/-1;grid-row:auto}
  /* en movil la foto sangra hasta el borde de la pantalla por el
     relleno de la seccion, que ahi si es todo el margen que hay */
  .hm-ownfoto{margin-right:calc(var(--pad) * -1);min-height:0;aspect-ratio:4/3}
  /* con la misma especificidad que el escalonado, o no lo pisa */
  .hm-olist li:nth-child(2),.hm-olist li:nth-child(3){margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .hm-ownfoto img{transition:none}
}


/* =====================================================================
   6 · LA FAMILIA DE MARCAS
   =====================================================================
   Sin archivos de logotipo para Club, Deals y Foundation: se construyen
   con la marca de verdad (.ymark, la misma mascara que usan .brandmark y
   la tarjeta) mas el punto y el nombre en Manuka 400, que es exactamente
   como esta hecho .brandmark em. YOUNG a secas va solo con la marca.
   Banda de periwinkle macizo: la tinta encima da 9,20:1, asi que aqui el
   color si puede ocupar el fondo entero. */

.hm-eco{background:var(--peri);border-top:1px solid rgba(16,13,10,.16);
  padding-top:clamp(46px,5.2vw,76px);padding-bottom:clamp(46px,5.2vw,76px)}

/* La banda se mudo al pie (Feedback 3). Alli el fondo YA es periwinkle, asi
   que pintar el suyo la haria invisible: se queda sin fondo y se separa de
   las columnas del menu con un filete. El ancho se iguala al de .fgrid
   -1380 y no los 1400 de .wrap- para que las marcas caigan a plomo con las
   columnas de arriba. */
footer .hm-eco{background:transparent;border-top:1px solid rgba(16,13,10,.24);
  margin-top:clamp(34px,4vw,54px);
  /* Los laterales a cero: es un <section>, y la regla global le mete
     var(--pad) que aqui se sumaria al del propio pie -las marcas salian
     20 px mas adentro que las columnas del menu-. */
  padding:clamp(34px,4vw,54px) 0 0}
footer .hm-eco .wrap{max-width:1380px}
footer .hm-ecok{margin-bottom:clamp(22px,2.6vw,32px)}

.hm-ecok{margin:0 0 clamp(28px,3.4vw,44px);
  font-family:var(--body);font-weight:500;font-size:10.5px;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(16,13,10,.72);
  display:flex;align-items:center;gap:12px}
.hm-ecok::before{content:"";width:26px;height:1px;background:rgba(16,13,10,.45);flex:none}

.hm-ecorow{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);align-items:end}

/* Clubdeal es marca ajena y no se puede componer con .ymark: lleva su
   propio logotipo, en mascara alfa para que tome la tinta por
   currentColor igual que las de casa. El alto es el mismo .74em de la
   marca YOUNG y casan: medido sobre el dibujo, la C de Clubdeal ocupa el
   99,4% del alto de la tinta, o sea que el alto de la mascara ES la
   altura de mayuscula. El 5.4679 es el ratio del recorte. */
.cdmark{display:block;background:currentColor;flex:none;
  height:.74em;width:calc(.74em * 5.4679);
  -webkit-mask:url("../assets/img/community/clubdeal-mark.png") no-repeat center/contain;
  mask:url("../assets/img/community/clubdeal-mark.png") no-repeat center/contain}

.hm-ecomark{display:block;color:var(--ivory);padding-bottom:14px;
  border-bottom:1px solid rgba(16,13,10,.24);
  transition:border-color .4s,transform .4s var(--ease)}
.hm-ecomark:hover{border-color:var(--ivory);transform:translateY(-3px)}

.hm-ecoword{display:flex;align-items:baseline;white-space:nowrap;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,2.1vw,32px);letter-spacing:.01em;line-height:1}
.hm-ecoword .ymark{height:.74em;width:calc(.74em * 2.456);flex:none;margin-right:0}
/* El nombre sale de un atributo y no de un nodo de texto A PROPOSITO: el
   motor de i18n indexa por el ingles del nodo y ya hay una clave
   "Foundation" que en español devuelve "Fundación". Un nombre de marca no
   se traduce, y desde CSS el motor no lo ve. El nombre completo sigue
   estando para los lectores de pantalla en el aria-label del enlace.
   Peso 400 y caja baja: es la construccion exacta de .brandmark em. */
.hm-ecoword[data-name]::after{content:attr(data-name);
  font-family:var(--display);font-weight:400;text-transform:none;
  font-size:.86em;letter-spacing:0;margin-left:1px}

.hm-ecosub{display:block;margin-top:12px;font-family:var(--body);font-weight:500;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(16,13,10,.68)}

/* Las dos columnas eran de cuando habia cuatro marcas. Con tres dejaban a
   la Fundacion sola en una segunda fila, descuadrada. Las tres caben en
   linea bastante abajo, y por debajo de 520 se apilan del todo: mas
   legible que un 2+1 cojo. */
@media(max-width:760px){.hm-ecorow{gap:26px 20px}}
@media(max-width:520px){.hm-ecorow{grid-template-columns:1fr;gap:26px}}
@media(prefers-reduced-motion:reduce){.hm-ecomark{transition:none}}

/* ======== FEEDBACK 2 — NEWS ======== */
/* ==================================================================
   NOTICIAS  ·  prefijo .nw-
   ------------------------------------------------------------------
   Aqui NO hay rejilla de tarjetas. El cliente critica justamente eso del
   resto del sitio, asi que la seccion se compone como una portada de
   revista: una noticia grande con su foto y las demas en una lista de
   filas separadas por filetes, donde la jerarquia la pone el cuerpo de
   letra y no una caja alrededor.

   Periwinkle: aparece como RELLENO (el rotulo "Latest", el filete de la
   lista, el recuadro de la nota, los trazos de la frase de cierre) y como
   lavado de fondo bajo la noticia grande. Nunca como texto sobre crema,
   que da 2,02:1 y no se lee.
   ================================================================== */

/* news.js oculta secciones enteras con el atributo hidden (la frase de
   cierre, "Keep reading", el listado cuando solo hay una noticia). Como
   section lleva padding propio, se blinda aqui. */
#p-news [hidden], .hm-news[hidden]{display:none !important}

/* --- las dos vistas: listado y articulo, en la misma .page ---
   news.js pone .nw-reading en #p-news y se intercambian. */
.nw-detail{display:none}
#p-news.nw-reading .nw-index{display:none}
#p-news.nw-reading .nw-detail{display:block}


/* Los anchos de titular van en em y NO en ch: un ch de Manuka mide 0,29 em
   -es una condensada-, asi que las medidas en ch que funcionan con Haffer
   aqui salen tres veces mas estrechas de lo que parece. */

/* ================= apertura ================= */
.nw-hero{padding-bottom:clamp(34px,4vw,56px)}
/* Sin max-width: cada linea del titular ya es una frase corta y se
   corta sola donde debe. En ch salia mal, porque un ch de Manuka mide
   0,29 em y 14ch se quedaba justo por debajo de "What is happening". */
.nw-h1{font-size:clamp(44px,7.4vw,116px)}
.nw-standfirst{margin-top:clamp(22px,2.4vw,32px);max-width:60ch}


/* ================= la noticia grande =================
   Foto a un lado, titular al otro. El lavado periwinkle sube desde el
   pie de la seccion: da color al bloque sin dibujarle un borde. */
.nw-leadsec{
  padding-top:clamp(24px,3vw,44px);
  padding-bottom:clamp(46px,5.4vw,86px);
  background:linear-gradient(180deg,rgba(147,177,255,0) 0%,rgba(147,177,255,.10) 34%,rgba(147,177,255,.22) 100%);
}
.nw-leadlink{
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(22px,3.6vw,64px);align-items:center;
}
.nw-leadfig{margin:0;overflow:hidden;background:var(--raise)}
.nw-leadfig img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.94)}
.nw-leadlink:hover .nw-leadfig img{transform:scale(1.035)}

/* el unico sitio de la seccion donde el periwinkle va a plena carga:
   relleno, con la tinta encima, 9,20:1 */
.nw-flag{
  display:inline-block;background:var(--peri);color:var(--ivory);
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  padding:7px 12px 6px;margin-bottom:20px;
}
.nw-leadtitle{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,4vw,62px);line-height:.94;letter-spacing:-.01em;
  color:var(--ivory);margin:16px 0 0;transition:color .35s;
}
.nw-leadlink:hover .nw-leadtitle{color:var(--gold-hi)}
.nw-leadsum{
  margin:18px 0 0;max-width:46ch;
  font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.68;color:var(--muted);
}
.nw-leadbtn{margin-top:clamp(24px,2.6vw,34px)}
/* el .btn de dentro es un span: no debe capturar el clic, lo lleva el <a> */
.nw-leadbtn{pointer-events:none}


/* ================= la fecha y la seccion ================= */
.nw-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
}
.nw-cat{color:var(--ivory)}
/* la separacion entre seccion y fecha es un punto, no un filete: menos caja */
.nw-cat + .nw-date::before,.nw-cat + .nw-nodate::before{
  content:"";display:inline-block;width:4px;height:4px;background:var(--peri);
  margin-right:14px;transform:translateY(-.18em);
}
.nw-date,.nw-nodate{color:var(--faint);white-space:nowrap}
/* la fecha sin poner se ve que esta sin poner */
.nw-nodate{color:var(--clay)}


/* ================= el listado ================= */
.nw-listsec{padding-top:clamp(48px,5.6vw,90px)}
.nw-list{list-style:none;margin:0;padding:0}
.nw-item{border-top:1px solid var(--line)}
/* el primer filete, mas grueso y en periwinkle: abre la lista */
.nw-item:first-child{border-top:2px solid var(--peri)}
.nw-item:last-child{border-bottom:1px solid var(--line)}

.nw-itemlink{
  display:grid;
  grid-template-columns:clamp(96px,10vw,150px) minmax(0,1fr) clamp(150px,15vw,215px);
  grid-template-areas:"meta text thumb";
  gap:clamp(16px,2.6vw,46px);align-items:start;
  padding:clamp(22px,2.7vw,40px) clamp(6px,1vw,18px);
  transition:background .4s var(--ease),padding-left .4s var(--ease);
}
.nw-itemlink:hover{background:rgba(147,177,255,.16);padding-left:clamp(12px,1.6vw,28px)}
.nw-itemlink .nw-meta{grid-area:meta;display:block;padding-top:.5em}
.nw-itemlink .nw-cat{display:block;margin-bottom:9px}
.nw-itemlink .nw-cat + .nw-date::before,
.nw-itemlink .nw-cat + .nw-nodate::before{display:none}

.nw-itemtext{grid-area:text;display:block;min-width:0}
.nw-itemtitle{
  display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(23px,2.6vw,40px);line-height:.98;letter-spacing:-.005em;
  color:var(--ivory);max-width:8em;transition:color .35s;
}
.nw-itemlink:hover .nw-itemtitle{color:var(--gold-hi)}
.nw-itemsum{
  display:block;margin-top:13px;max-width:58ch;
  font-size:15px;line-height:1.68;color:var(--muted);
}
/* "Read →" no ocupa sitio hasta que hace falta: aparece al pasar por encima */
.nw-itemgo{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:var(--ivory);opacity:0;transform:translateX(-6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.nw-itemlink:hover .nw-itemgo{opacity:1;transform:none}
.nw-itemgo .arr{transition:transform .4s var(--ease)}
.nw-itemlink:hover .nw-itemgo .arr{transform:translateX(4px)}

.nw-itemthumb{grid-area:thumb;display:block;overflow:hidden;background:var(--raise)}
.nw-itemthumb img{
  width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9);
  transition:transform .9s var(--ease),filter .5s;
}
.nw-itemlink:hover .nw-itemthumb img{transform:scale(1.05);filter:saturate(1)}

.nw-status{margin:clamp(24px,3vw,40px) 0 0;color:var(--faint)}


/* ================= las tres de la Home =================
   Mismo listado, medio tono mas bajo: sin resumen y con la foto pequena.
   "Does not need to dominate the page." */
.hm-news{padding-top:clamp(56px,6.4vw,104px);padding-bottom:clamp(56px,6.4vw,104px)}
.hm-newshead{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(16px,2.4vw,40px);margin-bottom:clamp(30px,3.4vw,52px);
}
.hm-newshead h2{font-size:clamp(30px,4.4vw,66px)}
.hm-newsall{
  display:inline-flex;align-items:center;gap:11px;flex:none;padding-bottom:.4em;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--ivory);border-bottom:2px solid var(--peri);transition:gap .35s var(--ease);
}
.hm-newsall:hover{gap:18px}
.hm-newsall .arr{transition:transform .4s var(--ease)}
.hm-newsall:hover .arr{transform:translateX(4px)}
.hm-newsall-foot{display:none;margin-top:26px}

.nw-home .nw-itemsum{display:none}
.nw-home .nw-itemtitle{font-size:clamp(21px,2.1vw,31px);max-width:9em}
.nw-home .nw-itemlink{
  grid-template-columns:clamp(92px,9vw,130px) minmax(0,1fr) clamp(110px,11vw,150px);
  padding-top:clamp(18px,2vw,28px);padding-bottom:clamp(18px,2vw,28px);
}


/* ================= el articulo ================= */
.nw-artheadsec{padding-bottom:clamp(26px,3.2vw,44px)}
.nw-back{
  display:inline-flex;align-items:center;gap:11px;
  margin:0 0 clamp(26px,3vw,40px);padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--body);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--muted);transition:color .35s,gap .35s var(--ease);
}
.nw-back:hover{color:var(--ivory);gap:18px}
.nw-backarr{color:var(--ivory)}
.nw-artcat{margin-bottom:20px}
.nw-arttitle{font-size:clamp(32px,5.4vw,86px);max-width:9.5em}
.nw-artsum{margin-top:clamp(20px,2.2vw,30px);max-width:56ch;color:var(--ivory)}

.nw-artfigsec{padding-top:0;padding-bottom:clamp(36px,4.4vw,68px)}
.nw-artfig{margin:0;overflow:hidden;background:var(--raise)}
.nw-artfig img{width:100%;aspect-ratio:16/7;object-fit:cover;filter:saturate(.94)}

/* Ficha en el margen y columna de lectura estrecha. El bloque de texto no
   va centrado en la pagina: va donde lo deja la ficha, y ese descuadre es
   lo que hace que se lea como una revista y no como un formulario. */
.nw-artbodysec{padding-top:0}
.nw-artgrid{
  display:grid;grid-template-columns:clamp(140px,16vw,230px) minmax(0,1fr);
  gap:clamp(24px,4.4vw,80px);align-items:start;
}
.nw-artrail{position:sticky;top:112px;display:block}
.nw-railrule{display:block;width:44px;height:2px;background:var(--peri);margin-bottom:22px}
.nw-raillabel{
  display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:500;color:var(--faint);margin-bottom:7px;
}
.nw-railvalue{display:block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--ivory);margin-bottom:24px}
.nw-railvalue .nw-date,.nw-railvalue .nw-nodate{color:inherit;letter-spacing:inherit}
.nw-railvalue .nw-nodate{color:var(--clay)}

.nw-artbody{max-width:64ch}
.nw-artbody p{font-size:clamp(16.5px,1.35vw,19px);line-height:1.78;color:var(--muted);margin:0 0 1.15em}
/* el primer parrafo entra un punto mas alto: es la entradilla */
.nw-artbody>p:first-child{
  font-size:clamp(19px,1.75vw,24px);line-height:1.5;color:var(--ivory);
  margin-bottom:1.1em;
}

/* el recuadro donde se explica, cuando toque, por que se abren nuevos
   certificados. Periwinkle de relleno, tinta encima. */
.nw-note{
  display:block;margin-top:clamp(30px,3.6vw,50px);
  background:rgba(147,177,255,.30);border-left:2px solid var(--peri);
  padding:clamp(20px,2.4vw,32px);
}
.nw-note h3{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(18px,1.9vw,25px);line-height:1;color:var(--ivory);margin:0 0 14px;
}
.nw-note p{margin:0;font-size:15px;line-height:1.7;color:rgba(16,13,10,.78)}

/* la frase de cierre */
.nw-statementsec{padding-top:clamp(46px,5.6vw,92px);padding-bottom:clamp(46px,5.6vw,92px)}
.nw-statement{display:grid;justify-items:center;gap:clamp(20px,2.4vw,34px);text-align:center}
.nw-rule{display:block;width:min(110px,26vw);height:2px;background:var(--peri)}
.nw-big{font-size:clamp(26px,4.2vw,64px);max-width:6.5em;line-height:.98}

.nw-moresec{padding-top:0}


/* ================= adaptacion ================= */
@media(max-width:980px){
  .nw-leadlink{grid-template-columns:1fr;gap:clamp(20px,3vw,30px)}
  .nw-leadfig img{aspect-ratio:16/9}
  .nw-leadtxt{max-width:60ch}

  /* la foto pasa a columna propia a la derecha y ocupa las dos filas */
  .nw-itemlink{
    grid-template-columns:minmax(0,1fr) clamp(130px,22vw,190px);
    grid-template-areas:"meta thumb" "text thumb";
    gap:clamp(12px,2vw,26px) clamp(16px,2.6vw,30px);
  }
  .nw-itemlink .nw-meta{padding-top:0}
  .nw-itemthumb{align-self:start}

  .nw-artgrid{grid-template-columns:1fr;gap:clamp(22px,3vw,34px)}
  .nw-artrail{position:static;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 26px;
    padding-bottom:22px;border-bottom:1px solid var(--line)}
  .nw-railrule{width:100%;margin-bottom:18px}
  .nw-raillabel{margin-bottom:0}
  .nw-railvalue{margin:0 20px 0 8px}
  .nw-artbody{max-width:none}
}

@media(max-width:620px){
  .nw-itemlink{
    grid-template-columns:1fr;
    grid-template-areas:"thumb" "meta" "text";
    gap:16px;padding-left:0;padding-right:0;
  }
  .nw-itemlink:hover{padding-left:0;background:none}
  .nw-itemthumb img{aspect-ratio:16/9}
  /* en movil no hay hover, asi que "Read →" se queda puesto */
  .nw-itemgo{opacity:1;transform:none;margin-top:14px}
  .nw-home .nw-itemlink{grid-template-areas:"meta" "text";gap:12px}
  .nw-home .nw-itemthumb{display:none}
  .hm-newsall-foot{display:inline-flex}
  .nw-artfig img{aspect-ratio:4/3}
  .nw-leadbtn{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .nw-itemgo{opacity:1;transform:none}
  .nw-leadfig img,.nw-itemthumb img{transform:none !important}
}

/* ======== FEEDBACK 2 — COMPOUND ======== */
/* =================================================================
   HOW WE COMPOUND (#p-compound) — feedback #2
   -----------------------------------------------------------------
   Solo lo NUEVO o lo CAMBIADO. Va al final de community.css, despues
   del bloque .cmp- que ya hay, para que gane por orden.

   Se puede BORRAR del bloque viejo, porque ya no lo usa nadie:
     .cmp-wheelwrap .cmp-wheel .cmp-node .cmp-ticks .cmp-hub .cmp-back
     .cmp-jobs .cmp-job .cmp-job-ico .cmp-traits
     .cmp-listensec .cmp-listen* (la seccion ya estaba comentada)
   Y de las reglas generales, la mencion a .cmp-node en la lista de
   box-shadow:none (linea ~5557) y en la de max-width:760px.

   Ni un color fuera de :root. El periwinkle aparece SIEMPRE como
   relleno o como trazo grafico, nunca como texto sobre crema: sobre
   crema da 2,02:1. Con tinta encima da 9,20:1, que es lo que llevan
   las fichas de la apertura, los numeros del volante y los iconos de
   asignacion.
   ================================================================= */


/* ---------- apertura ----------
   Las cuatro fichas eran cajas con borde y letra tinta. Pasan a
   relleno periwinkle solido: mismo sitio, mismo tamano, pero ponen
   color en la primera pantalla de la pagina, que es lo que faltaba. */
.cmp-pills li{
  border:0;background:var(--peri);color:var(--ivory);
  padding:10px 16px 9px;font-weight:500}


/* =================================================================
   EL VOLANTE, EN TRES MOVIMIENTOS
   -----------------------------------------------------------------
   Antes: nueve fichas de texto repartidas sobre una circunferencia.
   Cabian a duras penas, obligaban a leer en circulo y por debajo de
   1024 px se desmontaban en una lista, o sea que el diagrama solo
   existia en escritorio.

   Ahora se separan las dos cosas que ese dibujo mezclaba. La geometria
   se queda en el dial —tres arcos, tres marcas, un nucleo— y las
   palabras se van a una lista legible al lado, que es como estaba en
   la primera edicion (anillo + leyenda numerada) y es lo que el
   cliente echa de menos. Los nueve pasos no se pierden: se agrupan en
   los tres movimientos con los que el propio cliente describe el
   modelo —generar caja recurrente, retenerla y asignarla, reinvertir
   para aumentar la capacidad de generar—, tres por movimiento.

   LAS FLECHAS. El aviso del encargo era por el truco de
   rotate(A) translate(R) rotate(-A) en CSS, donde los angulos se
   suman. Aqui no hay ni un grado de CSS: los arcos son <path> de SVG y
   la punta va con marker-end orient="auto", que la orienta el propio
   trazado en cada extremo. Comprobado midiendo la tangente de salida
   de los tres arcos: 111,50 / -128,50 / -8,50 grados, o sea los tres
   en sentido horario y cada punta entrando en la marca siguiente.

   Geometria (viewBox 480x480, centro 240,240, R 170): tres sectores de
   120 grados con 17 de hueco, arcos de 103. Los huecos caen en -90,
   30 y 150 grados, que es donde van las marcas 01, 02 y 03.
   ================================================================= */
.cmp-fw{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(28px,4.4vw,80px);align-items:center;
  margin:clamp(36px,4.6vw,72px) 0 0}

/* --- el dial --- */
.cmp-fw-dial{--d:clamp(270px,32vw,440px);
  position:relative;width:var(--d);height:var(--d);flex:none}
.cmp-fw-dial svg{display:block;width:100%;height:100%;overflow:visible}
.cmp-fw-track{fill:none;stroke:rgba(16,13,10,.13);stroke-width:1}
.cmp-fw-arc{fill:none;stroke:var(--peri);stroke-width:11;stroke-linecap:butt}

/* Las marcas van con left/top en tanto por ciento del cuadrado, sin
   rotaciones: 01 en (50%, 14.583%), 02 en (80.672%, 67.708%) y 03 en
   (19.328%, 67.708%), que son los tres puntos de la circunferencia
   pasados a porcentaje del viewBox. */
.cmp-fw-mark{position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  width:clamp(34px,4.4vw,50px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ivory);color:var(--noir);
  font-family:var(--display);font-weight:700;
  font-size:clamp(12px,1.35vw,16px);letter-spacing:.04em;
  font-variant-numeric:tabular-nums}

.cmp-fw-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56%;aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.1vw,14px);padding:8% 11%;text-align:center;
  background:rgba(147,177,255,.20);border:1px solid rgba(147,177,255,.62)}
.cmp-fw-hub .ymark{color:var(--ivory);height:clamp(10px,1.3vw,16px);
  width:calc(clamp(10px,1.3vw,16px) * 2.456);margin:0}
.cmp-fw-hub b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.9vw,26px);line-height:1;letter-spacing:.01em;color:var(--ivory)}
.cmp-fw-hub-s{font-size:clamp(10px,1.05vw,12.5px);line-height:1.45;
  letter-spacing:.03em;color:var(--muted);max-width:16ch}

/* --- la leyenda --- */
.cmp-fw-legend{list-style:none;margin:0;padding:0}
.cmp-fw-ph{padding:clamp(18px,2.1vw,30px) 0;border-top:1px solid var(--line)}
.cmp-fw-ph:first-child{border-top:0;padding-top:0}
.cmp-fw-ph-k{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);margin:0}
.cmp-fw-ph-k i{flex:none;width:clamp(30px,3.4vw,40px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  background:var(--peri);color:var(--ivory);
  font-family:var(--display);font-weight:700;
  font-size:clamp(11px,1.2vw,14px);letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
/* titular de seccion: peso 400, como todos los que no dan nombre a la pagina */
.cmp-fw-ph-k span{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,2.5vw,34px);line-height:1;letter-spacing:.03em;color:var(--ivory)}
.cmp-fw-ph-d{margin:clamp(12px,1.3vw,18px) 0 0;max-width:44ch;
  font-size:clamp(15px,1.4vw,17.5px);line-height:1.6;color:var(--ivory)}
.cmp-fw-steps{list-style:none;margin:clamp(13px,1.4vw,18px) 0 0;padding:0;
  display:grid;gap:7px}
.cmp-fw-steps li{position:relative;padding-left:20px;max-width:48ch;
  font-size:14px;line-height:1.55;color:var(--muted)}
.cmp-fw-steps li::before{content:"";position:absolute;left:0;top:.52em;
  width:8px;height:8px;background:var(--peri)}

.cmp-fw-again{display:flex;align-items:center;gap:12px;
  margin:clamp(26px,3vw,42px) 0 0;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--ivory)}
.cmp-fw-again svg{width:16px;height:16px;flex:none;color:var(--peri)}

/* En columna el dial se centra y encoge, pero NO se esconde: ahora que
   lleva tres marcas en vez de nueve fichas de texto, en un telefono
   sigue leyendose. */
@media(max-width:1000px){
  .cmp-fw{grid-template-columns:1fr;gap:clamp(28px,5vw,44px);justify-items:center}
  .cmp-fw-dial{--d:min(78vw,380px)}
  .cmp-fw-legend{width:100%}
}
@media(max-width:560px){
  .cmp-fw-hub-s{display:none}
  .cmp-fw-dial{--d:min(84vw,320px)}
}


/* =================================================================
   DE DONDE SALE LA CAJA
   Sustituye al trio Hotels / Workspaces / Hospitality, que contaba la
   amplitud del ecosistema —eso es The YOUNG Advantage— y ademas
   repetia una foto con esa pagina. Aqui las tres fotos nombran la
   linea de ingreso recurrente que produce cada una.

   No es la rejilla .tri: tres retratos identicos alineados era otra
   caja mas. Cada foto lleva su propia proporcion en --ar y una caida
   escalonada, y el pie va debajo, en tinta, no encima de la imagen.
   ================================================================= */
.cmp-rec{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,40px);align-items:start;
  margin:clamp(34px,4.2vw,64px) 0 0}
.cmp-rec figure{margin:0;min-width:0}
.cmp-rec figure:nth-child(2){margin-top:clamp(24px,4.6vw,74px)}
.cmp-rec figure:nth-child(3){margin-top:clamp(48px,9.2vw,148px)}
.cmp-rec-fr{display:block;overflow:hidden;background:var(--raise)}
.cmp-rec img{width:100%;height:100%;display:block;object-fit:cover;
  aspect-ratio:var(--ar,3/4)}
.cmp-rec figcaption{display:block;margin-top:clamp(13px,1.4vw,18px);
  padding-top:clamp(11px,1.2vw,15px);border-top:2px solid var(--peri)}
.cmp-rec figcaption b{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(14px,1.5vw,19px);line-height:1;
  letter-spacing:.02em;color:var(--ivory)}
.cmp-rec figcaption span{display:block;margin-top:7px;max-width:26ch;
  font-size:13px;line-height:1.5;color:var(--muted)}
@media(max-width:820px){
  .cmp-rec{grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,24px)}
  .cmp-rec figure:nth-child(2){margin-top:clamp(20px,5vw,44px)}
  .cmp-rec figure:nth-child(3){grid-column:1/-1;margin-top:clamp(20px,5vw,40px)}
  .cmp-rec figure:nth-child(3) img{aspect-ratio:16/9}
}
@media(max-width:520px){
  .cmp-rec{grid-template-columns:1fr}
  .cmp-rec figure:nth-child(2),.cmp-rec figure:nth-child(3){margin-top:0}
}


/* =================================================================
   CADA EURO TIENE UN TRABAJO
   Cinco tarjetas con borde pasan a cinco filas de un libro de
   asignacion: un filete arriba, tres columnas —icono, concepto,
   explicacion— y nada mas. Menos caja, mas documento.
   El icono va sobre relleno periwinkle con el trazo en tinta: 9,20:1.
   ================================================================= */
.cmp-alloc{margin:clamp(34px,4vw,60px) 0 0;padding:0;
  border-bottom:1px solid var(--line)}
.cmp-alloc-i{display:grid;
  grid-template-columns:auto minmax(0,22ch) minmax(0,1fr);
  align-items:start;gap:clamp(16px,2.4vw,44px);
  padding:clamp(20px,2.4vw,32px) clamp(10px,1.2vw,18px);
  /* el relleno lateral es solo para que el hover no muerda el texto:
     se compensa con margen negativo para que el filete siga cuadrado
     con el resto de la columna */
  margin-inline:calc(clamp(10px,1.2vw,18px) * -1);
  border-top:1px solid var(--line);
  transition:background .4s var(--ease)}
.cmp-alloc-i:hover{background:rgba(147,177,255,.14)}
.cmp-alloc-ico{flex:none;display:grid;place-items:center;
  width:clamp(40px,4vw,52px);aspect-ratio:1;
  background:var(--peri);color:var(--ivory)}
.cmp-alloc-ico svg{width:58%;height:58%;display:block}
.cmp-alloc dt{margin:0;font-family:var(--display);font-weight:400;
  text-transform:uppercase;font-size:clamp(17px,1.9vw,26px);line-height:1.04;
  letter-spacing:.03em;color:var(--ivory);padding-top:.14em}
.cmp-alloc dd{margin:0;max-width:52ch;padding-top:.24em;
  font-size:clamp(14px,1.35vw,16.5px);line-height:1.62;color:var(--muted)}
@media(max-width:900px){
  .cmp-alloc-i{grid-template-columns:auto minmax(0,1fr);
    gap:clamp(14px,2.6vw,22px) clamp(14px,2.6vw,22px)}
  .cmp-alloc dd{grid-column:2}
}
@media(prefers-reduced-motion:reduce){.cmp-alloc-i{transition:none}}


/* ---------- el overhead ----------
   Lo que habia aqui, "Stay entrepreneurial as we grow", repetia el
   argumento de operadores emprendedores y capas de gestion que ya
   lleva The YOUNG Advantage. Se queda solo la mitad que es de esta
   pagina —el overhead como fuga de caja— y las cuatro fichas de
   cultura desaparecen: eran de la otra. En su sitio, una linea
   destacada, que es la unica frase del cliente que era economica. */
.cmp-pull{margin:clamp(26px,3vw,40px) 0;max-width:24ch;
  padding-left:clamp(16px,1.8vw,26px);border-left:3px solid var(--peri);
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(19px,2.3vw,32px);line-height:1.06;letter-spacing:.03em;
  color:var(--ivory)}
@media(prefers-reduced-motion:reduce){.cmp-fw-mark,.cmp-alloc-i{transition:none}}

/* ======== FEEDBACK 2 — ADVANTAGE ======== */
/* ==========================================================================
   THE YOUNG ADVANTAGE - estilos nuevos y cambiados
   Va DESPUES de community.css (o pegado al final). Solo lo nuevo y lo que
   cambia; nada de lo que ya funciona se repite aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   AVISO, LEER ANTES DE INTEGRAR

   En community.css, linea 3526, el rotulo de la seccion ADVANTAGE abre
   comentario y no lo cierra: le falta la barra final. El comentario sigue
   abierto hasta el primer cierre que encuentra, que esta en la linea 3540.
   Con lo cual HOY estan comentadas, y por tanto muertas, estas reglas:

       .adv-opentxt, .adv-openlead, .adv-openfig, .adv-openfig img,
       .adv-openfig figcaption y el @media(max-width:900px) de la apertura

   Ese es el hueco blanco del que se queja el cliente. Sin esas reglas
   .adv-opengrid nunca llega a ser grid (display computado: block) y la
   foto se dibuja al ancho que le dicta su atributo sizes, dentro de un
   bloque que ocupa la fila entera.

   Este archivo NO depende de que se arregle esa barra: la apertura se
   reconstruye con nombres nuevos (.adv-mast*), asi que funciona igual si
   el comentario se repara y las reglas viejas resucitan. Aun asi conviene
   repararlo, porque ahi dentro hay CSS que nadie ejecuta.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   1 - LA APERTURA. El hueco blanco.

   Medido en el navegador a 1440x900, con la pagina como esta hoy:

       fila (.adv-opengrid)      1275,3 px
       foto (ancho de maqueta)     547,2 px   <- se lo da sizes="38vw"
       blanco a su derecha         688,1 px   = 54,0 % de la fila

   Se arregla combinando dos de las tres salidas que propone el cliente:
   la foto crece y se lleva la columna ancha, y el hueco que dejaba pasa a
   tener trabajo (el zocalo de datos, en periwinkle).

   Dos columnas de .88fr y 1.12fr con gap de 57,6 px, o sea a 1440:
   texto 535,8 px y foto 681,9 px. La foto ocupa el 100 % de su columna,
   asi que el blanco a su derecha pasa de 688,1 px a 0.

   La altura tambien cuadra sola: el grid va en stretch y el zocalo lleva
   margin-top:auto, asi que la columna de texto se estira hasta la altura
   de la foto y las dos acaban al mismo nivel, haya el texto que haya. Si
   el texto creciera mas que la foto, es la foto la que se estira:
   aspect-ratio marca el suelo de altura, no el techo.
   ========================================================================== */
.adv-mast{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(28px,4vw,64px);
  align-items:stretch;
}
.adv-mast-txt{min-width:0;display:flex;flex-direction:column}
/* .lead trae max-width:58ch, que en una columna de 536 px deja la ultima
   linea corta y vuelve a abrir un hueco. Aqui manda la columna. */
.adv-mast-lead{margin:clamp(24px,3vw,38px) 0 0;max-width:none}

/* el zocalo: lo que ocupa el sitio que antes estaba en blanco.
   Periwinkle de relleno con la tinta encima, que da 9,20:1. */
.adv-facts{
  list-style:none;
  margin:clamp(32px,3.6vw,52px) 0 0;
  margin-top:auto;
  padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,34px);
  background:var(--peri);
}
.adv-facts li{
  display:flex;align-items:baseline;gap:clamp(14px,1.6vw,22px);
  padding:clamp(11px,1.2vw,16px) 0;
  border-bottom:1px solid rgba(16,13,10,.22);
}
.adv-facts li:first-child{padding-top:0}
.adv-facts li:last-child{padding-bottom:0;border-bottom:0}
.adv-facts b{
  flex:none;min-width:3.1em;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,2.5vw,38px);line-height:.92;letter-spacing:-.01em;
  color:var(--ivory);
}
.adv-facts span{
  font-family:var(--body);font-weight:300;
  font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.42;
  color:rgba(16,13,10,.82);
}

/* la foto llena su columna de borde a borde */
.adv-mast-fig{
  margin:0;position:relative;overflow:hidden;
  aspect-ratio:4/5;background:var(--raise);
}
.adv-mast-fig img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
/* el rotulo, en banda de periwinkle en vez del degradado negro de
   siempre: mismo sitio, la mitad de negro */
.adv-mast-fig figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px clamp(14px,1.6vw,22px) 12px;
  background:var(--peri);color:var(--ivory);
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
}

@media(max-width:1000px){
  .adv-mast{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .adv-mast-fig{aspect-ratio:4/3}
  .adv-facts{margin-top:clamp(28px,4vw,40px)}
}


/* ==========================================================================
   2 - LA CADENA. Los numeros dejan de ser un gris.
   Eran color:var(--gold), que en esta hoja es tinta al 100 %: otro negro
   mas. Pasan a chapa de periwinkle con la tinta encima.
   ========================================================================== */
.adv-cyc-i i{
  min-width:0;align-self:center;
  display:inline-block;background:var(--peri);color:var(--ivory);
  padding:5px 8px 4px;margin-right:2px;
  font-size:10.5px;letter-spacing:.16em;line-height:1;
}
.adv-cycback{color:var(--ivory)}


/* ==========================================================================
   3 - LA FRASE GRANDE. Fondo --raise en vez de --panel (dos cremas casi
   iguales no se distinguian) y la segunda linea subrayada con una barra
   de periwinkle: color sin ponerlo en la letra, que sobre crema no se
   leeria.
   ========================================================================== */
.adv-megaband{
  background:var(--raise);
  border-top:1px solid var(--peri);border-bottom:1px solid var(--peri);
}
.adv-mega em{
  color:var(--ivory);
  display:inline-block;         /* para que la barra mida el texto, no la caja */
  background-image:linear-gradient(var(--peri),var(--peri));
  background-repeat:no-repeat;
  background-size:100% .28em;
  background-position:0 88%;
  padding:0 .12em;
}


/* ==========================================================================
   4 - LA TIRA DE FOTOS, de tres a cuatro.
   ========================================================================== */
.adv-quad{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.adv-quad{grid-template-columns:1fr 1fr}}


/* ==========================================================================
   5 - LA RED. Sustituye a .adv-eng* (el "Opportunity Engine"), que se
   retira entero: era la rueda de How We Compound contada otra vez. Aqui
   no hay diagrama, hay una frase grande y una linea de nombres.

   Las reglas .adv-englead, .adv-eng, .adv-enghint, .adv-engscroll,
   .adv-engin, .adv-engtrack, .adv-engstep, .adv-engloop y .adv-engrail
   quedan sin usar en community.css (lineas ~3592-3633) y se pueden
   borrar al integrar.
   ========================================================================== */
.adv-netgrid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,4.4vw,72px);align-items:start;
  margin-top:clamp(26px,3.2vw,44px);
}
.adv-netlead{max-width:none}
.adv-netpull{
  margin:0;padding-left:clamp(16px,2vw,28px);
  border-left:3px solid var(--peri);
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,2.8vw,40px);line-height:.98;letter-spacing:.005em;
  color:var(--ivory);
}
@media(max-width:900px){.adv-netgrid{grid-template-columns:1fr;gap:clamp(24px,4vw,34px)}}

/* quien es la red: una sola linea corrida, no ocho tarjetas. El separador
   es un cuadrado de periwinkle, que es relleno y no texto. */
.adv-who{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(10px,1.4vw,20px);
  margin:clamp(34px,4.2vw,62px) 0 0;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(19px,2.5vw,38px);line-height:1.06;letter-spacing:.005em;
  color:var(--ivory);
}
.adv-who span{display:inline-flex;align-items:center;gap:clamp(10px,1.4vw,20px)}
.adv-who span+span::before{
  content:"";flex:none;
  width:clamp(7px,.75vw,11px);aspect-ratio:1;background:var(--peri);
}
.adv-whonote{margin:clamp(16px,1.8vw,24px) 0 0;max-width:56ch}


/* ==========================================================================
   6 - GENTE EMPRENDEDORA. El rotulo y el pull dejan de ser negros.
   El pull era border-left:2px solid var(--gold), o sea otra raya negra.

   La foto conserva el aspect-ratio 3/4 que ya trae community.css: medido
   a 1440 da 690 px de alto contra 644 de la columna de texto, 46 px de
   diferencia (7 %). Con 2/3 subia a 776 y la diferencia se iba a 132.
   ========================================================================== */
.adv-ownfig figcaption{
  background:var(--peri);color:var(--ivory);
  padding:14px clamp(14px,1.6vw,22px) 12px;
  font-weight:500;text-shadow:none;
}
.adv-pull{border-left:3px solid var(--peri);color:var(--ivory)}


/* ==========================================================================
   7 - LAS IDEAS. Un pico de periwinkle por fila, y la etiqueta deja de
   ser tinta al 100 % para que el peso lo lleve el titular.
   ========================================================================== */
.adv-seeds li{position:relative;padding-left:26px}
.adv-seeds li::before{
  content:"";position:absolute;left:0;top:calc(50% - 4px);
  width:9px;height:9px;background:var(--peri);
}
.adv-seeds li:hover{padding-left:40px}
.adv-seeds em{color:var(--muted)}
@media(max-width:420px){
  .adv-seeds li::before{top:calc(1.05em - 4px)}
}


/* ==========================================================================
   8 - EL CIERRE. Era un panel crema sobre fondo crema, o sea invisible.
   Pasa a periwinkle macizo con la tinta encima: 9,20:1. Es el ultimo
   golpe de la pagina, que es donde el cliente pide seguridad.
   ========================================================================== */
.adv-final{
  background:var(--peri);border:0;
  padding:clamp(46px,6vw,96px) clamp(20px,3.4vw,56px);
}
.adv-finalbig{color:var(--ivory)}
.adv-finalsub{color:var(--ivory);opacity:.86}
.adv-finalsub em{color:var(--ivory);font-weight:inherit}

/* ======== FEEDBACK 2 — COOWN ======== */
/* =====================================================================
   CO-OWNERSHIP (#p-coown) — feedback #2
   ---------------------------------------------------------------------
   Estas reglas van AL FINAL de web/community/community.css. No sustituyen
   ningun bloque: se apoyan en lo que ya hay y solo cambian la piel de lo
   que el cliente senalo. Casi todas llevan #p-coown para ganar a las
   reglas viejas sin borrarlas y para no tocar ninguna otra pagina.

   Lo que se resuelve aqui, en el orden del encargo:
   1. La apertura. Banda entera de periwinkle con la foto de grupo del
      YOUNG Weekend sangrando por la derecha, y el certificado montado
      sobre el borde de la banda.
   2. Menos cajas. Los cuatro puntos, los nueve grupos, los dos niveles
      de informacion y los dos mecanismos pierden marco y fondo y pasan
      a filete + tipografia, en escalera o en fila corrida.
   3. Periwinkle de verdad: tres bandas enteras (apertura, "way back" y
      cierre) y cuatro rellenos (precio, valoracion, la cuenta y la
      ambicion). Siempre con TINTA encima: 9,20:1.

   CONTRASTE. Periwinkle sobre crema son 2,02:1 y no vale para texto.
   Aqui no se usa nunca asi. Donde el periwinkle es fondo, el texto es
   tinta; y como --muted (tinta al 66%) sobre periwinkle se queda en
   4,48:1, .co-peri redefine las variables de tinta al vuelo:
     --muted  .78 -> 6,10:1
     --faint  .72 -> 5,29:1
   Asi hereda todo lo de dentro sin repetir un solo color a mano.

   Reglas que quedan sin uso al integrar (el HTML ya no las nombra):
   .co-open .co-intro .co-intro-txt. Se pueden borrar de la hoja.
   ===================================================================== */


/* =====================================================================
   0 · LA BANDA DE PERIWINKLE, COMO PIEZA REUTILIZABLE
   ===================================================================== */
#p-coown .co-peri{
  background:var(--peri);
  /* tinta subida hasta pasar AA sobre periwinkle. Ver cabecera. */
  --muted:rgba(16,13,10,.78);
  --faint:rgba(16,13,10,.72);
  --gold-dim:rgba(16,13,10,.55);
  --line:rgba(16,13,10,.22);
  --line-2:rgba(16,13,10,.32);
}
/* El guion del rotulo y el trazo del titular van los dos en periwinkle
   por defecto (los puso el bloque "el periwinkle como detalle"), asi que
   sobre periwinkle desaparecen. Sobre azul van en tinta, igual que ya
   hace el pie de pagina, que tambien es periwinkle. */
#p-coown .co-peri .eyebrow::before{background:var(--ivory)}
#p-coown .co-peri .pgtitle::after{background-color:var(--ivory)}


/* =====================================================================
   1 · LA APERTURA
   ---------------------------------------------------------------------
   Antes: titular y entradilla sobre crema, con el certificado al lado.
   Ni una persona, ni un color. El cliente lo describio como "black and
   white, strict and a little sterile", y tenia razon.

   Ahora: banda de periwinkle a sangre completa, la foto de grupo de
   Valencia ocupando la derecha hasta el borde del navegador, y debajo
   del titular una fila de caras reales. La foto va POSICIONADA y no con
   margenes negativos porque .wrap topa en 1400 px: en una pantalla de
   1920 un margen negativo del padding se queda a 260 px del borde y la
   sangre no llega.
   ===================================================================== */
#p-coown .co-hero{
  position:relative;
  overflow:hidden;                       /* recorta la foto al canto */
  padding-top:clamp(50px,6.4vw,104px);
  padding-bottom:clamp(56px,7vw,116px);
}

#p-coown .co-hero-txt{
  position:relative;z-index:1;
  /* el hueco que queda a la izquierda de la foto. En porcentaje sobre
     el .wrap y con tope en px para que en pantallas muy anchas la
     columna no se estire mas alla de lo legible. */
  max-width:min(620px,50%);
}

#p-coown .co-hero .co-hero-fig{
  position:absolute;margin:0;
  /* separada del canto de arriba y de abajo: asi se lee como una foto
     puesta encima del azul, no como media pantalla partida en dos. */
  inset:clamp(14px,2.4vw,34px) 0 clamp(14px,2.4vw,34px) auto;
  width:min(44vw,720px);
  overflow:hidden;background:rgba(16,13,10,.08);
}
#p-coown .co-hero .co-hero-fig img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease);
}
#p-coown .co-hero .co-hero-fig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(16,13,10,.74) 0%,rgba(16,13,10,.34) 48%,transparent 100%);
  text-shadow:0 1px 12px rgba(16,13,10,.6);
}

/* La fila de caras. Es lo mas humano que puede llevar una apertura sin
   inventarse un testimonio: cuatro socios de verdad, de FOTOS.md. */
#p-coown .co-hero-line{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;
  margin:clamp(26px,3.2vw,44px) 0 0;
}
#p-coown .co-faces{display:inline-flex;flex:none}
#p-coown .co-faces img{
  width:clamp(36px,3.6vw,50px);height:clamp(36px,3.6vw,50px);
  border-radius:50%;object-fit:cover;
  /* el borde es del color de la banda: recorta la cara contra el azul
     y deja ver el solape de la fila */
  border:2px solid var(--peri);
  margin-left:clamp(-14px,-1vw,-10px);
  box-shadow:0 3px 12px rgba(16,13,10,.22);
}
#p-coown .co-faces img:first-child{margin-left:0}
#p-coown .co-hero-line-t{
  font-family:var(--body);font-weight:500;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.55;
  color:var(--ivory);max-width:36ch;
}

@media(max-width:900px){
  #p-coown .co-hero-txt{max-width:100%}
  /* la foto baja debajo del texto y sangra a los dos lados. Va despues
     del .wrap en el HTML justamente para esto. */
  #p-coown .co-hero .co-hero-fig{
    position:static;width:auto;aspect-ratio:16/10;
    margin:clamp(30px,5vw,46px) calc(-1 * var(--pad)) 0;
  }
}


/* =====================================================================
   2 · EL CERTIFICADO, MONTADO SOBRE LA BANDA
   ---------------------------------------------------------------------
   El certificado sale de la reja del titular y se convierte en la
   costura entre el azul y la crema: sube con un margen negativo y se
   apoya medio dentro de la banda. Es lo que evita que la apertura
   termine en una linea recta de lado a lado.

   Sigue dentro de .cardwrap.co-cardwrap SIN TOCAR, porque app.js
   engancha el efecto de inclinacion por .ocard y usa el padre como
   zona sensible y como fuente de la perspectiva.
   ===================================================================== */
#p-coown .co-cert{padding-top:clamp(56px,7vw,120px)}

#p-coown .co-cert-grid{
  display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  gap:clamp(28px,4.6vw,76px);align-items:center;
}
#p-coown .co-cert .co-cardwrap{
  position:relative;z-index:3;
  margin-top:calc(-1 * clamp(90px,11vw,210px));
  /* La hoja global le pone order:2 a .cardwrap por debajo de 1080px, para
     el hero de Home, donde la tarjeta va la segunda. Aqui el certificado
     es el PRIMERO de la reja, asi que entre 900 y 1080 ese order lo
     mandaba a la columna derecha, justo debajo de la foto de la banda. */
  order:0;
}
#p-coown .co-cert-txt{min-width:0}

@media(max-width:900px){
  #p-coown .co-cert-grid{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  /* sin banda debajo con la que solaparse, el margen negativo solo
     sirve para meter la tarjeta dentro de la foto */
  #p-coown .co-cert .co-cardwrap{margin-top:0}
}


/* =====================================================================
   3 · LOS CUATRO PUNTOS, SIN CAJAS
   ---------------------------------------------------------------------
   Eran cuatro celdas identicas dentro de un marco de 1px: la reja mas
   rigida de la pagina y justo el "framed black-and-white box" del que
   se queja el cliente.

   Ahora: el precio es un bloque LLENO de periwinkle (es el unico dato
   duro de la apertura y merece ser el unico color) y los otros tres
   cuelgan de un filete de periwinkle de 2 px, bajando en escalera. La
   escalera es lo que rompe la lectura de reja sin perder el orden.
   ===================================================================== */
#p-coown .co-pillars{
  margin:clamp(52px,6.2vw,100px) 0 0;
  grid-template-columns:1.24fr 1fr 1fr 1fr;
  gap:clamp(18px,2.4vw,38px);
  background:none;border:0;align-items:start;
}
#p-coown .co-pillar{
  background:none;
  border-top:2px solid var(--peri);
  padding:clamp(18px,2vw,26px) 0 0;
  transition:none;
}
#p-coown .co-pillar:hover{background:none}

/* la escalera: 0 · 1 · 2 · 3 peldanos */
#p-coown .co-pillar:nth-child(2){margin-top:clamp(16px,2.6vw,42px)}
#p-coown .co-pillar:nth-child(3){margin-top:clamp(32px,5.2vw,84px)}
#p-coown .co-pillar:nth-child(4){margin-top:clamp(48px,7.8vw,126px)}

/* el precio: relleno, no marco */
#p-coown .co-pillar-price{
  background:var(--peri);border-top:0;
  padding:clamp(24px,2.8vw,36px) clamp(22px,2.4vw,32px) clamp(26px,3vw,40px);
  --muted:rgba(16,13,10,.78);
  --faint:rgba(16,13,10,.72);
  margin-top:0;
}
#p-coown .co-pillar-price:hover{background:var(--peri)}
#p-coown .co-pillar-price .co-pill-ico{margin-bottom:clamp(20px,2.4vw,32px)}

#p-coown .co-pill-ico{margin-bottom:clamp(20px,2.4vw,30px)}

@media(max-width:1000px){
  #p-coown .co-pillars{grid-template-columns:1fr 1fr}
  /* con dos columnas la escalera de cuatro peldanos deja huecos raros:
     se reduce a un solo desnivel entre columna izquierda y derecha */
  #p-coown .co-pillar:nth-child(2){margin-top:clamp(14px,2.4vw,30px)}
  #p-coown .co-pillar:nth-child(3){margin-top:0}
  #p-coown .co-pillar:nth-child(4){margin-top:clamp(14px,2.4vw,30px)}
}
@media(max-width:560px){
  #p-coown .co-pillars{grid-template-columns:1fr}
  #p-coown .co-pillar:nth-child(n){margin-top:0}
}


/* =====================================================================
   4 · PROPIEDAD A LARGO PLAZO, CON GENTE AL LADO
   Era una columna de texto sola en medio de la crema.
   ===================================================================== */
#p-coown .co-long-grid{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(30px,4.8vw,80px);align-items:center;
}
@media(max-width:900px){
  #p-coown .co-long-grid{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
}


/* =====================================================================
   5 · LAS FOTOS DE LA PAGINA
   .co-shot ya existia (empleados) con proporcion 3/2 y su pie sobre
   degradado. Solo se le anaden formatos: la fotografia nueva viene en
   vertical, en 3/4 y en 4/5, y recortarla toda a 3/2 seria tirar
   media foto.
   ===================================================================== */
#p-coown .co-shot-port{aspect-ratio:3/4}
#p-coown .co-shot-tall{aspect-ratio:4/5}
#p-coown .co-shot-wide{aspect-ratio:16/10}
@media(max-width:900px){
  #p-coown .co-shot-port,
  #p-coown .co-shot-tall{aspect-ratio:4/3}
}


/* =====================================================================
   6 · LA VALORACION, EN RELLENO
   La caja gris con filete era el sitio donde mas se notaba el folleto
   financiero. Mismo contenido, relleno de periwinkle y tinta encima.
   ===================================================================== */
#p-coown .co-val-box{
  background:var(--peri);border:0;
  padding:clamp(28px,3.2vw,44px);
  --muted:rgba(16,13,10,.78);
  --faint:rgba(16,13,10,.72);
  --line:rgba(16,13,10,.24);
}


/* =====================================================================
   7 · "YOUR PIECE OF YOUNG" SOBRE UN LAVADO DE AZUL
   ---------------------------------------------------------------------
   Es la parte mas aritmetica de la pagina: dos tablas y una cuenta.
   Sobre crema pelada leia como un anexo. El lavado la separa del resto
   sin encerrarla en ninguna caja, y la cuenta pasa a relleno macizo.

   AQUI VIVEN #coPrice3, #coBuy y las dos tablas #coEx* / #coAlt*.
   Ni un id ni una clase de las que usa app.js ha cambiado.
   ===================================================================== */
#p-coown .co-wash{background:rgba(147,177,255,.16)}

#p-coown .co-eq{
  background:var(--peri);border-top:0;
  --muted:rgba(16,13,10,.78);
  --faint:rgba(16,13,10,.72);
}
/* dentro del relleno, el total ya no puede distinguirse por color:
   se distingue por un filete debajo, en tinta */
#p-coown .co-eq-tot{
  box-shadow:inset 0 -3px 0 0 var(--ivory);
  padding-bottom:2px;
}
/* las tablas van sobre el lavado, asi que la fila alterna se apoya en
   blanco y no en tinta: sobre azul claro, tinta al 4% no se ve */
#p-coown .co-wash .co-tab tbody tr:hover{background:rgba(255,253,247,.55)}
/* el aviso de riesgo, que aqui es obligatorio y no se toca de texto,
   se apoya en blanco para no desaparecer contra el lavado */
#p-coown .co-wash .co-disc{background:rgba(255,253,247,.66)}


/* =====================================================================
   8 · LA OPCION DE RECOMPRA: SEGUNDA BANDA DE PERIWINKLE
   ---------------------------------------------------------------------
   Era var(--panel), o sea crema sobre crema: cambiaba de fondo y no se
   notaba. Es la seccion que tranquiliza, la que dice "hay una salida",
   y es donde el color hace mas trabajo emocional de toda la pagina.
   ===================================================================== */
#p-coown .co-back{
  background:var(--peri);
  border-top:1px solid rgba(16,13,10,.16);
  border-bottom:1px solid rgba(16,13,10,.16);
}
#p-coown .co-back-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(30px,4.8vw,78px);align-items:center;
  margin-top:clamp(24px,3vw,44px);
}
/* sobre azul, el filete de los cuatro pasos tiene que ser tinta franca:
   var(--line-2) a .32 sobre periwinkle apenas registra */
#p-coown .co-back .co-steps li{border-top-color:rgba(16,13,10,.42)}
@media(max-width:900px){
  #p-coown .co-back-grid{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
}


/* =====================================================================
   9 · PARA QUIEN ES: NUEVE CAJAS -> UNA SOLA FRASE
   ---------------------------------------------------------------------
   Nueve celdas identicas dentro de un marco. Ahora son nueve palabras
   en Manuka encadenadas por puntos de periwinkle, envolviendo como un
   parrafo. La tipografia hace de estructura, que es exactamente lo que
   pedia el encargo, y el bloque ocupa la mitad de alto que la reja.

   El punto es marca grafica, no texto: el periwinkle puede ir ahi.
   ===================================================================== */
#p-coown .co-who{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(10px,1.3vw,20px) clamp(16px,2vw,30px);
  background:none;border:0;
  margin:clamp(6px,1vw,14px) 0 0;
}
#p-coown .co-who li{
  background:none;padding:0;
  display:inline-flex;align-items:center;gap:clamp(12px,1.4vw,20px);
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,3vw,44px);line-height:1.04;letter-spacing:.005em;
  color:var(--ivory);
}
#p-coown .co-who li:hover{background:none}
#p-coown .co-who li::before{
  width:clamp(8px,.85vw,12px);height:clamp(8px,.85vw,12px);
  background:var(--peri);
  transition:transform .45s var(--ease);
}
#p-coown .co-who li:hover::before{background:var(--peri);transform:scale(1.5)}

#p-coown .co-forwho-foot{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,4.8vw,78px);align-items:center;
  margin-top:clamp(38px,4.6vw,74px);
}
#p-coown .co-forwho-txt .co-say-wide{margin-top:0}
@media(max-width:900px){
  #p-coown .co-forwho-foot{grid-template-columns:1fr;gap:clamp(26px,4vw,42px)}
}


/* =====================================================================
   10 · NIVELES DE INFORMACION: DOS CAJAS -> DOS RENGLONES
   ===================================================================== */
#p-coown .co-lv{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line);
}
#p-coown .co-lvc{
  border:0;border-bottom:1px solid var(--line);background:none;
  padding:clamp(24px,2.8vw,38px) 0;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(16px,2.6vw,44px);align-items:baseline;
}
#p-coown .co-lvc:hover{border-color:var(--line)}
/* el segundo nivel es el que pide NDA: se marca con un filete de
   periwinkle a la izquierda, no con un fondo tintado */
#p-coown .co-lvc.is-hi{
  background:none;border-bottom-color:var(--line);
  box-shadow:inset 3px 0 0 0 var(--peri);
  padding-left:clamp(18px,2vw,28px);
}
#p-coown .co-lvk{margin-bottom:0;font-size:clamp(17px,2vw,26px)}
#p-coown .co-lvp{max-width:58ch}
@media(max-width:760px){
  #p-coown .co-lvc{grid-template-columns:1fr;gap:14px;align-items:start}
}


/* =====================================================================
   11 · LOS DOS MECANISMOS: FUERA EL MARCO
   Quedan dos columnas colgadas de un filete de periwinkle, con "One" y
   "Two" en grande. Confundirlos sigue siendo lo que no se quiere, y
   ahora se distinguen por el numero, que es mas claro que un borde.
   ===================================================================== */
#p-coown .co-mech{gap:clamp(24px,3.4vw,56px)}
#p-coown .co-mechc{
  border:0;background:none;
  border-top:2px solid var(--peri);
  padding:clamp(20px,2.2vw,30px) 0 0;
  transition:none;
}
#p-coown .co-mechc:hover{border-color:var(--peri);background:none}
#p-coown .co-mechn{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,3vw,42px);letter-spacing:0;line-height:1;
  color:var(--ivory);margin-bottom:clamp(14px,1.6vw,22px);
}

/* la ambicion: cuatro celdas con filete -> un bloque lleno de azul */
#p-coown .co-amb{border-top:0;padding-top:0;margin-top:clamp(40px,4.8vw,72px)}
#p-coown .co-amb-k{
  margin:0 0 clamp(14px,1.8vw,22px);
  padding-top:clamp(18px,2vw,26px);border-top:2px solid var(--peri);
}
#p-coown .co-ambgrid{
  background:var(--peri);border:0;gap:0;
  --muted:rgba(16,13,10,.78);
}
#p-coown .co-ambgrid li{
  background:none;
  padding:clamp(22px,2.6vw,34px) clamp(16px,1.8vw,26px);
}
/* el "+" iba dentro de un cuadradito color crema que tapaba el hueco de
   1px de la reja. Sin reja no hay hueco: pasa a filete de tinta. */
#p-coown .co-ambgrid li + li{box-shadow:inset 1px 0 0 0 rgba(16,13,10,.22)}
#p-coown .co-ambgrid li + li::before{display:none}
@media(max-width:860px){
  #p-coown .co-ambgrid li:nth-child(3){box-shadow:none}
  #p-coown .co-ambgrid li:nth-child(n+3){box-shadow:inset 0 1px 0 0 rgba(16,13,10,.22)}
  #p-coown .co-ambgrid li:nth-child(4){box-shadow:inset 1px 0 0 0 rgba(16,13,10,.22),inset 0 1px 0 0 rgba(16,13,10,.22)}
}
@media(max-width:520px){
  #p-coown .co-ambgrid li + li{box-shadow:inset 0 1px 0 0 rgba(16,13,10,.22)}
}


/* =====================================================================
   12 · LA FUNDACION: FOTO, NO RECUADRO
   Era la parte mas humana de la pagina metida en la caja mas gris.
   ===================================================================== */
#p-coown .co-fnd{
  border:0;background:none;padding:0;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,4.8vw,76px);align-items:center;
}
#p-coown .co-fnd-txt{min-width:0}
@media(max-width:900px){
  #p-coown .co-fnd{grid-template-columns:1fr;gap:clamp(26px,4vw,42px)}
}


/* =====================================================================
   13 · EL CIERRE: TERCERA BANDA DE PERIWINKLE
   ---------------------------------------------------------------------
   .ctaband global va sobre --panel. Aqui, y SOLO aqui (el selector
   lleva #p-coown), va sobre periwinkle: la pagina abre en azul y cierra
   en azul. El boton primario es periwinkle sobre periwinkle, asi que se
   invierte a tinta; el fantasma se queda con borde de tinta.
   ===================================================================== */
#p-coown .ctaband{
  background:var(--peri);
  border-top:1px solid rgba(16,13,10,.16);
  border-bottom:1px solid rgba(16,13,10,.16);
}
#p-coown .ctaband .btn{
  background:var(--ivory);border-color:var(--ivory);color:var(--noir);
}
#p-coown .ctaband .btn:hover{
  background:transparent;color:var(--ivory);border-color:var(--ivory);
}
#p-coown .ctaband .btn.ghost{
  background:transparent;color:var(--ivory);
  border-color:rgba(16,13,10,.38);
}
#p-coown .ctaband .btn.ghost:hover{
  background:rgba(16,13,10,.08);border-color:var(--ivory);
}


/* =====================================================================
   14 · MOVIMIENTO REDUCIDO
   Lo nuevo que se mueve: la foto de la apertura y los puntos de la
   lista de grupos.
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  #p-coown .co-hero .co-hero-fig img,
  #p-coown .co-who li::before{transition:none}
}

/* ======== FEEDBACK 2 — FOUNDATION ======== */
/* ================= YOUNG FOUNDATION · feedback #2 =================
   Solo lo NUEVO o lo CAMBIADO. Va DESPUES del bloque .fnd- que ya hay en
   community.css, porque unas cuantas reglas de aqui lo pisan a proposito.

   Que cambia y por que:
   1. La pagina tenia tres fotos y ninguna era de la Foundation. Ahora son
      nueve y siete salen del material de la Foundation (KZ y Sudafrica).
   2. Fuera la aerea de laderas y villas (ref-893c1842). Estaba ademas en
      About y en Portfolio: tres paginas con la misma foto de archivo.
   3. Menos caja: la reja de seis celdas con filete se queda en seis
      entradas sueltas con un filete periwinkle arriba.
   4. Mas periwinkle donde SI se puede: filetes, chapas de pie de foto y el
      fondo de la frase de cierre. Nunca como texto sobre crema (2,02:1).
   Ni un color fuera de :root.
   ================================================================= */

/* ---------- pie de foto comun de la pagina ----------
   Chapa periwinkle con la tinta encima: 9,20:1. El degradado crema que usa
   .duo figcaption se pierde sobre fotos claras, y aqui casi todas lo son. */
.fnd-heropic figcaption,
.fnd-eco figcaption,
.fnd-kzstrip figcaption{
  position:absolute;left:0;bottom:0;margin:0;
  background:var(--peri);color:var(--ivory);
  font-family:var(--body);font-weight:500;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  padding:9px 16px 8px}

/* ---------- hero con foto ----------
   El titular manda y ocupa la columna ancha; la foto entra por la derecha
   y se alinea por abajo con el final del texto, no por arriba: asi el
   bloque de titular sigue leyendose como la apertura de la pagina. */
.fnd-herogrid{
  display:grid;grid-template-columns:1.14fr .86fr;
  gap:clamp(26px,4.4vw,78px);align-items:end}
.fnd-herolead{margin-top:clamp(24px,2.8vw,34px);max-width:52ch}
.fnd-heropic{
  margin:0;position:relative;overflow:hidden;
  aspect-ratio:4/5;background:var(--raise)}
.fnd-heropic img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .fnd-herogrid{grid-template-columns:minmax(0,1fr);align-items:start}
  .fnd-heropic{max-width:440px;aspect-ratio:3/4;margin-top:clamp(24px,4vw,40px)}
}

/* ---------- la fuerza del ecosistema, sin cajas ----------
   Antes: reja de 1 px con seis celdas de fondo panel. Cada celda era una
   caja mas en una pagina que ya iba llena de cajas. Ahora la unica marca
   es el filete de arriba, y es periwinkle. */
.fnd-strength{
  gap:clamp(26px,3vw,44px) clamp(26px,3.4vw,54px);
  background:none;border:0}
.fnd-strength li{background:none;padding:0}
.fnd-strength li:hover{background:none}
.fnd-strength b{
  border-top:2px solid var(--peri);
  padding-top:clamp(14px,1.6vw,20px)}
@media(max-width:900px){.fnd-strength{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fnd-strength{grid-template-columns:1fr}}

/* ---------- mosaico del ecosistema ----------
   Desalineado a proposito: la horizontal baja respecto a la vertical. Dos
   rectangulos iguales a la misma altura eran justo la caja repetida. */
.fnd-eco{
  display:grid;grid-template-columns:.82fr 1.18fr;
  gap:clamp(12px,1.6vw,26px);align-items:start}
.fnd-eco figure{margin:0;position:relative;overflow:hidden;background:var(--raise)}
.fnd-ecotall{aspect-ratio:3/4}
.fnd-ecowide{aspect-ratio:3/2;margin-top:clamp(38px,6vw,110px)}
.fnd-eco img{width:100%;height:100%;object-fit:cover}
.fnd-eco figure:hover img{transform:scale(1.04)}
/* la banda a sangre que va detras no debe heredar el padding que
   .fotosec + section le pondria: su relleno ES su altura */
.fnd-ecosec + .bleed{padding-top:0}
@media(max-width:820px){
  .fnd-eco{grid-template-columns:minmax(0,1fr)}
  .fnd-ecowide{margin-top:clamp(12px,2vw,20px)}
}

/* ---------- banda del equipo KZ ----------
   La .bleed de la casa desatura al 80% y echa crema encima al 44%. Sirve
   para una aerea de paisaje; para un equipo de hockey en granate mata
   justo lo que hay que ver. Aqui la foto va limpia y el crema se
   concentra abajo, que es donde vive el rotulo. */
.fnd-band img{filter:none}
.fnd-band::after{
  background:linear-gradient(180deg,
    rgba(253,250,240,.06) 0%,
    rgba(253,250,240,0) 38%,
    rgba(253,250,240,.58) 74%,
    rgba(253,250,240,.93) 100%)}
.bleed .cap p.fnd-plate{
  display:inline-block;margin:0 0 16px;
  background:var(--peri);color:var(--ivory);
  padding:9px 16px 8px;
  font-family:var(--body);font-weight:500;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase}

/* ---------- el equipo KZ de cerca ---------- */
.fnd-kzgrid{
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(24px,3.8vw,70px);align-items:center}
.fnd-kzhero{margin:0;position:relative;overflow:hidden;
  aspect-ratio:4/5;background:var(--raise)}
.fnd-kzhero img{width:100%;height:100%;object-fit:cover}
.fnd-kzbody .lead{max-width:46ch;margin-top:clamp(22px,2.4vw,30px)}
.fnd-kznote{
  margin:clamp(20px,2.4vw,30px) 0 0;max-width:48ch;
  padding-left:clamp(14px,1.6vw,20px);
  border-left:2px solid var(--peri);
  font-size:14.5px;line-height:1.7;color:var(--muted)}
.fnd-kzstrip{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.4vw,20px);margin-top:clamp(26px,3.4vw,54px)}
.fnd-kzstrip figure{margin:0;position:relative;overflow:hidden;
  aspect-ratio:3/2;background:var(--raise)}
.fnd-kzstrip img{width:100%;height:100%;object-fit:cover}
.fnd-kzstrip figure:hover img{transform:scale(1.04)}
@media(max-width:900px){
  .fnd-kzgrid{grid-template-columns:minmax(0,1fr)}
  .fnd-kzhero{max-width:460px;aspect-ratio:3/4}
}
@media(max-width:560px){.fnd-kzstrip{grid-template-columns:1fr}}

/* ---------- Sudafrica ----------
   Tres columnas de anchos distintos y la pequena caida: el texto queda
   metido entre las dos fotos en vez de encima de una fila de tarjetas. */
.fnd-fieldgrid{
  display:grid;grid-template-columns:.95fr 1.15fr .72fr;
  gap:clamp(16px,2.6vw,44px);align-items:center}
.fnd-fieldgrid figure{margin:0;position:relative;overflow:hidden;
  aspect-ratio:4/5;background:var(--raise)}
.fnd-fieldgrid img{width:100%;height:100%;object-fit:cover}
.fnd-fieldsmall{margin-top:clamp(28px,5vw,80px)}
.fnd-fieldbody .lead{max-width:40ch;margin-top:clamp(20px,2.2vw,28px)}
@media(max-width:980px){
  .fnd-fieldgrid{grid-template-columns:1fr 1fr}
  .fnd-fieldbody{grid-column:1/-1;order:-1;margin-bottom:clamp(20px,3vw,34px)}
  .fnd-fieldbody .lead{max-width:56ch}
  .fnd-fieldsmall{margin-top:0}
}
@media(max-width:560px){.fnd-fieldgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- la frase, sobre periwinkle ----------
   Es el sitio de la pagina donde el azul de marca puede ocupar de verdad:
   como fondo de seccion, con la tinta encima, da 9,20:1. */
.fnd-statementsec{
  background:var(--peri);
  border-top:1px solid rgba(16,13,10,.20);
  border-bottom:1px solid rgba(16,13,10,.20)}
.fnd-statementsec .fnd-rule{background:rgba(16,13,10,.34)}
.fnd-statementsec .fnd-big,
.fnd-statementsec .fnd-big .it{color:var(--ivory)}
.fnd-statementsec .fnd-sub{color:rgba(16,13,10,.74)}

@media(prefers-reduced-motion:reduce){
  .fnd-eco img,.fnd-kzstrip img{transition:none}
}

/* ======== FEEDBACK 2 — ABOUT ======== */
/* ================= ABOUT · feedback #2 =================
   Solo lo NUEVO o lo CAMBIADO. Va DESPUES del bloque .ab- que ya hay en
   community.css: varias reglas de aqui lo pisan a proposito.

   Que cambia y por que:
   1. Fuera la aerea de laderas y villas (ref-893c1842), que ademas estaba
      en Foundation y sigue en Portfolio. En su sitio, la foto de grupo del
      YOUNG Weekend: son las personas de las que habla la pagina.
   2. La cronologia por epocas no tenia ni una foto y hay cinco historicas
      que cuentan exactamente eso. Van dentro de cada capitulo, a 200 px
      como maximo: son de baja resolucion a proposito y ampliarlas seria
      borrar lo unico que las hace creibles.
   3. "The Next Chapter" eran seis celdas identicas con reja de 1 px. Pasan
      a seis lineas con filete periwinkle y la columna liberada la ocupa una
      foto vertical del fundador.
   4. Los tres retratos del equipo NO se tocan.
   Ni un color fuera de :root.
   ======================================================= */

/* ---------- chapa de rotulo, comun a la pagina ----------
   Tinta sobre periwinkle: 9,20:1. Al reves seria 2,02:1 e ilegible. */
.ab-herosig,
.bleed .cap p.ab-plate{
  display:inline-block;
  background:var(--peri);color:var(--ivory);
  padding:9px 16px 8px;
  font-family:var(--body);font-weight:500;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.ab-herosig{margin:clamp(22px,2.4vw,32px) 0 0}
.bleed .cap p.ab-plate{margin:0}

/* ---------- hero: titular y fundador ---------- */
.ab-herogrid{
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(26px,4.4vw,80px);align-items:end}
.ab-heropic{
  margin:0;position:relative;overflow:hidden;
  aspect-ratio:2/3;background:var(--raise)}
.ab-heropic img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .ab-herogrid{grid-template-columns:minmax(0,1fr);align-items:start}
  .ab-heropic{max-width:400px;aspect-ratio:3/4;margin-top:clamp(24px,4vw,40px)}
}

/* ---------- banda a sangre ----------
   La .bleed de la casa desatura al 80% y echa crema por encima al 44%.
   En una foto de grupo con los brazos en alto eso se lleva por delante la
   energia, que es justo lo que el cliente pide conservar. */
.ab-band img{filter:none}
.ab-band::after{
  background:linear-gradient(180deg,
    rgba(253,250,240,.06) 0%,
    rgba(253,250,240,0) 40%,
    rgba(253,250,240,.52) 76%,
    rgba(253,250,240,.90) 100%)}

/* ---------- cronologia ---------- */
/* el filete que se dibuja al entrar, en periwinkle y a 2 px: era tinta y
   no se distinguia del borde superior del propio capitulo */
.ab-era::before{background:var(--peri);height:2px}
/* el numeral romano, dentro de un cuadro periwinkle. Es relleno, no texto
   sobre crema, asi que el contraste lo da la tinta encima. */
.ab-eranum{
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;
  width:clamp(44px,4.4vw,68px);aspect-ratio:1;
  background:var(--peri);color:var(--ivory);
  font-size:clamp(19px,2.1vw,30px)}
/* el capitulo vivo se invierte: periwinkle sobre tinta da 8,54:1 */
.ab-now .ab-eranum{background:var(--ivory);color:var(--peri)}
.ab-erabody p.ab-creed{border-left:2px solid var(--peri)}

/* las fotos de epoca: ancho fijo y alineadas por abajo.
   Ancho fijo porque ninguna pasa de 700 px de origen y estirarlas
   destruye el grano; alineadas por abajo porque tienen formatos
   distintos y la fila irregular por arriba es la que hace que parezcan
   fotos puestas sobre una mesa y no una reja mas. */
.ab-erapics{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(104px,15vw,200px);
  justify-content:start;align-items:end;
  gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(22px,2.6vw,34px)}
.ab-erapics figure{margin:0;overflow:hidden;background:var(--raise)}
.ab-erapics img{width:100%;height:auto;filter:saturate(.94)}
.ab-erapics figcaption{
  margin-top:9px;font-family:var(--body);font-weight:500;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
/* los capitulos que solo tienen una foto no necesitan medirla contra
   ninguna otra: se le da mas sitio, siempre por debajo de los 700 px de
   origen. En movil, 104 px de ancho para una foto sola no se ve. */
.ab-erapics:has(figure:only-child){grid-auto-columns:clamp(180px,42vw,300px)}
@media(max-width:820px){
  .ab-erapics{grid-auto-columns:clamp(96px,26vw,160px)}
  .ab-erapics:has(figure:only-child){grid-auto-columns:clamp(180px,54vw,300px)}
}

/* ---------- la fila de casas pasa de tres a cuatro ---------- */
.tri.ab-quad{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.tri.ab-quad{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* la regla de la casa manda la ultima foto a ancho completo y en 16/9
   cuando son tres. Con cuatro ya cierran la reja solas. */
@media(max-width:760px){
  .tri.ab-quad figure:last-child{grid-column:auto;aspect-ratio:3/4}
}
@media(max-width:460px){
  .tri.ab-quad{grid-template-columns:minmax(0,1fr)}
  .tri.ab-quad figure{aspect-ratio:4/3}
}

/* ---------- the next chapter ---------- */
.ab-nextgrid{
  display:grid;grid-template-columns:1.3fr .7fr;
  gap:clamp(26px,4vw,72px);align-items:end}
.ab-nextpic{
  margin:0;position:relative;overflow:hidden;
  aspect-ratio:2/3;background:var(--raise)}
.ab-nextpic img{width:100%;height:100%;object-fit:cover}

/* sin reja y sin fondo: solo el filete de arriba */
.ab-nextlist{
  margin-top:clamp(32px,3.8vw,54px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px) clamp(24px,3vw,46px);
  background:none;border:0}
.ab-nextlist li{
  background:none;
  padding:clamp(12px,1.4vw,18px) 0 0;
  border-top:2px solid var(--peri);
  gap:clamp(9px,1vw,13px)}
/* el ultimo es el que lleva a la accion: se marca en tinta, no en azul */
.ab-nextlist li.ab-nextlast{color:var(--ivory);border-top-color:var(--ivory)}

@media(max-width:960px){
  .ab-nextgrid{grid-template-columns:minmax(0,1fr)}
  .ab-nextpic{max-width:420px;aspect-ratio:3/4;margin-top:clamp(24px,4vw,40px)}
}
@media(max-width:560px){
  .ab-nextlist{grid-template-columns:minmax(0,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .ab-era::before{transition:none}
}


/* ---- dos choques del hero de la portada ----
   1. Los controles del video iban anclados abajo y a lo ancho
      (.hm-filmctl: left:0;right:0;bottom:0), que es exactamente la banda
      donde la tarjeta se monta sobre el video: 380x59 px de solape. Los
      botones caian encima del certificado y de la marca. Suben a la
      esquina de arriba a la derecha, que es la unica del video que la
      tarjeta no toca, y el degradado se da la vuelta con ellos.
   2. .dip-bot es flex con space-between pero solo tiene UN hijo, asi que
      la firma se quedaba a la izquierda, pegada bajo "Issued to", y el
      certificado se leia como emitido A NOMBRE de Wim de Jong. La firma
      se va a la derecha: destinatario a un lado, firma al otro, que es
      como se lee un certificado. */
.hm-filmctl{
  left:auto;right:0;bottom:auto;top:0;
  padding:14px;
  background:linear-gradient(to bottom,rgba(16,13,10,.74),transparent);
}
/* La firma vuelve a la izquierda: llevarla a la derecha la dejaba justo
   DEBAJO de "Your name here" y se leia igual de mal. El problema real
   era otro y se veia midiendo: entre el renglon del destinatario y la
   firma habia 0 px, asi que la raya de la firma parecia la raya donde
   escribes tu nombre. Con aire de por medio se distinguen las dos, y el
   "The Founder" de debajo ya dice de quien es cual. */
.ocard.dip .dip-issued{padding-bottom:clamp(10px,1.4vw,16px);
  border-bottom:1px solid rgba(16,13,10,.14)}


/* ---- canje de codigo de invitacion, en la pestana de Cuenta ---- */
.acinvite-lead{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--muted)}
.acinvite-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.acinvite-row .field{flex:1 1 220px;min-width:0;margin:0}
.acinvite-row .btn{flex:none}
#acInvite{text-transform:uppercase;letter-spacing:.06em;
  font-variant-numeric:tabular-nums}
.acinvite-ok{margin:14px 0 0;padding:12px 14px;
  background:var(--peri);color:var(--ivory);
  font-size:13px;line-height:1.45;font-weight:500}
@media(max-width:560px){
  .acinvite-row .btn{width:100%;justify-content:center}
}


/* ---- beneficios del primer grupo, en la pestana de Ventajas ---- */
.fgbox{background:var(--peri);color:var(--ivory);
  padding:clamp(20px,2.4vw,30px)}
/* dentro del periwinkle la subrayadora del rotulo desaparece: va en tinta */
.fgbox .eyebrow::before{background:var(--ivory)}
.fgcat{margin:0 0 clamp(16px,2vw,22px);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3vw,38px);line-height:1;letter-spacing:.02em}
.fggrid{display:grid;gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fgitem{background:var(--noir);padding:16px 18px 15px}
.fgk{display:block;font-family:var(--body);font-weight:500;font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
  margin-bottom:9px}
.fgv{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.2vw,38px);line-height:1;letter-spacing:.01em;
  font-variant-numeric:tabular-nums}
.fgnote{display:block;margin-top:8px;font-size:11.5px;line-height:1.4;
  color:var(--muted)}


/* La cronologia de About lleva UNA foto por capitulo, no tres en el
   primero y una en los demas. Sin la rejilla de tres columnas la foto ya
   no tiene que caber en 104 px, asi que se le da un tamano en el que se
   vea de que es. Son fotos personales antiguas y de poca resolucion: el
   tope de 300 px es el suyo, no una eleccion de maqueta. */
.ab-erapics{grid-auto-columns:minmax(0,clamp(150px,22vw,300px))}
.ab-erapics figcaption{opacity:.72}


/* ---- la cronologia de About, sin fotos ----
   Se quitaron las fotos antiguas: en una tira estrecha al pie de cada
   capitulo no se veia que eran. Ahora la estructura la lleva el numero,
   que deja de ser un adorno de 26 px al lado del titulo y pasa a mandar:
   grande, en periwinkle y en su propia columna, con el titulo al lado y
   el texto debajo alineado con el. En movil se apila, porque a 375 px una
   columna de numero se come un tercio del ancho. */
.ab-era{padding-top:clamp(26px,3vw,40px)}
.ab-erahead{
  display:grid;grid-template-columns:clamp(58px,7vw,104px) 1fr;
  align-items:baseline;gap:clamp(14px,2vw,28px)}
.ab-eranum{
  font-size:clamp(40px,5.4vw,82px);line-height:.86;
  color:var(--peri);font-weight:700;letter-spacing:-.01em}
.ab-erahead h3{font-size:clamp(21px,2.4vw,34px);font-weight:400}
/* .ab-era YA es una rejilla de dos columnas: cabecera a la izquierda y
   texto a la derecha. Le habia puesto un padding-left dando por hecho que
   se apilaban, y lo unico que hacia era empujar el texto 115 px mas a la
   derecha dentro de su propia columna. */
.ab-erabody{margin-top:0}
.ab-erabody p.ab-creed{border-left:2px solid var(--peri);padding-left:16px}
@media(max-width:640px){
  .ab-erahead{grid-template-columns:1fr;gap:4px}
}

/* Boton de copiar el enlace de invitacion, en la tabla de codigos
   generados. El enlace entero no cabe en una celda y ademas nadie lo lee:
   lo unico que se hace con el es copiarlo. */
.lnkbtn{font:500 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
  padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;
  background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:color .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease)}
.lnkbtn:hover{color:var(--ivory);border-color:var(--ivory)}
.lnkbtn.on{color:var(--ivory);border-color:var(--peri);background:var(--peri)}

/* Aviso de invitacion reconocida, arriba del alta. Periwinkle porque es
   una buena noticia, no un error; y sobre tinta, que es donde ese azul
   tiene contraste de sobra (8,54:1). */
.invnote{margin:0 0 20px;padding:13px 16px;border-radius:12px;
  background:var(--peri);color:#100D0A;
  font:300 13.5px/1.5 var(--body)}
.invnote b{font-weight:500;display:block;margin-bottom:2px}

/* Casilla de "mandar el correo de invitacion". No es una casilla mas del
   formulario: enciende un envio a gente real que no se puede deshacer,
   asi que se lee como un aviso y no como una preferencia. */
.sendcheck{display:flex;gap:12px;align-items:flex-start;margin:4px 0 22px;
  padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;cursor:pointer}
.sendcheck input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--peri);width:16px;height:16px}
.sendcheck span{font:300 12.5px/1.5 var(--body);color:var(--muted)}
.sendcheck b{display:block;font-weight:500;color:var(--ivory);margin-bottom:2px}
.sendcheck:has(input:checked){border-color:var(--ivory);background:var(--raise)}
/* Marcador del referido. Solo aparece cuando alguien ha entrado de verdad. */
.refcount{margin:14px 0 0;font-family:var(--body);font-weight:500;font-size:12.5px;
  letter-spacing:.02em;color:var(--gold)}

/* ---- la noticia grande, tambien en la portada ----
   .nw-lead nacio para la pagina de Noticias, donde vive dentro de una
   seccion con su propio fondo y su relleno. En la portada va suelto dentro
   de .hm-news, asi que aqui se le quitan el relleno y el degradado que
   traia de alli y se deja solo la maqueta: foto grande y titular al lado. */
.nw-homewrap .nw-lead{padding:0;background:none}
.nw-homewrap .nw-homerest{margin-top:clamp(26px,3.4vw,44px)}

/* =====================================================================
   LA TARJETA DE CO-OWNER (.ocard.own) — Feedback 4
   Sustituye al diploma crema (.ocard.dip) SOLO en la seccion
   Co-Ownership. El diploma sigue vivo para el certificado imprimible
   del panel de socio. Misma anatomia que la tarjeta de socio del panel
   (.inn/.top/.yb/.tier/.qrbox/.cstatus/.bot/.serial/.holder), asi que
   casi todo lo hereda de .ocard; aqui solo va la piel: tinta calida,
   filete camel, trama de ondas, marca de agua y la fila de datos.
   ===================================================================== */
.ocard.own{
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(184,143,94,.22), transparent 58%),
    radial-gradient(70% 90% at 0% 100%, rgba(184,143,94,.12), transparent 60%),
    linear-gradient(126deg,#1C1712 0%,#110E0B 46%,#1F1812 100%);
  border:1px solid rgba(184,143,94,.55);
  border-radius:18px;
  box-shadow:0 44px 80px -30px rgba(16,13,10,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  color:#FDFAF0;
}
/* la trama de ondas: un SVG diminuto que se repite, muy diluido */
.ocard.own::before{
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'><path d='M0 12c15-10 30-10 45 0s30 10 45 0 30-10 45 0' fill='none' stroke='%23B88F5E' stroke-width='.7' opacity='.28'/></svg>") repeat;
  background-size:120px 24px;
  -webkit-mask:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35));
  mask:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35));
}
/* sobre tinta el barrido es luz, no sombra */
.ocard.own .sheen{
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.09) 50%, transparent 58%);
}
/* la marca de agua: YOUNG. en Manuka, casi invisible, detras de todo */
.own-wm{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:1;
  font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;
  font-size:clamp(64px,10vw,110px);letter-spacing:.02em;
  color:rgba(253,250,240,.045);pointer-events:none;user-select:none;white-space:nowrap;
}
.ocard.own .own-inn{z-index:2}

/* cabecera: la marca y la pildora, en camel */
.ocard.own .yb{color:#FDFAF0}
.ocard.own .yb em{color:#FDFAF0;font-weight:400;margin-left:.18em}
.ocard.own .yb .ymark{background:#FDFAF0}
.ocard.own .own-tier{
  color:#E2C89C;border-color:rgba(184,143,94,.75);
  font-size:9px;letter-spacing:.28em;padding:8px 14px 7px;white-space:nowrap;
}

/* la fila del medio: QR, estado y dos datos de carnet */
.own-mid{display:flex;align-items:center;gap:clamp(14px,2.4vw,24px);min-width:0}
.ocard.own .own-qr{flex:none}
.ocard.own .own-qr img{width:100%;height:100%;display:block;image-rendering:pixelated}
.ocard.own .cstatus{align-self:center;color:rgba(253,250,240,.85)}
.ocard.own .cstatus::before{background:#5BE49B;box-shadow:0 0 0 3px rgba(91,228,155,.18)}
.own-stat{
  font-family:var(--body);font-weight:500;line-height:1.1;white-space:nowrap;
  font-size:clamp(13px,1.5vw,17px);letter-spacing:.06em;color:#FDFAF0;
}
.own-stat small{
  display:block;font-weight:400;font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(253,250,240,.5);margin-bottom:6px;
  white-space:normal;line-height:1.2;max-width:12em;  /* «Certificados en cartera» se parte en dos, como en la referencia */
}

/* pie: YOUNG ID y titular, como en la tarjeta del panel */
.ocard.own .serial{color:#FDFAF0}
.ocard.own .serial small{color:rgba(253,250,240,.5)}
.ocard.own .holder{color:rgba(253,250,240,.5)}
.ocard.own .holder b{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(14px,1.5vw,18px);letter-spacing:.06em;color:#FDFAF0;margin-top:6px;
}

/* en movil la fila del medio se queda con el QR y el estado */
@media(max-width:479px){
  .own-stat{display:none}
  .own-wm{font-size:60px}
}
@media(prefers-reduced-motion:reduce){
  .ocard.own .sheen{animation:none !important;transform:none;opacity:0}
}