/* ============================================================
   STYLES.CSS — Estilos de la web pública
   El Bunker de las Flores
   ============================================================
   Estructura de este archivo:
     1.  Variables y reset
     2.  Tipografía
     3.  Layout base
     4.  Header y navegación
     5.  Hero
     6.  Secciones (ofertas, novedades, catálogo)
     7.  Tarjetas de producto
     8.  Indicador de múltiples fotos en tarjeta
     9.  Estado vacío
    10.  Footer
    11.  Carrusel de imágenes (página de detalle)
    12.  Animaciones de entrada
    13.  Responsive (mobile-first)
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1. VARIABLES Y RESET
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500&display=swap');

:root {
    --blanco:       #fdfcfa;
    --crema:        #f5f0eb;
    --verde:        #4a7c59;
    --verde-suave:  #e8f0ea;
    --rosa:         #d4687a;
    --rosa-suave:   #fce8ec;
    --texto:        #2c2c2c;
    --texto-suave:  #6b6b6b;
    --borde:        #e8e2db;

    --fuente-titulo: 'Playfair Display', Georgia, serif;
    --fuente-cuerpo: 'DM Sans', sans-serif;

    --gap:        1.5rem;
    --radio:      12px;
    --max-ancho:  1100px;

    --sombra-card:  0 2px 12px rgba(0,0,0,0.07);
    --sombra-hover: 0 8px 28px rgba(0,0,0,0.13);

    --transicion: 0.25s ease;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--fuente-cuerpo);
    background: var(--blanco);
    color: var(--texto);
    line-height: 1.65;
    font-size: 16px;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }


/* ════════════════════════════════════════════════════════════
   2. TIPOGRAFÍA
   ════════════════════════════════════════════════════════════ */
h1, h2, h3 {
    font-family: var(--fuente-titulo);
    line-height: 1.2;
    color: var(--texto);
}

h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
h3 { font-size: 1.05rem; font-weight: 600; }
p  { color: var(--texto-suave); }


/* ════════════════════════════════════════════════════════════
   3. LAYOUT BASE
   ════════════════════════════════════════════════════════════ */
.contenedor {
    max-width: var(--max-ancho);
    margin: 0 auto;
    padding: 0 1.25rem;
}

section { padding: 4rem 0; }

.seccion-titulo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.seccion-titulo h2 { white-space: nowrap; }

.seccion-titulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--borde);
}


/* ════════════════════════════════════════════════════════════
   4. HEADER Y NAVEGACIÓN
   ════════════════════════════════════════════════════════════ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(253, 252, 250, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--borde);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    max-width: var(--max-ancho);
    margin: 0 auto;
}

.logo {
    font-family: var(--fuente-titulo);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--verde);
    letter-spacing: -0.02em;
}

.logo span { color: var(--rosa); }

.site-nav {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

.site-nav a {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--texto-suave);
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transicion), border-color var(--transicion);
}

.site-nav a:hover {
    color: var(--verde);
    border-bottom-color: var(--verde);
}


/* ════════════════════════════════════════════════════════════
   5. HERO
   ════════════════════════════════════════════════════════════ */
.hero {
    background-color: var(--crema);
    background-image: radial-gradient(circle, #c8dcc8 1px, transparent 1px);
    background-size: 28px 28px;
    padding: 5rem 1.25rem;
    text-align: center;
}

.hero-inner {
    max-width: 640px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    background: var(--verde-suave);
    color: var(--verde);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hero h1 {
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--texto);
}

.hero h1 em {
    font-style: normal;
    color: var(--verde);
}

.hero p {
    font-size: 1.05rem;
    color: var(--texto-suave);
    max-width: 480px;
    margin: 0 auto;
}


/* ════════════════════════════════════════════════════════════
   6. SECCIONES
   ════════════════════════════════════════════════════════════ */
#ofertas { background: var(--rosa-suave); }

.badge-seccion {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-oferta { background: #fde8cc; color: #9a5a00; }
.badge-nuevo  { background: var(--verde-suave); color: var(--verde); }


/* ════════════════════════════════════════════════════════════
   7. TARJETAS DE PRODUCTO
   ════════════════════════════════════════════════════════════ */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--gap);
}

.card {
    background: white;
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-card);
    transition: transform var(--transicion), box-shadow var(--transicion);
    display: flex;
    flex-direction: column;
}

