/* =========================================================
   Inka Rainbow · componentes del sitio
   Copia literal de demo/portada.css (propuesta aprobada,
   4-sep-2026) más los componentes que la demo no cubría.
   Los tokens y el reset viven en base.css.
   ========================================================= */

/* ---------- tipografía compartida ---------- */
.eyebrow{
  font-size:var(--t-12); font-weight:var(--peso-medio); letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-tenue); margin:0 0 24px;
}
.seccion-cab{max-width:680px; margin:0 0 64px}
.seccion-cab h2, .tesis h2, .casa h2, .hablemos h2, .dias h2{
  font-size:clamp(30px,4.2vw,52px); line-height:1.1; letter-spacing:-.025em; font-weight:var(--peso-normal);
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-size:var(--t-15); font-weight:var(--peso-medio);
  text-decoration:none; padding:14px 26px; border-radius:2px; border:1px solid transparent;
  transition:background var(--dur-media) var(--e), border-color var(--dur-media) var(--e), transform .3s var(--e), color var(--dur-media) var(--e);
}
.btn-primario{background:var(--accion); color:#fff}
.btn-primario:hover{background:var(--accion-viva)}
.btn-primario:active{transform:translateY(1px)}
.btn-texto{color:var(--texto); border-color:var(--linea); background:transparent}
.btn-texto:hover{border-color:var(--texto)}
.btn-texto:active{transform:translateY(1px)}

/* ---------- navegación: barra desenfocada sobre la foto ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:var(--capa-menu)}
.nav-barra{
  display:flex; align-items:center; gap:32px;
  padding:16px 32px;
  background:var(--velo-barra);
  backdrop-filter:blur(22px) saturate(1.25); -webkit-backdrop-filter:blur(22px) saturate(1.25);
  border-bottom:1px solid var(--linea-tenue);
  transition:background var(--dur-larga) var(--e), padding var(--dur-larga) var(--e), border-color var(--dur-larga) var(--e);
}
.nav-compacta .nav-barra{background:var(--velo-barra-fija); padding:11px 32px; border-bottom-color:rgba(237,230,221,.16)}
.nav-marca{display:flex; align-items:center; text-decoration:none; color:var(--texto)}
/* el SVG va en linea: fill:currentColor hereda el color del enlace */
.logo-svg{height:34px; width:auto; display:block; transition:opacity var(--dur-media) var(--e)}
.nav-marca:hover .logo-svg{opacity:.82}
.pie-marca{color:var(--texto-tenue)}
.logo-pie{height:38px}
.nav-enlaces{display:flex; gap:30px; margin-left:auto; list-style:none; padding:0; margin-top:0; margin-bottom:0}
.nav-enlaces > li{position:relative}
.nav-enlaces a,.nav-enlaces button{
  text-decoration:none; font-size:var(--t-nav); color:var(--c-caliza-400); transition:color var(--dur-media) var(--e);
  background:none; border:0; padding:0; font:inherit; font-size:var(--t-nav); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px}
.nav-enlaces a:hover,.nav-enlaces button:hover,.nav-enlaces [aria-expanded="true"]{color:var(--texto)}
/* El estado activo no depende solo del color: lleva una línea bajo el rótulo. */
.nav-enlaces [aria-current="page"]{color:var(--texto); box-shadow:0 6px 0 -5px var(--accion-viva)}
.nav-enlaces button::after{content:""; width:5px; height:5px; border-right:1px solid currentColor;
  border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-media) var(--e); opacity:.6}
.nav-enlaces [aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)}

/* La barra sigue siendo la acción secundaria: el botón de la nav no compite
   con el del hero. Perfilado, no relleno. */
.nav-cta{padding:10px 18px; font-size:var(--t-14); border-radius:2px;
  background:transparent; color:var(--texto); border:1px solid var(--linea-fuerte)}
.nav-cta:hover{background:var(--accion); border-color:var(--accion); color:#fff}

/* ---------- mega menú ----------
   Siete itinerarios y cuatro destinos: los dos conjuntos completos.
   Nada más entra aquí. Por encima de esa cifra el menú deja de ser una
   ayuda y pasa a ser una decisión que el visitante tiene que tomar. */
.mega{position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  padding-top:16px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-media) var(--e), transform var(--dur-media) var(--e), visibility .4s}
.abierto > .mega{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.mega-inner{background:var(--velo); backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px); border:1px solid var(--linea); border-radius:2px;
  padding:10px; width:min(560px,calc(100vw - 40px)); box-shadow:var(--sombra-menu)}
.mega-lista{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linea)}
.mega-lista-4{grid-template-columns:1fr 1fr}
/* Siete en rejilla de dos deja una celda vacía: el último ocupa la fila. */
.mega-lista > a:last-child:nth-child(odd){grid-column:1/-1}
.mega-lista a{display:block; padding:13px 16px; background:var(--velo);
  text-decoration:none; transition:background var(--dur-corta) var(--e)}
.mega-lista a:hover{background:rgba(117,47,22,.20)}
.mega-lista b{display:block; font-size:var(--t-nav); font-weight:var(--peso-medio); color:var(--texto); margin-bottom:3px}
.mega-lista span{display:block; font-size:var(--t-12); color:var(--texto-tenue); line-height:1.4}
.mega-pie{display:block; padding:14px 16px 10px; font-size:var(--t-13); color:var(--texto-tenue);
  text-decoration:none; transition:color var(--dur-media) var(--e)}
.mega-pie:hover{color:var(--texto)}

/* ---------- hamburguesa y panel móvil ---------- */
.nav-hamburguesa{display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto}
.nav-hamburguesa span{display:block; width:22px; height:1px; background:var(--texto);
  transition:transform var(--dur-media) var(--e), opacity .3s var(--e)}
