/* Fuentes propias. Antes venian de fonts.googleapis.com, lo que anadia una
   hoja que bloquea el render en un tercer origen (DNS + TLS + descarga antes
   de pintar nada). Son variables: un solo archivo por subconjunto cubre los
   pesos 400-700. latin-ext hace falta para Kusadasi, Sirince, Selcuk e Izmir. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Excursiones para Éfeso — «La Ruta de Mármol»
   Sistema de diseño. Piedra, laurel y bronce.
   ========================================================================== */

:root {
  /* Color */
  --tinta: #14231c;
  --tinta-80: rgba(20, 35, 28, 0.8);
  --laurel: #2f5d48;
  --laurel-claro: #4a7f65;
  --laurel-pale: #e6ede8;
  --bronce: #b4762f;
  /* Bronce oscurecido SOLO para fondos con texto encima: el #b4762f da 3,71:1
     con blanco y 1.4.3 pide 4,5:1 para texto normal. Este da 4,63:1. */
  --bronce-btn: #9e6829;
  /* Bronce para TEXTO pequeno sobre fondo claro (hitos, horas, fechas,
     precios de tarjeta). El --bronce da 3,34:1 sobre caliza y 3,71:1 sobre
     blanco: por debajo del 4,5:1 que pide WCAG 2.2 AA (1.4.3) para texto
     normal. Este da 5,11 / 5,67 / 4,50 sobre caliza, blanco y caliza-2. */
  --bronce-txt: #955710;
  --bronce-claro: #d9a65c;
  --caliza: #f5f1e8;
  --caliza-2: #eae3d4;
  --caliza-3: #ded5c2;
  /* Borde de CONTROLES (1.4.11 pide 3:1). El --caliza-3 da 1,29:1 sobre
     caliza: vale como separador decorativo, no como limite de un control. */
  --borde-ui: #8d7d5f;
  /* WCAG 1.4.3: el #6b7168 daba 4,45:1 sobre caliza y el #656a62 daba 4,34:1
     sobre caliza-2 (bandas, resenas, fuentes). Este pasa en los tres fondos:
     5,14 caliza / 4,53 caliza-2 / 5,70 blanco. */
  --humo: #62675f;
  --blanco: #fffdf9;

  --fondo: var(--caliza);
  --texto: var(--tinta);
  --suave: var(--humo);

  /* Tipografía */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --paso--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --paso--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --paso-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --paso-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --paso-2: clamp(1.45rem, 1.32rem + 0.62vw, 1.85rem);
  --paso-3: clamp(1.75rem, 1.53rem + 1.1vw, 2.5rem);
  --paso-4: clamp(2.1rem, 1.7rem + 1.9vw, 3.4rem);
  --paso-5: clamp(2.5rem, 1.85rem + 3vw, 4.4rem);
  --paso-6: clamp(2.9rem, 1.9rem + 4.6vw, 5.6rem);

  /* Ritmo */
  --ancho: 1240px;
  --ancho-texto: 68ch;
  --canal: clamp(1.15rem, 4vw, 2.75rem);
  --seccion: clamp(4rem, 9vw, 8rem);
  --header-h: 78px;

  /* Movimiento */
  --sal-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --sal-firme: cubic-bezier(0.76, 0, 0.24, 1);
  --ent-corta: cubic-bezier(0.4, 0, 0.2, 1);
  --rebote: cubic-bezier(0.34, 1.56, 0.64, 1);

  --sombra-1: 0 1px 2px rgba(20, 35, 28, 0.06), 0 4px 14px rgba(20, 35, 28, 0.06);
  --sombra-2: 0 10px 34px rgba(20, 35, 28, 0.14);
  --radio: 2px;
  --radio-esq: 22px;
}

/* --- Reinicio ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;   overflow-x: clip; /* WCAG 1.4.10 */
}
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--paso-0);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  /* `clip` y no `hidden`: `hidden` convertiría al body en el contenedor de
     scroll, y entonces window.scrollY se queda en 0 y se rompen la barra de
     progreso, el parallax y la cabecera fijada. */
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 0.6em;
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 40;
}
h1 { font-size: var(--paso-5); }
h2 { font-size: var(--paso-4); }
h3 { font-size: var(--paso-2); }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--bronce); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--bronce-claro); color: var(--tinta); }

/* --- Estructura ---------------------------------------------------------- */
.container { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--canal); }
.container-estrecho { max-width: 820px; }
.seccion { padding-block: var(--seccion); position: relative; }
.seccion + .seccion { padding-top: 0; }
.seccion-banda { padding-block: var(--seccion); }
.banda-caliza2 { background: var(--caliza-2); }
.banda-tinta { background: var(--tinta); color: var(--caliza); }
.banda-tinta h2, .banda-tinta h3 { color: var(--blanco); }
.banda-tinta a { color: var(--bronce-claro); }
.veta { position: relative; }
.veta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='none' stroke='%2314231c' stroke-width='1'%3E%3Cpath d='M-20 90c80 30 140-20 210 6s150 40 240 4'/%3E%3Cpath d='M-20 210c90 24 150-26 214 2s160 34 246-6'/%3E%3Cpath d='M-20 330c70 34 156-16 220 8s140 30 240-8'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Tipografía de apoyo ------------------------------------------------- */
.antetitulo {
  display: inline-block; font-family: var(--sans); font-size: var(--paso--2);
  font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--laurel); margin-bottom: 1.1rem; position: relative; padding-bottom: 0.55rem;
}
.banda-tinta .antetitulo { color: var(--bronce-claro); }
.antetitulo::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--bronce); transform: scaleX(var(--w, 1)); transform-origin: left;
}
.entradilla { font-size: var(--paso-1); color: var(--suave); max-width: 62ch; line-height: 1.6; }
.banda-tinta .entradilla { color: rgba(245, 241, 232, 0.78); }
.prosa { max-width: var(--ancho-texto); }
.prosa h2 { margin-top: 2.2em; font-size: var(--paso-3); }
.prosa h3 { margin-top: 1.8em; font-size: var(--paso-1); font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; }
.prosa a:not(.btn) {
  text-decoration: none; color: var(--laurel); font-weight: 600;
  background-image: linear-gradient(var(--bronce), var(--bronce));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.24s var(--ent-corta), color 0.24s var(--ent-corta);
  padding-bottom: 1px;
}
.prosa a:not(.btn):hover { color: var(--bronce-txt); background-size: 100% 2px; }

/* --- Botones ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--bronce-btn); --btn-fg: var(--blanco);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6em; min-height: 52px; padding: 0.85rem 1.9rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--sans); font-size: var(--paso--1); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border: 1.5px solid var(--btn-bg); border-radius: var(--radio); cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: color 0.26s var(--ent-corta), border-color 0.26s var(--ent-corta), transform 0.26s var(--ent-corta);
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tinta);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--sal-suave);
}
.btn:hover { color: var(--blanco); border-color: var(--tinta); transform: translateY(-2px); }
.btn:hover::after { transform: scaleX(1); }
.btn-contorno { --btn-bg: transparent; --btn-fg: var(--tinta); border-color: currentColor; }
.btn-contorno::after { background: var(--laurel); }
.btn-claro { --btn-bg: transparent; --btn-fg: var(--caliza); border-color: rgba(245, 241, 232, 0.45); }
.btn-claro::after { background: var(--caliza); }
.btn-claro:hover { color: var(--tinta); border-color: var(--caliza); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 0.55em; text-decoration: none;
  font-weight: 700; font-size: var(--paso--1); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--laurel);
}
.enlace-flecha svg { transition: transform 0.24s var(--sal-suave); }
.enlace-flecha:hover svg { transform: translateX(7px); }
.banda-tinta .enlace-flecha { color: var(--bronce-claro); }

/* --- Cabecera ------------------------------------------------------------ */
.barra-superior {
  background: var(--tinta); color: rgba(245, 241, 232, 0.82);
  font-size: var(--paso--2); letter-spacing: 0.04em;
}
.barra-superior-int { display: flex; align-items: center; gap: 0.9rem; min-height: 38px; flex-wrap: wrap; }
.barra-superior a { color: inherit; text-decoration: none; }
.barra-superior a:hover { color: var(--bronce-claro); }
.barra-sep { color: var(--bronce); }
.barra-idiomas { margin-left: auto; display: flex; align-items: center; gap: 0.3rem; }
.lang-btn {
  width: 30px; height: 21px; padding: 0; border: 1px solid rgba(245, 241, 232, 0.45);
  border-radius: 2px; background: none; cursor: pointer; overflow: hidden; line-height: 0;
  opacity: 0.8; transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
}
/* Area de pulsacion de 44x44 sin agrandar la bandera (dedo en movil). */
.lang-btn { position: relative; }
.lang-btn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.lang-btn:hover { opacity: 1; transform: translateY(-1px); }
.lang-btn[aria-pressed='true'] { opacity: 1; border-color: var(--bronce); }
.lang-btn svg { width: 100%; height: 100%; }

