:root{
  --petroleo:#021a1e;
  --arena:#E6DCC3;
  --blanco:#FFFFFF;
  --petroleo-osc:#1d808a;
  --petroleo-claro:#0E4A52;
  --arena-osc:#d6cba9;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
  line-height:1.5;
  color:var(--blanco);
  background:linear-gradient(180deg, var(--petroleo) 0%, var(--petroleo-osc) 45%, var(--petroleo) 100%);
  scroll-behavior:smooth;
}
a{color:inherit;text-decoration:none}

.container{max-width:1200px;margin:0 auto;padding:0 1rem}
:root{ --logo-size: clamp(60px, 10vw, 140px); }

.logo{
  width: var(--logo-size);
  height: var(--logo-size);
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:0 0 10px rgba(0,0,0,.2);
}

.logo img{
  width:130%;
  height:123%;
  object-fit:cover;
  border-radius:50%;
}


header{
  position:sticky;top:0;z-index:50;
  background:rgba(112, 144, 148, 0.9);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(230,220,195,.2);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.75rem}

.brand h1{font-size:1.05rem;margin:0;font-weight:700;letter-spacing:.3px}
.tag{font-size:.8rem;opacity:.9;margin-top:-2px}
.links{display:flex;gap:1rem;align-items:center}
.links a{padding:.5rem .75rem;border-radius:999px;opacity:.95}
.links a:hover,.links a.active{background:rgba(230,220,195,.12)}
.btn{display:inline-block;padding:.65rem 1rem;border-radius:999px;font-weight:600;border:1px solid rgba(230,220,195,.6)}
.btn--arena{background:var(--arena);color:var(--petroleo);border-color:transparent}
.btn--arena:hover{filter:brightness(.95)}
.hamb{display:none;background:transparent;border:0;color:var(--blanco)}
.mobile-menu{display:none}

.links .has-sub{
  position:relative;
}
.links .sub-trigger{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem .75rem;
  border-radius:999px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.links .sub-trigger span{
  font-size:.75em;
}
.links .has-sub.open .sub-trigger,
.links .sub-trigger:hover,
.links .sub-trigger:focus-visible{
  background:rgba(230,220,195,.12);
}
.links .sub{
  list-style:none;
  margin:0;
  padding:.35rem 0;
  position:absolute;
  top:calc(100% + .35rem);
  left:0;
  min-width:180px;
  background:rgba(2,26,30,.95);
  border:1px solid rgba(230,220,195,.2);
  border-radius:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.2);
  z-index:200;
  display:none;
}
.links .sub li{margin:0}
.links .sub a{
  display:block;
  padding:.55rem 1rem;
  border-radius:0;
  opacity:1;
}
.links .sub a:hover,
.links .sub a.is-active{
  background:rgba(230,220,195,.12);
}
.links .has-sub.open .sub{
  display:block;
}

/* Submenú móvil */
.mobile-menu .m-sub-toggle{
  width:100%;
  text-align:left;
  background:transparent;
  color:inherit;
  border:1px solid rgba(230,220,195,.35);
  border-radius:10px;
  padding:.7rem .9rem;
  font:inherit;
  cursor:pointer;
}
.mobile-menu .m-sub-toggle::after{
  content:"▾";
  float:right;
}
.mobile-menu .m-sub.open > .m-sub-toggle::after{
  content:"▴";
}
.mobile-menu .m-sub-panel{
  display:grid;
  gap:.35rem;
  margin-top:0;
  padding-left:0;
  border-left:0;
  overflow:hidden;
  max-height:0;
  transition:max-height .28s ease, padding .28s ease, margin .28s ease;
}
.mobile-menu .m-sub.open .m-sub-panel{
  margin-top:.35rem;
  padding-left:.75rem;
  border-left:2px solid rgba(230,220,195,.35);
}
.mobile-menu .m-sub-panel a{
  border-top:0;
  padding:.75rem 1rem;
}
.mobile-menu .m-sub-panel a.is-active{
  background:rgba(230,220,195,.15);
  border-radius:8px;
}

/* Hero slider */
.hero{position:relative;overflow:hidden}
.slider{position:relative}
.slides{position:relative;height:70vh;min-height:420px}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background-size:cover;background-position:center;display:grid;align-items:center}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45))}
.slide{background-image:var(--bg)}
.slide .slide-content{position:relative}
.slide.is-active{opacity:1;z-index:1}
.ctrl{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.35);color:#fff;width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
.ctrl:hover{background:rgba(0,0,0,.55)}
.prev{left:12px}.next{right:12px}
.dots{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:.35rem}
.dots button{width:10px;height:10px;border-radius:50%;border:1px solid #fff;background:transparent;opacity:.7}
.dots button.is-active{background:#fff;opacity:1}

/* Sections */
.section-light{background:var(--arena);color:var(--petroleo)}
.section-dark{background:transparent;color:var(--blanco)}
.section{padding:3rem 0}
.section h3{font-size:1.6rem;margin:0 0 1rem 0}
.sub{opacity:.9;margin-top:-.5rem}
.card{background:linear-gradient(180deg, rgba(230,220,195,.12), rgba(230,220,195,.06));border:1px solid rgba(230,220,195,.25);border-radius:18px;padding:1rem;box-shadow:0 8px 24px rgba(0,0,0,.15);display:block}

.grid{display:grid;gap:1.2rem}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.program,
.dest-card{
  transition:transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
  position:relative;
}
.program:hover,
.program:focus-visible,
.dest-card:hover,
.dest-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(0,0,0,.22);
  outline:none;
}
.chip{display:inline-block;font-size:.75rem;padding:.2rem .5rem;border-radius:999px;border:1px solid currentColor;opacity:.8}

.section-dark .dest-card:hover,
.section-dark .dest-card:focus-visible{
  box-shadow:0 18px 32px rgba(0,0,0,.35);
}

.cta-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:600;
  margin-top:.65rem;
  color:inherit;
}
.section-light .cta-link{color:var(--petroleo);}
.section-dark .cta-link{color:var(--arena);}
.cta-link::after{
  content:"›";
  font-size:1.1em;
  transition:transform .2s ease;
}
.dest-card:hover .cta-link::after,
.dest-card:focus-visible .cta-link::after,
.program:hover .cta-link::after,
.program:focus-visible .cta-link::after{
  transform:translateX(4px);
}

.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.filters .chip{cursor:pointer}
.filters .chip.is-active{background:rgba(0,0,0,.08)}

.dest-slider{
  position:relative;
  margin-top:1.5rem;
}
.dest-track{
  display:flex;
  gap:1.2rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  overscroll-behavior-inline:contain;
}
.dest-track::-webkit-scrollbar{display:none}
.dest-card{
  position:relative;
  flex:0 0 280px;
  min-width:280px;
  aspect-ratio:4/5;
  border-radius:22px;
  background:var(--bg, linear-gradient(135deg, rgba(2,26,30,.9), rgba(29,128,138,.85)));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  scroll-snap-align:start;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.dest-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.7) 100%);
  transition:opacity .25s ease;
}
.dest-card:hover::before,
.dest-card:focus-visible::before{
  opacity:.88;
}
.dest-content{
  position:relative;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.dest-card h4{
  margin:0;
  font-size:1.25rem;
  font-weight:600;
}
.dest-card p{
  margin:0;
  font-size:.95rem;
  line-height:1.5;
  color:rgba(255,255,255,.88);
}
.dest-card .cta-link{
  color:var(--arena);
  font-weight:600;
}
.dest-ctrl{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.45);
  border:0;
  color:#fff;
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .2s ease, opacity .2s ease;
}
.dest-ctrl:hover{background:rgba(0,0,0,.65)}
.dest-prev{left:-18px}
.dest-next{right:-18px}
.dest-ctrl:disabled{
  opacity:.35;
  pointer-events:none;
}

