/*!
 * Río Lagartos Tours — Landing CSS
 * Build = colors_and_type.css + components.css + landing.css del design system.
 * Todo encapsulado bajo .rle-root para no contaminar el tema.
 */

/* ============================================================
   TOKENS: COLOR + TYPE
   ============================================================ */

/* ---------- Webfonts (locales bajo assets/fonts/) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Lora-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Lora-Italic.woff2') format('woff2');
}

:root,
.rle-root {
  /* ---------- COLOR ---------- */
  --rle-ink:         #0b1f17;
  --rle-ink-soft:    #1f3a2b;
  --rle-muted:       #6b7280;
  --rle-paper:       #ffffff;
  --rle-paper-2:     #f8fafc;
  --rle-surface-soft:rgba(11, 31, 23, .04);
  --rle-border:      rgba(11, 31, 23, .1);

  --rle-primary:     #15803d;
  --rle-primary-dark:#14532d;

  --rle-accent:      #f59e0b;
  --rle-gold:        #caa55d;
  --rle-hero-italic: #fde68a;

  --rle-accent-cool: #0ea5e9;
  --rle-pesca-bg:    rgba(139, 187, 217, .92);
  --rle-eco-bg:      rgba(83, 89, 37, .92);

  --rle-google-blue: #4285F4;
  --rle-google-green:#34A853;
  --rle-google-yellow:#FBBC05;
  --rle-google-red:  #EA4335;
  --rle-tripadvisor: #00aa6c;
  --rle-whatsapp:    #25d366;
  --rle-whatsapp-dk: #1ebe5b;

  --rle-hero-veil: linear-gradient(
    180deg,
    rgba(8, 22, 16, .55) 0%,
    rgba(8, 22, 16, .15) 25%,
    rgba(8, 22, 16, .15) 55%,
    rgba(8, 22, 16, .80) 100%
  );

  /* ---------- RADII ---------- */
  --rle-radius:    1.25rem;
  --rle-radius-sm: .875rem;
  --rle-radius-lg: 1.75rem;
  --rle-radius-btn: 12px;
  --rle-radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --rle-shadow:    0 2px 4px  rgba(11, 31, 23, .10), 0 36px 64px -22px rgba(11, 31, 23, .38);
  --rle-shadow-sm: 0 1px 2px  rgba(11, 31, 23, .08), 0 14px 28px -10px rgba(11, 31, 23, .28);
  --rle-shadow-cta-primary: 0 2px 4px rgba(20, 83, 45, .25),  0 18px 36px -10px rgba(21, 128, 61, .55);
  --rle-shadow-cta-accent:  0 2px 4px rgba(214, 110, 0, .25), 0 18px 36px -10px rgba(245, 158, 11, .60);

  /* ---------- SPACING ---------- */
  --rle-space-section-y: clamp(80px, 10vw, 140px);
  --rle-space-section-y-tight: clamp(60px, 8vw, 100px);
  --rle-container:       min(1280px, calc(100% - 40px));
  --rle-container-narrow:min(1180px, calc(100% - 32px));

  /* ---------- MOTION ---------- */
  --rle-ease:         cubic-bezier(.2, .7, .2, 1);
  --rle-ease-elastic: cubic-bezier(.34, 1.56, .64, 1);
  --rle-dur-fast:   .25s;
  --rle-dur:        .35s;
  --rle-dur-slow:   .7s;

  /* ---------- TYPE FAMILIES ---------- */
  --rle-font:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rle-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --rle-serif:   'Lora', Georgia, 'Times New Roman', serif;

  /* ---------- TYPE SCALE ---------- */
  --rle-fs-display: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  --rle-fs-hero:    clamp(30px,    5vw,    68px);
  --rle-fs-h1:      clamp(1.5rem,  1.05rem + 2.4vw, 3rem);
  --rle-fs-h2:      clamp(28px,    4.4vw,  48px);
  --rle-fs-h3:      clamp(20px,    1.9vw,  26px);
  --rle-fs-lead:    clamp(15px,    1.4vw,  18px);
  --rle-fs-body:    15px;
  --rle-fs-small:   13.5px;
  --rle-fs-meta:    11px;
  --rle-fs-stats:   clamp(32px, 4vw, 48px);

  /* ---------- LETTER-SPACING ---------- */
  --rle-tracking-hero:    -0.025em;
  --rle-tracking-display: -0.01em;
  --rle-tracking-eyebrow: 0.28em;
  --rle-tracking-meta:    0.14em;
  --rle-tracking-badge:   0.18em;

  /* ---------- LINE-HEIGHTS ---------- */
  --rle-lh-tight:  1;
  --rle-lh-title:  1.1;
  --rle-lh-card:   1.15;
  --rle-lh-body:   1.55;
  --rle-lh-prose:  1.7;
}

/* SEMANTIC TYPE */
.rle-root .rle-h1,
.rle-root h1:not(.rle-hero__sub) {
  font-family: var(--rle-display);
  font-weight: 600;
  font-size: var(--rle-fs-display);
  line-height: var(--rle-lh-tight);
  letter-spacing: var(--rle-tracking-hero);
  color: var(--rle-ink);
  margin: 0;
  text-wrap: balance;
}

.rle-root .rle-h2,
.rle-root h2 {
  font-family: var(--rle-display);
  font-weight: 600;
  font-size: var(--rle-fs-h2);
  line-height: var(--rle-lh-title);
  letter-spacing: var(--rle-tracking-hero);
  color: var(--rle-ink);
  margin: 0 0 18px;
}

.rle-root .rle-h3,
.rle-root h3 {
  font-family: var(--rle-display);
  font-weight: 600;
  font-size: var(--rle-fs-h3);
  line-height: var(--rle-lh-card);
  letter-spacing: var(--rle-tracking-display);
  color: var(--rle-ink);
  margin: 0 0 8px;
}

.rle-root .rle-eyebrow {
  display: inline-block;
  font-family: var(--rle-font);
  font-weight: 600;
  font-size: var(--rle-fs-meta);
  line-height: 1;
  letter-spacing: var(--rle-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rle-primary);
  padding-left: 32px;
  position: relative;
}
.rle-root .rle-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background: currentColor;
}
.rle-root .rle-eyebrow--light  { color: var(--rle-hero-italic); }
.rle-root .rle-eyebrow--inline { padding-left: 0; }
.rle-root .rle-eyebrow--inline::before { display: none; }

.rle-root .rle-lead {
  font-family: var(--rle-font);
  font-size: var(--rle-fs-lead);
  line-height: var(--rle-lh-prose);
  color: var(--rle-muted);
  max-width: 580px;
  margin: 0;
}

.rle-root .rle-body {
  font-family: var(--rle-font);
  font-size: var(--rle-fs-body);
  line-height: var(--rle-lh-body);
  color: var(--rle-ink-soft);
  margin: 0;
}

.rle-root .rle-meta {
  font-family: var(--rle-font);
  font-weight: 600;
  font-size: var(--rle-fs-meta);
  letter-spacing: var(--rle-tracking-meta);
  text-transform: uppercase;
  color: rgba(11, 32, 20, .55);
}

.rle-root .rle-price {
  font-family: var(--rle-font);
  font-weight: 700;
  font-size: 18px;
  color: var(--rle-ink);
  letter-spacing: -0.01em;
}

.rle-root .rle-stat {
  font-family: var(--rle-display);
  font-size: var(--rle-fs-stats);
  line-height: 1;
  color: var(--rle-gold);
}