.nav-hamburguesa span + span{margin-top:6px}
.nav-hamburguesa[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-hamburguesa[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.nav-panel{position:fixed; inset:0; background:var(--velo-panel);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  opacity:0; visibility:hidden; transition:opacity var(--dur-media) var(--e), visibility .5s;
  overflow-y:auto; padding:84px 24px 40px}
.nav-panel.abierto{opacity:1; visibility:visible}
.nav-panel-inner{max-width:420px; margin:0 auto; display:flex; flex-direction:column}
.nav-panel-tit{font-size:var(--t-11); letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-tenue); margin:28px 0 10px}
.nav-panel-tit:first-child{margin-top:0}
.nav-panel a{padding:12px 0; text-decoration:none; color:var(--texto-suave); font-size:var(--t-17);
  border-bottom:1px solid var(--linea)}
.nav-panel a:hover{color:var(--texto)}
.nav-panel .btn{margin-top:26px; border-bottom:0; text-align:center}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100dvh; display:flex; align-items:flex-end; overflow:hidden}
.hero-foto{position:absolute; inset:0}
.hero-foto img{width:100%; height:100%; object-fit:cover; animation:respira 26s var(--e) forwards}
@keyframes respira{from{transform:scale(1.07)} to{transform:scale(1)}}
/* velo vertical anclado al texto: opacidad garantizada donde se lee */
.hero-velo{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,10,8,.95) 0%, rgba(14,10,8,.88) 40%, rgba(14,10,8,.55) 70%, rgba(14,10,8,.45) 100%);
}
.hero-cuerpo{position:relative; max-width:var(--ancho); margin:0 auto; padding:0 32px 92px; width:100%}
.hero h1{font-size:var(--t-d1); line-height:1.0; letter-spacing:-.035em; font-weight:var(--peso-normal);
  margin:0 0 26px; max-width:15ch; text-wrap:balance}
/* La negrita dentro de un titular: sube un peso, no cambia de color.
   Es la única marca de jerarquía dentro de la propia frase. */
.hero h1 b,.tesis h2 b,.viaje-info h3 b{font-weight:var(--peso-fuerte)}
.hero-texto{max-width:52ch; color:var(--sobre-foto); font-size:var(--t-18); margin-bottom:36px; text-wrap:pretty}
/* En cuerpo sobre foto, la negrita aclara al blanco del texto principal:
   el peso solo no se lee bajo el velo. */
.hero-texto b,.tesis-texto b{color:var(--texto); font-weight:var(--peso-medio)}
.hero-acciones{display:flex; gap:14px; flex-wrap:wrap}
.hero-pie{
  position:absolute; bottom:0; left:0; right:0; z-index:var(--capa-velo);
  display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap;
  padding:16px 24px; font-size:var(--t-12); letter-spacing:.13em; text-transform:uppercase; color:var(--texto-tenue);
  border-top:1px solid var(--linea); background:rgba(14,10,8,.5); backdrop-filter:blur(10px);
}
.hero-pie i{width:3px; height:3px; background:var(--accion); border-radius:50%; display:block}

/* ---------- tesis ---------- */
.tesis{max-width:900px; margin:0 auto; padding:140px 24px 120px; text-align:center}
.tesis h2{margin-bottom:28px}
.tesis-texto{max-width:600px; margin:0 auto; color:var(--texto-tenue); font-size:var(--t-18)}

