/* ══════════════════════════════════════════════════════════════
   COORDENADA VIAJES — homepage-v2.css
   Vintage boutique-travel direction, per
   00_APPROVED_REFERENCE/APPROVED_HOMEPAGE_DIRECTION_LOCKED.png.

   SCOPE: entire homepage — nav, hero, "Tu destino tiene una
   coordenada" intro, "Viajes que inspiran", Nosotros, and the
   Contacto footer. The old "Próximas salidas" trip-grid section
   was removed in the 2026-08-25 pass 3 (data/trips.json and
   js/main.js are untouched — only this homepage's presentation
   of them was removed).

   All rules here are scoped under .cv-home-v2 (loaded only on
   index.html) so nothing here can leak into quotes/pagos/cards.
   Tokens come from brand-tokens-v2.css (--cv2-*).
   ══════════════════════════════════════════════════════════════ */

.cv-home-v2 {
  --v2-nav-h: 84px;
}

/* Explicit link-state reset — belt-and-suspenders against browser
   default visited/link colors on anchors that carry no other
   color rule for a given state (e.g. :visited history). */
.cv-home-v2 a,
.cv-home-v2 a:visited {
  color: inherit;
}

/* ══════════════════════════════════════════════════════════════
   MAIN NAV — PHASE 2 (2026-08-25)
   Old cream header (cropped primary_horizontal lockup + deep-green
   pill nav) removed. This is the former "lower clean link row"
   (.intro-v2-nav) promoted to be the page's only nav, placed above
   the hero. Styling matches what that row already used — plain
   cream background, no pill, no logo/image block. The hero banner
   below remains the section's one brand moment.
   ══════════════════════════════════════════════════════════════ */
.cv-home-v2 .main-nav-v2 {
  max-width: 1220px;
  margin: 0 auto;
  padding: 24px 32px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.cv-home-v2 .main-nav-v2 a {
  font-family: var(--cv2-ui);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cv2-charcoal);
  opacity: 0.85;
}
.cv-home-v2 .main-nav-v2 a:hover { opacity: 1; }
.cv-home-v2 .main-nav-v2 .nav-v2-cta {
  color: var(--cv2-deep-green);
  border: 1px solid color-mix(in srgb, var(--cv2-gold) 75%, transparent);
  border-radius: 999px;
  padding: 10px 22px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.cv-home-v2 .main-nav-v2 .nav-v2-cta:hover {
  background: var(--cv2-deep-green);
  color: var(--cv2-gold);
}

@media (max-width: 860px) {
  .cv-home-v2 .main-nav-v2 {
    padding: 16px 20px 0;
    gap: 16px 22px;
    justify-content: center;
  }
}


/* ══════════════════════════════════════════════════════════════
   HERO — REPLACED (2026-08-25)
   Single approved panoramic banner asset (hero-panel-approved),
   centered on a cream field at its native aspect ratio. Only
   addition is the secondary slogan as live text and one CTA
   below it — nothing else layered on the asset itself.
   ══════════════════════════════════════════════════════════════ */
.cv-home-v2 .hero-v2-outer {
  background: var(--cv2-cream);
  padding: 0;
}

.cv-home-v2 .hero-v2 {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hero container: rounded corners, clean clip, one subtle gold border.
   Radius/border live on the wrapper so the image itself is never
   cropped, redrawn, or distorted — it's just clipped by the frame. */
.cv-home-v2 .hero-v2-banner {
  display: block;
  width: 100%;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--cv2-gold) 55%, transparent);
  overflow: hidden;
}
.cv-home-v2 .hero-v2-banner img {
  display: block;
  width: 100%;
  height: auto;
  /* No forced aspect-ratio here — the banner's native ratio comes
     from its own width/height attrs on the <img> in index.html, so
     it must never be hardcoded in CSS (that's what stretched the
     2026-08-25 replacement, which shipped at a different ratio than
     the asset it replaced). Rounding/clipping live on the wrapper
     above, not here, so the image is never itself distorted. */
}

@media (max-width: 860px) {
  .cv-home-v2 .hero-v2 { padding: 40px 20px 32px; }
}


/* ── Lower cream section — SIMPLIFIED (2026-08-25 pass 2) ──
   One clean CTA area only: the slogan as a standalone line, then a
   single larger "Diseña tu viaje" button. The old lockup image and
   two-column copy/photo grid are removed — the hero above already
   carries the full lockup + "Viajes que conectan" + slogan, so
   repeating it here was redundant. ── */
.cv-home-v2 .intro-v2 {
  background: var(--cv2-cream);
  padding: 24px 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cv-home-v2 .intro-v2-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cv-home-v2 .intro-v2-slogan {
  font-family: var(--cv2-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--cv2-charcoal);
  margin-bottom: 32px;
}

.cv-home-v2 .intro-v2-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--cv2-ui);
  font-size: 0.88rem;
  font-weight: bold;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cv2-gold);
  background: var(--cv2-deep-green);
  padding: 20px 44px;
  border-radius: var(--cv2-radius-md);
  transition: background 0.2s ease;
}
.cv-home-v2 .intro-v2-cta:hover { background: var(--cv2-green); }
.cv-home-v2 .intro-v2-cta svg { width: 17px; height: 17px; }

