/* === css/fuentes.css === */
/* Radiance · tipografías alojadas en el tema (4.1d). Sustituyen a la hoja de Google Fonts: mismas familias, mismos pesos.
   Inter y Manrope son fuentes variables (licencia SIL OFL 1.1, ver fonts/LEEME.txt): un archivo por subconjunto cubre todos los pesos.
   Pesos pedidos antes a Google: Manrope 400–600 e Inter 300–600. unicode-range igual al de Google: «latin-ext» solo se descarga si la página usa esos caracteres.
   Las rutas son relativas a css/ (este archivo se une a cada paquete css/pg-<página>.css en el build). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === css/v5.css === */
/* =========================================================
   Radiance v5 — look "Hannah Spa" (Framer), estructura sencilla
   Medido: Gilda Display 400 (titulares, interlineado 1.15,
   -0.03/-0.04em) + Inter (16px, gris cálido)
   Secciones alternas blanco / crema · una sección verde bosque
   Botones píldora con flecha (terracota → mostaza) · tarjetas 8px
   Los estilos de las secciones antiguas (productos, nosotras, reseñas,
   sedes, FAQ, cierre y pie) viven en v5-legado.css (solo propuestas hero-*).
   ========================================================= */
:root {
  --blanco: #FFFFFF;
  --crema: #FAF5EE;
  --crema-2: #F3EBDF;
  --verde: #215E4F;       /* verde de las piezas de Radiance */
  --verde-hondo: #17463A;
  --verde-claro: #E3EEE9;
  --acento: #CE893B;
  --acento-hondo: #A86A28;
  --acento-suave: #F5E6D0;
  --promo: #C63B2D;       /* insignia y precio de promoción (4.18): blanco encima y sobre blanco cumplen AA */
  --promo-suave: #FBE7E3;
  /* Botón principal mostaza «Seda cálida» (4.27, propuesta D que eligió Cristian el 29 oct): degradado cálido en diagonal,
     brillo suave arriba, reflejo de 1 px en el borde y sombra del mismo tono; al pasar, se «enciende» una luz por arriba.
     Respecto de la maqueta, los tonos van un 4 % más hondos, el brillo termina al 35 % del alto y la luz se queda en el
     borde superior: con el CSS exacto el texto blanco bajaba a 4,39:1 (3,38:1 en hover); así queda en 4,94:1 o más en
     toda la zona del texto, en los dos estados (5,3:1 en el centro). Un solo componente: .boton--principal, el botón
     del header y el «hover» mostaza de los demás botones. El brillo va como primera capa del fondo; la luz, en ::before
     (un degradado no se anima). */
  --boton-fondo: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 35%), linear-gradient(115deg, #8A5116 0%, #9C6126 38%, #955A1F 62%, #7E4618 100%);
  --boton-fondo-hover: var(--boton-fondo);
  --boton-sombra: inset 0 1px 0 rgba(255, 236, 206, .45), 0 12px 26px -12px rgba(160, 96, 30, .85), 0 3px 8px -4px rgba(80, 44, 10, .4);
  --boton-sombra-hover: inset 0 1px 0 rgba(255, 236, 206, .6), 0 18px 34px -12px rgba(176, 108, 36, .9), 0 3px 8px -4px rgba(80, 44, 10, .4);
  --boton-luz: radial-gradient(60% 60% at 50% 0%, rgba(255, 214, 150, .3), rgba(255, 214, 150, 0) 40%);
  --texto: #1F1A15;
  --texto-60: rgba(31, 26, 21, .62);
  --texto-45: rgba(31, 26, 21, .6); /* subido de .45 por contraste AA */
  --claro: #FFFFFF;
  --claro-80: rgba(255, 255, 255, .82);
  --claro-20: rgba(255, 255, 255, .2);

  --serif: "Manrope", "Inter", sans-serif; /* respaldo serif: "Gilda Display" (ver ?v=5.1) */
  --sans: "Inter", system-ui, sans-serif;
  --t-h1: clamp(2.5rem, 4.6vw, 4rem);
  --t-h2: clamp(2rem, 3.4vw, 3.25rem);
  /* Escala tipográfica (4.26): cada componente toma un escalón y nada baja de 12 px. Rige en el celular; desde 901 px
     suben tres escalones para mantener la proporción del escritorio. */
  --t-min: 12px;       /* insignias en mayúsculas (PROMO), contadores y duración de los videos */
  --t-nota: 13px;      /* mínimo del contenido: notas, etiquetas, precios tachados, «por sesión» y enlaces del pie */
  --t-chico: 14px;     /* líneas cortas de las tarjetas, «A partir de», «Ver más» y botón del menú */
  --t-texto: 16px;     /* texto, descripción del carrusel y botones */
  --t-entrada: 17px;   /* entradilla del carrusel en escritorio y títulos de las tarjetas pequeñas (¿Por qué?) */
  --t-precio: 18px;    /* precio principal de una tarjeta */
  --t-tarjeta: 20px;   /* nombre de una tarjeta (Manrope 600) */

  --contenedor: 1320px;
  --pad-x: 28px;
  --esp-seccion: 80px;
  --esp-junta: 32px;      /* 4.33: arriba de una sección blanca que sigue a otra blanca */
  --borde-tarjeta: rgba(31, 26, 21, .08); /* 4.33: borde fino de las tarjetas sobre fondo blanco */
  --r-tarjeta: 8px;
  --r-pildora: 99px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-hover: cubic-bezier(.44, 0, .56, 1);
}
@media (min-width: 901px) { :root { --t-chico: 15px; --t-precio: 20px; --t-tarjeta: 22px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--blanco); color: var(--texto); font-family: var(--sans); font-size: 16px; line-height: 1.45; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, figure, dl, dd, ul, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } /* sin border-radius: el anillo sigue la forma del elemento, sin saltos */
[id] { scroll-margin-top: 80px; }
.contenedor { width: 100%; max-width: calc(var(--contenedor) + var(--pad-x) * 2); margin-inline: auto; padding-inline: var(--pad-x); }
.seccion { padding: var(--esp-seccion) 0; }
/* 4.33 · Fondo blanco en toda la web: entre dos secciones blancas seguidas, la segunda empieza más cerca (hueco de
   112 px en escritorio y 80 en el celular, en vez de 160 y 112). La banda verde de Resultados (.ad-c) lleva su espacio.
   Especificidad de una clase: las secciones que fijan su propio espacio arriba lo conservan. */
:where(.seccion:not(.ad-c), .mv-zonas, .sv-lista, .pm) + .seccion:where(:not(.ad-c)) { padding-top: var(--esp-junta); }

/* ---------- Íconos (Lucide) ---------- */
.lucide { width: 18px; height: 18px; stroke-width: 1.75; flex: none; }

/* ---------- Tipografía ---------- */
.eti { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pildora); background: var(--acento-suave); color: var(--acento-hondo); font-size: var(--t-nota); font-weight: 500; letter-spacing: 0; }
.eti .lucide { width: 12px; height: 12px; }
.titulo { margin-top: 16px; font-family: var(--serif); font-size: var(--t-h2); font-weight: 400; line-height: 1.15; letter-spacing: -0.04em; }
.titulo em { font-style: normal; color: var(--acento-hondo); }
.parrafo { margin-top: 16px; max-width: 46ch; color: var(--texto-60); }
.cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: var(--r-pildora); font-size: var(--t-texto); font-weight: 600; white-space: nowrap; transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover), box-shadow .25s var(--curva), transform .25s var(--curva); }
.boton--principal { position: relative; isolation: isolate; flex-direction: row-reverse; padding: 0 20px 0 16px; background: var(--boton-fondo); color: var(--blanco); box-shadow: var(--boton-sombra); }
.boton--principal:hover { background: var(--boton-fondo-hover); box-shadow: var(--boton-sombra-hover); transform: translateY(-2px) scale(1.01); }
.boton--principal:active { transform: none; }
/* 4.27: la luz de arriba se enciende al pasar (capa detrás del texto: isolation en el botón, z-index -1 en la capa) */
.boton--principal::before, .nav__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--boton-luz); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.boton--principal:hover::before, .nav__cta:hover::before { opacity: 1; }
.boton--principal:focus-visible, .nav__cta:focus-visible { outline-color: var(--acento-hondo); } /* anillo a 3,9:1 sobre blanco */
.boton__icono.lucide, .boton .lucide { width: 16px; height: 16px; }
.boton--secundario { background: var(--claro-20); color: var(--claro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.boton--secundario:hover { background: var(--claro); color: var(--texto); }
.boton--oscuro { background: var(--verde); color: var(--claro); }
.boton--oscuro:hover { background: var(--boton-fondo); }
.boton--contorno { background: var(--crema-2); color: var(--texto); }
.boton--contorno:hover { background: var(--boton-fondo); color: var(--blanco); }
/* Celular (4.20b): botones con 48 px de zona táctil */
@media (max-width: 900px) { .boton { min-height: 48px; } }
/* 4.33 · Botones de texto más limpios y más altos: 52 px en escritorio y en el celular, sin la flecha. Los íconos con
   significado (regalo, copiar, Waze, mapa, WhatsApp) se quedan, como íconos de línea. Más fuerte que las medidas de cada
   sección, para que todos los botones midan lo mismo. «Cotiza y reserva» de la cabecera, 44 px en escritorio. */
body.v5 .boton { height: 52px; min-height: 52px; padding-inline: 28px; }
body.v5 .boton .lucide-arrow-right, body.v5 .boton .lucide-arrow-left, body.v5 .boton [data-lucide="arrow-right"], body.v5 .boton [data-lucide="arrow-left"] { display: none; }
@media (min-width: 901px) { body.v5 .nav .nav__cta { height: 44px; padding-inline: 20px; } }
@media (prefers-reduced-motion: reduce) { .boton, .nav__cta, .boton--principal::before, .nav__cta::before { transition: none; } .boton--principal:hover, .nav__cta:hover { transform: none; } }
/* 4.40 · Casilla propia en toda la web, con el dibujo de .bv-priv__caja (blog) y .ct-priv__caja (contacto): toda casilla
   nativa toma este estilo. Las que ya dibujan su caja ocultan el input con una regla posterior y no cambian. */
input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: inline-block; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid rgba(31, 26, 21, .24); border-radius: 7px; background: var(--blanco) no-repeat center / 15px 15px; vertical-align: middle; cursor: pointer; transition: background-color .2s var(--curva-hover), border-color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
input[type="checkbox"]:hover { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(206, 137, 59, .14); }
input[type="checkbox"]:checked { border-color: var(--acento); background-color: var(--acento); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.enlace { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; color: var(--texto-60); }
.enlace:hover { color: var(--acento-hondo); }

/* =========================================================
   NAV — transparente sobre el hero, blanca al bajar
   ========================================================= */
.nav { position: sticky; top: 0; z-index: 50; background: var(--blanco); }
.nav__fila { max-width: calc(var(--contenedor) + var(--pad-x) * 2); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; padding: 0 var(--pad-x); }
.nav__logo img { width: 100px; }
.nav__links { display: flex; gap: 28px; margin-left: auto; font-size: 13.5px; color: var(--texto-60); }
.nav__links a:hover { color: var(--texto); }
.nav__acciones { display: flex; align-items: center; gap: 12px; }
.nav__resumen { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--crema); }
.nav__contador { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pildora); background: var(--acento); color: var(--blanco); font-size: var(--t-min); font-weight: 600; line-height: 17px; text-align: center; letter-spacing: 0; }
.nav__cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; border-radius: var(--r-pildora); background: var(--boton-fondo); color: var(--blanco); box-shadow: var(--boton-sombra); font-size: var(--t-chico); font-weight: 600; transition: background-color .2s var(--curva-hover), box-shadow .25s ease, transform .25s ease; }
.nav__cta:hover { background: var(--boton-fondo-hover); box-shadow: var(--boton-sombra-hover); transform: translateY(-2px) scale(1.01); }
.nav__cta:active { transform: none; }

/* =========================================================
   HERO DE PROMOCIONES — base (la home usa la variante C de hero-variantes.css)
   ========================================================= */
.hero { position: relative; height: clamp(580px, calc(100svh - 64px - 64px), 820px); margin-bottom: 60px; background: var(--crema); }
.hero__pista { position: absolute; inset: 0; overflow: hidden; }
.promo { position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; max-width: calc(var(--contenedor) + var(--pad-x) * 2); margin-inline: auto; padding: 0 var(--pad-x) 70px; opacity: 0; visibility: hidden; transition: opacity .8s var(--curva), visibility 0s linear .8s; }
.promo.activa { opacity: 1; visibility: visible; transition: opacity .8s var(--curva), visibility 0s; }
.promo__texto { position: relative; z-index: 2; max-width: 600px; }
.promo__eti { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: var(--r-pildora); background: var(--acento-suave); color: var(--acento-hondo); font-size: var(--t-nota); font-weight: 500; letter-spacing: 0; }
.promo__eti .lucide { box-sizing: content-box; width: 12px; height: 12px; padding: 5px; border-radius: 50%; background: var(--acento); color: var(--blanco); }
.promo__titulo { margin-top: 20px; font-family: var(--serif); font-size: clamp(2.75rem, 5.2vw, 4.75rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.035em; }
.promo__titulo em { font-style: normal; color: var(--acento-hondo); }
.promo__sub { margin-top: 18px; max-width: 44ch; font-size: var(--t-entrada); color: var(--texto-60); }
.promo__beneficios { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 14px; }
.promo__beneficios li { display: flex; align-items: center; gap: 10px; }
.promo__beneficios .lucide { box-sizing: content-box; width: 16px; height: 16px; padding: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--acento); color: var(--acento-hondo); }
.promo__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.promo__ctas .boton { height: 50px; padding-inline: 24px 22px; }
.promo__ctas .boton--secundario { background: var(--blanco); color: var(--texto); }
.promo__ctas .boton--secundario:hover { background: var(--boton-fondo); color: var(--blanco); }
.promo__nota { margin-top: 16px; font-size: var(--t-nota); color: var(--texto-45); }
.promo.activa .promo__texto > * { animation: sube .8s var(--curva) both; }
.promo.activa .promo__texto > *:nth-child(2) { animation-delay: .07s; }
.promo.activa .promo__texto > *:nth-child(3) { animation-delay: .14s; }
.promo.activa .promo__texto > *:nth-child(4) { animation-delay: .21s; }
.promo.activa .promo__texto > *:nth-child(5) { animation-delay: .28s; }
@keyframes sube { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes llenar { to { width: 100%; } }

/* Imagen circular: se recorta contra el borde inferior del hero */
.promo__circulo { position: relative; justify-self: end; align-self: end; width: min(100%, 620px); aspect-ratio: 1; min-height: 0; margin-bottom: -120px; }
.promo__circulo::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; background: var(--acento-suave); opacity: .7; }
.promo__circulo img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--curva); }
.promo.activa .promo__circulo img { transform: none; }

.tratamientos { padding-top: var(--esp-seccion); }

/* =========================================================
   TRATAMIENTOS · flechas y carriles comunes
   ========================================================= */
.tratamientos { padding-bottom: var(--esp-seccion); }
.flechas { display: flex; gap: 8px; }
.flecha { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--crema); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.flecha:hover { background: var(--acento); color: var(--blanco); }
.carril { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(var(--pad-x), calc((100% - var(--contenedor)) / 2)); scroll-padding-inline: max(var(--pad-x), calc((100% - var(--contenedor)) / 2)); }
.carril::-webkit-scrollbar { display: none; }

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.testimonios { padding-bottom: var(--esp-seccion); }

/* ---------- Aviso y barra móvil ---------- */
.aviso { position: fixed; left: 50%; bottom: 28px; z-index: 80; padding: 12px 20px; border-radius: var(--r-pildora); background: var(--verde); color: var(--claro); font-size: 14px; white-space: nowrap; opacity: 0; transform: translate(-50%, 20px); transition: opacity .4s var(--curva), transform .4s var(--curva); pointer-events: none; }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.barra-movil { display: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .nav__links { display: none; }
}
@media (max-width: 900px) {
  :root { --pad-x: 18px; --esp-seccion: 56px; --esp-junta: 24px; }
  .nav__fila { height: 58px; }
  .nav__cta { display: none; }
  .hero { height: auto; margin-bottom: 0; padding-bottom: 20px; }
  .hero__pista { position: relative; display: grid; }
  .promo { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 22px; padding: 22px var(--pad-x) 8px; }
  .promo__circulo { align-self: center; justify-self: auto; width: min(78vw, 360px); margin: 18px 0 0; }
  .promo__circulo::before { inset: -14px; }
  .promo__titulo { font-size: 2.5rem; margin-top: 14px; }
  .promo__sub { font-size: var(--t-texto); margin-top: 12px; }
  .promo__beneficios { gap: 8px 14px; font-size: 13px; margin-top: 16px; }
  .promo__beneficios .lucide { padding: 6px; width: 14px; height: 14px; }
  .promo__ctas { margin-top: 20px; }
  .promo__ctas .boton { flex: 1 1 auto; height: 46px; }
  .tratamientos { padding-top: var(--esp-seccion); }
  .cabecera { margin-bottom: 24px; }
  .cabecera .flechas { display: none; }
  body { padding-bottom: 76px; }
  .barra-movil { position: fixed; z-index: 60; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; padding: 6px; border-radius: var(--r-pildora); background: var(--verde); transform: translateY(140%); transition: transform .5s var(--curva); }
  .barra-movil.activa { transform: none; }
  .barra-movil .boton { flex: 1; height: 48px; }
  .barra-movil__wa { flex: none; display: grid; place-items: center; width: 48px; border-radius: 50%; background: var(--blanco); color: var(--verde); }
}

/* ---------- Títulos en Manrope (sans) ---------- */
:root:not(.titulos-serif) :is(h1, h2, h3, [class*="titulo"], [class*="nombre"], .fh__q, .pf__frase) { font-weight: var(--peso-titulo, 500); letter-spacing: var(--tracking-titulo, -0.035em); }

/* === css/hero-variantes.css === */
/* =========================================================
   Radiance v5 — header + hero (propuesta C, la que usa la home)
   Se carga después de v5.css y se activa con la clase hv-c en <body>.
   Las propuestas A, B, D y las tarjetas de la C están en hero-legado.css.
   ========================================================= */

/* Dos logos en el header: la propuesta decide cuál se ve */
.nav__logo .logo-claro { display: none; }

/* =========================================================
   C · INMERSIVA (estilo DepilZone): foto a pantalla completa,
   header integrado y tarjetas de cristal dentro del hero
   ========================================================= */
.hv-c .nav { position: fixed; left: 0; right: 0; background: transparent; transition: background-color .35s var(--curva-hover); }
.hv-c .nav__logo .logo-color { display: none; }
.hv-c .nav__logo .logo-claro { display: block; }
.hv-c .nav__links { position: absolute; left: 50%; transform: translateX(-50%); gap: 4px; margin: 0; padding: 5px; border-radius: var(--r-pildora); background: rgba(255, 255, 255, .14); color: var(--blanco); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .35s var(--curva-hover), color .35s var(--curva-hover); }
.hv-c .nav__links a { padding: 8px 16px; border-radius: var(--r-pildora); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.hv-c .nav__links a:hover { background: var(--blanco); color: var(--texto); }
.hv-c .nav__resumen { background: rgba(255, 255, 255, .14); color: var(--blanco); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hv-c .nav__cta { background: var(--blanco); color: var(--texto); box-shadow: none; }
.hv-c .nav__cta:hover { background: var(--boton-fondo-hover); color: var(--blanco); } /* 4.20b: mostaza del componente (v5.css) */
.hv-c.con-scroll .nav { background: var(--blanco); }
.hv-c.con-scroll .nav__logo .logo-color { display: block; }
.hv-c.con-scroll .nav__logo .logo-claro { display: none; }
.hv-c.con-scroll .nav__links { background: var(--crema); color: var(--texto-60); }
.hv-c.con-scroll .nav__resumen { background: var(--crema); color: var(--texto); }
.hv-c.con-scroll .nav__cta { background: var(--boton-fondo); color: var(--blanco); box-shadow: var(--boton-sombra); }

.hv-c .hero { height: clamp(660px, 100svh, 940px); margin-bottom: 0; background: #1A130D; color: var(--blanco); }
.hv-c .promo { display: block; max-width: none; padding: 0; }
.hv-c .promo__circulo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; }
.hv-c .promo__circulo::before { display: none; }
.hv-c .promo__circulo img { border-radius: 0; object-position: var(--foco, 50% 40%); transform: scale(1.05); transition: transform 7s linear; }
.hv-c .promo.activa .promo__circulo img { transform: scale(1); }
/* Velo: garantiza contraste del texto blanco (≥ 4.5:1) */
.hv-c .promo::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(20, 14, 8, .6) 0%, rgba(20, 14, 8, 0) 24%),
  linear-gradient(90deg, rgba(20, 14, 8, .82) 0%, rgba(20, 14, 8, .55) 38%, rgba(20, 14, 8, .08) 70%),
  linear-gradient(0deg, rgba(20, 14, 8, .78) 0%, rgba(20, 14, 8, 0) 38%); }
