@charset "UTF-8";
/* ==========================================================================
   Cabañas & Lodge Majoaal — Licán Ray
   Hoja de estilo única. Sin build, sin framework, sin dependencias.

   PALETA — de dónde sale cada color:
     basalto     #14120F  arena volcánica negra de la playa de Licán Ray
     basalto-2   #1F1B16  la misma piedra un tono más arriba, para tarjetas
     niebla      #F3EEE5  la niebla de la mañana sobre el Calafquén
     niebla-2    #E7DFD2  esa niebla cuando se espesa, para bordes
     tinta       #241F1A  corteza mojada de coigüe
     madera      #8A4B2A  el tinte caoba de la fachada de las cabañas
     cobre       #C2703C  el naranjo del logo Majoaal y de sus kayaks
     brasa       #E8A961  fuego de estufa a leña
     calafquen   #2E5E63  el azul-verde del lago con el bosque encima
     cordillera  #4A6B7C  el azul lavado de la cordillera al fondo
     musgo       #3D4A38  bosque nativo en sombra (verde apagado, no agrícola)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --basalto:      #14120f;
  --basalto-2:    #1f1b16;
  --basalto-3:    #2a251e;
  --niebla:       #f3eee5;
  --niebla-2:     #e7dfd2;
  --tinta:        #241f1a;
  --tinta-suave:  #5c534a;
  --hueso:        #fbf8f3;
  --hueso-suave:  #cfc5b6;
  --madera:       #8a4b2a;
  --cobre:        #c2703c;
  --cobre-claro:  #d98a4e;
  --brasa:        #e8a961;
  --calafquen:    #2e5e63;
  --cordillera:   #4a6b7c;
  --musgo:        #3d4a38;

  /* Young Serif tiene un solo peso a propósito: es una display de serifas
     gruesas, con el aire de un letrero tallado. Karla es la grotesca de
     cuerpo, variable de 300 a 800. */
  --fuente-titulo: 'Young Serif', Georgia, 'Times New Roman', serif;
  --fuente-cuerpo: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --ancho:        1180px;
  --ancho-angosto: 760px;
  /* Esquinas casi rectas en todo el sitio. El radio grande y blando es el
     acabado de plantilla; acá el lenguaje es de tabla y letrero. */
  --radio:        2px;
  --radio-chico:  2px;

  /* Curva de salida: rápida al principio, se posa despacio. */
  --curva: cubic-bezier(.22, .61, .36, 1);
  --sombra:       0 18px 48px -22px rgba(20, 18, 15, .42);
  --sombra-alta:  0 30px 70px -28px rgba(20, 18, 15, .55);
}

/* --------------------------------------------------------------------------
   2. RESET Y BASE
   -------------------------------------------------------------------------- */

/* Va temprano y con !important a propósito: si no, cualquier regla con
   display de más abajo le gana al atributo y el elemento reaparece. */
[hidden] { display: none !important; }

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

html {
  scroll-behavior: smooth;
  /* El header es fijo: sin esto, los anclajes dejan el título tapado. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  color: var(--tinta);
  background: var(--niebla);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* Mientras una foto no esté pegada todavía, el navegador dibuja el texto
   alternativo encima del placeholder y se ve como un error. Con el color en
   transparente se ve solo el degradado de la paleta, y el alt sigue ahí para
   los lectores de pantalla y para Google. */
.hero__fondo img,
.panel__foto img,
.ficha__foto img { color: transparent; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  /* Young Serif solo trae el peso 400. Poner 600 acá haría que el navegador
     la engorde sintéticamente y se vería sucia en pantalla. */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
}

p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--cobre);
  outline-offset: 3px;
  border-radius: 3px;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--cobre);
  color: var(--hueso);
  padding: .8rem 1.4rem;
  text-decoration: none;
}
.saltar:focus { left: 0; }

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}
.contenedor--angosto { width: min(100% - 2.5rem, var(--ancho-angosto)); }

/* --------------------------------------------------------------------------
   3. FONDO AMBIENTAL
   Tres capas, todas en CSS puro: ni canvas, ni librerías, ni un solo KB de
   red. Se elige niebla y no shimmer de agua porque es lo que de verdad pasa
   ahí a las ocho de la mañana, y porque una textura de agua compite con las
   fotos en vez de quedarse atrás.

     a) manchas   — masas de color que derivan en ciclos de 78 a 104 s
     b) jirones   — bandas largas que cruzan la pantalla de lado a lado
     c) ceniza    — motas en suspensión que suben muy despacio
     d) brasas    — el equivalente de la ceniza dentro de las zonas oscuras,
                    hecho con degradados en vez de elementos, para no sumar
                    decenas de nodos al DOM
   -------------------------------------------------------------------------- */
.niebla {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* --- a) manchas ----------------------------------------------------------- */
.niebla__mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  will-change: transform;
}

