/* =========================================================
   Réplica de diseño — sistema extraído de una referencia
   Contenido e imágenes: marcadores de posición (placeholder)
   ========================================================= */

/* ---------- Tokens ----------
   Paleta de la marca Rogenny Castro (Instagram @rogennycastro):
   chocolate, camel, arena, crema hueso; acentos rosa pastel y negro.
   Sitio oscuro por defecto: --choco es el fondo, --cream el texto. */
:root{
  --choco:      #2c1719;               /* fondo principal: rosa vino oscuro */
  --choco-soft: #382023;               /* paneles elevados, dropdown */
  --cream:      #f2ead9;               /* crema hueso: texto y detalles claros */
  --cream-soft: #f7f2e7;
  --ink:        #171009;               /* texto sobre superficies claras (popup) */
  --burgundy:   #200f12;               /* vino profundo: secciones profundas y footer */
  --camel:      #b98e63;               /* acento camel */
  --sand:       #d8c3a5;               /* arena */
  --rose:       #d9aba1;               /* rosa pastel: acentos */
  --rose-deep:  #a3766d;               /* rosa sobre superficies claras */
  --rose-soft:  #452a2e;               /* fondo de imágenes en carga */
  --white:      #ffffff;

  --line:       rgba(242,234,217,.16); /* filete sobre oscuro (global) */
  --line-dark:  rgba(23,16,9,.18);     /* filete sobre superficies claras */
  --line-light: rgba(244,235,223,.22);

  --display: "Zalando Sans Expanded", "Helvetica Neue", Arial, sans-serif;
  --body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --logo:    "Bodoni Moda", "Zalando Sans Expanded", Georgia, serif;

  --nav-h: 72px;
  --gutter: clamp(16px, 3.2vw, 48px);
  --section-pad: clamp(80px, 11vw, 168px);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--choco);
  color:var(--cream);
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- Tipografía ---------- */
.eyebrow{
  font-family:var(--display);
  font-weight:400;
  font-size:11.2px;
  line-height:1.5;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.display-xl{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(30px,4.4vw,58px);
  line-height:1.32;
  text-transform:uppercase;
}
.display-l{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(19px,2vw,25.6px);
  line-height:1.5;
  text-transform:uppercase;
}
.display-m{
  font-family:var(--display);
  font-weight:400;
  font-size:19.2px;
  line-height:1.5;
  text-transform:uppercase;
}
.statement{
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(21px,2.1vw,28px);
  line-height:1.42;
}
.body-m{ font-size:14.4px; line-height:1.5; }
.body-s{ font-size:12.8px; line-height:1.5; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 34px;
  border:1px solid var(--cream);
  border-radius:999px;
  font-family:var(--display);
  font-weight:400;
  font-size:12.8px;
  letter-spacing:.045em;
  text-transform:uppercase;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--cream);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover{ color:var(--choco); }
.btn:hover::before{ transform:translateY(0); }

.btn--rose{ background:var(--rose); border-color:var(--rose); color:var(--choco); }
.btn--rose::before{ background:var(--burgundy); }
.btn--rose:hover{ color:var(--cream); border-color:var(--burgundy); }

.btn--light{ border-color:var(--cream); color:var(--cream); }
.btn--light::before{ background:var(--cream); }
.btn--light:hover{ color:var(--burgundy); }

.btn--solid-light{ background:var(--cream); border-color:var(--cream); color:var(--burgundy); }
.btn--solid-light::before{ background:var(--white); }
.btn--solid-light:hover{ color:var(--burgundy); }

/* Botón circular de flecha */
.arrow-btn{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.arrow-btn svg{ width:26px; height:12px; transition:transform .4s var(--ease); }
.arrow-btn:hover{ background:var(--cream); border-color:var(--cream); color:var(--choco); }
.arrow-btn--prev:hover svg{ transform:translateX(-3px); }
.arrow-btn--next:hover svg{ transform:translateX(3px); }
.arrow-btn[disabled]{ opacity:.3; pointer-events:none; }

/* =========================================================
   Loader de entrada
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--burgundy);
  display:grid; place-items:center;
  transition:transform 1.6s cubic-bezier(.76,0,.24,1), visibility 1.6s;
}
.loader__mark{
  font-family:var(--logo);
  font-size:clamp(38px,7vw,86px);
  letter-spacing:.02em;
  color:var(--cream);
  overflow:hidden;
  display:flex;
}
.loader__mark span{
  display:block;
  transform:translateY(110%);
  animation:loaderIn 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
.loader__mark img{
  width:min(300px, 56vw); height:auto; display:block;
  transform:translateY(110%); opacity:0;
  animation:loaderIn 1.4s cubic-bezier(.22,1,.36,1) .15s forwards;
}
@keyframes loaderIn{ to{ transform:translateY(0); opacity:1; } }
.loader.is-hidden{ transform:translateY(-100%); visibility:hidden; }

/* =========================================================
   Modal de oferta
   ========================================================= */
.offer{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  padding:var(--gutter);
  opacity:0; visibility:hidden;
  transition:opacity .6s var(--ease), visibility .6s;
}
.offer.is-open{ opacity:1; visibility:visible; }
.offer__scrim{ position:absolute; inset:0; background:rgba(7,1,3,.55); }
.offer__panel{
  position:relative;
  width:min(915px,100%);
  max-height:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--cream);
  color:var(--ink);
  border:1px solid var(--line);
  transform:translateY(18px) scale(.985);
  transition:transform .7s var(--ease);
}
.offer.is-open .offer__panel{ transform:none; }
.offer__media{ background:var(--rose-soft); min-height:540px; overflow:hidden; }
.offer__media img{ width:100%; height:100%; object-fit:cover; }
.offer__body{
  padding:clamp(28px,4vw,54px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:20px;
}
.offer__card{
  width:100%;
  border:1px solid var(--line-dark);
  padding:22px 18px;
  display:grid; gap:12px;
}
.offer__close{
  position:absolute; top:14px; right:16px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-size:20px; line-height:1;
  transition:background .3s var(--ease);
}
.offer__close:hover{ background:rgba(7,1,3,.08); }
.accent{ color:var(--rose-deep); }

/* =========================================================
   Header
   ========================================================= */
.header{ position:fixed; top:0; left:0; right:0; z-index:100; }
.nav{
  height:var(--nav-h);
  background:var(--choco);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:stretch;
}
.nav__brand{
  display:flex; align-items:center;
  padding-left:var(--gutter);
  font-family:var(--logo);
  font-size:30px;
  letter-spacing:.015em;
  line-height:1;
}
.nav__brand img{ height:34px; width:auto; display:block; }
.nav__links{
  display:flex; align-items:center; gap:26px;
  padding:0 34px;
  position:absolute; left:50%; top:0; height:var(--nav-h);
  transform:translateX(-50%);
}
.nav__link{
  font-family:var(--display);
  font-size:11.2px;
  font-weight:400;
  letter-spacing:.055em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
  position:relative;
  padding:6px 0;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__link .chev{ width:9px; height:9px; transition:transform .4s var(--ease); }
.nav__item:hover .chev{ transform:rotate(180deg); }

.nav__cta,.nav__menu{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display);
  font-size:11.2px;
  letter-spacing:.055em;
  text-transform:uppercase;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.nav__cta{
  align-self:center;
  padding:11px 24px;
  margin:0 22px;
  border:1px solid var(--cream);
  border-radius:999px;
}
.nav__menu{
  border-left:1px solid var(--line);
  padding:0 34px;
  min-width:118px;
  gap:9px;
}
.nav__menu .burger{ width:16px; height:12px; display:block; }
.nav__cta:hover,.nav__menu:hover{ background:var(--cream); color:var(--choco); }

/* Dropdown */
.nav__item{ position:relative; height:var(--nav-h); display:flex; align-items:center; }
.dropdown{
  position:absolute; top:var(--nav-h); left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:230px;
  background:var(--choco-soft);
  border:1px solid var(--line);
  padding:14px 0;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.nav__item:hover .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown a{
  display:block; padding:8px 22px;
  font-size:12.8px;
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.dropdown a:hover{ background:rgba(242,234,217,.07); padding-left:28px; }

/* Overlay de menú completo */
.menu-overlay{
  position:fixed; inset:0; z-index:120;
  background:var(--burgundy);
  color:var(--cream);
  padding:var(--nav-h) var(--gutter) var(--gutter);
  display:grid; align-content:center;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
}
.menu-overlay.is-open{ clip-path:inset(0 0 0 0); }
.menu-overlay ul{ display:grid; gap:6px; justify-items:center; }
.menu-overlay li{ overflow:hidden; }
.menu-overlay a{
  display:block;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(26px,5vw,58px);
  text-transform:uppercase;
  line-height:1.35;
  transform:translateY(110%);
  transition:transform .7s var(--ease), opacity .5s var(--ease);
  opacity:.85;
}
.menu-overlay.is-open a{ transform:translateY(0); }
.menu-overlay a:hover{ opacity:1; }
.menu-close{
  position:fixed; top:0; right:0; z-index:130;
  height:var(--nav-h); padding:0 34px;
  display:none; align-items:center;
  font-family:var(--display); font-size:11.2px;
  letter-spacing:.055em; text-transform:uppercase;
  color:var(--cream);
}
.menu-close.is-visible{ display:flex; }

/* =========================================================
   Carrusel de soluciones
   ========================================================= */
.solutions{ padding:var(--section-pad) 0; }
.solutions__head{
  padding:0 var(--gutter);
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:clamp(32px,4.5vw,64px);
  flex-wrap:wrap;
}
.rail{
  display:flex; gap:14px;
  padding:0 var(--gutter);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  cursor:grab;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.card{
  flex:0 0 clamp(240px,26vw,386px);
  scroll-snap-align:start;
}
/* El enlace debe ser bloque: el clip-path del revelado no recorta
   correctamente sobre cajas inline en Chromium. */
.card > a{ display:block; }
.card__media{
  aspect-ratio:385/540;
  overflow:hidden;
  background:var(--rose-soft);
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.card:hover .card__media img{ transform:scale(1.05); }
.card__label{
  margin-top:16px;
  font-size:14.4px;
  display:flex; align-items:center; gap:8px;
}
.card__label span{
  display:inline-block; width:0; overflow:hidden;
  transition:width .45s var(--ease);
}
.card:hover .card__label span{ width:20px; }
.solutions__foot{
  display:grid; justify-items:center; gap:26px;
  margin-top:clamp(40px,5vw,72px);
}
.rail-nav{ display:flex; gap:14px; }

/* =========================================================
   Preocupaciones (imagen + lista numerada)
   ========================================================= */
.concerns{
  padding:var(--section-pad) var(--gutter);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,88px);
  align-items:center;
}
.concerns__media{
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--rose-soft);
}
.concerns__media img{ width:100%; height:100%; object-fit:cover; }
.concerns__list{ text-align:center; display:grid; gap:2px; }
.concerns__list li{ overflow:hidden; }
.concerns__list a{
  display:inline-block;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(20px,2.5vw,34px);
  line-height:1.36;
  text-transform:uppercase;
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.concerns__list a:hover{ color:var(--rose); transform:translateX(4px); }
.concerns__list sup{
  font-size:.4em; vertical-align:super;
  margin-right:.25em; font-family:var(--body);
}
.concerns__cta{ margin-top:clamp(30px,4vw,58px); display:flex; justify-content:center; }

/* =========================================================
   Manifiesto con imágenes dispersas (parallax)
   ========================================================= */
.manifesto{
  position:relative;
  padding:calc(var(--section-pad) * 1.4) var(--gutter);
  border-top:1px solid var(--line);
  min-height:90vh;
  display:grid; place-items:center;
  overflow:hidden;
}
.manifesto__inner{
  text-align:center;
  max-width:760px;
  display:grid; gap:26px; justify-items:center;
  position:relative; z-index:2;
}
.float{
  position:absolute;
  overflow:hidden;
  background:var(--rose-soft);
  will-change:transform;
}
.float img{ width:100%; height:100%; object-fit:cover; }
.float--1{ width:clamp(110px,8.5vw,126px); aspect-ratio:126/70; top:34%; left:21%; }
.float--2{ width:clamp(100px,8.2vw,125px); aspect-ratio:125/128; top:50%; right:15%; }
.float--3{ width:clamp(90px,7.7vw,117px); aspect-ratio:117/155; bottom:16%; left:8%; }
.float--4{ width:clamp(96px,7.4vw,112px); aspect-ratio:112/140; top:20%; right:26%; }

/* =========================================================
   Enfoque (sección oscura sticky con imagen encajada)
   ========================================================= */
.approach{
  position:relative;
  min-height:190vh;
  background:var(--burgundy);
  color:var(--cream);
}
.approach__sticky{
  position:sticky; top:0;
  height:100svh;
  display:grid; place-items:center;
  overflow:hidden;
}
.approach__bg{ position:absolute; inset:0; }
.approach__bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.55;
  transform:scale(1.08);
}
.approach__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,17,11,.55), rgba(26,17,11,.35) 45%, rgba(26,17,11,.75));
}
.approach__label{
  position:absolute; top:calc(var(--nav-h) + clamp(24px,5vh,64px)); left:var(--gutter);
  z-index:3;
}
.approach__inset{
  position:relative; z-index:2;
  width:clamp(220px,28vw,400px);
  aspect-ratio:400/300;
  overflow:hidden;
  will-change:transform;
}
.approach__inset img{ width:100%; height:100%; object-fit:cover; }
.approach__values{
  position:relative; z-index:3;
  padding:var(--section-pad) var(--gutter);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);
  background:var(--burgundy);
}
.value{
  border-top:1px solid var(--line-light);
  padding-top:22px;
  display:grid; gap:12px;
}
.value__num{ font-family:var(--body); font-size:12.8px; opacity:.6; }
.value h3{
  font-family:var(--display); font-weight:300;
  font-size:14.4px; line-height:1.2; text-transform:uppercase;
  letter-spacing:.03em;
}
.value p{ font-size:12.8px; line-height:1.5; opacity:.78; }

/* =========================================================
   Contacto
   ========================================================= */
.contact{
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  background:var(--burgundy);
  color:var(--cream);
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
}
.contact__art{
  border-right:1px solid var(--line-light);
  min-height:280px;
}
.contact__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.contact__form{ display:grid; }
.contact__intro{
  padding:clamp(30px,4.4vw,62px);
  border-bottom:1px solid var(--line-light);
}
/* Contacto directo (sin formulario): frase + CTA de WhatsApp */
.contact__body{
  padding:clamp(30px,4.4vw,62px);
  display:grid; gap:clamp(26px,3.4vw,44px);
  align-content:center; justify-items:start;
}
.contact__actions{ display:grid; gap:16px; justify-items:start; }
.contact__note{ font-size:14.4px; opacity:.75; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; }
.field{ border-bottom:1px solid var(--line-light); }
.field + .field{ border-left:1px solid var(--line-light); }
.field input,.field textarea{
  width:100%; background:transparent; border:0; outline:none;
  color:var(--cream);
  font-family:var(--body); font-size:14.4px;
  padding:18px clamp(20px,3vw,46px);
  transition:background .4s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(244,235,223,.62); }
.field input:focus,.field textarea:focus{ background:rgba(244,235,223,.06); }
.field--full{ grid-column:1/-1; border-left:0 !important; }
.field textarea{ min-height:210px; resize:vertical; }
.contact__submit{ padding:clamp(22px,3vw,40px); display:flex; justify-content:flex-end; }
.contact__submit .btn{ min-width:262px; }

/* =========================================================
   Footer
   ========================================================= */
.footer{
  background:var(--burgundy);
  color:var(--cream);
  margin-top:0;
  padding:clamp(40px,6vw,72px) var(--gutter) 0;
}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.55fr));
  gap:clamp(20px,3vw,40px);
}
.footer__col{ display:grid; gap:8px; align-content:start; }
.footer__col a,.footer__col p{
  font-family:var(--display); font-size:11.2px;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.5;
  opacity:.85;
  transition:opacity .35s var(--ease);
}
.footer__col a:hover{ opacity:1; }
.footer__wordmark{
  font-family:var(--logo);
  font-size:clamp(56px,12vw,150px);
  line-height:.9;
  letter-spacing:.01em;
  margin:clamp(28px,5vw,60px) 0 clamp(16px,2.4vw,30px);
  opacity:.9;
}
.footer__legal{
  border-top:1px solid var(--line-light);
  padding:20px 0 26px;
  display:flex; flex-wrap:wrap; gap:18px;
  justify-content:space-between;
}
.footer__legal a,.footer__legal span{ font-size:12.8px; opacity:.75; }
.footer__legal a:hover{ opacity:1; }