.cabecera { position: sticky; top: 0; z-index: 60; background: var(--caliza); transition: box-shadow 0.3s, background 0.3s; }
.cabecera.fijada { box-shadow: 0 1px 0 var(--caliza-3), 0 8px 26px rgba(20, 35, 28, 0.08); }
.cabecera-int { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.marca { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.marca img { height: 46px; width: auto; }
.nav-sitio { margin-left: auto; }
.nav-sitio ul { display: flex; gap: 1.65rem; list-style: none; margin: 0; padding: 0; }
.nav-sitio a {
  position: relative; text-decoration: none; font-size: var(--paso--1); font-weight: 600;
  letter-spacing: 0.02em; color: var(--tinta); padding-block: 0.4rem; display: block;
}
.nav-sitio a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--bronce); transform: scaleX(0); transform-origin: right;
  transition: transform 0.26s var(--sal-suave);
}
.nav-sitio a:hover::after, .nav-sitio a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.cta-cabecera { flex-shrink: 0; min-height: 44px; padding: 0.6rem 1.3rem; }
.nav-toggle { display: none; }

@media (max-width: 1040px) {
  .nav-sitio { position: fixed; inset: 0 0 0 auto; width: min(360px, 84vw); background: var(--tinta);
    padding: calc(var(--header-h) + 2.5rem) 2rem 2rem; transform: translateX(101%);
    transition: transform 0.42s var(--sal-firme), visibility 0s linear 0.42s; z-index: 70; overflow-y: auto; }
  /* WCAG 2.4.3: cerrado, el menu no debe recibir el foco. visibility lo saca
     del orden de tabulacion; el retardo permite que la animacion termine. */
  .nav-sitio { visibility: hidden; }
  body.menu-abierto .nav-sitio { transform: translateX(0); visibility: visible; transition: transform 0.42s var(--sal-firme), visibility 0s; }
  .nav-sitio ul { flex-direction: column; gap: 0.3rem; }
  .nav-sitio a { color: var(--caliza); font-size: var(--paso-2); font-family: var(--serif); padding-block: 0.55rem; }
  .nav-sitio a::after { display: none; }
  .cta-cabecera { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto;
    width: 48px; height: 48px; padding: 0 10px; background: none; border: 1px solid var(--borde-ui);
    border-radius: 2px; cursor: pointer; z-index: 80; position: relative;
  }
  .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--tinta); transition: transform 0.3s var(--sal-firme), opacity 0.2s; }
  body.menu-abierto .nav-toggle { border-color: rgba(245, 241, 232, 0.4); }
  body.menu-abierto .nav-toggle span { background: var(--caliza); }
  body.menu-abierto .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-abierto .nav-toggle span:nth-child(2) { opacity: 0; }
  body.menu-abierto .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --- Barra de progreso --------------------------------------------------- */
.progreso { position: fixed; top: 0; left: 0; height: 3px; background: var(--bronce); width: 0; z-index: 90; transition: width 0.1s linear; }

/* --- Héroe --------------------------------------------------------------- */
/* Altura del heroe: la cabecera es `sticky`, o sea que YA ocupa sitio en el
   flujo. El padding-top de var(--header-h) que habia aqui la contaba dos veces
   y empujaba 78 px el H1. Ademas el alto pasa de 100svh a <=72vh en escritorio
   y a contenido en el movil: el trabajo de la primera pantalla es enganchar
   (NN/g «Scrolling and Attention», 57 % del tiempo en la 1.a pantalla), no
   llenar la pantalla de foto. */
.heroe {
  position: relative; min-height: min(72vh, 760px); display: flex; align-items: flex-end;
  padding-top: clamp(2rem, 4vw, 3.4rem); padding-bottom: clamp(2rem, 5vw, 4rem);
  overflow: hidden; background: var(--tinta); isolation: isolate;
}
.heroe-fondo { position: absolute; inset: -8% 0 0; z-index: -2; }
.heroe-fondo img { width: 100%; height: 116%; object-fit: cover; object-position: center 42%; }
.heroe.animar .heroe-fondo img { animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.11) translateY(-1.5%); } }
.heroe::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(102deg, rgba(20, 35, 28, 0.94) 0%, rgba(20, 35, 28, 0.78) 38%, rgba(20, 35, 28, 0.24) 68%, rgba(20, 35, 28, 0.42) 100%),
    linear-gradient(to top, rgba(20, 35, 28, 0.72), transparent 42%);
}
.heroe-int { position: relative; width: 100%; color: var(--caliza); }
.heroe-sello {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.6rem;
  padding: 0.4rem 0.95rem 0.4rem 0.4rem; border: 1px solid rgba(217, 166, 92, 0.5);
  border-radius: 100px; font-size: var(--paso--2); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--bronce-claro); font-weight: 600;
}
.heroe-sello svg { width: 26px; height: 26px; flex-shrink: 0; }
.heroe h1 { font-size: var(--paso-6); color: var(--blanco); max-width: 15ch; margin-bottom: 0.45em; font-variation-settings: 'SOFT' 20, 'WONK' 1, 'opsz' 144; }
.heroe h1 em { font-style: normal; color: var(--bronce-claro); }
.heroe-sub { font-size: var(--paso-1); color: rgba(245, 241, 232, 0.86); max-width: 54ch; margin-bottom: 2rem; }
.heroe .acciones { margin-bottom: 2.4rem; }
.heroe-confianza {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; list-style: none; margin: 0 0 2.6rem; padding: 0;
  font-size: var(--paso--1); color: rgba(245, 241, 232, 0.8);
}
.heroe-confianza li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.heroe-confianza li::before { content: ''; width: 6px; height: 6px; background: var(--bronce); transform: rotate(45deg); flex-shrink: 0; }

/* Selector de origen */
.selector-origen { border-top: 1px solid rgba(245, 241, 232, 0.2); padding-top: 1.5rem; }
.selector-origen p {
  font-size: var(--paso--2); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 241, 232, 0.62); margin-bottom: 0.9rem; font-weight: 600;
}
.origenes { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; margin: 0; padding: 0; }
.origenes li { margin: 0; }
.origenes a {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.62rem 1.15rem;
  background: rgba(245, 241, 232, 0.1); border: 1px solid rgba(245, 241, 232, 0.45);
  backdrop-filter: blur(6px); border-radius: 100px; text-decoration: none;
  font-size: var(--paso--1); font-weight: 600; color: var(--caliza);
  transition: background 0.24s var(--ent-corta), border-color 0.24s, transform 0.24s var(--ent-corta);
}
.origenes a::after { content: '→'; color: var(--bronce-claro); transition: transform 0.24s var(--sal-suave); }
.origenes a:hover { background: var(--bronce); border-color: var(--bronce); color: var(--blanco); transform: translateY(-3px); }
.origenes a:hover::after { color: var(--blanco); transform: translateX(4px); }

