/* ==========================================================================
   NINILY STUDIO — Design System
   Style: Exaggerated Minimalism + Editorial Grid
   Type:  Syne (display) / Manrope (body) / JetBrains Mono (labels)
   ========================================================================== */

/* ---------- 1. PRIMITIVE TOKENS ---------- */
:root{
  /* Cherry Cola — wine/burgundy, dark base */
  --raw-wine-900:#47131C;
  --raw-wine-700:#5C1B26;
  --raw-wine-600:#9C2A3D;
  --raw-wine-500:#B23B4E;
  --raw-rose-300:#FF9FB3;

  /* Lemon Soda — cream base */
  --raw-cream-50:#FFFDE9;
  --raw-cream-100:#FBF3D0;
  --raw-cream-200:#F3E3AE;
  --raw-paper-white:#FFFFF7;

  /* Cotton Candy — soft pink */
  --raw-pink-400:#FFD7E7;
  --raw-pink-600:#F5AFC9;

  --raw-line-300:#EADFC0;

  --raw-space-1:.4rem;
  --raw-space-2:.8rem;
  --raw-space-3:1.2rem;
  --raw-space-4:1.6rem;
  --raw-space-5:2.4rem;
  --raw-space-6:3.2rem;
  --raw-space-7:4.8rem;
  --raw-space-8:6.4rem;
  --raw-space-9:9.6rem;

  --raw-radius-sm:6px;
  --raw-radius-md:14px;
  --raw-radius-lg:28px;
  --raw-radius-pill:999px;
}

/* ---------- 2. SEMANTIC TOKENS ---------- */
:root{
  --color-ink:var(--raw-wine-900);
  --color-ink-soft:var(--raw-wine-700);
  --color-cream:var(--raw-cream-50);
  --color-cream-alt:var(--raw-cream-100);
  --color-paper:var(--raw-paper-white);
  --color-accent:var(--raw-wine-600);
  --color-accent-dark:var(--raw-wine-700);
  --color-accent-light:var(--raw-rose-300);
  --color-clay:var(--raw-pink-400);
  --color-clay-deep:var(--raw-pink-600);
  --color-sand:var(--raw-cream-200);
  --color-border:var(--raw-line-300);
  --color-border-dark:rgba(255,253,233,0.16);

  --color-bg:var(--color-cream);
  --color-fg:var(--color-ink);
  --color-fg-muted:#8A6660;
  --color-fg-on-dark:var(--color-cream);
  --color-fg-on-dark-muted:#DDB3BB;

  --font-display:'Playfair Display', serif;
  --font-script:'Beau Rivage', cursive;
  --font-body:'Manrope', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --space-xs:var(--raw-space-2);
  --space-sm:var(--raw-space-3);
  --space-md:var(--raw-space-5);
  --space-lg:var(--raw-space-7);
  --space-xl:var(--raw-space-8);
  --space-2xl:var(--raw-space-9);

  --radius-card:var(--raw-radius-lg);
  --radius-chip:var(--raw-radius-pill);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --container:1360px;
  --edge:clamp(1.5rem, 5vw, 4.5rem);
}

/* ---------- 3. COMPONENT TOKENS ---------- */
:root{
  --btn-bg:var(--color-ink);
  --btn-fg:var(--color-cream);
  --btn-bg-hover:var(--color-accent);
  --card-bg:var(--color-paper);
  --card-border:var(--color-border);
  --nav-height:112px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; font-size:16px;}