.rle-root .rle-italic-accent {
  font-style: italic;
  color: var(--rle-hero-italic);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

.rle-root .rle-ticker-text {
  font: 600 13px/1 var(--rle-font);
  letter-spacing: .24em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .rle-root *,
  .rle-root *::before,
  .rle-root *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   COMPONENTES
   ============================================================ */

.rle-root,
.rle-root *,
.rle-root *::before,
.rle-root *::after { box-sizing: border-box; }

.rle-root {
  font-family: var(--rle-font);
  color: var(--rle-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: var(--rle-lh-body);
}

.rle-root img { max-width: 100%; height: auto; display: block; }
.rle-root a   { text-decoration: none; color: inherit; }

.rle-root .rle-container { width: var(--rle-container); margin-inline: auto; position: relative; }

/* ── BUTTONS ── */
.rle-root .rle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--rle-radius-btn);
  font: 700 14px/1 var(--rle-font);
  letter-spacing: .02em;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform   var(--rle-dur) var(--rle-ease),
    box-shadow  var(--rle-dur) var(--rle-ease),
    background  var(--rle-dur) var(--rle-ease),
    color       var(--rle-dur) var(--rle-ease);
}
.rle-root .rle-btn--primary {
  background: var(--rle-primary);
  color: #fff;
  box-shadow: var(--rle-shadow-cta-primary);
}
.rle-root .rle-btn--primary:hover {
  background: var(--rle-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -10px rgba(21, 128, 61, .6);
}
.rle-root .rle-btn--ghost {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.rle-root .rle-btn--ghost:hover {
  background: rgba(255, 255, 255, .20);
  transform: translateY(-2px);
}
.rle-root .rle-btn--ghost-dark {
  background: #fff;
  color: var(--rle-ink);
  border: 1px solid var(--rle-border);
}
.rle-root .rle-btn--ghost-dark:hover {
  background: var(--rle-ink);
  color: #fff;
}
.rle-root .rle-btn--accent {
  background: var(--rle-accent);
  color: var(--rle-ink);
  box-shadow: var(--rle-shadow-cta-accent);
}
.rle-root .rle-btn--accent:hover {
  background: #d97e08;
  transform: translateY(-2px);
}
.rle-root .rle-btn--wa {
  background: var(--rle-whatsapp);
  color: #fff;
  border: 0;
}
.rle-root .rle-btn--wa:hover {
  background: var(--rle-whatsapp-dk);
  transform: translateY(-2px);
}

/* ── HERO EYEBROW ── */
.rle-root .rle-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 11px/1 var(--rle-font);
  letter-spacing: var(--rle-tracking-eyebrow);
  color: #fff;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--rle-radius-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .12);
}
.rle-root .rle-hero-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rle-accent);
  box-shadow: 0 0 12px var(--rle-accent);
}

/* ── FILTER PILL ── */
.rle-root .rle-filters {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 6px;
  background: rgba(11, 32, 20, .05);
  border-radius: var(--rle-radius-pill);
}
.rle-root .rle-filter {
  position: relative;
  z-index: 2;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 11px 22px;
  border-radius: var(--rle-radius-pill);
  font: 600 13px/1 var(--rle-font);
  letter-spacing: .04em;
  color: rgba(11, 32, 20, .6);
  transition: color .3s var(--rle-ease);
}
.rle-root .rle-filter:hover { color: var(--rle-ink); }
.rle-root .rle-filter.is-active { color: #fff; }
.rle-root .rle-filter__pill {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  background: var(--rle-primary-dark);
  border-radius: var(--rle-radius-pill);
  transition: transform .45s var(--rle-ease), width .45s var(--rle-ease), left .45s var(--rle-ease);
  box-shadow: 0 8px 20px -6px rgba(20, 83, 45, .5);
}

/* ── TOUR CARD ── */
.rle-root .rle-card {
  position: relative;
  flex: 0 0 320px;
  background: #fff;
  border-radius: var(--rle-radius);
  overflow: hidden;
  box-shadow: var(--rle-shadow-sm);
  transition: transform .5s var(--rle-ease), box-shadow .5s var(--rle-ease);
  display: flex;
  flex-direction: column;
}
.rle-root .rle-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--rle-shadow);
}
.rle-root .rle-card__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
}
.rle-root .rle-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f5f9;
}
.rle-root .rle-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--rle-dur-slow) var(--rle-ease);
}
.rle-root .rle-card:hover .rle-card__media img { transform: scale(1.06); }
.rle-root .rle-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 6px 11px;
  background: rgba(255, 255, 255, .92);
  color: var(--rle-ink);
  font: 700 9.5px/1 var(--rle-font);
  letter-spacing: var(--rle-tracking-meta);
  border-radius: var(--rle-radius-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.rle-root .rle-card--pesca .rle-card__media::after,
.rle-root .rle-card--ecoturismo .rle-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  z-index: 1;
}
.rle-root .rle-card--pesca .rle-card__media::after { background: #0ea5e9; }
.rle-root .rle-card--ecoturismo .rle-card__media::after { background: var(--rle-primary); }

.rle-root .rle-card__body {
  padding: 18px 20px 12px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.rle-root .rle-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 11px/1 var(--rle-font);
  letter-spacing: var(--rle-tracking-meta);
  text-transform: uppercase;
  color: rgba(11, 32, 20, .55);
  margin-bottom: 10px;
}
.rle-root .rle-card__duration { display: inline-flex; align-items: center; gap: 5px; }
.rle-root .rle-card__title {
  font-family: var(--rle-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--rle-ink);
  letter-spacing: -.01em;
  min-height: calc(20px * 1.2 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rle-root .rle-card__tagline {
  font-size: 13px;
  color: rgba(11, 32, 20, .68);
  margin: 0 0 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(13px * 1.5 * 3);
  flex: 1 1 auto;
}
.rle-root .rle-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--rle-border);
  margin-top: auto;
}
.rle-root .rle-card__price-label {
  display: block;
  font-size: 10px;
  letter-spacing: var(--rle-tracking-badge);
  text-transform: uppercase;
  color: rgba(11, 32, 20, .5);
  margin-bottom: 4px;
}
.rle-root .rle-card__price-value {
  font: 700 18px/1 var(--rle-font);
  color: var(--rle-ink);
  letter-spacing: -.01em;
}
.rle-root .rle-card__arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--rle-paper-2);
  display: grid; place-items: center;
  transition: background .3s var(--rle-ease), transform .3s var(--rle-ease), color .3s;
}
.rle-root .rle-card:hover .rle-card__arrow {
  background: var(--rle-primary);
  color: #fff;
  transform: rotate(45deg);
}
.rle-root .rle-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rle-border);
  border-top: 1px solid var(--rle-border);
}
.rle-root .rle-card__cta {
  /* Aplica a <button> y a <a>: el "Más info" es un link real a la página
     del tour, "Reservar" sigue siendo un button que abre el modal. */
  background: #fff;
  border: 0;
  padding: 13px 12px;
  font: 700 12px/1 var(--rle-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s;
}
.rle-root .rle-card__cta--book {
  background: var(--rle-primary);
  color: #fff;
}
.rle-root .rle-card__cta--book:hover {
  background: var(--rle-primary-dark);
}
.rle-root .rle-card__cta--info { color: var(--rle-ink-soft); }
.rle-root .rle-card__cta--info:hover { background: var(--rle-paper-2); color: var(--rle-ink); }

/* ── FIELDS / STEPPER ── */
.rle-root .rle-field {
  margin-bottom: 22px;
  border: 0;
  padding: 0;
}
.rle-root .rle-field legend {
  display: block;
  font: 600 11px/1 var(--rle-font);
  letter-spacing: var(--rle-tracking-badge);
  text-transform: uppercase;
  color: rgba(11, 32, 20, .6);
  margin-bottom: 10px;
}
.rle-root .rle-input,
.rle-root .rle-field select,
.rle-root .rle-field input[type="text"],
.rle-root .rle-field input[type="email"],
.rle-root .rle-field input[type="tel"],
.rle-root .rle-field input[type="number"] {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--rle-radius-sm);
  border: 1px solid var(--rle-border);
  background: #fff;
  font: 500 15px/1.2 var(--rle-font);
  color: var(--rle-ink);
  transition: border-color .3s, box-shadow .3s;
}
.rle-root .rle-input:focus,
.rle-root .rle-field select:focus,
.rle-root .rle-field input:focus {
  outline: 0;
  border-color: var(--rle-primary);
  box-shadow: 0 0 0 4px rgba(21, 128, 61, .15);
}

.rle-root .rle-stepper {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--rle-border);
  border-radius: var(--rle-radius-pill);
  padding: 4px;
  gap: 4px;
}
.rle-root .rle-stepper--full {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.rle-root .rle-stepper--full input { flex: 1 1 auto; }
.rle-root .rle-stepper__btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--rle-paper-2);
  color: var(--rle-ink);
  border: 0;
  font-size: 18px;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.rle-root .rle-stepper__btn:hover { background: var(--rle-primary); color: #fff; }
.rle-root .rle-stepper input {
  width: 50px; border: 0; text-align: center;
  font: 700 16px/1 var(--rle-font);
  padding: 0; background: transparent;
}

/* ── SUMMARY BOX ── */
.rle-root .rle-summary {
  background: var(--rle-paper-2);
  border-radius: var(--rle-radius-sm);
  padding: 18px 20px;
}
.rle-root .rle-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 6px;
  font-size: 14px;
}
.rle-root .rle-summary__row strong {
  font: 700 20px/1 var(--rle-font);
  color: var(--rle-primary-dark);
}
.rle-root .rle-summary__row--muted { color: rgba(11, 32, 20, .55); }