.heroe-scroll {
  position: absolute; right: var(--canal); bottom: 2.4rem; display: flex; flex-direction: column;
  align-items: center; gap: 0.6rem; font-size: var(--paso--2); letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(245, 241, 232, 0.5); writing-mode: vertical-rl;
}
.heroe-scroll::after { content: ''; width: 1px; height: 54px; background: linear-gradient(var(--bronce-claro), transparent); animation: latido 2.4s var(--ent-corta) infinite; }
@keyframes latido { 0%, 100% { opacity: 0.35; transform: scaleY(0.72); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 900px) { .heroe-scroll { display: none; } }

/* Héroe corto para páginas interiores */
.heroe-pagina {
  position: relative; padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.2rem, 5vw, 4rem); background: var(--tinta); color: var(--caliza); overflow: hidden;
}
.heroe-pagina .heroe-fondo img { height: 112%; object-position: center 45%; }
.heroe-pagina::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20, 35, 28, 0.93) 0%, rgba(20, 35, 28, 0.74) 46%, rgba(20, 35, 28, 0.36) 100%);
}
.heroe-pagina .container { position: relative; }
.heroe-pagina h1 { color: var(--blanco); max-width: 20ch; }
.heroe-pagina .entradilla { color: rgba(245, 241, 232, 0.82); }

/* --- Miga de pan --------------------------------------------------------- */
.miga { font-size: var(--paso--2); letter-spacing: 0.06em; margin-bottom: 1.4rem; color: rgba(245, 241, 232, 0.6); }
.miga ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.miga li { margin: 0; display: flex; gap: 0.5rem; align-items: center; }
.miga li + li::before { content: '/'; color: var(--bronce); }
.miga a { text-decoration: none; }
.miga a:hover { color: var(--bronce-claro); }

/* --- El hito kilométrico (miliarium) ------------------------------------- */
.hitos { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0 0 1.8rem; padding: 0; }
.hitos li { margin: 0; }
.hito {
  display: inline-flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 1.1rem;
  border: 1px solid rgba(180, 118, 47, 0.42); border-left: 3px solid var(--bronce);
  background: rgba(180, 118, 47, 0.07); border-radius: 0 var(--radio) var(--radio) 0;
}
.hito-clave { font-size: var(--paso--2); letter-spacing: 0.13em; text-transform: uppercase; color: var(--bronce-txt); font-weight: 700; }
.hito-valor { font-size: var(--paso-0); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.banda-tinta .hito, .heroe-pagina .hito { background: rgba(217, 166, 92, 0.1); border-color: rgba(217, 166, 92, 0.4); }
.banda-tinta .hito-clave, .heroe-pagina .hito-clave { color: var(--bronce-claro); }
.banda-tinta .hito-valor, .heroe-pagina .hito-valor { color: var(--blanco); }

/* --- Cifras -------------------------------------------------------------- */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; border-top: 1px solid var(--caliza-3); }
.cifra { padding: 2.4rem clamp(1rem, 3vw, 2.4rem); border-right: 1px solid var(--caliza-3); }
.cifra:last-child { border-right: 0; }
.cifra-n { font-family: var(--serif); font-size: var(--paso-5); line-height: 1; color: var(--bronce); font-variant-numeric: tabular-nums; display: block; margin-bottom: 0.35rem; }
.cifra-t { font-family: var(--sans); font-size: var(--paso--1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; display: block; }
.cifra p { color: var(--suave); font-size: var(--paso--1); margin: 0; }
@media (max-width: 700px) { .cifra { border-right: 0; border-bottom: 1px solid var(--caliza-3); } .cifra:last-child { border-bottom: 0; } }

/* --- Tablón de salidas (lista de excursiones) ---------------------------- */
.tablon { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--caliza-3); }
.tablon li { margin: 0; }
.fila {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto auto;
  align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.2rem) 0.6rem; border-bottom: 1px solid var(--caliza-3);
  text-decoration: none; transition: background 0.28s var(--ent-corta), padding-inline 0.28s var(--ent-corta);
}
.fila:hover { background: var(--laurel-pale); padding-inline: 1.4rem 1rem; }
.fila-nombre { font-family: var(--serif); font-size: var(--paso-3); line-height: 1.08; margin: 0; }
.fila-nota { display: block; font-family: var(--sans); font-size: var(--paso--1); font-weight: 500; color: var(--suave); letter-spacing: 0; margin-top: 0.35rem; }
.fila-dato { font-size: var(--paso--1); color: var(--suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila-dato b { display: block; color: var(--tinta); font-size: var(--paso-0); font-weight: 700; }
.fila-precio { text-align: right; white-space: nowrap; }
.fila-precio span { display: block; font-size: var(--paso--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); }
.fila-precio b { font-family: var(--serif); font-size: var(--paso-2); color: var(--bronce-txt); font-weight: 700; }
.fila-flecha { width: 42px; height: 42px; border: 1px solid var(--borde-ui); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; transition: background 0.26s, border-color 0.26s, transform 0.26s var(--sal-suave); }
.fila:hover .fila-flecha { background: var(--bronce); border-color: var(--bronce); transform: translateX(6px); }
.fila:hover .fila-flecha svg { stroke: var(--blanco); }
@media (max-width: 860px) {
  .fila { grid-template-columns: 1fr auto; gap: 0.8rem 1.2rem; }
  .fila-nombre { grid-column: 1 / -1; }
  .fila-flecha { display: none; }
  .fila:hover { padding-inline: 0.6rem; }
}

/* Miniatura que sigue al cursor */
.miniatura {
  position: fixed; top: 0; left: 0; width: 230px; height: 160px; z-index: 40;
  pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.94);
  transition: opacity 0.25s var(--ent-corta), transform 0.25s var(--sal-suave);
  border-radius: var(--radio-esq) var(--radio) var(--radio) var(--radio); overflow: hidden;
  box-shadow: var(--sombra-2);
}
.miniatura.visible { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px), (pointer: coarse) { .miniatura { display: none; } }

/* --- Línea de ruta ------------------------------------------------------- */

/* --- Pasos (cómo trabajamos) --------------------------------------------- */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 3rem; position: relative; }
.pasos::before { content: ''; position: absolute; top: 21px; left: 6%; right: 6%; height: 1px; background: repeating-linear-gradient(90deg, rgba(217,166,92,0.5) 0 8px, transparent 8px 16px); }
.paso { padding-right: 1.6rem; position: relative; }
.paso-n {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: var(--tinta); border: 1px solid rgba(217, 166, 92, 0.45); color: var(--bronce-claro);
  font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 1.2rem; position: relative; z-index: 1;
  transition: background 0.4s var(--ent-corta), color 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.paso.visible .paso-n, html:not(.js-anim) .paso .paso-n { background: var(--bronce); color: var(--tinta); border-color: var(--bronce); box-shadow: 0 0 0 6px rgba(180, 118, 47, 0.18); }
.paso h3 { font-size: var(--paso-1); color: var(--blanco); margin-bottom: 0.5rem; }
.paso p { color: rgba(245, 241, 232, 0.72); font-size: var(--paso--1); margin: 0; }
@media (max-width: 860px) { .pasos { grid-template-columns: 1fr; gap: 2rem; } .pasos::before { display: none; } .paso { padding-right: 0; } }

/* --- Mosaico de destinos ------------------------------------------------- */
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); gap: 14px; }
.mos { position: relative; overflow: hidden; text-decoration: none; color: var(--blanco); display: block;
  border-radius: var(--radio-esq) var(--radio) var(--radio) var(--radio); background: var(--tinta); }
.mos:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mos:nth-child(4) { grid-column: span 2; }
.mos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--sal-suave); }
.mos::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 35, 28, 0.86) 0%, rgba(20, 35, 28, 0.34) 45%, rgba(20, 35, 28, 0.12) 100%); transition: opacity 0.45s; }
.mos:hover img { transform: scale(1.06); }
.mos:hover::after { opacity: 0.72; }
.mos-txt { position: absolute; left: 0; bottom: 0; padding: 1.4rem; z-index: 1; transition: transform 0.4s var(--sal-suave); }
.mos:hover .mos-txt { transform: translateY(-6px); }
.mos-txt h3 { font-size: var(--paso-1); margin: 0 0 0.2rem; color: var(--blanco); }
.mos:nth-child(1) .mos-txt h3 { font-size: var(--paso-3); }
.mos-txt span { font-size: var(--paso--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronce-claro); }
@media (max-width: 860px) {
  .mosaico { grid-template-columns: repeat(2, 1fr); }
  .mos:nth-child(1) { grid-column: span 2; }
  .mos:nth-child(4) { grid-column: span 2; }
}

