/* ==========================================================
   CAPA VISUAL PREMIUM — IEB Villa Celestina
   No cambia la estructura: agrega profundidad, ritmo y microinteracciones.
========================================================== */
:root{
  --glow:rgba(224,114,18,.28);
  --glow-strong:rgba(224,114,18,.48);
  --glass:rgba(255,255,255,.045);
}

html{scroll-behavior:smooth;scroll-padding-top:92px}
body{overflow-x:hidden;background:
  radial-gradient(circle at 8% 18%,rgba(224,114,18,.065),transparent 24%),
  radial-gradient(circle at 92% 58%,rgba(224,114,18,.045),transparent 25%),
  radial-gradient(circle at 50% 110%,rgba(110,58,42,.09),transparent 35%),
  var(--bg)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,black,transparent 82%)}

::selection{background:rgba(224,114,18,.28);color:#fff}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#0b0506}
::-webkit-scrollbar-thumb{background:linear-gradient(#4d1f11,#e07212);border-radius:999px;border:2px solid #0b0506}

.navbar{transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.navbar.is-scrolled{background:rgba(9,3,4,.96);border-bottom-color:rgba(224,114,18,.14);box-shadow:0 10px 35px rgba(0,0,0,.22)}
.brand img{filter:drop-shadow(0 0 14px rgba(224,114,18,.08));transition:transform .25s ease,filter .25s ease}
.brand:hover img{transform:rotate(-2deg) scale(1.04);filter:drop-shadow(0 0 18px rgba(224,114,18,.25))}
.nav a{position:relative;padding:7px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:2px;border-radius:99px;background:var(--primary);box-shadow:0 0 12px var(--glow);transition:right .22s ease}
.nav a:hover::after,.nav a.active::after{right:0}
.social a{transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.social a:hover{transform:translateY(-2px);border-color:rgba(224,114,18,.44);background:rgba(224,114,18,.06);box-shadow:0 10px 24px rgba(0,0,0,.18),0 0 18px rgba(224,114,18,.12)}
.menu-toggle{transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.menu-toggle:hover,.menu-toggle:focus-visible{border-color:rgba(224,114,18,.6);background:rgba(224,114,18,.05);box-shadow:0 0 0 4px rgba(224,114,18,.06)}
.menu-toggle span{transition:transform .24s ease,opacity .18s ease,background .2s ease}

.hero::after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(to bottom,transparent,rgba(11,5,6,.92));pointer-events:none;z-index:1}
.hero__content{filter:drop-shadow(0 18px 40px rgba(0,0,0,.22))}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(224,114,18,.16);border-radius:999px;background:rgba(224,114,18,.055);backdrop-filter:blur(10px)}
.hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 14px var(--glow-strong);animation:pulseDot 2.2s ease-in-out infinite}
.hero h1{max-width:900px;text-wrap:balance}
.hero__text{font-size:1.02rem}

.button,.text-link{position:relative;overflow:hidden;isolation:isolate;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
.button::before,.text-link::before{content:"";position:absolute;inset:-2px auto -2px -80px;width:56px;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transition:left .55s ease;z-index:-1}
.button:hover::before,.text-link:hover::before{left:120%}
.button--primary:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(224,114,18,.22)}
.button--outline:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.18),0 0 18px rgba(224,114,18,.09);border-color:rgba(224,114,18,.58)}

.panel,.content-card,.news-card,.video-card,.resource-card,.event-card,.value-card,.activity-card,.workshop-card{position:relative;overflow:hidden;box-shadow:0 18px 55px rgba(0,0,0,.11);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease}
.panel::before,.content-card::before,.news-card::before,.video-card::before,.resource-card::before,.event-card::before,.value-card::before,.activity-card::before,.workshop-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(224,114,18,.10),transparent 30%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.panel:hover,.content-card:hover,.news-card:hover,.video-card:hover,.resource-card:hover,.event-card:hover,.value-card:hover,.activity-card:hover,.workshop-card:hover{border-color:rgba(224,114,18,.2);box-shadow:0 24px 70px rgba(0,0,0,.16),0 0 30px rgba(224,114,18,.045)}
.panel:hover::before,.content-card:hover::before,.news-card:hover::before,.video-card:hover::before,.resource-card:hover::before,.event-card:hover::before,.value-card:hover::before,.activity-card:hover::before,.workshop-card:hover::before{opacity:1}

.about-media,.gallery-item,.lightbox img,.map{box-shadow:0 20px 70px rgba(0,0,0,.18)}
.about-media{position:relative}
.about-media::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(224,114,18,.12),transparent 36%,transparent 66%,rgba(224,114,18,.08));pointer-events:none}
.about-media img{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.about-media:hover img{transform:scale(1.035);filter:saturate(1.07)}

.section-heading h2,.about-copy h2{position:relative}
.section-heading h2::after,.about-copy h2::after{content:"";display:block;width:54px;height:3px;margin-top:13px;border-radius:99px;background:linear-gradient(90deg,var(--primary),transparent);box-shadow:0 0 16px rgba(224,114,18,.2)}
.eyebrow{filter:drop-shadow(0 0 12px rgba(224,114,18,.07))}

.gallery-item{position:relative}
.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,2,3,.45));opacity:.6;transition:opacity .3s ease}
.gallery-item:hover::after{opacity:.2}
.gallery-item img{filter:saturate(.94);transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.gallery-item:hover img{filter:saturate(1.08) brightness(1.04)}

.floating-whatsapp{animation:floatButton 3.2s ease-in-out infinite;box-shadow:0 14px 38px rgba(224,114,18,.26),0 0 0 0 rgba(224,114,18,.18)}
.floating-whatsapp:hover{animation:none;box-shadow:0 18px 46px rgba(224,114,18,.34),0 0 0 7px rgba(224,114,18,.06)}

.reveal{will-change:transform,opacity}

.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,#b9340b,#e07212,#f7cd8f);z-index:3000;box-shadow:0 0 14px rgba(224,114,18,.45);pointer-events:none}
.cursor-glow{position:fixed;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(224,114,18,.08),transparent 68%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);opacity:0;transition:opacity .25s ease;mix-blend-mode:screen}