/* ── PAYMENT BUTTONS ── */
.rle-root .rle-pay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.rle-root .rle-pay__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  border: 1px solid var(--rle-border);
  background: #fff;
  border-radius: var(--rle-radius-sm);
  cursor: pointer;
  font: 700 13px/1.2 var(--rle-font);
  color: var(--rle-ink);
  text-decoration: none;
  text-align: center;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.rle-root .rle-pay__btn > .rle-pay__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 24px;
  line-height: 1;
}
.rle-root .rle-pay__btn > .rle-pay__brand img { display: block; height: 22px; width: auto; }
.rle-root .rle-pay__btn > .pay-action {
  display: block;
  text-align: center;
  font: 700 11px/1 var(--rle-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11, 32, 20, .55);
}
.rle-root .rle-pay__btn--wa-light > .pay-action,
.rle-root .rle-pay__btn--wa > .pay-action { color: rgba(11, 32, 20, .55); }
.rle-root .rle-pay__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--rle-shadow-sm);
  border-color: var(--rle-primary);
}
.rle-root .rle-pay__btn--wa-light {
  background: #fff;
  color: var(--rle-ink);
  border: 1px solid var(--rle-border);
}
.rle-root .rle-pay__btn--wa-light:hover {
  background: #fff;
  border-color: var(--rle-whatsapp);
  box-shadow: 0 2px 4px rgba(37, 211, 102, .12), 0 14px 28px -10px rgba(37, 211, 102, .25);
}
@media (max-width: 600px) {
  .rle-root .rle-pay { grid-template-columns: 1fr; }
  .rle-root .rle-pay__btn {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 14px 20px;
    gap: 14px;
  }
}

/* ── MARQUEE ── */
.rle-root .rle-marquee {
  background: var(--rle-ink);
  color: var(--rle-paper);
  overflow: hidden;
  padding: 18px 0;
  border-block: 1px solid rgba(255, 255, 255, .06);
  width: 100%;
}
.rle-root .rle-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  animation: rleMarquee 48s linear infinite;
  width: max-content;
}
.rle-root .rle-marquee__track span {
  font: 600 13px/1 var(--rle-font);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.rle-root .rle-marquee__track span[aria-hidden] {
  color: var(--rle-gold);
  font-size: 10px;
}
@keyframes rleMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── BENTO ── */
.rle-root .rle-bento {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
}
.rle-root .rle-bento__cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--rle-radius-sm);
  background: var(--rle-paper);
  color: #fff;
  isolation: isolate;
}
.rle-root .rle-bento__cell img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--rle-ease);
}
.rle-root .rle-bento__cell::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11, 32, 20, .55) 0%, transparent 50%);
}
.rle-root .rle-bento__cell:hover img { transform: scale(1.08); }
.rle-root .rle-bento__tag {
  position: absolute; z-index: 2;
  inset: auto 16px 14px;
  font: 600 12px/1 var(--rle-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ============================================================
   LAYOUT POR SECCIÓN
   ============================================================ */

/* ── HERO ── */
/* ───── SPLASH (logo + tagline antes del hero) ─────
   Aparece al instante en el primer paint con fondo verde de marca.
   Cuando el flamenco carga (JS añade .is-image-loaded al hero) se desvanece. */
.rle-root .rle-splash {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--rle-ink);
  transition: opacity .7s ease-out .2s;
  will-change: opacity;
}
.rle-root .rle-splash__logo {
  width: clamp(180px, 28vw, 260px);
  height: auto;
  aspect-ratio: 1600 / 513;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .95;
  animation: rle-splash-breathe 2.6s ease-in-out infinite;
}
.rle-root .rle-splash__tagline {
  margin: 0;
  font: italic 400 clamp(13px, 1.4vw, 17px)/1.45 'Lora', Georgia, serif;
  color: rgba(255, 255, 255, .78);
  letter-spacing: .02em;
  text-align: center;
  padding: 0 18px;
  max-width: 520px;
}
.rle-root .rle-hero.is-image-loaded .rle-splash {
  opacity: 0;
  pointer-events: none;
}
@keyframes rle-splash-breathe {
  0%, 100% { transform: scale(1);    opacity: .95; }
  50%      { transform: scale(1.02); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rle-root .rle-splash__logo { animation: none; }
}

.rle-root .rle-hero {
  position: relative;
  height: 100svh;
  max-height: 100svh;
  min-height: 560px;
  width: 100%;
  overflow: clip;
  isolation: isolate;
  color: #fff;
  background: var(--rle-ink);
}
.rle-root .rle-hero__media { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.rle-root .rle-hero__pic   { position: absolute; inset: 0; display: block; transition: opacity .9s ease-in-out; }
.rle-root .rle-hero__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: .92;
}
/* Video del hero — paralelo a la imagen, oculto hasta que pueda reproducirse.
   Cuando el JS añade `.is-video-ready` al hero, fade cruzado entre img → video. */
.rle-root .rle-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0;
  transition: opacity .9s ease-in-out;
  pointer-events: none;
}
.rle-root .rle-hero.is-video-ready .rle-hero__video { opacity: .92; }
.rle-root .rle-hero.is-video-ready .rle-hero__pic   { opacity: 0; }
/* Respetar usuarios con reduced-motion o data-saver: no autoplay, queda la imagen */
@media (prefers-reduced-motion: reduce) {
  .rle-root .rle-hero__video { display: none; }
  .rle-root .rle-hero.is-video-ready .rle-hero__pic { opacity: 1; }
}
.rle-root .rle-hero__veil  { position: absolute; inset: 0; z-index: 1; background: var(--rle-hero-veil); }
.rle-root .rle-hero__inner {
  position: relative; z-index: 2;
  height: 100%;
  width: var(--rle-container-narrow);
  margin-inline: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 3vh, 32px);
  padding: clamp(82px, 10vh, 100px) 0 clamp(70px, 8vh, 90px);
}
.rle-root .rle-hero__center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.8vh, 18px);
}
.rle-root .rle-hero__title {
  font-family: var(--rle-display);
  font-weight: 600;
  font-size: var(--rle-fs-hero);
  line-height: var(--rle-lh-tight);
  letter-spacing: var(--rle-tracking-hero);
  margin: 0;
  color: #fff;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.rle-root .rle-hero__line          { display: block; line-height: 1; margin: 0; }
.rle-root .rle-hero__line--italic  {
  font-style: italic;
  color: var(--rle-hero-italic);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}
.rle-root .rle-hero__sub {
  color: rgba(255, 255, 255, .92);
  font-size: var(--rle-fs-lead);
  line-height: 1.55;
  margin: 0;
  max-width: 540px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  text-align: left;
}
.rle-root .rle-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
.rle-root .rle-hero__badges {
  list-style: none;
  margin: 18px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: start;
  gap: 12px 22px;
}
@media (max-width: 600px) {
  .rle-root .rle-hero__badges { grid-template-columns: repeat(2, max-content); gap: 12px 18px; }
}
@media (max-width: 380px) {
  .rle-root .rle-hero__badges { grid-template-columns: max-content; }
}
.rle-root .rle-hero__badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 11px/1 var(--rle-font);
  letter-spacing: var(--rle-tracking-meta);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}
.rle-root .rle-hero__badges svg { opacity: .8; }

