/* OBPT Hi-fi — Brand system */

:root {
  --green: #2CF28F;
  --blue: #0D90DC;
  --ink: #00001E;
  --paper: #F2F2F2;
  --paper-dim: #d8d8d8;
  --ink-soft: #1a1a3a;
  --ink-line: rgba(242,242,242,0.12);
  --ink-line-strong: rgba(242,242,242,0.22);
  --grad: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
  --grad-soft: linear-gradient(135deg, rgba(44,242,143,0.15) 0%, rgba(13,144,220,0.15) 100%);

  --display: 'Fraunces', 'Lumen', Georgia, serif;
  --body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --density: 1;
  --accent-color: var(--green);
  --accent-bg: var(--grad);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ============== TOP NAV ============== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,30,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-line);
}
.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 32px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.nav-logo svg { width: 36px; height: 36px; }
.nav-logo .wordmark {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--paper);
}
.nav-links {
  display: flex;
  gap: 28px;
  flex: 1;
  justify-content: center;
  font-size: 14px;
  color: var(--paper);
}
.nav-links a {
  position: relative;
  padding: 4px 0;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.nav-links a:hover { opacity: 1; }
.nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.nav-login {
  font-size: 14px;
  opacity: 0.85;
  padding: 8px 12px;
}

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-bg);
  color: var(--ink);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(44,242,143,0.35);
}
.btn-flyer {
  background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
  color: var(--ink);
}
.btn-flyer:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13,144,220,0.35);
}
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--ink-line-strong);
}
.btn-ghost:hover {
  border-color: var(--green);
  color: var(--green);
}
.btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.btn-arrow::after {
  content: "›";
  font-size: 18px;
  line-height: 1;
  margin-top: -2px;
}

/* ============== LAYOUT ============== */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}
.section {
  padding: calc(80px * var(--density)) 0;
}
.section-light {
  background: var(--paper);
  color: var(--ink);
}

.eyebrow {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -1px;
  margin: 0;
  line-height: 1.05;
}
h1 { font-size: clamp(48px, 6vw, 88px); }
h2 { font-size: clamp(36px, 4.5vw, 64px); }
h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.3px; }

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  font-weight: 500;
}
.underline-wavy {
  text-decoration: underline wavy var(--green);
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}

/* ============== HERO ============== */
.hero {
  padding-top: calc(80px * var(--density));
  padding-bottom: calc(100px * var(--density));
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-copy h1 {
  margin-top: 16px;
  margin-bottom: 24px;
}
.hero-copy p {
  font-size: 18px;
  color: var(--paper);
  opacity: 0.7;
  max-width: 460px;
  margin: 0 0 32px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-meta {
  display: flex;
  gap: 32px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-line);
}
.hero-meta-item .num {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 500;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  line-height: 1;
}
.hero-meta-item .lbl {
  font-size: 12px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 6px;
  display: block;
}

/* video placeholder */
.video-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--grad);
}
.video-frame::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0,0,30,0.0) 0px,
      rgba(0,0,30,0.0) 22px,
      rgba(0,0,30,0.18) 22px,
      rgba(0,0,30,0.18) 23px
    );
}
.video-frame::after {
  content: "video loop · profesional del turismo";
  position: absolute;
  bottom: 16px; left: 16px; right: 16px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(0,0,30,0.7);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(0,0,30,0.85);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--paper);
  cursor: pointer;
  transition: transform 0.2s;
}
.play-btn:hover { transform: translate(-50%, -50%) scale(1.05); }
.play-btn svg { width: 24px; height: 24px; margin-left: 4px; }

.video-tag {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(0,0,30,0.85);
  color: var(--green);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 12px;
  border-radius: 100px;
  font-weight: 600;
  z-index: 2;
}
.video-frame::after {
  z-index: 1;
}

.hero-decoration {
  position: absolute;
  top: 100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: var(--grad);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  pointer-events: none;
}

/* ============== AL DÍA (news) ============== */
.aldia {
  background: var(--paper);
  color: var(--ink);
}
.aldia-head {
  display: flex; align-items: end;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}
.aldia-head h2 { color: var(--ink); }