/* =========================================================
   Revelados al hacer scroll
   ========================================================= */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* El recorte se aplica al hijo: un elemento con clip-path a cero
   no dispara IntersectionObserver en Chromium. */
[data-reveal="clip"]{
  opacity:1; transform:none;
}
[data-reveal="clip"] > *{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal="clip"].is-in > *{ clip-path:inset(0 0 0 0); }
[data-reveal="clip"] > * + *{ transition-delay:calc(var(--d,0ms) + 140ms); }

.split-line{ display:block; overflow:hidden; }
.split-line > i{
  display:block; font-style:normal;
  transform:translateY(105%);
  transition:transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
.is-in .split-line > i,.split-line.is-in > i{ transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; clip-path:none; }
  .split-line > i{ transform:none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1100px){
  .nav__links{ display:none; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .approach__values{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .offer__panel{ grid-template-columns:1fr; }
  .offer__media{ min-height:190px; }
  .concerns{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .contact__art{ border-right:0; border-bottom:1px solid var(--line-light); }
  .field-grid{ grid-template-columns:1fr; }
  .field + .field{ border-left:0; }
  .contact__submit{ justify-content:stretch; }
  .contact__submit .btn{ width:100%; }
  .float--1,.float--4{ display:none; }
  .approach{ min-height:150vh; }
}
@media (max-width:640px){
  .nav__cta{ display:none; }
  .nav__brand{ font-size:24px; }
  .footer__grid{ grid-template-columns:1fr; }
  .approach__values{ grid-template-columns:1fr; }
  .hero__scroll{ display:none; }
}

/* =========================================================
   HERO A SANGRE  (corrección: 100vw + wordmark superpuesto)
   ========================================================= */
.hero{
  position:relative;
  margin-top:var(--nav-h);
  width:100%;
  height:calc(100svh - var(--nav-h));
  min-height:520px;
  overflow:hidden;
  display:block;
  padding:0;
}
.hero__media{
  position:absolute; inset:0;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.5s var(--ease);
}
.hero.is-ready .hero__media{ clip-path:inset(0 0 0 0); }
.hero__media img,
.hero__media video{
  display:block; background:var(--choco);
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.14);
  transition:transform 2s var(--ease);
}
.hero.is-ready .hero__media img,
.hero.is-ready .hero__media video{ transform:scale(1); }
/* Backdrop vino sobre el video para que el logo blanco lea bien */
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,1,3,.25) 0%, rgba(7,1,3,0) 34%, rgba(7,1,3,.45) 100%),
    rgba(44,23,25,.55);
}
/* Wordmark centrado, anclado en la parte baja del hero */
.hero__wordmark{
  position:absolute; left:50%; bottom:20%;
  transform:translateX(-50%) translateY(28px);
  width:67vw; max-width:1100px;
  text-align:center;
  font-family:var(--logo);
  font-weight:400;
  font-size:12.6vw;
  line-height:.86;
  letter-spacing:.012em;
  color:var(--cream);
  white-space:nowrap;
  opacity:0;
  transition:opacity 1.1s var(--ease) .55s, transform 1.3s var(--ease) .55s;
  pointer-events:none;
  text-shadow:0 2px 40px rgba(7,1,3,.22);
}
.hero.is-ready .hero__wordmark{ opacity:1; transform:translateX(-50%) translateY(0); }
.hero__wordmark--logo{ width:min(56vw, 900px); }
.hero__wordmark--logo img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 2px 30px rgba(7,1,3,.35));
}