.niebla__mancha--1 {
  width: 46vw; height: 46vw;
  top: -8vw; left: -10vw;
  background: radial-gradient(circle, rgba(194,112,60,.24) 0%, rgba(194,112,60,0) 70%);
  animation: derivar-1 78s ease-in-out infinite;
}
.niebla__mancha--2 {
  width: 54vw; height: 54vw;
  top: 32%; right: -16vw;
  background: radial-gradient(circle, rgba(46,94,99,.22) 0%, rgba(46,94,99,0) 70%);
  animation: derivar-2 96s ease-in-out infinite;
}
.niebla__mancha--3 {
  width: 40vw; height: 40vw;
  bottom: -12vw; left: 22%;
  background: radial-gradient(circle, rgba(61,74,56,.20) 0%, rgba(61,74,56,0) 70%);
  animation: derivar-3 88s ease-in-out infinite;
}
.niebla__mancha--4 {
  width: 34vw; height: 34vw;
  top: 58%; left: -8vw;
  background: radial-gradient(circle, rgba(74,107,124,.20) 0%, rgba(74,107,124,0) 70%);
  animation: derivar-4 104s ease-in-out infinite;
}

@keyframes derivar-1 {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(7vw, 5vw, 0) scale(1.15); }
}
@keyframes derivar-2 {
  0%, 100% { transform: translate3d(0,0,0) scale(1.05); }
  50%      { transform: translate3d(-9vw, -6vw, 0) scale(.92); }
}
@keyframes derivar-3 {
  0%, 100% { transform: translate3d(0,0,0) scale(.95); }
  50%      { transform: translate3d(5vw, -7vw, 0) scale(1.2); }
}
@keyframes derivar-4 {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(8vw, -4vw, 0) scale(1.18); }
  66%      { transform: translate3d(3vw, 6vw, 0) scale(.9); }
}

/* --- b) jirones ----------------------------------------------------------- */
/* Bandas muy anchas y muy bajas: leídas de reojo son la niebla corriendo por
   la ladera. Cruzan la pantalla entera y vuelven a entrar por el otro lado. */
.niebla__jiron {
  position: absolute;
  left: -60%;
  width: 75%;
  height: 16vh;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0;
  will-change: transform, opacity;
}
.niebla__jiron--1 {
  top: 14%;
  background: linear-gradient(90deg, rgba(251,248,243,0) 0%, rgba(251,248,243,.30) 50%, rgba(251,248,243,0) 100%);
  animation: cruzar 64s linear infinite;
}
.niebla__jiron--2 {
  top: 47%;
  height: 22vh;
  background: linear-gradient(90deg, rgba(207,197,182,0) 0%, rgba(207,197,182,.26) 50%, rgba(207,197,182,0) 100%);
  animation: cruzar 92s linear infinite -30s;
}
.niebla__jiron--3 {
  top: 76%;
  height: 12vh;
  background: linear-gradient(90deg, rgba(251,248,243,0) 0%, rgba(251,248,243,.22) 50%, rgba(251,248,243,0) 100%);
  animation: cruzar 76s linear infinite -55s;
}

@keyframes cruzar {
  0%       { transform: translate3d(0, 0, 0);          opacity: 0; }
  12%      {                                            opacity: .55; }
  85%      {                                            opacity: .4; }
  100%     { transform: translate3d(220vw, -3vh, 0);   opacity: 0; }
}

/* --- c) ceniza ------------------------------------------------------------ */
/* Motas oscuras que suben sobre el fondo claro. El desvío lateral de cada una
   es distinto para que no parezcan una fila de burbujas. */