.aldia-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
.news-card {
  background: var(--paper);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,30,0.08);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,30,0.08);
}
.news-card.featured {
  grid-row: span 2;
}
.news-card .img-area {
  background: var(--grad);
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.news-card.featured .img-area { aspect-ratio: 16 / 12; }
.news-card .img-area::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 16px,
      rgba(0,0,30,0.12) 16px,
      rgba(0,0,30,0.12) 17px
    );
}
.news-card .img-area .img-label {
  position: absolute;
  bottom: 12px; left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(0,0,30,0.7);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.news-card .body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.news-card.compact { flex-direction: row; }
.news-card.compact .img-area {
  width: 120px;
  aspect-ratio: auto;
  flex-shrink: 0;
}
.news-card.compact .body { padding: 16px 18px; }
.news-card .meta {
  display: flex; gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(0,0,30,0.55);
  font-weight: 600;
}
.news-card .meta .cat { color: var(--blue); }
.news-card .title {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.news-card.featured .title { font-size: 32px; }
.news-card.compact .title { font-size: 16px; }
.news-card .excerpt {
  font-size: 14px;
  color: rgba(0,0,30,0.65);
  margin: 0;
}
.aldia-side { display: flex; flex-direction: column; gap: 20px; }

/* ============== VIDRIERA (flyers IG) ============== */
.vidriera {
  background: var(--ink);
  color: var(--paper);
}
.vidriera-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}
.vidriera-head h2 { margin-top: 8px; }
.vidriera-head .subtitle {
  margin-top: 12px;
  font-size: 16px;
  color: rgba(242,242,242,0.6);
  max-width: 540px;
}
.vidriera-head .head-link {
  color: var(--green);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: color 0.2s;
}
.vidriera-head .head-link:hover { color: var(--blue); }

.vidriera-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.flyer-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flyer-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-soft);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
}
.flyer-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.flyer-thumb:hover img { transform: scale(1.03); }
.flyer-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,30,0);
  transition: background 0.25s ease;
  pointer-events: none;
}
.flyer-thumb:hover::after { background: rgba(0,0,30,0.55); }
.flyer-thumb .flyer-download-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 2;
}
.flyer-thumb:hover .flyer-download-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.flyer-thumb .flyer-download-overlay svg { width: 22px; height: 22px; }

.flyer-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--grad);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 9px;
  border-radius: 100px;
  z-index: 3;
}

.flyer-title {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.4;
  margin: 0;
}

.flyer-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  font-family: var(--body);
}
.flyer-download-btn:hover {
  border-color: var(--green);
  color: var(--green);
}
.flyer-download-btn svg { width: 14px; height: 14px; }

.vidriera-footer {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .vidriera-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============== VIDRIERA — PAQUETES DE VIAJE ============== */
.paquetes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.paquete-card {
  display: flex;
  flex-direction: column;
  background: var(--ink-soft);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.paquete-card:hover {
  transform: translateY(-6px);
  border-color: rgba(44,242,143,0.45);
  box-shadow: 0 22px 48px rgba(0,0,0,0.4);
}
.paquete-thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink);
}
.paquete-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.paquete-card:hover .paquete-thumb img { transform: scale(1.06); }
.paquete-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,30,0.55) 0%, rgba(0,0,30,0) 45%);
  pointer-events: none;
}
.paquete-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: var(--grad);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 10px;
  border-radius: 100px;
}
.paquete-precio {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 2;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 100px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
}
.paquete-precio .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
}
.paquete-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.paquete-destino {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 7px;
}
.paquete-destino svg { width: 13px; height: 13px; flex-shrink: 0; }
.paquete-title {
  font-family: var(--display);
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--paper);
  margin: 0;
}
.paquete-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(242,242,242,0.62);
  margin: 0;
  flex: 1;
}
.paquete-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.09);
}
.paquete-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(242,242,242,0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.paquete-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  transition: gap 0.2s ease, color 0.2s ease;
}
.paquete-link:hover { gap: 10px; color: var(--blue); }
.paquete-link svg { width: 15px; height: 15px; }

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

/* ---- Vidriera sobre fondo CLARO (Home) ---- */
.vidriera-light {
  background: var(--paper);
  color: var(--ink);
}
.vidriera-light .eyebrow { color: var(--ink); opacity: 0.55; }
.vidriera-light .vidriera-head h2 { color: var(--ink); }
.vidriera-light .vidriera-sub { color: rgba(0,0,30,0.6); }
.vidriera-light .btn-ghost { color: var(--ink); border-color: rgba(0,0,30,0.18); }
.vidriera-light .btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.vidriera-light .paquete-card {
  background: #fff;
  border-color: rgba(0,0,30,0.10);
}
.vidriera-light .paquete-card:hover {
  border-color: rgba(13,144,220,0.45);
  box-shadow: 0 22px 48px rgba(0,0,30,0.13);
}
.vidriera-light .paquete-thumb { background: var(--paper-dim); }
.vidriera-light .paquete-destino { color: var(--blue); }
.vidriera-light .paquete-title { color: var(--ink); }
.vidriera-light .paquete-desc { color: rgba(0,0,30,0.6); }
.vidriera-light .paquete-foot { border-top-color: rgba(0,0,30,0.10); }
.vidriera-light .paquete-meta { color: rgba(0,0,30,0.45); }
.vidriera-light .paquete-link { color: var(--blue); }
.vidriera-light .paquete-link:hover { color: var(--ink); }

