/* reset local para evitar herencias molestas */
.sitiosdeinteres,
.sitios-wrapper,
.sitios-white,
.sitios-grid,
.card-sitio,
.thumbnail {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* quitar paddings del <section> que puedan mover la guía */
.sitiosdeinteres {
    padding-left: 0;
    padding-right: 0;
}

/* CONTENEDOR PRINCIPAL: igual que Contacto */
.sitios-wrapper {
    max-width: 56.25rem; /* 900px */
    width: 100%;
    margin: 0 auto;
    padding: 0 1.25rem;         /* 20px */
    box-sizing: border-box;
}

/* GRID: 2 columnas que encajan en 996px */
.sitios-grid {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    align-items: flex-start;
}

.visit-btn {
    padding: 0.6875rem 1.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Cada tarjeta ocupa exactamente 440px */
.card-sitio {
    display: flex;
    flex-direction: column;
    align-items: center;   /* ← ESTO */
}

/* MINIATURA (proporción equivalente a la original) */
.thumbnail {
    width: 27.5rem;             /* 440px */
    height: 20.4375rem;         /* 327px */
    overflow: hidden;
    border-radius: 0.625rem;    /* 10px */
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.1); /* 4px 20px */
    position: relative;
    /* background: #fff; */
}

/* iframe escala exacta: 440 / 1200 = 0.3666666667 */
.thumbnail iframe {
    width: 75rem;               /* 1200px */
    height: 56.25rem;           /* 900px */
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transform: scale(0.3666666667);
    display: block;
}

/* BOTÓN */
.visit-btn {
    margin-top: 1.25rem;        /* 20px */
    font-family: 'Quicksand', sans-serif;
    border-radius: 0.75rem;     /* 12px */
    padding: 0.6875rem 1.5rem;  /* menos ancho */
    background: #003899;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.0625rem;       /* 17px */
    box-shadow: 0 0.25rem 0.25rem rgba(0,0,0,0.25); /* 4px */
    transition: .2s ease;
    display: inline-block;
}

.visit-btn:hover {
    background: #002b73;
    transform: translateY(-0.125rem); /* 2px */
}

/* ================= RESPONSIVE ================= */

/* tablet/1100 */
@media (max-width: 68.75rem) {   /* 1100px */
    .sitios-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;             /* 24px */
    }
}

/* tablet 1024 → tarjetas de 350px */
@media (max-width: 64rem) {      /* 1024px */
    .card-sitio { flex: 0 0 21.875rem; } /* 350px */
    .thumbnail {
        width: 21.875rem;        /* 350px */
        height: 16.25rem;        /* 260px */
    }
    .thumbnail iframe { transform: scale(0.2916666667); }
    .sitios-grid { justify-content: center; gap: 1.5rem; }
}

/* tablet 768 → tarjetas de 300px */
@media (max-width: 48rem) {      /* 768px */
    .card-sitio { flex: 0 0 18.75rem; } /* 300px */
    .thumbnail {
        width: 18.75rem;         /* 300px */
        height: 13.75rem;        /* 220px */
    }
    .thumbnail iframe { transform: scale(0.25); }
    .sitios-grid {
        gap: 1.125rem;           /* 18px */
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* móviles: tarjeta max 330 */
@media (max-width: 30rem) {      /* 480px */
    .sitios-wrapper { padding: 0 0.625rem; } /* 10px */
    .thumbnail {
        width: 100%;
        max-width: 20.625rem;    /* 330px */
        height: 13.125rem;       /* 210px */
    }
    .card-sitio {
        flex: 0 0 auto;
        width: 100%;
        max-width: 319px; /* 👈 corregido */
        height: auto;
      }
    .thumbnail iframe { transform: scale(0.275); }
    .visit-btn {
        padding: 0.625rem 4rem; /* 10px 30px */
        font-size: 0.9375rem;       /* 15px */
        width: 319px;
        font-size: 14px;
        text-align: center;
    }
    .sitios-grid {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;         /* 12px */
    }
}


/* móviles: tarjeta max 330 */
@media (max-width: 23.4375rem) {      /* 375px */
    .sitios-wrapper { padding: 0 0.625rem; } /* 10px */
    .thumbnail {
        width: 100%;
        max-width: 20.625rem;    /* 330px */
        height: 13.125rem;       /* 210px */
    }
    .card-sitio {
        flex: 0 0 auto;
        width: 100%;
        max-width: 319px; /* 👈 corregido */
        height: auto;
      }
    .thumbnail iframe { transform: scale(0.275); }
    .visit-btn {
        padding: 0.625rem 4rem; /* 10px 30px */
        font-size: 0.9375rem;       /* 15px */
        width: 319px;
        font-size: 14px;
        text-align: center;
    }
    .sitios-grid {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;         /* 12px */
    }
}