.hero__scroll{
  position:absolute; left:var(--gutter); bottom:34px;
  color:var(--cream); z-index:3;
}
.hero__scroll i{ background:rgba(244,235,223,.35); }
.hero__scroll i::after{ background:var(--cream); }

/* Bloque de introducción (frase + CTA) bajo el hero */
.intro{
  min-height:min(78vh,700px);
  display:grid; place-items:center;
  text-align:center;
  padding:var(--section-pad) var(--gutter);
}
.intro__inner{ display:grid; justify-items:center; gap:32px; max-width:760px; }

/* =========================================================
   HERO DE PÁGINAS INTERNAS
   ========================================================= */
.page-hero{
  position:relative;
  margin-top:var(--nav-h);
  height:min(72svh,640px);
  overflow:hidden;
}
.page-hero img{ width:100%; height:100%; object-fit:cover; }
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,1,3,.28), rgba(7,1,3,.05) 50%, rgba(7,1,3,.4));
}
.page-hero__title{
  position:absolute; left:var(--gutter); bottom:clamp(28px,5vw,64px);
  z-index:2; color:var(--cream);
  font-family:var(--display); font-weight:300;
  font-size:clamp(34px,7vw,96px); line-height:1;
  text-transform:uppercase;
}
.breadcrumb{
  padding:26px var(--gutter);
  display:flex; gap:10px; align-items:center;
  font-family:var(--display); font-size:11.2px;
  letter-spacing:.055em; text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.breadcrumb span{ opacity:.5; }

/* =========================================================
   TARIFAS — dos columnas con filete y navegación pegajosa
   ========================================================= */
.pricing{
  display:grid;
  grid-template-columns:458px minmax(0,1fr);
  border-top:1px solid var(--line);
  min-height:100vh;
}
.pricing__aside{
  border-right:1px solid var(--line);
  padding:clamp(40px,6vw,90px) var(--gutter);
}
.pricing__sticky{ position:sticky; top:calc(var(--nav-h) + 40px); }
.pricing__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(48px,6.4vw,92px); line-height:1;
  text-transform:uppercase; letter-spacing:-.01em;
  margin-bottom:clamp(48px,8vw,140px);
}
.pricing__nav{ display:grid; gap:8px; justify-items:start; }
.pricing__nav a{
  display:flex; align-items:center; gap:0;
  font-size:16px; line-height:1.55;
  transition:font-weight .2s var(--ease);
}
.pricing__nav a::before{
  content:""; display:block;
  width:0; height:1px; background:currentColor;
  margin-right:0;
  transition:width .45s var(--ease), margin-right .45s var(--ease);
}
.pricing__nav a:hover::before,
.pricing__nav a.is-active::before{ width:22px; margin-right:12px; }
.pricing__nav a.is-active{ font-weight:500; }

