/* =========================================================
   HISTORIA — CSS CONSOLIDADO (aislado, sin conflictos)
   Reemplaza todo lo previo de historia por este bloque.
   ========================================================= */

/* Variables SOLO para historia (no globales) */
html[data-page="historia"] {
  --hist-gold: #C9A789;   /* dorado sitio */
  --hist-ink:  #2f3137;   /* gris oscuro */
  --hist-gold-weak: #EFE6DA;
  --hist-blue: #0b5ed7;   /* puedes ajustarlo si prefieres dorado */
}

/* ----------------------------
   1) HERO Historia (look histórico)
   ---------------------------- */
html[data-page="historia"] .hist-hero { position: relative; }
html[data-page="historia"] .hist-hero .swiper-container,
html[data-page="historia"] .hist-hero .swiper-wrapper,
html[data-page="historia"] .hist-hero .swiper-slide { min-height: 60vh; }
@media (max-width: 1199.98px){
  html[data-page="historia"] .hist-hero .swiper-container,
  html[data-page="historia"] .hist-hero .swiper-wrapper,
  html[data-page="historia"] .hist-hero .swiper-slide { min-height: 52vh; }
}
@media (max-width: 767.98px){
  html[data-page="historia"] .hist-hero .swiper-container,
  html[data-page="historia"] .hist-hero .swiper-wrapper,
  html[data-page="historia"] .hist-hero .swiper-slide { min-height: 44vh; }
}
html[data-page="historia"] .hist-hero .swiper-slide{ display:flex; align-items:center; }
html[data-page="historia"] .hist-hero .image-layer{ position:absolute; inset:0; background-size:cover; background-position:center; filter: contrast(1.05) saturate(.75) brightness(.9); z-index:0; }
html[data-page="historia"] .hist-hero .container{ position:relative; z-index:1; padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 991.98px){
  html[data-page="historia"] .hist-hero .container{ padding-top: 64px; padding-bottom: 64px; }
}
/* Tipografía hero */
html[data-page="historia"] .hist-hero__eyebrow{
  font-family: 'EB Garamond', Georgia, serif;
  letter-spacing: .14em; text-transform: uppercase; font-weight:600;
  color: rgba(255,255,255,.9); border-left: 3px solid var(--hist-gold); padding-left: .6rem; display:inline-block; margin-bottom:.35rem;
}
html[data-page="historia"] .hist-hero__title{
  font-family: 'Cinzel', 'EB Garamond', Georgia, serif;
  font-weight:700; font-size: clamp(2.2rem, 3.8vw, 4.4rem);
  line-height:1.08; letter-spacing:.6px; color:#fff;
  text-shadow: 0 12px 42px rgba(0,0,0,.28);
}
html[data-page="historia"] .hist-hero__subtitle{
  font-family: 'EB Garamond', Georgia, serif; color: rgba(255,255,255,.92); max-width: 60ch; }

/* Bullets y flechas del hero (solo historia) */
html[data-page="historia"] #hist-slider-pagination .swiper-pagination-bullet{ opacity:.8; }
html[data-page="historia"] #hist-slider-pagination .swiper-pagination-bullet-active{ background: var(--hist-gold); }
html[data-page="historia"] #hist-slider-prev,
html[data-page="historia"] #hist-slider-next{ border-color: rgba(255,255,255,.75); color:#fff; }

/* ----------------------------
   2) Layout con índice lateral (filtros)
   ---------------------------- */
html[data-page="historia"] .hx-content{
  display:grid; grid-template-columns: 280px 1fr; gap: 2rem; margin: 1rem 0;
}
@media (max-width: 991px){
  html[data-page="historia"] .hx-content{ grid-template-columns: 1fr; }
}
html[data-page="historia"] :target{ scroll-margin-top: 110px; } /* offset anclas */