body{
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-fg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .6s var(--ease-soft), color .6s var(--ease-soft);
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; background:none; border:none; cursor:pointer; color:inherit;}
ul{list-style:none;}
input,textarea{font:inherit; color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; line-height:1.08; letter-spacing:-0.01em;}
em{font-style:italic; color:var(--color-accent);}
::selection{background:var(--color-accent); color:var(--color-cream);}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- LAYOUT HELPERS ---------- */
section{padding:var(--space-2xl) var(--edge);}
.section-head{max-width:900px; margin-bottom:var(--space-lg);}
.section-head--dark{color:var(--color-cream);}
.section-tag{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-fg-muted); margin-bottom:var(--space-sm);
}
.section-head--dark .section-tag{color:var(--color-fg-on-dark-muted);}
.section-tag__num{color:var(--color-accent); font-weight:600;}
.section-title{font-size:clamp(2.4rem, 5.4vw, 4.6rem); margin-bottom:var(--space-sm);}
.section-lede{font-size:clamp(1rem,1.6vw,1.2rem); color:var(--color-fg-muted); max-width:640px;}
.section-head--dark .section-lede{color:var(--color-fg-on-dark-muted);}

.dot{width:8px; height:8px; border-radius:50%; background:var(--color-accent); display:inline-block;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.7rem; border-radius:var(--radius-chip);
  font-family:var(--font-body); font-weight:700; font-size:.98rem;
  transition:transform .3s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out);
  white-space:nowrap;
}
.btn svg{width:18px; height:18px; transition:transform .3s var(--ease-out);}
.btn--primary{background:var(--btn-bg); color:var(--btn-fg);}
.btn--primary:hover{background:var(--color-accent); transform:translateY(-3px);}
.btn--primary:hover svg{transform:translateX(3px);}
.btn--ghost{border:1.5px solid var(--color-fg); color: var(--color-fg);}
.section-head--dark ~ .btn--ghost, .quote .btn--ghost{border-color:var(--color-cream); color:var(--color-cream);}
.btn--ghost:hover{background:var(--color-fg); color:var(--color-bg); transform:translateY(-3px);}
.btn--dark{background:var(--color-ink); color:var(--color-cream); padding:.75rem 1.3rem; font-size:.85rem;}
.btn--dark:hover{background:var(--color-accent);}
.btn--small{padding:.7rem 1.2rem; font-size:.85rem;}
.btn--wide{width:100%; justify-content:center; padding:1.15rem 1.7rem; font-size:1rem;}
.btn__whatsapp-icon{width:20px; height:20px;}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,253,233,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background-color .4s;
}
.nav.is-scrolled{border-color:var(--color-border);}
.nav.is-dark{background:rgba(71,19,28,.72);}
.nav.is-dark .nav__link,.nav.is-dark .nav__logo,.nav.is-dark .nav__link-num{color:var(--color-cream);}
.nav.is-dark .nav__burger span{background:var(--color-cream);}
.nav.is-dark.is-scrolled{border-color:var(--color-border-dark);}
.nav__inner{
  max-width:var(--container); margin:0 auto; height:var(--nav-height);
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--edge);
}
.nav__logo{display:flex; align-items:baseline; gap:.4rem; font-family:var(--font-display); font-weight:800;}
.nav__logo-wordmark{display:grid; align-items:center;}
.nav__logo-img{grid-area:1 / 1; height:80px; width:auto; transition:opacity .3s;}
.nav__logo-img--dark{opacity:0;}
.nav.is-dark .nav__logo-img--light{opacity:0;}
.nav.is-dark .nav__logo-img--dark{opacity:1;}
.nav__links{display:flex; gap:var(--space-md);}
.nav__link{display:flex; align-items:center; gap:.4rem; font-size:.92rem; font-weight:600; position:relative; padding:.3rem 0;}
.nav__link-num{font-family:var(--font-mono); font-size:.7rem; color:var(--color-accent);}
.nav__link::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--color-accent); transition:width .3s var(--ease-out);}
.nav__link:hover::after{width:100%;}
.nav__actions{display:flex; align-items:center; gap:var(--space-sm);}
.nav__cta{display:inline-flex;}
.nav__burger{display:none; flex-direction:column; gap:5px; width:26px;}
.nav__burger span{display:block; height:2px; background:var(--color-ink); border-radius:2px; transition:transform .3s, opacity .3s;}
.nav__mobile{
  display:none; flex-direction:column; gap:1.4rem; padding:1.5rem var(--edge) 2.5rem;
  background:var(--color-cream); border-top:1px solid var(--color-border);
}
.nav__mobile-link{font-family:var(--font-display); font-weight:700; font-size:1.4rem;}
.nav__mobile-whatsapp{margin-top:.6rem; font-weight:700; color:var(--color-accent);}
.nav.is-open .nav__mobile{display:flex;}
.nav.is-open .nav__burger span:first-child{transform:translateY(3.5px) rotate(45deg);}
.nav.is-open .nav__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg);}

