/* Banners de Black Friday — precio por mayor (inc/black-friday.php). Servido directo, sin build-css. */

/* 1. Barra superior (lo crítico va en línea en el <head>) */
.sh-bf-bar:hover{ color:#F3F2EF; text-decoration:none; }
.sh-bf-kicker{ font-size:11px; font-weight:700; letter-spacing:.08em; color:#D29B3D; }
.sh-bf-bar-end{ color:#D29B3D; font-weight:600; }
.sh-bf-bar-m{ display:none; }
@media (max-width:767px){
	.sh-bf-kicker{ font-size:10.5px; }
	.sh-bf-bar-d{ display:none; }
	.sh-bf-bar-m{ display:inline; }
}

/* 2. Hero del inicio — opción C «Por mayor, en trío» (aprobada 2026-11-02) */
.sh-bf-hero{ position:relative; overflow:hidden; background:#050F0E; color:#F3F2EF; }
.sh-bf-hero-in{ max-width:1366px; margin:0 auto; min-height:540px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:center; gap:40px; padding:40px 56px 40px 64px; }
.sh-bf-hero-txt{ animation:sh-bf-rise .8s cubic-bezier(.16,1,.3,1) both; }
.sh-bf-h{ margin:0; }
.sh-bf-bfw{ position:relative; display:block; color:#D29B3D; font-family:Inter,system-ui,sans-serif; font-weight:900; text-transform:uppercase; font-size:46px; letter-spacing:.06em; line-height:.95; }
.sh-bf-bfw::after{ content:attr(data-t); position:absolute; inset:0; color:#F2CF86; -webkit-mask-image:linear-gradient(105deg,transparent 40%,#000 50%,transparent 60%); mask-image:linear-gradient(105deg,transparent 40%,#000 50%,transparent 60%); -webkit-mask-size:300% 100%; mask-size:300% 100%; -webkit-mask-position:120% 0; mask-position:120% 0; animation:sh-bf-shine 7s cubic-bezier(.3,.6,.2,1) .8s infinite; pointer-events:none; }
@keyframes sh-bf-shine{ 0%{ -webkit-mask-position:120% 0; mask-position:120% 0; } 22%,100%{ -webkit-mask-position:-20% 0; mask-position:-20% 0; } }
@keyframes sh-bf-rise{ from{ opacity:.001; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.sh-bf-pm{ display:block; margin-top:14px; font-family:var(--font-heading,'Fraunces',Georgia,serif); font-weight:900; font-size:clamp(64px,7.4vw,108px); line-height:.86; letter-spacing:-.04em; color:#F3F2EF; white-space:nowrap; }
.sh-bf-hero-sub{ margin:22px 0 0; font-size:17px; line-height:1.5; color:#DCE6E3; max-width:36ch; }
.sh-bf-hero-cta{ margin-top:26px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.sh-bf-btn{ display:inline-flex; align-items:center; gap:10px; background:#D29B3D; color:#08201F; border:1.5px solid #B8842C; border-radius:4px; font:700 17px/1 Inter,system-ui,sans-serif; padding:18px 26px; text-decoration:none; box-shadow:0 10px 24px -12px rgba(210,155,61,.55); transition:background .2s,transform .2s cubic-bezier(.2,.8,.2,1); }
.sh-bf-btn:hover{ background:#E0AC4E; color:#08201F; transform:translateY(-1px); text-decoration:none; }
.sh-bf-btn:focus-visible,.sh-bf-link:focus-visible,.sh-bf-trio a:focus-visible,.sh-bf-card:focus-visible,.sh-bf-bar:focus-visible,.sh-bf-pdp:focus-visible{ outline:2px solid #D29B3D; outline-offset:3px; }
.sh-bf-link{ color:#DCE6E3; font-weight:500; font-size:15px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(210,155,61,.7); padding:10px 0; }
.sh-bf-link:hover{ color:#FFFFFF; }
.sh-bf-trio{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; height:420px; }
.sh-bf-trio li{ position:relative; border-radius:4px; overflow:hidden; background:#0F3B3A; }
.sh-bf-trio li:nth-child(2){ transform:translateY(26px); }
.sh-bf-trio li:nth-child(1),.sh-bf-trio li:nth-child(3){ transform:translateY(-10px); }
.sh-bf-trio a{ position:absolute; inset:0; display:block; color:#F3F2EF; text-decoration:none; }
.sh-bf-trio img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.sh-bf-trio a:hover img{ transform:scale(1.04); }
.sh-bf-trio a::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,15,14,.92) 0,rgba(5,15,14,0) 50%); }
.sh-bf-tag{ position:absolute; left:14px; right:14px; bottom:14px; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.sh-bf-chip{ display:inline-flex; align-items:baseline; background:#F3F2EF; color:#B3251F; border-radius:4px; font-family:var(--font-heading,'Fraunces',Georgia,serif); font-weight:900; font-size:38px; line-height:1; letter-spacing:-.03em; padding:4px 9px 7px 7px; }
.sh-bf-tag small{ font-size:14px; line-height:1.3; font-weight:500; color:#F3F2EF; }
.sh-bf-tag small b{ display:block; margin-bottom:2px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#D29B3D; }
@media (max-width:1200px){ .sh-bf-hero-in{ padding:36px 32px; gap:28px; } .sh-bf-bfw{ font-size:38px; } .sh-bf-chip{ font-size:30px; } .sh-bf-trio{ height:380px; } }
@media (max-width:900px){
	.sh-bf-hero-in{ grid-template-columns:1fr; gap:0; padding:28px 20px 30px; min-height:0; }
	.sh-bf-hero-txt{ display:contents; }
	.sh-bf-h{ order:1; }
	.sh-bf-bfw{ font-size:38px; letter-spacing:.04em; }
	.sh-bf-pm{ font-size:60px; margin-top:8px; }
	.sh-bf-trio{ order:2; height:250px; gap:8px; margin-top:20px; }
	.sh-bf-trio li:nth-child(n){ transform:none; }
	.sh-bf-tag{ left:6px; right:4px; bottom:8px; gap:5px; }
	.sh-bf-chip{ font-size:clamp(15px,4.6vw,22px); padding:3px 5px 5px 4px; }
	.sh-bf-tag small{ font-size:11.5px; }
	.sh-bf-tag small b{ font-size:10px; letter-spacing:.05em; }
	.sh-bf-hero-sub{ order:3; font-size:15px; margin-top:18px; max-width:none; }
	.sh-bf-hero-cta{ order:4; margin-top:16px; gap:8px 14px; }
	.sh-bf-btn{ width:100%; justify-content:center; }
}
@media (max-width:360px){ .sh-bf-pm{ font-size:52px; } .sh-bf-bfw{ font-size:33px; } }
@media (prefers-reduced-motion:reduce){ .sh-bf-bfw::after{ animation:none; display:none; } .sh-bf-hero-txt{ animation:none; } .sh-bf-btn,.sh-bf-trio img{ transition:none; } }

/* 3. Franja «4 precios por mayor» */
.sh-bf-tiles{ background:#F3F2EF; padding:52px 0 44px; scroll-margin-top:90px; }
.sh-bf-tiles-t{ margin:0; font-family:var(--font-heading,'Fraunces',Georgia,serif); font-weight:600; font-size:clamp(1.7rem,3vw,2.25rem); line-height:1.15; color:#08201F; }
.sh-bf-tiles-s{ margin:8px 0 24px; font-size:16px; color:#5A6B68; }
.sh-bf-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.sh-bf-card{ background:#FFFFFF; border:1px solid #DEDCD6; border-top:4px solid #08201F; border-radius:4px; padding:24px 22px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:#1C2422; transition:border-color .15s; }
.sh-bf-card:hover{ border-color:#2A5B57; border-top-color:#08201F; color:#1C2422; text-decoration:none; }
.sh-bf-card-e{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5A6B68; }
.sh-bf-card-big{ font-family:var(--font-heading,'Fraunces',Georgia,serif); font-weight:600; font-size:2.6rem; line-height:1; color:#08201F; }
.sh-bf-card-big.is-deal{ color:#B3251F; }
.sh-bf-card-big .sh-bf-pre{ font-family:Inter,system-ui,sans-serif !important; font-size:15px; font-weight:500; color:#5A6B68; }
.sh-bf-card-l{ font-size:15px; line-height:1.4; }
.sh-bf-card-s{ font-size:13px; color:#5A6B68; }
.sh-bf-card-c{ margin-top:auto; padding-top:8px; font-size:14px; font-weight:600; color:#0F3B3A; }
.sh-bf-legal{ margin:20px 0 0; font-size:12.5px; line-height:1.5; color:#5A6B68; }
@media (max-width:1023px){ .sh-bf-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){
	.sh-bf-tiles{ padding:28px 0 24px; }
	.sh-bf-tiles-s{ margin-bottom:16px; font-size:14.5px; }
	.sh-bf-grid{ grid-template-columns:1fr; gap:12px; }
	.sh-bf-card{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:16px; border-top-width:1px; border-left:4px solid #08201F; }
	.sh-bf-card:hover{ border-left-color:#08201F; }
	.sh-bf-card-e{ font-size:11.5px; }
	.sh-bf-card-big{ grid-column:2; grid-row:1 / span 4; font-size:1.9rem; text-align:right; }
	.sh-bf-card-big .sh-bf-pre{ display:block; font-size:12px; }
	.sh-bf-card-l{ font-size:14.5px; }
	.sh-bf-card-s{ font-size:12.5px; }
	.sh-bf-card-c{ padding-top:2px; font-size:13px; }
}

/* 4. Línea en categorías */
.sh-bf-cat{ display:flex; align-items:stretch; min-height:52px; margin:0 0 16px; background:#DCE6E3; border-radius:4px; overflow:hidden; }
.sh-bf-cat-k{ flex:none; display:flex; align-items:center; padding:0 18px; background:#08201F; color:#D29B3D; font-size:11.5px; font-weight:700; letter-spacing:.08em; }
.sh-bf-cat p{ margin:0; display:flex; align-items:center; flex-wrap:wrap; padding:10px 20px; font-size:15px; line-height:1.4; color:#08201F; }
.sh-bf-cat b{ font-weight:700; margin-right:4px; }
@media (max-width:767px){
	.sh-bf-cat{ flex-direction:column; border-left:4px solid #08201F; padding:12px 14px; gap:4px; }
	.sh-bf-cat-k{ padding:0; background:none; color:#0F3B3A; font-size:10.5px; }
	.sh-bf-cat p{ padding:0; font-size:14px; display:block; }
}

/* 5. Línea en la ficha */
.sh-bf-pdp{ display:flex; flex-direction:column; gap:3px; margin:10px 0 4px; padding:10px 12px; background:#DCE6E3; border-radius:4px; border-left:3px solid #D29B3D; text-decoration:none; color:#08201F; }
.sh-bf-pdp:hover{ color:#08201F; text-decoration:none; background:#D2DFDB; }
.sh-bf-pdp-k{ font-size:10.5px; font-weight:700; letter-spacing:.08em; color:#0F3B3A; }
.sh-bf-pdp-t{ font-size:14.5px; line-height:1.4; }
.sh-bf-pdp-t b{ font-weight:700; }
.sh-bf-pdp-c{ font-size:13px; font-weight:600; color:#0F3B3A; }
#sh-vol{ scroll-margin-top:100px; }

/* 6. Empujón del carrito */
.sh-bf-nudge-k{ color:#08201F; }

@media (prefers-reduced-motion:reduce){ .sh-bf-card{ transition:none; } }

/* 7. Banner en artículos del blog — opción C «Cuenta de proyecto» (aprobada 2026-11-02) */
.sh-bfb{ container-type:inline-size; margin:28px 0; }
.sh-bfb-in{ background:#050F0E; color:#F3F2EF; border-radius:6px; overflow:hidden; font-family:Inter,system-ui,sans-serif; }
.sh-bfb-hd{ display:flex; align-items:center; gap:10px; padding:14px 18px 0; }
.sh-bfb-bf{ font-size:12px; font-weight:900; line-height:1; letter-spacing:.2em; color:#D29B3D; text-shadow:0 0 14px rgba(210,155,61,.55); }
.sh-bfb-rule{ flex:1; height:1px; background:#21403c; }
.sh-bfb-d{ font-size:11.5px; font-weight:500; line-height:1; color:#9aa8a5; }
.sh-bfb-main{ display:grid; grid-template-columns:96px 1fr; gap:14px; padding:14px 18px 0; align-items:start; }
.sh-bfb.is-gen .sh-bfb-main{ grid-template-columns:1fr; }
.sh-bfb-main img{ width:96px; height:96px; object-fit:cover; border-radius:4px; display:block; margin:0; }
.sh-bfb-h{ display:block; font-family:var(--font-heading,'Fraunces',Georgia,serif); font-weight:600; font-size:23px; line-height:1.1; color:#F3F2EF; }
.sh-bfb-sub{ display:block; margin:8px 18px 0; font-size:13px; line-height:1.5; color:#C3CDCA; }
.sh-bfb-math{ margin:14px 18px 0; background:#F3F2EF; color:#1C2422; border-radius:4px; display:grid; grid-template-columns:1fr 1fr; font-variant-numeric:tabular-nums; }
.sh-bfb-math > div{ padding:11px 13px; }
.sh-bfb-math > div + div{ border-left:1px solid #DEDCD6; }
.sh-bfb-math span{ display:block; font-size:11.5px; line-height:1.3; color:#5A6B68; }
.sh-bfb-math b{ display:block; margin-top:3px; font-size:21px; font-weight:800; line-height:1.15; letter-spacing:-.01em; color:#1C2422; }
.sh-bfb-math .is-deal b{ color:#B3251F; }
.sh-bfb-cta{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
.sh-bfb-fine{ font-size:11.5px; color:#8A9A97; }
.entry-content a.sh-bfb-btn,.sh-bfb-btn{ display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:13px 18px; background:#D29B3D; color:#08201F; border:1.5px solid #08201F; border-radius:4px; font-size:14px; font-weight:700; line-height:1; text-decoration:none; white-space:nowrap; }
.entry-content a.sh-bfb-btn:hover,.sh-bfb-btn:hover{ background:#E0AC4E; color:#08201F; text-decoration:none; }
.sh-bfb-btn:focus-visible,.sh-bfb-tile:focus-visible{ outline:2px solid #D29B3D; outline-offset:3px; }
.sh-bfb-photo{ display:none; }
.sh-bfb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 18px 0; }
.sh-bfb-tile{ position:relative; display:block; aspect-ratio:1/1; border-radius:4px; overflow:hidden; text-decoration:none; }
.sh-bfb-tile img{ width:100%; height:100%; object-fit:cover; display:block; margin:0; }
.sh-bfb-chip{ position:absolute; left:8px; right:8px; bottom:8px; background:#F3F2EF; border-radius:3px; padding:6px 8px; color:#1C2422; font-size:11px; font-weight:500; line-height:1.25; }
.sh-bfb-chip b{ display:block; font-size:17px; font-weight:800; line-height:1.05; color:#B3251F; }
@container (min-width:560px){
	.sh-bfb-in{ display:grid; grid-template-columns:260px 1fr; }
	.sh-bfb.is-gen .sh-bfb-in{ grid-template-columns:1fr; }
	.sh-bfb-photo{ display:block; grid-row:1 / span 5; }
	.sh-bfb-photo img{ width:100%; height:100%; object-fit:cover; display:block; margin:0; }
	.sh-bfb-main{ grid-template-columns:1fr; padding:16px 26px 0; }
	.sh-bfb-main img{ display:none; }
	.sh-bfb-hd{ padding:22px 26px 0; }
	.sh-bfb-h{ font-size:30px; }
	.sh-bfb-sub{ margin:10px 26px 0; font-size:14px; }
	.sh-bfb-math{ margin:16px 26px 0; }
	.sh-bfb-cta{ padding:18px 26px 24px; flex-direction:row; align-items:center; gap:16px; }
	.sh-bfb.is-gen .sh-bfb-grid{ grid-template-columns:repeat(4,1fr); padding:16px 26px 0; }
}
/* El blog da márgenes/alturas propias a las imágenes del artículo: se neutralizan dentro del banner. */
.sh-bfb img{ margin:0 !important; max-width:none !important; box-shadow:none !important; border-radius:0; }
.sh-bfb-main img{ width:96px !important; height:96px !important; border-radius:4px; }
.sh-bfb-tile img{ width:100% !important; height:100% !important; }
.sh-bfb-photo{ position:relative; min-height:100%; }
.sh-bfb-photo img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; }