/* 100% FUTBOL — modern visual polish.
   Presentation only: the existing HTML structure, routes and behaviour remain intact. */
:root {
  --ink:#10221b;
  --ink-soft:#39554a;
  --forest:#0c3d2b;
  --forest-2:#17623f;
  --mint:#b9f7bd;
  --mint-strong:#79df8d;
  --sky:#66b9da;
  --paper:#f5f8f5;
  --paper-2:#edf3ef;
  --hairline:rgba(21,65,46,.13);
  --soft-shadow:0 12px 35px rgba(13,52,36,.08);
  --lift-shadow:0 24px 55px rgba(13,52,36,.14);
  --radius-sm:14px;
  --radius-md:22px;
  --radius-lg:30px;
}

body {
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
}

.container { width:min(1220px,calc(100% - 48px)); }

/* Storefront navigation */
.match-strip {
  position:relative;
  z-index:30;
  background:#092d21;
  border:0;
  color:rgba(255,255,255,.7);
}
.match-strip>.container { min-height:31px; }
.match-strip span:first-child,.match-strip-note { color:#baf3c4; }
.storefront-page header {
  background:rgba(250,253,251,.9);
  border-bottom:1px solid rgba(27,81,56,.1);
  box-shadow:0 8px 28px rgba(18,55,40,.055);
  backdrop-filter:blur(18px) saturate(135%);
}
.storefront-page .nav { min-height:76px; }
.storefront-page .brand { color:#112c21; font-size:1.42rem; }
.storefront-page .brand-symbol {
  width:36px;
  height:36px;
  color:#f5fff7;
  border:0;
  background:linear-gradient(145deg,#216f49,#0a3a29);
  box-shadow:0 7px 17px rgba(13,62,42,.2);
}
.storefront-page .nav-links { gap:32px; }
.storefront-page .nav-links a { color:#425b50; font-weight:650; }
.storefront-page .nav-links a::before {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-9px;
  height:2px;
  border-radius:2px;
  background:#258755;
  transition:right .2s ease;
}
.storefront-page .nav-links a:hover::before { right:0; }

/* Photographic dual-court hero */
.storefront-page { background:#e8efea; }
.hero-wrap {
  min-height:710px;
  background:#0b2b21 url("assets/canchas-realistas-v3.png") center 46% / cover no-repeat;
}
.hero-wrap::before {
  inset:0;
  opacity:1;
  background:
    linear-gradient(90deg,rgba(5,28,21,.92) 0%,rgba(7,38,28,.81) 34%,rgba(8,35,29,.46) 58%,rgba(4,22,27,.24) 100%),
    linear-gradient(180deg,rgba(4,18,14,.16) 0%,rgba(4,23,17,.04) 58%,rgba(5,25,18,.42) 100%);
  transform:none;
}
.hero-wrap::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:180px;
  display:block;
  z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(5,27,19,.55));
  pointer-events:none;
}
.storefront-page .hero {
  min-height:650px;
  padding:56px 0 62px;
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.72fr);
  gap:76px;
}
.surface-pill {
  border-radius:999px;
  padding:8px 13px;
  color:#f3fff4;
  background:rgba(8,30,23,.42);
  border:1px solid rgba(210,247,218,.28);
  box-shadow:inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}
.surface-indoor { background:rgba(23,77,101,.38); border-color:rgba(173,226,246,.35); }
.storefront-page .hero h1 {
  max-width:700px;
  font-size:clamp(3.4rem,5.6vw,5.65rem);
  line-height:.93;
  letter-spacing:-.07em;
  text-wrap:balance;
  text-shadow:0 8px 34px rgba(0,0,0,.24);
}
.storefront-page .hero h1>span { color:#bdf6bd; }
.storefront-page .hero-copy>p {
  max-width:540px;
  color:rgba(241,250,244,.86);
  font-size:1.04rem;
  line-height:1.75;
  text-wrap:pretty;
}
.hero-copy .hero-actions .btn {
  min-height:48px;
  border-radius:12px;
  background:#baf4bc;
  border-color:#baf4bc;
  box-shadow:0 12px 28px rgba(3,20,13,.22);
}
.hero-copy .hero-actions .btn.secondary {
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.32);
  backdrop-filter:blur(10px);
}
.hero-copy .hero-signature { color:rgba(232,245,237,.76); }

/* Offer card */
.storefront-page .offer-carousel {
  width:min(100%,450px);
  justify-self:end;
  border:1px solid rgba(255,255,255,.78);
  border-radius:26px;
  background:rgba(250,253,249,.9);
  box-shadow:0 34px 75px rgba(0,23,22,.34),inset 0 1px rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(120%);
}
.offer-carousel::after { height:5px; background:linear-gradient(90deg,#7ade8c,#b8f3b8 58%,#6fbada); }
.offer-image-stage {
  background:radial-gradient(circle at 50% 38%,#fff 0%,#f0f7ed 56%,#e2eee7 100%);
  border:1px solid rgba(43,95,68,.09);
}
.offer-product-image { filter:drop-shadow(0 18px 18px rgba(18,54,37,.16)); }
.offer-contact { transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.offer-contact:hover { transform:translateY(-2px); box-shadow:0 11px 22px rgba(34,110,58,.16); }
.sport-ribbon {
  background:rgba(5,29,22,.86);
  border:0;
  backdrop-filter:blur(12px);
}
.sport-ribbon>.container { color:rgba(255,255,255,.76); }
.sport-ribbon .ui-icon,.sport-ribbon .ribbon-city { color:#b8f0c2; }

/* Content surfaces */
.storefront-page .section {
  position:relative;
  padding:88px 0;
  border-bottom:1px solid var(--hairline);
  background:rgba(246,249,246,.975);
}
.storefront-page #marcas { background:rgba(234,242,236,.975); }
.storefront-page #productos { background:#f8faf8; }
.storefront-page #ofertas { background:linear-gradient(135deg,#edf5f0 0%,#edf5f7 100%); }
.storefront-page #tienda { background:#f4f8f5; }
.storefront-page .section-head { margin-bottom:36px; }
.storefront-page .section h2 {
  margin-top:9px;
  color:#143b2b;
  font-size:clamp(2.2rem,4.7vw,4.3rem);
  line-height:.98;
  letter-spacing:-.065em;
}
.eyebrow { color:#26724b; }
.section-index { color:#6d8d7d; }

.storefront-page a.brand-tile {
  min-height:238px;
  padding:27px;
  border:1px solid rgba(40,91,64,.13);
  border-radius:24px;
  background:rgba(255,255,255,.84);
  box-shadow:0 10px 30px rgba(19,62,40,.055);
  backdrop-filter:blur(8px);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.storefront-page a.brand-tile:hover {
  transform:translateY(-7px);
  border-color:rgba(46,137,82,.45);
  background:#fff;
  box-shadow:0 22px 46px rgba(19,62,40,.12);
}
.brand-logo-stage { min-height:82px; display:flex; align-items:center; }
.brand-logo { transition:transform .24s ease; }
.brand-tile:hover .brand-logo { transform:scale(1.06); }
.brand-tile-link { border-top-color:rgba(28,86,55,.13); }

.storefront-page .product-card {
  border:1px solid rgba(28,77,52,.12);
  border-radius:24px;
  background:#fff;
  box-shadow:0 8px 24px rgba(18,59,39,.055);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.storefront-page .product-card:hover {
  transform:translateY(-7px);
  border-color:rgba(42,125,75,.36);
  box-shadow:0 24px 48px rgba(18,59,39,.13);
}
.storefront-page .product-image { height:275px; background:radial-gradient(circle at 50% 37%,#fff 0%,#edf4ef 72%); }
.storefront-page .product-image img { transition:transform .36s ease; }
.storefront-page .product-card:hover .product-image img { transform:scale(1.035); }
.storefront-page .product-body { padding:21px; }
.product-title { color:#152d24; line-height:1.22; }
.badge { top:16px; left:16px; box-shadow:0 5px 14px rgba(22,89,48,.12); }

.city-banner {
  border:1px solid rgba(32,96,69,.16);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--soft-shadow);
}
.storefront-page .info-card {
  border-radius:18px;
  box-shadow:0 7px 20px rgba(23,64,43,.045);
}
.storefront-page footer { background:#0d2d22; color:rgba(255,255,255,.66); border:0; }
.storefront-page footer strong { color:#fff; }
.footer-city,.footer-city .ui-icon { color:#aeeeb9; }
.storefront-page .whatsapp {
  width:62px;
  height:62px;
  border:4px solid rgba(255,255,255,.86);
  background:#22c965;
  color:#fff;
  box-shadow:0 14px 32px rgba(11,76,39,.27);
  transition:transform .2s ease,box-shadow .2s ease;
}
.storefront-page .whatsapp:hover { transform:translateY(-4px) scale(1.03); box-shadow:0 20px 38px rgba(11,76,39,.32); }

/* Catalogue */
.storefront-page.catalog-page {
  background:
    linear-gradient(rgba(245,249,246,.92),rgba(235,243,238,.96)),
    url("assets/canchas-realistas-v3.png") center top / 1900px auto no-repeat fixed;
}
.catalog-page .catalog-hero { padding:48px 0 46px; }
.catalog-page .catalog-hero h1 { color:#113829; }
.catalog-summary,.catalog-brand-tabs>a,.catalog-field select,.catalog-search-input {
  border-color:rgba(35,90,61,.15);
  box-shadow:0 6px 18px rgba(16,59,38,.045);
}
.catalog-summary { border-radius:18px; background:rgba(255,255,255,.84); backdrop-filter:blur(12px); }
.catalog-brand-tabs>a { background:rgba(255,255,255,.86); }
.catalog-brand-tabs>a:hover { transform:translateY(-2px); }
.catalog-brand-tabs>a.is-active { color:#fff; background:#176441; border-color:#176441; }
.catalog-tools {
  margin:24px 0 28px;
  padding:22px;
  border:1px solid rgba(31,86,58,.12);
  border-radius:20px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--soft-shadow);
  backdrop-filter:blur(12px);
}

/* Admin and sign-in visual refinement */
.admin-page { background:#f2f6f3; }
.auth-shell {
  background:
    linear-gradient(90deg,rgba(5,31,23,.86),rgba(7,43,31,.38)),
    url("assets/canchas-realistas-v3.png") center / cover no-repeat;
}
.auth-shell::before { display:none; }
.login-card {
  border:1px solid rgba(255,255,255,.78);
  border-radius:28px;
  background:rgba(255,255,255,.94);
  box-shadow:0 35px 80px rgba(0,27,18,.3);
  backdrop-filter:blur(18px);
}
.login-lock { border-radius:14px; background:#e8f6ed; }
.sidebar {
  background:#0e3226;
  border:0;
  box-shadow:10px 0 34px rgba(13,51,36,.08);
}
.sidebar .brand { color:#fff; }
.sidebar .side-link { color:rgba(255,255,255,.68); }
.sidebar .side-link.active,.sidebar .side-link:hover { color:#fff; background:rgba(186,244,188,.13); }
.sidebar .logout-link { color:#ffb9c1; }
.admin-main { padding:44px; }
.panel,.stat {
  border:1px solid rgba(31,78,53,.11);
  border-radius:20px;
  box-shadow:0 10px 28px rgba(17,54,37,.05);
}
.stat { position:relative; overflow:hidden; }
.stat::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:linear-gradient(90deg,#57c976,#86cbe2); }
.field input,.field select,.field textarea,.toolbar input,.toolbar select {
  min-height:46px;
  border-radius:11px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus,.toolbar input:focus,.toolbar select:focus {
  border-color:#4b9c70;
  box-shadow:0 0 0 4px rgba(75,156,112,.11);
  outline:0;
}

@media(max-width:980px) {
  .storefront-page .hero { grid-template-columns:1fr; gap:38px; }
  .hero-wrap { background-position:58% center; }
  .hero-wrap::before { background:linear-gradient(180deg,rgba(5,29,22,.88),rgba(6,35,26,.67) 52%,rgba(5,26,22,.42)); }
  .storefront-page .offer-carousel { max-width:600px; width:100%; margin:0; justify-self:start; }
  .products { gap:16px; }
  .sidebar { box-shadow:0 9px 25px rgba(13,51,36,.11); }
  .admin-main { padding:28px; }
}

@media(max-width:640px) {
  .container { width:min(100% - 30px,1220px); }
  .match-strip-note { display:none!important; }
  .match-strip>.container { justify-content:space-between; font-size:9px; }
  .storefront-page .nav { min-height:68px; }
  .storefront-page .nav-links { gap:22px; }
  .hero-wrap { min-height:0; background-position:56% center; }
  .storefront-page .hero { padding:35px 0 42px; }
  .storefront-page .hero h1 { font-size:clamp(3rem,13vw,4.2rem); }
  .storefront-page .section { padding:62px 0; }
  .storefront-page .brand-grid { grid-template-columns:1fr 1fr; }
  .storefront-page a.brand-tile { min-height:205px; padding:20px 17px; }
  .storefront-page .product-image { height:245px; }
  .catalog-tools { padding:17px; }
  .admin-main { padding:20px 15px; }
  .sidebar { background:#0e3226; }
}

@media(max-width:430px) {
  .storefront-page .brand-grid { grid-template-columns:1fr; }
  .storefront-page a.brand-tile { min-height:190px; }
  .hero-copy .hero-actions { display:grid; grid-template-columns:1fr 1fr; }
  .hero-copy .hero-actions .btn { padding-inline:12px; }
}

@media(prefers-reduced-motion:reduce) {
  .storefront-page *,.admin-page * { transition:none!important; }
}