/* Use core variables from components/core/base.css for consistent palette */

/* fallback values (will be overridden by base.css when loaded) */
:root{
  --max-width:1200px;
}

*{box-sizing:border-box}
body{margin:0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;color:#222}

/* Desktop-only: ocultar en pantallas pequeñas para no afectar versión mobile */
@media (max-width:1023px){
  .desktop-hero{display:none !important}
}

/* Hide mobile hero on desktop screens */
@media (min-width:1024px){
  .hero{display:none !important}
}

.desktop-hero{position:relative;width:100%;overflow:hidden;min-height:720px}

/* Force-enable desktop hero and nav (override mobile !important rule in base.css) */
@media (min-width:1024px){
  .desktop-hero, .desktop-hero__nav { display: block !important; }
}

/* Desktop: show sesiones videos horizontally (three across) without changing mobile */
@media (min-width:1024px) {
  .sesiones__carousel .carousel__viewport { overflow: visible; height: auto; }
  .sesiones__carousel .carousel__track { gap: 18px; }
  .sesiones__carousel .carousel__slide { flex: 0 0 calc(33.333% - 12px); padding: 0; }
  .sesiones__carousel .video-card video { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; }
  /* Hide prev/next buttons on desktop (not needed in horizontal layout) */
  .sesiones__carousel .carousel__btn--prev,
  .sesiones__carousel .carousel__btn--next,
  .sesiones__carousel .carousel__btn { display: none !important; }
}

/* Navbar fija traslúcida - fondo sutil y enlaces centrados */
.desktop-hero__nav{position:fixed;top:18px;left:0;right:0;z-index:60;padding:0 24px;transition:background 220ms,box-shadow 220ms;display:block}
.desktop-hero__nav .nav-inner{width:100%;max-width:var(--max-width);margin:0 auto;position:relative;display:block;height:56px}
.logo{position:absolute;left:28px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--white);font-size:20px;letter-spacing:0.6px}

/* Logo typography - refined for a more sophisticated look */
.logo{position:absolute;left:28px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:baseline;gap:10px;font-family:var(--ff-serif);font-weight:400;color:var(--white);font-size:22px;letter-spacing:0.6px}
.logo-mark{font-family:var(--ff-serif);font-size:inherit;font-weight:600;color:var(--gold);letter-spacing:0.4px;line-height:1}

.desktop-hero__nav{background: rgba(6,6,6,0.18);backdrop-filter: blur(8px);border-radius:12px;box-shadow: none}
.desktop-hero__nav.scrolled{background: rgba(6,6,6,0.26);box-shadow: 0 10px 30px rgba(30,30,30,0.12)}

.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--white);text-decoration:none;font-size:15px;padding:8px 6px;opacity:0.95;text-align:center;position:relative}
.nav-links a.active::after{content:"";display:block;width:42px;height:3px;background:var(--gold);position:absolute;left:50%;transform:translateX(-50%);bottom:-10px;border-radius:2px}

/* Ensure links are visually centered in the nav and easy to tap */
.nav-links a:hover{opacity:1}

/* Hero background */
.desktop-hero__bg{position:absolute;inset:0;background-image:url('../assets/hero-fondo-web.png');background-size:cover;background-position:center right;background-repeat:no-repeat;height:100%;z-index:1}

.desktop-hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(14,6,2,0.66) 0%, rgba(14,6,2,0.44) 30%, rgba(6,6,6,0.18) 100%);z-index:2}

/* Sutil viñeta para centrar la atención y añadir profundidad */
.desktop-hero__bg::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.14) 100%);pointer-events:none}

.desktop-hero__inner{position:relative;z-index:3;max-width:var(--max-width);margin:0 auto;height:100vh;display:flex;align-items:center;padding:0 24px}

.desktop-hero__text{max-width:680px;color:var(--white)}

/* Match mobile hero typography and colors */
.eyebrow{font-size:0.85rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.logo-mark{color:var(--gold);}
.eyebrow{font-size:calc(0.85rem * 1.15);letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.headline{font-family:var(--ff-serif);font-size:clamp(46px,6.4vw,87px);font-weight:300;line-height:1.04;margin:0;padding:0 12px;color:#ffffff;text-shadow:0 2px 20px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.4);transform-origin:left top}
.headline em{font-style:italic;color:var(--gold);text-shadow:0 2px 20px rgba(0,0,0,.5);font-weight:400}
.headline-underline{width:64px;height:4px;background:var(--gold);border-radius:2px;margin:18px 0}
.subheadline{margin-top:18px;font-size:1.15rem;color:rgba(255,255,255,.95);max-width:520px;text-shadow:0 1px 12px rgba(0,0,0,.55);margin-bottom:28px}

/* CTAs */
.hero-ctas{margin-top:30px;display:flex;gap:18px;justify-content:flex-start;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 32px;border-radius:12px;text-decoration:none;font-weight:700;font-family:var(--ff-sans);font-size:1.13rem}
.btn-icon{opacity:0.95}
.btn-primary{background:var(--gold);color:var(--dark);transition:background var(--transition),box-shadow var(--transition),transform var(--transition);box-shadow:0 8px 28px rgba(180,140,60,.18);border-radius:12px}
.btn-primary:hover{background:#c49a50;box-shadow:0 10px 30px rgba(180,140,60,.45);transform:translateY(-2px)}
.btn-secondary{background:transparent;border:2px solid rgba(255,255,255,0.18);color:var(--white);padding:12px 26px;border-radius:12px}

/* Curve transition */
.hero-curve{display:none}

/* Accessibility and finer adjustments */
.desktop-hero__bg[role="img"]{background-repeat:no-repeat}

/* Ensure strong visual hierarchy on large screens */


@media (min-width:1200px){
  .desktop-hero__bg{min-height:820px;padding-left:8rem}
}

@media (min-width:1600px){
  .headline{font-size:96px}
}

/* Small tweak for nav links contrast */
.nav-links a:hover{opacity:1}

/* Make sure content has breathing room when nav overlaps */
.desktop-hero__content{padding-top:120px}