/* === 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/blog-v2.css === */
/* =========================================================
   Portada del blog v2 · blog-v2-a / -b / -c.html (js/blog-v2.js)
   1. Base (título, categoría, meta, chips, buscador, fila de la lista C, bloque láser, «Cargar más»)
   2. Slider común (diapositivas, tarjetas con barra de progreso, pausa)
   3. Slider A · B · C
   4. Sección 2: lista en una columna + suscripción pegajosa
   5. Responsive
   Autocontenido: no necesita css/blog-propuestas.css.
   ========================================================= */
.blog2 { --bg-borde: rgba(31, 26, 21, .24); --bg-linea: rgba(31, 26, 21, .1); --bv-oscuro: #221912; --bv-error: #B3261E; --dorado: #F0C38A; }
.blog2 main { overflow-x: clip; }

/* ---------- 1. Base ---------- */
.bg-h1 { font-family: var(--serif); font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.035em; }
.bg-h1 em { font-style: normal; color: var(--acento-hondo); }
.bg-cat { display: block; font-size: var(--t-nota); font-weight: 600; color: var(--acento-hondo); }
.bg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--texto-60); letter-spacing: -0.01em; }
.bg-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.bg-meta .lucide { width: 15px; height: 15px; }

.bg-chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--pad-x); }
.bg-chips::-webkit-scrollbar { display: none; }
.bg-chips--der { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.bg-chips--izq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.bg-chips--izq.bg-chips--der { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.bg-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: var(--r-pildora); font-size: 14px; font-weight: 500; color: var(--texto-60); white-space: nowrap; transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.bg-chip span { font-size: 12px; font-weight: 500; color: var(--texto-60); font-variant-numeric: tabular-nums; }
.bg-chip:hover { background: var(--crema); color: var(--texto); }
.bg-chip[aria-pressed="true"] { background: var(--texto); color: var(--blanco); }
.bg-chip[aria-pressed="true"] span { color: var(--dorado); }
.bg-chip:focus-visible { outline-offset: 1px; }

.bg-buscar__campo { display: flex; align-items: center; height: 54px; padding: 0 6px 0 18px; border: 1.5px solid var(--bg-borde); border-radius: var(--r-pildora); background: var(--blanco); cursor: text; transition: border-color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
.bg-buscar__campo:hover { border-color: rgba(31, 26, 21, .4); }
.bg-buscar__campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(206, 137, 59, .18); }
.bg-buscar__campo > .lucide { width: 19px; height: 19px; opacity: .7; }
.bg-buscar input { flex: 1; min-width: 0; height: 100%; margin-left: 10px; border: 0; background: none; font: inherit; font-size: 15.5px; color: var(--texto); outline: none; }
.bg-buscar input::placeholder { color: var(--texto-60); }
.bg-buscar input::-webkit-search-cancel-button { display: none; }
.bg-buscar__x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--texto-60); }
.bg-buscar__x:hover { background: var(--crema-2); color: var(--texto); }
.bg-buscar__x .lucide { width: 16px; height: 16px; }
.bg-buscar__x[hidden] { display: none; }

.bg-estado { font-size: 14px; color: var(--texto-60); }
.bg-estado:empty { display: none; }
.bg-estado:not(:empty) { margin: 20px 0 0; }

.bgc-fila + .bgc-fila { border-top: 1px solid var(--bg-linea); }
.bgc-fila__a { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 0; }
.bgc-fila__foto { display: block; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 12px; background: var(--crema-2); }
.bgc-fila__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.bgc-fila__a:hover .bgc-fila__foto img { transform: scale(1.04); }
.bgc-fila__txt { display: flex; flex-direction: column; gap: 8px; }
.bgc-fila__tit { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -0.025em; transition: color .2s var(--curva-hover); }
.bgc-fila__a:hover .bgc-fila__tit { color: var(--acento-hondo); }
.bg-t__ext { font-size: 14.5px; line-height: 1.5; color: var(--texto-60); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.bg-conv { position: relative; display: flex; align-items: center; overflow: hidden; margin: 12px 0; border-radius: 16px; background: var(--crema); }
.bg-conv__foto { display: block; flex: 0 0 220px; aspect-ratio: 5 / 4; overflow: hidden; }
.bg-conv__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.bg-conv__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 32px; }
.bg-conv__tit { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; }
.bg-conv__tit em { font-style: normal; color: var(--acento-hondo); }
.bg-conv__p { font-size: 14.5px; line-height: 1.5; color: var(--texto-60); }
.bg-conv__p b { color: var(--texto); font-weight: 600; }
.bg-conv__cta { margin-top: 8px; }