@keyframes pulseDot{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.35);opacity:1}}
@keyframes floatButton{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

@media (pointer:coarse),(max-width:900px){
  .cursor-glow{display:none!important}
  .panel:hover,.content-card:hover,.news-card:hover,.video-card:hover,.resource-card:hover,.event-card:hover,.value-card:hover,.activity-card:hover,.workshop-card:hover{transform:none}
}

@media (max-width:940px){
  .nav{background:linear-gradient(180deg,rgba(8,2,3,.985),rgba(13,5,6,.985));box-shadow:inset 0 1px 0 rgba(224,114,18,.08)}
  .nav::before{content:"MENÚ";position:absolute;left:28px;top:76px;color:rgba(185,179,174,.58);font-size:.68rem;font-weight:800;letter-spacing:.18em}
  .nav a{padding:6px 2px}
  .nav a::after{bottom:0}
}

@media (max-width:680px){
  .hero__content{filter:drop-shadow(0 14px 30px rgba(0,0,0,.22))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* ==========================================================
   AJUSTES FINALES — NAVBAR + TALLERES
   Corrige alineación visual y evita que hover parezca otra
   opción activa. No cambia breakpoints ni dimensiones móviles.
========================================================== */

/* La barra queda ópticamente centrada y todos los enlaces comparten
   la misma caja vertical, evitando saltos de baseline. */
.navbar__inner{
  align-items:center;
}
.nav{
  align-items:center;
}
.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  line-height:1;
  padding:0 2px;
  letter-spacing:-.01em;
}

/* Solo la página actual se marca como "activa".
   El hover sigue siendo visible, pero ya no imita una segunda pestaña activa. */
.nav a:not(.active):hover{
  color:#f5f1ea;
}
.nav a:not(.active)::after{
  right:100%;
  opacity:0;
}
.nav a:not(.active):hover::after{
  right:58%;
  opacity:.45;
}
.nav a.active::after{
  right:0;
  opacity:1;
}

/* Línea de navegación más limpia y consistente. */
.nav a::after{
  bottom:4px;
  height:2px;
  border-radius:999px;
  box-shadow:0 0 10px rgba(224,114,18,.28);
}

.detail-card{
  isolation:isolate;
}
.detail-card > div{
  position:relative;
  z-index:1;
}
.detail-card--finanzas{
  background:
    radial-gradient(circle at 88% 15%, rgba(224,114,18,.10), transparent 34%),
    linear-gradient(145deg, rgba(27,15,17,.98), rgba(14,7,8,.98));
}
.detail-card--finanzas > img{
  filter:saturate(.9) brightness(.82);
}
.detail-card--finanzas:hover > img{
  filter:saturate(1.04) brightness(.92);
  transform:scale(1.035);
}
.detail-card--finanzas h2{
  text-wrap:balance;
}
.detail-card--finanzas .detail-card__date{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.detail-card--finanzas .detail-card__date::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 12px rgba(224,114,18,.5);
}

/* En anchos amplios, los tres talleres tienen una composición más
   equilibrada sin alterar el orden HTML. */
@media (min-width:1180px){
  .cards-page-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
  }
  .detail-card{
    grid-template-columns:1fr;
    align-content:start;
  }
  .detail-card > img{
    height:230px;
    min-height:230px;
  }
  .detail-card > div{
    min-height:225px;
    padding:24px;
  }
}

/* En tablet vuelve al layout original de dos columnas. */
@media (min-width:681px) and (max-width:1179px){
  .cards-page-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* En móvil: una sola columna, sin comprimir tipografías ni botones. */
@media (max-width:680px){
  .cards-page-grid{
    grid-template-columns:1fr;
  }
  .detail-card > img{
    min-height:220px;
    height:220px;
  }
  .detail-card > div{
    padding:22px;
  }
  .nav a{
    min-height:42px;
    justify-content:flex-start;
    padding:0 2px;
  }
  .nav a::after{
    bottom:0;
  }
}

/* Evita que un doble estilo de estado del navbar produzca dos
   marcadores verdes visibles al mismo tiempo. */
.navbar.is-scrolled .nav a.active{
  color:var(--primary);
}


/* FIX: subrayado del menú perfectamente centrado */
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav a::after {
  left: 50%;
  right: auto;
  width: 0;
  transform: translateX(-50%);
  transition: width .22s ease, opacity .22s ease;
}
.nav a:hover::after,
.nav a.active::after {
  width: 100%;
  right: auto;
}