/* Panel de filtros */
html[data-page="historia"] .hx-filters{
  background: var(--hist-gold-weak); border: 1px solid rgba(0,0,0,.04);
  border-radius: 8px; padding: .7rem; position: sticky; top: 110px;
}
html[data-page="historia"] .hx-filters__list{ list-style:none; margin:0; padding:0; }
html[data-page="historia"] .hx-filter{
  width: 100%; display:block; text-align:left;
  background:#fff; color: var(--hist-ink);
  border:1px solid #e5e7eb; border-radius:12px; padding:.6rem .8rem; margin-bottom:.5rem;
  transition: box-shadow .18s ease, border-color .18s ease; font-weight:600;
}
html[data-page="historia"] .hx-filter:hover{ box-shadow: 0 2px 10px rgba(0,0,0,.06); border-color:#d8d8d8; }
html[data-page="historia"] .hx-filter.is-active{
  background: var(--hist-gold); color:#fff; border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}

/* Visibilidad por filtro */
html[data-page="historia"] .hx-article .hx-section{ display:none; }
html[data-page="historia"] .hx-article .hx-section.is-visible{ display:block; }

/* ----------------------------
   3) Cifras (tarjetas cuadradas)
   ---------------------------- */
html[data-page="historia"] .hx-stats-grid{
  display:grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
html[data-page="historia"] .hx-stat{ background:#fff; border:1px solid #eee; border-radius:16px; box-shadow: 0 10px 26px rgba(0,0,0,.06); padding: 1rem; }
html[data-page="historia"] .hx-stat--square{
  aspect-ratio: 1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transition: transform .15s ease, box-shadow .15s ease;
}
html[data-page="historia"] .hx-stat--square:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.08); }
html[data-page="historia"] .hx-stat__icon{
  width: 60px; height: 60px; border-radius: 14px; background: #F5EFE8; color: var(--hist-gold);
  display:flex; align-items:center; justify-content:center; font-size: 30px; margin-bottom:.65rem;
}
html[data-page="historia"] .hx-stat__label{ color:#6b7280; font-size:.92rem; margin-bottom:.15rem; }
html[data-page="historia"] .hx-stat__hint{ font-size:.82rem; color:#8a8f98; margin-top:.15rem; }
html[data-page="historia"] .hx-stat__value{ color: var(--hist-ink); font-weight: 800; font-size: 1.15rem; }

/* ----------------------------
   4) Timeline vertical (sencilla, estable e invertida)
   ---------------------------- */
html[data-page="historia"] .hx-timeline{ position: relative; padding-left: 64px; }
html[data-page="historia"] .hx-tl__line{
  position: absolute; left: 30px; top: 0; bottom: 0; width: 4px; background: #e5e7eb; border-radius: 2px;
}
html[data-page="historia"] .hx-tl__line-fill{
  position: absolute; left: 0; top: 0; width: 4px; height: 0;
  background: linear-gradient(180deg, var(--hist-gold), #d8c1a9); border-radius: 2px;
}
html[data-page="historia"] .hx-tl__item{ position: relative; margin: 0 0 1.1rem 0; }
html[data-page="historia"] .hx-tl__year{
  position:absolute; left:-64px; top:.15rem; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--hist-gold); color:#fff; font-weight:800; box-shadow:0 4px 14px rgba(0,0,0,.12);
}
html[data-page="historia"] .hx-tl__content{
  padding: .85rem 1rem; border:1px solid #eee; border-radius:12px; background:#fff; box-shadow:0 6px 24px rgba(0,0,0,.06);
}
html[data-page="historia"] .hx-tl__content h4{ margin: 0 0 .2rem 0; font-weight:800; color:var(--hist-ink); }
html[data-page="historia"] .hx-tl__subyear{ color:#6b7280; font-weight:600; margin-bottom:.25rem; }
html[data-page="historia"] .hx-tl__fig{ margin:.5rem 0 0 0; }
html[data-page="historia"] .hx-tl__fig img{ width:100%; height: 220px; object-fit: cover; border-radius: 10px; }

/* ----------------------------
   5) Listas simples (lugares)
   ---------------------------- */
html[data-page="historia"] .hx-list{ padding-left: 1rem; }
html[data-page="historia"] .hx-places{ list-style:none; padding:0; margin:0; }
html[data-page="historia"] .hx-places li{
  display:flex; gap:.75rem; padding:.7rem .9rem; border:1px solid #eee; border-radius:12px; background:#fff; margin-bottom:.6rem;
}
html[data-page="historia"] .hx-places__index{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background: var(--hist-gold); color:#fff; font-weight:700; font-size:.9rem; flex:0 0 28px;
}


/* ====== ESPACIADOS / RESPIRACIÓN (Historia) ====== */

/* separa el hero del contenido */
html[data-page="historia"] .main-slider {
  margin-bottom: 28px;
}

/* colchón general del cuerpo de historia */
html[data-page="historia"] .hx-article {
  padding-top: 24px;
  padding-bottom: 64px; /* separa del footer */
  background: #fff;
}

/* sidebar y contenido con aire */
html[data-page="historia"] .hx-filters { 
  margin-bottom: 16px;
  padding: 10px 12px;
}

html[data-page="historia"] .col-lg-9 > .hx-section {
  margin-bottom: 40px;   /* separa secciones */
}

/* cifras: aire arriba/abajo y mejor gap */
html[data-page="historia"] #stats-block { 
  margin-top: 12px; 
}

html[data-page="historia"] .hx-stats-grid {
  gap: 18px;             /* más espacio entre tarjetas */
}

/* timeline: aire superior y entre items */
html[data-page="historia"] .hx-timeline {
  margin-top: 10px;
}

html[data-page="historia"] .hx-tl__item {
  margin-bottom: 28px;   /* distancia entre hitos */
}

/* seguridad extra: separación del footer */
html[data-page="historia"] .site-footer {
  margin-top: 40px;
}

/* si usas el panel lateral sticky, ajusta el offset para que no choque con el header */
html[data-page="historia"] .hx-filters { 
  position: sticky; 
  top: 110px;            /* mismo alto de tu header */
}


/* Intro editorial (Jilotepec) */
html[data-page="historia"] .hx-intro{
  margin-top: clamp(24px, 4vw, 56px);
  margin-bottom: clamp(16px, 3vw, 40px);
}

html[data-page="historia"] .hx-intro__title{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  margin: 0 0 .35rem 0;
}

html[data-page="historia"] .hx-intro__lead{
  color:#6b7280;            /* gris del sitio */
  max-width: 56ch;
  margin: 0;
}

html[data-page="historia"] .hx-intro__img{
  display:block;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
}

/* Un poco de aire entre el slider y el intro */
html[data-page="historia"] .main-slider + .hx-intro{
  margin-top: clamp(28px, 5vw, 64px);
}

/* Un poco de aire antes del panel de filtros/secciones */
html[data-page="historia"] .hx-article,
html[data-page="historia"] .hx-sections{
  margin-top: clamp(20px, 3vw, 36px);
}



/* ===== RESET para evitar que estilos viejos de .hx-timeline afecten a la variante ALT ===== */
html[data-page="historia"] #hx-timeline{
  padding: 0 !important;
  margin: 0 !important;
}

/* ===== Timeline alterno, centrado en la COLUMNA, fotos redondas ===== */
html[data-page="historia"] .hx-timeline-alt{
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 6px 0 24px;
}

html[data-page="historia"] .hx-timeline-alt .hx-tl-rail{
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  transform: translateX(-1px);
  z-index: 0;                 /* detrás, nunca tapa clics */
  pointer-events: none;
}
html[data-page="historia"] .hx-timeline-alt .hx-tl-rail::before{
  content:"";
  position:absolute; inset:0;
  width: 2px; margin-left: -1px;
  background: #e7e7e7;
  border-radius: 2px;
}
html[data-page="historia"] .hx-timeline-alt .hx-tl-rail__fill{
  position:absolute; left:0; top:0; width:2px; height:0;
  transform: translateX(-1px);
  background: linear-gradient(180deg,#C9A789 0%, #8f6a4f 100%);
  border-radius: 2px;
}

/* ítems: alternan lados, ocupan 50% de la COLUMNA */
html[data-page="historia"] .hx-timeline-alt .hx-tli{
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  width: calc(50% - 42px);
  margin: 56px 0;
  z-index: 1; /* por encima del rail */
}

html[data-page="historia"] .hx-timeline-alt .hx-tli.is-left{
  margin-right: auto;
  flex-direction: row-reverse;
  text-align: right;
  transform: translateX(-6px);
}
html[data-page="historia"] .hx-timeline-alt .hx-tli.is-right{
  margin-left: auto;
  transform: translateX(6px);
}

/* foto REDONDA consistente */
html[data-page="historia"] .hx-timeline-alt .hx-tli__img{
  width: 280px; height: 280px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 280px;
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
  pointer-events: auto; /* clickeable */
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__img img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* texto */
html[data-page="historia"] .hx-timeline-alt .hx-tli__txt{ max-width: 420px; }
html[data-page="historia"] .hx-timeline-alt .hx-tli__epoca{
  display:block; font-weight:800; font-size:1.1rem; color:#1f2937; margin-bottom:.25rem;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__resumen{ color:#4b5563; margin:.25rem 0 .65rem; }

/* botón */
html[data-page="historia"] .hx-timeline-alt .hx-tli__more{
  border-radius: 12px;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:.55rem .9rem;
  font-weight:700;
  transition:.18s ease;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__more:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* móvil: apila */
@media (max-width: 767.98px){
  html[data-page="historia"] .hx-timeline-alt .hx-tli{
    width: 100%;
    margin: 28px 0;
    transform: none !important;
    flex-direction: row !important;
    text-align: left !important;
  }
  html[data-page="historia"] .hx-timeline-alt .hx-tli__img{
    width: 200px; height: 200px; flex: 0 0 200px;
  }
  html[data-page="historia"] .hx-timeline-alt .hx-tli__txt{ max-width: unset; }
}


/* ===== TIMELINE: riel centrado en la columna ===== */
html[data-page="historia"] .hx-timeline-alt{
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 8px 0 40px;
}

/* Riel siempre centrado dentro de la columna */
html[data-page="historia"] .hx-timeline-alt .hx-tl-rail{
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  transform: translateX(-1px);
  z-index: 0;
  pointer-events: none;
}
html[data-page="historia"] .hx-timeline-alt .hx-tl-rail::before{
  content:"";
  position:absolute; inset:0;
  width: 2px; margin-left: -1px;
  background: #e7e7e7;
  border-radius: 2px;
}
html[data-page="historia"] .hx-timeline-alt .hx-tl-rail__fill{
  position:absolute; left:0; top:0; width:2px; height:0;
  transform: translateX(-1px);
  background: linear-gradient(180deg,#C9A789 0%, #8f6a4f 100%);
  border-radius: 2px;
}

/* ===== ÍTEMS: grid [texto] [CÍRCULO] [texto] ===== */
:root{ --hx-circle: 220px; --hx-gap: 28px; }

html[data-page="historia"] .hx-timeline-alt .hx-tli{
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--hx-circle) 1fr;
  align-items: center;
  column-gap: var(--hx-gap);
  margin: 56px 0;
  z-index: 1; /* encima del riel */
}

/* CÍRCULO SIEMPRE EN LA COLUMNA CENTRAL */
html[data-page="historia"] .hx-timeline-alt .hx-tli__img{
  grid-column: 2;
  justify-self: center;
  width: var(--hx-circle);
  height: var(--hx-circle);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
  pointer-events: auto;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__img img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* TEXTO: alterna lados */
html[data-page="historia"] .hx-timeline-alt .hx-tli__txt{ max-width: 460px; }
html[data-page="historia"] .hx-timeline-alt .hx-tli.is-left .hx-tli__txt{
  grid-column: 1; text-align: right; justify-self: end;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli.is-right .hx-tli__txt{
  grid-column: 3; text-align: left; justify-self: start;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__epoca{
  display:block; font-weight:800; font-size:1.1rem; color:#1f2937; margin-bottom:.25rem;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__resumen{ color:#4b5563; margin:.25rem 0 .65rem; }

/* Botón */
html[data-page="historia"] .hx-timeline-alt .hx-tli__more{
  border-radius: 12px; border:1px solid #e5e7eb; background:#fff;
  padding:.55rem .9rem; font-weight:700; transition:.18s ease;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__more:hover{
  transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* HAZ EL CÍRCULO UN POCO MÁS PEQUEÑO EN PANTALLAS ANGOSTAS */
@media (max-width: 1199.98px){
  :root{ --hx-circle: 200px; }
}
@media (max-width: 991.98px){
  :root{ --hx-circle: 180px; }
}

/* MÓVIL: apilar y centrar todo */
@media (max-width: 767.98px){
  html[data-page="historia"] .hx-timeline-alt .hx-tli{
    grid-template-columns: 1fr;
    row-gap: 14px;
    text-align: center;
  }
  html[data-page="historia"] .hx-timeline-alt .hx-tli__img{ grid-column: 1; justify-self: center; }
  html[data-page="historia"] .hx-timeline-alt .hx-tli__txt{
    grid-column: 1; text-align: center !important; justify-self: center !important;
  }
}

/* ===== MODAL ARREGLADO (centrado y con overlay) ===== */
html[data-page="historia"] .hx-modal{
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  font-family: inherit;
}
html[data-page="historia"] .hx-modal[aria-hidden="false"]{ display: block; }
html[data-page="historia"] .hx-modal__overlay{
  position: absolute; inset: 0; background: rgba(0,0,0,.5);
}
html[data-page="historia"] .hx-modal__dialog{
  position: relative;
  z-index: 1;
  max-width: 720px; width: calc(100% - 32px);
  margin: 7vh auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  padding: 24px;
}
html[data-page="historia"] .hx-modal__close{
  position: absolute; right: 12px; top: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #eee; background:#fff; font-size: 22px; line-height: 1;
}
html[data-page="historia"] .hx-modal__meta{ color:#6b7280; margin:.25rem 0 .5rem; }
html[data-page="historia"] .hx-modal__refs{ margin-top: 1rem; }
html[data-page="historia"] .hx-modal__refs .hx-refs-title{ font-weight: 800; margin-bottom: .35rem; }
html[data-page="historia"] .hx-modal__refs ul{ padding-left: 1rem; }



/* ====== TIMELINE: Círculo centrado + texto a la derecha ====== */
:root{ --tl-circle: 200px; --tl-gap: 24px; }

/* Riel */
html[data-page="historia"] .hx-timeline-alt{ position:relative; }
html[data-page="historia"] .hx-timeline-alt .hx-tl-rail{
  position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:#e7e7e7; transform:translateX(-1px);
}
html[data-page="historia"] #hx-tl-fill{
  position:absolute; left:50%; top:0; width:2px; height:0;
  background:linear-gradient(180deg,#c9a789,#e7d7c1);
  transform:translateX(-1px);
}

/* Cada item */
html[data-page="historia"] .hx-timeline-alt .hx-tl__item{
  position:relative; margin:56px 0; min-height:var(--tl-circle);
  clear:both; /* anula cualquier float del tema */
}

/* --- CÍRCULO: centra la tarjeta/figura sobre el riel --- */
html[data-page="historia"] .hx-timeline-alt .hx-tl__card{
  position:absolute; top:0; left:50%;
  width:var(--tl-circle); height:var(--tl-circle);
  margin-left:calc(var(--tl-circle)/-2);
  border-radius:50%; overflow:hidden; background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.14);
}
html[data-page="historia"] .hx-timeline-alt .hx-tl__fig,
html[data-page="historia"] .hx-timeline-alt .hx-tl__fig img{
  width:100%; height:100%; display:block; object-fit:cover; border-radius:50%;
}
/* Si el tema añadió badge dentro del círculo, que no rompa */
html[data-page="historia"] .hx-timeline-alt .hx-tl__badge{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); }

/* --- TEXTO: SIEMPRE a la derecha del círculo --- */
html[data-page="historia"] .hx-timeline-alt .hx-tl__side{
  float:none !important; /* anula alternado del tema */
  margin-left:calc(50% + var(--tl-circle)/2 + var(--tl-gap)) !important;
  max-width:calc(100% - (50% + var(--tl-circle)/2 + var(--tl-gap))) !important;
  text-align:left !important;
}

/* Responsive: círculo más chico y texto debajo centrado */
@media (max-width: 991.98px){
  :root{ --tl-circle: 160px; --tl-gap: 16px; }
  html[data-page="historia"] .hx-timeline-alt .hx-tl__item{
    padding-top:calc(var(--tl-circle) + 16px); min-height:auto;
  }
  html[data-page="historia"] .hx-timeline-alt .hx-tl__side{
    margin-left:0 !important; max-width:640px !important; text-align:center !important;
  }
}

/* ===== MODAL: fija en viewport, arriba de todo ===== */
#hx-modal{ position:fixed; inset:0; display:none; z-index:1050; }
#hx-modal[aria-hidden="false"]{ display:block; }
#hx-modal .hx-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
#hx-modal .hx-modal__box{
  position:relative; max-width:720px; margin:6vh auto; background:#fff;
  border-radius:12px; padding:24px;
}


/* ===== Timeline centrado (círculo) + texto a la derecha ===== */
:root{ --tl-circle: 200px; --tl-gap: 24px; }

html[data-page="historia"] #hx-timeline.hx-timeline-alt{ position:relative; }

/* Riel */
html[data-page="historia"] #hx-timeline .hx-tl-rail{
  position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:#e7e7e7; transform:translateX(-1px);
}
html[data-page="historia"] #hx-tl-fill{
  position:absolute; left:50%; top:0; width:2px; height:0;
  background:linear-gradient(180deg,#c9a789,#e7d7c1);
  transform:translateX(-1px);
}

/* Item */
html[data-page="historia"] #hx-timeline .hx-tl__item{
  position:relative; margin:56px 0; min-height:var(--tl-circle);
  clear:both;
}

/* Círculo centrado */
html[data-page="historia"] #hx-timeline .hx-tl__card{
  position:absolute; top:0; left:50%;
  width:var(--tl-circle); height:var(--tl-circle);
  margin-left:calc(var(--tl-circle)/-2);
  border-radius:50%; overflow:hidden; background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.14);
}
html[data-page="historia"] #hx-timeline .hx-tl__fig,
html[data-page="historia"] #hx-timeline .hx-tl__fig img{
  width:100%; height:100%; display:block; object-fit:cover; border-radius:50%;
}

/* Texto SIEMPRE a la derecha del riel */
html[data-page="historia"] #hx-timeline .hx-tl__side{
  float:none !important;
  margin-left:calc(50% + var(--tl-circle)/2 + var(--tl-gap)) !important;
  max-width:520px !important;
  text-align:left !important;
}

/* Responsive */
@media (max-width: 991.98px){
  :root{ --tl-circle: 160px; --tl-gap: 16px; }
  html[data-page="historia"] #hx-timeline .hx-tl__item{
    padding-top:calc(var(--tl-circle) + 16px); min-height:auto;
  }
  html[data-page="historia"] #hx-timeline .hx-tl__side{
    margin-left:0 !important; max-width:640px !important; text-align:center !important;
  }
}

/* ===== Modal fijo ===== */
#hx-modal{ position:fixed; inset:0; display:none; z-index:1050; }
#hx-modal[aria-hidden="false"]{ display:block; }
#hx-modal .hx-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
#hx-modal .hx-modal__box{
  position:relative; max-width:720px; margin:6vh auto; background:#fff;
  border-radius:12px; padding:24px;
}



/* === Timeline limpia: círculos centrados === */
html[data-page="historia"] #hx-timeline.hx-timeline-alt{
  --tl-size: 220px;        /* diámetro del círculo */
  --tl-gap: 28px;          /* separación del texto */
  position: relative;
}

/* Riel vertical centrado */
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tl-rail{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:#e7e7e7; transform:translateX(-1px);
  pointer-events:none;
}

/* (Opcional) relleno animado del riel */
html[data-page="historia"] #hx-timeline.hx-timeline-alt #hx-tl-fill{
  position:absolute; left:50%; top:0; width:2px; height:0;
  transform:translateX(-1px);
  background:linear-gradient(180deg,#c9a789,#e7d7c1);
}

/* Reset de herencias que rompen el layout */
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli,
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli__img,
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli__txt{
  float:none !important; display:block !important; clear:none !important;
}

/* Item */
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli{
  position:relative; margin:60px 0; min-height:var(--tl-size);
}

/* CÍRCULO centrado justo sobre el riel */
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli__img{
  position:absolute; top:0; left:50%;
  width:var(--tl-size); height:var(--tl-size);
  transform:translateX(-50%); border-radius:50%; overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.14); z-index:1;
}
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli__img img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;
}

