/* ============================================================
   INDEX.CSS — QariQari Homepage 2025
   ============================================================ */

/* ── Variables locales (complementan global.css) ─────────── */
:root {
    --verde-profundo: #0a2e1c;
    --verde-selva:    #1a5a3a;
    --verde-claro:    #e0f0e6;
    --naranja:        #e76f51;
    --naranja-claro:  #f4a261;
    --fondo:          #f0f0ec;
    --card:           #ffffff;
    --texto:          #1a1a1a;
    --texto-sec:      #888888;
    --borde:          #e8e8e8;
    --blanco:         #ffffff;
    --sans:           'Inter', system-ui, sans-serif;
    --serif:          'Playfair Display', Georgia, serif;
    --radio:          14px;
    --radio-lg:       20px;
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.07);
    --shadow-md:      0 6px 20px rgba(0,0,0,0.10);
    --shadow-lg:      0 12px 36px rgba(0,0,0,0.14);
    --transition:     all 0.28s ease;
    --max-w:          1200px;
}

/* ================================================================
   HERO
================================================================ */
.hero {
    position: relative;
    width: 100%;
    min-height: 720px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--verde-profundo);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 8s ease;
}

.hero:hover .hero-bg {
    transform: scale(1.04);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10,46,28,0.78) 0%,
        rgba(10,46,28,0.45) 60%,
        rgba(10,46,28,0.20) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 64px 24px;
    margin-top: auto;
    padding-bottom: 80px;
}

.hero-content h1 {
    font-family: var(--serif);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--blanco);
    line-height: 1.15;
    margin-bottom: 12px;
}

.hero-content > p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255,255,255,0.88);
    margin-bottom: 32px;
    max-width: 480px;
}

/* Barra de búsqueda en hero */
.hero-search {
    display: flex;
    align-items: center;
    background: var(--blanco);
    border-radius: 50px;
    padding: 6px 6px 6px 18px;
    max-width: 480px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.20);
    gap: 10px;
}

.hero-search i {
    color: var(--texto-sec);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.hero-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.9rem;
    font-family: var(--sans);
    color: var(--texto);
    background: transparent;
    min-width: 0;
}

.hero-search input::placeholder {
    color: var(--texto-sec);
}

.hero-search button {
    background: var(--naranja);
    color: var(--blanco);
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.hero-search button:hover {
    background: var(--verde-selva);
}

/* ================================================================
   STATS CARDS
================================================================ */
.stats-cards-section {
    background: #f0ede8;
    padding: 48px 24px;
}

.stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: var(--max-w);
    margin: 0 auto;
}

.stat-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
}

.stat-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 4px solid var(--naranja);
    flex-shrink: 0;
}

.stat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.stat-card:hover .stat-card-img img {
    transform: scale(1.05);
}

.stat-card-body {
    padding: 24px 20px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stat-card-numero {
    font-family: var(--serif);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--verde-profundo);
    line-height: 1.1;
    margin-bottom: 6px;
}

.stat-card-texto {
    font-size: 0.85rem;
    color: var(--texto-sec);
    margin-bottom: 18px;
}

.stat-card-btn {
    display: inline-block;
    background: #e8e8e3;
    color: var(--texto);
    border-radius: 50px;
    padding: 7px 20px;
    font-size: 0.8rem;
    text-decoration: none;
    transition: var(--transition);
    margin-top: auto;
}

.stat-card-btn:hover {
    background: var(--naranja);
    color: #fff;
}

/* ================================================================
   MODAL DETALLE TOUR
================================================================ */
.tour-det-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tour-det-box {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

.tour-det-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--texto-sec);
    line-height: 1;
    z-index: 1;
}
.tour-det-close:hover { color: var(--texto); }

.tour-det-head {
    padding: 28px 28px 16px;
    border-bottom: 1px solid var(--borde);
}

.tour-det-head h2 {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--texto);
    margin-bottom: 6px;
    padding-right: 32px;
}

.tour-det-precio {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--naranja);
}

/* Tabs */
.tour-det-tabs {
    display: flex;
    gap: 4px;
    padding: 16px 28px 0;
    overflow-x: auto;
}

