/* ==========================================================================
   San Eusebio — hoja de estilos global
   Los colores y tipografías salen del Manual de Marca. No inventar variantes:
   si hace falta un tono nuevo, se agrega acá como token y se usa desde acá.
   ========================================================================== */

:root {
  /* Paleta — Manual de Marca */
  --colorado: #a23e2f;      /* principal: titulares, CTA, acentos fuertes */
  --verde: #6a644e;         /* secundario: fondos oscuros, detalles botánicos */
  --ambar: #d99a2b;         /* acento: filete, íconos. Nunca fondo grande */
  --lino: #f4edde;          /* fondo principal */
  --tabaco: #6a4a30;        /* terciario: texturas, texto secundario */
  --tinta: #241f18;         /* texto principal */

  --colorado-rgb: 162, 62, 47;
  --verde-rgb: 106, 100, 78;
  --tabaco-rgb: 106, 74, 48;
  --tinta-rgb: 36, 31, 24;
  --lino-rgb: 244, 237, 222;

  /* Tipografía */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Lora', Georgia, serif;

  /* Ritmo vertical. El aire es parte de la marca: no achicar sin motivo. */
  --seccion-y: clamp(3rem, 6.5vw, 5.5rem);
  --borde-x: clamp(1.25rem, 5vw, 4rem);
  --ancho: 1180px;
  --ancho-texto: 62ch;

  /* Movimiento: lento y sin rebote. Nada de easing elástico. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- reset --- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--lino);
  color: var(--tinta);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Foco visible siempre. No se saca. */
:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ----------------------------------------------------------- tipografía --- */

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.12;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  color: var(--colorado);
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

p {
  text-wrap: pretty;
}

/* Eyebrow: la etiqueta chica que va arriba de cada título.
   No numera secciones — nombra el momento o el lugar, que es lo que
   el manual pide (detalle sensorial antes que estructura). */
.eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tabaco);
  margin-bottom: 1.1rem;
}

.subtitulo {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--tabaco);
  line-height: 1.5;
}

.texto {
  max-width: var(--ancho-texto);
}

.texto p + p {
  margin-top: 1.1em;
}

/* --------------------------------------------------------------- layout --- */

.seccion {
  padding-block: var(--seccion-y);
  padding-inline: var(--borde-x);
}

/* Cuando el bloque termina en una foto a todo el ancho, la imagen misma hace
   de borde: no hace falta sumarle el aire de abajo, porque la sección
   siguiente ya trae el suyo. Si no, quedan 18rem juntos y parece un hueco. */
.seccion--cierraEnFoto {
  padding-bottom: 0;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
}

.seccion--verde {
  background-color: var(--verde);
  color: var(--lino);
}

.seccion--verde h2 {
  color: var(--lino);
}

.seccion--verde .eyebrow,
.seccion--verde .subtitulo {
  color: rgba(var(--lino-rgb), 0.72);
}

/* ---------------------------------------------------- filete (signature) --- */

/* El filete ámbar del logo, convertido en el elemento que marca el ritmo
   de la página. Se dibuja solo, despacio, cuando la sección entra en pantalla:
   es "sin apuro" hecho literal. Es el único adorno del sitio. */
.filete {
  width: 100%;
  height: 1px;
  background-color: var(--ambar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease);
  margin-block: 1.75rem;
}

.filete--corto {
  width: clamp(3rem, 8vw, 5.5rem);
}

.reveal.visible .filete,
.filete.visible {
  transform: scaleX(1);
}

/* ------------------------------------------------ el plano de la finca --- */
/* La foto aérea deja de ser una imagen y pasa a ser el índice del sitio: cada
   punto lleva a la sección que le corresponde. Funciona igual con mouse, con
   dedo y con teclado, y la lista de abajo repite lo mismo por si alguien no
   descubre que la foto se toca. */
.plano {
  margin: 0;
}

.plano__consigna {
  margin-bottom: 1.1rem;
  font-size: 0.92rem;
  color: rgba(var(--tinta-rgb), 0.7);
}

.plano__consignaRotulo {
  display: block;
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tabaco);
  margin-bottom: 0.4rem;
}

.plano__lienzo {
  position: relative;
  line-height: 0;
  overflow: hidden;
}

.plano__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.plano__puntos {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s var(--ease);
}

/* Los puntos aparecen recién cuando hay foto debajo. */
.plano.con-foto .plano__puntos {
  opacity: 1;
  pointer-events: auto;
}

/* El disco se ve de 18px pero el área que responde al toque es de 44: es el
   mínimo para no errarle con el dedo. */
