/**
 * Finca La Montañita - Mejoras de UI/UX y accesibilidad
 * Se carga DESPUÉS de style.min.css para poder sobreescribirlo sin tocar
 * el CSS compilado del tema original.
 */

/* 0. PALETA DE MARCA (tokens): para cambiar el color de acento o los tonos
   oscuros de todo el sitio (por temporada, rebranding, etc.) basta con
   editar estos valores. Los componentes nuevos (toolbar, subrayado del
   menú, indicador de scroll, tarjetas Expo) ya los usan; el CSS heredado
   del tema (style.min.css) sigue con sus valores fijos originales. */
:root {
    --fm-accent: #da9f5b;
    --fm-accent-dark: #a9773f;
    --fm-dark: #33211d;
    --fm-cream: #f4f1ea;
}

/* 1. ACCESIBILIDAD: enlace para saltar al contenido (usuarios de teclado / lectores de pantalla) */
.skip-link {
    position: absolute;
    top: -60px;
    left: 10px;
    background: var(--fm-dark);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    z-index: 2000;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 10px;
    color: #fff;
}

/* 2. ACCESIBILIDAD: foco visible con el color de marca en vez del azul por defecto */
a:focus-visible,
button:focus-visible,
.btn-custom:focus-visible,
.nav-link:focus-visible,
input:focus-visible,
textarea:focus-visible,
.form-control:focus {
    outline: 3px solid var(--fm-accent);
    outline-offset: 2px;
}
.form-control:focus {
    border-color: var(--fm-accent);
}

/* 3. Ajustes de scroll para anclas del menú (además del hack :target existente) */
#about, #proceso, #expo, #contacto, #footer {
    scroll-margin-top: 90px;
}

/* 4. RENDIMIENTO/COMPATIBILIDAD: background-attachment "fixed" causa parpadeos y
   bugs de renderizado en iOS/Safari y en muchos Android. Lo desactivamos en móvil. */
@media (max-width: 768px) {
    #about,
    footer.footer,
    .header-static-container {
        background-attachment: scroll !important;
    }
}

/* Respeta a quienes prefieren menos animaciones */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 5. Botones flotantes en pantallas pequeñas: la regla real vive en
   includes/header.php (ver nota ahí) porque ese bloque se imprime después
   de este archivo y con la misma especificidad le ganaba a esta, sin
   importar si el media query aplicaba. Se deja este comentario para que
   quien edite este archivo no la vuelva a duplicar aquí por error. */

/* 6. Sección de contacto: feedback y formulario */
/* El formulario ya no va sobre una tarjeta blanca: se vuelve transparente y
   toma el color del fondo de la sección (#contacto), sin blur ni borde. */
#contacto .glass-overlay {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
}
#contactoFeedback:empty {
    margin: 0;
}
#contactoFeedback .alert {
    margin-bottom: 20px;
}
#contactForm .form-control {
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid #ddd;
    font-size: 1.15rem;
}
#contactForm label {
    color: var(--fm-dark);
    font-size: 1.02rem;
}
#contactSubmit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* 7. Imágenes de galería: evita salto de layout mientras cargan (lazy loading) */
.gallery-img, .expo-card img {
    background-color: #eee;
}

/* 8. Mejor contraste del texto sobre el carrusel/hero en fondos claros */
.carousel-overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65));
}

/* 9. Modal de galería: texto de descripción (antes forzado por un script duplicado) */
#imageDescription {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 0 0 10px 10px;
    padding: 16px 20px;
    text-align: center;
}

/* 10. Modal de galería: flechas de navegación anterior/siguiente */
.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s ease;
}
.modal-nav:hover { background: rgba(218, 159, 91, 0.9); }
.modal-nav-prev { left: -18px; }
.modal-nav-next { right: -18px; }
@media (max-width: 576px) {
    .modal-nav-prev { left: 6px; }
    .modal-nav-next { right: 6px; }
}

/* 11. Mapa de ubicación en el pie de página */
.location-map-frame {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
    filter: grayscale(0.15) contrast(1.05);
}
.location-map-frame iframe { display: block; width: 100%; height: 220px; border: 0; }
.location-map-caption { font-size: 0.78rem; opacity: 0.75; margin-top: 8px; }
.link-directions {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--fm-accent); text-decoration: none; font-weight: 600; font-size: 0.85rem; margin-top: 8px;
}
.link-directions:hover { color: #fff; text-decoration: underline; }

/* 12. Sección Expo 2018: retoque de presentación como hito histórico (sin agregar contenido) */
.milestone-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(218, 159, 91, 0.12);
    color: var(--fm-accent-dark);
    border: 1px solid rgba(218, 159, 91, 0.35);
    border-radius: 50px;
    padding: 6px 18px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.milestone-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fm-accent); }

