:root{
  --brand:#0a7cff;
  --ink:#0f172a;
  --bg:#fafafa;
  --card:#ffffff;
  --shadow:0 4px 16px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;background:var(--bg);color:var(--ink)}
.section{padding:2rem 1rem}
.container{max-width:1100px;margin:0 auto}
.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:1rem}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:.75rem 1rem;border-radius:12px;text-decoration:none;font-weight:600}
    

/* ===== Header con logo + menú ===== */
.header-bar{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:1000}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#0f172a;font-weight:800}
.brand .dot{width:12px;height:12px;border-radius:999px;background:#7c3aed;display:inline-block}
.menu ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu a{text-decoration:none;color:#0f172a;font-weight:700}
.menu a:hover{opacity:.75}

/* ===== Tarjetas y utilidades ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.btn{display:inline-block;background:#0a7cff;color:#fff;padding:.75rem 1rem;border-radius:12px;text-decoration:none;font-weight:700}
.muted{opacity:.8}

/* ===== Home ===== */
.hero{padding:1rem 0}
.map-card iframe{border:0;width:100%;height:100%}
.map-wrap{aspect-ratio:16/9;border-radius:12px;overflow:hidden;max-width:760px}
.weather{display:flex;align-items:center;gap:1rem}
.weather .temp{font-size:2rem;font-weight:800}

/* === Carousel === */
.carousel{position:relative;overflow:hidden;border-radius:12px}
.carousel .slides{display:flex;transition:transform .5s ease min-height:220px;}
.carousel img{width:100%;flex:0 0 100%;object-fit:cover;aspect-ratio:16/9}
.carousel button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:#fff;border:0;border-radius:8px;padding:.3rem .6rem;cursor:pointer}
.carousel .prev{left:.5rem}.carousel .next{right:.5rem}
.carousel .dots{position:absolute;left:0;right:0;bottom:.5rem;display:flex;gap:.4rem;justify-content:center}
.carousel .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.7);cursor:pointer}
.carousel .dot.active{background:#7c3aed}

/* Botón Añadir nuevo */
.add-new{position:sticky;top:1rem;float:right;display:inline-block;background:#7c3aed;color:#fff;
  padding:.6rem .9rem;border-radius:12px;text-decoration:none;font-weight:800;margin-bottom:.5rem}
.add-new:hover{opacity:.9}
/* Ocultar posibles breadcrumbs antiguos (defensa) */
.breadcrumb, .crumbs, .nav-crumbs{display:none!important}

/* Centered hero carousel */
.hero-only-carousel{padding:1rem 0 2rem}
.hero-only-carousel .card{max-width:1100px;margin:0 auto}
/* Make sure images fill and center */
.carousel img{object-position:center}

/* ===== Custom additions (balnearios & loader) ===== */

/* --- Added: buttons & cards --- */
.card-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
.btn-primario{background:var(--brand, #0ea5e9);color:#fff;padding:.6rem .9rem;border-radius:12px;font-weight:700;text-decoration:none;display:inline-block}
.btn-primario:hover{filter:brightness(.95)}
.cards-xxl{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* --- Added: themed submenu backgrounds by section --- */
:root{
  --brand:#0ea5e9;
}
body.page-inicio{--brand:#f59e0b;}
body.page-servicios{--brand:#22c55e;}
body.page-balnearios{--brand:#06b6d4;}
body.page-tours{--brand:#0ea5e9;}
body.page-hoteles{--brand:#8b5cf6;}
body.page-restaurantes{--brand:#ef4444;}
body.page-cuevas{--brand:#14b8a6;}
body.page-sitios-historicos{--brand:#f97316;}

/* Banner/menus pick up brand var */
.brand-banner,
header.navbar{background:linear-gradient(90deg,var(--brand), #1110);}
.nav a.active{background:var(--brand);color:#fff}

/* --- Added: Loading overlay --- */
#loader-overlay{position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:.75rem}
#loader-overlay img{width:120px;height:auto;object-fit:contain}
#loader-overlay p{font-weight:800;letter-spacing:.5px}
.no-loader #loader-overlay{display:none}

/* === UI updates (carousel fullscreen, back button, colors) === */

/* ==== Fullscreen carousel spacing fix & brand spacer height ==== */
.brand-banner{position:sticky;top:0;z-index:80}
.brand-spacer{height:8px;position:sticky;top:56px;z-index:79}
:root{scroll-behavior:smooth;scroll-padding-top:72px}

/* ==== Submenu color enhancements ==== */
.brand-menu a{position:relative}
.brand-menu a::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;width:0;height:3px;background:var(--brand,#06b6d4);transition:.2s;border-radius:2px}
.brand-menu a:hover::after,.brand-menu a.active::after{width:70%}
.brand-menu a:hover{filter:saturate(1.2)}

/* Multiple vibrant accents per page */
body.page-inicio{--brand:#f59e0b;--accent2:#ef4444;--accent3:#22c55e}
body.page-servicios{--brand:#22c55e;--accent2:#06b6d4;--accent3:#f59e0b}
body.page-balnearios{--brand:#06b6d4;--accent2:#8b5cf6;--accent3:#f97316}
body.page-tours{--brand:#0ea5e9;--accent2:#22c55e;--accent3:#ef4444}
body.page-hoteles{--brand:#8b5cf6;--accent2:#06b6d4;--accent3:#22c55e}
body.page-restaurantes{--brand:#ef4444;--accent2:#f59e0b;--accent3:#06b6d4}
body.page-cuevas{--brand:#14b8a6;--accent2:#0ea5e9;--accent3:#f59e0b}
body.page-sitios-historicos{--brand:#f97316;--accent2:#8b5cf6;--accent3:#06b6d4}

/* Use accents in banner gradient */
.brand-banner{background:linear-gradient(90deg,var(--brand),var(--accent2),var(--accent3))}

/* ==== Sticky & eye-catching Back button ==== */
.btn-back-floating{
  position:fixed; top:70px; left:14px;
  display:inline-flex; align-items:center; gap:.55rem;
  background: linear-gradient(135deg,#0f766e,#16a34a,#22c55e,#0ea5e9);
  color:#fff;
  padding:.65rem 1rem; border-radius:999px; font-weight:800;
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.15);
  z-index:120; text-decoration:none; border:0;
  letter-spacing:.2px;
}
.btn-back-floating i{font-style:normal}
.btn-back-floating:hover{filter:saturate(1.1) brightness(1.03)}
.btn-back-floating:active{transform:translateY(1px)}
@media (max-width: 640px){
  .btn-back-floating{top:66px; left:10px; padding:.6rem .9rem}
}
@media (max-width:640px){.btn-back-floating{top:72px;left:10px;padding:.55rem .85rem}}

/* Hide any extra top white bars if present */
header.bg-white, .top-white-bar{display:none !important}



/* ===== Fix: remove any extra white bars ===== */
header{display:none !important;}
.top-white-bar, header.bg-white {display:none !important;}

/* ===== Multicolor underline marker for active submenu ===== */
.brand-menu a{position:relative;padding-bottom:4px;}
.brand-menu a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,#ea3388,#f59e0b,#22c55e,#06b6d4);
  border-radius:4px;
}
.brand-menu a:hover::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,#ea3388,#f59e0b,#22c55e,#06b6d4);
  border-radius:4px;}

/* override back button */

/* === Universal Back Button (gov gradient) === */
.btn-back-floating{
  position:fixed; top:72px; left:14px;
  display:inline-flex; align-items:center; gap:.55rem;
  background:linear-gradient(90deg,#ea3388,#f59e0b,#22c55e,#06b6d4);
  color:#fff; padding:.65rem 1rem; border-radius:999px; font-weight:800;
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.15);
  z-index:140; text-decoration:none; border:0; letter-spacing:.2px;
}
.btn-back-floating i{font-style:normal}
.btn-back-floating:hover{filter:saturate(1.08) brightness(1.03)}
.btn-back-floating:active{transform:translateY(1px)}
@media (max-width:640px){ .btn-back-floating{ top:66px; left:10px; padding:.6rem .9rem } }

/* override marker */

/* === Submenu gradient underline marker === */
.brand-menu a{position:relative}
.brand-menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:4px;
  background:linear-gradient(90deg,#ea3388,#f59e0b,#22c55e,#06b6d4);
  border-radius:3px; transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.brand-menu a:hover::after, .brand-menu a.active::after{ transform:scaleX(1) }


/* === Remove stray top white bars === */
body{ margin:0; background:#f7f7f7; }
header{ border:0 !important }
.top-white-bar, .breadcrumb, header.bg-white{ display:none !important }
main{ padding-top:2rem }
.brand-spacer{ background:linear-gradient(90deg,#06b6d4,#22c55e,#f59e0b,#ea3388) }


/* === Remove stray purple dot (indicator) === */
.brand .dot, .swiper-pagination-bullet, .swiper-pagination, .dot, .dots { display:none !important; }


/* === Fondo distinto por sección con colores del logo === */
body.page-inicio{ background:#fdf2f8; }         /* rosa suave */
body.page-servicios{ background:#fff7ed; }      /* naranja claro */
body.page-balnearios{ background:#ecfdf5; }     /* verde claro */
body.page-tours{ background:#eff6ff; }          /* azul claro */
body.page-hoteles{ background:#f5f3ff; }        /* morado claro */
body.page-restaurantes{ background:#fef2f2; }   /* rojo suave */
body.page-cuevas{ background:#f0fdfa; }         /* aqua/turquesa */
body.page-sitios-historicos{ background:#fffaf0; } /* dorado/beige */


/* === Remove extra header bar & purple dot link to Inicio === */
.header-bar{ display:none !important; }
.brand .dot{ display:none !important; }

/* === Section background via CSS var set by JS === */
:root{ --section-bg: #f7f7f7; }
body{ background: var(--section-bg) !important; }


.brand-banner{ position:sticky; top:0; z-index:60 }

/* Solid section background based on logo palette */
body{ background:var(--section-bg,#f7f7f7)!important; }

body{background:var(--section-bg)!important;}

/* === FB button style & hero responsive sizing === */
.social{ display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px; background:#1877F2;
  color:#fff; text-decoration:none; box-shadow:0 6px 18px rgba(24,119,242,.35); }
.social i{ font-size:18px; }
.social:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.social:active{ transform:translateY(0); }

/* Swiper hero sizing */
.hero-swiper{ height:60vh; }
.hero-swiper .swiper-slide{ height:100%; }
.hero-swiper .swiper-slide img{ width:100%; height:100%; object-fit:cover; filter:brightness(.82); }

@media (max-width: 640px){
  .hero-swiper{ height:38vh; } /* MÁS COMPACTO EN MÓVIL */
}

/* Optional: reduce top gradient banner padding on mobile if exists */
@media (max-width: 640px){
  .brand-banner .inner{ padding-top:.6rem; padding-bottom:.6rem; }
}


/* --- Fix: Social links always clickable above overlays --- */
.hero .flex.gap-4.mt-6, .flex.gap-4.mt-6 { position: relative; z-index: 50; pointer-events: auto; }
.social{ cursor:pointer }
/* Ensure hero-swiper is below overlay text by default */
.hero-swiper{ position: relative; z-index: 1; }


/* === Facebook button visible and blue === */
.social{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px;
  background:#1877F2; color:#fff; box-shadow:0 8px 20px rgba(24,119,242,.35);
}
.social i{ font-size:20px; }
.fb-link-text{ color:#ffffff; font-weight:800; text-shadow:0 1px 8px rgba(0,0,0,.35); font-size:1.05rem; }

/* === Mobile submenu removal + back button only === */
@media (max-width: 640px){
  /* Oculta la barra de submenús superior en móvil */
  .header-bar, nav[aria-label="secondary"], .submenu, .submenu-bar { display:none !important; }
  /* Línea delgada arriba */
  body::before{
    content:""; position:fixed; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,#1877F2,#22c55e,#06b6d4); z-index:80;
  }
  /* Botón regresar flotante */
  .btn-back{
    position:fixed; top:10px; left:10px; z-index:90;
    background:#111827; color:#fff; border:0; border-radius:999px;
    padding:.55rem .9rem; font-weight:700; box-shadow:0 10px 24px rgba(0,0,0,.25);
  }
  .btn-back:active{ transform:translateY(1px); }
  /* Ventana de submenús más chica (si se usa overlay) */
  #mobileMenu{
    max-height:54vh; border-top:3px solid rgba(255,255,255,.2);
    margin-top:6px;
  }
}

/* Hero improvements for visibility */
.hero-swiper{ height:60vh; }
@media (max-width:640px){ .hero-swiper{ height:38vh; } }
.hero-swiper .swiper-slide img{ filter:brightness(.9) contrast(1.02); }


/* Hide back button on Inicio (carousel page) */
body.page-inicio .btn-back{ display:none !important; }


/* === Mostrar botón Regresar solo en móvil y NO en Inicio === */
.btn-back{ display:none; } /* oculto por defecto (desktop) */
@media (max-width:640px){
  .btn-back{ display:inline-flex; align-items:center; gap:.35rem; }
  body.page-inicio .btn-back{ display:none !important; } /* no mostrar en Inicio */
}