/* ============================================================================
   Costa Clara - component styles
   Ported from the approved homepage mockup. Design tokens are duplicated here
   (from the mockup :root) so every component rule ports unchanged; theme.json
   holds the canonical tokens for the editor and global styles.
   Sections tagged [FIX n] implement the deferred build-time corrections.
   ========================================================================== */

:root{
  --bg:#f5f7f7;
  --surface:#ffffff;
  --card:#f5f7f7;
  --text:#1b2733;
  --muted:#55636f;
  --accent:#1d55c4;
  --accent-press:#17449d;
  --accent-text:#1d55c4;
  --on-accent:#ffffff;
  --hairline:rgba(27,39,51,.16);
  --scrim:16,25,35;
  --r:6px;
  --maxw:1340px;
  --type-micro:13px;
  --type-meta:14px;
  --type-support:15px;
  --type-list:16px;
  --type-body:clamp(17px,calc(15.333px + .1852vw),18px);
  --type-body-strong:clamp(18px,calc(16.333px + .1852vw),19px);
  --type-h3:clamp(20px,1.7vw,22px);
  --type-h2-component:clamp(28px,2.6vw,34px);
  --type-h2-section:clamp(34px,3.2vw,46px);
  --type-h1-page:clamp(36px,4vw,48px);
  --type-h1-flagship:clamp(40px,5.2vw,64px);
  --type-cta-display:clamp(34px,4.5vw,56px);
  --type-numeric-display:clamp(30px,4vw,44px);
  --leading-micro:1.45;
  --leading-meta:1.45;
  --leading-support:1.5;
  --leading-list:1.6;
  --leading-body:1.65;
  --leading-body-strong:1.4;
  --leading-h3:1.25;
  --leading-h2-component:1.12;
  --leading-h2-section:1.1;
  --leading-h1-page:1.06;
  --leading-display:1.02;
}

/* Global reset ported from the mockup :root block. The component rules below
   assume zeroed margins and border-box sizing; without this line UA/WP default
   margins leak onto every heading, list and paragraph. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'General Sans',system-ui,sans-serif;font-size:var(--type-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.display{font-weight:600;letter-spacing:-.022em;line-height:1.08}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--text);color:var(--surface);padding:10px 18px;z-index:100;font-weight:600}
.skip-link:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--hairline)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;position:relative;z-index:2}
.nav-logo img{height:36px;width:auto}
.nav-links{display:flex;gap:clamp(16px,2.4vw,34px);list-style:none;align-items:center;margin:0;padding:0}
.nav-links a{font-size:var(--type-support);font-weight:500;padding:8px 2px;border-bottom:2px solid transparent;transition:border-color .2s ease}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.active{border-bottom-color:var(--accent)}
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:0;background:none;border:1px solid var(--hairline);border-radius:var(--r);cursor:pointer}
.nav-toggle-bar{display:block;width:20px;height:2px;background:var(--text);border-radius:1px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* padding-top clears the 68px header row plus ~18px of breathing room, so the
   top menu item never crowds the logo/close row - including when a short window
   scrolls the menu (the offset sits outside the .wrap scroll area). The sticky
   header's own border-bottom is the single divider; no wrap border-top. */
.nav-menu{display:none;position:fixed;inset:0;z-index:1;background:var(--bg);overflow:hidden;padding-top:86px}
.nav-menu .wrap{height:100%;overflow-y:auto}
.nav-menu ul{list-style:none;padding:12px 0 0;margin:0}
.nav-menu li{border-bottom:1px solid var(--hairline)}
.nav-menu ul a{display:flex;align-items:center;min-height:60px;padding:8px 0;font-weight:600;font-size:21px;letter-spacing:-.01em}
.nav-menu ul a.active{color:var(--accent-text)}
/* Contact close: filled cobalt WhatsApp (dominant, the sole conversion channel)
   over a hairline-bordered tel: button. Icons reuse the footer marks. */
