/* ===================================================================
   KMDerma · Rev 3  (retro del 26/08)
   Paleta: #343738 · #888888 · #a78774 · #e4beba · #f2ebe3
   Tipografía: Nexa — Bold para titulares (sustituye a la manuscrita,
   pto 3 de la retro), Regular y ExtraLight para el texto.
   La declaración de Dragfon se conserva por si se quisiera revertir;
   al no usarse, el navegador no la descarga.
   =================================================================== */

@font-face{
  font-family:'Dragfon';
  src:url('../fonts/Dragfon.otf') format('opentype');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Nexa';
  src:url('../fonts/Nexa-ExtraLight.ttf') format('truetype');
  font-weight:200; font-display:swap;
}
@font-face{
  font-family:'Nexa';
  src:url('../fonts/Nexa-Regular.ttf') format('truetype');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Nexa';
  src:url('../fonts/Nexa-Bold.ttf') format('truetype');
  font-weight:700; font-display:swap;
}

:root{
  --charcoal:#343738;
  --gray:#888888;
  --mocha:#a78774;
  --blush:#e4beba;
  --sand:#f2ebe3;
  --white:#ffffff;
  --line:#e2d8cd;

  --display:'Dragfon', Georgia, serif;
  --sans:'Nexa', 'Helvetica Neue', Arial, sans-serif;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  /* Nexa Regular (400) para el texto corrido: la ExtraLight (200) es un
     grosor de titulares y a tamaños pequeños se vuelve difícil de leer */
  font-family:var(--sans); font-weight:400; color:var(--charcoal);
  background:var(--sand); line-height:1.75; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:min(100% - 3rem, var(--maxw)); margin-inline:auto; }
.section{ padding:clamp(4rem,8vw,7rem) 0; }

/* Tipografía */
/* Retro 26/08 · pto 3: se sustituye la manuscrita por Nexa Bold */
.script{
  font-family:var(--sans); font-weight:700; color:var(--mocha);
  font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.15; letter-spacing:.005em;
}
.script.light{ color:var(--white); }
.eyebrow{
  font-family:var(--sans); font-weight:400; text-transform:uppercase;
  letter-spacing:.24em; font-size:.7rem; color:var(--gray); margin-bottom:.9rem;
}
.eyebrow.light{ color:rgba(255,255,255,.75); }
.sec-head{ max-width:60ch; margin-bottom:3rem; }
.sec-lead{ margin-top:1.2rem; font-weight:200; font-size:1.12rem; color:var(--charcoal); opacity:.9; }

/* Botones */
.btn{
  display:inline-block; font-family:var(--sans); font-weight:400;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:1rem 2.1rem; border-radius:100px; white-space:nowrap;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.btn-solid{ background:var(--blush); color:var(--charcoal); }
.btn-solid:hover{ background:var(--mocha); color:var(--white); transform:translateY(-3px); }
.btn-outline{ border:1px solid var(--mocha); color:var(--mocha); }
.btn-outline:hover{ background:var(--mocha); color:var(--white); transform:translateY(-3px); }
.btn-ghost-light{ border:1px solid rgba(255,255,255,.6); color:var(--white); }
.btn-ghost-light:hover{ background:var(--white); color:var(--charcoal); transform:translateY(-3px); }

/* ===== HEADER ===== */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:100; padding:1.1rem 0;
  background:var(--sand); transition:padding .4s var(--ease), box-shadow .4s var(--ease);
}
.hdr.scrolled{ padding:.7rem 0; box-shadow:0 1px 0 var(--line); }
.hdr-in{ display:flex; align-items:center; justify-content:space-between; }
.hdr-logo img{ height:42px; width:auto; transition:height .4s var(--ease); }
.hdr.scrolled .hdr-logo img{ height:36px; }
.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; position:relative; }
.nav a:not(.nav-store)::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0;
  background:var(--mocha); transition:width .35s var(--ease);
}
.nav a:not(.nav-store):hover::after{ width:100%; }
.nav-store{ background:var(--blush); border-radius:100px; padding:.6rem 1.3rem; }
.nav-store:hover{ background:var(--mocha); color:var(--white); }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.burger span{ width:26px; height:2px; background:var(--charcoal); transition:.35s var(--ease); }