.pricing__main{ padding-bottom:clamp(60px,9vw,140px); }
.price-group__title{
  font-family:var(--body); font-weight:500;
  font-size:22px;
  padding:clamp(30px,4vw,58px) 0 clamp(20px,2.6vw,34px) 124px;
  border-bottom:1px solid var(--line);
}
.price-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  padding:22px var(--gutter) 22px 124px;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.price-row__name{ font-size:16px; line-height:1.6; }
.price-row__sub{ display:grid; gap:2px; margin-top:2px; }
.price-row__sub span{ font-size:16px; line-height:1.6; }
.price-row__val{ text-align:right; display:grid; gap:2px; }
.price-row__val span{ font-size:16px; line-height:1.6; white-space:nowrap; }
.price-row__val span:first-child:only-child{ line-height:1.6; }
.price-spacer{ height:46px; border-bottom:1px solid var(--line); }
.price-note{ margin:18px var(--gutter) 0 124px; max-width:52ch; opacity:.75; }

/* =========================================================
   LISTADO DE TRATAMIENTOS — filas con contador e imagen
   ========================================================= */
.cat-list{ border-top:1px solid var(--line); }
.cat-row{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:24px;
  padding:clamp(22px,3vw,38px) var(--gutter);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.cat-row__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.9vw,24px);
  text-transform:uppercase; letter-spacing:.01em;
  position:relative; z-index:2;
  transition:transform .55s var(--ease);
}
.cat-row:hover .cat-row__title{ transform:translateX(18px); }
.cat-row__count{
  font-family:var(--body); font-size:14.4px; opacity:.55;
  position:relative; z-index:2;
}
.cat-row__peek{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.86);
  width:clamp(190px,20vw,300px); aspect-ratio:4/3;
  overflow:hidden; z-index:1;
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease), transform .7s var(--ease);
}
.cat-row:hover .cat-row__peek{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.cat-row__peek img{ width:100%; height:100%; object-fit:cover; }

/* Cuadrícula de tratamientos */
.grid-solutions{
  padding:var(--section-pad) var(--gutter);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px) clamp(14px,1.4vw,18px);
}
.filters{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:clamp(28px,4vw,52px) var(--gutter) 0;
}
.filter{
  padding:9px 20px; border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--display); font-size:11.2px;
  letter-spacing:.05em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.filter:hover{ border-color:var(--cream); }
