/*
Theme Name: Peru America Tours
Author: Hans Ccarita
Description: Travel Agency Theme
Author URI: https://github.com/hanszio
version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: peruamericatours
Tags: wordpress theme, travel agency
*/

:root {
    --red: #f74848;
    --yellow: #f6b433;
    --green: #1cb26a;
    --blue: #313552;
    --clear-blue: #212640;
    --background: #eeeeee;
}

/* ── BASE TIPOGRÁFICA (diseño Pencil) ───────────────────────── */
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
}
h1, h2, h3, h4,
.site-header__logo strong {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.12;
    letter-spacing: -.01em;
}

/* ── ICONOS SVG INLINE ──────────────────────────────────────── */
.perame-icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
    color: currentColor;
}

/* ── UTILIDADES ─────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* El ancho del contenido lo fija --container-pad (90/10 hasta 1920, ver
   variables.css). Estos envoltorios vienen de components.css con
   `max-width: var(--container-max)` + ese mismo padding: al ser border-box el
   tope de 1920 incluiría el padding y el contenido se quedaría corto en
   pantallas anchas. Se les quita el tope y manda el padding. */
.tour-page,
.site-footer__widgets { max-width: none; }
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.skip-link {
    position: absolute;
    top: -100px; left: var(--space-md);
    z-index: 200;
    background: var(--color-surface);
    color: var(--color-text);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-md); }
img { max-width: 100%; height: auto; }

/* ── BOTONES ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.6rem 2.8rem;
    border: 0;
    border-radius: 1.4rem;
    font: 600 1.5rem/1 var(--font-body);
    /* el .pen usa caja normal, no versalitas (components.css las fuerza) */
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn--brand {
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: 0 10px 28px -6px rgba(14, 122, 74, .33);
}
.btn--glass {
    background: rgba(255, 255, 255, .09);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .27);
    backdrop-filter: blur(12px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .16); }
.btn--outline {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    padding: 1.4rem 2.4rem;
}
.btn--outline .perame-icon { color: var(--color-green); }

/* ── EYEBROW ────────────────────────────────────────────────── */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 0 0 1.6rem;
    font: 600 1.2rem/1 var(--font-body);
    letter-spacing: .28em;
    color: var(--color-green);
    text-transform: uppercase;
}
.eyebrow--light { color: var(--color-aqua); }
.eyebrow__tick {
    display: block;
    width: 3.4rem; height: 2px;
    background: currentColor;
}

/* ── HEADER ─────────────────────────────────────────────────── */
/* Dos modos:
   · por defecto — barra clara sólida (páginas internas).
   · .site-header--overlay — barra transparente flotando sobre el hero
     (portada, según el .pen). Al hacer scroll pasa a sólida y el logo
     recupera su color de marca. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(23, 54, 62, .06);
    transition: box-shadow var(--transition), padding var(--transition), background var(--transition);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    max-width: none;
    margin-inline: auto;
    padding: 1.4rem var(--container-pad);
}
.site-header.is-scrolled {
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-md);
}

/* Modo overlay — transparente sobre el hero */
.site-header--overlay {
    position: fixed;
    inset-inline: 0;
    top: 0;
}
.site-header--overlay:not(.is-scrolled) {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}
/* Logo en blanco mientras la barra es transparente */
.site-header--overlay:not(.is-scrolled) .site-brand img,
.site-header--overlay:not(.is-scrolled) .site-brand .custom-logo {
    filter: brightness(0) invert(1);
}
.site-header--overlay:not(.is-scrolled) .site-brand__name { color: #fff; }
.site-header--overlay:not(.is-scrolled) .site-nav__list a { color: #E4EFEF; }
.site-header--overlay:not(.is-scrolled) .site-nav__list a:hover,
.site-header--overlay:not(.is-scrolled) .site-nav__list .current-menu-item > a { color: var(--color-aqua); }
.site-header--overlay:not(.is-scrolled) .locale-chip__btn {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
    backdrop-filter: blur(5px);
}
.site-header--overlay:not(.is-scrolled) .locale-chip__btn .perame-icon,
.site-header--overlay:not(.is-scrolled) .locale-chip__caret { color: #fff; }
.site-header--overlay:not(.is-scrolled) .site-header__cta {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .27);
    backdrop-filter: blur(5px);
}
.site-header--overlay:not(.is-scrolled) .nav-toggle {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .27);
    backdrop-filter: blur(5px);
}
.site-header--overlay:not(.is-scrolled) .nav-toggle__bar { background: #fff; }

/* Marca */
.site-brand {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    text-decoration: none;
}
.site-brand img,
.site-brand .custom-logo {
    display: block;
    width: auto;
    height: 4.8rem;
}
/* Fallback textual (sin logo) */
.site-brand__emblem {
    display: grid;
    place-items: center;
    width: 4.4rem; height: 4.4rem;
    border-radius: 1.3rem;
    background: var(--gradient-brand);
    color: #fff;
}
.site-brand__wordmark { display: grid; gap: .1rem; }
.site-brand__name {
    font: 600 2.1rem/1 var(--font-heading);
    color: var(--color-primary);
}
.site-brand__sub {
    font: 600 .9rem/1 var(--font-body);
    letter-spacing: .4em;
    color: var(--color-green);
}

/* Navegación */
.site-nav__list {
    display: flex;
    align-items: center;
    gap: 3.2rem;
    margin: 0; padding: 0;
    list-style: none;
}
.site-nav__list a {
    font: 500 1.5rem/1 var(--font-body);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: var(--color-green); }

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.site-header__cta {
    display: none; /* se muestra en desktop; en móvil está el menú + WhatsApp */
    padding: 1.2rem 2.2rem;
    border-radius: 1.2rem;
    font-size: 1.5rem;
    background: var(--gradient-brand);
    color: #fff;
    border: 0;
}
.site-brand img,
.site-brand .custom-logo { height: 4rem; }

/* Selector de idioma */
.locale-chip { position: relative; }
.locale-chip__flag {
    width: 2rem;
    height: 1.4rem;
    object-fit: cover;
    border-radius: .2rem;
    box-shadow: 0 0 0 1px rgb(0 0 0 / .08);
    flex-shrink: 0;
}
.locale-chip__btn {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.6rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font: 600 1.3rem/1 var(--font-body);
    cursor: pointer;
}
.locale-chip__btn .perame-icon { color: var(--color-green); }
.locale-chip__caret { color: var(--color-text-muted); transition: transform var(--transition); }
.locale-chip__btn[aria-expanded="true"] .locale-chip__caret { transform: rotate(180deg); }
.locale-chip__menu {
    position: absolute;
    top: calc(100% + .8rem); right: 0;
    min-width: 14rem;
    margin: 0; padding: .6rem;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    display: none;
}
.locale-chip__btn[aria-expanded="true"] + .locale-chip__menu { display: block; }
.locale-chip__menu a {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.2rem;
    border-radius: .8rem;
    color: var(--color-text);
    font: 500 1.4rem/1 var(--font-body);
    text-decoration: none;
}
.locale-chip__menu .locale-chip__flag {
    width: 2rem;
    height: 1.4rem;
    flex-shrink: 0;
}
.locale-chip__menu a:hover { background: var(--color-surface-muted); }
.locale-chip__menu .is-current a { color: var(--color-green); font-weight: 600; }

/* Hamburguesa */
.nav-toggle {
    display: grid;
    gap: .5rem;
    width: 4.4rem; height: 4.4rem;
    padding: 1.1rem;
    align-content: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 1.2rem;
    background: var(--color-surface);
    cursor: pointer;
}
.nav-toggle__bar {
    display: block;
    height: 2px;
    background: var(--color-primary);
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* Nav en mobile */
.site-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-content: center;
    background: rgba(20, 69, 73, .97);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}
.site-nav.is-open { opacity: 1; visibility: visible; }
.site-nav .site-nav__list {
    flex-direction: column;
    gap: var(--space-lg);
    text-align: center;
}
.site-nav .site-nav__list a { font-size: 2.4rem; font-family: var(--font-heading); }

/* ── SECCIONES ──────────────────────────────────────────────── */
/* components.css limita .section a --container-max con margin auto; se anula
   porque el ancho lo marca el .container de dentro. Si no, hay doble sangrado
   y las bandas de color (y la cascada) no llegan al borde del viewport. */
.section {
    max-width: none;
    margin-inline: 0;
    padding: var(--space-xl) 0;
}
.section--bg      { background: var(--color-bg); }
.section--surface { background: var(--color-surface); }
.section__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.section__head--center { align-items: center; text-align: center; }
.section__title {
    margin: 0;
    font-size: clamp(3.2rem, 6vw, 5rem);
    line-height: 1.02;
}
.section__title--light { color: #fff; }

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 64rem;
    padding-block: 12rem 6rem;   /* hueco superior para la barra flotante */
    overflow: hidden;
    background: var(--color-dark-teal);
    isolation: isolate;
}
.hero__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}
.hero__bg--video { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .hero__bg--video { display: none; }
}
/* Degradados del .pen: oscuro arriba (legibilidad de la barra) + velado
   lateral tras el titular. El .pen lo vela por la derecha porque su foto
   ya era oscura a la izquierda; con esta imagen se invierte el eje. */
.hero__overlay {
    position: absolute; inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(90deg, rgba(7,38,42,.76) 0%, rgba(7,38,42,0) 62%),
        linear-gradient(0deg, rgba(8,39,43,.35) 0%, rgba(8,39,43,.15) 42%, rgba(7,38,42,.95) 100%);
}
.hero__grid { position: relative; }
.hero__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.8rem;
}
.hero .eyebrow { margin: 0; font-size: 1.3rem; letter-spacing: .23em; }
.hero .eyebrow__tick { width: 4rem; }
.hero__title {
    max-width: 60rem;
    margin: 0;
    font-size: clamp(4.2rem, 9vw, 8.4rem);
    line-height: .95;
    color: #fff;
}
.hero__subtitle {
    max-width: 54.5rem;
    margin: 0;
    font-size: 1.9rem;
    line-height: 2.9rem;
    color: var(--color-on-dark-soft);
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}
.hero__actions .btn {
    padding: 1.7rem 3rem;
    font-size: 1.6rem;
}

/* Barra de confianza — pastilla de cristal con divisores */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0; padding: 1.2rem 1rem;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(9px);
}
.trust-badges__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .6rem 1.2rem;
    font: 500 1.4rem/1 var(--font-body);
    color: #fff;
}
.trust-badges__item .perame-icon { color: var(--color-aqua); }

