/* Islandia Estudio — estilos del sitio
   Identidad: papel cálido y tinta para leer; salas en oscuro para que las fotos
   (luz cálida, lámparas, válvulas) brillen. Fraunces para títulos, Manrope para texto.
   Las secciones con scroll animado usan --p (0 a 1) que calcula js/scroll.js. */
:root{
  --ink:#1c1d1f;
  --ink-2:#4a4c50;
  --ink-3:#7a7c80;
  --paper:#f6f3ee;
  --paper-2:#ece7df;
  --white:#fffdfa;
  --night:#121315;
  --night-2:#1b1c1f;
  --glow:#e9b872;          /* luz de lámpara de las fotos */
  --on-night:#efe9df;
  --on-night-2:rgba(239,233,223,.62);
  --cyan:#1a9bc4;
  --cyan-2:#137fa1;
  --cyan-soft:#e4f2f7;
  --ok:#2e7d55;
  --line:rgba(28,29,31,.12);
  --line-night:rgba(239,233,223,.14);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
  --radius:14px;
  --header:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
[id]{scroll-margin-top:calc(var(--header) + 16px)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,140px)}
.section.tight{padding-block:clamp(56px,7vw,96px)}

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0;text-wrap:balance;font-optical-sizing:auto}
h1{font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1.0;letter-spacing:-.025em}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.15}
.h3{font-size:clamp(1.7rem,2.6vw,2.2rem)}
p{margin:0}
.lead{font-size:clamp(1.05rem,1.35vw,1.22rem);color:var(--ink-2);max-width:60ch}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-2)}
.stack{display:flex;flex-direction:column;gap:18px}
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(36px,5vw,64px)}
.center{text-align:center;align-items:center}
.center .lead{margin-inline:auto}

/* Secciones oscuras */
.night{background:var(--night);color:var(--on-night)}
.night h1,.night h2,.night h3{color:var(--on-night)}
.night .lead,.night p{color:var(--on-night-2)}
.night .eyebrow{color:var(--glow)}

/* Botones */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;border:1.5px solid var(--ink);font:600 .86rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--ink);color:var(--white)}
.btn-primary{background:var(--cyan);border-color:var(--cyan);color:#fff}
.btn-primary:hover{background:var(--cyan-2);border-color:var(--cyan-2)}
.night .btn{border-color:var(--on-night);color:var(--on-night)}
.night .btn:hover{background:var(--on-night);color:var(--night)}
.night .btn-primary{border-color:var(--cyan);color:#fff}
.night .btn-primary:hover{background:var(--cyan-2);border-color:var(--cyan-2);color:#fff}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,243,238,.9);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header)}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:40px;width:auto}
@media (max-width:480px){.brand img{height:34px}}
.wordmark{font-family:var(--serif);font-style:italic;font-size:1.6rem;letter-spacing:-.02em;color:var(--cyan-2)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-weight:600;font-size:.93rem;color:var(--ink-2)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links .btn{padding:11px 20px;font-size:.78rem;color:var(--ink)}
.nav-links .btn:hover{color:var(--white)}
.menu-btn{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer;color:var(--ink)}
.menu-btn span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;transition:transform .25s,opacity .2s}
@media (max-width:1000px){
  .menu-btn{display:block}
  .nav-links{position:fixed;inset:var(--header) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gutter) 24px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .nav-links a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav-links li:last-child a{border:1.5px solid var(--ink);margin-top:18px;text-align:center;padding:15px}
  .nav-open .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-open .menu-btn span:nth-child(2){opacity:0}
  .nav-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- Home: apertura ---------- */
.opening{padding-block:clamp(48px,8vw,110px) clamp(28px,4vw,48px)}
.opening .wrap{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.opening h1{max-width:15ch}
.creds{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.creds b{color:var(--cyan-2);font-weight:700}

/* La foto que se abre a pantalla completa al bajar */
.grow{position:relative;height:210vh}
.grow-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid}
.grow-media{grid-area:1/1;position:relative;overflow:hidden;
  clip-path:inset(0px calc((1 - var(--p,0)) * max(var(--gutter), (100vw - var(--wrap)) / 2 + var(--gutter))) calc((1 - var(--p,0)) * 22vh) round calc((1 - var(--p,0)) * 22px));
  will-change:clip-path}
.grow-media img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - var(--p,0) * .14));transform-origin:50% 40%;will-change:transform}
.grow-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,19,21,0) 40%,rgba(18,19,21,.75));opacity:var(--p,0)}
.grow-caption{grid-area:1/1;align-self:end;justify-self:center;width:100%;max-width:var(--wrap);padding:0 var(--gutter) clamp(40px,8vh,80px);color:#fff;
  opacity:clamp(0, calc((var(--p,0) - .55) * 3.5), 1);transform:translateY(calc((1 - clamp(0, calc((var(--p,0) - .55) * 3.5), 1)) * 24px))}