.plano__punto {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.plano__disco {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--lino);
  background: rgba(217, 154, 43, 0.55);
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: #2b1f08;
  box-shadow: 0 1px 8px rgba(36, 31, 24, 0.5);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.plano__punto[aria-pressed="true"] .plano__disco,
.plano__punto:hover .plano__disco {
  transform: scale(1.6);
  background: var(--ambar);
}

.plano__punto:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
  border-radius: 50%;
}

.plano__tira {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.9rem 0;
  background: var(--verde);
  padding-inline: clamp(1rem, 3vw, 1.5rem);
  scrollbar-width: none;
}

.plano__tira::-webkit-scrollbar { display: none; }

.plano__chip {
  flex: 0 0 auto;
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(var(--lino-rgb), 0.32);
  border-radius: 2rem;
  background: none;
  color: rgba(var(--lino-rgb), 0.75);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.plano__chip[aria-pressed="true"] {
  background: var(--ambar);
  border-color: var(--ambar);
  color: #2b1f08;
  font-weight: 600;
}

.plano__chip:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

.plano__ficha {
  background: var(--verde);
  color: var(--lino);
  padding: 0 clamp(1rem, 3vw, 1.5rem) clamp(1.5rem, 4vw, 2rem);
}

.plano__coord {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 0.4rem;
}

.plano__nombre {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.15;
  margin-bottom: 0.45rem;
}

.plano__desc {
  font-size: 0.95rem;
  color: rgba(var(--lino-rgb), 0.76);
  max-width: 56ch;
  margin-bottom: 1.1rem;
}

.plano__ir {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lino);
  text-decoration: none;
  border-bottom: 1px solid var(--ambar);
  padding-bottom: 0.3rem;
  transition: color 0.3s var(--ease);
}

.plano__ir:hover, .plano__ir:focus-visible { color: var(--ambar); }
.plano__ir[hidden] { display: none; }

.plano .intro-pie:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .plano__disco { transition: none; }
}

/* ------------------------------------------- buscador rápido del banner --- */
/* No es un motor de reservas y no finge serlo: junta las fechas y baja al
   calendario real, donde se ve la disponibilidad. Por eso el botón dice
   "ver disponibilidad" y no "reservar". */
.hero-buscador {
  margin: clamp(2rem, 5vw, 2.75rem) auto 0;
  width: min(100%, 44rem);
  display: grid;
  gap: 1px;
  background: rgba(var(--lino-rgb), 0.22);
  border: 1px solid rgba(var(--lino-rgb), 0.28);
  backdrop-filter: blur(10px);
  text-align: left;
}

@media (min-width: 40rem) {
  .hero-buscador {
    grid-template-columns: 1fr 1fr 7rem auto;
    align-items: stretch;
  }
}

.hero-buscador__campo {
  display: block;
  padding: 0.7rem 1rem 0.75rem;
  background: rgba(36, 31, 24, 0.42);
}

.hero-buscador__campo span {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--lino-rgb), 0.62);
  margin-bottom: 0.3rem;
}

.hero-buscador__campo input {
  width: 100%;
  border: 0;
  background: none;
  color: var(--lino);
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 0;
  min-height: 1.6rem;
}

.hero-buscador__campo input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.55;
  cursor: pointer;
}

.hero-buscador__campo input:focus { outline: none; }

.hero-buscador__campo:focus-within {
  background: rgba(36, 31, 24, 0.62);
  box-shadow: inset 0 -2px 0 var(--ambar);
}

