/* Desktop styles — min-width: 1024px */
/* El gutter ya es fluido (3vw con tope) desde variables.css. */

/* Footer: contacto en 3 columnas */
.site-footer__contact {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

/* Header */
.site-header__inner { padding-block: 1.6rem; }
.nav-toggle { display: none; }
.site-header__cta { display: inline-flex; }
.site-brand img,
.site-brand .custom-logo { height: 5rem; }
.site-nav {
    position: static;
    display: block;
    padding: 0;
    background: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
}
.site-nav .site-nav__list {
    flex-direction: row;
    gap: 3.8rem;
}
.site-nav .site-nav__list a { font-size: 1.5rem; font-family: var(--font-body); }

/* Secciones */
.section { padding-block: var(--space-2xl); }
.section__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}
.section__head--center { flex-direction: column; align-items: center; }

/* Header overlay — la barra respira más sobre el hero (30px del .pen) */
.site-header--overlay .site-header__inner { padding-block: 3rem; }

/* ── HERO (frame de 1440×880 del .pen) ──────────────────────── */
.hero {
    min-height: 88rem;
    padding-block: 10.4rem 2rem;   /* 104px = alto de la barra flotante */
}
/* El cuerpo ocupa el ancho completo (la barra de confianza pasa por debajo
   del clúster) y el clúster flota anclado al hero, como en el .pen
   (left 872 / top 150 sobre un lienzo de 1440×880). */
.hero__grid { position: static; }

/* Barra de confianza: una sola fila con divisores verticales */
.trust-badges { flex-wrap: nowrap; }
.trust-badges__item { padding: .6rem 2.2rem; }
.trust-badges__item + .trust-badges__item::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 1px; height: 2.6rem;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .18);
}

/* Clúster flotante — sobresale 12px del borde de contenido, como en el .pen.
   --container-pad ya es la distancia exacta del borde del viewport al
   contenido (absorbe el sobrante en ultrawide), así que basta con restarle
   el saliente; antes había que sumarle el margen del contenedor. */
.hero__float {
    display: block;
    position: absolute;
    top: 15rem;
    right: calc(var(--container-pad) - 1.2rem);
    width: 50rem; height: 60rem;
}
.hero-card {
    left: 7.4rem; top: 4.4rem;
    width: 36.6rem; height: 47.4rem;
    transform: rotate(-3deg);
}
.hero-card:hover {
    transform: rotate(-3deg) translateY(-6px);
    box-shadow: 0 40px 84px -14px rgba(5, 32, 36, .70);
}
.hero-chip--expert { left: 1.4rem; top: 9rem;    transform: rotate(4deg); }
.hero-chip--social { left: 3rem;   top: 49.2rem; transform: rotate(2deg); }

/* Motivo de ruta — puntos ascendentes + avión */
.hero__motif {
    display: block;
    position: absolute;
    left: 42.6%; top: 16.8rem;
    z-index: 1;
    width: 33rem; height: 12rem;
    pointer-events: none;
}
.hero__dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .70);
}
.hero__dot:nth-child(1) { left: 0;      top: 9.8rem; width: .5rem; height: .5rem; background: var(--color-aqua); }
.hero__dot:nth-child(2) { left: 4.6rem; top: 8rem;   width: .4rem; height: .4rem; background: rgba(255,255,255,.55); }
.hero__dot:nth-child(3) { left: 9.2rem; top: 6.2rem; width: .5rem; height: .5rem; }
.hero__dot:nth-child(4) { left: 13.8rem;top: 4.6rem; width: .4rem; height: .4rem; background: var(--color-aqua); }
.hero__dot:nth-child(5) { left: 18.4rem;top: 3.2rem; width: .5rem; height: .5rem; }
.hero__dot:nth-child(6) { left: 22.8rem;top: 1.9rem; width: .4rem; height: .4rem; background: rgba(255,255,255,.55); }
.hero__dot:nth-child(7) { left: 27rem;  top: .9rem;  width: .5rem; height: .5rem; background: var(--color-aqua); }
.hero__plane {
    position: absolute;
    left: 29.4rem; top: -1.2rem;
    transform: rotate(18deg);
    color: rgba(255, 255, 255, .9);
}

