/* ══════════════════════════════════════════════════════════════
   ND DERMA — ENHANCEMENTS LAYER (v2 audit)
   Capa aditiva. NO cambia colores, tipografías, logo ni contenido.
   Usa exclusivamente los tokens ya definidos en styles.css (:root).
   Objetivo: pulir microinteracciones, foco accesible, jerarquía
   y robustez, sin tocar la identidad visual.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Foco accesible visible (teclado) ─────────────────────────
   Hoy no hay estado de foco claro: mala accesibilidad y sensación
   de acabado. Anillo dorado con los colores existentes. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}
/* No mostrar el anillo en clicks de mouse, solo teclado */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* ── 2. Feedback al presionar botones (CTA) ──────────────────────
   Da tacto premium sin cambiar color. */
.header-book-btn,
.footer-book-btn,
[class*="bg-gold-cta"],
.btn-primary,
.btn-secondary {
  transition: transform .18s var(--ease-out-expo, ease),
              box-shadow .25s ease, background-color .2s ease,
              border-color .2s ease, color .2s ease;
  will-change: transform;
}
.btn-primary:active,
.btn-secondary:active,
.header-book-btn:active,
[class*="bg-gold-cta"]:active { transform: translateY(1px) scale(.99); }

/* Sombra sutil al hover en el CTA dorado (usa negro translúcido, no color nuevo) */
.header-book-btn:hover,
[class*="bg-gold-cta"]:hover {
  box-shadow: 0 6px 22px rgba(174, 149, 129, 0.35);
}

/* ── 3. Tarjetas: elevación más rica y consistente ───────────────
   Unifica el hover de category-card / package / testimonial con
   las sombras ya tokenizadas. */
.category-card {
  transition: transform .22s var(--ease-out-expo, ease),
              box-shadow .28s ease, border-color .28s ease;
}
.category-card:hover {
  box-shadow: var(--shadow-glow, 0 8px 40px rgba(0,0,0,0.11));
  border-color: var(--color-gold-light);
}
.testimonial-quote {
  transition: transform .22s var(--ease-out-expo, ease), box-shadow .28s ease;
}
.testimonial-quote:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card, 0 2px 24px rgba(0,0,0,0.07));
}

/* ── 4. Página de servicios: mejor ritmo y lectura ───────────────
   Era el punto más plano (lista larga de filas). Se le da respiración,
   línea divisoria más suave y realce al pasar el mouse. */
.service-item {
  transition: background-color .2s ease, padding-left .2s var(--ease-out-expo, ease);
  border-radius: 4px;
}
.service-item summary:hover {
  background-color: rgba(185, 168, 133, 0.06);
}
.service-item[open] {
  background-color: rgba(239, 235, 227, 0.35);
}
.service-item[open] summary {
  padding-left: 6px;
}
/* Precio: peso visual coherente */
.service-item__price { letter-spacing: .02em; }
.price-tba { opacity: .78; }

/* Sub-navegación de categorías (índice lateral): estado activo real */
.services-tab-nav a:hover { color: var(--color-gold-dark); }

/* ── 5. Imágenes: zoom más suave y sin “salto” ───────────────────*/
.group img { will-change: transform; }
.hero-collage__tile img { transition: transform .6s var(--ease-out-expo, ease); }
.hero-collage__tile:hover img { transform: scale(1.04); }

/* ── 6. Enlaces de texto (footer / nav): subrayado elegante ──────*/
.nav-primary a::after {
  content: "";
  display: block;
  height: 1px;
  width: 0;
  margin-top: 3px;
  background: var(--color-gold);
  transition: width .25s var(--ease-out-expo, ease);
}
.nav-primary a:hover::after,
.nav-primary a.active::after { width: 100%; }

/* ── 7. Scrollbar sutil en tono de marca (solo desktop) ──────────*/
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--color-gold-light) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb {
    background: var(--color-gold-light);
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  *::-webkit-scrollbar-thumb:hover { background: var(--color-gold); background-clip: content-box; }
}

/* ── 8. Selección de texto en color de marca ─────────────────────*/
::selection { background: var(--color-gold-light); color: var(--color-dark); }

/* ── 9. Robustez: si el reveal por JS no corre, no dejar vacío ───
   Respaldo suave — a los 3s cualquier bloque aún oculto aparece. */
@keyframes ndFailSafeReveal { to { opacity: 1; transform: none; } }
[data-reveal]:not(.is-visible) {
  animation: ndFailSafeReveal .01s linear 3s forwards;
}

/* ── 10. Respeto a reduce-motion (accesibilidad) ─────────────────*/
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-collage__tile:hover img,
  .group:hover img { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   11. FIX FOUC — destello blanco al cargar (hero del home + CTA)
   Causa: el texto es blanco (pensado para ir sobre la foto oscura),
   pero mientras la imagen de fondo carga, el fondo queda blanco y
   el texto se vuelve invisible. Los heroes internos ya tenían este
   respaldo (var(--color-dark)); el del home y el banner no.
   Se usa #1C1917 (mismo tono oscuro que ya usa el gradiente del hero
   y el footer): NO es un color nuevo.
   ══════════════════════════════════════════════════════════════ */
.hero,
#hero-immersive { background-color: #1C1917; }
#cta-banner     { background-color: #1C1917; }

/* Legibilidad del texto del hero sobre zonas claras de la imagen
   (sombra suave, sin cambiar el color del texto). */
.hero-headline,
.hero-sub,
.hero-eyebrow { text-shadow: 0 2px 24px rgba(0,0,0,0.45); }