/* ============================================================
   FINE STUDIO — Sistema compartido (design system)
   Tipografía Helvetica Neue · ver design-system.html
   ============================================================ */
:root{
  --white:#fff; --bg:#fcfcfb; --ink:#0a0a0a; --warm:#8D8887;
  --line:rgba(0,0,0,.12); --line2:rgba(0,0,0,.07); --ph:#ededeb;
  /* escala tipográfica */
  --fs-display:clamp(34px,5.6vw,88px);  --lh-display:1.0;  --tr-display:-.04em;
  --fs-heading:clamp(24px,3vw,40px);    --lh-heading:1.05; --tr-heading:-.02em;
  --fs-h3:clamp(18px,1.7vw,26px);       --lh-h3:1.12;      --tr-h3:-.01em;
  --fs-h4:clamp(15px,1.2vw,18px);       --lh-h4:1.2;       --tr-h4:0;
  --fs-h5:13px;                         --lh-h5:1.2;       --tr-h5:.06em;
  --fs-lead:clamp(22px,2.5vw,40px);     --lh-lead:1.1;     --tr-lead:-.02em;
  --fs-body:14px;                       --lh-body:1.6;
  --fs-label:11px;                      --lh-label:1;      --tr-label:.2em;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.28) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.28);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.45)}
body{font-family:'Helvetica Neue','Helvetica',Arial,sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{width:97%;max-width:none;margin:0 auto}

/* ---- utilidades de tipografía ---- */
.t-display{font-size:var(--fs-display);font-weight:600;line-height:var(--lh-display);letter-spacing:var(--tr-display);text-transform:uppercase}
.t-h2{font-size:var(--fs-heading);font-weight:600;line-height:var(--lh-heading);letter-spacing:var(--tr-heading);text-transform:uppercase}
.t-h3{font-size:var(--fs-h3);font-weight:600;line-height:var(--lh-h3);letter-spacing:var(--tr-h3);text-transform:uppercase}
.t-h4{font-size:var(--fs-h4);font-weight:600;line-height:var(--lh-h4);letter-spacing:var(--tr-h4);text-transform:uppercase}
.t-h5{font-size:var(--fs-h5);font-weight:600;line-height:var(--lh-h5);letter-spacing:var(--tr-h5);text-transform:uppercase}
.t-lead{font-size:var(--fs-lead);font-weight:500;line-height:var(--lh-lead);letter-spacing:var(--tr-lead)}
.t-body{font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body)}
.t-label{font-size:var(--fs-label);font-weight:500;line-height:var(--lh-label);letter-spacing:var(--tr-label);text-transform:uppercase}

/* ---- botones (cuadrados) ---- */
.btn{display:inline-block;border:1px solid var(--ink);background:transparent;color:var(--ink);
  padding:15px 32px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--tr-label);
  text-transform:uppercase;cursor:pointer;transition:.25s}