/* Indicador de scroll */
.hero__scroll {
    display: grid;
    place-items: center;
    position: absolute;
    left: 50%; bottom: 2.8rem;
    transform: translateX(-50%);
    z-index: 2;
    width: 4.6rem; height: 4.6rem;
    border-radius: 2.3rem;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(5px);
    color: #fff;
    transition: background var(--transition);
}
.hero__scroll:hover { background: rgba(255, 255, 255, .18); }

/* ── TOURS DESTACADOS · CASCADA (lienzo 1440×580 del .pen) ──── */
.tours-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.tours-head__text { width: 68rem; }
.tours-head__title { font-size: 5rem; line-height: 5.1rem; }

/* Escenario fluido. Todas las medidas son las del .pen (lienzo 1440) como
   fracción de --c-scale, así el anillo entero conserva sus proporciones sea
   cual sea el ancho.
   --c-scale es el ancho de CONTENIDO, no el viewport: con el reparto 90/10 la
   cascada medida en vw se sale del bloque y los extremos se cortan contra el
   borde de la pantalla. Suelo 1296 (= contenido a 1440, por debajo no encoge)
   y techo 1920 (a partir de ahí queda estática y el aire absorbe).
   El anillo mide 0.865 × --c-scale, así que siempre cabe dentro del contenido. */