/* ---- OBPT al Día sobre fondo OSCURO (Home) ---- */
.al-dia-dark {
  background: var(--ink);
  color: var(--paper);
}
.al-dia-dark .eyebrow { color: var(--paper); opacity: 0.55; }
.al-dia-dark .aldia-head h2 { color: var(--paper); }
.al-dia-dark .news-card {
  background: var(--ink-soft);
  border-color: rgba(255,255,255,0.08);
}
.al-dia-dark .news-card:hover {
  box-shadow: 0 16px 36px rgba(0,0,0,0.4);
}
.al-dia-dark .news-card .title { color: var(--paper); }
.al-dia-dark .news-card .excerpt { color: rgba(242,242,242,0.62); }
.al-dia-dark .news-card .meta { color: rgba(242,242,242,0.55); }
.al-dia-dark .news-card .meta .cat { color: var(--green); }

/* ============== MANIFESTO ============== */
.manifesto {
  text-align: center;
  position: relative;
}
.manifesto-quote {
  font-family: var(--display);
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  font-weight: 400;
  margin: 24px 0;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.manifesto-quote em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.manifesto-attr {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.5;
}
.manifesto-marks {
  font-family: var(--display);
  font-size: 180px;
  line-height: 0.5;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ============== DIRIGIDO ============== */
.dirigido {
  background: var(--paper);
  color: var(--ink);
}
.dirigido .eyebrow { color: var(--ink); opacity: 0.55; }
.dirigido h2 {
  margin-bottom: 48px;
  color: var(--ink);
}
.dirigido h2 .gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dirigido-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 20px;
  align-items: stretch;
}
.dirigido-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
  background: #ffffff;
  border: 1px solid rgba(0,0,30,0.08);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.dirigido-card:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 20px 40px -20px rgba(0,0,30,0.18);
}
.dirigido-card .img-bg {
  position: absolute; inset: 0;
  background: var(--grad);
  opacity: 0.9;
  z-index: 0;
}
.dirigido-card .img-bg::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0px,
      transparent 14px,
      rgba(0,0,30,0.18) 14px,
      rgba(0,0,30,0.18) 15px
    );
}
.dirigido-card .content {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  justify-content: space-between;
  height: 100%;
  color: var(--ink);
}
.dirigido-card.dark { background: var(--ink-soft); }
.dirigido-card.dark .content { color: var(--paper); }
.dirigido-card.yellow .img-bg { background: var(--green); opacity: 1; }
.dirigido-card.blue .img-bg { background: var(--blue); opacity: 1; }
.dirigido-card .num {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 2px;
  opacity: 0.7;
  text-transform: uppercase;
}
.dirigido-card h3 {
  font-size: 32px;
  margin-top: auto;
}
.dirigido-card p {
  font-size: 14px;
  margin: 12px 0 0;
  opacity: 0.85;
  max-width: 280px;
}
.dirigido-card .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.6;
  margin-top: 16px;
}

/* ============== ARQUITECTURA ============== */
.arq-head { margin-bottom: 48px; }
.arq-head h2 .gradient-text { display: inline-block; }
.arq-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-line-strong) transparent;
}
.arq-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 360px;
  transition: border-color 0.2s, background 0.2s;
}
.arq-card:hover {
  border-color: var(--green);
  background: rgba(44,242,143,0.04);
}
.arq-card .step {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--green);
  letter-spacing: 1.5px;
}
.arq-card .icon-area {
  height: 100px;
  background: var(--grad-soft);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(242,242,242,0.5);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: 1px dashed var(--ink-line-strong);
}
.arq-card h3 {
  font-size: 24px;
}
.arq-card p {
  font-size: 14px;
  opacity: 0.7;
  margin: 0;
  flex: 1;
}
.arq-card .link {
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============== WHATSAPP CTA ============== */
.wsp {
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  padding: 60px 0;
}
.wsp-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.wsp-inner h3 {
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -1px;
  flex: 1;
  min-width: 280px;
}

/* ============== FOOTER ============== */
.footer {
  padding: 64px 0 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--ink-line);
}
.footer-brand .nav-logo .wordmark { font-size: 28px; }
.footer-brand p {
  font-size: 14px;
  opacity: 0.6;
  margin: 16px 0 24px;
  max-width: 320px;
}
.footer-col h4 {
  font-family: var(--body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.5;
  margin: 0 0 16px;
  font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col li { font-size: 14px; opacity: 0.85; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  font-size: 12px;
  opacity: 0.5;
  flex-wrap: wrap;
  gap: 16px;
}
.socials { display: flex; gap: 12px; }
.socials a {
  width: 36px; height: 36px;
  border: 1px solid var(--ink-line-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.socials a:hover { border-color: var(--green); color: var(--green); }

/* ============== BENEFICIOS PAGE ============== */
.ben-hero {
  padding: 80px 0 60px;
}
.ben-hero h1 {
  max-width: 900px;
  margin-bottom: 24px;
}
.ben-hero p {
  font-size: 18px;
  opacity: 0.7;
  max-width: 600px;
}

.ben-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 48px 0;
}
.ben-stat {
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  padding: 24px;
}
.ben-stat .num {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 500;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.ben-stat .lbl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.6;
  margin-top: 8px;
}

.ben-featured {
  background: var(--grad);
  color: var(--ink);
  border-radius: 24px;
  padding: 48px;
  margin-bottom: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.ben-featured::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0px,
      transparent 18px,
      rgba(0,0,30,0.08) 18px,
      rgba(0,0,30,0.08) 19px
    );
  pointer-events: none;
}
.ben-featured > * { position: relative; z-index: 1; }
.ben-featured .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 12px;
}
.ben-featured h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; color: var(--ink); }
.ben-featured p { font-size: 16px; opacity: 0.8; margin: 0 0 24px; max-width: 420px; }
.ben-featured .partner-logo {
  aspect-ratio: 16/10;
  background: var(--ink);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 48px;
  color: var(--paper);
}