.btn:hover{background:var(--ink);color:#fff}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--warm);border-color:var(--warm)}
.btn-light{border-color:rgba(255,255,255,.6);color:#fff}
.btn-light:hover{background:#fff;color:#000;border-color:#fff}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:100;background:rgba(252,252,251,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line2)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo img{height:20px;display:block}
.navlinks{display:flex;gap:34px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:#555}
.navlinks a{position:relative;transition:color .2s}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--ink)}
.nav-cta{border:1px solid var(--ink);padding:11px 22px;font-size:var(--fs-label);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;transition:.25s}
.nav-cta:hover{background:var(--ink);color:#fff}
/* logo + menú móvil */
.logo .logo-star{display:none}
.nav-burger{display:none;background:none;border:none;cursor:pointer;width:30px;height:22px;position:relative;padding:0}
.nav-burger span{display:block;width:24px;height:1.5px;background:var(--ink);position:absolute;left:3px;transition:.3s}
.nav-burger span:nth-child(1){top:7px}
.nav-burger span:nth-child(2){bottom:7px}
nav.menu-open .nav-burger span:nth-child(1){top:10px;transform:rotate(45deg)}
nav.menu-open .nav-burger span:nth-child(2){bottom:10px;transform:rotate(-45deg)}
.nav-menu{display:none;flex-direction:column}
@media(max-width:820px){
  .navlinks{display:none}
  .nav-cta{display:none}
  .nav-burger{display:block}
  .logo .logo-full{display:none}
  .logo .logo-star{display:block;height:28px}
  .nav-menu{display:flex;position:fixed;top:80px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line2);
    padding:16px 0 24px;transform:translateY(-130%);transition:transform .45s cubic-bezier(.76,0,.24,1);z-index:99}
  nav.menu-open .nav-menu{transform:translateY(0)}
  .nav-menu a{padding:16px 7%;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
}

/* ---- encabezado de página ---- */
.page-head{padding:90px 0 70px}
.page-head .eyebrow{color:var(--warm);margin-bottom:22px}
.page-head h1{color:var(--ink)}
.page-head .lead{color:#5a5755;max-width:32ch;margin-top:28px}

/* ---- placeholder de imagen ---- */
.ph{position:relative;background:radial-gradient(120% 120% at 30% 20%,#f2f2f0 0%,#e9e9e6 55%,#e0e0dc 100%);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.ph .lab{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#b0b0ad}
.ph img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============================================================
   FOOTER (mejorado, compartido)
   ============================================================ */
footer{background:#0c0c0c;color:var(--warm);padding:110px 0 40px;margin-top:0}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:start;
  padding-bottom:64px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-cta{display:block;color:#fff}
.foot-cta .eyebrow{display:block;color:var(--warm);margin-bottom:18px}
.foot-cta .big{display:flex;align-items:center;gap:.4em;transition:gap .3s}
.foot-cta:hover .big{gap:.7em}
.foot-cta .arrow{font-weight:300}
.foot-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.foot-contact-grid .ch{display:block;color:#5a5a5a;margin-bottom:14px}
.foot-contact-grid p{font-size:13px;line-height:1.7;color:var(--warm);letter-spacing:.02em}
.foot-contact-grid a:hover{color:#fff}
.foot-nav{display:flex;gap:48px 70px;padding:54px 0 70px;flex-wrap:wrap}
.foot-nav .col-h{display:block;color:#4a4a4a;margin-bottom:20px}
.foot-nav .col a{display:block;font-size:13px;letter-spacing:.03em;color:var(--warm);margin-bottom:12px;transition:color .2s}
.foot-nav .col a:hover{color:#fff}
.foot-mark img{width:100%;display:block;opacity:.92;filter:invert(1)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:34px;gap:12px 30px;flex-wrap:wrap}
.foot-bottom span,.foot-bottom a{color:#4a4a4a}
.foot-bottom a:hover{color:#fff}
@media(max-width:820px){
  .foot-top{grid-template-columns:1fr;gap:40px}
  .foot-contact-grid{gap:24px}
}

/* ============================================================
   COMPONENTES DE PÁGINA
   ============================================================ */
section.pad{padding:90px 0}

/* formularios (book + contact) */
.form-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:72px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--warm);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#fff;height:48px;
  padding:0 14px;font-family:inherit;font-size:14px;color:var(--ink);transition:border-color .2s}
.field textarea{height:120px;padding:14px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-aside .ch{display:block;color:var(--warm);margin-bottom:14px}
.form-aside p{font-size:14px;line-height:1.8;color:#5a5755;margin-bottom:22px}
.form-aside p b{color:var(--ink);font-weight:600}
.form-aside .ph{aspect-ratio:4/3;margin-top:8px}

/* grid de artistas */
.artist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 24px}
.artist .ph{aspect-ratio:3/4;margin-bottom:16px;transition:filter .3s}
.artist:hover .ph{filter:brightness(.95)}
.artist .name{font-size:var(--fs-h4);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.artist .role{font-size:13px;color:var(--warm);margin-top:7px}
.artist .h{font-size:12px;color:#b3afae;margin-top:3px}

/* grid de trabajos */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.work-cell{cursor:pointer}
.work-cell .ph{aspect-ratio:4/5}
.work-cell .ph::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .4s;z-index:2}
.work-cell:hover .ph::after{background:rgba(0,0,0,.35)}
.work-cell .hover-label{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .35s;color:#fff;font-size:14px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.work-cell:hover .hover-label{opacity:1}

/* acordeón (FAQ) */
.acc-item{border-top:1px solid var(--line);}
.acc-item:last-child{border-bottom:1px solid var(--line)}
.acc-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 0;color:var(--ink)}
.acc-q .qt{font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--tr-h3);text-transform:uppercase}
.acc-q .ic{font-size:24px;font-weight:300;transition:transform .3s;flex:0 0 auto}
.acc-item.open .acc-q .ic{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.acc-a p{font-size:15px;line-height:1.8;color:#5a5755;max-width:70ch;padding-bottom:30px}

/* pasos de aftercare */
.care-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2)}
.care-step{background:var(--bg);padding:40px 36px}
.care-step .num{font-size:var(--fs-label);letter-spacing:.2em;color:var(--warm)}
.care-step h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--tr-h3);text-transform:uppercase;margin:16px 0 14px}
.care-step p{font-size:14px;line-height:1.7;color:#5a5755}

/* dos columnas genérico (intro + media) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .ph{aspect-ratio:4/5}
@media(max-width:820px){
  .form-grid,.split{grid-template-columns:1fr;gap:40px}
  .artist-grid,.work-grid,.care-grid{grid-template-columns:1fr}
}

/* ============================================================
   TRANSICIÓN DE PÁGINA (cortina blanca top→bottom)
   ============================================================ */
.pt{position:fixed;inset:0;background:#fff;z-index:9999;pointer-events:none;transform:translateY(0);
  display:flex;align-items:center;justify-content:center;
  animation:pt-reveal 1.2s cubic-bezier(.76,0,.24,1) forwards}
.pt-logo{width:clamp(60px,6.5vw,96px);height:auto}
@keyframes pt-reveal{from{transform:translateY(0)}to{transform:translateY(100%)}}
.pt.cover{animation:pt-cover .9s cubic-bezier(.76,0,.24,1) forwards}
@keyframes pt-cover{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.pt{display:none}}

/* ============================================================
   TEXT REVEAL — palabra por palabra (títulos) y línea por línea (textos)
   ============================================================ */
.aw{display:inline-block;vertical-align:top}
.awi{display:inline-block;transform:translateY(.6em);filter:blur(10px);opacity:0;
  transition:transform .9s cubic-bezier(.33,1,.68,1),filter .9s ease,opacity .8s ease}
.in-words .awi{transform:none;filter:none;opacity:1}
.al{display:block}
.ali{display:inline-block;transform:translateY(.5em);filter:blur(10px);opacity:0;
  transition:transform .9s cubic-bezier(.33,1,.68,1),filter .9s ease,opacity .8s ease}
.in-lines .ali{transform:none;filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){.awi,.ali{transform:none;filter:none;opacity:1}}

/* ============================================================
   PARALLAX DE IMÁGENES (movimiento sutil al scroll)
   ============================================================ */
.ph img.photo.par{top:-9%;height:118%;bottom:auto;will-change:transform}
@media(prefers-reduced-motion:reduce){.ph img.photo.par{top:0;height:100%;transform:none!important}}