.cascade {
    --c-scale: clamp(129.6rem, var(--content-w), 192rem);

    --cc-w:  calc(var(--c-scale) * .2778);   /* central   400/1440 */
    --cc-h:  calc(var(--c-scale) * .3889);   /*           560/1440 */
    --cs-w:  calc(var(--c-scale) * .2444);   /* laterales 352/1440 */
    --cs-h:  calc(var(--c-scale) * .3424);   /*           493/1440 */
    --cf-w:  calc(var(--c-scale) * .2111);   /* extremos  304/1440 */
    --cf-h:  calc(var(--c-scale) * .2958);   /*           426/1440 */
    --c-near: calc(var(--c-scale) * .2083);  /* desplazamiento lateral 300/1440 */
    --c-far:  calc(var(--c-scale) * .3750);  /*                        540/1440 */
    --c-out:  calc(var(--c-scale) * .5417);  /* fuera de escena        780/1440 */
    --ct-c:  calc(var(--c-scale) * .0069);   /* tops       10/1440 */
    --ct-s:  calc(var(--c-scale) * .0299);   /*            43/1440 */
    --ct-f:  calc(var(--c-scale) * .0535);   /*            77/1440 */

    height: calc(var(--c-scale) * .4444);    /* lienzo    640/1440 */
    overflow: hidden;
    margin-top: 0;
}
.cascade__watermark {
    display: block;
    position: absolute;
    left: 26.4%; top: -5.8rem;
    z-index: 0;
    font: italic 600 clamp(29rem, 20.14vw, 38.67rem)/1 var(--font-heading);
    color: rgba(20, 69, 73, .11);
    white-space: nowrap;
    pointer-events: none;
}
.cascade__route {
    display: block;
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.cascade__route i {
    position: absolute;
    border-radius: 50%;
    background: rgba(30, 206, 204, .45);
}
.cascade__route i:nth-child(even) { background: rgba(29, 170, 106, .40); }
.cascade__route--tr { left: 79.9%; top: 4rem; }
.cascade__route--tr i:nth-child(1) { left: 0;      top: 0;      width: .4rem; height: .4rem; }
.cascade__route--tr i:nth-child(2) { left: 4.6rem; top: -1rem;  width: .5rem; height: .5rem; }
.cascade__route--tr i:nth-child(3) { left: 9.2rem; top: -1.8rem;width: .4rem; height: .4rem; }
.cascade__route--tr i:nth-child(4) { left: 13.8rem;top: -2.3rem;width: .5rem; height: .5rem; }
.cascade__route--tr i:nth-child(5) { left: 18.4rem;top: -2.6rem;width: .4rem; height: .4rem; }
.cascade__route--bl { left: 4.9%; top: 52rem; }
.cascade__route--bl i:nth-child(1) { left: 0;      top: 0;     width: .5rem; height: .5rem; }
.cascade__route--bl i:nth-child(2) { left: 4.6rem; top: 1.3rem;width: .4rem; height: .4rem; }
.cascade__route--bl i:nth-child(3) { left: 9.2rem; top: 2.3rem;width: .5rem; height: .5rem; }
.cascade__route--bl i:nth-child(4) { left: 13.8rem;top: 2.9rem;width: .4rem; height: .4rem; }

/* Las cinco posiciones */
.ccard.is-center {
    top: var(--ct-c);
    width: var(--cc-w); height: var(--cc-h);
    transform: translateX(-50%);
}
.ccard.is-left,
.ccard.is-right {
    top: var(--ct-s);
    width: var(--cs-w); height: var(--cs-h);
    opacity: .92;
    visibility: visible;
    pointer-events: auto;
}
.ccard.is-left  { z-index: 3; transform: translateX(calc(-50% - var(--c-near))) rotate(-1.5deg); }
.ccard.is-right { z-index: 4; transform: translateX(calc(-50% + var(--c-near))) rotate(1.5deg); }
.ccard.is-far-left,
.ccard.is-far-right {
    top: var(--ct-f);
    width: var(--cf-w); height: var(--cf-h);
    opacity: .68;
    visibility: visible;
    pointer-events: auto;
}
.ccard.is-far-left  { z-index: 1; transform: translateX(calc(-50% - var(--c-far))) rotate(-3deg); }
.ccard.is-far-right { z-index: 2; transform: translateX(calc(-50% + var(--c-far))) rotate(3deg); }

/* Posiciones de salida: sin ellas, la tarjeta que abandona el anillo vuelve
   hacia el centro (transform base) y se ve el rebote. Aquí sale hacia fuera. */
.ccard.is-out-left,
.ccard.is-out-right {
    top: var(--ct-f);
    width: var(--cf-w); height: var(--cf-h);
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    z-index: 0;
}
.ccard.is-out-left  { transform: translateX(calc(-50% - var(--c-out))) rotate(-4.5deg); }
.ccard.is-out-right { transform: translateX(calc(-50% + var(--c-out))) rotate(4.5deg); }

.ccard.is-left:hover,
.ccard.is-right:hover,
.ccard.is-far-left:hover,
.ccard.is-far-right:hover { opacity: 1; }

.cascade-pagination { padding-top: 2rem; }

/* Grids */
.tour-grid { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.dest-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 30rem;
    gap: 2rem;
}
.dest-card--wide { grid-column: span 2; grid-row: span 1; min-height: 0; }

/* Por qué — lienzo del .pen: pila de foto 584×700 + contenido 580, gap 76.
   El alto lo manda la columna de texto: la foto se estira hasta igualarla en
   vez de seguir su propia proporción. Con `aspect-ratio` la foto se disparaba
   en pantallas anchas (a 2000px pedía 966px de alto contra ~600 de texto) y la
   sección quedaba descompensada. El suelo de 46rem cubre el caso contrario,
   texto muy corto. */
.why__grid {
    grid-template-columns: minmax(0, 584fr) minmax(0, 580fr);
    gap: 7.6rem;
    align-items: stretch;
}
.why__content { align-self: center; }
/* La columna de la foto no aporta alto propio: la foto va colgada de las
   cuatro esquinas, así el alto de la fila lo fija el texto y la imagen se
   estira hasta igualarlo. El suelo cubre el caso de un texto muy corto. */
.why__media { min-height: 46rem; }
.why__photo {
    position: absolute;
    left: 0; right: 3.2rem;               /* el marco asoma 32px por la derecha */
    top: .8rem; bottom: 5.2rem;           /* hueco por el que asoma la cita */
    width: auto; height: auto;
    margin: 0;
    aspect-ratio: auto;
    z-index: 1;
}
.why__frame {
    display: block;
    position: absolute;
    left: 3.2rem; right: 0;
    top: 3.6rem; bottom: 3.2rem;
    border: 1.5px solid rgba(29, 170, 106, .35);
    border-radius: 3rem;
}
.why__rating { left: 2.4rem; top: 3.2rem; }
.why__quote {
    position: absolute;
    left: 3.6rem; bottom: 0;
    width: 35.2rem;
    margin: 0;
    z-index: 2;
}

.benefits { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 2.8rem; }

/* ── Experiencias destacadas — tarjetas 500/740 del .pen ─────── */
.exp-card {
    display: grid;
    grid-template-columns: minmax(0, 500fr) minmax(0, 740fr);
    min-height: 42rem;
}
.exp-card--reverse .exp-card__photo { order: 2; }
.exp-card__photo { height: auto; }
.exp-card__body {
    gap: 1.4rem;
    padding: 3.4rem 4.8rem;
    align-content: center;
}
.exp-card__foot { flex-wrap: nowrap; }
.exp-card__by {
    flex-wrap: nowrap;
    gap: 1.8rem;
}
/* Separador vertical entre guía y valoración, como en el .pen */
.exp-card__by .exp-card__rating { border-left: 1px solid var(--color-border); padding-left: 1.8rem; }

/* ── Testimonios — anillo de pastillas y decoración ──────────── */
.stories__stage {
    min-height: 46.4rem;                 /* lienzo 1240×464 del .pen */
    display: grid;
    align-items: center;
}
.stories__quotes { max-width: 72rem; margin-inline: auto; width: 100%; }

.stories__ring {
    display: block;
    position: absolute;
    inset: 0;
    margin: 0; padding: 0;
    list-style: none;
    pointer-events: none;
}
/* Las pastillas sin posición asignada quedan fuera de escena */
.story-chip {
    position: absolute;
    left: 50%; top: 50%;
    opacity: 0;
    pointer-events: none;
    transition: left .7s cubic-bezier(.22,.61,.36,1),
                top  .7s cubic-bezier(.22,.61,.36,1),
                opacity .5s ease,
                transform .7s cubic-bezier(.22,.61,.36,1);
}
.story-chip__btn { pointer-events: auto; }
.story-chip__btn:hover { background: rgba(255, 255, 255, .16); }
/* Cinco posiciones fijas, en orden horario: el anillo rota una posición por
   pase y la pastilla que sale de `is-s1` es la que pasa al centro. */
.story-chip.is-s1 { left:  6.0%; top: 45.7%; opacity: 1; pointer-events: auto; transform: rotate(-3deg); }
.story-chip.is-s2 { left:  4.7%; top: 80.4%; opacity: 1; pointer-events: auto; transform: rotate(-2deg); }
.story-chip.is-s3 { left: 80.0%; top: 71.6%; opacity: 1; pointer-events: auto; transform: rotate(3deg); }
.story-chip.is-s4 { left: 80.6%; top: 14.7%; opacity: 1; pointer-events: auto; transform: rotate(-3deg); }
.story-chip.is-s5 { left:  3.9%; top:  8.6%; opacity: 1; pointer-events: auto; transform: rotate(3deg); }

/* Puntos y avión en órbita elíptica. El ángulo de cada uno sale de `--d` más
   el giro acumulado `--spin`, que el JS incrementa en cada pase: así la
   decoración gira en horario junto con el anillo. Las comillas no se mueven. */
.stories__deco {
    display: block;
    position: absolute;
    inset: 0;
    --spin: 0deg;
    pointer-events: none;
}
.stories__dot,
.stories__plane {
    position: absolute;
    left: calc(50% + cos(var(--d) * 10.6deg + var(--spin)) * 47%);
    top:  calc(50% + sin(var(--d) * 10.6deg + var(--spin)) * 49%);
    transition: left .9s cubic-bezier(.4,.1,.2,1), top .9s cubic-bezier(.4,.1,.2,1);
}
.stories__dot {
    width: .5rem; height: .5rem;
    border-radius: 50%;
    background: var(--color-aqua);
    opacity: .85;
}
.stories__dot:nth-child(even) { width: .4rem; height: .4rem; background: #fff; opacity: .45; }
.stories__plane { --d: 27; color: rgba(255, 255, 255, .8); transform: rotate(-40deg); }  /* arco superior */

.stories__metric + .stories__metric {
    border-left: 1px solid rgba(255, 255, 255, .12);
    padding-left: 4rem;
}

/* ── Archivo de tours ───────────────────────────────────────── */
.tours-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-lg);
}
.tour-grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.cta-slab { padding: 5.4rem var(--space-xl); }