.hero-buscador__boton {
  border: 0;
  cursor: pointer;
  background: var(--lino);
  color: var(--tinta);
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1rem 1.6rem;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.hero-buscador__boton:hover,
.hero-buscador__boton:focus-visible {
  background: var(--ambar);
}

/* Cuando las fechas están libres el botón deja de ser neutro: pasa a ámbar,
   que es el color con el que la página marca lo que se puede hacer ahora. */
.hero-buscador__boton--libre {
  background: var(--ambar);
  color: #2b1f08;
}

.hero-buscador__estado:empty { display: none; }

.hero-buscador__estado {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: rgba(var(--lino-rgb), 0.8);
}

.hero-buscador__estado--libre { color: var(--ambar); }

.hero-buscador__estado--ocupado { color: rgba(var(--lino-rgb), 0.78); }

.hero-buscador__pie {
  margin-top: 0.5rem;
  font-size: 0.76rem;
  color: rgba(var(--lino-rgb), 0.6);
}

/* -------------------------------------------------- aparición al scroll --- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}

/* Mientras está invisible no debe capturar clics de lo que tiene debajo. */
.reveal:not(.visible) {
  pointer-events: none;
}

.reveal.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Las fotos entran apenas ampliadas y se asientan en su lugar. Es el único
   efecto que se le agrega a las imágenes: dura lo suficiente como para que se
   perciba sin que se note, que es de lo que se trata. */
.intro-imagen,
.mesa-foto,
.coaching-foto {
  overflow: hidden;
}

.hab-foto img,
.intro-imagen img,
.mesa-foto__img,
.coaching-foto__img {
  transform: scale(1.05);
  transition: transform 1.6s var(--ease);
}

.hab-item.visible .hab-foto img,
.intro-imagen.visible img,
.mesa-fotos.visible .mesa-foto__img,
.coaching-foto.visible .coaching-foto__img {
  transform: none;
}

/* Banner: el fondo se aleja despacio y el contenido se va apagando mientras
   se sale de pantalla. Da profundidad sin que nada se mueva de más. */
.hero-fondo {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .exp-fondo { transition: none; }
  .exp-item:hover .exp-fondo { transform: none; }
  .hab-foto img,
  .intro-imagen img,
  .mesa-foto__img,
  .coaching-foto__img { transform: none; }
  .hero-fondo { transform: none !important; }
  .hero-contenido { opacity: 1 !important; transform: none !important; }
}

/* Red de seguridad: si por algún motivo el JavaScript de aparición no corre,
   el panel de consulta debe ser visible e interactivo igual. */
.con-panel,
.con-panel * {
  pointer-events: auto;
}

.reveal[data-delay='1'] { transition-delay: 0.12s; }
.reveal[data-delay='2'] { transition-delay: 0.24s; }
.reveal[data-delay='3'] { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal,
  .filete {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.9em;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background-color: var(--colorado);
  color: var(--lino);
  border: 1px solid var(--colorado);
  transition:
    background-color 0.4s var(--ease),
    color 0.4s var(--ease);
}

.boton:hover {
  background-color: transparent;
  color: var(--colorado);
}

.boton--claro {
  background-color: transparent;
  color: var(--lino);
  border-color: rgba(var(--lino-rgb), 0.5);
}

.boton--claro:hover {
  background-color: var(--lino);
  color: var(--tinta);
  border-color: var(--lino);
}

.boton--bloque {
  width: 100%;
  justify-content: center;
}

.boton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------------ accesible --- */

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


.hd-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem var(--borde-x);

  color: var(--lino);
  transition:
    background-color 0.5s var(--ease),
    color 0.5s var(--ease),
    padding 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}

/* Al scrollear se apoya sobre Lino y el texto pasa a Tinta. */
.hd-solido {
  background-color: var(--lino);
  color: var(--tinta);
  padding-block: 0.8rem;
  box-shadow: 0 1px 0 rgba(var(--tabaco-rgb), 0.16);
}

/* Con el menú móvil abierto el header se ve sobre Verde, siempre claro. */
.hd-conMenu {
  background-color: transparent;
  color: var(--lino);
  box-shadow: none;
}

.hd-logo {
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  text-decoration: none;
  flex-shrink: 0;
}

/* ------------------------------------------------------------ escritorio - */

.hd-navEscritorio {
  display: none;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2rem);
}

.hd-enlace {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.3s var(--ease);
}

.hd-enlace:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ambar);
}

.hd-cta {
  padding: 0.62em 1.35em;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid currentColor;
  transition:
    background-color 0.4s var(--ease),
    color 0.4s var(--ease);
}

.hd-cta:hover {
  background-color: var(--colorado);
  border-color: var(--colorado);
  color: var(--lino);
}

@media (min-width: 62rem) {
  .hd-navEscritorio {
    display: flex;
  }
  .hd-hamburguesa {
    display: none;
  }
}

/* ----------------------------------------------------------------- móvil - */

.hd-hamburguesa {
  display: grid;
  gap: 6px;
  padding: 0.6rem;
  margin-right: -0.6rem;
}

.hd-raya {
  display: block;
  width: 26px;
  height: 1.5px;
  background-color: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}

.hd-conMenu .hd-raya:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.hd-conMenu .hd-raya:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