.ben-row {
  margin-bottom: 56px;
}
.ben-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.ben-row-head h3 {
  font-size: 28px;
  font-family: var(--display);
}
.ben-row-head .meta {
  font-size: 13px;
  opacity: 0.55;
}
.ben-row-head .see-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  display: flex; align-items: center; gap: 4px;
}
.ben-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}
.ben-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ink-line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.ben-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
}
.ben-card .logo-area {
  aspect-ratio: 16/10;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 26px;
  color: var(--ink);
  position: relative;
}
.ben-card .badge {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--ink);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
.ben-card .body {
  padding: 16px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ben-card .name {
  font-size: 15px;
  font-weight: 600;
}
.ben-card .desc {
  font-size: 12px;
  opacity: 0.6;
  flex: 1;
}
.ben-card .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
}

/* ============== UTIL ============== */
.density-compact { --density: 0.7; }
.density-airy { --density: 1.4; }

.accent-green { --accent-color: var(--green); --accent-bg: var(--green); }
.accent-green .btn-primary { color: var(--ink); }
.accent-blue { --accent-color: var(--blue); --accent-bg: var(--blue); }
.accent-blue .btn-primary { color: var(--paper); }
.accent-grad { --accent-color: var(--green); --accent-bg: var(--grad); }
.accent-grad .btn-primary { color: var(--ink); }

/* page tabs */
.page-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0,0,30,0.7);
  border: 1px solid var(--ink-line-strong);
  border-radius: 999px;
  padding: 4px;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  backdrop-filter: blur(12px);
}
.page-tab {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--paper);
  opacity: 0.7;
  transition: all 0.15s;
}
.page-tab:hover { opacity: 1; }
.page-tab.active {
  background: var(--grad);
  color: var(--ink);
  opacity: 1;
}

.page { display: none; }
.page.active { display: block; }

@media (max-width: 1180px) {
  .nav-links { gap: 18px; font-size: 13px; }
  .nav-inner { gap: 20px; padding: 14px 24px; }
}
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-mobile-toggle { display: inline-flex !important; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .aldia-grid { grid-template-columns: 1fr; }
  .dirigido-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .ben-stats { grid-template-columns: repeat(2, 1fr); }
  .ben-featured { grid-template-columns: 1fr; }
  h1 { font-size: clamp(40px, 9vw, 64px); }
  .hero-meta { gap: 18px; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .nav-login { display: none; }
}

/* ============== NAV CTA EMPHASIS ============== */
.nav-cta {
  box-shadow: 0 4px 14px rgba(44,242,143,0.28), inset 0 0 0 1px rgba(255,255,255,0.18);
}
.nav-cta:hover {
  box-shadow: 0 8px 24px rgba(44,242,143,0.45), inset 0 0 0 1px rgba(255,255,255,0.25);
}
.nav-login.btn-ghost {
  padding: 8px 14px;
  font-size: 13px;
}

/* ============== VIDRIERA — MAP SUBSECTION ============== */
.mapa {
  background: var(--ink);
  color: var(--paper);
}
.vidriera-divider {
  height: 1px;
  background: var(--ink-line);
  margin: 72px 0 56px;
}
.vidriera-map-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.vidriera-map-head h3 {
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.8px;
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 400;
}
.vidriera-map-head .map-sub {
  margin-top: 12px;
  font-size: 16px;
  color: rgba(242,242,242,0.6);
  max-width: 520px;
}

.map-search {
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ink-line-strong);
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  align-items: center;
  flex: 0 0 auto;
  min-width: 340px;
}
.map-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--paper);
  font-family: var(--body);
  font-size: 14px;
  padding: 10px 6px;
}
.map-search input::placeholder {
  color: rgba(242,242,242,0.45);
}
.map-search .btn {
  padding: 10px 20px;
  font-size: 13px;
}

.map-frame {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  background: var(--ink);
}
.map-frame svg.map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.map-legend {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(0,0,30,0.78);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ink-line-strong);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 4;
}
.map-legend .legend-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 4px;
}
.map-legend .legend-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--paper);
}
.map-legend .legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(44,242,143,0.18);
}
.map-legend .legend-dot.cluster {
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(13,144,220,0.22);
}

