:root{
  --crema:#f5efe6;
  --cafe:#4a3428;
  --dorado:#c9a35c;
  --dorado-texto:#8a6428; /* oro oscurecido: AA para texto sobre superficies claras */
  --cafe-suave:#7a604d; /* oscurecido para AA sobre vidrio */
  --blanco:#fffdf9;
  --linea:#e7dfd2;
  /* paleta natural secundaria: SOLO iconos y acentos pequeños (nunca texto/fondos) */
  --sage:#8a9a7b;
  --olive:#a8b08e;
  --terra:#c47b5a;
  --euca:#7d9b8a;
  /* hojas decorativas de las esquinas: verde salvia; el color lo pone la variable
     (background-color) y la forma va como máscara, así el trazo se recolorea desde aquí */
  --leaf:#9caf88;
  --leaf-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2054%20C22%2045%2032%2033%2044%2014%27%2F%3E%3Cpath%20d%3D%27M12%2054%20C7%2049%204%2043%206%2038%20C12%2041%2014%2048%2012%2054Z%27%2F%3E%3Cpath%20d%3D%27M44%2014%20C48%209%2054%207%2058%2010%20C54%2015%2049%2017%2044%2014Z%27%2F%3E%3Cpath%20d%3D%27M25%2039%20C17%2037%2012%2030%2014%2022%20C22%2025%2027%2031%2025%2039Z%27%2F%3E%3Cpath%20d%3D%27M33%2028%20C41%2026%2046%2019%2045%2012%20C37%2015%2032%2021%2033%2028Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center/contain;
  --leaf-mask-mini:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2027%20C13%2021%2019%2013%2025%206%27%2F%3E%3Cpath%20d%3D%27M25%206%20C27%203%2030%203%2031%204%20C30%207%2027%208%2025%206Z%27%2F%3E%3Cpath%20d%3D%27M14%2018%20C9%2016%206%2011%208%206%20C13%208%2016%2013%2014%2018Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center/contain;
  --font-display:'Archivo',-apple-system,'Helvetica Neue',sans-serif;
  --font-body:'Archivo',-apple-system,'Helvetica Neue',sans-serif;
  --font-sans:'Archivo',-apple-system,'Helvetica Neue',sans-serif;
  --font-script:'Archivo',-apple-system,sans-serif;
  --glass-shadow:0 12px 32px rgba(74,52,40,.14),inset 0 1px 0 rgba(255,255,255,.65);
  --glass-shadow-lift:0 22px 44px rgba(74,52,40,.20),inset 0 1px 0 rgba(255,255,255,.7);
  /* insets del área segura de iOS (notch / home indicator); 0 en el resto */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--crema);}  /* la franja del status bar en iOS hereda este crema = sin costura arriba */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none!important;animation:none!important;}
}
body{
  font-family:var(--font-sans);
  background:var(--crema);
  color:var(--cafe);
  line-height:1.65;
  font-size:16.5px;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

/* ===== fondo ambiental: malla de gradientes + grano; nada de crema plana ===== */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 620px at 88% -6%,rgba(201,163,92,.20),transparent 62%),
    radial-gradient(720px 520px at -12% 18%,rgba(226,178,158,.22),transparent 60%),
    radial-gradient(820px 700px at 108% 68%,rgba(201,163,92,.13),transparent 65%),
    radial-gradient(640px 520px at 12% 96%,rgba(226,172,150,.15),transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:multiply;
}
/* bailarina del logo como marca de agua enorme, sangrando fuera del lienzo */
.bg-dancer{
  position:fixed;z-index:-1;right:-13vw;top:5vh;
  width:min(58vw,720px);height:auto;
  opacity:.07;pointer-events:none;user-select:none;
}
@media (max-width:767px){
  .bg-dancer{width:92vw;right:-32vw;top:10vh;opacity:.055;}
}

/* ===== vidrio (Apple-style) con degradación elegante ===== */
.glass{
  background:linear-gradient(160deg,rgba(255,253,249,.62),rgba(255,253,249,.38));
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--glass-shadow);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,253,249,.94);}
}
.glass-lift{transition:transform .25s ease,box-shadow .25s ease;}
@media (hover:hover){
  .glass-lift:hover{transform:translateY(-4px);box-shadow:var(--glass-shadow-lift);}
}

/* ===== idioma: ES por defecto, el toggle cambia data-lang en <html> ===== */
html[data-lang="es"] [lang="en"]{display:none!important;}
html[data-lang="en"] [lang="es"]{display:none!important;}

.wrap{width:min(1100px,100% - 40px);margin-inline:auto;}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--cafe);color:var(--crema);
  padding:12px 20px;z-index:100;border-radius:0 0 10px 0;
}
.skip:focus{left:0;}