.ceniza {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ceniza span {
  position: absolute;
  bottom: -3vh;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(92,83,74,.5);
  opacity: 0;
  will-change: transform, opacity;
  animation: flotar linear infinite;
}

@keyframes flotar {
  0%   { transform: translate3d(0, 0, 0) scale(.5);                       opacity: 0; }
  8%   {                                                                  opacity: .75; }
  70%  {                                                                  opacity: .5; }
  100% { transform: translate3d(var(--desvio, 4vw), -108vh, 0) scale(1);  opacity: 0; }
}

.ceniza span:nth-child(1)  { left:  4%; --desvio:  5vw; animation-duration: 34s; animation-delay:  -2s; }
.ceniza span:nth-child(2)  { left: 11%; --desvio: -3vw; animation-duration: 47s; animation-delay: -14s; width: 2px; height: 2px; }
.ceniza span:nth-child(3)  { left: 18%; --desvio:  7vw; animation-duration: 29s; animation-delay: -25s; }
.ceniza span:nth-child(4)  { left: 24%; --desvio: -6vw; animation-duration: 55s; animation-delay:  -7s; width: 4px; height: 4px; }
.ceniza span:nth-child(5)  { left: 31%; --desvio:  2vw; animation-duration: 38s; animation-delay: -31s; width: 2px; height: 2px; }
.ceniza span:nth-child(6)  { left: 37%; --desvio:  9vw; animation-duration: 43s; animation-delay: -18s; }
.ceniza span:nth-child(7)  { left: 44%; --desvio: -4vw; animation-duration: 31s; animation-delay: -40s; }
.ceniza span:nth-child(8)  { left: 50%; --desvio:  6vw; animation-duration: 51s; animation-delay:  -5s; width: 2px; height: 2px; }
.ceniza span:nth-child(9)  { left: 56%; --desvio: -8vw; animation-duration: 36s; animation-delay: -22s; }
.ceniza span:nth-child(10) { left: 62%; --desvio:  3vw; animation-duration: 45s; animation-delay: -37s; width: 4px; height: 4px; }
.ceniza span:nth-child(11) { left: 68%; --desvio: -5vw; animation-duration: 33s; animation-delay: -11s; }
.ceniza span:nth-child(12) { left: 74%; --desvio:  8vw; animation-duration: 58s; animation-delay: -46s; width: 2px; height: 2px; }
.ceniza span:nth-child(13) { left: 80%; --desvio: -2vw; animation-duration: 40s; animation-delay: -28s; }
.ceniza span:nth-child(14) { left: 85%; --desvio:  5vw; animation-duration: 30s; animation-delay:  -9s; }
.ceniza span:nth-child(15) { left: 90%; --desvio: -7vw; animation-duration: 49s; animation-delay: -35s; width: 2px; height: 2px; }
.ceniza span:nth-child(16) { left: 95%; --desvio:  4vw; animation-duration: 37s; animation-delay: -20s; }
.ceniza span:nth-child(17) { left:  8%; --desvio: -9vw; animation-duration: 53s; animation-delay: -43s; width: 2px; height: 2px; }
.ceniza span:nth-child(18) { left: 71%; --desvio:  2vw; animation-duration: 42s; animation-delay: -16s; width: 4px; height: 4px; }

/* --- d) brasas ------------------------------------------------------------ */
/* Sobre fondo oscuro las motas oscuras desaparecen, así que las zonas negras
   llevan su propia capa: puntos de brasa hechos con degradados sobre un solo
   pseudoelemento. Dieciocho nodos más por sección sería un desperdicio. */
.seccion--oscura::after,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(232,169,97,.75), transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 62%, rgba(232,169,97,.55), transparent 100%),
    radial-gradient(1.8px 1.8px at 58% 27%, rgba(217,138,78,.6),  transparent 100%),
    radial-gradient(1.1px 1.1px at 77% 78%, rgba(232,169,97,.5),  transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 41%, rgba(232,169,97,.65), transparent 100%),
    radial-gradient(1.3px 1.3px at 23% 88%, rgba(217,138,78,.45), transparent 100%);
  background-size: 380px 460px;
  animation: brasas 46s linear infinite;
}
@keyframes brasas {
  from { background-position: 0 0; }
  to   { background-position: -40px -460px; }
}

/* --------------------------------------------------------------------------
   4. REVEALS AL SCROLL
   El estado oculto cuelga de .js. Si el JavaScript no corre, nada de esto
   aplica y la página se lee completa.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(7px);
  transition:
    opacity   .85s var(--curva),
    transform .85s var(--curva),
    filter    .85s var(--curva);
}
.js .reveal.visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --------------------------------------------------------------------------
   5. TIPOGRAFÍA COMPARTIDA
   -------------------------------------------------------------------------- */
.kicker {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--madera);
  margin: 0 0 .9rem;
}
.kicker--claro { color: var(--brasa); }

.titulo-seccion {
  font-size: clamp(2rem, 4.6vw, 3.15rem);
  color: var(--tinta);
  margin: 0 0 1.1rem;
  position: relative;
  padding-bottom: 1.1rem;
}
.titulo-seccion--claro { color: var(--hueso); }

/* La línea que crece bajo el título cuando la sección entra en pantalla.
   El estado por defecto es la línea ya dibujada: sin JS no se pierde el
   detalle. Solo con .js parte en cero y crece al aparecer. */
.titulo-seccion::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 96px;
  background: linear-gradient(90deg, var(--cobre), var(--brasa));
  transition: width 1.1s var(--curva) .25s;
}
.js .reveal .titulo-seccion::after         { width: 0; }
.js .reveal.visible .titulo-seccion::after { width: 96px; }

.seccion__cabecera--centrada .titulo-seccion::after { left: 50%; transform: translateX(-50%); }

.entradilla {
  font-size: 1.15rem;
  color: var(--tinta-suave);
  max-width: 62ch;
  margin: 0;
}
.entradilla--clara { color: var(--hueso-suave); }

/* Marca visual de dato de relleno: en la demo se ve un punto cobre al lado
   para poder decir en voz alta "esto va con sus datos reales". */