.map-overlay-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  background: rgba(0,0,30,0.85);
  border: 1px solid var(--ink-line-strong);
  border-radius: 10px;
  overflow: hidden;
  z-index: 4;
}
.map-overlay-controls button {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  color: var(--paper);
  font-size: 18px;
  font-weight: 600;
}
.map-overlay-controls button + button {
  border-top: 1px solid var(--ink-line-strong);
}
.map-overlay-controls button:hover { color: var(--green); }

.map-tooltip {
  position: absolute;
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12px;
  z-index: 5;
  box-shadow: 0 12px 32px rgba(0,0,30,0.45);
  min-width: 200px;
  pointer-events: none;
}
.map-tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 24px;
  width: 12px; height: 12px;
  background: var(--paper);
  transform: rotate(45deg);
}
.map-tooltip .tip-name {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}
.map-tooltip .tip-loc {
  opacity: 0.6;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'JetBrains Mono', monospace;
}

.map-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 768px) {
  .map-search { min-width: 0; width: 100%; }
  .map-frame { height: 380px; }
}

/* ============== HOME BENEFICIOS GRID ============== */
.home-ben {
  background: var(--paper);
  color: var(--ink);
}
.home-ben .eyebrow { color: var(--ink); opacity: 0.55; }
.home-ben h2 { color: var(--ink); }
.home-ben-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}
.home-ben-head .home-ben-see {
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
}
.home-ben-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.home-ben-cat-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,30,0.08);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}
.home-ben-cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 14px 32px -16px rgba(0,0,30,0.18);
}
.home-ben-cat-card .cat-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--grad-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}
.home-ben-cat-card .cat-name {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: -0.3px;
  margin: 0;
  line-height: 1.1;
}
.home-ben-cat-card .cat-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(0,0,30,0.55);
}
.home-ben-cat-card .cat-partners {
  display: flex;
  gap: 6px;
  margin-top: auto;
  flex-wrap: wrap;
}
.home-ben-cat-card .partner-chip {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper-dim);
  color: var(--ink);
  font-weight: 600;
}
.home-ben-cat-card .cat-link {
  color: var(--blue);
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.home-ben-cat-card.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: transparent;
}
.home-ben-cat-card.featured .cat-name { color: var(--paper); }
.home-ben-cat-card.featured .cat-mark {
  background: var(--grad);
  color: var(--ink);
}
.home-ben-cat-card.featured .cat-count { color: rgba(242,242,242,0.55); }
.home-ben-cat-card.featured .partner-chip {
  background: rgba(255,255,255,0.08);
  color: var(--paper);
}
.home-ben-cat-card.featured .cat-link { color: var(--green); }

@media (max-width: 1040px) {
  .home-ben-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .home-ben-grid { grid-template-columns: 1fr; }
}

/* ============== SOCIO CTA SECTION ============== */
.socio-cta {
  padding: calc(60px * var(--density)) 0;
}
.socio-cta-box {
  position: relative;
  background: var(--grad-soft);
  border: 1px solid rgba(44,242,143,0.2);
  border-radius: 28px;
  padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 72px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}
.socio-cta-box::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  background: var(--grad);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  pointer-events: none;
}
.socio-cta-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0px,
      transparent 22px,
      rgba(44,242,143,0.05) 22px,
      rgba(44,242,143,0.05) 23px
    );
  pointer-events: none;
}
.socio-cta-box > * { position: relative; z-index: 1; }
.socio-cta-box h2 {
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -1.5px;
  margin: 16px 0 20px;
  line-height: 1.0;
}
.socio-cta-box h2 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.socio-cta-box .socio-sub {
  font-size: 17px;
  opacity: 0.75;
  max-width: 460px;
  margin: 0 0 32px;
}
.socio-cta-box .socio-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.socio-cta-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 32px;
  border-left: 1px solid var(--ink-line);
}
.socio-cta-aside .aside-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
.socio-cta-aside ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.socio-cta-aside li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  opacity: 0.85;
}
.socio-cta-aside li svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--green);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .socio-cta-box { grid-template-columns: 1fr; gap: 32px; }
  .socio-cta-aside { padding-left: 0; border-left: none; border-top: 1px solid var(--ink-line); padding-top: 24px; }
}