.bg-vacio { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 20px; padding: 56px 16px; border-radius: 14px; background: var(--crema); text-align: center; color: var(--texto-60); }
.bg-vacio > .lucide { width: 28px; height: 28px; color: var(--acento-hondo); }
.bg-nota { font-size: 14px; color: var(--texto-60); text-align: center; }

.bg-mas { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 48px; }
.bg-mas__n { font-size: 14px; color: var(--texto-60); font-variant-numeric: tabular-nums; }
.bg-mas__barra { width: 200px; height: 3px; border-radius: 3px; background: var(--crema-2); overflow: hidden; }
.bg-mas__barra span { display: block; height: 100%; background: var(--acento); border-radius: inherit; transition: width .4s var(--curva); }
.bg-mas__btn { margin-top: 8px; padding: 0 18px 0 22px; height: 48px; }

/* ---------- 2. Slider común ---------- */
.bv-cab { padding-top: 40px; margin-bottom: 28px; }
.bv-cab__sub { margin-top: 8px; font-size: 16px; color: var(--texto-60); }
.bv-cab--fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.bv-cab--fila .bv-cab__sub { margin: 0 0 6px; }

.bv-sl { position: relative; }
.bv-escena { position: relative; display: grid; touch-action: pan-y; } /* el swipe horizontal lo gestiona JS; el scroll vertical sigue nativo */
.bv-c__fotos { touch-action: pan-y; }
.bv-slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--curva), visibility 0s linear .6s; }
.bv-slide.activo { opacity: 1; visibility: visible; transition: opacity .6s var(--curva), visibility 0s; z-index: 1; }
.bv-slide__foto { display: block; overflow: hidden; background: var(--crema-2); }
.bv-slide__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s linear; -webkit-user-drag: none; user-select: none; }
.bv-slide.activo .bv-slide__foto img, .bv-c__foto.activo img { transform: scale(1); }
.bv-slide__caja { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bv-slide__caja > * { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--curva), transform .5s var(--curva); }
.bv-slide.activo .bv-slide__caja > * { opacity: 1; transform: none; }
.bv-slide.activo .bv-slide__caja > :nth-child(2) { transition-delay: .06s; }
.bv-slide.activo .bv-slide__caja > :nth-child(3) { transition-delay: .12s; }
.bv-slide.activo .bv-slide__caja > :nth-child(n+4) { transition-delay: .18s; }
.bv-slide__tit { font-family: var(--serif); font-size: clamp(1.45rem, 2.1vw, 1.95rem); font-weight: 500; line-height: 1.16; letter-spacing: -0.032em; }
.bv-slide__tit a { transition: color .2s var(--curva-hover); }
.bv-slide__tit a:hover { color: var(--acento-hondo); }
.bv-slide__ext { max-width: 56ch; font-size: 15.5px; line-height: 1.55; color: var(--texto-60); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bv-slide__cta { height: 46px; margin-top: 4px; }

/* Tarjetas de navegación con «cargador» */
.bv-tab { position: relative; display: grid; align-items: center; min-width: 0; overflow: hidden; text-align: left; transition: background-color .3s var(--curva-hover), color .3s var(--curva-hover), box-shadow .3s var(--curva-hover); }
.bv-tab__foto { display: block; overflow: hidden; border-radius: 10px; background: var(--crema-2); }
.bv-tab__foto img { width: 100%; height: 100%; object-fit: cover; }
.bv-tab__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bv-tab__cat { font-size: var(--t-nota); font-weight: 600; color: var(--acento-hondo); }
.bv-tab__tit { font-family: var(--serif); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bv-tab__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bg-linea); }
.bv-tab__barra span { display: block; height: 100%; background: var(--acento); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.bv-tab:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.bv-pausa { position: absolute; top: 16px; right: 16px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--texto); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: .85; transition: opacity .2s var(--curva-hover), background-color .2s var(--curva-hover); }
.bv-pausa:hover, .bv-pausa:focus-visible { opacity: 1; background: var(--blanco); }
.bv-pausa .lucide { width: 16px; height: 16px; }
.bv-pausa[hidden] { display: none; }

