/* Grafic Sport — site-specific styles (design plan: brand.md §6) */

@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:optional;src:url(https://fonts.gstatic.com/s/barlow/v13/7cHpv4kjgoGqM7E_DMs5.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:optional;src:url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E3_-gs51os.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:optional;src:url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3bWuQ.woff2) format("woff2")}

:root{
  --rojo:#8c1d1d; --rojo-sombra:#551212; --tinta:#141414;
  --bg-alt:#f4f3f1; --line:#e2e1de; --ink:#141414; --ink-2:#4a4845; --ink-3:#6b6965;
  --header-h:64px; --container:1200px;
}
body{font-weight:400}
h1,h2,h3,h4{font-weight:700;letter-spacing:0}
h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);line-height:1}
h3{font-weight:700}
:focus-visible{outline-color:#f2b705}
a{color:var(--rojo)}

/* ---- Buttons ---- */
.btn{border-radius:var(--radius);font-weight:500;letter-spacing:.01em;min-height:48px}
.btn svg{flex:none}
.btn-wa{background:var(--rojo);color:#fff}
.btn-wa:hover{background:var(--rojo-sombra);color:#fff}
.btn-light{background:#fff;color:var(--rojo)}
.btn-light:hover{background:#f4f3f1;color:var(--rojo-sombra)}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

/* ---- Header (ink, like the logo's ground) ---- */
.site-header{background:var(--tinta);border-bottom:0;backdrop-filter:none}
.site-header .container{gap:var(--s-3)}
.brand img{height:40px;width:auto}
.nav a{color:#e9e7e4;font-weight:500;font-size:var(--fs-md)}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:.35em}
.header-actions{display:flex;align-items:center;gap:var(--s-2)}
.header-actions .btn{padding:.6em 1em;font-size:var(--fs-sm)}
.nav-toggle{color:#fff;min-width:48px;min-height:48px;justify-content:center;align-items:center}
@media(max-width:860px){
  .nav{background:var(--tinta);border-bottom:1px solid #2a2a2a}
  .nav a{border-bottom-color:#2a2a2a}
  .header-actions .btn .long{display:none}
}
@media(min-width:861px){.header-actions{order:3}.nav{margin-left:auto;margin-right:var(--s-4)}}

/* ---- Hero: the brand's red, the line in big condensed type ---- */
.hero-red{background:var(--rojo);color:#fff;padding-block:clamp(3rem,7vw,5.5rem) clamp(9rem,14vw,12rem);position:relative;overflow:hidden}
.hero-red::after{content:"";position:absolute;inset:auto -10% -40% 45%;height:120%;background:var(--rojo-sombra);opacity:.55;transform:skewY(-20deg);pointer-events:none}
.hero-red .container{position:relative;z-index:1}
.hero-red h1{font-size:clamp(2.9rem,1.6rem + 6vw,6.6rem);line-height:.92;text-transform:uppercase;max-width:15ch;margin-bottom:var(--s-5)}
.hero-red .lede{color:rgba(255,255,255,.9);font-size:clamp(1.08rem,1rem + .4vw,1.3rem);max-width:52ch}
.hero-red .actions{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* ---- The shelf: real products, real prices (the memorable element) ---- */
.shelf-wrap{margin-top:clamp(-9rem,-11vw,-6.5rem);position:relative;z-index:2}
.shelf{background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(20,20,20,.35);display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.shelf{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.shelf{grid-template-columns:repeat(6,1fr)}}
.shelf figure{margin:0;padding:var(--s-4) var(--s-4) var(--s-5);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;animation:rise .7s var(--ease) both}
.shelf figure:nth-child(2){animation-delay:.06s}.shelf figure:nth-child(3){animation-delay:.12s}
.shelf figure:nth-child(4){animation-delay:.18s}.shelf figure:nth-child(5){animation-delay:.24s}.shelf figure:nth-child(6){animation-delay:.3s}
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.shelf figure{animation:none}}
.shelf img{width:100%;aspect-ratio:1/1;object-fit:contain}
.shelf figcaption{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.35;flex:1}
.shelf .price{display:block;margin-top:var(--s-2);font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--tinta);line-height:1;font-variant-numeric:tabular-nums}
.shelf-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-4);padding-top:var(--s-5)}
.shelf-foot p{margin:0;color:var(--ink-2);font-size:var(--fs-sm)}

/* ---- Disciplines as an editorial list ---- */
.disciplinas{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)}
.disciplinas li{display:grid;grid-template-columns:1fr;gap:var(--s-2);padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
@media(min-width:760px){.disciplinas li{grid-template-columns:minmax(220px,1fr) 2fr;gap:var(--s-6);align-items:baseline}}
.disciplinas h3{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);margin:0;line-height:1}
.disciplinas p{margin:0;color:var(--ink-2)}
.disciplinas a{font-weight:500}

/* ---- Línea Grafic Sport ---- */
.linea{display:grid;gap:var(--s-4);grid-template-columns:1fr 1fr}
@media(min-width:900px){.linea{grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto auto}}
.linea figure{margin:0;background:#fff;border:1px solid var(--line);padding:var(--s-4);display:flex;flex-direction:column}
.linea figure.wide{grid-column:1/-1}
@media(min-width:900px){.linea figure.wide{grid-column:1;grid-row:1/3}}
.linea img{width:100%;aspect-ratio:1/1;object-fit:contain}
.linea figcaption{margin-top:var(--s-3);display:flex;justify-content:space-between;gap:var(--s-3);align-items:baseline;font-size:var(--fs-sm);color:var(--ink-2)}
.linea figcaption b{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);color:var(--tinta);white-space:nowrap;font-variant-numeric:tabular-nums}
.linea-head{display:grid;gap:var(--s-5);margin-bottom:var(--s-7)}
@media(min-width:900px){.linea-head{grid-template-columns:1fr 1fr;align-items:end}}
.linea-head h2{margin:0}

/* ---- Orders: facts, not promises ---- */
.pedidos{display:grid;gap:var(--s-7)}
@media(min-width:900px){.pedidos{grid-template-columns:1fr 1.2fr}}
.facts{margin:0;display:grid;border-top:2px solid var(--tinta)}
.facts div{display:grid;grid-template-columns:1fr;gap:var(--s-1);padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
@media(min-width:600px){.facts div{grid-template-columns:11rem 1fr;gap:var(--s-5)}}
.facts dt{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);line-height:1.2}
.facts dd{margin:0;color:var(--ink-2)}

/* ---- Visit (ink) ---- */
.visita{background:var(--tinta);color:#e9e7e4}
.visita h2{color:#fff}
.visita a{color:#fff}
.visita .grid-visit{display:grid;gap:var(--s-7)}
@media(min-width:900px){.visita .grid-visit{grid-template-columns:1fr 1.2fr;align-items:start}}
.visita address{font-style:normal;font-size:var(--fs-lg);line-height:1.45;margin-bottom:var(--s-5)}
.visita .contact-lines{display:grid;gap:var(--s-3);margin-bottom:var(--s-6)}
.visita .contact-lines a{font-weight:500;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(255,255,255,.4)}
.visita .muted{color:#b9b6b1}
.map{border-color:#2a2a2a;aspect-ratio:4/3}

/* ---- Footer ---- */
.site-footer{background:#0b0b0b}
.site-footer .brand img{height:44px}

/* ---- Inner pages ---- */
.page-head{background:var(--rojo);color:#fff;padding-block:clamp(2.5rem,6vw,4.5rem)}
.page-head h1{font-size:clamp(2.6rem,1.6rem + 4vw,4.8rem);line-height:.95;text-transform:uppercase;margin-bottom:var(--s-4);max-width:18ch}
.page-head .lede{color:rgba(255,255,255,.9)}
.catalogo{display:grid;gap:0;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(min-width:760px){.catalogo{grid-template-columns:repeat(4,1fr)}}
.catalogo figure{margin:0;padding:var(--s-4);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;background:#fff}
.catalogo img{width:100%;aspect-ratio:1/1;object-fit:contain}
.catalogo figcaption{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--ink-2);flex:1}
.catalogo .price{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);color:var(--tinta);line-height:1.1;margin-top:var(--s-2);font-variant-numeric:tabular-nums}
.catalogo .ask{margin-top:var(--s-3);font-size:var(--fs-sm);font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.disc-block{padding-block:var(--s-7);border-bottom:1px solid var(--line)}
.disc-block:last-child{border-bottom:0}
.disc-block h2{font-size:clamp(1.9rem,1.4rem + 1.8vw,2.8rem)}
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);margin-top:var(--s-7)}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.1em}
.prose li{margin-bottom:.4em}
.form{max-width:640px}
.form button{justify-self:start}