/* --- Cita ---------------------------------------------------------------- */
.cita { position: relative; text-align: center; max-width: 900px; margin-inline: auto; padding-top: 2rem; }
.cita::before {
  content: '\201C'; position: absolute; top: -0.28em; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: clamp(9rem, 22vw, 16rem); line-height: 1; color: var(--bronce); opacity: 0.16; pointer-events: none;
}
.cita blockquote { position: relative; margin: 0; font-family: var(--serif); font-size: var(--paso-3); line-height: 1.28; letter-spacing: -0.02em; }
.cita figcaption { margin-top: 1.6rem; font-size: var(--paso--1); color: var(--suave); letter-spacing: 0.04em; }
.cita figcaption b { color: var(--tinta); font-weight: 700; }
.cita-estrellas { color: var(--bronce-txt); letter-spacing: 0.2em; display: block; margin-bottom: 0.8rem; }

/* --- Reseña verificada (pre-pie) ----------------------------------------- */
.resena-ta { background: var(--caliza-2); padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.resena-caja { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: start; max-width: 900px; margin-inline: auto; }
.resena-badge {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem;
  background: #00843d; color: #fff; border-radius: 100px; font-size: var(--paso--2);
  font-weight: 700; letter-spacing: 0.06em; white-space: nowrap;
}
.resena-caja p { margin: 0 0 0.7rem; font-size: var(--paso-0); }
.resena-caja cite { font-style: normal; font-size: var(--paso--1); color: var(--suave); }
@media (max-width: 640px) { .resena-caja { grid-template-columns: 1fr; } }

/* --- Navieras ------------------------------------------------------------ */
.navieras { text-align: center; }
.navieras img { margin-inline: auto; filter: grayscale(1) contrast(0.92); opacity: 0.78; transition: filter 0.5s, opacity 0.5s; border-radius: var(--radio); }
.navieras:hover img { filter: grayscale(0); opacity: 1; }
.navieras-garantia { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem; font-size: var(--paso--1); font-weight: 600; color: var(--laurel); }
.navieras-garantia::before { content: ''; width: 8px; height: 8px; background: var(--bronce); transform: rotate(45deg); }
.banda-tinta .navieras-garantia { color: var(--bronce-claro); }
.tarjeta-navieras { border: 1px solid var(--caliza-3); padding: 1.1rem; background: var(--blanco); border-radius: var(--radio-esq) var(--radio) var(--radio) var(--radio); }
.tarjeta-navieras p { font-size: var(--paso--2); color: var(--suave); margin: 0.8rem 0 0; line-height: 1.5; }

/* --- Índice tipo revista (guía) ------------------------------------------ */
.revista { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .revista { grid-template-columns: 1fr; } }
.destacado { text-decoration: none; display: block; color: inherit; }
.destacado-img { overflow: hidden; border-radius: var(--radio-esq) var(--radio) var(--radio) var(--radio); margin-bottom: 1.4rem; aspect-ratio: 16 / 9; }
.destacado-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--sal-suave); }
.destacado:hover img { transform: scale(1.05); }
.destacado h3 { font-size: var(--paso-3); margin-bottom: 0.5rem; }
.destacado:hover h3 { color: var(--laurel); }
.destacado p { color: var(--suave); margin-bottom: 0.9rem; }

.indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--caliza-3); }
.indice li { margin: 0; }
.indice a { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline; padding: 1.05rem 0.2rem; border-bottom: 1px solid var(--caliza-3); text-decoration: none; transition: padding-left 0.26s var(--ent-corta); }
.indice a:hover { padding-left: 0.8rem; }
.indice-n { font-family: var(--serif); font-size: var(--paso-0); color: var(--caliza-3); font-variant-numeric: tabular-nums; transition: color 0.26s; }
.indice a:hover .indice-n { color: var(--bronce-txt); }
.indice-t { font-weight: 600; font-size: var(--paso-0); line-height: 1.35;
  background-image: linear-gradient(var(--laurel), var(--laurel)); background-size: 0 1px;
  background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.3s var(--sal-suave); padding-bottom: 2px; }
.indice a:hover .indice-t { background-size: 100% 1px; }

/* --- Tarjetas ------------------------------------------------------------ */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: clamp(1.2rem, 2.6vw, 2rem); }
.tarjeta {
  position: relative; display: flex; flex-direction: column; background: var(--blanco);
  border: 1px solid var(--caliza-3); border-radius: var(--radio-esq) var(--radio) var(--radio) var(--radio);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.32s var(--sal-suave), box-shadow 0.32s var(--sal-suave), border-color 0.32s;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: var(--laurel-claro); }
.tarjeta-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--caliza-2); }
.tarjeta-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--sal-suave); }
.tarjeta:hover .tarjeta-img img { transform: scale(1.05); }
.tarjeta-cuerpo { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta h3 { font-size: var(--paso-1); margin-bottom: 0.5rem; }
.tarjeta p { color: var(--suave); font-size: var(--paso--1); margin-bottom: 1rem; }
.tarjeta-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--caliza-2); }
.tarjeta-precio { font-family: var(--serif); color: var(--bronce-txt); font-size: var(--paso-1); font-weight: 600; }
.tarjeta-precio span { font-family: var(--sans); font-size: var(--paso--2); color: var(--suave); letter-spacing: 0.08em; text-transform: uppercase; display: block; }

/* --- Tabla de hechos ----------------------------------------------------- */
.tabla-envoltura { overflow-x: auto; margin-bottom: 2rem; border: 1px solid var(--caliza-3); border-radius: var(--radio-esq) var(--radio) var(--radio) var(--radio); background: var(--blanco); }
table.hechos { width: 100%; border-collapse: collapse; font-size: var(--paso--1); }
table.hechos th, table.hechos td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--caliza-2); vertical-align: top; }
table.hechos tr:last-child th, table.hechos tr:last-child td { border-bottom: 0; }
table.hechos th { font-weight: 700; color: var(--laurel); white-space: nowrap; width: 1%; background: rgba(47, 93, 72, 0.04); }
table.hechos td { font-variant-numeric: tabular-nums; }

/* --- Itinerario ---------------------------------------------------------- */
.itinerario { list-style: none; margin: 0 0 2rem; padding: 0; position: relative; }
.itinerario::before { content: ''; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 1px; background: repeating-linear-gradient(var(--caliza-3) 0 6px, transparent 6px 12px); }
.itinerario li { position: relative; padding-left: 3.1rem; margin-bottom: 1.5rem; }
.itinerario li::before { content: ''; position: absolute; left: 9px; top: 8px; width: 13px; height: 13px; background: var(--caliza); border: 2px solid var(--bronce); border-radius: 50%; }
.itinerario h4 { font-family: var(--sans); font-size: var(--paso-0); font-weight: 700; margin: 0 0 0.25rem; letter-spacing: 0; }
.itinerario p { margin: 0; color: var(--suave); font-size: var(--paso--1); }
.itinerario .hora { font-size: var(--paso--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bronce-txt); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Incluye / no incluye ------------------------------------------------ */
.doble-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); margin-bottom: 2rem; }
.lista-marcada { list-style: none; margin: 0; padding: 0; }
.lista-marcada li { position: relative; padding-left: 1.7rem; margin-bottom: 0.55rem; font-size: var(--paso--1); }
.lista-marcada li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.lista-si li::before { content: '✓'; color: var(--laurel); }
.lista-no li::before { content: '×'; color: #a8443a; font-size: 1.2em; line-height: 1.2; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--caliza-3); }
.faq details { border-bottom: 1px solid var(--caliza-3); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.2rem 2.6rem 1.2rem 0; position: relative;
  font-family: var(--serif); font-size: var(--paso-1); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 0.35rem; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid var(--bronce); border-bottom: 2px solid var(--bronce);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--sal-suave);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--laurel); }
.faq-cuerpo { padding: 0 2.6rem 1.4rem 0; color: var(--suave); }
.faq-cuerpo p:last-child { margin-bottom: 0; }

/* --- Fuentes / enlaces salientes ----------------------------------------- */
.fuentes { margin-top: 3rem; padding: 1.5rem 1.7rem; background: var(--caliza-2); border-left: 3px solid var(--laurel); border-radius: 0 var(--radio) var(--radio) 0; }
.fuentes h3 { font-family: var(--sans); font-size: var(--paso--1); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.7rem; color: var(--laurel); }
.fuentes ul { margin: 0; padding-left: 1.1rem; font-size: var(--paso--1); }
.fuentes li { margin-bottom: 0.35rem; color: var(--suave); }

