/* ==========================================================================
   Ingeniería de Sonrisas — estilos compartidos
   Paleta: blanco dominante / cobre único acento / carbón texto
   ========================================================================== */

:root{
  --copper: #B8794F;
  --copper-light: #D9A579;
  --copper-dark: #8B5A34;
  --copper-deep: #6E4527;
  --copper-pale: #F4E6D8;
  --charcoal: #1A1A1A;
  --charcoal-soft: #4A4A4A;
  --ivory: #F6F2EC;

  /* Sistema de animaciones luminosas (Sistema_Animaciones_Luminosas_IS.md) */
  --glow-copper: #C98C6B;
  --glow-peach: #E5A17F;
  --glow-bronze: #B8734F;
  --glow-champagne: #F2C7AD;
  --glow-white: #FFFDFC;
  --glow-pearl: #F4F2F1;
}

html{
  scroll-behavior: auto; /* Lenis toma el control del suave */
}

body{
  background:#ffffff;
  color:var(--charcoal);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4,.font-heading{
  font-family:'Fraunces', serif;
}

/* ---------- Lenis ---------- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#preloader img{ opacity:0; transform:scale(.85); }

/* ---------- Header ---------- */
#site-header{
  transition: background-color .4s ease, box-shadow .4s ease, padding .3s ease;
}
#site-header.is-scrolled{
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(26,26,26,.06);
}
/* En mobile/tablet el header siempre tiene 2 filas (logo + pills de nav) — se
   ve raro si la fila de arriba queda transparente sobre el hero mientras la
   de abajo es blanca sólida. Por eso, por debajo de lg, el fondo va siempre
   puesto (no solo al hacer scroll), para que ambas filas se lean como un
   solo bloque. */
@media (max-width: 1023px){
  #site-header{
    background:rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(26,26,26,.06);
  }
}

.nav-link{
  position:relative;
  color:var(--charcoal);
}
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:0; height:1.5px;
  background:var(--copper);
  transition:width .35s ease;
}
.nav-link:hover::after, .nav-link.is-active::after{ width:100%; }

/* ---------- Botones con sweep cobre ---------- */
.btn-copper{
  position:relative;
  overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  isolation:isolate;
}
.btn-copper span{ position:relative; z-index:2; }
.btn-copper::before{
  content:'';
  position:absolute; inset:0;
  background:var(--copper-deep);
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.65,0,.35,1);
  z-index:1;
}
.btn-copper:hover::before, .btn-copper:active::before{ transform:translateX(0); }