@media (max-width: 860px) {
  .cv-home-v2 .intro-v2-cta { width: 100%; justify-content: center; }
}


/* ── Viajes que inspiran — static editorial section ──────────
   Real Coordenada photography, not generated. Separate from
   "Próximas salidas" (untouched, different stylesheet/data). ── */
.cv-home-v2 .inspire-v2 {
  background: var(--cv2-cream);
  padding: 8px 0 72px;
}

.cv-home-v2 .inspire-v2-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
}

.cv-home-v2 .inspire-v2-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 36px;
}
.cv-home-v2 .inspire-v2-heading span.rule {
  width: 70px; height: 1px;
  background: var(--cv2-gold);
  opacity: 0.7;
}
.cv-home-v2 .inspire-v2-heading h2 {
  font-family: var(--cv2-ui);
  font-size: 0.76rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cv2-charcoal);
  font-weight: normal;
}

.cv-home-v2 .inspire-v2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cv-home-v2 .inspire-v2-tile {
  position: relative;
  border-radius: var(--cv2-radius-md);
  overflow: hidden;
  border: var(--cv2-border-gold);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
}
.cv-home-v2 .inspire-v2-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cv-home-v2 .inspire-v2-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cv2-deep-green) 0%, transparent) 40%, color-mix(in srgb, var(--cv2-deep-green) 85%, transparent) 100%);
}
.cv-home-v2 .inspire-v2-tile-body {
  position: relative;
  z-index: 1;
  padding: 20px;
  width: 100%;
}
.cv-home-v2 .inspire-v2-tile-title {
  font-family: var(--cv2-serif);
  color: var(--cv2-cream);
  font-size: 1.15rem;
  margin-bottom: 3px;
}
.cv-home-v2 .inspire-v2-tile-sub {
  font-family: var(--cv2-ui);
  color: color-mix(in srgb, var(--cv2-cream) 82%, transparent);
  font-size: 0.76rem;
  margin-bottom: 14px;
}
.cv-home-v2 .inspire-v2-tile-btn {
  display: inline-block;
  font-family: var(--cv2-ui);
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cv2-gold);
  border: var(--cv2-border-gold);
  border-radius: 999px;
  padding: 8px 16px;
  transition: background 0.2s ease, color 0.2s ease;
}
.cv-home-v2 .inspire-v2-tile-btn:hover {
  background: var(--cv2-gold);
  color: var(--cv2-deep-green);
}

@media (max-width: 900px) {
  .cv-home-v2 .inspire-v2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .cv-home-v2 .inspire-v2-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   NOSOTROS — RESTYLED (2026-08-25 pass 3)
   Old .section/.about-grid (style.css, shared with quotes/admin)
   replaced with homepage-v2 markup to match the cream/green/gold
   direction used above. Same heading pattern as "Viajes que
   inspiran". Copy is unchanged, just re-set in a single readable
   column instead of the old two-column about-grid.
   ══════════════════════════════════════════════════════════════ */
.cv-home-v2 .nosotros-v2 {
  background: var(--cv2-cream);
  padding: 8px 0 80px;
}

.cv-home-v2 .nosotros-v2-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

.cv-home-v2 .nosotros-v2-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 40px;
}
.cv-home-v2 .nosotros-v2-heading span.rule {
  width: 70px; height: 1px;
  background: var(--cv2-gold);
  opacity: 0.7;
}
.cv-home-v2 .nosotros-v2-heading h2 {
  font-family: var(--cv2-ui);
  font-size: 0.76rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cv2-charcoal);
  font-weight: normal;
}

.cv-home-v2 .nosotros-v2-body p {
  font-family: var(--cv2-serif);
  font-size: 1.05rem;
  color: var(--cv2-charcoal);
  opacity: 0.88;
  line-height: 1.75;
  text-align: center;
  margin-bottom: 22px;
}
.cv-home-v2 .nosotros-v2-body p:last-child { margin-bottom: 0; }
.cv-home-v2 .nosotros-v2-signoff {
  color: var(--cv2-green);
  opacity: 1;
  font-size: 1.15rem;
}
.cv-home-v2 .nosotros-v2-signoff em { font-style: italic; }


/* ══════════════════════════════════════════════════════════════
   FOOTER / CONTACTO — RESTYLED (2026-08-25 pass 3)
   Old .footer (style.css, shared with quotes/admin) replaced with
   homepage-v2 markup. Same links, same copy, deep-green field to
   close the page the way the hero/nav opened it.
   ══════════════════════════════════════════════════════════════ */
.cv-home-v2 .footer-v2 {
  background: var(--cv2-deep-green);
  padding: 72px 0 40px;
  text-align: center;
}

.cv-home-v2 .footer-v2-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
}