.grow-caption h2{color:#fff;max-width:16ch}
.grow-caption p{color:rgba(255,255,255,.8);margin-top:12px;font-size:1.05rem}

/* Manifiesto con palabras que se encienden */
.manifesto{padding-block:clamp(100px,16vw,200px)}
.manifesto p.big{font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3.7rem);line-height:1.14;letter-spacing:-.018em;color:var(--on-night);max-width:22ch}
.manifesto .w{transition:opacity .25s linear,color .25s linear}
.js-motion .manifesto .w{opacity:.16}
.js-motion .manifesto .w.on{opacity:1}
.manifesto .w.hl.on{color:var(--glow)}
.manifesto .sub{margin-top:clamp(28px,4vw,44px);max-width:52ch}

/* Salas: texto que pasa y foto fija que cambia */
.rooms-scroll{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px)}
.rooms-text{display:flex;flex-direction:column}
.room-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding-block:6vh;opacity:.35;transition:opacity .5s}
.room-step.active{opacity:1}
.room-step .tag{font-family:var(--serif);font-size:clamp(3.5rem,7vw,6rem);line-height:.9;color:var(--glow);font-style:italic}
.room-step p{max-width:42ch}
.room-step img{display:none}
.rooms-pics{position:sticky;top:calc(var(--header) + 4vh);height:calc(100vh - var(--header) - 8vh);align-self:start;border-radius:18px;overflow:hidden;background:var(--night-2)}
.rooms-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.rooms-pics img.active{opacity:1;transform:none}
.rooms-pics .label{position:absolute;left:20px;bottom:18px;z-index:2;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(18,19,21,.55);padding:8px 12px;border-radius:999px;backdrop-filter:blur(6px)}
@media (max-width:880px){
  .rooms-scroll{grid-template-columns:1fr}
  .rooms-pics{display:none}
  .room-step{min-height:0;opacity:1;padding-block:28px;border-top:1px solid var(--line-night)}
  .room-step img{display:block;border-radius:12px;aspect-ratio:3/2;object-fit:cover;width:100%;margin-bottom:6px}
}

