/* André De Freitas · megatherium — diseño final */
:root{
  --bg:#F2EFE9; --land:#E4E1DC; --ink:#3B3A35; --soft:#55534D;
  --brown:#9A5530; --red:#CB2A0F; --redtx:#BA2509; --cream:#F4F0E9;
  --side:264px;
  --ease:cubic-bezier(.32,.72,0,1);
  --out:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body[data-page="home"]{background:var(--land)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mark{font-weight:700;font-style:italic;font-size:15px;letter-spacing:-.01em;line-height:1}

/* protección: nada se arrastra ni se selecciona; un velo cubre cada imagen */
.sh{position:absolute;inset:0;z-index:3;background:transparent}
.it,.slide,.portrait,.lb-frame,.cv{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img{-webkit-user-drag:none;user-select:none}

/* =========================================================== PORTADA */
#home{position:relative}
.stage{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:var(--land);color:var(--cream)}
.doors{position:absolute;inset:0;display:flex}
.door{position:relative;flex:1 1 0;display:flex;align-items:flex-end;padding:48px 48px 84px;overflow:hidden;transition:flex-grow .8s var(--ease)}
.d1{background:var(--brown)}
.d2{background:var(--red)}
.door .ph{position:absolute;inset:0;transition:transform 1.4s var(--out)}
.door.has-photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(24,14,8,.34),rgba(24,14,8,0) 45%)} /* velo suave bajo el título */

/* slideshow */
.slide{position:absolute;inset:0;opacity:0;z-index:0;transition:opacity 1.6s ease;overflow:hidden;font-size:14px;display:flex;align-items:center;justify-content:center}
.slide img{width:100%;height:100%;object-fit:cover}
.slide.prev{opacity:1;z-index:1;transition:none}
.slide.on{opacity:1;z-index:2}
.slide.on img,.slide.prev img{animation:drift var(--kb,8.5s) linear both}
@keyframes drift{from{transform:scale(1.07)}to{transform:scale(1)}}

.ttl{position:relative;z-index:4;margin:0;font-weight:700;font-size:clamp(38px,4.45vw,64px);line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.ttl.ital{font-style:italic}
.ttl{transition:color .4s ease}
.sc{display:inline-block;transform-origin:0 100%;transition:transform .8s var(--ease)}

/* Escritorio con mouse: reposo = fondo claro con la portada pequeña al centro de cada mitad.
   Al pasar el mouse la portada de esa mitad se abre hasta ocupar la mitad completa (y viceversa).
   Las mitades siempre miden 50/50 y la imagen no hace zoom: solo se abre la ventana. */
@keyframes driftS{from{transform:scale(1.03)}to{transform:scale(1)}}
@media (hover:hover) and (min-width:700px){
  .stage{color:#0c1116}
  .d1,.d2{background:var(--bg)}
  /* portada en reposo: ventana 4:5 centrada en su mitad (alto ≈ 53 % de la pantalla, ancho = 4/5 del alto).
     Las unidades cq se miden sobre .doors (sin padding), así el centrado es exacto. */
  .doors{container-type:size}
  .door .ph{--cw:min(42.4cqh,31cqw);--ch:calc(var(--cw)*1.25);inset:calc((100cqh - var(--ch))/2) calc((50cqw - var(--cw))/2);overflow:hidden;transition:inset .85s var(--ease)}
  .door:hover .ph,.door:focus-visible .ph{inset:0}
  .slide.on img,.slide.prev img{animation-name:driftS}
  .ttl{color:#0c1116}
  .doors .door:hover .ttl,.doors .door:focus-visible .ttl{color:var(--red)}
  .door.has-photo::after{opacity:0;transition:opacity .85s ease;background:linear-gradient(to top,rgba(24,14,8,.2),rgba(24,14,8,0) 38%)}
  .door.has-photo:hover::after{opacity:1}
  .has-photo .hdr::before{display:none}
  .lang.pill{border-color:currentColor}
  /* Solo con la portada de Ilustración abierta: Sobre mí, Contacto y ES / EN pasan a blanco.
     Esos enlaces están sobre la mitad derecha, así que pasar el mouse por ellos mantiene la portada abierta. */
  .hdr-nav{transition:color .4s ease}
  .stage:has(.d2:hover,.d2:focus-visible,.hdr-nav:hover,.hdr-nav:focus-within) .hdr-nav{color:#fff}
  .stage:has(.hdr-nav:hover,.hdr-nav:focus-within) .d2 .ph{inset:0}
  .stage:has(.hdr-nav:hover,.hdr-nav:focus-within) .d2.has-photo::after{opacity:1}
  .stage:has(.hdr-nav:hover,.hdr-nav:focus-within) .d2 .ttl{color:var(--red)}
}

.chrome{position:absolute;z-index:6}
.hdr{top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:28px 48px;pointer-events:none}
.has-photo .hdr::before{content:"";position:absolute;inset:0 0 auto 0;height:120px;z-index:-1;background:linear-gradient(to bottom,rgba(24,14,8,.26),rgba(24,14,8,0))}
.hdr>*{pointer-events:auto}
.hdr-name{font-weight:700;font-size:15px;letter-spacing:-.01em;text-transform:uppercase}
.hdr-mark{position:absolute;left:50%;transform:translateX(-50%)}
.hdr-nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.ftr-mark{left:50%;bottom:28px;transform:translateX(-50%)}
.ftr-nav{display:none;left:0;right:0;bottom:0;padding:0 16px 22px;justify-content:space-between;font-size:13px;font-weight:500;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.year{top:50%;font-size:16px;font-weight:500;line-height:1;writing-mode:vertical-rl;pointer-events:none}
.year-l{left:10px;transform:translateY(-50%) rotate(180deg)}
.year-r{right:10px;transform:translateY(-50%)}

.lang{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.lang button{font-weight:700;opacity:.5;padding:6px 3px;min-height:32px;transition:opacity .25s}
.lang button[aria-pressed="true"]{opacity:1}
.lang button:hover{opacity:1}
.lang.pill{border:1.5px solid var(--cream);border-radius:99px;padding:0 11px;font-size:13px}

/* animación de entrada (aprobada) */
#home.run .door{animation:open 1.5s cubic-bezier(.7,0,.2,1) both}
#home.run .d2{animation-delay:.25s}
#home.run .ttl{animation:rise 1.1s var(--out) 1.15s both}
#home.run .d2 .ttl{animation-delay:1.4s}
#home.run .chrome{animation:fadein .9s ease 1.8s both}
@keyframes open{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ============================================================ CASCARÓN */
#site{position:relative;min-height:100vh}
.topbar{display:none}
.side{position:fixed;inset:0 auto 0 0;width:var(--side);padding:40px 32px 36px;display:flex;flex-direction:column;overflow-y:auto;background:var(--bg);z-index:20;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.name{display:block;margin-top:clamp(48px,13vh,150px);font-weight:700;font-size:38px;line-height:.95;letter-spacing:-.045em;text-transform:uppercase}
.nav{margin-top:clamp(36px,6vh,56px);font-size:14px;text-transform:uppercase;letter-spacing:.01em;font-weight:400}
.nav a{display:block;transition:color .2s}
.nav a:hover{color:var(--redtx)}
.grp{margin-bottom:18px}
.grp .top{padding:3px 0}
.grp[data-sec="foto"] .top.on{color:var(--redtx);font-weight:700}
.grp[data-sec="ill"] .top.on{color:var(--redtx);font-weight:700;font-style:italic;text-decoration:underline;text-underline-offset:4px}
.sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.sub-in{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .5s}
.grp.open .sub{grid-template-rows:1fr}
.grp.open .sub-in{visibility:visible;transition-delay:0s}
.sub a{padding:3px 0 3px 18px;font-size:13.5px;line-height:1.25}
.sub-in{padding-top:2px}
.sub a.on{color:var(--redtx);text-decoration:underline;text-underline-offset:4px}
.grp2{margin-top:34px}
.grp2 .top{padding:5px 0}
.grp2 .top.on{color:var(--redtx);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.grp2 .lang{margin-top:2px;font-size:14px}
.grp2 .lang button{padding:5px 0}
.desc{margin:30px 0 0;max-width:204px;font-size:14px;line-height:1.7;color:var(--soft);font-weight:300}
.ig{display:inline-flex;margin-top:22px;width:28px;height:28px;align-items:center;transition:color .2s}
.ig:hover{color:var(--redtx)}
.mark-bot{margin-top:auto;padding-top:32px}

/* about / contacto: megatherium centrado en la página */
.mark-c{display:none;position:absolute;left:50%;transform:translateX(-50%);z-index:5}
.mark-c-top{top:32px}
.mark-c-bot{bottom:36px}
body[data-page="about"] .mark-c,body[data-page="contact"] .mark-c{display:block}
body[data-page="about"] .side .mark,body[data-page="contact"] .side .mark{visibility:hidden}

.view{margin-left:var(--side);min-height:100vh}
.view.enter{animation:viewin .6s var(--out) both}
@keyframes viewin{from{opacity:0}to{opacity:1}}
.tabs{display:none}

/* ============================================================ GALERÍA */
.gal{display:flex;align-items:flex-start}
.col{flex:1 1 0;min-width:0;margin-right:-.4px}
/* retratos: bandas con vacíos (cada foto conserva su proporción nativa, alineadas arriba) */
.gal.rows{display:block;--g:clamp(6px,.75vw,12px);--gy:clamp(20px,2.4vw,44px);padding:var(--g) var(--g) 0}
.rows .rw{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));column-gap:var(--g);align-items:start;margin-bottom:var(--gy)}
.rows .rw.fb{row-gap:var(--g)}
.it{position:relative;display:block;width:100%;overflow:hidden;cursor:zoom-in;background:#d8d4cc;opacity:0;transform:translateY(14px);transition:opacity .8s ease var(--d,0ms),transform .9s var(--out) var(--d,0ms)}
.it.in{opacity:1;transform:none}
.it .im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--out),filter .5s}
.it:focus-visible{outline-offset:-4px}
@media (hover:hover){
  .it:hover .im{transform:scale(1.035)}
  .it:hover span.im{filter:brightness(1.06)}
}

/* galería horizontal (Ilustración) */
.hgal{display:block;height:100vh;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.hgal::-webkit-scrollbar{display:none}
.hgal.drag{cursor:grabbing;user-select:none}
.hgal.drag .it{cursor:grabbing}
.hrow{display:flex;align-items:flex-start;gap:clamp(18px,2.4vw,40px);height:100%;width:max-content;padding:0 clamp(24px,5vw,80px)}
.hrow .it{flex:none;width:auto}
@media (max-width:899px){.hgal{height:calc(100svh - 56px - 52px)}}

/* ====================================================== ILUSTRACIÓN */
/* Hub V3: UNA sola rejilla de 6 columnas × 3:4 vertical. Reposo y activos son posiciones en esa rejilla,
   por eso el espacio entre covers es siempre --g (también durante la animación).
   Todo se mide en cqw del propio .cov (contenedor), así que escala con el ancho disponible. */
.cov{
  container-type:inline-size;position:relative;
  margin:clamp(96px,11.3vw,162px) 4.7vw 0 7vw;
  --g:1.574cqw;                              /* el único espacio entre covers */
  --s:15.355cqw;                             /* ancho de una celda */
  --h:calc(var(--s)*4/3);                    /* alto de una celda (3:4) */
  --dur:.8s;
}
.cov::before{content:"";display:block;height:calc(5*var(--h) + 4*var(--g))}   /* alto fijo: 5 filas (Live to Win activo llega hasta la quinta) */
.cv{
  --col:0;--row:0;--sc:1;--sr:1;
  --tw:calc(var(--sc)*var(--s) + (var(--sc) - 1)*var(--g));    /* ancho y alto DESTINO (cambian al instante) */
  --th:calc(var(--sr)*var(--h) + (var(--sr) - 1)*var(--g));
  position:absolute;z-index:1;display:block;overflow:hidden;background:var(--c);color:var(--ink);
  left:calc(var(--col)*(var(--s) + var(--g)));top:calc(var(--row)*(var(--h) + var(--g)));
  width:var(--tw);height:var(--th);
  transition:left var(--dur) var(--ease),top var(--dur) var(--ease),width var(--dur) var(--ease),height var(--dur) var(--ease);
  animation:cvin 1.1s cubic-bezier(.7,0,.2,1) calc(var(--i)*.14s) both;
}
.cv.on{z-index:2}
.cv:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cv0{--em:8.8}.cv1{--em:7.8}.cv2{--em:5.8}.cv3{--em:4.3}   /* ancho del título en em: para que quepa en cualquier tamaño */
/* colocaciones [col, fila, ancho, alto] en celdas — reposo */
.cv0{--col:0;--row:0;--sc:2;--sr:2}
.cv2{--col:2;--row:0;--sc:1;--sr:1}
.cv3{--col:3;--row:1;--sc:1;--sr:1}
.cv1{--col:4;--row:1;--sc:2;--sr:2}
/* Selected Works activo */
.cov[data-a="0"] .cv0{--sc:3;--sr:3}
.cov[data-a="0"] .cv2{--col:3}
.cov[data-a="0"] .cv3{--col:4}
.cov[data-a="0"] .cv1{--row:2}
/* Commissioned Work activo */
.cov[data-a="1"] .cv1{--col:3;--sc:3;--sr:3}
.cov[data-a="1"] .cv3{--col:2}
/* Live to Win activo */
.cov[data-a="2"] .cv2{--sc:3;--sr:3}
.cov[data-a="2"] .cv3{--row:3}
.cov[data-a="2"] .cv1{--row:3}
/* Divinity activo */
.cov[data-a="3"] .cv0{--col:1;--sc:1;--sr:1}
.cov[data-a="3"] .cv3{--col:1;--row:1;--sc:3;--sr:3}
@keyframes cvin{from{clip-path:inset(0 0 100% 0);opacity:.6}to{clip-path:inset(0 0 0 0);opacity:1}}
.cv-bg{position:absolute;inset:0}
.cv-bg img{width:100%;height:100%;object-fit:cover;animation:drift 14s ease-in-out infinite alternate}
/* texto: centrado en reposo; activo → baja al fondo. Se mide contra el alto DESTINO (--th) para que
   llegue abajo exactamente cuando el cover termina de crecer (mismo tiempo y curva que el cover). */
.cv-t{
  position:absolute;z-index:2;left:0;right:0;display:flex;justify-content:center;pointer-events:none;
  top:calc(var(--th)/2);transform:translateY(-50%);
  transition:top var(--dur) var(--ease),transform var(--dur) var(--ease),color .4s ease;
}
.cv.on .cv-t{top:calc(var(--th) - var(--tw)*.05);transform:translateY(-100%)}
.cv-tx{display:block;text-align:left;white-space:nowrap;
  font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.92;
  font-size:min(calc(var(--tw)*.13),calc(var(--tw)*.82/var(--em)));          /* 13 % del ancho del cover o lo que quepa */
  transition:font-size var(--dur) var(--ease)}
.cv-m{display:block;white-space:pre-line}
.cv-m i{font-style:italic}
.cv-s{display:block;margin-top:.3em;font-size:.62em;font-weight:800;letter-spacing:-.03em;line-height:1}
@media (hover:hover){
  .cv.has-img.on::before{background:rgba(24,14,8,.38)}   /* un poco más de velo para que el rojo se lea sobre la imagen */
}
.cv.on .cv-t{color:var(--red)}
/* el color de texto de cada portada viene de content.js (ink) */
.cv .cv-t{color:var(--ink)}
.cv.on .cv-t{color:var(--red)}

/* ============================================================ SOBRE MÍ */
.about{padding:clamp(120px,12.8vw,255px) clamp(24px,3vw,60px) 150px clamp(24px,3.67vw,73px)}
.bios{max-width:1547px}
.bio{margin:0 0 .96em;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(27px,2.3vw,46px);line-height:.96;letter-spacing:-.02em;font-weight:400}
.bio i{font-style:italic}
.rule{border:0;border-top:2px solid #d6d3cc;margin:clamp(40px,4.4vw,88px) 0 clamp(36px,3.2vw,64px);max-width:1547px}
.abrow{display:grid;grid-template-columns:26.8% 30.5% 28.5%;column-gap:7.1%;align-items:start;max-width:1547px}
.portrait{position:relative;aspect-ratio:3/4;background:var(--brown);overflow:hidden;display:flex;align-items:center;justify-content:center}
.portrait img{width:100%;height:100%;object-fit:cover}
.pp{display:block;max-width:9em;text-align:center;color:var(--cream);font-size:26px;line-height:1.15;text-transform:uppercase;font-weight:500}
.hl{margin-top:clamp(30px,2.4vw,48px)}
.hl:first-child{margin-top:0}
.hl h2{margin:0;max-width:11.6em;color:var(--red);font-weight:700;font-size:clamp(25px,1.95vw,40px);line-height:1;letter-spacing:-.035em;text-transform:uppercase}
.hl-s{margin:.25em 0 0;color:var(--redtx);font-weight:700;font-size:clamp(15px,1.12vw,22px);line-height:1.06;letter-spacing:-.025em;text-transform:uppercase;max-width:10.6em}
.hl i{font-style:italic}
.svc-t{margin:0;font-size:clamp(16px,.96vw,19px);font-weight:700;letter-spacing:-.01em}
.svc{list-style:none;margin:clamp(14px,1.3vw,26px) 0 0;padding:0;font-size:clamp(15px,.92vw,18px);line-height:1.38}
.clist{margin-top:clamp(40px,4.2vw,84px);font-size:clamp(15px,.92vw,18px)}
.clist p{margin:0 0 18px;line-height:1.25}
.clist span{display:block;font-weight:400}
.clist a{font-weight:700;transition:color .2s}
.clist a:hover{color:var(--redtx)}

/* ============================================================ CONTACTO */
.contact{padding:clamp(160px,26.7vw,385px) 48px 160px 48px}
@media (min-width:1100px){.contact{padding-right:312px}}
.big{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(52px,5vw,72px);line-height:1;letter-spacing:-.01em;color:var(--red)}
.big i{font-style:italic}
.avail{margin:clamp(14px,1.5vw,22px) 0 0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:20px;line-height:1.25;letter-spacing:-.005em;text-align:left;color:var(--ink)}
.avail i{font-style:italic}
.cinfo{margin-top:clamp(28px,5.2vw,76px)}
.cinfo .clist{margin-top:0;font-size:20px}
.cinfo .clist p{margin-bottom:22px}
.loc{margin:0;font-size:20px}

/* ============================================================ CONTACTO · capa con blur */
html.ct-open{overflow:hidden}
.ct{position:fixed;inset:0;z-index:9000;visibility:hidden;pointer-events:none;color:#0C1116;transition:visibility 0s linear .5s}
.ct.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.ct-bg{position:absolute;inset:0;background:rgba(242,239,233,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background-color .35s ease,backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease}
.ct.open .ct-bg{background:rgba(242,239,233,.58);-webkit-backdrop-filter:blur(38px) saturate(1.05);backdrop-filter:blur(38px) saturate(1.05);transition:background-color .7s var(--ease),backdrop-filter .7s var(--ease),-webkit-backdrop-filter .7s var(--ease)}
.ct-bg::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s ease;background-size:240px 240px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.ct.open .ct-bg::after{opacity:.9;transition:opacity .9s ease .1s}

/* contenido: aparece escalonado, sale rápido */
.ct-x,.ct-lang,.ct-mk,.ct .year,.ct-big,.ct-av,.ct-info p{opacity:0;transition:opacity .25s ease,transform .25s ease}
.ct-x,.ct-lang,.ct-big,.ct-av,.ct-info p{transform:translateY(10px)}
.ct.open .year{opacity:1;transition:opacity .7s ease var(--d,0s)}
.ct.open .ct-x,.ct.open .ct-lang,.ct.open .ct-mk,.ct.open .ct-big,.ct.open .ct-av,.ct.open .ct-info p{opacity:1;transform:none;transition:opacity .7s ease var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.ct-x,.ct-lang,.ct-mk,.ct .year{--d:.12s}
.ct-big{--d:.1s}.ct-av{--d:.17s}
.ct-info p:nth-child(1){--d:.24s}.ct-info p:nth-child(2){--d:.3s}.ct-info p:nth-child(3){--d:.36s}

.ct-x{position:absolute;top:24px;left:48px;display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;font-weight:500;cursor:pointer}
.ct-esc{border:1.5px solid currentColor;border-radius:6px;padding:2px 6px;font-size:11px;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.ct-x:hover .ct-esc{color:var(--red)}
.ct-mk{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.ct-mk-t{top:30px}.ct-mk-b{bottom:28px}
.ct-lang{position:absolute;top:24px;right:48px}
.ct .lang.pill{border-color:currentColor}
.ct .year{color:inherit}
.ct .year-l{transform:translateY(-50%) rotate(180deg)}   /* izquierda: se lee de abajo hacia arriba, igual que en el home */
.ct .year-r{transform:translateY(-50%)}

.ct-main{position:absolute;right:35%;top:35%;width:max-content;max-width:62vw;text-align:right;pointer-events:none}
.ct-big{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(64px,7.5vw,150px);line-height:.9;letter-spacing:-.045em;color:var(--red);pointer-events:auto}
.ct-big i{font-style:italic}
.ct-av{margin:.55em 0 0;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(24px,2.3vw,46px);line-height:1.04;letter-spacing:-.03em;pointer-events:auto}
.ct-av i{font-style:italic}
.ct-info{position:absolute;left:8.4vw;right:8.4vw;top:66%;display:flex;justify-content:space-between;align-items:center;gap:32px;pointer-events:none}
.ct-info p{margin:0;font-size:clamp(20px,2.2vw,44px);font-weight:700;line-height:.98;letter-spacing:-.03em;pointer-events:auto;user-select:text;-webkit-user-select:text}
.ct-info p span{display:block;font-weight:400}
.ct-info a{color:inherit;text-decoration:none;transition:color .3s ease}
@media (hover:hover){.ct-info a:hover{color:var(--red)}}
.ct-info a:focus-visible,.ct-x:focus-visible{outline-color:var(--red)}

@media (max-width:1099px){.ct-main{right:18%}.ct-info{left:6vw;right:6vw}}
@media (max-width:699px){
  .ct-x{left:16px;top:18px}.ct-lang{right:16px;top:18px}.ct .year{display:none}.ct-mk-t{top:22px}
  .ct-main{left:0;right:0;top:17%;width:auto;max-width:none;padding:0 20px;text-align:left}
  .ct-big{font-size:clamp(56px,18vw,96px)}
  .ct-av{font-size:clamp(22px,6.4vw,30px)}
  .ct-info{left:20px;right:20px;top:auto;bottom:84px;flex-direction:column;align-items:flex-start;gap:22px}
  .ct-info p{font-size:clamp(24px,7.2vw,34px)}
}
@media (prefers-reduced-transparency:reduce){.ct.open .ct-bg{background:rgba(242,239,233,.94);-webkit-backdrop-filter:none;backdrop-filter:none}.ct-bg::after{display:none}}
@media (prefers-reduced-motion:reduce){.ct *:not(.year),.ct-bg,.ct-bg::after{transition-duration:.01s!important;transition-delay:0s!important;transform:none!important}}

/* ============================================================ BOTONES */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:1.5px solid var(--ink);border-radius:99px;font-weight:600;font-size:17px;letter-spacing:-.01em;transition:background .25s,color .25s,transform .2s var(--out)}
.btn.dark{background:var(--ink);color:var(--cream)}
.btn:active{transform:scale(.97)}
@media (hover:hover){.btn:hover{background:var(--ink);color:var(--cream)}.btn.dark:hover{background:#000}}

/* ============================================================ VISOR */
.lb{position:fixed;inset:0;z-index:100;background:rgba(242,239,233,.84);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .35s ease}
.lb.open{opacity:1}
.lb-name{position:absolute;top:36px;left:48px;font-weight:700;font-size:22px;letter-spacing:-.04em;text-transform:uppercase;line-height:1}
.lb-mark{position:absolute;left:50%;transform:translateX(-50%)}
.lb-mt{top:38px}.lb-mb{bottom:34px}
.lb-close{position:absolute;top:36px;right:48px;font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:.01em;padding:6px 0;line-height:1;z-index:2}
.lb-close:hover{color:var(--redtx)}
.lb-nav{position:absolute;top:84px;right:48px;display:flex;gap:12px;z-index:2}
.lb-stage{position:absolute;left:0;right:0;top:84px;bottom:84px;display:flex;align-items:center;justify-content:center}
.lb-frame{position:relative;max-width:100%;max-height:100%;box-shadow:0 18px 60px rgba(40,25,15,.12)}
.lb-frame img,.lb-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lb-frame.swap{animation:swap .45s var(--out) both}
@keyframes swap{from{opacity:0;transform:translateX(var(--dx,0))}to{opacity:1;transform:none}}
body.lb-open{overflow:hidden}
body.lb-open .side .mark-top{visibility:hidden}

/* ======================================================== PUERTA +18 */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.gate-box{max-width:440px}
.gate h1{margin:0 0 12px;font-size:34px;line-height:1;letter-spacing:-.04em;text-transform:uppercase;color:var(--red)}
.gate p{margin:0 0 24px;line-height:1.5}
.gate-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================ INTERMEDIO (900–1100) */
@media (max-width:1099px){
  .hdr{padding:24px 32px}
  .door{padding:40px 32px 84px}
  .about{padding-right:32px}
  .abrow{grid-template-columns:1fr 1fr;column-gap:5%;row-gap:40px}
  .svcs{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:5%}
  .svcs .clist{margin-top:0}
}

/* ================================================================ MÓVIL */
@media (max-width:899px){
  .topbar{position:fixed;top:0;left:0;right:0;height:56px;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--bg)}
  .tb-name{font-weight:700;font-size:18px;letter-spacing:-.04em;text-transform:uppercase}
  .tb-menu{font-size:14px;font-weight:500;text-transform:uppercase;padding:12px 0 12px 16px}
  .side{inset:0;width:auto;padding:88px 24px 32px;z-index:50;transform:translateY(-100%);visibility:hidden;transition:transform .55s var(--ease),visibility 0s .55s}
  body.menu-open .side{transform:none;visibility:visible;transition-delay:0s}
  body.menu-open{overflow:hidden}
  .side .name,.side .mark-top{display:none}
  .nav{margin-top:0;font-size:18px}
  .sub a{font-size:15px;padding:5px 0 5px 18px}
  .grp2 .lang{font-size:16px}
  .view{margin-left:0;padding-top:56px}
  .tabs{display:flex;gap:22px;padding:8px 16px 14px;overflow-x:auto;scrollbar-width:none;font-size:13px;text-transform:uppercase;letter-spacing:.01em}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{white-space:nowrap;padding:6px 0}
  .tabs a.on{color:var(--redtx);font-weight:700;text-decoration:underline;text-underline-offset:4px}
  body[data-page="about"] .mark-c-top,body[data-page="contact"] .mark-c-top{display:none}
  .cov{margin:8px 16px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cov::before{display:none}
  .cov .cv,.cov[data-a] .cv{position:relative;left:auto;top:auto;width:auto;height:auto;aspect-ratio:3/4}
  .cov .cv-t,.cov .cv.on .cv-t{top:50%;transform:translateY(-50%)}
  .cv-tx{font-size:min(6.2cqw,calc(40cqw/var(--em)))}
  .about{padding:32px 16px 120px}
  .bio{font-size:clamp(26px,7vw,36px)}
  .abrow{grid-template-columns:1fr;row-gap:36px}
  .portrait{max-width:343px}
  .svcs{display:block}
  .svcs .clist{margin-top:40px}
  .hl{margin-top:36px}
  .contact{padding:72px 16px 120px}
  .cinfo{margin-top:40px}
  .mark-c-bot{bottom:32px}

  .stage{min-height:480px}
  .doors{flex-direction:column}
  .door{padding:24px 20px;align-items:flex-end}
  .d2{padding-bottom:88px}
  .ttl{font-size:clamp(38px,11vw,56px)}
  .hdr{padding:18px 16px}
  .hdr-mark,.year{display:none}
  .hdr-nav{gap:14px;font-size:13px}
  .hdr-nav a{display:none}
  .ftr-nav{display:flex}
  .ftr-mark{bottom:22px}

  .lb-name{top:18px;left:16px;font-size:18px}
  .lb-mt{display:none}
  .lb-close{top:18px;right:16px}
  .lb-nav{top:auto;bottom:24px;right:auto;left:50%;transform:translateX(-50%)}
  .lb-mb{display:none}
  .lb-stage{top:64px;bottom:96px}
}

@media (prefers-reduced-motion:reduce){
  #home.run .door,#home.run .ttl,#home.run .chrome,.cv,.view.enter{animation:none}
  #home.run .door{animation:fadein .6s ease both}
  .door,.sc,.door .ph,.cv,.cv-bg,.cv-t,.cv-tx,.sub,.it,.it .im,.side{transition:none}
  .it{opacity:1;transform:none}
  .slide.on img,.slide.prev img,.cv-bg img{animation:none}
  .slide{transition:opacity .6s ease}
  .lb-frame.swap{animation:fadein .25s ease both}
}

/* círculo que acompaña al cursor (solo con mouse) */
.cdot{position:fixed;left:0;top:0;width:44px;height:44px;pointer-events:none;z-index:9999;opacity:0;will-change:transform;--s:.27;transition:opacity .25s ease}
.cdot::before{content:"";position:absolute;inset:0;border-radius:50%;background:#fa9a36;transform:scale(var(--s));transition:transform .32s cubic-bezier(.22,1,.36,1)}
.cdot.on{opacity:1}
.cdot.big{--s:1}
@media (hover:none),(pointer:coarse){.cdot{display:none}}

/* portada con imagen: texto blanco y velo suave para que se lea */
.cv.has-img{--ink:#fff}
.cv.has-img .cv-t{color:#fff}
.cv.has-img::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(24,14,8,.28);pointer-events:none;transition:background .5s ease}
.cv.has-img.on .cv-t{color:var(--red)}   /* activo: el texto se tiñe de rojo también sobre imagen */