/* ── HERO · CLÚSTER FLOTANTE ────────────────────────────────── */
.hero__float { display: none; }          /* solo desktop */
.hero__motif { display: none; }
.hero__scroll { display: none; }

.hero-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 2.4rem;
    box-shadow: 0 32px 72px -14px rgba(5, 32, 36, .62);
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition);
}
.hero-card__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* El .pen trae el degradado invertido (oscuro arriba) y deja el texto
   ilegible; aquí se vela la mitad inferior, que es donde va el contenido. */
.hero-card__scrim {
    position: absolute; inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(4,26,29,.10) 0%, rgba(5,32,36,.30) 32%, rgba(5,32,36,.90) 72%, rgba(4,26,29,.98) 100%);
}
.hero-card__bookmark {
    position: absolute;
    top: 1.6rem; right: 1.4rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 3.8rem; height: 3.8rem;
    border-radius: 1.9rem;
    border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(4px);
    color: #fff;
}
.hero-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 0 2rem 2rem;
}
.hero-card__titlerow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.hero-card__title {
    margin: 0;
    font: 600 2.8rem/2.8rem var(--font-heading);
    color: #fff;
}
.hero-card__price {
    flex: none;
    padding: .7rem 1.3rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(4px);
    font: 700 1.5rem/1 var(--font-body);
    color: #fff;
}
.hero-card__desc {
    margin: 0;
    font: 400 1.3rem/1.9rem var(--font-body);
    color: var(--color-on-dark-soft);
}
.hero-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}
.hero-card__pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
    font: 500 1.2rem/1 var(--font-body);
    color: #fff;
}
.hero-card__pill--rating { font-weight: 600; }
.hero-card__pill .perame-icon { color: var(--color-aqua); }
.hero-card__book {
    display: grid;
    place-items: center;
    padding: 1.3rem 0;
    border-radius: var(--radius-pill);
    background: #fff;
    font: 700 1.5rem/1 var(--font-body);
    color: var(--color-text);
}

/* Chips flotantes */
.hero-chip {
    position: absolute;
    display: flex;
    align-items: center;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-text);
}
.hero-chip__ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.6rem; height: 2.6rem;
    border-radius: var(--radius-pill);
    background: rgba(29, 170, 106, .15);
    color: var(--color-green);
}
.hero-chip__ic--alt { background: rgba(30, 206, 204, .18); color: var(--color-dark-teal); }
.hero-chip--expert {
    gap: .9rem;
    padding: .8rem 1.6rem .8rem .9rem;
    box-shadow: 0 12px 28px -8px rgba(5, 32, 36, .35);
}
.hero-chip__text { font: 600 1.2rem/1 var(--font-body); }
.hero-chip--social {
    gap: 1.1rem;
    padding: .9rem 1.8rem .9rem 1rem;
    box-shadow: 0 14px 32px -8px rgba(5, 32, 36, .35);
}
.hero-chip__col { display: grid; gap: .2rem; }
.hero-chip__t1 { font: 700 1.3rem/1 var(--font-body); }
.hero-chip__t2 {
    display: flex;
    align-items: center;
    gap: .4rem;
    font: 500 1.1rem/1 var(--font-body);
    color: var(--color-text-muted);
}
.hero-chip__t2 .perame-icon { color: var(--yellow); }

/* ── TOURS DESTACADOS · CARRUSEL EN CASCADA ─────────────────── */
/* Cinco posiciones fijas por las que rotan las tarjetas; la central es la
   destacada y muestra ficha completa. Móvil: solo la central. */
.tours-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.tours-head__text { display: flex; flex-direction: column; gap: 1.6rem; }
.tours-head__title {
    margin: 0;
    max-width: 60rem;
    font-size: clamp(3.2rem, 6vw, 5rem);
    line-height: 1.02;
}
.tours-head__sub {
    margin: 0;
    max-width: 50rem;
    font: 400 1.6rem/2.5rem var(--font-body);
    color: var(--color-text-muted);
}
.tours-nav { display: flex; gap: 1.4rem; }
.tours-nav__btn {
    display: grid;
    place-items: center;
    width: 5.6rem; height: 5.6rem;
    padding: 0;
    border-radius: 2.8rem;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.tours-nav__btn--prev {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
}
.tours-nav__btn--next {
    border: 0;
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: 0 8px 20px -4px rgba(14, 122, 74, .30);
}
.tours-nav__btn:hover { transform: translateY(-2px); }

/* Chips de categoría */
.tour-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .4rem 0 1rem;
}
.tour-filters__chip {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 2rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font: 500 1.4rem/1 var(--font-body);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.tour-filters__chip:hover { color: var(--color-text); }
.tour-filters__chip.is-active {
    border-color: transparent;
    background: var(--gradient-brand);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 14px -3px rgba(14, 122, 74, .30);
}

/* Escenario */
.cascade {
    position: relative;
    height: 50rem;
    margin-top: var(--space-md);
}
.cascade__watermark,
.cascade__route { display: none; }

/* Tarjeta */
.ccard {
    position: absolute;
    left: 50%; top: 0;
    width: min(32rem, calc(100vw - 4rem));
    height: 44rem;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1),
                opacity .7s ease, width .7s ease, height .7s ease;
}
.ccard.is-filtered { display: none; }
.ccard.is-center {
    z-index: 5;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.ccard__link {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%; height: 100%;
    overflow: hidden;
    border-radius: 2.2rem;
    box-shadow: var(--shadow-lg);
    text-decoration: none;
}
.ccard.is-center .ccard__link { border-radius: 2.6rem; box-shadow: var(--shadow-xl); }
.ccard__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
/* El .pen vela la parte alta y deja el texto ilegible: se vela abajo. */
.ccard__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,34,38,0) 30%, rgba(6,34,38,.92) 100%);
}
.ccard.is-center .ccard__scrim {
    background: linear-gradient(180deg, rgba(6,34,38,0) 20%, rgba(6,34,38,.36) 58%, rgba(6,34,38,.95) 100%);
}
.ccard__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.2rem;
}
.ccard.is-center .ccard__content { justify-content: space-between; padding: 2.6rem; }

.ccard__top { display: none; }
.ccard.is-center .ccard__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.ccard__badge {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(5px);
    font: 700 1.1rem/1 var(--font-body);
    letter-spacing: .1rem;
    color: #fff;
}
.ccard__badge .perame-icon { color: var(--yellow); }
.ccard__fav {
    display: grid;
    place-items: center;
    flex: none;
    width: 4rem; height: 4rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 2rem;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(5px);
    color: #fff;
}

.ccard__bottom { display: flex; flex-direction: column; gap: .6rem; }
.ccard.is-center .ccard__bottom { gap: 1.6rem; }
.ccard__eyebrow {
    margin: 0;
    font: 600 1.2rem/1 var(--font-body);
    letter-spacing: .15rem;
    color: var(--color-aqua);
}
.ccard.is-center .ccard__eyebrow { display: none; }
.ccard__title {
    margin: 0;
    font: 600 2.4rem/2.4rem var(--font-heading);
    color: #fff;
}
.ccard.is-center .ccard__title { font-size: 3.3rem; line-height: 3.3rem; }

.ccard__meta,
.ccard__divider,
.ccard__pricerow { display: none; }
.ccard.is-center .ccard__meta { display: flex; align-items: center; gap: 1.4rem; }
.ccard__metaitem {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font: 500 1.4rem/1 var(--font-body);
    color: var(--color-on-dark-soft);
}
.ccard__metaitem .perame-icon { color: var(--color-aqua); }
.ccard__metadot {
    width: .4rem; height: .4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
}
.ccard.is-center .ccard__divider {
    display: block;
    flex: none;              /* si no, el flex column lo aplasta a 0 */
    width: 100%; height: 1px;
    background: rgba(255, 255, 255, .15);
}
.ccard.is-center .ccard__pricerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
}
.ccard__price { display: grid; gap: .2rem; }
.ccard__from {
    font: 600 1rem/1 var(--font-body);
    letter-spacing: .12rem;
    color: var(--color-aqua);
}
.ccard__amount { font: 600 3rem/3rem var(--font-heading); color: #fff; }
.ccard__cta {
    display: grid;
    place-items: center;
    flex: none;
    width: 5.8rem; height: 5.8rem;
    border-radius: 2.9rem;
    background: var(--gradient-brand);
    box-shadow: 0 8px 20px -4px rgba(14, 122, 74, .40);
    color: #fff;
}

/* Paginación */
.cascade-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    padding: 2rem var(--container-pad) 0;
}
.cascade-pagination__dot {
    width: .9rem; height: .9rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background: var(--color-border-strong);
    cursor: pointer;
    transition: width var(--transition), background var(--transition);
}
.cascade-pagination__dot.is-active { width: 2.8rem; background: var(--color-green); }

/* ── GRID DE TOURS ──────────────────────────────────────────── */
.tour-grid,
.dest-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
}

/* ── PAGE HERO (archivos y páginas internas) ────────────────── */
.page-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 34rem;
    padding-block: var(--space-xl);
    overflow: hidden;
    background: var(--color-dark-teal);
    isolation: isolate;
}
.page-hero__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}
.page-hero__overlay {
    position: absolute; inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6,34,38,.55) 0%, rgba(6,34,38,.4) 40%, rgba(6,34,38,.9) 100%);
}
.page-hero__body { position: relative; max-width: 68rem; }
.page-hero__body { max-width: 82rem; }
.page-hero__title {
    margin: 0 0 var(--space-md);
    font-size: clamp(3.4rem, 6vw, 7rem);
    line-height: .98;
    color: #fff;
}
/* Segunda línea en itálica aqua, como en el .pen */
.page-hero__title em {
    display: block;
    margin-top: .2rem;
    font-size: .77em;
    font-weight: 500;
    font-style: italic;
    line-height: 1;
    color: var(--color-aqua);
}
.page-hero__text {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.55;
    color: var(--color-on-dark-soft);
}

