/* ==========================================================================
   BCN Fútbol Academy — shared design layer
   Loaded after each page's inline <style>, so these rules win.
   Brand colors and page structure are unchanged; this file refines type,
   surfaces, depth and motion.
   ========================================================================== */

:root {
    --bcn-green: #449b18;
    --bcn-green-600: #3b8714;
    --bcn-green-700: #2f6d10;
    --bcn-green-50: #eef7e8;
    --bcn-yellow: #ffdf00;
    --ink: #0a0a0a;
    --ink-2: #141414;
    --line-dark: rgba(255, 255, 255, .08);
    --line-light: rgba(10, 10, 10, .08);
    --surface: #f4f5f2;
    --radius-card: 1.25rem;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
    --shadow-md: 0 10px 30px -12px rgba(0,0,0,.25);
    --shadow-lg: 0 24px 48px -18px rgba(0,0,0,.45);
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base & typography ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
p { line-height: 1.7; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
h1 { font-weight: 800 !important; letter-spacing: -0.035em; }
h2 { font-weight: 800 !important; letter-spacing: -0.03em; }
h3, h4 { font-weight: 700 !important; }

/* Section titles get a small brand underline */
section h2.text-3xl.text-center::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    margin: .9rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bcn-green), var(--bcn-yellow));
}

nav a, footer h2, footer h3,
button, .btn, [role="button"], a.rounded-full { font-weight: 600; }

::selection { background: var(--bcn-yellow); color: #000; }

/* ---------- Navigation: frosted, sticky ---------- */
nav {
    position: sticky; top: 0; z-index: 50;
    background-color: rgba(5, 5, 5, .97) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line-dark);
    box-shadow: none !important;
}
nav .hidden.md\:flex a:not(.rounded-full) {
    position: relative;
    color: rgba(255,255,255,.82);
    transition: color .2s var(--ease);
}
nav .hidden.md\:flex a:not(.rounded-full)::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -6px;
    height: 2px; border-radius: 2px;
    background: var(--bcn-green);
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
}
nav .hidden.md\:flex a:not(.rounded-full):hover { color: #fff; }
nav .hidden.md\:flex a:not(.rounded-full):hover::after { transform: scaleX(1); }
.mobile-menu { border-top: 1px solid var(--line-dark); padding: .25rem 0 .5rem; }
.mobile-menu a { padding-top: .8rem !important; padding-bottom: .8rem !important; font-size: .95rem !important; }
[id] { scroll-margin-top: 84px; }

/* ---------- Buttons ---------- */
a.rounded-full, button.rounded-full {
    transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
a.bg-primary.rounded-full, button.bg-primary.rounded-full {
    background-image: linear-gradient(180deg, #4fae1d 0%, var(--bcn-green) 100%);
    box-shadow: 0 8px 20px -10px rgba(68,155,24,0.27), inset 0 1px 0 rgba(255,255,255,.18);
    letter-spacing: .005em;
}
a.bg-primary.rounded-full:hover, button.bg-primary.rounded-full:hover {
    background-image: linear-gradient(180deg, var(--bcn-green) 0%, var(--bcn-green-700) 100%);
    background-color: var(--bcn-green-700) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px rgba(68,155,24,0.285), inset 0 1px 0 rgba(255,255,255,.15);
}
a.rounded-full:active, button.rounded-full:active { transform: translateY(0); }

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--bcn-yellow);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---------- Light section surfaces ---------- */
.bg-gray-100 { background-color: var(--surface) !important; }
.bg-gray-50  { background-color: #fafaf8 !important; }

/* ---------- Dark cards (programs, packages, pricing) ---------- */
.bg-black.rounded-lg,
.bg-black.rounded-xl,
.bg-black.rounded-2xl {
    background: linear-gradient(180deg, #161616 0%, #070707 100%) !important;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-md);
}
.bg-black.border-yellow-400, .price-card.border-yellow-400 { border: 2px solid #facc15 !important; }

.bg-gray-800.rounded-xl {
    background: rgba(255,255,255,.045) !important;
    border: 1px solid var(--line-dark);
}
.bg-gray-900.rounded-xl { background-color: #121212 !important; border-color: var(--line-dark) !important; }

.program-card, .pkg-card, .price-card, .partner-card {
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.program-card:hover, .pkg-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg) !important;
    border-color: rgba(68,155,24,.55) !important;
}
.price-card:hover { transform: translateY(-3px); border-color: rgba(68,155,24,.6) !important; }

/* Icon discs */
.bg-primary.rounded-full.h-16, .bg-primary.rounded-full.h-12, .bg-primary.rounded-full.h-10 {
    background-image: radial-gradient(120% 120% at 30% 20%, #5cc427 0%, var(--bcn-green) 55%, var(--bcn-green-700) 100%);
    box-shadow: 0 0 0 6px rgba(68,155,24,0.042), 0 8px 18px -8px rgba(68,155,24,0.24);
}

/* ---------- Home hero ---------- */
.hero { isolation: isolate; }
.hero > .absolute.inset-0 {
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.75) 100%) !important;
}
.hero h1 { font-size: clamp(2.4rem, 5vw, 4rem) !important; }
.hero .rounded-full.bg-black {
    background: rgba(8,8,8,.66) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,223,0,.28);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero .rounded-full.bg-black:hover { border-color: rgba(255,223,0,.6); }

/* Stats bar numbers */
section.bg-black.py-8 .text-3xl { letter-spacing: -0.03em; font-weight: 800; }
section.bg-black.py-8 .text-center + .text-center { position: relative; }

/* "Train with us" step numbers */
#how-it-works { background-image: radial-gradient(90% 120% at 50% 0%, #56b823 0%, var(--bcn-green) 60%, #3a8714 100%); }
#how-it-works .bg-black.rounded-full {
    box-shadow: 0 0 0 6px rgba(0,0,0,.12), 0 10px 20px -10px rgba(0,0,0,.6);
    color: var(--bcn-yellow);
}

/* About + timeline cards */
#about img.rounded-lg, #partnerships figure img { border-radius: var(--radius-card) !important; box-shadow: var(--shadow-md) !important; }
#about .bg-white.rounded-lg {
    border-radius: 1rem !important;
    border: 1px solid var(--line-light);
    box-shadow: var(--shadow-sm) !important;
}
#about .bg-white.rounded-lg:hover { box-shadow: var(--shadow-md) !important; }
#about h5.text-blue-900 { color: #111 !important; }

/* ---------- Program detail pages (dark hero) ---------- */
.hero-bg::before {
    background: linear-gradient(100deg, rgba(0,0,0,.88) 35%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.35) 100%) !important;
}
.hero-bg .bg-black.bg-opacity-60 {
    background: rgba(10,10,10,.72) !important;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-lg);
}