.td-tab {
    background: none;
    border: none;
    padding: 10px 16px;
    border-radius: 10px 10px 0 0;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--texto-sec);
    white-space: nowrap;
    transition: var(--transition);
}
.td-tab.active { background: var(--verde-profundo); color: #fff; }
.td-tab:not(.active):hover { background: #f0f0ec; color: var(--texto); }

.tour-det-divider {
    height: 1px;
    background: var(--borde);
    margin: 0 28px;
}

/* Content */
.tour-det-content {
    padding: 20px 28px;
    flex: 1;
    min-height: 180px;
}

.td-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.td-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--borde);
    font-size: .875rem;
    color: var(--texto);
}
.td-list li:last-child { border-bottom: none; }

.td-icon { font-size: 1rem; flex-shrink: 0; }

/* Day navigator — stepper styles live in global.css (.td-dia-stepper / .td-dia-step / .td-dia-conn) */

/* Día header bar */
.td-dia-header {
    background: var(--verde-profundo);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Activity list */
.td-act-list {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.td-act-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #f0e8d8;
    font-size: .875rem;
    color: var(--texto);
}
.td-act-item:last-child { border-bottom: none; }

.td-act-pin { font-size: 1.1rem; flex-shrink: 0; }

/* Footer */
.tour-det-footer {
    display: flex;
    gap: 10px;
    padding: 16px 28px 24px;
    border-top: 1px solid var(--borde);
    flex-wrap: wrap;
}

.td-btn-wa, .td-btn-guia, .td-btn-cerrar {
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 50px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    border: none;
}

.td-btn-wa {
    background: #25D366;
    color: #fff;
}
.td-btn-wa:hover { background: #1ebe5c; }

.td-btn-guia {
    background: var(--verde-profundo);
    color: #fff;
}
.td-btn-guia:hover { background: var(--verde-selva); }

.td-btn-cerrar {
    background: #f0f0ec;
    color: var(--texto);
}
.td-btn-cerrar:hover { background: #e0e0d8; }

/* ================================================================
   MODAL PAÍSES
================================================================ */
.paises-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.paises-modal-box {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 32px 28px 24px;
}

.paises-continentes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.pais-cont-card {
    border: 1px solid var(--borde);
    border-radius: 14px;
    overflow: hidden;
}

.pais-cont-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--verde-profundo);
    color: #fff;
}

.pais-cont-icon { font-size: 1.8rem; line-height: 1; }

.pais-cont-header h4 {
    font-size: .9rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: #fff;
}

.pais-cont-num {
    font-size: .72rem;
    opacity: .8;
}

.pais-flags-grid {
    padding: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pais-flag-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f5f5f0;
    border-radius: 50px;
    padding: 4px 12px 4px 6px;
    cursor: default;
    transition: background 0.2s;
}
.pais-flag-item:hover { background: #e8f0eb; }

.pais-flag-emoji { font-size: 1.2rem; line-height: 1; }
.pais-flag-name  { font-size: .75rem; color: var(--texto); white-space: nowrap; }

/* ================================================================
   MODAL TOURS
================================================================ */
.tours-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tours-modal-box {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 32px 28px 24px;
}

.tours-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}

.tour-modal-card {
    border: 1px solid var(--borde);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.tour-modal-img {
    position: relative;
    height: 160px;
    background: #f0f0ec;
    overflow: hidden;
}

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

.tour-modal-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--naranja);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
}

.tour-modal-precio {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(30,30,30,.85);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 50px;
}

.tour-modal-body {
    padding: 16px;
}

.tour-modal-body h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--texto);
    margin-bottom: 6px;
    line-height: 1.3;
}

.tour-modal-desc {
    font-size: .8rem;
    color: var(--texto-sec);
    line-height: 1.5;
    margin-bottom: 10px;
}

.tour-modal-dur {
    display: inline-block;
    background: #f0f0e8;
    color: var(--texto-sec);
    font-size: .75rem;
    padding: 3px 12px;
    border-radius: 50px;
    margin-bottom: 14px;
}

.tour-modal-actions {
    display: flex;
    gap: 8px;
}