/* Tira horizontal de detalles */
.strip{position:relative}
.strip-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,40px);overflow:hidden}
.strip-track{display:flex;gap:16px;padding-inline:var(--gutter);will-change:transform;width:max-content}
.strip-track figure{margin:0;flex:none;height:min(52vh,500px);border-radius:12px;overflow:hidden;background:var(--night-2)}
.strip-track img{height:100%;width:auto;object-fit:cover}
.strip-progress{height:2px;background:var(--line-night);margin-inline:var(--gutter);max-width:var(--wrap);position:relative;overflow:hidden}
.strip-progress i{position:absolute;inset:0;background:var(--glow);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.strip.static .strip-sticky{position:static;height:auto;padding-block:clamp(64px,9vw,120px)}
.strip.static .strip-track{overflow-x:auto;width:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.strip.static .strip-track figure{scroll-snap-align:start;height:min(52vh,420px)}
.strip.static .strip-progress{display:none}

/* Cifras */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.figure{display:flex;flex-direction:column;gap:6px;border-top:1.5px solid var(--ink);padding-top:18px}
.figure b{font-family:var(--serif);font-weight:500;font-size:clamp(2.8rem,5vw,4.4rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.figure span{color:var(--ink-2);font-size:.95rem}
@media (max-width:760px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Servicios */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.split .sticky{position:sticky;top:calc(var(--header) + 32px);display:flex;flex-direction:column;gap:18px}
@media (max-width:880px){.split .sticky{position:static}}
.reel{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#141414;box-shadow:0 34px 70px -34px rgba(28,29,31,.55);max-width:100%;max-height:68vh}
.reel video{width:100%;height:100%;object-fit:cover}
.split .reel{width:min(100%,340px);margin-top:10px}
@media (max-width:880px){.split .reel{aspect-ratio:4/5;width:100%;max-width:420px}}
.services{list-style:none;margin:0;padding:0}
.services li{display:grid;gap:8px;padding:28px 0;border-top:1px solid var(--line)}
.services li:last-child{border-bottom:1px solid var(--line)}
.services h3{font-size:clamp(1.3rem,1.8vw,1.6rem)}
.services p{color:var(--ink-2)}
.services .online{background:var(--cyan-soft);border-radius:var(--radius);padding:28px;border-top:0;margin-top:14px}
.services .online a{font-weight:700;color:var(--cyan-2);text-decoration:none}
.services .online a:hover{text-decoration:underline}

/* Portfolio */
.highlight{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;padding:22px 26px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);margin-bottom:clamp(28px,4vw,44px)}
.highlight .badge{font-family:var(--serif);font-size:1rem;line-height:1.15;text-align:center;color:#fff;background:var(--ink);border-radius:999px;width:92px;height:92px;display:grid;place-items:center;padding:10px}
.highlight p{color:var(--ink-2)}
.highlight strong{color:var(--ink)}
@media (max-width:520px){.highlight{grid-template-columns:1fr}}
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
@media (max-width:820px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.works{grid-template-columns:1fr}}
.work{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink)}
.work .thumb{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--ink)}
.work img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s}
.work:hover img{transform:scale(1.03);filter:saturate(1.1)}
.work .play{position:absolute;left:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:rgba(255,253,250,.92);display:grid;place-items:center}
.work .play::before{content:"";border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.work span{font-weight:600;font-size:.97rem}
.work small{display:block;font-weight:500;color:var(--ink-3);font-size:.86rem}

/* Equipo (adelanto en la home) */
.team-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,320px);gap:clamp(36px,6vw,96px);align-items:center}
@media (max-width:767px){.team-teaser{grid-template-columns:1fr}.team-teaser .reel{aspect-ratio:4/5;width:100%;max-width:420px}}

/* Contacto */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,80px);align-items:center}
.contact-list{display:grid;gap:22px;margin:8px 0 0}
.contact-list dt{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.contact-list dd{margin:0;font-size:1.15rem}
.contact-list a{text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:4px;text-decoration-thickness:1.5px}
.contact-list a:hover{color:var(--cyan-2)}
.contact-img{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:var(--paper-2)}
.contact-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.contact{grid-template-columns:1fr}.contact-img{aspect-ratio:3/2}}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding-block:36px;font-size:.88rem;color:var(--ink-3)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.site-footer img{height:28px;width:auto}
.site-footer nav{display:flex;flex-wrap:wrap;gap:18px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--ink)}