/* ===== foto real pendiente: cada imagen es un placeholder etiquetado ===== */
.ph{
  position:relative;
  background:repeating-linear-gradient(45deg,#e9e0d1 0 14px,#efe7da 14px 28px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ph--45{aspect-ratio:4/5;}
.ph--169{aspect-ratio:16/9;}
.ph-label{
  background:rgba(74,52,40,.82);color:var(--crema);
  font-size:13px;letter-spacing:.5px;font-weight:500;
  padding:6px 12px;border-radius:6px;max-width:90%;text-align:center;
}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ===== header: barra de vidrio flotante ===== */
.site-header{position:sticky;top:10px;z-index:50;}
.header-in{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  min-height:60px;gap:10px;
  border-radius:20px;padding:6px 14px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cafe);min-height:44px;flex-shrink:0;}
.brand img{height:42px;width:42px;border-radius:50%;}
.brand-name{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:.02em;white-space:nowrap;}
/* "TX" del nombre de marca: sufijo más pequeño y ligero, no compite con "Body Wellness" */
.brand-tx{font-size:.6em;font-weight:500;opacity:.6;letter-spacing:.04em;}
.main-nav{display:flex;gap:2px;}
.nav-link{
  display:flex;align-items:center;min-height:44px;padding:0 14px;
  color:var(--cafe);text-decoration:none;font-size:16px;font-weight:500;border-radius:22px;
  -webkit-tap-highlight-color:transparent;
}
.nav-link:hover{color:var(--dorado-texto);}
.nav-link.active{color:var(--dorado-texto);font-weight:600;}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.header-wa{min-height:44px;padding:10px 18px;font-size:15px;}
.nav-burger{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;background:transparent;border:none;
  color:var(--cafe);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.nav-burger svg{width:26px;height:26px;}
@media (max-width:1023px){
  .nav-burger{display:flex;}
  .header-wa{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;}
  .header-wa .wa-label{display:none;}
  .main-nav{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    border-radius:18px;
    display:none;flex-direction:column;padding:10px 14px;
  }
  .site-header.nav-open .main-nav{
    display:flex;
    background:linear-gradient(160deg,rgba(255,253,249,.82),rgba(255,253,249,.66));
    -webkit-backdrop-filter:blur(20px) saturate(1.35);
    backdrop-filter:blur(20px) saturate(1.35);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:var(--glass-shadow);
  }
  .nav-link{min-height:48px;font-size:18px;}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header.nav-open .main-nav{background:rgba(255,253,249,.97);}
}
@media (max-width:519px){
  .brand-name{font-size:16px;}   /* nombre "Body Wellness TX" visible también en iPhone */
}
/* móvil: header FIJO al viewport (no sticky). z-index:9999 lo pone sobre el grano (body::after, z-80).
   padding-top:env(safe-area-inset-top) => el fondo crema sube tras el status bar hasta el borde físico (y=0).
   body recibe padding-top = alto del header para que el contenido no quede debajo del header fijo.
   Confirmado: ni html ni body tienen transform/filter/backdrop-filter/overflow que rompan el position:fixed. */
@media (max-width:767px){
  .site-header .header-wa{display:none;}       /* la burbuja flotante ya cubre WhatsApp */
  .site-header{
    position:fixed;top:0;left:0;right:0;z-index:9999;
    padding-top:env(safe-area-inset-top,0px);  /* el crema sube tras el status bar hasta y=0: sin franja arriba */
    background:var(--crema);                    /* = fondo de la página = theme-color */
    border-bottom:1px solid var(--linea);
  }
  .site-header .header-in{
    width:100%;max-width:none;min-height:60px;
    border-radius:0;padding:8px 16px;
    background:transparent;                     /* el color lo pinta el propio header */
    -webkit-backdrop-filter:none;backdrop-filter:none;   /* SIN vidrio en móvil */
    border:0;box-shadow:none;
  }
  /* el header fijo sale del flujo: reservamos su alto exacto en el body para no ocultar contenido */
  body{padding-top:calc(64px + env(safe-area-inset-top,0px));}
  .site-header.nav-open .main-nav{background:var(--crema);}
}

.lang-toggle{display:flex;border:1px solid var(--dorado);border-radius:26px;overflow:hidden;flex-shrink:0;}
.lang-btn{
  min-width:46px;min-height:44px;padding:0 12px;
  background:transparent;border:none;cursor:pointer;
  font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--cafe);
  -webkit-tap-highlight-color:transparent;
}
.lang-btn[aria-pressed="true"]{background:var(--dorado);color:var(--blanco);font-weight:600;}

/* ===== botones ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 30px;border-radius:40px;
  font-family:var(--font-sans);font-size:17px;font-weight:500;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.97);}
.btn-primary{
  position:relative;overflow:hidden;
  background:var(--dorado);color:#3c2b20;font-weight:600;
  box-shadow:0 6px 18px rgba(201,163,92,.35);
  transition:transform .15s ease,background .22s ease,color .22s ease;
}
.btn-primary>*{transition:transform .22s ease;}
.btn-primary::after{
  content:"→";position:absolute;right:16px;top:50%;
  translate:8px -50%;opacity:0;font-weight:600;
  transition:opacity .22s ease,translate .22s ease;
}
@media (hover:hover){
  .btn-primary:hover{background:var(--cafe);color:var(--crema);}
  .btn-primary:hover>*{transform:translateX(-8px);}
  .btn-primary:hover::after{opacity:1;translate:0 -50%;}
}
.btn-ghost{border:2px solid var(--crema);color:var(--crema);background:rgba(245,239,230,.08);}
.btn-ghost:hover{background:rgba(245,239,230,.18);}
.btn-outline{border:2px solid var(--cafe);color:var(--cafe);background:transparent;}
.btn-outline:hover{background:rgba(74,52,40,.08);}
.btn svg{width:22px;height:22px;flex-shrink:0;}

/* ===== hero (split: texto a la izquierda, foto enmarcada a la derecha, fondo de marca) ===== */
.hero{
  position:relative;overflow:hidden;border-radius:0 0 28px 28px;
  background:
    radial-gradient(880px 520px at 12% 2%,rgba(201,163,92,.12),transparent 60%),
    radial-gradient(760px 700px at 106% 118%,rgba(226,178,158,.18),transparent 58%);
}
/* acentos botánicos suaves (la marca de agua .bg-dancer sigue aportando la bailarina de fondo) */
.hero::before,.hero::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  background-color:var(--leaf);
  -webkit-mask:var(--leaf-mask);mask:var(--leaf-mask);
}
/* hoja grande anclada a la esquina inferior izquierda del hero */
.hero::before{left:-18px;bottom:-18px;width:min(32vw,230px);height:min(32vw,230px);opacity:.34;}
/* acento pequeño anclado a la esquina superior izquierda (antes flotaba en el centro) */
.hero::after{top:20px;left:22px;width:94px;height:94px;transform:rotate(128deg);opacity:.3;}
.hero-inner{
  position:relative;z-index:2;
  width:min(1180px,100% - 40px);margin-inline:auto;
  display:grid;grid-template-columns:1.05fr .92fr;gap:clamp(30px,5vw,64px);
  align-items:center;
  padding:clamp(54px,7vw,88px) 0 clamp(58px,7vw,92px);
}
.hero-content{color:var(--cafe);}
.hero-eyebrow{text-align:left;margin-bottom:14px;}
.hero h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(34px,4.6vw,58px);line-height:1.07;letter-spacing:-.025em;
  color:var(--cafe);max-width:15ch;
}
/* palabra rotativa (máquina de escribir). El ancho se reserva con un "sizer"
   invisible (palabra más larga + punto) apilado sobre el texto visible en la
   misma celda de una rejilla → el layout nunca salta, sin min-width. Ver main.js */