/* ---------- 3A · Slide grande + 3 tarjetas apiladas ---------- */
.bv-sl--a { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; }
.bv-sl--a .bv-escena { height: clamp(460px, 36vw, 520px); overflow: hidden; border-radius: 20px; background: var(--crema-2); }
.bv-sl--a .bv-slide { position: relative; }
.bv-sl--a .bv-slide__foto { position: absolute; inset: 0; }
.bv-sl--a .bv-slide__caja { position: absolute; left: 24px; bottom: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 24px; width: min(600px, calc(100% - 48px)); padding: 26px 28px 24px; border-radius: 18px; background: var(--blanco); box-shadow: 0 18px 44px rgba(31, 26, 21, .14); }
.bv-sl--a .bv-slide__caja > :not(.bv-slide__pie):not(.bv-slide__cta) { grid-column: 1 / -1; }
.bv-sl--a .bv-slide__cta { margin-top: 6px; }
.bv-sl--a .bv-slide__pie { margin-top: 6px; }
.bv-sl--a .bv-tabs { display: flex; flex-direction: column; gap: 12px; }
.bv-sl--a .bv-tab { flex: 1; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 14px 18px 14px 14px; border: 1px solid var(--bg-linea); border-radius: 18px; background: var(--blanco); }
.bv-sl--a .bv-tab__foto { aspect-ratio: 1; }
.bv-sl--a .bv-tab:hover { background: var(--crema); }
.bv-sl--a .bv-tab[aria-selected="true"] { border-color: transparent; background: var(--crema); }
.bv-sl--a .bv-tab:not([aria-selected="true"]) .bv-tab__tit { color: var(--texto-60); }
.bv-sl--a .bv-tab__barra { left: 14px; right: 14px; bottom: 0; border-radius: 3px; }

/* ---------- 3B · Slide a todo el ancho con velo + tarjetas en fila (estilo BanBif) ---------- */
.bv-sl--b .bv-escena { height: clamp(460px, 38vw, 540px); overflow: hidden; border-radius: 22px; clip-path: inset(0 round 22px); isolation: isolate; background: var(--bv-oscuro); color: var(--blanco); }
.bv-sl--b .bv-slide { position: relative; }
.bv-sl--b .bv-slide__foto { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; background: var(--bv-oscuro); }
.bv-sl--b .bv-slide__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bv-oscuro) 0%, rgba(34, 25, 18, .78) 20%, rgba(34, 25, 18, .2) 55%, rgba(34, 25, 18, 0) 75%); }
.bv-sl--b .bv-slide__caja { position: relative; justify-content: center; height: 100%; max-width: 600px; padding: 48px 0 104px 56px; }
.bv-sl--b .bg-cat { color: var(--dorado); }
.bv-sl--b .bv-slide__tit { font-size: clamp(1.75rem, 2.7vw, 2.5rem); line-height: 1.12; }
.bv-sl--b .bv-slide__tit a:hover { color: var(--dorado); }
.bv-sl--b .bv-slide__ext { color: rgba(255, 255, 255, .8); }
.bv-sl--b .bg-meta { color: rgba(255, 255, 255, .78); }
.bv-sl--b { margin-top: 32px; }
.bv-sl--b .bv-slide__caja { gap: 0; padding: 56px 0 56px 112px; max-width: 700px; }
.bv-sl--b .bv-slide__tit { margin-top: 18px; }
.bv-sl--b .bv-slide__ext { margin-top: 24px; }
.bv-sl--b .bv-slide__pie { margin-top: 28px; }
.bv-sl--b .bv-pausa { top: 20px; right: 20px; }