.accordion .item{border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff;color:#0b2a2e;margin-bottom:.6rem;overflow:hidden}
.accordion .head{width:100%;text-align:left;padding:1rem 1rem 1rem 2.6rem;background:#fff;border:0;position:relative;font-weight:700;cursor:pointer}
.accordion .head::before{content:"+";position:absolute;left:1rem;top:1rem}
.accordion .head[aria-expanded="true"]::before{content:"–"}
.accordion .body{display:none;padding:0 1rem 1rem 1rem}
.accordion .head[aria-expanded="true"] + .body{display:block}

.carousel{position:relative;overflow:hidden}
.carousel .track{display:flex;gap:1rem;transition:transform .4s ease;padding-bottom:.5rem}
.carousel figure{min-width:320px;flex:0 0 320px;margin:0}
.carousel .ctrl{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.12);color:#fff;width:38px;height:38px;border-radius:50%}
.carousel .prev{left:6px}.carousel .next{right:6px}

form{display:grid;gap:.75rem}
input,select,textarea{width:100%;padding:.8rem .9rem;border-radius:10px;border:1px solid rgba(230,220,195,.6);background:rgba(255,255,255,.92);color:#0b2a2e}
textarea{min-height:120px}
label{font-weight:600;margin-bottom:.25rem;display:block}
footer{border-top:1px solid rgba(230,220,195,.25);padding:2rem 0;color:var(--blanco)}
.foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}

.fab{position:fixed;right:14px;z-index:60;padding:.75rem .9rem;border-radius:999px;background:var(--petroleo);color:var(--blanco);border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.fab-cta{bottom:36px}
.fab-wa{
  position:fixed; bottom:85px; right:20px;
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; /* el <i> hereda blanco */
  font-size:28px; box-shadow:0 4px 6px rgba(0,0,0,.3);
}

.modal{position:fixed;inset:0;display:none;z-index:70}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-dialog{position:relative;max-width:560px;margin:10vh auto;background:#fff;color:#0b2a2e;border-radius:16px;padding:1.25rem}
.modal-close{position:absolute;top:.35rem;right:.6rem;border:0;background:transparent;font-size:1.4rem;cursor:pointer}

.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:24px;background:#0b2a2e;color:#fff;padding:.65rem 1rem;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:80}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .4s ease, transform .4s ease}
.reveal.visible{opacity:1;transform:none}


/* Responsive */
/* Estado base en desktop (muestra el menú horizontal y oculta el móvil) */
.links{ display:flex; gap:1rem; }

/* Responsive */
@media (max-width: 900px){
  .slides{height:56vh}
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .grid.cols-4{grid-template-columns:1fr 1fr}

  /* Oculta el menú horizontal y muestra el botón */
  .links{display:none}

  .hamb{
    display:inline-flex;
    align-items:center;justify-content:center;
    width:42px;height:42px;
    border:1px solid rgba(230,220,195,.5);
    border-radius:10px
  }

  /* Menú móvil (cerrado por defecto) */
  .mobile-menu{
    display:block;                /* mantiene el nodo en flujo para transiciones */
    position:fixed;
    top:64px; left:0; right:0;
    background:rgba(14,74,82,.97);
    border-top:1px solid rgba(230,220,195,.2);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
    z-index: 999;
  }

  /* Abierto */
  .mobile-menu.open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu a{
    display:block;
    padding:.9rem 1rem;
    border-top:1px solid rgba(230,220,195,.18)
  }

  .dest-slider{margin-top:1rem}
  .dest-card{flex:0 0 68vw;min-width:68vw}
  .dest-prev{left:6px}
  .dest-next{right:6px}

  /* Evitar scroll del body cuando el menú móvil está abierto */
  .no-scroll{ overflow:hidden; }
}

@media (max-width:600px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .dest-card{flex:0 0 82vw;min-width:82vw}
}
body {
  font-family: 'Poppins', sans-serif;
}
h1, h2, h3 {
  font-weight: 600; /* semi-bold */
}
p, span, a {
  font-weight: 400; /* normal */
}