/* ==========================================================================
   PROPUESTAS DE VIAJE — versión web
   Traslado a pantalla del lenguaje de la propuesta impresa: foto a sangre y
   paneles de cristal esmerilado. En papel el desenfoque iba horneado en un
   JPG; aquí lo hace el navegador con backdrop-filter, que además se mueve
   con el scroll. Misma paleta y misma tipografía que gaiatravelgroup.com.
   ========================================================================== */

/* fuentes.css se enlaza aparte desde el HTML: un @import aquí
   encadenaría una tercera petición antes del primer pintado. */

:root{
  --ink:        #0C3666;
  --ink-deep:   #082548;
  --ink-night:  #061A33;   /* fondo de las secciones sin foto */
  --gold:       #E0C31F;
  --gold-light: #E9D256;
  --ivory:      #F5F5F5;
  --white:      #fff;

  --w-70: rgba(255,255,255,.70);
  --w-55: rgba(255,255,255,.72);
  --w-30: rgba(255,255,255,.30);
  --w-16: rgba(255,255,255,.16);

  /* Cormorant y Jost no traen kana ni hangul: la reserva por idioma evita que
     el japonés y el coreano caigan en una fuente con serifa inconsistente. */
  --serif: "Cormorant Garamond", "Yu Mincho", "Hiragino Mincho ProN",
           "Nanum Myeongjo", "Times New Roman", Georgia, serif;
  --sans:  "Jost", "Yu Gothic UI", "Hiragino Sans", "Malgun Gothic",
           "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(1.4rem, 5vw, 6rem);
  --maxw: 1360px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --cab: 68px;             /* alto de la cabecera fija */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-padding-top:var(--cab); }
/* El desplazamiento suave se activa desde el JS: al abrir un enlace con
   #ancla interesa que la pagina aparezca ya ahi, no que viaje hasta el sitio. */
html.suave{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html.suave{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--ink-night); color:var(--white);
  font-family:var(--sans); font-weight:300; font-size:clamp(15px,1.02vw,17px);
  line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:300; line-height:1.04;
          letter-spacing:-.01em; margin:0; }

/* El halo oscuro mantiene visible el anillo también sobre foto clara. */
:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px;
                box-shadow:0 0 0 5px rgba(6,26,51,.9); }

.oculto{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
         overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- utilidades tipográficas ---------- */

.ojo{ font-size:.7rem; font-weight:500; letter-spacing:.3em;
      text-transform:uppercase; color:var(--w-70); margin:0; }
.lede{ font-size:1.06rem; font-weight:300; line-height:1.72;
       color:rgba(255,255,255,.9); margin:0; }
.hair{ border:0; border-top:1px solid var(--w-16); margin:0; }

/* ==========================================================================
   Cabecera
   ========================================================================== */

.barra{ position:fixed; inset:0 0 auto; height:3px; z-index:60;
        background:transparent; pointer-events:none; }
.barra i{ display:block; height:100%; width:0; background:var(--gold);
          transition:width .1s linear; }

.cab{
  position:fixed; inset:0 0 auto; z-index:50; height:var(--cab);
  display:flex; align-items:center; gap:2rem;
  padding:0 var(--pad);
  transition:background .4s var(--ease), border-color .4s var(--ease),
             backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
  background:linear-gradient(to bottom, rgba(6,26,51,.72), rgba(6,26,51,.30) 70%,
             transparent);
}
/* Sobre la portada la cabecera desaparece; al bajar se apoya en un velo
   oscuro para que el menú siga legible sobre cualquier fotografía. */
.cab.solida{
  background:rgba(6,26,51,.82);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--w-16);
}
/* El índice va sobre fondo liso: no necesita el velo pensado para la foto. */
.cab--idx:not(.solida){ background:none; }

.cab__logo{ flex:none; display:block; }
.cab__logo img{ height:26px; width:auto; }

.cab__nav{ display:flex; gap:1.7rem; margin-inline:auto; }
.cab__nav a{
  font-size:.72rem; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--w-70); position:relative;
  white-space:nowrap; padding-block:.5rem; transition:color .3s var(--ease);
}
.cab__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.cab__nav a:hover{ color:var(--white); }
.cab__nav a:hover::after,
.cab__nav a.activo::after{ transform:scaleX(1); transform-origin:left; }
.cab__nav a.activo{ color:var(--white); }