/* ── Journal / blog ─────────────────────────────────────────── */
.blog-toolbar { grid-template-columns: minmax(0, 1fr) 28rem; align-items: center; gap: var(--space-lg); }
.bfeat { grid-template-columns: minmax(0, 660fr) minmax(0, 620fr); min-height: 42rem; }
.bfeat__photo { height: auto; }
.bfeat__body { padding: 4.4rem 4.8rem; }
.blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Entrada del journal ────────────────────────────────────── */
.post-layout { grid-template-columns: minmax(0, 844fr) minmax(0, 380fr); gap: 5.6rem; align-items: start; }
.post-aside { position: sticky; top: 12rem; }

/* ── Página general ─────────────────────────────────────────── */
.general-layout { grid-template-columns: minmax(0, 360fr) minmax(0, 864fr); gap: 5.6rem; align-items: start; }
.general-aside { position: sticky; top: 12rem; }
.page-hero--short { min-height: 40rem; }

/* ── Pie — banda de newsletter, marca y columnas ────────────── */
.nl {
    grid-template-columns: minmax(0, 560fr) minmax(0, 481fr);
    align-items: center;
    gap: var(--space-xl);
}
.nl__form { justify-items: end; }
.nl__row { flex-wrap: nowrap; justify-content: flex-end; }
.nl__field { flex: 0 1 32rem; }