/* Flechas (solo escritorio) */
.bv-flecha { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--blanco); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.bv-flecha:hover { background: var(--blanco); color: var(--texto); }
.bv-flecha:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.bv-flecha .lucide { width: 22px; height: 22px; }
.bv-flecha--ant { left: 28px; }
.bv-flecha--sig { right: 28px; }

/* Dots con cargador: el activo se alarga y se llena (--p de 0 a 1) */
.bv-dots { position: absolute; right: 24px; bottom: 24px; z-index: 3; display: flex; align-items: center; padding: 0 8px; border-radius: var(--r-pildora); background: rgba(20, 14, 8, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bv-dots .bv-tab { display: grid; place-items: center; overflow: visible; height: 44px; padding: 0 6px; }
.bv-dot { position: relative; display: block; width: 8px; height: 8px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .42); transition: width .45s var(--curva), background-color .2s var(--curva-hover); }
.bv-dot span { position: absolute; inset: 0; background: var(--dorado); border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.bv-dots .bv-tab:not([aria-selected="true"]) .bv-dot span { transform: scaleX(0); }
.bv-dots .bv-tab:hover .bv-dot { background: rgba(255, 255, 255, .8); }
.bv-dots .bv-tab[aria-selected="true"] .bv-dot { width: 44px; background: rgba(255, 255, 255, .26); }
.bv-dots .bv-tab:focus-visible { outline: 2px solid var(--dorado); outline-offset: -4px; border-radius: 12px; }

/* Vista previa flotante al pasar el mouse por un dot (tarjeta tipo BanBif) */
.bv-prev { position: absolute; right: -14px; bottom: calc(100% + 10px); display: none; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; width: 330px; padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--blanco); color: var(--texto); text-align: left; box-shadow: 0 18px 40px rgba(20, 14, 8, .28); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s var(--curva), transform .25s var(--curva); }
.bv-prev::after { content: ""; position: absolute; right: 26px; top: 100%; border: 7px solid transparent; border-top-color: var(--blanco); }
.bv-prev .bv-tab__foto { aspect-ratio: 1; }
@media (hover: hover) and (min-width: 901px) {
  .bv-prev { display: grid; }
  .bv-dots .bv-tab:not([aria-selected="true"]):hover .bv-prev,
  .bv-dots .bv-tab:not([aria-selected="true"]):focus-visible .bv-prev { opacity: 1; transform: none; }
}

/* ---------- 3C · Split: texto + foto en arco, pestañas numeradas con anillo ---------- */
.bv-banda { padding: 48px 0 64px; background: var(--crema); }
.bv-banda .bv-cab { padding-top: 0; }
.bv-sl--c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 72px; align-items: center; }
.bv-c__izq { display: flex; flex-direction: column; min-width: 0; }
.bv-cab--c { margin-bottom: 36px; }
.bv-sl--c .bv-slide__caja { gap: 14px; }
.bv-sl--c .bv-slide__tit { font-size: clamp(1.7rem, 2.5vw, 2.35rem); line-height: 1.13; }
.bv-tabs-fila { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--bg-linea); }
.bv-sl--c .bv-tabs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.bv-sl--c .bv-tab { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 6px 8px 6px 0; border-radius: 12px; overflow: visible; color: var(--texto-60); }
.bv-sl--c .bv-tab:hover { color: var(--texto); }
.bv-sl--c .bv-tab[aria-selected="true"] { color: var(--texto); }
.bv-sl--c .bv-tab__tit { font-family: var(--sans); font-size: 13.5px; line-height: 1.35; letter-spacing: -0.01em; }
.bv-sl--c .bv-tab__cat { color: inherit; }
.bv-sl--c .bv-tab[aria-selected="true"] .bv-tab__cat { color: var(--acento-hondo); }
.bv-tab__anillo { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.bv-tab__anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bv-tab__anillo circle { fill: none; stroke-width: 2; }
.bv-anillo__fondo { stroke: rgba(31, 26, 21, .16); }
.bv-anillo__valor { stroke: var(--acento); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
.bv-tab__anillo b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bv-sl--c .bv-tab[aria-selected="true"] .bv-tab__anillo b { color: var(--acento-hondo); }
.bv-sl--c .bv-pausa { position: static; flex: none; background: var(--blanco); opacity: 1; }
.bv-sl--c .bv-pausa:hover { background: var(--crema-2); }
.bv-c__marco { position: relative; padding: 14px; }
.bv-c__marco::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(168, 106, 40, .35); border-radius: 999px 999px 32px 32px; pointer-events: none; }
.bv-c__fotos { position: relative; display: grid; aspect-ratio: 5 / 5.6; max-height: 600px; overflow: hidden; border-radius: 999px 999px 22px 22px; background: var(--crema-2); }
.bv-c__foto { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; transition: opacity .7s var(--curva), visibility 0s linear .7s; }
.bv-c__foto.activo { opacity: 1; visibility: visible; transition: opacity .7s var(--curva), visibility 0s; }
.bv-c__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s linear; -webkit-user-drag: none; user-select: none; }