.cab__fin{ display:flex; align-items:center; gap:1.1rem; flex:none; }

/* ---------- selector de idioma ---------- */

.idi{ position:relative; }
.idi__btn{
  display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--w-70); padding:.55rem .2rem; transition:color .3s var(--ease);
}
.idi__btn:hover{ color:var(--white); }
.idi__btn svg{ width:14px; height:14px; fill:none; stroke:currentColor;
               stroke-width:1.3; }
.idi__btn .flecha{ width:9px; height:9px; stroke-width:1.6;
                   transition:transform .3s var(--ease); }
.idi[open] .flecha, .idi.abierto .flecha{ transform:rotate(180deg); }

.idi__menu{
  position:absolute; top:calc(100% + .6rem); right:0; min-width:170px;
  background:rgba(6,26,51,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--w-16); padding:.4rem 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .28s var(--ease), transform .28s var(--ease),
             visibility .28s;
}
.idi.abierto .idi__menu{ opacity:1; visibility:visible; transform:none; }
.idi__menu button{
  display:flex; width:100%; align-items:center; justify-content:space-between;
  gap:1rem; padding:.6rem 1.1rem; font-size:.84rem; color:var(--w-70);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.idi__menu button:hover{ background:rgba(255,255,255,.07); color:var(--white); }
.idi__menu button[aria-current="true"]{ color:var(--white); }
.idi__menu button[aria-current="true"]::after{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--gold);
}

/* ---------- botones ---------- */

.btn{
  --relleno:var(--white);
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.92rem 2rem; border:1px solid rgba(255,255,255,.55);
  font-size:.7rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--white); white-space:nowrap;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--relleno); transform:translateX(-101%);
  transition:transform .55s var(--ease);
}
.btn:hover{ color:var(--ink-deep); border-color:var(--relleno); }
.btn:hover::before{ transform:translateX(0); }
.btn--cab{ padding:.72rem 1.4rem; font-size:.66rem; }
.btn--oro{ --relleno:var(--gold); border-color:var(--gold); }
.btn--solido{ background:var(--white); color:var(--ink-deep);
              border-color:var(--white); }
.btn--solido::before{ background:var(--ink-deep); }
.btn--solido:hover{ color:var(--white); border-color:var(--ink-deep); }

.enlace{
  display:inline-flex; align-items:center; gap:.6rem; position:relative;
  font-size:.72rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--white); padding-bottom:.35rem;
}
.enlace::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--w-30); transform-origin:right; transition:.45s var(--ease);
}
.enlace:hover::after{ background:var(--gold); }

/* El CTA que vive dentro del menú solo existe en el desplegable móvil. */
.nav__cta{ display:none; }

/* ---------- menú móvil ---------- */

/* Vive antes del menú en el HTML para que el tabulador entre en él, pero
   se dibuja el último de la fila. Área táctil de 44px con el pseudo. */
.burger{ display:none; width:26px; height:16px; position:relative; flex:none;
         order:3; margin-left:.4rem; }
.burger::after{ content:""; position:absolute; inset:-14px -12px; }
.burger span{ position:absolute; left:0; right:0; height:1px;
              background:var(--white); transition:.35s var(--ease); }
.burger span:first-child{ top:3px; }
.burger span:last-child{ bottom:3px; }
.burger[aria-expanded="true"] span:first-child{ top:8px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ bottom:7px; transform:rotate(-45deg); }

/* ==========================================================================
   Escena: fotografía a sangre que se queda quieta mientras pasa el contenido
   ========================================================================== */

.esc{ position:relative; }
.esc__foto{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:var(--ink-deep) center/cover no-repeat;
}
.esc__foto img{ width:100%; height:100%; object-fit:cover; }
.esc__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(6,26,51,.55), rgba(6,26,51,.22) 45%,
             rgba(6,26,51,.62));
}
.esc__cont{
  position:relative; margin-top:-100vh; min-height:100vh;
  display:flex; align-items:center;
  padding:calc(var(--cab) + 4rem) var(--pad) 5rem;
}
.esc--der .esc__cont{ justify-content:flex-end; }
.esc--izq .esc__cont{ justify-content:flex-start; }
.esc--centro .esc__cont{ justify-content:center; }

/* ---------- panel de cristal ---------- */