@media (max-width:860px){
  .nav__links{display:none;}
  .nav__cta{display:none;}
  .nav__burger{display:flex;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100dvh; min-height:100svh;
  padding:calc(var(--nav-height) + var(--space-lg)) var(--edge) var(--space-md);
  display:grid; grid-template-rows:auto 1fr; row-gap:var(--space-md);
  overflow:hidden;
  color:var(--color-cream);
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-1; background:var(--color-ink);
  background-image:
    radial-gradient(ellipse 60% 55% at 68% 42%, rgba(156,42,61,.35), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255,215,231,.16), transparent 65%),
    radial-gradient(ellipse 120% 90% at 50% 0%, var(--raw-ink-700), var(--color-ink) 60%);
}
.hero__headline{position:relative; z-index:3; max-width:640px; align-self:start;}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-mono);
  font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-fg-on-dark-muted);
  margin-bottom:var(--space-md);
}
.hero__title{font-size:clamp(2.6rem, 6vw, 5.2rem); margin-bottom:var(--space-md); color:var(--color-cream);}
.hero__title em{color:var(--color-clay); font-style:italic;}
.reveal-line{display:block; overflow:hidden;}
.reveal-line > span{display:inline-block; will-change:transform;}
.hero__foot{max-width:520px;}
.hero__subtitle{font-size:clamp(1rem,1.4vw,1.15rem); color:var(--color-fg-on-dark-muted); margin-bottom:var(--space-md);}
.hero__actions{display:flex; gap:1rem; flex-wrap:wrap;}
.hero .btn--ghost{border-color:var(--color-cream); color:var(--color-cream);}
.hero .btn--ghost:hover{background:var(--color-cream); color:var(--color-ink);}

/* central floating scene */
.hero__scene{position:absolute; inset:0; z-index:2; pointer-events:none;}

.hero__orb-wrap{position:absolute; top:50%; left:50%; width:min(30vw,300px); aspect-ratio:1; transform:translate(-50%,-46%);}
.hero__orb{
  position:absolute; inset:0; border-radius:50%; will-change:transform;
  background:radial-gradient(circle at 35% 30%, var(--raw-rose-300), var(--color-accent) 45%, var(--color-accent-dark) 100%);
  box-shadow:0 40px 90px -20px rgba(156,42,61,.45), inset -14px -18px 40px rgba(0,0,0,.25), inset 10px 12px 30px rgba(255,255,255,.18);
}
.hero__orb-mark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,5vw,3.6rem); color:var(--color-cream);
}
.hero__orb-drip{
  position:absolute; bottom:100%; left:50%; width:10px; height:min(14vw,120px); transform:translateX(-50%);
  background:linear-gradient(var(--color-accent-dark),var(--color-accent)); border-radius:0 0 6px 6px;
}
.hero__orb-glow{position:absolute; inset:-20%; border-radius:50%; background:radial-gradient(circle, rgba(255,159,179,.35), transparent 70%); z-index:-1;}

.hero__float{position:absolute; will-change:transform;}
.hero__float--browser{top:12%; left:8%; width:min(24vw,300px);}
.hero__float--card{bottom:16%; left:16%; width:120px;}
.hero__float--phone{bottom:10%; right:7%; width:min(11vw,130px);}
.hero__float--sticker{top:10%; right:11%; width:150px;}
.hero__float--paper{top:56%; right:20%; width:100px;}