/* ── HEADER (propio del plugin) ──
   Siempre position:fixed para evitar saltos al pinearse.
   - Estado inicial   : transparente sobre el hero
   - Estado is-pinned : fondo verde semitransparente con blur
   - Estado is-hidden : oculto (translateY) cuando el usuario baja
*/
.rle-root .rle-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px 0;
  background: transparent;
  transition: transform .35s var(--rle-ease), background .35s var(--rle-ease),
              box-shadow .35s var(--rle-ease), padding .35s var(--rle-ease);
  will-change: transform, background;
}
.rle-root .rle-header.is-pinned {
  background: rgba(11, 31, 23, .85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px -8px rgba(0, 0, 0, .4);
  padding: 12px 0;
}
.rle-root .rle-header.is-hidden { transform: translateY(-110%); }
.rle-root .rle-header__inner {
  width: var(--rle-container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rle-root .rle-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.rle-root .rle-header__logo img {
  height: 38px;
  width: auto;
  /* aspect-ratio garantiza que cualquier intento de deformar el logo
     (atributos HTML antiguos en cache, CSS heredado, etc.) sea inofensivo.
     Coincide con el ratio nativo 1600/513 = 3.12. */
  aspect-ratio: 1600 / 513;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
/* ── NAV JERÁRQUICO ── */
.rle-root .rle-nav { display: flex; gap: 22px; align-items: center; }
.rle-root .rle-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 22px; align-items: center;
}
.rle-root .rle-nav__item { position: relative; }
.rle-root .rle-nav__link,
.rle-root .rle-nav a {
  font: 600 12.5px/1 var(--rle-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  transition: color .25s;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.rle-root .rle-nav__link:hover,
.rle-root .rle-nav__link:focus-visible,
.rle-root .rle-nav a:hover { color: #fff; }
.rle-root .rle-nav__chev { transition: transform .25s var(--rle-ease); }
.rle-root .rle-nav__item--has-children:hover > .rle-nav__link .rle-nav__chev,
.rle-root .rle-nav__item--has-children:focus-within > .rle-nav__link .rle-nav__chev { transform: rotate(180deg); }

/* Header pineado (fondo verde): el texto es blanco para contraste */
.rle-root .rle-header.is-pinned .rle-nav__link,
.rle-root .rle-header.is-pinned .rle-nav a { color: rgba(255, 255, 255, .9); }

/* Submenu desplegable */
.rle-root .rle-nav__submenu {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 8px);
  list-style: none; padding: 8px; margin: 0;
  min-width: 240px;
  background: #fff; color: var(--rle-ink);
  border-radius: 14px;
  box-shadow: 0 14px 40px -10px rgba(11, 31, 23, .35), 0 2px 4px rgba(11, 31, 23, .08);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .25s var(--rle-ease), visibility .2s;
  z-index: 60;
}
.rle-root .rle-nav__item--has-children:hover > .rle-nav__submenu,
.rle-root .rle-nav__item--has-children:focus-within > .rle-nav__submenu,
.rle-root .rle-nav__submenu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.rle-root .rle-nav__submenu li { display: block; }
.rle-root .rle-nav__submenu a {
  display: block;
  padding: 10px 14px;
  font: 600 13px/1.2 var(--rle-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--rle-ink);
  border-radius: 8px;
  transition: background .2s, color .2s;
  white-space: normal;
}
.rle-root .rle-nav__submenu a:hover,
.rle-root .rle-nav__submenu a:focus-visible {
  background: var(--rle-surface-soft, rgba(11,31,23,.04));
  color: var(--rle-primary);
}

/* Hamburguesa (sólo móvil) */
.rle-root .rle-nav__toggle {
  display: none;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  width: 32px; height: 32px;
  flex-direction: column; justify-content: center; gap: 5px;
  margin-left: 6px;
}
.rle-root .rle-nav__toggle span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .3s var(--rle-ease), opacity .2s;
}
.rle-root .rle-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rle-root .rle-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rle-root .rle-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE / TABLET NAV ── (≤ 1024px)
   Breakpoint subido de 920 → 1024 porque con Inicio + Pesca + Ecoturismo +
   Galería + Blog + ES + Reservar (7 elementos) el menu se siente apretado
   en tablets verticales. Ahora hamburguesa aparece desde tablet portrait. */
@media (max-width: 1024px) {
  .rle-root .rle-nav__toggle { display: inline-flex !important; z-index: 60; position: relative; }
  /* En menú colapsado, ocultamos el botón Reservar y el toggle de idioma
     del header — ambos pueden vivir dentro del menú abierto si se quiere,
     pero por simplicidad los movemos al CTA del hero y el footer. */
  .rle-root .rle-header__book { display: none !important; }
  .rle-root .rle-header__lang { display: none !important; }
  .rle-root .rle-nav__list {
    position: fixed; inset: 64px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--rle-ink);
    padding: 24px 24px 60px;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-100%);
    transition: transform .35s var(--rle-ease);
    z-index: 50;
    visibility: hidden; /* evita interceptar clicks cuando está colapsado */
  }
  .rle-root .rle-nav[data-rle-nav-open="true"] .rle-nav__list {
    transform: translateY(0);
    visibility: visible;
  }
  .rle-root .rle-nav__item { width: 100%; }
  .rle-root .rle-nav__link {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 15px;
    justify-content: space-between;
    width: 100%;
    color: #fff;
  }
  .rle-root .rle-nav__submenu {
    position: static; transform: none;
    background: transparent; box-shadow: none;
    padding: 0 0 8px; min-width: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    max-height: 0; overflow: hidden;
    transition: max-height .35s var(--rle-ease);
  }
  .rle-root .rle-nav__item--has-children.is-open > .rle-nav__submenu { max-height: 800px; }
  .rle-root .rle-nav__submenu a {
    color: rgba(255,255,255,.78);
    padding: 10px 0 10px 16px;
    border-left: 2px solid rgba(255,255,255,.1);
  }
  .rle-root .rle-nav__submenu a:hover,
  .rle-root .rle-nav__submenu a:focus-visible { color: #fff; background: transparent; }
}
.rle-root .rle-header__lang {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--rle-radius-pill);
  padding: 6px 12px;
  font: 600 11px/1 var(--rle-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s;
}
.rle-root .rle-header__lang:hover { background: rgba(255, 255, 255, .22); }
.rle-root .rle-header__book { padding: 10px 20px !important; font-size: 12px !important; }
/* Aquí teníamos un override de 760px del Reservar / nav que ahora vive en el
   bloque consolidado @media (max-width: 1024px) arriba. Mantenido sólo el
   ajuste mínimo de gap para teléfonos pequeños. */
@media (max-width: 760px) {
  .rle-root .rle-nav { gap: 8px; }
}

/* ─────────────────────────────────────────────────────────────────────
   LANGUAGE SWITCHER — diseño propio de Rio (independiente de PaTo)
   Pill blanco translúcido en desktop, dentro del header oscuro.
   Pestañita flotante (bottom-left por defecto) en mobile.
   ───────────────────────────────────────────────────────────────────── */

/* ===== Pill desktop (visible >=1025px, hidden <1024px) ===== */
.rle-langsw{display:inline-block;position:relative;line-height:1;vertical-align:middle;font-family:var(--rle-font)}

.rle-langsw__pill{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--rle-radius-pill,999px);
  padding:6px 12px;
  font:600 11px/1 var(--rle-font);
  letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;
  transition:background .25s,border-color .25s,transform .15s;
  -webkit-font-smoothing:antialiased;
}
.rle-langsw__pill:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.32)}
.rle-langsw__pill:active{transform:scale(.97)}
.rle-langsw__pill:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:2px}
.rle-langsw__flag{font-size:14px;line-height:1;letter-spacing:0}
/* SVG bandera (mismo selector pero override cuando es <img>): tamaño fijo
   universal — los emoji de banderas no renderizan en Windows. */