.panel{
  position:relative; width:100%; max-width:min(640px, 92vw);
  padding:clamp(1.8rem, 3.2vw, 3.2rem);
  background:linear-gradient(150deg, rgba(8,37,72,.60), rgba(6,26,51,.52));
  backdrop-filter:blur(26px) saturate(1.15);
  -webkit-backdrop-filter:blur(26px) saturate(1.15);
  border:1px solid var(--w-30);
  box-shadow:0 30px 90px rgba(0,0,0,.36);
}
.panel--ancho{ max-width:min(1180px, 96vw); }
.panel--medio{ max-width:min(880px, 94vw); }

/* Los navegadores sin backdrop-filter recibirían texto blanco sobre foto
   nítida: en ese caso el panel se opaca y sigue leyéndose. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .panel{ background:rgba(6,26,51,.9); }
  .cab.solida{ background:rgba(6,26,51,.97); }
}

/* ==========================================================================
   Portada
   ========================================================================== */

.portada{ position:relative; min-height:100svh; display:flex;
          flex-direction:column; justify-content:flex-end; overflow:hidden; }
.portada__foto{ position:absolute; inset:0; }
.portada__foto img{ width:100%; height:100%; object-fit:cover; }
.portada__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,26,51,.92) 0%,
             rgba(6,26,51,.30) 38%, rgba(6,26,51,.14) 62%, rgba(6,26,51,.55) 100%);
}
.portada__cuerpo{ position:relative; padding:var(--cab) var(--pad) 2rem;
                  max-width:var(--maxw); width:100%; margin-inline:auto; }
.portada h1{
  font-size:clamp(3rem, 8.2vw, 7.6rem); margin:1.2rem 0 1.4rem;
  text-shadow:0 2px 40px rgba(6,26,51,.5);
}
.portada__ruta{
  font-size:clamp(.72rem, 1.1vw, .88rem); letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.92); margin:0;
  text-shadow:0 1px 18px rgba(6,26,51,.7);
}

.datos{
  position:relative; margin:2.6rem auto 0; max-width:var(--maxw); width:100%;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--w-16); border:1px solid var(--w-16);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.dato{ background:rgba(8,37,72,.42); padding:1.3rem clamp(1rem,2vw,1.9rem); }
.dato b{ display:block; font-family:var(--serif); font-weight:400;
         font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.1;
         font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1; }
.dato span{ display:block; margin-top:.35rem; font-size:.62rem; font-weight:500;
            letter-spacing:.22em; text-transform:uppercase; color:var(--w-55); }

.baja{
  position:relative; display:flex; align-items:center; gap:.8rem;
  padding:1.1rem var(--pad) 1.6rem; max-width:var(--maxw); width:100%;
  margin-inline:auto; font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--w-55);
}
.baja .sep{ flex:1; height:1px; background:var(--w-16); }

/* Señal de scroll: una línea que respira, sin flechas ni círculos. */
.cue{ display:flex; align-items:center; gap:.8rem; }
.cue i{ display:block; width:1px; height:34px;
        background:linear-gradient(var(--gold), transparent);
        animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(.35); opacity:.5 }
                50%   { transform:scaleY(1);   opacity:1  } }
@media (prefers-reduced-motion:reduce){ .cue i{ animation:none; } }

/* ==========================================================================
   El recorrido
   ========================================================================== */

.tit{ font-size:clamp(1.9rem, 3.4vw, 3.1rem); margin:.9rem 0 1.4rem; }
.tit--chico{ font-size:clamp(1.6rem, 2.6vw, 2.3rem); }