.mockup{background:var(--card-bg); border:1px solid var(--card-border); box-shadow:0 30px 60px -20px rgba(0,0,0,.4);}
.mockup--browser{border-radius:16px; overflow:hidden; transform:rotate(-3deg);}
.mockup__bar{display:flex; gap:6px; padding:.7rem .9rem; border-bottom:1px solid var(--card-border);}
.mockup__bar span{width:8px; height:8px; border-radius:50%; background:var(--color-sand);}
.mockup__body{padding:1.1rem;}
.mockup__line{height:10px; border-radius:5px; background:var(--color-cream-alt); margin-bottom:.5rem;}
.mockup__line--lg{width:80%;}
.mockup__line--md{width:55%;}
.mockup__block{margin-top:.8rem; height:60px; border-radius:8px; background:linear-gradient(135deg,var(--color-accent),var(--color-clay));}

.mockup--swatch{border-radius:18px; padding:.9rem; display:flex; gap:.5rem; transform:rotate(6deg);}
.mockup__swatch-dot{width:26px; height:26px; border-radius:50%; background:var(--c); border:1px solid rgba(0,0,0,.06);}

.mockup--phone{border-radius:26px; padding:.6rem; aspect-ratio:9/17.5; transform:rotate(4deg);}
.mockup__notch{width:36%; height:8px; border-radius:6px; background:var(--color-ink); margin:0 auto .5rem;}
.mockup__grid{display:grid; grid-template-columns:1fr 1fr; gap:.4rem; height:calc(100% - 20px);}
.mockup__grid span{border-radius:8px; background:var(--color-cream-alt);}
.mockup__grid span:first-child{background:linear-gradient(135deg,var(--color-clay),var(--color-accent));}

.mockup--sticker{
  border-radius:50%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--color-ink); color:var(--color-cream); font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.03em; padding:1.2rem; transform:rotate(-8deg); border:1px solid var(--color-border-dark);
}
.mockup--paper{border-radius:14px; aspect-ratio:3/4; display:flex; align-items:flex-end; padding:.8rem; transform:rotate(-5deg); background:var(--color-clay);}
.mockup__logo-mark{font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--color-ink);}

/* connector labels, like the reference image's ingredient callouts */
.hero__label{position:absolute; top:44%; display:flex; align-items:center; gap:.7rem; will-change:transform;}
.hero__label-text{font-family:var(--font-body); font-weight:700; font-size:.92rem; color:var(--color-cream); white-space:nowrap;}
.hero__label-line{width:64px; height:1px; background:rgba(255,253,233,.5);}
.hero__label--left{left:4%;}
.hero__label--right{right:4%; flex-direction:row-reverse;}

/* bottom bar: socials / scroll cue / contact */
.hero__bottom{
  position:relative; z-index:3; align-self:end;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.hero__socials{display:flex; gap:1rem;}
.hero__socials a{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--color-border-dark);
  display:flex; align-items:center; justify-content:center; transition:all .25s var(--ease-out);
}
.hero__socials a svg{width:17px; height:17px;}
.hero__socials a:hover{background:var(--color-accent); border-color:var(--color-accent); transform:translateY(-3px);}

.hero__scroll-cue{
  display:flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--color-fg-on-dark-muted);
}
.hero__scroll-cue svg{width:16px; height:16px; animation:bounce 1.8s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);}}

.hero__contact-link{
  font-weight:700; font-size:.95rem; text-underline-offset:4px; text-decoration:underline;
  text-decoration-color:var(--color-accent);
}
.hero__contact-link:hover{color:var(--color-accent);}