.tw-word{display:inline-grid;}
.tw-word>*{grid-area:1/1;white-space:nowrap;} /* sizer y texto en la MISMA celda */
.tw-sizer{visibility:hidden;}                  /* reserva ancho, no se ve ni se lee */
.tw-live{justify-self:start;}                  /* texto visible pegado a la izquierda */
.tw-text{color:var(--dorado-texto);}           /* palabra en oro */
.tw-dot{color:var(--cafe);}                    /* punto en café del titular, pegado */
.tw-text::after{           /* cursor: barra fina entre la última letra y el punto */
  content:"";display:inline-block;width:.07em;height:1em;
  margin-left:.02em;vertical-align:-.12em;background:currentColor;
  animation:tw-blink 1s step-end infinite;
}
.tw-text.tw-hold::after{display:none;} /* fuera durante la pausa → punto pegado */
@keyframes tw-blink{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .tw-text::after{display:none;}     /* sin cursor ni parpadeo: palabra fija */
}
.hero-sub{
  margin-top:20px;font-size:clamp(16px,1.5vw,19.5px);font-weight:400;line-height:1.62;
  color:var(--cafe-suave);max-width:44ch;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.hero-media{position:relative;z-index:2;width:100%;max-width:466px;margin-inline:auto;}
.hero-photo{
  display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:center;
  border-radius:22px;border:1px solid var(--linea);
  box-shadow:var(--glass-shadow-lift);background:var(--blanco);
}
@media (max-width:767px){
  /* la hero cabe en una pantalla: 100svh menos el header fijo (60px) y el status bar */
  .hero{
    border-radius:0 0 20px 20px;
    min-height:calc(100svh - 64px - var(--sat));
    display:flex;flex-direction:column;
  }
  .hero-inner{
    flex:1;min-height:0;
    display:flex;flex-direction:column;gap:16px;
    padding:30px 0 0;                     /* la foto sangra hasta el borde inferior */
  }
  .hero-content{flex:0 0 auto;}           /* titular + subtítulo + ambos CTA, arriba y completos */
  .hero-eyebrow{margin-bottom:10px;}
  .hero h1{font-size:clamp(30px,8vw,42px);max-width:20ch;}
  .hero-sub{margin-top:14px;max-width:56ch;}
  .hero-ctas{margin-top:22px;}
  /* la foto llena SOLO el espacio restante (flex-basis:0) para que la hero quepa en 100svh */
  .hero-media{
    position:relative;flex:1 1 0;min-height:120px;max-width:none;width:100%;margin:0;overflow:hidden;
    border-radius:22px;border:1px solid var(--linea);box-shadow:var(--glass-shadow-lift);background:var(--blanco);
  }
  .hero-photo{
    position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
    object-fit:cover;object-position:center;border:0;border-radius:0;box-shadow:none;
  }
  .hero::before{width:150px;height:150px;left:-18px;bottom:-14px;opacity:.30;}
  .hero::after{display:none;}
}

/* ===== secciones ===== */
[hidden]{display:none!important;}
section[id],details[id]{scroll-margin-top:92px;}
.section{position:relative;padding:72px 0;overflow:clip;}
.section-alt{background:linear-gradient(180deg,rgba(201,163,92,.10),rgba(226,178,158,.12));}
/* hojas decorativas en las esquinas, alternando lados */
.section::before{
  content:"";position:absolute;top:24px;right:-16px;width:150px;height:150px;
  background-color:var(--leaf);
  -webkit-mask:var(--leaf-mask);mask:var(--leaf-mask);
  opacity:.34;pointer-events:none;
}
.section:nth-of-type(even)::before{top:auto;bottom:18px;right:auto;left:-16px;transform:rotate(180deg);}
.section .wrap{position:relative;}
.eyebrow{
  display:block;text-align:center;
  font-size:13px;font-weight:600;letter-spacing:.30em;text-transform:uppercase;
  color:var(--dorado-texto);margin-bottom:12px;
}
.section-head{margin-bottom:40px;}
.section-head--tight{margin-bottom:24px;}
.section-title{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(31px,4.8vw,50px);line-height:1.12;text-align:center;
}
.section-sub{text-align:center;color:var(--cafe-suave);margin-top:10px;font-size:17px;font-weight:400;}

/* ===== aparición al hacer scroll (una sola vez) ===== */
html.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .38s ease,transform .38s ease;}
html.js-reveal .reveal.in{opacity:1;transform:none;}
html.js-reveal .reveal.stagger{opacity:1;transform:none;}
html.js-reveal .stagger>*{opacity:0;transform:translateY(20px);transition:opacity .38s ease,transform .38s ease;}
html.js-reveal .stagger.in>*{opacity:1;transform:none;}

/* ===== CTA contextual de WhatsApp ===== */
.wa-row{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:rgba(201,163,92,.18);color:var(--cafe);
  border:1px solid rgba(201,163,92,.45);
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease,transform .15s ease;
}
.wa-row:hover{background:var(--dorado);}
.wa-row:active{transform:scale(.94);}
.wa-row svg{width:21px;height:21px;}
.wa-chip{
  position:absolute;top:8px;right:8px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,253,249,.78);color:var(--cafe);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 14px rgba(74,52,40,.22);
  -webkit-tap-highlight-color:transparent;
}
.wa-chip:hover{background:var(--dorado);}
.wa-chip svg{width:22px;height:22px;}

/* ===== franja de vista previa de servicios (home) ===== */
.preview-strip{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 14px;-webkit-overflow-scrolling:touch;
}
.preview-card{
  position:relative;flex:0 0 170px;scroll-snap-align:start;
  border-radius:16px;overflow:hidden;
}
.preview-main{display:block;text-decoration:none;color:var(--cafe);}
.preview-name{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:8px 10px;font-size:15px;font-weight:500;
  text-align:center;line-height:1.25;
}
.preview-more{text-align:center;margin-top:28px;}
@media (min-width:1024px){
  .preview-strip{display:grid;grid-template-columns:repeat(5,1fr);overflow:visible;}
  .preview-card{flex:none;}
}

/* ===== servicios (página): héroe de láser + menú de tratamientos =====
   Mapa de acentos: un color por servicio, reutilizable por cualquier pieza que lo necesite
   (la fila, el chip del índice). Los acentos van en detalles finos —rieles, aros, puntos—
   nunca en texto ni en fondos grandes. */
[data-accent="terra"]{--accent:var(--terra);}
[data-accent="sage"]{--accent:var(--sage);}
[data-accent="olive"]{--accent:var(--olive);}
[data-accent="euca"]{--accent:var(--euca);}
[data-accent="oro"]{--accent:var(--dorado);}
/* Masajes: --cafe-suave es el único color de la paleta que no choca con los cinco de
   arriba (el más cercano queda a ΔE 27; sage y olive ya conviven a ΔE 9). --leaf se
   descartó: cae a ΔE 5 de olive y los dos rieles se leerían igual. */
[data-accent="cacao"]{--accent:var(--cafe-suave);}

