/* ============================================
   FONT RENDERING - Best Practices 2025
   ============================================ */

/* Aplicar a todo el documento */
* {
    /* Antialiasing suave en todos los navegadores */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Optimización de renderizado de texto */
    text-rendering: optimizeLegibility;

    /* Kerning automático para mejor espaciado */
    font-kerning: auto;

    /* Mejora el renderizado en pantallas de alta densidad */
    font-synthesis: none;

    /* Ligaduras comunes */
    font-variant-ligatures: common-ligatures;
}

html {
    /* Optimización del texto en todo el documento */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* Smooth scrolling */
    scroll-behavior: smooth;
}

body {
    /* Renderizado óptimo del body */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Para pantallas de alta densidad (Retina, 4K) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Para pantallas de baja densidad */
@media (-webkit-max-device-pixel-ratio: 1) {
    * {
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* Optimización para fuentes variables */
@supports (font-variation-settings: normal) {
    body {
        font-variation-settings: normal;
    }
}

/* ============================================
   MEJORAS DE LEGIBILIDAD GLOBAL
   ============================================ */

/* Mejor separación y justificación de palabras */
p,
span,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Características OpenType */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-feature-settings:
        "liga" 1,
        "kern" 1;
    letter-spacing: -0.01em;
}

/* Texto del body */
p,
span,
small {
    font-feature-settings:
        "liga" 1,
        "kern" 1;
    letter-spacing: -0.005em;
}

/* Mejorar selección de texto */
::selection {
    background-color: var(--primary-color-opacity, rgba(201, 171, 129, 0.3));
    color: inherit;
}

::-moz-selection {
    background-color: var(--primary-color-opacity, rgba(201, 171, 129, 0.3));
    color: inherit;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    html {
        /* Evitar zoom al enfocar inputs en iOS */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Inputs con tamaño mínimo 16px para evitar zoom en iOS */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Para dispositivos con puntero táctil */
@media (hover: none) and (pointer: coarse) {
    /* Áreas táctiles más grandes (mínimo 44x44px según Apple HIG) */
    button,
    a,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================
   PERFORMANCE & ACCESSIBILITY
   ============================================ */

/* Reducir motion para usuarios con preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Alto contraste para accesibilidad */
@media (prefers-contrast: high) {
    * {
        text-shadow: none !important;
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
    }
}

/* ============================================
   FLUID TYPOGRAPHY (opcional)
   ============================================ */

/* Si quieres tipografía fluida global */
body {
    font-size: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
    line-height: 1.5;
}

h1 {
    font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.5rem, 2.5vw + 0.875rem, 2rem);
    line-height: 1.25;
}

h3 {
    font-size: clamp(1.25rem, 2vw + 0.75rem, 1.75rem);
    line-height: 1.3;
}

h4 {
    font-size: clamp(1.125rem, 1.5vw + 0.625rem, 1.5rem);
    line-height: 1.35;
}

h5 {
    font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
    line-height: 1.4;
}

small {
    font-size: clamp(0.75rem, 0.5vw + 0.625rem, 0.875rem);
    line-height: 1.4;
}