/* ── TOOLBAR / FILTROS ──────────────────────────────────────── */
.tours-toolbar {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 1rem 1.9rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font: 600 1.4rem/1 var(--font-body);
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chip:hover { border-color: var(--color-green); color: var(--color-green); }
.chip--active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(14, 122, 74, .4);
}
.tours-toolbar__side { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.tours-toolbar__count {
    margin: 0;
    font: 500 1.4rem/1 var(--font-body);
    color: var(--color-text-muted);
}
.tours-toolbar__sep { width: 1px; height: 2.2rem; background: var(--color-border-strong); }
/* Select de orden: el chevron va encima y el `select` transparente debajo */
.tours-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 1rem 1.6rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}
.tours-sort select {
    appearance: none;
    padding-right: 2.4rem;
    border: 0;
    background: none;
    font: 500 1.4rem/1 var(--font-body);
    color: var(--color-text);
    cursor: pointer;
}
.tours-sort select:focus { outline: none; }
.tours-sort .perame-icon {
    position: absolute;
    right: 1.4rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* ── TARJETA DE TOUR OSCURA (archivo y categorías) ──────────── */
.htour {
    position: relative;
    overflow: hidden;
    border-radius: 2.4rem;
    background: var(--color-dark-teal);
    box-shadow: 0 2rem 4.4rem -1.2rem rgba(10, 46, 51, .35);
    isolation: isolate;
}
.htour__link { display: grid; align-content: end; min-height: 47rem; height: 100%; }
.htour__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.htour__scrim {
    position: absolute; inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(5,32,36,0) 30%, rgba(5,32,36,.90) 72%, rgba(4,26,29,.99) 100%);
}
.htour__cat {
    position: absolute;
    left: 1.8rem; top: 1.8rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-pill);
    background: rgba(6, 34, 38, .34);
    backdrop-filter: blur(10px);
    font: 600 1.1rem/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}
.htour__body { display: grid; gap: 1.2rem; padding: 0 2rem 2rem; }
.htour__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; }
.htour__title { margin: 0; font: 600 2.6rem/1.05 var(--font-heading); color: #fff; }
.htour__price {
    flex: none;
    padding: .7rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
    font: 600 1.4rem/1 var(--font-body);
    color: #fff;
}
.htour__pills { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.htour__pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
    font: 500 1.2rem/1 var(--font-body);
    color: #fff;
}
.htour__pill--rating .perame-icon { color: var(--color-aqua); fill: currentColor; }
.htour__cta {
    display: grid;
    place-items: center;
    padding: 1.3rem;
    border-radius: var(--radius-pill);
    background: #fff;
    font: 700 1.5rem/1 var(--font-body);
    color: var(--color-text);
    transition: background var(--transition);
}
.htour__link:hover .htour__cta { background: var(--color-aqua); }

/* ── PAGINACIÓN ─────────────────────────────────────────────── */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-top: var(--space-xl);
}
.pagination__item .page-numbers {
    display: grid;
    place-items: center;
    min-width: 4.4rem; height: 4.4rem;
    padding: 0 1.2rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font: 600 1.4rem/1 var(--font-body);
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.pagination__item .page-numbers:hover { border-color: var(--color-green); color: var(--color-green); }
.pagination__item .page-numbers.current {
    background: var(--gradient-brand);
    border-color: transparent;
    box-shadow: 0 .8rem 2rem -.4rem rgba(14, 122, 74, .30);
    color: #fff;
}
.pagination__item .page-numbers.dots { border-color: transparent; background: transparent; }

.tours-empty {
    padding: var(--space-xl) 0;
    text-align: center;
    font-size: 1.6rem;
    color: var(--color-text-muted);
}

/* ── CTA SLAB ───────────────────────────────────────────────── */
.cta-slab {
    position: relative;
    overflow: hidden;
    margin-top: var(--space-2xl);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    background: var(--gradient-slab);
    border-radius: 2.4rem;
    color: #fff;
}
.cta-slab__inner { display: grid; justify-items: center; gap: 2.2rem; }
.cta-slab__title { margin: 0; font: 600 clamp(2.8rem, 5vw, 4.6rem)/1.05 var(--font-heading); color: #fff; }
.cta-slab__text { max-width: 60ch; margin: 0; font-size: 1.6rem; line-height: 1.55; color: var(--color-on-dark-soft); }
.cta-slab__btn {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: 1.5rem 2.8rem;
    border-radius: var(--radius-pill);
    background: #fff;
    box-shadow: 0 1.2rem 2.6rem -.6rem rgba(5, 32, 36, .35);
    font: 700 1.5rem/1 var(--font-body);
    color: var(--color-navy);
}
.cta-slab__btn .perame-icon { color: var(--color-green); }
.cta-slab__btn:hover { color: var(--color-green); }
/* Ruta punteada de fondo (misma idea que el CTA final del home) */
.cta-slab__motif { position: absolute; inset: 0; pointer-events: none; }
.cta-slab__motif i {
    position: absolute;
    left: calc(18% + var(--d) * 4.6%);
    top: calc(78% - var(--d) * 4.4%);
    width: .4rem; height: .4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
}
.cta-slab__motif i:nth-child(even) { background: rgba(30, 206, 204, .55); }
.cta-slab__plane { position: absolute; left: 84%; top: 15%; color: rgba(255, 255, 255, .8); transform: rotate(-28deg); }

/* Píldora de sección sobre foto oscura (hero de archivo y CTA slab) */
.pill-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    margin: 0 0 1.4rem;
    padding: .7rem 1.5rem .7rem .8rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
    font: 600 1.2rem/1 var(--font-body);
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--color-aqua);
}
.pill-eyebrow .perame-icon { color: var(--color-aqua); }
.pill-eyebrow__ic {
    display: grid;
    place-items: center;
    width: 2.2rem; height: 2.2rem;
    border-radius: .7rem;
    background: rgba(30, 206, 204, .15);
}
/* Variante clara: sobre fondo blanco (tarjeta de contacto, FAQ) */
.pill-eyebrow--light {
    padding: .8rem 1.5rem;
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    backdrop-filter: none;
    color: var(--color-green);
}
.pill-eyebrow--light .perame-icon { color: var(--color-green); }

/* ═══════════════ JOURNAL / BLOG ═══════════════ */
/* Diseño: .pen → «Page — Blog». */
.blog-toolbar { display: grid; gap: var(--space-md); margin-bottom: var(--space-lg); }
.blog-search {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.6rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}
.blog-search .perame-icon { flex: none; color: var(--color-text-muted); }
.blog-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: 400 1.35rem/1 var(--font-body);
    color: var(--color-text);
}
.blog-search input:focus { outline: none; }

/* Etiqueta de categoría */
.btag {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.1rem;
    border-radius: var(--radius-pill);
    background: rgba(7, 84, 104, .12);
    font: 700 1rem/1 var(--font-body);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--color-navy);
}

/* Fila de meta: autor · fecha · lectura */
.bmeta {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    margin: 0;
    font: 400 1.3rem/1 var(--font-body);
    color: var(--color-text-muted);
}
.bmeta strong { font-weight: 600; color: var(--color-text); }
.bmeta i { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border-strong); }

