/* ============================================================
   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}
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}
.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{border:1px solid rgba(255,255,255,.6); color:#fff; border-radius:100px; padding:12px 24px; font-size:14px; font-weight:500}

/* ============================================================
   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}
/* 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)}

/* ---- cubierta: título+bajada arriba, párrafo+hint abajo ---- */
.panel--cover{flex-direction:column; justify-content:space-between; align-items:flex-start;
  padding-top:clamp(112px,16vh,180px); padding-bottom:clamp(48px,8vh,76px);
  background:radial-gradient(120% 95% at 78% 12%, #1e4f66 0%, var(--c-blue) 46%, #0f3145 100%)}
.cover__top, .cover__bottom{position:relative; z-index:2; margin-left:50px; max-width:640px}
.cover__title{font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(38px,5.8vw,88px); line-height:1.04; margin:20px 0 0; color:var(--c-cream)}
.cover__title span{display:block; white-space:nowrap}   /* 2 líneas garantizadas, sin partirse */
.cover__sub{max-width:44ch; font-size:clamp(15px,1.4vw,19px); color:color-mix(in srgb,var(--c-cream) 82%, transparent)}
.panel--cover .eyebrow{color:var(--c-gold)}
.panel--cover .panel__hint{position:static; margin-top:22px; left:auto; bottom:auto}
.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}
.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)}

.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}

.form{display:flex; flex-direction:column; gap:14px}
.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:260vh; background:var(--c-cream)}
.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}
.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}
.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}
@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}
/* 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__links,.nav__cta{display:none}
  .deck__sticky{position:static; height:auto}
  .deck__track{height:auto}
  .panel{position:static !important; width:100% !important; transform:none !important; height:auto; min-height:88vh;
    flex-direction:column; justify-content:center; align-items:flex-start; padding:100px var(--pad); gap:32px; box-shadow:none}
  .panel__media{width:100%; height:38vh; flex:none}
  .showcase__feature{flex:none; max-width:none; padding:80px var(--pad)}
  .showcase__lineup{width:100%; height:auto; padding:60px var(--pad); overflow-x:auto; mask-image:none; -webkit-mask-image:none}
  .showcase__track{transform:none !important}
  .startup{height:auto; min-height:220px; opacity:1}
  .deck__ui{display:none}
  .deckmark{display:none}
  .panel--cover{padding-top:96px; padding-bottom:40px}
  .cover__top,.cover__bottom{margin-left:0}
}

/* ============================ 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}
.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:16px}
.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}

/* 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}

@media(max-width:820px){
  .pe{height:auto; min-height:100vh; padding-bottom:40px}
  .pe__copy{position:relative; top:auto; left:auto; transform:none; margin:130px var(--pad) 26px; max-width:none}
  .pe__back{top:74px}
  .pe__queuewin{position:relative; right:auto; bottom:auto; width:auto !important; overflow-x:auto;
    -webkit-mask-image:none; mask-image:none}
  .pe__queue{padding:0 var(--pad) 30px; justify-content:flex-start}
  .pe__ctrl{position:relative; left:auto; bottom:auto; transform:none; justify-content:center; margin:6px auto 22px}
  .pe__prog{position:relative; right:auto; bottom:auto; justify-content:center; margin:0 auto}
  .pe__time{position:fixed}
}

/* ============================ QUIÉNES SOMOS · deck vertical + equipo interactivo ============================ */
.team{display:block; position:relative; height:260vh; background:#0a0b0c}
.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){
  .team{height:auto}.team__sticky{position:static;height:auto}.team__track{height:auto;transform:none!important}
  .team__slide{height:auto;min-height:88vh;padding:120px var(--pad)}
  .team__board{overflow:visible; align-items:stretch; padding:120px var(--pad)}
  .team__board .team__photohead{position:static; margin-bottom:26px}
  .board__mount{display:none}
  .board__switch{position:static; transform:none; flex-direction:row; align-items:center; gap:20px; margin-bottom:22px}
  .board__tab{writing-mode:horizontal-tb; transform:none}
  .board__cards{position:static; transform:none!important; opacity:1!important; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; gap:16px}
  .pcard__photo{height:auto; width:clamp(150px,42vw,240px)}
  .pcard.is-active .pcard__detail{max-height:600px; padding-top:14px}
}