/* ===== HERO ===== */
.hero{ padding-top:72px; position:relative; }
.hero-media{ position:relative; min-height:82vh; display:flex; align-items:center; }
.hero-media > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
/* Video de fondo. Va sobre la foto, que actúa de respaldo mientras
   carga o si el navegador no lo reproduce. */
/* Retro 26/08 · pto 1: el video del hero va en blanco y negro */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  opacity:0; transition:opacity 1s var(--ease);
  filter:grayscale(1) contrast(1.04);
}
.hero-video.playing{ opacity:1; }
/* Versión fotográfica: conserva el velo cálido de la paleta */
.hero-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.75) 38%, rgba(228,190,186,.35) 100%);
}
.hero-block{
  position:relative; z-index:2; width:min(100% - 3rem, var(--maxw));
  margin-inline:auto; padding:3rem 0;
}
.hero-kicker{ text-transform:uppercase; letter-spacing:.36em; font-size:.72rem; color:var(--gray); margin-bottom:1.2rem; }
.hero-title{
  font-family:var(--sans); font-weight:700; color:var(--mocha);
  font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.12;
}
/* ExtraLight sólo aquí: al ser texto grande conserva el aire ligero
   de la dirección de arte sin perder legibilidad */
.hero-sub{
  margin-top:1.4rem; max-width:44ch; font-size:1.2rem; font-weight:200;
  color:var(--charcoal); opacity:.9;
}
.hero-block .btn{ margin-top:2.2rem; }

/* Retro 02/09 · pto 1: se elimina la capa "nude" sobre el video.
   Sin ninguna capa, el titular en mocha pierde contraste y el brillo
   del video cambia a lo largo del clip, así que el texto pasa a blanco
   con una sombra suave: no tiñe la imagen y se sostiene sobre
   fotogramas claros y oscuros por igual. */
.hero[data-video="on"] .hero-media::after{ background:none; }
.hero[data-video="on"] .hero-title{
  color:var(--white); text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
.hero[data-video="on"] .hero-sub{
  color:var(--white); opacity:1; text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.hero[data-video="on"] .hero-kicker{
  color:var(--white); opacity:.9; text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.hero[data-video="on"] .btn-solid{ background:var(--white); color:var(--charcoal); }
.hero[data-video="on"] .btn-solid:hover{ background:var(--blush); }
.hero-dots{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); display:flex; gap:.6rem; z-index:3; }
.hero-dots span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.6); }
.hero-dots span.on{ background:var(--white); }

/* ===== FILOSOFÍA ===== */
.filosofia{ background:var(--white); }
.fil-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.fil-media{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.pill{ border-radius:999px 999px 999px 999px; overflow:hidden; aspect-ratio:3/5; background:var(--blush); }
.pill img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.pill-b{ margin-top:2.6rem; }
/* ExtraLight con cuerpo mayor: el grosor ligero necesita más tamaño
   para leerse bien (misma receta que el subtítulo del hero) */
.fil-copy p{ margin-top:1.2rem; font-weight:200; font-size:1.12rem; opacity:.9; }
.fil-copy .script{ margin-bottom:.4rem; }

/* ===== EQUIPO ===== */
.equipo{ background:var(--sand); }
/* --- Carrusel de especialistas --- */
/* overflow-x en lugar de overflow: evita que al abrir el desplegable
   el navegador desplace el contenedor y salte de lámina sola. */
.team-view{ overflow-x:hidden; }
.team-track{
  display:flex;
  /* sin esto las láminas se estiran a la altura de la más alta y la
     lámina corta queda con un hueco enorme debajo */
  align-items:flex-start;
  transition:transform .7s var(--ease), height .4s var(--ease);
  will-change:transform;
}
.doc{
  flex:0 0 100%;
  display:grid; grid-template-columns:300px 1fr; gap:3rem; align-items:center;
}
.doc .pill{ aspect-ratio:3/4.2; }

.team-nav{
  display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:2.6rem;
}
.team-arrow{
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--charcoal);
  font-size:1.1rem; line-height:1;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.team-arrow:hover{ background:var(--mocha); color:var(--white); border-color:var(--mocha); }
.team-arrow:focus-visible{ outline:2px solid var(--mocha); outline-offset:3px; }
.team-dots{ display:flex; gap:.6rem; }
.team-dots button{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:0; background:var(--line); transition:background .3s var(--ease), transform .3s var(--ease);
}
.team-dots button.on{ background:var(--mocha); transform:scale(1.3); }
.doc-body h3{ font-family:var(--sans); font-weight:700; font-size:1.4rem; letter-spacing:.01em; }
.doc-role{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mocha); margin:.4rem 0 .9rem; }
.doc-body p{ font-weight:200; font-size:1.12rem; opacity:.9; margin-bottom:.7rem; }
.doc-body details{ margin-top:.6rem; border-top:1px solid var(--line); padding-top:.8rem; }
.doc-body summary{
  cursor:pointer; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mocha); list-style:none; display:flex; gap:.5rem; align-items:center;
}
.doc-body summary::-webkit-details-marker{ display:none; }
.doc-body summary::before{ content:"＋"; color:var(--gray); }
.doc-body details[open] summary::before{ content:"－"; }
.doc-body details ul{ margin:.9rem 0 0 1.1rem; font-size:.94rem; opacity:.9; }
.doc-body details li{ margin-bottom:.45rem; }
.sec-cta{ margin-top:3rem; text-align:center; }
.sec-cta p{ margin-bottom:1.2rem; font-weight:200; font-size:1.25rem; color:var(--mocha); }