/* Entrada destacada */
.bfeat {
    display: grid;
    overflow: hidden;
    margin-bottom: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: 2.4rem;
    background: var(--color-surface);
    box-shadow: 0 1.8rem 4.4rem -1.4rem rgba(23, 54, 62, .14);
}
.bfeat__photo { position: relative; display: block; height: 24rem; overflow: hidden; }
.bfeat__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bfeat__badge {
    position: absolute;
    left: 2.4rem; top: 2.4rem;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1.4rem;
    border-radius: var(--radius-pill);
    background: rgba(6, 34, 38, .8);
    backdrop-filter: blur(10px);
    font: 700 1.05rem/1 var(--font-body);
    letter-spacing: .14em;
    color: #fff;
}
.bfeat__badge .perame-icon { color: var(--color-aqua); fill: currentColor; }
.bfeat__body { display: grid; justify-items: start; gap: 1.6rem; padding: 3rem 2.4rem; align-content: center; }
.bfeat__title { margin: 0; font: 600 clamp(2.6rem, 4.4vw, 3.4rem)/1.06 var(--font-heading); color: var(--color-text); }
.bfeat__title a:hover { color: var(--color-green); }
.bfeat__excerpt { margin: 0; font-size: 1.5rem; line-height: 1.6; color: var(--color-text-muted); }
.bfeat__cta {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: 1.3rem 2.6rem;
    border-radius: var(--radius-pill);
    background: var(--color-green);
    font: 600 1.5rem/1 var(--font-body);
    color: #fff;
}
.bfeat__cta:hover { filter: brightness(1.06); color: #fff; }

/* Rejilla de entradas */
.blog-grid { display: grid; gap: 2.4rem; }
.bcard {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    background: var(--color-surface);
    box-shadow: 0 1.4rem 3.4rem -1.4rem rgba(23, 54, 62, .12);
}
.bcard__link { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.bcard__photo { position: relative; display: block; height: 21rem; overflow: hidden; }
.bcard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bcard__body { display: grid; justify-items: start; align-content: start; gap: 1rem; padding: 1.8rem 2.2rem 2rem; }
.bcard__title { margin: 0; font: 600 2.1rem/1.12 var(--font-heading); color: var(--color-text); }
.bcard__link:hover .bcard__title { color: var(--color-green); }
.bcard__excerpt { margin: 0; font-size: 1.3rem; line-height: 1.5; color: var(--color-text-muted); }
.bcard__go {
    display: grid;
    place-items: center;
    margin-left: auto;
    width: 3.4rem; height: 3.4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    transition: transform var(--transition);
}
.bcard__link:hover .bcard__go { transform: translate(.2rem, -.2rem); }

/* ═══════════════ ENTRADA DEL JOURNAL ═══════════════ */
/* Diseño: .pen → «Page — Blog Post». */
.post-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.8rem 0 0; font-size: 1.35rem; color: var(--color-on-dark-soft); }
.post-byline strong { font-weight: 600; color: #fff; }
.post-byline i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.post-byline__avatar { width: 4rem; height: 4rem; border-radius: var(--radius-pill); }

.post-layout { display: grid; gap: var(--space-xl); }

/* Cuerpo del artículo */
.prose { font-size: 1.6rem; line-height: 1.75; color: var(--color-text-muted); }
.prose > p { margin: 0 0 1.8rem; }
.prose > p:first-of-type { font-size: 1.85rem; line-height: 1.6; color: var(--color-text); }
.prose h2 {
    position: relative;
    margin: 4.2rem 0 2.6rem;
    padding-bottom: 1.6rem;
    font: 600 clamp(2.4rem, 3.4vw, 3rem)/1.1 var(--font-heading);
    color: var(--color-text);
    scroll-margin-top: 12rem;
}
/* Subrayado corto verde bajo cada H2, como en el .pen */
.prose h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 3.4rem; height: 2px;
    background: var(--color-green);
}
.prose h3 { margin: 3rem 0 1.4rem; font: 600 2.1rem/1.2 var(--font-heading); color: var(--color-text); }
.prose ul, .prose ol { margin: 0 0 2rem; padding-left: 0; list-style: none; }
.prose ul li {
    position: relative;
    margin-bottom: 1.2rem;
    padding-left: 3rem;
}
.prose ul li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: 1.6rem; height: 1.6rem;
    border: 2px solid var(--color-green);
    border-radius: 50%;
}
.prose ol { counter-reset: perame-ol; }
.prose ol li { position: relative; margin-bottom: 1.2rem; padding-left: 3rem; counter-increment: perame-ol; }
.prose ol li::before {
    content: counter(perame-ol);
    position: absolute;
    left: 0; top: .1em;
    display: grid;
    place-items: center;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    background: var(--color-surface-muted);
    font: 700 1.2rem/1 var(--font-body);
    color: var(--color-navy);
}
.prose blockquote {
    margin: 3rem 0;
    padding: 2.4rem 2.8rem;
    border-left: 3px solid var(--color-green);
    border-radius: 0 1.6rem 1.6rem 0;
    background: var(--color-surface-muted);
    font: italic 500 1.85rem/1.5 var(--font-heading);
    color: var(--color-navy);
}
.prose blockquote p { margin: 0; }
.prose img { max-width: 100%; height: auto; border-radius: 1.8rem; }
.prose figure { margin: 3rem 0; }
.prose figcaption { margin-top: 1rem; font-size: 1.25rem; color: var(--color-text-muted); }
.prose a { color: var(--color-green); text-decoration: underline; text-underline-offset: .25em; }
.prose table { width: 100%; border-collapse: collapse; margin: 2.4rem 0; font-size: 1.4rem; }
.prose thead { background: var(--color-navy); color: #fff; }
.prose th, .prose td { padding: 1.2rem 1.6rem; text-align: left; }
.prose tbody tr { border-bottom: 1px solid var(--color-border); }

.post-tags { display: flex; flex-wrap: wrap; gap: .8rem; margin: 3.4rem 0 0; padding: 0; list-style: none; }
.post-tags a {
    display: inline-block;
    padding: .7rem 1.4rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    font: 500 1.25rem/1 var(--font-body);
    color: var(--color-text-muted);
}
.post-tags a:hover { color: var(--color-green); }

.post-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--color-border);
    font-size: 1.4rem;
    color: var(--color-text);
}
.post-share ul { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.post-share a {
    display: grid;
    place-items: center;
    width: 3.8rem; height: 3.8rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
}
.post-share a:hover { border-color: var(--color-green); color: var(--color-green); }

/* Barra lateral */
.post-aside { display: grid; gap: 2rem; align-content: start; }
.toc-card,
.side-tour,
.side-help { border-radius: 2rem; }
.toc-card {
    padding: 2.2rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.toc-card__title { margin: 0 0 1.4rem; font: 600 2.2rem/1.2 var(--font-heading); color: var(--color-text); }
.toc-card ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.toc-card a {
    display: block;
    padding-left: 1.4rem;
    border-left: 3px solid var(--color-border);
    font: 500 1.35rem/1.4 var(--font-body);
    color: var(--color-text-muted);
}
.toc-card a:hover { border-color: var(--color-green); color: var(--color-text); }

.side-tour {
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 1.4rem 3.4rem -1.4rem rgba(23, 54, 62, .12);
}
.side-tour__photo { position: relative; display: block; height: 17rem; overflow: hidden; }
.side-tour__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.side-tour__badge {
    position: absolute;
    left: 1.8rem; top: 1.8rem;
    padding: .6rem 1.2rem;
    border-radius: var(--radius-pill);
    background: rgba(6, 34, 38, .8);
    backdrop-filter: blur(10px);
    font: 700 1rem/1 var(--font-body);
    letter-spacing: .12em;
    color: #fff;
}
.side-tour__body { display: grid; gap: 1rem; padding: 1.8rem 2.2rem 2.2rem; }
.side-tour__title { font: 600 2rem/1.15 var(--font-heading); color: var(--color-text); }
.side-tour__meta { display: flex; align-items: center; gap: .7rem; font-size: 1.25rem; color: var(--color-text-muted); }
.side-tour__meta .perame-icon { color: var(--color-green); }
.side-tour__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding-top: .6rem; }
.side-tour__price { display: grid; }
.side-tour__price small { font-size: 1.1rem; color: var(--color-text-muted); }
.side-tour__price b { font: 700 2rem/1 var(--font-heading); color: var(--color-navy); }
.side-tour__cta {
    padding: 1rem 1.8rem;
    border-radius: var(--radius-pill);
    background: var(--color-green);
    font: 600 1.35rem/1 var(--font-body);
    color: #fff;
}

.side-help {
    display: grid;
    justify-items: start;
    gap: 1rem;
    padding: 2.2rem;
    background: var(--color-dark-teal);
    color: var(--color-on-dark-soft);
}
.side-help > .perame-icon { color: var(--color-aqua); }
.side-help__title { margin: 0; font: 600 2.4rem/1.15 var(--font-heading); color: #fff; }
.side-help p { margin: 0; font-size: 1.35rem; line-height: 1.55; }
.side-help__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    width: 100%;
    margin-top: .6rem;
    padding: 1.2rem;
    border-radius: var(--radius-pill);
    background: var(--color-green);
    font: 600 1.4rem/1 var(--font-body);
    color: #fff;
}
.side-help__btn:hover { filter: brightness(1.06); color: #fff; }

.related-posts__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.related-posts__title { margin: 0; font: 600 clamp(2.8rem, 5vw, 4.4rem)/1.02 var(--font-heading); color: var(--color-text); }

/* ═══════════════ PÁGINA GENERAL ═══════════════ */
/* Diseño: .pen → «Page — General». Índice lateral + secciones numeradas. */
.general-layout { display: grid; gap: var(--space-xl); }
.general-aside { display: grid; gap: 1.8rem; align-content: start; }

.index-card {
    padding: 2.2rem;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    background: var(--color-surface);
}
.index-card__title { margin: 0 0 1.4rem; font: 600 2.4rem/1.2 var(--font-heading); color: var(--color-text); }
.index-card ol { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.index-card a {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: .9rem 1.2rem;
    border-radius: 1.2rem;
    font: 500 1.35rem/1.35 var(--font-body);
    color: var(--color-text-muted);
    transition: background var(--transition), color var(--transition);
}
.index-card a:hover { background: rgba(7, 84, 104, .05); color: var(--color-text); }
.index-card__n { font: 700 1.6rem/1 var(--font-heading); color: var(--color-border-strong); }
.index-card a:hover .index-card__n { color: var(--color-green); }

.dl-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem;
    border: 1px solid var(--color-border);
    border-radius: 1.6rem;
    background: var(--color-surface);
}
.dl-card:hover { border-color: var(--color-green); }
.dl-card__ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 4rem; height: 4rem;
    border-radius: 1.2rem;
    background: rgba(7, 84, 104, .12);
    color: var(--color-navy);
}
.dl-card__tx { display: grid; gap: .1rem; }
.dl-card__tx strong { font: 600 1.4rem/1.2 var(--font-body); color: var(--color-text); }
.dl-card__tx span { font-size: 1.2rem; color: var(--color-text-muted); }

/* Secciones numeradas: el número sale de un contador CSS, no del contenido */
.prose--numbered { counter-reset: perame-sec; }
.prose--numbered h2 {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    counter-increment: perame-sec;
    padding-bottom: 0;
}
.prose--numbered h2::after { content: none; }
.prose--numbered h2::before {
    content: counter(perame-sec, decimal-leading-zero);
    display: grid;
    place-items: center;
    flex: none;
    width: 4.4rem; height: 4.4rem;
    border-radius: 1.4rem;
    background: var(--color-navy);
    font: 700 1.5rem/1 var(--font-heading);
    color: #fff;
}

/* ── PROSE genérico (reutilizado en About/Contact) ──────────── */
.tour-prose { font-size: 1.6rem; line-height: 1.7; color: var(--color-text-muted); }
.tour-prose p { margin: 0 0 1.4rem; }
.tour-prose h2, .tour-prose h3 { color: var(--color-text); margin-top: var(--space-lg); }

/* ═══════════════ ABOUT ═══════════════ */
.page-hero--tall { min-height: 42rem; }

/* Historia */
.about-story__grid { display: grid; gap: var(--space-lg); }
.about-story__media { position: relative; }
.about-story__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.about-story__badge {
    position: absolute;
    left: var(--space-md); bottom: calc(var(--space-md) * -1);
    display: grid;
    gap: .2rem;
    padding: 1.6rem 2rem;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.about-story__badge strong { font: 600 2.6rem/1 var(--font-heading); color: var(--color-green); }
.about-story__badge span { font-size: 1.3rem; color: var(--color-text-muted); max-width: 18ch; }

/* Valores */
.values {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin: 0; padding: 0;
    list-style: none;
}
.value {
    display: grid;
    gap: 1rem;
    padding: 2.6rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.value__icon {
    display: grid;
    place-items: center;
    width: 5.2rem; height: 5.2rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-green);
}
.value__title { margin: 0; font-size: 2.2rem; }
.value__desc { margin: 0; font-size: 1.5rem; line-height: 1.55; color: var(--color-text-muted); }

/* Equipo */
.team {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin: 0; padding: 0;
    list-style: none;
}
.team-card {
    display: grid;
    justify-items: start;
    gap: .6rem;
    padding: 2.4rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.team-card__avatar {
    display: grid;
    place-items: center;
    width: 5.6rem; height: 5.6rem;
    margin-bottom: .8rem;
    border-radius: var(--radius-pill);
    background: var(--gradient-brand);
    color: #fff;
}
.team-card__role {
    font: 600 1.15rem/1.3 var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-green);
}
.team-card__name { font: 600 2rem/1.1 var(--font-heading); color: var(--color-text); }
.team-card__bio { font-size: 1.4rem; line-height: 1.5; color: var(--color-text-muted); }

/* Hitos */
.milestones {
    display: grid;
    gap: 0;
    max-width: 72rem;
    margin: 0 auto; padding: 0;
    list-style: none;
}
.milestone {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--color-border);
}
.milestone:last-child { border-bottom: 0; }
.milestone__year { font: 600 2.4rem/1 var(--font-heading); color: var(--color-green); }
.milestone__body { display: grid; gap: .4rem; }
.milestone__title { font: 600 1.8rem/1.2 var(--font-body); color: var(--color-text); }
.milestone__desc { font-size: 1.5rem; line-height: 1.5; color: var(--color-text-muted); }

/* Sostenibilidad */
.about-sustain { display: grid; gap: var(--space-lg); }
.about-sustain__lead {
    margin: var(--space-md) 0 0;
    font-size: 1.7rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}
.about-sustain__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin: 0; padding: 0;
    list-style: none;
}
.about-sustain__stats li {
    display: grid;
    gap: .4rem;
    padding: 2.2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.about-sustain__icon {
    display: grid;
    place-items: center;
    width: 4.4rem; height: 4.4rem;
    margin-bottom: .8rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-green);
}
.about-sustain__stats strong { font: 600 3rem/1 var(--font-heading); color: var(--color-text); }
.about-sustain__stats span { font-size: 1.4rem; color: var(--color-text-muted); }