.menu-actions{display:flex;flex-direction:column;gap:12px;margin-top:24px;padding-bottom:30px}
.nav-menu .menu-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:var(--r);font-size:var(--type-body);font-weight:600;padding:8px 16px}
.nav-menu .menu-btn svg{width:20px;height:20px;flex:none}
.menu-btn-wa{background:var(--accent);color:#fff}
.menu-btn-wa:hover,.menu-btn-wa:focus-visible{background:var(--accent-press)}
.menu-btn-tel{background:transparent;border:1px solid var(--hairline);color:var(--accent-text)}
.menu-btn-tel:hover,.menu-btn-tel:focus-visible{border-color:var(--accent);color:var(--accent-press)}
html.menu-open{overflow:hidden}
html.menu-open .wa-fija{display:none}

/* ============ HERO: full-bleed photo ============ */
.hero{position:relative;min-height:90dvh;display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--scrim),.94) 0%,rgba(var(--scrim),.42) 46%,rgba(var(--scrim),.30) 100%)}
.hero-content{position:relative;padding-bottom:clamp(48px,8vh,92px);max-width:800px}
.hero h1{color:#fff;font-size:var(--type-h1-flagship);margin-bottom:20px}
.hero p{font-size:var(--type-body);color:#eef2f6;max-width:52ch;margin-bottom:32px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;font-weight:600;font-size:var(--type-list);padding:15px 30px;border-radius:var(--r);border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background-color .2s ease,color .2s ease;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-press)}
.btn-hero-ghost{border-color:#fff;color:#fff}
.btn-hero-ghost:hover{background:#fff;color:#1b2733}

section{padding:clamp(64px,6vw,96px) 0}
.section-head{margin-bottom:clamp(32px,4vw,52px)}
.section-head h2{font-size:var(--type-h2-section);line-height:1.1}
.section-head .sub{color:var(--muted);margin-top:12px;max-width:58ch}
.section-head.split{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 32px;flex-wrap:wrap}
.section-head.center{text-align:center}
.section-head.center .sub{margin-left:auto;margin-right:auto}
.foot-center{text-align:center}
.link-more{color:var(--accent-text);font-weight:600;border-bottom:2px solid var(--accent-text);padding-bottom:2px;transition:opacity .2s ease}
.link-more:hover{opacity:.72}

/* ============ SALIDAS: featured ticket + list ============ */
.salida-featured{display:grid;grid-template-columns:5fr 7fr;border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;background:var(--surface);margin-bottom:28px}
.salida-featured img{width:100%;height:100%;object-fit:cover;min-height:300px}
.salida-featured-body{padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;justify-content:center}
.salida-kicker{color:var(--accent-text);font-weight:600;font-size:var(--type-micro);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
.salida-featured-body h3{font-size:var(--type-h2-component);line-height:1.12;margin-bottom:14px}
.salida-featured-body .desc{color:var(--muted);margin-bottom:22px;max-width:46ch}
.salida-datos{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;margin-bottom:26px}
.salida-datos div strong{display:block;font-size:var(--type-body-strong);line-height:1.4;font-weight:600}
.salida-datos div span{color:var(--muted);font-size:var(--type-meta);line-height:1.45}

/* [FIX 2] Money-moment trust: an honest credibility strip right under the
   featured ticket, using only verified facts (PADI/SNSI, guide on every trip). */
.salidas-trust{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin-bottom:40px;padding:16px 18px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);color:var(--muted);font-size:var(--type-meta);line-height:1.45}
.salidas-trust li{list-style:none;display:flex;align-items:center;gap:8px}
.salidas-trust li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.salidas-trust strong{color:var(--text);font-weight:600}

.salidas-list{list-style:none;border-top:1px solid var(--hairline);margin:0;padding:0}
.salidas-list li{border-bottom:1px solid var(--hairline)}
.salida-row{display:grid;grid-template-columns:1fr auto auto auto;gap:clamp(16px,3vw,48px);align-items:center;padding:20px 14px;margin:0 -14px;border-radius:var(--r);transition:background-color .2s ease,box-shadow .2s ease}
.salida-row:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.salida-row .nombre{font-weight:600;font-size:var(--type-body-strong);line-height:1.4}
.salida-row:hover .nombre{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.salida-row .detalle{display:block;color:var(--muted);font-size:var(--type-meta);line-height:1.45;margin-top:4px}
.salida-row .fecha{color:var(--muted);font-size:var(--type-meta);line-height:1.45}
.salida-row .precio{font-weight:600;text-align:right;min-width:150px}
.salida-row .chev{color:var(--muted);font-size:24px;line-height:1;transition:color .2s ease,transform .2s ease}
.salida-row:hover .chev{color:var(--accent-text);transform:translateX(3px)}
/* [FIX 1] Mobile tap affordance, hidden on desktop where the chevron shows. */
.salida-row .ver-mas{display:none;color:var(--accent-text);font-weight:600;font-size:var(--type-meta);margin-top:6px}
.salidas-foot{margin-top:30px}

/* ============ CURSOS: asymmetric photo grid ============ */
.cursos{background:var(--surface);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.cursos-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:auto auto;gap:22px}
.curso-card{background:var(--card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease}
.curso-card:hover{transform:translateY(-3px)}
.curso-card h3{transition:color .2s ease}
.curso-card:hover h3{color:var(--accent-text)}
.curso-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.curso-card.tall{grid-row:1/3}
.curso-card.tall img{aspect-ratio:4/4.1;flex:1}
.curso-body{padding:22px 24px 26px}
.curso-meta{font-size:var(--type-meta);line-height:1.45;color:var(--muted);margin-bottom:8px}
.curso-body h3{font-size:var(--type-h3);line-height:1.25;margin-bottom:10px}
.curso-price{font-weight:600;font-size:var(--type-body-strong);line-height:1.4}
/* Course prices are unknown in the data; show a quiet accent affordance in the
   price slot instead of a fabricated number (keeps the card rhythm). */
.curso-cta{color:var(--accent-text);font-weight:600;font-size:var(--type-support)}
.cursos-foot{margin-top:34px}

/* [FIX 6] Beginner reassurance near Cursos. */
.primera-vez{margin-top:34px;display:grid;grid-template-columns:auto 1fr;gap:18px 22px;align-items:center;padding:22px clamp(20px,2.4vw,30px);background:var(--card);border:1px solid var(--hairline);border-radius:var(--r)}
.primera-vez .pv-badge{align-self:start;font-weight:600;font-size:var(--type-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);white-space:nowrap}
.primera-vez h3{font-size:var(--type-h3);line-height:1.25;margin-bottom:6px}
.primera-vez p{color:var(--muted);font-size:var(--type-support);line-height:1.5;max-width:64ch}

/* ============ DESTINOS: editorial collage ============ */
.collage{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,24px)}
.tile{display:block}
.tile img{width:100%;height:auto;object-fit:cover;border-radius:var(--r);transition:transform .25s ease}
.tile:hover img{transform:scale(1.015)}
.tile figure{margin:0}
.tile figcaption{margin-top:10px;font-size:var(--type-support);line-height:1.5}
.tile figcaption strong{font-weight:600;transition:color .2s ease}
.tile figcaption span{color:var(--muted)}
.tile:hover figcaption strong{color:var(--accent-text)}
.tile-a{grid-column:span 7}.tile-a img{aspect-ratio:16/10}
.tile-b{grid-column:span 5}.tile-b img{aspect-ratio:4/3.35}
.tile-c{grid-column:span 4}.tile-c img{aspect-ratio:4/4.4}
.tile-d{grid-column:span 4}.tile-d img{aspect-ratio:4/4.4}
.tile-e{grid-column:span 4}.tile-e img{aspect-ratio:4/4.4}
.destinos-foot{margin-top:36px}

/* ============ QUOTE ============ */
.quote{border-top:1px solid var(--hairline);background:var(--surface)}
.quote blockquote{max-width:860px;margin:0 auto;text-align:center}
.quote blockquote p{font-weight:600;letter-spacing:-.015em;font-size:clamp(22px,2.7vw,34px);line-height:1.32}
.quote cite{display:block;font-style:normal;margin-top:24px;color:var(--muted);font-size:var(--type-support);line-height:1.5}
.quote cite strong{color:var(--text);font-weight:600}

/* ============ CTA ============ */
.cta{background:var(--accent)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta h2{color:var(--on-accent);font-size:var(--type-cta-display);line-height:1.02;max-width:22ch}
.cta .btn-primary{background:var(--surface);color:var(--accent)}
.cta .btn-primary:hover{background:#e8edf8}

/* ============ FOOTER ============ */
/* WP wraps the footer template-part in its own <footer class="wp-block-template-part">.
   The bare `footer` rule below would otherwise apply twice (padding + hairline nested),
   doubling the gap above the footer. Neutralise the wrapper so spacing lands once. */
footer.wp-block-template-part{padding:0;border-top:0}
footer{border-top:1px solid var(--hairline);padding:clamp(48px,6vw,80px) 0 36px}
.footer-grid{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;gap:clamp(28px,4vw,64px);margin-bottom:44px}
footer img.f-logo{height:32px;width:auto;margin-bottom:18px}
.f-logo-link{display:block;width:max-content}
footer p,footer a{color:var(--muted);font-size:var(--type-support);line-height:1.5}
footer a:hover,footer a:focus-visible{color:var(--accent-text)}
/* WhatsApp line is the conversion off-ramp: cobalt text, not a second band. */
footer a.f-wa{color:var(--accent-text);font-weight:600}
footer a.f-wa:hover,footer a.f-wa:focus-visible{color:var(--accent-press)}
.footer-col h3{font-size:var(--type-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:16px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:6px}
.footer-col li a{display:inline-block;padding:4px 0}
.footer-desc{max-width:38ch;margin:0}
/* ul.footer-social outranks the .footer-col ul reset, which zeroes margins. */
.footer-col ul.footer-social{list-style:none;display:flex;gap:10px;margin:28px 0 0;padding:0}
.footer-social li{margin-bottom:0}
/* Circular buttons are a deliberate reference-match (Sara 2026-07-11);
   everything else keeps the 6px system radius. */
.footer-social li a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--hairline);border-radius:50%}
.footer-social li a:hover,.footer-social li a:focus-visible{border-color:var(--accent-text)}
.footer-social svg{width:20px;height:20px}
.footer-contacto li{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:var(--type-support);color:var(--muted)}
.footer-contacto li:first-child{align-items:flex-start}
.footer-contacto svg{width:18px;height:18px;flex:none;color:var(--muted)}
.footer-contacto li:first-child svg{margin-top:3px}
.footer-base{border-top:1px solid var(--hairline);padding-top:24px;color:var(--muted);font-size:var(--type-meta);line-height:1.45}

/* ============ WHATSAPP: fixed brand icon ============ */
.wa-fija{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:#25d366;color:#fff;border-radius:50%;box-shadow:0 4px 12px rgba(27,39,51,.25);transition:transform .15s ease,box-shadow .2s ease}
.wa-fija svg{width:32px;height:32px}
.wa-fija:hover,.wa-fija:focus-visible{transform:translateY(-2px);box-shadow:0 6px 16px rgba(27,39,51,.3)}
.wa-fija:active{transform:scale(.98)}
/* [FIX 3] Suppress the shortcut while the hero is on screen. */
.wa-fija.is-hidden{display:none!important}

@media (min-width:901px){
  .wa-fija{right:24px;bottom:24px}
}

/* ============ MOTION ============ */
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
  .js [data-reveal].in{opacity:1;transform:none}
  .js .hero-content{animation:heroIn .9s cubic-bezier(.16,1,.3,1) both}
  @keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}

/* ============ MOBILE ============ */
@media (max-width:900px){
  /* [FIX 4] Footer tap targets raised to 44px (touch-device rule). Scoped to
     the text-link rows; the social buttons are already 44px boxes. */
  .footer-enlaces li a,.footer-contacto li a{display:flex;align-items:center;min-height:44px;padding:2px 0}
  .salida-featured{grid-template-columns:1fr}
  .cursos-grid{grid-template-columns:1fr 1fr}
  .curso-card.tall{grid-row:auto}
  .curso-card.tall img{aspect-ratio:16/10;flex:none}
  .tile-a,.tile-b{grid-column:span 12}
  .tile-c,.tile-d,.tile-e{grid-column:span 4}
  .primera-vez{grid-template-columns:1fr}
}
@media (max-width:767px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-menu.open{display:block}
}
@media (max-width:640px){
  .hero{min-height:86dvh}
  .salida-row{grid-template-columns:1fr;gap:4px}
  .salida-row .fecha{margin-top:2px}
  .salida-row .precio{text-align:left;min-width:0;color:var(--accent-text)} /* [FIX 1] accent price = tap cue */
  .salida-row .chev{display:none}
  .salida-row .ver-mas{display:inline-block} /* [FIX 1] show explicit affordance */
  .cursos-grid{grid-template-columns:1fr}
  .tile-c,.tile-d,.tile-e{grid-column:span 12}
  .footer-grid{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
  footer{padding-bottom:84px} /* [FIX 3] room so the fixed pill never covers content */
}

/* Sold-out salida rows: honest scarcity, muted per the token system. */
.salida-row.agotado{opacity:.65}
.salida-row.agotado .precio{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:var(--type-meta);letter-spacing:.06em}

/* ============================================================================
   [2B] Detail + archive pages. Two header variants (viaje large / standard);
   band, CTA slots, collage gallery, archive rows. Tokens unchanged.
   ========================================================================== */
.page-hero{position:relative;height:clamp(320px,45vh,480px);display:flex;align-items:flex-end}
.page-hero-alta{height:clamp(380px,55vh,560px)}
.page-hero img.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero .hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--scrim),.78) 0%,rgba(var(--scrim),.25) 45%,rgba(var(--scrim),0) 70%)}
.page-hero .wrap{position:relative;width:100%;padding-bottom:32px}
.page-kicker{color:#fff;opacity:.85;font-size:var(--type-micro);font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.page-hero h1{color:#fff;font-size:var(--type-h1-page);line-height:1.06}
.page-hero-alta h1{font-size:var(--type-h1-page)}
/* Archive hero: the photographic page-hero pattern used on detail pages,
   tuned shorter for a directory and carrying a one-line subtitle. Brings the
   brand's photography-first principle to the cursos archive instead of a flat
   text band. Scrim is a touch stronger than the detail hero to seat three
   text lines over a bright reef. */
.page-hero-archive{height:clamp(280px,38vh,400px)}
.page-hero-archive .hero-scrim{background:linear-gradient(to top,rgba(var(--scrim),.86) 0%,rgba(var(--scrim),.45) 42%,rgba(var(--scrim),.06) 76%)}
.page-hero-archive .hero-sub{color:#eef2f6;font-size:var(--type-body);margin-top:12px;max-width:54ch}
.page-hero .badge-agotado{display:inline-block;background:var(--text);color:#fff;font-size:var(--type-micro);letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r);margin-bottom:10px}
.back-link{display:inline-block;margin:22px 0 14px;font-size:var(--type-meta);color:var(--muted)}
.back-link:hover{color:var(--text)}

.data-band{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r)}
.data-band .celda{flex:1 1 160px;padding:18px 24px;border-top:1px solid transparent}
.data-band .celda + .celda{border-left:1px solid var(--hairline)}
.data-band .lbl{font-size:var(--type-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.data-band .val{font-size:var(--type-body-strong);line-height:1.4;font-weight:600;letter-spacing:-.01em;margin-top:4px}
.data-band .sub2{color:var(--muted);font-size:var(--type-meta);line-height:1.45}
.data-band .val.cupos-bajos,.salida-datos .cupos-bajos strong{color:var(--accent-text)}
.data-band .val.muted{color:var(--muted);font-weight:500}

.detail-prose{max-width:68ch;margin-top:34px}
.detail-prose h2{font-size:var(--type-h2-component);font-weight:600;letter-spacing:-.01em;line-height:var(--leading-h2-component);margin:clamp(32px,3vw,40px) 0 12px}
.detail-prose h3{font-size:var(--type-h3);line-height:1.25;font-weight:600;margin:20px 0 6px}
.detail-prose ul{padding-left:22px;margin:8px 0}
.detail-prose li,.list-card li{font-size:var(--type-list);line-height:1.6}
.detail-sec{font-size:var(--type-h2-component);line-height:1.12;font-weight:600;letter-spacing:-.022em;margin:44px 0 16px}
.detail-quiet{color:var(--muted);font-size:var(--type-support);line-height:1.5;margin-top:14px}

/* Course detail: separate quick qualification facts from planning facts.
   Long duration and schedule values get a full second row instead of being
   squeezed into the same five-column strip as level, certification and price. */
.single-curso .page-hero .hero-scrim{background:linear-gradient(to top,rgba(var(--scrim),.86) 0%,rgba(var(--scrim),.34) 48%,rgba(var(--scrim),.08) 78%)}
.single-curso .page-hero h1{max-width:24ch;text-wrap:balance}
.single-curso .back-link{display:inline-flex;align-items:center;min-height:44px;margin:12px 0 8px;transition:color .2s cubic-bezier(.22,1,.36,1)}
.single-curso .back-link span{font-size:20px;margin-right:4px;transform:translateY(-1px)}
.single-curso .curso-data-band{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:hidden}
.single-curso .curso-data-band .celda{min-width:0;border-top:0}
.single-curso .curso-data-band .curso-fact-primary{grid-column:span 2}
.single-curso .curso-data-band .curso-fact-plan{grid-column:span 3;border-top:1px solid var(--hairline)}
.single-curso .curso-data-band .curso-fact-primary + .curso-fact-plan{border-left:0}
.single-curso .curso-data-band .val{max-width:32ch}
.single-curso .detail-prose{margin-top:clamp(36px,4vw,52px)}
.single-curso .detail-prose>h2:first-child{margin-top:0}
.single-curso .detail-sec{margin-top:clamp(42px,5vw,60px)}
.single-curso .list-card{padding:clamp(22px,2.4vw,30px)}
.single-curso .primera-vez{grid-template-columns:minmax(120px,160px) 1fr;align-items:start;margin-top:clamp(30px,4vw,44px);background:var(--surface)}
.single-curso .curso-trust{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:12px clamp(24px,4vw,56px);align-items:center;margin:clamp(32px,4vw,48px) 0 clamp(32px,4vw,48px);padding:clamp(20px,2.6vw,28px);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r)}
.single-curso .curso-trust-label{color:var(--accent-text);font-size:var(--type-micro);font-weight:600;letter-spacing:.1em;line-height:var(--leading-micro);text-transform:uppercase}
.single-curso .curso-trust-copy{max-width:52ch;font-size:var(--type-body-strong);font-weight:600;letter-spacing:-.01em;line-height:var(--leading-body-strong)}

/* Destination detail: match the calmer editorial rhythm established on
   course detail while keeping destination data, gallery and trip behavior. */
.single-destino .page-hero .hero-scrim{background:linear-gradient(to top,rgba(var(--scrim),.86) 0%,rgba(var(--scrim),.34) 48%,rgba(var(--scrim),.08) 78%)}
.single-destino .page-hero h1{max-width:24ch;text-wrap:balance}
.single-destino .back-link{display:inline-flex;align-items:center;min-height:44px;margin:12px 0 8px;transition:color .2s cubic-bezier(.22,1,.36,1)}
.single-destino .back-link span{font-size:20px;margin-right:4px;transform:translateY(-1px)}
.single-destino .detail-prose{margin-top:clamp(36px,4vw,52px)}
.single-destino .detail-prose>h2:first-child{margin-top:0}
.single-destino .detail-sec{margin-top:clamp(42px,5vw,60px)}
.single-destino .list-card{padding:clamp(22px,2.4vw,30px)}
.single-destino .destino-proximas{margin-top:clamp(48px,6vw,72px);padding:0}
.single-destino .destino-proximas .detail-sec{margin-top:0}
.single-destino .destino-trust{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:12px clamp(24px,4vw,56px);align-items:center;margin:clamp(32px,4vw,48px) 0 clamp(32px,4vw,48px);padding:clamp(20px,2.6vw,28px);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r)}
.single-destino .destino-trust-label{color:var(--accent-text);font-size:var(--type-micro);font-weight:600;letter-spacing:.1em;line-height:var(--leading-micro);text-transform:uppercase}
.single-destino .destino-trust-copy{max-width:52ch;font-size:var(--type-body-strong);font-weight:600;letter-spacing:-.01em;line-height:var(--leading-body-strong)}

.list-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.list-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:20px 24px}
.list-card .lbl{font-size:var(--type-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.list-card ul{margin:0;padding-left:20px}
.list-card li{margin:5px 0}
.list-card.ancho{grid-column:1/-1}
.list-card.ancho ul{columns:2;column-gap:40px}

.deposito-card{margin-top:28px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:20px 26px}
.deposito-card .lbl{font-size:var(--type-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.deposito-card .frase{font-size:var(--type-body-strong);line-height:1.4;font-weight:600;letter-spacing:-.01em}
.trust-line{margin:30px 0 16px;padding-top:18px;border-top:1px solid var(--hairline);font-size:var(--type-body-strong);line-height:1.4;font-weight:500}

.cta .cta-sub{color:var(--on-accent);opacity:.85;font-size:var(--type-support);line-height:1.5;margin-top:6px}
.cta .cta-act{text-align:center}
.cta .cta-micro{color:var(--on-accent);opacity:.9;font-size:var(--type-meta);line-height:1.45;margin-top:8px}

.galeria{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,24px);margin-top:16px}
.galeria img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.galeria.gal-1 img{grid-column:1/-1;aspect-ratio:16/9}
.galeria.gal-2 img:nth-child(1){grid-column:span 7;aspect-ratio:16/10}
.galeria.gal-2 img:nth-child(2){grid-column:span 5;aspect-ratio:4/3.35}
.galeria.gal-3 img:nth-child(1){grid-column:span 7;grid-row:span 2}
.galeria.gal-3 img:nth-child(2),.galeria.gal-3 img:nth-child(3){grid-column:span 5;aspect-ratio:16/9.5}
.galeria.gal-4plus img:nth-child(4n+1){grid-column:span 7;aspect-ratio:16/10}
.galeria.gal-4plus img:nth-child(4n+2){grid-column:span 5;aspect-ratio:4/3.35}
.galeria.gal-4plus img:nth-child(4n+3){grid-column:span 5;aspect-ratio:4/3.35}
.galeria.gal-4plus img:nth-child(4n){grid-column:span 7;aspect-ratio:16/10}

.archive-head{padding-top:clamp(40px,5vw,64px)}
/* Archive title sits directly above this section; the global section
   padding-top (6vw) double-spaces it from the first card. Tighten it so the
   heading and featured ticket read as one unit. */
.salidas-archive{padding-top:clamp(28px,3vw,40px)}
/* The last row's bottom hairline sits just above the footer's own top
   hairline, reading as a doubled divider. Drop it; the footer border closes
   the list. Scoped so the homepage salidas list keeps its trailing rule. */
.salidas-archive .salidas-list:last-of-type>li:last-child{border-bottom:0}
.archive-head .page-kicker{color:var(--muted);opacity:1}
.archive-head h1{font-size:var(--type-h1-page);line-height:1.06}
.salida-thumb{width:76px;height:76px;border-radius:var(--r);object-fit:cover;flex:0 0 76px}
.salida-row.con-foto{display:flex;align-items:center}
.salida-row.con-foto .salida-main{flex:1;min-width:0}
.salida-row.pasada{opacity:.7}
.salida-row.pasada .precio{color:var(--muted)}
.grupo-head{font-size:var(--type-h3);line-height:1.25;font-weight:600;letter-spacing:-.022em;margin:44px 0 8px}
/* Archive cursos section: same double-spacing fix the salidas archive got.
   The global section padding-top (6vw) stacks on the first grupo-head's own
   44px margin, opening a dead gap under the header. Tighten the section and
   zero the first heading's top margin. Scoped so the homepage cursos grid
   keeps its section rhythm (byte-identical baseline). */
.cursos-archive,.destinos-archive{padding-top:clamp(28px,3vw,40px)}
.cursos-archive .wrap>.grupo-head:first-child,.destinos-archive .wrap>.grupo-head:first-child{margin-top:0}
.cursos-grid.archivo{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-template-rows:none}
.collage.archivo{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.collage.archivo .tile img{aspect-ratio:4/3}

@media (max-width:640px){
  .data-band{flex-direction:column}
  .data-band .celda{flex:0 0 auto}
  .data-band .celda + .celda{border-left:0;border-top:1px solid var(--hairline)}
  .page-hero{height:clamp(280px,45vh,400px)}
  .galeria.gal-2 img,.galeria.gal-3 img,.galeria.gal-4plus img{grid-column:1/-1!important;grid-row:auto!important;aspect-ratio:16/10}
  /* Photo rows inherit display:flex from the base .con-foto rule above, which
     crams thumbnail + name + detail + date + price onto one line and forces
     one-word-per-line wrapping. Re-lay them as a grid: 56px thumbnail left,
     name/detail + date + price stacked right. This block sits after the
     .con-foto default, so it wins on source order without a specificity bump. */
  .salida-row.con-foto{display:grid;grid-template-columns:56px 1fr;grid-template-areas:"img main" "img fecha" "img precio";column-gap:14px;row-gap:3px;align-items:start}
  .salida-row.con-foto .salida-thumb{grid-area:img}
  .salida-row.con-foto .salida-main{grid-area:main}
  .salida-row.con-foto .fecha{grid-area:fecha;margin-top:2px}
  .salida-row.con-foto .precio{grid-area:precio}
  .salida-thumb{width:56px;height:56px;flex-basis:56px}
  /* Featured ticket internals. The datos wrap by string width under flex, so
     the date lands alone and price+cupos pair only by accident, and a 2-col
     grid squeezes "$10.200.000 COP" onto two lines. Stack the three stats in
     one column so every value stays on a single line, receipt-stub style. */
  .salida-datos{flex-direction:column;gap:14px}
  /* Primary CTA becomes a full-width thumb target, matching the site's other
     mobile primary buttons (contacto, CTA band). */
  .salida-featured .btn{display:block;width:100%;text-align:center}
  .single-curso .page-hero h1{text-wrap:wrap}
  .single-curso .curso-data-band{grid-template-columns:1fr}
  .single-curso .curso-data-band .curso-fact-primary,.single-curso .curso-data-band .curso-fact-plan{grid-column:auto;border-left:0;border-top:1px solid var(--hairline)}
  .single-curso .curso-data-band .celda:first-child{border-top:0}
  .single-curso .primera-vez{grid-template-columns:1fr}
  .single-curso .curso-trust{grid-template-columns:1fr;gap:8px}
  .single-destino .page-hero h1{text-wrap:wrap}
  .single-destino .destino-trust{grid-template-columns:1fr;gap:8px}
}

/* ============================================================================
   Single viaje flagship polish. Scoped to the money page so archive, curso,
   destino and homepage components retain their approved geometry.
   ========================================================================== */
.single-viaje .page-hero-alta{min-height:440px;height:clamp(440px,62vh,660px)}
.single-viaje .page-hero .hero-scrim{background:linear-gradient(to top,rgba(var(--scrim),.9) 0%,rgba(var(--scrim),.5) 38%,rgba(var(--scrim),.08) 76%)}
.single-viaje .page-hero .wrap{padding-bottom:clamp(32px,4vw,52px)}
.single-viaje .page-hero h1{max-width:18ch;font-size:var(--type-h1-flagship);line-height:1.02;text-wrap:balance}
.single-viaje .page-kicker{font-size:var(--type-micro);font-weight:600;opacity:1}
.single-viaje .back-link{display:inline-flex;align-items:center;min-height:44px;margin:14px 0 10px;gap:7px;font-weight:500;text-decoration:none;transition:color .2s cubic-bezier(.22,1,.36,1)}
.single-viaje .back-link span{font-size:22px;line-height:1;transform:translateY(-1px)}
.single-viaje .back-link:focus-visible{outline:3px solid rgba(29,85,196,.32);outline-offset:3px;border-radius:var(--r)}

.single-viaje .trip-summary{overflow:hidden;box-shadow:0 16px 42px rgba(27,39,51,.06)}
.single-viaje .trip-summary .celda{padding:24px clamp(22px,2.6vw,36px)}
.single-viaje .trip-summary .lbl{font-weight:600;color:var(--muted)}
.single-viaje .trip-summary .val{font-size:var(--type-body-strong);line-height:1.4;margin-top:7px}
.single-viaje .trip-summary .sub2{display:inline-block;margin-top:3px}

.single-viaje .trip-story{display:grid;grid-template-columns:minmax(0,68ch) minmax(80px,1fr);column-gap:clamp(48px,8vw,120px);margin-top:clamp(46px,5.5vw,72px)}
.single-viaje .detail-prose{grid-column:1/-1;max-width:none;margin-top:0;font-size:var(--type-body);line-height:var(--leading-body)}
.single-viaje .detail-prose>p,.single-viaje .detail-prose>ul,.single-viaje .detail-prose>ol,.single-viaje .detail-prose>h3{max-width:68ch}
.single-viaje .detail-prose>h2:first-child{font-size:var(--type-h2-component);line-height:var(--leading-h2-component);margin:0 0 20px}
.single-viaje .detail-prose h2:not(:first-child){font-size:var(--type-h2-component);margin:38px 0 14px}
.single-viaje .detail-prose h3{font-size:var(--type-h3);line-height:1.25;margin:32px 0 10px}
.single-viaje .detail-prose p+p{margin-top:16px}
.single-viaje .detail-prose ul{margin:12px 0;padding-left:0;list-style:none}
.single-viaje .detail-prose li{position:relative;padding-left:20px;margin:7px 0}
.single-viaje .detail-prose li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.single-viaje .trip-itinerary{grid-column:1/-1;margin-top:clamp(48px,5vw,68px);padding:0}
.single-viaje .trip-itinerary .detail-sec{font-size:var(--type-h2-component);margin:0 0 20px}
.single-viaje .trip-itinerary .list-cards{max-width:68ch}
.single-viaje .trip-itinerary .list-card{padding:clamp(24px,3vw,34px)}
.single-viaje .trip-itinerary .list-card.ancho ul{columns:1}
.single-viaje .trip-itinerary li,.single-viaje .trip-package li{margin:10px 0}

.single-viaje .trip-package{margin-top:clamp(48px,5vw,68px);padding:0}
.single-viaje .trip-package>.detail-sec{font-size:var(--type-h2-component);margin:0 0 20px}
.single-viaje .trip-package .list-cards{gap:0;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;box-shadow:0 14px 38px rgba(27,39,51,.045)}
.single-viaje .trip-package .list-card{padding:clamp(24px,3vw,38px);border:0;border-radius:0;box-shadow:none}
.single-viaje .trip-package .list-card+.list-card{border-left:1px solid var(--hairline)}
.single-viaje .trip-package .lbl{font-weight:600;font-size:var(--type-micro);margin-bottom:18px}
.single-viaje .trip-package ul{padding:0;list-style:none}
.single-viaje .trip-package li{position:relative;padding-left:27px}
.single-viaje .trip-package li::before{position:absolute;left:0;top:.05em;font-size:17px;font-weight:600}
.single-viaje .trip-includes li::before{content:"✓";color:var(--accent-text)}
.single-viaje .trip-excludes{background:transparent;box-shadow:none}
.single-viaje .trip-excludes li::before{content:"×";color:var(--muted)}

.single-viaje .trip-confidence{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:stretch;margin:clamp(28px,4vw,50px) 0 clamp(28px,4vw,46px);border:1px solid var(--hairline);border-radius:var(--r);background:var(--surface);overflow:hidden}
.single-viaje .trip-confidence .deposito-card{margin:0;border:0;border-radius:0;padding:clamp(24px,3vw,34px)}
.single-viaje .trip-confidence .deposito-card .lbl{font-weight:600;margin-bottom:8px}
.single-viaje .trip-confidence .deposito-card .frase{font-size:var(--type-body-strong);line-height:1.4}
.single-viaje .trip-confidence .trust-line{display:flex;align-items:center;margin:0;padding:clamp(24px,3vw,34px);border:0;border-left:1px solid var(--hairline);font-size:var(--type-list);line-height:1.6}
.single-viaje .trip-confidence>.trust-line:only-child{grid-column:1/-1;border-left:0}

.single-viaje .cta{padding-block:clamp(72px,8vw,108px)}
.single-viaje .cta-inner{gap:clamp(32px,6vw,90px)}
.single-viaje .cta h2{font-size:var(--type-cta-display);line-height:1.02;max-width:15ch}
.single-viaje .cta .cta-sub{max-width:58ch;font-size:var(--type-support);line-height:1.5;margin-top:18px}
.single-viaje .cta .cta-act{min-width:210px}
.single-viaje .cta .btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding-inline:28px;box-shadow:0 6px 16px rgba(9,35,91,.14);transition:transform .2s cubic-bezier(.22,1,.36,1),background-color .2s cubic-bezier(.22,1,.36,1)}
.single-viaje .cta .btn:hover{transform:translateY(-2px)}
.single-viaje .cta .btn:active{transform:translateY(0)}
.single-viaje .cta .btn:focus-visible{outline:3px solid rgba(255,255,255,.72);outline-offset:4px}

@media (min-width:641px){
  .single-viaje .cta-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,280px);align-items:end}
  .single-viaje .cta .cta-act{min-width:0;width:100%}
  .single-viaje .cta .btn{width:100%;min-height:64px;padding-inline:34px;font-size:var(--type-list)}
}

.single-viaje .viaje-gallery{padding-top:clamp(60px,7vw,96px);padding-bottom:clamp(76px,9vw,124px)}
.single-viaje .viaje-gallery>.detail-sec{font-size:var(--type-h2-component);margin:0 0 24px}
.single-viaje .viaje-gallery .galeria{margin-top:0}
.single-viaje .viaje-gallery .galeria img{transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .2s cubic-bezier(.22,1,.36,1)}
.single-viaje .galeria[data-gallery] .galeria-item{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;border:0;border-radius:var(--r);background:var(--text);color:var(--on-accent);cursor:zoom-in;text-align:inherit}
.single-viaje .galeria[data-gallery] .galeria-item::after{content:"";position:absolute;inset:0;background:rgba(27,39,51,.18);opacity:0;transition:opacity .3s cubic-bezier(.22,1,.36,1)}
.single-viaje .galeria[data-gallery] .galeria-item:hover img,.single-viaje .galeria[data-gallery] .galeria-item:focus-visible img{transform:scale(1.025)}
.single-viaje .galeria[data-gallery] .galeria-item:hover::after,.single-viaje .galeria[data-gallery] .galeria-item:focus-visible::after{opacity:1}
.single-viaje .galeria[data-gallery] .galeria-item:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.single-viaje .galeria[data-gallery] .galeria-ampliar{position:absolute;right:16px;bottom:16px;z-index:1;min-height:38px;display:inline-flex;align-items:center;padding:8px 12px;border-radius:var(--r);background:rgba(27,39,51,.86);font-size:var(--type-micro);font-weight:600;letter-spacing:.02em;opacity:0;transform:translateY(6px);transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
.single-viaje .galeria[data-gallery] .galeria-item:hover .galeria-ampliar,.single-viaje .galeria[data-gallery] .galeria-item:focus-visible .galeria-ampliar{opacity:1;transform:none}
.single-viaje .galeria[data-gallery].gal-1 .galeria-item{grid-column:1/-1;aspect-ratio:16/9}
.single-viaje .galeria[data-gallery].gal-2 .galeria-item:nth-child(1){grid-column:span 7;aspect-ratio:16/10}
.single-viaje .galeria[data-gallery].gal-2 .galeria-item:nth-child(2){grid-column:span 5;aspect-ratio:4/3.35}
.single-viaje .galeria[data-gallery].gal-3 .galeria-item:nth-child(1){grid-column:span 7;grid-row:span 2}
.single-viaje .galeria[data-gallery].gal-3 .galeria-item:nth-child(2),.single-viaje .galeria[data-gallery].gal-3 .galeria-item:nth-child(3){grid-column:span 5;aspect-ratio:16/9.5}
.single-viaje .galeria[data-gallery].gal-4plus .galeria-item:nth-child(4n+1){grid-column:span 7;aspect-ratio:16/10}
.single-viaje .galeria[data-gallery].gal-4plus .galeria-item:nth-child(4n+2){grid-column:span 5;aspect-ratio:4/3.35}
.single-viaje .galeria[data-gallery].gal-4plus .galeria-item:nth-child(4n+3){grid-column:span 5;aspect-ratio:4/3.35}
.single-viaje .galeria[data-gallery].gal-4plus .galeria-item:nth-child(4n){grid-column:span 7;aspect-ratio:16/10}

.dialog-open{overflow:hidden}
.galeria-dialog:not([open]){display:none}
.galeria-dialog{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:rgba(18,29,40,.97);color:var(--on-accent)}
.galeria-dialog::backdrop{background:rgba(18,29,40,.82)}
.galeria-dialog[open]{display:grid;place-items:center;animation:galeria-dialog-in .28s cubic-bezier(.22,1,.36,1) both}
.galeria-dialog-inner{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;width:min(94vw,1500px);height:100%;padding:72px 0 34px}
.galeria-dialog-figura{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-items:center;min-width:0;height:100%}
.galeria-dialog-img{display:block;max-width:100%;max-height:calc(100dvh - 132px);width:auto;height:auto;border-radius:var(--r);object-fit:contain}
.galeria-dialog button{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.38);border-radius:var(--r);background:rgba(255,255,255,.08);color:var(--on-accent);cursor:pointer;transition:background-color .2s cubic-bezier(.22,1,.36,1),border-color .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1)}
.galeria-dialog button:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.7)}
.galeria-dialog button:active{transform:scale(.96)}
.galeria-dialog button:focus-visible{outline:3px solid var(--on-accent);outline-offset:4px}
.galeria-dialog button span{font-size:34px;font-weight:400;line-height:1;transform:translateY(-1px)}
.galeria-dialog .galeria-cerrar{position:absolute;top:18px;right:0;z-index:2}
.galeria-dialog .galeria-cerrar span{font-size:30px}
.galeria-dialog .galeria-anterior{justify-self:start}
.galeria-dialog .galeria-siguiente{justify-self:end}
.galeria-contador{padding-top:14px;color:rgba(255,255,255,.82);font-size:var(--type-meta);line-height:1.45;font-weight:500;letter-spacing:.03em}
@keyframes galeria-dialog-in{from{opacity:0}to{opacity:1}}

@media (max-width:900px){
  .single-viaje .trip-story{grid-template-columns:minmax(0,68ch);margin-top:48px}
  .single-viaje .trip-confidence{grid-template-columns:1fr}
  .single-viaje .trip-confidence .trust-line{border-left:0;border-top:1px solid var(--hairline)}
  .single-viaje .cta .cta-act{min-width:0}
}

@media (max-width:640px){
  .single-viaje .page-hero-alta{min-height:390px;height:52vh;max-height:500px}
  .single-viaje .page-hero h1{font-size:var(--type-h1-flagship);max-width:14ch}
  .single-viaje .page-hero .wrap{padding-bottom:28px}
  .single-viaje .trip-summary{box-shadow:0 10px 30px rgba(27,39,51,.05)}
  .single-viaje .trip-summary .celda{padding:20px 22px}
  .single-viaje .trip-summary .val{font-size:var(--type-body-strong)}
  .single-viaje .trip-story{margin-top:42px}
  .single-viaje .detail-prose{font-size:var(--type-body);line-height:1.65}
  .single-viaje .detail-prose>h2:first-child{font-size:var(--type-h2-component)}
  .single-viaje .trip-itinerary{margin-top:48px}
  .single-viaje .trip-itinerary .detail-sec{font-size:var(--type-h2-component);margin-bottom:16px}
  .single-viaje .trip-itinerary .list-card{padding:24px 22px}
  .single-viaje .trip-package{margin-top:48px}
  .single-viaje .trip-package>.detail-sec{font-size:var(--type-h2-component);margin-bottom:16px}
  .single-viaje .trip-package .list-card{padding:24px 22px}
  .single-viaje .trip-package .list-card+.list-card{border-left:0;border-top:1px solid var(--hairline)}
  .single-viaje .trip-confidence{margin:24px 0 32px}
  .single-viaje .trip-confidence .deposito-card,.single-viaje .trip-confidence .trust-line{padding:24px 22px}
  .single-viaje .cta{padding-block:64px}
  .single-viaje .cta-inner{display:flex;gap:28px}
  .single-viaje .cta h2{font-size:var(--type-cta-display);max-width:13ch}
  .single-viaje .cta .cta-sub{font-size:var(--type-support);margin-top:14px}
  .single-viaje .cta .cta-act,.single-viaje .cta .btn{width:100%}
  .single-viaje .viaje-gallery{padding-top:56px;padding-bottom:80px}
  .single-viaje .viaje-gallery>.detail-sec{font-size:var(--type-h2-component);margin-bottom:18px}
  .single-viaje .galeria[data-gallery] .galeria-item{grid-column:1/-1!important;grid-row:auto!important;aspect-ratio:16/10!important}
  .single-viaje .galeria[data-gallery] .galeria-ampliar{right:10px;bottom:10px;opacity:1;transform:none;background:rgba(27,39,51,.78)}
  .galeria-dialog-inner{grid-template-columns:52px minmax(0,1fr) 52px;width:100%;padding:70px 10px 24px}
  .galeria-dialog-img{max-height:calc(100dvh - 124px)}
  .galeria-dialog .galeria-cerrar{top:12px;right:12px}
  .galeria-dialog .galeria-anterior{margin-left:2px}
  .galeria-dialog .galeria-siguiente{margin-right:2px}
}

@media (prefers-reduced-motion:reduce){
  .single-viaje .back-link,.single-viaje .cta .btn,.single-viaje .viaje-gallery .galeria img,.single-viaje .galeria[data-gallery] .galeria-item::after,.single-viaje .galeria[data-gallery] .galeria-ampliar,.galeria-dialog button{transition:none}
  .single-viaje .galeria[data-gallery] .galeria-item:hover img,.single-viaje .galeria[data-gallery] .galeria-item:focus-visible img{transform:none}
  .galeria-dialog[open]{animation:none}
}

/* ============================================================================
   [P3] Standalone pages (Contacto, Nosotros) + beginner FAQ on /cursos/.
   Reuses the :root tokens and the [2B] page vocabulary. One cobalt band per
   page holds: .btn-ghost and the FAQ link are never solid cobalt. No em/en
   dashes in any content: string (the render normalizer does not cover CSS).
   ========================================================================== */
.archive-head .head-sub{color:var(--muted);font-size:var(--type-body);margin-top:10px;max-width:60ch}

/* Ghost button: cobalt label on a hairline border, never a filled block. */
.btn-ghost{background:transparent;border-color:var(--hairline);color:var(--accent-text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-press)}

/* Visibly non-final placeholders. */
.ph{color:var(--muted)}
.ph-slot{background:var(--card);border:2px dashed rgba(27,39,51,.3);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--type-meta);text-align:center;padding:24px}

/* Contacto: "Dos caminos". */
.contacto-canal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 28px;margin-top:28px;padding:24px 28px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r)}
.contacto-canal .lbl,.contacto-canales .lbl,.visita-datos .lbl{font-size:var(--type-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.canal-numero{font-size:var(--type-body);font-weight:600;margin-top:6px}
.canal-micro{color:var(--muted);font-size:var(--type-support);margin-top:4px}
.contacto-canales{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:14px 30px;margin:18px 0 0;padding:0}
.contacto-canales li{display:flex;align-items:center;gap:10px}
.contacto-canales a{color:var(--accent-text);font-weight:500}
.contacto-canales .soc{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--hairline);border-radius:50%}
.contacto-canales .soc:hover,.contacto-canales .soc:focus-visible{border-color:var(--accent-text)}
.contacto-canales .soc svg{width:20px;height:20px}
.contacto-visita{display:grid;grid-template-columns:1fr 1fr;margin:clamp(28px,4vw,44px) 0 clamp(64px,6vw,96px);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden}
.contacto-visita.sin-foto{grid-template-columns:1fr}
.visita-foto{margin:0;min-height:280px}
.visita-foto img{width:100%;height:100%;object-fit:cover;display:block}
.visita-datos{padding:26px 28px}
.visita-dir{font-weight:600;margin-top:8px}
.visita-ciudad{color:var(--muted);font-size:var(--type-support)}
.visita-horario{margin:14px 0 0}
.visita-horario div{display:flex;gap:16px;padding:3px 0}
.visita-horario dt{color:var(--muted);min-width:130px;font-size:var(--type-support)}
.visita-horario dd{margin:0;font-size:var(--type-support)}
.visita-nota{color:var(--muted);font-size:var(--type-support);margin:12px 0 16px;max-width:48ch}

/* Nosotros. Inner sections opt out of the global band padding (section rule
   ~line 112) and use the single-viaje rhythm token instead - same fix as
   .trip-itinerary/.trip-package. */
.nosotros-hero,.nosotros-historia,.trayectoria-sec,.equipo-sec,.destinos-sec{padding:0}
.nosotros-historia,.trayectoria-sec,.equipo-sec,.destinos-sec{margin-top:clamp(48px,5vw,68px)}
.destinos-sec{margin-bottom:clamp(48px,5vw,68px)}
.nosotros-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.nosotros-hero .archive-head{padding-top:clamp(40px,5vw,64px)}
.nosotros-fachada{margin:0;padding-top:clamp(24px,4vw,64px)}
.nosotros-fachada img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:30% 40%;border-radius:var(--r);display:block}
.nosotros-fachada .ph-slot{aspect-ratio:3/2;box-sizing:border-box}
.nosotros-fachada figcaption{color:var(--muted);font-size:var(--type-meta);line-height:var(--leading-meta);margin-top:8px}
.nosotros-historia{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,56px);align-items:center}
.nosotros-foto{aspect-ratio:4/3}
img.nosotros-foto{width:100%;object-fit:cover;border-radius:var(--r)}
.nosotros-anio{color:var(--muted);font-size:var(--type-support);line-height:1.5;margin-top:12px}
.trayectoria{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hito{background:var(--surface);border:1px solid var(--hairline);border-left:3px solid var(--accent);border-radius:var(--r);padding:18px 20px}
.hito-titulo{display:block;font-size:var(--type-numeric-display);font-weight:600;letter-spacing:-.02em;color:var(--text)}
.hito-texto{display:block;color:var(--muted);font-size:var(--type-meta);line-height:var(--leading-meta);margin-top:6px}
.equipo-perfil{display:grid;grid-template-columns:180px 1fr;gap:22px;max-width:720px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:22px}
.equipo-perfil+.equipo-perfil{margin-top:22px}
.equipo-foto{aspect-ratio:1/1;width:100%;object-fit:cover;border-radius:var(--r)}
.equipo-foto.ph-slot{box-sizing:border-box}
.equipo-nombre{font-weight:600;font-size:var(--type-body-strong);line-height:1.4}
.equipo-rol{color:var(--muted);font-size:var(--type-meta);line-height:1.45;margin-top:2px}
.equipo-bio{font-size:var(--type-support);line-height:1.5;margin-top:10px}
.equipo-certs{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline)}
.equipo-certs img{height:30px;width:auto}
.equipo-certs span{color:var(--muted);font-size:var(--type-meta);line-height:var(--leading-meta)}
.equipo-certs .ph-slot{min-width:90px;height:30px;font-size:var(--type-micro)}
.destinos-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile-destino{display:block}
.tile-destino img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);display:block}
.tile-destino .tile-nombre{display:block;margin-top:8px;font-size:var(--type-meta);font-weight:600;line-height:var(--leading-meta);color:var(--text)}
.tile-destino:hover .tile-nombre{color:var(--accent-text)}
.destinos-ver-mas{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:14px;color:var(--accent-text);font-weight:600}

