/* =========================================================
   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(--acento); color: var(--blanco); }
body.v5.hv-c.pg-int .nav__cta:hover { background: var(--acento-hondo); }
@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); }
/* 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: 12px; 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: 12px; 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: 10.5px; 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: 12.5px; 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: 12px; 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: 12px; 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(--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(--blanco); }
.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: 10.5px; }
  .zc__en .lucide { width: 12px; height: 12px; }
  .zc__cuerpo { padding: 0 10px 10px; }
  .zc__nombre { font-size: 15.5px; }
  .zc__suelta { font-size: 12px; }
  .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: 11.5px; }
  .zc__ahorro { height: 22px; padding: 0 7px 0 5px; font-size: 11px; }
  .zc__ahorro .lucide { width: 12px; height: 12px; }
  .zc__sin-ahorro { font-size: 11px; 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; }
}