/* ============== ARANCELES SECTION ============== */
.aranceles {
  padding: calc(60px * var(--density)) 0;
}
.aranceles-title {
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -1px;
  margin: 8px 0 40px;
}
.aranceles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.arancel-card {
  position: relative;
  background: var(--grad-soft);
  border: 1px solid rgba(44,242,143,0.2);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.arancel-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  background: var(--grad);
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  pointer-events: none;
}
.arancel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0px,
      transparent 22px,
      rgba(44,242,143,0.05) 22px,
      rgba(44,242,143,0.05) 23px
    );
  pointer-events: none;
}
.arancel-card > * { position: relative; z-index: 1; }
.arancel-card:hover {
  border-color: rgba(44,242,143,0.4);
  transform: translateY(-2px);
}
.arancel-card h3 {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
  color: #fff;
}
.arancel-precio {
  font-size: 36px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.arancel-precio small {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.6;
  color: #fff;
}
.arancel-card .btn {
  margin-top: auto;
  text-align: center;
  justify-content: center;
}
.aranceles-promo {
  background: rgba(44,242,143,0.08);
  border: 1px solid rgba(44,242,143,0.3);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 32px;
}
.aranceles-promo h3 {
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--green);
}
.aranceles-promo p {
  margin: 0;
  font-size: 16px;
  color: rgba(255,255,255,0.8);
}
.aranceles-terms {
  padding: 16px 0;
}
.terms-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
  color: rgba(255,255,255,0.75);
}
.terms-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  cursor: pointer;
}
.terms-label a {
  color: var(--green);
  text-decoration: underline;
}

/* ============== ORIGINAL ============== */
.nav-mobile-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--ink-line-strong);
  background: transparent;
  color: var(--paper);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}
.nav-mobile-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--paper);
}

/* =====================================================================
   VIDRIERA · PÁGINA INTERNA  (paquetes.php = listado, paquete.php = detalle)
   Todo scopeado con .pq- (listado) y .pd- (detalle) para no afectar el resto.
   ===================================================================== */

/* ---------- listado: hero editorial ---------- */
.pq-hero{
  position: relative; min-height: 76vh;
  display: flex; align-items: flex-end; overflow: hidden;
  color: var(--paper); background: var(--ink);
}
.pq-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); }
.pq-hero::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(0,0,30,.35) 40%, rgba(0,0,30,.15) 100%),
    linear-gradient(to right, rgba(0,0,30,.6) 0%, rgba(0,0,30,0) 60%);
}
.pq-hero .container{ position:relative; z-index:2; padding-top:64px; padding-bottom:72px; }
.pq-hero .eyebrow{ color: var(--green); opacity:1; }
.pq-hero h1{
  font-family: var(--display); font-weight:500;
  font-size: clamp(46px, 6.6vw, 100px); line-height:.98; letter-spacing:-2.5px;
  margin:14px 0 18px; text-wrap: balance;
}
.pq-hero h1 em{ font-style:italic; color: var(--green); }
.pq-hero .lead{ max-width:540px; font-size:19px; line-height:1.55; opacity:.9; margin:0 0 28px; }
.pq-hero-quick{
  display:flex; flex-wrap:wrap; gap:28px;
  font-family:'JetBrains Mono',monospace;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.18); max-width:540px;
}
.pq-hero-quick div{ display:flex; flex-direction:column; gap:3px; }
.pq-hero-quick .num{ font-family: var(--display); font-size:30px; line-height:1; }
.pq-hero-quick .lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; opacity:.65; }

/* ---------- listado: barra de filtros ---------- */
.pq-filters{
  position: sticky; top: var(--nav-h, 76px); z-index: 40;
  background: rgba(242,242,242,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,30,.10); color: var(--ink);
}
.pq-filters-inner{ display:flex; align-items:center; gap:18px 24px; flex-wrap:wrap; padding:16px 0; }
.pq-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pq-chip{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.8px; padding:8px 15px; border-radius:100px;
  border:1px solid rgba(0,0,30,.16); background:transparent; color:var(--ink);
  cursor:pointer; transition:all .16s ease;
}
.pq-chip:hover{ border-color: var(--blue); color: var(--blue); }
.pq-chip.is-active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pq-selects{ display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; align-items:center; }
.pq-select{ position:relative; }
.pq-select select{
  appearance:none; -webkit-appearance:none;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:500; color:var(--ink);
  background:#fff; border:1px solid rgba(0,0,30,.16); border-radius:100px;
  padding:9px 36px 9px 16px; cursor:pointer; transition:border-color .16s;
}
.pq-select select:hover{ border-color: var(--blue); }
.pq-select::after{
  content:''; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid rgba(0,0,30,.5);
  position:absolute; right:14px; top:50%; transform:translateY(-40%); pointer-events:none;
}
.pq-count{
  width:100%; font-family:'JetBrains Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:1px; color:rgba(0,0,30,.5); padding-bottom:14px;
}
.pq-count b{ color: var(--ink); }
.pq-reset{
  background:none; border:none; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.8px; color:var(--blue);
  text-decoration:underline; text-underline-offset:3px; margin-left:10px; display:none;
}
.pq-reset.show{ display:inline; }

/* ---------- listado: secciones / destacados / grilla ---------- */
.pq-body{ background: var(--paper); color: var(--ink); }
.pq-wrap{ padding:56px 0 80px; }
.pq-block-head{ margin-bottom:26px; }
.pq-block-head h2{ font-family:var(--display); font-weight:500; font-size:34px; letter-spacing:-1px; margin:6px 0 0; }
.pq-block-head .eyebrow{ color:var(--ink); opacity:.5; }