/* --- Cierre de Equipo · bloque grupal --- */
/* La foto grupal es panorámica (once personas): va completa a todo lo
   ancho y el texto debajo, centrado. */
.team-cierre{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:clamp(1.8rem,4vw,2.8rem);
}
.team-cierre-foto{ width:100%; border-radius:20px; overflow:hidden; background:var(--blush); }
.team-cierre-foto img{ width:100%; height:auto; display:block; }
.team-cierre-txt{ max-width:62ch; text-align:center; }
.team-cierre-txt h3{
  font-family:var(--sans); font-weight:700; font-size:clamp(1.4rem,3vw,1.9rem);
  color:var(--mocha); line-height:1.2;
}
.team-cierre-txt p{ margin-top:1rem; font-weight:200; font-size:1.12rem; opacity:.9; }
.team-valores{ list-style:none; margin-top:1.6rem; display:grid; gap:.5rem; }
.team-valores li{
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--charcoal);
}

/* ===== SERVICIOS ===== */
.servicios{ background:var(--white); }
.serv-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
/* Las tarjetas van en el tono claro para destacar sobre el fondo blanco */
.serv{
  background:var(--sand); border-radius:20px; padding:2.4rem 2rem;
  border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.serv:hover{ transform:translateY(-8px); box-shadow:0 26px 50px -30px rgba(52,55,56,.35); }
/* Fotografía de fondo en cada tarjeta, con velo para que el texto se
   lea encima. Mientras no llegue la foto, la tarjeta se ve como antes. */
.serv{ position:relative; overflow:hidden; }
.serv-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .7s var(--ease);
}
.serv:hover .serv-bg{ transform:scale(1.05); }
/* Retro 14/09: las fotos ya traen el baño de color claro integrado, así
   que no llevan velo y el texto va en charcoal, como el resto del sitio.
   Alineado arriba, para que los tres títulos queden a la misma altura. */
.serv > h3, .serv > p{ position:relative; z-index:2; }
.serv:has(.serv-bg){ min-height:340px; display:flex; flex-direction:column; justify-content:flex-start; }
.serv h3{ font-family:var(--sans); font-weight:700; font-size:1.25rem; color:var(--mocha); margin-bottom:.7rem; }
.serv p{ font-weight:200; font-size:1.08rem; opacity:.9; }

/* ===== TIENDA ===== */
/* Retro 26/08 · pto 6: fondo fotográfico con velo para asegurar
   contraste del texto sobre la imagen */
.tienda{ position:relative; overflow:hidden; background:var(--sand); }
.tienda-bg{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  display:block;
}
.tienda-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center right;
}
/* Retro 02/09 · pto 2: la fotografía va limpia, sin ninguna capa.
   El lado izquierdo de la imagen es beige plano, así que el texto en
   charcoal se lee sin necesidad de velo. */
.tienda > .container, .tienda > .marcas{ position:relative; z-index:2; }
/* Retro: toda la sección en el crema de la paleta, sobre la fotografía */
.tienda .marcas-track span{ color:var(--sand); opacity:.85; text-shadow:0 1px 9px rgba(0,0,0,.34); }
.tienda .marcas{ border-color:rgba(255,255,255,.3); }
/* Al retirar la ilustración, el texto ocupa la mitad izquierda y la
   fotografía de fondo queda visible a la derecha. */