/* ---------- los siete viajes: lista editorial alterna ---------- */
.viajes{max-width:var(--ancho); margin:0 auto; padding:40px 24px 120px}
.viajes-lista{display:flex; flex-direction:column; gap:16px}
.viaje{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:56px; align-items:center;
  padding:28px 0; border-top:1px solid var(--linea);
}
.viaje:nth-child(even){direction:rtl}
.viaje:nth-child(even) > *{direction:ltr}
.viaje-foto{
  display:block; overflow:hidden; aspect-ratio:16/10; border-radius:2px; background:var(--fondo-hondo);
}
.viaje-foto img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e), filter 1.1s var(--e); filter:saturate(.86) brightness(.94)}
.viaje:hover .viaje-foto img{transform:scale(1.045); filter:saturate(1) brightness(1)}
/* ficha de la experiencia: lugar · fechas · viajeros · aval */
.ficha{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:9px}
.ficha li{display:flex; align-items:flex-start; gap:11px; font-size:var(--t-14); color:var(--texto-suave); line-height:1.45}
.ficha svg{width:16px; height:16px; flex:none; margin-top:2px; fill:none; stroke:var(--accion-viva); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
.ficha-aval{color:var(--texto-tenue)}
.ficha-aval svg{fill:var(--accion-viva); stroke:none}
.viaje h3{font-size:clamp(26px,3vw,38px); letter-spacing:-.02em; font-weight:var(--peso-normal); margin-bottom:14px}
.viaje h3 a{text-decoration:none; transition:color var(--dur-media) var(--e)}
.viaje:hover h3 a{color:var(--accion-viva)}
.viaje-texto{color:var(--texto-tenue); max-width:46ch; margin-bottom:22px}
.viaje-precio{font-size:var(--t-14); color:var(--texto-tenue)}
.viaje-precio b{font-weight:var(--peso-fuerte); color:var(--texto)}
.pendiente{
  font-size:var(--t-11); letter-spacing:.1em; text-transform:uppercase; color:var(--accion-viva);
  border:1px solid rgba(143,61,30,.45); padding:3px 8px; border-radius:2px; margin-left:6px; white-space:nowrap;
}

/* ---------- países: rejilla asimétrica ---------- */
.paises{max-width:var(--ancho); margin:0 auto; padding:80px 24px 120px}
.paises-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.pais{position:relative; grid-column:span 3; aspect-ratio:4/3; overflow:hidden; border-radius:2px; text-decoration:none; display:block; background:var(--fondo-hondo)}
.pais-ancho{grid-column:span 6; aspect-ratio:21/9}
.pais img{width:100%; height:100%; object-fit:cover; filter:saturate(.8) brightness(.68); transition:transform 1.1s var(--e), filter 1.1s var(--e)}
.pais:hover img{transform:scale(1.04); filter:saturate(.95) brightness(.8)}
.pais-txt{position:absolute; left:0; right:0; bottom:0; padding:28px 28px 26px;
  background:linear-gradient(to top, rgba(14,10,8,.92) 0%, rgba(14,10,8,.72) 55%, rgba(14,10,8,0) 100%);}
.pais-txt h2,.pais-txt h3{font-size:var(--t-26); font-weight:var(--peso-medio); letter-spacing:-.01em; margin-bottom:4px}
.pais-txt p{font-size:var(--t-13); color:var(--texto-suave)}

/* ---------- un día ---------- */
.dias{max-width:var(--ancho); margin:0 auto; padding:0 24px 120px}
.dias-cab{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:end; margin-bottom:48px}
.dias-texto{color:var(--texto-tenue); max-width:44ch}
.dias-lista{list-style:none; margin:0; padding:0; columns:2; column-gap:56px}
.dias-lista li{
  display:flex; align-items:baseline; gap:14px; justify-content:space-between;
  padding:15px 0; border-bottom:1px solid var(--linea); break-inside:avoid;
}
.dias-lista span{color:var(--texto-suave)}
.dias-lista b{font-weight:var(--peso-medio); font-size:var(--t-14); color:var(--texto-tenue); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- casa ---------- */
.casa{max-width:var(--ancho); margin:0 auto; padding:0 24px 130px; display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
.casa-foto{overflow:hidden; border-radius:2px; aspect-ratio:4/5}
.casa-foto img{width:100%; height:100%; object-fit:cover; filter:saturate(.85)}
.casa-txt h2{margin-bottom:24px}
.casa-txt > p{color:var(--texto-tenue); max-width:48ch}
.casa-datos{display:flex; gap:44px; margin:40px 0 0; flex-wrap:wrap}
.casa-datos dt{font-size:var(--t-11); letter-spacing:.14em; text-transform:uppercase; color:var(--texto-tenue); margin-bottom:6px}
.casa-datos dd{margin:0; font-size:var(--t-22); font-weight:var(--peso-medio)}

/* ---------- contacto ---------- */
.hablemos{max-width:720px; margin:0 auto; padding:0 24px 130px; text-align:center}
.hablemos h2{margin-bottom:20px}
.hablemos-texto{color:var(--texto-tenue); margin-bottom:48px}
.form{display:grid; grid-template-columns:1fr; gap:26px; text-align:left; max-width:460px; margin:0 auto}
.campo{display:flex; flex-direction:column; gap:8px}
.campo-ancho{grid-column:1/-1}
.form label{font-size:var(--t-12); letter-spacing:.12em; text-transform:uppercase; color:var(--texto-tenue)}
.form label .opt{text-transform:none; letter-spacing:0; opacity:.7; margin-left:8px}
.form input,.form textarea{
  background:transparent; border:0; border-bottom:1px solid var(--linea); color:var(--texto);
  padding:12px 2px; font:inherit; font-size:var(--t-16); border-radius:0; resize:vertical;
  transition:border-color var(--dur-media) var(--e);
}
.form input:hover,.form textarea:hover{border-bottom-color:rgba(237,230,221,.32)}
.form input:focus,.form textarea:focus{outline:none; border-bottom-color:var(--accion-viva)}
.form input::placeholder,.form textarea::placeholder{color:var(--texto-apagado)}
.ayuda{font-size:var(--t-12); color:var(--texto-apagado)}
.error{font-size:var(--t-13); color:var(--error)}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-bottom-color:var(--error)}
.btn-envio{grid-column:1/-1; justify-content:center; margin-top:8px; border:0; cursor:pointer; font-family:inherit}
.form-nota{grid-column:1/-1; font-size:var(--t-13); color:var(--texto-apagado); text-align:center}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea); background:var(--fondo-hondo); padding:56px 24px 32px}
.pie-fila{max-width:var(--ancho); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.pie-enlaces{display:flex; gap:26px; flex-wrap:wrap}
.pie-enlaces a,.pie-legal a{color:var(--texto-tenue); text-decoration:none; font-size:var(--t-14); transition:color var(--dur-media) var(--e)}
.pie-enlaces a:hover,.pie-legal a:hover{color:var(--texto)}
.pie-legal{margin-top:36px; padding-top:22px; border-top:1px solid var(--linea); font-size:var(--t-13); color:var(--texto-apagado)}
.pie-legal p{margin:0}

/* ---------- revelado en scroll ---------- */
.rv{opacity:0; transform:translateY(30px); filter:blur(6px);
    transition:opacity .9s var(--e), transform .9s var(--e), filter .9s var(--e)}
.rv.visto{opacity:1; transform:none; filter:none}
.d1{transition-delay:.09s} .d2{transition-delay:.18s} .d3{transition-delay:.27s}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .viaje,.dias-cab,.casa{grid-template-columns:1fr; gap:26px}
  .viaje:nth-child(even){direction:ltr}
  .casa-foto{aspect-ratio:16/10}
  .dias-lista{columns:1}
  .paises-grid{grid-template-columns:1fr}
  .pais,.pais-ancho{grid-column:span 1; aspect-ratio:16/10}
  /* A 214 px de alto, un padding de 28 px y el cuerpo a 13 px hacían
     que el rótulo ocupara dos tercios de la tarjeta y el degradado
     llegara al borde superior de la foto. */
  .pais-txt{padding:var(--e-16)}
  .pais-txt h2,.pais-txt h3{font-size:var(--t-20); margin-bottom:var(--e-2)}
  .pais-txt p{font-size:var(--t-12); line-height:var(--alto-normal)}
  .nav-enlaces,.nav-idioma,.nav-cta{display:none}
  .nav-hamburguesa{display:block}
  .nav-barra{padding:14px 20px}
  .hero-cuerpo{padding-left:20px; padding-right:20px}
  .tesis{padding:100px 24px 84px}
}
@media (max-width:560px){
  /* El logo creció a 34px por petición del cliente, pero a 560px la barra
     baja su padding a 14px: 30px mantiene el aire alrededor. */
  .logo-svg{height:30px}
  /* Los dos botones se apilan: el pie del hero necesita el doble de hueco
     o la franja de altitudes se come el segundo. */
  .hero-cuerpo{padding-bottom:124px}
  .hero-acciones{flex-direction:column; align-items:flex-start; gap:10px}
  .hero-acciones .btn{width:100%; text-align:center}
  .hero-pie{font-size:var(--t-11); gap:12px}
  .casa-datos{gap:28px}
  /* A 320 px la descripción de Perú ocupaba el 71% de la tarjeta y el
     degradado llegaba al cielo. Dos líneas: el nombre del país y la
     cuenta de productos son lo que decide el clic. */
  .pais-txt p{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none; filter:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   COMPONENTES QUE LA DEMO NO CUBRÍA
   La demo es una sola página. Lo que sigue extiende su sistema
   a las páginas interiores, con sus mismas reglas: radio 2px,
   peso máximo 600, marrón solo en acciones, nunca sobre foto.
   ========================================================= */

/* ---------- migas de pan ---------- */
/* La barra es fixed: sin este margen las migas quedan debajo de ella.
   El hero no lo necesita porque la barra flota sobre la foto a propósito. */
.migas{border-bottom:1px solid var(--linea); background:var(--fondo-hondo); margin-top:66px}
.migas-inner{max-width:var(--ancho); margin:0 auto; padding:14px 24px;
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  font-size:var(--t-13); letter-spacing:.02em; color:var(--texto-tenue)}
.migas a{text-decoration:none; color:var(--texto-tenue); transition:color var(--dur-media) var(--e)}
.migas a:hover{color:var(--texto)}
.migas .sep{opacity:.45}
.migas [aria-current="page"]{color:var(--texto)}

/* ---------- cabecera de página interior ---------- */
.cab{max-width:var(--ancho); margin:0 auto; padding:var(--e-96) var(--margen) var(--e-56)}
/* Cuando la cabecera precede a una columna de lectura, comparte su ancho:
   si no, el título arranca a un margen y el cuerpo a otro. */
.cab.cab-lectura{max-width:calc(var(--ancho-lectura) + var(--margen)*2)}
.cab h1{font-size:var(--t-d2); line-height:1.03; letter-spacing:var(--track-firme); font-weight:var(--peso-normal); margin-bottom:var(--e-20)}
.cab-texto{color:var(--texto-tenue); font-size:var(--t-18); max-width:var(--medida-corta)}

/* ---------- hero de página interior: foto a sangre, velo vertical ---------- */
.hero-int{position:relative; min-height:62vh; display:flex; align-items:flex-end; overflow:hidden}
.hero-int .hero-foto{position:absolute; inset:0}
.hero-int .hero-foto img{width:100%; height:100%; object-fit:cover}
/* El velo llegaba a .42 arriba: bastaba con foto oscura, pero sobre un
   cielo despejado dejaba el eyebrow en 1,68:1, ilegible. La franja alta
   sube a .72 y el degradado sigue dejando ver la fotografía. */
.hero-int .hero-velo{position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,10,8,.95) 0%, rgba(14,10,8,.86) 38%, rgba(14,10,8,.58) 72%, rgba(14,10,8,.72) 100%)}
.hero-int .hero-cuerpo{position:relative; max-width:var(--ancho); margin:0 auto; padding:0 24px 68px; width:100%}
.hero-int h1{font-size:var(--t-d2); line-height:1.04; letter-spacing:-.03em; font-weight:var(--peso-normal); margin-bottom:20px; max-width:18ch}
.hero-int .hero-texto{max-width:54ch; color:var(--sobre-foto); font-size:var(--t-18); margin-bottom:30px}