/* Texto SIEMPRE a la derecha del riel (desktop) */
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli__txt{
  margin-left:calc(50% + var(--tl-size)/2 + var(--tl-gap));
  max-width:560px; text-align:left;
}

/* Responsivo: el texto baja debajo del círculo */
@media (max-width: 991.98px){
  html[data-page="historia"] #hx-timeline.hx-timeline-alt{ --tl-size: 160px; --tl-gap: 16px; }
  html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli{
    padding-top:calc(var(--tl-size) + 16px); min-height:auto;
  }
  html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli__txt{
    margin-left:0; text-align:center; max-width:640px;
  }
}


/* === TIMELINE: anular variante vieja y centrar === */
html[data-page="historia"] #hx-timeline.hx-timeline-alt{ --tl: 220px; --gap: 28px; position:relative; }

/* Riel centrado en el contenedor del timeline */
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tl-rail{
  position:absolute; left:50%; top:0; bottom:0; width:2px; background:#e7e7e7; transform:translateX(-1px);
}

/* ***** RESET DURO DE LA VARIANTE ANTIGUA ***** */
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli,
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli.is-left,
html[data-page="historia"] #hx-timeline.hx-timeline-alt .hx-tli.is-right{
  width:100% !important;               /* <- quita calc(50% - 42px) */
  transform:none !important;            /* <- quita desplazamientos */
  margin-left:0 !important;
  margin-right:0 !important;
  display:block !important;
  float:none !important;
  position:relative;                    /* cont */
}



