/* ==========================================================================
   Hotel Las Cabañas — Maravatío, Michoacán
   Rediseño cinematográfico  ·  Cormorant Garamond + Outfit
   ========================================================================== */

/* --- Tokens ---------------------------------------------------------------- */
:root{
  --ivory:   #f6f1e7;
  --ivory-2: #efe6d5;
  --white:   #fffdf8;
  --ink:     #1b1a16;
  --ink-2:   #574f45;
  --forest:  #21402f;
  --forest-2:#14261b;
  --forest-3:#0e1b13;
  --brass:   #bd914f;
  --brass-2: #d3ac6d;
  --line:    #ddd3c0;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ancho: 1240px;
  --gut: 24px;
  --nav: 78px;
  --ease: cubic-bezier(.19,.72,.28,1);
}

/* --- Textura de grano global ------------------------------------------------
   Una capa de ruido finísimo sobre todo el sitio: rompe el "plano" de los
   degradados (evita el efecto banding) y disimula que las fotos de origen
   son de baja resolución, dándoles un aire de grano fílmico intencional
   en lugar de verse pixeladas. Es SVG puro, no pesa nada. */
.grano{
  position:fixed; inset:0; z-index:950; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* --- Reset ----------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  font-weight:400;
  line-height:1.72;
  overflow-x:hidden;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
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; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
::selection{ background:var(--brass); color:#fff; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.02; margin:0; letter-spacing:-.005em; }
h1{ font-size:clamp(3.1rem, 8.4vw, 7rem); }
h2{ font-size:clamp(2.4rem, 5vw, 4.1rem); }
h3{ font-size:clamp(1.6rem, 2.7vw, 2.2rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
em{ font-style:italic; }

/* --- Utilidades ------------------------------------------------------------ */
.env{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:1; }

/* Fondos graduados: cada sección combina un degradado vertical con un
   resplandor radial suave (en el propio background, sin desbordes ni
   pseudo-elementos, para no romper el sticky de la caja de reserva). */
/* Fondos graduados con presencia real: varios focos de color a opacidad alta
   que se solapan, en vez de un solo resplandor tenue en una esquina. La idea
   es que se note el degradado a simple vista, no que haya que buscarlo. */
/* Misma lógica que .seccion--forest (referencia): una base con variación de
   tono REAL de esquina a esquina (no sólo un tinte traslúcido sobre un
   fondo casi uniforme) y encima dos focos de color bien cargados. Así el
   degradado se nota a simple vista también en las secciones claras. */
.seccion{ padding:clamp(72px,10vw,140px) 0; position:relative;
  background:
    radial-gradient(58% 62% at 96% -6%, rgba(189,145,79,.55), transparent 60%),
    radial-gradient(52% 56% at -6% 108%, rgba(33,64,47,.42), transparent 62%),
    linear-gradient(150deg,#fdf9f0 0%, #f6ecd7 30%, #ecd9ac 62%, #dbbf87 100%); }
.seccion--ivory2{
  background:
    radial-gradient(54% 58% at 2% -6%, rgba(189,145,79,.5), transparent 58%),
    radial-gradient(60% 62% at 104% 106%, rgba(33,64,47,.5), transparent 60%),
    linear-gradient(150deg,#f4ead2 0%, #e9d7ab 34%, #d7bd88 66%, #c0a06a 100%); }
.seccion--forest{ color:#e7ddca;
  background:
    radial-gradient(62% 60% at 88% 2%, rgba(211,172,109,.4), transparent 60%),
    radial-gradient(60% 58% at 4% 96%, rgba(80,148,109,.34), transparent 60%),
    radial-gradient(130% 110% at 16% 0%, #2c543f 0%, #163524 42%, #0c1911 100%); }
.seccion--forest h2,.seccion--forest h3{ color:var(--white); }

/* Encabezado de sección */
.enc{ max-width:640px; }
.enc--centro{ margin-inline:auto; text-align:center; }
.sobre{
  display:inline-flex; align-items:center; gap:13px;
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--brass);
  margin-bottom:22px;
}
.sobre::before{ content:attr(data-n); font-family:var(--serif); font-size:1.1rem; letter-spacing:0; color:var(--brass); font-style:italic; }
.sobre::after{ content:''; width:46px; height:1px; background:var(--brass); opacity:.6; }
.enc--centro .sobre{ justify-content:center; }
.dice{ color:var(--ink-2); font-size:1.06rem; margin-top:20px; }
.seccion--forest .dice{ color:#b7ab93; }

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:2px;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid transparent; white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--brass{ background:var(--brass); color:#1a1206; }
.btn--brass:hover{ background:var(--brass-2); }
.btn--dark{ background:var(--forest); color:var(--white); }
.btn--dark:hover{ background:var(--forest-2); }
.btn--ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--line{ border-color:var(--ink); color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--ivory); }
.btn--wa{ background:#1f8f4d; color:#fff; }
.btn--wa:hover{ background:#1a7a41; }

.vinc{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); padding-bottom:4px; border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.vinc:hover{ border-color:var(--brass); gap:15px; }

/* Reveal */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-2{ transition-delay:.1s; }
.rv-3{ transition-delay:.2s; }
.rv-4{ transition-delay:.3s; }

/* ==========================================================================
   Cabecera / navegación
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:200; height:var(--nav);
  display:flex; align-items:center;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.nav__in{ display:flex; align-items:center; gap:20px; width:100%; }
.marca{ display:flex; align-items:center; gap:12px; min-width:0; }
.marca__ic{ width:30px; height:30px; flex:0 0 auto; color:var(--brass); }
.marca__t{ min-width:0; line-height:1; }
.marca__n{ display:block; font-family:var(--serif); font-size:1.42rem; font-weight:600; white-space:nowrap; letter-spacing:.01em; }
.marca__s{ display:block; font-size:.56rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; margin-top:3px; opacity:.72; white-space:nowrap; }

.nav__menu{ display:flex; align-items:center; gap:34px; margin-inline:auto; }
.nav__menu a{
  position:relative; font-size:.8rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; padding:6px 0; opacity:.85;
  transition:opacity .3s var(--ease);
}
.nav__menu a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--brass); transition:width .35s var(--ease); }
.nav__menu a:hover{ opacity:1; }
.nav__menu a:hover::after,.nav__menu a[aria-current]::after{ width:100%; }
.nav__menu a[aria-current]{ opacity:1; }

.nav__lado{ display:flex; align-items:center; gap:16px; }
.nav__tel{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; letter-spacing:.03em; white-space:nowrap; }
.nav__tel svg{ color:var(--brass); flex:0 0 auto; }

/* Estado sobre el hero (claro) */
.nav--hero{ color:#fff; }
.nav--hero .marca__n{ color:#fff; }
/* Estado sólido */
.nav.solida{ background:rgba(246,241,231,.92); backdrop-filter:saturate(1.5) blur(12px); box-shadow:0 1px 0 var(--line); height:66px; color:var(--ink); }
.nav.solida .marca__n{ color:var(--ink); }
.nav.solida .marca__ic{ color:var(--brass); }

/* Hamburguesa */
.burg{ display:none; width:42px; height:42px; align-items:center; justify-content:center; margin-right:-9px; }
.burg span{ position:relative; width:22px; height:1.6px; background:currentColor; transition:background .2s; }
.burg span::before,.burg span::after{ content:''; position:absolute; left:0; width:22px; height:1.6px; background:currentColor; transition:transform .3s var(--ease), top .2s; }
.burg span::before{ top:-6.5px; } .burg span::after{ top:6.5px; }
.burg.x span{ background:transparent; }
.burg.x span::before{ top:0; transform:rotate(45deg); }
.burg.x span::after{ top:0; transform:rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
/* Columna en vez de contenido centrado + franja absoluta: así el bloque de
   texto y la franja de rasgos nunca se pueden pisar, sin importar cuánto
   texto haya o qué tan bajo sea el viewport — cada uno ocupa su propio
   espacio en el flujo normal. */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; color:#fff; background:var(--forest-3); }
.hero__bg{ position:absolute; inset:0; z-index:0; }
/* Escala mínima (apenas para cubrir el marco al hacer "pan") y un filtro de
   saturación/contraste: como la foto de origen es de baja resolución, un
   zoom amplio la vuelve borrosa — aquí el movimiento es sutil y la carga
   de color viene del degradado, no de estirar la imagen. */
.hero__bg img{
  width:100%; height:100%; object-fit:cover; transform:scale(1.035);
  filter:saturate(1.3) contrast(1.1) brightness(.86);
  animation:kb 30s ease-in-out infinite alternate;
}
@keyframes kb{ from{ transform:scale(1.035) translate3d(0,0,0);} to{ transform:scale(1.075) translate3d(-1.2%,-1%,0);} }

/* Grado cinematográfico bastante más cargado: ya no es una foto con un
   degradado tenue encima, es un baño de color con presencia propia — el
   punto "más claro" de toda la imagen sigue oscurecido, y los focos dorado
   y verde son casi opacos en su centro. */
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(6,13,9,.97) 0%, rgba(9,19,13,.88) 26%, rgba(13,25,17,.66) 44%, rgba(74,58,27,.52) 58%, rgba(13,25,17,.7) 76%, rgba(6,13,9,.96) 100%),
    radial-gradient(56% 66% at 92% 4%, rgba(211,172,109,.78), transparent 58%),
    radial-gradient(80% 62% at 2% 100%, rgba(28,56,40,.92), transparent 54%),
    linear-gradient(180deg, rgba(6,13,9,.7) 0%, rgba(6,13,9,.38) 26%, rgba(6,13,9,.44) 56%, rgba(5,10,7,.98) 100%);
}
.hero__bg::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(120% 90% at 50% 42%, transparent 32%, rgba(5,10,7,.72) 100%);
  box-shadow:inset 0 0 280px rgba(4,8,6,.85);   /* viñeta */
  pointer-events:none;
}
/* Marco interior estilo lámina, ahora con doble filete para más presencia.
   El borde superior arranca DEBAJO de la barra de navegación (no a los
   clamp(14,26)px del viewport) — antes esa línea pasaba justo a la altura
   del logo y se le encimaba, porque el nav es transparente sobre el hero. */
.hero__marco{
  position:absolute; z-index:2; pointer-events:none;
  top:calc(var(--nav) + 14px); right:clamp(14px,2vw,26px);
  bottom:clamp(14px,2vw,26px); left:clamp(14px,2vw,26px);
  border:1px solid rgba(255,255,255,.3);
}
.hero__marco::before,.hero__marco::after{ content:''; position:absolute; width:20px; height:20px; border:1.5px solid var(--brass-2); }
.hero__marco::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.hero__marco::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* flex:1 le da todo el espacio que sobra por encima de la franja de rasgos,
   y adentro se centra verticalmente sólo dentro de ese espacio. */
/* padding-top de sobra (no sólo var(--nav)): así el bloque de texto, aunque
   se centre verticalmente en el espacio libre, nunca arranca pegado al
   borde superior del marco decorativo. Antes con la etiqueta de ubicación
   encima había margen de sobra "gratis"; al quitarla, el título subía hasta
   tocar la línea del marco. */
.hero__in{
  position:relative; z-index:3; width:100%; flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--nav) + 64px);
}
.hero__ubic{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.74rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  margin-bottom:26px; opacity:0; animation:subir .9s var(--ease) .2s forwards;
}
.hero__ubic::before{ content:''; width:34px; height:1px; background:var(--brass-2); }
.hero h1{ max-width:16ch; text-shadow:0 6px 40px rgba(0,0,0,.35); }
.hero h1 span{ display:block; opacity:0; animation:subir 1s var(--ease) forwards; }
.hero h1 .l1{ animation-delay:.32s; }
.hero h1 .l2{ animation-delay:.46s; }
.hero h1 em{ color:var(--brass-2); }
.hero__sub{ max-width:46ch; font-size:clamp(1.02rem,1.5vw,1.22rem); margin-top:26px; opacity:0; color:#eadfca; animation:subir 1s var(--ease) .62s forwards; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; opacity:0; animation:subir 1s var(--ease) .76s forwards; }

/* Franja de rasgos al pie del hero: flex:0 en el flujo normal, nunca
   superpuesta al bloque de texto de arriba (ver .hero__in). */
.hero__pie{
  position:relative; z-index:3; flex:0 0 auto;
  padding:clamp(28px,4.5vw,46px) 0 clamp(22px,4vw,40px);
  opacity:0; animation:subir 1.1s var(--ease) .95s forwards;
}
.hero__rasgos{ display:flex; align-items:stretch; gap:0; }
.rasgo{ display:flex; align-items:center; gap:14px; padding:0 clamp(18px,2.6vw,34px); }
.rasgo:first-child{ padding-left:0; }
.rasgo + .rasgo{ border-left:1px solid rgba(255,255,255,.18); }
.rasgo__ic{ width:38px; height:38px; flex:0 0 auto; border:1px solid rgba(211,172,109,.55); border-radius:50%; display:grid; place-items:center; color:var(--brass-2); }
.rasgo__t b{ display:block; font-family:var(--serif); font-size:1.24rem; line-height:1.1; color:#fff; }
.rasgo__t span{ display:block; font-size:.64rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.78; margin-top:2px; }
.hero__scroll{ margin-left:auto; align-self:center; display:flex; align-items:center; gap:12px; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; opacity:.7; }
.hero__scroll::after{ content:''; width:1px; height:34px; background:linear-gradient(#fff,transparent); animation:baja 1.8s var(--ease) infinite; }
@keyframes baja{ 0%{ transform:scaleY(.3); transform-origin:top; opacity:.3;} 50%{ transform:scaleY(1); opacity:1;} 100%{ transform:scaleY(.3); transform-origin:bottom; opacity:.3;} }

/* Etiqueta vertical lateral */
.hero__vert{
  position:absolute; right:clamp(26px,3vw,44px); top:50%; z-index:3;
  transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; opacity:.7;
  display:flex; align-items:center; gap:20px;
}
.hero__vert::after{ content:''; height:70px; width:1px; background:linear-gradient(currentColor,transparent); }

@keyframes subir{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }

/* ==========================================================================
   Intro / bienvenida
   ========================================================================== */
.intro{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,84px); align-items:center; }
.intro__fotos{ position:relative; }
.intro__fotos .m1{ border-radius:4px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 60px rgba(20,26,18,.18); }
.intro__fotos .m1 img{ width:100%; height:100%; object-fit:cover; }
.intro__fotos .m2{
  position:absolute; right:-7%; bottom:-9%; width:54%; aspect-ratio:1/1;
  border:7px solid var(--ivory); border-radius:4px; overflow:hidden;
  box-shadow:0 24px 50px rgba(20,26,18,.24);
}
.intro__fotos .m2 img{ width:100%; height:100%; object-fit:cover; }
.intro__sello{
  position:absolute; left:-26px; top:34px; z-index:2;
  width:104px; height:104px; border-radius:50%;
  background:var(--brass); color:#1a1206;
  display:grid; place-items:center; text-align:center;
  box-shadow:0 16px 34px rgba(189,145,79,.4);
}
.intro__sello b{ font-family:var(--serif); font-size:2.2rem; line-height:.8; }
.intro__sello span{ display:block; font-size:.54rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin-top:4px; }

.intro__cuerpo p{ color:var(--ink-2); }
.cifras{ display:flex; gap:0; margin-top:36px; border-top:1px solid var(--line); }
.cifra{ padding:22px 24px 4px 0; border-right:1px solid var(--line); }
.cifra:last-child{ border-right:0; padding-right:0; }
.cifra b{ display:block; font-family:var(--serif); font-size:clamp(2rem,3vw,2.7rem); line-height:1; color:var(--forest); }
.cifra span{ display:block; font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-top:8px; }

/* ==========================================================================
   Marquesina
   ========================================================================== */
.marq{ background:var(--forest-2); color:var(--brass-2); padding:20px 0; overflow:hidden; border-block:1px solid rgba(211,172,109,.16); }
.marq__t{ display:flex; gap:34px; width:max-content; animation:desliza 34s linear infinite; }
.marq__t span{ font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,2rem); font-style:italic; display:flex; align-items:center; gap:34px; white-space:nowrap; }
.marq__t span::after{ content:'✦'; font-size:.7em; color:var(--brass); opacity:.7; }
@keyframes desliza{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================================
   Las cabañas
   ========================================================================== */
.aloja{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,80px); align-items:center; }
.aloja__foto{ position:relative; border-radius:4px; overflow:hidden; aspect-ratio:5/4; box-shadow:0 34px 70px rgba(20,26,18,.2); }
.aloja__foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.aloja__foto:hover img{ transform:scale(1.05); }
.aloja__cap{ position:absolute; left:18px; bottom:16px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6); z-index:2; }
.aloja__foto::after{ content:''; position:absolute; inset:auto 0 0 0; height:38%; background:linear-gradient(transparent,rgba(14,27,19,.66)); }

.incluye{ display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; margin:28px 0 0; }
.incluye li{ display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--ink-2); }
.incluye svg{ flex:0 0 auto; margin-top:5px; color:var(--brass); }

.precio{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  margin-top:32px; padding:24px 26px;
  background:var(--white); border:1px solid var(--line); border-radius:4px;
}
.precio__n{ font-family:var(--serif); font-size:2.6rem; line-height:.9; color:var(--forest); }
.precio__n small{ display:block; font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-top:8px; }
.nota{ font-size:.76rem; color:var(--ink-2); font-style:italic; margin-top:12px; }

/* ==========================================================================
   Autosustentable (tarjetas visuales)
   ========================================================================== */
.eco-cabecera{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(38px,5vw,58px); }
.eco{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.eco__c{
  position:relative; overflow:hidden; border-radius:4px;
  aspect-ratio:3/4.6; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px 24px; color:#fff; isolation:isolate;
}
.eco__c img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1s var(--ease); }
.eco__c::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,38,27,.2) 0%, rgba(14,27,19,.5) 45%, rgba(10,20,14,.94) 100%); transition:background .5s var(--ease); }
.eco__c:hover img{ transform:scale(1.07); }
.eco__c:hover::after{ background:linear-gradient(180deg, rgba(20,38,27,.15) 0%, rgba(14,27,19,.45) 40%, rgba(10,20,14,.9) 100%); }
.eco__ic{ width:48px; height:48px; border-radius:50%; border:1px solid rgba(211,172,109,.5); display:grid; place-items:center; color:var(--brass-2); margin-bottom:auto; }
.eco__n{ font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--brass-2); }
.eco__c h3{ color:#fff; font-size:1.5rem; margin:10px 0 0; }
.eco__c p{ font-size:.9rem; color:#cfc6b4; margin:12px 0 0;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s var(--ease), opacity .45s var(--ease), margin .45s var(--ease);
}
.eco__c:hover p,.eco__c:focus-within p{ max-height:180px; opacity:1; margin-top:12px; }

/* ==========================================================================
   Alrededores
   ========================================================================== */
.cerca{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,26px); }
.dest{ position:relative; overflow:hidden; border-radius:4px; aspect-ratio:3/4.2; display:flex; align-items:flex-end; color:#fff; isolation:isolate; box-shadow:0 20px 44px rgba(20,26,18,.16); }
.dest img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s var(--ease); }
.dest::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(14,27,19,0) 32%, rgba(14,27,19,.92) 100%); }
.dest:hover img{ transform:scale(1.07); }
.dest__c{ padding:28px 26px; }
.dest__t{ display:inline-flex; align-items:center; gap:8px; font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-2); margin-bottom:12px; }
.dest h3{ color:#fff; }
.dest p{ font-size:.9rem; color:#d7cebb; margin-top:8px; }

/* ==========================================================================
   Galería
   ========================================================================== */
/* Filtros */
.gal-filtros{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:clamp(26px,3vw,38px); }
.filtro{
  padding:9px 20px; border-radius:999px; border:1px solid var(--line);
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filtro:hover{ border-color:var(--brass); color:var(--ink); }
.filtro[aria-pressed="true"]{ background:var(--forest); border-color:var(--forest); color:#fff; }

.galeria{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; grid-auto-flow:dense; gap:14px; }
.gf{ margin:0; position:relative; overflow:hidden; border-radius:4px; background:var(--ivory-2); cursor:zoom-in;
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.gf img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .5s var(--ease); }
.gf::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,27,19,0) 45%,rgba(11,22,15,.82) 100%); opacity:0; transition:opacity .45s var(--ease); }
.gf:hover img{ transform:scale(1.08); }
.gf:hover::after{ opacity:1; }
.gf figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 18px; color:#fff; font-size:.82rem; font-weight:500;
  transform:translateY(10px); opacity:0; transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.gf:hover figcaption{ transform:none; opacity:1; }
.gf__zoom{
  position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border-radius:50%;
  background:rgba(255,253,248,.92); color:var(--forest); display:grid; place-items:center;
  transform:scale(.5); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.gf:hover .gf__zoom{ transform:none; opacity:1; }
.gf--w{ grid-column:span 2; } .gf--h{ grid-row:span 2; }
.gf.oculto{ opacity:0; transform:scale(.94); pointer-events:none; }

/* Visor */
.visor{ position:fixed; inset:0; z-index:500; background:rgba(11,20,14,.96); display:grid; place-items:center; padding:clamp(14px,4vw,54px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; }
.visor.on{ opacity:1; visibility:visible; }
.visor img{ max-width:100%; max-height:82vh; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.visor__x{ position:absolute; top:16px; right:20px; width:46px; height:46px; color:#fff; font-size:1.9rem; line-height:1; }
.visor__ir{ position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; color:#fff; font-size:1.7rem; background:rgba(255,255,255,.1); display:grid; place-items:center; transition:background .25s var(--ease); }
.visor__ir:hover{ background:rgba(255,255,255,.24); }
.visor__ir--a{ left:12px; } .visor__ir--s{ right:12px; }
.visor__n{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-size:.78rem; letter-spacing:.16em; opacity:.75; }

/* ==========================================================================
   Contacto
   ========================================================================== */
.cont{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,72px); align-items:start; }
.datos{ margin-top:8px; }
.datos li{ display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.datos li:first-child{ border-top:1px solid var(--line); }
.datos svg{ flex:0 0 auto; margin-top:2px; color:var(--brass); }
.datos dt{ font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-bottom:4px; }
.datos dd{ margin:0; font-size:1rem; font-weight:500; }
.datos dd a{ border-bottom:1px solid var(--line); transition:border-color .25s var(--ease); }
.datos dd a:hover{ border-color:var(--brass); }

.forma{ background:var(--white); border:1px solid var(--line); border-radius:4px; padding:clamp(24px,3vw,38px); box-shadow:0 24px 54px rgba(20,26,18,.1); }
.forma h3{ margin-bottom:6px; }
.forma__s{ font-size:.88rem; color:var(--ink-2); margin-bottom:24px; }
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.campo{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.campo--full{ grid-column:1/-1; }
.campo label{ font-size:.64rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2); }
.campo input,.campo select,.campo textarea{
  font:inherit; font-size:.96rem; color:var(--ink); width:100%; min-width:0;
  padding:13px 14px; background:var(--ivory); border:1px solid var(--line); border-radius:3px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(33,64,47,.1); }
.campo textarea{ resize:vertical; min-height:84px; }
.campo select{ -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23574f45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; }
.cuenta{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.cuenta__f{ display:flex; justify-content:space-between; gap:14px; font-size:.9rem; color:var(--ink-2); margin-bottom:9px; }
.cuenta__f b{ color:var(--ink); font-weight:600; }
.cuenta__tot{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.cuenta__tot span{ font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.cuenta__tot b{ font-family:var(--serif); font-size:2rem; line-height:1; color:var(--forest); }
.forma .btn{ width:100%; margin-top:22px; }

/* ==========================================================================
   Pie
   ========================================================================== */
.pie{ background:var(--forest-3); color:#a49a86; padding:clamp(56px,7vw,80px) 0 0; }
.pie__r{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:40px; padding-bottom:46px; }
.pie .marca{ color:#fff; margin-bottom:16px; }
.pie .marca__n{ color:#fff; }
.pie p{ font-size:.9rem; max-width:36ch; }
.pie h4{ color:#fff; font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin:0 0 16px; }
.pie li{ margin-bottom:10px; font-size:.92rem; }
.pie a:hover{ color:var(--brass-2); }
.pie__b{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.78rem; color:#7d7365; }

.wa{ position:fixed; right:18px; bottom:18px; z-index:180; width:54px; height:54px; border-radius:50%; background:#1f8f4d; color:#fff; display:grid; place-items:center; box-shadow:0 10px 28px rgba(31,143,77,.4); transition:transform .3s var(--ease); }
.wa:hover{ transform:scale(1.08); }

/* ==========================================================================
   Página de la cabaña
   ========================================================================== */
.sub-hero{ position:relative; padding:calc(var(--nav) + 60px) 0 clamp(38px,5vw,66px); background:var(--forest-2); color:#fff; overflow:hidden; }
.sub-hero__bg{ position:absolute; inset:0; z-index:0; }
.sub-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.sub-hero__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,27,19,.72),rgba(14,27,19,.92)); }
.sub-hero__in{ position:relative; z-index:2; }
.miga{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; margin-bottom:20px; }
.miga a:hover{ color:var(--brass-2); }
.sub-hero h1{ color:#fff; max-width:14ch; }
.sub-hero h1 em{ color:var(--brass-2); }
.sub-hero__meta{ display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:22px; font-size:.9rem; color:#d7cebb; }
.sub-hero__meta span{ display:inline-flex; align-items:center; gap:9px; }
.sub-hero__meta svg{ color:var(--brass-2); }

.mirador{ padding-top:clamp(30px,4vw,46px); }
/* En pc el visor se limita a un ancho fijo: las fotos de origen no pasan de
   ~800px, así que mostrarlas a todo el ancho del contenido (hasta 1240px)
   las obligaba a ampliarse de más y se pixeleaban. Con una caja más chica
   y centrada, la ampliación es mínima y la imagen se ve nítida. En móvil
   se mantiene a todo el ancho, como antes. */
.mirador__g{ overflow:hidden; border-radius:4px; aspect-ratio:16/9; background:var(--ivory-2); cursor:zoom-in; box-shadow:0 30px 70px rgba(20,26,18,.28); }
.mirador__g img{ width:100%; height:100%; object-fit:cover; transition:opacity .3s var(--ease); }
.tiras{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
@media (min-width:1025px){
  .mirador__g{ max-width:600px; aspect-ratio:3/2; margin-inline:auto; }
  .tiras{ max-width:600px; margin-left:auto; margin-right:auto; }
}
.tira{ flex:0 0 104px; height:72px; border-radius:3px; overflow:hidden; opacity:.5; border:2px solid transparent; transition:opacity .25s var(--ease), border-color .25s var(--ease); }
.tira img{ width:100%; height:100%; object-fit:cover; }
.tira:hover{ opacity:.85; }
.tira[aria-current="true"]{ opacity:1; border-color:var(--brass); }

.ficha{ display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(40px,5vw,68px); align-items:start; }
.ficha__b{ margin-bottom:clamp(38px,4.6vw,56px); }
.ficha__b h2{ font-size:clamp(1.7rem,2.8vw,2.3rem); margin-bottom:18px; }
.ficha__b p{ color:var(--ink-2); }
.pares{ width:100%; border-collapse:collapse; font-size:.95rem; }
.pares td{ padding:14px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.pares td:first-child{ color:var(--ink-2); width:46%; }
.pares td:last-child{ font-weight:500; }
.reserva-caja{ background:var(--white); border:1px solid var(--line); border-radius:4px; padding:28px; position:sticky; top:calc(var(--nav) + 16px); box-shadow:0 24px 54px rgba(20,26,18,.1); }
.reserva-caja h3{ margin-bottom:4px; }
.dos-fotos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dos-fotos .m{ border-radius:4px; overflow:hidden; aspect-ratio:3/4; }
.dos-fotos img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .intro,.aloja,.cont,.ficha{ grid-template-columns:1fr; }
  .intro__fotos{ max-width:520px; margin-inline:auto; }
  .aloja__foto{ aspect-ratio:16/10; }
  .eco{ grid-template-columns:1fr 1fr; }
  .eco__c{ aspect-ratio:3/3.4; min-height:300px; }
  .eco__c p{ max-height:180px; opacity:1; margin-top:12px; }   /* táctil: texto visible */
  .reserva-caja{ position:static; }
  .pie__r{ grid-template-columns:1fr 1fr; }
  .galeria{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:820px){
  :root{ --gut:18px; }
  .nav__menu{
    position:fixed; inset:var(--nav) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    margin:0; background:var(--ivory); padding:6px var(--gut) 22px; border-bottom:1px solid var(--line);
    transform:translateY(-14px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    box-shadow:0 22px 44px rgba(20,26,18,.12);
  }
  .nav__menu.abre{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav__menu a{ color:var(--ink); font-family:var(--serif); font-size:1.7rem; letter-spacing:0; text-transform:none; padding:13px 0; border-bottom:1px solid var(--line); opacity:1; }
  .nav__menu a:last-child{ border-bottom:0; }
  .nav__menu a::after{ display:none; }
  .burg{ display:flex; }
  .nav__tel span{ display:none; }
  .nav__tel{ width:40px; height:40px; justify-content:center; border:1px solid currentColor; border-radius:50%; }
  .nav.solida .nav__tel{ border-color:var(--line); }

  .hero__scroll{ display:none; }
  .rasgo{ padding:0 clamp(12px,3vw,20px); }
  .rasgo__t span{ display:none; }
  .rasgo__t b{ font-size:1.05rem; }

  .hero__vert{ display:none; }
  .cerca{ grid-template-columns:1fr; }
  .dest{ aspect-ratio:16/10; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .hero{ min-height:92svh; }
  .cifras{ flex-wrap:wrap; }
  .cifra{ flex:1 1 46%; padding:18px 16px 4px 0; }
  .cifra:nth-child(2n){ border-right:0; }
  .cifra:nth-child(-n+2){ border-bottom:1px solid var(--line); padding-bottom:18px; }
  .intro__fotos .m2{ display:none; }
  .intro__sello{ left:12px; width:88px; height:88px; }
  .incluye{ grid-template-columns:1fr; }
  .eco{ grid-template-columns:1fr; }
  .eco__c{ aspect-ratio:16/11; min-height:0; }
  .campos{ grid-template-columns:1fr; }
  .galeria{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:10px; }
  .gf--h{ grid-row:span 1; }
  .pie__r{ grid-template-columns:1fr; gap:30px; }
  .precio{ flex-direction:column; align-items:stretch; text-align:left; }
  .precio .btn{ width:100%; }
  .hero__pie{ display:none; }
  .sub-hero__meta{ gap:10px 20px; }
}

@media (max-width:380px){ .marca__n{ font-size:1.2rem; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
  .hero h1 span,.hero__ubic,.hero__sub,.hero__cta{ opacity:1; animation:none; }
}