.hv-c .promo__texto { position: absolute; z-index: 2; left: max(var(--pad-x), calc((100% - var(--contenedor)) / 2)); bottom: 190px; max-width: 620px; }
.hv-c .promo__eti { background: rgba(255, 255, 255, .14); color: var(--blanco); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hv-c .promo__titulo em { color: #F0C38A; }
.hv-c .promo__sub, .hv-c .promo__nota { color: rgba(255, 255, 255, .8); }
.hv-c .promo__beneficios .lucide { color: #F0C38A; box-shadow: inset 0 0 0 1.5px rgba(240, 195, 138, .7); }
.hv-c .promo__ctas .boton--secundario { background: rgba(255, 255, 255, .16); color: var(--blanco); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hv-c .promo__ctas .boton--secundario:hover { background: var(--blanco); color: var(--texto); }
.hv-c .tratamientos { padding-top: var(--esp-seccion); }

/* ---------- Puntos con cargador (hero inmersivo sin tarjetas) ---------- */
.hero__control { position: absolute; z-index: 5; right: max(var(--pad-x), calc((100% - var(--contenedor)) / 2)); bottom: 48px; display: flex; align-items: center; gap: 14px; padding: 6px 18px 6px 6px; border-radius: var(--r-pildora); background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hero__play { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--blanco); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.hero__play:hover { background: rgba(255, 255, 255, .24); }
/* Deja libre la esquina del botón flotante de WhatsApp (solo escritorio) */
@media (min-width: 900px) { .hero__control { right: calc(max(var(--pad-x), (100% - var(--contenedor)) / 2) + 72px); } }
.hero__play .lucide { width: 15px; height: 15px; fill: currentColor; stroke-width: 0; }
.hero__icono-play, .hero.pausa .hero__icono-pausa { display: none; }
.hero.pausa .hero__icono-play { display: block; margin-left: 2px; }
.hero__puntos { position: relative; display: flex; align-items: center; gap: 10px; }
.hero__punto { position: relative; width: 10px; height: 10px; padding: 0; border-radius: var(--r-pildora); background: rgba(255, 255, 255, .42); overflow: hidden; transition: width .5s var(--curva), background-color .3s var(--curva-hover); }
.hero__punto:hover { background: rgba(255, 255, 255, .7); }
.hero__punto::before { content: ""; position: absolute; inset: -10px; }
.hero__punto i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--blanco); }
.hero__punto.activa { width: 64px; background: rgba(255, 255, 255, .28); }
.hero__punto.activa i { animation: llenar var(--duracion, 7s) linear forwards; }
.hero.pausa .hero__punto.activa i, .hero.fuera .hero__punto.activa i, .hero.tocando .hero__punto.activa i { animation-play-state: paused; }
.hero.sin-autoplay .hero__punto.activa i { animation: none; width: 100%; }
.hv-c .hero:has(.hero__puntos) .promo__texto { bottom: 96px; }
.hv-c .hero:has(.hero__puntos) .promo::after { background:
  linear-gradient(180deg, rgba(20, 14, 8, .6) 0%, rgba(20, 14, 8, 0) 24%),
  linear-gradient(90deg, rgba(20, 14, 8, .82) 0%, rgba(20, 14, 8, .55) 38%, rgba(20, 14, 8, .08) 70%),
  linear-gradient(0deg, rgba(20, 14, 8, .6) 0%, rgba(20, 14, 8, 0) 30%); }

/* =========================================================
   Móvil
   ========================================================= */
@media (max-width: 900px) {
  .hv-c .nav__links { display: none; }
  .hv-c .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
  .hv-c .hero__pista { position: absolute; inset: 0; display: block; }
  .hv-c .promo { position: absolute; inset: 0; display: block; padding: 0; }
  .hv-c .promo__circulo { margin: 0; width: 100%; }
  .hv-c .promo::after { background: linear-gradient(180deg, rgba(20, 14, 8, .55) 0%, rgba(20, 14, 8, 0) 18%), linear-gradient(0deg, rgba(20, 14, 8, .9) 0%, rgba(20, 14, 8, .65) 48%, rgba(20, 14, 8, .1) 80%); }
  .hv-c .promo__texto { left: var(--pad-x); right: var(--pad-x); bottom: 128px; }
  .hv-c .hero:has(.hero__puntos) .promo__texto { bottom: 92px; }
  .hero__control { right: var(--pad-x); bottom: 28px; padding: 5px 14px 5px 5px; gap: 12px; }
  .hero__play { width: 32px; height: 32px; }
  .hv-c .hero:has(.hero__puntos) { min-height: 92svh; }
  /* Móvil: la foto ocupa la parte superior y se funde con el fondo donde va el texto */
  .hv-c .hero:has(.hero__puntos) .promo__circulo { inset: 0 0 auto; height: 60%; }
  .hv-c .hero:has(.hero__puntos) .promo__circulo img { object-position: var(--foco-movil, var(--foco, 50% 40%)); }
  .hv-c .hero:has(.hero__puntos) .promo::after { background: linear-gradient(180deg, rgba(20, 14, 8, .55) 0%, rgba(20, 14, 8, 0) 16%, rgba(20, 14, 8, 0) 34%, #1A130D 60%); }
}

/* ---------- Texto solo para lectores de pantalla y buscadores (H1 del slide 1) ---------- */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Video de fondo del slide 1 (js/hero-video.js): solo escritorio. Cubre el slide como la foto (object-fit: cover)
   y aparece con un fundido cuando ya se reproduce; mientras tanto se ve la foto. La capa oscura (.promo::after)
   sigue por encima, así el texto se lee igual. */
.promo__video { display: none; }
@media (min-width: 901px) {
  .promo__video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; opacity: 0; transition: opacity .9s var(--curva); }
  .promo__circulo--video .promo__video { opacity: 1; }
}

/* === css/footer-home.css === */
/* Footer (home v5) · propuesta A depurada: sin enlaces repetidos del header ni CTA */
.pf { position: relative; overflow: hidden; margin-top: 0; padding-top: 88px; background: radial-gradient(120% 80% at 85% 0%, #2C2017 0%, #1A130D 60%); color: rgba(255, 255, 255, .62); font-size: 14px; border-radius: 28px 28px 0 0; }
.pf__arriba { display: grid; grid-template-columns: 1.15fr 2fr; gap: 64px; }
.pf__marca img { width: 140px; height: auto; }
.pf__frase { margin-top: 26px; max-width: 19ch; font-family: var(--serif); font-size: 28px; line-height: 1.2; letter-spacing: -0.03em; color: var(--blanco); }
.pf__contacto { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 28px; }
.pf__contacto a { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .82); transition: color .2s var(--curva-hover); }
.pf__contacto a:hover { color: #F0C38A; }
.pf__contacto .lucide, .pf__contacto svg { width: 17px; height: 17px; flex: none; color: #F0C38A; }
.pf__redes { display: flex; gap: 8px; margin-top: 26px; }
.pf__redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: #F0C38A; box-shadow: inset 0 0 0 1px rgba(240, 195, 138, .18); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.pf__redes a:hover { background: #F0C38A; color: #1A130D; }
.pf__redes svg { width: 18px; height: 18px; }

.pf__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.pf__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pf__titulo { margin-bottom: 8px; font-family: var(--serif); font-size: 19px; letter-spacing: -0.02em; color: #F0C38A; }
.pf__col a { transition: color .2s var(--curva-hover); }
.pf__col a:hover { color: #F0C38A; }
.pf__dir { color: rgba(255, 255, 255, .86); line-height: 1.5; }
.pf__ref { font-size: 13px; color: rgba(255, 255, 255, .5); }
.pf__horario { display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 4px; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(240, 195, 138, .14); font-size: 13px; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
.pf__horario dt { color: rgba(255, 255, 255, .42); }
.pf__llegar { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: #F0C38A; }
.pf__llegar .lucide { width: 14px; height: 14px; }

.pf__legal { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 80px; padding-top: 24px; border-top: 1px solid rgba(240, 195, 138, .14); font-size: var(--t-nota); color: rgba(255, 255, 255, .42); }
.pf__legal div { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.pf__legal a:hover { color: #F0C38A; }
.pf__libro { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pildora); box-shadow: inset 0 0 0 1px rgba(240, 195, 138, .3); color: rgba(255, 255, 255, .8); }
.pf__libro .lucide { width: 14px; height: 14px; color: #F0C38A; }
/* Logotipo gigante (SVG de la marca) recortado por el borde inferior; el degradado dorado se aplica con máscara */
.pf__gigante { display: block; width: min(calc(100% - var(--pad-x) * 2), var(--contenedor)); aspect-ratio: 488 / 129; margin: 64px auto 0; transform: translateY(14%); background: linear-gradient(180deg, rgba(240, 195, 138, .34) 0%, rgba(240, 195, 138, .05) 85%); -webkit-mask: url(../img/radiance-palabra-flores.svg) center / contain no-repeat; mask: url(../img/radiance-palabra-flores.svg) center / contain no-repeat; pointer-events: none; }

/* Botón flotante de WhatsApp (escritorio; en móvil ya está en la barra inferior) */
.wa-flota { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: var(--blanco); box-shadow: 0 8px 24px rgba(37, 211, 102, .35); transition: transform .3s var(--curva); }
.wa-flota:hover { transform: scale(1.06); }
.wa-flota svg { width: 30px; height: 30px; }
.barra-movil__wa svg { width: 24px; height: 24px; }

@media (max-width: 1100px) {
  .pf__arriba { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 899px) {
  .pf { padding-top: 64px; border-radius: 22px 22px 0 0; }
  .pf__frase { font-size: 24px; }
  .pf__cols { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .pf__servicios { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
  .pf__servicios .pf__titulo { grid-column: 1 / -1; }
  .pf__legal { margin-top: 56px; flex-direction: column; align-items: flex-start; }
  .pf__gigante { margin-top: 32px; background: linear-gradient(180deg, rgba(240, 195, 138, .5) 0%, rgba(240, 195, 138, .12) 90%); }
}
@media (max-width: 480px) {
  .pf { padding-bottom: 28px; }
  .pf__cols { gap: 36px 18px; }
  .pf__dir { font-size: 13.5px; }
  .pf__horario { column-gap: 10px; }
  .pf__legal div { gap: 12px 18px; }
}

/* === css/cierre-home.css === */
/* Cierre + footer (home v5) · propuesta A: foto a sangre que se funde con el footer */
:root { --cf-oscuro: #1A130D; --cf-oscuro-2: #241A13; --cf-dorado: #F0C38A; }

/* ---------- Bloque continuo cierre + footer ---------- */
.cf { position: relative; z-index: 1; overflow: hidden; border-radius: 28px 28px 0 0; background: radial-gradient(120% 60% at 85% 0%, #2C2017 0%, var(--cf-oscuro) 60%); color: var(--blanco); }
.cf .pf { margin: 0; padding-top: 0; border-radius: 0; background: none; }
/* filete fino que separa el cierre del footer: el footer se sigue leyendo como footer */
.cf .pf::before { content: ""; display: block; width: min(var(--contenedor), calc(100% - var(--pad-x) * 2)); height: 1px; margin: 0 auto 72px; background: rgba(240, 195, 138, .18); }

/* ---------- Piezas comunes del cierre ---------- */
.cf__titulo { font-family: var(--serif); font-size: clamp(3rem, 7.2vw, 7rem); font-weight: 400; line-height: .98; letter-spacing: -0.045em; color: var(--blanco); }
.cf__titulo em { font-style: normal; color: var(--cf-dorado); }
.cf__linea { max-width: 34ch; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.cf__boton { height: 54px; padding: 0 26px 0 22px; }
.cf__boton .boton__icono { transition: transform .3s var(--curva); }
.cf__boton:hover .boton__icono { transform: translateX(3px); }


/* =========================================================
   A · Foto a sangre que se funde con el footer
   ========================================================= */
.cf-a { background: var(--cf-oscuro); }
.cf-a__cierre { position: relative; display: flex; align-items: flex-end; min-height: min(720px, 86vh); padding-bottom: 80px; }
.cf-a__foto { position: absolute; inset: 0; overflow: hidden; }
.cf-a__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; animation: cf-a-zoom 26s ease-in-out infinite alternate; }
@keyframes cf-a-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }
.cf-a__foto::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(26, 19, 13, .15) 0%, rgba(26, 19, 13, .1) 30%, rgba(26, 19, 13, .7) 66%, rgba(26, 19, 13, .94) 86%, var(--cf-oscuro) 100%),
  linear-gradient(90deg, rgba(26, 19, 13, .55) 0%, rgba(26, 19, 13, .15) 45%, rgba(26, 19, 13, 0) 65%); }
.cf-a__texto { position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 48px; }
.cf-a__accion { display: grid; justify-items: start; gap: 24px; padding-bottom: 10px; }


@media (max-width: 899px) {
  .cf { border-radius: 22px 22px 0 0; }
  .cf .pf { padding-top: 0; }
  .cf .pf::before { margin-bottom: 56px; }
  .cf__titulo { font-size: clamp(2.9rem, 13.5vw, 4.4rem); line-height: 1; }
  .cf__linea { font-size: 16px; }
  .cf__boton { justify-self: start; } /* 4.26: al ancho de su texto y a la izquierda, alineado con el título y el texto */
  .cf-a__cierre { display: block; min-height: 0; padding-bottom: 56px; }
  .cf-a__foto { position: relative; inset: auto; height: 420px; }
  .cf-a__foto img { object-position: 62% 60%; }
  .cf-a__foto::after { background: linear-gradient(180deg, rgba(26, 19, 13, 0) 30%, rgba(26, 19, 13, .7) 70%, var(--cf-oscuro) 100%); }
  .cf-a__texto { display: block; margin-top: -150px; }
  .cf-a__accion { gap: 22px; margin-top: 18px; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .cf-a__foto img { animation: none; } }

/* === css/home-ui.css === */
/* =========================================================
   Home v5 · capa de interfaz (se carga la última)
   1. Animaciones de entrada  2. Foco visible  3. Microinteracciones
   4. Header: scroll, enlace activo y menú móvil  5. Móvil / barra inferior
   Solo la usa index.html; las páginas de propuestas no la cargan.
   ========================================================= */

/* ---------- 1. Animaciones de entrada ----------
   js/home-ui.js añade html.anim (solo con JS y sin prefers-reduced-motion) y
   la clase .visible al entrar en pantalla. Variantes: data-anim="fade" (solo opacidad)
   y data-anim="zoom" (scale 1.06 → 1, para imágenes dentro de un marco con overflow oculto). */
html.anim [data-anim]:not(.visible) { opacity: 0; transform: translateY(32px); }
html.anim [data-anim="fade"]:not(.visible) { transform: none; }
html.anim [data-anim="zoom"]:not(.visible) { transform: scale(1.06); }
html.anim [data-anim].visible:not(.anim-fin) { transition: opacity .8s var(--curva), transform .8s var(--curva); transition-delay: calc(var(--i, 0) * 90ms + var(--retraso, 0s)); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.anim [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 2. Foco visible ---------- */
/* Sobre fondos oscuros el anillo pasa a dorado claro */
.hero :focus-visible, .sd-g :focus-visible, .cf :focus-visible, .te-modal :focus-visible,
body:not(.con-scroll) .nav__fila > :focus-visible, body:not(.con-scroll) .nav__acciones :focus-visible, body:not(.con-scroll) .nav__links :focus-visible { outline-color: #F0C38A; }
/* Tarjetas dentro de carriles con overflow oculto: el anillo va por dentro para que no se recorte */
.trat-card__enlace:focus-visible, .zh__card:focus-visible { outline: 3px solid #F0C38A; outline-offset: -3px; }
.zh__card:focus-visible { outline-color: var(--acento); }
.tes-card:focus-visible { outline: none; }
.tes-card:focus-visible .tes-card__media { outline: 3px solid var(--acento); outline-offset: -3px; }
.fh__btn:focus-visible { outline-offset: 2px; }

/* ---------- 3. Microinteracciones (discretas: color y un leve desplazamiento de la flecha) ---------- */
.boton .lucide-arrow-right, .boton .lucide-arrow-up-right { transition: transform .3s var(--curva); }
.boton:hover .lucide-arrow-right, .boton:focus-visible .lucide-arrow-right { transform: translateX(3px); }
.trat-card__ver .lucide { transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover), transform .3s var(--curva); }
.trat-card__enlace:hover .trat-card__ver .lucide, .trat-card__enlace:focus-visible .trat-card__ver .lucide { background: var(--acento); transform: translateX(3px); }
/* Sin saltos de escala: el play y el botón de WhatsApp solo cambian de color */
.tes-card:hover .te-play, .tes-card:focus-visible .te-play { transform: translate(-50%, -50%); }
.wa-flota { transition: background-color .25s var(--curva-hover), box-shadow .25s var(--curva-hover); }
.wa-flota:hover { transform: none; background: #1EBE5B; box-shadow: 0 8px 24px rgba(37, 211, 102, .45); }
.pf__llegar .lucide { transition: transform .3s var(--curva); }
.pf__llegar:hover .lucide { transform: translate(2px, -2px); }
.flecha:active, .hero__play:active, .nav__resumen:active, .nav__menu:active { background-color: var(--acento-hondo); color: var(--blanco); }

/* ---------- 4. Header ---------- */
/* Transición suave al bajar (.con-scroll): fondo, filete inferior y logos en fundido */
.hv-c .nav { transition: background-color .35s var(--curva-hover), box-shadow .35s var(--curva-hover); }
.hv-c.con-scroll .nav { box-shadow: 0 1px 0 rgba(31, 26, 21, .08); }
.nav__logo { position: relative; display: block; }
.hv-c .nav__logo .logo-color, .hv-c .nav__logo .logo-claro,
.hv-c.con-scroll .nav__logo .logo-color, .hv-c.con-scroll .nav__logo .logo-claro { display: block; transition: opacity .35s var(--curva-hover); }
.hv-c .nav__logo .logo-color { position: absolute; inset: 0; opacity: 0; }
.hv-c.con-scroll .nav__logo .logo-color { opacity: 1; }
.hv-c.con-scroll .nav__logo .logo-claro { opacity: 0; }
.hv-c .nav__resumen, .hv-c .nav__cta, .nav__menu { transition: background-color .3s var(--curva-hover), color .3s var(--curva-hover), box-shadow .25s ease, transform .25s ease; } /* 4.40: con sombra y subida, como en v5.css */
.hv-c .nav__resumen:hover { background: rgba(255, 255, 255, .26); }
.hv-c.con-scroll .nav__resumen:hover { background: var(--crema-2); }

/* Enlace activo (sección visible), en la píldora de escritorio */
.hv-c .nav__links a.activo { background: rgba(255, 255, 255, .2); color: var(--blanco); }
.hv-c.con-scroll .nav__links a.activo { background: var(--blanco); color: var(--texto); }
.hv-c .nav__links a:hover { background: var(--blanco); color: var(--texto); }
/* 4.20b · Sobre la foto del carrusel la píldora del menú es de cristal oscuro: el texto blanco se lee sobre cualquier foto
   (antes, un blanco al 14 %: sobre las zonas claras, Productos, Promociones, Quiénes somos, Sedes y Blog casi no se veían) */
@media (min-width: 1101px) { .hv-c:not(.con-scroll):not(.pg-int) .nav__links { background: rgba(20, 14, 8, .6); } }

/* Botón de menú móvil (aparece cuando los enlaces no caben) */
.nav__menu { display: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--blanco); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hv-c.con-scroll .nav__menu { background: var(--crema); color: var(--texto); }
.nav__menu:hover { background: rgba(255, 255, 255, .26); }
.hv-c.con-scroll .nav__menu:hover { background: var(--crema-2); }
.nav__menu .lucide { width: 19px; height: 19px; }
.nav__menu-cerrar, .menu-abierto .nav__menu-abrir { display: none; }
.menu-abierto .nav__menu-cerrar { display: block; }

@media (max-width: 1100px) {
  html.js .nav__menu { display: grid; }
  /* Los enlaces del header pasan a ser un panel desplegable bajo la barra */
  .hv-c .nav .nav__links { position: absolute; top: calc(100% + 6px); left: var(--pad-x); right: var(--pad-x); display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px; border-radius: 18px; background: var(--blanco); color: var(--texto); font-size: 16px; box-shadow: 0 18px 44px rgba(31, 26, 21, .16); -webkit-backdrop-filter: none; backdrop-filter: none; transform: translateY(-6px); opacity: 0; visibility: hidden; transition: opacity .25s var(--curva), transform .25s var(--curva), visibility 0s linear .25s; }
  .hv-c .nav.menu-abierto .nav__links { transform: none; opacity: 1; visibility: visible; transition: opacity .25s var(--curva), transform .25s var(--curva), visibility 0s; }
  .hv-c .nav .nav__links a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 12px; color: var(--texto); }
  .hv-c .nav .nav__links a:hover, .hv-c .nav .nav__links a.activo { background: var(--crema); color: var(--texto); }
  .hv-c .nav .nav__links a.activo { color: var(--acento-hondo); }
  .hv-c .nav .nav__links :focus-visible { outline-color: var(--acento); outline-offset: -2px; }
}
@media (min-width: 1101px) { .nav__menu { display: none !important; } }

/* ---------- 5. Móvil ---------- */
@media (max-width: 900px) {
  /* Reservar sigue visible en móvil, en versión compacta */
  .nav .nav__cta { display: inline-flex; height: 36px; padding: 0 14px; }
  .nav__acciones { gap: 8px; }
  .nav__resumen, .nav__menu { width: 36px; height: 36px; }
  .nav__logo img { width: 92px; }
  /* La barra inferior no tapa contenido: el espacio de reserva va dentro del footer oscuro
     (antes era un padding blanco en <body> que quedaba como franja bajo el footer) */
  body { padding-bottom: 0; }
  .cf .pf { padding-bottom: 28px; }
  .aviso { bottom: 84px; width: max-content; max-width: calc(100% - 32px); white-space: normal; text-align: center; }
}
@media (max-width: 360px) {
  .nav .nav__cta { padding: 0 12px; }
  .nav__logo img { width: 84px; }
}

/* Header: sobre el banner es estático (se va con el scroll, logo grande); al pasar el banner aparece fijo y blanco bajando desde arriba */
.hv-c .nav { position: absolute; top: 0; }
.hv-c.con-scroll .nav { position: fixed; animation: nav-baja .45s var(--curva) both; }
@keyframes nav-baja { from { transform: translateY(-100%); } to { transform: none; } }
.hv-c .nav__logo { transform-origin: left top; }
.hv-c:not(.con-scroll) .nav__logo { transform: translateY(6px) scale(2); }
@media (max-width: 900px) { .hv-c:not(.con-scroll) .nav__logo { transform: translateY(4px) scale(1.45); } }
@media (prefers-reduced-motion: reduce) { .hv-c.con-scroll .nav { animation: none; } }
.hv-c.con-scroll.nav-sale .nav { animation: nav-sube .34s var(--curva) both; }
@keyframes nav-sube { from { transform: none; } to { transform: translateY(-100%); } }

/* Parallax (js/parallax.js): las fotos con recorrido se agrandan un poco para que nunca asome el borde */
@media (min-width: 901px) {
  .con-parallax .hero { overflow: hidden; }
  .con-parallax .sd-g .sd-fg__foto img, .con-parallax .cf-a__foto img { scale: 1.14; }
  .con-parallax .sd-g .sd-fg__foto, .con-parallax .cf-a__foto { overflow: hidden; }
}

/* Áreas táctiles de 44px en móvil sin cambiar el tamaño visual */
@media (max-width: 1100px) {
  .nav__resumen, .nav__menu, .nav .nav__cta { position: relative; }
  .nav__resumen::after, .nav__menu::after, .nav .nav__cta::after { content: ""; position: absolute; inset: -4px; }
}
.hero__punto { position: relative; }
.hero__punto::after { content: ""; position: absolute; inset: -18px -6px; }
.hero__play { position: relative; }
.hero__play::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }

/* Ícono del botón «Cotiza y reserva» del header: css/carrito.css, sección 5 (4.20) */

/* ---------- Menú móvil: panel que baja desde arriba (js/home-ui.js arma .mm con los enlaces del header) ---------- */
.mm { position: fixed; inset: 0; z-index: 1000; }
.mm[hidden] { display: none; }
html.mm-bloqueo { overflow: hidden; }
.mm__velo { position: absolute; inset: 0; background: rgba(31, 26, 21, .42); opacity: 0; transition: opacity .38s var(--curva); }
.mm--abierto .mm__velo { opacity: 1; }
.mm__hoja { position: absolute; inset: 0 0 auto 0; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 24px; border-radius: 0 0 28px 28px; background: var(--blanco); color: var(--texto); box-shadow: 0 24px 60px rgba(31, 26, 21, .18); transform: translateY(-104%); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.mm--abierto .mm__hoja { transform: none; }
.mm--saliendo .mm__hoja { transition: transform .36s cubic-bezier(.55, 0, .7, .2); }
.mm--saliendo .mm__velo { transition-duration: .3s; }
.mm__cab { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 8px; }
.mm__logo img { display: block; width: 104px; height: auto; }
.mm__cerrar { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--acento-suave, #f5e6d0); border-radius: 50%; background: var(--blanco); color: var(--texto); transition: background-color .2s var(--curva-hover), transform .3s var(--curva); }
.mm__cerrar svg { width: 20px; height: 20px; }
.mm__cerrar:hover { background: var(--crema); transform: rotate(90deg); }
.mm__lista { list-style: none; margin: 0; padding: 0; }
.mm__item { border-bottom: 1px solid rgba(31, 26, 21, .08); opacity: 0; transform: translateY(-10px); transition: opacity .35s var(--curva), transform .45s var(--curva); }
.mm--abierto .mm__item { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i, 0) * .04s); }
.mm--saliendo .mm__item { transition-duration: .2s; transition-delay: 0s; }
.mm__enlace { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 0 4px; border: 0; background: none; color: var(--texto); font-family: var(--serif); font-size: 21px; font-weight: 400; letter-spacing: -.03em; text-align: left; text-decoration: none; cursor: pointer; transition: color .2s var(--curva-hover); }
.mm__enlace:hover, .mm__enlace.mm__actual { color: var(--acento-hondo); }
.mm__enlace svg { width: 20px; height: 20px; flex: none; color: rgba(31, 26, 21, .5); transition: transform .3s var(--curva); }
.mm__abre[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--curva); }
.mm__abre[aria-expanded="true"] + .mm__sub { grid-template-rows: 1fr; }
.mm__sub-in { overflow: hidden; display: flex; flex-direction: column; }
.mm__abre[aria-expanded="true"] + .mm__sub .mm__sub-in { padding-bottom: 10px; }
.mm__subenlace { display: flex; align-items: center; min-height: 46px; padding: 0 16px; margin-left: 4px; border-left: 2px solid var(--acento-suave, #f5e6d0); color: var(--texto); font-size: 16px; text-decoration: none; transition: color .2s var(--curva-hover), border-color .2s var(--curva-hover); }
.mm__subenlace:hover, .mm__subenlace.mm__actual { color: var(--acento-hondo); border-left-color: var(--acento); }
.mm :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (min-width: 1101px) { .mm { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .mm__velo, .mm__hoja, .mm__item, .mm__sub, .mm__cerrar, .mm__enlace svg { transition: none !important; }
}

/* =========================================================
   4.31 · Cabecera en todas las páginas: logo de 150 px (104 en el celular) y menú con efecto vidrio (como DepilZone)
   - Logo con la misma medida y proporción en todas las páginas, centrado en la fila con el menú (sin el agrandado
     de la portada).
   - Menú: píldora translúcida con desenfoque, borde fino y sombra suave. Sobre fondo claro (páginas internas,
     carrusel de key visuals, cabecera fija) el velo es más blanco y el texto oscuro: con el 60 % de blanco el texto
     cumple AA aunque debajo pase una foto oscura (con 15–25 % no llegaba). Sobre la foto oscura de la portada sin
     promos, velo tenue y texto blanco. La página actual va en una píldora sólida; en un submenú se marca su botón.
   - Sin backdrop-filter: fondo semiopaco legible.
   ========================================================= */
body.v5 .nav .nav__logo { transform: none; }
body.v5 .nav .nav__logo img { width: 150px; height: auto; }
@media (min-width: 901px) { body.v5 .nav .nav__fila { height: 76px; } }
@media (max-width: 900px) { body.v5 .nav .nav__logo img { width: 104px; } }

@media (min-width: 1101px) {
  body.v5.hv-c .nav .nav__fila .nav__links { border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .6); color: var(--texto); box-shadow: 0 8px 24px -12px rgba(31, 26, 21, .28); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
  body.v5.hv-c .nav .nav__fila .nav__links > a, body.v5.hv-c .nav .nav__fila .nav__sub-btn { color: inherit; }
  body.v5.hv-c .nav .nav__fila .nav__links > a:hover, body.v5.hv-c .nav .nav__fila .nav__sub-btn:hover, body.v5.hv-c .nav .nav__fila .nav__sub.abierto .nav__sub-btn { background: rgba(255, 255, 255, .85); color: var(--texto); }
  /* Página actual: píldora sólida café con texto blanco */
  body.v5.hv-c .nav .nav__fila .nav__links > a[aria-current="page"], body.v5.hv-c .nav .nav__fila .nav__links > a.activo, body.v5.hv-c .nav .nav__fila .nav__sub-btn.activo { background: var(--texto); color: var(--blanco); }
  /* Cabecera fija al bajar: el mismo vidrio, algo más opaco */
  body.v5.hv-c.con-scroll .nav .nav__fila .nav__links, body.v5.hv-c.pg-int .nav .nav__fila .nav__links { border-color: rgba(31, 26, 21, .06); background: rgba(250, 245, 238, .78); }
  /* Sobre la foto oscura de la portada sin promos: velo tenue, texto blanco y la actual en blanco */
  body.v5.hv-c:not(.con-scroll):not(.pg-int):not(.hero-kv) .nav .nav__fila .nav__links { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .16); color: var(--blanco); }
  body.v5.hv-c:not(.con-scroll):not(.pg-int):not(.hero-kv) .nav .nav__fila .nav__links > a[aria-current="page"], body.v5.hv-c:not(.con-scroll):not(.pg-int):not(.hero-kv) .nav .nav__fila .nav__sub-btn.activo { background: var(--blanco); color: var(--texto); }
  body.v5.hv-c .nav .nav__fila .nav__links :focus-visible { outline-color: var(--acento-hondo); }
}
body.v5.hv-c.con-scroll .nav, body.v5.hv-c.pg-int header.nav { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.v5.hv-c .nav .nav__fila .nav__links { background: rgba(255, 255, 255, .92); }
  body.v5.hv-c:not(.con-scroll):not(.pg-int):not(.hero-kv) .nav .nav__fila .nav__links { background: rgba(20, 14, 8, .6); }
  body.v5.hv-c.con-scroll .nav, body.v5.hv-c.pg-int header.nav { background: var(--blanco); }
}
/* Cabecera clara en escritorio (3 nov 2026, pedido de Cristian): los enlaces forman parte de la cabecera, sin la píldora
   aislada con sombra. Solo en los estados claros; sobre el vídeo oscuro de la portada se queda como estaba. */
@media (min-width: 1101px) {
  body.v5.hv-c.pg-int .nav .nav__fila .nav__links, body.v5.hv-c.con-scroll .nav .nav__fila .nav__links,
  body.v5.hv-c.hero-kv .nav .nav__fila .nav__links, body.v5.hv-c.cyber-cab .nav .nav__fila .nav__links {
    padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--texto) !important;
  }
  body.v5.hv-c.pg-int .nav .nav__links a.activo, body.v5.hv-c.con-scroll .nav .nav__links a.activo,
  body.v5.hv-c.hero-kv .nav .nav__links a.activo, body.v5.hv-c.cyber-cab .nav .nav__links a.activo { background: transparent !important; color: var(--acento-hondo) !important; }
  body.v5.hv-c.pg-int .nav .nav__links a:hover, body.v5.hv-c.con-scroll .nav .nav__links a:hover,
  body.v5.hv-c.hero-kv .nav .nav__links a:hover, body.v5.hv-c.cyber-cab .nav .nav__links a:hover { background: var(--crema) !important; }
}

/* === css/verde-secciones.css === */
/* Verde de marca en las secciones oscuras (Sedes y cierre + footer) · home v5 */
:root { --verde-noche: #10302A; --verde-noche-2: #163D35; }
/* ---------- Sedes en verde noche ---------- */
.sd-g { background: var(--verde-noche); }
.sd-g > .sd-fg__media, .sd-g .sd-fg__mapa { background: var(--verde-noche-2); }
.sd-g .sd-fg__foto::after { background: linear-gradient(270deg, rgba(16, 48, 42, 0) 72%, rgba(16, 48, 42, .55) 100%); }
.sd-g__sede.activo { background: rgba(240, 195, 138, .06); }
@media (max-width: 760px) { .sd-g .sd-fg__foto::after { background: linear-gradient(0deg, rgba(16, 48, 42, .5) 0%, rgba(16, 48, 42, 0) 35%); } }

/* ---------- Cierre + footer en verde noche ---------- */
:root { --cf-oscuro: #10302A; --cf-oscuro-2: #163D35; }
.cf, .cf-a { background: radial-gradient(120% 60% at 85% 0%, #1D4A40 0%, var(--verde-noche) 60%); }
.cf-a__foto::after { background:
  linear-gradient(180deg, rgba(16, 48, 42, .15) 0%, rgba(16, 48, 42, .1) 30%, rgba(16, 48, 42, .7) 66%, rgba(16, 48, 42, .94) 86%, var(--verde-noche) 100%),
  linear-gradient(90deg, rgba(16, 48, 42, .55) 0%, rgba(16, 48, 42, .15) 45%, rgba(16, 48, 42, 0) 65%); }
@media (max-width: 899px) { .cf-a__foto::after { background: linear-gradient(180deg, rgba(16, 48, 42, 0) 30%, rgba(16, 48, 42, .7) 70%, var(--verde-noche) 100%); } }
.pf__redes a:hover { color: var(--verde-noche); }


/* === css/depilacion-mujer.css === */
/* =========================================================
   Depilación láser · Para mujer (web v5)
   Se carga después de v5.css, hero-variantes.css, home-ui.css y verde-secciones.css.
   1. Header de página interna (blanco desde el inicio)  2. Hero corto
   3. Cotizador  4. Antes de tu sesión  5. Móvil
   ========================================================= */

:root { --dm-texto-acento: #8F5A22; } /* mostaza oscuro con contraste AA sobre blanco y crema */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 1. Header de página interna ----------
   Reutiliza el header de la home (clase hv-c + js/home-ui.js), pero aquí no hay hero oscuro:
   el estado blanco (.con-scroll de la home) se fija para siempre, sin animaciones de entrada/salida. */
body.v5.hv-c.pg-int .nav { position: sticky !important; top: 0; left: auto; right: auto; background: var(--blanco); box-shadow: 0 1px 0 rgba(31, 26, 21, .08); animation: none !important; transform: none !important; }
body.v5.hv-c.pg-int .nav__logo { transform: none; }
body.v5.hv-c.pg-int .nav__logo .logo-color { display: block; position: static; opacity: 1; }
body.v5.hv-c.pg-int .nav__logo .logo-claro { display: none; }
body.v5.hv-c.pg-int .nav__resumen,
body.v5.hv-c.pg-int .nav__menu { background: var(--crema); color: var(--texto); }
body.v5.hv-c.pg-int .nav__resumen:hover,
body.v5.hv-c.pg-int .nav__menu:hover { background: var(--crema-2); }
body.v5.hv-c.pg-int .nav__cta { background: var(--boton-fondo); color: var(--blanco); }
body.v5.hv-c.pg-int .nav__cta:hover { background: var(--boton-fondo-hover); } /* 4.40: el mismo degradado; con un color liso el degradado se iba de golpe y se veía blanco 0,3 s */
@media (min-width: 1101px) {
  body.v5.hv-c.pg-int .nav__links { background: var(--crema); color: var(--texto-60); }
  body.v5.hv-c.pg-int .nav__links a.activo { background: var(--blanco); color: var(--texto); }
  body.v5.hv-c.pg-int .nav__links a:hover { background: var(--blanco); color: var(--texto); }
}
body.v5.hv-c.pg-int .nav :focus-visible { outline-color: var(--acento-hondo); } /* 4.27: anillo a 3,9:1 sobre blanco */
/* Al agregar una zona, el carrito del header late una vez */
.nav__resumen--pulso { animation: dm-pulso .6s var(--curva); }
.nav__resumen--pulso .nav__contador { animation: dm-salto .6s var(--curva); }
@keyframes dm-pulso { 0% { box-shadow: 0 0 0 0 rgba(206, 137, 59, .45); } 100% { box-shadow: 0 0 0 12px rgba(206, 137, 59, 0); } }
@keyframes dm-salto { 0%, 100% { transform: none; } 40% { transform: scale(1.35); } }

/* ---------- 2. Hero corto ---------- */
.dm-hero { background: var(--crema); overflow: hidden; }
.dm-hero__rejilla { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 56px; padding-top: 28px; padding-bottom: 36px; }
.dm-migas ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--texto-60); }
.dm-migas li + li::before { content: "/"; margin-right: 6px; color: rgba(31, 26, 21, .25); }
.dm-migas a { color: var(--texto-60); transition: color .2s var(--curva-hover); }
.dm-migas a:hover { color: var(--acento-hondo); }
.dm-migas [aria-current] { color: var(--texto); }
.dm-hero__titulo { margin-top: 18px; font-family: var(--serif); font-size: clamp(2.6rem, 4.6vw, 4.25rem); line-height: 1.06; }
.dm-hero__titulo em { font-style: normal; color: var(--acento-hondo); }
.dm-hero__sub { margin-top: 18px; max-width: 42ch; font-size: 17px; line-height: 1.5; color: var(--texto-60); }
.dm-hero__datos { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 28px; font-size: 14.5px; font-weight: 500; }
.dm-hero__datos li { display: flex; align-items: center; gap: 10px; }
.dm-hero__datos .lucide { box-sizing: content-box; width: 18px; height: 18px; padding: 9px; border-radius: 50%; background: var(--blanco); box-shadow: inset 0 0 0 1.5px rgba(206, 137, 59, .55); color: var(--acento-hondo); }
.dm-genero { display: inline-flex; gap: 6px; margin-top: 32px; padding: 5px; border-radius: var(--r-pildora); background: var(--blanco); box-shadow: 0 1px 0 rgba(31, 26, 21, .05); }
.dm-genero__op { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px 0 18px; border-radius: var(--r-pildora); font-size: 15px; font-weight: 500; color: var(--texto-60); transition: background-color .25s var(--curva-hover), color .25s var(--curva-hover); }
.dm-genero__op .lucide { width: 17px; height: 17px; }
.dm-genero__op:hover { background: var(--crema); color: var(--texto); }
.dm-genero__op.activo { background: var(--texto); color: var(--blanco); }
.dm-genero__op.activo .lucide { color: #F0C38A; }
/* Foto en arco: guiño a la forma redonda del hero de la home, sin ocupar toda la pantalla */
.dm-hero__foto { position: relative; justify-self: end; width: min(100%, 420px); aspect-ratio: 1 / .96; margin-top: 16px; }
.dm-hero__foto::before { content: ""; position: absolute; inset: -16px -16px 24px 24px; border-radius: 999px 999px 24px 24px; background: var(--acento-suave); opacity: .8; }
.dm-hero__foto img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 999px 999px 24px 24px; }

/* ---------- 3. Cotizador ---------- */
.zc { padding-top: 72px; overflow-x: clip; }
.zc__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.zc__cab .parrafo { max-width: 50ch; }
.zc__buscar { position: relative; display: flex; align-items: center; flex: 0 1 360px; height: 50px; padding: 0 8px 0 18px; border-radius: var(--r-pildora); background: var(--crema); transition: box-shadow .2s var(--curva-hover), background-color .2s var(--curva-hover); }
.zc__buscar:focus-within { background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--acento); }
.zc__buscar > .lucide { width: 19px; height: 19px; color: var(--texto-45); }
.zc__buscar input { flex: 1; min-width: 0; height: 100%; margin-left: 10px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--texto); letter-spacing: -0.01em; outline: none; }
.zc__buscar input::placeholder { color: var(--texto-60); }
.zc__buscar input::-webkit-search-cancel-button { display: none; }
.zc__limpiar[hidden] { display: none; }
.zc__limpiar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--texto-60); }
.zc__limpiar:hover { background: var(--crema-2); color: var(--texto); }
.zc__limpiar .lucide { width: 16px; height: 16px; }

/* Barra de filtros: fija bajo el header al bajar (franja blanca a todo el ancho) */
.zc__centinela { height: 1px; margin-top: 36px; }
.zc__filtros { position: sticky; top: 64px; z-index: 30; padding: 12px 0; }
.zc__filtros::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--blanco); box-shadow: 0 1px 0 rgba(31, 26, 21, 0); transition: box-shadow .25s var(--curva-hover); }
.zc__filtros.fija::before { box-shadow: 0 1px 0 rgba(31, 26, 21, .08), 0 10px 24px -18px rgba(31, 26, 21, .25); }
.zc__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.zc__chips::-webkit-scrollbar { display: none; }
.zc__chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 18px; border-radius: var(--r-pildora); background: var(--crema); font-size: 14.5px; font-weight: 500; color: var(--texto-60); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.zc__chip span { min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--r-pildora); background: var(--blanco); font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; color: var(--texto-60); letter-spacing: 0; }
.zc__chip:hover { color: var(--texto); background: var(--crema-2); }
.zc__chip.activo { background: var(--texto); color: var(--blanco); }
.zc__chip.activo span { background: rgba(255, 255, 255, .14); color: #F0C38A; }
.zc__chip:focus-visible { outline-offset: 2px; }

/* Grupos y rejilla */
.zc__grupo { margin-top: 36px; }
.zc__grupo:first-child { margin-top: 20px; }
.zc__grupo-cab { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.zc__grupo-cab h3 { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.zc__grupo-n { font-size: 13px; color: var(--texto-60); }
.zc__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.zc__grupos--cambio .zc__card:not([hidden]) { animation: sube .5s var(--curva) both; }
.zc__vacio { margin-top: 28px; padding: 36px 24px; border-radius: 16px; background: var(--crema); text-align: center; color: var(--texto-60); }

/* Tarjeta de zona */
.zc__card[hidden], .zc__grupo[hidden] { display: none; }
.zc__card { position: relative; display: flex; flex-direction: column; border-radius: 18px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(31, 26, 21, .08); scroll-margin-top: 140px; transition: box-shadow .3s var(--curva-hover); }
.zc__card:hover { box-shadow: 0 0 0 1px rgba(206, 137, 59, .35), 0 16px 36px -20px rgba(31, 26, 21, .28); }
/* Cabecera de la tarjeta: foto real (o flor de la marca) + nombre; la foto nunca queda tapada */
.zc__cabeza { display: flex; align-items: center; gap: 14px; padding: 16px 16px 0; }
.zc__media { position: relative; flex: none; width: 84px; height: 84px; overflow: hidden; border-radius: 14px; background: #FBF5EA; }
.zc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); }
.zc__card:hover .zc__media img { transform: scale(1.06); }
.zc__sinfoto { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(80% 80% at 50% 40%, #FFFDF9 0%, #FBF5EA 65%, #F5EADA 100%); }
.zc__sinfoto .lucide { width: 24px; height: 24px; color: var(--acento); opacity: .85; }
.zc__titulos { min-width: 0; }
.zc__en { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--t-nota); font-weight: 600; color: var(--verde); letter-spacing: 0; }
.zc__en[hidden] { display: none; }
.zc__en .lucide { width: 14px; height: 14px; }

.zc__cuerpo { display: flex; flex: 1; flex-direction: column; padding: 0 16px 16px; }
.zc__nombre { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.2; text-wrap: balance; }
.zc__suelta { margin-top: 3px; font-size: 13px; color: var(--texto-60); }
.zc__packs-eti { margin-top: 16px; font-size: var(--t-nota); font-weight: 500; color: var(--texto-60); letter-spacing: 0; }
.zc__packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-top: 6px; padding: 3px; border-radius: 12px; background: var(--crema); }
.zc__pack { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 46px; border-radius: 9px; color: var(--texto-60); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
.zc__pack b { font-size: 15.5px; font-weight: 600; line-height: 1.1; color: var(--texto); }
.zc__pack small { font-size: var(--t-nota); line-height: 1.2; letter-spacing: 0; }
.zc__pack:hover { background: rgba(255, 255, 255, .6); }
.zc__pack.activo { background: var(--blanco); box-shadow: 0 1px 2px rgba(31, 26, 21, .1), 0 0 0 1px rgba(206, 137, 59, .45); }
.zc__pack.activo b { color: var(--acento-hondo); }
.zc__pack:focus-visible { outline-offset: 1px; }
.zc__precio { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 16px; }
.zc__total { font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.zc__total small { display: block; margin-top: 4px; font-family: var(--sans); font-size: var(--t-nota); font-weight: 400; letter-spacing: -0.01em; color: var(--texto-60); }
.zc__detalle { flex: none; }
.zc__ahorro { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 7px; border-radius: var(--r-pildora); background: var(--acento-suave); font-size: var(--t-nota); font-weight: 600; color: var(--dm-texto-acento); letter-spacing: 0; white-space: nowrap; }
.zc__ahorro .lucide { width: 14px; height: 14px; }
.zc__sin-ahorro { font-size: var(--t-nota); color: var(--texto-60); }
.zc__agregar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 14px; border-radius: var(--r-pildora); background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--acento); color: var(--dm-texto-acento); font-size: 14px; font-weight: 600; transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
.zc__agregar:hover, .zc__agregar:focus-visible { background: var(--acento); box-shadow: inset 0 0 0 1.5px var(--acento); color: var(--blanco); }
.zc__agregar:active { background: var(--acento-hondo); color: var(--blanco); }
.zc__agregar .lucide { width: 17px; height: 17px; }
.zc__agregar .zc__ico-ok, .zc__agregar.hecho .zc__ico-mas { display: none; }
.zc__agregar.hecho .zc__ico-ok { display: block; }
.zc__agregar.hecho, .zc__agregar.hecho:hover { background: var(--verde); box-shadow: inset 0 0 0 1.5px var(--verde); color: var(--blanco); }

/* Zona destacada al llegar con #ancla (desde la home) */
.zc__card.resaltada { box-shadow: 0 0 0 2px var(--acento), 0 16px 36px -18px rgba(168, 106, 40, .45); animation: dm-resalta 1.1s var(--curva) 2; }
@keyframes dm-resalta { 0% { box-shadow: 0 0 0 2px var(--acento), 0 0 0 2px rgba(206, 137, 59, .5); } 100% { box-shadow: 0 0 0 2px var(--acento), 0 0 0 16px rgba(206, 137, 59, 0); } }

/* ---------- 4. Antes de tu sesión ---------- */
.dm-antes { background: var(--blanco); } /* 4.33: blanco; las tarjetas, crema */
.dm-antes__rejilla { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
.dm-antes__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dm-antes__lista li { display: flex; gap: 16px; padding: 24px; border-radius: 18px; background: var(--crema); }
.dm-antes__lista .lucide { box-sizing: content-box; width: 20px; height: 20px; padding: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(206, 137, 59, .55); color: var(--acento-hondo); }
.dm-antes__lista h3 { margin: 2px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.25; }
.dm-antes__lista p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--texto-60); }

/* ---------- 5. Responsive ---------- */
@media (max-width: 1100px) {
  .zc__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dm-antes__rejilla { gap: 48px; }
}
@media (max-width: 900px) {
  .nav__logo img { width: 88px; height: auto; }
  .wa-flota { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .wa-flota svg { width: 28px; height: 28px; }

  .dm-hero__rejilla { grid-template-columns: 1fr; gap: 26px; padding-top: 22px; padding-bottom: 32px; }
  .dm-hero__titulo { margin-top: 16px; font-size: clamp(2.2rem, 10vw, 2.75rem); }
  .dm-hero__sub { margin-top: 12px; font-size: 15.5px; }
  .dm-hero__datos { gap: 10px 16px; margin-top: 20px; font-size: 13.5px; }
  .dm-hero__datos .lucide { width: 16px; height: 16px; padding: 7px; }
  .dm-genero { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 22px; }
  .dm-genero__op { justify-content: center; padding: 0 12px; font-size: 14.5px; }
  .dm-hero__foto { justify-self: stretch; width: 100%; margin-top: 0; aspect-ratio: 2 / 1; }
  .dm-hero__foto::before { display: none; }
  .dm-hero__foto img { border-radius: 18px; object-position: 50% 42%; }

  .zc { padding-top: 64px; }
  .zc__cab { flex-direction: column; align-items: stretch; gap: 20px; }
  .zc__buscar { flex: none; height: 48px; }
  .zc__centinela { margin-top: 16px; }
  .zc__filtros { top: 58px; padding: 10px 0; }
  .zc__filtros::before { left: calc(var(--pad-x) * -1); right: calc(var(--pad-x) * -1); }
  .zc__chips { margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x); scroll-padding-inline: var(--pad-x); }
  .zc__chip { height: 40px; padding: 0 12px 0 15px; font-size: 14px; }
  .zc__grupo { margin-top: 28px; }
  .zc__grupo-cab { margin-bottom: 14px; }
  .zc__grupo-cab h3 { font-size: 21px; }
  .zc__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .zc__card { border-radius: 16px; scroll-margin-top: 120px; }
  .zc__cabeza { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 0 9px; padding: 10px 10px 0; }
  .zc__titulos { display: contents; }
  .zc__media { grid-row: 1; }
  .zc__suelta, .zc__en { grid-column: 1 / -1; }
  .zc__suelta { margin-top: 7px; }
  .zc__packs-eti { display: none; }
  .zc__packs { margin-top: 8px; }
  .zc__media { width: 42px; height: 42px; border-radius: 11px; }
  .zc__sinfoto .lucide { width: 18px; height: 18px; }
  .zc__en { margin-top: 4px; font-size: var(--t-nota); }
  .zc__en .lucide { width: 12px; height: 12px; }
  .zc__cuerpo { padding: 0 10px 10px; }
  .zc__nombre { font-size: 15.5px; }
  .zc__suelta { font-size: var(--t-nota); }
  .zc__packs { gap: 2px; padding: 2px; border-radius: 10px; }
  .zc__pack { height: 38px; border-radius: 8px; }
  .zc__pack b { font-size: 14.5px; }
  .zc__pack small { display: none; }
  .zc__precio { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 12px; }
  .zc__total { font-size: 22px; }
  .zc__total small { font-size: var(--t-nota); }
  .zc__ahorro { height: 22px; padding: 0 7px 0 5px; font-size: var(--t-nota); }
  .zc__ahorro .lucide { width: 12px; height: 12px; }
  .zc__sin-ahorro { font-size: var(--t-nota); line-height: 22px; }
  .zc__agregar { height: 42px; margin-top: 10px; font-size: 13.5px; }
  .zc__agregar-largo { display: none; }

  .dm-antes__rejilla { grid-template-columns: 1fr; gap: 28px; }
  .dm-antes__lista { grid-template-columns: 1fr; gap: 10px; }
  .dm-antes__lista li { padding: 18px; gap: 14px; }
  .dm-antes__lista .lucide { width: 18px; height: 18px; padding: 10px; }
  .dm-antes__lista h3 { font-size: 17.5px; }
  .dm-antes__lista p { font-size: 14px; }
}
@media (max-width: 370px) {
  .nav { --pad-x: 16px; }
  .nav__logo img { width: 84px; }
  .nav .nav__cta { padding: 0 13px; }
  .dm-hero__datos li:last-child { flex-basis: 100%; }
  .zc__cuerpo { padding: 0 9px 9px; }
  .zc__cabeza { padding: 9px 9px 0; }
  .zc__total { font-size: 20.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .zc__grupos--cambio .zc__card:not([hidden]), .zc__card.resaltada, .nav__resumen--pulso, .nav__resumen--pulso .nav__contador { animation: none; }
}

/* === css/zonas-home.css === */
/* Depilación láser · zonas más pedidas, con las promos dentro (portada; 4.20: sin la sección aparte «Promos del mes») */
.zh { background: var(--blanco); }
.zh__cab { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 32px; }
.zh__cab .titulo { margin-top: 0; }
.zh__tabs { display: inline-flex; gap: 8px; margin-top: 24px; }
.zh__tab { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px 0 18px; border-radius: var(--r-pildora); background: var(--crema); font-size: 15px; font-weight: 500; color: var(--texto-60); transition: background-color .25s var(--curva-hover), color .25s var(--curva-hover); }
.zh__tab .lucide { width: 17px; height: 17px; }
.zh__tab:hover { color: var(--texto); }
.zh__tab.activo { background: var(--texto); color: var(--blanco); }
.zh__tab.activo .lucide { color: #F0C38A; }
.zh__abajo { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.zh__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zh__card { position: relative; display: block; aspect-ratio: .8; border-radius: 16px; overflow: hidden; background: #FBF5EA; }
.zh__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); }
.zh__card:hover img, .zh__card:focus-visible img { transform: scale(1.05); }
.zh__info { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 14px 14px 14px 18px; border-radius: 12px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.zh__nombre { font-family: var(--serif); font-size: 22px; letter-spacing: -0.03em; line-height: 1.15; }
.zh__precio { grid-row: 2; font-size: 13px; color: var(--texto-60); }
.zh__precio b { font-size: 16px; font-weight: 500; color: var(--texto); }
.zh__ir { grid-row: span 2; grid-column: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--crema); transition: background-color .25s var(--curva-hover), color .25s var(--curva-hover); }
.zh__ir .lucide { width: 17px; height: 17px; }
.zh__card:hover .zh__ir, .zh__card:focus-visible .zh__ir { background: var(--acento); color: var(--blanco); }

@media (max-width: 1100px) { .zh__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .zh__tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .zh__tab { justify-content: center; padding: 0 12px; font-size: 14px; }
  .zh__rejilla { gap: 8px; }
  .zh__card { aspect-ratio: .72; }
  .zh__info { left: 6px; right: 6px; bottom: 6px; padding: 10px; grid-template-columns: 1fr; }
  .zh__nombre { font-size: 17px; }
  .zh__precio { font-size: var(--t-nota); }
  .zh__precio b { font-size: 14px; }
  .zh__ir { display: none; }
}

/* Caja de nombre/precio por debajo de la foto: en escritorio sobresale del borde inferior; en móvil va como segunda fila */
.zh__card { overflow: visible; background: none; aspect-ratio: .74; }
.zh__foto { position: absolute; inset: 0 0 44px; overflow: hidden; border-radius: 16px; background: #FBF5EA; }
.zh__info { bottom: 0; box-shadow: 0 10px 30px rgba(31, 26, 21, .08); }
@media (max-width: 900px) {
  .zh__card { display: flex; flex-direction: column; aspect-ratio: auto; }
  .zh__foto { position: relative; inset: auto; aspect-ratio: .85; border-radius: 14px; }
  .zh__info { position: static; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--crema); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Móvil: misma idea que en escritorio, la caja monta sobre el borde inferior de su foto (queda claro a qué foto pertenece) */
@media (max-width: 900px) {
  .zh__rejilla { row-gap: 16px; }
  .zh__cab { margin-bottom: 24px; }
  .zh__info { position: relative; z-index: 1; margin: -24px 8px 0; padding: 8px 12px; background: var(--blanco); box-shadow: 0 8px 22px rgba(31, 26, 21, .10); }
  .zh__precio { line-height: 1.35; }
  /* 4.20: foto 4:3 (antes .85), para que la sección entre en menos pantallas */
  .zh__foto { aspect-ratio: 4 / 3; }
  .zh__abajo { flex-direction: column; align-items: center; margin-top: 16px; } /* 4.20b: botones al ancho de su texto */
}

/* Promo (4.16; 4.20: en el rojo de oferta de /pedido/): insignia «Promo» sobre la foto, precio promo en rojo y el regular
   tachado al lado, sin cambiar la altura de la tarjeta */
.zh__promo { position: absolute; z-index: 1; top: 12px; left: 12px; display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: var(--r-pildora); background: var(--promo); color: var(--blanco); font-size: var(--t-min); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 4px 12px -4px rgba(31, 26, 21, .3); pointer-events: none; }
.zh__card:has(.zh__promo) .zh__precio b { color: var(--promo); }
.zh__precio b, .zh__precio s { white-space: nowrap; }
.zh__precio s { color: var(--texto-45); text-decoration-thickness: 1px; }
@media (max-width: 900px) { .zh__promo { top: 8px; left: 8px; height: 24px; padding: 0 8px; } }

/* ---------- 4.26 · Portada: «Las zonas más solicitadas» con el texto debajo de la foto, sin taparla ----------
   Celular (≤ 767 px), como DepilZone: una tarjeta por fila a todo el ancho, foto 4:3 y debajo nombre, precio y flecha.
   Tablet y escritorio: la misma tarjeta en 2 y 4 columnas, con foto 4:5. Solo en la portada (.zh): /mujer/, /hombre/ y
   los servicios usan la misma tarjeta en su rejilla y no cambian. */
.zh .zh__card { display: flex; flex-direction: column; aspect-ratio: auto; }
.zh .zh__foto { position: relative; inset: auto; flex: none; aspect-ratio: 4 / 5; border-radius: 16px; }
.zh .zh__info { position: static; z-index: auto; margin: 0; padding: 12px 4px 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; grid-template-columns: 1fr auto; row-gap: 4px; }
.zh .zh__nombre { --peso-titulo: 600; font-size: var(--t-tarjeta); }
.zh .zh__precio { font-size: var(--t-chico); line-height: 1.35; }
.zh .zh__precio b { font-size: var(--t-precio); font-weight: 600; }
.zh .zh__ir { display: grid; }
@media (max-width: 767px) {
  /* 3 nov 2026 (pedido de Cristian): dos columnas también en el celular, foto alta */
  .zh .zh__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .zh .zh__foto { aspect-ratio: 3 / 4; border-radius: 14px; }
  .zh .zh__info { padding-top: 10px; column-gap: 8px; }
  .zh .zh__nombre { font-size: 17px; }
  .zh .zh__precio { font-size: var(--t-nota); }
  .zh .zh__precio b { font-size: 16px; }
  .zh .zh__ir { width: 32px; height: 32px; }
}

/* ---------- 4.38c · Mapa de la zona tratada en la tarjeta (pedido de Cristian, 31 oct) ----------
   El mismo de la página de cada zona (css/zona.css: ondas blancas sobre velo oscuro, borde discontinuo), solo en
   escritorio con ratón y al pasar el cursor; en el celular y la tableta la tarjeta no cambia. El SVG (960 × 1192, la
   foto entera) imita el recorte de la foto: object-fit: cover con su object-position en --fx y --fy (inc/zona-pagina.php),
   así que el contorno encaja con cualquier proporción de tarjeta. Va encima de la foto y debajo de «Promo» y del «+». */
.zh__mapa { display: none; }
@media (hover: hover) and (min-width: 1024px) {
  @supports (width: 1cqw) {
    .zh__mapa { position: absolute; inset: 0; display: block; container-type: size; color: rgba(255, 255, 255, .95); pointer-events: none; opacity: 0; transition: opacity .3s var(--curva), transform 1s var(--curva); }
    .zh__mapa svg { position: absolute; width: max(100cqw, 100cqh * 960 / 1192); height: max(100cqh, 100cqw * 1192 / 960); left: calc((100cqw - max(100cqw, 100cqh * 960 / 1192)) * var(--fx, .5)); top: calc((100cqh - max(100cqh, 100cqw * 1192 / 960)) * var(--fy, .5)); }
    .zh__mapa g > * { stroke: #fff; stroke-width: 7; stroke-dasharray: 24 17; filter: drop-shadow(0 0 5px rgba(31, 26, 21, .55)); }
    .zh__card:hover .zh__mapa, .zh__card:focus-visible .zh__mapa, .zh__celda:hover .zh__mapa { opacity: 1; transform: scale(1.05); }
    .zh__celda:hover .zh__card img { transform: scale(1.05); }
  }
}
@media (prefers-reduced-motion: reduce) { .zh__mapa { transition: none; } }
/* Zonas con promoción (Cyber Wow, 3 nov 2026): precio en fucsia y flecha azul; al pasar el cursor, fucsia */
.zh__promo.zh__cyber { width: 112px; height: 40px; padding: 0; border-radius: 12px; background: #215E4F url(../img/promos/cyber-wow-logo.svg) center / 78px auto no-repeat; box-shadow: 0 6px 14px -6px rgba(33,94,79,.5); }
@media (max-width: 900px) { .zh__promo.zh__cyber { width: 92px; height: 34px; border-radius: 10px; background-size: 64px auto; } }
.zh__card:has(.zh__promo) .zh__precio b { color: #8F5A22; }
.zh__card:has(.zh__promo) .zh__ir { background: #215E4F; color: var(--blanco); }
.zh__card:has(.zh__promo):hover .zh__ir, .zh__card:has(.zh__promo):focus-visible .zh__ir { background: #8F5A22; color: var(--blanco); }

/* === css/nav-submenu.css === */
/* =========================================================
   Header · submenús «Depilación láser» (Para mujer / Para hombre) y «Servicios» (las 5 páginas de servicio)
   Común a la home (index.html) y a las páginas internas. Se carga después de home-ui.css
   (y de depilacion-mujer.css en las internas). Comportamiento en js/nav-submenu.js.
   Escritorio (≥1101px): cajita blanca bajo el ítem (hover, foco y clic).
   Móvil (≤1100px): dentro del panel del menú, como subítems (acordeón abierto por defecto).
   ========================================================= */
.nav__sub { position: relative; display: flex; }
.nav__sub-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nav__sub-flecha { width: 15px; height: 15px; flex: none; transition: transform .25s var(--curva); }
.nav__sub.abierto .nav__sub-flecha { transform: rotate(180deg); }
.nav__sub-caja a { display: flex; align-items: center; gap: 10px; color: var(--texto); }
.nav__sub-caja .lucide { width: 17px; height: 17px; color: var(--acento-hondo); }
.nav__sub-caja a[aria-current="page"] { font-weight: 600; }
.nav__sub-caja a { white-space: nowrap; }

@media (min-width: 1101px) {
  /* El botón se ve igual que los demás enlaces de la píldora */
  .hv-c .nav__sub-btn { padding: 8px 12px 8px 16px; border-radius: var(--r-pildora); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
  .hv-c .nav__sub-btn:hover, .hv-c .nav__sub.abierto .nav__sub-btn { background: var(--blanco); color: var(--texto); }
  .hv-c .nav__sub-btn.activo { background: rgba(255, 255, 255, .2); color: var(--blanco); }
  .hv-c.con-scroll .nav__sub-btn.activo, body.v5.hv-c.pg-int .nav__sub-btn.activo,
  body.v5.hv-c.pg-int .nav__sub-btn:hover, body.v5.hv-c.pg-int .nav__sub.abierto .nav__sub-btn { background: var(--blanco); color: var(--texto); }

  .nav__sub-caja { position: absolute; z-index: 5; top: calc(100% + 12px); left: 50%; min-width: 196px; padding: 6px; border-radius: 16px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(31, 26, 21, .06), 0 18px 40px -12px rgba(31, 26, 21, .25); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .2s var(--curva), transform .2s var(--curva), visibility 0s linear .2s; }
  /* Puente invisible: el hover no se corta al bajar el mouse del botón a la caja */
  .nav__sub-caja::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav__sub.abierto .nav__sub-caja { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s var(--curva), transform .2s var(--curva), visibility 0s; }
  .hv-c .nav__links .nav__sub-caja a { height: 44px; padding: 0 16px 0 12px; border-radius: 11px; font-size: 14px; color: var(--texto); transition: background-color .2s var(--curva-hover); }
  .hv-c .nav__links .nav__sub-caja a:hover, .hv-c .nav__links .nav__sub-caja a:focus-visible,
  body.v5.hv-c.pg-int .nav__links .nav__sub-caja a:hover, body.v5.hv-c.pg-int .nav__links .nav__sub-caja a:focus-visible { background: var(--crema); color: var(--texto); }
  .nav__sub-caja :focus-visible { outline-color: var(--acento) !important; outline-offset: -2px; }
}

@media (max-width: 1100px) {
  .nav__sub { flex-direction: column; align-items: stretch; }
  .hv-c .nav .nav__sub-btn { justify-content: space-between; min-height: 48px; padding: 0 16px; border-radius: 12px; color: var(--texto); text-align: left; }
  .hv-c .nav .nav__sub-btn:hover { background: var(--crema); }
  .hv-c .nav .nav__sub-btn.activo { color: var(--acento-hondo); }
  .hv-c .nav .nav__sub-btn:focus-visible { outline-color: var(--acento); outline-offset: -2px; }
  .nav__sub-caja { display: none; padding: 0 0 4px 14px; }
  .nav__sub.abierto .nav__sub-caja { display: flex; flex-direction: column; gap: 2px; }
  .hv-c .nav .nav__links .nav__sub-caja a { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; color: var(--texto); }
  .hv-c .nav .nav__links .nav__sub-caja a[aria-current="page"] { background: var(--crema); color: var(--acento-hondo); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__sub-caja, .nav__sub-flecha { transition: none !important; }
}

/* Header con 7 enlaces (se sumaron Blog y Contacto): una sola línea y algo más compacto en pantallas medianas */
@media (min-width: 1101px) {
  .hv-c .nav__links { white-space: nowrap; }
  .hv-c .nav__links > a, .hv-c .nav__links .nav__sub-btn { white-space: nowrap; }
}
@media (min-width: 1101px) and (max-width: 1320px) {
  .hv-c .nav__links > a, .hv-c .nav__links .nav__sub-btn { padding-inline: 12px; }
}

/* === css/carrito.css === */
/* =========================================================
   Mi pedido · piezas comunes (web v5) — se carga en TODAS las páginas, después de v5.css y home-ui.css.
   Lo usa js/carrito.js: el botón «Cotiza y reserva» del header lleva a pedido.html con el n.º de zonas dentro (4.22) y,
   al agregar, aparece el mini-carrito fijo abajo (4.18, maqueta «Cotiza y reserva» v3).
   1. Base  2. Fotos y vacío  3. Insignia PROMO, precio promo y desplegable (ventanas y pedido)  4. Mini-carrito
   5. Botón «Cotiza y reserva» del header
   ========================================================= */
:root {
  --cp-acento-txt: #8F5A22;          /* mostaza oscuro, AA sobre blanco y crema */
  --cp-linea: rgba(31, 26, 21, .1);
  --cp-borde: rgba(31, 26, 21, .16);
  --cp-error: #B3261E;
}

/* ---------- 1. Base ---------- */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wa-ico { width: 21px; height: 21px; flex: none; }
@keyframes mc-pulso { 0% { box-shadow: 0 0 0 0 rgba(206, 137, 59, .45); } 100% { box-shadow: 0 0 0 12px rgba(206, 137, 59, 0); } }
@keyframes mc-salto { 0%, 100% { transform: none; } 40% { transform: scale(1.35); } }

/* ---------- 2. Fotos y estado vacío ---------- */
.pd-item__foto, .mini__foto { position: relative; display: block; overflow: hidden; flex: none; background: var(--crema-2); }
.pd-item__foto img, .mini__foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-vacia { display: grid; place-items: center; width: 100%; height: 100%; color: var(--cp-acento-txt); }
.foto-vacia .lucide { width: 40%; height: 40%; max-width: 32px; max-height: 32px; }
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vacio__icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--acento-suave); color: var(--cp-acento-txt); }
.vacio__icono .lucide { width: 26px; height: 26px; }
.vacio__t { margin-top: 16px; font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.vacio__ctas { display: grid; gap: 12px; width: 100%; max-width: 300px; margin-top: 20px; }
.vacio__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--r-pildora); background: var(--acento); color: var(--blanco); font-size: 15px; font-weight: 600; transition: background-color .2s var(--curva-hover); }
.vacio__cta:hover { background: var(--acento-hondo); }
.vacio__cta--b { background: var(--blanco); color: var(--texto); }
.vacio__cta--b:hover { background: var(--crema-2); }
.vacio__cta .lucide { width: 18px; height: 18px; }

/* ---------- 3. Insignia PROMO, precio promo y desplegable en píldora ---------- */
.eti-promo { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 8px; border-radius: var(--r-pildora); background: var(--promo); color: var(--blanco); font-family: var(--sans); font-size: var(--t-min); font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.precio-promo { color: var(--promo); }
.eti-promo.eti-cyber { background: #215E4F; }
.precio-promo.precio-cyber { color: #8F5A22; }
.sel { position: relative; display: inline-flex; align-items: center; }
.sel select { min-height: 40px; padding: 0 36px 0 16px; border: 1.5px solid var(--cp-borde); border-radius: var(--r-pildora); background: var(--blanco); color: var(--texto); font: 600 14px/1.2 var(--sans); cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .2s var(--curva-hover); }
.sel select:hover { border-color: rgba(31, 26, 21, .32); }
.sel select:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--texto-60); border-bottom: 2px solid var(--texto-60); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
/* «S/39.8 c/u · Ahorras S/296»: el ahorro en verde */
.c-u { color: var(--texto-60); font-size: 13px; font-variant-numeric: tabular-nums; }
.c-u .ahorro { color: var(--verde); font-weight: 600; }

/* ---------- 4. Mini-carrito fijo abajo (al agregar) ---------- */
.mini { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; display: grid; gap: 12px; max-width: 480px; margin: 0 auto; padding: 12px; border: 1px solid var(--cp-linea); border-radius: 20px; background: var(--blanco); color: var(--texto); box-shadow: 0 18px 40px -18px rgba(31, 26, 21, .45); transform: translateY(calc(100% + 32px)); transition: transform .3s var(--curva); }
.mini.abierto { transform: none; }
.mini[hidden] { display: none; }
.mini__ok { display: flex; align-items: center; gap: 12px; }
.mini__foto { width: 40px; height: 40px; border-radius: 10px; }
.mini__txt { min-width: 0; line-height: 1.35; }
.mini__txt b { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.mini__txt span { display: block; color: var(--texto-60); font-size: 13px; }
.mini__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: var(--r-pildora); font-size: 15px; font-weight: 600; text-align: center; transition: background-color .2s var(--curva-hover); }
.mini__btn--s { background: var(--crema-2); color: var(--texto); }
.mini__btn--s:hover { background: #EADFCF; }
.mini__btn--v { background: var(--verde); color: var(--blanco); }
.mini__btn--v:hover { background: var(--verde-hondo); }
.mini :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- 5. Botón «Cotiza y reserva» del header (4.22) ----------
   «Reservar» (→ contacto) y el ícono de carrito pasan a ser un solo botón → pedido con el n.º de zonas dentro: píldora con
   los colores invertidos del botón, oculta con el pedido vacío (js/carrito.js). Celular: mismo alto de 36 px (44 px para el
   dedo, home-ui.css); por debajo de 360 px dice «Cotiza». 4.20: ícono de pedido (lista, Hugeicons task-01, en línea en el
   HTML para que no salte al cargar) y sin «Consulta gratis» en el menú. */
.nav__resumen { display: none; } /* por si una página guardada en caché aún lo trae */
.nav .nav__cta { gap: 8px; padding: 0 20px 0 16px; }
.nav__cta-ico { flex: none; width: 18px; height: 18px; }
@media (max-width: 900px) { .nav .nav__cta { padding: 0 16px 0 12px; } .nav__cta-ico { width: 16px; height: 16px; } }
.nav__cta-t { white-space: nowrap; }
.nav__cta .nav__contador { position: static; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pildora); background: var(--blanco); color: var(--texto); font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.nav__cta .nav__contador[hidden] { display: none; }
/* Con contador: la píldora interior queda a 8 px del borde derecho, como el alto */
.nav__cta:has(.nav__contador:not([hidden])) { padding-right: 8px; }
/* 4.36 (Cristian, 29 oct): en la portada el botón ya es marrón (4.27), así que el contador es blanco con el número oscuro,
   igual que en el resto de páginas (antes, negro sobre marrón: no se leía) */
/* Al agregar una zona: el botón late y el número salta */
.nav__cta--pulso { animation: mc-pulso .6s var(--curva); }
.nav__cta--pulso .nav__contador { animation: mc-salto .6s var(--curva); }
@media (max-width: 359px) {
  .nav__cta-mas { display: none; } /* «Cotiza» */
}

@media (prefers-reduced-motion: reduce) {
  .mini { transition: none !important; }
  .nav__cta--pulso, .nav__cta--pulso .nav__contador { animation: none; }
}

/* === css/mujer-v2.css === */
/* =========================================================
   Depilación láser · Para mujer — v2 (P1 y P2)
   Se carga después de depilacion-mujer.css (header interno, hero base, «Antes de tu sesión»),
   zonas-home.css (la tarjeta .zh__card de la home, sin cambios) y nav-submenu.css.
   1. Hero P1  2. Hero P2 + franja  3. Barra: pestañas + buscador  4. Lista y tarjetas
   5. Detalle de zona  6. Panel lateral (P1)  7. Ventana centrada (P2)  8. DEMO descuento  9. Móvil
   10. Páginas oficiales (depilacion-laser-mujer.html / -hombre.html, body.mv--final): P2 ajustada
   ========================================================= */
:root { --mv-texto-acento: #8F5A22; --mv-crema-foto: #FBF5EA; }
html.mv-bloqueo { overflow: hidden; }
.mv [hidden] { display: none !important; }

/* ---------- 1. Hero P1: título + una línea + conmutador + foto (sin migas ni datos) ---------- */
.mv-hero1 .dm-hero__rejilla { grid-template-columns: 1.2fr .8fr; padding-top: 36px; padding-bottom: 40px; }
.mv-hero1 .dm-hero__titulo { margin-top: 0; }
.mv-hero1 .dm-genero { margin-top: 28px; }
.mv-hero1 .dm-hero__foto { width: min(100%, 380px); aspect-ratio: 1 / .84; margin-top: 12px; }

/* ---------- 2. Hero P2: compacto y centrado, sin foto; los 3 datos en una franja fina ---------- */
.mv-hero2 { background: var(--crema); }
.mv-hero2__in { display: flex; flex-direction: column; align-items: center; padding-top: 52px; padding-bottom: 40px; text-align: center; }
.mv-hero2 .dm-hero__titulo { margin-top: 0; font-size: clamp(2.5rem, 4.4vw, 3.9rem); }
.mv-hero2 .dm-hero__sub { max-width: 52ch; margin-inline: auto; }
.mv-hero2 .dm-genero { margin-top: 26px; }
.mv-franja { background: var(--crema); box-shadow: inset 0 1px 0 rgba(31, 26, 21, .07); }
.mv-franja__in { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; min-height: 44px; padding-block: 8px; font-size: 13px; font-weight: 500; color: var(--texto-60); }
.mv-franja__in li { display: inline-flex; align-items: center; gap: 7px; }
.mv-franja__in li + li::before { content: ""; width: 3px; height: 3px; margin: 0 16px; border-radius: 50%; background: rgba(31, 26, 21, .3); }
.mv-franja__in .lucide { width: 15px; height: 15px; color: var(--acento-hondo); }

/* ---------- 3. Barra: pestañas (foto a la izquierda + texto) y buscador en la misma fila ---------- */
.mv-zonas { padding-bottom: var(--esp-seccion); }
.mv-barra { position: relative; z-index: 30; padding: 28px 0 4px; background: var(--blanco); }
.mv-barra__in { position: relative; display: flex; align-items: center; gap: 16px; }
.mv-tabs { flex: 1; min-width: 0; display: flex; gap: 6px; padding: 3px; margin: -3px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 3px; }
.mv-tabs::-webkit-scrollbar { display: none; }
.mv-tab { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 6px 16px 6px 6px; border-radius: var(--r-pildora); background: var(--crema); text-align: left; transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover), height .25s var(--curva), padding .25s var(--curva); }
.mv-tab__img { position: relative; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--mv-crema-foto); transition: width .25s var(--curva), height .25s var(--curva); }
.mv-tab__img img { width: 100%; height: 100%; object-fit: cover; }
.mv-tab__img--mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px; background: var(--blanco); }
.mv-tab__img--mosaico img { min-height: 0; }
.mv-tab__txt { display: flex; flex-direction: column; min-width: 0; }
.mv-tab__n { font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.mv-tab__c { margin-top: 1px; font-size: var(--t-nota); line-height: 1.2; color: var(--texto-60); white-space: nowrap; }
.mv-tab:hover { background: var(--crema-2); }
.mv-tab[aria-pressed="true"] { background: var(--texto); color: var(--blanco); }
.mv-tab[aria-pressed="true"] .mv-tab__c { color: #F0C38A; }
.mv-tab:focus-visible { outline-offset: 1px; }

.mv-buscar { flex: 0 0 256px; display: flex; align-items: center; gap: 6px; }
.mv-buscar__campo { position: relative; flex: 1; display: flex; align-items: center; height: 52px; padding: 0 6px 0 18px; border-radius: var(--r-pildora); background: var(--crema); transition: box-shadow .2s var(--curva-hover), background-color .2s var(--curva-hover), height .25s var(--curva); }
.mv-buscar__campo:focus-within { background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--acento); }
.mv-buscar__campo > .lucide { width: 19px; height: 19px; color: var(--texto-60); }
.mv-buscar input { flex: 1; min-width: 0; height: 100%; margin-left: 10px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--texto); outline: none; }
.mv-buscar input::placeholder { color: var(--texto-60); }
.mv-buscar input::-webkit-search-cancel-button { display: none; }
.mv-buscar__x { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--texto-60); }
.mv-buscar__x:hover { background: var(--crema-2); color: var(--texto); }
.mv-buscar__x .lucide { width: 16px; height: 16px; }
.mv-buscar__abrir, .mv-buscar__cerrar { display: none; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--crema); color: var(--texto); }
.mv-buscar__abrir .lucide, .mv-buscar__cerrar .lucide { width: 19px; height: 19px; }

/* P2: barra pegajosa bajo el header; al quedar fija se compacta (miniatura pequeña, sin el conteo) */
.mv-centinela { height: 1px; margin-bottom: -1px; }
.mv-barra--pegajosa { position: sticky; top: 64px; padding: 16px 0; }
.mv-barra--pegajosa::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(31, 26, 21, .08); opacity: 0; transition: opacity .25s var(--curva-hover); }
.mv-barra--pegajosa.fija { padding: 10px 0; box-shadow: 0 12px 24px -20px rgba(31, 26, 21, .35); }
.mv-barra--pegajosa.fija::after { opacity: 1; }
.mv-barra--pegajosa.fija .mv-tab { height: 44px; padding: 4px 16px 4px 4px; }
.mv-barra--pegajosa.fija .mv-tab__img { width: 36px; height: 36px; }
.mv-barra--pegajosa.fija .mv-tab__c { display: none; }
.mv-barra--pegajosa.fija .mv-buscar__campo { height: 44px; }

/* ---------- 4. Lista y tarjetas (tarjeta de la home) ---------- */
.mv-grupo { margin-top: 48px; scroll-margin-top: 150px; }
.mv-grupo:first-child { margin-top: 32px; }
.mv-grupo__cab { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.mv-grupo__cab h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; }
.mv-grupo__cab span { font-size: 13px; color: var(--texto-60); }
.mv-lista > .mv-rejilla { margin-top: 32px; }
.mv-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
.mv-rejilla .zh__card { scroll-margin-top: 160px; }
.mv-lista--cambio .zh__card, .mv-lista--cambio .zh__mas { animation: sube .5s var(--curva) both; }
/* 3.13 · La tarjeta lleva a la página de la zona; el «+» sobre la foto abre el detalle para agregar sin salir */
.zh__celda { position: relative; min-width: 0; }
.zh__mas { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blanco); color: var(--texto); box-shadow: 0 6px 16px -6px rgba(31, 26, 21, .35); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover), transform .2s var(--curva-hover); }
.zh__mas .lucide { width: 20px; height: 20px; }
.zh__mas:hover { background: var(--acento); color: var(--blanco); transform: scale(1.06); }
.zh__mas:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (max-width: 900px) { .zh__mas { top: 8px; right: 8px; width: 36px; height: 36px; } .zh__mas .lucide { width: 18px; height: 18px; } }
/* 4.37 · Celular (zonas y tratamientos, 2 columnas): foto más alta (4:5) y el nombre y el precio debajo de la foto, sin la
   caja blanca encima, como «Las zonas más solicitadas» de la portada (Cristian, 29 oct) */
@media (max-width: 900px) {
  .mv-rejilla .zh__foto { aspect-ratio: 4 / 5; border-radius: 14px; }
  .mv-rejilla .zh__info { position: static; z-index: auto; margin: 0; padding: 8px 2px 0; border-radius: 0; background: none; box-shadow: none; }
  .mv-rejilla .zh__nombre { font-size: 17px; }
  .mv-rejilla .zh__precio { line-height: 1.35; }
}
/* Enlace a la página propia de cera (3.16), debajo de las zonas */
.mv-otra-opcion { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 32px; font-size: 15px; line-height: 1.45; color: var(--texto-60); text-align: left; }
.mv-otra-opcion .lucide { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--acento-hondo); }
.mv-otra-opcion a { font-weight: 600; color: var(--texto); text-decoration: underline; text-decoration-color: rgba(31, 26, 21, .3); text-underline-offset: 3px; }
.mv-otra-opcion a:hover { text-decoration-color: currentColor; }
.mv-vacio { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; padding: 48px 24px; border-radius: 18px; background: var(--crema); text-align: center; color: var(--texto-60); }
.mv-sinfoto { position: absolute; inset: 0; display: block; background: radial-gradient(90% 75% at 50% 42%, #FFFDF9 0%, var(--mv-crema-foto) 62%, #F5EADA 100%); }
.mv-sil { position: absolute; inset: 8% 6% 6%; width: 88%; height: 86%; }
.mv-sil__c { fill: #EBDDC9; }
.zh__card:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* ---------- 5. Detalle de zona (común a P1 y P2) ---------- */
.zd { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; }
.zd__media { position: relative; overflow: hidden; border-radius: 16px; background: var(--mv-crema-foto); aspect-ratio: .84; align-self: start; }
.zd__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zd__cuerpo { display: flex; flex-direction: column; min-width: 0; }
.zd__grupo { font-size: 13px; font-weight: 500; color: var(--mv-texto-acento); }
.zd__nombre { margin-top: 6px; font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; }
.zd__dur { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--texto-60); }
.zd__dur .lucide { width: 17px; height: 17px; color: var(--acento-hondo); }
.zd__inc { margin-top: 10px; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--texto-60); }
.zd__packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.zd__packs legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 600; }
.zd__pack { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 13px 16px; border-radius: 14px; background: var(--crema); cursor: pointer; transition: background-color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
.zd__pack input { position: absolute; opacity: 0; pointer-events: none; }
.zd__pack:hover { background: var(--crema-2); }
.zd__pack-n { font-size: 14.5px; font-weight: 600; }
.zd__pack-p { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.zd__pack-s { grid-column: 1 / -1; font-size: var(--t-nota); color: var(--texto-60); }
.zd__pack:has(input:checked) { background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--acento), 0 6px 18px -10px rgba(168, 106, 40, .45); }
.zd__pack:has(input:checked) .zd__pack-p { color: var(--mv-texto-acento); }
.zd__pack:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.zd__nota { display: flex; gap: 8px; margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--texto-60); }
.zd__nota:empty { display: none; }
.zd__nota .lucide { width: 15px; height: 15px; margin-top: 1px; color: var(--acento-hondo); }
.zd__pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(31, 26, 21, .08); background: var(--blanco); }
.zd__total { display: flex; flex-direction: column; }
.zd__total span { font-size: var(--t-nota); color: var(--texto-60); }
.zd__total b { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.zd__ahorro { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--t-nota); font-style: normal; font-weight: 600; color: var(--mv-texto-acento); }
.zd__ahorro .lucide { width: 14px; height: 14px; }
.zd__agregar { height: 50px; padding: 0 22px 0 18px; font-size: 15px; }
.zd__agregar.hecho, .zd__agregar.hecho:hover { background: var(--verde); }
.zd__agregar .zd__ico-ok, .zd__agregar.hecho .zd__ico-mas { display: none; }
.zd__agregar.hecho .zd__ico-ok { display: block; }
.zd__conf { margin-top: 10px; font-size: var(--t-nota); line-height: 1.45; color: var(--texto-60); }

/* Diálogo común */
.mv-det { padding: 0; border: 0; background: var(--blanco); color: var(--texto); max-width: none; max-height: none; overscroll-behavior: contain; }
.mv-det::backdrop { background: rgba(20, 15, 10, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mv-det__in { position: relative; }
.mv-det__cerrar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--crema); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.mv-det__cerrar:hover { background: var(--texto); color: var(--blanco); }
.mv-det__cerrar .lucide { width: 18px; height: 18px; }
.mv-det__asa { display: none; }

/* ---------- 6. P1 · panel lateral derecho ---------- */
.mv-det--panel { position: fixed; inset: 0 0 0 auto; width: min(500px, 100%); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; overflow: auto; box-shadow: -20px 0 60px rgba(31, 26, 21, .2); }
.mv-det--panel[open] { animation: mv-panel .4s var(--curva); }
@keyframes mv-panel { from { transform: translateX(48px); opacity: 0; } }
.mv-det--panel .mv-det__in { padding: 0 28px; }
.mv-det__cab { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 68px; margin: 0 -28px 8px; padding: 0 16px 0 28px; background: var(--blanco); box-shadow: 0 1px 0 rgba(31, 26, 21, .08); }
.mv-det__cab p { font-size: 14px; font-weight: 600; }
.mv-det--panel .zd { grid-template-columns: 1fr; gap: 22px; }
.mv-det--panel .zd__media { aspect-ratio: 16 / 9; }
.mv-det--panel .zd__packs { grid-template-columns: 1fr; gap: 6px; }
.mv-det--panel .zd__pack { align-items: center; padding: 11px 16px; }
.mv-det--panel .zd__pack-s { grid-column: 1; }
.mv-det--panel .zd__pack-p { grid-row: 1 / span 2; grid-column: 2; font-size: 16px; }
.mv-det--panel .zd__pie { position: sticky; bottom: 0; z-index: 2; margin: 18px -28px 0; padding: 14px 28px; border-top: 0; box-shadow: 0 -1px 0 rgba(31, 26, 21, .08); }
.mv-det--panel .zd__conf { padding-bottom: 24px; }

/* ---------- 7. P2 · ventana centrada ---------- */
.mv-det--modal { width: min(960px, calc(100% - 48px)); max-height: calc(100dvh - 48px); margin: auto; border-radius: 22px; overflow: auto; }
.mv-det--modal[open] { animation: mv-modal .35s var(--curva); }
@keyframes mv-modal { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.mv-det--modal .mv-det__in { padding: 28px; }
.mv-det--modal .mv-det__cerrar { position: absolute; z-index: 3; top: 16px; right: 16px; }
.mv-det--modal .zd__cuerpo { padding-right: 36px; }
.mv-det--modal .zd__media { position: sticky; top: 0; }

/* ---------- 8. DEMO · descuento (solo maqueta; ver js/mujer-v2.js) ---------- */
.mv-dcto { position: absolute; z-index: 1; top: 12px; left: 12px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pildora); background: var(--acento); color: var(--texto); font-size: 12.5px; font-weight: 700; letter-spacing: 0; box-shadow: 0 4px 12px -4px rgba(31, 26, 21, .3); }
.zh__precio s { margin-right: 2px; color: var(--texto-45); text-decoration-thickness: 1px; }
.zh__precio s + b { color: var(--mv-texto-acento); }
.mv-demo { position: fixed; z-index: 56; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 12px; border-radius: var(--r-pildora); background: var(--blanco); box-shadow: 0 0 0 1px rgba(31, 26, 21, .08), 0 12px 30px -10px rgba(31, 26, 21, .35); font-size: 14px; font-weight: 600; }
.mv-demo small { font-size: var(--t-nota); font-weight: 500; color: var(--texto-60); }
.mv-demo__interruptor { position: relative; width: 34px; height: 20px; border-radius: var(--r-pildora); background: var(--crema-2); box-shadow: inset 0 0 0 1px rgba(31, 26, 21, .12); transition: background-color .2s var(--curva-hover); }
.mv-demo__interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); box-shadow: 0 1px 3px rgba(31, 26, 21, .3); transition: transform .2s var(--curva); }
.mv-demo[aria-pressed="true"] .mv-demo__interruptor { background: var(--acento); box-shadow: none; }
.mv-demo[aria-pressed="true"] .mv-demo__interruptor::after { transform: translateX(14px); }

/* ---------- 9. Responsive ---------- */
@media (max-width: 1100px) {
  .mv-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mv-buscar { flex-basis: 240px; }
}
@media (max-width: 900px) {
  .mv-hero1 .dm-hero__rejilla { grid-template-columns: 1fr; gap: 22px; padding-top: 22px; padding-bottom: 28px; }
  .mv-hero1 .dm-genero { margin-top: 20px; }
  .mv-hero1 .dm-hero__foto { width: 100%; aspect-ratio: 2.3 / 1; margin-top: 0; }

  .mv-hero2__in { padding-top: 30px; padding-bottom: 24px; }
  .mv-hero2 .dm-hero__titulo { font-size: clamp(2.1rem, 9.6vw, 2.6rem); }
  .mv-hero2 .dm-genero { margin-top: 20px; }
  .mv-franja__in { min-height: 38px; padding-block: 7px; font-size: var(--t-nota); }
  .mv-franja__in .lucide { display: none; }
  .mv-franja__in { column-gap: 16px; }
  .mv-franja__in li + li::before { display: none; }

  .mv-barra { padding: 18px 0 2px; }
  .mv-barra__in { flex-direction: column; align-items: stretch; gap: 12px; }
  .mv-buscar { order: -1; flex: none; }
  .mv-buscar__campo { height: 48px; }
  .mv-tabs { margin: -3px calc(var(--pad-x) * -1); padding: 3px var(--pad-x); scroll-padding-inline: var(--pad-x); }
  .mv-tab { height: 52px; padding: 5px 15px 5px 5px; gap: 9px; }
  .mv-tab__img { width: 42px; height: 42px; }
  .mv-tab__n { font-size: 13.5px; }
  .mv-tab__c { font-size: var(--t-nota); }

  /* P2 en móvil: lupa al inicio de la fila de pestañas; el campo se despliega encima de ellas */
  .mv-barra--pegajosa { top: 58px; padding: 10px 0; }
  .mv--p2 .mv-barra__in { flex-direction: row; align-items: center; gap: 8px; }
  .mv--p2 .mv-buscar__abrir { display: grid; }
  .mv--p2 .mv-tabs { margin-left: 0; padding-left: 3px; }
  .mv--p2 .mv-buscar { display: none; }
  .mv--p2 .mv-barra--buscando .mv-buscar { position: absolute; z-index: 2; inset: 0 var(--pad-x); display: flex; gap: 8px; background: var(--blanco); }
  .mv--p2 .mv-barra--buscando .mv-buscar__cerrar { display: grid; }
  .mv--p2 .mv-barra--buscando .mv-tabs, .mv--p2 .mv-barra--buscando .mv-buscar__abrir { visibility: hidden; }
  .mv--p2 .mv-tab { height: 48px; padding: 4px 14px 4px 4px; }
  .mv--p2 .mv-tab__img { width: 40px; height: 40px; }
  .mv-barra--pegajosa.fija { padding: 8px 0; }
  .mv-barra--pegajosa.fija .mv-tab { height: 42px; padding: 3px 14px 3px 3px; }
  .mv-barra--pegajosa.fija .mv-tab__img { width: 36px; height: 36px; }
  .mv-barra--pegajosa.fija .mv-buscar__abrir, .mv-barra--pegajosa.fija .mv-buscar__cerrar { width: 42px; height: 42px; }
  .mv-barra--pegajosa.fija .mv-buscar__campo { height: 42px; }

  .mv-grupo { margin-top: 36px; }
  .mv-grupo:first-child { margin-top: 24px; }
  .mv-grupo__cab { margin-bottom: 14px; }
  .mv-grupo__cab h3 { font-size: 20px; }
  .mv-lista > .mv-rejilla { margin-top: 24px; }
  .mv-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
  .mv-dcto { top: 8px; left: 8px; height: 24px; padding: 0 8px; font-size: 12px; }
  .zh__precio s { display: inline-block; }

  /* Detalle común en móvil */
  .zd { grid-template-columns: 1fr; gap: 18px; }
  .zd__nombre { font-size: 1.85rem; }
  .zd__inc { font-size: 14.5px; }
  .zd__packs { margin-top: 18px; gap: 6px; }
  .zd__pack { padding: 11px 13px; }
  .zd__pack-n { font-size: 14px; }
  .zd__total b { font-size: 26px; }
  .zd__pie { gap: 12px; }
  .zd__agregar { flex: 1; height: 48px; padding: 0 16px 0 14px; font-size: 14.5px; }

  /* P1 en móvil: el panel pasa a hoja inferior */
  .mv-det--panel { inset: auto 0 0 0; width: 100%; height: auto; max-height: 90dvh; margin: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(31, 26, 21, .2); }
  .mv-det--panel[open] { animation: mv-hoja .4s var(--curva); }
  @keyframes mv-hoja { from { transform: translateY(64px); opacity: .4; } }
  .mv-det--panel .mv-det__in { padding: 0 var(--pad-x); }
  .mv-det__cab { height: 56px; margin: 0 calc(var(--pad-x) * -1) 6px; padding: 0 10px 0 var(--pad-x); box-shadow: none; }
  .mv-det__asa { display: block; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(31, 26, 21, .16); }
  .mv-det--panel .zd { grid-template-columns: 104px minmax(0, 1fr); gap: 14px 16px; }
  .mv-det--panel .zd__media { grid-row: 1; aspect-ratio: .84; border-radius: 14px; }
  .mv-det--panel .zd__cuerpo { display: contents; }
  .mv-det--panel .zd__cuerpo > * { grid-column: 1 / -1; }
  .mv-det--panel .zd__grupo, .mv-det--panel .zd__nombre, .mv-det--panel .zd__dur { grid-column: 2; grid-row: 1; }
  .mv-det--panel .zd__grupo { align-self: start; margin-top: 10px; }
  .mv-det--panel .zd__nombre { align-self: center; margin-top: 0; font-size: 1.6rem; }
  .mv-det--panel .zd__dur { align-self: end; margin: 0 0 10px; font-size: 13px; }
  .mv-det--panel .zd__inc { margin-top: 0; }
  .mv-det--panel .zd__packs { margin-top: 4px; grid-template-columns: 1fr 1fr; }
  .mv-det--panel .zd__pack { grid-template-columns: 1fr; padding: 10px 12px; }
  .mv-det--panel .zd__pack-p, .mv-det--panel .zd__pack-s { grid-row: auto; grid-column: 1; }
  .mv-det--panel .zd__pie { margin: 14px calc(var(--pad-x) * -1) 0; padding: 12px var(--pad-x) 14px; }
  .mv-det--panel .zd__conf { padding-bottom: 18px; }

  /* P2 en móvil: la ventana ocupa toda la pantalla, foto arriba */
  .mv-det--modal { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .mv-det--modal[open] { animation: mv-hoja .35s var(--curva); }
  .mv-det--modal .mv-det__in { padding: 0 0 0; }
  .mv-det--modal .mv-det__cerrar { position: fixed; top: 12px; right: 12px; background: var(--blanco); box-shadow: 0 2px 10px rgba(31, 26, 21, .15); }
  .mv-det--modal .zd__media { position: relative; border-radius: 0; aspect-ratio: 4 / 3; }
  .mv-det--modal .zd__cuerpo { padding: 0 var(--pad-x); }
  .mv-det--modal .zd__pie { position: sticky; bottom: 0; z-index: 2; margin: 16px calc(var(--pad-x) * -1) 0; padding: 12px var(--pad-x) 14px; border-top: 0; box-shadow: 0 -1px 0 rgba(31, 26, 21, .08); }
  .mv-det--modal .zd__conf { padding-bottom: 20px; }

  .mv-det .aviso { bottom: 112px; } /* con el detalle abierto, el aviso va sobre el pie con «Agregar» */
  .mv-demo { left: 16px; bottom: 16px; height: 44px; padding: 0 14px 0 10px; gap: 8px; font-size: 13px; }
  .mv-demo small { font-size: var(--t-nota); }
}
@media (max-width: 370px) {
  .mv-tab__n { font-size: 13px; }
  .mv-det--panel .zd { grid-template-columns: 88px minmax(0, 1fr); }
  .mv-demo { padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-lista--cambio .zh__card, .mv-lista--cambio .zh__mas, .mv-det[open] { animation: none !important; }
  .zh__mas { transition: none; }
  .mv-tab, .mv-tab__img, .mv-buscar__campo { transition: none; }
}

/* ---------- 10. Páginas oficiales (body.mv--final): P2 ajustada por la clienta ----------
   - Un solo fondo blanco para hero + pestañas + rejilla (sin crema ni filete entre ellos) y sin la franja de datos.
   - El buscador parece un campo de formulario (blanco, borde visible, lupa) para no confundirse con las pestañas crema.
   - Móvil: campo de búsqueda completo sobre las pestañas; cuando la barra queda fija, en su lugar va la lupa
     (círculo blanco con borde, mismo lenguaje de campo) que despliega el campo encima de las pestañas. */
.mv--final { --mv-borde-campo: rgba(31, 26, 21, .24); }
.mv-hero3 { background: var(--blanco); }
.mv-hero3__in { display: flex; flex-direction: column; align-items: center; padding-top: 52px; padding-bottom: 14px; text-align: center; }
.mv-hero3 .dm-hero__titulo { margin-top: 0; font-size: clamp(2.5rem, 4.4vw, 3.9rem); }
.mv-hero3 .dm-hero__sub { max-width: 52ch; margin-inline: auto; }
.mv-hero3 .dm-genero { margin-top: 26px; background: var(--crema); box-shadow: none; }
.mv-hero3 .dm-genero__op:hover { background: var(--crema-2); }
.mv-hero3 .dm-genero__op.activo:hover { background: var(--texto); }

/* Migas de pan (3.22): páginas de tratamientos y páginas propias (inc/rutas.php). «Tratamientos» va sin enlace. */
.migas { padding-top: 16px; }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; color: var(--texto-60); }
.migas li { display: inline-flex; align-items: center; gap: 8px; }
.migas li + li::before { content: "/"; color: rgba(31, 26, 21, .3); }
.migas a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: underline; text-decoration-color: rgba(31, 26, 21, .25); text-underline-offset: 3px; }
.migas a:hover { color: var(--texto); text-decoration-color: currentColor; }
.migas [aria-current] { color: var(--texto); font-weight: 500; }
.migas + .mv-hero3 .mv-hero3__in { padding-top: 24px; }

.mv--final .mv-buscar { flex-basis: 272px; }
.mv--final .mv-buscar__campo { padding-left: 16px; border: 1.5px solid var(--mv-borde-campo); background: var(--blanco); box-shadow: none; transition: border-color .2s var(--curva-hover), box-shadow .2s var(--curva-hover), height .25s var(--curva); }
.mv--final .mv-buscar__campo:hover { border-color: rgba(31, 26, 21, .4); }
.mv--final .mv-buscar__campo:focus-within { border-color: var(--acento); background: var(--blanco); box-shadow: 0 0 0 3px rgba(206, 137, 59, .18); }
.mv--final .mv-buscar__campo > .lucide { color: var(--texto); opacity: .7; }
.mv--final .mv-buscar input:focus-visible { outline: none; }
.mv--final .mv-buscar-arriba { display: none; }
.mv--final .mv-buscar-arriba input { flex: 1; min-width: 0; height: 100%; margin-left: 10px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--texto); outline: none; }
.mv--final .mv-buscar-arriba input::placeholder { color: var(--texto-60); }
.mv--final .mv-buscar-arriba input::-webkit-search-cancel-button { display: none; }
.mv--final .mv-buscar__abrir { border: 1.5px solid var(--mv-borde-campo); background: var(--blanco); }
.mv--final .mv-buscar__cerrar { background: var(--crema); }

@media (max-width: 900px) {
  .mv-hero3__in { padding-top: 30px; padding-bottom: 18px; }
  .migas { padding-top: 12px; }
  .migas + .mv-hero3 .mv-hero3__in { padding-top: 16px; }
  .mv-hero3 .dm-hero__titulo { font-size: clamp(2.1rem, 9.6vw, 2.6rem); }
  .mv-hero3 .dm-genero { margin-top: 20px; }
  .mv--final .mv-buscar-arriba { display: block; }
  .mv--final .mv-buscar-arriba .mv-buscar__campo { height: 48px; }
  .mv--final .mv-barra--pegajosa:not(.fija) { padding-top: 12px; }
  /* Sin fijar: el campo está arriba, así que la lupa se oculta y las pestañas van de borde a borde */
  .mv--final .mv-barra:not(.fija):not(.mv-barra--buscando) .mv-buscar__abrir { display: none; }
  .mv--final .mv-barra:not(.fija):not(.mv-barra--buscando) .mv-tabs { margin-left: calc(var(--pad-x) * -1); padding-left: var(--pad-x); }
}

@media (max-width: 900px) {
  /* Aviso: ancho según su texto (con left:50% el navegador lo partía en líneas cortas) */
  .mv .aviso { width: max-content; }
  /* Con el detalle abierto, el aviso va arriba (sobre la foto) para no tapar el total ni «Agregar» */
  .mv--final .mv-det .aviso { top: 68px; bottom: auto; transform: translate(-50%, -12px); }
  .mv--final .mv-det .aviso.visible { transform: translate(-50%, 0); }
}

/* Espacio reservado mientras js/mujer-v2.js pinta la lista de zonas (evita el salto de diseño) */
.mv-lista:empty { min-height: 150vh; }
.mv-tabs:empty { min-height: 44px; }

/* Promo en la ventana de zona o servicio (4.16): «En promoción» arriba, la sesión (u opción) en promo con su precio
   destacado y el regular tachado; los packs vigentes van sin insignia ni tachado. */
.zd__promo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; }
.zd__promo-eti { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pildora); background: var(--acento); color: var(--texto); font-size: 12px; font-weight: 700; }
.zd__promo-hasta { font-size: var(--t-nota); color: var(--texto-60); }
.zd__pack--promo { box-shadow: inset 0 0 0 1.5px var(--acento); }
.zd__pack--promo .zd__pack-p { color: var(--mv-texto-acento); }
.zd__pack-s s { white-space: nowrap; text-decoration-thickness: 1px; }

/* 4.18 · Ventana de la zona o del tratamiento (maqueta «Cotiza y reserva» v3): «PROMO» junto al nombre, desplegable y un
   solo precio grande (rojo si es precio promocional), «S/x c/u · Ahorras S/y», «Agregar a mi pedido» y «Promo hasta el …».
   La insignia, el precio rojo, el desplegable y la línea c/u son comunes (css/carrito.css). Espaciados en múltiplos de 4. */
.zd__nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 0; }
.zd__meta { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--texto-60); }
.zd__compra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.zd__precio { font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zd__cu { margin-top: 4px; }
.zd__cuerpo > .zd__agregar { flex: none; justify-content: center; width: 100%; height: 48px; margin-top: 16px; } /* flex: none: en móvil no se encoge */
.zd__hasta { font-size: 13px; }
.sv-zd .zd__inc, .sv-zd .sv-nota, .sv-zd .sv-ben, .sv-zd .sv-ideal { margin-top: 12px; }

/* === css/servicio.css === */
/* =========================================================
   Plantilla de página de servicio (faciales, corporales, pestañas y cejas, manicure y pedicure, cera e hilo)
   Se carga después de depilacion-mujer.css (header interno, .dm-hero__titulo), zonas-home.css (tarjeta .zh__card de
   la home) y mujer-v2.css (hero .mv-hero3, pestañas .mv-tab, rejilla .mv-rejilla, detalle .mv-det/.zd), que se reutilizan.
   1. Lista y pestañas  2. Tarjeta: precio + duración  3. Detalle  4. Completa tu rutina  5. Móvil
   ========================================================= */

/* ---------- 1. Lista y pestañas ---------- */
.sv-lista { padding-bottom: var(--esp-seccion); }
.sv-barra { padding: 22px 0 0; }
.sv-barra .contenedor { display: flex; align-items: center; gap: 16px; }
.sv-barra .mv-tabs { flex: 0 1 auto; }
.sv-cont > .mv-rejilla { margin-top: 28px; }
.sv-cont .mv-grupo:first-child { margin-top: 28px; }
.sv-buscar { flex: 0 0 272px; margin-left: auto; }
.sv-vacio { margin-top: 32px; padding: 40px 24px; border-radius: 18px; background: var(--crema); text-align: center; color: var(--texto-60); }
/* Páginas con 4 o 5 servicios: la rejilla no se estira con tarjetas gigantes */
.sv .mv-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Respaldo elegante cuando un servicio aún no tiene foto (o la foto no carga) */
.sv-sinfoto { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(90% 75% at 50% 42%, #FFFDF9 0%, var(--mv-crema-foto) 62%, #F3E6D3 100%); color: #C9A67A; }
.sv-sinfoto .lucide { width: 34%; height: 34%; max-width: 88px; max-height: 88px; stroke-width: 1.1; }
.mv-tab__img .sv-sinfoto .lucide { width: 55%; height: 55%; }

/* ---------- 2. Tarjeta: precio y duración en la misma línea ---------- */
.sv-card .zh__precio { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.sv-dur { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sv-dur .lucide { width: 15px; height: 15px; color: var(--acento-hondo); }
.sv-card .zh__nombre { font-size: 20px; }
/* Servicio con página propia (3.16): «Ver detalle» sobre la foto, junto a la tarjeta (no dentro: la tarjeta abre la ventana) */
.sv-card-con { position: relative; min-width: 0; }
.sv-card__pagina { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--r-pildora); background: rgba(255, 255, 255, .94); box-shadow: 0 4px 12px -6px rgba(31, 26, 21, .35); color: var(--texto); font-size: 13px; font-weight: 600; letter-spacing: 0; transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.sv-card__pagina::after { content: ""; position: absolute; inset: -6px; } /* área táctil de 44 px */
.sv-card__pagina .lucide { width: 14px; height: 14px; }
.sv-card__pagina:hover { background: var(--texto); color: var(--blanco); }

/* ---------- 3. Detalle (ventana centrada de mujer-v2.css) ---------- */
.sv-zd .zd__inc { margin-top: 12px; color: var(--texto); opacity: .78; }
.sv-nota { display: flex; gap: 8px; align-self: flex-start; margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: var(--acento-suave); font-size: 13.5px; line-height: 1.4; color: #6E4518; }
.sv-nota .lucide { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.sv-ben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.sv-ben li { display: flex; gap: 8px; font-size: 14px; line-height: 1.4; }
.sv-ben .lucide { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--verde); }
.sv-ideal { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(31, 26, 21, .08); font-size: 14px; line-height: 1.45; color: var(--texto-60); }
.sv-ideal .lucide { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--acento-hondo); }
/* Zonas de cera: varias a la vez (casilla cuadrada para que se entienda que es selección múltiple) */
.sv-ops { margin-top: 20px; }
.sv-op { grid-template-columns: auto 1fr auto; align-items: center; gap: 0 10px; padding: 11px 14px; }
.sv-op::before { content: ""; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(31, 26, 21, .3); background: var(--blanco) center / 12px no-repeat; transition: background-color .15s var(--curva-hover), box-shadow .15s var(--curva-hover); }
.sv-op:has(input:checked)::before { background-color: var(--acento); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 13l4 4L19 7'/%3E%3C/svg%3E"); box-shadow: none; }
.sv-op .zd__pack-n { font-size: 14px; }
.sv-op .zd__pack-p { font-size: 14.5px; }
.zd__agregar:disabled { opacity: .45; cursor: not-allowed; }
.sv-det .zd__pie { margin-top: 20px; }
.sv-det .zd__nota { margin-top: 14px; }

/* ---------- 4. Completa tu rutina: láser destacado + las otras 4 páginas ---------- */
.sv-mas { padding-block: var(--esp-junta) var(--esp-seccion); background: var(--blanco); } /* 4.33: blanco, sigue a la lista */
.sv-mas__titulo { margin-bottom: 32px; }
.sv-mas__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.sv-laser { position: relative; display: flex; align-items: flex-end; min-height: 440px; overflow: hidden; border-radius: 20px; color: var(--blanco); isolation: isolate; }
.sv-laser img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1s var(--curva); }
.sv-laser::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 12, 8, 0) 35%, rgba(16, 12, 8, .72) 100%); }
.sv-laser:hover img { transform: scale(1.04); }
.sv-laser__txt { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; }
.sv-laser__n { font-family: var(--serif); font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; }
.sv-laser__p { margin-top: 8px; max-width: 34ch; font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.sv-laser__p b { color: #F0C38A; font-weight: 600; }
.sv-laser__cta { margin-top: 20px; }
.sv-laser:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.sv-otros { display: grid; grid-template-rows: repeat(4, 1fr); gap: 12px; }
.sv-otro { display: flex; align-items: center; gap: 18px; padding: 12px 18px 12px 12px; border-radius: 18px; background: var(--crema); transition: box-shadow .25s var(--curva-hover); }
.sv-otro:hover { box-shadow: 0 10px 28px -14px rgba(31, 26, 21, .3); }
.sv-otro:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.sv-otro__foto { flex: none; width: 76px; height: 76px; overflow: hidden; border-radius: 14px; background: var(--mv-crema-foto); }
.sv-otro__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sv-otro__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sv-otro__n { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; }
.sv-otro__p { margin-top: 3px; font-size: 13.5px; color: var(--texto-60); }
.sv-otro__p b { font-weight: 600; color: var(--texto); }
.sv-otro__ir { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--crema); transition: background-color .25s var(--curva-hover), color .25s var(--curva-hover); }
.sv-otro__ir .lucide { width: 17px; height: 17px; }
.sv-otro:hover .sv-otro__ir { background: var(--acento); color: var(--blanco); }

/* ---------- 5. Responsive ---------- */
@media (max-width: 1100px) {
  .sv .mv-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sv-barra { padding-top: 14px; }
  .sv-barra .mv-tabs { margin: -3px calc(var(--pad-x) * -1); padding: 3px var(--pad-x); scroll-padding-inline: var(--pad-x); }
  .sv-cont > .mv-rejilla { margin-top: 20px; }
  .sv-cont .mv-grupo:first-child { margin-top: 22px; }
  .sv .mv-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-card .zh__nombre { font-size: 16.5px; }
  .sv-card .zh__precio { gap: 1px 10px; }
  .sv-dur .lucide { width: 13px; height: 13px; }

  .sv-ben { grid-template-columns: 1fr; gap: 7px; margin-top: 14px; }
  .sv-ben li { font-size: 14px; }
  .sv-op { padding: 10px 12px; }

  .sv-mas__titulo { margin-bottom: 22px; }
  .sv-mas__rejilla { grid-template-columns: 1fr; gap: 12px; }
  .sv-laser { min-height: 360px; border-radius: 18px; }
  .sv-laser__txt { padding: 22px; }
  .sv-laser__p { font-size: 14.5px; }
  .sv-laser__cta { margin-top: 16px; }
  .sv-otros { gap: 10px; grid-template-rows: none; }
  .sv-otro { gap: 14px; padding: 10px 14px 10px 10px; border-radius: 16px; }
  .sv-otro__foto { width: 64px; height: 64px; border-radius: 12px; }
  .sv-otro__n { font-size: 17.5px; }
  .sv-otro__ir { width: 36px; height: 36px; }
}
@media (max-width: 370px) {
  .sv-card .zh__nombre { font-size: 15.5px; }
  .sv-otro__n { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-laser img, .sv-op::before { transition: none; }
}

/* === css/faq-home.css === */
/* Preguntas frecuentes (home v5) · acordeón editorial, sin números ni panel lateral */
.fh__rejilla { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; align-items: start; }
.fh__lado { position: sticky; top: 112px; }
.fh__lado .parrafo { max-width: 32ch; }
.fh__lista { border-top: 1px solid rgba(31, 26, 21, .12); }
.fh__item { border-bottom: 1px solid rgba(31, 26, 21, .12); }
.fh__item h3 { margin: 0; font: inherit; }
.fh__btn { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 16px; width: 100%; padding: 24px 0; text-align: left; }
.fh__q { font-family: var(--serif); font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; transition: color .3s var(--curva-hover); }
.fh__signo { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--crema); transition: background-color .3s var(--curva-hover), color .3s var(--curva-hover); }
.fh__signo::before, .fh__signo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: currentColor; border-radius: 2px; transition: transform .4s var(--curva); }
.fh__signo::after { transform: rotate(90deg); }
.fh__btn:hover .fh__q { color: var(--acento-hondo); }
.fh__btn:hover .fh__signo { background: var(--acento-suave); }
.fh__item.abierto .fh__signo { background: var(--acento); color: var(--blanco); }
.fh__item.abierto .fh__signo::after { transform: rotate(0deg); }
.fh__resp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--curva); }
.fh__resp > div { overflow: hidden; }
.fh__resp p { max-width: 56ch; padding: 0 60px 26px 0; font-size: 16px; line-height: 1.6; color: var(--texto-60); }
.fh__item.abierto .fh__resp { grid-template-rows: 1fr; }

@media (max-width: 1100px) { .fh__rejilla { gap: 48px; } }
@media (max-width: 900px) {
  .fh__rejilla { grid-template-columns: 1fr; gap: 28px; }
  .fh__lado { position: static; }
  .fh__btn { grid-template-columns: 1fr 38px; padding: 20px 0; }
  .fh__q { font-size: 20px; }
  .fh__signo { width: 38px; height: 38px; }
  .fh__resp p { padding-right: 0; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .fh__resp, .fh__signo::after { transition: none; } }
.fh__todas { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 600; color: var(--acento-hondo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fh__todas .lucide { width: 16px; height: 16px; }
.fh__todas:hover { color: var(--texto); }

/* ---------- Portada (4.20): 3 preguntas a la vista ----------
   Todas siguen en el HTML y en el FAQPage; con JavaScript se ven 3 y «Ver más» / «Ver menos» abre y cierra el resto
   (js/faq-home.js). Sin JavaScript se ven todas y no hay botón. Debajo de la lista: «Ver más» y «Ver todas las preguntas». */
html.js .fh--portada .fh__lista:not(.fh__lista--todas) .fh__item:nth-child(n+4) { display: none; }
.fh__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.fh__mas { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 20px; border-radius: var(--r-pildora); background: var(--crema); font-size: 14px; font-weight: 600; transition: background-color .2s var(--curva-hover); }
.fh__mas:hover { background: var(--acento-suave); }
.fh__mas .lucide { width: 16px; height: 16px; transition: transform .3s var(--curva); }
.fh__mas[aria-expanded="true"] .lucide { transform: rotate(45deg); }
.fh__mas[hidden], html:not(.js) .fh__mas { display: none; }
.fh--portada .fh__todas { margin-top: 0; }
@media (max-width: 900px) {
  .fh--portada .fh__rejilla { gap: 16px; }
  .fh--portada .parrafo { display: none; } /* en el celular, el título basta */
  .fh__pie { gap: 8px; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .fh__mas .lucide { transition: none; } }

/* === css/sedes-pucp.css === */
/* =========================================================
   Nuestras sedes · propuesta 29 oct (referencia de Cristian: Idiomas PUCP).
   Arriba, una pestaña por sede («Sede Miraflores» y debajo la calle) con una barra que se llena mientras la sede está
   a la vista y pasa sola a la siguiente. Debajo, un escenario con la foto de la sede de fondo (o el mapa, con el
   interruptor «Sede / Mapa») y una tarjeta blanca con la dirección, el horario y las acciones.
   Escritorio: la tarjeta va encima de la foto, a la derecha. Celular: foto arriba y tarjeta debajo.
   Espaciados en múltiplos de 4.
   ========================================================= */
.sp__titulo { margin: 0 0 24px; text-align: center; }

/* ---------- Pestañas con barra de avance ---------- */
.sp__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 760px; margin: 0 auto 24px; }
.sp__tab { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 12px; align-items: start; align-content: start; padding: 0; border: 0; background: none; color: var(--texto-60); text-align: left; cursor: pointer; }
.sp__tab .lucide { width: 24px; height: 24px; margin-top: 2px; color: currentColor; }
.sp__tab-nombre { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; transition: color .2s var(--curva-hover); }
.sp__tab-dir { display: block; margin-top: 4px; font-size: 15px; line-height: 1.4; }
.sp__tab:hover, .sp__tab.activo { color: var(--texto); }
.sp__tab.activo .sp__tab-nombre, .sp__tab.activo .lucide { color: var(--acento-hondo); }
.sp__barra { grid-column: 1 / -1; position: relative; height: 6px; margin-top: 16px; overflow: hidden; border-radius: var(--r-pildora); background: var(--crema-2); }
.sp__barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--boton-fondo); }
.sp__tab.activo .sp__barra::after { width: 100%; }
.sp--auto .sp__tab.activo .sp__barra::after { animation: sp-llenar var(--sp-tiempo, 8s) linear forwards; }
@keyframes sp-llenar { from { width: 0; } to { width: 100%; } }
.sp__tab:focus-visible { outline: 2px solid var(--acento-hondo); outline-offset: 6px; border-radius: 8px; }

/* ---------- Escenario: foto o mapa de fondo + tarjeta ---------- */
.sp__panel[hidden] { display: none; }
/* Cambio de sede suave: la foto entra con un fundido y un leve acercamiento; la tarjeta, con un fundido que sube */
.sp__panel:not([hidden]) .sp__media { animation: sp-foto .7s var(--curva) both; }
.sp__panel:not([hidden]) .sp__tarjeta { animation: sp-tarjeta .6s var(--curva) .1s both; }
@keyframes sp-foto { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes sp-tarjeta { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp__panel:not([hidden]) .sp__media, .sp__panel:not([hidden]) .sp__tarjeta { animation: none; } }
/* Título, pestañas y escenario caben juntos bajo la cabecera fija (76 px), con 32 px de aire arriba y abajo:
   324 = cabecera 76 + título 60 + 24 + pestañas 76 + 24 + aire 64. Entre 400 y 520 px de alto (Cristian, 29 oct) */
.sp__escena { position: relative; height: clamp(400px, calc(100svh - 324px), 520px); overflow: hidden; border-radius: 24px; background: var(--crema-2); box-shadow: 0 0 0 1px var(--borde-tarjeta), 0 10px 30px rgba(31, 26, 21, .06); }
.sp__foto, .sp__mapa { position: absolute; inset: 0; }
.sp__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }
.sp__mapa iframe { width: 100%; height: 100%; border: 0; }
.sp__foto[hidden], .sp__mapa[hidden] { display: none; }

/* Interruptor Sede / Mapa */
.sp__vista { position: absolute; left: 24px; bottom: 24px; z-index: 2; display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pildora); background: var(--blanco); box-shadow: 0 8px 24px rgba(31, 26, 21, .16); }
.sp__vista button { height: 44px; min-width: 96px; padding: 0 20px; border: 0; border-radius: var(--r-pildora); background: none; color: var(--texto); font-size: var(--t-texto); font-weight: 600; cursor: pointer; transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.sp__vista button[aria-pressed="false"]:hover { background: var(--crema-2); color: var(--acento-hondo); }
.sp__vista button[aria-pressed="true"] { background: var(--boton-fondo); color: var(--blanco); box-shadow: var(--boton-sombra); }
.sp__vista button[aria-pressed="true"]:hover { box-shadow: var(--boton-sombra-hover); }
.sp__vista button:focus-visible { outline: 2px solid var(--acento-hondo); outline-offset: 2px; }

/* Tarjeta blanca con los datos */
/* Mide lo que su contenido (sin hueco entre el horario y los botones) y va centrada en el alto del escenario */
.sp__tarjeta { position: absolute; top: 24px; right: 24px; bottom: 24px; z-index: 2; display: flex; flex-direction: column; width: min(440px, 42%); height: fit-content; max-height: calc(100% - 48px); margin-block: auto; overflow: auto; padding: 40px; border-radius: 20px; background: var(--blanco); box-shadow: 0 12px 32px rgba(31, 26, 21, .12); }
.sp__nombre { font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; }
.sp__nombre em { font-style: normal; color: var(--acento-hondo); }
.sp__dato { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; margin-top: 32px; }
.sp__dato + .sp__dato { margin-top: 24px; }
.sp__dato .lucide { width: 24px; height: 24px; color: var(--acento-hondo); }
.sp__eti { display: block; font-size: var(--t-nota); font-weight: 600; line-height: 24px; letter-spacing: .08em; text-transform: uppercase; color: var(--acento-hondo); }
.sp__valor { display: block; margin-top: 4px; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--texto); }
.sp__valor small { display: block; font-size: 15px; font-weight: 400; color: var(--texto-60); }
.sp__acciones { display: flex; align-items: center; gap: 24px; padding-top: 32px; }
.sp__link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-texto); font-weight: 600; color: var(--texto); text-decoration: underline; text-decoration-color: rgba(31, 26, 21, .3); text-underline-offset: 4px; }
.sp__link:hover { color: var(--acento-hondo); text-decoration-color: currentColor; }
.sp__link .lucide { width: 18px; height: 18px; }
.sp__acciones .boton { height: 52px; padding: 0 24px; flex-direction: row; }
/* «Ir con Waze»: el mismo acabado satinado de los botones (brillo arriba, degradado en diagonal y sombra del color),
   en un celeste Waze claro con texto azul casi negro (Cristian, 29 oct: el blanco sobre celeste hondo no le gustó).
   Contraste del texto: 10,6:1 sobre #5CD7FF y 9,4:1 en el borde más oscuro (#33CCFF) */
.sp__waze { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 40%), linear-gradient(115deg, #7FE1FF 0%, #5CD7FF 36%, #57D5FF 62%, #33CCFF 100%); color: #0A1A2B; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 26px -12px rgba(30, 170, 225, .8), 0 3px 8px -4px rgba(8, 70, 110, .3); }
.sp__waze:hover { transform: translateY(-2px) scale(1.01); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 34px -12px rgba(30, 170, 225, .9), 0 3px 8px -4px rgba(8, 70, 110, .3); }
.sp__waze:active { transform: none; }
.sp__waze:focus-visible { outline: 2px solid #0A1A2B; outline-offset: 3px; }
.sp__ico { flex: none; width: 20px; height: 20px; }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .sp__titulo { margin-bottom: 24px; }
  .sp__tabs { gap: 16px; margin-bottom: 24px; }
  .sp__tab { grid-template-columns: minmax(0, 1fr); }
  .sp__tab .lucide { width: 22px; height: 22px; margin: 0 0 8px; }
  .sp__tab-nombre { font-size: 18px; }
  .sp__tab-dir { font-size: 14px; }
  .sp__barra { margin-top: 12px; }

  .sp__escena { height: auto; display: flex; flex-direction: column; border-radius: 20px; background: var(--blanco); }
  .sp__media { position: relative; aspect-ratio: 4 / 3; background: var(--crema-2); }
  .sp__vista { left: 16px; bottom: 16px; }
  .sp__vista button { min-width: 88px; padding: 0 16px; }
  .sp__tarjeta { position: static; width: auto; padding: 24px; border-radius: 0; box-shadow: none; }
  .sp__nombre { font-size: 26px; }
  .sp__dato { margin-top: 24px; column-gap: 12px; }
  .sp__dato + .sp__dato { margin-top: 20px; }
  .sp__valor { font-size: 16px; }
  .sp__valor small { font-size: 14px; }
  .sp__acciones { flex-direction: column; align-items: stretch; gap: 16px; padding-top: 24px; }
  .sp__acciones .boton { width: 100%; }
  .sp__link { align-self: flex-start; }
}
@media (min-width: 901px) {
  .sp__media { position: absolute; inset: 0; }
  /* 4.33c (Cristian, 29 oct): pestañas al ancho de su contenido (mínimo 260 px) y escenario al 80 % del contenedor
     (1056 de 1320 px), centrados; la barra de avance mide lo mismo que su pestaña */
  .sp__tabs { grid-template-columns: repeat(2, minmax(260px, max-content)); justify-content: center; gap: 48px; max-width: none; }
  .sp__panel { max-width: 1056px; margin-inline: auto; }
}

/* === css/zona.css === */
/* =========================================================
   Página propia de zona de láser (3.13, inc/zona-pagina.php). Maqueta aprobada: seo/maquetas/pagina-zona/ (v2, 27 oct).
   Con los componentes del sitio: .titulo, .boton--principal (Seda cálida), migas de mujer-v2.css, tarjeta .zh__card de
   zonas-home.css, preguntas de faq-home.css y sedes de sedes-pucp.css (la misma sección de la portada).
   Pensada primero para el celular; espaciados en múltiplos de 4 y ningún texto de menos de 12 px.
   ========================================================= */
.zp { --zp-linea: rgba(31, 26, 21, .12); background: var(--blanco); }
/* Íconos aún sin dibujar (js/zona.js los dibuja al cargar): ya ocupan su lugar, así no mueven el texto */
.zp-ficha i[data-lucide], .zp-faq .fh__pie i[data-lucide], .zp-otras__todas i[data-lucide] { display: inline-block; flex: none; width: 16px; height: 16px; }
/* ---------- Selector Mujer / Hombre y zona ---------- */
.zp-ficha { padding-bottom: 48px; }
.zp-selector { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 20px; }
.zp-seg { display: inline-flex; padding: 4px; border-radius: var(--r-pildora); background: var(--crema); }
.zp-seg a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: var(--r-pildora); font-size: var(--t-chico); font-weight: 500; color: var(--texto-60); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.zp-seg a:hover { color: var(--texto); }
.zp-seg a.activo { background: var(--texto); color: var(--blanco); }
.zp-zonas summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pildora); background: var(--crema); font-size: var(--t-chico); font-weight: 600; list-style: none; cursor: pointer; transition: background-color .2s var(--curva-hover); }
.zp-zonas summary::-webkit-details-marker { display: none; }
.zp-zonas summary::after { content: ""; width: 7px; height: 7px; margin: -4px 4px 0 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--curva); }
.zp-zonas[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.zp-zonas summary:hover { background: var(--crema-2); }
.zp-zonas summary:focus-visible { outline: 2px solid var(--acento-hondo); outline-offset: 2px; }
.zp-zonas__eti { font-weight: 400; color: var(--texto-60); }
/* El panel cuelga del selector (no empuja el contenido) */
.zp-zonas__panel { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px 24px; width: min(720px, 100%); max-height: min(60vh, 520px); overflow: auto; padding: 20px 24px; border-radius: 16px; background: var(--blanco); box-shadow: 0 0 0 1px var(--zp-linea), 0 24px 48px -16px rgba(31, 26, 21, .28); }
.zp-zonas__g { margin: 0 0 4px; font-size: var(--t-min); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--acento-hondo); }
.zp-zonas__panel ul { margin: 0; padding: 0; list-style: none; }
.zp-zonas__panel a { display: flex; align-items: center; min-height: 36px; padding: 0 8px; margin-inline: -8px; border-radius: 8px; font-size: var(--t-chico); }
.zp-zonas__panel a:hover { background: var(--crema); }
.zp-zonas__panel a[aria-current] { font-weight: 600; color: var(--acento-hondo); }

/* ---------- Ficha: foto + datos ---------- */
.zp-ficha__in { display: grid; gap: 24px; }
.zp-foto { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 16px; background: var(--crema-2); }
.zp-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zp-foto__promo { position: absolute; z-index: 1; top: 16px; left: 16px; padding: 8px 12px; border-radius: var(--r-pildora); background: var(--promo); color: var(--blanco); font-size: var(--t-min); font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.zp-foto__nota { position: absolute; z-index: 1; right: 12px; bottom: 12px; padding: 4px 8px; border-radius: var(--r-pildora); background: rgba(0, 0, 0, .35); color: var(--blanco); font-size: var(--t-min); }
.zp-info { min-width: 0; }
.zp-ceja { margin: 0 0 8px; font-size: var(--t-nota); font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--acento-hondo); }
.zp .zp-h1 { margin: 0; font-size: clamp(40px, 6vw, 56px); }
.zp-abarca { margin: 8px 0 0; color: var(--texto-60); }
/* Duración y lo que incluye, en una línea */
.zp-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 16px 0 24px; padding: 0; list-style: none; font-size: var(--t-chico); }
.zp-datos li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.zp-datos li + li::before { content: ""; width: 1px; height: 16px; margin: 0 12px; background: var(--zp-linea); }
.zp-datos .lucide { flex: none; width: 16px; height: 16px; color: var(--verde); }

/* ---------- Sesiones ---------- */
/* Jerarquía (3 nov 2026): el precio por sesión manda (28 px), la cantidad de sesiones se lee sin esfuerzo (16 px) y el ahorro va
   en un tono propio. En las zonas con promoción: precio en fucsia y pack elegido en azul (los colores del Cyber Wow). */
.zp .zp-paq-t { margin: 0 0 16px; font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.15; }
.zp-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zp-pack { position: relative; display: grid; gap: 4px; align-content: start; padding: 18px 16px 16px; border: 1.5px solid var(--zp-linea); border-radius: 16px; background: var(--blanco); text-align: left; cursor: pointer; transition: border-color .2s var(--curva-hover), background-color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
.zp-pack:hover { border-color: var(--acento); }
.zp-pack.activo { border-color: var(--texto); background: var(--crema); box-shadow: 0 0 0 1px var(--texto); }
.zp-pack:focus-visible { outline: 2px solid var(--acento-hondo); outline-offset: 2px; }
.zp-pack__n { font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--texto); }
.zp-pack__cu { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.zp-pack__cu small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--texto-60); }
.zp-pack__cu--promo { color: var(--promo); }
.zp-pack__dto { font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--promo); }
.zp-pack__mejor { position: absolute; top: -11px; right: 10px; padding: 5px 10px; border-radius: var(--r-pildora); background: var(--promo); color: var(--blanco); font-size: 12px; font-weight: 700; line-height: 1; }
/* Zonas en promoción (Cyber Wow): azul y fucsia de la campaña */
.zp-packs--promo .zp-pack__cu, .zp-packs--promo .zp-pack__dto { color: #8F5A22; }
.zp-packs--promo ~ .zp-resumen .zp-resumen__precio em { color: #8F5A22; }
.zp-packs--promo .zp-pack__mejor { background: #8F5A22; }
.zp-packs--promo .zp-pack:hover { border-color: #215E4F; }
.zp-packs--promo .zp-pack.activo { border-color: #215E4F; background: #EEF4F1; box-shadow: 0 0 0 1px #215E4F; }
.zp-packs--promo .zp-pack.activo .zp-pack__n { color: #215E4F; }
.zp-foto__cyber { position: absolute; z-index: 1; top: 16px; right: 16px; display: grid; place-items: center; padding: 8px 14px; border-radius: 12px; background: #215E4F; box-shadow: 0 8px 20px -8px rgba(33,94,79,.5); }
.zp-foto__cyber img { position: static; display: block; width: 96px; height: auto; }
@media (max-width: 519px) { .zp-foto__cyber { top: auto; right: auto; bottom: 12px; left: 12px; padding: 6px 10px; } .zp-foto__cyber img { width: 76px; } }

/* ---------- Resumen ---------- */
.zp-resumen { margin-top: 16px; overflow: hidden; border: 1px solid var(--zp-linea); border-radius: 16px; }
.zp-resumen__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.zp-resumen__que { margin: 0; font-size: 15px; color: var(--texto-60); }
.zp-resumen__que b { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--texto); }
.zp-resumen__precio { margin: 0; text-align: right; }
.zp-resumen__precio strong { display: block; font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; }
.zp-resumen__precio small { display: block; margin-top: 8px; font-size: 14px; color: var(--texto-60); white-space: nowrap; }
.zp-resumen__precio small[hidden] { display: block; visibility: hidden; } /* sin ahorro (1 sesión sin promo) guarda su alto: el botón no salta */
.zp-resumen__precio em { font-style: normal; font-weight: 600; color: var(--promo); }
body.v5 .zp-agregar { display: flex; width: calc(100% - 40px); margin: 0 20px; }
.zp-resumen__pie { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border-top: 1px solid var(--zp-linea); font-size: var(--t-nota); }
.zp-resumen__pie > * { display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--texto-60); }
.zp-resumen__pie > a { font-weight: 600; color: var(--verde); }
.zp-resumen__pie > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.zp-resumen__pie > * + * { border-left: 1px solid var(--zp-linea); }
.zp-resumen__pie .lucide { flex: none; width: 16px; height: 16px; }
.zp-antes { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; font-size: var(--t-chico); color: var(--texto-60); }
.zp-antes .lucide { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--verde); }
.zp-antes b { font-weight: 600; color: var(--texto); }

/* ---------- Secciones ---------- */
.zp .seccion { padding-block: 56px; border-top: 1px solid var(--zp-linea); }
.zp-como .titulo, .zp-otras .titulo { margin: 0 0 24px; }
.zp-como__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.zp-como__lista li { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 16px; background: var(--crema); }
.zp .zp-como__lista h3 { margin: 0; font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.zp-como__lista p { margin: 0; font-size: var(--t-chico); color: var(--texto-60); }
/* 4.37 · Ícono de cada punto (el de la portada) y, en el celular, 2 columnas × 2 filas en vez de 4 filas */
.zp-como__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--blanco); color: var(--acento-hondo); }
.zp-como__ico .lucide, .zp-como__ico i[data-lucide] { display: block; width: 22px; height: 22px; }
@media (max-width: 639px) {
  .zp-como__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .zp-como__lista li { gap: 4px; padding: 16px 12px; }
  .zp .zp-como__lista h3 { font-size: 15px; }
  .zp-como__lista p { font-size: var(--t-nota); line-height: 1.4; }
  .zp-como__ico { width: 40px; height: 40px; }
}
/* Otras zonas: la tarjeta de /mujer/ (zonas-home.css), en carrusel en el celular y en 4 columnas en escritorio */
.zp-otras__rejilla { display: flex; gap: 12px; margin-inline: calc(var(--pad-x) * -1); padding: 0 var(--pad-x) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x); scrollbar-width: none; }
.zp-otras__rejilla::-webkit-scrollbar { display: none; }
.zp-otras__rejilla .zh__card { flex: 0 0 72%; max-width: 280px; scroll-snap-align: start; }
/* Tarjetas como las de la portada (3 nov 2026): foto alta y, debajo, nombre, precio y flecha, sin recuadro encima */
.zp-otras .zh__card { display: flex; flex-direction: column; aspect-ratio: auto; overflow: visible; background: none; }
.zp-otras .zh__foto { position: relative; inset: auto; flex: none; aspect-ratio: 4 / 5; border-radius: 16px; }
.zp-otras .zh__info { position: static; z-index: auto; margin: 0; padding: 12px 4px 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; grid-template-columns: 1fr auto; row-gap: 4px; }
.zp-otras .zh__nombre { --peso-titulo: 600; font-size: var(--t-tarjeta); }
.zp-otras .zh__precio { font-size: var(--t-chico); line-height: 1.35; }
.zp-otras .zh__precio b { font-size: var(--t-precio); font-weight: 600; }
.zp-otras .zh__ir { display: grid; }
/* Lista «Elige otra zona»: las zonas con promoción o Cyber Wow llevan su etiqueta */
.zp-zonas__promo { margin-left: auto; padding: 4px 8px; border-radius: var(--r-pildora); background: var(--crema); font-size: var(--t-min); font-weight: 600; line-height: 1; color: #8F5A22; }
.zp-zonas__promo--cyber { background: #215E4F; color: #fff; }
.zp-otras__todas { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: var(--t-chico); font-weight: 600; color: var(--acento-hondo); text-decoration: underline; text-decoration-color: rgba(168, 106, 40, .35); text-underline-offset: 4px; }
.zp-otras__todas:hover { text-decoration-color: currentColor; }
.zp-otras__todas .lucide { width: 16px; height: 16px; }

/* ---------- Barra fija en el celular (aparece cuando el resumen ya no se ve) ---------- */
.zp-barra { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--zp-linea); background: var(--blanco); box-shadow: 0 -8px 24px -12px rgba(31, 26, 21, .2); visibility: hidden; transform: translateY(110%); transition: transform .25s var(--curva), visibility 0s .25s; }
.zp-barra.ver { visibility: visible; transform: none; transition: transform .25s var(--curva); }
.zp-barra p { margin: 0; }
.zp-barra small { display: block; font-size: var(--t-nota); color: var(--texto-60); }
.zp-barra b { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.1; }
body.v5 .zp-barra .boton { height: 48px; min-height: 48px; padding-inline: 20px; font-size: 15px; }
/* El botón flotante de WhatsApp sube para no tapar la barra (con transform: no mueve el diseño, CLS 0) */
body.zp-barra-ver .wa-flota { transform: translateY(calc(-72px - env(safe-area-inset-bottom))); }
.wa-flota { transition: transform .25s var(--curva), background-color .25s var(--curva-hover), box-shadow .25s var(--curva-hover); }

@media (min-width: 520px) {
  .zp-packs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (max-width: 519px) {
  /* Duración y lo que incluye: una sola línea, sin íconos */
  .zp-datos { flex-wrap: nowrap; }
  .zp-datos .lucide { display: none; }
  .zp-datos li + li::before { margin: 0 10px; }
}
@media (min-width: 1024px) {
  .zp-ficha__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 56px; }
  .zp-foto { aspect-ratio: 1; }
  .zp-otras__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; overflow: visible; }
  .zp-otras__rejilla .zh__card { max-width: none; }
  .zp-barra { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zp-barra, .zp-zonas summary::after, .wa-flota { transition: none; }
}

/* =========================================================
   4.38 · Plantilla de zona v2 (31 oct 2026; maqueta seo/propuesta-zonas-depilzone/). Solo en las páginas de zona
   (.zp-ficha--v2): las de servicio (css/servicio-pagina.css) usan la misma ficha y siguen como estaban.
   ========================================================= */
/* Foto 4:5 entera (las fotos son 960 × 1192): a todo el ancho en el celular; en escritorio, columna 5/12 fija al bajar */
.zp-ficha--v2 .zp-foto { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) {
  .zp-ficha--v2 .zp-ficha__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .zp-ficha--v2 .zp-foto { position: sticky; top: 96px; aspect-ratio: 4 / 5; }
}

/* Mapa de la zona tratada: ondas finas blancas sobre un velo oscuro (el velo va en el patrón de inc/zona-pagina.php; Cristian
   lo eligió el 31 oct porque se nota más, también sobre el bóxer blanco) con borde discontinuo; el interruptor lo apaga */
.zp-mapa { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; color: rgba(255, 255, 255, .95); pointer-events: none; opacity: 0; transition: opacity .6s var(--curva); }
.zp-mapa.ver { opacity: 1; }
.zp-mapa__zona > * { stroke: #fff; stroke-width: 4; stroke-dasharray: 14 10; filter: drop-shadow(0 0 3px rgba(31, 26, 21, .55)); }
.zp-mapa__btn { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: var(--r-pildora); background: rgba(255, 255, 255, .92); color: var(--texto); font: 600 12px/1 var(--sans); cursor: pointer; box-shadow: 0 4px 12px -4px rgba(31, 26, 21, .3); }
.zp-mapa__btn:focus-visible { outline: 2px solid var(--acento-hondo); outline-offset: 2px; }
.zp-mapa__sw { position: relative; flex: none; width: 28px; height: 16px; border-radius: 8px; background: var(--texto-60); transition: background-color .2s var(--curva-hover); }
.zp-mapa__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--blanco); transition: transform .2s var(--curva); }
.zp-mapa__btn[aria-pressed="true"] .zp-mapa__sw { background: var(--verde); }
.zp-mapa__btn[aria-pressed="true"] .zp-mapa__sw::after { transform: translateX(12px); }
.zp-mapa__btn ~ .zp-foto__nota { bottom: 16px; }
/* Escritorio con ratón (como DepiLab; pedido de Cristian, 31 oct): la foto se ve limpia y el mapa aparece al pasar el
   cursor. El botón queda como pista discreta (ondas, sin interruptor) que el ratón atraviesa; con el teclado sigue siendo
   el interruptor (js/zona.js lo deja apagado al cargar en este caso). En el celular y la tableta, el interruptor de arriba. */
@media (hover: hover) and (min-width: 1024px) {
  .zp-mapa { transition-duration: .3s; }
  .zp-foto:hover .zp-mapa { opacity: 1; }
  .zp-mapa__btn { pointer-events: none; background: rgba(255, 255, 255, .8); box-shadow: none; transition: opacity .3s var(--curva-hover); }
  .zp-mapa__btn:not(:focus-visible) .zp-mapa__sw { width: 16px; border-radius: 4px; background: repeating-linear-gradient(-45deg, var(--texto) 0 2px, transparent 2px 5px); opacity: .6; }
  .zp-mapa__btn:not(:focus-visible) .zp-mapa__sw::after { display: none; }
  .zp-foto:hover .zp-mapa__btn:not(:focus-visible) { opacity: 0; }
}

/* Lista de zonas: «Estás aquí» en la actual; el título «Elige otra zona» solo en la hoja del celular */
.zp-zonas__titulo { display: none; }
.zp-zonas__aqui { margin-left: auto; padding: 4px 8px; border-radius: var(--r-pildora); background: var(--crema); font-size: var(--t-min); font-weight: 600; line-height: 1; color: var(--texto); }
.zp-ficha--v2 .zp-zonas__panel a[aria-current] { gap: 8px; }
@media (max-width: 639px) {
  .zp-ficha--v2 .zp-selector { margin-bottom: 16px; }
  .zp-ficha--v2 .zp-zonas { flex: 1; min-width: 0; }
  .zp-ficha--v2 .zp-zonas summary { width: 100%; justify-content: flex-start; }
  .zp-ficha--v2 .zp-zonas summary b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zp-ficha--v2 .zp-zonas summary::after { flex: none; margin-left: auto; }
  /* Hoja inferior con el fondo oscurecido (no empuja el contenido) */
  .zp-ficha--v2 .zp-zonas[open]::before { content: ""; position: fixed; inset: 0; z-index: 60; background: rgba(31, 26, 21, .4); }
  .zp-ficha--v2 .zp-zonas__panel { position: fixed; z-index: 61; top: auto; left: 0; right: 0; bottom: 0; grid-template-columns: 1fr; gap: 16px; width: 100%; max-height: 72vh; padding: 0 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; overscroll-behavior: contain; }
  .zp-zonas__titulo { position: sticky; top: 0; z-index: 1; display: block; margin: 0 -20px; padding: 20px 20px 12px; background: var(--blanco); font-size: 17px; font-weight: 600; line-height: 1.2; }
  .zp-ficha--v2 .zp-zonas__panel a { min-height: 44px; }
}

/* Completa tu tratamiento: justo después de la ficha */
.zp-ficha--v2 + .zp-otras { padding-top: 40px; }

/* Sedes en dos líneas (los datos de wp-admin → Sedes); mapa y fotos en /sedes/ */
.zp-sedes .titulo { margin: 0 0 24px; }
.zp-sedes__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.zp-sedes__lista li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; background: var(--crema); }
.zp-sedes__lista i[data-lucide], .zp-sedes__lista .lucide { display: block; flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--acento-hondo); }
.zp-sedes__lista p { display: grid; gap: 4px; min-width: 0; margin: 0; font-size: var(--t-chico); }
.zp-sedes__lista b { font-size: var(--t-texto); font-weight: 600; }
.zp-sedes__lista small { font-size: var(--t-nota); color: var(--texto-60); }
@media (min-width: 768px) { .zp-sedes__lista { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .zp-mapa, .zp-mapa__sw, .zp-mapa__sw::after { transition: none; }
}

/* === css/servicio-pagina.css === */
/* =========================================================
   Página propia de tratamiento no láser (3.11, inc/servicio-pagina.php). Usa el diseño de las páginas de zona
   (css/zona.css: selector, ficha, opciones, resumen, secciones, relacionados y barra fija); aquí solo lo propio:
   la tabla de opciones de cera (casillas), los beneficios del panel y el precio promo en rojo.
   Espaciados en múltiplos de 4 y ningún texto de menos de 12 px.
   ========================================================= */
.sp .js-zp-total.sp-rojo { color: var(--promo); }
.sp .zp-abarca + .zp-paq-t { margin-top: 24px; } /* sin duración (cera): el aire que daba su línea */
.sp .zp-resumen__que b { max-width: 24ch; }

/* ---------- Opciones con precio propio (cera): casillas en dos columnas ---------- */
.sp-tabla__g { margin: 16px 0 8px; font-size: var(--t-min); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--acento-hondo); }
.sp-tabla__g:first-child { margin-top: 0; }
.sp-tabla__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-op { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--zp-linea); border-radius: 12px; background: var(--blanco); cursor: pointer; transition: border-color .2s var(--curva-hover), background-color .2s var(--curva-hover); }
.sp-op:hover { border-color: var(--acento); }
.sp-op:has(input:checked) { border-color: var(--texto); background: var(--crema); }
.sp-op:has(input:focus-visible) { outline: 2px solid var(--acento-hondo); outline-offset: 2px; }
.sp-op input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--acento-hondo); }
.sp-op__n { flex: 1; min-width: 0; font-size: var(--t-chico); line-height: 1.3; }
.sp-op__p { flex: none; font-size: var(--t-chico); font-weight: 700; }
.sp .zp-agregar[aria-disabled="true"] { opacity: .55; box-shadow: none; }

/* ---------- Beneficios e «ideal para» (los del panel) ---------- */
.sp-ben li { grid-template-columns: 24px minmax(0, 1fr); align-items: start; column-gap: 12px; }
.sp-ben .lucide, .sp-ben i[data-lucide] { width: 20px; height: 20px; margin-top: 2px; color: var(--verde); }
.sp .sp-ben p { font-size: var(--t-texto); color: var(--texto); }
.sp-ideal { display: flex; align-items: flex-start; gap: 8px; max-width: 64ch; margin: 24px 0 0; font-size: var(--t-texto); color: var(--texto-60); }
.sp-ideal .lucide, .sp-ideal i[data-lucide] { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--acento-hondo); }

@media (max-width: 519px) {
  .sp-op { padding: 8px 10px; }
  .sp-op__n, .sp-op__p { font-size: var(--t-nota); }
}

/* === css/utilidades.css === */
/* Radiance · clases generadas a partir de los estilos en línea de la maqueta (no editar a mano).
   !important conserva la prioridad que tenían como atributo style. */
.u-foco-68-40-foco-movil-50-18 { --foco: 68% 40% !important; --foco-movil: 50% 18% !important; }
.u-foco-10-40-foco-movil-55-18 { --foco: 10% 40% !important; --foco-movil: 55% 18% !important; }
.u-foco-64-40-foco-movil-50-18 { --foco: 64% 40% !important; --foco-movil: 50% 18% !important; }
.u-foco-65-40-foco-movil-60-18 { --foco: 65% 40% !important; --foco-movil: 60% 18% !important; }
.u-pos-50-40 { --pos: 50% 40% !important; }
.u-pos-58-40 { --pos: 58% 40% !important; }
.u-pos-55-50 { --pos: 55% 50% !important; }
.u-pos-55-38 { --pos: 55% 38% !important; }
.u-foco-72-50 { --foco: 72% 50% !important; }
.u-pos-12-50 { --pos: 12% 50% !important; }
.u-position-absolute { position: absolute !important; }
.u-object-position-center-60 { object-position: center 60% !important; }
.u-object-position-center-55 { object-position: center 55% !important; }
.u-margin-top-28px { margin-top: 28px !important; }
.u-retraso-12s { --retraso: .12s !important; }