/* índice de salto: chips con el punto de color de su servicio */
.svc-jump{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:28px;}
.svc-chip{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;
  border-radius:22px;text-decoration:none;
  background:rgba(201,163,92,.16);border:1px solid rgba(201,163,92,.4);
  font-size:14px;font-weight:500;color:var(--cafe);
  -webkit-tap-highlight-color:transparent;transition:background .2s ease;
}
.svc-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.svc-chip:hover{background:rgba(201,163,92,.3);}

.svc{position:relative;border-radius:18px;margin:14px 0;overflow:hidden;scroll-margin-top:88px;}
/* riel de acento: lo que rompe las cinco barras idénticas de antes */
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);z-index:1;}
.svc[open]::before{width:6px;}
.svc[open]{box-shadow:var(--glass-shadow-lift);}
.svc summary{
  position:relative;display:grid;align-items:center;gap:16px;
  list-style:none;cursor:pointer;padding:16px 22px 16px 26px;
  -webkit-tap-highlight-color:transparent;
}
.svc summary::-webkit-details-marker{display:none;}
.svc summary:focus-visible{outline:2px solid var(--dorado);outline-offset:-3px;}
.svc-head{display:flex;flex-direction:column;gap:4px;min-width:0;}
.svc-title{font-family:var(--font-display);font-size:clamp(21px,3.1vw,27px);font-weight:600;letter-spacing:-.01em;line-height:1.2;}
.svc-tease{font-size:15.5px;font-weight:400;color:var(--cafe-suave);line-height:1.4;}
.svc-chev{flex-shrink:0;width:22px;height:22px;color:var(--dorado);transition:transform .25s ease;}
.svc[open] .svc-chev{transform:rotate(180deg);}

/* fila de menú: miniatura + nombre/gancho + "desde $X" + chevrón */
.svc--row summary{grid-template-columns:auto minmax(0,1fr) auto auto;min-height:96px;}
.svc-thumb{
  width:88px;height:88px;border-radius:14px;object-fit:cover;
  border:2px solid var(--accent);background:var(--blanco);
}
.svc-meta{display:flex;align-items:center;}
.svc-from{
  font-family:var(--font-display);font-size:19px;font-weight:700;
  color:var(--dorado-texto);letter-spacing:-.01em;white-space:nowrap;
}

/* héroe (láser): mismo vidrio y misma paleta, más aire y más foto */
.svc--hero{border-radius:22px;box-shadow:var(--glass-shadow-lift);margin-bottom:0;}
.svc--hero summary{grid-template-columns:minmax(0,1fr) auto;align-items:start;padding:26px 26px 22px 30px;}
.svc--hero .svc-title{font-size:clamp(27px,4vw,38px);}
.svc--hero .svc-tease{font-size:17px;}
.svc-flag{
  font-size:12.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dorado-texto);
}
.svc--hero .svc-chev{margin-top:8px;}
.svc--hero .svc-body{padding:4px 30px 34px;gap:30px;}
@media (min-width:860px){.svc--hero .svc-body{grid-template-columns:minmax(0,440px) 1fr;}}
.svc--hero .svc-media{max-width:none;}
/* los <p> del panel se escriben como `.svc-info .x`: `.svc-info p` (más específico que
   una sola clase) le gana a `.x` suelto y se comería el tamaño y el peso. */
.svc-info .svc-lead{
  font-family:var(--font-display);font-size:clamp(19px,2.4vw,23px);font-weight:600;
  letter-spacing:-.01em;line-height:1.35;margin-top:0;
}

/* arco de progresión del láser: el acento se intensifica de la sesión 1 a la 3.
   Los rgba son --euca (#7d9b8a) con alfa creciente, igual que .ci.accent-euca.
   SIN fotos a propósito: no fabricamos un resultado que no podemos mostrar, y la
   .arc-note de abajo es el freno — 3 sesiones no es un final. */
/* minmax(0,1fr) y no 1fr: con 1fr el mínimo es min-content y a 390px las tres columnas
   se desbordan de la tarjeta en vez de encogerse. */
.arc{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px;}
.arc li{
  display:flex;flex-direction:column;gap:3px;
  border-radius:12px;padding:12px 11px;
  border-top:2px solid var(--accent);background:rgba(125,155,138,.10);
}
.arc li:nth-child(2){border-top-width:3px;background:rgba(125,155,138,.18);}
.arc li:nth-child(3){border-top-width:4px;background:rgba(125,155,138,.26);}
.arc-step{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dorado-texto);}
.arc-say{font-size:14.5px;font-weight:500;line-height:1.3;}
.svc-info .arc-note{margin-top:11px;font-size:13.5px;font-weight:400;color:var(--cafe-suave);line-height:1.5;}

.svc-body{display:grid;gap:24px;padding:4px 22px 28px;grid-template-columns:1fr;}
@media (min-width:860px){
  .svc-body{grid-template-columns:320px 1fr;align-items:start;}
}
.svc[open] .svc-body{animation:svc-in .28s ease both;} /* el kill switch de reduced-motion la anula */
@keyframes svc-in{from{opacity:0;transform:translateY(-6px);}}
.svc-media{border-radius:14px;width:100%;max-width:340px;}
.svc-info .svc-scope{margin-top:20px;}
/* corte entre el héroe y las cuatro filas */
.svc-divider{
  display:flex;align-items:center;gap:16px;margin:34px 0 4px;
  font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cafe-suave);
}
.svc-divider::before,.svc-divider::after{content:"";height:1px;flex:1;background:var(--linea);}

