/* =========================================================================
   MEDITEK · Capa de refinamiento "premium" (100% aditiva)
   No modifica styles.css ni script.js: solo añade tipografía editorial,
   textura de grano, fondo "mesh" animado, cursor personalizado, botones
   magnéticos, inclinación 3D en tarjetas y transición suave entre páginas.
   Todo respeta prefers-reduced-motion y se desactiva en pantallas táctiles.
   ========================================================================= */

/* ---------- Tipografía editorial para títulos grandes ---------- */
h1,
h2,
.section-title{
  font-family: 'Fraunces', var(--font-base);
  font-optical-sizing: auto;
}

/* ---------- Textura de grano cinematográfico (muy sutil) ---------- */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  opacity: .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>");
}

/* ---------- Fondo "mesh": manchas de gradiente a la deriva, muy lentas ---------- */
.mesh-bg{
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}
.mesh-bg span{
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .22;
  animation: meshDrift 34s ease-in-out infinite;
}
.mesh-bg span:nth-child(1){ top: -12%; left: -8%; background: var(--c-turquoise); }
.mesh-bg span:nth-child(2){ top: 38%; right: -14%; background: #4a9d93; animation-delay: -11s; animation-duration: 40s; }
.mesh-bg span:nth-child(3){ bottom: -16%; left: 18%; background: #2dd4bf; animation-delay: -22s; animation-duration: 46s; }
@keyframes meshDrift{
  0%, 100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(4%, 6%) scale(1.08); }
  66%{ transform: translate(-5%, -4%) scale(.95); }
}
@media (prefers-reduced-motion: reduce){
  .mesh-bg span{ animation: none; }
}
@media (max-width: 640px){
  .mesh-bg span{ opacity: .13; }
}

/* ---------- Cursor personalizado (solo dispositivos con puntero fino) ---------- */
html.has-custom-cursor *{ cursor: none; }
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select{ cursor: auto; }

.cursor-dot,
.cursor-ring{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}
.cursor-dot{
  width: 7px;
  height: 7px;
  background: var(--c-turquoise);
  transition: opacity .2s var(--ease);
}
.cursor-ring{
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(94,234,212,0.55);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), opacity .2s var(--ease);
}
.cursor-ring.is-hover{
  width: 54px;
  height: 54px;
  border-color: rgba(94,234,212,0.9);
  background: rgba(94,234,212,0.08);
}
.cursor-dot.is-hidden,
.cursor-ring.is-hidden{ opacity: 0; }

/* ---------- Botones magnéticos (el desplazamiento lo calcula premium.js) ---------- */
.magnetic{
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform .25s var(--ease);
}

/* ---------- Inclinación 3D sutil en tarjetas (solo puntero fino) ---------- */
@media (pointer: fine){
  .tilt-card{
    transform-style: preserve-3d;
    transition: transform .15s ease-out;
  }
}

/* ---------- Títulos que aparecen palabra por palabra ---------- */
.word-reveal .word{
  display: inline-block;
  transform: translateY(.35em);
  opacity: 0;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.word-reveal.is-visible .word{
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .word-reveal .word{ transform: none; opacity: 1; transition: none; }
}

/* ---------- Transición suave entre páginas (View Transitions API) ---------- */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: premiumFadeOut .3s var(--ease) both; }
  ::view-transition-new(root){ animation: premiumFadeIn .45s var(--ease) both; }
}
@keyframes premiumFadeOut{ to{ opacity: 0; } }
@keyframes premiumFadeIn{ from{ opacity: 0; transform: translateY(6px); } }