/* EyC Academia y Spa — responsive (tablet & mobile) + light nav over dark hero */

/* ===========================================================
   1. Light nav text when sitting over a dark hero
   =========================================================== */
body.dark-over-hero .site-header:not(.scrolled){
  background:transparent;
}
body.dark-over-hero .site-header:not(.scrolled) .nav-links > a,
body.dark-over-hero .site-header:not(.scrolled) .nav-links .nav-trigger{
  color:rgba(255,255,255,0.94);
}
body.dark-over-hero .site-header:not(.scrolled) .nav-links > a:hover,
body.dark-over-hero .site-header:not(.scrolled) .nav-links .nav-trigger:hover{
  color:#fff;
}
body.dark-over-hero .site-header:not(.scrolled) .nav-links > a::after,
body.dark-over-hero .site-header:not(.scrolled) .nav-links .nav-trigger::after{
  background:#fff;
}
body.dark-over-hero .site-header:not(.scrolled) .brand-name{color:#fff}
body.dark-over-hero .site-header:not(.scrolled) .brand-name small{color:rgba(255,255,255,0.72)}
body.dark-over-hero .site-header:not(.scrolled) .mobile-toggle{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.35);
  color:#fff;
  backdrop-filter:blur(8px);
}
/* Once scrolled the header gets its scrolled state which already restores dark text */

/* ===========================================================
   2. Tablet  (≤ 1024px)
   =========================================================== */
@media (max-width: 1024px){
  .container{padding:0 32px}
  .block{padding:88px 0}
  .section-head{margin-bottom:44px;gap:28px}
  h1{font-size:clamp(40px, 7vw, 72px)}
  h2{font-size:clamp(28px, 4.2vw, 48px)}

  /* Hero */
  .hero-video{padding:130px 0 90px;min-height:auto}
  .hero-video h1{font-size:clamp(44px, 8vw, 80px)}
  .hero-video .lede{font-size:17px}
  .hero-video.left .container{padding-left:32px;padding-right:32px}

  /* Home: nav left padding lighter on tablet */
  body[data-page="home"] .site-header .container.nav{padding-left:32px;padding-right:24px;gap:24px}

  /* Page-hero (interior pages) */
  .page-hero{padding:130px 0 64px}
  .page-hero.image{min-height:440px;padding:64px 0 48px}

  /* Course / carrera grids breathe better */
  .carrera-card .body{padding:28px 28px 32px}
  .carrera-card .body h3{font-size:32px}

  /* Course detail layout: aside drops below */
  .detail-grid{grid-template-columns:1fr;gap:24px}
  .sticky-card{position:static;top:auto}
  .panel{padding:36px 32px}

  /* CTA */
  .cta-inner{margin:0 32px}
  .cta-inner .text{padding:64px 40px}
  .cta-inner .visual{min-height:300px}

  /* Nav links font slightly smaller */
  .nav-links{gap:24px}
  .nav-links > a, .nav-links .nav-trigger{font-size:13px}

  /* Carreras stack */
  .carreras-grid{grid-template-columns:1fr;gap:24px}
}

/* ===========================================================
   3. Phone large + tablet portrait  (≤ 768px)
   =========================================================== */
@media (max-width: 768px){
  .container{padding:0 22px}
  .block{padding:64px 0}
  .section-head{margin-bottom:36px}

  /* Header */
  .site-header{padding:14px 0}
  .site-header.scrolled{padding:10px 0}
  .brand-mark{width:52px;height:52px}
  .brand-name{font-size:16px}
  .brand-name small{font-size:8.5px;letter-spacing:0.26em;margin-top:3px}
  .nav-cta .btn-sm{padding:8px 14px;font-size:12px}
  body[data-page="home"] .site-header .container.nav{padding-left:22px;padding-right:18px;gap:12px}

  /* Hero — tighter, taller content stack */
  .hero-video{padding:110px 0 110px;min-height:88vh;min-height:88dvh}
  .hero-video.left .container{padding-left:22px;padding-right:22px}
  .hero-video .hero-logo-mark{margin-bottom:20px}
  .hero-video .hero-logo-mark img{height:60px}
  .hero-video h1{font-size:clamp(38px, 11vw, 60px);line-height:1.02}
  .hero-video .lede{font-size:15.5px;line-height:1.55;margin-top:18px}
  .hero-video .hero-ctas{margin-top:28px;gap:10px}
  .hero-video .hero-ctas .btn{padding:13px 20px;font-size:13.5px}
  .hero-video .trust-row{margin-top:32px;gap:8px}
  .hero-video .trust-badge{padding:7px 12px;font-size:11px;letter-spacing:0.04em}
  .hero-video .hero-side-card{display:none}
  .hero-video.left .hero-scroll{display:none}

  /* Section fade smaller */
  .section-fade{height:120px;margin-top:-80px}

  /* Page-hero interior */
  .page-hero{padding:110px 0 56px}
  .page-hero .breadcrumb{font-size:12.5px;margin-bottom:16px}
  .page-hero h1{font-size:clamp(34px, 9vw, 56px)}
  .page-hero .lede{font-size:16px}
  .page-hero.image{min-height:380px;padding:64px 0 40px}
  .pill-otec{padding:8px 14px;font-size:11px}

  /* Marquee was removed; keep for safety */
  .marquee-track{font-size:18px;padding:14px 0;gap:32px}

  /* Course grid */
  .course-grid{gap:18px}
  .course-card .body{padding:22px 22px 24px;gap:10px}
  .course-card .body h3{font-size:22px}
  .course-card .body p{font-size:14px}
  .course-card .meta{padding-top:14px;font-size:12px}
  .filter-row{gap:6px;margin-bottom:24px}
  .filter-chip{padding:9px 16px;font-size:12.5px}

  /* Carrera */
  .carreras-grid{margin-top:36px;gap:20px}
  .carrera-card .body{padding:26px 24px 28px}
  .carrera-card .body h3{font-size:28px;margin-bottom:10px}
  .carrera-card .body p{font-size:14px}
  .carrera-card .stats{gap:16px;padding-top:18px}
  .carrera-card .stats .v{font-size:20px}
  .carrera-card .stats .k{font-size:10px}
  .carrera-card .badge{font-size:10px;padding:6px 12px;top:14px;left:14px}

  /* Values */
  .values-grid{margin-top:36px}
  .value-item{padding:28px 0 28px 0}
  .value-item h3{font-size:22px}

  /* Testimonials */
  .testi-grid{margin-top:36px;gap:16px}
  .testi-card{padding:26px 22px 24px}
  .testi-card .quote{font-size:19px}

  /* CTA */
  .cta-block{padding:0}
  .cta-inner{margin:0 22px;border-radius:24px}
  .cta-inner .text{padding:48px 28px}
  .cta-inner h2{font-size:30px;line-height:1.1}
  .cta-inner p{font-size:15px}
  .cta-inner .visual{min-height:220px}
  body[data-page="cursos"] .cta-block{padding-bottom:80px !important}

  /* Course detail */
  .panel{padding:30px 24px}
  .panel h2{font-size:24px}
  .learnings-grid{grid-template-columns:1fr;gap:12px;margin-top:22px}
  .sticky-card{padding:26px 22px}
  .sticky-card h3{font-size:20px;margin-bottom:18px}

  /* Carrera detail */
  .accordion summary{padding:18px 20px;font-size:14.5px;gap:12px}
  .accordion summary .mod-num{margin-right:8px;font-size:13px}
  .accordion .acc-body{padding:0 20px 22px;font-size:14px}
  .benefit-card{padding:22px 18px}
  .benefit-card .ico{width:46px;height:46px;margin-bottom:12px}
  .benefit-card h4{font-size:14px}

  /* Info cards */
  .info-card{padding:30px 26px}
  .info-card h3{font-size:22px}
  .info-card p{font-size:14.5px}
  .info-card .ico-lg{width:48px;height:48px;border-radius:14px;margin-bottom:18px}

  /* History */
  .history-stat-stripe{gap:14px;margin-top:28px;padding-top:28px}
  .history-stat-stripe .stat .v{font-size:30px}
  .history-stat-stripe .stat .k{font-size:10px;margin-top:6px}
  /* Acreditaciones */
  .acred-pill{padding:14px 18px;flex:1 1 100%}
  .acred-pill .t{font-size:13px}
  .acred-pill .s{font-size:11.5px}

  /* Contact form */
  .contact-info-card{padding:28px 24px}
  .contact-info-card h2{font-size:22px;margin-bottom:20px}
  .form-field input,.form-field select,.form-field textarea{padding:13px 14px;font-size:14.5px}
  .form-field label{font-size:12.5px}

  /* Footer */
  .footer{padding:64px 0 28px}
  .footer .grid{gap:36px}
  .footer h4{font-size:11px;margin-bottom:14px}
  .footer .legal{margin-top:40px;font-size:11.5px;flex-direction:column;text-align:left;align-items:flex-start}

  /* Mobile menu */
  .mobile-menu{padding:20px 22px}
  .mobile-menu-top{margin-bottom:32px}
  .mobile-menu nav a{font-size:28px}
}