.tour-modal-btn-det,
.tour-modal-btn-res {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 12px;
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.tour-modal-btn-det {
    border: 1.5px solid var(--borde);
    color: var(--texto);
    background: #fff;
}
.tour-modal-btn-det:hover { border-color: var(--verde-profundo); color: var(--verde-profundo); }

.tour-modal-btn-res {
    background: var(--verde-profundo);
    color: #fff;
    border: none;
}
.tour-modal-btn-res:hover { background: var(--verde-selva); }

@media (max-width: 560px) {
    .tours-modal-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   MODAL GALERÍA
================================================================ */
.galeria-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.galeria-modal-box {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 32px 28px 24px;
}

.galeria-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f0f0ec;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--texto);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.galeria-modal-close:hover { background: #ddd; }

.galeria-modal-head { margin-bottom: 20px; }
.galeria-modal-head h2 { font-family: var(--serif); font-size: 1.5rem; color: var(--verde-profundo); margin-bottom: 4px; }
.galeria-modal-head p  { font-size: .875rem; color: var(--texto-sec); }

/* Filtros */
.galeria-filtros {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.galeria-filtro {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 50px;
    padding: 7px 18px;
    font-size: .82rem;
    cursor: pointer;
    transition: var(--transition);
    color: var(--texto);
}
.galeria-filtro.active,
.galeria-filtro:hover {
    background: var(--verde-profundo);
    color: #fff;
    border-color: var(--verde-profundo);
}

/* Grid */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.galeria-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: var(--verde-profundo);
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.galeria-item:hover img { transform: scale(1.07); }

.galeria-item-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: #fff;
    font-size: .72rem;
    padding: 20px 8px 8px;
    opacity: 0;
    transition: opacity 0.25s;
    line-height: 1.3;
}
.galeria-item:hover .galeria-item-caption { opacity: 1; }

/* Placeholder cuando imagen no carga */
.galeria-item.foto-error {
    display: flex;
    align-items: center;
    justify-content: center;
}
.galeria-item.foto-error::after {
    content: 'Foto';
    color: rgba(255,255,255,.6);
    font-size: 1.1rem;
    font-weight: 700;
}
.galeria-item.foto-error img { display: none; }

/* Lightbox */
.galeria-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: zoom-out;
}
.galeria-lightbox img {
    max-width: 90vw;
    max-height: 82vh;
    border-radius: 8px;
    object-fit: contain;
    display: block;
}
.galeria-lightbox p {
    color: rgba(255,255,255,.8);
    margin-top: 14px;
    font-size: .9rem;
    text-align: center;
}
.galeria-lb-close {
    position: fixed;
    top: 18px;
    right: 18px;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 640px) {
    .galeria-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   MODAL GUÍAS
================================================================ */
.guias-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.guias-modal-box {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 32px 28px 24px;
}

.guias-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f0f0ec;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--texto);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.guias-modal-close:hover { background: #ddd; }

.guias-modal-head { margin-bottom: 24px; }
.guias-modal-head h2 { font-family: var(--serif); font-size: 1.5rem; color: var(--verde-profundo); margin-bottom: 4px; }
.guias-modal-head p  { font-size: .875rem; color: var(--texto-sec); }

.guias-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.guia-modal-card {
    border: 1px solid var(--borde);
    border-radius: 14px;
    overflow: hidden;
}

.guia-modal-foto {
    position: relative;
    height: 170px;
    background: var(--verde-profundo);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.guia-modal-foto-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,46,28,.75) 40%, rgba(10,46,28,.15) 100%);
}

.guia-modal-nombre {
    position: relative;
    z-index: 1;
    color: #fff;
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 700;
    padding: 16px;
    line-height: 1.2;
}

.guia-modal-body { padding: 16px; }
.guia-modal-body h4 { font-size: .95rem; font-weight: 700; margin-bottom: 3px; }

.guia-modal-esp  { color: var(--naranja); font-size: .8rem; font-weight: 600; margin-bottom: 6px; }
.guia-modal-exp  { font-size: .8rem; color: var(--texto-sec); margin-bottom: 10px; }
.guia-modal-desc { font-size: .82rem; color: var(--texto); line-height: 1.5; margin: 10px 0; }