.filter.is-active{ background:var(--cream); border-color:var(--cream); color:var(--choco); }

/* =========================================================
   FICHA DE TRATAMIENTO
   ========================================================= */
.block-split{
  padding:var(--section-pad) var(--gutter);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);
  align-items:start;
}
.block-split__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,4.6vw,62px); line-height:1.06;
  text-transform:uppercase;
}
.block-split__body{ display:grid; gap:18px; max-width:56ch; }
.block-split__body p{ font-size:16px; line-height:1.62; }
.block-split__body ul{ display:grid; gap:4px; }
.block-split__body li{ font-size:16px; line-height:1.62; }
.block-split__body li::before{ content:"• "; }

/* Acordeón */
.accordion{ display:grid; }
.acc{ border-bottom:1px solid var(--line); }
.acc__head{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(14px,1.5vw,19.2px);
  text-transform:uppercase; letter-spacing:.02em;
  transition:opacity .35s var(--ease);
}
.acc__head:hover{ opacity:.6; }
.acc__icon{ position:relative; width:16px; height:16px; flex:0 0 16px; }
.acc__icon::before,.acc__icon::after{
  content:""; position:absolute; background:currentColor;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.acc__icon::before{ left:0; top:7.5px; width:16px; height:1px; }
.acc__icon::after{ top:0; left:7.5px; height:16px; width:1px; }
.acc.is-open .acc__icon::after{ transform:scaleY(0); opacity:0; }
.acc__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease);
}
.acc.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__panel > div{ overflow:hidden; }
.acc__panel p{ padding:0 0 24px; font-size:16px; line-height:1.62; max-width:62ch; }