.es-ejemplo { position: relative; }
.es-ejemplo::before {
  content: '';
  position: absolute;
  left: -.85rem;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cobre);
  opacity: .55;
}

/* --------------------------------------------------------------------------
   6. BOTONES
   -------------------------------------------------------------------------- */
/* Rectangulares y a ras, no la píldora con sombra de color que traen todas
   las plantillas. La referencia es un letrero atornillado a la pared: caja
   recta, versalitas espaciadas y un panel de color que sube desde abajo al
   pasar el mouse. Nada de que el botón "salte" hacia arriba. */
.boton {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--fuente-cuerpo);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 1.85rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: color .45s var(--curva), border-color .45s var(--curva);
}

/* El panel que sube. z-index negativo dentro del propio botón (por eso el
   isolation de arriba): queda bajo el texto y sobre el fondo del botón. */
.boton::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--curva);
}
.boton:hover::before,
.boton:focus-visible::before { transform: scaleY(1); }

/* Primario: cobre lleno que se apaga a basalto y deja el texto en brasa. */
.boton--wa {
  background: var(--cobre);
  color: var(--hueso);
  border-color: var(--cobre);
}
.boton--wa::before { background: var(--basalto); }
.boton--wa:hover,
.boton--wa:focus-visible { color: var(--brasa); border-color: var(--basalto); }

/* Secundario: solo el contorno, y el cobre lo rellena al pasar por encima. */
.boton--fantasma {
  color: var(--tinta);
  border-color: rgba(36,31,26,.3);
}
.boton--fantasma::before { background: var(--cobre); }
.boton--fantasma:hover,
.boton--fantasma:focus-visible { color: var(--hueso); border-color: var(--cobre); }

.seccion--oscura .boton--fantasma,
.hero .boton--fantasma {
  color: var(--hueso);
  border-color: rgba(251,248,243,.32);
}

.boton--grande { padding: 1.2rem 2.2rem; font-size: .78rem; }

.ico-wa { flex: none; }

/* --------------------------------------------------------------------------
   7. CABECERA
   -------------------------------------------------------------------------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .4s var(--curva),
              box-shadow .4s var(--curva),
              backdrop-filter .4s var(--curva);
}
.cabecera--fija {
  background: rgba(20,18,15,.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(251,248,243,.09);
}

.cabecera__interior {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 76px;
}

.marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--hueso);
  margin-right: auto;
}
.marca__icono { color: var(--brasa); display: flex; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__texto strong {
  font-family: var(--fuente-titulo);
  font-size: 1.38rem;
  font-weight: 400;
  letter-spacing: .005em;
}
.marca__texto em {
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--hueso-suave);
}

.nav__lista { display: flex; gap: 1.7rem; }
.nav__lista a {
  text-decoration: none;
  color: var(--hueso);
  font-size: .92rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 3px;
}
.nav__lista a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--brasa);
  transition: width .3s var(--curva);
}
.nav__lista a:hover::after { width: 100%; }

.hamburguesa {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  width: 24px; height: 2px;
  background: var(--hueso);
  margin: 5px 0;
  transition: transform .3s var(--curva), opacity .3s var(--curva);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 0 0;
  background: var(--basalto);
  overflow: hidden;
}

.hero__fondo { position: absolute; inset: 0; }
.hero__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* La foto va casi entera y el contraste del texto lo pone el velo de abajo,
     no esta opacidad: bajarla mucho entierra una foto diurna en el negro. */
  opacity: .88;
  /* Deriva lentísima sobre la foto: en 44 s recorre un 2% de encuadre. No se
     nota mirándola, se nota si uno se queda un rato. */
  animation: vaiven 44s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes vaiven {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -1.1%, 0); }
}
/* Placeholder digno mientras no hay foto: si el archivo falta, se ve un
   degradado de la paleta y no un ícono roto sobre blanco. */
