/* ============================================================
   MYM ODONTOLOGÍA — Estilos Globales
   Requiere: variables.css cargado antes que este archivo
   ============================================================ */

/* ----------------------------------------------------------
   BODY
   ---------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size:   var(--text-base);
  color:       var(--color-text-dark);
  background-color: var(--color-bg-light);
}

/* ----------------------------------------------------------
   TIPOGRAFÍA BASE
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-display);
  color:          var(--color-text-dark);
  letter-spacing: var(--tracking-display);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl);  }
h6 { font-size: var(--text-lg);  }

p {
  font-size:   var(--text-base);
  color:       var(--color-text-body-light);
  line-height: 1.7;
}

small {
  font-size: var(--text-sm);
  color:     var(--color-text-meta-light);
}

strong {
  font-weight: 700;
}

/* Clase de firma / eslogan */
.text-signature {
  font-family:    var(--font-signature);
  letter-spacing: normal;
}

/* Texto con letra espaciada en mayúsculas */
.text-caps {
  text-transform:  uppercase;
  letter-spacing:  var(--tracking-caps);
  font-size:       var(--text-sm);
}

/* Texto dorado */
.text-gold {
  color: var(--color-gold-text);
}

/* Sobre fondos claros (blanco y beige) el dorado normal no cumple WCAG AA
   (2.85:1 sobre blanco, 2.40:1 sobre beige). Se usa una variante más oscura
   y accesible. Se excluyen las secciones oscuras, donde el dorado normal sí
   cumple (6.25:1). */
.section:not(.section--dark) .text-gold {
  color: var(--color-gold-text-on-light);
}

/* Texto sobre fondos oscuros */
.text-light {
  color: var(--color-text-light);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-muted-dark {
  color: var(--color-text-muted-dark);
}

/* ----------------------------------------------------------
   ENLACE GLOBAL
   ---------------------------------------------------------- */
a {
  color:      var(--color-accent);
  transition: color var(--transition-fast);
}

/* Excluye botones: gestionan su propio color en hover; si no,
   el texto navy del botón se volvería dorado sobre fondo dorado. */
a:not(.btn):not(.navbar__cta):hover {
  color: var(--color-accent-hover);
}

/* ----------------------------------------------------------
   LAYOUT — Contenedor
   ---------------------------------------------------------- */
.container {
  width:     100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Variante estrecha para texto corrido */
.container--narrow {
  max-width: 760px;
}

/* ----------------------------------------------------------
   LAYOUT — Secciones
   ---------------------------------------------------------- */
.section {
  padding-block: var(--space-24);
}

.section--sm {
  padding-block: var(--space-16);
}

.section--dark {
  background-color: var(--color-bg-dark);
  color:            var(--color-text-light);
}

.section--neutral {
  background-color: var(--color-bg-neutral);
  color: var(--color-text-dark);
}

/* ----------------------------------------------------------
   UTILIDADES — Espaciado (margin / padding por eje)
   ---------------------------------------------------------- */

/* Margin block (vertical) */
.mb-1  { margin-block-end: var(--space-1);  }
.mb-2  { margin-block-end: var(--space-2);  }
.mb-3  { margin-block-end: var(--space-3);  }
.mb-4  { margin-block-end: var(--space-4);  }
.mb-6  { margin-block-end: var(--space-6);  }
.mb-8  { margin-block-end: var(--space-8);  }
.mb-12 { margin-block-end: var(--space-12); }
.mb-16 { margin-block-end: var(--space-16); }

/* Gap helpers (para flex/grid) */
.gap-2  { gap: var(--space-2);  }
.gap-4  { gap: var(--space-4);  }
.gap-6  { gap: var(--space-6);  }
.gap-8  { gap: var(--space-8);  }
.gap-12 { gap: var(--space-12); }

/* ----------------------------------------------------------
   UTILIDADES — Alineación de texto
   ---------------------------------------------------------- */
.text-center { text-align: center; }
.text-left   { text-align: left;   }
.text-right  { text-align: right;  }

/* ----------------------------------------------------------
   UTILIDADES — Visibilidad accesible
   ---------------------------------------------------------- */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* ----------------------------------------------------------
   SKIP LINK — salto al contenido (accesibilidad)
   ---------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
  font-weight: 600;
  border-radius: var(--radius-pill);
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
}

.skip-link:focus-visible,
.skip-link:focus {
  transform: translateY(0);
  color: var(--color-bg-dark);
}

/* ----------------------------------------------------------
   REVEAL — fade-up al hacer scroll (lo activa animaciones.js)
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 400ms ease, transform 400ms var(--ease-out-strong);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----------------------------------------------------------
   TÁCTIL — En pantallas sin cursor, el tap dispara :hover y las
   tarjetas quedan "pegadas" en su estado elevado. Se neutraliza
   solo el MOVIMIENTO (los cambios de color son inofensivos).
   !important: estas reglas deben ganar a los hover de los CSS de
   página, que cargan después de este archivo.
   ---------------------------------------------------------- */
@media (hover: none) {
  .service-card:hover,
  .product-card:hover,
  .team-card:hover,
  .testimonial-card:hover,
  .mv-card:hover,
  .principio:hover,
  .sede-card:hover,
  .contacto-card:hover,
  .home-keypoints li:hover,
  .btn--primary:hover,
  .btn--outline:hover,
  .btn--text:hover,
  .navbar__cta:hover,
  .service-card:hover .service-card__icon,
  .service-card:hover .service-card__cta,
  .product-card:hover .product-card__icon,
  .product-card:hover .product-card__media img,
  .principio:hover .principio__num,
  .mv-card:hover .mv-card__icon,
  .whatsapp-float:hover {
    transform: none !important;
  }
}

/* ----------------------------------------------------------
   DIVIDER decorativo
   ---------------------------------------------------------- */
.divider {
  border: none;
  border-block-start: 1px solid var(--color-border-light);
  margin-block: var(--space-8);
}

.divider--dark {
  border-block-start-color: var(--color-border-dark);
}