.guia-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.guia-tag-idioma {
    background: #e8f4ed;
    color: var(--verde-selva);
    border-radius: 50px;
    padding: 3px 12px;
    font-size: .75rem;
    font-weight: 500;
}

.guia-tag-cert {
    background: #f0faf3;
    color: #1a5a3a;
    border: 1px solid #c8e6d0;
    border-radius: 50px;
    padding: 3px 12px;
    font-size: .75rem;
}

.guias-modal-footer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-start;
}

.guias-modal-cerrar {
    background: none;
    border: 2px solid var(--borde);
    border-radius: 50px;
    padding: 9px 28px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--texto);
    transition: var(--transition);
}
.guias-modal-cerrar:hover { border-color: var(--verde-profundo); color: var(--verde-profundo); }

/* ================================================================
   ACCESOS RÁPIDOS
================================================================ */
.quick-access {
    display: flex;
    justify-content: center;
    gap: 28px;
    padding: 28px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--borde);
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.quick-access::-webkit-scrollbar { display: none; }

.quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
    transition: var(--transition);
}

.quick-item:hover {
    transform: translateY(-3px);
}

.quick-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--verde-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--verde-selva);
    transition: var(--transition);
}

.quick-item:hover .quick-icon {
    background: var(--verde-selva);
    color: var(--blanco);
}

.quick-item span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--texto);
    text-align: center;
}

/* ================================================================
   ESTADÍSTICAS
================================================================ */
.stats-bar {
    background: var(--verde-profundo);
    padding: 28px 0;
}

.stats-bar-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.stat-icon-wrap i {
    font-size: 1.4rem;
    color: var(--naranja-claro);
}

.stat-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.stat-numero {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--naranja-claro);
    font-family: var(--serif);
}

.stat-texto {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
}

/* ================================================================
   SECCIONES HOME
================================================================ */
.home-section {
    padding: 40px 0;
}

.home-container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================================================
   TOUR CARD — badge top-right + pills
================================================================ */
.badge-card {
    position: absolute;
    top: 10px;
    right: 10px;
}

.tour-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tour-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--fondo);
    color: var(--texto-sec);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--borde);
}

.tour-pill i {
    font-size: 0.65rem;
    color: var(--naranja);
}

.tour-pill-green {
    background: var(--verde-claro);
    color: var(--verde-selva);
    border-color: transparent;
}

/* ================================================================
   CARRUSEL HORIZONTAL (tours + hoteles)
================================================================ */
.scroll-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

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

.scroll-track .tour-card {
    min-width: 280px;
    max-width: 280px;
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* ================================================================
   SECCIÓN HOTELES — featured + grid
================================================================ */
.hoteles-home-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 16px;
}

.hotel-featured {
    position: relative;
    border-radius: var(--radio-lg);
    overflow: hidden;
    min-height: 300px;
    background: var(--verde-claro);
    cursor: pointer;
    grid-row: 1 / 3;
}

.hotel-featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.45s ease;
}

.hotel-featured:hover img {
    transform: scale(1.05);
}

.hotel-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,46,28,0.80) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: var(--blanco);
}

.hotel-featured-overlay .badge-popular {
    position: absolute;
    top: 14px;
    left: 14px;
}

.hotel-featured-overlay h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.hotel-featured-overlay .hotel-ubicacion {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.80);
    margin-bottom: 8px;
}

.hotel-featured-overlay .hotel-precio-overlay {
    font-size: 1rem;
    font-weight: 800;
    color: var(--naranja-claro);
}

.hoteles-small-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Hotel mini-card: image fill + overlay at bottom */
.hotel-mini-card {
    position: relative;
    border-radius: var(--radio-lg);
    overflow: hidden;
    min-height: 140px;
    background: var(--verde-claro);
    cursor: pointer;
    transition: var(--transition);
}

.hotel-mini-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.hotel-mini-card img {
    width: 100%;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.hotel-mini-card:hover img {
    transform: scale(1.06);
}

.hotel-mini-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(10,46,28,0.85) 0%, transparent 100%);
    padding: 24px 10px 10px;
    color: #fff;
}