img.rle-langsw__flag{width:18px;height:13px;display:inline-block;vertical-align:middle;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.rle-langsw__code{letter-spacing:.14em}
.rle-langsw__caret{font-size:9px;opacity:.7;transition:transform .2s ease}
.rle-langsw[data-open="true"] .rle-langsw__caret{transform:rotate(180deg)}

/* Dropdown bajo el pill — alineado a la DERECHA del pill en PC */
.rle-langsw__list{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:200px;
  background:#fff;color:#0b1f17;
  border:1px solid rgba(11,31,23,.1);
  border-radius:12px;
  box-shadow:0 14px 40px -10px rgba(0,0,0,.25);
  padding:6px;margin:0;list-style:none;
  opacity:0;visibility:hidden;
  transform:translateY(-4px) scale(.97);
  transform-origin:top right;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  z-index:9999;
}
.rle-langsw[data-open="true"] .rle-langsw__list{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* Specificity boost: dentro del header el tema USE pinta links blancos
   (.rle-header.is-pinned a { color: #fff }). Forzamos NEGRO con doble clase + !important
   para garantizar contraste sobre el fondo blanco del dropdown. */
.rle-root .rle-langsw__list .rle-langsw__item,
.rle-langsw__list .rle-langsw__item{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:8px;
  color:#0b1f17 !important;text-decoration:none;
  font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;
  transition:background .15s;
}
.rle-root .rle-langsw__list .rle-langsw__item:hover,
.rle-langsw__list .rle-langsw__item:hover{background:rgba(11,31,23,.08)}
/* is-current: primary-dark sobre tinte verde — WCAG AA (≈7:1) */
.rle-root .rle-langsw__list .rle-langsw__item.is-current,
.rle-langsw__list .rle-langsw__item.is-current{background:rgba(20,83,45,.14);color:#14532d !important;font-weight:700}
.rle-langsw__item-flag{font-size:16px;flex-shrink:0}
img.rle-langsw__item-flag{width:20px;height:14px;display:inline-block;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(11,31,23,.12)}

/* ===== Pestañita mobile (visible <1025px, hidden >=1025px) ===== */
/* Diseño: pestañita anclada al borde inferior, esquinas superiores
   redondeadas, despliega lista hacia arriba al click/hover. Se minimiza
   tras seleccionar idioma (cookie pato_lang). */
.rle-langsw-mobile{display:none;position:fixed;z-index:9990;font-family:var(--rle-font)}
.rle-langsw-mobile--pos-bottom-right{bottom:0;right:30px}
.rle-langsw-mobile--pos-bottom-left{bottom:0;left:30px}
.rle-langsw-mobile--pos-top-right{top:0;right:30px}
.rle-langsw-mobile--pos-top-left{top:0;left:30px}

.rle-langsw-mobile__handle{
  display:flex;align-items:center;gap:8px;
  background:#fff;color:var(--rle-ink,#0b1f17);
  border:1px solid rgba(11,31,23,.1);
  cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  padding:6px 14px;
  box-shadow:0 -2px 8px rgba(0,0,0,.08);
  transition:padding .2s ease,opacity .2s ease,gap .2s ease;
}
/* Esquinas superiores redondeadas (anclada abajo) */
.rle-langsw-mobile--pos-bottom-right .rle-langsw-mobile__handle,
.rle-langsw-mobile--pos-bottom-left  .rle-langsw-mobile__handle{
  border-radius:8px 8px 0 0;border-bottom:0;
}
/* Esquinas inferiores redondeadas (anclada arriba) */
.rle-langsw-mobile--pos-top-right .rle-langsw-mobile__handle,
.rle-langsw-mobile--pos-top-left  .rle-langsw-mobile__handle{
  border-radius:0 0 8px 8px;border-top:0;box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.rle-langsw-mobile__flag{font-size:16px;line-height:1}
img.rle-langsw-mobile__flag{width:18px;height:13px;display:inline-block;vertical-align:middle;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(11,31,23,.12)}
.rle-langsw-mobile__label{font-size:12px;letter-spacing:.04em;opacity:.85}

.rle-langsw-mobile__arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;transition:transform .2s ease;opacity:.7}
.rle-langsw-mobile--pos-bottom-right .rle-langsw-mobile__arrow,
.rle-langsw-mobile--pos-bottom-left  .rle-langsw-mobile__arrow{border-bottom:5px solid currentColor}
.rle-langsw-mobile--pos-top-right .rle-langsw-mobile__arrow,
.rle-langsw-mobile--pos-top-left  .rle-langsw-mobile__arrow{border-top:5px solid currentColor}
.rle-langsw-mobile[data-open="true"] .rle-langsw-mobile__arrow,
.rle-langsw-mobile:hover .rle-langsw-mobile__arrow{transform:rotate(180deg)}

.rle-langsw-mobile__list{
  position:absolute;
  opacity:0;visibility:hidden;
  transform:translateY(6px) scale(.96);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  background:#fff;color:var(--rle-ink,#0b1f17);
  border:1px solid rgba(11,31,23,.1);
  box-shadow:0 -6px 20px rgba(0,0,0,.1);
  min-width:200px;padding:6px;margin:0;list-style:none;
}
.rle-langsw-mobile--pos-bottom-right .rle-langsw-mobile__list{bottom:100%;right:-1px;border-radius:8px 8px 0 8px;transform-origin:bottom right}
.rle-langsw-mobile--pos-bottom-left  .rle-langsw-mobile__list{bottom:100%;left:-1px;border-radius:8px 8px 8px 0;transform-origin:bottom left}
.rle-langsw-mobile--pos-top-right .rle-langsw-mobile__list{top:100%;right:-1px;border-radius:0 8px 8px 8px;transform-origin:top right;box-shadow:0 6px 20px rgba(0,0,0,.1)}
.rle-langsw-mobile--pos-top-left  .rle-langsw-mobile__list{top:100%;left:-1px;border-radius:8px 0 8px 8px;transform-origin:top left;box-shadow:0 6px 20px rgba(0,0,0,.1)}

.rle-langsw-mobile[data-open="true"] .rle-langsw-mobile__list,
.rle-langsw-mobile:hover .rle-langsw-mobile__list{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* Specificity boost — mismo motivo que el dropdown desktop */
.rle-root .rle-langsw-mobile__list .rle-langsw-mobile__item,
.rle-langsw-mobile__list .rle-langsw-mobile__item{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:8px;
  color:#0b1f17 !important;text-decoration:none;
  font-size:13px;font-weight:500;
  transition:background .15s;
}
.rle-root .rle-langsw-mobile__list .rle-langsw-mobile__item:hover,
.rle-langsw-mobile__list .rle-langsw-mobile__item:hover{background:rgba(11,31,23,.08)}
.rle-root .rle-langsw-mobile__list .rle-langsw-mobile__item.is-current,
.rle-langsw-mobile__list .rle-langsw-mobile__item.is-current{background:rgba(20,83,45,.14);color:#14532d !important;font-weight:700}
.rle-langsw-mobile__item-flag{flex-shrink:0}
img.rle-langsw-mobile__item-flag{width:20px;height:14px;display:inline-block;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(11,31,23,.12)}

/* Minimizado tras elegir idioma: sólo bandera, semitransparente */
.rle-langsw-mobile.is-minimized .rle-langsw-mobile__handle{padding:4px 8px;gap:0;opacity:.5}
.rle-langsw-mobile.is-minimized .rle-langsw-mobile__label,
.rle-langsw-mobile.is-minimized .rle-langsw-mobile__arrow{display:none}
.rle-langsw-mobile.is-minimized .rle-langsw-mobile__flag{font-size:14px}
.rle-langsw-mobile.is-minimized:hover .rle-langsw-mobile__handle{padding:6px 14px;gap:8px;opacity:1}
.rle-langsw-mobile.is-minimized:hover .rle-langsw-mobile__label,
.rle-langsw-mobile.is-minimized:hover .rle-langsw-mobile__arrow{display:inline}
.rle-langsw-mobile.is-minimized:hover .rle-langsw-mobile__flag{font-size:16px}

/* ===== Media queries: pill vs mobile ===== */
@media (max-width:1024px){
  .rle-langsw{display:none}
  .rle-langsw-mobile{display:block}
}

/* ─────────────────────────────────────────────────────────────────────
   HAMBURGER MÓVIL — estilo Magnetica (SVG morph + panel right-side)
   El checkbox oculto + label es CSS-only para el estado abierto/cerrado.
   Toggle, btn, panel y scrim se portalean a <body> via JS para:
    1. Escapar el `transform` del header al animarse en scroll
    2. Garantizar que el botón (X) quede SIEMPRE visible encima del panel
   ───────────────────────────────────────────────────────────────────── */
.rle-ham__toggle{position:fixed;opacity:0;pointer-events:none;width:0;height:0}

.rle-ham__btn{
  display:none; /* visible sólo en mobile via @media */
  position:fixed;
  top:12px;right:14px;
  z-index:2147483648; /* SIEMPRE encima del panel/scrim para mostrar la X */
  align-items:center;justify-content:center;cursor:pointer;user-select:none;
  width:44px;height:44px;border-radius:999px;
  background:transparent;border:0;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.rle-ham__btn:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}

.rle-ham__svg{width:40px;height:40px;display:block}
.rle-ham__line{
  fill:none;stroke:#fff;stroke-width:5;
  transition:stroke-dasharray .55s cubic-bezier(.4,0,.2,1),stroke-dashoffset .55s cubic-bezier(.4,0,.2,1),stroke .25s ease;
}
.rle-ham__line1{stroke-dasharray:60 207}
.rle-ham__line2{stroke-dasharray:60 60}
.rle-ham__line3{stroke-dasharray:60 207}
.rle-ham__toggle:checked + .rle-ham__btn .rle-ham__line1{stroke-dasharray:90 207;stroke-dashoffset:-134}
.rle-ham__toggle:checked + .rle-ham__btn .rle-ham__line2{stroke-dasharray:1 60;stroke-dashoffset:-30}
.rle-ham__toggle:checked + .rle-ham__btn .rle-ham__line3{stroke-dasharray:90 207;stroke-dashoffset:-134}
/* Cuando el panel está abierto el botón flota sobre fondo blanco translúcido →
   las líneas deben pasar a oscuro para que la X sea legible */
.rle-ham__toggle:checked + .rle-ham__btn .rle-ham__line{stroke:#0b1f17}

/* Scrim — translúcido suave estilo Magnetica para no oscurecer demasiado el
   fondo y permitir ver el logo Rio detrás. Sin blur para no agregar peso. */
.rle-ham__scrim{
  position:fixed;inset:0;
  background:rgba(0,0,0,.22);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
  z-index:2147483646;cursor:pointer;
}
.rle-ham__scrim.is-open{opacity:1;pointer-events:auto}

/* Panel right-side — glassmorphism real (translúcido + blur fuerte) */
.rle-ham__panel{
  position:fixed;
  right:0;
  top:var(--rle-ham-top,64px);
  width:clamp(260px,78vw,380px);
  max-width:96vw;
  background:rgba(255,255,255,.82);
  color:#0b1f17;
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.4);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 54px rgba(11,31,23,.18);
  max-height:0;
  padding:0;
  opacity:0;
  pointer-events:none;
  transition:
    max-height .5s cubic-bezier(.7,.01,.3,1),
    padding .5s cubic-bezier(.7,.01,.3,1),
    opacity .18s ease;
  z-index:2147483647;
  font-family:var(--rle-font,system-ui);
}
/* Fallback para navegadores sin backdrop-filter: bg más opaco para legibilidad */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .rle-ham__panel{background:rgba(255,255,255,.96)}
}
.rle-ham__panel.is-open{
  opacity:1;
  pointer-events:auto;
  padding:14px 0;
  max-height:calc(100vh - var(--rle-ham-top,64px) - 14px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

.rle-ham__list{
  list-style:none;margin:0;padding:0;
  opacity:0;
  transform:perspective(600px) rotateX(18deg) rotateY(-10deg) translateY(-12px);
  transition:all .55s cubic-bezier(.7,0,.36,.63);
}
.rle-ham__panel.is-open .rle-ham__list{
  opacity:1;
  transform:perspective(600px) rotateX(0) rotateY(0) translateY(0);
  transition-delay:.14s;
}

.rle-ham__item{
  text-align:right;
  margin:6px 0;
  padding:0 14px;
  text-transform:uppercase;
  letter-spacing:2.2px;
  font-weight:500;
  font-size:.92rem;
}
.rle-ham__item::after{
  content:"";display:block;width:26px;height:1px;
  background:rgba(11,31,23,.12);
  margin:8px 0 0 auto;
}
.rle-ham__item:last-child::after{display:none}

.rle-ham__link{
  display:block;width:100%;
  text-align:right;
  color:inherit;text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  transition:background .16s ease,transform .16s ease;
  cursor:pointer;
}
.rle-ham__link:hover{background:rgba(11,31,23,.045);transform:translateY(-1px)}
.rle-ham__link:focus-visible{outline:2px solid var(--rle-primary,#15803d);outline-offset:2px}

/* Detalle/submenu (uses <details> native) */
.rle-ham__details summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:10px 14px;
  border-radius:999px;
  transition:background .16s ease;
}
.rle-ham__details summary::-webkit-details-marker{display:none}
.rle-ham__details summary:hover{background:rgba(11,31,23,.045)}
.rle-ham__details summary svg{transition:transform .25s ease;opacity:.6}
.rle-ham__details[open] summary svg{transform:rotate(180deg)}

.rle-ham__submenu{
  list-style:none;
  margin:6px 0 4px;
  padding:0 8px 4px 0;
}
.rle-ham__submenu li{margin:2px 0}
.rle-ham__link--child{
  font-size:.82rem;font-weight:400;
  letter-spacing:1.4px;
  opacity:.78;
  padding:6px 14px;
}

/* CTA reservar — destacado al final del panel */
.rle-ham__item--cta{margin-top:14px;padding:0 14px}
.rle-ham__item--cta::after{display:none}
.rle-ham__link--cta{
  background:var(--rle-primary,#15803d);
  color:#fff !important;
  text-align:center;
  font-weight:700;
  padding:14px 18px;
  border-radius:12px;
}
.rle-ham__link--cta:hover{
  background:var(--rle-primary-dark,#14532d);
  transform:translateY(-1px);
}

/* En desktop, el hamburger queda oculto.
   Nota: sin prefijo `.rle-root` porque el btn está portalado a <body>
   (no es descendiente de .rle-root después del portal). */
@media (min-width:1025px){
  .rle-ham__btn,
  .rle-ham__panel,
  .rle-ham__scrim{display:none !important}
}

/* En mobile: mostrar hamburger, ocultar nav clásica del header. */
@media (max-width:1024px){
  .rle-ham__btn{display:inline-flex}
  .rle-root .rle-nav .rle-nav__list{display:none !important}
}

/* En pantallas muy chicas, panel a full-width */
@media (max-width:520px){
  .rle-ham__panel{
    width:100vw;max-width:100vw;
    border-radius:0 0 14px 14px;
    right:0;left:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .rle-ham__panel,.rle-ham__scrim,.rle-ham__line,.rle-ham__list,.rle-ham__details summary svg{transition:none !important}
  .rle-ham__list{transform:none !important}
}

/* ── SECTION HEAD ── */
.rle-root .rle-section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 24px;
}
.rle-root .rle-section__head .rle-eyebrow { margin-bottom: 16px; }
.rle-root .rle-section__head .rle-h2 { margin-bottom: 18px; }
.rle-root .rle-section__head .rle-lead { margin-inline: auto; }

/* ── TOURS ── */
.rle-root .rle-tours {
  padding: 56px 0 48px;
  background: var(--rle-paper);
  position: relative;
  overflow: clip;
}
.rle-root .rle-tours::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: rgba(245, 158, 11, .06);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.rle-root .rle-tours .rle-section__head .rle-h2 {
  white-space: nowrap;
  font-size: clamp(22px, 3vw, 38px);
}
.rle-root .rle-tours .rle-section__head .rle-lead {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(13px, 1.1vw, 15px);
}
@media (max-width: 760px) {
  .rle-root .rle-tours .rle-section__head .rle-h2,
  .rle-root .rle-tours .rle-section__head .rle-lead { white-space: normal; }
}
.rle-root .rle-filters-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.rle-root .rle-carousel {
  position: relative;
  width: 100%;
  z-index: 1;
}
.rle-root .rle-carousel__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* No usamos `touch-action: pan-x` porque bloquea el scroll vertical de la
     página cuando el usuario empieza el gesto sobre una card. El browser
     determina solo (basado en la dirección del primer movimiento) si pana
     el carousel (horizontal) o scrollea la página (vertical).
     `overscroll-behavior-x: contain` evita el back-swipe accidental cuando
     se llega al borde horizontal, sin bloquear el vertical. */
  overscroll-behavior-x: contain;
  padding: 8px 4px 24px;
}
.rle-root .rle-carousel__track::-webkit-scrollbar { display: none; }
.rle-root .rle-carousel__track > .rle-card { scroll-snap-align: start; }
.rle-root .rle-carousel__nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--rle-border);
  background: #fff;
  color: var(--rle-ink);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--rle-shadow-sm);
  transition: background .25s, color .25s, transform .25s, opacity .25s;
}
.rle-root .rle-carousel__nav:hover {
  background: var(--rle-primary);
  color: #fff;
  border-color: var(--rle-primary);
}
.rle-root .rle-carousel__nav--prev { left: -24px; }
.rle-root .rle-carousel__nav--next { right: -24px; }
@media (max-width: 640px) {
  .rle-root .rle-carousel__nav { display: none; }
  .rle-root .rle-card { flex-basis: 78vw !important; }
}

/* ── GUIDE ── */
.rle-root .rle-guide {
  padding: 56px 0;
  background: var(--rle-ink);
  color: var(--rle-paper);
  position: relative;
  overflow: clip;
}
.rle-root .rle-guide::before {
  content: "";
  position: absolute;
  top: -20%; left: -10%;
  width: 500px; height: 500px;
  background: rgba(202, 165, 93, .08);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.rle-root .rle-guide__container {
  width: var(--rle-container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.rle-root .rle-guide__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--rle-radius-lg);
  overflow: hidden;
}
.rle-root .rle-guide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rle-root .rle-guide__sticker {
  position: absolute;
  inset: auto 24px 24px auto;
  background: var(--rle-gold);
  color: var(--rle-ink);
  font: 700 11px/1 var(--rle-font);
  letter-spacing: .3em;
  padding: 10px 16px;
  border-radius: var(--rle-radius-pill);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .4);
}
.rle-root .rle-guide__body .rle-eyebrow { color: var(--rle-accent); }
.rle-root .rle-guide__title { color: #fff !important; }
.rle-root .rle-guide__body-text {
  font-size: clamp(14px, 1.3vw, 17px);
  color: rgba(251, 248, 242, .8);
  margin: 0 0 22px;
  max-width: 540px;
  line-height: 1.55;
}
.rle-root .rle-guide__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 22px;
  padding-block: 18px;
  border-block: 1px solid rgba(251, 248, 242, .1);
}
.rle-root .rle-guide__stats div { text-align: left; }
.rle-root .rle-guide__stats dt {
  font-family: var(--rle-display);
  font-size: var(--rle-fs-stats);
  line-height: 1;
  color: var(--rle-gold);
  margin-bottom: 6px;
}
.rle-root .rle-guide__stats dd {
  margin: 0;
  font-size: 12px;
  letter-spacing: var(--rle-tracking-meta);
  text-transform: uppercase;
  color: rgba(251, 248, 242, .6);
}
@media (max-width: 1024px) {
  .rle-root .rle-guide__container { grid-template-columns: 1fr; }
}

/* ── RESERVE ── */
.rle-root .rle-reserve {
  padding: 48px 0;
  background: var(--rle-paper);
}
.rle-root .rle-reserve__container { width: var(--rle-container); margin-inline: auto; }
.rle-root .rle-reserve__card {
  position: relative;
  background: var(--rle-paper-2);
  border: 1px solid var(--rle-border);
  color: var(--rle-ink);
  border-radius: var(--rle-radius-lg);
  padding: 32px clamp(24px, 4vw, 48px);
  text-align: center;
  overflow: hidden;
  box-shadow: var(--rle-shadow-sm);
}
.rle-root .rle-reserve__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--rle-accent);
}
.rle-root .rle-reserve__head { position: relative; }
.rle-root .rle-reserve__head .rle-eyebrow { color: var(--rle-primary); }
.rle-root .rle-reserve__title {
  font-family: var(--rle-display);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 34px);
  margin: 10px 0;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--rle-ink);
}
.rle-root .rle-reserve__body {
  color: var(--rle-muted);
  max-width: 560px;
  margin: 0 auto 20px;
  line-height: 1.55;
  font-size: 14px;
}

.rle-root .rle-reserve__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px auto;
  max-width: 820px;
}
.rle-root .rle-reserve__step {
  position: relative;
  background: #fff;
  border: 1px solid var(--rle-border);
  border-radius: var(--rle-radius);
  padding: 16px 16px 18px;
  text-align: left;
  transition: transform .35s var(--rle-ease), box-shadow .35s var(--rle-ease),
              border-color .35s var(--rle-ease);
  cursor: default;
}
.rle-root .rle-reserve__step.is-hover,
.rle-root .rle-reserve__step:hover {
  transform: translateY(-4px);
  box-shadow: var(--rle-shadow-sm);
  border-color: var(--rle-primary);
}
.rle-root .rle-reserve__step h3 {
  margin: 6px 0 8px;
  font: 600 15px/1.3 var(--rle-font);
  color: var(--rle-ink);
}
.rle-root .rle-reserve__step-hint {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--rle-muted);
  margin: 0;
}
.rle-root .rle-reserve__num {
  font-family: var(--rle-display);
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  color: var(--rle-accent);
  display: block;
}
.rle-root .rle-reserve__step-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--rle-paper-2);
  border-radius: var(--rle-radius-pill);
  padding: 3px;
  gap: 2px;
  margin-top: 6px;
}
.rle-root .rle-reserve__step-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--rle-border);
  font-size: 16px;
  cursor: pointer;
  color: var(--rle-ink);
  transition: background .2s, color .2s, border-color .2s;
}
.rle-root .rle-reserve__step-btn:hover {
  background: var(--rle-primary);
  color: #fff;
  border-color: var(--rle-primary);
}
.rle-root .rle-reserve__step-people {
  min-width: 30px;
  text-align: center;
  font: 700 15px/1 var(--rle-font);
  color: var(--rle-ink);
}

