@font-face{font-family:"Bricolage";src:url("/static/bricolage.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{--amarillo:#FFCD14;--rojo:#C81E1E;--tinta:#1E1A12;--papel:#FFFDF6;--noche:#1A1730;--raya:#E9E1C9;--gris:#6B6350;--verde:#0B6B43;--radio:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 16px/1.5 "Bricolage",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}
.ancho{max-width:1180px;margin:0 auto;padding:0 16px}

/* cabecera: la franja amarilla con rayos es la firma de la marca (la misma de los vídeos) */
.cab{background:linear-gradient(#1E1A34,#0E0C1A);position:relative;border-bottom:3px solid var(--amarillo);overflow:hidden}
.cab::before{content:"";position:absolute;inset:-60% -10%;background:repeating-conic-gradient(from 6deg at 50% 62%,#302A50 0 12.86deg,transparent 12.86deg 25.72deg);opacity:.9}
.cab .ancho{position:relative}
.cab .ancho{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:14px;padding-bottom:14px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.marca img{width:46px;height:46px;border-radius:50%;border:2px solid var(--amarillo)}
.marca b{font-weight:800;font-size:1.9rem;letter-spacing:-.04em;color:var(--amarillo);line-height:1}
.buscar{display:flex;flex:1 1 260px;max-width:460px}
.buscar input{flex:1;min-width:0;font:inherit;padding:10px 14px;border:2px solid var(--amarillo);border-right:0;border-radius:999px 0 0 999px;background:#fff}
.buscar button{font:inherit;font-weight:700;padding:10px 18px;border:2px solid var(--amarillo);border-radius:0 999px 999px 0;background:var(--amarillo);color:var(--tinta);cursor:pointer}
.canal{font-weight:700;text-decoration:none;background:var(--rojo);color:#fff;padding:10px 16px;border-radius:999px;border:2px solid #fff;white-space:nowrap}

.cats{border-bottom:1px solid var(--raya);background:#fff}
.cats .ancho{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:0;padding-bottom:0}
.cats a{flex:none;text-decoration:none;padding:12px 12px 10px;border-bottom:3px solid transparent;color:var(--gris);font-weight:600}
.cats a[aria-current]{color:var(--tinta);border-color:var(--rojo)}
.cats a.err{color:var(--rojo)}

.intro{padding:26px 0 6px}
.intro h1{font-weight:800;font-size:clamp(1.7rem,4.6vw,2.7rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 8px;max-width:20ch}
.intro p{margin:0;color:var(--gris);max-width:62ch}
.orden{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
.orden a{text-decoration:none;font-weight:600;padding:7px 14px;border:1.5px solid var(--raya);border-radius:999px;background:#fff}
.orden a[aria-current]{border-color:var(--tinta);background:var(--tinta);color:#fff}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin:0 0 30px;padding:0;list-style:none}
@media(min-width:700px){.rejilla{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:18px}}
.of{position:relative;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--tinta);border-radius:var(--radio);overflow:hidden;text-decoration:none}
.of:hover{box-shadow:5px 5px 0 var(--amarillo)}
.of .foto{aspect-ratio:1/1;background:#fff;display:grid;place-items:center;padding:14px;border-bottom:1px solid var(--raya)}
.of .foto img{max-height:100%;object-fit:contain}
.of .txt{padding:11px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.of h2{font-size:.93rem;font-weight:600;line-height:1.28;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:auto}
.precio b{font-size:1.42rem;font-weight:800;letter-spacing:-.03em;color:var(--rojo)}
.precio s{color:var(--gris);font-size:.88rem}
.meta{font-size:.78rem;color:var(--gris);line-height:1.35}
/* la etiqueta de precio: como la del logo, con su agujero */
.tag{position:absolute;top:10px;left:-2px;background:var(--rojo);color:#fff;font-weight:800;font-size:1rem;letter-spacing:-.02em;padding:4px 12px 4px 20px;border-radius:0 999px 999px 0;border:1.5px solid var(--tinta);border-left:0;transform:rotate(-4deg);transform-origin:left center}
.tag::before{content:"";position:absolute;left:7px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;border:1.5px solid var(--tinta)}
.sello{align-self:flex-start;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--amarillo);border:1px solid var(--tinta)}
.of.error{background:var(--noche);color:#fff;border-color:var(--noche)}
.of.error .precio b{color:var(--amarillo)}
.of.error .precio s,.of.error .meta{color:#C9C4E4}
.of.error .tag{background:var(--amarillo);color:var(--tinta)}
.of.error .sello{background:var(--rojo);color:#fff;border-color:#fff}
.of.fin{opacity:.62}
.of.fin .foto img{filter:grayscale(1)}
.of.fin .tag{background:var(--gris)}
.of.fin .precio b{color:var(--gris);text-decoration:line-through}

.vacio{border:2px dashed var(--raya);border-radius:var(--radio);padding:34px 20px;text-align:center;color:var(--gris);margin:10px 0 40px}
.vacio a{font-weight:700;color:var(--rojo)}
.pag{display:flex;justify-content:center;gap:12px;margin:0 0 40px}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:999px;border:2px solid var(--tinta);background:#fff;cursor:pointer;font:inherit;font-weight:700}
.btn.rojo{background:var(--rojo);color:#fff}
.btn.neg{background:var(--tinta);color:#fff}

/* ficha */
.migas{font-size:.86rem;color:var(--gris);margin:18px 0 10px}
.ficha{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-bottom:34px}
.ficha>*{min-width:0}
@media(min-width:820px){.ficha{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:38px;align-items:start}}
.ficha .foto{background:#fff;border:1.5px solid var(--tinta);border-radius:var(--radio);padding:24px;aspect-ratio:1/1;display:grid;place-items:center;position:relative}
.ficha .foto img{max-height:100%;object-fit:contain}
.ficha h1{font-size:clamp(1.3rem,3.2vw,1.9rem);line-height:1.15;letter-spacing:-.025em;font-weight:700;margin:0 0 14px}
.ahora{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.ahora b{font-size:clamp(2.6rem,9vw,3.8rem);font-weight:800;letter-spacing:-.05em;color:var(--rojo);line-height:1}
.ahora .pct{font-weight:800;background:var(--rojo);color:#fff;padding:2px 10px;border-radius:999px;border:1.5px solid var(--tinta);transform:rotate(-4deg)}
.datos{margin:16px 0 18px;padding:0;list-style:none;border-top:1px solid var(--raya)}
.datos li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--raya)}
.datos span{color:var(--gris)}
.datos b{text-align:right;font-weight:600}
.datos .ahorro b{color:var(--verde);font-weight:800}
.aviso{background:#FFF4CC;border:1.5px solid var(--tinta);border-radius:var(--radio);padding:12px 14px;margin:0 0 16px;font-size:.93rem}
.aviso.err{background:var(--noche);color:#fff;border-color:var(--noche)}
.aviso.fin{background:#EFECE2}
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.nota{font-size:.82rem;color:var(--gris);max-width:60ch}

/* páginas de texto y enlaces */
.texto{max-width:68ch;padding:24px 0 40px}
.texto h1{font-size:2rem;letter-spacing:-.03em;line-height:1.1;margin:0 0 14px}
.texto h2{font-size:1.15rem;margin:26px 0 6px}
.enlaces{max-width:440px;margin:0 auto;padding:34px 0 46px;text-align:center}
.enlaces img{width:110px;height:110px;border-radius:50%;border:3px solid var(--tinta);margin:0 auto 12px}
.enlaces h1{font-size:2.3rem;color:var(--rojo);letter-spacing:-.04em;margin:0 0 4px;font-weight:800}
.enlaces p{color:var(--gris);margin:0 0 22px}
.enlaces a.btn{display:block;margin:0 0 12px;font-size:1.05rem;padding:15px 20px}

.pie{border-top:3px solid var(--tinta);background:#fff;padding:22px 0 34px;font-size:.86rem;color:var(--gris)}
.pie nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0}
.pie p{margin:0 0 6px;max-width:80ch}
@media(prefers-reduced-motion:no-preference){.of{transition:box-shadow .12s}}

/* top del día en la portada */
.top{margin:20px -16px 6px;padding:16px 16px 2px;background:linear-gradient(#1E1A34,#0E0C1A);color:#fff;border-top:3px solid var(--amarillo);border-bottom:3px solid var(--amarillo)}
.top .tit h2{color:var(--amarillo)}
.top .of{color:var(--tinta)}
.top .of.error{color:#fff;border-color:var(--amarillo)}
@media(min-width:1212px){.top{margin-left:0;margin-right:0;border:3px solid var(--amarillo);border-radius:var(--radio)}}
.top .tit{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;margin:0 0 14px}
.top .tit h2,.sec{font-size:1.45rem;font-weight:800;letter-spacing:-.03em;margin:0;line-height:1.1}
.top .tit a{font-weight:700}
.top .rejilla{margin-bottom:16px}
.sec{margin:26px 0 0}

/* menú de categorías: en pantallas anchas se reparte en varias líneas; en el móvil se desliza y se difumina al final */
@media(min-width:760px){.cats .ancho{flex-wrap:wrap;overflow:visible}}
@media(max-width:759px){.cats .ancho{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent);padding-right:40px}}