/* ===== Timeline: círculos más chicos + overlay + botones iguales ===== */
html[data-page="historia"] .hx-timeline-alt{ --hx-circle: 180px; } /* tamaño base */

@media (min-width:1400px){
  html[data-page="historia"] .hx-timeline-alt{ --hx-circle: 190px; }
}
@media (max-width:991.98px){
  html[data-page="historia"] .hx-timeline-alt{ --hx-circle: 150px; }
}

/* tamaño real del círculo (pisa las reglas viejas de 280px) */
html[data-page="historia"] .hx-timeline-alt .hx-tli__img{
  position: relative;
  width: var(--hx-circle) !important;
  height: var(--hx-circle) !important;
  flex: 0 0 var(--hx-circle) !important;
  border-radius: 50%;
  overflow: hidden;
}

/* obscurecimiento */
html[data-page="historia"] .hx-timeline-alt .hx-tli__img::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.55));
  pointer-events:none;
}

/* texto dentro del círculo (el <figcaption> que agregamos en JS) */
html[data-page="historia"] .hx-timeline-alt .hx-tli__overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  color:#fff; padding:12px; text-shadow:0 2px 10px rgba(0,0,0,.45);
  font-weight:800; pointer-events:none;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__overlay small{
  font-weight:700; opacity:.95; margin-bottom:6px;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__overlay strong{
  font-size:1.05rem; line-height:1.15;
}

/* botones “Seguir leyendo” todos iguales */
html[data-page="historia"] .hx-timeline-alt .hx-tli__more{
  display:inline-block;
  background:#fff; color:#1f2937;
  border:1px solid #e5e7eb; border-radius:12px;
  padding:.55rem .95rem; font-weight:700; line-height:1.1;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__more:hover{
  transform: translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.10);
}


/* === Texto dentro del círculo (corrige nombre de clase y z-index) === */
html[data-page="historia"] .hx-timeline-alt .hx-tli__img{
  position: relative;
  width: var(--hx-circle) !important;
  height: var(--hx-circle) !important;
  flex: 0 0 var(--hx-circle) !important;
  border-radius: 50%;
  overflow: hidden;
}

html[data-page="historia"] .hx-timeline-alt .hx-tli__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  position: relative; z-index: 0;              /* imagen al fondo */
}

/* oscurecimiento debajo del texto */
html[data-page="historia"] .hx-timeline-alt .hx-tli__img::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.55));
  pointer-events:none; z-index: 1;
}

/* TU caption: .hx-tli__cap  (texto dentro del círculo) */
html[data-page="historia"] .hx-timeline-alt .hx-tli__cap{
  position:absolute; inset:0; z-index: 2;      /* por encima del overlay */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:12px; color:#fff; 
  text-shadow:0 2px 10px rgba(0,0,0,.45); pointer-events:none;
}

html[data-page="historia"] .hx-timeline-alt .hx-tli__cap > small{
  font-weight:700; opacity:.95; margin-bottom:6px; letter-spacing:.2px;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__cap-title{
  font-weight:800; font-size:1.05rem; line-height:1.15;
}

/* Quita duplicados en el texto de la derecha */
html[data-page="historia"] .hx-timeline-alt .hx-tli__txt .hx-tli__eyebrow,
html[data-page="historia"] .hx-timeline-alt .hx-tli__txt .hx-tli__title{
  display: none !important;
}

/* Ajusta el espaciado para que el resumen suba un poco */
html[data-page="historia"] .hx-timeline-alt .hx-tli__txt .hx-tli__excerpt{
  margin-top: 4px;
}

/* Si te queda demasiado espacio arriba en algunos temas: */
html[data-page="historia"] .hx-timeline-alt .hx-tli__txt{
  padding-top: 6px;
}


/* ---- Anti-duplicados timeline ---- */

/* Dentro del círculo: muestra solo el título del figcaption */
html[data-page="historia"] .hx-timeline-alt .hx-tli__cap > small{
  display:none !important;           /* oculta 'epoca' si es igual a 'titulo' */
}
/* Por si el tema inyecta títulos extra dentro del círculo, escóndelos */
html[data-page="historia"] .hx-timeline-alt .hx-tli__img > h1,
html[data-page="historia"] .hx-timeline-alt .hx-tli__img > h2,
html[data-page="historia"] .hx-timeline-alt .hx-tli__img > h3,
html[data-page="historia"] .hx-timeline-alt .hx-tli__img > h4,
html[data-page="historia"] .hx-timeline-alt .hx-tli__img .hx-tli__title,
html[data-page="historia"] .hx-timeline-alt .hx-tli__img .hx-tli__eyebrow{
  display:none !important;
}

/* Derecha: que solo quede el título; oculta eyebrow y
   REHABILITA el <h4> por si alguna regla anterior lo apagó */
html[data-page="historia"] .hx-timeline-alt .hx-tli__txt .hx-tli__eyebrow{
  display:none !important;
}
html[data-page="historia"] .hx-timeline-alt .hx-tli__txt .hx-tli__title{
  display:block !important;
  margin-top: 0.15rem;               /* ajusta respiro */
}



/* Botón “Seguir leyendo” con borde arena permanente */
html[data-page="historia"] .hx-timeline-alt .hx-tli__more{
  -webkit-appearance: none;
  appearance: none;
  background:#fff;
  color:#0f172a;
  font-weight:800;
  padding:.70rem 1.15rem;
  border-radius:9999px;
  border:2px solid #ffffff;                 /* borde interior blanco */
  outline:none !important;
  /* anillos: sombra suave + aro arena + halo amplio */
  box-shadow:
    0 6px 18px rgba(0,0,0,.08),             /* sombra */
    0 0 0 2px #e5c9ad,                      /* aro arena pegado */
    0 0 0 6px rgba(229,201,173,.35);        /* halo más amplio */
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Mantener el mismo estilo en hover/focus/active */
html[data-page="historia"] .hx-timeline-alt .hx-tli__more:hover,
html[data-page="historia"] .hx-timeline-alt .hx-tli__more:focus,
html[data-page="historia"] .hx-timeline-alt .hx-tli__more:active{
  color:#0f172a;
  background:#fff;
  border-color:#ffffff;
  box-shadow:
    0 8px 22px rgba(0,0,0,.10),
    0 0 0 2px #e5c9ad,
    0 0 0 6px rgba(229,201,173,.45);
  transform: translateY(-1px);
}

/* Por si el tema mete otro estilo de .btn, lo neutralizamos aquí */
html[data-page="historia"] .hx-timeline-alt .hx-tli__more.btn{
  background:#fff !important;
  border-color:#fff !important;
  color:#0f172a !important;
}

/* Respiro entre el texto y el botón */
html[data-page="historia"] .hx-timeline-alt .hx-tli__txt .hx-tli__more{
  display: inline-block;   /* evita que se encime con el párrafo */
  margin-top: 10px;        /* ~0.6rem de espacio */
}

/* (opcional) un poco más de aire bajo el párrafo */
html[data-page="historia"] .hx-timeline-alt .hx-tli__txt .hx-tli__excerpt{
  margin-bottom: 6px;
}











/* ===== Modal centrado y con mejor diseño ===== */
html[data-page="historia"] .hx-modal{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(17,24,39,.58);
  backdrop-filter: saturate(120%) blur(4px);
}
html[data-page="historia"] .hx-modal[hidden]{ display:none; }

html[data-page="historia"] .hx-modal__panel{
  width: min(720px, 92vw);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,.20);
  overflow: hidden;
  transform: scale(.98);
  animation: hxmodal-in .18s ease-out forwards;
  position: relative;
}
@keyframes hxmodal-in { to { transform: scale(1); } }

html[data-page="historia"] .hx-modal__hd{
  padding: 16px 20px; border-bottom: 1px solid #f1f1f1;
}
html[data-page="historia"] .hx-modal__title{
  margin:0; font-weight: 800; font-size: 1.25rem;
}
html[data-page="historia"] .hx-modal__bd{
  padding: 16px 20px;
  max-height: min(72vh, 640px);
  overflow: auto;
}
html[data-page="historia"] .hx-modal__ft{
  padding: 12px 20px; border-top: 1px solid #f1f1f1;
  display:flex; justify-content:flex-end; gap:8px;
}

/* Botón de cierre */
#hx-modal .hx-modal__banner{
  position: relative;
  height: 88px;
  background-size: cover;
  background-position: center;
}
#hx-modal .hx-modal__banner::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 60%);
  pointer-events:none;
}