/* marquee strip between hero and showroom */
.marquee{position:relative; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); overflow:hidden; background:var(--color-cream);}
.marquee__track{display:flex; gap:1.2rem; white-space:nowrap; padding:.9rem 0; font-family:var(--font-mono); font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; color:var(--color-fg-muted); animation:marquee 26s linear infinite;}
.marquee__track span:nth-child(odd){color:var(--color-accent);}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

@media (max-width:960px){
  .hero__label{display:none;}
  .hero__float--sticker{display:none;}
  .hero__orb-wrap{width:44vw;}
  .hero__float--browser{width:52vw; top:6%; left:-8%;}
  .hero__float--card{bottom:26%; left:auto; right:6%;}
  .hero__float--paper{top:auto; bottom:8%; left:6%; right:auto;}
  .hero__float--phone{display:none;}
}

@media (max-width:640px){
  .hero{padding-top:calc(var(--nav-height) + var(--space-md)); row-gap:var(--space-sm);}
  .hero__headline{max-width:100%;}
  .hero__title{font-size:clamp(2.1rem,9vw,2.8rem);}
  .hero__actions{width:100%;}
  .hero__actions .btn{flex:1; justify-content:center;}
  .hero__scene{opacity:.5;}
  .hero__bottom{flex-wrap:wrap; row-gap:1rem;}
  .hero__scroll-cue{order:3; width:100%; justify-content:center;}
}

/* ==========================================================================
   SHOWROOM / PORTFOLIO
   ========================================================================== */
.filters{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:var(--space-lg);}
.filter{
  padding:.65rem 1.3rem; border-radius:var(--radius-chip); border:1.5px solid var(--color-border);
  font-size:.88rem; font-weight:600; transition:all .25s var(--ease-out);
}
.filter:hover{border-color:var(--color-ink);}
.filter.is-active{background:var(--color-ink); color:var(--color-cream); border-color:var(--color-ink);}

.grid--portfolio{
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-md);
  align-items:start;
}
.p-card{
  grid-column:span 3; border-radius:var(--radius-card); overflow:hidden; cursor:pointer;
  border:1px solid var(--card-border); background:var(--card-bg);
  transition:transform .25s var(--ease-out);
}
.p-card:hover{transform:translateY(-6px);}
.p-card.is-hidden{display:none;}
.p-card--wide{grid-column:span 6;}
.p-card--wide .p-card__visual{aspect-ratio:21/9;}
.p-card__visual{
  aspect-ratio:4/3; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.p-card__visual::before{content:''; position:absolute; inset:0; background:var(--proj-grad);}
.p-card__mark{position:relative; z-index:1; font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,3vw,2.6rem); color:var(--proj-fg,var(--color-cream)); letter-spacing:-0.02em;}
.p-card__visual-noise{position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 45%);}
.p-card__body{padding:1.4rem 1.5rem 1.6rem;}
.p-card__top{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.5rem;}
.p-card__title{font-family:var(--font-display); font-weight:700; font-size:1.2rem;}
.p-card__arrow{width:34px; height:34px; border-radius:50%; border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .25s var(--ease-out);}
.p-card__arrow svg{width:14px; height:14px;}
.p-card:hover .p-card__arrow{background:var(--color-accent); border-color:var(--color-accent); color:var(--color-cream); transform:rotate(45deg);}
.p-card__desc{color:var(--color-fg-muted); font-size:.92rem; margin-bottom:.9rem;}
.p-card__tags{display:flex; gap:.4rem; flex-wrap:wrap;}
.p-card__tag{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .6rem; border-radius:var(--radius-chip); background:var(--color-cream-alt); color:var(--color-fg-muted);}

@media (max-width:960px){
  .grid--portfolio{grid-template-columns:1fr;}
  .p-card,.p-card--wide{grid-column:span 1;}
}

/* ==========================================================================
   SERVICIOS (dark section)
   ========================================================================== */
.services{background:var(--color-ink); color:var(--color-cream); overflow:hidden;}