/* móvil: la fila pasa a dos filas internas y el chevrón sale del flujo */
@media (max-width:559px){
  .svc--row summary{
    grid-template-columns:60px minmax(0,1fr);
    grid-template-areas:"thumb head" "thumb meta";
    align-items:start;gap:6px 13px;min-height:92px;padding:14px 44px 14px 22px;
  }
  .svc-thumb{grid-area:thumb;width:60px;height:60px;border-radius:12px;}
  .svc--row .svc-head{grid-area:head;}
  .svc-meta{grid-area:meta;}
  .svc--row .svc-title{font-size:18px;}
  .svc--row .svc-tease{
    font-size:13.5px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .svc-from{font-size:16px;}
  .svc--row .svc-chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);}
  .svc--row[open] .svc-chev{transform:translateY(-50%) rotate(180deg);}
  /* A 390px los cinco chips se iban a TRES líneas (~150px) y empujaban el héroe justo
     lo que el índice venía a ahorrar. Aquí pasa a franja deslizable de una sola línea,
     el mismo patrón de .preview-strip del inicio. El índice es un atajo: las cuatro
     fichas siguen alcanzables desplazando, así que nada queda inaccesible. */
  .svc-jump{
    flex-wrap:nowrap;justify-content:flex-start;
    gap:8px;margin-bottom:22px;
    overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    /* sangra hasta el borde de la pantalla: se ve que hay más al deslizar */
    margin-inline:-20px;padding-inline:20px;
  }
  .svc-jump::-webkit-scrollbar{display:none;}
  .svc-chip{flex:0 0 auto;scroll-snap-align:start;font-size:13.5px;padding:10px 14px;gap:7px;}
  .svc--hero summary{padding:22px 22px 18px 26px;}
  .svc--hero .svc-body{padding:4px 22px 28px;}
  /* la foto es vertical (3:4): en móvil se recorta a cuadrado para no comerse la pantalla */
  .svc--hero .svc-media{aspect-ratio:1/1;}
  .svc--hero .svc-media .ph-img{object-position:center 55%;}
  .arc{gap:6px;}
  .arc li{padding:10px 8px;}
  .arc-step{font-size:10.5px;}
  .arc-say{font-size:12.5px;}
}
.svc-desc{font-size:16.5px;}
.svc-info h4{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.005em;margin-top:20px;}
.svc-info p{font-weight:300;font-size:16px;margin-top:6px;}
.svc-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
/* ===== tira de proceso del facial: pasos numerados en secuencia.
   OJO: no es un antes/después — por eso ambas etiquetas van idénticas
   (el comparador usa dos colores para contrastar antes vs después). ===== */
.steps{list-style:none;display:grid;grid-template-columns:1fr;gap:14px;margin-top:12px;}
@media (min-width:560px){.steps{grid-template-columns:1fr 1fr;}}
.step-media{
  border-radius:14px;width:100%;
  border:1px solid rgba(255,255,255,.6);box-shadow:var(--glass-shadow);
}
.step-tag{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(74,52,40,.85);color:var(--crema);
  font-size:12.5px;font-weight:600;letter-spacing:.5px;
  padding:5px 11px;border-radius:6px;
}

/* ===== precios =====
   align-items:start — cada tarjeta mide lo que mide SU contenido. Con el stretch por
   defecto de la rejilla, la tarjeta más alta de la fila estiraba a las demás y las de
   pocas filas quedaban con un hueco enorme entre la última fila y el enlace del final. */
.price-grid{display:grid;gap:24px;grid-template-columns:1fr;align-items:start;}
@media (min-width:700px){.price-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1080px){.price-grid{grid-template-columns:repeat(3,1fr);}}
.price-card{
  /* Bloque de control = la fila de pestañas (o el <select> del láser) con su separación.
     Vive en variables porque las tarjetas SIN pestañas reservan ese mismo espacio: sin
     él, la primera fila de Masajes y Faciales arrancaba 68px más arriba que las demás. */
  --ctrl-top:16px;--ctrl-h:52px;--ctrl-bottom:12px;
  border-radius:18px;padding:26px 22px; /* 22 y no 24: esos 4px se los queda la columna de etiquetas */
  display:flex;flex-direction:column;
}
.price-card h3{font-family:var(--font-display);font-size:23px;font-weight:600;letter-spacing:-.01em;line-height:1.2;}
.tabs{display:flex;gap:6px;margin-top:var(--ctrl-top);min-height:var(--ctrl-h);background:rgba(74,52,40,.08);border-radius:26px;padding:4px;}
.tab-btn{
  flex:1;min-height:44px;border:none;border-radius:22px;background:transparent;
  font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--cafe);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.tab-btn[aria-selected="true"]{background:var(--cafe);color:var(--crema);font-weight:600;}
.price-list{list-style:none;margin-top:var(--ctrl-bottom);}
/* Tarjetas sin pestañas (Masajes, Faciales): hueco del tamaño EXACTO del bloque de
   pestañas, para que su primera fila quede a la altura de las que sí las tienen.
   Solo a partir de 2 columnas: en móvil no hay tarjeta al lado con la que alinearse
   y el hueco sería un agujero debajo del título. */
@media (min-width:700px){
  .price-card--plain > .price-list{margin-top:calc(var(--ctrl-top) + var(--ctrl-h) + var(--ctrl-bottom));}
}
.price-list li{
  display:flex;align-items:center;gap:8px;
  padding:9px 0;border-bottom:1px solid rgba(74,52,40,.12);font-size:16.5px;
}
.price-list li:last-child{border-bottom:none;}
/* La etiqueta se queda con TODO el ancho sobrante (min-width:0 la deja envolver en vez
   de desbordar) y el precio solo con el suyo natural. A 16px caben en una línea las
   etiquetas largas de ambos idiomas ("Paquete de 10 sesiones", "Cuerpo completo, 90 min");
   las que aun así envuelven llevan el precio centrado contra las dos líneas. */
.price-list li > span:first-child{flex:1 1 auto;min-width:0;font-size:16px;line-height:1.3;text-wrap:pretty;}
.price-list li > .price{flex:0 0 auto;align-self:center;font-size:16.5px;}
.price{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;white-space:nowrap;}
.price-note{padding-top:12px;font-size:14px;color:var(--cafe-suave);}
/* SIN margin-top:auto: el enlace va pegado a la última fila. El aire que sobra cuando
   la pestaña activa es la más corta queda debajo de él, no metido entre fila y enlace. */
.includes-link{
  padding-top:16px;
  display:inline-flex;align-items:center;min-height:44px;
  font-size:15.5px;font-weight:600;color:var(--dorado-texto);text-decoration:none;
}
.includes-link:hover{text-decoration:underline;}
/* vista enfocada (precios.html#precio-<servicio>): una sola tarjeta, centrada.
   La tarjeta no cambia — solo deja de repartirse la rejilla con las demás.
   .price-card fija display:flex, que le gana al display:none del atributo hidden. */
.price-grid.is-focused{grid-template-columns:minmax(0,560px);justify-content:center;}
.price-grid.is-focused .price-card[hidden]{display:none;}
#price-back{margin:0 auto 24px;display:flex;}
#price-back[hidden]{display:none;}
/* ===== láser: la única tarjeta que empieza sin ninguna fila =====
   La línea de contexto dice de entrada lo que la tarjeta no podía decir con solo un
   <select> y una nota —que el precio va por área y cuántas hay—, y de paso le da el
   cuerpo que le faltaba: sin ella la tarjeta se leía como una caja a medio cargar.
   NO se reserva el hueco de las dos filas del área: 137px vacíos entre el <select> y la
   nota se ven peor que la caja corta. Al elegir área, la tarjeta crece hacia abajo y no
   mueve a las vecinas (la rejilla ya no estira: align-items:start). */
