/* ============================================================
   LOS 3 CABALLOS — Estilos
   ------------------------------------------------------------
   PALETA (definida por los dueños): fondo CLARO (crema) +
   AZUL MARINO + DORADO (colores del logo). Sin rojo.
   Cambia los colores aquí abajo y se aplican a todo el sitio.
   ============================================================ */
:root{
  --fondo:      #f7f1e5;   /* fondo principal (crema) */
  --fondo-alt:  #efe4d0;   /* fondo de secciones alternas */
  --tarjeta:    #fffdf8;   /* tarjetas */
  --tinta:      #1b3050;   /* azul marino (títulos, logo) */
  --texto:      #453f36;   /* texto de párrafos */
  --suave:      #8b8173;   /* texto secundario */
  --dorado:     #a97f28;   /* acento dorado */
  --dorado-claro:#c8a24a;  /* dorado claro (sobre fondos oscuros) */
  --agave:      #5f7a4f;   /* verde (etiqueta Salón) */
  --linea:      rgba(27,48,80,.14);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;

  --max: 1180px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- Utilidades de sección ---------- */
section{ padding:clamp(3.5rem,8vw,7rem) clamp(1.25rem,5vw,4rem); }
.section__kicker{
  font-size:.78rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--dorado); font-weight:600; margin-bottom:1rem;
}
.section__kicker--light{ color:var(--dorado-claro); }
.section__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.1;
  margin-bottom:2.5rem; color:var(--tinta);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block; padding:.9rem 1.9rem; border-radius:2px;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; transition:all .25s ease; cursor:pointer;
  border:1px solid transparent;
}
.btn--gold{ background:var(--dorado); color:#fff; }
.btn--gold:hover{ background:var(--tinta); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--tinta); color:var(--tinta); }
.btn--ghost:hover{ background:var(--tinta); color:var(--fondo); }

/* ============================================================
   NAVEGACIÓN (barra clara, para que el logo azul marino se lea)
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem clamp(1.25rem,5vw,4rem);
  background:rgba(247,241,229,.95); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea);
  transition:box-shadow .3s ease;
}
.nav.is-scrolled{ box-shadow:0 4px 22px rgba(27,48,80,.10); }
.nav__logo{ display:flex; align-items:center; gap:.6rem; }
.nav__logo-img{ height:clamp(46px,6vw,60px); width:auto; display:block; }
.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta); font-weight:500; transition:color .2s ease;
}
.nav__links a:hover{ color:var(--dorado); }

.nav__right{ display:flex; align-items:center; gap:clamp(1rem,3vw,1.8rem); }

/* Selector de idioma */
.nav__lang{ display:flex; align-items:center; gap:.5rem; }
.nav__lang a{
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--suave);
  font-weight:600; transition:color .2s ease;
}
.nav__lang a.is-active{ color:var(--dorado); }
.nav__lang a:hover{ color:var(--dorado); }
.nav__lang-sep{ color:var(--suave); opacity:.5; }

.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
.nav__toggle span{ width:26px; height:2px; background:var(--tinta); transition:.3s; }

/* ============================================================
   HERO (foto de fondo + logo sobre panel crema para que se lea)
   ============================================================ */
