/* EyC Academia y Spa — refinements (left-align home, dropdowns, fade transitions) */

/* ====== Smoother global transitions ====== */
.reveal{
  opacity:0;
  transform:translateY(36px);
  filter:blur(8px);
  transition:
    opacity 1.4s cubic-bezier(.22,.61,.36,1),
    transform 1.4s cubic-bezier(.22,.61,.36,1),
    filter 1.4s cubic-bezier(.22,.61,.36,1);
}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal[data-delay="1"]{transition-delay:.14s}
.reveal[data-delay="2"]{transition-delay:.26s}
.reveal[data-delay="3"]{transition-delay:.38s}
.reveal[data-delay="4"]{transition-delay:.5s}
.reveal[data-delay="5"]{transition-delay:.62s}
.reveal[data-delay="6"]{transition-delay:.74s}

/* Hero load — softer, more cinematic */
.hero-enter{
  opacity:0;
  transform:translateY(28px);
  filter:blur(10px);
  animation:heroIn 1.4s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes heroIn{to{opacity:1;transform:none;filter:none}}

/* ====== Home page: left-aligned nav + hero ====== */
body[data-page="home"] .site-header .container.nav{
  max-width:none;
  padding-left:48px;
  padding-right:36px;
  justify-content:flex-start;
  gap:48px;
}
body[data-page="home"] .site-header .container.nav .nav-cta{
  margin-left:auto;
}
@media (max-width:960px){
  body[data-page="home"] .site-header .container.nav{padding-left:28px;padding-right:20px;gap:18px}
}

/* Hero left-aligned container */
.hero-video.left .container{
  max-width:none;
  width:100%;
  margin-left:0;
  margin-right:0;
  padding-left:48px;
  padding-right:48px;
}
@media (max-width:960px){
  .hero-video.left .container{padding-left:28px;padding-right:28px}
}
.hero-video.left .hero-body{max-width:760px;margin:0}
.hero-video.left h1{text-align:left}
.hero-video.left .lede{text-align:left;max-width:54ch}
.hero-video.left .hero-ctas{justify-content:flex-start}
.hero-video.left .trust-row{justify-content:flex-start}
.hero-video.left .hero-logo-mark{margin-left:0}

/* Scroll cue moves to the left */
.hero-video.left .hero-scroll{
  left:48px;
  transform:none;
  flex-direction:row;
  align-items:center;
  gap:14px;
}
.hero-video.left .hero-scroll .line{
  width:48px;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0.6), transparent);
}
@media (max-width:960px){.hero-video.left .hero-scroll{left:28px;bottom:24px}}
@keyframes bobble-x{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.hero-video.left .hero-scroll{animation:bobble-x 2.8s ease-in-out infinite}

/* Side card stays right but feels balanced */
.hero-video.left .hero-side-card{right:48px;bottom:120px}

/* ====== Fade transition between hero and next section (replaces marquee) ====== */
.section-fade{
  position:relative;
  height:160px;
  margin-top:-100px;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(
    180deg,
    rgba(28,58,59,0) 0%,
    rgba(28,58,59,0.55) 30%,
    rgba(28,58,59,0.85) 60%,
    var(--paper) 100%
  );
}
.section-fade::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:40%;
  background:linear-gradient(180deg, transparent 0%, var(--paper) 100%);
  filter:blur(20px);
}

/* Smoother section transitions — soft borders */
.block + .block,
.block + .carreras-block,
.carreras-block + .block,
.testi-block + .cta-block,
.values-block + .testi-block{
  position:relative;
}

/* Fade-in scrim on dark sections from above */
.carreras-block::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:120px;
  background:linear-gradient(180deg, var(--paper) 0%, transparent 100%);
  opacity:0.06;
  pointer-events:none;
}