.price-lead{margin-top:12px;font-size:14.5px;line-height:1.4;color:var(--cafe-suave);}
.price-card .flow-select{margin:10px 0 0;}

/* ===== confianza =====
   Base de las estrellas: la heredan .rev-summary .stars y .rev-card .stars, que solo
   ajustan tamaño y espaciado — el color sale de aquí. */
.stars{color:var(--dorado);letter-spacing:2px;font-size:18px;}

/* ===== ubicación ===== */
.loc-grid{display:grid;gap:32px;grid-template-columns:1fr;}
@media (min-width:900px){.loc-grid{grid-template-columns:1fr 1.2fr;align-items:center;}}
.loc-info address{font-style:normal;font-size:19px;line-height:1.6;}
.hours{list-style:none;margin:20px 0 26px;max-width:400px;}
.hours li{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(74,52,40,.14);font-size:16.5px;
}
.hours li:last-child{border-bottom:none;}
.map-slot{border-radius:18px;}
.map-embed{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ===== contacto directo ===== */
.contact-list{
  list-style:none;display:grid;gap:14px;grid-template-columns:1fr;
  max-width:520px;margin:0 auto;
}
@media (min-width:800px){.contact-list{grid-template-columns:1fr 1fr;max-width:760px;}}
.contact-list a{
  display:flex;align-items:center;gap:14px;
  border-radius:16px;padding:16px 20px;min-height:56px;
  color:var(--cafe);text-decoration:none;font-size:17px;
}
.contact-list a:hover{color:var(--dorado-texto);}
.contact-list svg{width:22px;height:22px;flex-shrink:0;}

/* ===== franja CTA de WhatsApp ===== */
.cta-band{
  position:relative;overflow:clip;
  background:linear-gradient(140deg,#4a3428 0%,#5d4433 60%,#4a3428 100%);
  color:var(--crema);padding:72px 0;text-align:center;
}
.cta-band::after{
  content:"";position:absolute;right:-22px;bottom:-22px;width:220px;height:220px;
  background-color:var(--leaf);
  -webkit-mask:var(--leaf-mask);mask:var(--leaf-mask);transform:rotate(90deg);
  opacity:.4;pointer-events:none;
}
.cta-band h2{font-family:var(--font-display);font-size:clamp(27px,4.2vw,42px);font-weight:700;letter-spacing:-.02em;}
.cta-band p{margin-top:10px;font-weight:300;color:#e3d7c8;}
.cta-band .btn{margin-top:28px;}

/* ===== footer ===== */
.site-footer{background:var(--cafe);color:var(--crema);padding:56px 0;}
.footer-grid{display:grid;gap:36px;grid-template-columns:1fr;}
@media (min-width:800px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;align-items:start;}}
.footer-brand-row{display:flex;align-items:center;gap:12px;}
/* disco crema detrás del logo: la insignia oscura no se pierde sobre el fondo café */
.footer-logo{width:48px;height:48px;border-radius:50%;background:var(--crema);padding:3px;flex-shrink:0;}
.footer-brand{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:.02em;}
.footer-tag{margin:8px 0 20px;font-size:15.5px;font-weight:300;color:#e3d7c8;}
.footer-links{list-style:none;}
.footer-links a{
  color:var(--crema);text-decoration:none;
  display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:16.5px;
}
.footer-links a:hover{color:var(--dorado);}
.footer-links svg{width:20px;height:20px;flex-shrink:0;}
.footer-bottom{
  margin-top:36px;padding-top:20px;border-top:1px solid rgba(245,239,230,.2);
  font-size:14px;color:#d8cbbd;text-align:center;
}

/* ===== CTA persistente de WhatsApp: barra inferior en móvil, círculo en escritorio ===== */
.wa-float{
  position:fixed;z-index:60;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.wa-float svg{width:30px;height:30px;}
.wa-float:active{transform:scale(.95);}
/* Se quitó la barra inferior fija de WhatsApp: en iOS Safari dejaba un hueco (contenido
   visible entre la barra y la barra de herramientas del navegador). Queda solo la burbuja
   flotante circular, visible en todos los tamaños. */
.wa-bar{display:none;}
.wa-float{display:flex;}

/* ===== intro: la bailarina se dibuja, luego escribe la palabra; una vez por sesión (solo en inicio) ===== */
html.intro-seen #intro{display:none!important;}
#intro{
  position:fixed;inset:0;z-index:200;background:var(--crema);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .4s ease;
}
#intro.intro--out{opacity:0;pointer-events:none;}
.intro-mark{position:relative;width:clamp(260px,58vw,470px);}
/* logo completo (bailarina + tipografía entrelazadas) se "escribe" izq→der, como el video de referencia */
.intro-logo-full{
  display:block;width:100%;height:auto;
  clip-path:inset(0 0 0 0);
  animation:introWrite 1.6s cubic-bezier(.42,.05,.32,1) .2s both;
}
@keyframes introWrite{
  from{clip-path:inset(0 100% 0 0);}
  to{clip-path:inset(0 0 0 0);}
}
/* "pluma" de luz dorada que recorre el trazado, siguiendo el borde del revelado (como el destello del video) */
.intro-pen{
  position:absolute;top:50%;left:0;width:28px;height:28px;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,248,224,.97) 0%,rgba(201,163,92,.62) 38%,rgba(201,163,92,0) 72%);
  filter:drop-shadow(0 0 10px rgba(201,163,92,.8));
  animation:penMove 1.6s cubic-bezier(.42,.05,.32,1) .2s both, penFade 1.6s ease .2s both;
}
@keyframes penMove{from{left:3%;}to{left:97%;}}
@keyframes penFade{0%,100%{opacity:0;}12%,86%{opacity:1;}}
/* destello dorado final */
.intro-spark{
  position:absolute;right:9%;bottom:15%;width:30px;height:30px;
  color:var(--dorado);opacity:0;
  animation:introSpark 1s ease 1.7s;
}
@keyframes introSpark{
  0%{opacity:0;transform:scale(.3) rotate(0deg);}
  45%{opacity:1;transform:scale(1) rotate(18deg);}
  100%{opacity:0;transform:scale(.55) rotate(28deg);}
}

/* ===== entrada del hero en cada carga (título → sub → CTAs) ===== */
@media (prefers-reduced-motion:no-preference){
  .hero-content>*{opacity:0;transform:translateY(16px);animation:riseIn .5s ease forwards;}
  .hero-content>*:nth-child(1){animation-delay:.05s;}
  .hero-content>*:nth-child(2){animation-delay:.15s;}
  .hero-content>*:nth-child(3){animation-delay:.25s;}
  .hero-content>*:nth-child(4){animation-delay:.35s;}
}
@keyframes riseIn{to{opacity:1;transform:none;}}

/* números tabulares: el conteo de precios no mueve el layout */
.price{font-variant-numeric:tabular-nums;}

/* ===== comparador antes/después ===== */
.ba{border-radius:18px;padding:12px 12px 6px;}
.ba-frame{
  position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;
  touch-action:none;cursor:ew-resize;--ba:50%;
  background:repeating-linear-gradient(45deg,#d9c7ac 0 14px,#e2d3bc 14px 28px);
}
.ba-layer{position:absolute;inset:0;}
.ba-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ba-layer .ba-tag{z-index:2;}
.ba-after{
  background:repeating-linear-gradient(45deg,#f0e5cf 0 14px,#f6eedd 14px 28px);
  clip-path:inset(0 0 0 var(--ba));
}
.ba-tag{
  position:absolute;top:10px;
  background:rgba(74,52,40,.85);color:var(--crema);
  font-size:12.5px;font-weight:600;letter-spacing:.5px;
  padding:5px 11px;border-radius:6px;
}
.ba-before .ba-tag{left:10px;}
.ba-after .ba-tag{right:10px;background:rgba(138,100,40,.92);}
.ba-divider{
  position:absolute;top:0;bottom:0;left:var(--ba);width:2px;
  background:#fffdf9;box-shadow:0 0 10px rgba(74,52,40,.45);
  transform:translateX(-1px);pointer-events:none;
}
.ba-handle{
  position:absolute;top:50%;left:var(--ba);transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.85);
  background:rgba(255,253,249,.92);color:var(--cafe);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(74,52,40,.35);cursor:ew-resize;
  -webkit-tap-highlight-color:transparent;
}
.ba-handle svg{width:22px;height:22px;}
.ba-caption{
  text-align:center;padding:12px 6px 8px;font-size:15.5px;font-weight:500;
}
.ba-single{max-width:560px;margin-inline:auto;}
.ba-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:6px 6px 10px;}
.ba-foot .btn{min-height:48px;}

/* ===== recompensas: tres iconos en círculos de vidrio ===== */
.rewards-grid{display:grid;gap:24px;grid-template-columns:1fr;}
@media (min-width:768px){.rewards-grid{grid-template-columns:repeat(3,1fr);}}
.reward-card{
  border-radius:18px;padding:36px 26px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--cafe);text-decoration:none;
}
.reward-icon{
  width:88px;height:88px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(201,163,92,.28),rgba(255,253,249,.5));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 20px rgba(74,52,40,.14);
  color:var(--cafe);position:relative;
}
.reward-icon svg{width:40px;height:40px;}
/* pequeña ramita botánica sage sobre el círculo (decorativa) */
.reward-icon::after{
  content:"";position:absolute;top:-6px;right:-2px;width:26px;height:26px;pointer-events:none;
  background-color:var(--leaf);
  -webkit-mask:var(--leaf-mask-mini);mask:var(--leaf-mask-mini);
  opacity:.4;
}
.reward-card h3{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.005em;}
.reward-card p{font-size:16px;font-weight:300;}
.title-link{color:inherit;text-decoration:none;}
.title-link:hover{color:var(--dorado-texto);}
.rules-list{list-style:none;max-width:640px;margin:0 auto;}
.rules-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid rgba(74,52,40,.12);font-size:17px;
}
.rules-list li:last-child{border-bottom:none;}
.rules-list li::before{content:"✦";color:var(--dorado-texto);flex-shrink:0;line-height:1.7;}

