/* =========================================================
   Radiance v5 — home · «Antes / Después» de la depilación láser (propuesta C, inmersiva en verde noche)
   Extraído de css/antes-despues-propuestas.css (bloques .ad-comp y .ad-c). Se carga después de verde-secciones.css.
   Lógica del comparador: js/antes-despues-home.js
   ========================================================= */
:root { --ad-dorado: #F0C38A; }

/* ---------- Sección ---------- */
.ad-c { background: radial-gradient(110% 70% at 50% 0%, #1D4A40 0%, var(--verde-noche, #10302A) 62%); color: var(--blanco); }
.ad-c__cab { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ad-c .eti { background: rgba(255, 255, 255, .1); color: var(--ad-dorado); }
.ad-c .titulo { margin-top: 14px; font-weight: 500; color: var(--blanco); }
.ad-c .titulo em { color: var(--ad-dorado); }
.ad-c__frase { margin: 16px auto 0; max-width: 40ch; font-size: 17px; color: rgba(255, 255, 255, .72); text-wrap: balance; }
.ad-c__accion { display: flex; justify-content: center; margin-top: 40px; }
.ad-c :focus-visible { outline-color: var(--ad-dorado); }

/* ---------- Comparador deslizable ---------- */
.ad-comp { --pos: 50%; position: relative; aspect-ratio: 2000 / 1116; max-width: 1160px; margin: 48px auto 0; border-radius: 20px; overflow: hidden; background: var(--verde-noche-2, #163D35); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.ad-comp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ad-comp__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
/* Etiquetas sobre la foto: «Antes» oscuro translúcido, «Después» mostaza */
.ad-comp__eti { position: absolute; top: 20px; z-index: 2; display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: var(--r-pildora); background: rgba(31, 26, 21, .62); color: var(--blanco); font-size: 13px; font-weight: 600; letter-spacing: 0; pointer-events: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .25s var(--curva-hover); }
.ad-comp__eti--antes { left: 20px; }
.ad-comp__eti--despues { right: 20px; background: var(--acento-hondo); }
.ad-comp.borde-izq .ad-comp__eti--antes, .ad-comp.borde-der .ad-comp__eti--despues { opacity: 0; }
/* Línea y asa: la línea ocupa todo el alto, el asa circular va al centro */
.ad-comp__asa { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 44px; margin-left: -22px; display: grid; place-items: center; outline: none; cursor: ew-resize; }
.ad-comp__asa::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--blanco); box-shadow: 0 0 12px rgba(0, 0, 0, .25); }
.ad-comp__asa span { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blanco); color: var(--texto); box-shadow: 0 6px 20px rgba(31, 26, 21, .25); transition: transform .25s var(--curva), background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.ad-comp__asa .lucide { width: 22px; height: 22px; }
.ad-comp:hover .ad-comp__asa span, .ad-comp.arrastrando .ad-comp__asa span { transform: scale(1.06); background: var(--acento); color: var(--blanco); }
.ad-comp__asa:focus-visible span { outline: 2px solid var(--ad-dorado); outline-offset: 3px; }
.ad-comp.animando .ad-comp__antes, .ad-comp.animando .ad-comp__asa { transition: clip-path .9s var(--curva), left .9s var(--curva); }
@media (prefers-reduced-motion: reduce) {
  .ad-comp.animando .ad-comp__antes, .ad-comp.animando .ad-comp__asa { transition: none; }
}

/* ---------- Móvil: la foto apaisada queda muy baja, recorte casi 4:3 centrado en los brazos ---------- */
@media (max-width: 760px) {
  .ad-comp { margin-top: 32px; aspect-ratio: 4 / 3.4; border-radius: 16px; }
  .ad-comp__eti { top: 12px; height: 28px; padding: 0 11px; font-size: 12.5px; }
  .ad-comp__eti--antes { left: 12px; }
  .ad-comp__eti--despues { right: 12px; }
  .ad-comp__asa span { width: 44px; height: 44px; }
  .ad-c__frase { font-size: 16px; }
  .ad-c__accion { margin-top: 32px; }
}

/* Texto descriptivo bajo el comparador: Antes / Después */
.ad-c__lados { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1160px; margin: 24px auto 0; }
.ad-c__lado { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.ad-c__lado p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.ad-c__marca { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pildora); background: rgba(255, 255, 255, .12); color: var(--blanco); font-size: 13px; font-weight: 600; }
.ad-c__lado--despues .ad-c__marca { background: var(--acento-hondo); }
.ad-c__lado--despues p { color: var(--blanco); }
@media (max-width: 700px) { .ad-c__lados { grid-template-columns: 1fr; gap: 10px; } .ad-c__lado { flex-direction: column; gap: 8px; padding: 16px; } }