/* Page header strips */
body > div.bg-black.py-8, body > section.bg-black.text-white.py-8 {
    background: radial-gradient(120% 140% at 0% 0%, #1b2a12 0%, #000 60%) !important;
}

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
    border-radius: .75rem !important;
    border-color: #d9dcd4 !important;
    background-color: #fff;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--bcn-green) !important;
    box-shadow: 0 0 0 4px rgba(68,155,24,0.045);
}
.bg-gray-100.p-6.rounded-lg { border-radius: var(--radius-card) !important; border: 1px solid var(--line-light); background: #fff !important; box-shadow: var(--shadow-sm); }

/* ---------- Footer ---------- */
footer.bg-black {
    background: #050505 !important;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(68,155,24,.7), rgba(255,223,0,.6), transparent) 1;
}
footer a { transition: color .2s var(--ease); }

/* ---------- "Coming soon" treatment ---------- */
.coming-soon-badge {
    display: inline-block;
    background: var(--bcn-yellow);
    color: #000;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .65rem;
    border-radius: 9999px;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}
.card-coming-soon,
.bg-black.card-coming-soon {
    background: linear-gradient(160deg, #0b1a2b 0%, #050505 70%) !important;
    border: 1px solid rgba(255,223,0,.35) !important;
    border-radius: var(--radius-card) !important;
}

/* ---------- Partner cards ---------- */
.partner-card {
    background: #fff;
    border-radius: var(--radius-card);
    border: 1px solid var(--line-light);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.partner-card::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--bcn-green), var(--bcn-yellow));
}
.partner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.partner-logo { height: 64px; width: 100%; display: flex; align-items: center; justify-content: flex-start; }
.partner-logo img { max-height: 64px; max-width: 150px; width: auto; object-fit: contain; }

/* ---------- Gentle entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
    .hero .container > *, .hero-bg .container > *, body > div.bg-black.py-8 .container > * {
        animation: bcn-rise .7s var(--ease) both;
    }
    .hero .container > *:nth-child(2), .hero-bg .container > *:nth-child(2) { animation-delay: .08s; }
    .hero .container > *:nth-child(3), .hero-bg .container > *:nth-child(3) { animation-delay: .16s; }
}
@keyframes bcn-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Backgrounds — texture instead of flat fills (pure CSS, no extra images)
   ========================================================================== */