/* --- Barra pegajosa de origen -------------------------------------------- */
/* Barra de puntos de salida: OCULTA al cargar, entra al bajar.
   Ojo: va fija a top:var(--header-h), asi que un translateY en % nunca la saca
   del viewport — asomaba por encima de la barra superior. Se oculta ademas con
   visibility y opacity, que no dependen de su altura. */
.barra-origen {
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 50; background: var(--tinta);
  color: var(--caliza); border-bottom: 1px solid rgba(217, 166, 92, 0.28);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.42s var(--sal-firme), opacity 0.28s var(--ent-corta), visibility 0s linear 0.42s;
}
.barra-origen.visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.42s var(--sal-firme), opacity 0.28s var(--ent-corta), visibility 0s;
}
.barra-origen-int { display: flex; align-items: center; gap: 1rem; min-height: 52px; overflow-x: auto; scrollbar-width: none; }
.barra-origen-int::-webkit-scrollbar { display: none; }
.barra-origen p { margin: 0; font-size: var(--paso--2); letter-spacing: 0.13em; text-transform: uppercase; color: rgba(245, 241, 232, 0.55); white-space: nowrap; font-weight: 600; }
.barra-origen ul { display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.barra-origen li { margin: 0; }
.barra-origen a { display: block; padding: 0.5rem 0.95rem; border: 1px solid rgba(245, 241, 232, 0.45); border-radius: 100px; font-size: var(--paso--2); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.22s, border-color 0.22s; }
.barra-origen a:hover { background: var(--bronce); border-color: var(--bronce); }
@media (max-width: 700px) { .barra-origen p { display: none; } }

/* --- Formulario ---------------------------------------------------------- */
.formulario { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: 0.4rem; }
.campo label { font-size: var(--paso--1); font-weight: 700; letter-spacing: 0.03em; }
.campo small { font-size: var(--paso--2); color: var(--suave); font-weight: 400; }
.campo input, .campo textarea, .campo select {
  font: inherit; font-size: var(--paso-0); padding: 0.85rem 1rem; background: var(--blanco);
  /* WCAG 1.4.11: el borde es lo unico que delimita el campo, asi que necesita
     3:1 contra el fondo. El --caliza-3 anterior daba 1,44:1. */
  border: 1px solid var(--borde-ui); border-radius: var(--radio); color: var(--texto); width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible {
  outline: 3px solid var(--bronce-btn); outline-offset: 2px; border-color: var(--laurel);
}
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--laurel); box-shadow: 0 0 0 3px rgba(47, 93, 72, 0.22); }
.campo textarea { min-height: 140px; resize: vertical; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .campo-fila { grid-template-columns: 1fr; } }
.formulario-nota { font-size: var(--paso--2); color: var(--suave); }
.banda-tinta .campo label { color: var(--caliza); }
.banda-tinta .formulario-nota { color: rgba(245, 241, 232, 0.6); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.conversion { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .conversion { grid-template-columns: 1fr; } }
.razones { list-style: none; margin: 2rem 0 0; padding: 0; }
.razones li { position: relative; padding-left: 2.2rem; margin-bottom: 1.3rem; }
.razones li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--bronce); transform: rotate(45deg); }
.razones b { display: block; color: var(--blanco); font-size: var(--paso-0); }
.razones span { color: rgba(245, 241, 232, 0.7); font-size: var(--paso--1); }

/* --- Barra lateral ------------------------------------------------------- */
.con-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 980px) { .con-lateral { grid-template-columns: 1fr; } }
.lateral { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.4rem; }
.tarjeta-lateral { border: 1px solid var(--caliza-3); background: var(--blanco); padding: 1.5rem; border-radius: var(--radio-esq) var(--radio) var(--radio) var(--radio); }
.tarjeta-lateral h3 { font-size: var(--paso-1); margin-bottom: 0.8rem; }
.tarjeta-lateral p { font-size: var(--paso--1); color: var(--suave); }
.tarjeta-lateral ul { list-style: none; margin: 0; padding: 0; font-size: var(--paso--1); }
.tarjeta-lateral li { border-bottom: 1px solid var(--caliza-2); margin: 0; }
.tarjeta-lateral li:last-child { border-bottom: 0; }
.tarjeta-lateral li a { display: block; padding: 0.62rem 0; text-decoration: none; font-weight: 600; transition: color 0.2s, padding-left 0.24s var(--ent-corta); }
.tarjeta-lateral li a:hover { color: var(--laurel); padding-left: 0.4rem; }

/* --- Blog ---------------------------------------------------------------- */
.blog-lista { display: grid; gap: clamp(2rem, 4vw, 3.4rem); }
.blog-pieza { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); text-decoration: none; color: inherit; align-items: start; }
.blog-fecha { font-size: var(--paso--2); letter-spacing: 0.13em; text-transform: uppercase; color: var(--bronce-txt); font-weight: 700; padding-top: 0.3rem; border-top: 2px solid var(--bronce); }
.blog-pieza h3 { font-size: var(--paso-3); margin-bottom: 0.6rem; }
.blog-pieza:hover h3 { color: var(--laurel); }
.blog-pieza p { color: var(--suave); margin-bottom: 0.8rem; }
.blog-pieza-img { overflow: hidden; border-radius: var(--radio-esq) var(--radio) var(--radio) var(--radio); margin-bottom: 1.2rem; aspect-ratio: 21 / 9; }
.blog-pieza-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--sal-suave); }
.blog-pieza:hover .blog-pieza-img img { transform: scale(1.04); }
@media (max-width: 700px) { .blog-pieza { grid-template-columns: 1fr; gap: 0.9rem; } .blog-fecha { display: inline-block; } }
.meta-post { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: var(--paso--1); color: rgba(245, 241, 232, 0.72); margin-bottom: 1.2rem; }
.meta-post span { display: flex; align-items: center; gap: 0.45rem; }

/* --- Nota de red / pie --------------------------------------------------- */
.pie { background: var(--tinta); color: rgba(245, 241, 232, 0.74); padding-top: clamp(3.5rem, 7vw, 5.5rem); font-size: var(--paso--1); }
.pie a { color: inherit; text-decoration: none; }
.pie a:hover { color: var(--bronce-claro); }
.pie-rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); padding-bottom: 3rem; }
@media (max-width: 900px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie-rejilla { grid-template-columns: 1fr; } }
.pie h3 { font-family: var(--sans); font-size: var(--paso--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronce-claro); margin-bottom: 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 0.55rem; }
.pie-marca { font-family: var(--serif); font-size: var(--paso-2); color: var(--blanco); margin-bottom: 0.8rem; line-height: 1.1; }
.pie-marca em { font-style: normal; color: var(--bronce-claro); }
.pie-legal { border-top: 1px solid rgba(245, 241, 232, 0.13); padding-block: 2rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.8rem; align-items: start; font-size: var(--paso--2); line-height: 1.7; }
.pie-legal img { width: 92px; opacity: 0.9; }
.pie-legal p { margin: 0 0 0.3rem; }
@media (max-width: 640px) { .pie-legal { grid-template-columns: 1fr; } }
.red-nota { border-top: 1px solid rgba(245, 241, 232, 0.13); padding-block: 2.8rem; }
.red-cabecera { max-width: 74ch; margin-bottom: 2rem; }
.red-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--paso--2); letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--bronce-claro); margin-bottom: 0.8rem; }
.red-lema { font-family: var(--serif); font-size: var(--paso-2); line-height: 1.15; color: var(--blanco); margin-bottom: 0.7rem; letter-spacing: -0.02em; }
.red-historia { font-size: var(--paso--1); line-height: 1.7; margin-bottom: 0.9rem; color: rgba(245, 241, 232, 0.72); }
.red-mas { margin: 0; font-size: var(--paso--2); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.red-mas a { color: var(--bronce-claro); }

/* Rejilla de webs hermanas */
.red-sitios { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1px; margin: 0; padding: 0; background: rgba(245, 241, 232, 0.12); border: 1px solid rgba(245, 241, 232, 0.12); }
.red-sitios li { margin: 0; background: var(--tinta); }
.red-sitios a {
  display: flex; flex-direction: column; gap: 0.3rem; height: 100%;
  padding: 1.05rem 1.15rem; text-decoration: none;
  transition: background 0.26s var(--ent-corta), transform 0.26s var(--ent-corta);
}
.red-sitios a:hover { background: rgba(180, 118, 47, 0.14); }
.red-sitio-nombre { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: var(--paso--1); color: var(--blanco); line-height: 1.25; }
.red-sitios a:hover .red-sitio-nombre { color: var(--bronce-claro); }
.red-idioma { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; padding: 0.1rem 0.34rem; border: 1px solid rgba(217, 166, 92, 0.5); border-radius: 2px; color: var(--bronce-claro); }
.red-sitio-txt { font-size: var(--paso--2); line-height: 1.5; color: rgba(245, 241, 232, 0.66); }
.red-sitio-dom { margin-top: auto; padding-top: 0.45rem; font-size: 0.7rem; letter-spacing: 0.05em; color: rgba(245, 241, 232, 0.62); }
.red-sitios a:hover .red-sitio-dom { color: var(--bronce-claro); }
.pie-fin { border-top: 1px solid rgba(245, 241, 232, 0.13); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: var(--paso--2); }
.arriba { display: inline-flex; align-items: center; gap: 0.45rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }

/* --- Animaciones de scroll -----------------------------------------------
   Todo el estado inicial oculto vive bajo `.js-anim`, una clase que el propio
   script pone en <html> antes de pintar. Sin JavaScript —o si el script falla—
   el contenido se ve tal cual, en su estado final. */
.js-anim .rev { opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--sal-suave), transform 0.6s var(--sal-suave); }
.js-anim .rev.visible { opacity: 1; transform: none; }
.rl { display: block; overflow: hidden; }
.js-anim .rl-i { display: block; transform: translateY(102%); transition: transform 0.75s var(--sal-firme); }
.js-anim .cargado .rl-i, .js-anim .visible .rl-i, .cargado .rl-i { transform: none; }