/* ═══════════════ CONTACT ═══════════════ */
/* Réplica del frame «Page — Contact» del .pen. */

/* Encabezado a dos líneas, la segunda en itálica verde */
.ctitle {
    margin: 0 0 2.4rem;
    font: 600 clamp(2.6rem, 4.4vw, 3.2rem)/1.02 var(--font-heading);
    color: var(--color-text);
}
.ctitle em {
    display: block;
    font-weight: 500;
    font-style: italic;
    line-height: 1.05;
    color: var(--color-green);
}
.ctitle--center { text-align: center; }

.contact-main { display: grid; gap: var(--space-lg); }
.contact-form-card {
    padding: 2.8rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 2.4rem;
    box-shadow: 0 1.8rem 4.4rem -1.4rem rgba(23, 54, 62, .12);
}
.contact-extra { margin-top: var(--space-md); font-size: 1.4rem; }

/* ── Formulario ── */
.cform { display: grid; gap: 2.2rem; }
.cform__row { display: grid; gap: 1.4rem; }
.ffield { display: grid; gap: .8rem; }
.ffield__label { font: 600 1.2rem/1 var(--font-body); color: var(--color-text-muted); }
.ffield__box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 1.2rem;
    background: var(--color-surface-muted);
    transition: border-color var(--transition);
}
.ffield__box:focus-within { border-color: var(--color-green); }
.ffield__box .perame-icon { flex: none; color: var(--color-text-muted); }
.ffield__box input,
.ffield__box textarea {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: 400 1.5rem/1.5 var(--font-body);
    color: var(--color-text);
    resize: vertical;
}
.ffield__box input:focus,
.ffield__box textarea:focus { outline: none; }
.ffield__box input::placeholder,
.ffield__box textarea::placeholder { color: var(--color-text-muted); }
.ffield__box--area { align-items: flex-start; padding: 1.6rem; }

.cform__submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}
.cform__privacy { max-width: 26rem; margin: 0; font-size: 1.15rem; line-height: 1.4; color: var(--color-text-muted); }
.cform__btn {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: 1.6rem 3rem;
    border: 0;
    border-radius: 1.4rem;
    background: var(--gradient-brand);
    box-shadow: 0 1.2rem 2.8rem -.8rem rgba(14, 122, 74, .45);
    font: 600 1.5rem/1 var(--font-body);
    color: #fff;
    cursor: pointer;
    transition: filter var(--transition);
}
.cform__btn:hover { filter: brightness(1.07); }

/* ── Panel lateral ── */
.contact-aside { display: grid; gap: 2rem; align-content: start; }
.contact-wa {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 2.2rem;
    border-radius: 2.4rem;
    background: var(--gradient-brand);
    box-shadow: 0 1.2rem 2.8rem -.8rem rgba(14, 122, 74, .30);
    color: #fff;
}
.contact-wa__icon {
    display: grid;
    place-items: center;
    width: 4.8rem; height: 4.8rem;
    flex: none;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .15);
}
.contact-wa__text { display: grid; gap: .3rem; flex: 1; }
.contact-wa__text strong { font: 700 1.5rem/1.2 var(--font-body); }
.contact-wa__text span { font-size: 1.25rem; color: rgba(255, 255, 255, .8); }
.contact-wa__go { flex: none; transition: transform var(--transition); }
.contact-wa:hover .contact-wa__go { transform: translate(.2rem, -.2rem); }

.contact-info {
    padding: 2.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 2.4rem;
    box-shadow: 0 1.4rem 3.4rem -1.2rem rgba(23, 54, 62, .08);
}
.contact-info__title { margin: 0 0 1.8rem; font: 600 2.1rem/1.2 var(--font-heading); color: var(--color-text); }
.contact-info__list { display: grid; gap: 1.8rem; margin: 0; padding: 0; list-style: none; }
.contact-info__list li { display: flex; align-items: center; gap: 1.2rem; font-size: 1.35rem; line-height: 1.4; color: var(--color-text-muted); }
.contact-info__ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.4rem; height: 3.4rem;
    border-radius: 1.1rem;
    background: var(--color-surface-muted);
    color: var(--color-green);
}
.contact-info__list a { color: inherit; }
.contact-info__list a:hover { color: var(--color-green); }

.contact-map {
    position: relative;
    display: grid;
    place-items: center;
    height: 16.8rem;
    margin-top: 1.8rem;
    overflow: hidden;
    border-radius: 1.6rem;
}
.contact-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Mapa embebido de Google: ocupa toda la tarjeta y no lleva pin propio */
.contact-map--embed { height: 22rem; }
.contact-map--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contact-map__pin {
    position: relative;
    display: grid;
    place-items: center;
    width: 4rem; height: 4rem;
    border-radius: 1.3rem;
    background: var(--gradient-brand);
    box-shadow: 0 .8rem 2rem -.4rem rgba(14, 122, 74, .5);
    color: #fff;
}

.contact-social { display: flex; justify-content: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.contact-social a {
    display: grid;
    place-items: center;
    width: 4.6rem; height: 4.6rem;
    border: 1px solid var(--color-border);
    border-radius: 1.4rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition), color var(--transition);
}
.contact-social a:hover { border-color: var(--color-green); color: var(--color-green); }

.trust-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem;
    margin: var(--space-xl) 0 0;
    padding: 0;
    list-style: none;
}
.trust-chips li {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font: 500 1.4rem/1 var(--font-body);
    color: var(--color-text);
}
.trust-chips .perame-icon { color: var(--color-green); }

.contact-faq { max-width: 92rem; margin: var(--space-2xl) auto 0; }
.contact-faq__head { display: grid; justify-items: center; text-align: center; margin-bottom: var(--space-lg); }

/* ── FAQ (acordeón, global) ─────────────────────────────────── */
.faq { display: grid; gap: 1rem; }
.faq__item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.8rem 2rem;
    cursor: pointer;
    font: 600 1.55rem/1.35 var(--font-body);
    color: var(--color-text);
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__icon { color: var(--color-green); transition: transform var(--transition); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a {
    padding: 0 2rem 1.8rem;
    font-size: 1.5rem;
    line-height: 1.65;
    color: var(--color-text-muted);
}
.faq__a p { margin: 0 0 1rem; }

/* Variante de la página de contacto: tarjeta clara y pregunta en Cormorant */
.contact-faq .faq { gap: 1.4rem; }
.contact-faq .faq__item { border-radius: 2.4rem; background: var(--color-bg); }
.contact-faq .faq__q {
    padding: 2.2rem 2.6rem 0;
    font: 600 1.9rem/1.3 var(--font-heading);
}
.contact-faq .faq__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.8rem; height: 2.8rem;
    padding: .5rem;
    border-radius: .9rem;
    background: var(--color-surface-muted);
    box-sizing: content-box;
}
.contact-faq .faq__a { padding: 1rem 2.6rem 2.2rem; font-size: 1.45rem; line-height: 1.6; }
/* En el .pen las respuestas se ven y el icono sigue siendo un «+» */
.contact-faq .faq__item[open] .faq__icon { transform: none; }

/* ── TOUR CARD ──────────────────────────────────────────────── */
.tour-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
.tour-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tour-card__link { display: block; color: inherit; text-decoration: none; }
.tour-card__photo {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--color-surface-muted);
}
.tour-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-card__chip {
    position: absolute;
    top: 1.4rem; left: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.3rem;
    border-radius: var(--radius-pill);
    background: rgba(6, 34, 38, .55);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(10px);
    color: #fff;
    font: 600 1.2rem/1 var(--font-body);
}
.tour-card__chip .perame-icon { color: var(--color-aqua); }
.tour-card__body { display: grid; gap: 1.2rem; padding: 2.2rem; }
.tour-card__title {
    margin: 0;
    font-size: 2.4rem;
    line-height: 1.15;
}
.tour-card__meta {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0;
    font-size: 1.4rem;
    color: var(--color-text-muted);
}
.tour-card__meta .perame-icon { color: var(--color-green); }
.tour-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-top: 1.2rem;
    border-top: 1px solid var(--color-border);
}
.tour-card__price { display: grid; gap: .2rem; }
.tour-card__price-label {
    font: 600 1.1rem/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.tour-card__price-value {
    font: 600 2rem/1 var(--font-heading);
    color: var(--color-green);
}
.tour-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: 1.1rem 1.8rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font: 600 1.3rem/1 var(--font-body);
}

/* ── DESTINOS ───────────────────────────────────────────────── */
.dest-card {
    position: relative;
    display: block;
    min-height: 30rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-dark-teal);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
}
.dest-card__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.dest-card:hover .dest-card__img { transform: scale(1.05); }
.dest-card__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(6,34,38,.94) 0%, rgba(6,34,38,.32) 55%, rgba(6,34,38,0) 100%);
}
.dest-card__content {
    position: absolute;
    inset: auto 0 0 0;
    display: grid;
    gap: .7rem;
    padding: 2.4rem;
    color: #fff;
}
.dest-card__kicker {
    font: 600 1.1rem/1 var(--font-body);
    letter-spacing: .18em;
    color: var(--color-aqua);
}
.dest-card__title { font: 600 3.2rem/1 var(--font-heading); }
.dest-card__count {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font: 500 1.3rem/1 var(--font-body);
    color: var(--color-on-dark-soft);
}
.dest-card__count .perame-icon { color: var(--color-aqua); }

/* ── POR QUÉ ────────────────────────────────────────────────── */
/* Réplica del frame «Section / Why Peru America Tours» del .pen.
   En móvil la foto va con alto fijo (solución clásica) y la cita debajo como
   una tarjeta más; en desktop la foto usa `aspect-ratio` y la cita flota
   encima (ver desktop.css). */