.hd-menuMovil {
  position: fixed;
  inset: 0;
  z-index: -1;

  display: grid;
  place-items: center;
  background-color: var(--verde);
  color: var(--lino);

  opacity: 0;
  /* Cerrado: totalmente inerte. No captura clics ni tapa el contenido.
     Sin esto, el menú invisible se estira sobre la página y roba los clics
     del calendario y de todo lo demás. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}

.hd-abierto {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 45;
}

.hd-menuMovil nav {
  display: grid;
  gap: 1.6rem;
  text-align: center;
}

.hd-menuMovil a {
  font-family: var(--display);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  text-decoration: none;
}

.hd-ctaMovil {
  margin-top: 0.8rem;
  padding: 0.7em 1.6em;
  border: 1px solid rgba(var(--lino-rgb), 0.55);
  font-size: clamp(1.2rem, 4.5vw, 1.5rem) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hd-header,
  .hd-raya,
  .hd-menuMovil {
    transition: none;
  }
}


.hero-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 6rem var(--borde-x) 5rem;
  overflow: hidden;
  color: var(--lino);
  background-color: var(--verde);
}

.hero-fondo {
  position: absolute;
  inset: 0;
}

.hero-poster,
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video {
  position: absolute;
  inset: 0;
}

/* Mientras no haya foto ni video cargados: un degradado en los verdes
   y tabacos de la paleta, para que nunca se vea un hueco negro. */
.hero-posterVacio {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(217, 154, 43, 0.28), transparent 55%),
    linear-gradient(160deg, var(--verde) 0%, var(--tabaco) 100%);
}

/* Velo para que el texto sea legible sobre cualquier imagen.
   Más denso abajo, donde apoya el wordmark. */
.hero-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(36, 31, 24, 0.45) 0%,
    rgba(36, 31, 24, 0.34) 45%,
    rgba(36, 31, 24, 0.58) 100%
  );
}

.hero-contenido {
  position: relative;
  text-align: center;
  max-width: 34rem;
}

.hero-logo {
  width: clamp(15rem, 62vw, 28rem);
  margin-inline: auto;
}

.hero-lema {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  line-height: 1.4;
}

.hero-lugar {
  margin-top: 1rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.82;
}

/* Indicación de scroll: una línea que respira, no una flecha rebotando. */
.hero-bajar {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem;
}

.hero-linea {
  display: block;
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(to bottom, transparent, var(--ambar));
  animation: respirar 3.2s var(--ease) infinite;
  transform-origin: top;
}

@keyframes respirar {
  0%, 100% { transform: scaleY(0.55); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-linea {
    animation: none;
  }
}


/* El texto arriba, la foto abajo cerrando el bloque. El texto se limita en
   ancho para que la línea siga siendo cómoda de leer; la foto usa todo el
   ancho del contenedor, apaisada. */
.intro-bloque {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

.intro-texto {
  max-width: 62ch;
}

.intro-imagen {
  margin: 0;
}

.intro-imagen img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.intro-sinFoto {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(90% 70% at 70% 20%, rgba(217, 154, 43, 0.2), transparent 60%),
    linear-gradient(150deg, rgba(var(--verde-rgb), 0.55), rgba(var(--tabaco-rgb), 0.4));
}

/* Sin texto no ocupa lugar: el pie es opcional y se carga desde el panel. */
.intro-pie:empty { display: none; }

.intro-pie {
  margin-top: 0.85rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--tabaco);
}


.hab-encabezado {
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}

/* Precio orientativo. Nace vacío: si el panel no tiene nada cargado, no se
   muestra ninguna línea en vez de mostrar un precio de mentira. */
.hab-precio:empty { display: none; }

.hab-precio {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--tabaco-rgb), 0.22);
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--colorado);
}

.hab-aclaracion {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: 0.92rem;
  color: var(--tabaco);
}

.hab-grilla {
  list-style: none;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 5vw, 3.25rem);
  grid-template-columns: 1fr;
}

/* Dos columnas y no tres: con cinco habitaciones, la destacada ocupa el ancho
   completo y las otras cuatro cierran en un 2x2 parejo. En tres columnas
   siempre quedaba una suelta al final. */
@media (min-width: 42rem) {
  .hab-grilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------------------------------------------ habitación destacada --- */
/* La única con baño privado abre la lista y se lleva más aire. */
.hab-item--destacada {
  grid-column: 1 / -1;
}

.hab-item--destacada .hab-foto {
  aspect-ratio: 16 / 10;
}

.hab-marca {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 0.6rem;
}

@media (min-width: 52rem) {
  .hab-item--destacada {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
  }

  /* La foto manda y el texto es su pie: con la descripción vacía, una columna
     de texto ancha al lado de la foto quedaba flotando en el aire. */
  .hab-item--destacada .hab-foto {
    margin-bottom: 0;
    aspect-ratio: 3 / 2;
  }

  .hab-item--destacada .hab-nombre {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
  }
}

.hab-foto {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: rgba(var(--tabaco-rgb), 0.1);
  margin-bottom: 1.4rem;
}

.hab-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.hab-item:hover .hab-foto img {
  transform: scale(1.035);
}

/* Placeholder mientras no hay fotos cargadas desde el backoffice. */
.hab-sinFoto {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(var(--tabaco-rgb), 0.14), rgba(var(--verde-rgb), 0.2));
}

