/* ============================================================
   Dental Safe — Componentes compartidos
   ============================================================ */

/* ---------- Header / navegación ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding-block: 1.4rem;
  transition: background var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(251, 243, 231, 0.88);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  padding-block: 0.8rem;
  border-color: var(--color-line);
  box-shadow: 0 10px 40px -24px rgba(42, 33, 27, 0.18);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-cloud);
  flex-shrink: 0;
  transition: color var(--dur-med) var(--ease-out);
}
.brand__mark { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); transition: filter var(--dur-med) var(--ease-out); }
.brand__word strong { font-weight: 600; color: var(--color-coral-soft); }
.site-header.is-scrolled .brand { color: var(--color-ink); }
.site-header.is-scrolled .brand__mark { filter: none; }
.site-header.is-scrolled .brand__word strong { color: var(--color-jade); }

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.main-nav__list > li { position: relative; }
.main-nav__list > li > a {
  display: inline-flex;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-cloud-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.main-nav__list > li > a::before {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-jade-bright);
  margin-right: 0.55rem;
  flex-shrink: 0;
}
.main-nav__list > li > a:hover,
.main-nav__list > li.is-active > a { color: var(--color-cloud); }
.site-header.is-scrolled .main-nav__list > li > a { color: var(--color-ink-soft); }
.site-header.is-scrolled .main-nav__list > li > a:hover,
.site-header.is-scrolled .main-nav__list > li.is-active > a { color: var(--color-ink); }

.has-sub .sub-menu {
  position: absolute;
  top: calc(100% + 1.1rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 240px;
  background: rgba(32, 22, 15, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-md);
  padding: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility var(--dur-med);
  box-shadow: 0 24px 50px -24px rgba(20, 13, 9, 0.5);
}
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.sub-menu a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-cloud-soft);
}
.sub-menu a:hover { background: rgba(243, 232, 218, 0.07); color: var(--color-cloud); }
@media (min-width: 881px) {
  .site-header.is-scrolled .has-sub .sub-menu { background: rgba(251, 243, 231, 0.98); border-color: var(--color-line); box-shadow: 0 24px 50px -24px rgba(42, 33, 27, 0.22); }
  .site-header.is-scrolled .sub-menu a { color: var(--color-ink-soft); }
  .site-header.is-scrolled .sub-menu a:hover { background: rgba(42, 33, 27, 0.05); color: var(--color-ink); }
}

/* ---------- Hero dramático compartido (home + especialidades) ---------- */
.drama-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--color-cloud);
  background:
    radial-gradient(60% 70% at 72% 48%, rgba(201,119,74,0.5), transparent 65%),
    radial-gradient(90% 75% at 50% 112%, rgba(168,95,57,0.55), transparent 60%),
    var(--color-bg-dark);
  padding-top: 6.5rem;
}
/* 100dvh cambia en vivo cuando el navegador mobile oculta/muestra la
   barra de direcciones al scrollear, lo que reacomoda el alto del hero
   y, con él, el recorte "cover" del video de fondo (se nota como si el
   video se corriera de lugar). 100svh usa el viewport chico, estable,
   así el recorte no se recalcula mientras se scrollea. */
.hero.drama-hero { min-height: 100svh; }
.spec-hero.drama-hero { min-height: 84vh; }

.drama-hero__content {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
  padding: 1rem clamp(1.25rem, 5vw, 4rem) 2rem;
  max-width: 600px;
}
.drama-hero__kicker { font-size: 0.95rem; line-height: 1.6; color: var(--color-cloud-soft); max-width: 36ch; }
.drama-hero__title {
  font-family: var(--font-display); font-weight: 350; font-style: normal;
  font-size: var(--fs-display-xl); line-height: 0.98; letter-spacing: -0.01em;
  color: var(--color-cloud-soft);
}
.drama-hero__title strong { font-weight: 600; color: var(--color-cloud); }
.drama-hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.3rem; }

.drama-hero__visual {
  position: absolute; right: clamp(16px, 6vw, 90px); top: 0; bottom: 0; margin: auto 0;
  width: min(460px, 40vw);
  filter: drop-shadow(0 40px 70px rgba(20,13,9,0.55));
}
.drama-hero__visual svg { width: 100%; height: auto; overflow: visible; }

