/* ==================================================================
   Continent page redesign — Claude Design handoff (scoped: .rg1-*)
   Complementa a country.css (reviews, intro/USPs, FAQ y cierre son
   compartidos .cv1-*) y a city.css (el bloque de tours privados reusa
   la tarjeta oscura .ct1-transport de "Solo transporte").
   Aquí solo lo específico de continente: hero sin foto y bloque Países.
   Tokens: los mismos del handoff de país (amarillo #ffd520 · texto
   #1c1c1c · sec #5a564e · terciario #8a8579 · faint #c9c4b8 · alt bg
   #f7f5f1 · verde #1e7a46). Montserrat 400/500/700 (el sitio no carga 800).
   ================================================================== */

.rg1 { font-family: 'Montserrat', system-ui, sans-serif; color: #1c1c1c; }
.rg1 * { box-sizing: border-box; }
.rg1 a { text-decoration: none; }

/* ---------- HERO (solo texto, sin foto) ----------
   El banner amarillo va en flujo pero el navbar es fixed-top, así que el padding
   superior reserva lo que el navbar tapa. Ese alto cambia por tramos (margen del
   navbar 2.45rem/4.25rem + el navbar colapsando bajo 576px), de ahí los 3 valores. */
.rg1-hero { background: #fff; text-align: center; padding: 132px 80px 62px; }
.rg1-hero-inner { max-width: 900px; margin: 0 auto; }
.rg1-eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: #1e7a46;
}
.rg1-hero h1 {
    margin: 18px 0 0; font-size: clamp(38px, 5.6vw, 64px); font-weight: 700;
    line-height: 1.02; letter-spacing: -1.6px; color: #1c1c1c; text-wrap: pretty;
}
.rg1-hero h1 u { text-decoration: none; box-shadow: inset 0 -8px 0 #ffd520; }
.rg1-hero h2 {
    margin: 14px 0 0; font-size: 26px; font-weight: 500;
    letter-spacing: -.3px; color: #6d6d6d;
}
.rg1-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }
.rg1-cta-dark {
    display: inline-flex; align-items: center; gap: 10px; background: #1c1c1c; color: #fff;
    border-radius: 999px; padding: 15px 28px; font-size: 16px; font-weight: 700; transition: background .2s;
}
.rg1-cta-dark:hover { background: #ffd520; color: #1c1c1c; }
.rg1-cta-ghost {
    display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #1c1c1c;
    border: 1.5px solid #dedede; border-radius: 999px; padding: 13.5px 26px;
    font-size: 16px; font-weight: 700; transition: border-color .2s;
}
.rg1-cta-ghost:hover { border-color: #1c1c1c; color: #1c1c1c; }
.rg1-cta-ghost svg { width: 16px; height: 16px; fill: #f4b400; flex: none; }

/* ---------- PAÍSES ---------- */
.rg1-countries { background: #f7f5f1; padding: 80px max(80px, calc((100% - 1240px) / 2)); }
.rg1-countries-head { margin-bottom: 30px; }
.rg1-countries-head .cv1-eyebrow { color: #1e7a46; }
.rg1-countries-head h2 { margin: 0 0 8px; font-size: 40px; font-weight: 700; letter-spacing: -.8px; }
.rg1-countries-head p { margin: 0; font-size: 15.5px; font-weight: 500; color: #5a564e; max-width: 520px; }

/* Destacados: 1 columna con un país, 2 con dos. */
.rg1-feat { display: grid; grid-template-columns: repeat(var(--rg1-feat-cols, 2), 1fr); gap: 20px; }
.rg1-feat-card {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: var(--rg1-feat-h, 560px); border-radius: 18px; overflow: hidden;
    background-color: #1b2129; background-size: cover; background-position: center;
    transition: filter .25s, transform .25s;
}
.rg1-feat-card:hover { filter: brightness(1.06); transform: translateY(-3px); }
/* El scrim lleva una parada intermedia: las fotos de Unsplash son muy claras
   (mar, cielo) y el degradado a dos paradas del diseño dejaba el blurb ilegible. */
.rg1-feat-card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.08) 72%, rgba(0,0,0,0) 100%);
}
/* Sin position:relative a propósito: el z-index funciona igual (es un flex item)
   y así el ::after estirado del enlace se ancla a la tarjeta, no al cuerpo. */
.rg1-feat-body { z-index: 2; padding: 30px 32px; pointer-events: none; }
/* Stretched link: el nombre del país es el enlace real y su ::after cubre toda
   la tarjeta, para que los chips de ciudad puedan ser enlaces propios encima. */
.rg1-feat-link { color: inherit; pointer-events: auto; }
.rg1-feat-link:hover { color: inherit; }
.rg1-feat-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rg1-badge {
    display: inline-block; background: #ffd520; color: #1c1c1c; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 5px; margin-bottom: 14px;
}
.rg1-feat-name {
    margin: 0; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -1.4px;
    color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.rg1-feat-meta { margin-top: 9px; font-size: 14.5px; font-weight: 600; color: #ffd520; }
/* 3 líneas máx.: el intro de país viene de BD y su largo varía mucho. */
.rg1-feat-blurb {
    margin: 10px 0 0; font-size: 14.5px; font-weight: 500; line-height: 1.55;
    color: rgba(255,255,255,.9); max-width: 420px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rg1-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; z-index: 2; }
.rg1-chip {
    font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28); padding: 6px 12px; border-radius: 50px;
    pointer-events: auto; transition: background .2s, border-color .2s;
}
.rg1-chip:hover { background: #ffd520; border-color: #ffd520; color: #1c1c1c; }
.rg1-fakebtn {
    display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #1c1c1c;
    font-size: 14.5px; font-weight: 700; padding: 12px 22px; border-radius: 50px; margin-top: 22px;
}

/* Resto: rejilla que absorbe la cola (auto-fit). */
.rg1-restwrap { margin-top: 44px; }
.rg1-restlabel { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.rg1-restlabel span {
    font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #8a8579; white-space: nowrap;
}
.rg1-restlabel::after { content: ""; flex: 1; height: 1px; background: #e8e5de; }
/* auto-fill y NO auto-fit: con auto-fit las pistas vacías colapsan y un solo
   país (Cuba en América Latina) se estiraba a todo el ancho — y con aspect-ratio
   4/5 eso son 1.400px de alto. Con auto-fill la tarjeta mantiene su columna. */
.rg1-rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.rg1-rest-card {
    position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
    background-color: #20262b; background-size: cover; background-position: center;
    display: flex; align-items: flex-end; transition: filter .25s, transform .25s;
}
.rg1-rest-card:hover { filter: brightness(1.12); transform: translateY(-3px); }
.rg1-rest-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.04) 62%);
}
.rg1-rest-body { position: relative; z-index: 2; padding: 0 15px 14px; }
.rg1-rest-name { margin: 0; font-size: 18px; font-weight: 700; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.rg1-rest-count { display: block; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82); margin-top: 2px; }

/* La sección de tours privados reusa .ct1-promos/.ct1-transport (city.css);
   aquí solo se le da el ancho de contenido del resto de bloques .cv1-*. */
.rg1 .ct1-promos { padding: 72px 80px; }
.rg1 .ct1-transport { min-height: 430px; padding: 44px 48px; }
.rg1 .ct1-transport h3 { font-size: 34px; letter-spacing: -1px; }
.rg1 .ct1-tlist a { font-size: 15px; font-weight: 700; padding: 13px 0; }
.rg1 .ct1-tlist li { border-bottom-color: rgba(255,255,255,.22); }

/* ---------- RESPONSIVE (mismo corte que el resto del rediseño) ---------- */
@media (max-width: 991px) {
    .rg1-hero { padding: 132px 22px 38px; }
    .rg1-hero h1 { font-size: 32px; letter-spacing: -.6px; }
    .rg1-hero h2 { font-size: 24px; }
    .rg1-hero-actions { gap: 12px; margin-top: 26px; }
    .rg1-cta-dark, .rg1-cta-ghost { font-size: 15px; padding: 14px 24px; }

    .rg1-countries { padding: 48px 22px; }
    .rg1-countries-head h2 { font-size: 27px; }
    .rg1-feat { grid-template-columns: 1fr; }
    .rg1-feat-card { min-height: 420px; }
    .rg1-feat-card::after { background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.66) 55%, rgba(0,0,0,.12) 88%, rgba(0,0,0,0) 100%); }
    .rg1-feat-body { padding: 20px; }
    .rg1-feat-name { font-size: 30px; letter-spacing: -1px; }
    .rg1-restwrap { margin-top: 34px; }
    .rg1-rest { grid-template-columns: 1fr 1fr; gap: 12px; }

    .rg1 .ct1-promos { padding: 48px 22px; }
    .rg1 .ct1-transport { min-height: 0; padding: 30px 22px; }
    .rg1 .ct1-transport h3 { font-size: 26px; letter-spacing: -.4px; }
}

/* Bajo 881px el navbar baja a 4.25rem y el hero necesita reservar más; bajo
   576px el navbar colapsa (más bajo) y el banner pasa a dos líneas, así que
   vuelve a bajar. Al final del archivo para ganar al bloque de 991px. */
@media (max-width: 880px) {
    .rg1-hero { padding-top: 160px; }
}
@media (max-width: 575px) {
    .rg1-hero { padding-top: 120px; }
}