.btn-outline{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn-outline span{ position:relative; z-index:2; transition:color .4s ease; }
.btn-outline::before{
  content:'';
  position:absolute; inset:0;
  background:var(--copper-dark);
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.65,0,.35,1);
  z-index:1;
}
.btn-outline:hover::before, .btn-outline:active::before{ transform:translateX(0); }
.btn-outline:hover span, .btn-outline:active span{ color:#fff; }

/* ---------- Reveal on scroll ---------- */
.reveal-up{ opacity:0; transform:translateY(28px); }
.reveal-item{ opacity:0; transform:translateY(26px); }
.reveal-line{ opacity:0; transform:translateY(0); }
.reveal-fade{ opacity:0; }

/* ---------- Floritura de firma (brief 1 — tratamiento puntual, solo hero Home) ---------- */
.swash-letter{ position:relative; display:inline-block; }
.swash-mark{ position:absolute; left:100%; bottom:.05em; margin-left:-.08em; pointer-events:none; }

/* ---------- Destello bronce animado — único, solo tarjeta insignia Diseño de Sonrisa ---------- */
.title-bronze-shimmer{
  background: linear-gradient(100deg, #fff 30%, var(--glow-bronze) 48%, #F2C7AD 52%, #fff 70%);
  background-size: 250% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bronze-shimmer 6s ease-in-out infinite;
}
@keyframes bronze-shimmer{
  0%, 15%{ background-position: 200% 0; }
  55%, 100%{ background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .title-bronze-shimmer{
    animation:none;
    background:none;
    -webkit-background-clip:initial;
    background-clip:initial;
    color:#fff;
  }
}

/* ---------- Destello cobre animado — hero de Home (fondo claro, texto carbón en reposo) ---------- */
.title-copper-shimmer{
  background: linear-gradient(100deg, var(--charcoal) 25%, var(--glow-copper) 45%, var(--glow-champagne) 50%, var(--glow-copper) 55%, var(--charcoal) 75%);
  background-size: 250% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: copper-shimmer 7s ease-in-out infinite;
}
@keyframes copper-shimmer{
  0%, 18%{ background-position: 200% 0; }
  58%, 100%{ background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .title-copper-shimmer{
    animation:none;
    background:none;
    -webkit-background-clip:initial;
    background-clip:initial;
    color:var(--charcoal);
  }
}

/* ---------- Revelado de titulares palabra por palabra + destello cobre en la frase clave ---------- */
.word-reveal-wrap{ display:inline-block; overflow:hidden; vertical-align:top; }
.word-reveal-word{ display:inline-block; will-change:transform,opacity; }

.word-glint-phrase{ position:relative; display:inline-block; }
.word-underline{
  position:absolute; left:1px; right:1px; bottom:-.08em; height:2px;
  background:linear-gradient(90deg, var(--copper-light), var(--copper), var(--copper-light));
  border-radius:2px;
  transform:scaleX(0);
}
@media (prefers-reduced-motion: reduce){
  .word-reveal-word{ opacity:1 !important; transform:none !important; }
  .word-underline{ transform:scaleX(1) !important; }
}

/* ---------- Puntos de señal — activación con ping cobre (no bullets estáticos) ---------- */
.signal-dot{ position:relative; }
.signal-dot::before{
  content:'';
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1.5px solid var(--copper);
  opacity:0;
  pointer-events:none;
}
.signal-dot.is-live{ animation: signal-pop .5s cubic-bezier(.34,1.56,.64,1) forwards; }
.signal-dot.is-live::before{ animation: signal-ping .8s ease-out .05s both; }
@keyframes signal-pop{
  0%{ transform:scale(0); }
  60%{ transform:scale(1.4); }
  100%{ transform:scale(1); }
}
@keyframes signal-ping{
  0%{ opacity:.8; transform:scale(.5); }
  100%{ opacity:0; transform:scale(2.2); }
}
@media (prefers-reduced-motion: reduce){
  .signal-dot.is-live{ animation:none; }
  .signal-dot.is-live::before{ animation:none; }
}

/* ---------- Wordmark del logo — fino, editorial, tracked (fiel a logo-principal.png) ---------- */
.logo-wordmark{
  font-family:'Inter', sans-serif;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1.3;
}

/* ---------- Destello sutil animado sobre el isotipo del logo ---------- */
.logo-shimmer{ position:relative; overflow:hidden; display:inline-flex; }
.logo-shimmer::after{
  content:'';
  position:absolute; top:-60%; left:-40%;
  width:35%; height:220%;
  background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,.5) 45%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.5) 55%, transparent 100%);
  transform: translateX(-160%);
  animation: logo-shine-sweep 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes logo-shine-sweep{
  0%, 25%{ transform: translateX(-160%); }
  60%, 100%{ transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce){
  .logo-shimmer::after{ animation:none; display:none; }
}

/* ---------- Vertical editorial text (hero) ---------- */
.vertical-text{
  writing-mode: vertical-rl;
  letter-spacing:.25em;
}
/* ---------- Hero: video de fondo completo + scrim ---------- */
.hero-video-frame{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero-video-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
.hero-scrim{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background: linear-gradient(115deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.74) 32%,
    rgba(255,255,255,.5) 58%,
    rgba(255,255,255,.62) 100%);
}
@media (max-width: 767px){
  .hero-scrim{
    background: linear-gradient(180deg,
      rgba(255,255,255,.9) 0%,
      rgba(255,255,255,.8) 45%,
      rgba(255,255,255,.72) 70%,
      rgba(255,255,255,.85) 100%);
  }
}
.hero-content{ position:relative; z-index:3; }

/* ==========================================================================
   Sistema de animaciones luminosas
   Líneas de luz, órbitas, pulsos y destellos cobre (ver Sistema_Animaciones_Luminosas_IS.md)
   ========================================================================== */
.light-layer{
  position:absolute; inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
}
.light-layer svg{ position:absolute; overflow:visible; }

.js-orbit-path{
  fill:none;
  stroke-linecap:round;
}
.js-orbit-rotate{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: is-orbit-rotate 24s ease-in-out infinite;
}
@keyframes is-orbit-rotate{
  0%{ transform:rotate(-3deg); }
  50%{ transform:rotate(3deg); }
  100%{ transform:rotate(-3deg); }
}

.js-flare{
  opacity:0;
  animation: is-flare-pulse 7s ease-in-out infinite;
}
@keyframes is-flare-pulse{
  0%, 100%{ opacity:0; transform:scale(.6); }
  45%{ opacity:1; transform:scale(1.1); }
  60%{ opacity:.2; transform:scale(.9); }
}

.js-particle{
  animation: is-particle-drift 15s ease-in-out infinite;
}
@keyframes is-particle-drift{
  0%,100%{ transform:translate(0,0); opacity:.2; }
  50%{ transform:translate(5px,-9px); opacity:.5; }
}

.js-light-pulse{ opacity:0; }

/* Reveal secundario de decoración: se oculta en mobile para simplificar */
@media (max-width: 767px){
  .light-decor-secondary{ display:none; }
  .light-layer{ opacity:.75; }
}

/* ---------- Timeline de proceso (4 pasos) ---------- */
.process-timeline{ position:relative; }
.process-connector-desktop{ z-index:0; }
.process-connector-mobile{
  position:absolute; width:2px; top:0; left:24px; height:0;
  background: rgba(184,121,79,.14);
  overflow:hidden; z-index:0;
  transform:translateX(-50%);
}
.process-connector-mobile-fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background: linear-gradient(180deg, var(--copper-light), var(--copper));
}
.process-step{ position:relative; z-index:1; }
.process-step-number{ flex-shrink:0; }
.process-step-number{
  transition: background-color .6s ease, color .6s ease, box-shadow .6s ease, border-color .6s ease;
  background:var(--copper-pale);
  color:var(--copper);
  border:1px solid rgba(184,121,79,.3);
}
.process-step-number.is-lit{
  background:var(--copper-dark);
  color:#fff;
  border-color:var(--copper-dark);
  box-shadow: 0 0 0 6px rgba(201,140,107,.16), 0 0 20px rgba(201,140,107,.5);
}

/* ---------- Glow sutil en tarjetas e íconos al hover (+ equivalente touch) ---------- */
.service-card svg{ transition: filter .4s ease; }
.service-card:hover svg, .service-card.touch-glow-active svg{ filter: drop-shadow(0 0 6px rgba(201,140,107,.5)); }
.service-card{ border:1px solid transparent; transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; }
.service-card:hover, .service-card.touch-glow-active{
  box-shadow: 0 20px 44px -16px rgba(184,121,79,.3), 0 4px 14px rgba(26,26,26,.05);
  border-color: rgba(184,121,79,.22);
}

/* ---------- Halo sutil en botones al hover / tap (mobile) ---------- */
.btn-copper, .btn-outline{ transition: box-shadow .4s ease; }
.btn-copper:hover, .btn-outline:hover,
.btn-copper:active, .btn-outline:active{
  box-shadow: 0 0 0 6px rgba(184,121,79,.14);
}

/* ---------- Accesibilidad: prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .js-orbit-rotate,
  .js-flare,
  .js-particle,
  .btn-pulse,
  #wa-float .wa-pulse{
    animation: none !important;
  }
  .js-flare{ opacity:.35; }
}

/* ---------- Mascara geometrica IS (hero reveal) ---------- */
.is-mask-wrap{
  position:relative;
  overflow:hidden;
}
.is-mask-piece{
  position:absolute; inset:0;
  background:#fff;
  transform-origin: center;
  z-index:25;
}

/* ---------- Hero Diseño de Sonrisa: fusión antes/después con scroll-reveal ---------- */
.hero-fusion-cover{ z-index:10; }

/* ---------- Aro de luz cobre ---------- */
.copper-ring-svg circle{
  fill:none;
  stroke:var(--copper);
  stroke-linecap:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
}

/* ---------- Antes / Despues — scroll scrub ---------- */
.ba-frame{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 5;
  overflow:hidden;
  background:var(--ivory);
  border-radius: 2px;
}
.ba-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: center;
  user-select:none; -webkit-user-drag:none;
}
.ba-frame .ba-after{
  clip-path: inset(0 100% 0 0);
}
.ba-divider{
  position:absolute; top:0; bottom:0;
  width:2px; background:var(--copper);
  left:0%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6);
  pointer-events:none;
}
.ba-divider::after{
  content:'';
  position:absolute; top:50%; left:50%;
  width:34px; height:34px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--copper);
  background-image:
    linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-position: center;
}
.ba-badge{
  position:absolute; top:14px;
  padding:.3rem .8rem;
  font-size:.65rem; letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  border-radius:2px;
  z-index:5;
}
.ba-badge-antes{
  left:14px;
  background:rgba(26,26,26,.82);
  color:#fff;
}
.ba-badge-despues{
  right:14px;
  background:var(--copper-dark);
  color:#fff;
}