/* Sin movimiento: sin autoavance (la tarjeta activa se ve llena) y sin transiciones */
.bv-sl--quieto .bv-slide, .bv-sl--quieto .bv-slide__caja > *, .bv-sl--quieto .bv-slide__foto img, .bv-sl--quieto .bv-c__foto, .bv-sl--quieto .bv-c__foto img { transition: none !important; transform: none !important; }

/* ---------- 4. Sección 2: lista + suscripción ---------- */
.bv-cuerpo { padding: var(--esp-seccion) 0; }
.bv-cuerpo__in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; }
.bv-principal { min-width: 0; }
.bv-herr { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; }
.bv-dd { position: relative; }
.bv-dd__btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 54px; padding: 0 18px 0 22px; border: 1.5px solid var(--bg-borde); border-radius: var(--r-pildora); background: var(--blanco); color: var(--texto); font-size: 15.5px; font-weight: 500; text-align: left; transition: border-color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
.bv-dd__btn:hover { border-color: rgba(31, 26, 21, .4); }
.bv-dd__btn:focus-visible, .bv-dd--abierto .bv-dd__btn { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(206, 137, 59, .18); }
.bv-dd__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-dd__n { flex: none; min-width: 32px; padding: 3px 9px; border-radius: var(--r-pildora); background: var(--crema); color: var(--acento-hondo); font-size: 12.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.bv-dd__btn > .lucide { flex: none; width: 18px; height: 18px; transition: transform .3s var(--curva); }
.bv-dd--abierto .bv-dd__btn > .lucide { transform: rotate(180deg); }
.bv-dd__lista { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; max-height: min(440px, 62vh); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 20px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(31, 26, 21, .06), 0 24px 48px rgba(31, 26, 21, .16); outline: none; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: 50% 0; transition: opacity .2s var(--curva), transform .25s var(--curva), visibility 0s linear .25s; }
.bv-dd--abierto .bv-dd__lista { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--curva), transform .25s var(--curva), visibility 0s; }
.bv-dd__op { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px 0 14px; border-radius: 12px; color: var(--texto); font-size: 15px; cursor: pointer; transition: background-color .15s var(--curva-hover); }
.bv-dd__op:first-child { margin-bottom: 7px; }
.bv-dd__op:first-child::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -4px; height: 1px; background: var(--bg-linea); }
.bv-dd__nom { flex: 1; min-width: 0; }
.bv-dd__op .bv-dd__n { color: var(--texto-60); font-weight: 500; }
.bv-dd__op > .lucide { flex: none; width: 18px; height: 18px; color: var(--acento-hondo); opacity: 0; }
.bv-dd__op.activo { background: var(--crema); }
.bv-dd__op.activo .bv-dd__n { background: var(--blanco); }
.bv-dd__op[aria-selected="true"] { color: var(--acento-hondo); font-weight: 600; }
.bv-dd__op[aria-selected="true"] > .lucide { opacity: 1; }
.bv-dd__lista:focus-visible .bv-dd__op.activo { box-shadow: inset 0 0 0 2px rgba(206, 137, 59, .45); }

