/**
 * Tokens y utilidades responsive compartidas (mobile-first).
 * Complementa Tailwind CDN; no sustituye preflight.
 */

:root {
    --mc-touch-min: 2.75rem; /* 44px */
    --mc-container-px: 1rem;
}

@media (min-width: 640px) {
    :root {
        --mc-container-px: 1.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --mc-container-px: 2rem;
    }
}

/* Tipografía fluida */
.text-hero {
    font-size: clamp(1.75rem, 5vw, 3.5rem);
    line-height: 1.1;
}

.text-section-title {
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    line-height: 1.2;
}

.text-price-lg {
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    line-height: 1.1;
}

/* Contenedor estándar (referencia) */
.mc-container {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mc-container-px);
    padding-right: var(--mc-container-px);
}

/* Reserva de espacio imágenes (CLS) */
.img-reserve-16x9 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #141414;
}

.img-reserve-card {
    position: relative;
    width: 100%;
    aspect-ratio: 640 / 400;
    overflow: hidden;
    background: #141414;
}

.img-reserve-16x9 > img,
.img-reserve-card > img,
.img-cover-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Touch targets */
.mc-touch-target {
    min-height: var(--mc-touch-min);
    min-width: var(--mc-touch-min);
}

input.mc-input-touch,
select.mc-input-touch,
button.mc-input-touch,
.mc-input-touch {
    min-height: var(--mc-touch-min);
}

/* Tabla admin: scroll horizontal con hint */
.mc-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--mc-container-px));
    margin-right: calc(-1 * var(--mc-container-px));
    padding-left: var(--mc-container-px);
    padding-right: var(--mc-container-px);
}

@media (min-width: 768px) {
    .mc-table-scroll {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Safe area móvil */
.mc-safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Evitar desbordamiento horizontal global */
html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
}