/* ===== carrusel de reseñas ===== */
.rev-layout{display:grid;gap:32px;grid-template-columns:1fr;align-items:center;}
@media (min-width:900px){.rev-layout{grid-template-columns:1fr 1.5fr;}}
.rev-summary{text-align:center;}
@media (min-width:900px){.rev-summary{text-align:left;}}
.rev-score{font-family:var(--font-display);font-size:72px;font-weight:700;line-height:1;letter-spacing:-.03em;}
.rev-summary .stars{font-size:24px;letter-spacing:4px;display:block;margin:6px 0;}
.rev-count{color:var(--cafe-suave);font-size:16.5px;}
.rev-summary .btn{margin-top:20px;}
.rev-chips{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
@media (min-width:900px){.rev-chips{justify-content:flex-start;}}
.rev-chip{
  font-size:13.5px;font-weight:500;color:var(--cafe);
  background:rgba(201,163,92,.16);border:1px solid rgba(201,163,92,.4);
  border-radius:16px;padding:5px 13px;
}
.rev-viewport{overflow:hidden;border-radius:18px;}
.rev-track{display:flex;transition:transform .4s ease;touch-action:pan-y;}
.rev-card{
  flex:0 0 100%;border-radius:18px;padding:32px 30px;
  display:flex;flex-direction:column;gap:12px;
}
.rev-card .stars{color:var(--dorado);letter-spacing:3px;font-size:17px;}
.rev-card blockquote{
  font-family:var(--font-display);font-style:italic;font-size:19px;line-height:1.5;
}
.rev-card blockquote footer{
  font-family:var(--font-sans);font-style:normal;font-size:14.5px;
  color:var(--cafe-suave);margin-top:10px;
}
.rev-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}
.rev-btn{
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(74,52,40,.3);
  background:rgba(255,253,249,.7);color:var(--cafe);font-size:22px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .2s ease;
}
.rev-btn:hover:not(:disabled){background:var(--dorado);}
.rev-btn:disabled{opacity:.35;cursor:default;}

