:root {
  --sf-navy: #001d3d;
  --sf-navy-2: #002a57;
  --sf-blue: #0879f9;
  --sf-blue-2: #0d6efd;
  --sf-sky: #eaf4ff;
  --sf-text: #161d27;
  --sf-muted: #64748b;
  --sf-green: #17a34a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--sf-text); background: #fff; }
a { text-decoration: none; }
.site-navbar { background: rgba(0, 20, 43, .96); min-height: 76px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); backdrop-filter: blur(12px); }
.site-navbar .nav-link { color: rgba(255,255,255,.86); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding-inline: .72rem !important; }
.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: #4da3ff; }
.brand-lockup { display: inline-flex; align-items: center; gap: .7rem; }
.brand-logo-wrap { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #f4f0e3; display: inline-grid; place-items: center; border: 2px solid rgba(255,255,255,.75); flex: 0 0 auto; }
.brand-logo-wrap img { width: 70px; max-width: none; height: 60px; object-fit: cover; object-position: 50% 22%; }
.brand-name { color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; letter-spacing: .04em; }
.btn-client-access { color: #fff; border: 1px solid rgba(255,255,255,.8); border-radius: .35rem; text-transform: uppercase; font-size: .76rem; font-weight: 800; padding: .72rem 1rem; }
.btn-client-access:hover { background: #fff; color: var(--sf-navy); }
.hero-section { min-height: 570px; padding: 125px 0 72px; position: relative; background: url('../img/hero-cancha.png') center/cover no-repeat; overflow: hidden; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,19,42,.88) 0%, rgba(0,25,54,.62) 52%, rgba(0,31,68,.28) 100%); }
.hero-content { z-index: 2; }
.hero-kicker { color: #75b7ff; font-size: .78rem; font-weight: 800; letter-spacing: .18em; }
.hero-section h1 { margin-top: .6rem; color: #fff; font-weight: 900; font-size: clamp(3rem, 6vw, 5.6rem); line-height: .92; letter-spacing: -.055em; }
.hero-section h1 span { color: #1685ff; }
.hero-lead { color: #fff; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 600; }
.hero-racket-card { width: min(100%, 460px); margin-left: auto; border-radius: 2rem; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 30px 70px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.3); }
.hero-racket-card img { width: 100%; display: block; }
.btn-primary { background: var(--sf-blue); border-color: var(--sf-blue); font-weight: 700; }
.btn-dark-blue { background: var(--sf-navy); color: #fff; font-weight: 700; }
.btn-dark-blue:hover { background: var(--sf-navy-2); color: #fff; }
.feature-strip { background: linear-gradient(90deg, #001d3d, #002b58); color: #fff; }
.feature-item { text-align: center; padding: 34px 18px; border-right: 1px solid rgba(255,255,255,.15); }
.feature-item:last-child { border-right: 0; }
.feature-item i { color: #1685ff; font-size: 2.4rem; }
.feature-item h3 { font-size: 1rem; margin: .7rem 0 .35rem; font-weight: 800; }
.feature-item p { color: rgba(255,255,255,.8); font-size: .82rem; margin: 0; }
.section-pad { padding: 78px 0; }
.section-eyebrow { color: var(--sf-blue); font-size: .75rem; font-weight: 900; letter-spacing: .05em; }
.section-title { font-weight: 850; letter-spacing: -.035em; margin: .45rem 0 1rem; }
.section-title span { color: var(--sf-blue); }
.check-list li { display: flex; gap: .65rem; align-items: center; margin: .62rem 0; color: #263445; font-size: .95rem; }
.check-list i { color: var(--sf-blue); }
.gallery-grid { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; min-height: 430px; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 12px 35px rgba(0,38,80,.14); }
.gallery-grid .gallery-main { grid-row: 1 / 3; }
.pricing-section { background: linear-gradient(180deg, #f5f9fd 0%, #eef6ff 100%); }
.price-card { background: #fff; border: 1px solid #dde8f3; border-radius: 16px; padding: 28px 22px 22px; text-align: center; height: 100%; box-shadow: 0 14px 34px rgba(0,45,92,.07); transition: transform .2s ease, box-shadow .2s ease; }
.price-card:hover { transform: translateY(-5px); box-shadow: 0 22px 45px rgba(0,45,92,.12); }
.price-icon { width: 52px; height: 52px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 1.35rem; margin-bottom: 1rem; }
.price-icon.light { background: #e3f1ff; color: var(--sf-blue); }
.price-icon.dark { background: var(--sf-navy); color: #fff; }
.price-icon.green { background: #dcfce7; color: var(--sf-green); }
.price-card h3 { font-size: .95rem; font-weight: 850; margin-bottom: .15rem; }
.price-card p { margin: 0; font-size: .82rem; color: var(--sf-muted); }
.price { font-size: 2rem; line-height: 1; margin-top: 1.15rem; font-weight: 900; color: #0879f9; }
.price-card small { color: var(--sf-muted); }
.step { text-align: center; position: relative; padding: 8px 14px; }
.step-number { position: absolute; top: 0; left: calc(50% - 35px); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sf-blue); color: #fff; font-size: .7rem; font-weight: 800; z-index: 2; }
.step-icon { width: 82px; height: 82px; border: 1px solid #c7d6e6; border-radius: 50%; display: inline-grid; place-items: center; font-size: 2rem; color: var(--sf-navy); background: #fff; box-shadow: 0 0 0 8px #fff; }
.step h3 { font-size: .95rem; font-weight: 850; margin-top: 1rem; }
.step p { color: var(--sf-muted); font-size: .83rem; max-width: 230px; margin-inline: auto; }
.testimonials { background: linear-gradient(rgba(0, 28, 59, .95), rgba(0, 28, 59, .95)), url('../img/padel-raqueta.png') center/cover no-repeat; }
.testimonial-card { height: 100%; background: rgba(4, 48, 92, .66); color: #fff; border: 1px solid rgba(132,198,255,.7); border-radius: 14px; padding: 24px; }
.testimonial-card h3 { font-size: 1rem; font-weight: 850; margin-bottom: .2rem; }
.testimonial-card p { margin: .8rem 0 0; color: rgba(255,255,255,.9); }
.stars { color: #ffc107; letter-spacing: .1em; }
.contact-band { background: #fff; border-top: 1px solid #e2e8f0; }
.contact-box { display: flex; gap: 1rem; align-items: center; }
.contact-box > i { font-size: 1.7rem; color: var(--sf-blue); }
.contact-box span { display: block; color: var(--sf-blue); font-size: .69rem; font-weight: 900; }
.contact-box strong { display: block; font-size: .9rem; }
.contact-phone { display: block; color: var(--sf-text); font-size: 1.1rem; font-weight: 800; }
.socials { display: flex; gap: .9rem; margin-top: .4rem; }
.socials a { color: var(--sf-blue); font-size: 1.35rem; }
.site-footer { background: linear-gradient(90deg, #001b37, #00294e); color: #fff; }
.footer-brand { display: flex; align-items: center; gap: 1rem; }
.footer-brand h2 { font-family: Georgia, serif; margin: 0; font-size: 1.8rem; }
.footer-brand p { color: rgba(255,255,255,.72); font-size: .83rem; margin: .3rem 0 0; }
.site-footer h3 { font-size: .78rem; font-weight: 850; margin-bottom: .9rem; }
.site-footer a { color: rgba(255,255,255,.75); display: block; font-size: .82rem; margin: .28rem 0; }
.site-footer a:hover { color: #fff; }
.site-footer p { color: rgba(255,255,255,.72); font-size: .82rem; }
.site-footer hr { border-color: rgba(255,255,255,.18); margin-top: 2rem; }
.whatsapp-float { position: fixed; z-index: 1090; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: .65rem; background: #20b957; color: #fff; font-weight: 850; border-radius: 999px; padding: .76rem 1rem; box-shadow: 0 12px 28px rgba(0,0,0,.2); transition: transform .2s ease; }
.whatsapp-float:hover { color: #fff; transform: translateY(-2px); }
.whatsapp-float i { font-size: 1.35rem; }
.login-page { background: linear-gradient(rgba(0,20,43,.82), rgba(0,20,43,.9)), url('../img/hero-cancha.png') center/cover fixed; }
.login-card { width: min(100%, 430px); background: #fff; border-radius: 20px; padding: 32px; box-shadow: 0 26px 70px rgba(0,0,0,.35); }
.login-brand { display: flex; align-items: center; gap: .75rem; color: var(--sf-navy); margin-bottom: 1.5rem; font-family: Georgia, serif; font-size: 1.3rem; }
.login-card h1 { font-weight: 850; font-size: 1.7rem; }
.login-card > p { color: var(--sf-muted); }
@media (max-width: 991.98px) {
  .site-navbar { min-height: 68px; }
  .site-navbar .navbar-collapse { padding: .6rem 0 1.1rem; }
  .hero-section { min-height: 620px; padding-top: 125px; background-position: center; }
  .hero-section h1 { font-size: clamp(3.3rem, 12vw, 5rem); }
  .hero-overlay { background: linear-gradient(90deg, rgba(0,19,42,.9), rgba(0,25,54,.64)); }
  .gallery-grid { min-height: 380px; }
}
@media (max-width: 767.98px) {
  .brand-name { font-size: 1.05rem; }
  .brand-logo-wrap { width: 40px; height: 40px; }
  .feature-item { border-bottom: 1px solid rgba(255,255,255,.15); min-height: 180px; }
  .feature-item:nth-child(2) { border-right: 0; }
  .section-pad { padding: 60px 0; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 170px; min-height: auto; }
  .gallery-grid .gallery-main { grid-column: 1 / 3; grid-row: auto; }
  .whatsapp-float span { display: none; }
  .whatsapp-float { width: 54px; height: 54px; padding: 0; justify-content: center; }
  .contact-box { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
  .hero-section { min-height: 610px; }
  .hero-section h1 { font-size: 3.45rem; }
  .hero-section .btn { width: 100%; }
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, 220px); }
  .gallery-grid .gallery-main { grid-column: auto; }
}