.tienda-grid{ display:block; }
.tienda-copy{ max-width:46%; min-height:clamp(300px,34vw,420px); display:flex;
  flex-direction:column; justify-content:center;
  /* sin esto los hijos se estiran a todo el ancho y deforman el logo */
  align-items:flex-start; }
.tienda-logo{ display:block; height:60px; width:auto; margin-bottom:1.1rem;
  filter:drop-shadow(0 1px 10px rgba(0,0,0,.28)); }
.tienda .script{ color:var(--sand); text-shadow:0 1px 16px rgba(0,0,0,.34); }
.tienda-lead{ margin-top:.9rem; max-width:40ch; font-weight:200; font-size:1.12rem;
  color:var(--sand); opacity:1; text-shadow:0 1px 11px rgba(0,0,0,.4); }
.tienda .btn-solid{ background:var(--sand); color:var(--charcoal); margin-top:1.8rem; }
.tienda .btn-solid:hover{ background:var(--white); color:var(--charcoal); }

/* Botón con bolsita */
.btn-shop{ display:inline-flex; align-items:center; gap:.65rem; }
.btn-bag{
  width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s var(--ease);
}
.btn-shop:hover .btn-bag{ transform:translateY(-2px) rotate(-6deg); }

/* ---- Ilustración de la tienda ---- */
.shop-art{ position:relative; aspect-ratio:1/1; max-width:440px; margin-inline:auto; width:100%; }
.shop-bag{
  position:absolute; left:50%; bottom:0; width:66%; transform:translateX(-50%);
  animation:bagIn .9s var(--ease) both;
}
.shop-bag svg{ width:100%; height:auto; display:block; }
.bag-body{ fill:var(--white); stroke:var(--charcoal); stroke-width:3.5; }
.bag-handle{ fill:none; stroke:var(--charcoal); stroke-width:3.5; stroke-linecap:round; }
.bag-mark{
  position:absolute; left:50%; top:58%; width:34%; transform:translate(-50%,-50%);
  border-radius:50%; opacity:.9;
}

/* Productos que asoman de la bolsa */
.shop-prod{ position:absolute; }
.shop-prod svg{ width:100%; height:auto; display:block; }
.shop-prod svg *{ fill:var(--white); stroke:var(--charcoal); stroke-width:3; }
.shop-prod svg line{ stroke-width:2.4; opacity:.5; }

.shop-prod-1{ width:15%; left:26%; bottom:40%; animation:flota 5.5s ease-in-out infinite; }
.shop-prod-2{ width:19%; left:44%; bottom:44%; animation:flota 6.5s ease-in-out .5s infinite; }
.shop-prod-3{ width:13%; left:62%; bottom:41%; animation:flota 6s ease-in-out 1s infinite; }
.shop-prod-2 svg *{ fill:var(--mocha); }