/* Carga al filtrar / buscar: esqueleto y entrada escalonada de los resultados */
.bv-esq__fila { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 0; }
.bv-esq__fila + .bv-esq__fila { border-top: 1px solid var(--bg-linea); }
.bv-esq__foto { display: block; aspect-ratio: 5 / 4; border-radius: 12px; }
.bv-esq__txt { display: grid; gap: 12px; }
.bv-esq__txt i { display: block; height: 12px; border-radius: 6px; }
.bv-esq__txt i:nth-child(1) { width: 22%; }
.bv-esq__txt i:nth-child(2) { width: 88%; height: 20px; }
.bv-esq__txt i:nth-child(3) { width: 66%; }
.bv-esq__txt i:nth-child(4) { width: 32%; }
.bv-esq__foto, .bv-esq__txt i { background: linear-gradient(90deg, var(--crema) 25%, var(--crema-2) 50%, var(--crema) 75%); background-size: 200% 100%; animation: bv-brillo 1.1s linear infinite; }
@keyframes bv-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bv-items--entra > * { animation: bv-entra .5s var(--curva) both; }
.bv-items--entra > :nth-child(2) { animation-delay: .05s; }
.bv-items--entra > :nth-child(3) { animation-delay: .1s; }
.bv-items--entra > :nth-child(n+4) { animation-delay: .15s; }
.bv-items { margin-top: 12px; }

.bv-lateral__in { position: sticky; top: calc(var(--bg-nav, 64px) + 24px); }
.bv-sus { padding: 30px 28px 28px; border-radius: 22px; background: var(--crema); }
.bv-sus__tit { text-wrap: balance; font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.12; letter-spacing: -0.035em; }
.bv-sus__tit em { font-style: normal; color: var(--acento-hondo); }
.bv-sus__p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--texto-60); }
.bv-sus form { display: grid; gap: 12px; margin-top: 22px; }
.bv-campo__caja { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border: 1.5px solid var(--bg-borde); border-radius: 14px; background: var(--blanco); cursor: text; transition: border-color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
.bv-campo__caja:hover { border-color: rgba(31, 26, 21, .4); }
.bv-campo__caja:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(206, 137, 59, .18); }
.bv-campo__caja > .lucide { width: 19px; height: 19px; flex: none; color: var(--texto-60); }
.bv-campo__caja input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--texto); font: inherit; font-size: 16px; letter-spacing: -0.01em; outline: none; }
.bv-campo__caja input::placeholder { color: var(--texto-45); }
.bv-campo__error { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 4px; color: var(--bv-error); font-size: 13px; }
.bv-campo__error[hidden] { display: none; }
.bv-campo--error .bv-campo__caja { border-color: var(--bv-error); }
.bv-campo--error .bv-priv__caja { border-color: var(--bv-error); }
.bv-priv { position: relative; display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; color: var(--texto-60); font-size: 14px; line-height: 1.45; cursor: pointer; }
.bv-priv input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bv-priv__caja { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--bg-borde); border-radius: 7px; background: var(--blanco); color: transparent; transition: background-color .2s var(--curva-hover), border-color .2s var(--curva-hover); }
.bv-priv__caja .lucide { width: 15px; height: 15px; stroke-width: 2.4; }
.bv-priv input:checked + .bv-priv__caja { border-color: var(--acento); background: var(--acento); color: var(--blanco); }
.bv-priv input:focus-visible + .bv-priv__caja { outline: 2px solid var(--acento); outline-offset: 2px; }
.bv-priv a { color: var(--texto); text-decoration: underline; text-underline-offset: 2px; }
.bv-sus__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 4px; padding: 0 24px; border-radius: var(--r-pildora); color: var(--blanco); font-size: 15.5px; font-weight: 600; transition: box-shadow .25s var(--curva), transform .25s var(--curva); }
/* 4.40: degradado, luz y sombra de «Cotiza y reserva» con .boton--principal (v5.css) */
.bv-sus__btn:disabled { cursor: progress; opacity: .8; box-shadow: var(--boton-sombra); transform: none; }
.bv-sus__nota { font-size: var(--t-nota); color: var(--texto-60); text-align: center; }
.bv-trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bv-sus__listo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; outline: none; animation: bv-entra .5s var(--curva) both; }
.bv-sus__listo > .lucide { width: 40px; height: 40px; margin-bottom: 8px; color: var(--acento-hondo); }
.bv-sus__listo .bv-sus__p { margin-top: 0; font-size: 16px; }
@keyframes bv-entra { from { opacity: 0; transform: translateY(8px); } }