:root {
    /* Football pitch markings, drawn as SVG */
    --pitch-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='2'%3E%3Crect x='40' y='40' width='1120' height='620' rx='4'/%3E%3Cline x1='600' y1='40' x2='600' y2='660'/%3E%3Ccircle cx='600' cy='350' r='95'/%3E%3Ccircle cx='600' cy='350' r='4' fill='%23ffffff' fill-opacity='.14'/%3E%3Crect x='40' y='190' width='170' height='320'/%3E%3Crect x='40' y='270' width='60' height='160'/%3E%3Crect x='990' y='190' width='170' height='320'/%3E%3Crect x='1100' y='270' width='60' height='160'/%3E%3Cpath d='M210 290 A 75 75 0 0 1 210 410'/%3E%3Cpath d='M990 290 A 75 75 0 0 0 990 410'/%3E%3C/svg%3E");
    --dots-dark:  radial-gradient(rgba(10,10,10,.07) 1px, transparent 1.2px);
    --dots-light: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px);
}

/* Light sections: soft brand glows + fine dot texture */
section.bg-gray-100,
section.bg-white {
    background-image:
        radial-gradient(60rem 28rem at 8% -10%, rgba(68,155,24,0.03), transparent 60%),
        radial-gradient(50rem 26rem at 105% 110%, rgba(255,223,0,0.036), transparent 60%),
        var(--dots-dark) !important;
    background-size: auto, auto, 22px 22px !important;
}
section#about.bg-white {
    background-image:
        radial-gradient(55rem 30rem at 100% 0%, rgba(68,155,24,0.024), transparent 60%),
        radial-gradient(40rem 24rem at 0% 100%, rgba(255,223,0,0.03), transparent 60%),
        var(--dots-dark) !important;
}

/* "Train With Us": pitch markings over the green */
#how-it-works {
    position: relative;
    background-image:
        var(--pitch-lines),
        radial-gradient(90% 120% at 50% 0%, #56b823 0%, var(--bcn-green) 60%, #3a8714 100%) !important;
    background-size: min(1200px, 140%) auto, auto !important;
    background-position: center, center !important;
    background-repeat: no-repeat !important;
}

/* Dark page-header strips (Programs, Book Now, Contact…) */
body > div.bg-black.py-8,
body > section.bg-black.text-white.py-8 {
    background-image:
        radial-gradient(60rem 22rem at 0% 0%, rgba(68,155,24,0.105), transparent 60%),
        radial-gradient(40rem 18rem at 100% 100%, rgba(255,223,0,0.03), transparent 60%),
        var(--dots-light),
        linear-gradient(#050505, #050505) !important;
    background-size: auto, auto, 18px 18px, auto !important;
    border-bottom: 1px solid var(--line-dark);
}

/* Footer: a low green glow */
footer.bg-black {
    background-image:
        radial-gradient(50rem 20rem at 0% 0%, rgba(68,155,24,0.054), transparent 60%),
        radial-gradient(40rem 18rem at 100% 100%, rgba(255,223,0,0.018), transparent 60%),
        linear-gradient(#050505, #050505) !important;
}

/* ==========================================================================
   Stats strip — glass card floating over the bottom of the hero photo
   ========================================================================== */
.stats-strip {
    background: transparent !important;
    position: relative;
    z-index: 5;
    height: 0;
    padding: 0 !important;
    margin: 0;
}
.stats-strip > .container { transform: translateY(calc(-100% - 2rem)); }
.stats-card {
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.6rem 2rem;
    gap: 0 !important;
    border-radius: 1.25rem;
    background: rgba(10, 10, 10, .45);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 60px -25px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
    flex-wrap: nowrap !important;
}
.stats-card > .text-center {
    flex: 1 1 0;
    padding: .25rem 1rem;
}
.stats-card > .text-center + .text-center { border-left: 1px solid rgba(255,255,255,.12); }
.stats-card .text-3xl {
    font-size: clamp(1.6rem, 3.2vw, 2.25rem) !important;
    background: linear-gradient(180deg, #ffffff 30%, var(--bcn-yellow) 140%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
}
.stats-card .text-sm {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .7rem !important;
    color: rgba(255,255,255,.7) !important;
}
.hero { padding-bottom: 12rem !important; }
.hero .max-w-5xl { margin-bottom: 0 !important; }
@media (max-width: 640px) {
    .hero { padding-bottom: 9rem !important; }
    .stats-strip > .container { transform: translateY(calc(-100% - 1.25rem)); }
    .stats-card { padding: 1.1rem .5rem; border-radius: 1rem; }
    .stats-card > .text-center { padding: .25rem .4rem; }
    .stats-card .text-sm { font-size: .6rem !important; letter-spacing: .05em; }
}

/* ==========================================================================
   Cards — glass, matching the stats card
   ========================================================================== */
:root {
    --pitch-lines-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' fill='none' stroke='%23000000' stroke-opacity='.07' stroke-width='2'%3E%3Crect x='40' y='40' width='1120' height='620' rx='4'/%3E%3Cline x1='600' y1='40' x2='600' y2='660'/%3E%3Ccircle cx='600' cy='350' r='95'/%3E%3Crect x='40' y='190' width='170' height='320'/%3E%3Crect x='40' y='270' width='60' height='160'/%3E%3Crect x='990' y='190' width='170' height='320'/%3E%3Crect x='1100' y='270' width='60' height='160'/%3E%3Cpath d='M210 290 A 75 75 0 0 1 210 410'/%3E%3Cpath d='M990 290 A 75 75 0 0 0 990 410'/%3E%3C/svg%3E");
    --glass-dark: rgba(14, 14, 14, .80);
    --glass-dark-edge: rgba(255, 255, 255, .10);
    --glass-light: rgba(255, 255, 255, .62);
    --glass-light-edge: rgba(255, 255, 255, .85);
}

/* Give card grids something to sit on: faint pitch markings + stronger glows */
#programs.bg-gray-100,
body > section.py-16.bg-gray-100 {
    background-image:
        var(--pitch-lines-dark),
        radial-gradient(40rem 30rem at 15% 20%, rgba(68,155,24,0.048), transparent 60%),
        radial-gradient(40rem 30rem at 85% 80%, rgba(255,223,0,0.054), transparent 60%),
        var(--dots-dark) !important;
    background-size: min(1300px, 160%) auto, auto, auto, 22px 22px !important;
    background-position: center, center, center, 0 0 !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
}
#partnerships.bg-gray-100 {
    background-image:
        radial-gradient(45rem 28rem at 10% 90%, rgba(68,155,24,0.048), transparent 60%),
        radial-gradient(40rem 26rem at 95% 10%, rgba(255,223,0,0.054), transparent 60%),
        var(--dots-dark) !important;
    background-size: auto, auto, 22px 22px !important;
}

/* Dark cards → dark glass */
.bg-black.rounded-lg,
.bg-black.rounded-xl,
.bg-black.rounded-2xl {
    background: linear-gradient(180deg, rgba(24,24,24,.90) 0%, rgba(6,6,6,.86) 100%) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--glass-dark-edge);
    box-shadow: 0 24px 48px -24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.card-coming-soon,
.bg-black.card-coming-soon {
    background: linear-gradient(160deg, rgba(11,26,43,.92) 0%, rgba(6,6,6,.86) 70%) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.bg-gray-800.rounded-xl { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08); }

/* Hover: green edge glow */
.program-card:hover, .pkg-card:hover {
    border-color: rgba(68,155,24,.6) !important;
    box-shadow: 0 30px 60px -28px rgba(0,0,0,.6), 0 0 0 1px rgba(68,155,24,0.105), 0 0 40px -12px rgba(68,155,24,0.165), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* Package / price cards on the photo-hero detail pages */
.hero-bg .bg-black.bg-opacity-60 {
    background: rgba(10,10,10,.55) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255,255,255,.12);
}
.price-card.bg-gray-900 {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.10) !important;
}
.price-card.bg-gray-900:hover { background: rgba(255,255,255,.08) !important; }

/* Light cards → frosted white glass */
.partner-card,
#about .bg-white.rounded-lg,
.bg-gray-100.p-6.rounded-lg,
.bg-white.rounded-2xl {
    background: var(--glass-light) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--glass-light-edge) !important;
    box-shadow: 0 18px 40px -24px rgba(0,0,0,.25), inset 0 1px 0 #fff !important;
}
.partner-card:hover, #about .bg-white.rounded-lg:hover {
    box-shadow: 0 24px 48px -24px rgba(0,0,0,.3), 0 0 0 1px rgba(68,155,24,0.075), inset 0 1px 0 #fff !important;
}

/* Browsers without backdrop-filter: fall back to near-solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bg-black.rounded-lg, .bg-black.rounded-xl, .bg-black.rounded-2xl { background: #121212 !important; }
    .partner-card, #about .bg-white.rounded-lg, .bg-gray-100.p-6.rounded-lg, .bg-white.rounded-2xl { background: rgba(255,255,255,.92) !important; }
}