/* Explain: Base reset, typography defaults, and multi-device/browser responsiveness. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--text-color);
    background: var(--background-color);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    padding-bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
    body {
        padding-bottom: 0;
    }
}

button,
a,
input {
    font: inherit;
}

a {
    text-decoration: none;
}

::selection {
    background: var(--accent-color);
    color: var(--primary-color);
}

[x-cloak] {
    display: none !important;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-heading);
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Responsividad de medios en moviles (Android e iPhone) */
img,
video,
iframe,
svg {
    max-width: 100%;
}

video {
    height: auto;
}

/* Responsividad en moviles Android y iPhone (modelos antiguos y nuevos) */
html {
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

iframe {
    width: 100%;
    border: 0;
}

@media (max-width: 380px) {
    html {
        font-size: 94%;
    }
}

/* ============================================================
   Refuerzo multi-dispositivo y multi-navegador
   (iPhone, iPadOS, Android, tablets, escritorio)
   ============================================================ */

/* Alto de viewport estable con la barra de direcciones movil */
body {
    min-height: 100vh;
}

@supports (height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}

/* Evita el destello gris al tocar en iOS/Android y elimina el retardo de clic */
a,
button,
[role="button"] {
    -webkit-tap-highlight-color: rgba(255, 87, 34, 0.15);
    touch-action: manipulation;
}

/* Desplazamiento con inercia dentro de paneles y menus en iOS */
.collapse-content,
.menu,
[class*="overflow-y-auto"],
[class*="overflow-x-auto"] {
    -webkit-overflow-scrolling: touch;
}

/* Mantiene los campos en 16px en pantallas pequenas para que
   iOS Safari no haga zoom al enfocar un formulario */
@media (max-width: 640px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }
}