/* ---------- Reseñas: marquee infinito (nunca estático) ---------- */
.reviews-marquee-viewport{
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reviews-marquee-track{
  display:flex;
  width:max-content;
  gap:1.25rem;
  animation: reviews-marquee 46s linear infinite;
}
.reviews-marquee-viewport:hover .reviews-marquee-track,
.reviews-marquee-viewport:focus-within .reviews-marquee-track{
  animation-play-state: paused;
}
.reviews-marquee-item{ width:300px; flex-shrink:0; }
@keyframes reviews-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .reviews-marquee-track{ animation:none; }
}

/* ---------- Counter ---------- */
.counter-num{ font-variant-numeric: tabular-nums; }

/* ---------- Service card ---------- */
.service-card{
  position:relative;
  transition: transform .4s ease, box-shadow .4s ease;
}
.service-card:hover, .service-card.touch-glow-active{
  transform: translateY(-4px);
}
.service-connect-line{
  position:absolute; left:0; top:0;
  height:1.5px; width:0;
  background:var(--copper);
  transition: width .6s ease;
}
.service-card:hover .service-connect-line, .service-card.touch-glow-active .service-connect-line{ width:100%; }

/* ---------- Imagen de tarjeta de especialidad — integrada, no "pegada" (mismo lenguaje que el aro de luz del Dr. Andrés: sombra suave, elevación) ---------- */
.spec-card-image{
  position:relative;
  margin: .625rem .625rem 0;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 16px 30px -14px rgba(26,26,26,.35);
  transition: box-shadow .4s ease;
}
.service-card:hover .spec-card-image,
.service-card.touch-glow-active .spec-card-image{
  box-shadow: 0 20px 38px -12px rgba(184,121,79,.4), 0 0 0 1px rgba(184,121,79,.18);
}