.tramos{ display:grid; gap:1.4rem; margin-top:2.2rem; padding-top:1.8rem;
         border-top:1px solid var(--w-30);
         grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.tramo b{ display:block; font-family:var(--serif); font-weight:400;
          font-size:1.35rem; line-height:1.15;
          font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1; }
.tramo em{ display:block; font-style:normal; margin:.3rem 0 .5rem;
           font-size:.62rem; font-weight:500; letter-spacing:.22em;
           text-transform:uppercase; color:var(--w-55); }
.tramo span{ font-size:.86rem; color:rgba(255,255,255,.82); line-height:1.5; }

.incluye{ margin-top:2.2rem; padding-top:1.8rem; border-top:1px solid var(--w-30); }
.incluye ul{ margin-top:1rem; display:grid; gap:.6rem;
             grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.incluye li{ position:relative; padding-left:1.4rem; font-size:.88rem;
             line-height:1.55; color:rgba(255,255,255,.9); }
.incluye li::before{ content:""; position:absolute; left:0; top:.72em;
                     width:.7rem; height:1px; background:var(--gold); }

/* ==========================================================================
   Etapas · día a día
   ========================================================================== */

.etq{ display:flex; align-items:center; gap:1.1rem; margin-bottom:2rem; }
.etq__num{ flex:none; width:2.6rem; height:2.6rem; display:grid;
           place-items:center; border:1px solid var(--w-30);
           font-family:var(--serif); font-size:1rem; color:var(--gold-light);
           font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1; }
.etq h2{ font-size:clamp(1.8rem,3vw,2.6rem); }
.etq__n{ margin-left:auto; flex:none; padding:.45rem 1rem;
         background:var(--white); color:var(--ink-deep); font-size:.6rem;
         font-weight:500; letter-spacing:.2em; text-transform:uppercase; }

.dias{ display:grid; gap:1.5rem; padding-left:.2rem;
       border-left:1px solid var(--w-30); }
.dia{ position:relative; padding-left:1.7rem; }
.dia::before{ content:""; position:absolute; left:-4px; top:.55em;
              width:7px; height:7px; border-radius:50%; background:var(--gold-light);
              box-shadow:0 0 0 4px rgba(6,26,51,.55); }
.dia h3{ font-family:var(--sans); font-size:.64rem; font-weight:500;
         letter-spacing:.26em; text-transform:uppercase; color:var(--w-55);
         margin-bottom:.5rem; }
.dia li{ font-size:.94rem; line-height:1.6; padding-left:.9rem;
         position:relative; color:rgba(255,255,255,.92); }
.dia li + li{ margin-top:.28rem; }
.dia li::before{ content:"·"; position:absolute; left:0; color:var(--w-55); }
.dia small{ display:block; font-size:.8rem; color:var(--w-55); margin-top:.1rem; }

.hot-linea{ margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--w-30); }
.hot-linea p{ font-family:var(--serif); font-size:1.16rem; margin:.5rem 0 0;
              line-height:1.35; }
.hoteles-mini{ display:flex; flex-wrap:wrap; gap:1.1rem 1.2rem; margin-top:1.1rem; }
.hmini{ flex:0 0 auto; width:132px; text-align:left; padding:0; background:none;
        border:0; cursor:pointer; color:inherit; }
.hmini__foto{ position:relative; display:block; overflow:hidden;
              border:1px solid var(--w-30); transition:border-color .4s var(--ease); }
.hmini__foto img{ width:132px; height:90px; object-fit:cover; display:block;
                  transition:transform .8s var(--ease); }
.hmini:hover .hmini__foto{ border-color:var(--gold-light); }
.hmini:hover .hmini__foto img{ transform:scale(1.06); }
.hmini b{ display:block; margin-top:.55rem; font-family:var(--serif);
          font-weight:400; font-size:.94rem; line-height:1.22; color:#fff; }
@media (max-width:640px){
  .hoteles-mini{ gap:.9rem 1rem; }
  .hmini, .hmini__foto img{ width:120px; }
  .hmini__foto img{ height:82px; }
}

/* La lupa dice que la foto se puede abrir. Discreta en reposo, con etiqueta
   'Ver fotos' al pasar por encima. */
.ver-fotos{ position:absolute; inset:0; display:flex; align-items:center;
            justify-content:center; gap:.5rem; flex-direction:column;
            background:linear-gradient(rgba(6,26,51,.15), rgba(6,26,51,.55));
            opacity:0; transition:opacity .35s var(--ease); }
.ver-fotos svg{ width:26px; height:26px; fill:none; stroke:#fff;
                stroke-width:1.6; stroke-linecap:round; }
.ver-fotos span{ font-size:.58rem; font-weight:500; letter-spacing:.18em;
                 text-transform:uppercase; color:#fff; }
.hmini:hover .ver-fotos, .hmini:focus-visible .ver-fotos,
.ficha:hover .ver-fotos, .ficha:focus-visible .ver-fotos{ opacity:1; }
/* Señal permanente aunque no se pase el ratón: una lupita en la esquina. */
.hmini__foto::after, .ficha__foto::after{
  content:""; position:absolute; top:.4rem; right:.4rem; width:1.55rem;
  height:1.55rem; border-radius:50%; background:rgba(6,26,51,.62);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:64%;
  border:1px solid rgba(255,255,255,.35); transition:opacity .3s var(--ease); }
.hmini:hover .hmini__foto::after, .ficha:hover .ficha__foto::after{ opacity:0; }


/* ==========================================================================
   Sección en calma
   Nueve fotografías a sangre seguidas cansan y las galerías repetían el fondo
   de su etapa. Las galerías descansan sobre el azul profundo: las fichas son
   ahí el contenido visual y la página recupera respiración entre escenas.
   ========================================================================== */

.calma{
  position:relative; background:var(--ink-night);
  padding:clamp(4rem,8vw,7.5rem) var(--pad);
  border-top:1px solid var(--w-16);
}
.calma::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, rgba(12,54,102,.55), transparent 70%);
}
.calma__in{ position:relative; max-width:var(--maxw); margin-inline:auto; }
.calma .ficha{ background:#0B2547; }
.calma .up{ background:#0B2547; }
.calma .up:hover{ background:#0E2C55; }
.calma .eleva{ background:var(--w-16); }

/* ==========================================================================
   Galerías: hotelería y fauna
   ========================================================================== */

.cab-sec{ display:flex; align-items:flex-end; gap:1.2rem; flex-wrap:wrap;
          margin-bottom:2rem; }
.cab-sec__txt{ flex:1 1 320px; }
.cab-sec .lede{ font-size:.95rem; }

.grupo + .grupo{ margin-top:clamp(2.4rem,4.5vw,3.6rem); padding-top:clamp(2.4rem,4.5vw,3.6rem);
                 border-top:1px solid var(--w-16); }
.grupo__cab{ display:flex; align-items:baseline; gap:1rem; margin-bottom:.5rem; }
.grupo__cab h3{ font-size:clamp(1.3rem,2vw,1.7rem); }
.grupo .lede{ font-size:.95rem; margin-bottom:1.4rem; }

.rejilla{ display:grid; gap:1rem;
          grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.ficha{ margin:0; padding:0; display:flex; flex-direction:column;
        text-align:left; overflow:hidden;
        background:rgba(255,255,255,.05); border:1px solid var(--w-16);
        transition:border-color .45s var(--ease), transform .55s var(--ease); }
button.ficha{ cursor:pointer; color:inherit; }
.ficha__foto{ position:relative; display:block; overflow:hidden; }
.ficha img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
            display:block; transition:transform 1.1s var(--ease); }
.ficha:hover{ border-color:var(--w-30); }
.ficha:hover img{ transform:scale(1.05); }
.ficha__pie, .ficha figcaption{ display:block; padding:.9rem 1.1rem 1.05rem; }
.ficha b{ display:block; font-family:var(--serif); font-weight:400;
          font-size:1.06rem; line-height:1.2; }
.ficha small{ display:block; margin-top:.3rem; font-size:.6rem; font-weight:500;
              letter-spacing:.2em; text-transform:uppercase; color:var(--w-55); }
.nota{ margin:1.6rem 0 0; font-size:.74rem; line-height:1.6; color:var(--w-55); }

/* Fauna: la corocora es la estampa del llano y ocupa el doble de sitio. */
.fauna{ display:grid; gap:1rem; grid-template-columns:repeat(6,1fr); }
.fauna .ficha{ grid-column:span 3; }
.fauna .ficha--grande{ grid-column:span 6; }
.fauna .ficha--grande img{ height:auto; aspect-ratio:21/9; }
.fauna .ficha i{ display:block; font-style:normal; margin-top:.6rem;
                 font-size:.86rem; line-height:1.55; color:rgba(255,255,255,.82); }
@media (min-width:900px){
  .fauna .ficha{ grid-column:span 2; }
  .fauna .ficha--grande{ grid-column:span 6; }
}

/* ==========================================================================
   Elevaciones
   ========================================================================== */

.eleva{ display:grid; gap:1px; background:var(--w-16);
        border:1px solid var(--w-16);
        grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .eleva{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .eleva{ grid-template-columns:1fr; } }
.up{ background:rgba(8,37,72,.34); padding:1.5rem 1.6rem;
     transition:background .45s var(--ease); }
.up:hover{ background:rgba(8,37,72,.55); }
.up b{ display:block; font-family:var(--serif); font-weight:400;
       font-size:1.2rem; line-height:1.2; }
.up em{ display:block; font-style:normal; margin:.4rem 0 .7rem;
        font-size:.6rem; font-weight:500; letter-spacing:.2em;
        text-transform:uppercase; color:var(--gold-light); }
.up span{ font-size:.87rem; line-height:1.6; color:rgba(255,255,255,.85); }

/* ==========================================================================
   Cierre
   ========================================================================== */

.cierre__grid{ display:grid; gap:clamp(2rem,4vw,3.5rem);
               grid-template-columns:1.3fr 1fr; align-items:start; }
.pasos{ display:grid; gap:1.2rem; margin:2rem 0 0; }
.paso{ display:flex; gap:1.2rem; align-items:baseline; }
.paso b{ font-family:var(--serif); font-weight:400; font-size:1.4rem;
         color:var(--gold-light); min-width:1.3rem;
         font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1; }
.paso span{ font-size:.95rem; line-height:1.6; color:rgba(255,255,255,.9); }

.cont{ display:grid; gap:1.5rem; padding-left:clamp(1rem,2.5vw,2.4rem);
       border-left:1px solid var(--w-30); }
.cont span{ display:block; font-size:.6rem; font-weight:500;
            letter-spacing:.24em; text-transform:uppercase;
            color:var(--w-55); margin-bottom:.3rem; }
.cont b{ display:block; font-family:var(--serif); font-weight:400;
         font-size:1.24rem; line-height:1.3;
         font-variant-numeric:lining-nums; }
.cont a:hover b{ color:var(--gold-light); }
.cont__acc{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.4rem; }

.legal{ margin:2.4rem 0 0; padding-top:1.4rem; border-top:1px solid var(--w-16);
        font-size:.68rem; line-height:1.65; color:rgba(255,255,255,.72); }

/* ==========================================================================
   Pie
   ========================================================================== */

.pie{ background:var(--ink-night); padding:3rem var(--pad);
      border-top:1px solid var(--w-16); }
.pie__in{ max-width:var(--maxw); margin-inline:auto; display:flex;
          align-items:center; gap:1.5rem; flex-wrap:wrap;
          justify-content:space-between; }
.pie img{ height:24px; width:auto; opacity:.85; }
.pie p{ margin:0; font-size:.66rem; letter-spacing:.16em;
        text-transform:uppercase; color:var(--w-55); }
.arriba{ display:inline-flex; align-items:center; gap:.6rem; font-size:.66rem;
         letter-spacing:.22em; text-transform:uppercase; color:var(--w-55);
         transition:color .3s var(--ease); }
.arriba:hover{ color:var(--white); }
.arriba svg{ width:13px; height:13px; fill:none; stroke:currentColor;
             stroke-width:1.4; }

/* ==========================================================================
   Índice de propuestas
   ========================================================================== */

.idx{ padding:calc(var(--cab) + 5rem) var(--pad) 5rem; max-width:var(--maxw);
      margin-inline:auto; }
.idx__cab{ max-width:720px; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.idx__cab h1{ font-size:clamp(2.4rem,5.6vw,4.6rem); margin:1rem 0 1.4rem; }
.idx__rej{ display:grid; gap:1.5rem;
           grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.tarj{ position:relative; display:flex; flex-direction:column; overflow:hidden;
       border:1px solid var(--w-16); background:rgba(255,255,255,.04);
       transition:border-color .5s var(--ease), transform .6s var(--ease); }
.tarj:hover{ border-color:var(--w-30); transform:translateY(-4px); }
.tarj__foto{ position:relative; aspect-ratio:3/2; overflow:hidden; }
.tarj__foto img{ width:100%; height:100%; object-fit:cover;
                 transition:transform 1.2s var(--ease); }
.tarj:hover .tarj__foto img{ transform:scale(1.06); }
.tarj__foto::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,26,51,.75), transparent 55%); }
.tarj__cuerpo{ padding:1.6rem 1.7rem 1.9rem; display:flex; flex-direction:column;
               flex:1; gap:.9rem; }
.tarj h2{ font-size:1.75rem; }
.tarj__ruta{ font-size:.6rem; font-weight:500; letter-spacing:.2em;
             text-transform:uppercase; color:var(--gold-light); margin:0; }
.tarj p{ margin:0; font-size:.92rem; line-height:1.6;
         color:rgba(255,255,255,.82); }
.tarj .enlace{ margin-top:auto; }

/* ==========================================================================
   Japonés y coreano
   El interletrado ancho que da aire a las versales latinas separa demasiado
   el kana y el hangul —«選 べ る ホ テ ル»—, y las versalitas no existen en
   esas escrituras. El selector :lang() responde al cambio de idioma en vivo
   porque el JS actualiza el atributo lang del documento.
   ========================================================================== */

:is(:lang(ja), :lang(ko)) :is(.ojo, .cab__nav a, .btn, .enlace, .dia h3,
  .tramo em, .dato span, .ficha small, .up em, .cont span, .etq__n,
  .idi__btn, .baja, .pie p, .arriba, .tarj__ruta){
  letter-spacing:.08em;
}
:is(:lang(ja), :lang(ko)) :is(.tit, h1, h2, h3){ letter-spacing:.01em; }
/* El kana no admite partición: sin esto las líneas cortan en mitad de palabra. */
:is(:lang(ja), :lang(ko)) :is(.lede, .dia li, .up span, .ficha i, .paso span){
  line-break:strict; overflow-wrap:normal;
}

/* ==========================================================================
   Aparición al entrar en pantalla
   ========================================================================== */

/* La aparición se esconde solo si el JavaScript llegó a ejecutarse. Sin esa
   condición, un fallo del script dejaría la propuesta entera en blanco. */
.js .rev{ opacity:0; transform:translateY(26px);
          transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .rev.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .rev{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Adaptación a pantallas menores
   ========================================================================== */

@media (max-width:1500px){
  .cab__nav{ gap:1.15rem; }
  .cab__nav a{ font-size:.66rem; letter-spacing:.13em; }
}

@media (max-width:1340px){
  .cab{ gap:1.2rem; }
  .cab__nav{ gap:.85rem; }
  .cab__nav a{ font-size:.62rem; letter-spacing:.09em; }
  .btn--cab{ padding:.68rem 1.05rem; font-size:.6rem; letter-spacing:.18em; }
  .cab__fin{ gap:.8rem; }
}

@media (max-width:1200px){
  :root{ --cab:60px; }
  .burger{ display:block; }
  .cab__nav{
    position:fixed; inset:var(--cab) 0 auto; margin:0;
    flex-direction:column; gap:0; padding:1rem var(--pad) 2rem;
    /* Opaco del todo: con un velo translúcido se leía el texto de la página
       por debajo del menú y parecía un error de pintado. */
    background:var(--ink-night);
    border-bottom:1px solid var(--w-16);
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:.35s var(--ease);
  }
  .cab__nav.abierto{ transform:none; opacity:1; visibility:visible; }
  .cab__nav a{ font-size:.78rem; letter-spacing:.18em; padding:1rem 0;
               border-bottom:1px solid var(--w-16); }
  .cab__nav a::after{ display:none; }
  /* En la cabecera no cabe, pero la llamada no puede desaparecer en móvil:
     baja al final del menú desplegable. */
  .cab__fin > .btn--cab{ display:none; }
  /* En el índice no hay menú desplegable que recoja la llamada: se queda. */
  .cab--idx .btn--cab{ display:inline-flex; padding:.6rem .95rem; font-size:.58rem;
                       letter-spacing:.16em; }
  /* `.cab__nav a` gana en especificidad al color del botón: sin repetirlo
     aquí, el texto sale blanco sobre el relleno blanco y desaparece. */
  .cab__nav .nav__cta{ display:inline-flex; margin-top:1.6rem;
    align-self:flex-start; border-bottom:0; padding:.92rem 2rem;
    font-size:.7rem; letter-spacing:.24em; color:var(--ink-deep); }
  .cab__nav .nav__cta:hover{ color:var(--white); }
  .datos{ grid-template-columns:repeat(2,1fr); }
  .cierre__grid{ grid-template-columns:1fr; }
  .cont{ padding-left:0; padding-top:1.6rem; border-left:0;
         border-top:1px solid var(--w-30); }
  .fauna{ grid-template-columns:repeat(2,1fr); }
  .fauna .ficha{ grid-column:span 1; }
  .fauna .ficha--grande{ grid-column:span 2; }
}

@media (max-width:640px){
  /* En móvil el panel translúcido sobre foto cansa la vista en textos largos:
     se vuelve casi opaco y ocupa todo el ancho. */
  .esc__cont{ padding:calc(var(--cab) + 2.5rem) var(--pad) 3.5rem; }
  .panel{ padding:1.5rem 1.35rem 1.8rem;
          background:linear-gradient(150deg, rgba(8,37,72,.86), rgba(6,26,51,.82)); }
  .datos{ grid-template-columns:1fr 1fr; }
  .dato{ padding:1rem 1.1rem; }
  .portada h1{ font-size:clamp(2.4rem,12vw,3.6rem); }
  .baja{ flex-wrap:wrap; }
  .baja .sep{ display:none; }
  .etq{ flex-wrap:wrap; gap:.8rem; }
  .etq__n{ margin-left:0; }
  .rejilla{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
}


/* ==========================================================================
   Visor de fotos de hotel
   Se abre al pulsar una miniatura o una tarjeta: las fotos del hotel a
   pantalla grande, con flechas para pasarlas.
   ========================================================================== */

.visor{ position:fixed; inset:0; z-index:100; display:flex; align-items:center;
        justify-content:center; padding:clamp(1rem,4vw,3rem); }
.visor[hidden]{ display:none; }
.visor__fondo{ position:absolute; inset:0; background:rgba(4,16,33,.95);
               backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.visor:not([hidden]) .visor__fondo{ animation:visorEntra .35s var(--ease); }
@keyframes visorEntra{ from{ opacity:0 } to{ opacity:1 } }

.visor__marco{ position:relative; z-index:1; margin:0; max-width:1100px;
               width:100%; display:flex; align-items:center;
               justify-content:center; }
.visor__img{ max-width:100%; max-height:82vh; width:auto; height:auto;
             object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.5);
             opacity:0; transform:scale(.985);
             transition:opacity .4s var(--ease), transform .4s var(--ease); }
.visor__img.lista{ opacity:1; transform:none; }

.visor__cerrar{ position:absolute; z-index:3; top:clamp(1rem,3vw,2rem);
                right:clamp(1rem,3vw,2rem); width:46px; height:46px;
                display:grid; place-items:center; border:1px solid var(--w-30);
                background:rgba(6,26,51,.5); color:#fff;
                transition:background .3s var(--ease), border-color .3s var(--ease); }
.visor__cerrar:hover{ background:rgba(6,26,51,.85); border-color:var(--gold-light); }
.visor__cerrar svg{ width:20px; height:20px; fill:none; stroke:currentColor;
                    stroke-width:1.6; stroke-linecap:round; }

.visor__nav{ position:absolute; z-index:3; top:50%; transform:translateY(-50%);
             width:52px; height:52px; display:grid; place-items:center;
             border:1px solid var(--w-30); background:rgba(6,26,51,.45); color:#fff;
             transition:background .3s var(--ease), border-color .3s var(--ease); }
.visor__nav:hover{ background:rgba(6,26,51,.85); border-color:var(--gold-light); }
.visor__nav svg{ width:24px; height:24px; fill:none; stroke:currentColor;
                 stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.visor__nav--prev{ left:clamp(.6rem,2vw,1.6rem); }
.visor__nav--next{ right:clamp(.6rem,2vw,1.6rem); }
.visor__nav[hidden]{ display:none; }

.visor__pie{ position:absolute; z-index:3; left:0; right:0;
             bottom:clamp(1rem,3vw,2.2rem); text-align:center;
             pointer-events:none; }
.visor__nombre{ display:block; font-family:var(--serif); font-weight:400;
                font-size:1.3rem; color:#fff;
                text-shadow:0 1px 14px rgba(0,0,0,.6); }
.visor__cuenta{ display:inline-block; margin-top:.4rem; font-size:.62rem;
                font-weight:500; letter-spacing:.24em; text-transform:uppercase;
                color:var(--w-70); }

@media (max-width:640px){
  .visor__img{ max-height:72vh; }
  .visor__nav{ width:44px; height:44px; bottom:auto; }
  .visor__nombre{ font-size:1.1rem; }
}

/* Con el visor abierto el fondo no debe desplazarse. */
body.sin-scroll{ overflow:hidden; }

/* Impresión: el PDF sigue siendo la pieza de imprenta, pero si alguien
   imprime la web que salga legible en lugar de negro. */
@media print{
  body{ background:#fff; color:#111; }
  .cab, .barra, .cue, .arriba, .btn{ display:none !important; }
  .esc__foto{ position:relative; height:auto; }
  .esc__cont{ margin-top:0; min-height:0; }
  .panel{ background:#fff; color:#111; border-color:#ccc;
          backdrop-filter:none; box-shadow:none; }
}