.pq-featured{
  display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:repeat(2,minmax(0,1fr));
  gap:18px; margin-bottom:64px; min-height:560px;
}
.feat-card{
  position:relative; overflow:hidden; border-radius:20px;
  display:flex; align-items:flex-end; color:var(--paper); text-decoration:none; isolation:isolate;
}
.feat-card.main{ grid-row:span 2; }
.feat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s ease; }
.feat-card::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(0,0,30,.86) 0%, rgba(0,0,30,.25) 55%, rgba(0,0,30,.05) 100%);
}
.feat-card:hover img{ transform:scale(1.05); }
.feat-content{ padding:28px; width:100%; }
.feat-card.main .feat-content{ padding:36px; }
.feat-region{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.4px; color:var(--ink);
  background:var(--grad); padding:5px 11px; border-radius:100px;
  position:absolute; top:18px; left:18px;
}
.feat-title{ font-family:var(--display); font-weight:500; font-size:26px; line-height:1.08; letter-spacing:-.5px; margin:0 0 6px; }
.feat-card.main .feat-title{ font-size:40px; letter-spacing:-1.2px; }
.feat-desc{ font-size:14px; line-height:1.5; opacity:.82; margin:0 0 14px; max-width:440px; }
.feat-card:not(.main) .feat-desc{ display:none; }
.feat-meta{ display:flex; align-items:center; gap:16px; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.6px; }
.feat-precio{ color: var(--green); font-weight:600; }
.feat-precio b{ font-size:15px; }
@media (max-width:860px){
  .pq-featured{ grid-template-columns:1fr; grid-template-rows:none; min-height:0; }
  .feat-card.main{ grid-row:auto; }
  .feat-card{ min-height:280px; }
  .feat-card:not(.main) .feat-desc{ display:block; }
}

.pq-region-group{ margin-top:52px; }
.pq-region-group:first-of-type{ margin-top:0; }
.pq-region-title{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--display); font-weight:500; font-size:26px; letter-spacing:-.5px;
  margin:0 0 22px; padding-bottom:14px; border-bottom:1px solid rgba(0,0,30,.10);
}
.pq-region-title .n{ font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(0,0,30,.45); letter-spacing:1px; }
.pq-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:1000px){ .pq-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pq-grid{ grid-template-columns:1fr; } }

/* extras de la card en el listado (extienden .paquete-card light) */
.paquete-fechas{
  font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--blue); display:flex; align-items:center; gap:6px; margin-top:2px;
}
.paquete-fechas svg{ width:12px; height:12px; }
.paquete-regimen{
  position:absolute; bottom:12px; left:12px; z-index:2;
  background:rgba(255,255,255,.92); color:var(--ink);
  font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600;
  text-transform:uppercase; letter-spacing:.8px; padding:5px 10px; border-radius:100px;
}
.pq-empty{ text-align:center; padding:60px 20px; font-family:'JetBrains Mono',monospace; font-size:13px; color:rgba(0,0,30,.5); display:none; }
.pq-loadmore-row{ display:flex; justify-content:center; margin-top:48px; }

.pq-cta{ background:var(--ink); color:var(--paper); padding:72px 0; }
.pq-cta-box{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.pq-cta h2{ font-family:var(--display); font-weight:500; font-size:38px; letter-spacing:-1px; margin:8px 0 0; }
.pq-cta h2 em{ font-style:italic; color:var(--green); }
.pq-cta p{ opacity:.7; margin:12px 0 0; max-width:460px; }

/* ---------- detalle: breadcrumb + título ---------- */
.pd-body{ background:var(--paper); color:var(--ink); }
.pd-crumb{
  padding:26px 0 0; font-family:'JetBrains Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:1px; color:rgba(0,0,30,.45);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.pd-crumb a{ color:rgba(0,0,30,.45); text-decoration:none; }
.pd-crumb a:hover{ color:var(--blue); }
.pd-crumb .sep{ opacity:.4; }
.pd-crumb .here{ color:var(--ink); }
.pd-head{ padding:18px 0 26px; }
.pd-head .eyebrow{ color:var(--ink); opacity:.5; }
.pd-head h1{
  font-family:var(--display); font-weight:500;
  font-size:clamp(34px,4.6vw,60px); line-height:1.02; letter-spacing:-1.5px;
  margin:8px 0 14px; max-width:16ch;
}
.pd-facts{
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  font-family:'JetBrains Mono',monospace; font-size:12px;
  text-transform:uppercase; letter-spacing:.6px; color:rgba(0,0,30,.6);
}
.pd-facts .f{ display:flex; align-items:center; gap:7px; }
.pd-facts .f i{ color:var(--blue); font-size:14px; }

/* ---------- detalle: galería ---------- */
.pd-gallery{
  display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2,1fr);
  gap:12px; height:460px; margin-bottom:18px;
}
.pd-gallery .g-item{ position:relative; overflow:hidden; border-radius:16px; cursor:pointer; background:var(--paper-dim); }
.pd-gallery .g-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.pd-gallery .g-item:hover img{ transform:scale(1.05); }
.pd-gallery .g-main{ grid-row:span 2; }
.pd-gallery .g-more{ position:relative; }
.pd-gallery .g-more .overlay{
  position:absolute; inset:0; background:rgba(0,0,30,.55);
  display:flex; align-items:center; justify-content:center; color:var(--paper);
  font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:1px; gap:8px;
}
@media (max-width:760px){
  .pd-gallery{ grid-template-columns:1fr 1fr; height:360px; }
  .pd-gallery .g-main{ grid-column:span 2; grid-row:auto; }
  .pd-gallery .g-item:nth-child(4), .pd-gallery .g-item:nth-child(5){ display:none; }
}

/* ---------- detalle: layout ---------- */
.pd-layout{ display:grid; grid-template-columns:1fr 360px; gap:56px; padding:48px 0 80px; align-items:start; }
@media (max-width:940px){ .pd-layout{ grid-template-columns:1fr; gap:40px; } }
.pd-block{ margin-bottom:44px; }
.pd-block h2{ font-family:var(--display); font-weight:500; font-size:28px; letter-spacing:-.6px; margin:0 0 18px; }
.pd-lead{ font-size:17px; line-height:1.7; color:rgba(0,0,30,.72); margin:0 0 16px; }
.pd-lead.big{ font-size:19px; color:var(--ink); }

.pd-includes{ display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
@media (max-width:560px){ .pd-includes{ grid-template-columns:1fr; } }
.pd-inc{ display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.45; color:rgba(0,0,30,.8); }
.pd-inc i{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(44,242,143,.16); color:#138a52; font-size:13px; margin-top:1px;
}
.pd-inc.no i{ background:rgba(0,0,30,.07); color:rgba(0,0,30,.45); }

.pd-itin{ position:relative; }
.pd-day{ border-bottom:1px solid rgba(0,0,30,.10); }
.pd-day-head{
  display:flex; align-items:center; gap:18px; width:100%;
  background:none; border:none; cursor:pointer; text-align:left; padding:20px 0;
  font-family:inherit; color:var(--ink);
}
.pd-day-num{
  flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:var(--blue); width:64px;
}
.pd-day-title{ font-family:var(--display); font-weight:500; font-size:20px; letter-spacing:-.3px; flex:1; }
.pd-day-chev{ color:rgba(0,0,30,.4); transition:transform .25s ease; font-size:14px; }
.pd-day.open .pd-day-chev{ transform:rotate(180deg); }
.pd-day-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.pd-day.open .pd-day-body{ max-height:240px; }
.pd-day-body p{ margin:0; padding:0 0 22px 82px; font-size:15px; line-height:1.65; color:rgba(0,0,30,.7); }
@media (max-width:560px){ .pd-day-body p{ padding-left:0; } }

/* ---------- detalle: sidebar consulta ---------- */
.pd-aside{ position:sticky; top:calc(var(--nav-h, 76px) + 24px); }
.pd-card{ background:#fff; border:1px solid rgba(0,0,30,.10); border-radius:20px; padding:28px; box-shadow:0 20px 48px rgba(0,0,30,.08); }
.pd-price-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.pd-price-row .from{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:rgba(0,0,30,.5); }
.pd-price{ font-family:var(--display); font-weight:500; font-size:40px; letter-spacing:-1px; color:var(--ink); line-height:1; }
.pd-perpax{ font-size:12.5px; color:rgba(0,0,30,.5); margin:6px 0 20px; }
.pd-spec{ display:flex; flex-direction:column; gap:0; margin-bottom:22px; }
.pd-spec .row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(0,0,30,.08); font-size:14px; }
.pd-spec .row:last-child{ border-bottom:none; }
.pd-spec .k{ color:rgba(0,0,30,.55); display:flex; align-items:center; gap:8px; }
.pd-spec .k i{ color:var(--blue); font-size:15px; }
.pd-spec .v{ font-weight:600; color:var(--ink); }
.pd-cta-btn{ width:100%; justify-content:center; font-size:15px; padding:15px; margin-bottom:10px; }
.pd-aside-note{ font-size:12.5px; line-height:1.5; color:rgba(0,0,30,.55); text-align:center; margin:14px 0 0; display:flex; align-items:center; gap:8px; justify-content:center; }
.pd-aside-note i{ color:#138a52; }

/* ---------- detalle: relacionados ---------- */
.pd-related{ background:#fff; border-top:1px solid rgba(0,0,30,.08); padding:64px 0; }
.pd-related h2{ font-family:var(--display); font-weight:500; font-size:30px; letter-spacing:-.8px; margin:0 0 26px; }
.pd-rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .pd-rel-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .pd-rel-grid{ grid-template-columns:1fr; } }