.hero{ position:relative; height:100vh; min-height:560px; display:grid; place-items:center; text-align:center; }
.hero__media{
  position:absolute; inset:0;
  /* EDITAR FOTO PORTADA: cambia el nombre del archivo por otra foto de fotos/ */
  background:url('fotos/interiores_salon_principal.jpg') center/cover no-repeat;
}
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(27,48,80,.78), rgba(27,48,80,.32)); }
.hero__content{ position:relative; z-index:2; padding:0 1.25rem; max-width:760px; }
.hero__eyebrow{ font-size:.8rem; letter-spacing:.34em; text-transform:uppercase; color:var(--dorado-claro); margin-bottom:1.4rem; }
.hero__logo{
  display:inline-block; background:rgba(247,241,229,.94);
  padding:1.4rem 1.8rem; border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.hero__logo img{ width:min(300px,60vw); height:auto; display:block; margin:0 auto; }
.hero__tagline{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.2rem,3vw,1.9rem); color:rgba(255,255,255,.92); margin:1.4rem 0 2.4rem;
}
.hero__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
/* Botón fantasma sobre la foto oscura: borde claro */
.hero .btn--ghost{ border-color:rgba(255,255,255,.85); color:#fff; }
.hero .btn--ghost:hover{ background:#fff; color:var(--tinta); }
.hero__scroll{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:2; font-size:1.4rem; color:#fff; animation:bob 2s infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ============================================================
   MARCA
   ============================================================ */
.marca{ max-width:var(--max); margin:0 auto; text-align:center; }
.marca__title{ font-family:var(--serif); font-weight:600; color:var(--tinta); font-size:clamp(2rem,5vw,3.4rem); line-height:1.12; margin-bottom:1.6rem; }
.marca__text{ max-width:640px; margin:0 auto; color:var(--texto); font-size:1.08rem; }

/* ============================================================
   GALERÍA
   ============================================================ */
.galeria{ background:var(--fondo-alt); max-width:100%; }
.galeria .section__kicker, .galeria .section__title{ text-align:center; }
.galeria .section__title{ margin-left:auto; margin-right:auto; }
.gal{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  max-width:var(--max); margin:0 auto;
}
.gal__item{
  position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden;
  display:flex; align-items:flex-end; padding:1rem;
  background-size:cover; background-position:center;
  border:1px solid var(--linea);
  transition:transform .4s ease; box-shadow:0 8px 24px rgba(27,48,80,.08);
}
.gal__item:hover{ transform:scale(1.02); }
.gal__item figcaption{
  position:relative; z-index:2; font-family:var(--serif); font-size:1.3rem;
  color:#fff;
}
.gal__item::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(27,48,80,.8), transparent 60%); }
/* EDITAR FOTOS: cambia el nombre del archivo por otra foto de fotos/.
   La de "La familia" (juegos de niños) aún no tiene foto: queda con degradado. */
.gal__item--1{ background:url('fotos/interiores_salon_principal.jpg') center/cover no-repeat; } /* El interior */
.gal__item--2{ background:url('fotos/jamaiquita.jpg') center/cover no-repeat; }               /* La barra */
.gal__item--3{ background:url('fotos/mariachi.jpg') center/cover no-repeat; }                 /* La familia */
.gal__item--4{ background:url('fotos/fachada_3C.jpg') center/cover no-repeat; }               /* Valet Parking */
.gal__item--5{ background:url('fotos/interiores_percheron.jpg') center/cover no-repeat; }     /* Salones para eventos */
.gal__item--6{ background:url('fotos/juegos.png') center/cover no-repeat; }                   /* Juegos */

/* ============================================================
   FEATURE (Platillo del mes)
   ============================================================ */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; align-items:stretch; min-height:70vh; }
.feature__media{
  min-height:360px;
  /* EDITAR FOTO PLATILLO: cambia el archivo por la foto del platillo del mes */
  background:url('fotos/platillo_arrachera.jpg') center/cover no-repeat;
}
.feature__body{ display:flex; flex-direction:column; justify-content:center; padding:clamp(2.5rem,6vw,5rem); background:var(--fondo-alt); }
.feature__title{ font-family:var(--serif); font-weight:600; color:var(--tinta); font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin-bottom:1.1rem; }
.feature__text{ color:var(--texto); font-size:1.06rem; margin-bottom:1.4rem; max-width:38ch; }
.feature__price{ font-family:var(--serif); font-size:1.8rem; color:var(--dorado); font-weight:600; }

/* ============================================================
   MENÚ
   ============================================================ */
.menu{ max-width:var(--max); margin:0 auto; }
.menu__grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem 3.5rem; }
.menu__item h3{ font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--tinta); }
.menu__head{ display:flex; align-items:baseline; gap:.75rem; margin-bottom:.4rem; }
.menu__dots{ flex:1; border-bottom:1px dotted var(--suave); opacity:.6; transform:translateY(-4px); }
.menu__price{ font-family:var(--serif); font-size:1.3rem; color:var(--dorado); font-weight:600; }
.menu__item p{ color:var(--texto); font-size:.98rem; }

/* ============================================================
   DOS EXPERIENCIAS (Restaurante | Salones)
   ============================================================ */
.exp{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; }
.exp__card{
  position:relative; min-height:60vh; display:flex; align-items:center;
  padding:clamp(2.5rem,6vw,5rem); overflow:hidden;
}
/* EDITAR FOTOS: cambia el archivo por otra foto de fotos/ */
.exp__card--restaurante{ background:url('fotos/interiores_azteca_1.jpg') center/cover no-repeat; }
.exp__card--salones{ background:url('fotos/interiores_percheron_1.jpg') center/cover no-repeat; }
.exp__overlay{ position:absolute; inset:0; background:linear-gradient(to right, rgba(27,48,80,.82), rgba(27,48,80,.4)); }
.exp__body{ position:relative; z-index:2; max-width:38ch; }
.exp__card .section__kicker{ color:var(--dorado-claro); }
.exp__title{ font-family:var(--serif); font-weight:600; color:#fff; font-size:clamp(2rem,4vw,3rem); line-height:1.05; margin-bottom:1rem; }
.exp__text{ color:rgba(255,255,255,.88); font-size:1.05rem; margin-bottom:1.6rem; }
.exp .btn--ghost{ border-color:rgba(255,255,255,.85); color:#fff; }
.exp .btn--ghost:hover{ background:#fff; color:var(--tinta); }

/* ============================================================
   SALONES Y EVENTOS
   ============================================================ */
.salones{ display:grid; grid-template-columns:1fr 1.1fr; gap:0; padding:0; background:var(--fondo); align-items:stretch; }
.salones__media{
  min-height:420px;
  /* EDITAR FOTO SALÓN: cambia el archivo por otra foto de fotos/ */
  background:url('fotos/interiores_pura_sangre_2.jpg') center/cover no-repeat;
}
.salones__body{ padding:clamp(2.5rem,6vw,5rem); }
.salones__intro{ color:var(--texto); font-size:1.06rem; max-width:52ch; margin-bottom:2rem; }
.salones__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2rem; margin-bottom:2.2rem; }
.salones__item h3{ font-family:var(--serif); font-weight:600; font-size:1.35rem; color:var(--dorado); margin-bottom:.3rem; }
.salones__item p{ color:var(--texto); font-size:.96rem; }

/* ============================================================
   PROMOCIONES (banda azul marino; 1 o 2 tarjetas, sin encimarse)
   ============================================================ */
.promos{
  padding:clamp(3.5rem,8vw,6rem) clamp(1.25rem,5vw,4rem);
  background:var(--tinta);
}
.promos__head{ text-align:center; }
.promos__grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem;
  max-width:var(--max); margin:0 auto;
}
.promo-card{
  flex:1 1 360px; max-width:520px;
  background:var(--tarjeta); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:0 16px 40px rgba(0,0,0,.22);
}
.promo-card__tag{
  display:inline-block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:#fff; background:var(--dorado);
  padding:.28rem .7rem; border-radius:100px; margin-bottom:1rem;
}
.promo-card__tag--salon{ background:var(--agave); }
.promo-card__title{ font-family:var(--serif); font-weight:700; color:var(--tinta); font-size:clamp(1.6rem,3.5vw,2.4rem); line-height:1.05; margin-bottom:.7rem; }
.promo-card__text{ color:var(--texto); font-size:1.02rem; }
.promo-card__link{ display:inline-block; margin-top:1rem; color:var(--dorado); font-weight:600; letter-spacing:.04em; }
.promo-card__link:hover{ color:var(--tinta); }
.promo-card__fine{ display:block; margin-top:.6rem; font-size:.72rem; color:var(--suave); }

/* ============================================================
   EL FUNDADOR (bloque pequeño)
   ============================================================ */
.fundador{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; gap:clamp(1.5rem,4vw,3rem);
}
.fundador__foto{
  width:clamp(120px,20vw,200px); flex-shrink:0;
  aspect-ratio:4/5; object-fit:cover; border-radius:8px;
  border:1px solid var(--linea); filter:sepia(.15);
  box-shadow:0 10px 30px rgba(27,48,80,.12);
}
.fundador__body{ max-width:52ch; }
.fundador__title{ font-family:var(--serif); font-weight:600; color:var(--tinta); font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.6rem; }
.fundador__text{ color:var(--texto); font-size:1rem; }

/* ============================================================
   RESEÑAS (prueba social)
   ============================================================ */
.resenas{ max-width:var(--max); margin:0 auto; text-align:center; }
.resenas .section__title{ margin-bottom:0; }
.resenas__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  margin:2.5rem 0; text-align:left;
}
.resena{
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:10px;
  padding:1.6rem; display:flex; flex-direction:column; gap:.8rem;
  box-shadow:0 10px 28px rgba(27,48,80,.07);
}
.resena__stars{ color:var(--dorado); letter-spacing:2px; font-size:1rem; }
.resena__text{ color:var(--texto); font-size:.98rem; flex:1; font-style:italic; }
.resena__name{ font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--tinta); }
.resena__meta{ font-size:.76rem; color:var(--suave); }

/* ============================================================
   VISÍTANOS
   ============================================================ */
.visita{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; background:var(--fondo-alt); align-items:stretch; }
.visita__info{ padding:clamp(2.5rem,6vw,5rem); }
.horarios__label{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta); font-weight:600; margin-bottom:.6rem; }
.horarios{ list-style:none; margin-bottom:1.4rem; max-width:420px; }
.horarios__nota{ max-width:420px; margin-bottom:2rem; color:var(--texto); font-size:.96rem; }
.horarios__nota strong{ color:var(--tinta); }
.horarios__nota a{ color:var(--dorado); font-weight:600; }
.horarios__nota a:hover{ color:var(--tinta); }
.horarios li{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--linea); }
.horarios li span:first-child{ color:var(--tinta); font-weight:500; }
.horarios li span:last-child{ color:var(--texto); }
.visita__contacto{ margin-bottom:2rem; display:grid; gap:1.1rem; }
.visita__contacto strong{ color:var(--dorado); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; }
.visita__contacto a:hover{ color:var(--dorado); }
.visita__mapa{ min-height:380px; }
.visita__mapa iframe{ width:100%; height:100%; min-height:380px; border:0; filter:grayscale(.2) contrast(1.03); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  display:flex; flex-direction:column; align-items:center; gap:1.3rem;
  padding:3rem 1.25rem; text-align:center; border-top:1px solid var(--linea);
  background:var(--fondo);
}
.footer__brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-size:1.2rem; }
.footer__logo{ height:clamp(80px,10vw,104px); width:auto; display:block; }
.footer__social{ display:flex; gap:1.8rem; }
.footer__social a{ font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--suave); font-weight:500; }
.footer__social a:hover{ color:var(--dorado); }
.footer__legal{ font-size:.8rem; color:var(--suave); }

/* ============================================================
   ANIMACIÓN AL HACER SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE (celular / tablet)
   ============================================================ */
@media (max-width:860px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    background:var(--fondo); flex-direction:column; justify-content:center;
    gap:2rem; padding:2rem; transform:translateX(100%); transition:transform .35s ease;
    box-shadow:-8px 0 30px rgba(27,48,80,.12);
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__toggle{ display:flex; z-index:60; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .feature{ grid-template-columns:1fr; }
  .feature__media{ min-height:280px; }
  .menu__grid{ grid-template-columns:1fr; }
  .visita{ grid-template-columns:1fr; }
  .visita__mapa{ min-height:320px; }
  .exp{ grid-template-columns:1fr; }
  .exp__card{ min-height:44vh; }
  .salones{ grid-template-columns:1fr; }
  .salones__media{ min-height:260px; }
  .fundador{ flex-direction:column; text-align:center; }
  .fundador__foto{ width:clamp(140px,45vw,200px); }
  .resenas__grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .gal{ grid-template-columns:1fr; }
  .hero__actions{ flex-direction:column; align-items:center; }
  .hero__actions .btn{ width:100%; max-width:280px; }
  .salones__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   PÁGINAS INTERNAS (Salones / Historia)
   ============================================================ */
/* Hero compacto para sub-páginas */
.page-hero{ position:relative; min-height:56vh; display:grid; place-items:center; text-align:center; padding:8rem 1.25rem 4rem; }
.page-hero__media{ position:absolute; inset:0; background-size:cover; background-position:center; }
.page-hero__overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(27,48,80,.85), rgba(27,48,80,.5)); }
.page-hero__content{ position:relative; z-index:2; max-width:760px; }
.page-hero__eyebrow{ font-size:.8rem; letter-spacing:.34em; text-transform:uppercase; color:var(--dorado-claro); margin-bottom:1rem; }
.page-hero__title{ font-family:var(--serif); font-weight:700; color:#fff; font-size:clamp(2.4rem,6vw,4rem); line-height:1.02; margin-bottom:1rem; }
.page-hero__text{ color:rgba(255,255,255,.9); font-size:clamp(1rem,2.2vw,1.2rem); max-width:600px; margin:0 auto 1.8rem; }
.page-hero .btn--ghost{ border-color:rgba(255,255,255,.85); color:#fff; }
.page-hero .btn--ghost:hover{ background:#fff; color:var(--tinta); }
/* Fondos de los heros de página (EDITAR: cambia el archivo por otra foto) */
.ph-salones{ background:url('fotos/interiores_pura_sangre_1.jpg') center/cover no-repeat; }
.ph-historia{ background:url('fotos/interiores_salon_principal.jpg') center/cover no-repeat; }

/* Bloque de texto centrado (intro de sección) */
.bloque{ max-width:760px; margin:0 auto; text-align:center; }
.bloque__text{ color:var(--texto); font-size:1.08rem; }

/* Lista de salones con capacidad */
.salones-list{ max-width:var(--max); margin:2.5rem auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.salon-card{ background:var(--tarjeta); border:1px solid var(--linea); border-radius:10px; overflow:hidden; box-shadow:0 10px 28px rgba(27,48,80,.07); }
.salon-card__img{ aspect-ratio:4/3; background-size:cover; background-position:center; }
.salon-card__body{ padding:1.3rem 1.4rem; }
.salon-card__body h3{ font-family:var(--serif); color:var(--tinta); font-size:1.5rem; margin-bottom:.3rem; }
.salon-card__cap{ color:var(--dorado); font-weight:600; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; }
.salon-card__body p{ color:var(--texto); font-size:.95rem; margin-top:.5rem; }

/* Qué incluye */
.incluye{ max-width:var(--max); margin:0 auto; }
.incluye__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 2rem; margin-top:1.5rem; list-style:none; }
.incluye__grid li{ padding-left:1.7rem; position:relative; color:var(--texto); }
.incluye__grid li::before{ content:"✦"; position:absolute; left:0; color:var(--dorado); }

/* Línea de tiempo (Historia) */
.timeline{ position:relative; max-width:820px; margin:2.5rem auto 0; }
.timeline::before{ content:""; position:absolute; left:112px; top:.4rem; bottom:.4rem; width:2px; background:var(--linea); }
.tl-item{ position:relative; padding:0 0 2.4rem 150px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-year{ position:absolute; left:0; top:0; width:92px; text-align:right; font-family:var(--serif); font-weight:700; color:var(--dorado); font-size:1.2rem; line-height:1.15; }
.tl-item::before{ content:""; position:absolute; left:105px; top:.3rem; width:16px; height:16px; border-radius:50%; background:var(--dorado); border:3px solid var(--fondo); box-shadow:0 0 0 1px var(--linea); }
.tl-title{ font-family:var(--serif); color:var(--tinta); font-size:1.5rem; line-height:1.1; margin-bottom:.4rem; }
.tl-text{ color:var(--texto); font-size:1rem; }
.tl-img{ width:190px; max-width:100%; border-radius:8px; margin-top:1rem; filter:sepia(.15); border:1px solid var(--linea); }

@media (max-width:1000px){
  .salones-list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .salones-list{ grid-template-columns:1fr 1fr; }
  .incluye__grid{ grid-template-columns:1fr; }
  .timeline::before{ display:none; }
  .tl-item{ padding:0 0 2rem 0; }
  .tl-year{ position:static; width:auto; text-align:left; margin-bottom:.3rem; display:block; }
  .tl-item::before{ display:none; }
}
@media (max-width:460px){
  .salones-list{ grid-template-columns:1fr; }
}

/* ============================================================
   HISTORIA — prosa larga, cita destacada y "credo"
   ============================================================ */
.prosa{ max-width:720px; margin:0 auto; }
.prosa h2{ font-family:var(--serif); color:var(--tinta); font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.15; margin:2.6rem 0 .9rem; }
.prosa p{ color:var(--texto); font-size:1.08rem; margin-bottom:1.15rem; }
.prosa p.lead{ font-size:1.22rem; color:var(--tinta); font-family:var(--serif); font-style:italic; }
.figura{ margin:2.2rem auto; max-width:460px; text-align:center; }
.figura img{ width:100%; border-radius:10px; border:1px solid var(--linea); filter:sepia(.15); box-shadow:0 12px 32px rgba(27,48,80,.12); }
.figura figcaption{ color:var(--suave); font-size:.85rem; font-style:italic; margin-top:.6rem; }
.cita{ max-width:820px; margin:0 auto; text-align:center; padding:clamp(2.5rem,6vw,4.5rem) 1rem; }
.cita blockquote{ font-family:var(--serif); font-style:italic; color:var(--dorado); font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.12; }
.cita figcaption{ color:var(--tinta); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; margin-top:1rem; }
.credo{ max-width:720px; margin:1.6rem auto 0; list-style:none; }
.credo li{ padding:.7rem 0 .7rem 1.9rem; position:relative; color:var(--texto); border-bottom:1px solid var(--linea); font-size:1.06rem; }
.credo li:last-child{ border-bottom:0; }
.credo li::before{ content:"✦"; position:absolute; left:0; color:var(--dorado); }