/* ===========================================================
   4. Small phone  (≤ 480px)
   =========================================================== */
@media (max-width: 480px){
  .container{padding:0 18px}
  .block{padding:56px 0}
  h1{letter-spacing:-0.02em}
  h2{letter-spacing:-0.01em}

  .site-header{padding:12px 0}
  body[data-page="home"] .site-header .container.nav{padding-left:18px;padding-right:14px}
  .brand{gap:9px}
  .brand-name{font-size:15px}
  .brand-name small{font-size:8px;letter-spacing:0.22em}
  .nav-cta{gap:8px}
  .nav-cta .btn-sm{padding:8px 12px;font-size:11.5px}
  .nav-cta .btn-sm .arrow{display:none}
  .mobile-toggle{width:38px;height:38px}

  .hero-video{padding:96px 0 88px;min-height:94vh;min-height:94dvh}
  .hero-video.left .container{padding-left:18px;padding-right:18px}
  .hero-video .hero-body{max-width:none}
  .hero-video .hero-logo-mark img{height:52px}
  .hero-video h1{font-size:42px;line-height:1.04}
  .hero-video .lede{font-size:14.5px}
  .hero-video .hero-ctas .btn{padding:12px 18px;font-size:13px;flex:1 1 auto;justify-content:center}
  .hero-video .trust-badge{padding:6px 11px;font-size:10.5px}

  .page-hero{padding:96px 0 48px}
  .page-hero h1{font-size:36px}

  .filter-chip{padding:8px 14px;font-size:12px}
  .filter-chip .count{font-size:10.5px}

  .cta-inner{margin:0 18px;border-radius:22px}
  .cta-inner .text{padding:40px 22px}
  .cta-inner h2{font-size:26px}
  .cta-inner .ctas{gap:8px}
  .cta-inner .ctas .btn{padding:12px 18px;font-size:13px}

  .panel{padding:28px 20px}
  .panel h2{font-size:22px}

  /* Eyebrow gets a touch smaller */
  .eyebrow{font-size:10.5px;letter-spacing:0.2em}

  /* Footer */
  .footer{padding:48px 0 24px}

  /* Mobile menu */
  .mobile-menu nav a{font-size:24px}
}

/* ===========================================================
   5. Tiny phone  (≤ 360px)
   =========================================================== */
@media (max-width: 360px){
  .hero-video h1{font-size:38px}
  .nav-cta .btn-sm{padding:7px 11px;font-size:11px}
  .brand-name{font-size:14px}
  .brand-name small{font-size:7.5px}
  .cta-inner .ctas .btn{width:100%;justify-content:center}
}

/* ===========================================================
   6. Landscape phones — keep hero scrollable
   =========================================================== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 540px){
  .hero-video{min-height:auto;padding:100px 0 70px}
  .hero-video h1{font-size:40px}
}

/* ===========================================================
   7. Course-card images shorter on mobile to avoid tall cards
   =========================================================== */
@media (max-width: 600px){
  .course-card .media{aspect-ratio:16/10}
  .carrera-card .media{aspect-ratio:16/10}
}

/* ===========================================================
   8. Map: smaller on mobile but visible
   =========================================================== */
@media (max-width: 768px){
  .map-wrap{aspect-ratio:1/1;margin-top:20px}
}

/* ===========================================================
   9. Hide drift orbs on mobile (perf)
   =========================================================== */
@media (max-width: 768px){
  .drift-orb,.lotus-arc{display:none}
}