/* === MODAL BONITO, CENTRADO Y CON BANNER === */
#hx-modal[aria-hidden="false"]{
  position: fixed; inset: 0; z-index: 1050;
  display: flex !important; align-items: center; justify-content: center;
}
#hx-modal[aria-hidden="true"]{ display: none !important; }

/* Fondo oscuro suave */
#hx-modal .hx-modal__overlay{
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .55);           /* slate/negro translúcido */
  backdrop-filter: blur(2px);
}

/* Panel */
#hx-modal .hx-modal__panel{
  position: relative; z-index: 1;
  width: min(880px, calc(100% - 36px));
  max-height: 86vh;
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 30px 90px rgba(0,0,0,.30),
    0 2px 0 rgba(0,0,0,.02) inset;
  overflow: auto;
}

/* Banner en forma de cinta con la MISMA imagen del círculo */
#hx-modal #hx-modal-banner{
  height: 96px;
  background-size: cover;
  background-position: center;
  border-radius: 16px 16px 0 0;
  position: sticky; top: 0; z-index: 1;
}
#hx-modal #hx-modal-banner::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 70%);
  border-radius: 16px 16px 0 0; pointer-events: none;
}

/* Tipografías y espaciamiento del contenido */
#hx-modal #hx-modal-title{
  margin: 12px 22px 4px;
  font-weight: 800; letter-spacing: .2px;
}
#hx-modal #hx-modal-meta{
  margin: .25rem 22px .5rem;
  color: #6b7280; font-size: .95rem;
}
#hx-modal #hx-modal-content{
  padding: 0 22px 16px;
  color: #2b2b2b; line-height: 1.68;
}
#hx-modal #hx-modal-refs{
  margin: 8px 22px 20px;
}
#hx-modal .hx-refs-title{
  font-weight: 700; margin-bottom: 6px;
}

/* Botón “Cerrar” como pastilla (sin romper tu clase) */
#hx-modal .hx-tli__more[data-close-modal]{
  position: absolute !important;
  top: 10px; right: 12px;
  float: none !important;
  border-radius: 9999px;
  background: #fff !important;
  color: #0f172a !important;
  border: 2px solid #ffffff !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.08),
    0 0 0 2px #e5c9ad,
    0 0 0 6px rgba(229,201,173,.35);
  transition: box-shadow .2s ease, transform .2s ease;
}
#hx-modal .hx-tli__more[data-close-modal]:hover{
  box-shadow:
    0 8px 22px rgba(0,0,0,.10),
    0 0 0 2px #e5c9ad,
    0 0 0 6px rgba(229,201,173,.45);
  transform: translateY(-1px);
}

/* ===== MODAL PRO / LOOK & FEEL ===== */

/* Centro y animación suave */
#hx-modal[aria-hidden="false"]{
  position: fixed; inset: 0; z-index: 1050;
  display: flex !important; align-items: center; justify-content: center;
}
#hx-modal[aria-hidden="true"]{ display:none !important; }

/* overlay con blur + fade */
#hx-modal .hx-modal__overlay{
  position:absolute; inset:0;
  background: rgba(17, 24, 39, .58);
  backdrop-filter: blur(2px);
  animation: hxFadeIn .18s ease-out;
}

/* panel con sombra rica + animación */
#hx-modal .hx-modal__panel{
  position:relative; z-index:1;
  width:min(900px, calc(100% - 36px));
  max-height: 86vh;
  background:#fff;
  border-radius: 18px;
  overflow:auto;
  box-shadow:
    0 40px 100px rgba(0,0,0,.30),
    0 2px 0 rgba(0,0,0,.02) inset;
  animation: hxLiftIn .22s cubic-bezier(.2,.8,.2,1);
}

/* banner con la MISMA imagen, cinta delgada y acento dorado */
#hx-modal #hx-modal-banner{
  height: 104px;
  background-size: cover;
  background-position: center;
  border-radius: 18px 18px 0 0;
  position: sticky; top: 0; z-index: 1;
  box-shadow: inset 0 -24px 24px -18px rgba(0,0,0,.35);
}
/* borde/acento dorado debajo del banner */
#hx-modal #hx-modal-banner::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background: linear-gradient(90deg,#e5c9ad, #d0b08f 50%, #e5c9ad);
}

/* tipografías & ritmo vertical */
#hx-modal #hx-modal-title{
  margin: 14px 24px 2px;
  font-weight: 800;
  letter-spacing: .2px;
}
#hx-modal #hx-modal-meta{
  margin: 0 24px 8px;
  color:#6b7280;
  font-size:.95rem;
}
#hx-modal #hx-modal-content{
  padding: 0 24px 18px;
  color:#1f2937;       /* más contraste = más legible */
  line-height: 1.68;
}
#hx-modal #hx-modal-content p + p{ margin-top:.75rem; }
#hx-modal #hx-modal-refs{
  margin: 8px 24px 22px;
}
#hx-modal .hx-refs-title{
  font-weight: 700; margin-bottom: 6px;
  color:#334155;
}

/* refs con viñetas personalizadas */
#hx-modal .hx-refs{ list-style:none; padding-left:0; margin:0; }
#hx-modal .hx-refs li{
  position:relative; padding-left:18px; margin:6px 0;
}
#hx-modal .hx-refs li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; border-radius:50%;
  background:#e5c9ad;
  box-shadow: 0 0 0 2px rgba(229,201,173,.35);
}
#hx-modal .hx-refs a{
  color:#0f172a; text-decoration: none; border-bottom: 1px dashed #e5c9ad;
}
#hx-modal .hx-refs a:hover{ border-bottom-style: solid; }

/* botón “Cerrar” como pastilla (mismo look que “Seguir leyendo”) */
#hx-modal .hx-tli__more[data-close-modal]{
  position:absolute !important; top:12px; right:14px;
  float:none !important;
  padding: 8px 14px;
  border-radius: 9999px;
  background:#fff !important; color:#0f172a !important;
  border:2px solid #ffffff !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.10),
    0 0 0 2px #e5c9ad,
    0 0 0 6px rgba(229,201,173,.35);
  transition: box-shadow .2s ease, transform .2s ease;
}
#hx-modal .hx-tli__more[data-close-modal]:hover{
  box-shadow:
    0 8px 22px rgba(0,0,0,.12),
    0 0 0 2px #e5c9ad,
    0 0 0 8px rgba(229,201,173,.40);
  transform: translateY(-1px);
}