.hab-nombre {
  color: var(--colorado);
}

.hab-datos {
  margin-top: 0.45rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tabaco);
}

.hab-descripcion:empty { display: none; }

.hab-descripcion {
  margin-top: 0.9rem;
  color: rgba(var(--tinta-rgb), 0.86);
}


.exp-encabezado {
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}

.exp-lista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(var(--lino-rgb), 0.22);
}

.exp-item {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--lino-rgb), 0.22);
}

/* Cada experiencia puede tener su foto detrás. Va muy apagada y con un velo
   encima: la idea es que dé materia al bloque, no que compita con el texto.
   Si no hay foto cargada, la fila se ve igual que antes. */
.exp-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  z-index: 0;
  transition: opacity 0.7s var(--ease), transform 1.4s var(--ease);
}

/* El velo solo existe cuando hay foto: sin ella no hay nada que oscurecer. */
.exp-velo { display: none; }

.exp-fondo + .exp-velo {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to right,
    rgba(48, 45, 34, 0.88) 0%,
    rgba(48, 45, 34, 0.72) 55%,
    rgba(48, 45, 34, 0.5) 100%
  );
}

.exp-item:hover .exp-fondo {
  opacity: 0.42;
  transform: scale(1.03);
}

.exp-enlace {
  position: relative;
  z-index: 1;
  display: block;
  padding-block: clamp(1.6rem, 4vw, 2.5rem);
  text-decoration: none;
  transition: padding-inline 0.5s var(--ease);
}

/* Con foto detrás, la fila necesita algo de aire lateral para que el texto no
   quede pegado al borde de la imagen. */
.exp-item:has(.exp-fondo) .exp-enlace {
  padding-inline: clamp(1rem, 3vw, 2rem);
}

a.exp-enlace:hover {
  padding-inline: 0.9rem;
}

.exp-bajada {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 0.6rem;
}

.exp-titulo {
  color: var(--lino);
}

.exp-texto {
  margin-top: 0.7rem;
  max-width: 62ch;
  color: rgba(var(--lino-rgb), 0.82);
}

/* Aclaración práctica de cada experiencia: si entra en la estadía o si se
   coordina y se paga aparte. Va separada del texto para que se lea de un
   vistazo y no le saque aire a la descripción. */
.exp-nota {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.35em 0.9em;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(var(--lino-rgb), 0.9);
  border: 1px solid rgba(var(--lino-rgb), 0.35);
}

.exp-nota--aparte {
  color: var(--ambar);
  border-color: rgba(217, 154, 43, 0.55);
}

.exp-masInfo {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
}

@media (min-width: 56rem) {
  .exp-enlace {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 2.5rem;
    align-items: start;
  }

  .exp-bajada {
    grid-row: 2;
    grid-column: 1;
    margin: 0;
  }

  .exp-titulo {
    grid-row: 1;
    grid-column: 1;
  }

  .exp-texto,
  .exp-masInfo,
  .exp-nota {
    grid-column: 2;
  }

  .exp-texto {
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .exp-nota {
    grid-row: 3;
    margin-top: 1rem;
  }

  /* Fila propia: en coaching conviven la aclaración y el "Conocer más". */
  .exp-masInfo {
    grid-row: 4;
    margin-top: 1rem;
  }
}


.con-encabezado {
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}

.con-panel {
  position: relative;
  z-index: 5;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

/* Blindaje: la sección de consulta entera vive por encima de cualquier
   otra capa (por ejemplo un fondo del hero que se estire). Sin esto, una
   capa invisible superpuesta se come los clics del calendario. */
#consultar {
  position: relative;
  z-index: 5;
}

/* Y que ningún fondo decorativo se salga de su sección y tape lo demás. */
.hero-fondo,
.coaching-hero__velo {
  z-index: 0;
  pointer-events: none;
}

@media (min-width: 58rem) {
  .con-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------ calendario - */

.con-calendario {
  border: 1px solid rgba(var(--tabaco-rgb), 0.28);
  padding: clamp(1.1rem, 3vw, 1.75rem);
}

.con-controlMes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.con-controlMes p {
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: capitalize;
}

.con-controlMes button {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(var(--tabaco-rgb), 0.3);
  color: var(--tabaco);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.con-controlMes button:hover:not(:disabled) {
  background-color: var(--tabaco);
  color: var(--lino);
}

.con-controlMes button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.con-semana,
.con-grillaDias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.con-semana {
  gap: 2px;
  margin-bottom: 0.5rem;
}

.con-semana span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tabaco);
}

.con-grillaDias {
  gap: 2px;
}

.con-dia {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: var(--body);
  font-size: 0.92rem;
  color: var(--tinta);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.con-dia:hover:not(:disabled) {
  background-color: rgba(var(--tabaco-rgb), 0.12);
}

.con-pasado {
  color: rgba(var(--tinta-rgb), 0.22);
  cursor: not-allowed;
}

/* Ocupado: tachado en diagonal, no un bloque de color.
   Se lee sin depender de distinguir tonos. */
.con-ocupado {
  color: rgba(var(--tinta-rgb), 0.3);
  cursor: not-allowed;
  background-image: linear-gradient(
    to top right,
    transparent calc(50% - 0.5px),
    rgba(var(--colorado-rgb), 0.55) calc(50% - 0.5px),
    rgba(var(--colorado-rgb), 0.55) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

.con-extremo {
  background-color: var(--colorado);
  color: var(--lino);
}

.con-extremo:hover {
  background-color: var(--colorado);
}

.con-enRango {
  background-color: rgba(var(--colorado-rgb), 0.14);
}

.con-referencia {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-size: 0.78rem;
  color: var(--tabaco);
}

.con-muestraOcupado {
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid rgba(var(--tabaco-rgb), 0.3);
  background-image: linear-gradient(
    to top right,
    transparent calc(50% - 0.5px),
    rgba(var(--colorado-rgb), 0.55) calc(50% - 0.5px),
    rgba(var(--colorado-rgb), 0.55) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

/* ------------------------------------------------------------ formulario - */

.con-formulario {
  display: grid;
  gap: 1.15rem;
}

.con-resumen {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(var(--tabaco-rgb), 0.28);
}

.con-resumenFechas {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: var(--colorado);
  line-height: 1.3;
}

.con-resumenNoches {
  margin-top: 0.3rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tabaco);
}

.con-resumenVacio {
  font-style: italic;
  color: var(--tabaco);
}

.con-fila {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
}

@media (min-width: 30rem) {
  .con-fila {
    grid-template-columns: 7rem 1fr;
  }
}

.con-campo {
  display: grid;
  gap: 0.4rem;
}

.con-campo > span {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tabaco);
}

.con-campo input,
.con-campo textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--tinta);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--tabaco-rgb), 0.35);
  padding: 0.55rem 0;
  border-radius: 0;
  transition: border-color 0.3s var(--ease);
}

.con-campo textarea {
  resize: vertical;
  line-height: 1.6;
}

.con-campo input:focus,
.con-campo textarea:focus {
  outline: none;
  border-bottom-color: var(--ambar);
  border-bottom-width: 1.5px;
}

.con-campo textarea::placeholder {
  color: rgba(var(--tinta-rgb), 0.38);
  font-style: italic;
}

.con-aviso {
  font-size: 0.86rem;
  color: var(--tabaco);
}


.cll-grilla {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 58rem) {
  .cll-grilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.cll-dato {
  color: var(--tabaco);
}

.cll-mapa {
  border: 1px solid rgba(var(--tabaco-rgb), 0.28);
}

.cll-mapa iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  /* Ata el mapa a la paleta: los mapas genéricos rompen el verde y el lino. */
  filter: sepia(0.28) saturate(0.75) hue-rotate(-8deg) contrast(0.95);
}


.ft-footer {
  background-color: var(--verde);
  color: var(--lino);
  padding: clamp(3rem, 8vw, 5rem) var(--borde-x) 2rem;
}

.ft-grilla {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 48rem) {
  .ft-grilla {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.ft-logo {
  font-size: 1.1rem;
}

.ft-lema {
  margin-top: 1.1rem;
  font-family: var(--display);
  font-style: italic;
  color: rgba(var(--lino-rgb), 0.78);
}

.ft-titulo {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 0.8rem;
}

.ft-datos p {
  color: rgba(var(--lino-rgb), 0.85);
  line-height: 1.9;
}

.ft-datos a {
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--lino-rgb), 0.3);
  transition: border-color 0.3s var(--ease);
}

.ft-datos a:hover {
  border-bottom-color: var(--ambar);
}

