/* ============================================================
   Südlich Capital — sudlich.cl  ·  prototipo TSS  (v0.4)
   Deck estilo Red Bull: slides APILADAS en abanico.
   La 1ª es la más corta; cada una detrás es más ancha; la última
   es ancho completo. Asoman varios cantos de color a la derecha;
   al hacer scroll la de adelante se desliza y revela la siguiente.
   ============================================================ */

:root{
  --bg:#0d1114;
  --bg-2:#121820;
  --ink:#f4f1ea;
  --muted:#9aa4ac;
  --line:rgba(244,241,234,.14);
  --accent:#7fb7c9;
  /* Paleta Südlich */
  --c-blue:#16506B; --c-cream:#F2EDDC; --c-teal:#1FABA0;
  --c-sage:#698C7C; --c-taupe:#736D66; --c-gold:#EEAF0E; --c-greige:#BFBAB0;
  --step: clamp(34px, 4vw, 78px);   /* cuánto asoma cada canto de la página (la portada NO se acorta; el bookmark puede quedar tapado en parte) */
  --bmk: clamp(70px, 5.5vw, 100px);  /* franja derecha reservada para los marca-páginas */
  /* Minion Pro (serif de marca; requiere Adobe Fonts o self-host) con Source Serif 4 como fallback cercano */
  --serif:'Minion Pro', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Montserrat Alternates', 'Inter', system-ui, -apple-system, sans-serif;
  --pad: clamp(24px, 6vw, 120px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
/* El asentamiento por sección se maneja en JS (initSnap): un snapper que actúa cuando el scroll
   se detiene (tras el momentum) y te asienta en el estado de reposo más cercano. */
body{background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.h2{font-family:var(--serif); font-weight:400; line-height:1.05; font-size:clamp(32px,5vw,64px); letter-spacing:-.01em}
.eyebrow,.kicker{font-family:var(--sans); text-transform:uppercase; letter-spacing:.28em; font-size:12px; font-weight:500; color:var(--accent)}
.kicker{color:var(--muted); margin-bottom:24px}
.lead{font-size:clamp(16px,1.4vw,20px); color:#d7d3ca; max-width:52ch}
.muted{color:var(--muted)}

.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-size:14px; font-weight:500;
  letter-spacing:.02em; padding:14px 28px; border-radius:100px; transition:.35s ease; cursor:pointer; border:1px solid transparent}
.btn--solid{background:var(--ink); color:#0d1114}
.btn--solid:hover{background:var(--accent); color:#08222b; transform:translateY(-2px)}
.btn--ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent)}

/* ============================ NAV ============================ */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:22px var(--pad); transition:.4s ease;
  /* scrim oscuro arriba → logo/texto blancos legibles sobre cualquier slide */
  background:linear-gradient(to bottom, rgba(8,9,11,.6), rgba(8,9,11,.12) 60%, transparent)}
.nav.is-solid{background:rgba(13,17,20,.92); backdrop-filter:blur(12px);
  padding-top:14px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.nav__logo{display:flex; align-items:center; line-height:0}
.nav__logo img{height:clamp(26px,2.2vw,34px); width:auto; display:block}
.nav__links{display:flex; gap:32px; font-size:14px; color:#fff;
  position:absolute; left:50%; transform:translateX(-50%)}
.nav__links a{position:relative; padding:4px 0; color:#fff}
.nav__links a::after{content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:#fff; transition:.35s}
.nav__links a:hover::after{width:100%}
.nav__cta{margin-left:auto; border:1px solid rgba(255,255,255,.6); color:#fff; border-radius:100px; padding:12px 24px; font-size:14px; font-weight:500}
/* toggle de idioma ES/EN */
.lang{display:inline-flex; align-items:center; gap:1px; margin-left:22px; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.03em}
.lang button{background:none; border:none; cursor:pointer; padding:5px 6px; border-radius:6px; color:#fff; opacity:.45; transition:opacity .2s}
.lang button.is-on{opacity:1}
.lang button:not(.is-on):hover{opacity:.8}
/* menú móvil (hamburguesa) — en desktop el wrapper es transparente (display:contents) */
.nav__menu{display:contents}
.nav__toggle{display:none; width:44px; height:44px; border:none; background:none; color:#fff; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0; z-index:2}
.nav__toggle span{display:block; width:24px; height:2px; background:currentColor; margin:0 auto; transition:transform .3s ease, opacity .2s ease}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   DECK — fila de slides PEGADAS que se trasladan (estilo Red Bull):
   al scrollear, el track se corre a la izquierda y la siguiente slide
   sigue pegada, entrando desde la derecha con su color liderando.
   ============================================================ */
.deck{position:relative; background:#0a0b0c}
.deck__mnav{display:none}   /* nav de fondos: solo móvil (ver media query) */
/* deep-link desde un proyecto: el deck queda oculto (fondo oscuro) hasta que el JS lo posiciona y carga la imagen */
html.deeplink .deck__sticky{visibility:hidden}
.deck__sticky{position:sticky; top:0; height:100vh; overflow:hidden}
.deck__track{position:relative; height:100vh}

/* paneles apilados a ancho completo menos la franja de los marca-páginas (sin canto sobrante) */
.panel{position:absolute; top:0; left:0; min-width:0; height:100vh; will-change:transform;
  display:flex; align-items:center; padding:0 var(--pad); gap:clamp(24px,5vw,90px);
  background:var(--pbg,#16506B); color:var(--pink,#f4f1ea);
  box-shadow: 40px 0 40px -8px rgba(0,0,0,.55), 14px 0 12px -6px rgba(0,0,0,.45)}
/* abanico de páginas: la tapa (1ª) es la más angosta → asoman los cantos de las páginas a la derecha */
.panel:nth-child(1){width:calc(100vw - 3 * var(--step)); z-index:10}   /* tapa */
.panel:nth-child(2){width:calc(100vw - 2 * var(--step)); z-index:9}    /* Private Equity (página 1, adelante) */
.panel:nth-child(3){width:calc(100vw - 1 * var(--step)); z-index:8}    /* Real Estate (página 2) */
.panel:nth-child(4){width:100vw; z-index:7}                            /* Venture Capital (página 3, al fondo) */
.panel:nth-child(5){width:100vw; z-index:6}                            /* VC showcase */
.panel__content{position:relative; z-index:2; max-width:640px}

/* color de cada página */
.panel--cover{--pbg:var(--c-blue);  --pink:var(--c-cream)}
.panel[data-tone="vc"]{--pbg:var(--c-teal);  --pink:#06302e}
.panel[data-tone="pe"]{--pbg:var(--c-sage);  --pink:#11241c}
.panel[data-tone="dp"]{--pbg:var(--c-taupe); --pink:var(--c-cream)}
.panel[data-tone="re"]{--pbg:var(--c-gold);  --pink:#3a2d04}

/* ---- paneles con FOTO de fondo (deck) ---- */
.panel[style*="background-image"]{background-color:#141210; background-size:cover; background-position:center; --pink:var(--c-cream)}
.panel[style*="background-image"] .panel__media{border-color:transparent; background:transparent}
.panel[style*="background-image"]::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none}
/* cubierta: texto abajo-izquierda → oscurece izq + abajo, con tinte azul */
.panel--cover[style*="background-image"]{background:none}
.panel--cover[style*="background-image"] .panel__content{margin-left:50px}
.panel--cover[style*="background-image"]::before{
  background:linear-gradient(to left, rgba(6,8,10,.86) 0%, rgba(6,8,10,.38) 12%, transparent 30%),   /* difuminado borde derecho (fan) */
    linear-gradient(to bottom, rgba(10,8,6,.62) 0%, rgba(10,8,6,.1) 26%, rgba(10,8,6,.1) 58%, rgba(10,8,6,.74) 100%),   /* oscurece arriba y abajo (texto), centro visible (cuero + logo) */
    color-mix(in srgb, #0a0806 8%, transparent)}
/* fondos: texto a la IZQUIERDA (como la portada) → oscurece izq, con tinte del fondo */
.panel--fund[style*="background-image"]{flex-direction:row-reverse}
.panel--fund[style*="background-image"] .panel__content{margin-left:85px}   /* cuadro +50px a la derecha */
.panel--fund[style*="background-image"]::before{
  background:linear-gradient(to left, rgba(6,8,10,.96) 0%, rgba(6,8,10,.6) 12%, transparent 34%),   /* difuminado borde derecho (marcado) */
    linear-gradient(to right, rgba(6,8,10,.82), rgba(6,8,10,.38) 48%, rgba(6,8,10,.08) 90%),
    color-mix(in srgb, var(--pbg) 26%, transparent)}
/* Real Estate: el tinte dorado se veía muy amarillo → se baja bastante la opacidad del color */
.panel--fund[data-tone="re"][style*="background-image"]::before{
  background:linear-gradient(to left, rgba(6,8,10,.96) 0%, rgba(6,8,10,.6) 12%, transparent 34%),
    linear-gradient(to right, rgba(6,8,10,.82), rgba(6,8,10,.38) 48%, rgba(6,8,10,.08) 90%),
    color-mix(in srgb, var(--pbg) 8%, transparent)}

/* ---- cubierta: foto Patagonia a sangre completa + textos apilados (subtítulo → título →
        descripción) abajo-izquierda, sobre un degradado de legibilidad. ---- */
.panel--cover{padding:0; background:#0a0b0c}
.cover__canvas{position:absolute; inset:0; width:100%; height:100%; overflow:hidden;
  background-size:cover; background-position:center;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 clamp(40px,5vw,96px) clamp(56px,9vh,104px)}
.cover__canvas::after{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to top, rgba(6,8,10,.85) 0%, rgba(6,8,10,.38) 26%, rgba(6,8,10,0) 54%),
    linear-gradient(to right, rgba(6,8,10,.55) 0%, rgba(6,8,10,0) 44%)}
.cover__eyebrow,.cover__title,.cover__sub{position:relative; z-index:1; margin:0}
.cover__eyebrow{font-family:var(--sans); text-transform:uppercase; letter-spacing:.24em; font-weight:600;
  font-size:12px; color:var(--c-cream); margin-bottom:16px}
.cover__title{font-family:var(--serif); font-weight:400; letter-spacing:-.02em; line-height:1.04;
  font-size:clamp(38px,5.6vw,84px); color:var(--c-cream); margin-bottom:20px}
.cover__title span{display:block; white-space:nowrap}
.cover__sub{max-width:46ch; font-family:var(--sans); font-weight:300; line-height:1.6;
  font-size:clamp(15px,1.4vw,19px); color:color-mix(in srgb,var(--c-cream) 82%, transparent)}
.panel--cover .panel__hint{position:relative; z-index:1; margin-top:26px; left:auto; bottom:auto;
  color:color-mix(in srgb,var(--c-cream) 70%, transparent)}
@media(max-width:820px){
  .cover__canvas{padding:110px var(--pad) 88px; background-position:center 42%}
  .cover__title{font-size:clamp(34px,9vw,54px)}
  .cover__sub{font-size:15px}
  .panel--cover .panel__hint{margin-top:20px}
}
.panel__hint{position:absolute; bottom:44px; left:var(--pad); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:color-mix(in srgb,var(--c-cream) 72%, transparent); display:flex; gap:12px; align-items:center}
.panel__hint span{display:inline-block; animation:nudge 1.6s infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}

/* ---- páginas de estrategia ---- */
.panel--fund{justify-content:space-between}
.panel__media{position:relative; flex:1 1 44%; height:68vh; border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--pink) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--pink) 22%, transparent)}
.panel__media .ghost{display:none}   /* números en opacidad eliminados */
.panel--fund .panel__content{flex:1 1 46%; color:var(--pink)}
.fund__index{font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:color-mix(in srgb,var(--pink) 78%, transparent); margin-bottom:20px}
.fund__name{font-family:var(--serif); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(38px,5.4vw,80px); line-height:1; margin-bottom:26px}
.fund__thesis{font-size:clamp(15px,1.4vw,19px); color:color-mix(in srgb,var(--pink) 90%, transparent); max-width:42ch; margin-bottom:28px}
.fund__tags{list-style:none; display:flex; gap:10px; flex-wrap:wrap}
.fund__tags li{font-size:12px; letter-spacing:.06em; color:color-mix(in srgb,var(--pink) 85%, transparent);
  border:1px solid color-mix(in srgb,var(--pink) 32%, transparent); border-radius:100px; padding:7px 16px}
/* nombres de fantasía = botones para ver los proyectos de cada fondo */
.fund__funds{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.fund__fbtn{display:inline-flex; align-items:center; gap:.5em; padding:13px 26px; border-radius:100px;
  border:1px solid color-mix(in srgb,var(--pink) 42%, transparent); background:color-mix(in srgb,var(--pink) 8%, transparent);
  color:var(--pink); font-family:var(--sans); font-weight:500; font-size:14px; text-decoration:none; cursor:pointer; transition:.3s}
.fund__fbtn span{transition:transform .3s}
.fund__fbtn:hover{background:color-mix(in srgb,var(--pink) 16%, transparent); border-color:var(--pink); transform:translateY(-2px)}
.fund__fbtn:hover span{transform:translateX(4px)}

/* ---- Venture Capital: showcase de portafolio (lineup de startups) ---- */
/* VC showcase: PANTALLA DIVIDIDA — izq color de la startup (cambia), der negra.
   El FONDO del panel = color de la startup → el canto que asoma en el abanico
   es ese color (no negro). La fila negra queda dentro (padding-right = canto). */
.panel--showcase{padding:0; gap:0; align-items:stretch;
  background:var(--sc-color, #9C4A2A); transition:background-color .6s cubic-bezier(.2,.7,.2,1)}

/* --- IZQUIERDA: imagen de la startup + scrim (cambia con las flechas) --- */
.showcase__feature{flex:0 0 50%; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(40px,5vw,96px); color:#F2EDDC; background-size:cover; background-position:center;
  transition:background-image .1s}
.showcase__feature::before{content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(112deg, rgba(8,9,11,.85) 26%, rgba(8,9,11,.5) 66%, rgba(8,9,11,.28))}
.showcase__feature > *{position:relative; z-index:1}
.showcase__feature .fund__index{color:rgba(242,237,220,.8)}
.feature__media{width:clamp(140px,12vw,180px); aspect-ratio:1; border-radius:16px; margin-bottom:28px;
  background:#F4F1EA; border:1px solid rgba(255,255,255,.28); overflow:hidden; padding:20px;
  display:flex; align-items:center; justify-content:center}
.feature__media img{max-width:100%; max-height:100%; object-fit:contain; display:block}
.feature__name{font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.2vw,50px); line-height:1.02; margin-bottom:16px; min-height:1.1em; color:#fff}
.feature__desc{font-size:clamp(14px,1.2vw,17px); line-height:1.55; color:rgba(242,237,220,.9); max-width:34ch; min-height:4.6em}
.feature__tag{align-self:flex-start; margin-top:18px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid rgba(242,237,220,.42); border-radius:100px; padding:7px 15px; color:rgba(242,237,220,.92)}
.showcase__nav{display:flex; gap:12px; margin-top:38px}
.navbtn{width:54px; height:54px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(242,237,220,.5); background:transparent; color:#F2EDDC; font-size:20px; line-height:1; transition:.3s ease}
.navbtn:hover{background:rgba(255,255,255,.14); transform:translateY(-2px)}

/* --- DERECHA: fila de startups sobre negro (loop con las flechas) --- */
.showcase__lineup{flex:1 1 50%; min-width:0; background:#0a0b0c; overflow:hidden; position:relative; display:flex; align-items:center;
  padding-left:clamp(24px,3vw,64px)}
/* las tarjetas se desvanecen hacia el NEGRO al salir por la derecha (no dejan ver el color del panel) */
.showcase__lineup::after{content:''; position:absolute; top:0; right:0; bottom:0; width:16%; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, transparent, #0a0b0c 88%)}
.showcase__track{display:flex; gap:16px; will-change:transform}
.showcase__lineup .startup{flex:0 0 200px; width:200px; height:72%; max-height:520px; display:flex; flex-direction:column; justify-content:space-between;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#F2EDDC;
  border-radius:18px; padding:24px 20px; opacity:.5;
  transition:opacity .5s ease, transform .5s ease, background .5s ease, border-color .5s ease}
.showcase__lineup .startup.is-active{opacity:1; transform:translateY(-8px); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.42)}
.startup__logo{width:46px; height:46px; border-radius:11px; background:#F4F1EA; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:6px; margin-bottom:22px}   /* separado del texto */
.startup__logo img{max-width:100%; max-height:100%; object-fit:contain; display:block}
.startup__body{margin-top:auto}
/* nombre reserva 2 líneas → todas las cards quedan de la misma altura y el tag alineado */
.startup h3{font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.6vw,26px); line-height:1.08; color:#F2EDDC; min-height:2.16em}
.startup__tag{align-self:flex-start; margin-top:16px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.3); border-radius:100px; padding:6px 12px; color:rgba(242,237,220,.85)}

/* ---- marca-páginas laterales (bookmarks por tipo de fondo) ---- */
/* cada marca-página va pegada al borde derecho de su slide; el JS la mueve con la slide (viaja a la izquierda al correrse) */
.deck__marks{position:absolute; inset:0; z-index:25; pointer-events:none}
/* botón = marco negro "canto de la página"; span interno = tab de color (el color pinta sobre el negro).
   Base top único: la CASCADA (solape diagonal abajo-derecha) la arma el JS con translate. */
/* marca-página = rectángulo de color pegado al canto derecho de SU página (panel).
   La profundidad la da el z-index del panel (página 1 adelante, 2 detrás, 3 al fondo). Escalonados con gap. */
.deckmark{position:absolute; right:2px; z-index:4; pointer-events:auto; width:80px;
  display:grid; place-items:center end; background:linear-gradient(to right, transparent 0%, var(--mk) 100%); color:#0d1114; border:none; cursor:pointer;
  padding:24px 16px 24px 0; border-radius:4px; font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.03em;
  box-shadow:0 10px 22px rgba(0,0,0,.24); transition:filter .3s ease}
.deckmark span{writing-mode:vertical-rl; text-orientation:mixed; display:block}
.deckmark[data-goto="1"]{top:12%}
.deckmark[data-goto="2"]{top:42%}
.deckmark[data-goto="3"]{top:69%}
.deckmark:hover,.deckmark:focus-visible{filter:brightness(1.07); outline:none}

/* riel izquierdo: marca-páginas de las slides YA VISTAS. Se acoplan al canto izquierdo
   (mismos colores y alturas que los de la derecha) y quedan clickeables para volver directo. */
.deck__rail{position:absolute; inset:0 auto 0 0; width:0; z-index:15; pointer-events:none}
.railmark{position:absolute; left:0; width:46px;
  display:grid; place-items:center end; background:linear-gradient(to right, transparent 0%, var(--mk) 100%);
  color:#0d1114; border:none; cursor:pointer; padding:22px 12px 22px 0; border-radius:0 4px 4px 0;
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.03em;
  box-shadow:6px 10px 22px rgba(0,0,0,.28); opacity:0; transform:translateX(-10px); pointer-events:none;
  transition:opacity .4s ease, transform .4s ease, filter .3s ease}
.railmark span{writing-mode:vertical-rl; text-orientation:mixed; display:block}
.railmark[data-goto="1"]{top:12%} .railmark[data-goto="2"]{top:42%} .railmark[data-goto="3"]{top:69%}
.railmark.is-on{opacity:1; transform:none; pointer-events:auto}
.railmark:hover,.railmark:focus-visible{filter:brightness(1.07); outline:none}
@media(max-width:820px){ .deck__rail{display:none} }

/* ---- UI del deck ---- */
.deck__ui{position:absolute; bottom:40px; right:var(--pad); z-index:20; display:flex; align-items:center; gap:18px; mix-blend-mode:difference; transition:opacity .35s ease}
.deck__ui.is-hidden{opacity:0; pointer-events:none}
.deck__counter{font-family:var(--serif); font-size:15px; color:#fff; letter-spacing:.1em}
.deck__bar{width:120px; height:2px; background:rgba(255,255,255,.45); border-radius:2px; overflow:hidden}
.deck__bar span{display:block; height:100%; width:20%; background:#fff; transition:width .2s ease}

/* ============================ SECCIONES VERTICALES ============================ */
.section{padding:clamp(80px,12vh,160px) var(--pad); position:relative}
.section--dark{background:var(--bg-2)}
.section__head{max-width:720px; margin-bottom:64px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:start}
@media(max-width:820px){.grid2{grid-template-columns:1fr; gap:32px}}

.stats{display:flex; gap:40px; margin-top:40px; flex-wrap:wrap}
.stat strong{font-family:var(--serif); font-size:40px; display:block; line-height:1}
.stat span{font-size:13px; color:var(--muted)}

.tesis__inner{max-width:840px}
.tesis__title{margin:20px 0 26px}
.mapph{margin-top:48px; height:360px; border:1px dashed var(--line); border-radius:14px;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  background:radial-gradient(80% 80% at 30% 30%, rgba(127,183,201,.06), transparent)}
.mapph em{opacity:.7; margin-left:6px}

.member{position:relative; overflow:hidden; border-radius:12px}
.member__ph{aspect-ratio:4/5; background:linear-gradient(160deg,#1d2831,#0f151a); border:1px solid var(--line); transition:.5s}
.member:hover .member__ph{filter:brightness(1.12); transform:scale(1.02)}
.member figcaption{padding:16px 4px 0}
.member strong{font-family:var(--serif); font-weight:400; font-size:19px; display:block}
.member span{font-size:12.8px; color:var(--muted)}

.valores__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media(max-width:900px){.valores__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.valores__grid{grid-template-columns:1fr}}
.valor{padding:32px 0; border-top:1px solid var(--line)}
.valor strong{font-family:var(--serif); font-weight:400; font-size:24px; display:block; margin-bottom:12px}
.valor p{font-size:14px; color:var(--muted)}
/* valores LIGHT (crema, texto oscuro) */
.valores{background:var(--c-cream)}
.valores .kicker{color:#a67c05}
.valores .h2{color:#12100c}
.valores .valor{border-top-color:rgba(18,16,12,.14)}
.valores .valor strong{color:#12100c}
.valores .valor p{color:#5c574e}

.docs{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:900px){.docs{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.docs{grid-template-columns:1fr}}
.doc{border:1px solid var(--line); border-radius:12px; padding:26px 24px; display:flex; flex-direction:column; gap:8px; transition:.35s}
.doc:hover{border-color:var(--accent); background:rgba(127,183,201,.05)}
.doc span{font-family:var(--serif); font-size:20px}
.doc em{font-size:12px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase}
/* ===== memorias en RUEDA · CTA a la izquierda, rueda de portadas a la derecha ===== */
/* fondo: portada de la bitácora (tejuelas) con velo oscuro para legibilidad */
.memorias{position:relative; overflow:hidden}
.memorias::before{content:''; position:absolute; inset:0; z-index:0;
  background-image:url('IMGs/portada-bitacora.jpg'); background-size:cover; background-position:center; opacity:.2}
.memorias::after{content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(10,11,12,.94) 0%, rgba(10,11,12,.72) 48%, rgba(10,11,12,.5) 100%)}
.memorias > *{position:relative; z-index:1}
.memos{display:flex; align-items:center; gap:clamp(24px,4vw,60px); min-height:clamp(620px,84vh,820px)}
/* IZQUIERDA: texto + CTA (centrado al eje horizontal) */
.memos__hub{flex:0 1 42%; text-align:left}
.memos__title{margin-bottom:14px}
.memos__sub{margin-bottom:24px}
.memos__hub .memos__form{justify-content:flex-start; max-width:420px}
.memos__dl{background:var(--c-gold); color:#0d1114; border:none; border-radius:100px; padding:15px 30px;
  font-family:var(--sans); font-weight:600; font-size:15px; cursor:pointer; transition:.3s}
.memos__dl:hover{transform:translateY(-2px)}
.memos__dl[disabled]{opacity:.55; cursor:default; background:rgba(255,255,255,.16); color:#fff}
.memos__dl[disabled]:hover{transform:none}
/* DERECHA: escenario de la rueda */
.memos__stage{flex:1 1 58%; position:relative; align-self:stretch; min-height:inherit}
.wheel{position:absolute; inset:0; z-index:10}
.wheel .doc{position:absolute; left:50%; top:50%; width:clamp(190px,17vw,250px); aspect-ratio:712/1000;
  border:1px solid rgba(255,255,255,.12); border-radius:12px; overflow:hidden;
  background:#12161b center/cover no-repeat; box-shadow:0 26px 58px rgba(0,0,0,.55);
  transform:translate(-50%,-50%); transform-origin:center center; cursor:pointer; will-change:transform,opacity;
  transition:transform .6s cubic-bezier(.3,.72,.2,1), opacity .5s ease, box-shadow .3s}
.wheel .doc.is-active{box-shadow:0 34px 78px rgba(0,0,0,.62); border-color:rgba(255,255,255,.3)}
/* tarjeta "próximamente" */
.doc--soon{display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(160deg,#1b222b,#0e141a)}
.doc__soon{font-family:var(--serif); font-weight:400; font-size:clamp(34px,2.8vw,46px); color:rgba(255,255,255,.85); line-height:1}
.doc__soon em{display:block; margin-top:12px; font-family:var(--sans); font-style:normal; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold)}
/* label del año de la memoria centrada (aparece con opacidad al cambiar) */
.wheel__label{position:absolute; left:0; right:0; bottom:clamp(78px,13vh,120px); z-index:35; text-align:center; pointer-events:none}
.wheel__kick{display:block; font-family:var(--sans); text-transform:uppercase; letter-spacing:.28em; font-size:11px; color:rgba(255,255,255,.55); margin-bottom:4px}
.wheel__year{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.4vw,36px); color:var(--c-cream); line-height:1}
.wheel__label.is-in .wheel__kick,.wheel__label.is-in .wheel__year{animation:memYear .55s cubic-bezier(.2,.7,.2,1) both}
.wheel__label.is-in .wheel__year{animation-delay:.06s}
@keyframes memYear{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
/* flechas */
.wheel__nav{position:absolute; left:0; right:0; bottom:clamp(16px,3vh,32px); z-index:40;
  display:flex; gap:16px; justify-content:center}
@media(max-width:820px){
  .memos{flex-direction:column; min-height:0; gap:24px; text-align:center}
  .memos__hub{flex:none; text-align:center}
  .memos__hub .memos__form{justify-content:center; margin:0 auto}
  .memos__stage{flex:none; width:100%; min-height:clamp(420px,60vh,520px)}
}
@media(max-width:560px){
  .wheel{position:static; display:flex; flex-wrap:wrap; justify-content:center; gap:14px}
  .wheel .doc{position:static; transform:none!important; opacity:1!important; width:42vw}
  .wheel__label{position:static; margin-top:16px} .wheel__nav{position:static; margin-top:16px}
}

.acceso{text-align:center}
.acceso__inner{max-width:560px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:22px}

/* ---- Real Estate · fondo Segel: estado "Próximamente" (sin proyectos aún) ---- */
.pe--soon{background:linear-gradient(to right, rgba(6,8,10,.92), rgba(6,8,10,.6) 60%, rgba(6,8,10,.72)), url('IMGs/portada-bitacora.jpg') center/cover no-repeat}
.pe--soon .pe__bg,.pe--soon .pe__scrim,.pe--soon .pe__copy,.pe--soon .pe__queuewin,
.pe--soon .pe__grower,.pe--soon .pe__ctrl,.pe--soon .pe__prog{display:none}
.pe__soon{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; padding:0 clamp(40px,5vw,120px); max-width:660px}
.pe__soon-kick{font-family:var(--sans); text-transform:uppercase; letter-spacing:.28em; font-weight:500;
  font-size:12px; color:var(--c-gold); margin-bottom:20px}
.pe__soon-title{font-family:var(--serif); font-weight:400; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(48px,7vw,96px); color:var(--c-cream); margin-bottom:22px}
.pe__soon-sub{font-family:var(--sans); font-weight:300; line-height:1.6; max-width:44ch;
  font-size:clamp(15px,1.4vw,19px); color:color-mix(in srgb,var(--c-cream) 78%, transparent)}
@media(max-width:820px){ .pe__soon{padding:0 var(--pad); max-width:none} }

/* ---- LinkedIn: ícono en tarjeta del equipo (crema) y en footer (oscuro) ---- */
.pcard__li{display:inline-flex; align-items:center; justify-content:center; margin-top:14px;
  width:34px; height:34px; border-radius:8px; color:#5c574e; border:1px solid rgba(18,16,12,.18);
  transition:color .25s, background .25s, border-color .25s}
.pcard__li:hover{color:#fff; background:#0a66c2; border-color:#0a66c2}
.footer__li{display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:9px; color:var(--muted); border:1px solid var(--line);
  transition:color .25s, background .25s, border-color .25s}
.footer__li:hover{color:#fff; background:#0a66c2; border-color:#0a66c2}

/* ---- contacto: video de fondo en loop + overlay de legibilidad ---- */
.contacto{position:relative; overflow:hidden; background:#0a0b0c}
.contacto__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.contacto__scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right, rgba(6,8,10,.82) 0%, rgba(6,8,10,.5) 55%, rgba(6,8,10,.62) 100%)}
.contacto > .grid2{position:relative; z-index:2}
/* inputs con fondo algo más opaco + blur para leerse sobre el video */
.contacto .form input,.contacto .form select,.contacto .form textarea{
  background:rgba(10,12,14,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}

.form{display:flex; flex-direction:column; gap:14px}
.form__hp{position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.form__note{margin:4px 0 0; font-family:var(--sans); font-size:14px; font-weight:400; color:var(--c-gold)}
.form__note--err{color:#e8917a}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:520px){.form__row{grid-template-columns:1fr}}
.form input,.form select,.form textarea{width:100%; background:rgba(255,255,255,.02);
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; color:var(--ink);
  font-family:var(--sans); font-size:14px; font-weight:300}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--accent)}
.form textarea{resize:vertical}
.form select{color:var(--muted)}

.footer{background:#080b0d; padding:clamp(60px,8vh,90px) var(--pad) 40px}
.footer__top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:28px; padding-bottom:40px; border-bottom:1px solid var(--line)}
.footer__logo{font-family:var(--serif); font-size:22px; display:inline-flex; line-height:0}
.footer__logo span{display:block; font-family:var(--sans); font-size:9px; letter-spacing:.42em; color:var(--muted); margin-top:3px}
.footer__logo img{height:clamp(28px,3vw,38px); width:auto; display:block}
.footer__nav{display:flex; gap:26px; flex-wrap:wrap; font-size:14px; color:var(--muted)}
.footer__nav a:hover{color:var(--ink)}
.footer__legal{padding-top:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.disclaimer{font-size:12.5px; color:var(--muted); max-width:60ch}
.copy{font-size:12.5px; color:var(--muted)}

/* ============================ MANIFIESTO · ISOTIPO REVEAL (fondo negro) ============================
   Isotipo fijo al centro; frase en marquee scrollea por detrás (scroll-linked). Al final el
   isotipo baja y aparece el CTA (captura de correo para la memoria). */
.saga{position:relative; height:320vh; background:var(--c-cream)}  /* más alto → marquee y CTA menos sensibles al scroll */
.saga__sticky{position:sticky; top:0; height:100vh; overflow:hidden; background:var(--c-cream); display:grid; place-items:center}
/* frase en marquee (detrás), texto contorneado */
.saga__marquee{position:absolute; top:50%; left:0; transform:translate(0,-50%); white-space:nowrap;
  z-index:1; pointer-events:none; will-change:transform;
  font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1;
  font-size:clamp(56px,11vw,150px); color:transparent;
  -webkit-text-stroke:1.5px rgba(18,16,12,.28); text-stroke:1.5px rgba(18,16,12,.28)}
/* isotipo */
.saga__mark{position:relative; z-index:2; will-change:transform}
.saga__mark img,.saga__mark svg{width:clamp(120px,15vw,230px); height:auto; display:block}
/* CTA (aparece al final) */
.saga__cta{position:absolute; z-index:3; text-align:center; max-width:540px; padding:0 24px;
  opacity:0; transform:translateY(40px); pointer-events:none; will-change:opacity,transform}
.saga__cta.is-on{pointer-events:auto}
.saga__cta .kicker{color:var(--accent); margin-bottom:14px}
.saga__cta .kicker{color:#a67c05; transform:translateY(-30px)}
.saga__title{font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.6vw,64px); color:#12100c; line-height:1.02; margin-bottom:14px}
.saga__sub{color:#5c574e; font-size:clamp(15px,1.3vw,18px); margin-bottom:28px; transform:translateY(20px)}
.saga__form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.saga__form input{flex:1 1 240px; min-width:0; background:rgba(18,16,12,.04); border:1px solid rgba(18,16,12,.2);
  border-radius:100px; padding:15px 22px; color:#12100c; font-family:var(--sans); font-size:15px; outline:none; transition:border-color .3s}
.saga__form input::placeholder{color:rgba(18,16,12,.4)}
.saga__form input:focus{border-color:var(--c-gold)}
.saga__form input.is-invalid{border-color:#e0603a}
.saga__form button{flex:0 0 auto; background:var(--c-gold); color:#0d1114; border:none; border-radius:100px;
  padding:15px 28px; font-family:var(--sans); font-weight:600; font-size:14px; cursor:pointer; transition:.3s}
.saga__form button:hover{transform:translateY(-2px)}
.saga__note{margin-top:18px; color:var(--c-gold); font-size:15px}
/* botón "Seguir en LinkedIn" del CTA de la saga */
.saga__li-btn{display:inline-flex; align-items:center; gap:10px; background:var(--c-gold); color:#0d1114;
  border-radius:100px; padding:15px 28px; font-family:var(--sans); font-weight:600; font-size:14px; transition:transform .3s}
.saga__li-btn:hover{transform:translateY(-2px)}
@media(max-width:820px){ .saga{height:200vh} .saga__marquee{font-size:64px} }

/* ===== CAPTURA DE CORREO EN MEMORIAS (inline) ===== */
.memos__form{display:flex; gap:10px; flex-wrap:wrap; max-width:460px; margin-top:24px}
.memos__form input{flex:1 1 220px; min-width:0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.2);
  border-radius:100px; padding:14px 20px; color:#fff; font-family:var(--sans); font-size:15px; outline:none; transition:border-color .3s}
.memos__form input::placeholder{color:rgba(255,255,255,.4)}
.memos__form input:focus{border-color:var(--c-gold)}
.memos__form input.is-invalid{border-color:#e0603a}
.memos__form button{flex:0 0 auto; background:var(--c-gold); color:#0d1114; border:none; border-radius:100px;
  padding:14px 26px; font-family:var(--sans); font-weight:600; font-size:14px; cursor:pointer; transition:.3s}
.memos__form button:hover{transform:translateY(-2px)}
.memos__note{margin-top:16px; color:var(--c-gold); font-size:15px}
.memos__note--err{color:#e8917a}
/* memorias bloqueadas hasta dejar el correo */
.docs.is-locked .doc{opacity:.5}
.docs .doc{transition:opacity .4s ease}
.docs:not(.is-locked) .doc:hover{opacity:1}

/* ============================ REVEAL ============================ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}
/* valores: las palabras entran de abajo hacia arriba, igual que en las páginas de proyecto (peUp escalonado) */
.valores .reveal{opacity:0; transform:translateY(42px); transition:none}
.valores .reveal.is-in{opacity:1; transform:none; animation:peUp .7s cubic-bezier(.2,.7,.2,1) both}
.valores__grid .valor:nth-child(1).is-in{animation-delay:.06s}
.valores__grid .valor:nth-child(2).is-in{animation-delay:.16s}
.valores__grid .valor:nth-child(3).is-in{animation-delay:.26s}
.valores__grid .valor:nth-child(4).is-in{animation-delay:.36s}
@media(prefers-reduced-motion:reduce){.valores .reveal{opacity:1!important; transform:none!important; animation:none!important}}

/* ============================ RESPONSIVE ============================ */
@media(max-width:820px){
  .nav__toggle{display:flex}
  .nav__menu{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:20px; background:rgba(13,17,20,.98); backdrop-filter:blur(12px); padding:24px var(--pad) 32px; border-top:1px solid var(--line)}
  .nav.is-open .nav__menu{display:flex}
  .nav__links{position:static; transform:none; left:auto}
  .nav__cta{margin-left:0}
  .nav.is-open .nav__links{flex-direction:column; gap:22px; font-size:18px}
  .nav.is-open .nav__cta{width:100%; text-align:center; padding:14px 24px}
  /* ---- DECK: se mantiene el SWIPE HORIZONTAL en móvil (mismo mecanismo que desktop) ---- */
  .deck{--step:clamp(14px,4vw,34px)}                 /* menos canto asomando → paneles más anchos */
  .panel{padding:0 clamp(16px,4.5vw,28px); gap:18px} /* texto más a la izquierda */
  .panel--fund[style*="background-image"]{flex-direction:column; justify-content:flex-end; align-items:flex-start; padding-bottom:128px}
  .panel__content, .panel--cover .cover__top, .panel--cover .cover__bottom{max-width:none !important; width:100%}
  .panel--fund .panel__content{flex:none}
  .panel--fund[style*="background-image"] .panel__content{margin-left:0}   /* anula el corrimiento de 85px del fan */
  .panel__media{display:none}
  .panel--fund[style*="background-image"]::before{background:linear-gradient(to top, rgba(8,10,12,.93) 6%, rgba(8,10,12,.5) 48%, rgba(8,10,12,.18) 100%) !important}
  .fund__thesis,.fund__name,.fund__index,.cover__sub,.cover__title{max-width:none !important}
  .fund__thesis{font-size:15px}
  .fund__funds{flex-wrap:wrap; gap:10px}
  .fund__fbtn{flex:0 1 auto}
  .cover__title{font-size:clamp(36px,10vw,56px)}
  .fund__name{font-size:clamp(32px,9vw,50px)}
  .panel--cover{padding-top:96px; padding-bottom:120px}
  .cover__top,.cover__bottom{margin-left:0}
  .deckmark{display:none}                            /* los tabs verticales de desktop se reemplazan por el nav de abajo */
  .deck__ui{right:auto; left:50%; transform:translateX(-50%); bottom:18px}
  /* VC showcase en móvil: SOLO el detalle a pantalla completa, sin la fila de startups ni color de fondo */
  .panel--showcase{background:transparent !important; padding:0 !important}   /* imagen a todo el ancho */
  .showcase__feature{flex:1 1 100%; max-width:none; padding:110px var(--pad) 128px; justify-content:flex-end}
  /* degradado sobre la imagen para que el texto se lea (oscuro abajo/izq, imagen visible arriba/der) */
  .showcase__feature::before{background:linear-gradient(to top, rgba(8,9,11,.94) 4%, rgba(8,9,11,.6) 38%, rgba(8,9,11,.22) 68%, rgba(8,9,11,.05) 100%) !important}
  .showcase__lineup{display:none}
  /* nav de fondos (bookmarks) fijo en la base del deck */
  .deck__mnav{display:flex; position:absolute; left:0; right:0; bottom:54px; z-index:26; gap:8px; padding:0 var(--pad); pointer-events:auto}
  .deck__mnav button{flex:1 1 0; padding:11px 4px; border-radius:100px; border:1px solid rgba(255,255,255,.32);
    background:rgba(10,12,14,.42); backdrop-filter:blur(6px); color:#fff; font-family:var(--sans); font-weight:600;
    font-size:11px; letter-spacing:.02em; cursor:pointer}
}

/* ============================ BOTÓN "VER PROYECTOS" (slides PE/RE) ============================ */
.fund__cta{display:inline-flex; align-items:center; gap:.5em; margin-top:30px; padding:14px 26px; border-radius:100px;
  border:1px solid color-mix(in srgb, var(--pink) 42%, transparent); color:var(--pink); font-size:14px; font-weight:500;
  letter-spacing:.02em; transition:.35s ease}
.fund__cta:hover{background:color-mix(in srgb, var(--pink) 14%, transparent); transform:translateY(-2px); border-color:var(--pink)}

/* ============================ PÁGINA PE — EXPANDING HERO CAROUSEL ============================
   Una empresa a pantalla completa (fondo + copy izq). Fila de próximas empresas
   abajo-derecha. Barra de tiempo arriba crece → al llenarse la 1ª card de la fila
   CRECE por detrás de las demás hasta ocupar toda la pantalla, el copy viejo baja
   y desaparece, y entra el copy nuevo de abajo hacia arriba. */
.pe{position:relative; height:100vh; overflow:hidden; background:#0d1114}
/* ---- Venture Capital · portafolio embebido en el deck (misma composición que Fram I) ---- */
.panel--vcfolio{padding:0; gap:0; align-items:stretch; overflow:hidden; background:#0d1114; box-shadow:none}
.panel--vcfolio .pe{width:100%; height:100vh}
.vcfolio__kick{position:absolute; top:clamp(88px,13vh,124px); left:var(--pad); z-index:6; margin:0;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:12px; font-weight:600;
  color:rgba(255,255,255,.72)}
/* la cinta y el copy dejan aire para el kicker superior */
.panel--vcfolio .pe__copy{top:53%}
/* logos del portafolio VC: BLANCOS, misma altura, sin cuadrado de fondo (convención Fram I / Real Estate) */
.pe.is-vc .pe__logo{height:36px; margin-bottom:22px}
.pe.is-vc .pe__logo img{max-width:230px; filter:brightness(0) invert(1) drop-shadow(0 2px 9px rgba(0,0,0,.6))}
.pe.is-vc .qcard__logo{height:22px; min-height:0; align-self:flex-start}
.pe.is-vc .qcard__logo img{height:22px; max-height:22px; filter:brightness(0) invert(1) drop-shadow(0 1px 5px rgba(0,0,0,.7))}
/* logos compactos (ícono cuadrado): más altos para igualar el peso visual de los wordmarks anchos */
.pe.is-vc .pe__logo[data-key="frankles"], .pe.is-vc .pe__logo[data-key="codebreaker"]{height:70px}
.pe.is-vc .qcard__logo[data-key="frankles"], .pe.is-vc .qcard__logo[data-key="codebreaker"]{height:42px}
.pe.is-vc .qcard__logo[data-key="frankles"] img, .pe.is-vc .qcard__logo[data-key="codebreaker"] img{height:42px; max-height:42px}
/* ByBug 20% más chico que los otros dos compactos */
.pe.is-vc .pe__logo[data-key="bybug"]{height:56px}
.pe.is-vc .qcard__logo[data-key="bybug"]{height:34px}
.pe.is-vc .qcard__logo[data-key="bybug"] img{height:34px; max-height:34px}
.pe__bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:1}
.pe__scrim{position:absolute; inset:0; z-index:2;
  background:linear-gradient(102deg, rgba(6,8,10,.88) 0%, rgba(6,8,10,.55) 34%, rgba(6,8,10,.14) 60%, rgba(6,8,10,.04) 100%),
             linear-gradient(to top, rgba(6,8,10,.66), transparent 44%)}

/* copy izquierda — z-index 4: por DEBAJO de la cinta (5) para que el texto pase por detrás de las cards */
.pe__copy{position:absolute; left:var(--pad); top:50%; transform:translateY(-50%); z-index:4;
  max-width:min(48vw,640px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1)}
.pe__copy.is-out{opacity:0; transform:translateY(38px)}          /* frame3: baja y desaparece */
/* logo (wordmark blanco) directo sobre el hero oscuro, con sombra para legibilidad */
.pe__logo{height:48px; margin-bottom:24px; display:flex; align-items:center}
.pe__logo img{height:100%; width:auto; max-width:260px; object-fit:contain; object-position:left center;
  display:block; filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.pe__copy .tick{width:46px; height:3px; background:#fff; margin-bottom:24px; opacity:.9}
/* kicker del sector/ubicación → mayúscula pequeña, coherente con los eyebrows del home */
.pe__copy .loc{font-family:var(--sans); text-transform:uppercase; letter-spacing:.24em; font-weight:500;
  font-size:clamp(12px,1vw,13px); color:rgba(255,255,255,.82); margin-bottom:14px}
/* título de la empresa → serif Minion Pro, igual que los títulos display del home (coherencia visual) */
.pe__copy h1{font-family:var(--serif); font-weight:400; text-transform:none; letter-spacing:-.02em;
  font-size:clamp(40px,6vw,96px); line-height:.98; color:#fff; margin-bottom:22px}
/* títulos con salto de línea manual (ej. Auralta): fuente algo menor → "Auralta Hotel" en 1 línea */
.pe__copy h1.is-two{font-size:clamp(36px,5vw,76px)}
/* cada parte del nombre = una línea que NO se parte (garantiza 2 líneas a cualquier ancho) */
.pe__copy h1 .ln, .qcard__name .ln{display:block; white-space:nowrap}
.pe__copy .desc{font-size:clamp(14px,1.1vw,16px); color:#cfcbc2; max-width:42ch; margin-bottom:28px; line-height:1.6}
.pe__copy .meta{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px}
.pe__copy .meta span{font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(255,255,255,.3);
  border-radius:100px; padding:6px 14px; color:rgba(255,255,255,.85)}
.pe__copy .meta .meta__br{flex-basis:100%; height:0; border:0; padding:0; margin:0}   /* fuerza salto de línea en el wrap */
.pe__actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:2px}
.pe__discover{display:inline-flex; align-items:center; gap:12px; padding:16px 30px; border-radius:100px;
  border:1px solid rgba(255,255,255,.5); color:#fff; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; background:transparent; transition:.3s}
.pe__discover:hover{background:#fff; color:#0d1114}
/* tag "Fondo activo" con punto pulsante · botón "Ver sitio" (pestaña nueva) · botón "Recibir información" (abre modal) */
.pe__tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold)}
.pe__tag::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--c-gold);
  box-shadow:0 0 0 3px rgba(212,168,83,.22); animation:pePulse 2.4s ease-in-out infinite}
@keyframes pePulse{0%,100%{box-shadow:0 0 0 3px rgba(212,168,83,.22)} 50%{box-shadow:0 0 0 6px rgba(212,168,83,.06)}}
.pe__site{display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:13px; font-weight:500;
  color:#fff; padding:12px 20px; border-radius:100px; border:1px solid rgba(255,255,255,.45); transition:.25s}
.pe__site:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.85)}
.pe__site i{font-style:normal; font-size:12px}
.pe__site[hidden]{display:none}
.pe__lead{display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:100px; cursor:pointer;
  border:none; background:var(--c-gold); color:#0d1114; font-family:var(--sans); font-weight:600; font-size:13px;
  letter-spacing:.01em; transition:transform .25s, box-shadow .25s}
.pe__lead:hover{transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(212,168,83,.65)}
/* logo dentro de un chip (Venture Capital): cada logo se ve bien sobre su propio fondo */
.pe__logo--chip{width:fit-content; height:auto; align-items:flex-start; padding:12px 16px; border-radius:14px;
  box-shadow:0 12px 30px -16px rgba(0,0,0,.7)}
.pe__logo--chip img{height:40px; max-width:210px; filter:none}
.qcard__logo--chip{width:fit-content; height:auto; min-height:0; align-self:flex-start; padding:7px 10px; border-radius:9px}
.qcard__logo--chip img{height:26px; max-height:26px; filter:none}

/* ===== Modal "Recibir información" (captación de leads por proyecto) ===== */
.lead-ov{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(6,8,10,.72); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s}
.lead-ov.is-on{opacity:1}
.lead-ov[hidden]{display:none}
.lead-modal{position:relative; width:min(460px,100%); background:var(--c-cream); color:#0d1114; border-radius:20px;
  padding:42px 34px 34px; box-shadow:0 44px 100px -30px rgba(0,0,0,.75); transform:translateY(18px); transition:transform .3s}
.lead-ov.is-on .lead-modal{transform:none}
.lead-x{position:absolute; top:14px; right:18px; background:none; border:none; font-size:28px; line-height:1;
  cursor:pointer; color:#0d1114; opacity:.45; transition:opacity .2s}
.lead-x:hover{opacity:1}
.lead-kick{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); text-transform:uppercase;
  letter-spacing:.16em; font-size:11px; font-weight:600; color:#9a7c38; margin-bottom:12px}
.lead-kick::before{content:''; width:7px; height:7px; border-radius:50%; background:#c69a3e}
.lead-title{font-family:var(--serif); font-size:clamp(26px,4vw,32px); font-weight:400; letter-spacing:-.01em; margin-bottom:10px}
.lead-sub{font-size:14px; line-height:1.55; color:#4a4a44; margin-bottom:22px}
.lead-form{display:flex; flex-direction:column; gap:12px}
.lead-form input, .lead-form textarea{font-family:var(--sans); font-size:15px; padding:13px 16px; border-radius:12px;
  border:1px solid rgba(13,17,20,.2); background:#fff; color:#0d1114; width:100%; resize:vertical}
.lead-form input:focus, .lead-form textarea:focus{outline:none; border-color:#9a7c38; box-shadow:0 0 0 3px rgba(198,154,62,.16)}
.lead-hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important}
.lead-send{margin-top:6px; padding:15px; border-radius:100px; border:none; cursor:pointer; background:#0d1114; color:#fff;
  font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.01em; transition:.25s}
.lead-send:hover{background:#9a7c38}
.lead-send:disabled{opacity:.6; cursor:default}
.lead-note{font-size:13.5px; line-height:1.5; margin-top:6px; color:#2f6b3a}
.lead-note--err{color:#b23b3b}

/* entrada escalonada del copy (frame5: de abajo hacia arriba) */
.pe__copy.is-in .pe__logo{animation:peUp .7s cubic-bezier(.2,.7,.2,1) 0s both}
.pe__copy.is-in .tick{animation:peUp .7s cubic-bezier(.2,.7,.2,1) .06s both}
.pe__copy.is-in .loc{animation:peUp .7s cubic-bezier(.2,.7,.2,1) .14s both}
.pe__copy.is-in h1{animation:peUp .8s cubic-bezier(.2,.7,.2,1) .2s both}
.pe__copy.is-in .desc{animation:peUp .7s cubic-bezier(.2,.7,.2,1) .32s both}
.pe__copy.is-in .meta{animation:peUp .7s cubic-bezier(.2,.7,.2,1) .38s both}
.pe__copy.is-in .pe__actions{animation:peUp .7s cubic-bezier(.2,.7,.2,1) .44s both}
@keyframes peUp{from{opacity:0; transform:translateY(42px)} to{opacity:1; transform:none}}

/* cinta de próximas empresas (abajo-derecha). Ventana con recorte: las cards entran
   por la derecha y salen por la izquierda (loop continuo, se desliza der→izq). */
.pe__queuewin{position:absolute; right:var(--pad); bottom:clamp(96px,13vh,138px); z-index:5;
  overflow:hidden;
  /* la card que entra por la derecha se desvanece en opacidad (como el lineup de startups) */
  -webkit-mask-image:linear-gradient(90deg, #000 80%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 80%, transparent 100%)}
.pe__queue{display:flex; gap:18px; align-items:flex-end; will-change:transform}
.qcard{position:relative; width:clamp(148px,15vw,208px); height:clamp(224px,31vh,308px); border-radius:18px; overflow:hidden;
  background-size:cover; background-position:center; flex:none; cursor:pointer;
  box-shadow:0 22px 44px -20px rgba(0,0,0,.7); transition:filter .3s ease}
.qcard:hover{filter:brightness(1.1)}
.qcard::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,8,10,.84), transparent 56%)}
/* bloque anclado abajo; el nombre reserva 2 líneas → tick/rubro/1ª línea alineados entre cards */
.qcard__in{position:absolute; left:18px; right:14px; bottom:18px; z-index:2}
.qcard__tick{width:22px; height:2px; background:#fff; margin-bottom:8px; opacity:.85}
.qcard__loc{font-size:11px; color:rgba(255,255,255,.8); margin-bottom:6px}
.qcard__name{font-family:var(--sans); font-weight:600; text-transform:uppercase; line-height:1.05;
  font-size:clamp(14px,1.15vw,18px); color:#fff; min-height:2.1em}   /* reserva 2 líneas → alineación pareja */
/* logo de la empresa dentro de la card (reemplaza al nombre) */
.qcard__logo{height:34px; display:flex; align-items:center; min-height:2.1em}
.qcard__logo img{max-height:100%; max-width:100%; width:auto; object-fit:contain; object-position:left center;
  display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}

/* el "grower": imagen a pantalla completa que se REVELA con clip-path creciendo
   desde la posición de la 1ª card (frames 3-4). z<queue → crece por detrás.
   clip-path = compositado por GPU y NO deforma la foto. */
.pe__grower{position:absolute; inset:0; z-index:3; overflow:hidden;
  background-size:cover; background-position:center; opacity:0; pointer-events:none; will-change:clip-path}
.pe__grower.is-live{opacity:1}
/* difuminado propio del grower: entra con OPACIDAD durante el crecimiento (no de corte) */
.pe__grower::after{content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(102deg, rgba(6,8,10,.88) 0%, rgba(6,8,10,.55) 34%, rgba(6,8,10,.14) 60%, rgba(6,8,10,.04) 100%),
             linear-gradient(to top, rgba(6,8,10,.66), transparent 44%)}
.pe__grower.is-fade::after{transition:opacity 1.1s ease}
.pe__grower.is-lit::after{opacity:1}

/* flechas centradas abajo */
.pe__ctrl{position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:8; display:flex; gap:16px}
.pe__ctrl button{width:60px; height:60px; border-radius:50%; border:1px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.12); color:#fff; font-size:18px; cursor:pointer; display:grid; place-items:center; transition:.3s}
.pe__ctrl button:hover{background:#fff; color:#0d1114}
.pe__ctrl button:disabled{opacity:.4; cursor:default}

/* pausa + progreso + contador (abajo-derecha) */
.pe__prog{position:absolute; right:var(--pad); bottom:42px; z-index:8; display:flex; align-items:center; gap:26px}
.pe__pause{width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.12); color:#fff; cursor:pointer; display:grid; place-items:center; transition:.3s; flex:none}
.pe__pause:hover{background:#fff; color:#0d1114}
.pe__pause .ic-play{display:none}
.pe__pause.is-paused{background:var(--c-gold); border-color:var(--c-gold); color:#0d1114}
.pe__pause.is-paused .ic-pause{display:none}
.pe__pause.is-paused .ic-play{display:block}
.pe__track{position:relative; width:clamp(160px,24vw,420px); height:2px; background:rgba(255,255,255,.28); overflow:hidden}
.pe__track span{position:absolute; inset:0; background:var(--c-gold); transform:scaleX(0); transform-origin:left}
.pe__count{font-family:var(--serif); font-size:clamp(32px,3.4vw,52px); color:#fff; line-height:1; min-width:1.7em; text-align:right}
.pe__count small{color:rgba(255,255,255,.5); font-size:.5em; margin-left:.2em}

/* barra de tiempo arriba (frame2) */
.pe__time{position:absolute; top:0; left:0; height:4px; width:100%; background:var(--c-gold);
  transform:scaleX(0); transform-origin:left; z-index:45}

/* volver (esquina sup-izq bajo la nav) */
.pe__back{position:absolute; left:var(--pad); top:clamp(88px,11vh,116px); z-index:8;
  display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.82);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase}
.pe__back:hover{color:#fff}

/* ===== carrusel de proyectos en MÓVIL: texto izq (bloque centrado c/margen), flechas+timeline al fondo ===== */
@media(max-width:820px){
  .pe{height:100dvh}                                    /* usa la altura visible real (sin barra del navegador) */
  .pe__back{top:clamp(94px,13vh,150px)}                 /* bajar el "volver" (debajo del nav) */
  .pe__scrim{background:linear-gradient(to top, rgba(6,8,10,.86) 0%, rgba(6,8,10,.5) 34%, rgba(6,8,10,.42) 62%, rgba(6,8,10,.72) 100%)}
  /* texto alineado a la IZQUIERDA, dentro de una CAJA compacta centrada horizontalmente */
  .pe__copy{position:absolute; left:0; right:0; width:auto; max-width:min(330px,84vw); margin:0 auto; padding:0; top:50%; bottom:auto;
    transform:translateY(-50%); text-align:left; z-index:7}
  .pe__copy.is-out{transform:translateY(calc(-50% + 38px))}
  .pe__logo{height:34px; margin-bottom:14px; justify-content:flex-start}
  .pe__copy .tick{margin:0 0 14px}
  .pe__copy h1{font-size:clamp(36px,10vw,56px)}
  .pe__copy h1.is-two{font-size:clamp(30px,8.5vw,46px)}
  .pe__copy .desc{max-width:none; font-size:14px; margin:0 0 18px}
  .pe__copy .meta{justify-content:flex-start; margin-bottom:22px}
  .pe__actions{justify-content:flex-start}
  .pe__queuewin{display:none}                           /* la fila de próximas se oculta en móvil */
  /* flechas + línea de tiempo: grupo a 64px del bottom (timeline a 64, flechas encima) */
  .pe__ctrl{bottom:130px; gap:14px}
  .pe__ctrl button{width:50px; height:50px}
  .pe__prog{right:auto; left:50%; transform:translateX(-50%); bottom:64px; gap:16px}
  .pe__track{width:clamp(120px,40vw,220px)}
  .pe__count{font-size:28px}
}

/* ============================ QUIÉNES SOMOS · deck vertical + equipo interactivo ============================ */
.team{display:block; position:relative; height:340vh; background:#0a0b0c}  /* más alto = misma animación repartida en más scroll → menos sensible */
.team__sticky{position:sticky; top:0; width:100%; height:100vh; overflow:hidden}
.team__track{position:absolute; inset:0}
/* slides APILADAS: la de encima (intro) se despega hacia arriba y revela la foto fija debajo (deck vertical) */
.team__slide{position:absolute; inset:0; height:100vh; overflow:hidden; background-size:cover; background-position:center;
  display:flex; align-items:center; padding:0 var(--pad); will-change:transform}
/* slide 1 — intro (encima): foto de Puerto Varas + scrim para legibilidad del texto */
.team__intro{z-index:2; background-color:#0f2f43}
.team__intro::before{content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(6,18,26,.90) 0%, rgba(6,18,26,.58) 40%, rgba(6,18,26,.22) 100%)}
.team__introcopy{max-width:min(52vw,640px); position:relative; z-index:2}
.team__introcopy .kicker{color:color-mix(in srgb,var(--c-cream) 72%, transparent); margin-bottom:22px}
.team__title{font-family:var(--serif); font-weight:400; font-size:clamp(40px,6vw,92px); line-height:1.02; color:var(--c-cream); margin-bottom:24px}
.team__lead{font-size:clamp(16px,1.4vw,20px); color:color-mix(in srgb,var(--c-cream) 82%, transparent); max-width:46ch}
/* entrada del texto = igual a las cards de los fondos (fade de abajo hacia arriba, escalonado) */
.team__introcopy.is-in > *{animation:peUp .7s cubic-bezier(.2,.7,.2,1) both}
.team__introcopy.is-in > *:nth-child(1){animation-delay:.05s}
.team__introcopy.is-in > *:nth-child(2){animation-delay:.16s}
.team__introcopy.is-in > *:nth-child(3){animation-delay:.28s}
/* ===== slide 2 — Directorio / Equipo: banda de retratos (diagramación del frame 89–93) =====
   Retrato 2:3 ≈ 19vw · banda CENTRADA horizontal · línea base baja (~82vh) ·
   click en el círculo → la foto SUBE y el detalle (cargo + bio) aparece DEBAJO, bajo la foto. */
.team__board{z-index:1; background:var(--c-cream); align-items:flex-start; justify-content:center; overflow:hidden;
  --bpad:clamp(28px,3vw,72px); padding:clamp(146px,26vh,320px) var(--pad) clamp(48px,8vh,120px)}
/* montaña isotipo (línea) a la derecha, altura completa (como el frame) */
.board__mount{position:absolute; top:0; right:0; width:70%; height:100%; z-index:0; opacity:.24; pointer-events:none;
  background:url('Isotipo_Dark.svg') no-repeat right center/contain}
/* cabecera (texto oscuro sobre claro), arriba-izquierda */
.team__board .team__photohead{position:absolute; top:clamp(88px,11.5vh,150px); left:var(--bpad); z-index:4}
.team__board .team__photohead .kicker{color:#8a8478; margin-bottom:clamp(10px,2.1vh,26px)}
.team__board .team__phototitle{font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.8vw,56px); line-height:1.04; color:#12100c; white-space:nowrap}

/* switch vertical Directorio / Equipo + flechas, abajo-izquierda */
.board__switch{position:absolute; left:var(--bpad); bottom:clamp(48px,9vh,112px); z-index:5; display:flex; flex-direction:column; gap:22px; align-items:center}
.board__tabs{display:flex; gap:clamp(10px,1.4vw,26px); align-items:flex-end}
.board__tab{writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  background:none; border:none; padding:0; cursor:pointer; font-family:var(--sans); font-weight:600;
  font-size:clamp(15px,1.5vw,21px); letter-spacing:.01em; color:#c4beb2; transition:color .3s ease}
.board__tab.is-on{color:#12100c}
.board__tab:hover{color:#6b665d}
.board__arrows{display:flex; gap:16px}
.board__arrow{width:40px; height:40px; border-radius:50%; border:1.5px solid #12100c; background:none; color:#12100c;
  font-size:17px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.25s ease}
.board__arrow:hover{background:#12100c; color:var(--c-cream)}

/* fila de retratos, centrada y alineada arriba (top). El detalle crece hacia abajo. */
.board__cards{position:relative; z-index:3; display:flex; align-items:flex-start; justify-content:center; gap:clamp(6px,1vw,20px); max-width:100%}
/* cada card = columna: foto arriba, detalle debajo (crece hacia abajo, no empuja la foto) */
.pcard{position:relative; flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch;
  transition:transform .62s cubic-bezier(.2,.7,.2,1)}
.pcard__figure{position:relative; flex:0 0 auto; overflow:hidden}
/* altura con TOPE en vh → en viewports anchos-bajos la foto no ocupa toda la altura y queda aire para el título */
.pcard__photo{height:min(28.5vw,52vh); width:auto; aspect-ratio:2/3;
  background-size:cover; background-position:center top; background-color:#20242a;
  transition:box-shadow .4s ease}
/* la card activa sube un poco (lift fijo, independiente del largo de la bio) → queda ~25px bajo el título */
.pcard.is-active{transform:translateY(clamp(-40px,-3.5vh,-18px))}
.pcard.is-active .pcard__photo{box-shadow:0 30px 60px -22px rgba(0,0,0,.45)}

/* círculo con nombre (reemplaza el "Nombre del trabajador"): anillo + nombre, sobre la base de la foto */
.pcard__circle{position:absolute; left:14px; bottom:16px; z-index:3; display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 8px; border-radius:100px; border:1px solid rgba(255,255,255,.3);
  background:rgba(10,12,14,.62); backdrop-filter:blur(5px); color:#fff; cursor:pointer;
  font-family:var(--sans); font-weight:500; font-size:clamp(11px,.95vw,14px); white-space:nowrap; transition:.3s ease}
.pcard__circle .dot{flex:0 0 auto; width:13px; height:13px; border-radius:50%; border:1.5px solid #fff; position:relative}
.pcard__circle .dot::after{content:''; position:absolute; inset:3px; border-radius:50%; background:#fff;
  animation:mkpulse 1.9s ease-in-out infinite}
@keyframes mkpulse{0%,100%{opacity:.3; transform:scale(.82)}50%{opacity:1; transform:scale(1)}}
.pcard__circle:hover{background:rgba(10,12,14,.7); border-color:rgba(255,255,255,.5)}
.pcard.is-active .pcard__circle{background:var(--c-cream); color:#12100c; border-color:transparent}
.pcard.is-active .pcard__circle .dot{border-color:#12100c}
.pcard.is-active .pcard__circle .dot::after{background:#12100c; animation:none}

/* detalle DEBAJO de la foto (cargo + bio); crece de 0 → alto y empuja la foto hacia arriba */
.pcard__detail{overflow:hidden; max-height:0; opacity:0; padding-top:0;
  transition:max-height .62s cubic-bezier(.2,.7,.2,1), opacity .5s ease, padding .62s cubic-bezier(.2,.7,.2,1)}
.pcard.is-active .pcard__detail{max-height:clamp(150px,22vh,300px); opacity:1; padding-top:clamp(14px,1.8vh,24px)}
/* texto del detalle aparece como las slides de la bitácora: fade + subida escalonada */
.pcard.is-active .pcard__cargo{animation:peUp .6s cubic-bezier(.2,.7,.2,1) .12s both}
.pcard.is-active .pcard__desc{animation:peUp .6s cubic-bezier(.2,.7,.2,1) .2s both}
.pcard__cargo{font-family:var(--sans); font-weight:600; color:#a67c05; font-size:clamp(14px,1.15vw,17px); line-height:1.25; margin-bottom:12px}
.pcard__desc{color:#4b463d; font-size:clamp(12px,.92vw,14px); line-height:1.55}
.pcard__cargo{font-family:var(--sans); font-weight:600; color:#a67c05; font-size:clamp(14px,1.2vw,17px); line-height:1.25; margin-bottom:14px; white-space:normal}
.pcard__desc{color:#4b463d; font-size:clamp(13px,1vw,15px); line-height:1.62; max-width:32ch; white-space:normal}

@media(max-width:820px){
  /* Quiénes somos: MISMO mecanismo que desktop en móvil → la intro (imagen a pantalla completa)
     se desvanece con opacidad y revela el equipo. Se mantiene el sticky. */
  .team{height:260vh}                 /* móvil conserva su altura afinada (el snapper es solo desktop) */
  .team__introcopy{max-width:none}
  .team__title{font-size:clamp(34px,9vw,56px)}
  .team__board{flex-direction:column; align-items:stretch; justify-content:center; padding:82px var(--pad) 34px; gap:16px}
  .team__board .team__photohead{position:static; margin:0}
  .team__board .team__photohead .kicker{margin-bottom:6px}
  .team__phototitle{white-space:normal !important; font-size:clamp(28px,7.5vw,42px)}
  .board__mount{display:none}
  .board__switch{position:static; transform:none; flex-direction:row; align-items:center; gap:16px; margin:0}
  .board__tabs{flex-direction:row; gap:16px; align-items:center}
  .board__tab{writing-mode:horizontal-tb; transform:none; font-size:14px}
  .board__arrows{margin-left:auto}
  .board__arrow{width:36px; height:36px; font-size:15px}
  /* tarjetas en grilla de 2 columnas (algo más bajas para que quepan 2 filas en el pin) */
  .board__cards{position:static; display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:none}
  .pcard{width:auto; transform:none !important}
  .pcard__figure{width:100%}
  .pcard__photo{width:100% !important; height:auto !important; aspect-ratio:3/4}
  .pcard__circle{left:8px; bottom:8px; font-size:11px; padding:5px 10px 5px 6px}
  .pcard__detail{max-height:0}
  .pcard.is-active{grid-column:1 / -1}
  .pcard.is-active .pcard__detail{max-height:600px; padding-top:12px}
}