/* ==========================================================================
   VIAJE POR EGIPTO — SISTEMA DE DISEÑO  ·  vpe.css
   Hoja única para todo el sitio. En WordPress la encola functions.php junto a
   las dos familias de Google Fonts (Fraunces y Schibsted Grotesk); no hay que
   añadir ninguna etiqueta a mano.

   Sin etiquetas de marcado en este comentario: un signo de menor que dentro de
   un comentario CSS hace que el analizador lo tome por una etiqueta y descarte
   en silencio el resto de la hoja en cuanto alguien la inserta en línea.

   CAPA 1  tokens + base + componentes de la portada
   CAPA 2  componentes de páginas interiores
   ========================================================================== */

/* ============================================================
   VIAJE POR EGIPTO — v4
   Display: Fraunces · Texto/UI: Schibsted Grotesk
   ============================================================ */
:root{
  --ink:#161512; --ink-2:#4A453C; --ink-3:#7C7466;
  --paper:#FDFBF7; --sand:#F1EADF; --line:#E2D9CB;
  --sun:#D8371C; --sun-2:#F0871F;
  --nilo:#0B3B33; --nilo-2:#0E4F45;
  --night:#12100D;
  --wa:#1F9D55;
  --nilo-soft:#E3EDE9;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:6px; --r-lg:10px; --wrap:1280px;
  --shadow:0 1px 2px rgba(22,21,18,.05), 0 14px 36px rgba(22,21,18,.12);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16.5px; line-height:1.55; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
a{ color:inherit; } button{ font:inherit; cursor:pointer; } p{ margin:0; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:600; letter-spacing:-.018em; line-height:1.04; }
h1{ font-size:clamp(40px,5.6vw,78px); }
h2{ font-size:clamp(30px,3.7vw,50px); }
h3{ font-size:clamp(19px,1.5vw,23px); line-height:1.18; font-variation-settings:"opsz" 40; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.band{ padding-block:clamp(56px,6.6vw,30px); }
/* La maqueta escribe este fondo en el atributo style de cada seccion.
   Aqui es un modificador, que es lo que pide CLAUDE.md 3. */
.band--sand{ background:var(--sand); }
:focus-visible{ outline:2.5px solid var(--sun); outline-offset:3px; }

.tag{ display:inline-block; font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.tag--sun{ color:var(--sun); }
.lede{ font-size:clamp(16.5px,1.25vw,18.5px); color:var(--ink-2); max-width:58ch; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px;
  padding:0 24px; border-radius:var(--r); border:1.5px solid transparent; font-family:var(--sans);
  font-weight:600; font-size:15.5px; text-decoration:none;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s,opacity .2s; }
.btn--sun{ background:var(--sun); color:#fff; }
.btn--sun:hover{ background:#B72C13; transform:translateY(-1px); }
.btn--line{ border-color:var(--ink); color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:#fff; }
.btn--light{ border-color:rgba(255,255,255,.6); color:#fff; }
.btn--light:hover{ background:#fff; color:var(--ink); }
.btn--wa{ background:var(--wa); color:#fff; }
.btn--wa:hover{ background:#178047; }
.btn[disabled]{ opacity:.42; pointer-events:none; }

/* ---------- header ---------- */
.bar{ background:var(--night); color:#C9C0B4; font-size:13px; }
.bar__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; flex-wrap:wrap; }
.bar__l,.bar__r{ display:flex; align-items:center; gap:18px; }
.bar__item{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.bar__item + .bar__item{ padding-left:18px; border-left:1px solid rgba(255,255,255,.16); }
.bar b{ color:#fff; font-weight:600; }
.bar a{ text-decoration:none; } .bar a:hover{ color:var(--sun-2); }
.bar .st{ color:var(--sun-2); letter-spacing:.06em; font-size:12px; }
.bar svg{ opacity:.75; flex-shrink:0; }
.bar__cur{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); border-radius:100px; padding:5px 12px 5px 11px; color:#fff; font-weight:600; }
.bar__cur select{ background:none; border:0; color:#fff; font-family:var(--sans); font-size:13px; font-weight:600; padding:0; }
.bar__cur select option{ color:var(--ink); }
@media (max-width:1020px){ .bar .hide{ display:none; } }
@media (max-width:700px){
  .bar__in{ justify-content:center; gap:10px; min-height:38px; }
  .bar__item + .bar__item{ padding-left:10px; }
  /* The items are white-space:nowrap, so the row cannot shrink to fit a phone.
     Let it wrap instead: on a 390 px screen the phone number and the currency
     pill together are wider than the viewport and would push the whole page. */
  .bar__l,.bar__r{ gap:10px; flex-wrap:wrap; justify-content:center; }
}

.hdr{ position:sticky; top:0; z-index:60; background:rgba(253,251,247,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.hdr__in{ display:flex; align-items:center; gap:24px; min-height:74px; }
.logo{ text-decoration:none; line-height:.92; flex-shrink:0; display:block; }
.logo b{ display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.logo span{ display:block; font-family:var(--serif); font-size:30px; font-weight:600; letter-spacing:-.02em; }
.logo span i{ font-style:normal; color:var(--sun); }
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav a{ text-decoration:none; font-size:15px; font-weight:500; color:var(--ink-2); padding:9px 13px; border-radius:var(--r); }
.nav a:hover{ color:var(--sun); background:var(--sand); }
.hdr__cta{ display:flex; align-items:center; gap:10px; }
.hdr .btn{ min-height:44px; font-size:14.5px; padding:0 18px; }
.burger{ display:none; width:46px; height:46px; border:1.5px solid var(--line); background:none; border-radius:var(--r); align-items:center; justify-content:center; }
@media (max-width:1140px){ .nav{ display:none; } .burger{ display:inline-flex; margin-left:auto; } }
.mnav{ display:none; background:var(--paper); border-top:1px solid var(--line); }
.mnav.open{ display:block; }


/* ============ MEGA MENÚ ============ */
.nav__t{ display:inline-flex; align-items:center; gap:7px; background:none; border:0;
  font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink-2);
  padding:9px 13px; border-radius:var(--r); transition:color .18s, background-color .18s; }
.nav__t svg{ opacity:.5; transition:transform .25s ease; }
.nav__t:hover,.nav__t[aria-expanded="true"]{ color:var(--sun); background:var(--sand); }
.nav__t[aria-expanded="true"] svg{ transform:rotate(180deg); opacity:1; }

.mega{ position:absolute; left:0; right:0; top:100%; z-index:59;
  background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 28px 46px rgba(22,21,18,.14);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s; }
.mega.open{ opacity:1; visibility:visible; transform:none; }
.mega__in{ display:grid; gap:clamp(22px,2.8vw,46px); padding-block:34px 28px; align-items:start; }
.mega--cols .mega__in{ grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,318px); }
.mega--grid .mega__in{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mega h5{ margin:0 0 14px; font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.mega ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.mega ul a{ text-decoration:none; font-size:15px; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; }
.mega ul a::after{ content:"→"; font-size:13px; opacity:0; transform:translateX(-5px); transition:opacity .2s, transform .2s; }
.mega ul a:hover{ color:var(--sun); }
.mega ul a:hover::after{ opacity:1; transform:none; }
.mega .hot{ background:var(--sun); color:#fff; font-size:10px; font-weight:600; letter-spacing:.06em;
  padding:3px 8px; border-radius:100px; text-transform:uppercase; }
.mega .soft{ background:var(--nilo-soft,#E3EDE9); color:var(--nilo); font-size:10px; font-weight:600;
  letter-spacing:.06em; padding:3px 8px; border-radius:100px; text-transform:uppercase; }

.mega__feat{ position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:250px; border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:#fff; }
.mega__feat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.mega__feat:hover img{ transform:scale(1.06); }
.mega__feat::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,10,8,.15) 22%, rgba(12,10,8,.72) 66%, rgba(12,10,8,.94) 100%); }
.mega__feat .b{ position:relative; z-index:2; padding:20px; }
.mega__feat .e{ font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; opacity:.88; }
.mega__feat h6{ margin:8px 0 10px; font-family:var(--serif); font-size:21px; font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.mega__feat .p{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-top:1px solid rgba(255,255,255,.3); padding-top:11px; }
.mega__feat .p b{ font-family:var(--serif); font-size:21px; font-weight:600; }
.mega__feat .p span{ font-size:13px; font-weight:600; }

.dest{ text-decoration:none; display:block; }
/* WordPress prints width and height attributes on every image it renders.
   Left alone those attributes beat aspect-ratio and the image comes out the
   wrong shape, so every rule that shapes an image with aspect-ratio also
   releases the height. */
.dest img{ width:100%; height:auto; aspect-ratio:7/4; object-fit:cover; border-radius:var(--r); }
.dest b{ display:block; margin-top:11px; font-family:var(--serif); font-size:17.5px; font-weight:600; letter-spacing:-.01em; }
.dest span{ font-size:12.5px; color:var(--ink-3); }
.dest:hover b{ color:var(--sun); }

.mega__foot{ border-top:1px solid var(--line); padding-block:15px; display:flex; flex-wrap:wrap;
  gap:10px 26px; align-items:center; justify-content:space-between; font-size:14px; color:var(--ink-3); }
.mega__foot a{ font-weight:600; color:var(--sun); text-decoration:none; }
.mega__foot a:hover{ text-decoration:underline; }
@media (max-width:1140px){ .mega{ display:none; } }

/* acordeón del menú móvil */
.mnav > a{ display:block; padding:15px 24px; text-decoration:none; font-weight:600; border-bottom:1px solid var(--line); }
.mnav details{ border-bottom:1px solid var(--line); }
.mnav summary{ list-style:none; cursor:pointer; padding:15px 24px; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:14px; }
.mnav summary::-webkit-details-marker{ display:none; }
.mnav summary::after{ content:"+"; color:var(--sun); font-size:20px; line-height:1; }
.mnav details[open] summary::after{ content:"–"; }
.mnav details ul{ list-style:none; margin:0; padding:0 24px 18px; display:grid; gap:12px; }
.mnav details ul a{ text-decoration:none; font-size:15px; color:var(--ink-2); }

/* ---------- HERO ---------- */
.hero{ position:relative; background:var(--night); color:#fff; overflow:hidden; }
.hero__stage{ position:absolute; inset:0; }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; }
.slide.on{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,9,7,.86) 0%, rgba(10,9,7,.55) 46%, rgba(10,9,7,.18) 74%),
             linear-gradient(0deg, rgba(10,9,7,.7) 0%, transparent 40%); }
.hero__in{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center;
  min-height:min(86vh,580px); padding-block:clamp(49px,4vw,89px); }
.hero__eyebrow{ display:flex; align-items:center; gap:12px; font-family:var(--sans); font-size:12px;
  font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.hero__eyebrow::before{ content:""; width:34px; height:2px; background:var(--sun-2); }

.hero h1 {
  margin-top: 20px;
  max-width: 18ch;
  font-weight: 600;
}
.hero h1 .it{ font-style:italic; color:#FFE2C7; }
.hero__sub{ margin-top:20px; max-width:44ch; font-size:clamp(15.5px,1.3vw,18.5px); color:rgba(255,255,255,.87); }
.hero__act{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.hero__deck{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:22px; padding-bottom:26px; }
.thumbs{ display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.thumbs::-webkit-scrollbar{ display:none; }
.thumb{ position:relative; flex:0 0 auto; width:184px; height:112px; border-radius:8px; overflow:hidden;
  border:0; padding:0; background:none; text-align:left; opacity:.62; transition:opacity .25s; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,9,7,.85), transparent 62%); }
.thumb span{ position:absolute; left:11px; right:11px; bottom:9px; z-index:2; color:#fff; font-family:var(--sans); font-size:13.5px; font-weight:600; line-height:1.2; }
.thumb small{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:2px; }
.thumb:hover{ opacity:.9; }
.thumb[aria-current="true"]{ opacity:1; box-shadow:0 0 0 2px var(--sun-2); }
.hero__nav{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.arrow{ width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); background:none; color:#fff; display:grid; place-items:center; }
.arrow:hover{ background:#fff; color:var(--ink); }
.count{ font-family:var(--serif); font-size:28px; font-weight:600; color:rgba(255,255,255,.9); }
@media (max-width:900px){ .hero__deck{ flex-direction:column; align-items:stretch; } .hero__nav{ justify-content:flex-end; } .thumb{ width:152px; height:96px; } }

/* ticker */
.ticker{ background:var(--sun); color:#fff; overflow:hidden; }
.ticker__in{ display:flex; white-space:nowrap; animation:slide 34s linear infinite; }
.ticker ul{ display:flex; list-style:none; margin:0; padding:0; }
.ticker li{ display:flex; align-items:center; gap:12px; padding:12px 26px; font-size:12.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.ticker li::before{ content:""; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.75); }
@keyframes slide{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- datos ---------- */
.facts{ background:var(--sand); }
.facts__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; padding-block:36px; }
.fact b{ display:block; font-family:var(--serif); font-size:clamp(27px,2.4vw,36px); font-weight:600; line-height:1.05; }
.fact span{ display:block; font-size:14px; color:var(--ink-2); margin-top:6px; max-width:24ch; }
@media (max-width:860px){ .facts__in{ grid-template-columns:1fr 1fr; gap:22px; } }

/* ---------- section head ---------- */
.sh{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:38px; }
.sh h2{ margin-top:14px; max-width:25ch; }
.sh p{ margin-top:16px; }
.sh__link{ text-decoration:none; font-weight:600; font-size:15px; border-bottom:2px solid var(--sun); padding-bottom:3px; white-space:nowrap; }
.sh__link:hover{ color:var(--sun); }
@media (max-width:820px){ .sh{ flex-direction:column; align-items:flex-start; gap:18px; } }

/* ============ TARJETAS DE VIAJE (plantilla editorial) ============ */
.trips{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.trip{ position:relative; display:block; aspect-ratio:4/5; border-radius:var(--r-lg);
  overflow:hidden; text-decoration:none; color:#fff; }
.trip__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.trip:hover .trip__img{ transform:scale(1.05); }
.trip__veil{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,10,8,.58) 0%, rgba(12,10,8,.06) 32%, rgba(12,10,8,.72) 70%, rgba(12,10,8,.94) 100%); }
.trip__frame{ position:absolute; inset:14px; border:1px solid rgba(255,255,255,.3); pointer-events:none; }
.trip__in{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:30px; }
.trip__brand{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mark{ line-height:.92; }
.mark b{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; opacity:.82; }
.mark span{ display:block; font-family:var(--serif); font-size:21px; font-weight:600; letter-spacing:-.02em; }
.mark i{ font-style:normal; color:var(--sun-2); }
.badge{ background:var(--sun); font-size:11px; font-weight:600; padding:6px 12px; border-radius:100px; white-space:nowrap; }

/* ---------- cinta de oferta ----------
   Cruza la esquina superior derecha de la tarjeta. Va pegada al borde y por
   encima del filete de .trip__frame, asi que se coloca antes que el contenido
   y no dentro de el.

   El giro es de 45 grados sobre un cuadrado del tamano de la esquina: la banda
   mide mas que la diagonal para que llegue a los dos lados y .trip la recorta
   con su propio overflow. Sin degradados ni sombras de colores nuevos: es el
   rojo de marca, que es el que ya usan la badge y los botones. */
.ribbon{ position:absolute; top:0; right:0; width:132px; height:132px; overflow:hidden;
  pointer-events:none; z-index:3; }
.ribbon b{ position:absolute; top:26px; right:-42px; width:180px; padding:7px 0;
  transform:rotate(45deg); background:var(--sun); color:#fff; text-align:center;
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; line-height:1.25;
  box-shadow:0 2px 10px rgba(22,21,18,.28); }
/* Una tarjeta con cinta no necesita ademas la etiqueta editorial: la plantilla
   ya esconde una cuando hay la otra. */

/* En la tarjeta ancha .boat la esquina es mas baja, asi que la cinta encoge. */
.boat .ribbon{ width:112px; height:112px; }
.boat .ribbon b{ top:20px; right:-46px; width:160px; font-size:11px; }

@media (max-width:640px){
  .ribbon{ width:114px; height:114px; }
  .ribbon b{ top:22px; right:-46px; width:160px; font-size:11px; }
}
.badge--dark{ background:rgba(12,10,8,.55); border:1px solid rgba(255,255,255,.35); }
.trip__eyebrow{ display:flex; align-items:center; gap:10px; font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; opacity:.92; }
.trip__eyebrow::before{ content:""; width:24px; height:2px; background:var(--sun-2); flex-shrink:0; }
.trip h3{ font-size:22px; margin:13px 0 0; }
.trip h3 em{ font-style:italic; color:#FFDCBC; display:block; }
.trip__route{ display:flex; flex-wrap:wrap; gap:6px; font-size:12.5px; opacity:.88; margin-top:12px; }
.trip__route i{ font-style:normal; opacity:.5; }
.trip__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  border-top:1px solid rgba(255,255,255,.3); padding-top:14px; margin-top:17px; }
.trip__from{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.8; }
.trip__price{ font-family:var(--serif); font-size:29px; font-weight:600; letter-spacing:-.03em; line-height:1; }
/* El precio anterior, tachado. Mas pequeno y apagado: acompana al precio, no
   compite con el. Va en su propia linea para que el numero grande siga siendo
   lo primero que se lee. */
.trip__price s{ display:block; margin-bottom:3px; font-family:var(--sans); font-size:13px;
  font-weight:500; letter-spacing:0; opacity:.72; text-decoration-thickness:1.5px; }
.boat__f .p b s{ display:block; margin-bottom:2px; font-family:var(--sans); font-size:12.5px;
  font-weight:500; color:var(--ink-3); text-decoration-thickness:1.5px; }
.trip__specs{ font-size:12px; opacity:.88; text-align:right; line-height:1.5; }
@media (max-width:1040px){ .trips{ grid-template-columns:1fr 1fr; } }
@media (max-width:660px){ .trips{ grid-template-columns:1fr; } .trip__in{ padding:24px; } .trip__frame{ inset:12px; } }

/* ---------- línea del Nilo ---------- */
.nile{ background:var(--night); color:#F0E9DE; }
.nile h2,.nile h3{ color:#fff; } .nile .lede{ color:#BEB4A5; }
.river{ margin-top:42px; }
.river__track{ position:relative; display:flex; justify-content:space-between; gap:6px; padding-top:34px; overflow-x:auto; scrollbar-width:none; }
.river__track::-webkit-scrollbar{ display:none; }
.river__track::before{ content:""; position:absolute; top:12px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, rgba(240,135,31,.25), rgba(240,135,31,.85), rgba(14,79,69,.6)); }
.stop{ position:relative; background:none; border:0; color:#9A9083; font-family:var(--sans); font-size:14.5px; font-weight:600; white-space:nowrap; text-align:center; min-width:96px; padding:20px 8px 0; }
.stop::before{ content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:var(--night); border:2px solid #6E6558; transition:all .25s; }
.stop:hover{ color:#E4DACB; }
.stop[aria-selected="true"]{ color:#fff; }
.stop[aria-selected="true"]::before{ background:var(--sun-2); border-color:var(--sun-2); width:15px; height:15px; top:-16px; }
.stop small{ display:block; font-size:11px; font-weight:500; color:#7C7366; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }
.river__panel{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(24px,3.5vw,54px); align-items:center; margin-top:42px; }
.river__panel[hidden]{ display:none; }
.river__panel img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-lg); }
.river__panel p{ margin-top:14px; color:#BEB4A5; }
.river__facts{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.river__facts li{ display:flex; gap:11px; font-size:14.5px; color:#DCD2C4; }
.river__facts svg{ flex-shrink:0; margin-top:4px; color:var(--sun-2); }
@media (max-width:880px){ .river__panel{ grid-template-columns:1fr; } }

/* ============ CRUCEROS (rediseñadas) ============ */
.boats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.boat{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.boat:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.boat__media{ position:relative; }
.boat__media img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.boat__nights{ position:absolute; left:14px; top:14px; background:rgba(253,251,247,.95); color:var(--ink);
  font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:100px; }
.boat__b{ padding:22px; display:flex; flex-direction:column; flex:1; }
.boat__b h3{ margin-bottom:8px; }
.boat__b > p{ font-size:14.5px; color:var(--ink-2); }
.boat__specs{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; }
.boat__specs li{ display:flex; gap:9px; font-size:13.5px; color:var(--ink-2); align-items:flex-start; }
.boat__specs svg{ flex-shrink:0; margin-top:3px; color:var(--nilo-2); }
.boat__f{ margin-top:auto; padding-top:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.boat__f .p{ line-height:1.1; }
.boat__f .p small{ display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
.boat__f .p b{ font-family:var(--serif); font-size:26px; font-weight:600; letter-spacing:-.03em; }
.boat__go{ font-size:14px; font-weight:600; color:var(--sun); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.boat:hover .boat__go{ gap:10px; }
.boats--two{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
@media (max-width:920px){ .boats{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .boats{ grid-template-columns:1fr; } }

/* ============ DISEÑA TU VIAJE (asistente por pasos) ============ */
.build{ background:var(--nilo); color:#EAF1EE; }
.build h2{ color:#fff; } .build .lede{ color:#A9C3BB; margin-inline:auto; }
.build__head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.build__head h2{ margin-top:14px; }
.wiz{ background:var(--paper); color:var(--ink); border-radius:14px; max-width:900px; margin:0 auto;
  box-shadow:0 20px 60px rgba(0,0,0,.28); overflow:hidden; }
.wiz__bar{ display:flex; border-bottom:1px solid var(--line); }
.wiz__bar li{ flex:1; display:flex; align-items:center; gap:10px; padding:16px 18px; font-size:13.5px;
  font-weight:600; color:var(--ink-3); border-bottom:2px solid transparent; }
.wiz__bar li b{ width:24px; height:24px; border-radius:50%; background:var(--sand); color:var(--ink-3);
  display:grid; place-items:center; font-size:12.5px; flex-shrink:0; }
.wiz__bar li[aria-current="true"]{ color:var(--ink); border-bottom-color:var(--sun); }
.wiz__bar li[aria-current="true"] b{ background:var(--sun); color:#fff; }
.wiz__bar li.done b{ background:var(--nilo-2); color:#fff; }
.wiz__body{ padding:clamp(22px,3vw,34px); }
.wiz__panel[hidden]{ display:none; }
.wiz__panel h3{ font-size:24px; }
.wiz__panel > p{ font-size:15px; color:var(--ink-2); margin-top:8px; }
.group{ margin-top:24px; }
.group h4{ margin:0 0 11px; font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ min-height:44px; padding:0 16px; border-radius:100px; border:1.5px solid var(--line);
  background:#fff; color:var(--ink-2); font-family:var(--sans); font-size:14.5px; font-weight:500; transition:all .18s; }
.chip:hover{ border-color:var(--sun); color:var(--sun); }
.chip[aria-pressed="true"]{ background:var(--sun); border-color:var(--sun); color:#fff; }
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.fields label{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.fields select,.fields input{ width:100%; min-height:50px; padding:0 14px; border-radius:var(--r);
  border:1.5px solid var(--line); background:#fff; color:var(--ink); font-family:var(--sans); font-size:15.5px; }
@media (max-width:620px){ .fields{ grid-template-columns:1fr; } }

.summary{ margin-top:22px; background:var(--sand); border-radius:var(--r-lg); padding:22px; }
.summary h4{ margin:0 0 12px; font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:-.01em; }
.summary ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.summary li{ display:flex; gap:11px; font-size:15px; align-items:flex-start; }
.summary li::before{ content:""; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--sun); flex-shrink:0; }
.summary__meta{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:6px; font-size:14px; color:var(--ink-2); }
.summary__meta b{ color:var(--ink); }
.wiz__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px clamp(22px,3vw,34px); border-top:1px solid var(--line); background:#fff; flex-wrap:wrap; }
.wiz__back{ background:none; border:0; font-weight:600; color:var(--ink-3); padding:10px 2px; }
.wiz__back:hover{ color:var(--ink); }
.wiz__back[hidden]{ visibility:hidden; }
.wiz__note{ font-size:13px; color:var(--ink-3); }
@media (max-width:560px){
  .wiz__bar li span{ display:none; }
  .wiz__bar li{ justify-content:center; padding:14px 8px; }
  .wiz__foot .btn{ width:100%; }
}

/* ---------- locales ---------- */
.local{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center; }
.local__pics{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.local__pics img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 4;
  object-fit: cover;
  border-radius: var(--r-lg);
}
.local__list{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:17px; }
.local__list li{ display:grid; grid-template-columns:26px 1fr; gap:14px; }
.local__list b{ display:block; font-size:16.5px; font-weight:700; }
.local__list p{ font-size:14.5px; color:var(--ink-2); margin-top:3px; }
.local__list i{ font-style:normal; font-family:var(--serif); font-weight:600; color:var(--sun); font-size:15px; }
@media (max-width:880px){ .local{ grid-template-columns:1fr; } .local__pics{ order:-1; } }

/* ============ OPINIONES (estilo Egypt Tours by Locals) ============ */
.trust{ display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center; }
.trust__card{ background:#fff; border-radius:14px; padding:34px 30px; text-align:center; box-shadow:var(--shadow); }
.trust__num{ font-family:var(--serif); font-size:62px; font-weight:600; letter-spacing:-.04em; line-height:1; }
.trust__num sup{ font-size:22px; color:var(--sun); vertical-align:super; margin-left:2px; }
.trust__stars{ display:flex; justify-content:center; gap:3px; color:var(--sun-2); margin:12px 0 14px; }
.trust__card p{ font-size:14.5px; color:var(--ink-2); }
.trust__card p b{ color:var(--ink); }
.trust__logos{ display:flex; justify-content:center; gap:10px; margin:18px 0; padding-top:18px; border-top:1px solid var(--line); flex-wrap:wrap; }
.trust__logos span{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  border-radius:100px; padding:7px 14px; font-size:13.5px; font-weight:600; }
.trust__link{ font-size:14px; font-weight:600; color:var(--sun); text-decoration:none; }
.trust__link:hover{ text-decoration:underline; }
.trust__side .eyebrow{ display:flex; align-items:center; gap:12px; font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sun); }
.trust__side .eyebrow::before{ content:""; width:26px; height:2px; background:var(--sun); }
.trust__side h2{ margin-top:16px; }
.trust__side h2 em{ font-style:italic; }
.trust__side p{ margin-top:18px; font-size:16.5px; color:var(--ink-2); max-width:56ch; }
.trust__side p b{ color:var(--ink); }
@media (max-width:900px){ .trust{ grid-template-columns:1fr; } }

.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; display:flex; flex-direction:column; }
.quote .st{ color:var(--sun-2); font-size:14px; letter-spacing:.08em; }
.quote p{ font-size:15.5px; color:var(--ink-2); margin-top:12px; }
.quote footer{ margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:12px; }
.avatar{ width:40px; height:40px; border-radius:50%; background:var(--nilo); color:#fff; display:grid;
  place-items:center; font-size:13.5px; font-weight:700; flex-shrink:0; }
.quote footer b{ display:block; font-size:14.5px; }
.quote footer span{ font-size:12.5px; color:var(--ink-3); }
@media (max-width:960px){ .quotes{ grid-template-columns:1fr; } }

/* ---------- guía + faq ---------- */
.guide{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,60px); align-items:start; }
/* La maqueta lo lleva en un atributo style repetido cuatro veces. */
.guide__h{ margin-top:12px; font-size:clamp(24px,2.3vw,32px); }
.guide__h a{ text-decoration:none; }
.guide__h a:hover{ color:var(--sun); }
/* Una sola columna cuando la otra no tiene nada que mostrar: media rejilla
   vacia se ve como un fallo de maquetacion, no como una decision. */
.guide--solo{ grid-template-columns:minmax(0,1fr); }
.local--solo{ grid-template-columns:minmax(0,1fr); }

/* Los dos titulos que la maqueta lleva en atributos style. */
.local__h{ margin-top:14px; }
.local__lede{ margin-top:18px; }
.posts{ display:grid; gap:15px; }
.post:not(body):not(article){ display:grid; grid-template-columns:118px 1fr; gap:18px; text-decoration:none; align-items:center; }
.post:not(body):not(article) img{ width:118px; height:79px; object-fit:cover; border-radius:var(--r); }
.post:not(body):not(article) b{ font-family:var(--serif); font-size:17px; font-weight:600; display:block; line-height:1.2; }
.post:not(body):not(article) span{ font-size:12.5px; color:var(--ink-3); }
.post:not(body):not(article):hover b{ color:var(--sun); }
.faq details{ border-bottom:1px solid var(--line); padding:17px 0; }
.faq summary{ list-style:none; cursor:pointer; font-family:var(--serif); font-size:19px; font-weight:600; display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--sun); font-size:21px; line-height:1; font-family:var(--sans); }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin-top:11px; font-size:15px; color:var(--ink-2); max-width:60ch; }
@media (max-width:880px){ .guide{ grid-template-columns:1fr; } }

/* ============ BANNER DENTRO DEL PIE ============ */
.ftcta{ text-align:center; padding-block:clamp(46px,5.6vw,76px); border-bottom:1px solid rgba(255,255,255,.2); }
.ftcta__eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sun-2); }
.ftcta__eyebrow::before{ content:""; width:28px; height:2px; background:var(--sun-2); }
.ftcta h2{ margin-top:18px; color:#fff; max-width:16ch; margin-inline:auto; }
.ftcta h2 em{ font-style:italic; color:var(--sun-2); }
.ftcta p{ margin:18px auto 0; max-width:52ch; color:#C6DAD3; font-size:16.5px; }
.ftcta__act{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }

/* ---------- pie ---------- */
.ft{ background:var(--nilo); color:#A9C3BB; overflow:hidden; }
.ft__g{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-top:56px; }
.ft h4{ font-family:var(--serif); font-size:21px; font-weight:600; color:#fff; margin:0 0 14px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.22); }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.ft a{ text-decoration:none; font-size:14.5px; color:#CFE0DA; }
.ft a:hover{ color:var(--sun-2); }
.ft__meta{ margin-top:54px; display:flex; flex-wrap:wrap; gap:18px 34px; justify-content:space-between; align-items:center; font-size:12.5px; }
.ft__word{ margin-top:34px; margin-bottom:-.16em; font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(58px,15.3vw,232px); line-height:.82; letter-spacing:-.035em; text-align:center; white-space:nowrap; }
@media (max-width:900px){ .ft__g{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ft__g{ grid-template-columns:1fr; } }

.wa{ position:fixed; right:18px; bottom:18px; z-index:70; width:54px; height:54px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.24); }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.rv{ opacity:0; transform:translateY(16px); }
.rv.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
}

/* ============================================================
   CAPA 2 — COMPONENTES DE PÁGINAS INTERIORES
   ============================================================ */

/* ---------- migas de pan ---------- */
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--ink-3); }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--sun); }
.crumbs i{ font-style:normal; opacity:.5; }
.crumbs [aria-current]{ color:var(--ink); font-weight:500; }
.phero .crumbs{ color:rgba(255,255,255,.75); }
.phero .crumbs [aria-current]{ color:#fff; }

/* ---------- cabecera de página ---------- */
.phero{ position:relative; background:var(--night); color:#fff; overflow:hidden; }
.phero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.88; }
.phero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,9,7,.88) 0%, rgba(10,9,7,.55) 52%, rgba(10,9,7,.2) 80%),
             linear-gradient(0deg, rgba(10,9,7,.55), transparent 45%); }
.phero__in{ position:relative; z-index:2; padding-block:clamp(38px,4.6vw,64px) clamp(34px,4vw,54px); }
.phero h1{ margin-top:16px; max-width:22ch; font-size:clamp(34px,4.6vw,62px); }
.phero h1 em{ font-style:italic; color:#FFE2C7; }
.phero__sub{ margin-top:16px; max-width:52ch; color:rgba(255,255,255,.87); font-size:clamp(15.5px,1.2vw,18px); }
.phero__meta{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.metapill{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24); border-radius:100px; padding:7px 14px; font-size:13.5px; font-weight:500; }
.metapill svg{ opacity:.8; }
.phero--sm .phero__in{ padding-block:clamp(30px,3.4vw,46px); }
.phero--plain{ background:var(--sand); color:var(--ink); }
.phero--plain::after{ display:none; }
.phero--plain h1 em{ color:var(--sun); }
.phero--plain .phero__sub{ color:var(--ink-2); }
.phero--plain .crumbs{ color:var(--ink-3); }
.phero--plain .crumbs [aria-current]{ color:var(--ink); }

/* ---------- retícula contenido + columna lateral ---------- */
.layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,362px); gap:clamp(28px,3.4vw,56px); align-items:start; }
.layout--narrow{ grid-template-columns:minmax(0,1fr) minmax(0,320px); }
.sticky{ position:sticky; top:96px; }
@media (max-width:980px){ .layout{ grid-template-columns:1fr; } .sticky{ position:static; } }

/* ---------- caja de precio / reserva ---------- */
.pricebox{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow); }
.pricebox__from{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.pricebox__p{ font-family:var(--serif); font-size:38px; font-weight:600; letter-spacing:-.03em; line-height:1; margin-top:5px; }
.pricebox__p small{ font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.pricebox ul{ list-style:none; margin:18px 0 0; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:10px; }
.pricebox li{ display:flex; gap:10px; font-size:14.5px; color:var(--ink-2); }
.pricebox li svg{ flex-shrink:0; margin-top:3px; color:var(--nilo-2); }
.pricebox .btn{ width:100%; margin-top:18px; }
.pricebox__note{ margin-top:12px; font-size:12.5px; color:var(--ink-3); text-align:center; }
/* El nombre de la agencia no es un precio: la maqueta lo baja a 24px con un
   atributo style, aqui es un modificador. */
.pricebox__p--sm{ font-size:24px; }
.pricebox__p--md{ font-size:30px; }
/* La maqueta escribe width:100% y margin-top en el atributo style del boton
   dentro de un callout. Es el mismo boton en tres plantillas. */
.btn--full{ width:100%; margin-top:14px; }

/* ---------- incluye / no incluye ---------- */
.inout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,26px); }
.inout__col{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.2vw,26px); }
.inout__col--no{ background:var(--paper); }
.inout__head{ display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.inout__ico{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.inout__col--yes .inout__ico{ background:var(--nilo-soft); color:var(--nilo-2); }
.inout__col--no .inout__ico{ background:var(--sand); color:var(--ink-3); }
.inout__head h4{ margin:0; font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:-.01em; }
.inout__head span{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--ink-3); }
.inout ul{ list-style:none; margin:0; padding:0; }
.inout li{ display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:6px 13px;
  padding:15px 0; border-bottom:1px dashed var(--line); align-items:start; }
.inout li:last-child{ border-bottom:0; padding-bottom:0; }
.inout li > svg{ margin-top:3px; }
.inout__col--yes li > svg{ color:var(--nilo-2); }
.inout__col--no li > svg{ color:var(--ink-3); }
.inout li b{ font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.inout__col--no li b{ color:var(--ink-2); }
.inout li p{ grid-column:2/-1; font-size:13.5px; color:var(--ink-3); line-height:1.5; }
.inout__price{ font-family:var(--serif); font-size:14.5px; font-weight:600; color:var(--sun);
  white-space:nowrap; background:var(--sand); border-radius:100px; padding:4px 11px; }
.inout__foot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); }
@media (max-width:820px){ .inout{ grid-template-columns:1fr; } }
@media (max-width:460px){
  .inout li{ grid-template-columns:20px minmax(0,1fr); }
  .inout__price{ grid-column:2; justify-self:start; margin-top:4px; }
}

/* ---------- itinerario día a día ---------- */
.days{ border-top:1px solid var(--line); }
.days details{ border-bottom:1px solid var(--line); }
.days summary{ list-style:none; cursor:pointer; padding:20px 0; display:grid;
  grid-template-columns:64px 1fr 24px; gap:16px; align-items:center; }
.days summary::-webkit-details-marker{ display:none; }
.days .dnum{ font-family:var(--serif); font-size:15px; font-weight:600; color:var(--sun);
  letter-spacing:.04em; text-transform:uppercase; }
.days .dtitle{ font-family:var(--serif); font-size:clamp(18px,1.5vw,21px); font-weight:600; letter-spacing:-.01em; }
.days .dtitle span{ display:block; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-3); margin-top:3px; }
.days summary::after{ content:"+"; justify-self:end; color:var(--sun); font-size:21px; line-height:1; }
.days details[open] summary::after{ content:"–"; }
.days__body{ padding:0 0 24px 80px; }
.days__body p{ font-size:15.5px; color:var(--ink-2); max-width:66ch; }
.days__body img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r); margin-top:16px; }
.days__shots{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:18px; }
.shot{ position:relative; margin:0; border-radius:var(--r); overflow:hidden; }
.shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
  height: auto;
}
.shot:hover img{ transform:scale(1.06); }
.shot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:22px 11px 9px; margin:0;
  color:#fff; font-size:12px; font-weight:600; line-height:1.25;
  background:linear-gradient(0deg, rgba(12,10,8,.88) 12%, transparent 100%); }
.shot figcaption span{ display:block; font-weight:500; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:2px; }
@media (max-width:760px){
  .days__shots{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; margin-inline:-4px; padding-inline:4px; }
  .days__shots::-webkit-scrollbar{ display:none; }
  .shot{ flex:0 0 62%; scroll-snap-align:start; }
}

.days__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.dtag{ background:var(--sand); border-radius:100px; padding:6px 12px; font-size:12.5px; font-weight:500; color:var(--ink-2); }
@media (max-width:640px){
  .days summary{ grid-template-columns:1fr 24px; }
  .days .dnum{ grid-column:1/-1; }
  .days__body{ padding-left:0; }
}

/* ---------- filtros de listado ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-block:18px;
  border-block:1px solid var(--line); }
.filters .chip{ min-height:40px; font-size:14px; }
.filters select{ min-height:40px; padding:0 12px; border-radius:100px; border:1.5px solid var(--line);
  background:#fff; font-family:var(--sans); font-size:14px; color:var(--ink-2); }
.filters__count{ margin-left:auto; font-size:14px; color:var(--ink-3); }
@media (max-width:760px){ .filters__count{ margin-left:0; width:100%; } }

/* ---------- listado en fila (alternativa a la tarjeta 4/5) ---------- */
.rows{ display:grid; gap:20px; }
.row{ display:grid; grid-template-columns:322px minmax(0,1fr) 214px; gap:24px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden;
  text-decoration:none; transition:box-shadow .25s, transform .25s, border-color .25s; }
.row:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent; }
.row__media{ position:relative; }
.row__media img{ width:100%; height:100%; min-height:210px; object-fit:cover; }
.row__media .pill{ position:absolute; top:12px; left:12px; }
.row__b{ padding:22px 0; }
.row__b h3{ margin:8px 0 10px; }
.row__b > p{ font-size:14.5px; color:var(--ink-2); max-width:52ch; }
.row__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.row__side{ border-left:1px solid var(--line); padding:22px; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; gap:4px; background:var(--paper); }
.row__side .from{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.row__side .p{ font-family:var(--serif); font-size:30px; font-weight:600; letter-spacing:-.03em; }
.row__side .per{ font-size:12.5px; color:var(--ink-3); }
.row__side .go{ margin-top:12px; font-size:14px; font-weight:600; color:var(--sun); }
@media (max-width:980px){
  .row{ grid-template-columns:250px minmax(0,1fr); }
  .row__side{ grid-column:1/-1; border-left:0; border-top:1px solid var(--line);
    flex-direction:row; align-items:center; justify-content:space-between; }
}
@media (max-width:640px){ .row{ grid-template-columns:1fr; } .row__b{ padding:0 20px; } }

/* ---------- paginación ---------- */
.pager{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:44px; }
.pager a,.pager span{ min-width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r);
  border:1.5px solid var(--line); text-decoration:none; font-weight:600; font-size:14.5px; color:var(--ink-2); }
.pager a:hover{ border-color:var(--sun); color:var(--sun); }
.pager [aria-current]{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ---------- texto largo (artículos y páginas estáticas) ---------- */
.prose{ max-width:80ch; }
.prose > * + *{ margin-top:20px; }
.prose h2{ font-size:clamp(25px,2.4vw,34px); margin-top:44px; }
.prose h3{ font-size:clamp(19px,1.6vw,23px); margin-top:32px; }
.prose p{ font-size:17px; color:var(--ink-2); line-height:1.68; }
.prose strong{ color:var(--ink); }
.prose a{ color:var(--sun); text-decoration:underline; text-underline-offset:3px; }
.prose ul,.prose ol{ padding-left:22px; display:grid; gap:9px; }
.prose li{ font-size:17px; color:var(--ink-2); line-height:1.6; }
/* height:auto releases the width and height attributes WordPress prints on
   every image it renders. Without it a full-width image keeps its stored pixel
   height and comes out stretched. */
.prose img{ width:100%; height:auto; border-radius:var(--r-lg); }
.prose figure{ margin:0; }
.prose figcaption{ margin-top:9px; font-size:13px; color:var(--ink-3); }
.prose blockquote{ margin:0; padding:4px 0 4px 22px; border-left:3px solid var(--sun);
  font-family:var(--serif); font-size:21px; font-weight:500; font-style:italic; color:var(--ink); }
.prose hr{ border:0; height:1px; background:var(--line); margin-block:36px; }

/* tabla */
.table{ width:100%; border-collapse:collapse; font-size:15px; }
.table th,.table td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); }
.table th{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.table tr:hover td{ background:var(--paper); }
.table td b{ font-weight:600; }

/* Tables inside article bodies come from the editor with no class of their own,
   so they get the same treatment by tag. The first row is the header whether it
   sits in a thead or not — imported markup does both. */
.prose table{ width:100%; border-collapse:collapse; font-size:15px; margin-top:24px;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.prose table th,
.prose table td{ text-align:left; padding:13px 15px; border-bottom:1px solid var(--line);
  vertical-align:top; min-width:0; }
.prose table thead th{ background:var(--sand); font-family:var(--sans);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; border-bottom:1px solid var(--line); }
.prose table tbody th{ font-weight:600; color:var(--ink); font-size:15px;
  letter-spacing:normal; text-transform:none; }
.prose table tbody tr:last-child th,
.prose table tbody tr:last-child td{ border-bottom:0; }
.prose table tbody tr:nth-child(2n) td,
.prose table tbody tr:nth-child(2n) th{ background:rgba(241,234,223,.42); }
.prose table tbody tr:hover td,
.prose table tbody tr:hover th{ background:var(--sand); }
.prose table p{ margin:0; }
.prose table img{ border-radius:var(--r); }

/* A wide table scrolls inside its own box; the page never does. */
.prose .tablewrap{ overflow-x:auto; margin-top:24px; }
.prose .tablewrap table{ margin-top:0; }

/* aviso / dato destacado */
.callout{ background:var(--sand); border-radius:var(--r-lg); padding:22px 24px; }
.callout--nilo{ background:var(--nilo); color:#DCE9E5; }
.callout--nilo b,.callout--nilo h4{ color:#fff; }
.callout h4{ margin:0 0 8px; font-family:var(--serif); font-size:19px; font-weight:600; }
.callout p{ font-size:15px; color:var(--ink-2); }
.callout--nilo p{ color:#B7CEC7; }

/* índice del artículo */
.toc{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; }
.toc h4{ margin:0 0 12px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:9px; counter-reset:t; }
.toc li{ counter-increment:t; }
.toc a{ text-decoration:none; font-size:14.5px; color:var(--ink-2); display:flex; gap:10px; }
.toc a::before{ content:counter(t,decimal-leading-zero); font-family:var(--serif); color:var(--sun); font-size:13px; }
.toc a:hover{ color:var(--sun); }

/* The section the reader is in. Set by vpe.js as it scrolls. */
.toc a.is-active{ color:var(--sun); font-weight:600; }
.toc a.is-active::before{ color:var(--sun); font-weight:600; }
.toc li:has(> a.is-active){ position:relative; }
.toc li:has(> a.is-active)::before{ content:""; position:absolute; left:-22px; top:2px; bottom:2px;
  width:2px; background:var(--sun); border-radius:2px; }

/* The header is sticky, so an anchor jump has to stop clear of it or the
   heading lands underneath. 74px of header plus a little breathing room. */
.prose h2, .prose h3{ scroll-margin-top:104px; }

/* autor */
/* `author` and `post` are also class names WordPress generates — on the body of
   an author archive, and on every post_class() wrapper. Restricting these two
   components to elements that are neither keeps their descendant rules from
   restyling the entire page. */
.author:not(body):not(article){ display:flex; gap:16px; align-items:center; background:var(--sand); border-radius:var(--r-lg); padding:20px 22px; }
.author:not(body):not(article) img{ width:60px; height:60px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author:not(body):not(article) b{ display:block; font-family:var(--serif); font-size:18px; font-weight:600; }
.author:not(body):not(article) span{ font-size:13.5px; color:var(--ink-3); }
.author:not(body):not(article) p{ margin-top:7px; font-size:14.5px; color:var(--ink-2); }

/* galería */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gallery img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); }
.gallery img:first-child{ grid-column:span 2; grid-row:span 2; height:auto; aspect-ratio:1/1; }
@media (max-width:700px){ .gallery{ grid-template-columns:repeat(2,1fr); } }

/* mapa de silo / enlaces relacionados */
.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rel{ display:block; text-decoration:none; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; background:#fff; transition:border-color .2s, transform .2s; }
.rel:hover{ border-color:var(--sun); transform:translateY(-3px); }
.rel span{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.rel b{ display:block; margin-top:8px; font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.2; }
/* Apilados en una columna, como en la barra lateral de contacto. */
.related--one{ grid-template-columns:minmax(0,1fr); }
/* La maqueta lo lleva en un atributo style. */
.contacto__h{ margin-top:14px; max-width:20ch; }
@media (max-width:820px){ .related{ grid-template-columns:1fr; } }

/* formulario de contacto */
.form{ display:grid; gap:16px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form label{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.form input,.form select,.form textarea{ width:100%; min-height:50px; padding:13px 14px; border-radius:var(--r);
  border:1.5px solid var(--line); background:#fff; font-family:var(--sans); font-size:15.5px; color:var(--ink); }
.form textarea{ min-height:130px; resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--sun); outline:none; }
.form__hint{ font-size:12.5px; color:var(--ink-3); }
/* El resultado del ultimo envio, cuando el visitante vuelve de uno. */
.form__aviso{ padding:13px 15px; border-radius:var(--r); background:var(--sand); font-size:14px; color:var(--ink-2); }
/* Una fila con una sola celda: la maqueta deja la segunda vacia. */
.form__row > div:empty{ display:none; }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }

/* utilidades */
.u-center{ text-align:center; }
.u-narrow{ max-width:760px; margin-inline:auto; }
.u-mt-s{ margin-top:18px; } .u-mt-m{ margin-top:34px; } .u-mt-l{ margin-top:54px; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ============================================================
   CAPA 3 — PRECIOS Y HOTELES POR CATEGORÍA
   ============================================================ */
.rates{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.rates__tabs{ display:flex; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.rates__tabs::-webkit-scrollbar{ display:none; }
.rates__tab{ flex:1 0 auto; min-width:172px; padding:16px 20px; background:none; border:0;
  border-bottom:3px solid transparent; text-align:left; color:var(--ink-3); transition:background-color .2s,color .2s; }
.rates__tab b{ display:block; font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:-.01em; color:inherit; }
.rates__tab span{ display:block; font-size:12px; margin-top:3px; letter-spacing:.04em; }
.rates__tab:hover{ background:var(--paper); color:var(--ink-2); }
.rates__tab[aria-selected="true"]{ color:var(--ink); background:var(--paper); border-bottom-color:var(--sun); }
.rates__tab[aria-selected="true"] b{ color:var(--ink); }
.rates__panel{ padding:clamp(20px,2.6vw,30px); }
.rates__panel[hidden]{ display:none; }
.rates__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(22px,3vw,44px); align-items:start; }
@media (max-width:900px){ .rates__grid{ grid-template-columns:1fr; } }

.hotels{ display:grid; gap:0; margin-top:14px; }
.hotel{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:16px; padding:13px 0; border-bottom:1px dashed var(--line); }
.hotel:last-child{ border-bottom:0; }
.hotel dt{ font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding-top:3px; }
.hotel dd{ margin:0; font-size:15px; color:var(--ink); }
.hotel dd span{ display:block; font-size:13px; color:var(--ink-3); margin-top:2px; }
.hotel dd em{ font-style:normal; color:var(--ink-3); }
@media (max-width:560px){ .hotel{ grid-template-columns:1fr; gap:4px; } }

.seasons{ width:100%; border-collapse:collapse; font-size:15px; margin-top:14px; }
.seasons th,.seasons td{ text-align:left; padding:13px 12px; border-bottom:1px solid var(--line); }
.seasons thead th{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.seasons thead th span{ display:block; font-size:11px; letter-spacing:0; text-transform:none; color:var(--ink-3); font-weight:400; margin-top:3px; }
.seasons tbody th{ font-weight:500; color:var(--ink-2); font-size:14.5px; }
.seasons td{ font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; }
.seasons td small{ font-family:var(--sans); font-size:12px; font-weight:400; color:var(--ink-3); display:block; letter-spacing:0; }
.seasons .best{ color:var(--sun); }
.seasons tr:last-child th,.seasons tr:last-child td{ border-bottom:0; }
.rates__legend{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-size:13px; color:var(--ink-3); }
.rates__legend b{ color:var(--ink-2); font-weight:600; }
.rates__foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between; }
.rates__foot p{ font-size:13.5px; color:var(--ink-3); max-width:56ch; }

/* ============================================================
   CAPA 4 — GALERÍA EN CABECERA + LIGHTBOX + FORMULARIO LATERAL
   ============================================================ */

/* botón de galería dentro de .phero */
.phero__gal{ display:inline-flex; align-items:center; gap:14px; margin-top:24px; cursor:pointer;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32); border-radius:100px;
  padding:7px 20px 7px 7px; color:#fff; font-family:var(--sans); font-weight:600; font-size:14.5px;
  transition:background-color .2s, border-color .2s; }
.phero__gal:hover{ background:rgba(255,255,255,.2); border-color:#fff; }
.phero__gal .stack{ display:flex; flex-shrink:0; }
.phero__gal .stack img{ width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.7); margin-left:-14px; }
.phero__gal .stack img:first-child{ margin-left:0; }
.phero__gal svg{ opacity:.85; }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:100; background:rgba(9,8,6,.97); display:none; }
.lb.open{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.lb__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(16px,3vw,28px); color:#fff; }
.lb__title{ font-family:var(--serif); font-size:18px; font-weight:600; }
.lb__title span{ display:block; font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:2px; }
.lb__close{ width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  background:none; color:#fff; display:grid; place-items:center; }
.lb__close:hover{ background:#fff; color:var(--ink); }
.lb__stage{ position:relative; display:grid; place-items:center; padding:0 clamp(16px,3vw,28px); min-height:0; }
.lb__stage img{ max-width:min(1180px,92vw); max-height:100%; object-fit:contain; border-radius:8px; }
.lb__cap{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  background:rgba(9,8,6,.72); border:1px solid rgba(255,255,255,.16); border-radius:100px;
  padding:8px 18px; color:#fff; font-size:13.5px; font-weight:500; white-space:nowrap;
  max-width:88vw; overflow:hidden; text-overflow:ellipsis; }
.lb__cap b{ color:var(--sun-2); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:11px; margin-right:8px; }
.lb__arrow{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.35); background:rgba(9,8,6,.5); color:#fff;
  display:grid; place-items:center; }
.lb__arrow:hover{ background:#fff; color:var(--ink); }
.lb__arrow--prev{ left:clamp(6px,1.6vw,20px); }
.lb__arrow--next{ right:clamp(6px,1.6vw,20px); }
.lb__thumbs{ display:flex; gap:9px; overflow-x:auto; padding:16px clamp(16px,3vw,28px);
  scrollbar-width:none; }
.lb__thumbs::-webkit-scrollbar{ display:none; }
.lb__thumbs button{ flex:0 0 auto; padding:0; border:0; background:none; border-radius:5px; overflow:hidden;
  opacity:.45; transition:opacity .2s, box-shadow .2s; }
.lb__thumbs img{ width:92px; height:64px; object-fit:cover; display:block; }
.lb__thumbs button:hover{ opacity:.8; }
.lb__thumbs button[aria-current="true"]{ opacity:1; box-shadow:0 0 0 2px var(--sun-2); }
body.lb-open{ overflow:hidden; }
@media (max-width:640px){ .lb__thumbs img{ width:70px; height:50px; } .lb__arrow{ width:42px; height:42px; } }

/* formulario lateral de solicitud */
.askbox{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.askbox__head{ background:var(--sand); padding:20px 22px; border-bottom:1px solid var(--line); }
.askbox__head span{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.askbox__head b{ display:block; font-family:var(--serif); font-size:34px; font-weight:600; letter-spacing:-.03em; line-height:1.05; margin-top:5px; }
.askbox__head b small{ font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.askbox__head p{ margin-top:10px; font-size:13.5px; color:var(--ink-2); }
.askbox__body{ padding:22px; display:grid; gap:14px; }
.askbox label{ display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.askbox input,.askbox select,.askbox textarea{ width:100%; min-height:46px; padding:11px 13px;
  border-radius:var(--r); border:1.5px solid var(--line); background:#fff;
  font-family:var(--sans); font-size:15px; color:var(--ink); }
.askbox textarea{ min-height:88px; resize:vertical; }
.askbox input:focus,.askbox select:focus,.askbox textarea:focus{ border-color:var(--sun); outline:none; }
.askbox__two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.askbox__phone{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:8px; }
.askbox__phone select{ padding-inline:9px; font-size:14px; }
.askbox .btn{ width:100%; }
.askbox__legal{ font-size:12px; color:var(--ink-3); line-height:1.5; }
.askbox__legal a{ color:var(--sun); }
.askbox__or{ display:flex; align-items:center; gap:12px; font-size:12px; color:var(--ink-3); }
.askbox__or::before,.askbox__or::after{ content:""; height:1px; background:var(--line); flex:1; }

/* ---------- cargar más (sustituye a la paginación) ---------- */
.loadmore{ display:grid; justify-items:center; gap:14px; margin-top:44px; }
.loadmore__count{ font-size:13.5px; color:var(--ink-3); }
.loadmore__count b{ color:var(--ink); font-weight:600; }
.loadmore__bar{ width:min(260px,70vw); height:4px; background:var(--line); border-radius:100px; overflow:hidden; }
.loadmore__bar i{ display:block; height:100%; width:0; background:var(--sun); border-radius:100px; transition:width .45s cubic-bezier(.2,.7,.3,1); }
.loadmore .btn{ min-width:250px; }
.loadmore .btn[data-loading="true"]{ pointer-events:none; }
.loadmore .btn[data-loading="true"] .lm-txt{ opacity:.7; }
.spin{ display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.btn[data-loading="true"] .spin{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loadmore__done{ font-size:14px; color:var(--ink-3); }
@media (prefers-reduced-motion:reduce){ .spin{ animation:none; } }

/* ---------- la línea del Nilo como enlace (páginas de destino) ---------- */
a.stop{ text-decoration:none; display:block; }
a.stop[aria-selected="true"]{ color:#fff; }
a.stop[aria-selected="true"]::before{ background:var(--sun-2); border-color:var(--sun-2); width:15px; height:15px; top:-16px; }

/* ---------- selector de programa (ficha de barco) ---------- */
.progs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
.prog{ text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:20px 22px; transition:border-color .2s, box-shadow .2s, background-color .2s; }
.prog:hover{ border-color:var(--sun); }
.prog[aria-selected="true"]{ border-color:var(--sun); box-shadow:0 0 0 3px rgba(216,55,28,.12); }
.prog span{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.prog b{ display:block; font-family:var(--serif); font-size:21px; font-weight:600; letter-spacing:-.02em; margin:7px 0 8px; }
.prog p{ font-size:13.5px; color:var(--ink-2); }
.prog em{ display:block; font-style:normal; margin-top:12px; padding-top:11px; border-top:1px dashed var(--line);
  font-family:var(--serif); font-size:17px; font-weight:600; color:var(--sun); }
.prog[aria-selected="true"] span{ color:var(--sun); }
@media (max-width:700px){ .progs{ grid-template-columns:1fr; } }
.progpanel[hidden]{ display:none; }

/* ---------- cabecera de artículo ---------- */
.ahead{ background:var(--sand); padding-block:clamp(30px,3.4vw,48px) clamp(26px,3vw,40px); border-bottom:1px solid var(--line); }
.ahead h1{ margin-top:16px; max-width:24ch; font-size:clamp(32px,4.2vw,54px); }
.ahead h1 em{ font-style:italic; color:var(--sun); }
/* Three lines and no more: the byline and the hero have to stay above the fold,
   and an imported meta description can run to a dozen lines. */
.ahead__sub{ margin-top:16px; max-width:62ch; font-size:clamp(16px,1.3vw,19px); color:var(--ink-2);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
.ahead__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:22px; font-size:13.5px; color:var(--ink-3); }
.ahead__meta .avatar{ width:34px; height:34px; font-size:12px; }
.ahead__meta b{ color:var(--ink); }
/* La firma lleva a la página del autor. Subrayado fino y no el rojo de .prose a:
   está dentro de una línea de metadatos gris, y un enlace a todo color ahí
   compite con el titular que tiene justo encima. */
.ahead__by{ text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; transition:border-color .18s; }
.ahead__by:hover{ border-bottom-color:var(--sun); }
.ahead__by:hover b{ color:var(--sun); }
.ahead__meta span{ display:inline-flex; align-items:center; gap:8px; }
.afig{ margin:0; }
.afig img{ width:100%; height:auto; aspect-ratio:32/8; object-fit:cover; }
.afig figcaption{ font-size:12.5px; color:var(--ink-3); padding-top:9px; }
@media (max-width:700px){ .afig img{ aspect-ratio:16/10; } }

/* autor con iniciales */
.author:not(body):not(article) .avatar{ width:56px; height:56px; font-size:17px; }

/* compartir */
.share{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:32px; padding-top:22px; border-top:1px solid var(--line); }
.share span{ font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-right:4px; }
.share a{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:var(--ink-2); text-decoration:none; }
.share a:hover{ border-color:var(--sun); color:var(--sun); }

/* ---------- tramos por país en itinerarios combinados ---------- */
.legbar{ display:flex; align-items:center; gap:14px; margin:26px 0 6px; }
.legbar:first-child{ margin-top:0; }
.legbar__tag{ display:inline-flex; align-items:center; gap:9px; background:var(--nilo); color:#fff;
  border-radius:100px; padding:8px 16px; font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.legbar__tag--b{ background:var(--sun); }
.legbar__line{ flex:1; height:1px; background:var(--line); }
.legbar__days{ font-size:13px; color:var(--ink-3); white-space:nowrap; }
.legbar + .days{ border-top:1px solid var(--line); }

/* dos banderas de país en la cabecera */
.duo{ display:flex; align-items:center; gap:12px; margin-top:20px; font-family:var(--sans); font-size:14px; }
.duo b{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28); border-radius:100px; padding:7px 15px; font-weight:600; }
.duo span{ opacity:.7; }

/* ==========================================================================
   GUIA DE VIAJE — vídeo a ancho de columna, temas y credenciales
   ========================================================================== */

/* ---------- vídeo incrustado ----------
   Caja de proporción en lugar de las medidas que trae el iframe. El HTML
   guardado por el editor antiguo llega con width y height fijos, distintos en
   cada artículo, y ninguna hoja de estilo puede ganarle a un atributo width en
   un elemento cuyo ancho es auto: por eso inc/articles.php se los quita antes
   de imprimir y aquí solo queda decidir la forma.

   16:9 fijo, que es lo que reproduce un player de YouTube diga lo que diga el
   atributo que quedó cacheado. Se usa relleno y no una propiedad de
   proporción, que esta hoja reserva para casos donde no hay tokens de alto. */
.vpe-embed{ display:block; position:relative; width:100%; padding-bottom:56.25%; margin-top:26px;
  border-radius:var(--r-lg); overflow:hidden; background:var(--night); }
.vpe-embed > iframe,
.vpe-embed > video,
.vpe-embed > object,
.vpe-embed > embed{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.prose .vpe-embed + *{ margin-top:26px; }

/* El bloque de incrustar del editor: que no estreche lo que lleva dentro. */
.prose .wp-block-embed{ margin:26px 0 0; width:100%; }
.prose .wp-block-embed__wrapper{ width:100%; }
.prose .wp-block-embed figcaption{ margin-top:9px; font-size:13px; color:var(--ink-3); }

/* ---------- fila de temas ---------- */
.temas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding-bottom:26px; border-bottom:1px solid var(--line); }
.temas__k{ font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); }

/* Las fichas ya existían como botones del asistente; aquí son enlaces y
   elementos de lista, así que se les quita la viñeta y se les da la caja. */
.chips{ list-style:none; margin:0; padding:0; }
a.chip,
li.chip{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
a.chip[aria-current="page"]{ background:var(--sun); border-color:var(--sun); color:#fff; }
a.chip[aria-current="page"] .chip__n{ background:rgba(255,255,255,.24); color:#fff; }
.chip__n{ display:inline-block; min-width:22px; padding:1px 6px; border-radius:100px;
  background:var(--sand); color:var(--ink-3); font-size:12px; font-weight:600; text-align:center; }
a.chip:hover .chip__n{ background:var(--sun); color:#fff; }

/* ---------- credenciales del equipo ----------
   Rejilla de dos cajas con icono redondo, la misma forma que .inout en las
   páginas de viaje: caja blanca, filete de 1px y disco de color suave.

   Antes eran fichas en fila. Seis frases de largo desigual dejaban un bloque
   irregular difícil de recorrer, y en el móvil las largas partían en dos
   líneas dentro de una píldora de radio 100px, que se deforma. */
.creds__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
  list-style:none; margin:0; padding:0; }
.cred{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center;
  min-width:0; padding:16px 18px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); }
.cred__ico{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--nilo-soft); color:var(--nilo-2); }
.cred__ico svg{ width:18px; height:18px; }
/* Mismo peso que las líneas afirmativas de .inout: son afirmaciones, no notas. */
.cred__t{ min-width:0; font-size:15px; font-weight:500; line-height:1.38; color:var(--ink); }
/* Un número impar de credenciales dejaría un hueco: la última ocupa la fila. */
.cred:last-child:nth-child(odd){ grid-column:1 / -1; }

/* ---------- bloque de credenciales del equipo ---------- */
.creds__h{ font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0; }
.creds__h--lg{ font-family:var(--serif); font-size:clamp(24px,2.3vw,32px); font-weight:600;
  letter-spacing:-.018em; text-transform:none; color:var(--ink); }

/* ---------- variantes de rejillas y etiquetas que ya existían ---------- */
.posts--two{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:22px; }
.sh--tight{ margin-bottom:0; align-items:center; }
.tag--top{ display:block; margin-top:18px; text-decoration:none; }
a.tag--top:hover{ color:var(--ink); }

@media (max-width:700px){
  .creds__grid{ grid-template-columns:1fr; }
  .posts--two{ grid-template-columns:1fr; }
  .temas{ gap:10px; }
  .sh--tight{ align-items:flex-start; }
}