.hero__fondo {
  background:
    radial-gradient(120% 80% at 70% 20%, rgba(74,107,124,.55) 0%, rgba(20,18,15,0) 60%),
    linear-gradient(160deg, #2c3a33 0%, #1d2621 45%, var(--basalto) 100%);
}
/* Velo para que el texto se lea sobre cualquier foto. Cargado a la izquierda,
   que es donde está el titular: la derecha deja respirar la foto. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(20,18,15,.78) 0%, rgba(20,18,15,.45) 55%, rgba(20,18,15,.18) 100%),
    linear-gradient(to bottom, rgba(20,18,15,.55) 0%, rgba(20,18,15,.05) 40%, rgba(20,18,15,.88) 100%);
  z-index: 1;
}

/* Mismo ancho que la barra de cifras y que la marca de la cabecera: los tres
   tienen que arrancar en la misma vertical o el hero se ve desalineado. El
   límite de medida se pone en el texto, no en el contenedor. */
.hero__interior {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.hero__titulo {
  font-size: clamp(2.6rem, 7.6vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.04;
  margin: 0 0 1.5rem;
  color: var(--hueso);
}

/* Degradado "amanecer sobre el lago": el sol bajo entrando por el este, el
   reflejo naranjo sobre el agua y el lado del lago que todavía está en
   sombra. El azul va saturado a propósito: si se aclara demasiado, la segunda
   línea se lee gris.
   Con @supports para que en un navegador viejo el titular quede blanco
   legible en vez de invisible. */
.degradado-amanecer { color: var(--hueso); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .degradado-amanecer {
    background: linear-gradient(103deg, #fbe4bd 0%, #eeae66 19%, #e08347 41%, #c4736b 59%, #7fa8b2 82%, #a9cdd6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero__bajada {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: rgba(251,248,243,.86);
  max-width: 56ch;
  margin: 0 0 2.2rem;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: .9rem; }

.cifras {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, var(--ancho));
  margin: 4.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(251,248,243,.14);
  border-block: 1px solid rgba(251,248,243,.14);
}
.cifras__item {
  background: var(--basalto);
  padding: 1.5rem 1rem;
  text-align: center;
}
.cifras__item b {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--brasa);
  line-height: 1.1;
}
.cifras__item span {
  display: block;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hueso-suave);
  margin-top: .35rem;
}

.hero__flecha {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 3;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
}
.hero__flecha span {
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--hueso-suave);
  border-bottom: 1.5px solid var(--hueso-suave);
  transform: rotate(45deg);
  animation: bajar 2.4s var(--curva) infinite;
}
@keyframes bajar {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: .45; }
  50%      { transform: rotate(45deg) translate(4px,4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   9. SECCIONES
   -------------------------------------------------------------------------- */
.seccion {
  position: relative;
  z-index: 1;
  padding: clamp(4.5rem, 10vw, 8rem) 0;
}
.seccion--oscura {
  background: var(--basalto);
  color: var(--hueso);
}
.seccion__cabecera { margin-bottom: 3.5rem; }
.seccion__cabecera--centrada { text-align: center; }
.seccion__cabecera--centrada .entradilla { margin-inline: auto; }

/* --------------------------------------------------------------------------
   10. PANEL — foto a sangre fundida al fondo, alternando el lado
   El .reveal que se observa está en .panel__texto, nunca dentro de la foto:
   un elemento con máscara cerrada tiene área cero y no dispara nunca el
   IntersectionObserver, se queda invisible para siempre.
   -------------------------------------------------------------------------- */
.panel {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
  overflow: hidden;
}

.panel__foto {
  position: relative;
  min-height: 46vh;
  /* Placeholder de paleta mientras no está la foto. */
  background:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.025) 0 2px,
      rgba(0,0,0,.025) 2px 5px),
    linear-gradient(160deg, var(--calafquen) 0%, var(--musgo) 55%, var(--basalto) 100%);
}
.panel__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.panel__texto {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  width: min(100% - 2.5rem, 620px);
  margin-inline: auto;
}

/* En móvil la foto va arriba y se funde hacia abajo. */
.panel__foto {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

@media (min-width: 900px) {
  .panel { grid-template-columns: 1.08fr 1fr; align-items: stretch; }

  /* Por defecto: texto a la izquierda, foto a la derecha. */
  .panel__texto { order: 1; margin: 0 0 0 auto; padding-inline: 0 4rem; width: min(100%, 640px); }
  .panel__foto  { order: 2; min-height: 100%; }
  .panel__foto {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
            mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  }

  /* Invertido: foto a la izquierda. Se alterna sección a sección. */
  .panel--izq .panel__texto { order: 2; margin: 0 auto 0 0; padding-inline: 4rem 0; }
  .panel--izq .panel__foto  { order: 1; }
  .panel--izq .panel__foto {
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 34%);
            mask-image: linear-gradient(to left, transparent 0%, #000 34%);
  }
}

/* --------------------------------------------------------------------------
   11. FICHAS DE CABAÑA
   -------------------------------------------------------------------------- */
.cabanas { display: grid; gap: clamp(3rem, 6vw, 5.5rem); }

.ficha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.ficha__galeria {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  min-height: 340px;
}
.ficha__foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radio);
  position: relative;
  /* Placeholder de paleta mientras la foto no está pegada. Las vetas finas
     evitan que se vea como un degradado plano de plantilla. */
  background:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.028) 0 2px,
      rgba(0,0,0,.028) 2px 5px),
    linear-gradient(145deg, var(--madera) 0%, var(--basalto-3) 60%, var(--musgo) 100%);
}
/* Cada hueco de la galería con su propia mezcla: tres degradados idénticos
   uno al lado del otro se leen como un error de carga. */
.ficha__foto:nth-child(2) {
  background:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.028) 0 2px,
      rgba(0,0,0,.028) 2px 5px),
    linear-gradient(160deg, var(--calafquen) 0%, var(--basalto-3) 55%, var(--madera) 100%);
}
.ficha__foto:nth-child(3) {
  background:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.028) 0 2px,
      rgba(0,0,0,.028) 2px 5px),
    linear-gradient(125deg, var(--musgo) 0%, var(--cordillera) 58%, var(--basalto) 100%);
}

/* Sin el archivo, la imagen se retira del todo y queda el degradado solo. Sin
   esto el navegador estampa su ícono de imagen rota sobre el placeholder. */
.sin-foto img { display: none; }
.ficha__foto--principal { grid-row: span 2; }
.ficha__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--curva);
}
.ficha__foto:hover img { transform: scale(1.05); }

.ficha__encabezado {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: 1rem;
}
.ficha__titulo { font-size: clamp(1.7rem, 3.4vw, 2.35rem); }
.ficha__capacidad {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--calafquen);
}

.etiqueta {
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hueso);
  background: var(--madera);
  padding: .3rem .7rem;
}

.ficha__texto { color: var(--tinta-suave); max-width: 52ch; }

.lista-equipo {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .55rem;
  margin: 1.4rem 0 1.8rem;
}
.lista-equipo li {
  font-size: .84rem;
  padding: .34rem .8rem;
  border: 1px solid var(--niebla-2);
  background: rgba(255,255,255,.5);
  color: var(--tinta-suave);
}
/* En las píldoras el punto de "dato de ejemplo" iría fuera de la caja: acá
   se marca con el borde en vez del punto. */
.lista-equipo li.es-ejemplo::before { display: none; }
.lista-equipo li.es-ejemplo {
  border-color: rgba(194,112,60,.45);
  border-style: dashed;
  color: var(--madera);
}

.ficha__pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--niebla-2);
}
.precio { margin: 0; }
.precio b {
  font-family: var(--fuente-titulo);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--tinta);
}
.precio span { font-size: .85rem; color: var(--tinta-suave); }

.nota-tarifas {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--niebla-2);
  font-size: .92rem;
  color: var(--tinta-suave);
  text-align: center;
}

@media (min-width: 860px) {
  .ficha { grid-template-columns: 1.15fr 1fr; gap: 3.2rem; }
  .ficha__galeria { min-height: 420px; }
  .ficha--invertida .ficha__galeria { order: 2; }
  .ficha--invertida .ficha__cuerpo  { order: 1; }
}

/* --------------------------------------------------------------------------
   12. ENTORNO
   -------------------------------------------------------------------------- */
.entorno-lista { display: grid; gap: 1.7rem; margin-top: 2.5rem; }
.entorno-lista li {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 1.2rem;
  align-items: start;
  padding-bottom: 1.7rem;
  border-bottom: 1px solid rgba(251,248,243,.12);
}
.entorno-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.entorno-lista__dato {
  font-family: var(--fuente-titulo);
  font-size: 1.28rem;
  font-weight: 400;
  color: var(--brasa);
  line-height: 1.3;
}
.entorno-lista h3 {
  font-size: 1.12rem;
  color: var(--hueso);
  margin-bottom: .3rem;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  letter-spacing: 0;
}
.entorno-lista p { margin: 0; font-size: .96rem; color: var(--hueso-suave); }

/* --------------------------------------------------------------------------
   13. SERVICIOS
   -------------------------------------------------------------------------- */
.servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.6rem 1.8rem;
  margin-top: 2.4rem;
}
.servicio__ico {
  display: block;
  font-size: 1.2rem;
  color: var(--cobre);
  margin-bottom: .45rem;
}
.servicio h3 {
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: .2rem;
}
.servicio p { margin: 0; font-size: .9rem; color: var(--tinta-suave); }

.normas {
  margin-top: 3rem;
  padding: 1.8rem;
  border: 1px solid var(--niebla-2);
  border-radius: var(--radio);
  background: rgba(255,255,255,.45);
}
.normas__titulo {
  font-family: var(--fuente-cuerpo);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--madera);
  margin-bottom: .9rem;
}
.normas__lista { display: grid; gap: .5rem; font-size: .92rem; color: var(--tinta-suave); }
.normas__lista b { color: var(--tinta); }

/* --------------------------------------------------------------------------
   14. COTIZADOR
   -------------------------------------------------------------------------- */
.cotizador {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 1px solid rgba(251,248,243,.14);
  border-radius: var(--radio);
  background: var(--basalto-2);
}
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hueso-suave);
}
.opcional { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }

.campo input,
.campo select,
.campo textarea {
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  color: var(--hueso);
  background: var(--basalto-3);
  border: 1px solid rgba(251,248,243,.16);
  border-radius: var(--radio-chico);
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .3s var(--curva), background-color .3s var(--curva);
}
.campo textarea { resize: vertical; line-height: 1.6; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: rgba(232,169,97,.45); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--brasa);
  background: #322b23;
}
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(207,197,182,.5); }
/* El icono del selector de fecha es negro sobre fondo oscuro y se pierde. */
.campo input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); cursor: pointer; }

.cotizador__resumen {
  padding: 1rem 1.1rem;
  border-radius: var(--radio-chico);
  background: rgba(232,169,97,.08);
  border: 1px solid rgba(232,169,97,.2);
}
.cotizador__lineas { margin: 0; font-size: .93rem; color: var(--hueso-suave); }
.cotizador__lineas b { color: var(--brasa); font-weight: 600; }

.cotizador__acciones { align-items: flex-start; }
.cotizador__error {
  margin: .8rem 0 0;
  font-size: .88rem;
  color: #f0a58f;
}

.nota-reserva {
  margin: 1.6rem 0 0;
  font-size: .85rem;
  color: rgba(207,197,182,.75);
  text-align: center;
}

@media (max-width: 640px) {
  .cotizador { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   15. CÓMO LLEGAR
   -------------------------------------------------------------------------- */
.llegar { display: grid; gap: 2.5rem; }

.datos-llegada {
  display: grid;
  grid-template-columns: 1fr;
  gap: .3rem 1.5rem;
  margin: 1.8rem 0 2rem;
}
.datos-llegada dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--madera);
  margin-top: 1rem;
}
.datos-llegada dd { margin: 0; color: var(--tinta-suave); }

.mapa {
  position: relative;
  min-height: 380px;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--niebla-2);
  background: linear-gradient(150deg, var(--cordillera) 0%, var(--calafquen) 50%, var(--musgo) 100%);
}
.mapa__aviso {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  border: 0;
  background: rgba(20,18,15,.45);
  color: var(--hueso);
  cursor: pointer;
  font-family: var(--fuente-cuerpo);
  transition: background-color .3s var(--curva);
}
.mapa__aviso:hover { background: rgba(20,18,15,.3); }
.mapa__ico { font-size: 2rem; }
.mapa__texto { display: flex; flex-direction: column; gap: .2rem; }
.mapa__texto b { font-size: 1.05rem; }
.mapa__texto em { font-style: normal; font-size: .84rem; color: var(--hueso-suave); }
.mapa__marco { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

@media (min-width: 900px) {
  .llegar { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: start; }
  .datos-llegada { grid-template-columns: 130px 1fr; }
  .datos-llegada dt { margin-top: .55rem; }
  .datos-llegada dd { margin-top: .55rem; }
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .6rem; }
.faq__item {
  border: 1px solid var(--niebla-2);
  border-radius: var(--radio-chico);
  background: rgba(255,255,255,.45);
  overflow: hidden;
  transition: border-color .3s var(--curva);
}
.faq__item[open] { border-color: rgba(194,112,60,.4); }
.faq__item summary {
  cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 1.2rem;
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  position: absolute;
  right: 1.3rem;
  top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--cobre);
  border-bottom: 1.5px solid var(--cobre);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--curva);
}
.faq__item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq__item p {
  margin: 0;
  padding: 0 1.2rem 1.2rem;
  color: var(--tinta-suave);
  font-size: .96rem;
}
/* La tarjeta recorta lo que se salga, así que acá el dato de ejemplo no se
   marca con el punto de afuera sino con el borde izquierdo. */
.faq__item.es-ejemplo::before { display: none; }
.faq__item.es-ejemplo {
  border-left: 3px solid rgba(194,112,60,.5);
  border-left-style: dashed;
}

/* --------------------------------------------------------------------------
   17. CONTACTO Y PIE
   -------------------------------------------------------------------------- */
.contacto { display: grid; gap: 0; }
.contacto__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(251,248,243,.12);
}
.contacto__item:last-child { border-bottom: 0; }
.contacto__etiqueta {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brasa);
}
.contacto__valor {
  font-family: var(--fuente-titulo);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--hueso);
  text-decoration: none;
}
a.contacto__valor { transition: color .3s var(--curva); }
a.contacto__valor:hover { color: var(--brasa); }
.contacto__redes { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 1.1rem; }
.contacto__redes a { text-decoration: none; transition: color .3s var(--curva); }
.contacto__redes a:hover { color: var(--brasa); }

@media (min-width: 700px) {
  .contacto__item { grid-template-columns: 180px 1fr; align-items: baseline; gap: 1.5rem; }
}

.pie {
  position: relative;
  z-index: 1;
  background: var(--basalto);
  color: var(--hueso-suave);
  padding: 2.2rem 0;
  border-top: 1px solid rgba(251,248,243,.1);
}
.pie__interior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 2rem;
  font-size: .85rem;
}
.pie p { margin: 0; }
.pie__marca { color: var(--hueso); }