/* ====== Dropdown nav menus ====== */
.nav-links .nav-item{position:relative;padding:0}
.nav-links .nav-trigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:inherit;
  color:var(--ink-soft);
  cursor:pointer;
  background:none;
  border:0;
  padding:0;
  position:relative;
  font-size:13.5px;
  font-weight:500;
  transition:color .25s ease;
}
.nav-links .nav-trigger::after{
  content:"";
  position:absolute;
  left:0;right:18px;
  bottom:-6px;
  height:1px;
  background:var(--coral-500);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
.nav-links .nav-trigger:hover::after,
.nav-links .nav-item:hover .nav-trigger::after,
.nav-links .nav-trigger.active::after{transform:scaleX(1)}
.nav-links .nav-trigger .chev{
  width:12px;height:12px;
  transition:transform .35s cubic-bezier(.4,.2,.2,1);
  opacity:0.7;
}
.nav-links .nav-item.open .nav-trigger .chev,
.nav-links .nav-item:hover .nav-trigger .chev{transform:rotate(180deg);opacity:1}
.nav-links .nav-item:hover .nav-trigger,
.nav-links .nav-item.open .nav-trigger{color:var(--ink)}

.nav-dropdown{
  position:absolute;
  top:calc(100% + 18px);
  left:-20px;
  min-width:320px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px;
  box-shadow:0 30px 60px -20px rgba(28,58,59,0.18), 0 8px 20px -6px rgba(28,58,59,0.08);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(0.98);
  transform-origin:top left;
  transition:
    opacity .35s cubic-bezier(.22,.61,.36,1),
    transform .35s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .35s;
  z-index:60;
}
.nav-links .nav-item:hover .nav-dropdown,
.nav-links .nav-item.open .nav-dropdown,
.nav-links .nav-item:focus-within .nav-dropdown{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:
    opacity .4s cubic-bezier(.22,.61,.36,1),
    transform .4s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s;
}

/* Invisible bridge so the menu doesn't close when you reach for it */
.nav-links .nav-item::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;right:0;
  height:18px;
}

.dd-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:14px;
  transition:background .25s ease, transform .25s ease;
  color:var(--ink) !important;
  font-size:14px;
  font-weight:500;
}
.dd-item::after{display:none !important}
.dd-item:hover{
  background:var(--paper-tint);
  transform:translateX(4px);
}
.dd-item .dd-thumb{
  flex-shrink:0;
  width:42px;height:42px;
  border-radius:12px;
  overflow:hidden;
  background:var(--teal-100);
  position:relative;
}
.dd-item .dd-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.dd-item:hover .dd-thumb img{transform:scale(1.08)}
.dd-item .dd-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.dd-item .dd-text .t{font-size:14px;font-weight:600;color:var(--ink);line-height:1.2}
.dd-item .dd-text .s{font-size:11.5px;color:var(--ink-mute);font-weight:500;line-height:1.3}

.dd-footer{
  padding:10px 14px 6px;
  border-top:1px solid var(--line);
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12.5px;
}
.dd-footer a{
  color:var(--coral-700) !important;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dd-footer a::after{display:none !important}
.dd-footer a .arrow{width:12px;height:12px;transition:transform .3s ease}
.dd-footer a:hover .arrow{transform:translate(2px,-2px)}

/* ====== Refined hover for course cards (more elegant) ====== */
.course-card{
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    box-shadow .55s cubic-bezier(.22,.61,.36,1),
    border-color .35s ease;
}
.course-card:hover{transform:translateY(-8px);border-color:rgba(74,171,176,0.35)}
.course-card .media img{transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.course-card:hover .media img{transform:scale(1.08)}

/* Soft gleam on hero CTA */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:60%;
  left:-80%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg);
  transition:left .8s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.btn-primary:hover::after{left:120%}

/* ====== Cursos page: breathing room before footer ====== */
body[data-page="cursos"] .cta-block{padding-bottom:120px !important}

/* ====== Header tweaks: hide CTA button on home for tighter left feel — KEEP visible actually ====== */
/* (No change — keep CTA on right) */

/* ====== Smooth scroll behaviour ====== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .nav-dropdown{transition:none}
}

/* ====== Marquee removal — when hidden, give next section a softer top ====== */
.marquee.hidden{display:none}

/* ====== Section-enter (scroll-triggered fade for whole sections) ====== */
.sec-enter{
  opacity:0;
  transform:translateY(20px);
  filter:blur(4px);
  transition:
    opacity 1.6s cubic-bezier(.22,.61,.36,1),
    transform 1.6s cubic-bezier(.22,.61,.36,1),
    filter 1.6s cubic-bezier(.22,.61,.36,1);
}
.sec-enter.in{opacity:1;transform:none;filter:none}

/* Subtle parallax helper */
.parallax-slow{will-change:transform}

/* Decorative orb that drifts on scroll */
.drift-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  opacity:0.4;
  z-index:0;
}
.drift-orb.teal{background:radial-gradient(circle, var(--teal-400), transparent 70%);width:380px;height:380px}
.drift-orb.coral{background:radial-gradient(circle, var(--coral-500), transparent 70%);width:300px;height:300px;opacity:0.25}

@media (prefers-reduced-motion: reduce){
  .sec-enter,.reveal,.hero-enter{opacity:1 !important;transform:none !important;filter:none !important}
}