.s-carousel{position:relative; display:flex; align-items:center; gap:var(--space-md); max-width:var(--container); margin:0 auto;}

.s-carousel__arrow{
  flex-shrink:0; width:52px; height:52px; border-radius:50%; border:1px solid var(--color-border-dark);
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease-out); z-index:2;
}
.s-carousel__arrow svg{width:18px; height:18px;}
.s-carousel__arrow:hover{background:var(--color-clay); border-color:var(--color-clay); color:var(--color-ink); transform:scale(1.06);}

.s-card{
  position:relative; flex:1; min-height:480px; border-radius:var(--radius-card); overflow:hidden;
  padding:clamp(2rem,4vw,4rem); display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(ellipse 90% 70% at 75% 0%, rgba(255,159,179,.25), transparent 55%),
    radial-gradient(ellipse 120% 90% at 20% 100%, var(--raw-wine-600), transparent 60%),
    linear-gradient(160deg, var(--raw-wine-700), var(--color-ink) 75%);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
}
.s-card__top{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; margin-bottom:var(--space-md);}
.s-card__eyebrow{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--color-fg-on-dark-muted);}
.s-card__logo{height: 80px;; width:auto;}
.s-card__title{font-size:clamp(2rem,4.2vw,3.4rem); max-width:820px; margin:0 auto var(--space-sm); text-align:center;}
.s-card__title em{font-style:italic; color:inherit; font-weight:700;}
.s-card__body{max-width:640px; margin:0 auto; text-align:center;}
.s-card__lede{font-size:1.15rem; margin-bottom:.7rem;}
.s-card__lede strong,.s-card__desc strong{font-weight:800;}
.s-card__desc{font-size:1.02rem; color:var(--color-fg-on-dark-muted); line-height:1.6;}
.s-card__bottom{display:flex; justify-content:flex-end; margin-top:var(--space-md);}
.s-card__tag{
  font-family:var(--font-script); font-size:1.3rem; color:var(--color-ink);
  background:var(--color-clay); padding:.5rem 1.3rem .35rem; border-radius:var(--radius-chip);
  transform:rotate(-3deg); box-shadow:0 12px 24px -10px rgba(0,0,0,.35);
}

.s-dots{display:flex; justify-content:center; gap:.6rem; margin-top:var(--space-md);}
.s-dot{width:9px; height:9px; border-radius:50%; background:var(--color-border-dark); transition:all .3s var(--ease-out);}
.s-dot.is-active{background:var(--color-clay); width:26px; border-radius:5px;}

@media (max-width:760px){
  .s-carousel{gap:.6rem;}
  .s-carousel__arrow{width:40px; height:40px;}
  .s-card{min-height:auto; padding:2rem 1.3rem;}
  .s-card__bottom{justify-content:center;}
}

/* ==========================================================================
   PROCESO
   ========================================================================== */
.process__timeline{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-md); padding-top:var(--space-md);}
.process__line{position:absolute; top:0; left:0; width:100%; height:4px;}
.process__line-fill{stroke-dasharray:1000; stroke-dashoffset:1000;}
.process__step{position:relative; padding-top:var(--space-md);}
.process__dot{position:absolute; top:-6px; left:0; width:14px; height:14px; border-radius:50%; background:var(--color-cream); border:3px solid var(--color-accent);}
.process__num{display:block; font-family:var(--font-mono); color:var(--color-accent); font-size:.85rem; margin-bottom:.8rem;}
.process__step h3{font-size:1.35rem; margin-bottom:.5rem;}
.process__step p{color:var(--color-fg-muted); font-size:.95rem;}

@media (max-width:860px){
  .process__timeline{grid-template-columns:1fr; gap:var(--space-lg);}
  .process__line{display:none;}
  .process__step{padding-left:var(--space-md); padding-top:0; border-left:2px solid var(--color-border);}
  .process__dot{top:2px; left:-8px;}
}

/* ==========================================================================
   ESTUDIO / ABOUT
   ========================================================================== */
.studio{background:var(--color-clay);}
.studio__grid{display:grid; grid-template-columns:1fr 1.3fr; gap:var(--space-xl); max-width:var(--container); margin:0 auto;}
.studio__title{font-size:clamp(2rem,3.6vw,3.2rem); position:sticky; top:calc(var(--nav-height) + 2rem);}
.studio__text{font-size:1.1rem; margin-bottom:1.2rem; max-width:560px;}
.studio__stats{display:flex; gap:var(--space-lg); margin-top:var(--space-lg); flex-wrap:wrap;}
.studio__stat-num{display:block; font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:var(--color-ink);}
.studio__stat-label{font-size:.82rem; color:var(--color-ink-soft); line-height:1.3;}

@media (max-width:860px){
  .studio__grid{grid-template-columns:1fr;}
  .studio__title{position:static;}
}

/* ==========================================================================
   COTIZADOR / CONTACTO (dark)
   ========================================================================== */
.quote{background:var(--color-ink); color:var(--color-cream);}
.quote__wrap{display:grid; grid-template-columns:1.5fr 1fr; gap:var(--space-xl); max-width:var(--container); margin:0 auto;}
.quote__form{display:flex; flex-direction:column; gap:var(--space-md);}
.quote__field-label{display:block; font-weight:700; margin-bottom:.9rem; font-size:1.02rem;}
.quote__field-label em{font-style:normal; color:var(--color-fg-on-dark-muted); font-weight:500; font-size:.85rem;}
.quote__chips{display:flex; flex-wrap:wrap; gap:.7rem;}
.chip{position:relative; cursor:pointer;}
.chip input{position:absolute; opacity:0; width:0; height:0;}
.chip span{
  display:inline-block; padding:.75rem 1.3rem; border-radius:var(--radius-chip);
  border:1.5px solid var(--color-border-dark); font-size:.9rem; font-weight:600;
  transition:all .25s var(--ease-out);
}
.chip input:checked + span{background:var(--color-accent); border-color:var(--color-accent); color:var(--color-cream);}
.chip:hover span{border-color:var(--color-accent);}

.quote__row{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md);}
.field{display:flex; flex-direction:column; gap:.5rem;}
.field label{font-size:.85rem; font-weight:600; color:var(--color-fg-on-dark-muted);}
.field label em{font-style:normal; opacity:.7;}
.field input,.field textarea{
  background:transparent; border:none; border-bottom:1.5px solid var(--color-border-dark);
  padding:.7rem 0; font-size:1.05rem; color:var(--color-cream); resize:vertical;
  transition:border-color .3s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--color-fg-on-dark-muted);}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--color-accent);}

.quote__hint{font-size:.82rem; color:var(--color-fg-on-dark-muted); text-align:center;}

.quote__side{display:flex; flex-direction:column; gap:1rem; align-self:start;}
.quote__direct{
  display:flex; flex-direction:column; gap:.35rem; padding:1.5rem; border-radius:var(--radius-card);
  border:1px solid var(--color-border-dark); transition:all .3s var(--ease-out);
}
.quote__direct:hover{background:rgba(255,255,255,.04); transform:translateY(-3px);}
.quote__direct-label{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-fg-on-dark-muted);}
.quote__direct-title{display:flex; align-items:center; justify-content:space-between; font-family:var(--font-display); font-weight:700; font-size:1.15rem;}
.quote__direct-title svg{width:16px; height:16px; color:var(--color-clay);}
.quote__location{display:flex; gap:.8rem; padding:1.5rem; border-radius:var(--radius-card); background:rgba(255,255,255,.03); font-size:.92rem;}
.quote__location svg{width:22px; height:22px; color:var(--color-clay); flex-shrink:0;}
.quote__location small{color:var(--color-fg-on-dark-muted);}