.site-footer__main {
    grid-template-columns: minmax(0, 300fr) minmax(0, 804fr);
    gap: var(--space-2xl);
    align-items: start;
}
/* Cuatro columnas de enlaces + la de contacto, algo más ancha */
.site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); }

/* En desktop el botón de WhatsApp estorba menos: menos hueco abajo */
.site-footer__bottom { padding-bottom: 8rem; }

/* ── CTA final — motivo de ruta y pastillas flotantes ───────── */
.final-cta { min-height: 64rem; }
.final-cta__motif,
.final-cta__floaters {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.final-cta__floaters .cta-chip { pointer-events: auto; }
/* Posiciones del .pen (lienzo 1440×640), en % para que sigan al contenedor */
.cta-chip--rating { left: 12.2%; top: 27.5%; transform: rotate(2deg); }
.cta-chip--agent  { left:  6.5%; top: 52.5%; transform: rotate(-3deg); }
.cta-chip--wa     { left: 78.3%; top: 49.7%; transform: rotate(2.5deg); }

/* ── Journal — rejilla 808/404 del .pen ─────────────────────── */
.journal__grid {
    grid-template-columns: minmax(0, 808fr) minmax(0, 404fr);
    align-items: stretch;
}
.jstory--lead .jstory__link { min-height: 66rem; }
.jstory--lead .jstory__body { padding: 17rem 4rem 3.6rem; }
/* Las dos tarjetas se reparten el alto de la destacada */
.journal__col { grid-template-rows: 1fr 1fr; }
.jstory--small .jstory__link { grid-template-rows: minmax(0, 1fr) auto; }
.jstory__photo { height: auto; min-height: 12rem; }

/* Stats */
.stats-band__row { grid-template-columns: repeat(4, 1fr); }
.stat { position: relative; }
.stat + .stat::before {
    content: "";
    position: absolute;
    left: calc(var(--space-md) * -1); top: 50%;
    width: 1px; height: 5.8rem;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .15);
}

/* CTA final */
.final-cta { min-height: 64rem; }

/* About */
.about-story__grid { grid-template-columns: minmax(0, 48rem) 1fr; gap: var(--space-xl); align-items: center; }
.about-story__badge { bottom: var(--space-lg); }
.values { grid-template-columns: repeat(4, 1fr); }
.team   { grid-template-columns: repeat(4, 1fr); }
.milestone { grid-template-columns: 10rem 1fr; }
.about-sustain { grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.about-sustain__stats { grid-template-columns: repeat(3, 1fr); }

/* Contact */
.contact-main { grid-template-columns: minmax(0, 836fr) minmax(0, 400fr); gap: var(--space-xl); align-items: start; }
.contact-form-card { padding: 4rem; }
.cform__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }