/* =========================================================
   Sendero Mirador Santa Catalina
   Hoja de estilos única del sitio.

   Identidad de Paloma Rodríguez ("Santa Catalina Identidad", agosto 2026),
   línea editorial como logotipo y mariposa Morpho como firma natural.

   Paleta oficial, sin alterar un solo valor:
     Natural  #D0C6B3    Forest   #43481E    Hibiscus #ED5023
     Pacific  #B0D5BF    Palm     #968E33    Morpho   #1E4570

   CÓMO SE USA EL COLOR
   --------------------
   El documento de marca no es un fondo crema con detalles de color: son
   campos grandes y saturados, uno tras otro. El sitio hace lo mismo. Cada
   sección declara un "tono" y todo lo que va dentro toma sus colores de
   ahí. Los tonos disponibles:

     tono-crema     fondo crema,   texto verde bosque   (por defecto)
     tono-arena     fondo Natural, texto verde bosque
     tono-pacifico  fondo Pacific, texto verde bosque
     tono-palma     fondo Palm,    texto verde hondo
     tono-bosque    fondo Forest,  texto crema
     tono-morpho    fondo Morpho,  texto crema

   No hay negro en ninguna parte del sitio: el texto oscuro es siempre el
   verde bosque de la marca, y el claro siempre el crema.

   El Hibiscus es color de campo y de botón, nunca de letra sobre crema
   (2.98 de contraste). Los botones son crema sobre Hibiscus hondo.
   ========================================================= */

:root {
  /* Paleta de marca */
  --natural:  #D0C6B3;
  --forest:   #43481E;
  --hibiscus: #ED5023;
  --pacific:  #B0D5BF;
  --palm:     #968E33;
  --morpho:   #1E4570;
  --crema:    #EDE8DD;

  --hibiscus-hondo: #C43E15;
  --morpho-hondo:   #16345A;

  /* Roles base */
  --paper:  #EDE8DD;
  --ink:    #43481E;
  --ink-2:  #5A6130;
  --ink-3:  #5A6130;

  /* Tokens de tono. Cada sección los reescribe; estos son el defecto. */
  --fondo:  var(--paper);
  --texto:  var(--ink);
  --tenue:  var(--ink-2);
  --sutil:  var(--ink-3);
  --linea:  #D0C6B3;
  --sup:    #F6F3EC;
  --marca:  var(--hibiscus);
  --accion: var(--hibiscus-hondo);
  --accion-ink: var(--crema);

  --radius: 2px;
  --pad-x: clamp(1.25rem, 5vw, 4rem);

  --sans:    "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --rotulo:  "Jost", "Futura", "Avenir Next", ui-sans-serif, sans-serif;

  /* Un solo tema, a propósito: la identidad es crema y verde bosque.
     Invertirla a oscuro deja de ser la marca. */
  color-scheme: light;
}

/* ---------- Tonos ----------
   Sin negros. Todo el texto oscuro es el verde bosque de la marca, y todo
   el texto claro es el crema. Contrastes medidos el 30-08-2026:
     Forest sobre crema 7.87 · sobre Natural 5.68 · sobre Pacific 6.00
     verde hondo sobre Palm 4.71 · crema sobre Forest 7.87 · sobre Morpho 8.03
   El Hibiscus nunca lleva texto encima salvo el rótulo grande de la franja
   de color, que es como lo usa el propio manual de marca. */
.tono-crema {
  --fondo:#EDE8DD; --texto:#43481E; --tenue:#5A6130; --sutil:#5A6130;
  --linea:#D0C6B3; --sup:#F7F4EE; --marca:#ED5023;
}
.tono-arena {
  --fondo:#D0C6B3; --texto:#43481E; --tenue:#43481E; --sutil:#43481E;
  --linea:#B5A992; --sup:#DED7C7; --marca:#C43E15;
}
.tono-pacifico {
  --fondo:#B0D5BF; --texto:#43481E; --tenue:#4C5426; --sutil:#4C5426;
  --linea:#8FB9A3; --sup:#C8E2D3; --marca:#ED5023;
}
.tono-palma {
  --fondo:#968E33; --texto:#20240C; --tenue:#20240C; --sutil:#20240C;
  --linea:#777125; --sup:#AAA34F; --marca:#EDE8DD;
}
.tono-bosque {
  --fondo:#43481E; --texto:#EDE8DD; --tenue:#D6D1BA; --sutil:#C0BC9E;
  --linea:#5C6130; --sup:transparent; --marca:#ED5023;
}
.tono-morpho {
  --fondo:#1E4570; --texto:#EDE8DD; --tenue:#C6D5E4; --sutil:#A7BCD1;
  --linea:#345A85; --sup:transparent; --marca:#ED5023;
}

[class*="tono-"] { background: var(--fondo); color: var(--texto); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.014em;
  color: var(--texto);
}

h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
h1 em, h2 em, h3 em { font-style: italic; letter-spacing: 0; }

p { margin: 0; }

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

.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--hibiscus-hondo); color: #FFF;
  padding: 0.75rem 1.25rem; z-index: 100;
}
.saltar:focus { left: 0; }

/* ---------- Contenedores ---------- */
.envoltura {
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding-inline: var(--pad-x);
}
.columna { max-width: 66ch; }

.seccion { padding-block: clamp(3.75rem, 8vw, 7rem); }
.seccion--ajustada { padding-block: clamp(2.5rem, 5vw, 4rem); }

.pila { display: flex; flex-direction: column; gap: 1.25rem; }
.pila--amplia { gap: 2.25rem; }
.pila--corta  { gap: 0.75rem; }

/* ---------- Etiqueta ---------- */
.etiqueta {
  font-family: var(--rotulo); font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sutil);
  display: flex; align-items: center; gap: 0.75rem; margin: 0;
}
.etiqueta::before {
  content: ""; width: 2rem; height: 3px; background: var(--marca);
  flex: none; border-radius: 3px;
}

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky; top: 0; z-index: 50;
  background: var(--crema);
  border-bottom: 3px solid var(--forest);
}
.encabezado__fila { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; }

.marca { display: flex; align-items: center; gap: 0.8rem; text-decoration: none;
         margin-right: auto; color: var(--forest); }
.marca__simbolo { width: 3rem; height: auto; flex: none; }
.marca__texto { display: flex; flex-direction: column; gap: 0.24rem; color: var(--ink); }
.marca__nombre {
  font-family: var(--rotulo); font-weight: 300; font-size: 1.14rem;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1;
}
.marca__lugar {
  font-family: var(--rotulo); font-weight: 500; font-size: 0.54rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); line-height: 1;
}

.navegacion { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.navegacion a {
  text-decoration: none; font-size: 0.92rem; color: var(--ink-2);
  padding-block: 0.35rem; border-bottom: 3px solid transparent; white-space: nowrap;
}
.navegacion a:hover { color: var(--ink); border-bottom-color: var(--hibiscus); }
.navegacion a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--hibiscus); }

.idioma {
  font-family: var(--rotulo); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.16em;
  text-decoration: none; color: var(--crema); background: var(--forest);
  padding: 0.38rem 0.65rem; border-radius: var(--radius);
}
.idioma:hover { background: var(--hibiscus-hondo); }

.menu-boton {
  display: none; font-family: var(--rotulo); font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--forest); border: none; color: var(--crema);
  padding: 0.6rem 0.9rem; border-radius: var(--radius); cursor: pointer;
}

@media (max-width: 900px) {
  .menu-boton { display: block; }
  .navegacion {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--crema); border-bottom: 3px solid var(--forest);
    padding: 0.5rem var(--pad-x) 1.25rem;
  }
  .navegacion.abierta { display: flex; }
  .navegacion a { padding-block: 0.75rem; border-bottom: 1px solid var(--natural); }
  .marca__lugar { display: none; }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 700;
  text-decoration: none; padding: 0.9rem 1.6rem;
  border-radius: var(--radius); border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease,
              color 0.15s ease, border-color 0.15s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton--principal { background: var(--accion); color: var(--accion-ink); }
.boton--principal:hover { filter: brightness(0.9); }
.boton--clara {
  border-color: var(--crema); color: var(--crema);
  background: rgba(237, 232, 221, 0.08);
}
.boton--clara:hover { background: var(--crema); color: var(--forest); }
.boton--linea { border-color: var(--texto); color: var(--texto); }
.boton--linea:hover { background: var(--texto); color: var(--fondo); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- Divisor: el símbolo del sendero ---------- */
.divisor { display: block; width: clamp(6rem, 12vw, 9.5rem); height: auto; color: var(--marca); }
.divisor--centrado { margin-inline: auto; }

/* ---------- Franja de color de la marca ----------
   Los seis colores del documento de identidad, cada uno nombrado por lo
   que es en Santa Catalina. Es la página más fuerte del manual de Paloma
   y aquí además le dice al visitante qué va a encontrar. */
.franja-marca {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
}
@media (max-width: 760px) { .franja-marca { grid-template-columns: repeat(3, 1fr); } }

.franja-marca > div {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(0.75rem, 1.5vw, 1.25rem);
  display: flex; flex-direction: column; gap: 0.45rem;
  min-height: clamp(12rem, 21vw, 17rem);
  justify-content: flex-end;
}
.franja-marca img {
  width: clamp(3rem, 5.5vw, 4.5rem); height: auto;
  margin-bottom: auto; opacity: 0.95;
}
.franja-marca .fm-morpho img {
  width: clamp(4.75rem, 7vw, 6.5rem);
}
.franja-marca b {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1;
}
.franja-marca span {
  font-family: var(--rotulo); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.78;
}
.fm-natural  { background:#D0C6B3; color:#43481E; }
.fm-forest   { background:#43481E; color:#EDE8DD; }
.fm-hibiscus { background:#ED5023; color:#111509; }
.fm-pacific  { background:#B0D5BF; color:#43481E; }
.fm-palm     { background:#968E33; color:#20240C; }
.fm-morpho   { background:#1E4570; color:#EDE8DD; }
.fm-hibiscus span, .fm-palm span { opacity: 1; }

/* ---------- Portada ---------- */
.portada {
  position: relative; min-height: min(90vh, 820px);
  display: flex; align-items: flex-end;
  background: var(--forest); color: var(--crema); overflow: hidden;
}
.portada .portada__medio { position: absolute; inset: 0; }
.portada .portada__medio img { width: 100%; height: 100%; object-fit: cover; }
.portada__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(38, 42, 18, 0.48) 0%, rgba(38, 42, 18, 0.06) 32%, rgba(38, 42, 18, 0.84) 100%);
}
.portada__firma {
  position: absolute;
  top: clamp(6.25rem, 12vw, 9rem);
  right: var(--pad-x);
  z-index: 2;
  width: clamp(8.5rem, 16vw, 12.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(237, 232, 221, 0.52);
  border-radius: 48% 52% 46% 54%;
  background: linear-gradient(145deg, rgba(30,69,112,.62), rgba(67,72,30,.38));
  box-shadow: 0 1.2rem 4rem rgba(17,21,9,.22);
  backdrop-filter: blur(5px);
  pointer-events: none;
  animation: sello-respirar 8s ease-in-out infinite;
}
.portada__firma::before {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(237, 232, 221, 0.32);
  border-radius: 54% 46% 51% 49%;
}
.portada__halo {
  position: absolute;
  width: 78%;
  aspect-ratio: 1.45;
  border-radius: 53% 47% 56% 44%;
  background: rgba(237, 232, 221, .9);
  transform: rotate(-5deg);
}
.portada__firma img {
  position: relative;
  z-index: 1;
  width: 72%;
  height: auto;
  filter: drop-shadow(0 .6rem 1rem rgba(17,21,9,.3));
  transform-origin: center;
  will-change: transform;
  animation: morpho-vuelo-portada 22s linear infinite;
}
.portada__firma-texto {
  position: absolute;
  bottom: 14%;
  font-family: var(--rotulo);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--crema);
}
.portada__contenido {
  position: relative; z-index: 3; width: 100%; max-width: 1180px; margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--pad-x);
  display: flex; flex-direction: column; gap: 1.6rem;
}
.portada h1 { color: #FFF; max-width: 16ch; }
.portada .etiqueta { color: #F0D9CE; }
.portada .etiqueta::before { background: var(--hibiscus); }
.portada__entrada { color: #EAE5D9; max-width: 52ch; font-size: clamp(1.04rem, 1.5vw, 1.2rem); }
.portada .boton--principal { background: var(--hibiscus-hondo); color: var(--crema); }
.portada .boton--linea { border-color: var(--crema); color: var(--crema); }
.portada .boton--linea:hover { background: var(--crema); color: var(--forest); }

.escala {
  display: flex; flex-wrap: wrap; gap: 0 1.9rem;
  font-family: var(--rotulo); font-weight: 500; font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(237, 232, 221, 0.78);
  border-top: 2px solid var(--hibiscus); padding-top: 1rem; margin-top: 0.5rem;
}
.escala span { display: inline-flex; gap: 0.5rem; align-items: baseline; }
.escala b { font-weight: 500; color: #FFF; }

/* ---------- Marcadores de foto ---------- */
.medio {
  position: relative; overflow: hidden; background: var(--palm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23B0D5BF'/%3E%3Cstop offset='1' stop-color='%23D0C6B3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='700' fill='url(%23c)'/%3E%3Cpolygon points='0,505 215,392 430,462 645,352 858,448 1062,372 1200,425 1200,700 0,700' fill='%23968E33'/%3E%3Cpolygon points='0,592 258,494 502,556 758,462 1002,536 1200,494 1200,700 0,700' fill='%2343481E'/%3E%3C/svg%3E");
  background-size: cover; background-position: center;
}
.medio img { width: 100%; height: 100%; object-fit: cover; }
.medio--sin-foto img { display: none; }
.medio--sin-foto::after {
  content: attr(data-archivo); position: absolute; left: 0.75rem; bottom: 0.75rem;
  font-family: var(--rotulo); font-weight: 500; font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--crema); background: var(--hibiscus-hondo);
  padding: 0.32rem 0.6rem; border-radius: var(--radius);
}
.medio--alto { aspect-ratio: 3 / 4; }
.medio--ancho { aspect-ratio: 16 / 10; }

/* ---------- Manifiesto de identidad ---------- */
.seccion-identidad {
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 88% 18%, rgba(176, 213, 191, .42), transparent 24rem),
    radial-gradient(circle at 8% 86%, rgba(150, 142, 51, .16), transparent 28rem);
}
.seccion-identidad::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(112deg, transparent 0 16px, rgba(67,72,30,.08) 17px 18px);
  mask-image: linear-gradient(90deg, transparent, #000 55%, #000);
}
.identidad-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(17rem, .7fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.identidad-copy { max-width: 44rem; }
.identidad-copy h2 { max-width: 16ch; }
.identidad-copy .cita { margin-top: .6rem; }

.identidad-sello {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  justify-self: end;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 46% 54% 50% 50%;
  color: var(--crema);
  background:
    radial-gradient(circle at 64% 30%, rgba(176,213,191,.42), transparent 30%),
    linear-gradient(150deg, var(--morpho), var(--forest) 74%);
  box-shadow: 0 2rem 5rem rgba(67,72,30,.18);
  animation: sello-respirar 9s ease-in-out infinite reverse;
}
.identidad-sello__anillo {
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(237,232,221,.5);
  border-radius: 53% 47% 45% 55%;
}
.identidad-sello__anillo::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(237,232,221,.18);
  border-radius: 47% 53% 56% 44%;
}
.identidad-morpho {
  position: relative;
  z-index: 1;
  width: 66%;
  height: auto;
  filter: drop-shadow(0 .7rem 1.2rem rgba(17,21,9,.28));
  animation: morpho-flotar 5.5s ease-in-out infinite;
}
.identidad-morpho--eco {
  position: absolute;
  width: 25%;
  top: 18%;
  right: 13%;
  opacity: .34;
  transform: rotate(18deg);
  animation: morpho-eco 7s ease-in-out infinite;
}
.identidad-sello__texto {
  position: absolute;
  bottom: 13%;
  z-index: 2;
  font-family: var(--rotulo);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.principios {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(.5rem, 2vw, 1.5rem);
  border-top: 2px solid var(--linea);
  border-bottom: 2px solid var(--linea);
}
.principio {
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: .5rem .85rem;
}
.principio + .principio { border-left: 2px solid var(--linea); }
.principio > span {
  grid-row: 1 / 3;
  font-family: var(--rotulo);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--hibiscus-hondo);
}
.principio h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
.principio p { color: var(--tenue); font-size: .92rem; line-height: 1.55; }

@keyframes morpho-flotar {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(0, -.65rem, 0) rotate(3deg); }
}
/* Sale del sello, recorre la primera pantalla y vuelve a posarse. */
@keyframes morpho-vuelo-portada {
  0%, 14%, 88%, 100% {
    transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
  }
  20% {
    transform: translate3d(-18vw, -4vh, 0) rotate(-9deg) scale(.94);
  }
  34% {
    transform: translate3d(-62vw, 14vh, 0) rotate(-15deg) scale(.82);
  }
  48% {
    transform: translate3d(-35vw, 36vh, 0) rotate(8deg) scale(.9);
  }
  62% {
    transform: translate3d(-72vw, 55vh, 0) rotate(-10deg) scale(.76);
  }
  74% {
    transform: translate3d(-40vw, 22vh, 0) rotate(11deg) scale(.86);
  }
  84% {
    transform: translate3d(-12vw, 7vh, 0) rotate(5deg) scale(.94);
  }
}
@keyframes morpho-vuelo-movil {
  0%, 18%, 88%, 100% {
    transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
  }
  28% {
    transform: translate3d(-52vw, 6vh, 0) rotate(-12deg) scale(.86);
  }
  46% {
    transform: translate3d(-24vw, 26vh, 0) rotate(9deg) scale(.92);
  }
  64% {
    transform: translate3d(-68vw, 42vh, 0) rotate(-9deg) scale(.78);
  }
  78% {
    transform: translate3d(-32vw, 18vh, 0) rotate(8deg) scale(.88);
  }
}
@keyframes morpho-eco {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(18deg) scale(.96); }
  50% { transform: translate3d(-.55rem, .35rem, 0) rotate(10deg) scale(1.04); }
}
@keyframes sello-respirar {
  0%, 100% { border-radius: 48% 52% 46% 54%; }
  50% { border-radius: 54% 46% 52% 48%; }
}

@media (max-width: 840px) {
  .portada__firma { width: 6.25rem; top: 4.9rem; right: .8rem; opacity: .94; }
  .portada__firma img { animation-name: morpho-vuelo-movil; animation-duration: 18s; }
  .portada__firma-texto { display: none; }
  .portada__contenido { padding-top: 12.75rem; }
  .identidad-grid { grid-template-columns: 1fr; }
  .identidad-sello { justify-self: center; width: min(78vw, 21rem); }
  .principios { grid-template-columns: 1fr; }
  .principio + .principio { border-left: 0; border-top: 2px solid var(--linea); }
}

/* ---------- Dos columnas ---------- */
.duo {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--invertida .duo__medio { order: 2; }
}

/* ---------- Fichas ---------- */
.rejilla {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.ficha {
  background: var(--sup); border: 2px solid var(--linea); border-radius: var(--radius);
  padding: 1.7rem; display: flex; flex-direction: column; gap: 0.7rem;
}
.ficha h3 { color: var(--texto); }
.ficha p { color: var(--tenue); font-size: 0.96rem; }

/* ---------- Estaciones ---------- */
.estaciones { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--linea); }
.estacion {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: 0 1.25rem;
  padding-block: 1.5rem; border-bottom: 2px solid var(--linea); align-items: baseline;
}
@media (min-width: 720px) { .estacion { grid-template-columns: 4.25rem 14rem 1fr; } }
.estacion__numero {
  font-family: var(--rotulo); font-weight: 500; font-size: 1.4rem;
  letter-spacing: 0.02em; color: var(--marca); line-height: 1;
}
.estacion__nombre { font-family: var(--display); font-size: 1.28rem; color: var(--texto); }
.estacion__detalle { color: var(--tenue); font-size: 0.96rem; grid-column: 2 / -1; }
@media (min-width: 720px) { .estacion__detalle { grid-column: 3; } }

/* ---------- Tarifas ---------- */
.tabla-envoltura { overflow-x: auto; }
.tarifas {
  width: 100%; border-collapse: collapse; font-size: 0.95rem;
  font-variant-numeric: tabular-nums; min-width: 34rem;
}
.tarifas th, .tarifas td {
  text-align: left; padding: 0.95rem 1rem;
  border-bottom: 2px solid var(--linea); vertical-align: top; color: var(--tenue);
}
.tarifas thead th {
  font-family: var(--rotulo); font-weight: 500; font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sutil);
}
.tarifas tbody td:first-child { color: var(--texto); font-weight: 600; }
.tarifas td:last-child, .tarifas th:last-child { text-align: right; }
.tarifas .precio {
  font-family: var(--rotulo); font-weight: 500; font-size: 1.05rem; color: var(--texto);
}
.tarifas .pendiente {
  font-family: var(--rotulo); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sutil);
}

/* ---------- Preguntas ---------- */
.pregunta { border-bottom: 2px solid var(--linea); }
.pregunta summary {
  cursor: pointer; list-style: none; padding-block: 1.2rem;
  font-family: var(--display); font-size: 1.16rem; color: var(--texto);
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: "+"; font-family: var(--rotulo); font-weight: 500;
  font-size: 1.3rem; color: var(--marca); flex: none;
}
.pregunta[open] summary::after { content: "–"; }
.pregunta p { padding-bottom: 1.2rem; color: var(--tenue); max-width: 66ch; }

/* ---------- Cita ---------- */
.cita {
  margin: 0; padding-left: 1.4rem; border-left: 4px solid var(--marca);
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.3;
  text-wrap: balance; color: var(--texto);
}

/* ---------- Nota y listas ---------- */
.nota { font-size: 0.86rem; color: var(--sutil); max-width: 60ch; }

.marcada {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.marcada li {
  display: flex; gap: 0.65rem; align-items: baseline;
  font-size: 0.96rem; color: var(--tenue);
}
.marcada li::before {
  content: ""; width: 0.45rem; height: 0.45rem; flex: none;
  border-radius: 50%; background: var(--marca); transform: translateY(-0.15rem);
}

.aviso {
  border-left: 4px solid var(--marca); padding: 0.4rem 0 0.4rem 1.15rem;
  color: var(--tenue); font-size: 0.95rem;
}

/* ---------- Canales de venta ----------
   Booking y Airbnb como dos bloques iguales, del mismo tamaño, para que
   pesen lo mismo en la página. No se usan los logos de las plataformas:
   son marcas registradas y su uso tiene reglas propias. */
.canales {
  display: grid; gap: clamp(0.85rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.canal {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.75rem; min-height: 9.5rem;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  background: var(--sup); border: 2px solid var(--linea);
  border-radius: var(--radius); text-decoration: none; color: var(--texto);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.canal:hover { border-color: var(--texto); transform: translateY(-2px); }
.canal__nombre {
  font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1; color: var(--texto);
}
.canal__estado {
  font-family: var(--rotulo); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.5rem; color: var(--sutil);
}
a.canal .canal__estado { color: var(--marca); }
.canal--espera { border-style: dashed; }

/* ---------- Cierre ---------- */
.cierre {
  text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem;
}
.cierre h2 { max-width: 18ch; }
.cierre p { max-width: 52ch; color: var(--tenue); }
.cierre .etiqueta { justify-content: center; }

/* ---------- Pie ---------- */
.pie {
  background: var(--forest); color: #C9C4A4;
  padding-block: clamp(2.5rem, 5vw, 4rem); font-size: 0.92rem;
}
.pie a { color: var(--crema); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie__rejilla {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.pie h4 {
  font-family: var(--rotulo); font-weight: 500; font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--palm);
  margin-bottom: 0.9rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: flex;
          flex-direction: column; gap: 0.5rem; }
.pie__legal {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid #5C6130;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  font-family: var(--rotulo); font-weight: 500; font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- WhatsApp ---------- */
.whatsapp {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--hibiscus-hondo); color: var(--crema); text-decoration: none;
  font-size: 0.9rem; font-weight: 700; padding: 0.85rem 1.25rem;
  border-radius: 999px; box-shadow: 0 6px 22px rgba(67, 72, 30, 0.34);
}
.whatsapp svg { width: 1.15rem; height: 1.15rem; flex: none; }
@media (max-width: 520px) {
  .whatsapp span { display: none; }
  .whatsapp { padding: 0.95rem; }
}

/* ---------- Aparición ---------- */
.revelar { opacity: 0; transform: translateY(14px);
           transition: opacity 0.7s ease, transform 0.7s ease; }
.revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; }
  * { transition: none !important; }
  .boton:hover { transform: none; }
  .portada__firma, .portada__firma img,
  .identidad-sello, .identidad-morpho, .identidad-morpho--eco {
    animation: none !important;
  }
}