/* ============================================================
   UYUNI ATACAMA EXPEDICIONES — hoja de estilos compartida (v3)
   Rediseño inspirado en Hidalgo Tours: base tinta/crema minimal,
   diseño flat (sin bordes redondeados en tarjetas/botones/cajas),
   tipografía editorial (Sora + Manrope), dorado como acento
   puntual en vez de color dominante.
   ============================================================ */

:root {
  --oro: #c9971f;
  --oro-suave: #e8c565;
  --ink: #15130f;
  --azul: #15130f;        /* remapeado: lo que antes era "azul" ahora usa la tinta nueva */
  --azul-oscuro: #000000;
  --oscuro: #15130f;
  --crema: #f7f3ec;
  --whatsapp: #25d366;
}

body {
  font-family: 'Manrope', sans-serif;
  color: #2b2b2b;
  background-color: var(--crema);
}
html { scroll-behavior: smooth; }

/* Garantiza que el toggle de idioma (ES/EN) oculte correctamente el bloque
   inactivo aunque una regla de la hoja fije su propio "display" (p.ej.
   .tour-tag, .btn-valles, .listB .tag) — sin esto, ambos idiomas quedan
   visibles a la vez. */
[hidden] { display: none !important; }

h1, h2, h3, .display-serif {
  font-family: 'Sora', sans-serif;
  letter-spacing: .01em;
}

/* ---------- Navbar ---------- */
.navbar.bg-dark { background-color: var(--ink) !important; }
.navbar-brand { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: .04em; font-size: 1.25rem; display: inline-flex; align-items: center; gap: 10px; }
.navbar-brand span.gold { color: var(--oro); }
.navbar-logo-icon { flex-shrink: 0; }
.nav-star {
  background: transparent;
  border: 1px solid var(--oro);
  color: var(--oro) !important;
  border-radius: 0;
  padding: 6px 16px !important;
  font-weight: 600;
  margin-left: .25rem;
  transition: all .2s;
}
.nav-star:hover, .nav-star.active { background: var(--oro); color: var(--ink) !important; }

/* Selector de idioma */
.lang-switch { display: flex; align-items: center; gap: 4px; margin-left: 1rem; }
.lang-switch button {
  background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; padding: 3px 11px; border-radius: 0;
  cursor: pointer; transition: all .2s;
}
.lang-switch button.active { background: var(--oro); border-color: var(--oro); color: var(--ink); }

/* ---------- Botón principal (estilo "DESCUBRIR TOUR") ---------- */
.btn-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--oro); color: var(--ink) !important; border: none;
  border-radius: 0; padding: 12px 26px; font-weight: 700; font-size: .85rem;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  transition: background .2s, color .2s;
}
.btn-pill:hover { background: var(--ink); color: #fff !important; }
.btn-pill i, .btn-pill svg { font-size: .8rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 90vh;
  min-height: 560px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-align: center;
  background-size: cover; background-position: center;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,7,.72) 0%, rgba(10,9,7,.35) 45%, rgba(10,9,7,.8) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero .eyebrow {
  letter-spacing: .22em; text-transform: uppercase; font-size: .78rem; font-weight: 600;
  color: var(--oro-suave); margin-bottom: 1rem;
}
.hero h1 { font-weight: 600; font-size: 3.4rem; text-shadow: 2px 2px 14px rgba(0,0,0,.5); }
.hero p.lead { text-shadow: 1px 1px 8px rgba(0,0,0,.5); font-family: 'Manrope', sans-serif; letter-spacing: .04em; }
.hero .scroll-cue {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: #fff; opacity: .8; font-size: 1.4rem; animation: bounce 2s infinite;
}
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(8px);} }

@media (max-width: 767px) {
  .hero h1 { font-size: 2.2rem; }
  .hero { height: 80vh; }
}

