/*
 * Ajustes de la paleta de lujo. Se carga al final, después de las hojas de la portada.
 */

/* El verde mar del sitio (enlaces y estados al pasar el cursor) es el verde clínico de la paleta. */
:root { --sea: var(--verde); }

/* Etiquetas pequeñas sobre fondo claro en latón (5.4:1); las secciones oscuras ya las ponen en champán. */
.eyebrow { color: var(--laton); }

/* Un solo claro para las secciones: porcelana. El blanco queda para las tarjetas encima. */
.specialties,
.contact { background-color: var(--porcelana); }

/* El champán nunca va como texto sobre claro (2:1): numerales, estrellas y menú fijo usan latón. */
.specialty-mark,
.review-stars,
.site-header.is-scrolled .primary-nav a:hover { color: var(--laton); }

/* Llamada fija de WhatsApp en celular: champán con texto noche (7.8:1), no el verde de la marca. */
.mobile-whatsapp { border-color: transparent; background: var(--champan); color: var(--noche); }
.mobile-whatsapp:hover { background: var(--porcelana); }

/* Redes en un solo color: anillo y glifo champán sobre noche elevada. */
.social-float,
.social-float--facebook,
.social-float--whatsapp { background: var(--noche-elevada); color: var(--champan); box-shadow: inset 0 0 0 1px rgba(201, 169, 110, .45); }
.social-float:hover { background: var(--noche); color: var(--porcelana); }

/*
 * Celular. El botón flotante de Facebook tapaba texto al bajar; en celular se quita (el enlace a
 * Facebook sigue en el pie de página y WhatsApp tiene su barra fija).
 * Mientras se ve el primer capítulo de la portada (que ya tiene su botón de WhatsApp), también se
 * oculta la barra fija. Solo con la portada animada; en modo estático o sin JS la barra queda visible.
 */
@media (max-width: 700px) {
  .social-dock { display: none; }
  .mobile-whatsapp { transition: opacity .3s ease, visibility .3s ease; }
  body:has(.tooth-story.is-animated [data-tooth-chapter]:first-child.is-active):not(.is-tooth-story-past) .mobile-whatsapp {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* El estado del modelo 3D («Modelo 3D listo.») es para lectores de pantalla, no para la vista. */
.tooth-story__status {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-whatsapp,
  .social-dock { transition: none; }
}