.why__grid { display: grid; gap: var(--space-lg); }
.why__media { position: relative; }
.why__frame { display: none; }          /* marco decorativo: solo desktop */

.why__photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    height: 34rem;
    border-radius: var(--radius-xl);
    box-shadow: 0 2.4rem 5rem -1.6rem rgba(23, 54, 62, .15);
}
/* La foto va anclada, no en flujo: si estuviera en flujo su alto natural
   mandaría sobre el del contenedor y arrastraría toda la fila (en desktop el
   alto lo fija la columna de texto). */
.why__photo img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Velado inferior: sin él la píldora y el borde de la foto se pierden sobre
   cielos claros. En el .pen arranca al 55% de la altura. */
.why__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 32, 36, 0) 55%, rgba(5, 32, 36, .40) 100%);
    pointer-events: none;
}
.why__rating {
    position: absolute;
    left: 1.6rem; top: 1.6rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin: 0;
    padding: 1rem 1.8rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(7, 84, 104, .36);
    backdrop-filter: blur(12px);
    font: 600 1.3rem/1.2 var(--font-body);
    color: #fff;
}
.why__rating .perame-icon { color: var(--color-aqua); fill: currentColor; }

.why__quote {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: 1.6rem 0 0;
    padding: 1.8rem 2rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 1.4rem 3.2rem -.8rem rgba(5, 32, 36, .35);
}
.why__quote-avatar {
    flex: none;
    width: 4.6rem; height: 4.6rem;
    border-radius: var(--radius-pill);
    border: 2px solid #fff;
    object-fit: cover;
}
.why__quote-text {
    margin: 0;
    font: italic 600 1.7rem/1.3 var(--font-heading);
    color: var(--color-text);
}
.why__quote-author {
    margin-top: .5rem;
    font: 500 1.2rem/1.3 var(--font-body);
    color: var(--color-text-muted);
}

.why .section__title {
    margin-bottom: 1.8rem;
    font: 600 clamp(3.2rem, 6vw, 4.8rem)/1.05 var(--font-heading);
    color: var(--color-text);
}
.why__intro {
    margin: 0 0 var(--space-lg);
    font-size: 1.6rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}
.benefits {
    display: grid;
    gap: var(--space-md);
    margin: 0; padding: 0;
    list-style: none;
}
.benefit { display: flex; gap: 1.4rem; }
.benefit__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 4.6rem; height: 4.6rem;
    border-radius: 1.5rem;
    background: rgba(29, 170, 106, .11);
    color: var(--color-green);
}
/* El .pen alterna la pastilla del icono en tres tonos */
.benefit[data-tone="aqua"] .benefit__icon { background: rgba(30, 206, 204, .17); color: var(--color-dark-teal); }
.benefit[data-tone="navy"] .benefit__icon { background: rgba(7, 84, 104, .10);   color: var(--color-navy); }
.benefit__text { display: grid; gap: .4rem; }
.benefit__title { font: 600 1.5rem/1.2 var(--font-body); color: var(--color-text); }
.benefit__desc  { font-size: 1.3rem; line-height: 1.5; color: var(--color-text-muted); }

.why__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: 3.4rem;
    padding-top: 3.4rem;
    border-top: 1px solid var(--color-border);
}
.why__stats { display: flex; align-items: center; gap: 2.8rem; }
.why__stat + .why__stat { border-left: 1px solid var(--color-border-strong); padding-left: 2.8rem; }
.why__stat-num {
    display: block;
    font: 700 3rem/1 var(--font-heading);
    color: var(--color-navy);
}
.why__stat-label {
    display: block;
    margin-top: .4rem;
    font: 500 1.25rem/1.2 var(--font-body);
    color: var(--color-text-muted);
}
.why__team {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    font: 600 1.5rem/1.2 var(--font-body);
    color: var(--color-green);
}
.why__team-arrow {
    display: grid;
    place-items: center;
    width: 4rem; height: 4rem;
    border-radius: var(--radius-pill);
    background: var(--gradient-brand);
    box-shadow: 0 .8rem 2rem -.4rem rgba(14, 122, 74, .30);
    color: #fff;
    transition: transform var(--transition);
}
.why__team:hover .why__team-arrow { transform: translateX(.4rem); }

/* ── BANDA DE ESTADÍSTICAS ──────────────────────────────────── */
.stats-band { background: var(--gradient-band); }
.stats-band__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-md);
    padding-block: var(--space-xl);
    text-align: center;
}
.stat { display: grid; gap: .8rem; }
.stat__num {
    font: 600 clamp(3.6rem, 7vw, 5.4rem)/1 var(--font-heading);
    color: #fff;
}
.stat__label {
    font: 600 1.2rem/1.3 var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;   /* las etiquetas se guardan en caja normal */
    color: var(--color-on-dark-soft);
}

/* ── EXPERIENCIAS DESTACADAS ────────────────────────────────── */
/* Réplica del frame «Section / Featured Experiences» del .pen. */
.featured-exp { background: var(--color-surface); }
.featured-exp__head { text-align: center; margin-bottom: var(--space-xl); }
.eyebrow--rules { justify-content: center; }
.eyebrow__rule {
    display: block;
    width: 3.6rem; height: 1px;
    background: currentColor;
    opacity: .55;
}
.featured-exp__title {
    margin: 0 0 1.4rem;
    font: 600 clamp(3.2rem, 6vw, 4.8rem)/1.05 var(--font-heading);
    color: var(--color-text);
}
.featured-exp__lead {
    max-width: 64rem;
    margin-inline: auto;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.featured-exp__list { display: grid; gap: 3.2rem; }

.exp-card {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 2.4rem;
    background: var(--color-surface);
    box-shadow: 0 1.8rem 4.4rem -1.4rem rgba(23, 54, 62, .14);
}
.exp-card__photo {
    position: relative;
    display: block;
    height: 24rem;
    overflow: hidden;
}
/* Anclada, no en flujo: si no, su alto natural manda sobre el de la tarjeta */
.exp-card__photo img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Velado inferior: la pastilla del precio se apoya ahí */
.exp-card__photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6, 34, 38, 0) 55%, rgba(6, 34, 38, .60) 100%);
}
.exp-card__price {
    position: absolute;
    left: 1.8rem; bottom: 1.8rem;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    gap: .8rem;
    padding: .9rem 1.6rem;
    border-radius: var(--radius-pill);
    background: rgba(7, 38, 42, .60);
    backdrop-filter: blur(6px);
}
.exp-card__price-label { font: 600 1rem/1 var(--font-body); letter-spacing: .12em; color: var(--color-on-dark-soft); }
.exp-card__price-num   { font: 700 1.7rem/1 var(--font-body); color: #fff; }

.exp-card__body { display: grid; gap: 1.4rem; padding: 2.8rem 2.4rem; }
.exp-card__cat {
    margin: 0;
    font: 600 1.2rem/1 var(--font-body);
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--color-green);
}
.exp-card__title {
    margin: 0;
    font: 600 clamp(2.4rem, 5vw, 3.2rem)/1.1 var(--font-heading);
    color: var(--color-text);
}
.exp-card__title a:hover { color: var(--color-green); }
.exp-card__desc { margin: 0; font-size: 1.5rem; line-height: 1.6; color: var(--color-text-muted); }

.exp-card__pills { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; padding: 0; list-style: none; }
/* Los destacados heredados son frases largas; el .pen usa etiquetas cortas.
   Se recorta por CSS (no en PHP) para no cortar a mitad de palabra. */
.exp-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    max-width: 26ch;
    padding: .7rem 1.3rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    font: 500 1.2rem/1 var(--font-body);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exp-pill .perame-icon { flex: none; }
.exp-pill .perame-icon { color: var(--color-green); }

.exp-card__meta { display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; margin: 0; padding: 0; list-style: none; }
.exp-card__meta li {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font: 500 1.3rem/1 var(--font-body);
    color: var(--color-text-muted);
}
.exp-card__meta .perame-icon { color: var(--color-green); }