@media (max-width:900px){
  .quote__wrap{grid-template-columns:1fr;}
  .quote__row{grid-template-columns:1fr;}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--color-ink); color:var(--color-cream); padding:var(--space-xl) var(--edge) var(--space-md); border-top:1px solid var(--color-border-dark);}
.footer__top{display:flex; justify-content:space-between; align-items:center; padding-bottom:var(--space-lg); border-bottom:1px solid var(--color-border-dark); margin-bottom:var(--space-lg); flex-wrap:wrap; gap:1.5rem;}
.footer__logo{display:inline-flex;}
.footer__logo-img{height:100px; width:auto;}
.footer__cta{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.6rem; transition:gap .3s;}
.footer__cta:hover{gap:1rem; color:var(--color-clay);}
.footer__cta svg{width:20px; height:20px;}
.footer__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg); margin-bottom:var(--space-lg);}
.footer__col{display:flex; flex-direction:column; gap:.75rem;}
.footer__col-title{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--color-fg-on-dark-muted); margin-bottom:.4rem;}
.footer__col a,.footer__static{font-size:.95rem; color:var(--color-cream); opacity:.85; transition:opacity .25s, color .25s;}
.footer__col a:hover{opacity:1; color:var(--color-clay);}
.footer__bottom{display:flex; justify-content:space-between; padding-top:var(--space-md); border-top:1px solid var(--color-border-dark); font-size:.8rem; color:var(--color-fg-on-dark-muted); flex-wrap:wrap; gap:.6rem;}

@media (max-width:760px){
  .footer__grid{grid-template-columns:1fr 1fr; gap:2rem;}
}

/* ==========================================================================
   PROJECT MODAL
   ========================================================================== */
.modal{position:fixed; inset:0; z-index:2000; visibility:hidden; opacity:0; transition:opacity .35s var(--ease-soft), visibility 0s .35s;}
.modal.is-open{visibility:visible; opacity:1; transition:opacity .35s var(--ease-soft);}
.modal__overlay{position:absolute; inset:0; background:rgba(71,19,28,.7); backdrop-filter:blur(6px);}
.modal__panel{
  position:absolute; top:3vh; left:50%; transform:translate(-50%,20px);
  width:min(920px,92vw); max-height:94vh; overflow-y:auto;
  background:var(--color-cream); border-radius:28px;
  opacity:0; transition:transform .4s var(--ease-out), opacity .4s var(--ease-out);
}
.modal.is-open .modal__panel{transform:translate(-50%,0); opacity:1;}
.modal__close{position:sticky; top:1.2rem; left:100%; margin-right:1.2rem; width:42px; height:42px; border-radius:50%; background:var(--color-ink); color:var(--color-cream); display:flex; align-items:center; justify-content:center; z-index:2;}
.modal__close svg{width:16px; height:16px;}
.modal__content{padding:0 3rem 3rem; margin-top:-2.6rem;}
.modal__hero{height:280px; border-radius:20px; margin-bottom:1.8rem; display:flex; align-items:center; justify-content:center;}
.modal__hero-mark{font-family:var(--font-display); font-weight:800; font-size:3rem; color:var(--color-cream);}
.modal__tags{display:flex; gap:.5rem; margin-bottom:1rem;}
.modal__title{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:1rem;}
.modal__desc{font-size:1.1rem; color:var(--color-fg-muted); margin-bottom:1.6rem; max-width:640px;}
.modal__meta{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; padding-top:1.6rem; border-top:1px solid var(--color-border);}
.modal__meta-label{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-fg-muted); margin-bottom:.35rem;}
.modal__meta-value{font-weight:700;}

@media (max-width:640px){
  .modal__content{padding:0 1.5rem 2rem;}
  .modal__meta{grid-template-columns:1fr 1fr;}
}

/* ---------- Reveal animation base states (GSAP controls play) ---------- */
.reveal-up{opacity:1;}
.p-card{opacity:1;}