@media (hover: hover) {
    .card:hover {
        transform: translateY(-4px);
        box-shadow: var(--sombra-hover);
    }
}

.card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--crema);
    overflow: hidden;
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .card:hover .card-img-wrap img {
        transform: scale(1.04);
    }
}

.card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: var(--crema);
}

.card-badges {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.card-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    letter-spacing: 0.03em;
}

.card-badge.oferta { background: #ff6b6b; color: white; }
.card-badge.nuevo  { background: var(--verde); color: white; }

.card-info {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.card-info h3 { font-size: 1rem; color: var(--texto); }

.precio {
    font-weight: 600;
    color: var(--rosa);
    font-size: 1.05rem;
    font-family: var(--fuente-titulo);
}

.precio.consultar {
    font-size: 0.85rem;
    color: var(--texto-suave);
    font-family: var(--fuente-cuerpo);
    font-weight: 400;
}

.card-desc {
    font-size: 0.82rem;
    color: var(--texto-suave);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-ver {
    display: block;
    margin-top: auto;
    padding: 0.6rem 1rem;
    background: var(--verde);
    color: white;
    border-radius: calc(var(--radio) - 2px);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background var(--transicion), transform var(--transicion);
}

.btn-ver:hover {
    background: #3d6b4a;
    transform: translateY(-1px);
}


/* ════════════════════════════════════════════════════════════
   8. INDICADOR DE MÚLTIPLES FOTOS EN TARJETA
   ════════════════════════════════════════════════════════════
   Píldora con ícono 📷 y número que aparece en la esquina
   inferior derecha de la imagen de la tarjeta.
   Solo se genera cuando el producto tiene más de una foto.
   ════════════════════════════════════════════════════════════ */
.card-multi-img {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none; /* No interfiere con el click en la tarjeta */
}


/* ════════════════════════════════════════════════════════════
   9. ESTADO VACÍO
   ════════════════════════════════════════════════════════════ */
.empty-section {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--texto-suave);
    font-size: 0.95rem;
    background: white;
    border-radius: var(--radio);
    border: 1px dashed var(--borde);
}


/* ════════════════════════════════════════════════════════════
   10. FOOTER
   ════════════════════════════════════════════════════════════ */
.site-footer {
    background: var(--texto);
    color: rgba(255,255,255,0.7);
    padding: 3rem 1.25rem;
}

.footer-inner {
    max-width: var(--max-ancho);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.footer-brand .logo {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.footer-brand p {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Redes sociales */
.footer-redes {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.red-social {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    transition: background 0.2s, color 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.red-social:hover {
    transform: translateY(-2px);
    color: white;
}

.red-social--instagram:hover {
    background: radial-gradient(circle at 30% 107%,
        #fdf497 0%, #fdf497 5%,
        #fd5949 45%, #d6249f 60%,
        #285AEB 90%);
}

.red-social--facebook:hover {
    background: #1877f2;
}

/* Contacto */
.footer-contacto h4,
.footer-mapa h4 {
    font-family: var(--fuente-titulo);
    color: white;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #25D366;
    color: white;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s, transform 0.2s;
}

.btn-whatsapp:hover {
    background: #1da851;
    transform: translateY(-2px);
}

/* Mapa */
.mapa-wrap {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.footer-copy {
    max-width: var(--max-ancho);
    margin: 2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
    text-align: center;
}

/* ── Responsive footer ── */
@media (max-width: 767px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* ════════════════════════════════════════════════════════════
   11. CARRUSEL DE IMÁGENES — PÁGINA DE DETALLE DE PRODUCTO
   ════════════════════════════════════════════════════════════
   El carrusel generado por build.js tiene esta estructura HTML:

     .carousel
       .carousel-track
         .carousel-slide.active   ← visible
         .carousel-slide
         ...
       .carousel-btn.carousel-prev
       .carousel-btn.carousel-next
       .carousel-thumbs
         .carousel-thumb.active
         .carousel-thumb
         ...

   Solo el slide con .active es visible. El JS inline en cada
   página de producto maneja la lógica de navegación.

   Si el producto tiene una sola imagen, build.js genera solo
   un <img> directo, sin .carousel. Estos estilos no interfieren.
   ════════════════════════════════════════════════════════════ */

/* Imagen simple (producto con una sola foto) */
.producto-img-principal {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radio);
}

/* ── Contenedor principal del carrusel ── */
.carousel {
    position: relative;
    width: 100%;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--crema);
    /* Reservar espacio para las miniaturas debajo */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Track: contiene todos los slides apilados ── */
.carousel-track {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Cuadrado — consistente con las tarjetas */
    overflow: hidden;
    border-radius: var(--radio);
}

/* ── Slides individuales ── */
.carousel-slide {
    position: absolute;
    inset: 0;              /* top/right/bottom/left: 0 — cubre todo el track */
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;  /* El slide inactivo no bloquea clicks */
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder cuando no hay imagen */
.carousel-slide .producto-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    background: var(--crema);
}

/* ── Flechas de navegación ── */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Ajustar para que no queden sobre las miniaturas */
    margin-top: calc(-1 * (80px + 8px) / 2); /* mitad de (altura thumbs + gap) */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--texto);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background var(--transicion), transform var(--transicion);
    z-index: 2;
    /* Separar del borde del track */
    line-height: 1;
}

.carousel-btn:hover {
    background: white;
    transform: translateY(-50%) scale(1.08);
    margin-top: calc(-1 * (80px + 8px) / 2); /* mantener el offset */
}

.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }

/* Ocultar flechas cuando solo hay una foto (sin carrusel) */
.carousel-track:only-child ~ .carousel-btn {
    display: none;
}

/* ── Miniaturas ── */
.carousel-thumbs {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 0 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-thumbs::-webkit-scrollbar { display: none; }

.carousel-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--crema);
    padding: 0;
    cursor: pointer;
    transition: border-color var(--transicion), opacity var(--transicion);
    opacity: 0.6;
}

.carousel-thumb.active {
    border-color: var(--verde);
    opacity: 1;
}

.carousel-thumb:hover {
    opacity: 0.85;
}

.carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder de miniatura cuando no hay imagen */
.thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: var(--crema);
}


/* ════════════════════════════════════════════════════════════
   12. ANIMACIONES DE ENTRADA
   ════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card {
    animation: fadeUp 0.4s ease both;
}

.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.10s; }
.card:nth-child(3) { animation-delay: 0.15s; }
.card:nth-child(4) { animation-delay: 0.20s; }
.card:nth-child(5) { animation-delay: 0.25s; }
.card:nth-child(6) { animation-delay: 0.30s; }
.card:nth-child(7) { animation-delay: 0.35s; }
.card:nth-child(8) { animation-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
    .card { animation: none; }
    html  { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════════
   SCROLL HORIZONTAL — Secciones Ofertas y Novedades
   ════════════════════════════════════════════════════════════
   .scroll-horizontal-wrap  → oculta el overflow lateral
   .scroll-horizontal       → fila con scroll nativo en touch
   
   El "peek" (tarjeta cortada al final) indica visualmente
   que hay más contenido sin necesitar ningún texto extra.
   ════════════════════════════════════════════════════════════ */
.scroll-horizontal-wrap {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    overflow: hidden;
    position: relative;
}

.scroll-horizontal {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Padding para que la primera tarjeta no quede pegada al borde
       y para que el peek de la última sea visible */
    padding: 0.5rem 1.25rem 1rem;
}

.scroll-horizontal::-webkit-scrollbar {
    display: none;
}

.scroll-horizontal .card {
    /* Ancho fijo para que quepan ~1.8 tarjetas en mobile */
    flex: 0 0 200px;
    scroll-snap-align: start;
    /* Cancelar la animación de entrada en scroll horizontal
       para evitar que las tarjetas fuera del viewport "salten" */
    animation: none;
}

/* En desktop, las tarjetas pueden ser un poco más anchas */
@media (min-width: 768px) {
    .scroll-horizontal .card {
        flex: 0 0 240px;
    }
}

/* ════════════════════════════════════════════════════════════
   HERO — Botones sociales
   ════════════════════════════════════════════════════════════ */
.hero-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.75rem;
}

.hero-social-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.hero-social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

.hero-social-btn--whatsapp  { background: #25D366; }
.hero-social-btn--instagram {
    background: radial-gradient(circle at 30% 107%,
        #fdf497 0%, #fdf497 5%,
        #fd5949 45%, #d6249f 60%,
        #285AEB 90%);
}
.hero-social-btn--facebook  { background: #1877f2; }
.hero-social-btn--maps      { background: #EA4335; }


/* ════════════════════════════════════════════════════════════
   SCROLL HORIZONTAL — Wrapper con flechas (desktop)
   ════════════════════════════════════════════════════════════ */

/* Flechas prev/next — solo visibles en desktop (hover device) */
.scroll-nav-btn {
    display: none; /* oculto por defecto */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid var(--borde);
    box-shadow: 0 2px 12px rgba(0,0,0,0.13);
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--texto);
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    /* Compensar el margin negativo del scroll-horizontal-wrap */
    margin-top: 0;
}

.scroll-nav-btn--prev { left: 4px; }
.scroll-nav-btn--next { right: 4px; }

.scroll-nav-btn:hover {
    background: var(--verde-suave);
    border-color: var(--verde);
    color: var(--verde);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transform: translateY(-50%) scale(1.08);
}

/* Deshabilitado cuando no hay más scroll en esa dirección */
.scroll-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
    transform: translateY(-50%);
    background: white;
    border-color: var(--borde);
    color: var(--texto);
    box-shadow: none;
}

@media (hover: hover) and (min-width: 768px) {
    .scroll-nav-btn { display: flex; }
}


/* ════════════════════════════════════════════════════════════
   SCROLL HINT — Toast "deslizá para ver más"
   ════════════════════════════════════════════════════════════ */
.scroll-hint {
    position: absolute;
    right: 1.25rem;
    bottom: 1.5rem;
    background: rgba(30, 30, 30, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem 0.4rem 0.65rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    pointer-events: none;
    white-space: nowrap;
    /* Animación: aparece, espera, desaparece */
    animation: hintLifecycle 2.8s ease forwards;
    z-index: 5;
}

.scroll-hint::before {
    content: '👆';
    font-size: 0.9rem;
    animation: hintFingerSlide 0.9s ease-in-out infinite alternate;
    display: inline-block;
}

@keyframes hintFingerSlide {
    from { transform: translateX(0); }
    to   { transform: translateX(5px); }
}

@keyframes hintLifecycle {
    0%   { opacity: 0; transform: translateY(6px); }
    12%  { opacity: 1; transform: translateY(0); }
    72%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(4px); }
}

/* El hint solo tiene sentido en touch (mobile) */
@media (hover: hover) {
    .scroll-hint { display: none; }
}

/* ════════════════════════════════════════════════════════════
   13. RESPONSIVE — Mobile first
   ════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    .site-nav { display: flex; }

    .hero { padding: 7rem 1.25rem; }

    .footer-inner { grid-template-columns: 1fr 1fr; }

    /* Miniaturas del carrusel más grandes en desktop */
    .carousel-thumb {
        width: 68px;
        height: 68px;
    }
}

@media (max-width: 767px) {

    .site-nav {
        display: flex;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .site-nav::-webkit-scrollbar { display: none; }

    .site-nav a {
        white-space: nowrap;
        padding: 0.25rem 0.75rem;
        font-size: 0.8rem;
    }

    section { padding: 2.5rem 0; }

    .hero { padding: 3rem 1.25rem; }

    .footer-inner { grid-template-columns: 1fr; }

    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .card-info { padding: 0.75rem; }

    /* En mobile, las flechas del carrusel son más pequeñas */
    .carousel-btn {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
}