/* Datos clave */
.facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.fact{
  padding:clamp(26px,3.4vw,44px) var(--gutter);
  border-right:1px solid var(--line);
  display:grid; gap:10px; align-content:start;
}
.fact:last-child{ border-right:0; }
.fact dt{ font-family:var(--display); font-size:11.2px; letter-spacing:.055em; text-transform:uppercase; opacity:.6; }
.fact dd{ margin:0; font-size:19.2px; line-height:1.35; }

/* =========================================================
   PÁGINA OSCURA (nosotros)
   ========================================================= */
.dark{ background:var(--burgundy); color:var(--cream); }
.dark .btn{ border-color:var(--cream); color:var(--cream); }
.dark .btn::before{ background:var(--cream); }
.dark .btn:hover{ color:var(--burgundy); }
.dark .block-split,.dark .facts,.dark .cat-list{ border-color:var(--line-light); }
.dark .fact,.dark .acc,.dark .cat-row{ border-color:var(--line-light); }
.dark .breadcrumb{ border-color:var(--line-light); }

.team{
  padding:var(--section-pad) var(--gutter);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
}
.team__card figure{ margin:0; aspect-ratio:3/4; overflow:hidden; background:var(--rose); }
.team__card img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.team__card:hover img{ transform:scale(1.04); }
.team__card h3{
  margin-top:18px;
  font-family:var(--display); font-weight:300;
  font-size:19.2px; text-transform:uppercase;
}
.team__card p{ font-size:14.4px; opacity:.75; margin-top:4px; }