/* animaciones */
@keyframes hxFadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes hxLiftIn { from { opacity:0; transform: translateY(8px) scale(.98) }
                      to   { opacity:1; transform: translateY(0)    scale(1) } }

/* responsive: reduce alturas y paddings en móvil */
@media (max-width: 640px){
  #hx-modal #hx-modal-banner{ height: 84px; }
  #hx-modal #hx-modal-title{ margin: 12px 18px 2px; }
  #hx-modal #hx-modal-meta{ margin: 0 18px 8px; }
  #hx-modal #hx-modal-content{ padding: 0 18px 16px; }
  #hx-modal #hx-modal-refs{ margin: 6px 18px 18px; }
}


/* Modal hero sin estilos inline */
.hx-modal__hero{
  height: 180px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  margin: -4px 0 16px 0;
}

/* Opcional: ajustes del modal */
.hx-modal[aria-hidden="false"] { display: block; }
.hx-modal[hidden] { display: none !important; }
.hx-modal__overlay { cursor: pointer; }

/* --- Quitar oscurecimiento en los círculos del timeline --- */
.hx-tli__img::before,
.hx-tli__img::after {
  background: transparent !important;   /* por si el overlay era un pseudo-elemento */
  opacity: 0 !important;
}

.hx-tli__img img {
  filter: none !important;               /* por si usaban brightness/contrast */
  opacity: 1 !important;
}

/* (opcional) Darles un poco de relieve sin oscurecer la foto */
.hx-tli__img {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* =========================
   Header móvil: layout limpio
   ========================= */
@media (max-width: 768px){

  /* Topbar: en 2 columnas, con texto que no rompa */
  .header__top,
  .topbar,
  .header-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
  }

  .header__top .item,
  .topbar__item,
  .header-top .item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;                /* permite ellipsis */
  }

  .header__top .item span,
  .header__top .item a,
  .topbar__item span,
  .topbar__item a,
  .header-top .item span,
  .header-top .item a {
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;          /* no saltos raros */
    overflow: hidden;
    text-overflow: ellipsis;      /* “…” si se desborda */
  }

  /* Si alguna leyenda estorba mucho, la ocultas en móvil */
  .item--hours,
  .topbar__hours {
    display: none;
  }

  /* Burger a la derecha, visible y clicable */
  .mobile-nav__toggler,
  .menu-toggler,
  .main-header .mobile-nav__toggler {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    display: inline-flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: rgba(0,0,0,.04);     /* toque sutil; quítalo si no lo quieres */
  }

  /* Deja hueco para el burger y evita que lo tape el menú */
  .main-header .main-menu,
  .main-menu {
    padding-right: 56px;
  }

  /* El buscador a la izquierda del burger para que no se monten */
  .search-toggler,
  .header-search {
    position: absolute;
    right: 60px !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 29;
  }

  /* El logo no debe desbordar */
  .main-header .logo,
  .site-logo {
    max-width: 180px;
  }
}

/* Un poco de aire si el header es sticky y alto en móvil */
@media (max-width: 480px){
  .main-header {
    min-height: 56px;
  }
}