.drama-hero__visual--video {
  aspect-ratio: 220 / 280;
  width: min(360px, 32vw, 34vh);
  filter: none;
}
.drama-hero__visual--video video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Fuente antigua (fondo no 100% negro): se recorta con máscara suave en vez de blend */
.drama-hero__visual--video--masked video {
  -webkit-mask-image: radial-gradient(78% 85% at 50% 45%, #000 22%, transparent 48%);
  mask-image: radial-gradient(78% 85% at 50% 45%, #000 22%, transparent 48%);
}
/* Fuente nueva (fondo negro puro real): se usa como fondo completo del hero, no como pieza chica */
.drama-hero__visual--video--blend {
  position: absolute; inset: 0; right: 0; top: 0; bottom: 0; left: 0; margin: 0;
  width: 100%; height: 100%;
  aspect-ratio: auto;
}
.drama-hero__visual--video--blend video {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%;
  mix-blend-mode: screen;
}
@media (max-width: 760px) {
  /* El video queda de fondo, al costado del título (como en desktop):
     ocupa todo el hero, nunca un bloque chico aparte ni relegado abajo
     del todo. Para que no compita con el texto ni los botones, baja un
     poco de opacidad y el degradado se refuerza arriba (título) y abajo
     (franja de datos), dejando una "ventana" intermedia —a la altura de
     los botones, al costado— donde se lo nota más. */
  .drama-hero__visual--video--blend video { object-position: 42% 80%; opacity: 0.65; }
  .drama-hero__visual--video--blend::after {
    background: linear-gradient(180deg,
      rgba(20,13,9,0.95) 0%,
      rgba(20,13,9,0.88) 45%,
      rgba(20,13,9,0.4) 66%,
      rgba(20,13,9,0.78) 85%,
      rgba(20,13,9,0.95) 100%);
  }
  /* Cinturón oscuro propio para el botón secundario del hero: en algunos
     videos (dientes claros) el "transparente" se lee mal encima del
     video aunque el degradado ya esté oscurecido ahí. */
  .drama-hero__actions .btn--ghost-dark { background: rgba(20,13,9,0.55); }
  /* El título cede un poco de tamaño para dejarle protagonismo a la pieza */
  .spec-hero .drama-hero__title { font-size: var(--fs-display-lg); }
  /* Más aire: los botones quedan lejos tanto del título como del video */
  .drama-hero__content { gap: 1.3rem; padding-bottom: 2.4rem; }
  .drama-hero__actions { margin-top: 0.4rem; }
}
/* Fuentes que no deben recortarse (se contienen enteras) */
.drama-hero__visual--video--contain video {
  object-fit: contain; object-position: 64% 58%;
  transform: scale(1.1);
}
@media (max-width: 760px) {
  /* Mismo tratamiento que el resto de los heroes: de fondo, al costado
     del título, con zoom (cover, aunque la pieza no se vea completa) y
     la misma opacidad para que el texto se lea igual de bien. */
  .drama-hero__visual--video--contain video { object-fit: cover; object-position: -15% 80%; transform: scale(1.3); opacity: 0.65; }
}
.drama-hero__visual--video--blend::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(20,13,9,0.9) 0%, rgba(20,13,9,0.6) 32%, rgba(20,13,9,0.15) 58%, transparent 78%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .drama-hero__visual--video video { display: none; }
}

.drama-hero__meta {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 1.6rem clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--color-line-dark);
  font-size: 0.84rem; letter-spacing: 0.02em; line-height: 1.5; color: var(--color-cloud-soft);
}
.drama-hero__meta span { position: relative; flex: 1; text-align: center; }
.drama-hero__meta span:not(:last-child)::after {
  content: ""; position: absolute; top: -0.2rem; bottom: -0.2rem; right: -0.75rem;
  width: 1px; background: var(--color-line-dark);
}
.drama-hero__meta strong {
  display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--color-cloud); margin-bottom: 0.3rem;
}
@media (max-width: 980px) {
  .drama-hero__meta span:not(:last-child)::after { display: none; }
  .drama-hero__meta span:not(:last-child) { padding-bottom: 0.9rem; border-bottom: 1px solid var(--color-line-dark); }
}

@media (max-width: 980px) {
  .drama-hero__visual:not(.drama-hero__visual--video--blend) { position: relative; right: auto; top: auto; bottom: auto; width: min(300px, 70vw); margin: 1.5rem auto 0; }
  .drama-hero__visual--video:not(.drama-hero__visual--video--blend) { width: min(240px, 62vw); margin: 1.5rem auto 0; }
  .drama-hero__content { max-width: 100%; }
  .drama-hero__meta { flex-direction: column; gap: 0.7rem; }
}

.site-header__actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.site-header.is-scrolled .site-header__actions .btn--ghost-dark { color: var(--color-ink); border-color: var(--color-line-strong); }
.site-header.is-scrolled .site-header__actions .btn--ghost-dark:hover { background: rgba(42, 33, 27, 0.06); border-color: var(--color-ink); }
.btn--sm { padding: 0.7rem 1.3rem; font-size: 0.88rem; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
  flex-shrink: 0;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: "";
  position: absolute; left: 8px; right: 8px; height: 2px;
  background: var(--color-cloud);
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast), background var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled .nav-toggle span,
.site-header.is-scrolled .nav-toggle::before,
.site-header.is-scrolled .nav-toggle::after { background: var(--color-ink); }
.nav-toggle::before { top: 14px; }
.nav-toggle span { top: 19px; }
.nav-toggle::after { top: 24px; }
.nav-toggle[aria-expanded="true"]::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(-5px) rotate(-45deg); }
.nav-toggle[aria-expanded="true"] span { opacity: 0; }

@media (max-width: 880px) {
  .nav-toggle { display: block; order: 3; }
  .main-nav { position: static; }
  .main-nav__list {
    position: fixed;
    inset: 0;
    /* .site-header.is-scrolled usa backdrop-filter, que crea su propio
       contenedor de posicionamiento: sin esto, inset:0 se resuelve contra
       el header (bajito) y no contra el viewport completo. */
    height: 100vh;
    height: 100dvh;
    z-index: var(--z-overlay);
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 6rem var(--container-pad) 3rem;
    background: var(--color-bg-dark);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-in-out), opacity var(--dur-med), visibility var(--dur-med);
  }
  .main-nav__list.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .main-nav__list > li { border-bottom: 1px solid var(--color-line-dark); }
  .main-nav__list > li > a,
  .site-header.is-scrolled .main-nav__list > li > a { display: block; padding: 1.1rem 0.25rem; font-size: 1.2rem; color: var(--color-cloud-soft); }
  .main-nav__list > li > a:hover,
  .main-nav__list > li.is-active > a,
  .site-header.is-scrolled .main-nav__list > li > a:hover,
  .site-header.is-scrolled .main-nav__list > li.is-active > a { color: var(--color-cloud); }
  .has-sub .sub-menu,
  .has-sub:hover .sub-menu,
  .has-sub:focus-within .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 0.75rem 0.5rem;
    display: none;
  }
  .has-sub.is-open .sub-menu { display: block; }
  .site-header__actions .btn--ghost-dark,
  .site-header__actions .btn--ghost-light { display: none; }
}

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: var(--z-toast);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--color-jade);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-jade-lg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 28px; height: 28px; }
.wa-float.is-hidden { opacity: 0; transform: scale(0.8) translateY(8px); pointer-events: none; }

/* ---------- Tarjetas: objeciones / soluciones ---------- */
.card-grid {
  display: grid;
  gap: var(--space-sm);
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Tarjetas que se dan vuelta (miedo → solución), "Por qué
   elegirnos": giran solas, con desfase entre tarjetas (js/flip-cards.js),
   y también se pueden tocar — nunca dependen del mouse. Sin numeración:
   el texto es lo que tiene que pesar acá. ---------- */
.flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); perspective: 1400px; }
@media (max-width: 900px) { .flip-grid { grid-template-columns: 1fr; } }
.flip-card { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; min-height: 230px; }
.flip-card__inner {
  position: relative; width: 100%; height: 100%; min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); }
.flip-card__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex; flex-direction: column; justify-content: center;
}
.flip-card__face--front { background: var(--color-bg-dark-soft); border: 1px solid var(--color-line-dark); }
.flip-card__face--front h3 { color: var(--color-cloud); font-size: 1.4rem; margin-bottom: 0.6rem; }
.flip-card__face--front p { color: var(--color-cloud-soft); font-size: 1.02rem; margin: 0; }
.flip-card__face--back {
  background: linear-gradient(155deg, var(--color-jade-bright), var(--color-jade));
  color: var(--color-cloud);
  transform: rotateY(180deg);
}
.flip-card__check { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; margin-bottom: 0.8rem; }
.flip-card__face--back h3 { font-size: 1.4rem; margin: 0 0 0.6rem; color: var(--color-cloud); }
.flip-card__face--back p { font-size: 1.02rem; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .flip-card { cursor: default; min-height: 0; }
  .flip-card__inner { transform: none !important; transition: none; display: flex; flex-direction: column; gap: 0.75rem; position: static; }
  .flip-card__face { position: static; backface-visibility: visible; transform: none !important; }
}

/* ---------- Stats ---------- */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
}
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 16rem; }
.stat__icon {
  width: 44px; height: 44px; margin-bottom: 0.7rem;
  border-radius: 50%;
  background: rgba(201,119,74,0.1);
  color: var(--color-jade);
  display: flex; align-items: center; justify-content: center;
}
.section--dark .stat__icon { background: rgba(243,232,218,0.1); color: var(--color-coral-soft); }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  color: var(--color-coral-soft);
  display: block;
}
.section--porcelain .stat__value,
.section--porcelain-soft .stat__value { color: var(--color-jade); }
.stat__label { font-size: 0.88rem; color: var(--color-ink-faint); }
.section--dark .stat__label { color: var(--color-cloud-soft); }

/* ---------- Especialidades (grid de la home) ---------- */
.specialty-card {
  --offset: 0rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-dark-soft);
  background-size: cover;
  background-position: center;
  isolation: isolate;
  border: 1px solid var(--color-line-dark);
  transform: translateY(var(--offset));
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.specialty-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(195deg, rgba(20,13,9,0.32) 0%, rgba(20,13,9,0.62) 60%, rgba(20,13,9,0.8) 100%);
  backdrop-filter: blur(3px) saturate(130%);
  -webkit-backdrop-filter: blur(3px) saturate(130%);
  border: 1px solid rgba(243,232,218,0.14);
  border-radius: inherit;
  transition: opacity var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med) var(--ease-out);
  z-index: -1;
}
.specialty-card__icon {
  width: 46px; height: 46px; margin-bottom: auto;
  border-radius: var(--radius-sm);
  background: rgba(243,232,218,0.1);
  border: 1px solid rgba(243,232,218,0.16);
  color: var(--color-coral-soft);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.specialty-card:hover .specialty-card__icon { transform: scale(1.1) rotate(-4deg); background: rgba(243,232,218,0.2); }
.specialty-card h3 { color: var(--color-cloud); font-size: 1.45rem; margin-bottom: 0.45rem; }
.specialty-card p { color: var(--color-cloud-soft); font-size: 0.96rem; margin-bottom: var(--space-md); max-width: 32ch; }
.specialty-card .btn { align-self: flex-start; }
.specialty-card:nth-child(3n+2) { --offset: 1.75rem; }
@media (max-width: 900px) { .specialty-card:nth-child(3n+2) { --offset: 0rem; } }
.specialty-card:hover,
.specialty-card:focus-visible {
  transform: translateY(calc(var(--offset) - 8px));
  box-shadow: var(--shadow-dark-lg);
  border-color: var(--color-line-dark-strong);
}
.specialty-card:hover::before { backdrop-filter: blur(1px) saturate(145%); -webkit-backdrop-filter: blur(1px) saturate(145%); }
/* Barrido de brillo diagonal al pasar el mouse */
.specialty-card > * { position: relative; z-index: 1; }
.specialty-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(243,232,218,0.22) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 120% 0;
  pointer-events: none;
  transition: background-position 0.7s var(--ease-out);
}
.specialty-card:hover::after { background-position: -20% 100%; }
@media (prefers-reduced-motion: reduce) {
  .specialty-card, .specialty-card::before, .specialty-card::after, .specialty-card__icon { transition: none; }
}

/* ---------- Especialidad en detalle (página especialidades.html): fila
   ancha con más lugar para texto que .specialty-card, que es la versión
   compacta que vive en la home. ---------- */
.specialty-detail-list { display: flex; flex-direction: column; gap: var(--space-md); }
.specialty-detail {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-dark-soft);
  border: 1px solid var(--color-line-dark);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.specialty-detail:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-dark-lg);
  border-color: var(--color-line-dark-strong);
}
.specialty-detail__media {
  position: relative;
  display: block;
  min-height: 220px;
  overflow: hidden;
  background: var(--color-bg-dark-soft);
}
.specialty-detail__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* El sujeto de estos videos (el mismo del hero) no está centrado en el
     cuadro ancho original — queda más a la derecha. Desplazamos el recorte
     para que la pieza dental quede realmente centrada en esta tarjeta. */
  object-position: 85% center;
}
/* Insinuación de costura con el cuerpo de texto, no un velo: el video
   tiene que verse — nada de taparlo con un color sólido. Termina en el
   mismo color exacto del panel de texto (no una versión translúcida
   distinta) para que la costura no se note. */
.specialty-detail__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 55%, var(--color-bg-dark-soft) 100%);
}
.specialty-detail__body { position: relative; padding: var(--space-lg); display: flex; flex-direction: column; }
.specialty-detail__icon {
  width: 46px; height: 46px; margin-bottom: 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(243,232,218,0.1);
  border: 1px solid rgba(243,232,218,0.16);
  color: var(--color-coral-soft);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.specialty-detail:hover .specialty-detail__icon { transform: scale(1.1) rotate(-4deg); background: rgba(243,232,218,0.2); }
.specialty-detail h3 { color: var(--color-cloud); font-size: 1.5rem; margin-bottom: 0.5rem; }
.specialty-detail p { color: var(--color-cloud-soft); font-size: 0.98rem; max-width: 52ch; }
.specialty-detail__points { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.9rem 0 1.2rem; padding: 0; list-style: none; }
.specialty-detail__points li {
  font-size: 0.85rem; color: var(--color-cloud);
  background: rgba(243,232,218,0.08);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
}
.specialty-detail .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 760px) {
  .specialty-detail { grid-template-columns: 1fr; }
  .specialty-detail__media { min-height: 240px; }
  /* En mobile el recorte "cover" dejaba la pieza cortada y descentrada:
     se contiene entera, un poco más chica, centrada sobre el fondo oscuro
     de la tarjeta (mismo color que el panel de texto, sin costura). */
  .specialty-detail__media video { object-fit: contain; object-position: center center; }
  .specialty-detail__media::after { background: linear-gradient(180deg, transparent 55%, var(--color-bg-dark-soft) 100%); }
}
@media (prefers-reduced-motion: reduce) { .specialty-detail, .specialty-detail__icon { transition: none; } }

/* ---------- Oferta de bienvenida ---------- */
.offer-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-bg-dark);
  color: var(--color-cloud);
  position: relative;
  overflow: hidden;
}
.offer-panel > * { position: relative; z-index: 1; }
/* Brillo ambiente continuo y lento: es el bloque de conversión más importante de la página */
.offer-panel::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(243,232,218,0.14) 50%, transparent 58%);
  background-size: 260% 260%;
  pointer-events: none;
  animation: offerShine 6s ease-in-out infinite;
}
@keyframes offerShine {
  0%, 100% { background-position: 120% 0; }
  50% { background-position: -20% 100%; }
}
@media (prefers-reduced-motion: reduce) { .offer-panel::after { animation: none; } }
.offer-panel__price {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.4rem + 3vw, 4.75rem);
  line-height: 1;
  color: var(--color-cloud);
}
.offer-panel__price small { font-size: 1.1rem; display: block; color: var(--color-cloud-soft); font-family: var(--font-sans); margin-bottom: 0.4rem; }
.offer-panel__meta { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.88rem; color: var(--color-cloud-soft); }
@media (max-width: 820px) { .offer-panel { grid-template-columns: 1fr; } }

/* ---------- Bloque contenedor translúcido (igual criterio que .cta-band,
   en versión clara): agrupa el título + las tarjetas de una sección para
   que nada quede como texto suelto directo sobre el fondo de ondas — el
   fondo se ve detrás y se insinúa a través del vidrio, nunca estorba la
   lectura. ---------- */
.section-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(42, 33, 27, 0.08);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.3rem + 2vw, 2.75rem) clamp(1.25rem, 0.8rem + 2vw, 2.75rem);
  box-shadow: 0 30px 70px -40px rgba(42, 33, 27, 0.22);
}

/* ---------- Testimonios ---------- */
.testimonial-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
@media (max-width: 760px) { .testimonial-wall { grid-template-columns: 1fr; } }
.testimonial-card {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-bg-dark-soft);
  border: 1px solid var(--color-line-dark);
}
.testimonial-card:nth-child(2) { margin-top: 2rem; }
@media (max-width: 760px) { .testimonial-card:nth-child(2) { margin-top: 0; } }

/* ---------- Testimonios en video (Instagram): blockquote.instagram-media +
   embed.js convierte cada celda en el reel real. Mientras el script carga,
   la celda mantiene el alto 9:16 para que el layout no salte. ---------- */
/* Forzar el embed al ancho de una columna de grid (más angosto que su
   ancho natural ~326px) hacía que Instagram metiera el reproductor con
   barras negras a los costados (pillarbox) para "rellenar" el ancho
   impuesto. En vez de pelear con eso, cada celda se deja en su ancho
   natural (flex-wrap centra el conjunto), así el video llena el marco
   sin ningún borde de sobra. */
.testimonial-video-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm);
  /* El panel (inline-block) se achica al ancho de SU contenido más angosto;
     sin esto, el grid terminaba partiéndose en 2+1 (el panel no se
     ensanchaba para los 3 embeds en una sola fila). width:max-content lo
     fuerza a pedir su ancho "sin wrap" real, y el panel crece para darle
     lugar (hay sobra de sobra dentro del container de 1280px). */
  width: max-content;
  max-width: 100%;
}
@media (max-width: 760px) { .testimonial-video-grid { width: auto; } }
.testimonial-video {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-dark-soft);
}
.testimonial-video iframe {
  border-radius: var(--radius-md) !important;
  margin: 0 !important;
}
@media (max-width: 420px) {
  .testimonial-video iframe { width: 100% !important; min-width: 0 !important; }
}
.testimonial-video--pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.8rem; text-align: center; padding: var(--space-md);
  border: 1px dashed var(--color-line-dark-strong);
}
.testimonial-video--pending p { color: var(--color-cloud-soft); font-size: 0.85rem; max-width: 22ch; margin: 0; }
.testimonial-video__play { width: 48px; height: 48px; border-radius: 50%; background: rgba(243,232,218,0.1); color: var(--color-coral-soft); display: flex; align-items: center; justify-content: center; }
.testimonial-card__stars { color: var(--color-coral-soft); letter-spacing: 0.2em; font-size: 0.9rem; margin-bottom: 0.9rem; }
.testimonial-card p.quote { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--color-cloud); margin-bottom: 1rem; }
.testimonial-card cite { font-style: normal; font-size: 0.85rem; color: var(--color-cloud-soft); }

/* ---------- Ubicación ---------- */
.location-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-lg);
  align-items: stretch;
}
@media (max-width: 880px) { .location-grid { grid-template-columns: 1fr; } }
.location-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.location-list__item { display: flex; gap: 1rem; padding-block: var(--space-xs); border-top: 1px solid var(--color-line); }
.location-list__item:first-child { border-top: 0; }
.location-list__icon { width: 38px; height: 38px; border-radius: var(--radius-xs); background: rgba(201,119,74,0.08); color: var(--color-jade); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.location-list__icon svg { width: 18px; height: 18px; }
.location-list__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-ink-faint); margin-bottom: 0.2rem; }
.location-map { border-radius: var(--radius-md); overflow: hidden; min-height: 360px; border: 1px solid var(--color-line); }
.location-map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; }

/* ---------- Formulario de reserva ---------- */
.reserve-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 880px) { .reserve-panel { grid-template-columns: 1fr; } }
.reserve-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-bg-dark-soft);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-lg);
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.85rem; color: var(--color-cloud-soft); }
.field input, .field select {
  font: inherit;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line-dark-strong);
  background: rgba(243,232,218, 0.04);
  color: var(--color-cloud);
}
.field input::placeholder { color: var(--color-cloud-soft); opacity: 0.7; }
.field input:focus, .field select:focus { outline: none; border-color: var(--color-coral); background: rgba(243,232,218,0.07); }
.field select option { color: var(--color-ink); }
.field-error { font-size: 0.8rem; color: var(--color-coral-soft); min-height: 1.1em; }
.field.has-error input, .field.has-error select { border-color: var(--color-coral); }
.reserve-note { font-size: 0.8rem; color: var(--color-cloud-soft); }
.reserve-trust { display: flex; flex-direction: column; gap: 0.6rem; margin-top: var(--space-sm); font-size: 0.92rem; }
.reserve-trust li { display: flex; gap: 0.65rem; align-items: flex-start; }
.reserve-trust svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.15rem; color: var(--color-coral-soft); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-cloud-soft);
  padding-block: var(--space-xl) var(--space-md);
}
.site-footer .brand {
  color: var(--color-cloud);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-line-dark);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); } }
.footer-grid h4 { color: var(--color-cloud); font-size: 0.95rem; margin-bottom: 1rem; font-family: var(--font-sans); font-weight: 600; }
.footer-grid ul { display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.9rem; }
.footer-grid a:hover { color: var(--color-cloud); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding-top: var(--space-md); font-size: 0.82rem; }

/* ---------- Página 404 / genérico centrado ---------- */
.state-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--container-pad);
}

/* ---------- Breadcrumb de especialidad ---------- */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-cloud-soft); margin-bottom: var(--space-sm); }
.breadcrumb a:hover { color: var(--color-cloud); }

/* ---------- Pasos de proceso (especialidad): bloques de vidrio esmerilado,
   igual recurso que .benefit-item, para que la info clave tenga peso visual
   sobre el fondo de ondas en vez de flotar como texto plano. ---------- */
.process-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--space-sm);
  padding: 1.15rem 1.4rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(42,33,27,0.08);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 18px 40px -28px rgba(42,33,27,0.25);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.process-step:hover { transform: translateY(-3px); border-color: var(--color-jade); box-shadow: var(--shadow-coral-sm); }
.section--dark .process-step { background: rgba(243,232,218,0.06); border-color: var(--color-line-dark); }
.section--dark .process-step:hover { border-color: var(--color-line-dark-strong); }
@media (prefers-reduced-motion: reduce) { .process-step { transition: none; } }
.process-step__num { font-family: var(--font-mono); font-weight: 500; font-size: 1.75rem; color: var(--color-jade); }
.process-step h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.process-step p { color: var(--color-ink-soft); font-size: 0.95rem; max-width: 60ch; }

/* ---------- FAQ lado a lado ---------- */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-lg); }
@media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-list { display: flex; flex-direction: column; }
.faq-item { padding-block: var(--space-sm); border-top: 1px solid var(--color-line); }
.faq-item:first-child { border-top: 0; }
.faq-item h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.faq-item p { font-size: 0.93rem; color: var(--color-ink-soft); }

/* ---------- "Qué incluye": sello con forma de diente (el mismo ícono de
   marca) + el ícono específico adentro, con el texto como protagonista
   (etiqueta + frase grande) — reemplaza el molde de ícono-cuadrado +
   título + párrafo, aprobado por el cliente ("diente como sello"). ---------- */
.seal-list { display: flex; flex-direction: column; gap: var(--space-md); }
.seal-item { display: flex; align-items: center; gap: 1.2rem; }
.seal-item__seal { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.seal-item__tooth { width: 100%; height: 100%; fill: rgba(201,119,74,0.14); stroke: none; }
.section--dark .seal-item__tooth { fill: rgba(243,232,218,0.1); }
.seal-item__mark { position: absolute; width: 22px; height: 22px; top: 50%; left: 50%; transform: translate(-50%, -58%); color: var(--color-jade); }
.section--dark .seal-item__mark { color: var(--color-coral-soft); }
.seal-item__body { border-left: 2px solid var(--color-jade-bright); padding-left: 1rem; }
.seal-item__eyebrow { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-jade); font-weight: 600; margin-bottom: 0.3rem; }
.section--dark .seal-item__eyebrow { color: var(--color-coral-soft); }
.seal-item__body p { margin: 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--color-ink); }
.section--dark .seal-item__body p { color: var(--color-cloud); }
@media (max-width: 560px) {
  .seal-item { align-items: flex-start; }
  .seal-item__body p { font-size: 1.05rem; }
}

/* ---------- Grid de layout genérico 2 columnas ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }

.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line-dark);
  box-shadow: var(--shadow-dark-lg);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }