:root {
    --bg-main:#000000;
    --gold:#d9a441;
    --btn-gold-btn: #face1d;
    --btn-gold-hover: #eab308;
    --gold-soft:#f2cf7c;
    --text-main:#f5f5f5;
    --muted:#9c9c9c;

    /* Animación */
    --a-dur: .6s;
    --a-ease: cubic-bezier(.22,.61,.36,1);
    --a-stagger: 0s; /* se puede sobrescribir con .delay-* */
}

html {
    scroll-behavior: smooth;
}  
/* BASE */
body{
    background-color:var(--bg-main);
    color:var(--text-main);
    font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* UTILIDADES */
.eyebrow,.hero-eyebrow,.section-eyebrow{
    font-size:.75rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--muted);
}

/* === Animate On Load (optimizadas) === */
.fade-up,.fade-in,.slide-left,.slide-right{
  --stagger: var(--a-stagger);
  opacity:0;
  will-change:opacity,transform;
}
.fade-up{
  transform:translateY(16px);
  transition:opacity var(--a-dur) var(--a-ease) var(--stagger),
             transform var(--a-dur) var(--a-ease) var(--stagger);
}
.fade-in{
  transition:opacity var(--a-dur) var(--a-ease) var(--stagger);
}
.slide-left{
  transform:translateX(-16px);
  transition:opacity var(--a-dur) var(--a-ease) var(--stagger),
             transform var(--a-dur) var(--a-ease) var(--stagger);
}
.slide-right{
  transform:translateX(16px);
  transition:opacity var(--a-dur) var(--a-ease) var(--stagger),
             transform var(--a-dur) var(--a-ease) var(--stagger);
}
.animate-in{ opacity:1; transform:none; }

/* Delays utilitarias */
.delay-1{ --stagger:.2s }
.delay-2{ --stagger:.4s }
.delay-3{ --stagger:.6s }
.delay-4{ --stagger:.8s }
.delay-5{ --stagger:1s }

/* Respeto a reduce motion */
@media (prefers-reduced-motion: reduce){
  .fade-up,.fade-in,.slide-left,.slide-right{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* NAVBAR */
.main-navbar{
    padding-top:1.5rem;
    padding-bottom:1.5rem;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.95),
        rgba(0,0,0,.7),
        rgba(0,0,0,0)
    );
}

.logo-text{
    letter-spacing:.18em;
    font-size:.9rem;
    text-transform:uppercase;
}

.navbar-logo{
    height:6rem;
    width:auto;
    display:block;
}

/* LINKS NAVBAR CON SUBRAYADO ANIMADO */
/* NAVBAR */
.main-navbar{
    padding-top:1.5rem;
    padding-bottom:1.5rem;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.95),
        rgba(0,0,0,.7),
        rgba(0,0,0,0)
    );
}

.logo-text{
    letter-spacing:.18em;
    font-size:.9rem;
    text-transform:uppercase;
}

.navbar-logo{
    height:6rem;
    width:auto;
    display:block;
}

/* LINKS NAVBAR CON SUBRAYADO ANIMADO */
.navbar-dark .navbar-nav .nav-link {
    position: relative;
    letter-spacing: .17em;
    font-size: .78rem;
    text-transform: uppercase;
    color: var(--muted);
    transition:
        color .25s var(--a-ease),
        transform .25s var(--a-ease);
}

/* El texto dentro del link */
.nav-link-label{
    position: relative;
    display: inline-block;
    padding-bottom: .35rem;
}

/* Línea animada SOLO bajo el texto */
.nav-link-label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1rem;
    height: 2px;

    width: 0;                 /* empieza oculta */
    margin: 0 auto;
    background: linear-gradient(to right, var(--gold-soft), var(--gold));
    opacity: 0;

    transition:
        width .3s var(--a-ease),
        opacity .3s var(--a-ease);
}

/* Hover: color + línea + ligero “lift” */
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--gold);
    transform: translateY(-1px);
}

.navbar-dark .navbar-nav .nav-link:hover .nav-link-label::after {
    width: 100%;
    opacity: 1;
}

/* Active: permanente */
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--gold);
    transform: translateY(-1px);
}

.navbar-dark .navbar-nav .nav-link.active .nav-link-label::after {
    width: 100%;
    opacity: 1;
}



/* === NAVBAR: Slide Down Animation (solo en home) === */
.slide-down{
  transform:translateY(-100%);
  opacity:0;
  animation:slideDownFade .9s ease-out forwards;
  animation-delay:.2s;
}
@keyframes slideDownFade{
  0%{ transform:translateY(-100%); opacity:0; }
  60%{ transform:translateY(10%); opacity:1; }
  100%{ transform:translateY(0); opacity:1; }
}

/* HERO */
.hero-landing{
    position:relative;
    min-height:calc(100vh - 80px);
    padding:6rem 0 5rem;
    display:flex;
    align-items:center;
    background-color:#000;
    background-image:
        linear-gradient(
            to right,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.92) 35%,
            rgba(0,0,0,.80) 55%,
            rgba(0,0,0,.45) 75%,
            rgba(0,0,0,.25) 85%,
            rgba(0,0,0,0) 100%
        ),
        url("../img/greg-hero-full.6927582fc085.webp");
    background-size:100% 100%, auto 100%;
    background-position:left top, right center;
    background-repeat:no-repeat, no-repeat;
}
.hero-title{
    font-size:clamp(2.8rem,4vw,3.8rem);
    letter-spacing:.12em;
    font-weight:700;
}
.hero-quote{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:1.6rem;
    color:var(--gold-soft);
}
.hero-subtext{ font-size:.9rem; color:var(--muted); }

/* BOTONES */
.btn-gold,.btn-outline-gold,.btn-gold-ghost{
    padding:.85rem 2.3rem;
    border-radius:0;
    text-transform:uppercase;
    font-size:.82rem;
    letter-spacing:.18em;
    border:1px solid var(--gold);
    color:var(--gold);
    background:transparent;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-gold:hover,.btn-outline-gold:hover,.btn-gold-ghost:hover{
    background:var(--gold);
    color:#000;
}

/* PÁGINAS INTERNAS */
.page-section{
    padding-top:5rem; padding-bottom:5rem;
    background-color:#050505;
}
.section-title{
    font-size:clamp(1.9rem,3vw,2.4rem);
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:600;
}
.section-lead{
    font-size:.98rem;
    color:var(--muted);
    max-width:650px;
}

/* ABOUT */
.about-photo{
    position:relative; width:100%; height:350px; border-radius:10px;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.9)),
        url("../img/greg-about.e9ea012515eb.webp") center/cover no-repeat;
    box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.about-subtitle{
    font-size:1rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.about-card{
    border:1px solid rgba(255,255,255,.12);
    background:radial-gradient(circle at top left, rgba(217,164,65,.08), #020202);
    border-radius:.75rem;
}
.about-card-title{
    font-size:1rem; letter-spacing:.16em; text-transform:uppercase;
}
.about-label{
    font-weight:600; color:var(--gold-soft); text-transform:uppercase;
    font-size:.75rem; letter-spacing:.15em;
}
.blockquote{
    font-size:1rem; font-style:italic; color:var(--gold-soft);
    border-left:3px solid var(--gold); padding-left:1rem;
}

.jersey-gallery img {
    object-fit: cover;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.jersey-gallery img:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}


/* STATS */
.about-stats{
    display:flex; flex-wrap:wrap; gap:1.5rem; margin-bottom:.5rem;
}
.about-stat{ min-width:110px; }
.about-stat-number{
    font-size:1.7rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--gold-soft);
}
.about-stat-label{
    font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

/* CARDS UNIFICADAS: CAREER / BLOG / HIGHLIGHTS */
.experience-card,.blog-card,.highlight-card{
    border-radius:.75rem; overflow:hidden;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    display:flex; flex-direction:column;
    transition: transform .25s ease, box-shadow .25s ease, outline-color .25s ease;
    outline:1px solid transparent;
}
.experience-card:hover,.blog-card:hover,.highlight-card:hover{
    transform:translateY(-4px);
    box-shadow:0 0 10px rgba(217,164,65,.3);
}

/* CAREER */
.experience-image-wrapper{ max-height:300px; overflow:hidden; }

/* HIGHLIGHTS */
.highlight-card{ position:relative; cursor:pointer; }
.highlight-image, .experience-image, .blog-card-image {
    width: 100%;
    height: 300px;          /* ajusta la altura a tu gusto */
    object-fit: cover;      /* aquí está el efecto cover */
    display: block;
}
.highlight-overlay{
    position:absolute; inset:auto 0 0 0; height:100%;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:1rem;
    background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
    opacity:0; transition:opacity .3s ease;
}
.highlight-card:hover .highlight-overlay{ opacity:1; }
.highlight-overlay h5{ color:var(--text-main); font-weight:600; margin-bottom:.25rem; }
.highlight-overlay p{ color:rgba(255,255,255,.8); font-size:.875rem; }

/* BLOG LIST */
.blog-card-image-wrapper{ max-height:300px; overflow:hidden; }
.blog-card-body{ flex-grow:1; }
.blog-card-category{
    font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft);
}
.blog-card-title{ margin-bottom:.4rem; }
.blog-card-link{ color:var(--text-main); text-decoration:none; }
.blog-card-link:hover{ color:var(--gold); }
.blog-card-meta{ color:var(--muted); }
.blog-content{ font-size:.98rem; line-height:1.75; color:var(--text-main); }

/* BLOG DETAIL */
.blog-detail-section{ background-color:#050505; }
.blog-article{
    background:rgba(255,255,255,.02);
    border-radius:.9rem; padding:2rem;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 35px rgba(0,0,0,.6);
}
.blog-article-title{
    font-size:clamp(1.8rem,3vw,2.4rem);
    letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.blog-cover-wrapper{ border-radius:.85rem; overflow:hidden; }
.blog-cover-image{ width:100%; height:auto; display:block; }
.blog-content p{ margin-bottom:1.1rem; }
.blog-content p:first-of-type::first-letter{
    float:left; font-size:3rem; line-height:1;
    padding-right:.3rem; padding-top:.15rem;
    color:var(--gold-soft); font-weight:700;
}
.blog-sidebar-card{
    background:rgba(255,255,255,.03);
    border-radius:.8rem; border:1px solid rgba(255,255,255,.08);
    padding:1.4rem 1.5rem;
}
.blog-sidebar-title{
    font-size:.85rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--muted); margin-bottom:.75rem;
}
.blog-breadcrumb-link{ color:var(--muted); text-decoration:none; }
.blog-breadcrumb-link:hover{ color:var(--gold); text-decoration:underline; }

/* CONTACT PAGE */
.contact-hero{
    background:
        radial-gradient(circle at center right, rgba(217,164,65,.2), transparent 70%),
        url("../img/greg-contact-bg.60a05351ce7a.webp") center top / cover no-repeat;
    color:var(--text-main);
    position:relative;
    min-height:40vh;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.contact-hero .overlay{ position:absolute; inset:0; background:linear-gradient(to right, rgba(0,0,0,.9) 10%, rgba(0,0,0,.6) 80%); z-index:1;}
.contact-section{ background-color:#0d0d0d; color:var(--text-main); }
.contact-info li{
    margin-bottom:1rem; font-size:1rem; color:rgba(255,255,255,.85);
}
.contact-info i{ color:var(--gold); margin-right:10px; font-size:1.1rem; }
.contact-info a{ color:var(--gold-soft); text-decoration:none; }
.contact-info a:hover{ color:var(--gold); text-decoration:underline; }
.contact-form .form-control{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:var(--text-main); border-radius:.5rem; padding:.9rem 1rem; transition:all .2s ease;}
.contact-form .form-control:focus{ border-color:var(--gold); box-shadow:0 0 10px rgba(217,164,65,.25); background:rgba(255,255,255,.12);}

/* FOOTER */
.footer-dark{ background: radial-gradient(circle at top left, rgba(217,164,65,.09), #050505); border-top:1px solid rgba(255,255,255,.06); position:relative; z-index:1;}
.footer-logo{ height:3.2rem; width:auto; display:block; }
.footer-brand-title{ letter-spacing:.2em; font-size:.78rem; text-transform:uppercase; color:var(--text-main);}
.footer-quote{ font-family:'Playfair Display',serif; font-style:italic; font-size:.9rem; color:var(--gold-soft); max-width:260px;}
.footer-label{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);}
.footer-nav li+li{ margin-top:.15rem; }
.footer-nav a{ font-size:.82rem; text-transform:uppercase; letter-spacing:.16em; text-decoration:none; color:var(--muted); transition: color .2s ease, transform .2s ease;}
.footer-nav a:hover{ color:var(--gold); transform:translateX(2px); }
.social-icon-circle{ width:2.4rem; height:2.4rem; border-radius:999px; border:1px solid rgba(217,164,65,.4); display:inline-flex; align-items:center; justify-content:center; background: radial-gradient(circle at top, rgba(217,164,65,.18), rgba(0,0,0,.9)); text-decoration:none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;}
.social-icon-circle i{ font-size:1.1rem; color:var(--gold-soft); }
.social-icon-circle:hover{ transform:translateY(-3px); box-shadow:0 0 12px rgba(217,164,65,.45); border-color:var(--gold); background: radial-gradient(circle at top, rgba(242,207,124,.25), rgba(0,0,0,.9));}
.social-icon-circle:hover i{ color:#f0c040; }
.footer-divider{ border-color:rgba(255,255,255,.08); margin-top:2rem; margin-bottom:1.8rem; }
.footer-copy-wrap{ color:var(--muted); font-size:.78rem; }
.footer-meta{ text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; }

/* ——— Cinematic Recovery Reel ——— */
.reel{
  position:relative; width:100%;
  aspect-ratio:16/9; 
  overflow:hidden; border-radius:.75rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:0 12px 35px rgba(0,0,0,.35);
}
.reel-frame{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  opacity:0; transform:scale(1);
  transition:opacity 900ms ease;
  will-change:transform,opacity;
}
.reel-frame.active{ opacity:1; }
/* Ken Burns suave */
.reel-frame.kenburns{ animation:kenburns 6.5s ease-in-out forwards; }
.reel-frame.kenburns-rev{ animation:kenburns-rev 6.5s ease-in-out forwards; }
@keyframes kenburns{
  0%{   transform:scale(1.02) translate(0%,0%); }
  100%{ transform:scale(1.08) translate(1.5%,-1%); }
}
@keyframes kenburns-rev{
  0%{   transform:scale(1.06) translate(1%,-0.5%); }
  100%{ transform:scale(1.0) translate(0%,0%); }
}

.reel video.reel-frame {
  object-fit:contain; 
  transform: scale(1); 
  transform-origin: center center;
}

/* Cookie banner (modo oscuro, bottom fixed) */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.98); 
    color: var(--text-main);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.cookie-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.cookie-banner a {
    color: var(--btn-gold-btn);
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.btn-gold {
    background: var(--btn-gold-btn);
    color: #111827;
    border: none;
}

.btn-gold:hover {
    background: var(--btn-gold-hover);
    color: #020617;
}


/* ============================= */
/* RESPONSIVE TUNING PRO         */
/* ============================= */

/* --- Tablets (hasta 992px) --- */
@media (max-width: 992px) {

  .hero-title {
    font-size: clamp(2.1rem, 5.9vw, 2.9rem);
    line-height: 1.15;
  }

  .hero-quote {
    font-size: 1.3rem;
  }

  .btn-gold,
  .btn-outline-gold,
  .btn-gold-ghost {
    padding: .75rem 1.7rem;
    font-size: .78rem;
  }

  .section-title {
    font-size: clamp(1.7rem, 4vw, 2.2rem);
  }

  .page-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* --- Móviles medianos (hasta 768px) --- */
@media (max-width: 768px) {

  .hero-landing {
    padding: 4rem 0 4rem;
    background-size: cover;
    background-position: left top;
  }

  .hero-title {
    font-size: clamp(1.9rem, 7vw, 2.4rem);
    letter-spacing: .08em;
  }

  .hero-quote {
    font-size: 1.15rem;
  }

  .hero-subtext {
    font-size: .85rem;
  }

  .btn-gold,
  .btn-outline-gold,
  .btn-gold-ghost {
    padding: .7rem 1.5rem;
    font-size: .75rem;
  }

  /* Evita que botones se rompan en varias líneas */
  .d-flex.flex-wrap.gap-3 a {
    white-space: nowrap;
  }

  .section-title {
    font-size: 1.7rem;
  }

  .section-lead {
    font-size: .9rem;
  }

  /* Blog list cards más limpias */
  .blog-card-title {
    font-size: 1.1rem;
  }

  .blog-article{ 
    padding:1.5rem; 
  }

  .about-stats{ 
    justify-content:space-between; 
  }

  .blog-card-category {
    font-size: .7rem;
  }

    .navbar-logo {
    height: 3rem;
  }

  .logo-text {
    font-size: .72rem;
    letter-spacing: .15em;
  }

  .navbar-brand {
    gap: .3rem;
  }

  .cookie-banner-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

}


/* --- Móviles pequeños (hasta 480px) --- */
@media (max-width: 480px) {

  .hero-title {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .hero-quote {
    font-size: 1rem;
  }

  .hero-subtext {
    font-size: .8rem;
  }

  .btn-gold,
  .btn-outline-gold,
  .btn-gold-ghost {
    padding: .6rem 1.2rem;
    font-size: .72rem;
    letter-spacing: .14em;
  }

  /* Secciones */
  .section-title {
    font-size: 1.55rem;
  }

  .section-lead {
    font-size: .88rem;
  }

  /* Blog detail */
  .blog-article {
    padding: 1.25rem;
  }

  .blog-article-title {
    font-size: 1.5rem;
  }

  /* About stats */
  .about-stat-number {
    font-size: 1.4rem;
  }

    .navbar-logo {
    height: 2.6rem;
  }

  .logo-text {
    font-size: .65rem;
    letter-spacing: .12em;
  }

  .navbar-brand {
    max-width: 75%;
    overflow: hidden;
  }
}