/* ====== SOLO historia.html (gracias al atributo data-page) ====== */
@media (max-width: 768px){

  /* Topbar en 2 columnas, con textos elípticos */
  html[data-page="historia"] .header__top,
  html[data-page="historia"] .topbar,
  html[data-page="historia"] .header-top{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
  }

  html[data-page="historia"] .header__top > *,
  html[data-page="historia"] .topbar > *,
  html[data-page="historia"] .header-top > *{
    min-width: 0; /* para que funcione el ellipsis */
  }

  html[data-page="historia"] .header__top span,
  html[data-page="historia"] .header__top a,
  html[data-page="historia"] .topbar span,
  html[data-page="historia"] .topbar a,
  html[data-page="historia"] .header-top span,
  html[data-page="historia"] .header-top a{
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Oculta el bloque de "atención 24 hrs..." si molesta */
  html[data-page="historia"] .item--hours,
  html[data-page="historia"] .topbar__hours{
    display: none !important;
  }

  /* Contenedor del header con posición para colocar la hamburguesa */
  html[data-page="historia"] .main-header .container,
  html[data-page="historia"] .main-header .container-fluid{
    position: relative !important;
  }

  /* Hamburguesa SIEMPRE a la derecha y por encima */
  html[data-page="historia"] .mobile-nav__toggler,
  html[data-page="historia"] .mobile-nav__button,
  html[data-page="historia"] .menu-toggler,
  html[data-page="historia"] .main-header .mobile-nav__toggler{
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1001 !important;
    display: inline-flex !important;
    width: 40px; height: 40px;
    justify-content: center; align-items: center;
    background: transparent;
    border-radius: 10px;
  }

  /* Deja hueco para que la hamburguesa no tape nada */
  html[data-page="historia"] .main-header .main-menu,
  html[data-page="historia"] .main-menu{
    padding-right: 56px !important;
  }

  /* Lupa a la izquierda de la hamburguesa (si existe) */
  html[data-page="historia"] .search-toggler,
  html[data-page="historia"] .header-search{
    position: absolute !important;
    right: 60px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
  }

  /* Logo un poco más compacto en móvil */
  html[data-page="historia"] .main-header .logo,
  html[data-page="historia"] .site-logo{
    max-width: 180px !important;
  }
}

/* Quitar oscurecido en los círculos de la línea de tiempo */
html[data-page="historia"] .hx-tli__img::after{ display: none !important; }
html[data-page="historia"] .hx-tli__img img{
  filter: none !important;
  opacity: 1 !important;
}

/* ===========================
   Historia: header móvil
   (scoped con data-page="historia")
   =========================== */

/* 1) Ocultar datos de encabezado en móviles (teléfono, correo, etc.) */
@media (max-width: 991px){
  [data-page="historia"] .header__top,
  [data-page="historia"] .topbar,
  [data-page="historia"] .main-header__top,
  [data-page="historia"] .main-header__info,
  [data-page="historia"] .main-menu__top,
  [data-page="historia"] .main-header__right,
  [data-page="historia"] .main-header .main-menu__right {
    display: none !important;
  }
}

/* 2) Logo: que no quede “pegado” arriba y no se corte */
@media (max-width: 991px){
  [data-page="historia"] .main-header .logo-box,
  [data-page="historia"] .main-header__logo {
    margin: 10px 0 0 12px !important;
    padding: 0 !important;
  }
  [data-page="historia"] .main-header .logo-box img,
  [data-page="historia"] .main-header__logo img {
    max-height: 46px !important;
    width: auto !important;
  }
}

/* 3) Hamburguesa SIEMPRE a la derecha, visible y dorada */
@media (max-width: 991px){
  /* Intentamos cubrir las variantes más comunes del botón */
  [data-page="historia"] .mobile-nav__toggler,
  [data-page="historia"] .main-menu .mobile-nav__toggler,
  [data-page="historia"] .main-menu .mobile-nav__btn,
  [data-page="historia"] .main-header .mobile-nav__toggler {
    position: fixed !important;
    top: 18px !important;
    right: 14px !important;
    width: 44px; height: 44px;
    display: flex !important;
    align-items: center; justify-content: center;
    background: rgba(32,32,32,.28);
    border-radius: 10px;
    color: #d1b196 !important;           /* dorado */
    z-index: 10040 !important;
  }
  /* Iconos internos (svg/i/span) en dorado */
  [data-page="historia"] .mobile-nav__toggler svg,
  [data-page="historia"] .mobile-nav__toggler i,
  [data-page="historia"] .mobile-nav__toggler span {
    color: #d1b196 !important;
    stroke: #d1b196 !important;
    fill: #d1b196 !important;
  }
}

/* 4) Botón de cerrar CLARO y arriba a la derecha cuando el offcanvas está abierto */
@media (max-width: 991px){
  [data-page="historia"] .mobile-nav__overlay { z-index: 10030 !important; }
  [data-page="historia"] .mobile-nav__content { z-index: 10040 !important; }

  /* Si tu plantilla ya trae un botón .mobile-nav__close, lo estilamos: */
  [data-page="historia"] .mobile-nav__content .mobile-nav__close {
    position: absolute !important;
    top: 10px; right: 10px;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #d1b196;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1;
  }
  [data-page="historia"] .mobile-nav__content .mobile-nav__close::before {
    content: "×";
  }

  /* Si tu menú NO trae botón de cerrar, convertimos la hamburguesa en “X” cuando el menú está visible */
  [data-page="historia"] body.mobile-menu-visible .mobile-nav__toggler,
  [data-page="historia"] body.mobile-nav-open .mobile-nav__toggler {
    background: #d1b196 !important;
    color: #fff !important;
  }
  [data-page="historia"] body.mobile-menu-visible .mobile-nav__toggler svg,
  [data-page="historia"] body.mobile-menu-visible .mobile-nav__toggler i,
  [data-page="historia"] body.mobile-menu-visible .mobile-nav__toggler span,
  [data-page="historia"] body.mobile-nav-open .mobile-nav__toggler svg,
  [data-page="historia"] body.mobile-nav-open .mobile-nav__toggler i,
  [data-page="historia"] body.mobile-nav-open .mobile-nav__toggler span {
    opacity: 0 !important;
  }
  [data-page="historia"] body.mobile-menu-visible .mobile-nav__toggler::before,
  [data-page="historia"] body.mobile-nav-open .mobile-nav__toggler::before {
    content: "×";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 30px;
  }
}

/* ========== HISTORIA: FIX MENÚ MÓVIL, HAMBURGUESA, LOGO Y TOPBAR ========== */
@media (max-width: 991px){

  /* 0) Oculta la franja de datos en móvil SOLO en historia */
  html[data-page="historia"] .header__top,
  html[data-page="historia"] .header-top,
  html[data-page="historia"] .topbar,
  html[data-page="historia"] .main-header__top { display:none !important; }

  /* 1) Logo: que no se corte y quede alineado */
  html[data-page="historia"] .main-header .logo-box,
  html[data-page="historia"] .header__logo,
  html[data-page="historia"] .main-menu .logo-box { padding: 10px 0 !important; }
  html[data-page="historia"] .main-header .logo-box img,
  html[data-page="historia"] .header__logo img,
  html[data-page="historia"] .main-menu .logo-box img {
    max-height: 48px !important;
    height: auto; width: auto;
  }

  /* 2) Hamburguesa: a la DERECHA, visible (dorado), por encima del hero */
  html[data-page="historia"] .mobile-nav__toggler,
  html[data-page="historia"] .main-menu__toggler,
  html[data-page="historia"] .main-header__toggler {
    position: fixed !important;
    right: 14px !important;
    top: 14px !important;
    z-index: 10020 !important;
    color: #d1b196 !important;              /* dorado del sitio */
    display: inline-flex !important;
    align-items: center; justify-content:center;
  }
  html[data-page="historia"] .mobile-nav__toggler i,
  html[data-page="historia"] .main-menu__toggler i { color: #d1b196 !important; }

  /* 3) Panel del menú móvil: ancho, overlay, scroll interno */
  html[data-page="historia"] .mobile-nav__wrapper,
  html[data-page="historia"] .mobile-menu,
  html[data-page="historia"] .offcanvas-menu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10010 !important;
  }
  /* panel interior (columna) */
  html[data-page="historia"] .mobile-nav__content,
  html[data-page="historia"] .mobile-menu__content {
    position: absolute !important;
    left: 0; top: 0; bottom: 0;
    width: 83vw !important;                 /* ancho cómodo en móvil */
    max-width: 400px !important;
    background: #2f3338 !important;         /* tu color de fondo del menú */
    overflow-y: auto !important;
    padding: 56px 20px 24px !important;     /* deja espacio arriba para la X */
    box-shadow: 2px 0 24px rgba(0,0,0,.35);
  }
  /* overlay a la derecha del panel */
  html[data-page="historia"] .mobile-nav__wrapper .mobile-nav__overlay,
  html[data-page="historia"] .mobile-menu .mobile-menu__overlay,
  html[data-page="historia"] .offcanvas-menu .offcanvas-overlay {
    position: absolute !important;
    left: 83vw !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    background: rgba(0,0,0,.5) !important;
    content: "";
    display: block !important;
  }

  /* 4) Botón de CERRAR (X) arriba a la DERECHA dentro del panel */
  html[data-page="historia"] .mobile-nav__content .close-btn,
  html[data-page="historia"] .mobile-menu__content .close-btn,
  html[data-page="historia"] .mobile-nav__close,
  html[data-page="historia"] .offcanvas-menu .close-btn {
    position: absolute !important;
    right: 10px !important;
    top: 10px !important;
    z-index: 10030 !important;
    width: 38px !important; height: 38px !important;
    border-radius: 10px !important;
    background: #d1b196 !important;         /* dorado */
    color: #fff !important;
    display: inline-flex !important;
    align-items:center; justify-content:center;
    opacity: 1 !important;
  }
  html[data-page="historia"] .mobile-nav__content .close-btn i,
  html[data-page="historia"] .mobile-menu__content .close-btn i { color:#fff !important; }

  /* Por si el tema usa un botón flotante fuera del content (lo forzamos arriba) */
  html[data-page="historia"] .mobile-menu .close-btn,
  html[data-page="historia"] .mobile-nav__wrapper .close-btn {
    position: absolute !important;
    top: 10px !important; right: 10px !important;
  }
}


/* ===== Pulido visual Gente y cultura ===== */
.rj-cultura { --rj-gold:#C9A463; --rj-ink:#2F3640; --rj-muted:#6B7280; --rj-bg:#F7F3ED; }

.rj-cultura { max-width: 78ch; line-height: 1.6; }
.rj-cultura .rj-title { 
  font-size: clamp(1.8rem,2.2vw,2.25rem); 
  margin: .25rem 0 1rem; 
  letter-spacing:.2px; 
  color: var(--rj-ink);
}

/* más espacio entre bloques que renderiza #culture-block */
.rj-cultura p { margin: .5rem 0 1rem; color: var(--rj-muted); }
.rj-cultura h4, .rj-cultura h5 { margin: 1.1rem 0 .5rem; color: var(--rj-ink); }

/* separador sutil */
.rj-cultura .rj-sep{
  height:1px; margin: .75rem 0 1rem;
  background: linear-gradient(90deg,transparent,var(--rj-bg) 20%,var(--rj-gold),var(--rj-bg) 80%,transparent);
}

/* listas con “viñeta dorada” */
.rj-cultura ul{ list-style:none; padding-left:0; margin:.5rem 0 1rem; }
.rj-cultura li{
  position:relative; padding-left:1.25rem; margin:.4rem 0; color:var(--rj-ink);
}
.rj-cultura li::before{
  content:""; width:.5rem; height:.5rem; border-radius:999px;
  background:var(--rj-gold); box-shadow:0 0 0 2px #EFE7DB;
  position:absolute; left:0; top:.55em;
}
.rj-cultura li b, .rj-cultura li strong{ font-weight:650; color:var(--rj-ink); }

@media (min-width:1024px){ .rj-cultura{ max-width:84ch; } }



/* Imagen hero con marco suave */
.rj-cultura .rj-fig{
  margin: .5rem 0 1.25rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
}
.rj-cultura .rj-fig img{ display:block; width:100%; height:auto; }
.rj-cultura .rj-fig figcaption{
  font-size:.92rem; color:var(--rj-muted, #6B7280);
  padding:.55rem .85rem .7rem;
  border-top:1px solid #F1E8DB;
  background:#fff;
}

/* Variante “borde a borde” para que se sienta hero */
.rj-cultura .rj-fig--edge{
  margin-top:.35rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* (Opcional) versión lateral en escritorio */
@media (min-width: 1024px){
  .rj-cultura .rj-fig--side{
    max-width: 420px;
    float: right;
    margin: .25rem 0 1rem 1.25rem; /* separa del texto */
  }
}

/* ===== Control de alto del hero (Opción A) ===== */
/* Ajusta la altura con esta variable (mínimo, fluido por viewport, máximo) */
.rj-cultura .rj-fig--edge { 
  --hero-h: clamp(200px, 30vw, 340px); 
}

/* Forzamos el alto del contenedor de la imagen */
.rj-cultura .rj-fig--edge picture { 
  display: block; 
  height: var(--hero-h); 
}

/* La imagen llena y recorta elegantemente sin deformarse */
.rj-cultura .rj-fig--edge img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* recorta lo que sobra */
  object-position: center 40%;/* mueve el encuadre si hace falta */
}

/* Ajuste fino en pantallas grandes (opcional) */
@media (min-width: 1200px){
  .rj-cultura .rj-fig--edge { --hero-h: clamp(220px, 24vw, 320px); }
}



/* ===== Gastronomía: media list ===== */
.hx-food { 
  display: grid; 
  grid-template-columns: 88px 1fr; 
  gap: .9rem; 
  align-items: start; 
  margin: .5rem 0 1rem; 
}
.hx-food__media {
  width: 88px; 
  height: 88px; 
  border-radius: 12px; 
  overflow: hidden; 
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  background: #fff;
}
.hx-food__media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.hx-food__body { line-height: 1.55; }
.hx-food__title { display:block; margin: .1rem 0 .25rem; }
.hx-food__desc { color: var(--rj-muted, #6B7280); margin-bottom: .25rem; }
.hx-food__where { font-size: .92rem; }
@media (min-width: 768px){
  .hx-food{ grid-template-columns: 110px 1fr; gap: 1rem; }
  .hx-food__media{ width:110px; height:110px; }
}



/* ===== Places cards (media ocupa mitad izquierda) ===== */
.rj-places{ display:grid; gap: 1rem; }

.rj-place{
  display:grid;
  grid-template-columns: 1fr;
  gap: 0;                         /* sin hueco para que la imagen pegue al borde */
  border-radius: 18px;
  background:#fff;
  border:1px solid #F0ECE6;
  box-shadow: 0 0 0 rgba(0,0,0,0);/* sombra solo en hover */
  transition: box-shadow .25s ease, transform .25s ease, opacity .5s ease, translate .25s ease;
  opacity:0; translate: 0 10px;   /* reveal */
}
.rj-place.is-in{ opacity:1; translate: 0 0; }
.rj-place:hover{ box-shadow: 0 14px 36px rgba(0,0,0,.12); transform: translateY(-2px); }

.rj-place__media{
  position:relative;
  height: 200px;                  /* móvil: alto fijo cómodo */
  overflow:hidden;
  border-radius: 18px 18px 0 0;
  cursor: zoom-in;
}
.rj-place__media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.rj-zoom{
  position:absolute; right:10px; bottom:10px;
  background: rgba(255,255,255,.9);
  color:#7C6A46; border:1px solid #EADBC1; 
  padding:.25rem; border-radius:10px; line-height:0;
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
}

.rj-chip{
  position:absolute; left:10px; top:10px;
  background: #fff; color:#7C6A46; border:1px solid #EADBC1;
  padding:.2rem .55rem; border-radius: 999px; font-size:.82rem; font-weight:600;
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
}

.rj-place__body{
  padding: .9rem .95rem 1rem;
}
.rj-place__title{ margin:.1rem 0 .3rem; font-size:1.08rem; }
.rj-place__desc{ margin:0 0 .55rem; color: var(--rj-muted, #6B7280); line-height:1.55; }

.rj-place__tips{ list-style:none; padding-left:0; display:flex; flex-wrap:wrap; gap:.35rem .5rem; margin:0 0 .7rem; }
.rj-place__tips li{
  background:#F7F3ED; color:#846B3A; border:1px solid #EADBC1; 
  padding:.22rem .5rem; border-radius:999px; font-size:.86rem;
}

.rj-place__actions{ display:flex; gap:.55rem; flex-wrap:wrap; }
.rj-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.48rem .78rem; border-radius:10px; font-weight:600; font-size:.92rem;
  text-decoration:none; color:#7C6A46; border:1px solid #EADBC1; background:#fff;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.rj-btn:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.08); background:#FFFAF0; }
.rj-btn svg{ display:block; }

/* Desktop: media ocupa la MITAD izquierda de la tarjeta */
@media (min-width: 900px){
  .rj-place{
    grid-template-columns: 1fr 1fr; /* izquierda media, derecha texto */
    gap: 0;
  }
  .rj-place__media{
    height: 100%;
    min-height: 240px;
    border-radius: 18px 0 0 18px;   /* esquinas izquierdas */
  }
  .rj-place__body{
    padding: 1.1rem 1.2rem;
  }
}

/* ===== Lightbox ===== */
.rj-lightbox{
  position: fixed; inset: 0; display: none; z-index: 1000;
}
.rj-lightbox.is-open{ display:block; }
.rj-lb__backdrop{
  position:absolute; inset:0; background: rgba(20,20,20,.75);
}
.rj-lb__figure{
  position:absolute; inset:auto 4vw 4vw 4vw;
  top: 6vh;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.rj-lb__img{
  max-width: 92vw; max-height: 80vh; width:auto; height:auto; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.rj-lb__cap{ color:#fff; text-align:center; font-size:.95rem; }
.rj-lb__close{
  position:absolute; top:-12px; right:-12px;
  width:36px; height:36px; border-radius:999px; border:none;
  background:#fff; color:#333; font-size:22px; line-height:1; cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}


/* ===== Ajustes finales Lugares ===== */

/* 1) Enlaces en gris oscuro (no azul) dentro de las tarjetas */
.rj-place a { 
  color: #3A3F47;                /* gris oscuro */
  text-decoration: none;
}
.rj-place a:hover { 
  color: #2B3138; 
  text-decoration: underline;    /* subrayado sutil al pasar */
}

/* 2) Más espacio y presencia para el título */
.rj-place__title{
  font-size: 1.16rem;            /* un poco más grande */
  letter-spacing: .2px;
  margin: .2rem 0 .7rem;         /* MÁS espacio debajo del título */
  line-height: 1.25;
}

/* Más espacio entre el título "Lugares imperdibles" y las tarjetas */
.rj-places{
  margin-top: 1.25rem;   /* separa el grid del h3 */
  padding-top: .15rem;   /* micro respiro visual */
}

/* Por si algún estilo previo pisa el margen del h3, refuerzo acá */
.hx-section h3 + .rj-places{
  margin-top: 1.25rem !important;
}

/* (extra) si quieres todavía más aire: descomenta la siguiente línea */
/* .rj-places{ margin-top: 1.6rem !important; } */




/* ===== Referencias (pulido visual) ===== */
#referencias.rj-refs { --rj-gold:#C9A463; --rj-ink:#2F3640; --rj-muted:#6B7280; }

#referencias.rj-refs h3{ margin:.25rem 0 1rem; letter-spacing:.2px; }

#referencias.rj-refs #ref-list{
  list-style:none; padding:0; margin:1rem 0 0; max-width:78ch;
}

#referencias.rj-refs #ref-list li{
  position:relative; padding:.45rem 0 .45rem 1.25rem;
  border-bottom:1px solid #F1E8DB;
}
#referencias.rj-refs #ref-list li:last-child{ border-bottom:0; }

/* viñeta dorada */
#referencias.rj-refs #ref-list li::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--rj-gold); box-shadow:0 0 0 2px #EFE7DB;
  position:absolute; left:0; top:.95rem;
}

/* enlaces gris oscuro + icono externo */
#referencias.rj-refs a{ color:#3A3F47; text-decoration:none; font-weight:600; }
#referencias.rj-refs a:hover{ color:#2B3138; text-decoration:underline; }
#referencias.rj-refs a[target="_blank"]::after{
  content:""; display:inline-block; width:14px; height:14px; margin-left:.35rem;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z'/></svg>") no-repeat center/contain;
  background:#7C6A46; vertical-align:-2px;
}

/* opcional: 2 columnas en desktop */
@media (min-width: 900px){
  #referencias.rj-refs #ref-list{ columns:2; column-gap:2rem; }
  #referencias.rj-refs #ref-list li{ break-inside:avoid; }
}
/* Referencias: siempre 1 columna */
#referencias.rj-refs #ref-list{
  columns: 1 !important;
  column-gap: 0 !important;
}

#referencias.rj-refs #ref-list small[data-ref-host="1"]{
  margin-left:.15rem; color:#8A8F97; font-weight:400;
}
#referencias.rj-refs #ref-list a:hover + small[data-ref-host="1"]{
  color:#6F757D;
}