/* ---------- cuerpo de lectura: itinerario, legales, artículo ---------- */
.lectura{max-width:760px; margin:0 auto; padding:0 24px 120px}
.lectura h2{font-size:var(--t-d4); line-height:1.15; letter-spacing:-.02em; font-weight:var(--peso-normal); margin:64px 0 18px}
.lectura h3{font-size:var(--t-20); font-weight:var(--peso-fuerte); margin:36px 0 12px; letter-spacing:-.01em}
.lectura p{margin-bottom:20px; color:var(--texto-suave)}
.lectura ul,.lectura ol{margin:0 0 24px 20px; padding:0; color:var(--texto-suave)}
.lectura li{margin-bottom:10px}
.lectura li b,.lectura li strong{color:var(--texto); font-weight:var(--peso-fuerte)}
.lectura p b,.lectura p strong{color:var(--texto); font-weight:var(--peso-fuerte)}
.lectura a{color:var(--texto); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--accion-viva)}
.lectura a:hover{color:#fff}
.lectura strong{color:var(--texto); font-weight:var(--peso-fuerte)}

/* ---------- tabla ---------- */
.tabla{overflow-x:auto; margin:0 0 28px}
.tabla table{width:100%; border-collapse:collapse; font-size:var(--t-15)}
.tabla th,.tabla td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--linea); vertical-align:top; color:var(--texto-suave)}
.tabla thead th{color:var(--texto-tenue); font-size:var(--t-12); letter-spacing:.12em; text-transform:uppercase; font-weight:var(--peso-medio)}

/* ---------- el día a día del itinerario ----------
   Dos columnas sobre el ancho completo, agrupado por tramos.
   Trece días en una sola columna de 760px obligan a un scroll sin
   estructura: el lector no sabe cuánto le queda ni dónde está.
   Los tramos (millers-law) convierten 13 unidades sueltas en 4 o 5
   bloques con significado — Arequipa, el Colca, el Titicaca, Cusco. */
.itin{max-width:var(--ancho); margin:0 auto; padding:0 24px 40px}
.itin > h2{font-size:var(--t-d4); line-height:1.15; letter-spacing:-.02em;
  font-weight:var(--peso-normal); margin:0 0 34px}
.tramo + .tramo{margin-top:34px}
.tramo{margin-bottom:8px}
.tramo-cab{display:flex; align-items:baseline; gap:16px; padding:0 0 14px;
  border-bottom:1px solid var(--linea); margin-bottom:1px}
.tramo-cab h3{font-size:var(--t-15); font-weight:var(--peso-fuerte); letter-spacing:.01em; margin:0; color:var(--texto)}
.tramo-cab span{font-size:var(--t-12); letter-spacing:.14em; text-transform:uppercase; color:var(--texto-tenue)}

.dias-itin{list-style:none; margin:0 0 34px; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linea)}
.dia{background:var(--fondo); padding:20px 24px; display:grid;
  grid-template-columns:62px 1fr; gap:18px; align-items:baseline}
/* "Day 1" iba en --accion-viva: 2.45:1, muy por debajo de AA, y además
   el marrón significa "esto se pulsa" en este sistema (von Restorff).
   Un rótulo de día no se pulsa. Pasa a --texto-tenue: 6.52:1. */
.dia-n{font-size:var(--t-12); letter-spacing:.14em; text-transform:uppercase; color:var(--texto-tenue);
  font-variant-numeric:tabular-nums}
.dia h3{font-size:var(--t-17); font-weight:var(--peso-fuerte); margin:0 0 6px; letter-spacing:-.005em}
.dia p{margin:0; color:var(--texto-tenue); font-size:var(--t-15); line-height:1.55}
.dia p b,.dia p strong{color:var(--texto-suave); font-weight:var(--peso-medio)}
/* Un día con un solo tramo dejaría media fila vacía: ocupa el ancho. */
.dias-itin > .dia:only-child{grid-column:1/-1}

/* ---------- preguntas ---------- */
.faq{margin:0 0 40px}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer; list-style:none; padding:20px 0; font-size:var(--t-17); font-weight:var(--peso-fuerte);
  display:flex; justify-content:space-between; gap:20px; align-items:baseline; transition:color var(--dur-media) var(--e)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accion-viva); font-size:var(--t-20); line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:#fff}
.faq details p{margin:0 0 22px; color:var(--texto-tenue); max-width:64ch}

/* ---------- cierre de producto: hablemos ---------- */
.cierre{border-top:1px solid var(--linea); background:var(--fondo-hondo); padding:84px 24px}
.cierre-inner{max-width:680px; margin:0 auto; text-align:center}
.cierre h2{font-size:clamp(26px,3.4vw,40px); line-height:1.12; letter-spacing:-.025em; font-weight:var(--peso-normal); margin-bottom:16px}
.cierre p{color:var(--texto-tenue); margin-bottom:32px}
.cierre p b{color:var(--texto); font-weight:var(--peso-medio)}
.cierre-acciones{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:26px}
.cierre-directo{font-size:var(--t-14); color:var(--texto-tenue)}
.cierre-directo a{color:var(--texto); text-decoration:none; border-bottom:1px solid var(--linea); transition:border-color var(--dur-media) var(--e)}
.cierre-directo a:hover{border-bottom-color:var(--texto)}
.cierre-directo i{display:inline-block; width:3px; height:3px; background:var(--accion); border-radius:50%; margin:0 12px; vertical-align:middle}

/* ---------- "sigue" : excursiones y otros viajes ---------- */
.sigue{max-width:var(--ancho); margin:0 auto; padding:0 24px 110px}
.sigue h2{font-size:clamp(22px,2.6vw,30px); font-weight:var(--peso-normal); letter-spacing:-.02em; margin-bottom:26px}
.sigue-lista{list-style:none; margin:0; padding:0; columns:2; column-gap:56px}
.sigue-lista li{display:flex; align-items:baseline; gap:14px; justify-content:space-between;
  padding:15px 0; border-bottom:1px solid var(--linea); break-inside:avoid}
.sigue-lista a{text-decoration:none; color:var(--texto-suave); transition:color var(--dur-media) var(--e)}
.sigue-lista a:hover{color:var(--texto)}
.sigue-lista b{font-weight:var(--peso-medio); font-size:var(--t-14); color:var(--texto-tenue); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- dato pendiente del cliente, en bloque ---------- */
.aviso{border:1px solid rgba(143,61,30,.4); border-left-width:2px; border-left-color:var(--accion-viva);
  padding:18px 22px; margin:0 0 32px; border-radius:2px; background:rgba(143,61,30,.06)}
.aviso p{margin:0; font-size:var(--t-15); color:var(--c-caliza-400)}

@media (max-width:900px){
  .sigue-lista{columns:1}
  .dias-itin{grid-template-columns:1fr}
  .dia{grid-template-columns:52px 1fr; gap:14px}
  .itin{padding-left:20px; padding-right:20px}
  .cab{padding:72px 20px 44px}
  .hero-int{min-height:54vh}
}

/* ---------- añadidos al pie y a la barra ---------- */
.nav-idioma[hidden]{display:none}
.nav-idioma{display:flex; gap:7px; align-items:center; font-size:var(--t-13); letter-spacing:.08em; color:var(--texto-tenue)}
.nav-idioma a{text-decoration:none; color:var(--texto-tenue); transition:color var(--dur-media) var(--e)}
.nav-idioma a.activo,.nav-idioma a:hover{color:var(--texto)}
.pie-contacto{margin-top:34px; font-size:var(--t-14); color:var(--texto-tenue); display:block}
.pie-contacto p{margin:0 0 6px}
.pie-contacto a{color:var(--texto); text-decoration:none; border-bottom:1px solid var(--linea)}
.pie-contacto a:hover{border-bottom-color:var(--texto)}
.pie-contacto i{display:inline-block; width:3px; height:3px; background:var(--accion); border-radius:50%; margin:0 12px; vertical-align:middle}
.pie-horario{color:var(--texto-apagado); font-size:var(--t-13)}
.pie-redes{margin-top:26px; display:flex; gap:14px;
  /* hereda .pie-fila, que reparte con space-between: los cuatro
     iconos quedaban estirados a lo ancho de los 1240px */
  justify-content:flex-start}
.pie-redes a{width:34px; height:34px; border:1px solid var(--linea); border-radius:2px;
  display:flex; align-items:center; justify-content:center; transition:border-color var(--dur-media) var(--e)}
.pie-redes a:hover{border-color:var(--texto)}
.pie-redes svg{width:17px; height:17px; fill:none; stroke:var(--texto-tenue); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.pie-redes a:hover svg{stroke:var(--texto)}
.pie-enlaces-legal{margin-top:14px}

/* honeypot del formulario */
.hp-campo{position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden}
/* la lista de días enlaza a la ficha del tour */
.dias-lista a{text-decoration:none; color:inherit; transition:color var(--dur-media) var(--e)}
.dias-lista a:hover{color:var(--texto)}

/* ---------- jerarquía de énfasis ----------
   Una sola regla para todo el sitio: la negrita sube el peso y aclara el
   color hacia el texto principal. Nunca usa el marrón, que queda reservado
   a las acciones. Así el ojo encuentra el dato concreto antes que la frase. */
.viaje-texto b,.pais-txt b,.dias-texto b,.casa-txt p b,.hablemos-texto b{
  color:var(--texto); font-weight:var(--peso-medio)}

/* Los media query del itinerario van al final del archivo: los bloques
   anteriores de 560px se declaran antes que el de 900px y quedaban pisados. */
@media (max-width:560px){
  .dia{grid-template-columns:1fr; gap:4px; padding:18px}
  .dia-n{font-size:var(--t-11)}
  .tramo-cab{flex-wrap:wrap; gap:8px}
  .itin{padding-left:18px; padding-right:18px}
  .lectura{padding-left:18px; padding-right:18px}
}

/* ============================================================
   COMPONENTES NUEVOS PARA LAS PLANTILLAS RESTANTES
   Especificados en documentacion/componentes.md antes de
   construirse. Solo tokens: ni un valor literal.
   ============================================================ */

/* ---------- tarjeta de tour ----------
   Las 25 excursiones de un día. Rejilla, no lista alterna: los tours
   son intercambiables entre sí y la alternancia sería ruido. Ficha de
   dos líneas, no cuatro: una compra pequeña no sostiene ese peso. */
.tours-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--e-28); list-style:none; margin:0 0 var(--entre-grupos); padding:0}
.tour{display:flex; flex-direction:column; gap:var(--e-12)}
.tour-foto{display:block; overflow:hidden; border-radius:var(--radio);
  background:var(--fondo-hondo); aspect-ratio:4/3}
.tour-foto img{width:100%; height:100%; object-fit:cover;
  filter:saturate(.9) brightness(.94);
  transition:transform var(--dur-larga) var(--e), filter var(--dur-larga) var(--e)}
.tour-foto:hover img{transform:scale(1.03); filter:saturate(1) brightness(1)}
.tour h3{font-size:var(--t-18); font-weight:var(--peso-medio); margin:0;
  letter-spacing:var(--track-corto)}
.tour h3 a{color:var(--texto); text-decoration:none;
  transition:color var(--dur-media) var(--e)}
.tour h3 a:hover{color:var(--c-blanco)}
.tour-texto{font-size:var(--t-15); color:var(--texto-tenue); margin:0;
  line-height:var(--alto-normal)}
/* La ficha corta: duración y punto de partida. Nada más. */
.tour-ficha{display:flex; flex-wrap:wrap; gap:var(--e-6) var(--e-16); margin:0; padding:0;
  list-style:none; font-size:var(--t-13); color:var(--texto-tenue)}
.tour-precio{margin:auto 0 0; padding-top:var(--e-12); font-size:var(--t-14);
  color:var(--texto-suave); border-top:1px solid var(--linea)}
.tour-precio b{font-weight:var(--peso-medio); color:var(--texto);
  font-variant-numeric:tabular-nums}

/* ---------- índice de anclas ----------
   Salta a las secciones de una página larga. Va justo bajo las
   migas y por encima del primer H2. Región común: fondo hondo y
   línea, para que se lea como un bloque y no como texto suelto. */
.indice{background:var(--fondo-hondo); border-block:1px solid var(--linea);
  margin-bottom:var(--entre-grupos)}
.indice-inner{max-width:var(--ancho); margin:0 auto;
  padding:var(--e-16) var(--margen); display:flex; flex-wrap:wrap;
  align-items:baseline; gap:var(--junto) var(--e-24)}
.indice-tit{font-size:var(--t-11); letter-spacing:var(--track-amplio);
  text-transform:uppercase; color:var(--texto-tenue); margin:0}
.indice a{font-size:var(--t-14); color:var(--texto-suave); text-decoration:none;
  padding-bottom:var(--e-2); border-bottom:1px solid transparent;
  transition:color var(--dur-media) var(--e), border-color var(--dur-media) var(--e)}
.indice a:hover,.indice a:focus-visible{color:var(--texto); border-bottom-color:var(--accion-viva)}
.indice a[aria-current="true"]{color:var(--texto); border-bottom-color:var(--accion)}

/* ---------- cuándo ir ----------
   Dos temporadas, no doce barras. El catálogo no tiene una "mejor
   época": el cliente vende la temporada verde por precio y afluencia,
   y en Uyuni la lluvia ES el producto — sin ella no hay espejo.
   Marcar meses en marrón contradiría a la casa en su propia web.

   Región común (dos superficies contiguas) en vez de acento: las dos
   temporadas son alternativas equivalentes, no una opción y su descarte.
   Ningún acento aquí, porque no hay nada que pulsar. */
.temporadas{display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--linea); margin:0 0 var(--entre-grupos)}
.temporada{background:var(--fondo); padding:var(--e-28)}
.temporada-meses{font-size:var(--t-12); letter-spacing:var(--track-ancho);
  text-transform:uppercase; color:var(--texto-tenue); margin:0 0 var(--e-8)}
.temporada h3{font-size:var(--t-20); font-weight:var(--peso-fuerte); margin:0 0 var(--e-12);
  letter-spacing:var(--track-corto)}
.temporada p{margin:0 0 var(--e-16); color:var(--texto-suave); font-size:var(--t-15);
  line-height:var(--alto-normal)}
.temporada ul{margin:0; padding:0; list-style:none; display:grid; gap:var(--e-6)}
.temporada li{font-size:var(--t-14); color:var(--texto-tenue); display:flex; gap:var(--junto)}
.temporada li::before{content:"·"; color:var(--accion-viva)}
.temporadas-nota{font-size:var(--t-13); color:var(--texto-apagado);
  margin:calc(var(--e-16) * -1 + var(--entre-grupos)*0) 0 var(--entre-grupos)}

@media (max-width:900px){
  .temporadas{grid-template-columns:1fr}
}

/* ---------- bloque de precio y reserva ----------
   Región común marcada: es la decisión de compra y tiene que
   leerse como una unidad separada del cuerpo. Un único botón
   relleno en toda la página. */
.precio{border:1px solid var(--linea); border-radius:var(--radio);
  padding:var(--e-28); background:var(--fondo-hondo);
  display:grid; gap:var(--grupo); margin:0 0 var(--entre-grupos)}
.precio-cifra{display:flex; align-items:baseline; gap:var(--junto); flex-wrap:wrap}
.precio-desde{font-size:var(--t-13); color:var(--texto-tenue)}
.precio-monto{font-size:var(--t-34); font-weight:var(--peso-normal);
  letter-spacing:var(--track-corto); color:var(--texto);
  font-variant-numeric:tabular-nums}
.precio-unidad{font-size:var(--t-13); color:var(--texto-tenue)}
.precio-detalle{display:grid; gap:var(--e-8); margin:0; padding:0; list-style:none}
.precio-detalle li{display:flex; justify-content:space-between; gap:var(--e-16);
  font-size:var(--t-14); color:var(--texto-suave);
  padding-bottom:var(--e-8); border-bottom:1px solid var(--linea)}
.precio-detalle li:last-child{border-bottom:0; padding-bottom:0}
.precio-detalle b{font-weight:var(--peso-medio); color:var(--texto);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.precio-acciones{display:flex; gap:var(--e-12); flex-wrap:wrap; margin-top:var(--e-4)}
.precio-nota{font-size:var(--t-12); color:var(--texto-apagado); margin:0}

@media (max-width:560px){
  .temporada{padding:var(--e-20)}
  .precio{padding:var(--e-20)}
  .precio-acciones .btn{width:100%; text-align:center}
}

/* ---------- tres destacados ----------
   Ocho viñetas de una línea no se leen: se escanean y se olvidan. Tres
   con icono entran por el ojo y el resto queda debajo como lista, sin
   perder contenido. El icono es del juego que ya existe: ninguna
   librería nueva. */
.destacados{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--linea); margin:0 0 var(--e-24)}
.destacado{background:var(--fondo); padding:var(--e-24);
  display:flex; flex-direction:column; gap:var(--e-12)}
.destacado svg{width:26px; height:26px; fill:none; stroke:var(--accion-viva);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex:none}
.destacado p{margin:0; font-size:var(--t-15); line-height:var(--alto-normal);
  color:var(--texto-suave)}
.destacado b{display:block; color:var(--texto); font-weight:var(--peso-fuerte);
  margin-bottom:var(--e-4); font-size:var(--t-16)}
/* Los que no entran en los tres: lista de texto, subordinada a propósito. */

/* ---------- qué incluye ----------
   Dos listas enfrentadas: lo que entra y lo que no. Son alternativas
   del mismo dato, así que van en paralelo y no una tras otra. */
.incluye{display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--linea); margin:0 0 var(--entre-grupos)}
.incluye-col{background:var(--fondo); padding:var(--e-24)}
.incluye-col h3{font-size:var(--t-16); font-weight:var(--peso-fuerte); margin:0 0 var(--e-16);
  display:flex; align-items:center; gap:var(--junto)}
.incluye-col h3::before{content:""; width:var(--e-12); height:1px; background:var(--accion-viva)}
.incluye-col ul{margin:0; padding:0; list-style:none; display:grid; gap:var(--e-8)}
.incluye-col li{font-size:var(--t-15); color:var(--texto-suave); display:flex; gap:var(--junto);
  line-height:var(--alto-normal)}
.incluye-col li::before{content:"·"; color:var(--texto-tenue); flex:none}
.incluye-no li{color:var(--texto-tenue)}

/* ---------- imagen a sangre ----------
   Respira entre dos bloques largos de texto. Sin marco ni pie: es un
   descanso visual, no una figura que haya que leer. */
.respiro{margin:0 0 var(--seccion); position:relative; overflow:hidden}
.respiro img{width:100%; height:clamp(280px,42vw,520px); object-fit:cover; display:block;
  filter:saturate(.9) brightness(.82)}
.respiro-ancho{max-width:var(--ancho); margin-inline:auto; padding-inline:var(--margen)}
.respiro-ancho img{border-radius:var(--radio)}

/* ---------- horario de un día ----------
   Los tours de un día no son itinerarios cortos: son horarios. La hora
   manda a la izquierda en cifra tabular, el título encima del texto, y
   una línea vertical los encadena. La rejilla de dos columnas de los
   viajes de 10 días aquí rompía la secuencia temporal. */
/* Dos columnas, pero el horario se lee en vertical: la primera mitad
   baja por la izquierda y la segunda por la derecha. Con el flujo por
   filas la secuencia iría en zigzag, que en un horario es un error.
   El generador escribe grid-template-rows con la mitad de las franjas. */
.horario{margin:0 0 var(--entre-grupos); padding:0; list-style:none;
  display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:column; gap:0 var(--e-48)}
.franja{display:grid; grid-template-columns:104px 1fr; gap:var(--e-24);
  padding:0 0 var(--e-28); position:relative}
.franja:last-child{padding-bottom:0}
/* la línea que encadena las horas */
.franja::before{content:""; position:absolute; left:103px; top:var(--e-8); bottom:0;
  width:1px; background:var(--linea)}
/* La línea no debe salir de la última franja de cada columna. */
.franja:last-child::before,.franja-fin::before{display:none}
.franja-fin{padding-bottom:0}
.franja-hora{font-size:var(--t-13); color:var(--texto-tenue);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; text-align:right;
  padding-top:var(--e-2); position:relative}
.franja-hora::after{content:""; position:absolute; right:-5px; top:var(--e-8);
  width:7px; height:7px; border-radius:var(--radio-circulo);
  background:var(--fondo); border:1px solid var(--accion-viva)}
.franja h3{font-size:var(--t-17); font-weight:var(--peso-fuerte); margin:0 0 var(--e-6);
  letter-spacing:-.005em}
.franja p{margin:0; color:var(--texto-suave); font-size:var(--t-15);
  line-height:var(--alto-normal)}
/* Sin hora: sin línea ni punto, solo el texto. */
.franja-sinhora{grid-template-columns:1fr}
.franja-sinhora::before,.franja-sinhora .franja-hora{display:none}

@media (max-width:900px){
  .destacados,.incluye{grid-template-columns:1fr}
  .horario{grid-template-columns:1fr; grid-template-rows:none !important;
    grid-auto-flow:row; gap:0}
  .franja-fin{padding-bottom:var(--e-28)}
  .franja-fin::before{display:block}
}
@media (max-width:560px){
  .franja{grid-template-columns:1fr; gap:var(--e-4); padding-bottom:var(--e-24)}
  .franja::before{display:none}
  .franja-hora{text-align:left}
  .franja-hora::after{display:none}
}

/* --- Zonas táctiles en móvil -----------------------------------------
   Medido con CDP a 390 px: 25 enlaces por página quedaban en 20-26 px de
   alto y la hamburguesa en 38x24, cuando el mínimo táctil son 44x44
   (Apple HIG, Material, y WCAG 2.5.5). Se agranda el área pulsable con
   un pseudo-elemento, no con padding: el padding movería la maquetación
   y el usuario aprobó cómo se ve. El dedo gana sitio, el ojo no nota nada.

   La hamburguesa sí lleva min-height real: es el elemento más pulsado de
   todo el móvil y no tiene vecinos que desplazar. */
@media (max-width:900px){
  .nav-hamburguesa{min-width:44px; min-height:44px; display:flex;
    flex-direction:column; align-items:center; justify-content:center}

  .migas a,.indice a,.nav-enlaces a,.pie-enlaces a,.pie-legal a,
  .pie-contacto a,.cierre-directo a{position:relative}
  .migas a::after,.indice a::after,.nav-enlaces a::after,
  .pie-enlaces a::after,.pie-legal a::after,.pie-contacto a::after,
  .cierre-directo a::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%)}

  /* Los iconos sociales sí pueden crecer: van en su propia fila. */
  .pie-redes a{width:44px; height:44px}

  /* El descriptor de cada viaje en el menú ("13 days · Colca, Titicaca")
     es información de producto, no un rótulo decorativo: a 12 px se lee
     mal con el pulgar y a contraluz. Los rótulos en versalitas de 11-12 px
     (eyebrow, "On this page") se quedan: son etiquetas, no lectura. */
  .mega-lista span{font-size:var(--t-14)}
  .mega-lista a{padding:var(--e-16)}
}