:root {
  --papel: #f5f0e6;
  --papel-2: #ece4d4;
  --tinta: #13283b;
  --suave: #5a6772;
  --linea: #d6ccb8;
  --mar: #05559a;
  --celeste: #31a9dc;
  --sombrilla: #8f5a00;
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --cuerpo: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 17px/1.65 var(--cuerpo); color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0 0 .5em; line-height: 1.1; letter-spacing: -.01em; font-weight: 600; }
svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: 24px; }
.etiqueta { margin: 0 0 12px; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sombrilla); }

/* ---------- Barra ---------- */
.barra { position: relative; background: var(--papel); border-bottom: 1px solid var(--tinta); }
.barra::before { content: ""; display: block; height: 6px; background: repeating-linear-gradient(90deg, var(--celeste) 0 28px, var(--papel) 28px 56px); }
.barra-in { display: flex; align-items: center; justify-content: space-between; padding-block: 12px; gap: 16px; }
.logo { display: block; }
.logo img { height: 80px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav-link, .nav-cta { text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--tinta); }
.nav-link:hover, .nav-cta:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-cta { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(40px, 6vw, 80px); }
.migas { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; color: var(--suave); margin-bottom: 20px; }
.migas a { color: var(--mar); }
.estado { margin: 0 0 18px; font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.punto { display: none; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); margin-bottom: .4em; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--mar); }
.sub { max-width: 32em; margin: 0 0 32px; font-size: 1.12rem; color: var(--suave); }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
.btn-acento { padding: .85em 1.4em; border-radius: 3px; background: var(--tinta); color: var(--papel); }
.btn-acento:hover { background: var(--mar); }
.btn-linea { color: var(--tinta); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.btn-linea:hover { color: var(--mar); }

.hero-foto { margin: 0; }
.hero-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.chip-foto { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .88rem; font-style: italic; color: var(--suave); }
.chip-foto svg { color: var(--mar); }
.dato-flotante { display: none; }

/* ---------- Cinta ---------- */
.cinta { display: none; }

/* ---------- Novedades ---------- */
.bento { display: grid; grid-template-columns: 2fr 1fr; gap: 0 clamp(32px, 5vw, 64px); padding-block: clamp(48px, 7vw, 88px); border-top: 1px solid var(--linea); }
.celda { padding: 22px 0; border-top: 1px solid var(--linea); text-decoration: none; }
.celda h3 { font-size: 1.25rem; margin-bottom: .3em; }
.celda p { margin: 0; color: var(--suave); font-size: .98rem; }
.celda-texto { grid-column: 1; grid-row: 1 / span 4; padding-top: 0; border-top: 0; }
.celda-texto h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); max-width: 18em; }
.celda-texto p { max-width: 38em; font-size: 1.05rem; color: var(--tinta); margin-bottom: 1em; }
.celda-num { grid-column: 2; padding-top: 0; border-top: 0; display: flex; align-items: baseline; gap: 14px; }
.celda-num strong { font-family: var(--display); font-size: 3.6rem; line-height: 1; font-weight: 600; color: var(--sombrilla); }
.celda-num span { color: var(--suave); font-size: .95rem; line-height: 1.4; }
.celda:nth-child(3), .celda:nth-child(4) { grid-column: 2; }
.icono { display: none; }
.celda-acento { grid-column: 2; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 20px 22px; border: 1px solid var(--tinta); background: var(--papel-2); }
.celda-acento span { font-size: .95rem; color: var(--suave); }
.celda-acento strong { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 1.45rem; font-weight: 600; }
.celda-acento:hover strong { color: var(--mar); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Anuncios ---------- */
.anuncio { text-align: center; }
.anuncio-rotulo { display: block; margin-bottom: 6px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.anuncio ins { min-height: 100px; }
.anuncio:has(ins[data-ad-status="unfilled"]) { display: none; }
.anuncio-arriba { padding-bottom: clamp(32px, 5vw, 56px); }
.anuncio-lateral { grid-column: 2; padding-top: 28px; }
.anuncio-lateral ins { min-height: 250px; }
.anuncio-listado { padding-block: 22px; border-top: 1px solid var(--linea); }

/* ---------- Destinos ---------- */
.destinos { padding-bottom: clamp(56px, 8vw, 104px); }
.destinos-cab { margin-bottom: 28px; }
.destinos-cab h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 16em; }
.zona { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 24px; padding-block: 22px; border-top: 1px solid var(--linea); }
.zona:last-child { border-bottom: 1px solid var(--linea); }
.zona h3 { display: flex; gap: 12px; font-size: 1.1rem; line-height: 1.35; }
.zona h3 span { color: var(--sombrilla); font-variant-numeric: tabular-nums; font-weight: 400; }
.zona ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 24px; }
.zona a { display: block; padding: 6px 0; color: var(--mar); text-decoration: none; }
.zona a svg { display: none; }
.zona a:hover { text-decoration: underline; text-underline-offset: 3px; }
.zona a[aria-current] { color: var(--tinta); font-weight: 700; }

/* ---------- Pie ---------- */
.pie { padding-block: 40px 28px; background: var(--tinta); color: var(--papel); }
.pie-marca { display: none; }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.pie-fila p { margin: 0; max-width: 32em; color: #c9c3b6; }
.pie-redes { display: flex; flex-wrap: wrap; gap: 24px; }
.pie-redes a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 500; }
.pie-redes a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie-copy { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid rgba(245,240,230,.18); font-size: .85rem; color: #9aa3a9; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-foto { order: -1; }
  .bento { grid-template-columns: 1fr; }
  .celda-texto, .celda-num, .celda:nth-child(3), .celda:nth-child(4), .celda-acento, .anuncio-lateral { grid-column: 1; grid-row: auto; }
  .celda-num { padding-top: 22px; border-top: 1px solid var(--linea); }
  .zona { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .logo img { height: 64px; }
  .nav-link { display: none; }
  .hero { padding-top: 24px; }
  .zona ul { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .zona a { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}