.exp-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-top: 1.6rem;
    border-top: 1px solid var(--color-border);
}
.exp-card__by { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; }
.exp-guide { display: flex; align-items: center; gap: 1.2rem; }
.exp-guide__photo {
    width: 4.4rem; height: 4.4rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-strong);
    object-fit: cover;
}
.exp-guide__text { display: grid; gap: .2rem; }
.exp-guide__text strong { font: 600 1.4rem/1.2 var(--font-body); color: var(--color-text); }
.exp-guide__text span   { font-size: 1.2rem; color: var(--color-text-muted); }
.exp-card__rating {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1.3rem;
    color: var(--color-text-muted);
}
.exp-card__rating .perame-icon { color: #F2A93B; fill: currentColor; }
.exp-card__rating strong { font: 600 1.4rem/1 var(--font-body); color: var(--color-text); }
.exp-card__cta { gap: .8rem; }

/* ── TESTIMONIOS ────────────────────────────────────────────── */
/* Réplica del frame «Section / Testimonials» del .pen: cita central que hace
   de slider y anillo de pastillas alrededor. */
.stories { background: var(--color-dark-teal); overflow: hidden; }
.stories__head { text-align: center; margin-bottom: var(--space-xl); }
.stories__head .eyebrow { justify-content: center; }
.stories__title {
    margin: 0 0 1.4rem;
    font: 600 clamp(3.2rem, 6vw, 4.8rem)/1.05 var(--font-heading);
    color: #fff;
}
.stories__lead { margin: 0; font-size: 1.5rem; line-height: 1.5; color: var(--color-on-dark-soft); }

.stories__stage { position: relative; }
.stories__quotes { position: relative; }
.story {
    display: grid;
    justify-items: center;
    gap: 2rem;
    margin: 0;
    text-align: center;
}
/* Las inactivas se apilan bajo la activa para que el alto no salte al pasar */
.story:not(.is-active) {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .45s ease;
}
.story.is-active { opacity: 1; transition: opacity .45s ease; }
.story__mark {
    font: 600 8.8rem/.6 var(--font-heading);
    color: var(--color-aqua);
}
.story__text {
    max-width: 72rem;
    margin: 0;
    font: italic 500 clamp(2.2rem, 5vw, 3.6rem)/1.32 var(--font-heading);
    color: #fff;
}
.story__stars { display: flex; gap: .5rem; color: var(--color-aqua); }
.story__by { display: grid; justify-items: center; gap: .4rem; }
.story__avatar {
    width: 6.4rem; height: 6.4rem;
    margin-bottom: .8rem;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(255, 255, 255, .24);
    object-fit: cover;
}
.story__name  { font: 600 1.5rem/1.2 var(--font-body); color: #fff; }
.story__place { font-size: 1.3rem; color: var(--color-on-dark-soft); }
.story__trip {
    font: 600 1.1rem/1.3 var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-aqua);
}

/* Anillo de pastillas — oculto en móvil, no hay sitio */
.stories__ring { display: none; }
.story-chip__btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.8rem .8rem .9rem;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
    text-align: left;
    cursor: pointer;
}
.story-chip__avatar {
    width: 3.4rem; height: 3.4rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .24);
    object-fit: cover;
}
.story-chip__text { display: grid; gap: .1rem; }
.story-chip__text strong { font: 600 1.25rem/1.2 var(--font-body); color: #fff; }
.story-chip__text span   { font-size: 1.1rem; color: var(--color-on-dark-soft); }

/* Decoración: puntos y avión. Solo desktop. */
.stories__deco { display: none; }

.stories__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    padding-top: 2.8rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
/* Sin separadores en móvil: al envolver, la línea quedaba al principio del
   renglón en vez de entre dos métricas (los pone desktop.css). */
.stories__metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem 4rem; }
.stories__metric-num {
    display: flex;
    align-items: center;
    gap: .8rem;
    font: 600 2.8rem/1 var(--font-heading);
    color: #fff;
}
.stories__metric-num .perame-icon { color: var(--color-aqua); }
.stories__metric-label { display: block; margin-top: .5rem; font-size: 1.25rem; color: var(--color-on-dark-soft); }
.stories__nav { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
.stories__arrow {
    display: grid;
    place-items: center;
    width: 5.2rem; height: 5.2rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    transition: background var(--transition);
}
.stories__arrow:hover { background: rgba(255, 255, 255, .16); }
.stories__arrow--next {
    border-color: transparent;
    background: linear-gradient(45deg, var(--color-green) 0%, var(--color-aqua) 100%);
    box-shadow: 0 .8rem 2rem -.4rem rgba(14, 122, 74, .30);
    color: var(--color-dark-teal);
}
.stories__arrow--next:hover { filter: brightness(1.06); background: linear-gradient(45deg, var(--color-green) 0%, var(--color-aqua) 100%); }

/* ── DEL JOURNAL (blog) ─────────────────────────────────────── */
/* Réplica del frame «Section / Travel Inspiration» del .pen. */
.journal { background: var(--color-bg); }
.journal__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.journal__title {
    margin: 0;
    font: 600 clamp(3.2rem, 6vw, 5rem)/1.02 var(--font-heading);
    color: var(--color-text);
}
.journal__link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font: 600 1.5rem/1 var(--font-body);
    color: var(--color-green);
}
.journal__link-arrow {
    display: grid;
    place-items: center;
    width: 3.4rem; height: 3.4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    transition: transform var(--transition);
}
.journal__link:hover .journal__link-arrow { transform: translateX(.4rem); }

.journal__grid { display: grid; gap: 2.8rem; }
.journal__col  { display: grid; gap: 2.8rem; }

.jstory { margin: 0; }
.jstory__link { display: block; height: 100%; }
.jstory__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Entrada destacada: foto a sangre con el texto encima */
.jstory--lead .jstory__link {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 42rem;
    overflow: hidden;
    border-radius: 2.4rem;
    box-shadow: 0 2.6rem 6rem -1.4rem rgba(10, 46, 51, .30);
    isolation: isolate;
}
.jstory--lead .jstory__img {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.jstory--lead .jstory__body {
    display: grid;
    justify-items: start;
    gap: 1.6rem;
    padding: 12rem 2.4rem 2.8rem;
    background: linear-gradient(180deg, rgba(6, 34, 38, 0) 0%, rgba(6, 34, 38, .72) 45%, rgba(6, 34, 38, .98) 100%);
}
.jstory--lead .jstory__cat {
    padding: .7rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
    font: 700 1.1rem/1 var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
}
.jstory--lead .jstory__title {
    margin: 0;
    font: 600 clamp(2.8rem, 6vw, 4.6rem)/1.05 var(--font-heading);
    color: #fff;
}
.jstory--lead .jstory__excerpt { margin: 0; font-size: 1.6rem; line-height: 1.5; color: var(--color-on-dark-soft); }
.jstory--lead .jstory__meta { color: var(--color-on-dark-soft); }
.jstory--lead .jstory__meta i { background: rgba(201, 219, 219, .6); }
.jstory--lead .jstory__go {
    width: 4.8rem; height: 4.8rem;
    border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
    color: #fff;
}

/* Tarjetas de la columna */
.jstory--small .jstory__link {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    background: var(--color-surface);
    box-shadow: 0 1.8rem 4.4rem -1.4rem rgba(23, 54, 62, .12);
}
/* Igual que en `.why__photo` y `.exp-card__photo`: la imagen va anclada, no en
   flujo, para que su alto natural no arrastre la altura de toda la rejilla. */
.jstory__photo { position: relative; display: block; height: 16rem; overflow: hidden; }
.jstory--small .jstory__img { position: absolute; inset: 0; }
.jstory--small .jstory__body { display: grid; justify-items: start; gap: 1rem; padding: 1.6rem 2.2rem 1.8rem; }
.jstory--small .jstory__cat {
    padding: .5rem 1.1rem;
    border-radius: var(--radius-pill);
    background: rgba(7, 84, 104, .12);
    font: 700 1rem/1 var(--font-body);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--color-navy);
}
.jstory--small .jstory__title {
    margin: 0;
    font: 600 2.3rem/1.12 var(--font-heading);
    color: var(--color-text);
}
.jstory--small .jstory__excerpt { margin: 0; font-size: 1.3rem; line-height: 1.5; color: var(--color-text-muted); }
.jstory--small .jstory__meta { color: var(--color-text-muted); }
.jstory--small .jstory__meta i { background: var(--color-border-strong); }
.jstory--small .jstory__go {
    width: 3.6rem; height: 3.6rem;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
}
.jstory--small .jstory__link:hover .jstory__title { color: var(--color-green); }

/* Fila de meta: fecha · minutos + botón a la derecha */
.jstory__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin: .6rem 0 0;
    font: 500 1.3rem/1 var(--font-body);
}
.jstory__meta i { width: 3px; height: 3px; border-radius: 50%; }
.jstory__go {
    display: grid;
    place-items: center;
    margin-left: auto;
    border-radius: var(--radius-pill);
    transition: transform var(--transition);
}
.jstory__link:hover .jstory__go { transform: translate(.2rem, -.2rem); }

/* ── CTA FINAL ──────────────────────────────────────────────── */
.final-cta {
    position: relative;
    display: grid;
    place-items: center;
    padding-block: var(--space-xl);
    text-align: center;
    background: var(--color-dark-teal);
    overflow: hidden;
    isolation: isolate;
}
.final-cta__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}
.final-cta__overlay {
    position: absolute; inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6,60,73,.79) 0%, rgba(7,48,58,.65) 50%, rgba(6,31,37,.87) 100%);
}
.final-cta__body { display: grid; justify-items: center; gap: var(--space-md); }
.final-cta__title {
    margin: 0;
    max-width: 18ch;
    font-size: clamp(3.4rem, 7vw, 6.6rem);
    line-height: 1.02;
    color: #fff;
}
.final-cta__text {
    max-width: 52ch;
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.55;
    color: var(--color-on-dark-soft);
}
.final-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.final-cta__btn {
    gap: 1rem;
    padding: 1.8rem 3.2rem;
    border-radius: 1.4rem;
    font: 600 1.6rem/1 var(--font-body);
}
.final-cta__btn--primary {
    background: linear-gradient(45deg, var(--color-green) 0%, var(--color-aqua) 100%);
    box-shadow: 0 1.2rem 3rem -.6rem rgba(29, 170, 106, .40);
    color: #06303A;
    border: 0;
}
.final-cta__btn--primary:hover { filter: brightness(1.06); color: #06303A; }
.final-cta__btn--ghost {
    border: 1px solid rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
    color: #fff;
}
.final-cta__btn--ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.final-cta__reassure {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0;
    font-size: 1.4rem;
    color: var(--color-on-dark-soft);
}
.final-cta__reassure .perame-icon { color: var(--color-aqua); }

/* Ruta punteada con el avión — las posiciones vienen del .pen (en % desde PHP) */
.final-cta__motif { display: none; }
.final-cta__motif i {
    position: absolute;
    width: .5rem; height: .5rem;
    border-radius: 50%;
    background: var(--color-aqua);
    opacity: .9;
}
.final-cta__motif i:nth-child(even) { width: .4rem; height: .4rem; background: #fff; opacity: .5; }
.final-cta__plane {
    position: absolute;
    left: 83.1%; top: 15.6%;
    color: #fff;
    transform: rotate(-30deg);
}

/* Pastillas flotantes — solo desktop, no hay sitio en móvil */
.final-cta__floaters { display: none; }
.cta-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.8rem .9rem 1rem;
    border-radius: var(--radius-pill);
    text-align: left;
}
.cta-chip__col { display: grid; gap: .2rem; }
.cta-chip__avatar {
    width: 3.6rem; height: 3.6rem;
    border-radius: var(--radius-pill);
    border: 2px solid #fff;
    object-fit: cover;
}
.cta-chip--rating {
    gap: .7rem;
    padding: .8rem 1.6rem .8rem 1.3rem;
    background: #fff;
    box-shadow: 0 1rem 2.4rem -.8rem rgba(5, 32, 36, .35);
    font: 600 1.2rem/1 var(--font-body);
    color: var(--color-text);
}
.cta-chip--rating .perame-icon { color: var(--color-green); fill: currentColor; }
.cta-chip--agent {
    background: #fff;
    box-shadow: 0 1.2rem 2.8rem -.8rem rgba(5, 32, 36, .35);
}
.cta-chip--agent strong { font: 700 1.3rem/1.2 var(--font-body); color: var(--color-text); }
.cta-chip__status {
    display: flex;
    align-items: center;
    gap: .5rem;
    font: 500 1.1rem/1.2 var(--font-body);
    color: var(--color-text-muted);
}
.cta-chip__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-green); }
.cta-chip--wa {
    border: 1px solid rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
}
.cta-chip--wa strong { font: 700 1.3rem/1.2 var(--font-body); color: #fff; }
.cta-chip--wa span span { font: 500 1.1rem/1.2 var(--font-body); color: var(--color-on-dark-soft); }
.cta-chip--wa:hover { background: rgba(255, 255, 255, .16); }
.cta-chip__avatarwrap { position: relative; display: block; }
/* Sin foto del asesor, el badge de WhatsApp pasa a ser el propio avatar */
.cta-chip__avatarwrap:not(:has(img)) .cta-chip__wa {
    position: static;
    width: 3.4rem; height: 3.4rem;
    border-width: 0;
}
.cta-chip__avatarwrap:not(:has(img)) .cta-chip__wa .perame-icon { width: 1.8rem; height: 1.8rem; }
.cta-chip__wa {
    position: absolute;
    right: -.4rem; bottom: -.2rem;
    display: grid;
    place-items: center;
    width: 1.7rem; height: 1.7rem;
    border: 1.5px solid #fff;
    border-radius: var(--radius-pill);
    background: var(--color-green);
    color: #fff;
}

/* ── PIE DE PÁGINA ──────────────────────────────────────────── */
/* Réplica del frame «Section / Footer» del .pen. Las columnas son zonas de
   widgets, así que el CSS estiliza lo que WordPress emite (ul > li > a). */
.site-footer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(120% 90% at 92% 100%, rgba(30, 206, 204, .06) 0%, rgba(30, 206, 204, 0) 100%),
        radial-gradient(75% 55% at 4% 2%,     rgba(29, 170, 106, .08) 0%, rgba(29, 170, 106, 0) 100%),
        var(--color-dark-teal);
    color: var(--color-on-dark-soft);
}
/* Marca gigante de fondo */
.site-footer__wordmark {
    position: absolute;
    left: 50%; bottom: 6rem;
    z-index: -1;
    transform: translateX(-50%);
    white-space: nowrap;
    font: 600 clamp(6rem, 11.5vw, 16.5rem)/1 var(--font-heading);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .04);
    pointer-events: none;
}

