/* ============================================================
   Dental Safe — Base styles, reset, typography, layout utilities
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background: var(--color-porcelain);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  text-wrap: balance;
}
h3, h4 { letter-spacing: var(--ls-tight); line-height: var(--lh-snug); }

p { text-wrap: pretty; }

.lede, .lede p {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-soft);
  max-width: 42ch;
}

::selection { background: var(--color-jade); color: var(--color-cloud); }

:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: -60px;
  left: var(--space-sm);
  z-index: var(--z-toast);
  background: var(--color-ink);
  color: var(--color-cloud);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  transition: top var(--dur-med) var(--ease-out);
}
.skip-link:focus { top: var(--space-sm); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--section-pad-y);
}
.section > .container { position: relative; z-index: 1; }

.section--tight { padding-block: clamp(3rem, 2.4rem + 2vw, 5rem); }

/* tono de sección: oscuro (tier 1) / atmosférico (tier 2) / limpio (tier 3) */
.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-cloud);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-cloud); }

/* Las secciones claras alternan porcelain / porcelain-soft para separar
   bloques de contenido, pero al ser colores planos distintos, el punto
   exacto donde una sección termina y empieza la siguiente se notaba
   como un corte duro (una línea), en vez de un único fondo continuo.
   Cada una funde hacia el mismo tono (porcelain) en sus primeros y
   últimos px, así cualquier combinación de vecinas se encuentra
   siempre con el mismo color exacto en la costura. */
.section--porcelain { background: var(--color-porcelain); }
.section--porcelain-soft {
  background: linear-gradient(
    to bottom,
    var(--color-porcelain) 0,
    var(--color-porcelain-soft) 90px,
    var(--color-porcelain-soft) calc(100% - 90px),
    var(--color-porcelain) 100%
  );
}

/* ---------- Fondo "ondas de esmalte": ondas reales (no un degradé borroso),
   como mosaico sin fin que se desliza de costado. Un mosaico que se repite
   horizontalmente (repeat-x, tamaño en px fijo, nunca% / cover / aspect-
   ratio) no tiene un borde que un desplazamiento pueda dejar al
   descubierto: por diseño, repetir así jamás deja un corte, sea cual sea
   el tamaño de la sección. Franja acotada arriba (no toda la sección):
   decora detrás de los .section-panel / bloques de vidrio, sin competir
   con el contenido. Se omite en .section--dark. ---------- */
.section:not(.section--dark)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(320px, 100%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  background-repeat: repeat-x;
  background-position: 0 top;
  background-size: 1000px 190px;
  /* Cada onda es una cinta de grosor CONSTANTE (borde superior + el mismo
     borde desplazado 22px abajo), no un relleno hasta el borde del mosaico:
     eso último es lo que se veía como un bloque sólido de color. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 140'%3E%3Cpath d='M0,50 C200,50 200,10 400,10 C600,10 600,50 800,50 L800,70 C600,70 600,30 400,30 C200,30 200,70 0,70 Z' fill='%23e7d5b8'/%3E%3Cpath d='M0,80 C200,80 200,118 400,118 C600,118 600,80 800,80 L800,100 C600,100 600,138 400,138 C200,138 200,100 0,100 Z' fill='%235fa9b1' fill-opacity='0.75'/%3E%3C/svg%3E");
  animation: waveDriftX 26s linear infinite;
}
@keyframes waveDriftX {
  from { background-position-x: 0; }
  to { background-position-x: -1000px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-jade);
  font-weight: 600;
}
.section--dark .eyebrow { color: var(--color-coral-soft); }
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* ---------- Bloques translúcidos: todo contenido clave sobre un fondo animado
   vive dentro de uno de estos paneles, nunca texto suelto encima ---------- */
.glass-panel {
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 64px -34px rgba(42,33,27, 0.22);
}
.glass-panel--tight { border-radius: var(--radius-md); box-shadow: 0 18px 46px -30px rgba(42,33,27, 0.18); }
.glass-panel--dark {
  background: rgba(42,33,27, 0.58);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(238, 240, 241, 0.12);
  box-shadow: 0 26px 64px -34px rgba(5, 6, 7, 0.45);
}

.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--color-cloud); }
.on-dark p { color: var(--color-cloud-soft); }
.on-dark .eyebrow { color: var(--color-coral-soft); }
.on-dark em, .on-dark .accent-italic { color: var(--color-coral-soft); }

em, .accent-italic {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  color: var(--color-jade);
}
.section--dark em, .section--dark .accent-italic { color: var(--color-coral-soft); }

/* ---------- Grano / textura sutil ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ---------- Botones ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------- Glow neón (en los colores de la marca) ----------
   box-shadow nunca se pinta encima del botón, solo alrededor:
   no hay riesgo de que el brillo "pase por arriba" del contenido. */
.btn {
  animation: none;
}
.btn:hover,
.btn:focus-visible {
  animation: btn-glow-pulse 1.8s ease-in-out infinite;
}
@keyframes btn-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--color-jade-bright),
                0 0 22px 5px var(--color-jade-bright),
                0 0 44px 14px rgba(201, 119, 74, 0.65);
  }
  50% {
    box-shadow: 0 0 0 3px var(--color-jade-bright),
                0 0 34px 10px var(--color-jade-bright),
                0 0 64px 22px rgba(201, 119, 74, 0.8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:focus-visible { animation: none; }
}

.btn--coral {
  background: var(--color-coral);
  color: #1a0e08;
  box-shadow: var(--shadow-coral-sm);
}
.btn--coral:hover { background: var(--color-coral-deep); box-shadow: 0 14px 34px -14px rgba(194, 102, 63, 0.55); }

.btn--ghost-dark {
  background: transparent;
  color: var(--color-cloud);
  border: 1px solid var(--color-line-dark-strong);
}
.btn--ghost-dark:hover { background: rgba(243,232,218, 0.08); border-color: var(--color-cloud); }

.btn--ghost-light {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
}
.btn--ghost-light:hover { background: rgba(28, 35, 33, 0.05); border-color: var(--color-ink); }

.btn--text {
  padding: 0.4rem 0;
  border-radius: 0;
  gap: 0.4rem;
  color: var(--color-jade);
  font-weight: 600;
}
.section--dark .btn--text { color: var(--color-coral-soft); }
.btn--text .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn--text:hover .arrow { transform: translateX(3px); }

/* ---------- Utilidades ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-group .reveal:nth-child(2) { transition-delay: 90ms; }
.reveal-group .reveal:nth-child(3) { transition-delay: 180ms; }
.reveal-group .reveal:nth-child(4) { transition-delay: 270ms; }
.reveal-group .reveal:nth-child(5) { transition-delay: 360ms; }
.reveal-group .reveal:nth-child(6) { transition-delay: 450ms; }

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  background: rgba(201,119,74, 0.08);
  color: var(--color-jade-deep);
  border: 1px solid rgba(201,119,74, 0.18);
}
.section--dark .tag-pill {
  background: rgba(243,232,218, 0.06);
  color: var(--color-cloud);
  border-color: var(--color-line-dark-strong);
}