/* ---------- Página Equipo ---------- */
.page-head{padding-block:clamp(48px,8vw,100px) clamp(32px,5vw,56px)}
.page-head h1{max-width:14ch}
.person{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--line);align-items:center}
.person:nth-child(even) .photo{order:2}
.person .photo{border-radius:14px;overflow:hidden;aspect-ratio:3/2;background:var(--paper-2)}
.person .photo img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.08 - var(--p,1) * .08));will-change:transform}
.person .info{display:flex;flex-direction:column;gap:14px;min-width:0;max-width:62ch}
.person .role{font-style:italic;color:var(--ink-2);font-family:var(--serif);font-size:1.1rem}
.person .areas{font-size:.78rem;font-weight:700;letter-spacing:.16em;color:var(--cyan-2)}
.person p{color:var(--ink-2)}
.person .genres{font-size:.92rem;color:var(--ink-3)}
.person .genres b{display:block;font-weight:700;color:var(--ink-2);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
@media (max-width:760px){.person{grid-template-columns:1fr}.person:nth-child(even) .photo{order:0}}
.cta-band{background:var(--night);color:var(--on-night);border-radius:20px;padding:clamp(32px,5vw,64px);display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.cta-band h2{color:var(--on-night)}
.cta-band p{color:var(--on-night-2);max-width:52ch;margin-top:12px}
.cta-band .btn{border-color:var(--on-night);color:var(--on-night)}
.cta-band .btn:hover{background:var(--on-night);color:var(--night)}
.cta-band .btn-primary{border-color:var(--cyan);color:#fff}
.cta-band .btn-primary:hover{background:var(--cyan-2);border-color:var(--cyan-2);color:#fff}

/* ---------- Página Mezcla online ---------- */
.mix-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:clamp(36px,6vw,96px);align-items:center;padding-block:clamp(48px,8vw,110px)}
.mix-hero .copy{display:flex;flex-direction:column;gap:26px;min-width:0}
@media (max-width:767px){.mix-hero{grid-template-columns:1fr}.mix-hero .reel{aspect-ratio:4/5;width:100%;max-width:420px}}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);counter-reset:step;position:relative}
.steps li{display:flex;flex-direction:column;gap:12px;counter-increment:step}
.steps li::before{content:counter(step);font-family:var(--serif);font-size:1.15rem;color:#fff;background:var(--cyan);width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
.steps h3{font-size:1.3rem}
.steps p{color:var(--ink-2);font-size:.97rem}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.photo-band{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:clamp(40px,6vw,72px)}
.photo-band img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.photo-band img:first-child{aspect-ratio:auto}
@media (max-width:700px){.photo-band{grid-template-columns:1fr 1fr}.photo-band img:first-child{grid-column:1/-1;aspect-ratio:3/2}}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,56px)}
.faq details{border-top:1px solid var(--line);padding-block:20px}
.faq summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:1.25rem;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan);font-family:var(--sans);font-weight:600;font-size:1.4rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);margin-top:10px;max-width:60ch}
@media (max-width:760px){.faq{grid-template-columns:1fr}}

/* Cotizador */
.cot{max-width:780px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,4vw,36px);box-shadow:0 18px 50px -24px rgba(28,29,31,.25)}
.cot .f{margin-bottom:24px}
.cot .l{display:block;font-weight:700;margin-bottom:10px}
.cot .h{font-size:.88rem;color:var(--ink-3);margin-top:8px;line-height:1.5}
.cot .seg{display:flex;flex-wrap:wrap;gap:8px}
.cot .seg button{flex:1 1 auto;min-width:120px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);font:500 .95rem var(--sans);cursor:pointer;transition:all .15s}
.cot .seg button:hover{border-color:var(--cyan)}
.cot .seg button[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#fff}
.cot .st{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cot .st button{width:46px;height:46px;border:0;background:var(--paper);font-size:20px;cursor:pointer;color:var(--ink)}
.cot .st button:hover{background:var(--paper-2)}
.cot .st input{width:64px;height:46px;border:0;text-align:center;font:600 1.1rem var(--sans);color:var(--ink);background:var(--white);-moz-appearance:textfield;appearance:textfield}
.cot .st input::-webkit-inner-spin-button,.cot .st input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cot .ck{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin-bottom:9px}
.cot .ck input{width:18px;height:18px;margin-top:4px;accent-color:var(--cyan);flex:none}
.cot .sub{margin:4px 0 10px 28px}
.cot .r{border-top:1px solid var(--line);margin-top:8px;padding-top:24px}
.cot .ln{display:flex;justify-content:space-between;gap:12px;padding:4px 0;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cot .ln.d{color:var(--ok)}
.cot .tot{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:12px;font-weight:700;font-size:1.5rem;font-variant-numeric:tabular-nums}
.cot .tot small{font-size:.9rem;font-weight:500;color:var(--ink-3)}
.cot .nt{background:var(--cyan-soft);border-left:3px solid var(--cyan);padding:11px 14px;margin-top:14px;font-size:.93rem;border-radius:4px}
.cot .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.cot .cta .btn{flex:1 1 220px}
.cot .fine{font-size:.84rem;color:var(--ink-3);margin-top:18px;line-height:1.55}
@media (max-width:479px){.cot .seg button{min-width:0;flex:1 1 40%;padding:12px 8px}}

.notfound{min-height:60vh;display:flex;align-items:center}

/* Aparición suave al entrar en pantalla */
.js-motion .rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js-motion .rv.in{opacity:1;transform:none}

/* Sin animaciones: todo queda fijo y legible */
.no-motion .grow{height:auto}
.no-motion .grow-sticky{position:relative;height:auto;padding:0 var(--gutter)}
.no-motion .grow-media{clip-path:none;border-radius:18px;max-width:var(--wrap);margin:0 auto;width:100%;aspect-ratio:16/9}
.no-motion .grow-media img{transform:none}
.no-motion .grow-media::after{opacity:1}
.no-motion .grow-caption{opacity:1;transform:none;position:absolute;inset:auto 0 0 0;margin:0 auto}

.pos-low{object-position:50% 72%}

/* Portfolio: trabajo destacado y etiquetas */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,48px);align-items:center;text-decoration:none;color:var(--ink);margin-bottom:clamp(36px,5vw,56px)}
.feature .thumb{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--ink)}
.feature img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.feature:hover img{transform:scale(1.03)}
.feature .play{position:absolute;left:16px;bottom:16px;width:52px;height:52px;border-radius:50%;background:rgba(255,253,250,.92);display:grid;place-items:center}
.feature .play::before{content:"";border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.feature .txt{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.feature .badge{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--ink);padding:7px 12px;border-radius:999px}
.feature p{color:var(--ink-2)}
.feature small{color:var(--ink-3);font-size:.88rem}
@media (max-width:760px){.feature{grid-template-columns:1fr}}
.work .tag{position:absolute;top:10px;left:10px;font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--cyan);color:#fff;padding:5px 9px;border-radius:999px}

/* Live sessions */
.lives{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.lives .big{grid-column:span 2;grid-row:span 2}
.lives .big .thumb{aspect-ratio:auto;flex:1;min-height:260px}
.lives .big span{font-size:1.15rem}
.night .work{color:var(--on-night)}
.night .work small{color:var(--on-night-2)}
@media (max-width:900px){.lives{grid-template-columns:repeat(2,minmax(0,1fr))}.lives .big{grid-row:auto}.lives .big .thumb{aspect-ratio:16/9;min-height:0}}
@media (max-width:480px){.lives{grid-template-columns:1fr}.lives .big{grid-column:auto}}

/* Mezcla online: foto de apertura y contacto breve */
.mix-hero{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.mix-photo{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2);box-shadow:0 34px 70px -40px rgba(28,29,31,.55)}
.mix-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.mix-hero{grid-template-columns:1fr}.mix-photo{aspect-ratio:3/2}}
.faq details a{color:var(--cyan-2);font-weight:600}
.contact-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px}
.contact-line p{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:1.1rem}
.contact-line a{text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:4px;text-decoration-thickness:1.5px}
.contact-line span{color:var(--ink-3)}