/* Beginner FAQ on /cursos/. Grouped native details keep the reference FAQ's
   progressive structure while staying inside Costa Clara's locked system. */
.faq-cursos{padding:clamp(64px,7vw,104px) 0;background:var(--bg);border-top:1px solid var(--hairline)}
.faq-layout{display:grid;grid-template-columns:minmax(260px,4fr) minmax(0,7fr);gap:clamp(48px,8vw,120px);align-items:start}
.faq-intro{position:sticky;top:112px}
.faq-kicker{color:var(--accent-text);opacity:1;margin-bottom:12px}
.faq-cursos .detail-sec{max-width:13ch;margin:0;font-size:var(--type-h2-section);line-height:var(--leading-h2-section);text-wrap:balance}
.faq-lead{max-width:36ch;margin-top:18px;color:var(--muted);font-size:var(--type-support);line-height:var(--leading-support)}
.faq-list{max-width:820px}
.faq-group + .faq-group{margin-top:clamp(40px,5vw,60px)}
.faq-group-title{display:flex;align-items:center;gap:10px;margin:0 0 6px;color:var(--accent-text);font-size:var(--type-micro);font-weight:600;letter-spacing:.12em;line-height:var(--leading-micro);text-transform:uppercase}
.faq-group-title::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--accent)}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-item summary{position:relative;display:flex;align-items:center;min-height:68px;padding:18px 56px 18px 0;cursor:pointer;list-style:none;font-size:var(--type-body-strong);font-weight:600;letter-spacing:-.01em;line-height:var(--leading-body-strong);transition:color .2s cubic-bezier(.22,1,.36,1)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:50%;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--hairline);border-radius:var(--r);color:var(--accent-text);font-size:22px;font-weight:400;line-height:1;transform:translateY(-50%);transition:background-color .2s cubic-bezier(.22,1,.36,1),color .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1)}
.faq-item summary:hover{color:var(--accent-text)}
.faq-item summary:hover::after{border-color:var(--accent)}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r)}
.faq-item[open] summary{color:var(--accent-text)}
.faq-item[open] summary::after{background:var(--accent);color:var(--on-accent);transform:translateY(-50%) rotate(45deg)}
.faq-answer{max-width:66ch;padding:0 56px 24px 0;color:var(--muted);font-size:var(--type-list);line-height:var(--leading-list)}
.faq-closer{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:clamp(38px,5vw,56px);padding:22px 24px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);font-size:var(--type-list);line-height:var(--leading-list)}
.faq-closer p{color:var(--muted)}
.faq-closer strong{display:block;color:var(--text);font-weight:600}
.faq-closer a{display:inline-flex;align-items:center;min-height:44px;flex:none;color:var(--accent-text);font-weight:600}
.faq-closer a span{margin-left:6px;font-size:20px;transition:transform .2s cubic-bezier(.22,1,.36,1)}
.faq-closer a:hover span{transform:translateX(3px)}

/* Semantic leading closes the remaining inheritance gaps between selectors
   that share a type role. Glyph-only controls remain explicit exceptions. */
.salida-kicker,.primera-vez .pv-badge,.footer-col h3,.page-kicker,.page-hero .badge-agotado,.data-band .lbl,.list-card .lbl,.deposito-card .lbl,.single-viaje .page-kicker,.single-viaje .trip-package .lbl,.single-viaje .galeria-ampliar,.contacto-canal .lbl,.contacto-canales .lbl,.visita-datos .lbl{line-height:var(--leading-micro)}
.salida-datos div span,.salidas-trust,.salida-row .detalle,.salida-row .fecha,.salida-row .ver-mas,.curso-meta,.footer-base,.wa-fija,.salida-row.agotado .precio,.back-link,.data-band .sub2,.cta .cta-micro,.galeria-contador,.ph-slot,.equipo-rol{line-height:var(--leading-meta)}
.nav-links a,.curso-cta,.primera-vez p,.tile figcaption,.quote cite,footer p,footer a,.footer-contacto li,.detail-quiet,.cta .cta-sub,.nosotros-anio,.equipo-bio,.canal-micro,.visita-ciudad,.visita-horario dt,.visita-horario dd,.visita-nota{line-height:var(--leading-support)}
.detail-prose li,.list-card li,.faq-answer,.faq-closer,.single-viaje .trip-confidence .trust-line{line-height:var(--leading-list)}

@media (max-width:800px){
  .faq-layout{grid-template-columns:1fr;gap:36px}
  .faq-intro{position:static}
  .faq-cursos .detail-sec{max-width:16ch}
  .nosotros-hero{grid-template-columns:1fr;gap:8px}
  .nosotros-fachada{padding-top:0}
}

@media (max-width:640px){
  .contacto-visita{grid-template-columns:1fr}
  .visita-foto{min-height:0;aspect-ratio:16/9}
  .contacto-canal{align-items:stretch;flex-direction:column}
  .contacto-canal .btn-primary,.visita-datos .btn-ghost,.cta .cta-act .btn-primary{width:100%;box-sizing:border-box;text-align:center}
  .nosotros-historia{grid-template-columns:1fr}
  .trayectoria{grid-template-columns:1fr}
  .equipo-perfil{grid-template-columns:1fr}
  .equipo-perfil .equipo-foto{max-width:220px}
  .destinos-strip{grid-template-columns:repeat(2,1fr)}
  .faq-item summary{min-height:64px;padding-right:48px}
  .faq-answer{padding-right:12px}
  .faq-closer{align-items:flex-start;flex-direction:column}
}