.rle-root .rle-reserve__deposit {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 22px;
  background: var(--rle-ink);
  color: #fff;
  border-radius: var(--rle-radius-pill);
  margin: 8px 0 22px;
}
.rle-root .rle-reserve__deposit-label {
  font: 600 11px/1 var(--rle-font);
  letter-spacing: var(--rle-tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
}
.rle-root .rle-reserve__deposit-value {
  font-family: var(--rle-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--rle-accent);
}
.rle-root .rle-reserve__deposit-people {
  font: 500 12px/1 var(--rle-font);
  color: rgba(255, 255, 255, .7);
}

.rle-root .rle-reserve__cta { margin-top: 6px; }

.rle-root .rle-reserve__pays {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: var(--rle-muted);
  font: 500 13px/1 var(--rle-font);
}
.rle-root .rle-reserve__pays img { height: 18px; width: auto; opacity: .85; }
.rle-root .rle-reserve__pays-sep { color: rgba(11, 31, 23, .25); }
.rle-root .rle-reserve__pays-name { color: var(--rle-ink-soft); }

@media (max-width: 640px) {
  .rle-root .rle-reserve__grid { grid-template-columns: 1fr; max-width: 100%; }
}

/* ── REVIEWS ── */
.rle-root .rle-reviews {
  padding: clamp(80px, 10vw, 130px) 0;
  background: #fff;
  position: relative;
  overflow: clip;
}
.rle-root .rle-reviews__head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.rle-root .rle-reviews__eyebrow { margin-bottom: 10px; color: #15803d; }
.rle-root .rle-reviews__label {
  font: 700 32px/1 var(--rle-display);
  letter-spacing: .04em;
  color: #0b1f17;
  margin-bottom: 10px;
}
.rle-root .rle-reviews__stars { margin-bottom: 8px; display: inline-flex; align-items: center; gap: 3px; }
.rle-root .rle-reviews__based {
  font-size: 13px;
  color: rgba(11, 32, 20, .65);
  margin: 0;
}
.rle-root .rle-reviews__based strong { color: #0b1f17; font-weight: 700; }
.rle-root .rle-reviews__layout {
  display: grid;
  grid-template-columns: minmax(240px, 280px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.rle-root .rle-reviews__sources {
  display: flex; flex-direction: column; gap: 10px;
  list-style: none; padding: 0; margin: 0;
  align-self: center;
}
.rle-root .rle-reviews__source {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px solid var(--rle-border);
}
.rle-root .rle-reviews__source-row {
  display: flex; align-items: center; gap: 10px;
}
.rle-root .rle-reviews__source-name {
  font: 600 14px/1 var(--rle-font);
  color: #0b1f17;
  flex: 1;
}
.rle-root .rle-reviews__source-count {
  font: 700 14px/1 var(--rle-display);
  letter-spacing: -.01em;
}
.rle-root .rle-reviews__source--ta .rle-reviews__source-count { color: #00AF87; }
.rle-root .rle-reviews__source--g  .rle-reviews__source-count { color: #4285F4; }
.rle-root .rle-reviews__write-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px;
  background: #fff;
  border-radius: 999px;
  font: 700 11.5px/1 var(--rle-font);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.rle-root .rle-reviews__source--ta .rle-reviews__write-btn { color: #00AF87; border: 1px solid #00AF87; }
.rle-root .rle-reviews__source--ta .rle-reviews__write-btn:hover { background: #00AF87; color: #fff; }
.rle-root .rle-reviews__source--g  .rle-reviews__write-btn { color: #4285F4; border: 1px solid #4285F4; }
.rle-root .rle-reviews__source--g  .rle-reviews__write-btn:hover { background: #4285F4; color: #fff; }

.rle-root .rle-reviews__slider { position: relative; min-width: 0; }
.rle-root .rle-reviews__slider .rle-carousel__nav--prev { left: -22px; width: 44px; height: 44px; }
.rle-root .rle-reviews__slider .rle-carousel__nav--next { right: -22px; width: 44px; height: 44px; }
.rle-root .rle-reviews__track {
  display: flex; gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Sin `touch-action: pan-x` — permite que scroll vertical de la página
     funcione aunque el usuario empiece el gesto sobre el carousel. */
  overscroll-behavior-x: contain;
  padding: 4px 4px 18px;
}
.rle-root .rle-reviews__track::-webkit-scrollbar { display: none; }
.rle-root .rle-review {
  flex: 0 0 calc(33.333% - 12px);
  min-width: 260px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--rle-shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
}
.rle-root .rle-review__head { display: flex; align-items: center; gap: 10px; }
.rle-root .rle-review__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font: 700 18px/1 var(--rle-font);
  overflow: hidden;
  flex-shrink: 0;
}
.rle-root .rle-review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rle-root .rle-review__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rle-root .rle-review__name { font: 600 13px/1.2 var(--rle-font); color: #0b1f17; }
.rle-root .rle-review__date { font-size: 11px; color: rgba(11, 32, 20, .55); }
.rle-root .rle-review__source { line-height: 0; }
.rle-root .rle-review__stars { display: inline-flex; gap: 2px; }
.rle-root .rle-review__title { font: 700 14px/1.35 var(--rle-font); color: #0b1f17; margin: 0; }
.rle-root .rle-review__text {
  font-size: 13px; line-height: 1.55; color: rgba(11, 32, 20, .75); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.rle-root .rle-review__more {
  margin-top: auto;
  font: 600 12px/1 var(--rle-font);
  color: #14532d;
  text-decoration: none;
  align-self: flex-start;
  padding-top: 6px;
}
@media (max-width: 760px) {
  .rle-root .rle-reviews__layout { grid-template-columns: 1fr; }
}

/* ── BENTO GALLERY (override 5x3) ── */
.rle-root .rle-gallery {
  padding: 56px 0;
  background: var(--rle-paper-2);
}
.rle-root .rle-gallery__container { width: var(--rle-container); margin-inline: auto; }
.rle-root .rle-gallery__cta-wrap { display: flex; justify-content: center; margin-top: 18px; }
.rle-root .rle-gallery .rle-bento {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 130px);
  grid-auto-rows: 130px;
  gap: 10px;
}
@media (max-width: 1024px) {
  .rle-root .rle-gallery .rle-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 180px); }
  .rle-root .rle-gallery .rle-bento__cell { grid-area: auto !important; }
}

/* ── BLOG ── */
.rle-root .rle-blog {
  padding: 48px 0;
  background: var(--rle-paper);
}
.rle-root .rle-blog__container {
  width: var(--rle-container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.rle-root .rle-blog__copy   { order: 1; }
.rle-root .rle-blog__visual { order: 2; }
.rle-root .rle-blog__copy .rle-eyebrow { margin-bottom: 12px; }
.rle-root .rle-blog__body {
  font-size: clamp(15px, 1.2vw, 17px);
  color: rgba(11, 32, 20, .72);
  margin: 0 0 24px;
  line-height: var(--rle-lh-prose);
}
.rle-root .rle-blog__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
}
.rle-root .rle-blog__visual > img:first-child,
.rle-root .rle-blog__video {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 45%;
  border-radius: var(--rle-radius-lg);
  box-shadow: var(--rle-shadow);
  display: block;
}
.rle-root .rle-blog__deco {
  position: absolute;
  width: 14%;
  bottom: -6%; right: -1%;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .25));
}
@media (max-width: 760px) {
  .rle-root .rle-blog__container { grid-template-columns: 1fr; }
  .rle-root .rle-blog__visual { aspect-ratio: 16 / 10; order: 1; }
  .rle-root .rle-blog__copy   { order: 2; }
}

/* ── MAP ── */
.rle-root .rle-map {
  padding: 40px 0 0;
  background: var(--rle-paper);
}
.rle-root .rle-map__container { width: var(--rle-container); margin-inline: auto; }
.rle-root .rle-map__head { text-align: left; margin-bottom: 18px; }
.rle-root .rle-map__head .rle-h2 { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 0; }
.rle-root .rle-map__embed {
  position: relative;
  height: clamp(220px, 50vh, 460px);
  border-radius: var(--rle-radius-lg) var(--rle-radius-lg) 0 0;
  overflow: hidden;
  box-shadow: var(--rle-shadow);
  background: #d4e0d8;
}
.rle-root .rle-map__embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(.3) contrast(1.05);
}
.rle-root .rle-map__outro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px) clamp(28px, 4vw, 56px);
  background: var(--rle-paper-2);
  border-radius: 0 0 var(--rle-radius-lg) var(--rle-radius-lg);
  border: 1px solid var(--rle-border);
  border-top: 0;
}
.rle-root .rle-map__outro-eyebrow {
  font: 600 11px/1 var(--rle-font);
  letter-spacing: var(--rle-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rle-primary);
  margin: 0 0 10px;
}
.rle-root .rle-map__outro-title {
  font-family: var(--rle-display);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 6px;
  color: var(--rle-ink);
  max-width: 480px;
}
.rle-root .rle-map__outro-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--rle-muted);
  margin: 0;
  max-width: 480px;
}
.rle-root .rle-map__outro-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
@media (max-width: 760px) {
  .rle-root .rle-map__outro { grid-template-columns: 1fr; padding: 24px; }
  .rle-root .rle-map__outro-ctas { justify-content: flex-start; }
}

/* ── FOOTER ── */
.rle-root .rle-footer {
  background: var(--rle-ink);
  color: rgba(255, 255, 255, .7);
  padding: 56px 0 28px;
}
.rle-root .rle-footer__container {
  width: var(--rle-container);
  margin-inline: auto;
  display: grid;
  /* 5 columnas en desktop: brand (más ancho) + Pesca + Ecoturismo + Contacto + Reservar
     Antes eran 4 columnas, lo que hacía que "Reservar" cayera a la segunda fila. */
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1fr;
  gap: 32px;
}
.rle-root .rle-footer__brand img { height: 42px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.rle-root .rle-footer__brand p { margin: 0; max-width: 280px; font-size: 13px; line-height: 1.6; }
.rle-root .rle-footer__col h4 {
  font: 700 11px/1 var(--rle-font);
  letter-spacing: var(--rle-tracking-meta);
  text-transform: uppercase;
  color: var(--rle-gold);
  margin: 0 0 14px;
}
.rle-root .rle-footer__col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rle-root .rle-footer__col a {
  font: 500 13px/1 var(--rle-font);
  color: rgba(255, 255, 255, .7);
  transition: color .25s;
}
.rle-root .rle-footer__col a:hover { color: #fff; }
.rle-root .rle-footer__bot {
  width: var(--rle-container);
  margin: 36px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 12px/1 var(--rle-font);
  color: rgba(255, 255, 255, .5);
}
/* Tablet: 5 columnas se vuelven apretadas, bajamos a 2 + brand full-width */
@media (max-width: 1024px) {
  .rle-root .rle-footer__container { grid-template-columns: 1fr 1fr; gap: 30px 36px; }
  .rle-root .rle-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .rle-root .rle-footer__container { grid-template-columns: 1fr 1fr; gap: 28px; }
  .rle-root .rle-footer__brand { grid-column: 1 / -1; }
  .rle-root .rle-footer__bot { flex-direction: column; gap: 10px; }
}

/* ── MODAL ── */
.rle-root .rle-modal,
.rle-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--rle-ease);
}
.rle-root .rle-modal.is-open,
.rle-modal.is-open { opacity: 1; pointer-events: auto; }
.rle-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(11, 32, 20, .7);
  backdrop-filter: blur(8px);
}
.rle-modal__panel {
  position: relative;
  background: var(--rle-paper);
  border-radius: var(--rle-radius-lg);
  box-shadow: var(--rle-shadow);
  width: min(640px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(22px, 3vw, 36px);
  transform: translateY(40px) scale(.95);
  transition: transform .5s var(--rle-ease);
}
.rle-modal.is-open .rle-modal__panel { transform: translateY(0) scale(1); }
.rle-modal__close {
  position: absolute;
  top: 14px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(11, 32, 20, .06);
  color: var(--rle-ink);
  border: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: grid; place-items: center;
  transition: background .3s;
}
.rle-modal__close:hover { background: rgba(11, 32, 20, .12); }
.rle-modal__head { margin-bottom: 18px; text-align: center; }
.rle-modal__title {
  font-family: var(--rle-display);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 26px);
  margin: 8px 0 0;
  line-height: 1.15;
}
.rle-modal .rle-field { margin-bottom: 14px; }
.rle-modal .rle-field legend { margin-bottom: 6px; font-size: 10.5px; }
.rle-modal .rle-field select,
.rle-modal .rle-field input[type="text"],
.rle-modal .rle-field input[type="email"],
.rle-modal .rle-field input[type="tel"],
.rle-modal .rle-field input[type="number"] {
  padding: 10px 14px;
  font-size: 14px;
}
.rle-modal .rle-stepper { padding: 3px; }
.rle-modal .rle-stepper__btn { width: 30px; height: 30px; font-size: 15px; }
.rle-modal .rle-stepper input { font-size: 14px; }
.rle-modal .rle-summary { padding: 12px 16px; margin-top: 4px; }
.rle-modal .rle-summary__row { padding-block: 4px; font-size: 13px; }
.rle-modal .rle-summary__row strong { font-size: 17px; }
.rle-modal .rle-pay { margin-top: 14px !important; gap: 8px; }
.rle-modal .rle-pay__btn { padding: 12px 10px; gap: 6px; font-size: 12.5px; }
.rle-modal__fineprint {
  margin: 18px 0 0;
  font-size: 12px;
  color: rgba(11, 32, 20, .55);
  text-align: center;
  line-height: 1.5;
}
.rle-root .rle-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .rle-root .rle-field-row { grid-template-columns: 1fr; } }

/* ============================================================
   TAKEOVER: cuando la landing se renderiza standalone como home
   ============================================================ */
html.rlt-takeover, body.rlt-takeover {
  margin: 0; padding: 0;
  background: var(--rle-paper);
  overflow-x: clip;
}
body.rlt-takeover #wpadminbar { z-index: 99999; }

/* ============================================================
   REGLAS NUCLEARES sobre wrappers del tema cuando la landing
   se inyecta en modo replace/append (compatibilidad heredada).
   ============================================================ */
body.rlt-home-replace .use-header,
body.rlt-home-replace [class*="use-header"],
body.rlt-home-replace .use-footer,
body.rlt-home-replace [class*="use-footer"],
body.rlt-home-replace .site-header,
body.rlt-home-replace .site-footer,
body.rlt-home-replace #masthead,
body.rlt-home-replace #colophon,
body.rlt-home-replace [class*="elementor-location-header"],
body.rlt-home-replace [class*="elementor-location-footer"] {
  display: none !important;
}
body.rlt-home-replace .rlt-seo-hidden {
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}