.cv-home-v2 .footer-v2-headline {
  font-family: var(--cv2-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  color: var(--cv2-cream);
  line-height: 1.25;
  margin-bottom: 40px;
}
.cv-home-v2 .footer-v2-headline em {
  font-style: italic;
  color: var(--cv2-gold);
}

/* ── Contact form — reuses the Eureka Web3Forms flow (see the
   handleCoordenadaFormSubmit script + form action/access_key in
   index.html); styling only is adapted to cream/green/gold. ── */
.cv-home-v2 .footer-v2-form {
  text-align: left;
  background: color-mix(in srgb, var(--cv2-cream) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--cv2-gold) 30%, transparent);
  border-radius: var(--cv2-radius-md);
  padding: 32px;
  margin-bottom: 40px;
}

.cv-home-v2 .footer-v2-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cv-home-v2 .footer-v2-form-field {
  margin-bottom: 18px;
}
.cv-home-v2 .footer-v2-form-field label {
  display: block;
  font-family: var(--cv2-ui);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cv2-cream) 75%, transparent);
  margin-bottom: 8px;
}
.cv-home-v2 .footer-v2-form-field input,
.cv-home-v2 .footer-v2-form-field textarea {
  width: 100%;
  font-family: var(--cv2-ui);
  font-size: 0.92rem;
  color: var(--cv2-cream);
  background: color-mix(in srgb, var(--cv2-cream) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cv2-gold) 35%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}
.cv-home-v2 .footer-v2-form-field input::placeholder,
.cv-home-v2 .footer-v2-form-field textarea::placeholder {
  color: color-mix(in srgb, var(--cv2-cream) 45%, transparent);
}
.cv-home-v2 .footer-v2-form-field input:focus,
.cv-home-v2 .footer-v2-form-field textarea:focus {
  outline: none;
  border-color: var(--cv2-gold);
}
.cv-home-v2 .footer-v2-form-field textarea {
  resize: vertical;
  min-height: 110px;
}

.cv-home-v2 .footer-v2-form-submit {
  display: block;
  width: 100%;
  font-family: var(--cv2-ui);
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cv2-deep-green);
  background: var(--cv2-gold);
  border: none;
  border-radius: var(--cv2-radius-md);
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.cv-home-v2 .footer-v2-form-submit:hover { background: color-mix(in srgb, var(--cv2-gold) 85%, white); }
.cv-home-v2 .footer-v2-form-submit:disabled { opacity: 0.6; cursor: default; }

.cv-home-v2 .footer-v2-form-msg {
  display: none;
  margin-top: 14px;
  font-family: var(--cv2-ui);
  font-size: 0.84rem;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
}
.cv-home-v2 .footer-v2-form-msg.ok {
  display: block;
  color: #6fd8a8;
  background: rgba(111,216,168,0.12);
  border: 1px solid rgba(111,216,168,0.35);
}
.cv-home-v2 .footer-v2-form-msg.err {
  display: block;
  color: #e88a8a;
  background: rgba(232,138,138,0.12);
  border: 1px solid rgba(232,138,138,0.35);
}

@media (max-width: 640px) {
  .cv-home-v2 .footer-v2-form { padding: 24px 20px; }
  .cv-home-v2 .footer-v2-form-row { grid-template-columns: 1fr; }
}

/* ── Secondary contact options (WhatsApp/Instagram) below the form ── */
.cv-home-v2 .footer-v2-secondary { margin-bottom: 8px; }
.cv-home-v2 .footer-v2-secondary-label {
  font-family: var(--cv2-ui);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cv2-cream) 55%, transparent);
  margin-bottom: 18px;
}

.cv-home-v2 .footer-v2-ctas {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.cv-home-v2 .footer-v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cv2-ui);
  font-size: 0.74rem;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cv2-cream);
  border: 1px solid color-mix(in srgb, var(--cv2-gold) 55%, transparent);
  border-radius: 999px;
  padding: 14px 26px;
  transition: background 0.2s ease, color 0.2s ease;
}
.cv-home-v2 .footer-v2-btn:hover {
  background: var(--cv2-gold);
  color: var(--cv2-deep-green);
}
.cv-home-v2 .footer-v2-btn-icon { width: 16px; height: 16px; flex-shrink: 0; }

.cv-home-v2 .footer-v2-micro {
  font-family: var(--cv2-ui);
  font-size: 0.76rem;
  letter-spacing: 0.5px;
  color: color-mix(in srgb, var(--cv2-cream) 70%, transparent);
  margin-bottom: 20px;
}

.cv-home-v2 .footer-v2-powered {
  display: inline-flex;
  align-items: center;
  font-family: var(--cv2-ui);
  font-size: 0.66rem;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--cv2-cream) 55%, transparent);
  transition: color 0.2s ease;
}
.cv-home-v2 .footer-v2-powered:hover {
  color: color-mix(in srgb, var(--cv2-cream) 85%, transparent);
  text-decoration: underline;
}

@media (max-width: 560px) {
  .cv-home-v2 .footer-v2-ctas { flex-direction: column; align-items: center; }
  .cv-home-v2 .footer-v2-btn { width: 100%; max-width: 340px; justify-content: center; }
}