.hotel-mini-overlay h4 {
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hotel-mini-overlay span {
    font-size: 0.68rem;
    color: var(--naranja-claro);
    font-weight: 700;
}

/* ================================================================
   RESTAURANTE LISTA (thumbnail circular + rating + flecha verde)
================================================================ */
.restaurante-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plato-item {
    background: var(--card);
    border-radius: var(--radio-lg);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--borde);
    transition: var(--transition);
    text-decoration: none;
    color: var(--texto);
}

.plato-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.plato-thumb {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--verde-claro);
    flex-shrink: 0;
    border: 3px solid var(--borde);
}

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

.plato-info {
    flex: 1;
    min-width: 0;
}

.plato-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--verde-profundo);
    margin-bottom: 4px;
}

.plato-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
}

.plato-rating i {
    color: var(--naranja-claro);
    font-size: 0.65rem;
}

.plato-rating span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--texto-sec);
    margin-left: 4px;
}

.plato-cat {
    font-size: 0.72rem;
    color: var(--texto-sec);
}

.plato-arrow-btn {
    width: 36px;
    height: 36px;
    background: var(--verde-selva);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    flex-shrink: 0;
    transition: var(--transition);
}

.plato-item:hover .plato-arrow-btn {
    background: var(--verde-profundo);
    transform: scale(1.08);
}

/* ================================================================
   TESTIMONIOS GRID
================================================================ */
.testimonios-section {
    padding: 40px 0;
    background: var(--fondo);
}

.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.testimonio-card {
    background: var(--card);
    border-radius: var(--radio-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--borde);
    transition: var(--transition);
}

.testimonio-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.testimonio-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.testimonio-header img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--verde-claro);
}

.testimonio-header strong {
    display: block;
    font-size: 0.9rem;
    color: var(--verde-profundo);
    font-weight: 700;
}

.testimonio-header span {
    font-size: 0.72rem;
    color: var(--texto-sec);
}

.testimonio-estrellas {
    color: var(--naranja-claro);
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.testimonio-estrellas i { margin-right: 1px; }

.testimonio-card > p {
    font-size: 0.84rem;
    color: #555;
    line-height: 1.6;
    font-style: italic;
}

/* ================================================================
   CTA FINAL
================================================================ */
.cta-final {
    background: linear-gradient(135deg, var(--verde-profundo) 0%, var(--verde-selva) 100%);
    border-radius: var(--radio-lg);
    padding: 56px 32px;
    text-align: center;
    margin: 40px 0;
}

.cta-final h3 {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--blanco);
    margin-bottom: 12px;
}

.cta-final p {
    color: rgba(255,255,255,0.80);
    font-size: 1rem;
    margin-bottom: 28px;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--naranja);
    color: var(--blanco);
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.btn-cta:hover {
    background: var(--naranja-claro);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(231,111,81,0.45);
}

/* ================================================================
   CONTACTO RÁPIDO (en homepage)
================================================================ */
.contacto-rapido {
    padding: 40px 0 60px;
}

.contacto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.contacto-item {
    background: var(--card);
    border-radius: var(--radio-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--borde);
    text-decoration: none;
    color: var(--texto);
    transition: var(--transition);
}

.contacto-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.contacto-item i {
    font-size: 1.4rem;
    color: var(--verde-selva);
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.contacto-item span {
    font-size: 0.85rem;
    color: var(--texto-sec);
    word-break: break-all;
}

.mapa-container {
    border-radius: var(--radio-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--borde);
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 900px) {
    .hoteles-home-grid {
        grid-template-columns: 1fr;
    }
    .hotel-featured {
        grid-row: auto;
        min-height: 240px;
    }
    .hoteles-small-stack {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .hero { min-height: 520px; }
    .hero-content h1 { font-size: 1.75rem; }
    .hero-search { max-width: 100%; }
    .quick-access { gap: 16px; justify-content: flex-start; padding: 20px 16px; }
    .quick-icon { width: 50px; height: 50px; font-size: 1.15rem; }
    .testimonios-grid { grid-template-columns: 1fr; }
    .contacto-grid { grid-template-columns: 1fr; }
    .cta-final { padding: 40px 20px; }
    .scroll-track .tour-card { min-width: 240px; max-width: 240px; }
}