/* ── Banda de newsletter ── */
.nl {
    display: grid;
    gap: var(--space-lg);
    padding-block: var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.nl__eyebrow {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: 0 0 1.4rem;
    font: 600 1.2rem/1 var(--font-body);
    letter-spacing: .25em;
    color: var(--color-aqua);
}
/* Ruta punteada ascendente con el avión al final */
.nl__route { position: relative; display: block; width: 10.2rem; height: 2.6rem; }
.nl__route i {
    position: absolute;
    width: .3rem; height: .3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
}
.nl__route i:nth-child(1) { left: 0;    top: 1.7rem; }
.nl__route i:nth-child(2) { left: 1.3rem; top: 1.4rem; width: .4rem; height: .4rem; background: var(--color-aqua); }
.nl__route i:nth-child(3) { left: 2.6rem; top: 1.1rem; }
.nl__route i:nth-child(4) { left: 3.9rem; top: .8rem;  width: .4rem; height: .4rem; }
.nl__route i:nth-child(5) { left: 5.2rem; top: .6rem;  background: var(--color-aqua); }
.nl__route i:nth-child(6) { left: 6.4rem; top: .4rem;  width: .4rem; height: .4rem; }
.nl__route .perame-icon { position: absolute; left: 8rem; top: 0; color: #fff; transform: rotate(-18deg); }

.nl__title {
    margin: 0 0 1.4rem;
    font: 600 clamp(3rem, 5vw, 4.4rem)/1.06 var(--font-heading);
    color: #fff;
}
.nl__title em { font-style: italic; color: var(--color-aqua); }
.nl__title span { display: block; }
.nl__sub { max-width: 56rem; margin: 0; font-size: 1.5rem; line-height: 1.55; color: var(--color-on-dark-soft); }

.nl__form { display: grid; gap: 1.2rem; justify-items: start; }
.nl__row { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; }
.nl__field {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 26rem;
    padding: 1.7rem 1.8rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(10px);
}
.nl__field .perame-icon { color: var(--color-aqua); flex: none; }
.nl__field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: 400 1.5rem/1 var(--font-body);
    color: #fff;
}
.nl__field input::placeholder { color: var(--color-on-dark-soft); }
.nl__field input:focus { outline: none; }
.nl__field:focus-within { border-color: rgba(30, 206, 204, .55); }
.nl__btn {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: 1.7rem 2.6rem;
    border: 0;
    border-radius: 1.4rem;
    background: var(--gradient-brand);
    box-shadow: 0 1rem 2.6rem -.8rem rgba(29, 170, 106, .5);
    font: 600 1.5rem/1 var(--font-body);
    color: #fff;
    cursor: pointer;
    transition: filter var(--transition);
}
.nl__btn:hover { filter: brightness(1.08); }
.nl__note,
.nl__msg {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
    font-size: 1.3rem;
    color: var(--color-on-dark-soft);
}
.nl__note .perame-icon { color: var(--color-aqua); }
.nl__msg.is-ok    { color: var(--color-aqua); }
.nl__msg.is-error { color: #ffb4b4; }

/* ── Bloque principal ── */
.site-footer__main {
    display: grid;
    gap: var(--space-xl);
    padding-block: var(--space-xl);
}
/* El logo alterno es oscuro; sobre el pie va en blanco */
.fbrand__logo { width: auto; max-width: 20rem; height: auto; filter: brightness(0) invert(1); }
.fbrand__name { display: block; font: 600 2.4rem/1.1 var(--font-heading); color: #fff; }
.fbrand__desc { max-width: 30rem; margin: 2.2rem 0 0; font-size: 1.5rem; line-height: 1.55; }

.fsocial { display: flex; gap: 1rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.fsocial a {
    display: grid;
    place-items: center;
    width: 4rem; height: 4rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transition: background var(--transition);
}
.fsocial a:hover { background: rgba(255, 255, 255, .16); }

.flocale { display: flex; align-items: center; gap: .8rem; margin-top: 2.2rem; }
.flocale .perame-icon { color: var(--color-aqua); }
.flocale__chip {
    padding: .5rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .06);
    font: 600 1.1rem/1 var(--font-body);
    letter-spacing: .08em;
    color: var(--color-on-dark-soft);
}
.flocale__chip.is-active,
.flocale__chip:hover { color: #fff; border-color: rgba(30, 206, 204, .5); }

/* Columnas de widgets */
.site-footer__cols { display: grid; gap: var(--space-lg) var(--space-xl); }
.fcol__title {
    margin: 0 0 2rem;
    font: 700 1.2rem/1 var(--font-body);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-aqua);
}
/* Vale para el widget de menú, el de contacto y cualquier lista */
.fcol ul { display: grid; gap: 1.3rem; margin: 0; padding: 0; list-style: none; }
.fcol li { font-size: 1.4rem; line-height: 1.4; }
.fcol a { color: var(--color-on-dark-soft); transition: color var(--transition); }
.fcol a:hover { color: #fff; }
.fcol--contact li { display: flex; align-items: center; gap: .9rem; }
.fcol--contact .perame-icon { flex: none; color: var(--color-aqua); }

/* ── Barra inferior ── */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    /* El hueco de abajo deja pasar el botón flotante de WhatsApp, que es fixed
       y si no se come el aviso de copyright al llegar al final de la página. */
    padding-block: 2.4rem 11rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.site-footer__copy { margin: 0; font-size: 1.3rem; color: #9FBCC0; }
.fbadges { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.fbadges li {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .05);
    font: 500 1.2rem/1 var(--font-body);
    color: var(--color-on-dark-soft);
}
.fbadges .perame-icon { color: var(--color-aqua); }
.flegal__list { display: flex; flex-wrap: wrap; gap: 2.2rem; margin: 0; padding: 0; list-style: none; }
.flegal__list a { font-size: 1.3rem; color: #9FBCC0; }
.flegal__list a:hover { color: #fff; }

/* ── Lightbox de galería (ficha de tour) ─────────────────────── */
.tour-gallery-lb {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: rgba(6, 34, 38, .92);
    backdrop-filter: blur(6px);
}
.tour-gallery-lb[hidden] { display: none; }
.tour-gallery-lb__frame {
    position: relative;
    max-width: min(120rem, 94vw);
    margin: 0;
}
.tour-gallery-lb__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 94vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-xl);
}
.tour-gallery-lb__caption {
    margin-top: var(--space-sm);
    text-align: center;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, .85);
}
.tour-gallery-lb__count {
    position: absolute;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .75);
}
.tour-gallery-lb__close,
.tour-gallery-lb__prev,
.tour-gallery-lb__next {
    position: absolute;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background .2s ease;
}
.tour-gallery-lb__close:hover,
.tour-gallery-lb__prev:hover,
.tour-gallery-lb__next:hover,
.tour-gallery-lb__close:focus-visible,
.tour-gallery-lb__prev:focus-visible,
.tour-gallery-lb__next:focus-visible {
    background: rgba(255, 255, 255, .22);
}
.tour-gallery-lb__close {
    top: max(1.6rem, 2vw);
    right: max(1.6rem, 2vw);
    width: 4.4rem;
    height: 4.4rem;
}
.tour-gallery-lb__close::before,
.tour-gallery-lb__close::after {
    content: '';
    position: absolute;
    width: 1.8rem;
    height: .2rem;
    border-radius: 2px;
    background: currentColor;
}
.tour-gallery-lb__close::before { transform: rotate(45deg); }
.tour-gallery-lb__close::after  { transform: rotate(-45deg); }
.tour-gallery-lb__prev {
    left: max(1.2rem, 2vw);
    top: 50%;
    transform: translateY(-50%);
    width: 4.8rem;
    height: 4.8rem;
}
.tour-gallery-lb__next {
    right: max(1.2rem, 2vw);
    top: 50%;
    transform: translateY(-50%);
    width: 4.8rem;
    height: 4.8rem;
}
.tour-gallery-lb__prev::before,
.tour-gallery-lb__next::before {
    content: '';
    width: 1.2rem;
    height: 1.2rem;
    border-left: .25rem solid currentColor;
    border-bottom: .25rem solid currentColor;
}
.tour-gallery-lb__prev::before { transform: rotate(45deg);  margin-left: .3rem; }
.tour-gallery-lb__next::before { transform: rotate(-135deg); margin-right: .3rem; }
.tour-gallery-lb.is-single .tour-gallery-lb__prev,
.tour-gallery-lb.is-single .tour-gallery-lb__next { display: none; }

/* ── Equipo: foto real dentro del avatar (CPT equipo) ─────── */
.team-card__avatar { overflow: hidden; }
.team-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }