/* Layout: una cancha de tierra marcada con cal. Hero café con líneas de cal dibujadas a mano;
   el resto en "polvo de cancha" con tinta azul marino. Una sola columna editorial, catálogo en grilla. */
:root{
  --tierra:#6E4429;        /* café potrero (marca, hero) */
  --tierra-2:#5A3720;
  --cal:#F7F3EC;           /* líneas de cal sobre la tierra */
  --polvo:#E4DACA;         /* fondo general */
  --superficie:#EFE8DC;
  --tinta:#15203A;         /* azul marino oscuro */
  --tinta-suave:#4A5168;
  --linea:#CBBFAA;
  --acento:#15203A;
  --acento-txt:#F7F3EC;
  --ok:#2F6B45;
  --display:"Big Shoulders Display","Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tierra:#5B3922; --tierra-2:#4A2E1B; --cal:#F1EADF;
    --polvo:#0F1628; --superficie:#172139; --tinta:#ECE3D4; --tinta-suave:#A9AFC2;
    --linea:#2A3552; --acento:#C9925F; --acento-txt:#0F1628; --ok:#7CC294;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --tierra:#5B3922; --tierra-2:#4A2E1B; --cal:#F1EADF;
  --polvo:#0F1628; --superficie:#172139; --tinta:#ECE3D4; --tinta-suave:#A9AFC2;
  --linea:#2A3552; --acento:#C9925F; --acento-txt:#0F1628; --ok:#7CC294;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--polvo);color:var(--tinta);font-family:var(--body);font-size:17px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--tierra)}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:.95;letter-spacing:.005em}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:2px}

/* ---------- header ---------- */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--tierra);color:var(--cal);border-bottom:2px dashed color-mix(in srgb,var(--cal) 35%,transparent)}
.top .wrap{display:flex;align-items:center;gap:20px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:44px;height:34px;flex:none}
.brand b{font-family:var(--display);font-weight:900;font-size:28px;letter-spacing:.06em}
nav.menu{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
nav.menu a{text-decoration:none;font-weight:500;font-size:15px;opacity:.9}
nav.menu a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-size:15px;text-decoration:none;padding:12px 18px;border-radius:3px;border:2px solid currentColor;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-cal{background:var(--cal);color:#15203A;border-color:var(--cal)}
.btn-linea{color:var(--cal)}
.btn-tinta{background:var(--acento);color:var(--acento-txt);border-color:var(--acento)}

/* ---------- hero (la cancha) ---------- */
.hero{background:var(--tierra);color:var(--cal);position:relative;overflow:hidden;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.05) 0 1px,transparent 2px),radial-gradient(circle at 70% 80%,rgba(0,0,0,.08) 0 1px,transparent 2px);
  background-size:7px 7px,11px 11px}
.hero .wrap{position:relative;z-index:1;padding-block:64px 72px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(56px,10vw,128px);font-weight:900;text-transform:uppercase}
.hero h1 span{display:block;color:transparent;-webkit-text-stroke:2px var(--cal)}
.hero p.lead{font-size:20px;max-width:34ch;margin:22px 0 28px;opacity:.95}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.cal-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cal-lines path{fill:none;stroke:var(--cal);stroke-width:3;stroke-linecap:round;opacity:.28;stroke-dasharray:1600;stroke-dashoffset:0;animation:trazo 1.6s ease-out both}
@keyframes trazo{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
.ficha{background:color-mix(in srgb,var(--tierra-2) 80%,transparent);border:2px solid color-mix(in srgb,var(--cal) 40%,transparent);padding:22px;border-radius:4px;max-width:380px;justify-self:end;width:100%}
.ficha .eyebrow{opacity:.8}
.ficha ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.ficha li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font-size:16px}
.ficha li svg{width:22px;height:22px;margin-top:2px}

/* ---------- secciones ---------- */
section{padding-block:72px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.sec-head h2{font-size:clamp(40px,6vw,64px);font-weight:800;text-transform:uppercase}
.sec-head p{max-width:46ch;margin:0;color:var(--tinta-suave)}

/* catálogo */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.card{background:var(--superficie);border:1px solid var(--linea);border-radius:4px;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.card .foto{aspect-ratio:4/5;max-width:100%;background:
  repeating-linear-gradient(90deg,transparent 0 46px,color-mix(in srgb,var(--linea) 55%,transparent) 46px 48px),var(--polvo);
  display:grid;place-items:center;position:relative}
.card .foto svg{width:62%;height:auto}
.tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:2px;background:var(--acento);color:var(--acento-txt)}
.card .info{padding:18px;display:grid;gap:10px;flex:1}
.card h3{font-size:30px;font-weight:800;text-transform:uppercase}
.specs{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-family:var(--mono);font-size:13px;margin:0}
.specs dt{color:var(--tinta-suave)}
.specs dd{margin:0}
.precio{font-family:var(--display);font-weight:800;font-size:34px;font-variant-numeric:tabular-nums}
.card .pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.card .foto img{width:100%;height:100%;object-fit:cover;display:block}
.tag.vendida{background:var(--tinta-suave)}
.card.vendida .precio{text-decoration:line-through;opacity:.6}
.card.pronto{border-style:dashed;background:transparent}
.card.pronto .foto{background:transparent}
.card.pronto .info p{margin:0;color:var(--tinta-suave)}
.nota{font-size:13px;color:var(--tinta-suave);margin-top:18px}

/* cómo comprar */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--tinta)}
.paso{padding:24px 24px 8px 0;display:grid;gap:8px;align-content:start}
.paso + .paso{padding-left:24px;border-left:1px solid var(--linea)}
.paso .n{font-family:var(--display);font-weight:900;font-size:64px;line-height:1;color:var(--acento)}
.paso h3{font-size:28px;font-weight:800;text-transform:uppercase}
.paso p{margin:0;color:var(--tinta-suave)}

/* autenticidad: banda azul */
.banda{background:#15203A;color:#F1EADF}
:root[data-theme="dark"] .banda{background:var(--superficie)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .banda{background:var(--superficie)}}
.banda .sec-head p{color:inherit;opacity:.8}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.check{border-top:3px solid #C9925F;padding-top:16px}
.check h3{font-size:26px;font-weight:800;text-transform:uppercase;margin-bottom:6px}
.check p{margin:0;opacity:.85}

/* tallas */
.tallas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.tallas p{max-width:52ch}
.medir{background:var(--superficie);border:1px solid var(--linea);border-radius:4px;padding:24px}
.medir svg{width:100%;height:auto;max-width:360px;display:block;margin:0 auto}
.medir svg .tela{fill:var(--polvo);stroke:var(--tinta);stroke-width:2.5}
.medir svg .cota{stroke:var(--acento);stroke-width:2.5}
.medir svg text{fill:var(--tinta);font-family:var(--mono);font-size:13px}

/* encargos */
.encargo{background:var(--tierra);color:var(--cal);border-radius:4px;padding:40px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center}
.encargo h2{font-size:clamp(38px,5.5vw,58px);font-weight:900;text-transform:uppercase}
.encargo p{margin:12px 0 0;max-width:44ch}
.handle{font-family:var(--mono);font-size:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.handle code{background:var(--tierra-2);padding:8px 12px;border-radius:3px;user-select:all}
.copiar{font:inherit;font-family:var(--body);font-size:14px;font-weight:600;background:transparent;color:var(--cal);border:2px solid var(--cal);border-radius:3px;padding:7px 12px;cursor:pointer}

/* ---------- ¿dónde dan el partido? ---------- */
.ddp-top{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px}
.buscar{flex:1 1 320px;min-width:0;font:inherit;font-size:16px;padding:12px 14px;border-radius:3px;border:1.5px solid var(--linea);background:var(--superficie);color:var(--tinta)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;border:1.5px solid var(--linea);background:transparent;color:var(--tinta);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--acento);color:var(--acento-txt);border-color:var(--acento)}
.dias{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
.dia-btn{flex:0 0 auto;display:grid;justify-items:center;min-width:60px;padding:8px 10px;border:2px solid var(--linea);border-radius:4px;background:transparent;color:var(--tinta);cursor:pointer;font:inherit}
.dia-btn b{font-family:var(--display);font-weight:800;font-size:28px;line-height:1}
.dia-btn small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.dia-btn[aria-pressed="true"]{background:var(--tierra);border-color:var(--tierra);color:var(--cal)}
.dia-btn[aria-pressed="true"] small{color:inherit}
.partido{border-top:2px solid var(--tinta)}
.partido:last-child{border-bottom:2px solid var(--tinta)}
.p-head{width:100%;display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 2px;background:none;border:0;color:var(--tinta);text-align:left;cursor:pointer;font:inherit}
.p-head:hover{background:color-mix(in srgb,var(--superficie) 70%,transparent)}
.hora{font-family:var(--display);font-weight:800;font-size:32px;line-height:1;font-variant-numeric:tabular-nums;color:var(--acento)}
.hora small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);margin-top:4px}
.equipos{font-family:var(--display);font-weight:800;font-size:25px;text-transform:uppercase;line-height:1.05;min-width:0}
.equipos small{font-family:var(--body);font-weight:500;font-size:14px;text-transform:none;color:var(--tinta-suave);margin:0 6px}
.comp{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave);margin-top:6px}
.tv{display:block;font-family:var(--body);font-weight:500;font-size:14px;text-transform:none;color:var(--tinta-suave);margin-top:2px}
.cuenta{font-size:13px;color:var(--tinta-suave);white-space:nowrap;text-align:right}
.cuenta b{font-family:var(--display);font-size:24px;color:var(--tinta)}
.cuenta b.ok{color:var(--ok)}
.p-head[aria-expanded="true"] .equipos{color:var(--acento)}
.bares{padding:4px 2px 20px;display:grid;gap:10px}
.aviso{font-size:14px;color:var(--tinta-suave);margin:4px 0}
.bar{display:grid;gap:4px;background:var(--superficie);border:1px solid var(--linea);border-radius:4px;padding:12px 14px}
.bar.is-no{opacity:.55}
.bar-top{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;align-items:baseline}
.bar b{font-size:16px}
.bar .dir{font-size:13.5px;color:var(--tinta-suave)}
.links{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--tinta-suave)}
.links a{font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;color:var(--tinta)}
.warn{color:var(--acento)}
.estado{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
.st-confirmado{color:var(--ok)}
.st-suele{color:var(--acento)}
.st-tv,.st-no{color:var(--tinta-suave)}
.reporta{font-size:14px;margin:6px 0 0}
.vacio{padding:24px 0;color:var(--tinta-suave);border-top:2px solid var(--tinta)}
.fuentes{font-size:14px;color:var(--tinta-suave);margin-top:22px;max-width:80ch}
.fuentes summary{cursor:pointer;font-weight:600;color:var(--tinta)}
.fuentes ul{padding-left:18px;display:grid;gap:4px}
/* Camiseta ligada al partido: solo aparece si hay stock de alguno de los dos equipos */
.p-camis{display:grid;gap:8px;margin:-4px 0 14px 94px}
.p-cami{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--tinta-suave)}
.p-cami svg{width:22px;height:24px;flex:0 0 auto}
.p-cami .txt{flex:1 1 220px;min-width:0}
.p-cami .txt b{color:var(--tinta);font-weight:600}
.p-cami .btn{padding:6px 12px;font-size:13px;border-width:1.5px}
.p-cami.grande{background:var(--superficie);border:1px solid var(--linea);border-left:4px solid var(--acento);border-radius:4px;padding:12px 14px}
.p-cami.grande .txt{font-size:15px}
.p-cami.grande .gancho{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acento);margin-bottom:2px}
.p-cami.grande img{width:48px;height:48px;object-fit:cover;border-radius:3px;flex:0 0 auto}
.p-mas{font-size:13px;color:var(--tinta-suave)}
.p-mas a{color:var(--tinta);font-weight:600}
@media (max-width:640px){
  .p-head{grid-template-columns:58px minmax(0,1fr);gap:4px 12px}
  .hora{font-size:26px;grid-row:1 / span 2}
  .equipos{font-size:21px}
  .cuenta{grid-column:2;text-align:left}
  .p-camis{margin-left:70px}
}

/* ---------- ofrece tu camiseta ---------- */
.ofrece{padding-block:0 72px}
.ofrece-hero{background:var(--tierra);color:var(--cal)}
.ofrece-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end;padding-block:56px 64px}
.ofrece-intro{display:grid;gap:18px}
.ofrece-intro h2{font-size:clamp(56px,9vw,104px);font-weight:900;text-transform:uppercase}
.ofrece-intro p{margin:0;font-size:19px;max-width:36ch}
.ficha .lista-busca li{display:block}
.lista-busca{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px;font-size:16px}
.rangos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.rango{background:var(--superficie);border:1px solid var(--linea);border-radius:4px;padding:20px;display:grid;gap:8px}
.rango .eyebrow{margin:0;color:var(--tinta-suave)}
.rango b{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.rango span{font-size:14px;color:var(--tinta-suave)}
.estados{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:2px solid var(--tinta);margin-top:18px}
.estados div{padding:14px 16px 0 0;display:grid;gap:2px}
.estados span{font-size:14px;color:var(--tinta-suave)}
.pasos4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ofrece-cta{margin-top:48px;background:#15203A;color:#F1EADF;border-radius:4px;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ofrece-cta b{display:block;font-family:var(--display);font-weight:800;font-size:32px;text-transform:uppercase;line-height:1}
.ofrece-cta span{opacity:.85}
.chips-sel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chip-sel{font:inherit;text-align:left;cursor:pointer;border-radius:4px;padding:11px 12px;border:2px solid var(--linea);background:var(--superficie);color:var(--tinta);font-size:14px;font-weight:600}
.chip-sel small{display:block;font-weight:400;font-size:12.5px;color:var(--tinta-suave);margin-top:2px}
.chip-sel[aria-pressed="true"]{border-color:var(--tinta);background:var(--tinta);color:var(--cal)}
.chip-sel[aria-pressed="true"] small{color:inherit;opacity:.8}
.fotos-of{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.foto-of{position:relative;aspect-ratio:4/5;border:2px dashed var(--linea);border-radius:4px;background:var(--superficie);display:grid;place-items:center;text-align:center;font-size:13px;font-weight:600;color:var(--tinta-suave);cursor:pointer;overflow:hidden;padding:6px}
.foto-of.clave{border-color:var(--tierra);color:var(--tierra)}
.foto-of img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-of input{position:absolute;inset:0;opacity:0;cursor:pointer}
.precio-box{background:#15203A;color:#F1EADF;border-radius:4px;padding:18px;display:grid;gap:10px}
.precio-box b{font-family:var(--display);font-weight:800;font-size:48px;line-height:1;font-variant-numeric:tabular-nums}
.precio-box input{width:100%;accent-color:#C9925F}
.precio-box .ext{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;opacity:.85}
.aviso-no{border:1.5px solid #9E2B20;border-radius:4px;padding:14px;background:var(--superficie)}
.decl{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.decl input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--tierra)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:820px){.ofrece-grid{grid-template-columns:1fr}.pasos4{grid-template-columns:1fr}}
/* ---------- checkout ---------- */
.contactos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.contacto-item{border-top:3px solid var(--tierra);padding-top:14px;display:grid;gap:6px}
.contacto-item .eyebrow{margin:0;color:var(--tinta-suave)}
.contacto-item .dato{font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,36px);text-decoration:none;color:var(--tinta);word-break:break-word}
.muted-sm{font-size:14px;color:var(--tinta-suave)}
.envio-gratis{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ok)}
dialog.checkout{border:0;border-radius:6px;padding:0;width:min(640px,calc(100% - 24px));max-height:calc(100dvh - 24px);background:var(--polvo);color:var(--tinta)}
dialog.checkout::backdrop{background:rgba(21,32,58,.55)}
.co-head{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px 20px;background:var(--tierra);color:var(--cal)}
.co-head .mini{width:72px;aspect-ratio:4/5;border-radius:3px;overflow:hidden;background:var(--polvo);display:grid;place-items:center}
.co-head .mini img,.co-head .mini svg{width:100%;height:100%;object-fit:cover}
.co-head h3{font-size:26px;font-weight:800;text-transform:uppercase;line-height:1}
.co-head .x{background:none;border:0;color:var(--cal);font-size:28px;cursor:pointer;line-height:1;padding:4px 8px}
.co-body{padding:18px 20px 22px;display:grid;gap:16px}
.co-sec{display:grid;gap:10px}
.co-sec > b{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}
.op-envio{display:grid;gap:8px}
.op{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:2px solid var(--linea);border-radius:4px;background:var(--superficie);cursor:pointer}
.op:has(input:checked){border-color:var(--tinta)}
.op input{width:18px;height:18px;accent-color:var(--tierra)}
.op small{display:block;color:var(--tinta-suave);font-size:13.5px}
.op .val{font-family:var(--mono);font-size:13px;text-align:right;white-space:nowrap}
.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.campos .full{grid-column:1/-1}
.campos label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--tinta-suave)}
.campos input,.campos select,.campos textarea{font:inherit;font-size:16px;padding:10px 11px;border:1.5px solid var(--linea);border-radius:3px;background:var(--superficie);color:var(--tinta);min-width:0;width:100%}
.resumen{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-variant-numeric:tabular-nums;padding:12px 14px;background:var(--superficie);border:1px solid var(--linea);border-radius:4px}
.resumen .tot{font-family:var(--display);font-weight:800;font-size:28px}
.co-err{color:#9E2B20;font-weight:600;margin:0}
.co-pagar{width:100%;justify-content:center;font-size:17px;padding:14px}
.co-legal{font-size:12.5px;color:var(--tinta-suave);margin:0}
@media (max-width:520px){.campos{grid-template-columns:1fr}.co-head{grid-template-columns:56px minmax(0,1fr) auto}.co-head .mini{width:56px}}
footer{border-top:1px solid var(--linea);padding-block:32px;font-size:14px;color:var(--tinta-suave)}
footer .wrap{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}
footer p{margin:0;max-width:60ch}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;padding-block:44px 52px}
  .ficha{justify-self:start;max-width:none}
  .pasos{grid-template-columns:1fr}
  .paso,.paso + .paso{padding:20px 0;border-left:0;border-bottom:1px solid var(--linea)}
  .tallas,.encargo{grid-template-columns:1fr}
  .encargo{padding:28px 22px}
  nav.menu{order:3;width:100%;margin-left:0;gap:16px}
  .top .btn{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- multipágina ---------- */
nav.menu a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.menu-btn{display:none;font:inherit;font-weight:600;font-size:15px;background:transparent;color:var(--cal);border:2px solid color-mix(in srgb,var(--cal) 60%,transparent);border-radius:3px;padding:9px 12px;cursor:pointer}
.pagina-sola{padding-block:56px 72px}
footer.pie{border-top:0;padding-block:0}
footer.pie .contacto-wrap{padding-block:56px 40px}
footer.pie .legal{border-top:1px solid var(--linea);padding-block:28px;display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;font-size:14px;color:var(--tinta-suave)}
footer.pie .legal p{margin:0;max-width:60ch}
@media (max-width:820px){
  .top .wrap{flex-wrap:wrap}
  .menu-btn{display:inline-flex;margin-left:auto}
  .top .btn-cal{margin-left:0}
  nav.menu{display:none;order:3;width:100%;flex-direction:column;gap:0;margin:4px 0 0}
  nav.menu.abierto{display:flex}
  nav.menu a{padding:12px 0;border-top:1px solid color-mix(in srgb,var(--cal) 25%,transparent);font-size:17px}
}