@keyframes flota{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%    { transform:translateY(-14px) rotate(2deg); }
}
@keyframes bagIn{
  from{ opacity:0; transform:translateX(-50%) translateY(30px) scale(.94); }
  to  { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

/* ---- Cinta de marcas ---- */
.marcas{
  margin-top:clamp(2.5rem,6vw,4rem); overflow:hidden;
  border-top:1px solid rgba(52,55,56,.14); border-bottom:1px solid rgba(52,55,56,.14);
  padding:1.1rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marcas-track{ display:flex; gap:3.5rem; width:max-content; animation:desliza 32s linear infinite; }
.marcas-track span{
  font-size:.82rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--charcoal); opacity:.55; white-space:nowrap;
}
@keyframes desliza{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marcas:hover .marcas-track{ animation-play-state:paused; }

/* ===== SKINLAB ===== */
.skinlab{ position:relative; overflow:hidden; color:var(--white); text-align:center; background:var(--charcoal); }
.skinlab-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.25; z-index:0; }
.skinlab::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(160deg, rgba(52,55,56,.86), rgba(167,135,116,.7)); }
.skinlab-in{ position:relative; z-index:2; max-width:62ch; margin-inline:auto; }
/* Retro 02/09 · pto 3 */
.skinlab-logo{ height:auto; width:min(300px,62%); margin:.6rem auto 1.4rem; }
.skinlab-lead{ margin-top:1.3rem; font-weight:200; font-size:1.12rem; color:rgba(255,255,255,.92); }
.skinlab-list{ list-style:none; margin:2rem auto 0; display:grid; gap:.6rem; max-width:36ch; text-align:left; }
.skinlab-list li{ position:relative; padding-left:1.8rem; color:rgba(255,255,255,.92); }
.skinlab-list li::before{ content:"✦"; position:absolute; left:0; color:var(--blush); }
.skinlab-note{ margin-top:2rem; font-weight:700; font-size:1.3rem; line-height:1.4; }
.skinlab-claim{
  margin-top:1.8rem; font-weight:700; font-size:1.35rem; letter-spacing:.01em;
  color:var(--sand);
}
.skinlab-loc{ margin-top:1.2rem; font-size:.85rem; color:rgba(255,255,255,.75); }
.skinlab-cta{ margin-top:2.2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ===== FOOTER ===== */
.ftr{ background:var(--charcoal); color:var(--sand); padding:3.5rem 0 1.6rem; }
.ftr-in{ display:grid; grid-template-columns:1.3fr 1fr; gap:2.5rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.12); }
.ftr-logo{ width:190px; height:auto; margin-bottom:.7rem; }
.ftr-brand p{ font-weight:200; font-size:1.1rem; color:var(--blush); }
.ftr-social{ display:flex; flex-direction:column; gap:.6rem; }
.ftr-social span{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; opacity:.6; margin-bottom:.3rem; }
.ftr-social a{ font-size:.9rem; opacity:.85; transition:opacity .3s; }
.ftr-social a:hover{ opacity:1; color:var(--blush); }
.ftr-bottom{ display:flex; justify-content:space-between; padding-top:1.4rem; font-size:.76rem; opacity:.6; }

/* ===== WHATSAPP FLOTANTE ===== */
.wa-fab{ position:fixed; bottom:1.6rem; right:1.6rem; z-index:200; }
.wa-btn{
  height:60px; padding:0 1.4rem 0 1.1rem; border-radius:100px; border:0; cursor:pointer;
  background:#25D366; color:#fff; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 14px 32px -8px rgba(37,211,102,.65);
  transition:transform .35s var(--ease); animation:wapulse 2.6s ease-out infinite;
}
.wa-btn:hover{ transform:translateY(-3px) scale(1.03); }
.wa-label{ font-family:var(--sans); font-weight:400; font-size:.88rem; white-space:nowrap; }
@keyframes wapulse{
  0%{ box-shadow:0 14px 32px -8px rgba(37,211,102,.65), 0 0 0 0 rgba(37,211,102,.45); }
  70%{ box-shadow:0 14px 32px -8px rgba(37,211,102,.65), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 14px 32px -8px rgba(37,211,102,.65), 0 0 0 0 rgba(37,211,102,0); }
}
.wa-menu{
  position:absolute; bottom:76px; right:0; width:268px; background:var(--white);
  border:1px solid var(--line); border-radius:16px; padding:1rem;
  box-shadow:0 24px 50px -18px rgba(52,55,56,.4); animation:wapop .3s var(--ease);
}
.wa-menu[hidden]{ display:none; }
@keyframes wapop{ from{opacity:0; transform:translateY(10px) scale(.96);} to{opacity:1; transform:none;} }
.wa-menu-title{ font-size:.76rem; color:var(--gray); margin-bottom:.8rem; text-align:center; }
.wa-option{ display:block; padding:.8rem .9rem; border-radius:12px; background:var(--sand); margin-bottom:.55rem; transition:background .3s var(--ease), transform .3s var(--ease); }
.wa-option:last-child{ margin-bottom:0; }
.wa-option:hover{ background:var(--blush); transform:translateX(3px); }
.wa-option strong{ display:block; font-weight:700; font-size:.95rem; }
.wa-option small{ color:var(--gray); font-size:.76rem; }

/* ===== REVEAL ===== */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* Equipo · dentro del carrusel el contenido de la lámina activa
   entra desde la derecha, acompañando el sentido del deslizamiento */
.doc.rv{ opacity:1; transform:none; }
.doc .pill,
.doc .doc-body{
  opacity:0; transform:translateX(34px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.doc.is-active .pill,
.doc.is-active .doc-body{ opacity:1; transform:none; }
.doc.is-active .doc-body{ transition-delay:.12s; }

/* Servicios · las tarjetas entran en cascada, siguiendo la lectura
   de izquierda a derecha */
.serv.rv{ opacity:0; transform:translateY(30px); }
.serv.rv.in{ opacity:1; transform:none; }
.serv-cards .serv:nth-child(1){ transition-delay:0s; }
.serv-cards .serv:nth-child(2){ transition-delay:.12s; }
.serv-cards .serv:nth-child(3){ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .doc .pill, .doc .doc-body{ opacity:1; transform:none; transition:none; }
  .team-track{ transition:none; }
  .serv.rv, .serv.rv.in{ opacity:1; transform:none; transition:none; }
  .shop-prod, .shop-bag, .marcas-track{ animation:none; }
  .shop-bag{ opacity:1; transform:translateX(-50%); }
  .serv-cards .serv:nth-child(1),
  .serv-cards .serv:nth-child(2),
  .serv-cards .serv:nth-child(3){ transition-delay:0s; }
  .wa-btn{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ===== RESPONSIVE ===== */
@media (max-width:940px){
  .fil-grid{ grid-template-columns:1fr; }
  .doc{ grid-template-columns:220px 1fr; gap:2rem; }
  .serv-cards{ grid-template-columns:1fr; }
  /* Banner de tienda en móvil · propuesta de diseño.
     La fotografía deja limpia la mitad izquierda: el texto va ahí,
     centrado vertical, y la modelo ocupa la derecha. Sin logo, como
     en el mockup. */
  .tienda{
    min-height:0; padding:0;
    display:flex; flex-direction:column;
  }
  .tienda-bg{ position:absolute; inset:0; }
  .tienda-bg img{ object-position:center; }
  .tienda > .container{
    order:1; aspect-ratio:1080/1232;
    display:flex; align-items:center; padding:0 1.3rem;
  }
  .tienda-copy{ max-width:55%; min-height:0; }
  .tienda-logo{ display:block; height:36px; margin-bottom:.7rem; }
  .tienda .script{ font-size:1.95rem; line-height:1.12; }
  .tienda-lead{ font-size:.92rem; margin-top:.7rem; max-width:24ch; line-height:1.5; }
  /* Fuente, espaciado y padding menores: así el texto entra en una sola línea */
  .tienda .btn-solid{
    margin-top:1.1rem; padding:.75rem 1.2rem;
    font-size:.7rem; letter-spacing:.1em;
  }
  .tienda > .marcas{ order:2; margin-top:0; }

  .ftr-in{ grid-template-columns:1fr; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:var(--white);
    flex-direction:column; align-items:flex-start; justify-content:center; padding:3rem 2.4rem;
    gap:1.5rem; transform:translateX(100%); transition:transform .45s var(--ease);
    box-shadow:-20px 0 60px -30px rgba(52,55,56,.5);
  }
  .nav.open{ transform:none; }
  .burger{ display:flex; z-index:110; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:560px){
  .doc{ grid-template-columns:1fr; gap:1.4rem; }
  .doc .pill{ max-width:200px; }
  .ftr-bottom{ flex-direction:column; gap:.5rem; }
  .skinlab-cta{ flex-direction:column; }
}

/* ===== Selector de versión · SÓLO DEMO (quitar al publicar) ===== */
.demo-switch{
  position:fixed; left:1.2rem; bottom:1.4rem; z-index:250;
  display:flex; align-items:center; gap:.4rem; padding:.4rem .5rem;
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  border-radius:100px; box-shadow:0 10px 30px -14px rgba(52,55,56,.5);
  backdrop-filter:blur(6px);
}
.demo-switch span{
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray); padding:0 .4rem;
}
.demo-switch a{
  font-size:.72rem; letter-spacing:.06em; padding:.42rem .9rem;
  border-radius:100px; color:var(--charcoal); transition:background .3s var(--ease), color .3s var(--ease);
}
.demo-switch a:hover{ background:var(--sand); }
.demo-switch a.on{ background:var(--charcoal); color:var(--white); }
@media (max-width:560px){
  .demo-switch{ left:.8rem; bottom:.9rem; }
  .demo-switch span{ display:none; }
}