/* Última línea: el crédito del cliente a la izquierda y la firma de autor a
   la derecha. En pantallas chicas se apilan. */
.ft-credito {
  max-width: var(--ancho);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--lino-rgb), 0.2);
  font-size: 0.76rem;
  color: rgba(var(--lino-rgb), 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}

.ft-firma {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--lino-rgb), 0.4);
}

.ft-firma__marca {
  color: rgba(var(--lino-rgb), 0.72);
  letter-spacing: 0.2em;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--lino-rgb), 0.3);
  padding-bottom: 0.15em;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.ft-firma__marca:hover,
.ft-firma__marca:focus-visible {
  color: var(--lino);
  border-color: var(--ambar);
}


.wa-boton {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 40;

  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;

  background-color: var(--verde);
  color: var(--lino);
  box-shadow: 0 6px 20px rgba(var(--tinta-rgb), 0.22);

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease),
    visibility 0.5s,
    background-color 0.35s var(--ease);
}

.wa-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wa-boton:hover {
  background-color: var(--colorado);
}

.wa-boton svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .wa-boton {
    transition: none;
  }
}

/* ==========================================================================
   Extras del sitio estático (wordmark inline, aviso, coaching)
   ========================================================================== */

.wordmark {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  line-height: 1;
  white-space: nowrap;
}
.hd-logo .wordmark { font-size: inherit; }
.ft-logo .wordmark { font-size: 1.1rem; }
.hero-logo .wordmark { font-size: clamp(1.6rem, 5.5vw, 3rem); }

/* ---------------------------------------------------------- logo (SVG) --- */
/* Imagen del logo. Cada ubicación fija su alto; el ancho se acomoda solo. */
/* El SVG viene recortado al dibujo (proporción ~2.1:1, apaisado), así que el
   alto que se pide acá es el alto real que se ve. El aire alrededor lo pone
   el CSS, no el archivo. */
.logo-img { display: block; width: auto; }

/* Header: se muestran los dos apilados y se alterna según el fondo.
   Sobre el hero (transparente) va el claro; al scrollear (lino) el oscuro. */
.hd-logo { position: relative; display: inline-block; line-height: 0; }
.hd-logo .logo-img { height: clamp(2.6rem, 5.4vw, 3.4rem); }
.hd-logo .logo-oscuro { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease); }
.hd-solido .hd-logo .logo-claro { opacity: 0; }
.hd-solido .hd-logo .logo-oscuro { opacity: 1; }
/* Con el menú móvil abierto (fondo verde) vuelve el claro. */
.hd-conMenu .hd-logo .logo-claro { opacity: 1; }
.hd-conMenu .hd-logo .logo-oscuro { opacity: 0; }

/* Hero: logo claro, grande y centrado. Al ser apaisado conviene fijar el
   ancho y dejar que el alto se acomode solo. */
.hero-logo .logo-img { width: 100%; height: auto; margin-inline: auto; }

/* Footer: logo claro, tamaño medio. */
.ft-logo .logo-img { width: clamp(9rem, 24vw, 12rem); height: auto; }

@media (prefers-reduced-motion: reduce) {
  .hd-logo .logo-oscuro { transition: none; }
}

/* ------------------------------------------------- qué incluye la tarifa --- */
/* Etiqueta y explicación, con una hairline por fila. Mismo ritmo que la lista
   de experiencias, para que se lean como parientes. */
.incluye {
  margin: 0;
  border-top: 1px solid rgba(var(--tabaco-rgb), 0.24);
}

.incluye__fila {
  display: grid;
  gap: 0.35rem 2.5rem;
  padding-block: clamp(1.1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid rgba(var(--tabaco-rgb), 0.24);
}

@media (min-width: 48rem) {
  .incluye__fila {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: baseline;
  }
}

/* En pantallas anchas las seis filas se acomodan en dos columnas de tres.
   En una sola columna, el renglón corto de "Bebidas" dejaba un hueco enorme. */
@media (min-width: 68rem) {
  .incluye {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    border-top: 0;
  }

  .incluye__fila {
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(var(--tabaco-rgb), 0.24);
    border-bottom: 0;
  }
}

.incluye dt {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--colorado);
}

.incluye dd {
  margin: 0;
  color: rgba(var(--tinta-rgb), 0.82);
  max-width: 58ch;
}

/* La suite se distingue en su ficha sin gritar. */
.hab-tipo {
  font-family: var(--body);
  font-size: 0.62em;
  font-style: italic;
  color: var(--tabaco);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------- la mesa ------ */
.mesa-menu {
  list-style: none;
  padding: 0;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(var(--tabaco-rgb), 0.22);
  max-width: 46rem;
}

@media (min-width: 48rem) {
  /* Cuatro platos en una sola columna dejaban medio ancho vacío. */
  .mesa-menu {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 4rem);
    max-width: none;
  }
}

.mesa-menu li {
  padding-block: 1.1rem;
  border-bottom: 1px solid rgba(var(--tabaco-rgb), 0.22);
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  color: var(--tinta);
}

/* Las fotos de los platos son opcionales: la grilla aparece recién cuando
   hay alguna cargada, y se acomoda a las que haya. */
/* Sin ninguna foto cargada, el grupo entero desaparece: si solo se ocultaran
   las figuras, el contenedor seguía aportando su margen y quedaba un hueco. */
.grupo-opcional { display: none; }

.mesa-fotos.con-foto {
  display: grid;
}

.mesa-fotos {
  gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

@media (min-width: 52rem) {
  .mesa-fotos { grid-template-columns: repeat(4, 1fr); }
}

.mesa-foto { margin: 0; }

.mesa-foto__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.mesa-pie {
  margin-top: clamp(2rem, 5vw, 2.5rem);
  font-size: 0.92rem;
  color: var(--tabaco);
}

/* --- página coaching con caballos --- */
.coaching-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 70svh;
  padding: 8rem var(--borde-x) 5rem;
  text-align: center;
  color: var(--lino);
  background: linear-gradient(150deg, var(--verde) 0%, var(--tabaco) 100%);
  overflow: hidden;
}
/* La foto del hero se carga desde el panel. Si no hay ninguna, queda el
   degradado de la marca y la página funciona igual. */
.coaching-hero__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.coaching-hero__velo {
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 30%, rgba(217,154,43,0.18), transparent 60%);
}

/* Con foto detrás hace falta oscurecer, si no el título no se lee. El velo
   se pone denso solo cuando hay una imagen cargada: es el hermano siguiente. */
.coaching-hero__foto + .coaching-hero__velo {
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(217,154,43,0.14), transparent 60%),
    linear-gradient(to bottom,
      rgba(36, 31, 24, 0.55) 0%,
      rgba(36, 31, 24, 0.42) 50%,
      rgba(36, 31, 24, 0.62) 100%);
}

/* -------------------------------------------------- fotos del coaching --- */
/* Las figuras nacen ocultas y aparecen recién cuando el panel les cargó una
   foto. Así la página nunca muestra un recuadro gris esperando. */
.foto-opcional { display: none; }
.foto-opcional.con-foto { display: block; }

.coaching-foto {
  margin: 0;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.coaching-foto__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* La de la sesión es vertical: se le pone tope de ancho y se centra, para que
   no se coma la pantalla en escritorio. */
.coaching-foto--angosta {
  max-width: 26rem;
  margin-inline: auto;
}

.coaching-foto--angosta .coaching-foto__img {
  aspect-ratio: 4 / 5;
}
.coaching-hero__contenido { position: relative; max-width: 40rem; }
.coaching-hero h1 { color: var(--lino); }
.coaching-hero .subtitulo { color: rgba(244,237,222,0.82); margin-top: 1.25rem; }

.coaching-cita {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1.4;
  color: var(--colorado);
  max-width: 24ch;
}
.seccion--verde .coaching-cita { color: var(--ambar); }

.coaching-pasos {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
  border-top: 1px solid rgba(var(--tabaco-rgb), 0.22);
  counter-reset: paso;
}
.coaching-pasos li {
  border-bottom: 1px solid rgba(var(--tabaco-rgb), 0.22);
  padding-block: clamp(1.4rem, 3.5vw, 2.2rem);
  display: grid; gap: 0.5rem 2rem;
}
@media (min-width: 46rem) {
  .coaching-pasos li { grid-template-columns: 4rem 1fr; }
}
.coaching-pasos li::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ambar);
}
.coaching-pasos h3 { color: var(--colorado); }
.coaching-pasos p { margin-top: 0.4rem; max-width: 60ch; }

.coaching-modos {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .coaching-modos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .coaching-modos { grid-template-columns: repeat(4, 1fr); } }
.coaching-modo {
  border: 1px solid rgba(var(--lino-rgb), 0.25);
  padding: 1.6rem 1.4rem;
}
.coaching-modo h3 { color: var(--lino); font-size: 1.15rem; }
.coaching-modo p { margin-top: 0.5rem; font-size: 0.95rem; color: rgba(var(--lino-rgb),0.8); }