/* ---------- Floating WhatsApp button ---------- */
#wa-float{
  position:fixed;
  right:20px; bottom:20px;
  z-index:1000;
}
#wa-float .wa-pulse{
  position:absolute; inset:0;
  border-radius:9999px;
  background: var(--copper);
  opacity:.55;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.5; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ---------- Modal overlays (qualifying + scarcity) ---------- */
.overlay-backdrop{
  position:fixed; inset:0;
  background:rgba(26,26,26,.45);
  backdrop-filter: blur(2px);
  z-index:1200;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.overlay-backdrop.is-open{ opacity:1; pointer-events:auto; }

.overlay-panel{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-46%);
  width:min(420px, 90vw);
  background:#fff;
  border-radius:6px;
  box-shadow: 0 30px 80px rgba(26,26,26,.25);
  z-index:1201;
  opacity:0; pointer-events:none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.overlay-panel.is-open{
  opacity:1; pointer-events:auto;
  transform:translate(-50%,-50%);
}

/* Scrollbar minimal (webkit) */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#fff; }
::-webkit-scrollbar-thumb{ background:var(--copper-light); border-radius:6px; }

/* Utility: focus ring copper */
:focus-visible{ outline:2px solid var(--copper); outline-offset:2px; }

/* ==========================================================================
   Tema oscuro premium — página Diseño de Sonrisa (servicio insignia)
   Fondo carbón + texto blanco, un nivel por encima del resto del sitio.
   ========================================================================== */
.theme-dark .nav-link{ color:#fff; }
.theme-dark #site-header.is-scrolled{
  background: rgba(26,26,26,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
@media (max-width: 1023px){
  .theme-dark #site-header{
    background: rgba(26,26,26,.92);
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
  }
}
.theme-dark .mobile-nav-bar{
  background: rgba(26,26,26,.95);
  border-top-color: rgba(255,255,255,.08);
}
.theme-dark .mobile-nav-pill{ color: rgba(255,255,255,.6); }
.theme-dark .mobile-nav-pill.is-active{ background: rgba(184,121,79,.22); color: var(--copper-light); }
.theme-dark .lang-btn{ color: rgba(255,255,255,.5); }
.theme-dark .lang-btn.is-active{ color: var(--copper-light); }
/* Más presencia del sistema de luces en esta página — sin la atenuación mobile del resto del sitio */
.theme-dark .light-layer{ opacity: 1; }
.theme-dark .faq-item{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }

/* ---------- Lang toggle ---------- */
.lang-btn{ color:var(--charcoal-soft); transition:color .25s ease; }
.lang-btn.is-active{ color:var(--copper-dark); }

/* ---------- Nav compacta mobile/tablet (reemplaza el drawer full-screen) ---------- */
.mobile-nav-bar{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(26,26,26,.08);
}
.mobile-nav-pill{
  flex: 1 1 0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:.5rem .3rem;
  border-radius:9999px;
  font-size:.68rem;
  line-height:1.15;
  font-weight:600;
  color:var(--charcoal-soft);
  transition: background-color .25s ease, color .25s ease;
}
.mobile-nav-pill.is-active{
  background:var(--copper-pale);
  color:var(--copper-dark);
}

/* Skip color-content marker for placeholders */
.placeholder-block{
  background: repeating-linear-gradient(45deg, var(--ivory), var(--ivory) 10px, #ffffff 10px, #ffffff 20px);
  border: 1px dashed var(--copper-light);
}

/* ---------- FAQ ---------- */
.faq-panel{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
.faq-trigger .faq-icon{ transition:transform .35s ease; }
.faq-item.is-open .faq-trigger .faq-icon{ transform:rotate(45deg); }

/* ---------- CTA micro-pulso ---------- */
.btn-pulse{ animation: btn-pulse 2.6s ease-in-out infinite; }
@keyframes btn-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(184,121,79,.35); }
  50%{ box-shadow:0 0 0 12px rgba(184,121,79,0); }
}

/* ---------- Textura cobre sutil ---------- */
.copper-texture-bg{
  background-image: repeating-linear-gradient(135deg, rgba(184,121,79,.06) 0px, rgba(184,121,79,.06) 1px, transparent 1px, transparent 14px);
}

@media (max-width: 767px){
  .ba-frame{ aspect-ratio: 3/4; }
}