/* Telón de carga — sin JS no debe existir, o taparía la página para siempre. */
html:not(.js-anim) .telon { display: none; }
.telon { position: fixed; inset: 0; z-index: 200; background: var(--caliza); display: grid; place-items: center; transition: transform 0.8s var(--sal-firme) 0.15s; }
.telon.fuera { transform: translateY(-101%); }
.telon svg { width: 92px; height: 92px; }
.telon path, .telon circle, .telon ellipse, .telon line { stroke-dasharray: 260; stroke-dashoffset: 260; animation: dibujar 0.75s var(--ent-corta) forwards; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }

/* --- Utilidades ---------------------------------------------------------- */
.centrado { text-align: center; }
.cabecera-seccion { max-width: 760px; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.cabecera-seccion.centrado { margin-inline: auto; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ilink { color: var(--laurel); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(180, 118, 47, 0.5); text-underline-offset: 3px; }
.ilink:hover { color: var(--bronce); }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 1rem; top: 1rem; z-index: 300; background: var(--bronce-btn); color: #fff; padding: 0.7rem 1.2rem; }

/* --- Movimiento reducido ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .rev { opacity: 1; transform: none; }
  .rl-i { transform: none; }
  .telon { display: none; }
  .heroe.animar .heroe-fondo img { animation: none; }
}

/* --- Google Translate: ocultar su interfaz ------------------------------- */
#google_translate_element, .skiptranslate, .goog-te-banner-frame, .goog-te-gadget { display: none !important; }
body { top: 0 !important; }
font[style] { background: none !important; box-shadow: none !important; }

/* --- Acceso prioritario (pase rápido) ------------------------------------ */
.acceso {
  margin: 3.2rem 0;
  padding: clamp(1.5rem, 3.4vw, 2.4rem);
  background: linear-gradient(160deg, var(--tinta) 0%, #1b2f26 100%);
  color: var(--caliza);
  border-radius: var(--radio-esq) var(--radio) var(--radio-esq) var(--radio);
  position: relative;
  overflow: hidden;
}
.acceso::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 88% 8%, rgba(217, 166, 92, 0.22), transparent 58%);
}
.acceso > * { position: relative; z-index: 1; }
.acceso-sello {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: var(--paso--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronce-claro);
  margin-bottom: 0.85rem;
}
.acceso h2 {
  font-size: var(--paso-2); line-height: 1.12; color: var(--blanco);
  margin: 0 0 1.1rem; max-width: 26ch; letter-spacing: -0.015em;
}
.acceso-cuerpo p { font-size: var(--paso-0); line-height: 1.72; color: rgba(245, 241, 232, 0.82); margin: 0 0 0.9rem; max-width: 62ch; }
.acceso-cuerpo strong { color: var(--blanco); }
.acceso-cuerpo em { font-style: normal; color: var(--bronce-claro); font-weight: 600; }
.acceso-puntos {
  list-style: none; margin: 1.7rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px;
  background: rgba(245, 241, 232, 0.14);
  border: 1px solid rgba(245, 241, 232, 0.14);
}
.acceso-puntos li { margin: 0; padding: 1.05rem 1.15rem; background: #16261f; }
.acceso-puntos b { display: block; font-family: var(--sans); font-size: var(--paso--1); color: var(--blanco); margin-bottom: 0.35rem; }
.acceso-puntos span { display: block; font-size: var(--paso--2); line-height: 1.62; color: rgba(245, 241, 232, 0.66); }
.acceso-pie { margin: 1.4rem 0 0; font-size: var(--paso--1); color: rgba(245, 241, 232, 0.66); }
.acceso-pie a { color: var(--bronce-claro); text-decoration: underline; text-underline-offset: 3px; }
.acceso-pie a:hover { color: var(--blanco); }
@media (max-width: 560px) { .acceso h2 { font-size: var(--paso-1); } }

/* --- Banners de acceso prioritario --------------------------------------- */
/* Se maquetan como CONTENIDO, no como anuncio: mismo radio de tarjeta, misma
   paleta y pie de foto en la tipografia del sitio. Un recuadro suelto de
   colores ajenos activaria la ceguera a los banners (Benway 1998, NN/g 2018).
   No llevan enlace: informan, y el CTA de la pagina sigue siendo el unico. */
.banner-acceso { margin: 0; }
.banner-acceso img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radio-esq) var(--radio) var(--radio-esq) var(--radio);
}
.banner-acceso figcaption {
  margin-top: 0.7rem;
  font-size: var(--paso--2);
  line-height: 1.6;
  color: var(--suave);
  padding-left: 0.9rem;
  border-left: 2px solid var(--bronce);
}

/* Ancho: a mitad del articulo. Se separa bien del texto para que se lea como
   una pausa, no como un corte. */
.banner-ancho { margin: 2.6rem 0; }
.prosa .banner-ancho { margin: 3rem 0; }

/* Dentro del panel oscuro cambia el contraste del pie. */
.acceso .banner-ancho { margin: 1.8rem 0 0; }
.acceso .banner-acceso figcaption { color: rgba(245, 241, 232, 0.7); border-left-color: var(--bronce-claro); }

/* Vertical: material de APOYO en el lateral. Nunca la oferta principal, que
   el rascacielos derecho es la posicion mas ignorada de la pagina (NN/g). */
.banner-lateral { border: 1px solid var(--caliza-3); background: var(--blanco); padding: 0.85rem; border-radius: var(--radio-esq) var(--radio) var(--radio) var(--radio); }
.banner-lateral img { border-radius: var(--radio); }
.banner-lateral figcaption { margin-top: 0.75rem; padding-left: 0.8rem; }

/* La promesa de precio dentro del panel: es el argumento de confianza, asi
   que va junto al beneficio y con marca de verificacion (Baymard). */
.acceso-precio {
  display: flex; gap: 0.8rem; align-items: flex-start;
  margin: 1.6rem 0 0; padding: 1.05rem 1.2rem;
  background: rgba(217, 166, 92, 0.12);
  border: 1px solid rgba(217, 166, 92, 0.34);
  border-radius: var(--radio);
  font-size: var(--paso--1); line-height: 1.66;
  color: rgba(245, 241, 232, 0.86);
}
.acceso-precio svg { flex: none; margin-top: 0.15rem; color: var(--bronce-claro); }
.acceso-precio b { color: var(--blanco); }

@media (max-width: 700px) {
  .banner-ancho { margin: 2rem 0; }
  .banner-acceso figcaption { font-size: var(--paso--2); }
}

/* --- Fotografia dentro del articulo -------------------------------------- */
/* Misma gramatica visual que los banners: foto a ancho de columna y pie con
   filete de bronce. Va junto al parrafo que ilustra, nunca de adorno: una
   imagen que explica lo que se acaba de leer se mira; una decorativa se salta
   (NN/g, "Photos as Content"). El pie lleva texto real porque es lo que mas se
   lee de toda la pagina despues del titular. */
.figura-foto { margin: 2.6rem 0; }
.prosa .figura-foto { margin: 3rem 0; }
.figura-foto img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radio-esq) var(--radio) var(--radio-esq) var(--radio);
}
.figura-foto figcaption {
  margin-top: 0.7rem;
  font-size: var(--paso--2);
  line-height: 1.6;
  color: var(--suave);
  padding-left: 0.9rem;
  border-left: 2px solid var(--bronce);
}
@media (max-width: 700px) { .figura-foto { margin: 2rem 0; } }

/* Banda de acceso prioritario de la portada: texto a la izquierda (patron F),
   imagen de refuerzo a la derecha. */
.acceso-dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .acceso-dos { grid-template-columns: 1fr; } }
.acceso-promesa {
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  background: var(--laurel-pale); border-left: 3px solid var(--laurel);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: var(--paso--1); line-height: 1.66;
}
.acceso-promesa b { color: var(--laurel); }

/* ==========================================================================
   RETROFIT «DISENO POR INVESTIGACION» — 2026-08-19
   Cada bloque cita el apartado de feedback-design-by-research que lo ordena.
   ========================================================================== */

/* --- §3/§4 Escala de titulares en el movil -------------------------------
   El H1 llegaba a 48 px con un cuerpo de 16 px (3x). La regla pide 1,8-2,2x
   en movil para que no ocupe cuatro lineas. paso-4 = 34,6 px a 390 px (2,15x)
   y el H2 baja a paso-3 para que la jerarquia siga siendo visible. */
@media (max-width: 640px) {
  h1, .heroe h1 { font-size: var(--paso-4); }
  h2 { font-size: var(--paso-3); }
  .prosa h2 { font-size: var(--paso-2); margin-top: 1.9em; }
  .heroe-pagina h1 { max-width: 100%; }
  .prosa p, .prosa li { line-height: 1.62; }
}

/* --- §1/§2/§11 Primera pantalla del movil --------------------------------
   Objetivo medido: en 390x844 tienen que verse sin desplazar el logo, el H1,
   una linea de prueba y el boton principal. El orden del stack ES la
   jerarquia (una sola columna), asi que la prueba social sube por delante
   del boton y el parrafo largo baja. */
@media (max-width: 700px) {
  .heroe { min-height: auto; padding-top: 1.1rem; padding-bottom: 2rem; }
  .heroe-int { display: flex; flex-direction: column; }
  .heroe .antetitulo { order: 1; margin-bottom: 0.55rem; padding-bottom: 0.4rem; }
  .heroe h1 { order: 2; max-width: 100%; margin-bottom: 0.5rem; }
  .heroe-confianza { order: 3; margin: 0 0 1.1rem; gap: 0.35rem 1rem; font-size: var(--paso--2); }
  .heroe .acciones { order: 4; margin-bottom: 1.2rem; }
  .heroe-sub { order: 5; font-size: var(--paso-0); margin-bottom: 1.2rem; }
  .heroe-sello { order: 6; margin: 0 0 1.2rem; }
  .selector-origen { order: 7; }
  .heroe .acciones .btn { flex: 1 1 100%; }
  /* §13 rendimiento: el zoom Ken Burns del fondo cuesta CPU en el movil y no
     aporta informacion. NN/g: la animacion no gana atencion, la gasta. */
  .heroe.animar .heroe-fondo img { animation: none; }
}

/* --- §8/§11 Barra de accion inferior (movil) -----------------------------
   Contentsquare (58 M sesiones): +31 % de conversion con CTA fija abajo.
   Hoober: la zona comoda del pulgar es el centro-abajo. Ademas hace de
   navegacion visible, porque el menu hamburguesa solo no basta (NN/g).
   No hay telefono ni WhatsApp en los datos de esta web (trabaja por correo),
   asi que las acciones son: hub de excursiones, presupuesto y correo. */
.barra-accion { display: none; }
@media (max-width: 1040px) {
  .barra-accion {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.4rem; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    background: var(--tinta);
    border-top: 1px solid rgba(217, 166, 92, 0.4);
    padding: 0.4rem 0.6rem calc(0.4rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 22px rgba(20, 35, 28, 0.22);
  }
  .barra-accion a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.15rem; min-height: 48px; min-width: 56px; padding: 0.35rem 0.6rem;
    text-decoration: none; color: var(--caliza);
    font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.04em; text-align: center; line-height: 1.15;
    border-radius: var(--radio);
  }
  .barra-accion svg { width: 20px; height: 20px; flex: none; }
  .barra-accion .ba-principal {
    background: var(--bronce-btn); color: var(--blanco);
    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em;
    flex-direction: row; gap: 0.5rem; padding-inline: 0.9rem;
  }
  .barra-accion .ba-principal:hover, .barra-accion .ba-principal:focus-visible { background: var(--bronce); }
  /* El contenido no puede quedar debajo de la barra (ni el pie). */
  body { padding-bottom: 72px; }
  /* Cabecera fija + barra de origenes juntas no deben pasar del 35 % de la
     pantalla (NN/g, cabeceras fijas): 78 + 44 = 122 px sobre 844. */
  .barra-origen-int { min-height: 44px; }
  .barra-accion { transition: transform 0.3s var(--sal-firme); }
}
/* Al abrir el menu la barra estorba. */
body.menu-abierto .barra-accion { transform: translateY(110%); }

/* --- §10 Punto de encuentro con mapa -------------------------------------
   Baymard (tours & experiences): entre el 57 y el 67 % de las webs de tours
   no ensenan el punto de encuentro en un mapa, y es una de las causas
   principales de abandono. Aqui el esquema va dibujado en SVG en linea (cero
   peticiones a terceros, que esta web no hace ninguna) y el enlace abre la
   ubicacion real en Google Maps cuando el usuario lo pide. */
.encuentro {
  margin: 3rem 0;
  border: 1px solid var(--caliza-3);
  background: var(--blanco);
  border-radius: var(--radio-esq) var(--radio) var(--radio-esq) var(--radio);
  overflow: hidden;
}
.encuentro > h2 {
  font-size: var(--paso-2); margin: 0;
  padding: 1.2rem clamp(1.1rem, 3vw, 1.8rem) 0;
}
.encuentro-rejilla {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 3vw, 2rem);
  padding: 1rem clamp(1.1rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 1.6rem);
  align-items: start;
}
@media (max-width: 760px) { .encuentro-rejilla { grid-template-columns: 1fr; } }
.mapa-hito { margin: 0; }
.mapa-hito svg {
  width: 100%; height: auto; display: block;
  background: var(--caliza); border: 1px solid var(--caliza-3); border-radius: var(--radio);
}
.mapa-hito figcaption {
  margin-top: 0.6rem; font-size: var(--paso--2); line-height: 1.55; color: var(--suave);
  padding-left: 0.8rem; border-left: 2px solid var(--bronce);
}
.encuentro-datos p { margin: 0 0 0.85rem; font-size: var(--paso--1); line-height: 1.62; }
.encuentro-datos dl { margin: 0 0 1.1rem; display: grid; gap: 0.55rem; }
.encuentro-datos dt {
  font-size: var(--paso--2); letter-spacing: 0.11em; text-transform: uppercase;
  font-weight: 700; color: var(--laurel);
}
.encuentro-datos dd { margin: 0.1rem 0 0; font-size: var(--paso--1); line-height: 1.55; }
.encuentro-datos .btn { width: 100%; }
.encuentro-nota { color: var(--suave); }