/* Sección de cifras */
.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
}
.stat{
  padding:clamp(30px,4vw,58px) var(--gutter);
  border-right:1px solid var(--line-light);
  display:grid; gap:8px;
}
.stat:last-child{ border-right:0; }
.stat b{
  font-family:var(--display); font-weight:300;
  font-size:clamp(32px,4vw,54px); line-height:1;
}
.stat span{ font-size:12.8px; opacity:.72; }

/* Mapa / contacto */
.contact-cols{
  padding:var(--section-pad) var(--gutter);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,50px);
  border-top:1px solid var(--line);
}
.contact-col h3{
  font-family:var(--display); font-size:11.2px;
  letter-spacing:.055em; text-transform:uppercase;
  margin-bottom:14px; opacity:.6;
}
.contact-col p,.contact-col a{ font-size:19.2px; line-height:1.5; display:block; }
.map{
  margin:0 var(--gutter) var(--section-pad);
  aspect-ratio:21/9; overflow:hidden; background:var(--rose-soft);
  border:1px solid var(--line);
}
.map img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   Responsive de las páginas internas
   ========================================================= */
@media (max-width:1100px){
  .pricing{ grid-template-columns:1fr; }
  .pricing__aside{ border-right:0; border-bottom:1px solid var(--line); }
  .pricing__sticky{ position:static; }
  .price-group__title,.price-row{ padding-left:var(--gutter); }
  .price-note{ margin-left:var(--gutter); }
  .grid-solutions{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .facts,.stats{ grid-template-columns:1fr 1fr; }
  .fact:nth-child(2),.stat:nth-child(2){ border-right:0; }
  .team,.contact-cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .block-split{ grid-template-columns:1fr; }
  .hero__wordmark{ width:84vw; font-size:15.5vw; bottom:16%; }
  .team,.contact-cols{ grid-template-columns:1fr; }
  .facts,.stats{ grid-template-columns:1fr; }
  .fact,.stat{ border-right:0; border-bottom:1px solid var(--line); }
}
@media (max-width:640px){
  .grid-solutions{ grid-template-columns:1fr; }
  .price-row{ grid-template-columns:1fr; }
  .price-row__val{ text-align:left; }
}