/* Pantallas bajas: si el formulario no cabe, no se fija */
@media (max-height: 700px) and (min-width: 901px) { .bv-lateral__in { position: static; } }

/* ---------- 5. Responsive ---------- */
@media (max-width: 1180px) {
  .bv-sl--a { grid-template-columns: minmax(0, 1fr) 320px; }
  .bv-sl--a .bv-tab { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; }
  .bv-cuerpo__in { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
  .bv-sl--c { gap: 48px; }
  .bv-sl--c .bv-tab__tit { display: none; }
}
@media (max-width: 900px) {
  .bg-h1 { font-size: clamp(2.1rem, 9.6vw, 2.6rem); }
  .bv-cab { padding-top: 24px; margin-bottom: 18px; }
  .bv-cab__sub { font-size: 15px; margin-top: 6px; }
  .bv-cab--fila { display: block; }
  .bv-cab--fila .bv-cab__sub { margin: 6px 0 0; }
  .bv-slide__ext { font-size: 15px; }
  .bv-pausa { top: 12px; right: 12px; width: 38px; height: 38px; }

  /* Tarjetas en móvil: 3 columnas compactas, solo la categoría + la barra */
  .bv-tabs:not(.bv-dots) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
  .bv-sl--a .bv-tab { display: flex; align-items: flex-start; min-height: 60px; padding: 10px 12px 13px; border-radius: 12px; }
  .bv-sl--a .bv-tab__foto, .bv-sl--a .bv-tab__tit { display: none; }
  .bv-sl--a .bv-tab__cat { font-size: var(--t-nota); line-height: 1.3; }
  .bv-sl--a .bv-tab__barra { left: 10px; right: 10px; }

  /* A: la caja de texto monta sobre el borde inferior de la foto */
  .bv-sl--a { grid-template-columns: 1fr; gap: 14px; }
  .bv-sl--a .bv-escena { height: auto; overflow: visible; border-radius: 0; background: none; }
  .bv-sl--a .bv-slide__foto { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: 16px; }
  .bv-sl--a .bv-slide__caja { position: relative; left: auto; bottom: auto; width: auto; margin: -44px 12px 0; padding: 18px 18px 18px; gap: 8px 12px; border-radius: 16px; box-shadow: 0 12px 30px rgba(31, 26, 21, .12); }
  .bv-sl--a .bv-slide__tit, .bv-sl--b .bv-slide__tit, .bv-sl--c .bv-slide__tit { font-size: 1.3rem; line-height: 1.2; }
  .bv-sl--a .bv-slide__ext { display: none; }
  .bv-sl--a .bv-slide__caja { column-gap: 10px; }
  .bv-sl--a .bv-slide__caja .bg-meta { column-gap: 12px; }
  .bv-sl--a .bv-slide__cta { height: 42px; padding: 0 16px 0 14px; }
  .bv-sl--a .bv-tab { border-color: var(--bg-linea); }

  /* B: foto arriba, texto sobre el mismo fondo oscuro, tarjetas debajo */
  .bv-sl--b .bv-escena { height: auto; border-radius: 18px; clip-path: inset(0 round 18px); }
  .bv-sl--b .bv-slide__foto { position: relative; width: 100%; aspect-ratio: 4 / 3; }
  .bv-sl--b .bv-slide__foto::after { background: linear-gradient(180deg, rgba(34, 25, 18, 0) 45%, var(--bv-oscuro) 100%); }
  .bv-sl--b { margin-top: 16px; }
  .bv-sl--b .bv-slide__caja { height: auto; max-width: none; margin-top: -40px; padding: 0 20px 60px; }
  .bv-sl--b .bv-slide__tit { margin-top: 10px; }
  .bv-sl--b .bv-slide__ext { margin-top: 14px; }
  .bv-sl--b .bv-slide__pie { margin-top: 16px; }
  .bv-sl--b .bv-slide__ext { -webkit-line-clamp: 2; }
  .bv-sl--b .bv-slide__cta { height: 42px; }
  .bv-flecha { display: none; }
  .bv-dots { right: 14px; bottom: 14px; }
  .bv-dots .bv-tab { height: 34px; }

  /* C: título, arco, texto, pestañas */
  .bv-banda { padding: 24px 0 36px; }
  .bv-sl--c { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .bv-c__izq { display: contents; }
  .bv-cab--c { order: 0; margin-bottom: 18px; }
  .bv-c__marco { order: 1; padding: 10px; margin-bottom: 22px; }
  .bv-c__marco::before { border-radius: 50% 50% 24px 24px / 42% 42% 24px 24px; }
  .bv-c__fotos { aspect-ratio: 1 / .86; border-radius: 50% 50% 16px 16px / 42% 42% 16px 16px; }
  .bv-sl--c .bv-escena { order: 2; }
  .bv-sl--c .bv-slide__caja { gap: 10px; }
  .bv-sl--c .bv-slide__cta { height: 42px; }
  .bv-tabs-fila { order: 3; margin-top: 24px; padding-top: 18px; gap: 8px; align-items: flex-start; }
  .bv-sl--c .bv-tab { grid-template-columns: 1fr; justify-items: start; gap: 8px; padding: 2px 4px 4px 0; }
  .bv-sl--c .bv-tab__tit { display: none; }
  .bv-sl--c .bv-tab__cat { font-size: var(--t-nota); line-height: 1.3; }
  .bv-tab__anillo { width: 38px; height: 38px; }
  .bv-sl--c .bv-pausa { width: 38px; height: 38px; }

  /* Sección 2 en una columna; la suscripción se intercala en la lista (JS) */
  .bv-cuerpo { padding-top: 48px; }
  .bv-cuerpo__in { grid-template-columns: 1fr; gap: 0; }
  .bv-lateral { display: none; }
  .bv-herr { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 10px; }
  .bg-buscar__campo, .bv-dd__btn { height: 50px; }
  .bv-items .bv-sus { margin: 16px 0; }
  .bv-items .bv-sus + .bgc-fila { border-top: 0; }
}
@media (max-width: 760px) {
  .bgc-fila__a { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 0; }
  .bgc-fila__foto { aspect-ratio: 1; border-radius: 10px; }
  .bv-esq__fila { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
  .bv-esq__foto { aspect-ratio: 1; border-radius: 10px; }
  .bgc-fila__tit { font-size: 16.5px; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .bgc-fila .bg-t__ext { display: none; }
  .bgc-fila__txt { gap: 6px; }
  .bgc-fila .bg-meta { gap: 4px 12px; font-size: var(--t-nota); }
  .bg-conv { align-items: stretch; }
  .bg-conv__foto { flex: 0 0 34%; aspect-ratio: auto; }
  .bg-conv__txt { padding: 18px; }
  .bg-conv__tit { font-size: 20px; }
  .bg-conv__p { font-size: 14px; }
  .bv-sus { padding: 24px 20px 22px; }
  .bv-sus__tit { font-size: 24px; }
  .bg-mas { margin-top: 36px; }
}
@media (max-width: 380px) {
  .bg-conv { flex-direction: column; }
  .bg-conv__foto { flex: none; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .bgc-fila__foto img, .bv-slide__foto img, .bv-c__foto img { transition: none; transform: none; }
  .bv-slide, .bv-slide__caja > *, .bv-c__foto { transition: none; }
  .bv-sus__listo, .bv-items--entra > *, .bv-esq__foto, .bv-esq__txt i { animation: none; }
}
@media (max-width: 560px) {
  .bv-herr { grid-template-columns: 1fr; }
}

/* Espacio reservado para el slider mientras js/blog-v2.js lo pinta (evita el salto de diseño) */
.bv-top:empty { min-height: calc(clamp(460px, 38vw, 540px) + 32px); }
.bv-items:empty { min-height: 120vh; }
@media (max-width: 900px) { .bv-top:empty { min-height: calc((100vw - 2 * var(--pad-x)) * .75 + 300px); } }

/* === 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; }