/* ===== flujo de reserva (reservar.html) ===== */
/* indicador de pasos: flexbox, sin posicionamiento absoluto, línea conectora entre pasos */
.stepper{
  list-style:none;display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:nowrap;margin:0 0 36px;
}
.step{display:flex;align-items:center;gap:9px;color:var(--cafe-suave);}
.step-num{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:28px;height:28px;border-radius:50%;font-size:14px;font-weight:600;
  background:rgba(74,52,40,.10);color:var(--cafe-suave);
  transition:background .2s ease,color .2s ease;
}
.step-label{font-size:15px;font-weight:500;white-space:nowrap;}
.step:not(:last-child)::after{
  content:"";width:26px;height:2px;border-radius:2px;
  background:rgba(74,52,40,.18);margin-left:1px;
}
.step.is-active{color:var(--cafe);}
.step.is-active .step-num{background:var(--cafe);color:var(--crema);}
.step.is-active .step-label{font-weight:600;}
.step.is-done{color:var(--cafe);}
.step.is-done .step-num{background:var(--dorado);color:#3c2b20;}
@media (max-width:479px){
  .step-label{display:none;}
  .step:not(:last-child)::after{width:18px;}
}
.flow-q{
  text-align:center;font-family:var(--font-display);
  font-size:clamp(21px,3vw,26px);font-weight:600;letter-spacing:-.01em;margin-bottom:26px;
}
.flow-grid{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);}
/* mismo motivo que .brand-grid: con 6 servicios, 3×2 en vez de 5+1 */
@media (min-width:768px){.flow-grid{grid-template-columns:repeat(3,1fr);}}
.flow-card{
  border-radius:16px;overflow:hidden;padding:0;cursor:pointer;
  font-family:var(--font-sans);color:var(--cafe);text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.flow-card .ph{display:flex;}
.flow-card-name{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:8px 10px;font-size:15px;font-weight:500;line-height:1.25;
}
.flow-opts{display:grid;gap:14px;max-width:560px;margin:0 auto;}
.flow-opt{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-radius:16px;padding:16px 22px;min-height:64px;cursor:pointer;
  font-family:var(--font-sans);color:var(--cafe);text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.flow-opt-label{display:flex;flex-direction:column;gap:2px;}
.flow-opt-label strong{font-size:17px;font-weight:600;}
.flow-opt-label small{font-size:13.5px;color:var(--cafe-suave);}
.flow-opt .price{font-size:19px;}
/* ===== láser: selector de área + las dos opciones de esa área ===== */
.flow-select{
  display:block;width:100%;max-width:560px;margin:0 auto 16px;
  min-height:52px;padding:14px 46px 14px 18px;
  border-radius:14px;border:1px solid var(--linea);color:var(--cafe);
  font-family:var(--font-sans);font-size:16.5px; /* ≥16px: evita el zoom al enfocar en iOS */
  -webkit-appearance:none;appearance:none;
  background:var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a3428' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
  background-size:18px 18px;
}
.flow-select:focus-visible{outline:2px solid var(--dorado);outline-offset:2px;}
/* .flow-opts fija display:grid, que le gana al display:none del atributo hidden */
.flow-opts--duo[hidden]{display:none;}
.flow-opts--duo{grid-template-columns:1fr 1fr;}
.flow-opts--duo .flow-opt{
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:18px 14px;
}
.flow-opts--duo .flow-opt-label{align-items:center;}
/* nota del servicio bajo la lista de precios (p.ej. el 20% de hombre en láser) */
.flow-note{max-width:560px;margin:14px auto 0;text-align:center;font-size:14px;color:var(--cafe-suave);}
.flow-summary{
  max-width:520px;margin:0 auto;border-radius:20px;
  padding:38px 32px;text-align:center;
  display:flex;flex-direction:column;gap:8px;align-items:center;
}
.flow-summary h3{font-family:var(--font-display);font-size:27px;font-weight:600;letter-spacing:-.01em;}
.flow-sum-opt{font-size:17px;}
.flow-sum-price{font-family:var(--font-display);font-size:46px;font-weight:700;color:var(--dorado-texto);letter-spacing:-.02em;line-height:1.1;}
.flow-sum-note{font-size:15px;color:var(--cafe-suave);}
.flow-summary .btn{margin-top:14px;}
#flow-back{margin:30px auto 0;display:flex;}

/* ===== términos ===== */
.terms-card{border-radius:18px;padding:28px 26px;margin:16px 0;}
.terms-card h2{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.005em;margin-bottom:8px;}
.terms-card p{font-size:16.5px;font-weight:300;margin-top:6px;}
.terms-note{
  text-align:center;margin-top:28px;font-size:14.5px;
  color:var(--cafe-suave);font-style:italic;
}

/* ===== nota de la fundadora (home, después del hero) ===== */

/* ===== franja de marca: descubre Body Wellness ===== */
.brand-intro{text-align:center;margin-bottom:34px;}
.brand-intro .eyebrow{margin-bottom:14px;}
.brand-statement{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(26px,4vw,44px);line-height:1.12;max-width:16ch;margin:0 auto;
}
/* .brand-intro-photo se retiró: body-spa.png se mudó al héroe de láser de servicios.html */
.brand-grid{display:grid;gap:18px;grid-template-columns:1fr;}
@media (min-width:600px){.brand-grid{grid-template-columns:repeat(2,1fr);}}
/* 6 servicios: en 5 columnas el sexto quedaba solo en una fila. 3×2 reparte parejo. */
@media (min-width:960px){.brand-grid{grid-template-columns:repeat(3,1fr);}}
.brand-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  border-radius:16px;padding:26px 18px;text-decoration:none;color:var(--cafe);
}
.brand-thumb{position:relative;width:92px;height:92px;flex-shrink:0;}
.brand-thumb img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.7);box-shadow:0 6px 16px rgba(74,52,40,.16);}
.brand-badge{
  position:absolute;right:-4px;bottom:-4px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--cafe);
  background:var(--blanco);box-shadow:0 3px 10px rgba(74,52,40,.2);
  border:2px solid var(--terra);
}
.brand-badge svg{width:20px;height:20px;}
.brand-badge.accent-sage{border-color:var(--sage);}
.brand-badge.accent-olive{border-color:var(--olive);}
.brand-badge.accent-terra{border-color:var(--terra);}
.brand-badge.accent-euca{border-color:var(--euca);}
.brand-badge.accent-cacao{border-color:var(--cafe-suave);}
.brand-card-name{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.005em;line-height:1.2;}
.brand-card-blurb{font-size:14px;font-weight:400;color:var(--cafe-suave);line-height:1.4;}

/* ===== chips de contacto: icono café sobre tinte natural (acento variado) ===== */
.ci{width:40px;height:40px;border-radius:12px;flex-shrink:0;color:var(--cafe);
  display:flex;align-items:center;justify-content:center;}
.ci svg{width:22px;height:22px;}
.ci.accent-sage{background:rgba(138,154,123,.20);}
.ci.accent-olive{background:rgba(168,176,142,.24);}
.ci.accent-terra{background:rgba(196,123,90,.18);}
.ci.accent-euca{background:rgba(125,155,138,.20);}

/* ===== indicador de pasos: anillo de acento natural por paso (dos tonos) ===== */
.stepper .step:nth-child(1) .step-num{border:2px solid var(--terra);}
.stepper .step:nth-child(2) .step-num{border:2px solid var(--sage);}
.stepper .step:nth-child(3) .step-num{border:2px solid var(--euca);}