/* --- §11/§12 Plegables (itinerario, que incluye) -------------------------
   NN/g: en el movil los acordeones ayudan, y Google indexa su contenido con
   el mismo peso (mobile-first). Van ABIERTOS de salida, y ni el precio ni el
   punto de encuentro viven dentro de ninguno. */
.plegable { border-top: 1px solid var(--caliza-3); border-bottom: 1px solid var(--caliza-3); margin: 2rem 0; }
.plegable + .plegable { margin-top: -1px; }
.plegable > summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 0.9rem 2.8rem 0.9rem 0; min-height: 48px; display: flex; align-items: center;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary h2, .plegable > summary h3 { margin: 0; font-size: var(--paso-2); }
.plegable > summary::after {
  content: ''; position: absolute; right: 0.5rem; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid var(--bronce); border-bottom: 2px solid var(--bronce);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--sal-suave);
}
.plegable[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.plegable > summary:hover h2, .plegable > summary:hover h3 { color: var(--laurel); }
.plegable-cuerpo > *:last-child { margin-bottom: 1rem; }

/* --- §8 Confianza junto al boton -----------------------------------------
   Baymard: los sellos de confianza levantan la finalizacion cuando estan
   PEGADOS a la accion, no en el pie. */
.form-confianza {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; gap: 0.4rem; font-size: var(--paso--2); line-height: 1.5;
}
.form-confianza li { position: relative; padding-left: 1.5rem; margin: 0; }
.form-confianza li::before {
  content: ''; position: absolute; left: 0.15rem; top: 0.42em;
  width: 8px; height: 8px; background: var(--laurel); transform: rotate(45deg);
}
.banda-tinta .form-confianza { color: rgba(245, 241, 232, 0.86); }
.banda-tinta .form-confianza li::before { background: var(--bronce-claro); }

/* --- §9 Opiniones de terceros --------------------------------------------
   Baymard: el viajero desconfia del testimonio elegido por la casa y quiere
   la ficha de un tercero, enlazada desde la pagina del tour. */
.opiniones-3 {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 1rem 0 0; padding: 0.75rem 0.9rem;
  background: var(--laurel-pale); border-radius: var(--radio);
  font-size: var(--paso--2); line-height: 1.45;
}
.opiniones-3 b { color: var(--laurel); font-size: var(--paso-0); }
.opiniones-3 a { color: var(--laurel); font-weight: 700; }

/* --- §9 Firma de autoria (E-E-A-T) --------------------------------------- */
.ficha-autor {
  display: flex; gap: 0.9rem; align-items: flex-start;
  margin-top: 2.6rem; padding: 1.1rem 1.3rem;
  background: var(--caliza-2); border-left: 3px solid var(--laurel);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: var(--paso--2); line-height: 1.6; color: var(--suave);
}
.ficha-autor svg { flex: none; color: var(--laurel); margin-top: 0.15rem; }
.ficha-autor b { color: var(--tinta); display: block; font-size: var(--paso--1); }
.ficha-autor a { color: var(--laurel); font-weight: 600; }

/* --- §10 Datos de la tarjeta (precio, duracion, opiniones) ---------------
   Cornell/Noone & Robson: al comparar, el viajero fija la mirada en nombre,
   imagen, precio, ubicacion y valoracion. Si falta uno, compara peor. */
.tarjeta-datos {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem;
  margin: 0 0 0.85rem; padding: 0; list-style: none;
  font-size: var(--paso--2); color: var(--suave);
}
.tarjeta-datos li { margin: 0; display: flex; align-items: center; gap: 0.35rem; }
.tarjeta-datos li::before { content: ''; width: 6px; height: 6px; background: var(--bronce); transform: rotate(45deg); flex: none; }

/* --- §11 Objetivos tactiles de 44-48 px ---------------------------------- */
@media (max-width: 900px) {
  .pie li a, .tarjeta-lateral li a { min-height: 44px; display: flex; align-items: center; }
  .faq summary { padding-block: 1.1rem; min-height: 48px; }
  .miga a { padding-block: 0.35rem; display: inline-block; }
  .barra-superior a { padding-block: 0.35rem; display: inline-block; }
}

/* --- §13 Sin desbordamiento lateral en 320-380 px ------------------------ */
@media (max-width: 380px) {
  .hitos { gap: 0.4rem; }
  .hito { padding: 0.5rem 0.8rem; }
  .barra-accion a { font-size: 0.68rem; }
  .barra-accion .ba-principal { font-size: 0.74rem; padding-inline: 0.6rem; }
}

/* --- §11 Cinta superior compacta en el movil ------------------------------
   Con el correo y el separador dentro, la cinta envolvia a dos y tres lineas
   y se comia 100 px (12 % de la pantalla) antes del logo. El correo sigue en
   la barra de accion inferior, en el pie y en /contacto/. */
@media (max-width: 700px) {
  .barra-superior-int { flex-wrap: nowrap; gap: 0.5rem; min-height: 34px; }
  .barra-superior-int > a[href^="mailto"], .barra-sep { display: none; }
  .barra-superior-int > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* El sello TURSAB del heroe repite lo que dice la cinta y la lista de
     confianza; en el movil ocupa 60 px de la primera pantalla. */
  .heroe-sello { display: none; }
  .heroe-sub { margin-bottom: 1rem; }
  .selector-origen { padding-top: 1.1rem; }
}

/* --- §4 Contraste del antetitulo sobre el heroe --------------------------
   FALLO REAL detectado en la captura del movil: `.antetitulo` es laurel
   (#2F5D48) y en el heroe cae sobre foto oscura, donde es casi ilegible.
   `.banda-tinta` ya lo corregia; el heroe no estaba cubierto.
   Bronce claro sobre tinta = 7,43:1. */
.heroe .antetitulo, .heroe-pagina .antetitulo { color: var(--bronce-claro); }
/* Y que no comparta linea con el sello TURSAB, que se solapaban. */
.heroe .antetitulo { display: block; width: fit-content; }

/* Enlaces internos automaticos sobre fondo oscuro: el laurel no contrasta. */
.banda-tinta .ilink, .heroe .ilink, .heroe-pagina .ilink, .acceso .ilink {
  color: var(--bronce-claro); text-decoration-color: rgba(217, 166, 92, 0.65);
}
.banda-tinta .ilink:hover, .heroe .ilink:hover, .acceso .ilink:hover { color: var(--blanco); }

/* Cinta superior: que el numero de licencia quepa entero en 390 px. */
@media (max-width: 700px) {
  .barra-superior { font-size: 0.66rem; letter-spacing: 0.01em; }
  .barra-idiomas { gap: 0.22rem; }
  .lang-btn { width: 26px; height: 18px; }
}

/* --- §6/§13 FALLO ENCONTRADO: la foto del heroe interior no se veia -------
   `.heroe-fondo` lleva `z-index:-2`. El heroe de la portada tiene
   `isolation:isolate`, asi que ahi la imagen se pinta DENTRO del heroe, sobre
   su fondo. `.heroe-pagina` no lo tenia: es `position:relative` con
   `z-index:auto`, o sea que NO crea contexto de apilamiento, y un hijo con
   z-index negativo se pinta por detras del fondo solido del propio heroe.
   Resultado: en 66 de las 67 paginas la fotografia se descargaba —y ademas se
   precargaba con fetchpriority="high", gastando la peticion mas prioritaria
   de la pagina— para no verse nunca. Verificado en el navegador.
   Al hacerla visible hay que reforzar el degradado: con el minimo anterior de
   0,36 de opacidad, un texto blanco sobre una foto clara se quedaba en 1,4:1. */
.heroe-pagina { isolation: isolate; }
.heroe-pagina::before {
  background:
    linear-gradient(100deg, rgba(20, 35, 28, 0.95) 0%, rgba(20, 35, 28, 0.88) 52%, rgba(20, 35, 28, 0.66) 100%),
    linear-gradient(to top, rgba(20, 35, 28, 0.7), rgba(20, 35, 28, 0.2) 60%);
}

/* La lista de datos hereda el separador de `.tarjeta-lateral li`, pensado para
   listas de enlaces: aqui sobra. */
.tarjeta-lateral .tarjeta-datos li { border-bottom: 0; }
.tarjeta-lateral .tarjeta-datos { margin-bottom: 0.9rem; }