/* --------------------------------------------------------------------------
   18. ACCESO FIJO A WHATSAPP
   Placa rectangular, no la burbuja verde flotante de siempre.
   -------------------------------------------------------------------------- */
.wa-fijo {
  position: fixed;
  right: 0;
  bottom: 2.2rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.3rem;
  background: var(--basalto);
  color: var(--hueso);
  text-decoration: none;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid rgba(251,248,243,.16);
  border-right: 0;
  transition: background-color .4s var(--curva), color .4s var(--curva);
}
.wa-fijo svg { flex: none; color: var(--brasa); transition: color .4s var(--curva); }
.wa-fijo:hover { background: var(--cobre); color: var(--hueso); }
.wa-fijo:hover svg { color: var(--hueso); }

/* En el celular pasa a ser una barra al pie: es donde el pulgar llega solo. */
@media (max-width: 700px) {
  .wa-fijo {
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: center;
    border: 0;
    border-top: 1px solid rgba(251,248,243,.16);
    padding: 1.05rem 1rem;
  }
  /* Sin esto la barra tapa el final del pie. */
  .pie { padding-bottom: 5rem; }
}

/* --------------------------------------------------------------------------
   19. RESPONSIVE DE NAVEGACIÓN
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  .hamburguesa { display: block; }
  .cabecera__cta { display: none; }

  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    background: rgba(20,18,15,.97);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(251,248,243,.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height .42s var(--curva);
  }
  .nav--abierto { max-height: 340px; }
  .nav__lista { flex-direction: column; gap: 0; padding: .5rem 1.25rem 1.4rem; }
  .nav__lista a { display: block; padding: .85rem 0; font-size: 1.05rem; }

  .cifras { grid-template-columns: repeat(2, 1fr); margin-top: 3rem; }
  .hero { padding-top: 6.5rem; }
}

@media (max-width: 560px) {
  .ficha__galeria { grid-template-columns: 1fr; grid-template-rows: 220px 130px; }
  .ficha__foto--principal { grid-row: auto; }
  /* La tercera foto sobra en pantalla chica: ocupa alto sin aportar. */
  .ficha__foto:nth-child(3) { display: none; }
  .entorno-lista li { grid-template-columns: 1fr; gap: .3rem; }
  .hero__acciones .boton { width: 100%; }
}

/* --------------------------------------------------------------------------
   20. MOVIMIENTO REDUCIDO
   Se apaga lo intrusivo: los bucles de la niebla y la flecha. Los fundidos y
   los hovers se quedan, porque si se apagan todos el sitio se ve muerto y en
   muchos Windows esta preferencia viene activada de fábrica.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Se apagan todos los bucles: manchas, jirones, brasas, el vaivén del hero
     y la flecha. Las manchas quedan quietas, que igual dan profundidad. */
  .niebla__mancha,
  .niebla__jiron,
  .hero__fondo img,
  .hero__flecha span,
  .seccion--oscura::after,
  .hero::after { animation: none; }

  /* La ceniza sí se retira entera: son partículas, justo lo que molesta. */
  .ceniza { display: none; }

  /* Los jirones sin animación se quedarían congelados fuera de cuadro con
     opacidad 0, así que se les da una posición fija y visible. */
  .niebla__jiron { opacity: .35; transform: translate3d(90vw, 0, 0); }

  /* El fundido se mantiene; se van el desplazamiento y el desenfoque. */
  .js .reveal { transform: none; filter: none; transition: opacity .6s ease; }

  .ficha__foto:hover img { transform: none; }
}

/* ==========================================================================
   AVISO DE MUESTRA
   El complejo no encargó este sitio. La banda deja claro de entrada que no es
   su página oficial, y por eso va arriba de todo y no escondida en el pie.
   ========================================================================== */
/* La cabecera del sitio es `position: fixed`, así que un aviso en el flujo
   normal le queda debajo y no se lee. Va fijo también, arriba de todo, y la
   cabecera se baja su alto exacto con la variable de abajo. */
:root { --alto-aviso: 42px; }
.aviso-muestra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 110;
  min-height: var(--alto-aviso);
  display: flex;
  align-items: center;
  background: var(--basalto-2);
  border-bottom: 1px solid rgba(194, 112, 60, .35);
  color: var(--niebla-2);
}
.cabecera { top: var(--alto-aviso); }
html { scroll-padding-top: calc(84px + var(--alto-aviso)); }
@media (max-width: 640px) {
  :root { --alto-aviso: 58px; }
}
.aviso-muestra p {
  width: min(100% - 2.4rem, var(--ancho));
  margin: 0 auto;
  padding: .55rem 0;
  font-family: var(--fuente-cuerpo);
  font-size: .82rem;
  line-height: 1.5;
}
.aviso-muestra strong { color: var(--brasa); }
.aviso-muestra a {
  color: var(--niebla);
  text-underline-offset: 4px;
  white-space: nowrap;
}