/* ---------- Franja de confianza ---------- */
.trust-bar { background: var(--ink); color: #fff; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); }
.trust-bar .item { display: flex; align-items: center; justify-content: center; gap: .6rem; font-size: .88rem; letter-spacing: .01em; }
.trust-bar .item i { color: var(--oro); font-size: 1.2rem; }

/* ---------- Por qué elegirnos (estilo cita editorial) ---------- */
.why-us { background: #fff; padding: 80px 0; }
.why-us blockquote {
  font-family: 'Source Serif 4', serif; font-size: 1.6rem; font-style: italic; font-weight: 400;
  line-height: 1.5; color: var(--ink); border-left: 3px solid var(--oro); padding-left: 1.5rem; margin: 0;
}
.why-us .why-item { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.1rem; }
.why-us .why-item i { color: var(--oro); font-size: 1.1rem; margin-top: 3px; }

/* ---------- Sección destacada de dos países (antes "producto estrella") ---------- */
.estrella-band {
  background: var(--ink);
  color: #fff; padding: 75px 0; position: relative; overflow: hidden;
}
.estrella-ribbon {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--oro); color: var(--oro); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .1em; padding: 6px 16px; border-radius: 0;
  margin-bottom: 1.2rem;
}
.estrella-band h2 { font-weight: 600; font-size: 2.3rem; }
.estrella-features { list-style: none; padding: 0; margin: 1.5rem 0; }
.estrella-features li { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .7rem; font-size: .95rem; }
.estrella-features li i { color: var(--oro); margin-top: 3px; }
.estrella-img-wrap { position: relative; border-radius: 0; overflow: hidden; box-shadow: 0 20px 45px rgba(0,0,0,.45); }
.estrella-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.badge-draft {
  display: inline-block; background: transparent; border: 1px solid #b02a37; color: #ff8b93; font-size: .68rem; font-weight: 700;
  padding: 3px 10px; border-radius: 0; margin-left: .5rem; text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- Categorías (estilo filtro Hidalgo) ---------- */
.route-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.5rem; }
.route-tabs span {
  border: 1px solid #d8d0c0; color: var(--ink); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; padding: 7px 16px; border-radius: 0;
}
.route-tabs span.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Cards de tours (estilo tinta oscura + borde inferior dorado) ---------- */
.card-tour {
  background: var(--ink); border: none; border-bottom: 3px solid var(--oro);
  transition: transform .25s; border-radius: 0; overflow: hidden;
}
.card-tour:hover { transform: translateY(-6px); }
.card-tour img { height: 200px; object-fit: cover; }
.card-tour .card-body { padding: 1.5rem; }
.card-tour .card-title { color: #fff; }
.tour-meta { display: flex; align-items: center; gap: .4rem; color: #a99e8a; font-size: .8rem; margin-bottom: 1rem; }
.tour-meta i { color: var(--oro); }
.tour-tag {
  display: inline-block; background: var(--oro); color: var(--ink);
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; margin-bottom: .6rem; border-radius: 0;
}
.btn-valles { background-color: var(--oro); color: var(--ink) !important; border-radius: 0; padding: 10px 24px; text-decoration: none; display: inline-block; border: none; font-weight: 700; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; }
.btn-valles:hover { background-color: var(--ink); color: #fff !important; }

/* ---------- Testimonios ---------- */
.testimonio-card { background: #fff; border: 1px solid #e7e0d2; padding: 28px; height: 100%; }
.testimonio-card .stars { color: var(--oro); margin-bottom: .6rem; }
.testimonio-card .autor { font-weight: 700; margin-top: 1rem; margin-bottom: 0; font-family: 'Sora', sans-serif; }
.testimonio-card .origen { color: #888; font-size: .85rem; }

/* ---------- Itinerarios ---------- */
.itinerary-section { padding: 60px 0; scroll-margin-top: 90px; }
.badge-day { background: var(--ink); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; margin-right: 15px; font-weight: bold; flex-shrink: 0; border: 1px solid var(--oro); }
.details-box { background: #fff; border: 1px solid #e7e0d2; border-radius: 0; padding: 25px; height: 100%; }

/* ---------- Page header (páginas internas) ---------- */
.page-header { background-color: var(--ink); color: #fff; padding: 65px 0; text-align: center; }

/* ---------- Contacto ---------- */
.contact-card { background: #fff; border-radius: 0; padding: 30px; border: 1px solid #e7e0d2; height: 100%; }
.contact-card .text-primary { color: var(--oro) !important; }
.form-control:focus, .form-select:focus { border-color: var(--oro); box-shadow: 0 0 0 0.2rem rgba(201, 151, 31, 0.2); }
.btn-enviar { background-color: var(--oro); color: var(--ink); border-radius: 0; padding: 10px 40px; border: none; font-weight: bold; text-transform: uppercase; font-size: .82rem; letter-spacing: .03em; }
.btn-enviar:hover { background-color: var(--ink); color: #fff; }

/* ---------- WhatsApp flotante ---------- */
.btn-whatsapp {
  position: fixed; bottom: 20px; left: 20px; background-color: var(--whatsapp); color: #fff;
  border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
  font-size: 30px; z-index: 1000; box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

/* ---------- Footer ---------- */
footer { background-color: var(--ink); color: #fff; padding: 55px 0 20px; }
footer h5 { font-family: 'Sora', sans-serif; }
footer a { color: #b9b2a2; text-decoration: none; }
footer a:hover { color: var(--oro); }

/* ---------- Bloques grandes CTA (heredado, sin uso actual) ---------- */
.big-block {
  position: relative; overflow: hidden; border-radius: 0; min-height: 380px;
  display: flex; align-items: flex-end; color: #fff;
  background-size: cover; background-position: center;
  text-decoration: none;
}
.big-block::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,7,.15) 0%, rgba(10,9,7,.88) 100%);
}
.big-block .big-block-body { position: relative; z-index: 2; padding: 2rem; }
.big-block h3 { font-weight: 600; font-size: 1.8rem; margin-bottom: .5rem; color: #fff; }
.big-block p { margin-bottom: 1.2rem; color: #ece7db; }

/* ---------- Carrusel de variedad (Home) ---------- */
.home-carousel { max-width: 420px; margin: 0 auto; }
.home-carousel .carousel-control-prev,
.home-carousel .carousel-control-next { width: 8%; filter: invert(0); }
.home-carousel .carousel-control-prev-icon,
.home-carousel .carousel-control-next-icon { background-color: var(--ink); border-radius: 50%; padding: 10px; background-size: 60%; }
.home-carousel .carousel-indicators [data-bs-target] { background-color: var(--ink); }

/* ---------- Explorá por destino (mosaico, Home) ---------- */
.section-tag { max-width: 1200px; margin: 0 auto 14px; padding: 0 12px; }
.section-tag span { background: var(--oro); color: var(--ink); font-family: 'Sora', sans-serif; font-weight: 800; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; padding: 6px 14px; }
.mosaic { display: grid; grid-template-columns: repeat(6,1fr); grid-template-rows: 280px 210px; gap: 3px; max-width: 1200px; margin: 0 auto 60px; padding: 0 12px; }
.tile { position: relative; overflow: hidden; color: #fff; display: flex; align-items: flex-end; text-decoration: none; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.tile:hover img { transform: scale(1.05); }
.tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.75) 100%); }
.tile-label { position: relative; z-index: 2; padding: 20px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.tile-label small { display: block; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .03em; color: var(--oro-suave); margin-top: 6px; text-transform: none; }
.tile1 { grid-column: 1/4; grid-row: 1/3; }
.tile2 { grid-column: 4/7; grid-row: 1/2; }
.tile3 { grid-column: 4/5; grid-row: 2/3; }
.tile4 { grid-column: 5/6; grid-row: 2/3; }
.tile5 { grid-column: 6/7; grid-row: 2/3; }
.tile3 .tile-label, .tile4 .tile-label, .tile5 .tile-label { font-size: .85rem; padding: 14px; }
@media (max-width: 991px) {
  .mosaic { grid-template-columns: repeat(2,1fr); grid-template-rows: none; }
  .tile1, .tile2, .tile3, .tile4, .tile5 { grid-column: auto; grid-row: auto; min-height: 220px; }
  .tile1 { grid-column: 1/3; }
}

/* ---------- Nuestra región (mapa, Home) ---------- */
.map-wrap { max-width: 900px; margin: 0 auto; padding: 0 12px; }
.map-wrap img { width: 100%; display: block; border: 1px solid #1a2530; }
.map-note { max-width: 900px; margin: 14px auto 0; padding: 0 12px; font-size: .8rem; color: #9a9284; text-align: center; }

/* ---------- Editorial alternada (Experiencias) ---------- */
.listB { display: flex; flex-direction: column; }
.listB .row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; height: 380px; }
.listB .row:nth-child(even) { direction: rtl; }
.listB .row:nth-child(even) > * { direction: ltr; }
.listB .ph { overflow: hidden; height: 100%; }
.listB .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listB .txt { background: var(--crema); padding: 36px 56px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.listB .row:nth-child(odd) .txt { background: var(--ink); }
.listB .row:nth-child(odd) .txt h3 { color: #fff; }
.listB .row:nth-child(odd) .txt .meta { color: #b9b2a2; }
.listB .row:nth-child(odd) .txt .desc { color: #c9c2b3; }
.listB .tag { display: block; background: none; padding: 0; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--oro); margin-bottom: 10px; }
.listB h3 { font-size: 1.35rem; margin-bottom: 8px; font-family: 'Sora', sans-serif; font-weight: 700; line-height: 1.2; }
.listB .meta { font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 12px; opacity: .7; }
.listB .desc { font-size: .86rem; line-height: 1.5; color: #555; margin-bottom: 14px; max-width: 460px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.listB .btn-mini { display: inline-flex; align-items: center; gap: 8px; color: var(--oro) !important; font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; width: fit-content; }
.listB .row:nth-child(even) .btn-mini { color: #a3552b !important; }
@media (max-width: 767px) {
  .listB .row { grid-template-columns: 1fr; height: auto; }
  .listB .row:nth-child(even) { direction: ltr; }
  .listB .ph { height: 240px; }
  .listB .txt { padding: 28px; }
  .listB .desc { -webkit-line-clamp: 4; }
}


/* ---------- Nosotros (Contacto) ---------- */
.team-section { background: var(--crema); padding: 60px 0 70px; }
.team-section h2 { text-align: center; margin-bottom: 14px; }
.team-section .intro { max-width: 720px; margin: 0 auto 40px; text-align: center; color: #555; font-size: .95rem; line-height: 1.6; }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 36px; max-width: 1000px; margin: 0 auto; }
.team-card { width: 160px; text-align: center; }
.team-photo { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 14px; background: var(--ink); border: 2px solid var(--oro); display: flex; align-items: center; justify-content: center; overflow: hidden; background-size: cover; background-position: center; }
.team-photo span { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.8rem; color: var(--oro); }
.team-card h6 { font-family: 'Sora', sans-serif; font-weight: 700; margin-bottom: 4px; }
.team-card .role { font-size: .74rem; color: #a3552b; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.team-card .bio { font-size: .8rem; color: #555; line-height: 1.45; }