/* ===========================
   TOKENS DE MARCA / BASE
   =========================== */
:root{
  --brand-primary:#002D62;
  --brand-red:#CE1126;
  --brand-yellow:#F7D117;
  --brand-orange:#FF7900;
  --bg-subtle:#F8F1E7;
  --text-dark:#011226;
  --text-medium:#4A5568;
  --text-light:#94A3B8;

  /* barra */
  --cd-h:78px;
  --cd-gap:clamp(12px,2.4vw,28px);
  --cd-bg-1:#00142a;
  --cd-bg-2:#0a2a57;
}

html,body{margin:0;padding:0}
body{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Tipografías auxiliares (por si Tailwind purga algo) */
.font-base{
  font-family:"Poppins","Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
}
.font-elegant{font-family:"Playfair Display","Times New Roman",Times,serif!important}

/* Utilidades de color rápidas (por si hace falta fuera de Tailwind) */
.text-text-medium{color:var(--text-medium)!important;}
.bg-bg-subtle{background-color:var(--bg-subtle)!important;}

/* ===========================
   NAVBAR NUEVA (cd-*)
   =========================== */
.cd-header{
  position:fixed; inset:0 0 auto 0; height:var(--cd-h); z-index:9999;
  background:linear-gradient(90deg,var(--cd-bg-1) 0%,var(--cd-bg-2) 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.cd-nav{
  max-width:1200px; height:100%; margin:0 auto; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 clamp(16px,4vw,40px); gap:var(--cd-gap); position:relative;
}
.cd-left,.cd-right{display:flex;align-items:center;gap:var(--cd-gap);min-width:0}
.cd-right{justify-content:flex-end}
.cd-logo{display:inline-flex;align-items:center;height:var(--cd-h)}
.cd-a{
  display:inline-flex;align-items:center;padding:.5rem .7rem;border-radius:.55rem;
  color:#e8edf6;font-weight:800;letter-spacing:.2px;white-space:nowrap;
  text-shadow:0 2px 5px rgba(0,0,0,.35);
  transition:background .2s,color .2s,transform .05s;
}
.cd-a:hover{color:var(--brand-yellow);background:rgba(255,255,255,.06)}
.cd-a:active{transform:translateY(1px)}
.cd-active>span{
  background:linear-gradient(90deg,var(--brand-yellow),var(--brand-orange),var(--brand-red));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;
}

/* Menú móvil */
.cd-burg{display:none;border:0;background:transparent;color:#fff;font-size:1.25rem;padding:.5rem .6rem;border-radius:.5rem}
.cd-burg:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cd-panel{
  display:none; position:absolute; inset:var(--cd-h) 0 auto 0;
  background:linear-gradient(180deg,rgba(3,12,24,.98),rgba(3,12,24,.94));
  border-bottom:1px solid rgba(255,255,255,.08); padding:12px 16px 16px;
  z-index:9998; backdrop-filter:blur(1px);
  transform:translateY(-6px); opacity:0; visibility:hidden;
  transition:transform .25s ease, opacity .25s ease, visibility .25s ease;
}
.cd-panel a{display:block;color:#fff;font-weight:800;padding:.75rem .95rem;border-radius:.5rem}
.cd-panel a:hover{background:rgba(255,255,255,.08);color:var(--brand-yellow)}
.cd-panel.show{display:block; transform:translateY(0); opacity:1; visibility:visible}
.body-no-scroll{overflow:hidden}

@media (max-width:1024px){
  .cd-left,.cd-right{display:none}
  .cd-nav{grid-template-columns:auto 1fr auto}
  .cd-burg{display:inline-flex;grid-column:1;justify-self:start;z-index:2}
  .cd-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}
}

/* Compensación de héroe bajo barra fija */
.cd-hero-wrap{padding-top:var(--cd-h)}

/* ===========================
   BOTONES NUEVOS (cd-btn)
   =========================== */
.cd-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:700;border-radius:999px;padding:.9rem 1.4rem;
  transition:transform .18s, box-shadow .18s, background .2s, color .2s;
  will-change:transform;
}
.cd-btn i{font-size:.95em}
.cd-btn:focus-visible{outline:3px solid rgba(247,209,23,.9);outline-offset:3px}

/* Primario con gradiente */
.cd-btn--primary{
  color:#fff;background:linear-gradient(90deg,#FF7900,#CE1126);
  box-shadow:0 10px 26px rgba(206,17,38,.35);
}
.cd-btn--primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(206,17,38,.45)}
.cd-btn--primary:active{transform:translateY(0)}

/* Outline contrastado (fondos claros) */
.cd-btn--outline{
  color:#0a0f1f;background:#fff;border:2px solid rgba(2,44,98,.18);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.cd-btn--outline:hover{border-color:#002D62;box-shadow:0 10px 22px rgba(0,0,0,.08)}

/* Chip/soft */
.cd-btn--soft{
  color:#1a2b4a;background:#fff;border:1.5px solid rgba(2,44,98,.12);
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.cd-btn--soft:hover{border-color:rgba(2,44,98,.28);box-shadow:0 8px 18px rgba(0,0,0,.06)}

/* ===========================
   FOOTER: subrayado animado
   =========================== */
.link-underline{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .25s ease;
}
.link-underline:hover{background-size:100% 2px}

/* ===========================
   DIVISOR SVG
   =========================== */
.section-divider{width:100%;overflow:hidden;line-height:0}
.section-divider svg{position:relative;display:block;width:calc(100% + 1.3px);height:80px}
.section-divider .fill-current{fill:currentColor}

/* ===========================
   PRIVACIDAD: acordeón
   =========================== */
.privacy-accordion-item{
  background:#fff;border-radius:.5rem;box-shadow:0 3px 7px rgba(0,0,0,.06);
  margin-bottom:.75rem;overflow:hidden;
}
.privacy-toggle{
  width:100%;padding:1rem 1.5rem;text-align:left;display:flex;justify-content:space-between;align-items:center;
  background:transparent;border-bottom:1px solid #f3f4f6;color:var(--brand-primary);font-weight:600;cursor:pointer;
  transition:background-color .2s,color .2s;
}
.privacy-accordion-item:last-child .privacy-toggle{border-bottom:none}
.privacy-toggle:hover{background-color:rgba(0,45,98,.03);color:var(--brand-red)}
.privacy-toggle i{transition:transform .35s;font-size:.85em;opacity:.7}
.privacy-toggle.active i{transform:rotate(180deg)}
.privacy-content{
  max-height:0;overflow:hidden;
  transition:max-height .5s ease-out,padding-top .5s ease-out,padding-bottom .5s ease-out;
  padding:0 1.5rem;background-color:#fdfdff;
}
.privacy-content.active{max-height:2000px;padding:1.5rem}

/* ===========================
   BOTÓN “VOLVER ARRIBA”
   =========================== */
.floating-btn{
  position:fixed;bottom:2rem;right:2rem;width:3rem;height:3rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 8px rgba(0,0,0,.2);
  transition:opacity .3s, transform .3s; z-index:100;
}
.floating-btn.hidden{opacity:0;transform:translateY(100px)}
/* === OFFSET para header fijo (cd-header) === */
:root{ --cd-h: 84px; }              /* valor fallback */
html{ scroll-padding-top: var(--cd-h); } /* evita saltos al navegar por anchors */

/* aplica el offset solo en esta página; pon id="destinosPage" en el <body> */
body#destinosPage{ padding-top: var(--cd-h); }
/* === subrayado blanco animado en footer === */
.footer-link{
  position:relative; display:inline-block; color:#cbd5e0;
  transition:color .25s ease; padding-bottom:2px;
}
.footer-link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:#fff; border-radius:2px; transition:width .25s ease;
}
.footer-link:hover{ color:#fff; }
.footer-link:hover::after{ width:100%; }

/* ===== Modal: layout que NO recorta imagen ===== */
.gallery-modal { position: fixed; inset: 0; z-index: 90; display: none; }
.gallery-modal.open { display: block; }
.gallery-modal-background { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(2px); opacity: 0; transition: opacity .25s ease; }
.gallery-modal.open .gallery-modal-background { opacity: 1; }
.gallery-modal-content{
  position: relative; z-index: 95;
  margin: 3vh auto; width: min(96%, 1200px);
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 35px 80px rgba(0,0,0,.45);
  transform: translateY(10px) scale(.98); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.gallery-modal.open .gallery-modal-content{ transform: translateY(0) scale(1); opacity: 1; }

.gallery-modal-body{
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 0;
  max-height: 84vh;
}
.gallery-modal-image-wrapper{
  background: #000; display: flex; align-items: center; justify-content: center;
}
.gallery-modal-image{
  width: auto; max-width: 100%;
  height: auto; max-height: 84vh; object-fit: contain; /* <- evita cortes */
}
@media (max-width: 1024px){
  .gallery-modal-body{ grid-template-columns: 1fr; }
  .gallery-modal-image{ max-height: 60vh; }
}

/* ===== Action sheet (compartir/descargar) sobreexpuesto arriba del modal ===== */
.actions-sheet{
  position: fixed; inset: 0; z-index: 120; display: none;
}
.actions-sheet.open{ display: block; }
.actions-sheet .sheet-backdrop{
  position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s ease;
}
.actions-sheet.open .sheet-backdrop{ opacity: 1; }
.actions-sheet .sheet-panel{
  position: absolute; left: 50%; bottom: 20px; transform: translate(-50%, 12px);
  width: min(680px, 92%); background: #fff; border-radius: 16px; padding: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
.actions-sheet.open .sheet-panel{ transform: translate(-50%, 0); opacity: 1; }
.actions-sheet .sheet-close{
  position: absolute; top: 10px; right: 12px; color:#6b7280;
}

/* ===== Hint de “clic” en las miniaturas ===== */
.gallery-image-container{ cursor: zoom-in; }
.gallery-image-container .click-hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(transparent, rgba(0,0,0,.35));
  opacity:0; transition: opacity .2s ease;
}
.gallery-image-container:hover .click-hint{ opacity:1; }
.click-hint i{
  font-size: 26px; color: #fff; padding: 10px 12px; border-radius: 9999px;
  background: rgba(0,0,0,.35);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.gallery-image-container:hover img{ transform: scale(1.03); }
.gallery-image{ transition: transform .25s ease; }
/* ========= PALETA Y BASE ========= */
:root{
  --brand:#002D62; --brand-2:#CE1126; --accent:#F7D117;
  --text:#1a202c; --text-2:#4a5568; --beige:#F6EFE6;
}
body{ background:var(--beige); color:var(--text-2); }
#hero-galeria h1{ letter-spacing:.5px; }
#hero-galeria p{ max-width:56ch; margin-inline:auto; }

/* ========= BREADCRUMB ========= */
#hero-galeria nav a{ text-underline-offset:3px; }
#hero-galeria nav a:hover{ text-decoration:underline; color:var(--accent); }

/* ========= BUSCADOR ========= */
.search-input{
  width:100%; background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; padding:12px 14px 12px 44px;
  font-size:15px; color:var(--text);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.search-input::placeholder{ color:#9ca3af; }
.search-input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 8px 26px rgba(0,45,98,.12);
  transform:translateY(-1px);
}

/* ========= BOTONES CTA ========= */
.main-cta-button{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:12px; padding:.7rem 1.1rem; font-weight:700;
  color:#fff; background:var(--brand-2);
  box-shadow:0 10px 22px rgba(206,17,38,.22);
  transition:transform .18s ease, box-shadow .18s ease, opacity .2s;
}
.main-cta-button:hover{ transform:translateY(-1px) scale(1.01); box-shadow:0 16px 28px rgba(206,17,38,.26); }
.button-gradient-animated{
  background:linear-gradient(90deg,var(--brand-2),#f05a28,var(--brand-2));
  background-size:200% 100%; animation:gradShift 6s linear infinite;
}
@keyframes gradShift{0%{background-position:0 0}100%{background-position:200% 0}}

/* ========= PANEL DE FILTROS ========= */
.gallery-filter-label{ display:block; font-weight:600; color:var(--text); margin-bottom:.35rem; }
.gallery-filter-select{
  width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:.55rem .8rem;
  background:#fff; color:var(--text); transition:border-color .2s, box-shadow .2s;
}
.gallery-filter-select:focus{ outline:none; border-color:var(--brand); box-shadow:0 4px 16px rgba(0,45,98,.12); }

/* ========= TARJETAS DE GALERÍA ========= */
#gallery-grid{ row-gap:2.2rem; }
.gallery-image-container{
  position:relative; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  transition: transform .22s ease, box-shadow .22s ease;
}
.gallery-image-container:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.12); }
.gallery-image{
  width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  transition:transform .28s ease;
}
.gallery-image-container:hover .gallery-image{ transform:scale(1.04); }

/* Overlay info en la parte baja */
.gallery-image-info{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px 12px;
  color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.55);
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 65%, rgba(0,0,0,.8) 100%);
}
.gallery-image-title{ font-weight:800; font-size:1.05rem; line-height:1.15; margin:0 0 .3rem; }
.gallery-image-meta{ display:flex; gap:.8rem; font-weight:600; font-size:.92rem; opacity:.95; }

/* Hint de click (si lo inyecta el JS) */
.click-hint{ border-radius:16px; }
.click-hint i{ backdrop-filter: blur(2px); }

/* ========= BOTÓN CARGAR MÁS ========= */
#gallery-load-more{
  border-radius:12px; padding:.85rem 1.4rem;
  background:var(--brand); color:#fff;
  box-shadow:0 12px 26px rgba(0,45,98,.22); font-weight:800;
}
#gallery-load-more:hover{ filter:saturate(1.05); transform:translateY(-1px); }

/* ========= MODAL: botones de acción ========= */
.gallery-modal-action-button{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid #e5e7eb; padding:.6rem .9rem; border-radius:10px;
  background:#fff; font-weight:700; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.gallery-modal-action-button:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.08); border-color:#d1d5db; }

/* ========= TIPOGRAFÍA GENERAL ========= */
.gallery-modal-info-title{ font-weight:800; font-size:1.4rem; color:var(--text); }
.gallery-modal-info-description{ color:var(--text-2); line-height:1.65; }

/* ========= PEQUEÑOS AJUSTES RESPONSIVE ========= */
@media (max-width:1024px){
  .gallery-image{ aspect-ratio:4/3; }
  #gallery-grid{ gap:1.5rem 1rem; }
}
@media (max-width:640px){
  .gallery-image{ aspect-ratio:1.3/1; }
  .gallery-image-title{ font-size:1rem; }
}
/* ====== FIX: jerarquía por encima del header ====== */
.cd-header{ z-index: 40; }
.gallery-modal{ z-index: 100; }      /* modal > header */
.actions-sheet{ z-index: 120; }      /* sheet > modal */

/* ====== FIX: contenedor del modal (ancho/alto, centrado) ====== */
.gallery-modal-content{
  max-width: min(1100px, calc(100vw - 32px));
  margin: min(6vh, 72px) auto 3vh;   /* despega del header fijo */
  border-radius: 18px;
  overflow: hidden;
}

/* Grid interno y alturas seguras */
.gallery-modal-body{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  max-height: calc(100vh - 12vh);
}

/* La imagen NO se recorta y siempre cabe */
.gallery-modal-image-wrapper{ background:#000; }
.gallery-modal-image{
  width:auto; max-width:100%;
  height:auto; max-height: calc(100vh - 12vh);
  object-fit: contain;
}

/* La columna derecha hace scroll si se pasa de alto */
.gallery-modal-info{
  overflow: auto;
  padding: 22px 22px 26px;
}

/* Botón X siempre visible por encima del contenido */
.gallery-modal-close-button{
  position:absolute; top:10px; right:12px; z-index:5;
}

/* ====== Responsivo: una sola columna en pantallas medianas ====== */
@media (max-width: 1280px){
  .gallery-modal-body{ grid-template-columns: 1fr; }
  .gallery-modal-image{ max-height: 60vh; }
  .gallery-modal-info{ max-height: 40vh; }
}

/* ====== Mejora visual del backdrop ====== */
.gallery-modal-background{
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(2px);
}

/* (Opcional) botón “Cargar más fotos” más notorio */
#gallery-load-more{
  border-radius: 12px;
  background: #002D62; color:#fff; font-weight:800;
  box-shadow: 0 12px 26px rgba(0,45,98,.22);
}
#gallery-load-more:hover{ transform: translateY(-1px); filter:saturate(1.05); }
/* ========= TOKENS & BASE (asegura estos) ========= */
:root{
  --brand-primary:#002D62;
  --brand-red:#CE1126;
  --brand-yellow:#F7D117;
  --footer-bg:#0a0f1f;
  --footer-text:#cbd5e0;
}

/* Texto general (coincide con el resto del sitio) */
body{ color:#4a5568; background:#F6EFE6; }

/* ========= NAV (clases cd-*) ========= */
.cd-header{
  position:fixed; inset:0 0 auto 0; height:78px; z-index:9999;
  background:linear-gradient(90deg,#00142a 0%,#0a2a57 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.cd-nav{
  max-width:1200px; height:100%; margin:0 auto; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 clamp(16px,4vw,40px); gap:clamp(12px,2.4vw,28px);
}
.cd-left,.cd-right{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px)}
.cd-right{justify-content:flex-end}
.cd-logo{display:inline-flex;align-items:center;height:78px}
.cd-a{
  display:inline-flex;align-items:center;padding:.5rem .7rem;border-radius:.55rem;
  color:#e8edf6;font-weight:800;letter-spacing:.2px;white-space:nowrap;
  text-shadow:0 2px 5px rgba(0,0,0,.35); transition:background .2s,color .2s,transform .05s;
}
.cd-a:hover{color:var(--brand-yellow);background:rgba(255,255,255,.06)}
.cd-a:active{transform:translateY(1px)}
/* activo en desktop y móvil (sin necesitar <span>) */
.cd-a.cd-active,
.cd-a.cd-active > span,
.cd-panel a[aria-current="page"]{
  background: linear-gradient(90deg, var(--brand-yellow), var(--brand-orange), var(--brand-red));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  font-weight: 800;
}


/* Menú móvil */
.cd-burg{display:none;border:0;background:transparent;color:#fff;font-size:1.25rem;padding:.5rem .6rem;border-radius:.5rem}
.cd-burg:focus-visible{outline:2px solid #fff;outline-offset:2px}

.cd-panel a{display:block;color:#fff;font-weight:800;padding:.75rem .95rem;border-radius:.5rem}
.cd-panel a:hover{background:rgba(255,255,255,.08);color:var(--brand-yellow)}
.cd-panel.show{display:block; transform:translateY(0); opacity:1; visibility:visible}
.body-no-scroll{overflow:hidden}

@media (max-width:1024px){
  .cd-left,.cd-right{display:none}
  .cd-nav{grid-template-columns:auto 1fr auto}
  .cd-burg{display:inline-flex;grid-column:1;justify-self:start;z-index:2}
  .cd-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}
}

/* Compensación para héroes bajo header fijo */
.cd-hero-wrap{ padding-top:78px; }

/* ========= FOOTER ========= */
@keyframes gradientMove { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

footer{ background:var(--footer-bg); color:var(--footer-text); }
.link-underline{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .25s ease;
}
.link-underline:hover{background-size:100% 2px}

/* Barra degradada animada superior del footer */
.footer-divider-anim{
  height:2px; background:linear-gradient(90deg,#CE1126,#F7D117,#002D62);
  background-size:200% 100%; animation:gradientMove 2.5s linear infinite;
}

/* Hovers de iconos sociales */
.footer-social a{
  color:#94a3b8; transition:transform .2s,color .2s;
}
.footer-social a:hover{ transform:scale(1.1); }
.footer-social a[href*="youtube"]:hover{ color:#F7D117; }
.footer-social a[href*="instagram"]:hover{ color:#CE1126; }
.footer-social a[href*="facebook"]:hover{ color:#002D62; }
.footer-social a[href*="tiktok"]:hover{ color:#F7D117; }

/* Texto legal con subrayado animado blanco */
.footer-legal a{
  position:relative; color:inherit; transition:color .25s ease; padding-bottom:2px;
}
.footer-legal a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:#fff; border-radius:2px; transition:width .25s ease;
}
.footer-legal a:hover{ color:#fff; }
.footer-legal a:hover::after{ width:100%; }
/* ==== ANIMACIONES GLOBALES (nav/footer/reveal) ==== */
@keyframes cd-fade-up {
  0% { opacity: 0; transform: translateY(14px) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cd-pop {
  0% { transform: scale(.9); opacity:.6 }
  100% { transform: scale(1); opacity:1 }
}

/* Reveal genérico: úsalo en cualquier bloque que quieras animar al entrar */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  will-change: transform, opacity;
}
.reveal.is-visible {
  animation: cd-fade-up .6s ease-out forwards;
}

/* Stagger para hijos (coloca .reveal-stagger en el padre) */
.reveal-stagger > * { opacity:0; transform: translateY(10px) }
.reveal-stagger.is-visible > * { animation: cd-fade-up .55s ease-out forwards }
.reveal-stagger.is-visible > *:nth-child(1){ animation-delay:.05s }
.reveal-stagger.is-visible > *:nth-child(2){ animation-delay:.10s }
.reveal-stagger.is-visible > *:nth-child(3){ animation-delay:.15s }
.reveal-stagger.is-visible > *:nth-child(4){ animation-delay:.20s }
.reveal-stagger.is-visible > *:nth-child(5){ animation-delay:.25s }
.reveal-stagger.is-visible > *:nth-child(6){ animation-delay:.30s }

/* Nav (cd-header): elevar con blur y ocultar al bajar rápido */
.cd-header.nav-elevated{
  background: linear-gradient(90deg,var(--cd-bg-1,#00142a),var(--cd-bg-2,#0a2a57));
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}
.cd-header.nav-hidden{ transform: translateY(-100%); transition: transform .25s ease }
.cd-header{ transition: transform .25s ease, box-shadow .25s ease, background .25s ease }

/* Footer: columnas entran bonito cuando el footer entra en viewport */
footer.footer-animated .footer-grid > div { animation: cd-fade-up .6s ease-out both }
footer.footer-animated .footer-grid > div:nth-child(1){ animation-delay:.04s }
footer.footer-animated .footer-grid > div:nth-child(2){ animation-delay:.10s }
footer.footer-animated .footer-grid > div:nth-child(3){ animation-delay:.16s }
footer.footer-animated .footer-grid > div:nth-child(4){ animation-delay:.22s }

/* Footer: iconos con “pop” al pasar el mouse (además del scale que ya tenías) */
footer .flex.gap-4.text-xl a:hover { animation: cd-pop .18s ease-out both }

/* (Opcional) si quieres revelar el propio footer como bloque */
footer.reveal-foot { opacity:0; transform: translateY(16px) }
footer.reveal-foot.is-visible { animation: cd-fade-up .6s ease-out forwards }
/* Panel móvil */
.cd-panel{position:fixed;inset:var(--cd-header-h,56px) 0 0 0;background:#002D62;color:#fff;transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .25s,opacity .25s;padding:10px;z-index:70;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.cd-panel.show{opacity:1;transform:translateY(0);pointer-events:auto}
.cd-panel::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.25)}
.cd-panel a{display:block;padding:.95rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.body-no-scroll{overflow:hidden;touch-action:none}
/* Chips */
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .7rem;border-radius:999px;font-size:.72rem;font-weight:700}
.chip.blue{background:#e7edf8;color:#002D62}
.chip.green{background:#e7f3ec;color:#006B3C}
.chip.yellow{background:#fff5bf;color:#3c3200}
.chip.orange{background:#ffe3cc;color:#7a3500}
.chip.purple{background:#efe3ff;color:#4b1976}
/* Cards */
.guide-card{border:1px solid rgba(0,0,0,.06);border-radius:18px;background:#fff;box-shadow:0 14px 40px -24px rgba(0,0,0,.25);overflow:hidden}
.guide-img{width:100%;height:200px;object-fit:cover;transition:transform .45s}
.guide-card:hover .guide-img{transform:scale(1.05)}
.page-hero-header{ padding-bottom: 2.5rem; }
@media (min-width:1024px){ .page-hero-header{ padding-bottom: 3.5rem; } }
/* --- Tipografía y layout tarjeta --- */
#blog-grid .blog-page-card{border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.06);
  box-shadow:0 18px 36px -22px rgba(0,0,0,.4);overflow:hidden;transition:transform .18s,box-shadow .18s}
#blog-grid .blog-page-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px -26px rgba(0,0,0,.45)}
#blog-grid .blog-card-image-container{height:220px}
#blog-grid .blog-card-content{padding:1rem 1rem 1.1rem}
@media (min-width:768px){#blog-grid .blog-card-content{padding:1.1rem 1.1rem 1.2rem}}

.blog-card-title{color:#0f172a;font-weight:800;letter-spacing:-.01em;line-height:1.25;
  font-size:1.25rem}
@media(min-width:768px){.blog-card-title{font-size:1.375rem}}
.blog-page-card:hover .blog-card-title{color:#002D62}

.blog-card-excerpt{color:#475569;line-height:1.6;font-size:1rem}
.blog-card-meta{font-size:.9rem;color:#64748b;display:flex;align-items:center;gap:.55rem}

/* Línea separadora • automática entre metadatos */
.blog-card-meta > * + * {position:relative;padding-left:.55rem}
.blog-card-meta > * + *::before{content:"•";position:absolute;left:-.35rem;color:#cbd5e1}

/* Badges de categoría */
.category-badge{display:inline-block;padding:.42rem .7rem;border-radius:999px;font-size:.75rem;
  font-weight:700;border:1px solid transparent}
.category-badge[data-cat="ecoturismo"]{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.category-badge[data-cat="gastronomia"]{background:#fff3e0;border-color:#fed7aa;color:#9a3412}
.category-badge[data-cat="playas"]{background:#e7f0ff;border-color:#cfe0ff;color:#002D62}
.category-badge[data-cat="montanas"]{background:#e8f6ef;border-color:#c9eadb;color:#14532d}
.category-badge[data-cat="ciudades"]{background:#eef2f7;border-color:#d7dee7;color:#334155}

/* Clamps (sin plugin) */
.line-clamp-2,.line-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{-webkit-line-clamp:2}
.line-clamp-3{-webkit-line-clamp:3}

/* CTA “Leer más” */
.card-more{display:inline-flex;align-items:center;font-weight:800;color:#002D62}
.card-more i{transition:transform .18s}
.blog-page-card:hover .card-more i{transform:translateX(4px)}

/* Focus accesible para tarjetas clickables */
a.block.group:focus-visible{outline:2px solid #002D62;outline-offset:4px;border-radius:16px}