/* Un solo fondo blanco para toda la cuadrícula, en vez de una caja por foto */
.expo-grid {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 24px;
}

.expo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.expo-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.expo-card img:hover { transform: scale(1.05); filter: brightness(0.85); }
.expo-card-caption {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 6px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fm-dark);
    text-align: center;
}

/* 14. Botones de idioma (ES/EN) y tema (claro/oscuro): control segmentado en píldora */
.fm-toolbar {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    padding: 3px;
    gap: 2px;
}
.fm-toggle-btn {
    background: transparent;
    border: none;
    color: #fff;
    border-radius: 50px;
    width: 36px;
    height: 36px;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}
.fm-toggle-btn + .fm-toggle-btn { position: relative; }
.fm-toggle-btn + .fm-toggle-btn::before {
    content: "";
    position: absolute; left: -1px; top: 8px; bottom: 8px;
    width: 1px; background: rgba(255, 255, 255, 0.25);
}
.fm-toggle-btn:hover { background: var(--fm-accent); color: var(--fm-dark); }
.fm-toolbar-footer { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }

/* 15. Modo oscuro: variables y sobreescrituras puntuales sobre los fondos
   claros del sitio público. Se activa con [data-theme="dark"] en <html>. */
:root[data-theme="dark"] body { background: #1a1410; color: #e8e2da; }
:root[data-theme="dark"] #proceso,
:root[data-theme="dark"] #contacto {
    background-color: #201812 !important;
}
:root[data-theme="dark"] #expo { background-color: #17120e !important; }
:root[data-theme="dark"] #contacto .glass-overlay {
    background: transparent;
    border-color: transparent;
}
:root[data-theme="dark"] .glass-overlay {
    background: rgba(32, 24, 18, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
}
/* #about tiene su propio fondo (rgba blanca) definido con el ID en la regla
   base de includes/header.php, así que necesita esta versión con el mismo
   #about para poder ganarle en especificidad (un ID siempre le gana a
   cualquier cantidad de clases, sin importar el orden en el CSS). Fondo
   bien opaco a propósito: en modo oscuro, sobre una foto, el texto claro
   necesita un fondo sólido detrás para no perder contraste. */
:root[data-theme="dark"] #about .glass-overlay {
    background: rgba(15, 11, 8, 0.88);
    border-color: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] #about .glass-overlay { background: rgba(20, 15, 12, 0.72); }
:root[data-theme="dark"] .expo-grid {
    background: rgba(32, 24, 18, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .text-column,
:root[data-theme="dark"] .expo-card-caption,
:root[data-theme="dark"] #proceso p,
:root[data-theme="dark"] .section-title p,
:root[data-theme="dark"] .display-4,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2:not(.text-primary),
:root[data-theme="dark"] #contactForm label {
    color: #e8e2da;
}
:root[data-theme="dark"] .form-control {
    background: #241c17;
    color: #e8e2da;
    border-color: rgba(255, 255, 255, 0.15);
}
:root[data-theme="dark"] .form-control::placeholder { color: rgba(232, 226, 218, 0.45); }
:root[data-theme="dark"] .milestone-badge { background: rgba(218, 159, 91, 0.2); }
:root[data-theme="dark"] .fm-toggle-btn { border-color: rgba(255, 255, 255, 0.25); }

/* 16. Imágenes de fondo en mobile: evitar el pixelado.
   Las fotos de fondo (encabezado y las 4 de fondo.jpg reusadas en Historia
   y Pie de página) son de 1920x1080 (o similar). En escritorio eso alcanza
   de sobra, pero en celular dos cosas se combinan para exigirles mucha más
   resolución de la que tienen:
   1) La mayoría de celulares tiene pantallas de alta densidad (2x-3x), así
      que un alto visual de, por ejemplo, 700px CSS en realidad pide hasta
      2100px físicos.
   2) Contenedores como el de Historia crecen mucho por el texto (miles de
      píxeles de alto en pantallas angostas), y "background-size: cover"
      amplía la imagen entera para tapar ese alto, muy por encima de su
      resolución real.
   Encabezado: se reduce el alto del hero en mobile para exigirle menos
   resolución a la foto. Pie de página: la foto viene por estilo inline sin
   !important (se agrega en color de fondo el fallback), así que una regla
   con !important aquí sí puede ganarle; se limita a una franja fija arriba
   y el resto usa el color sólido de marca, igual que en Historia. */
@media (max-width: 768px) {
    .header-static-container { height: 70vh !important; }

    #footer {
        background-size: auto, 100% 380px !important;
        background-position: 0 0, center top !important;
        background-color: var(--fm-dark) !important; /* el shorthand "background" inline resetea el color a transparent */
    }
}