/* ═══════════════════════════════════════════════════════════════════
   LANDING BLACK FRIDAY 2026 (deco-black-friday-2026.html)
   Integra la landing independiente (Landing_Black_Friday_2026_2) con la
   cabecera, el pie y los estilos generales de la web nueva.
   - Se carga después de styles.css. Clases nuevas con prefijo bf-: la
     original usaba .card, .tabs, .panel, .step, .hero o .btn, que ya
     existen en styles.css, y estilaba h1, h2, section, form y footer.
   - Reutiliza de styles.css: .wrap, .sec, .btn, preheader, header y footer.
   - Tipografía: Poppins, como el resto de la web (la original iba en Inter).
     Pesos: 700 titulares y cifras · 600 subtítulos y botones · 500
     etiquetas · 400 texto. Tamaños con clamp(móvil, vw, escritorio).
   - Paleta de campaña: negro + amarillo #FFC629, el mismo del mailing y
     de la diapositiva Black Friday del hero.
   - La franja del header, el botón amarillo (.btn--bf) y los colores
     comunes de campaña (--bf-k, --bf-y, --bf-m…) están en bf-bar.css,
     que se carga antes que este. Aquí, solo los propios de la landing.
   ═══════════════════════════════════════════════════════════════════ */
:root {
	--bf-gold:#8A6800;     /* el amarillo no se lee sobre blanco (1,6:1); este da 5,2:1 */
	--bf-g:#6B9A3A;        /* decobasic */
	--bf-b:#2F7FD8;        /* decodesign */
	--bf-s:#8E8E96;        /* precios tachados y letra pequeña: 5:1 sobre --bf-k2 */
}

/* ── base de la página ── */
.bf {
	background:var(--bf-k);
	color:#fff;
}
.bf-y {
	color:var(--bf-y);
}
.bf-kick {
	font-size:clamp(12px,.85vw,14px);
	font-weight:600;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--bf-y);
}
.bf-h1 {
	margin:14px 0 22px;
	font-size:clamp(48px,7vw,112px);
	font-weight:700;
	line-height:.95;
	letter-spacing:-.04em;
}
.bf-h2 {
	margin-top:10px;
	font-size:clamp(32px,3.4vw,56px);
	font-weight:700;
	line-height:1.05;
	letter-spacing:-.03em;
}
.bf-h1 i,.bf-h2 i {
	font-style:normal;
	color:var(--bf-y);
}
.bf-sub {
	margin-top:14px;
	max-width:680px;
	font-size:clamp(16px,1.1vw,18px);
	line-height:1.6;
	color:var(--bf-m);
}
.bf-sub b {
	color:#fff;
	font-weight:600;
}
.bf-sub a {
	color:#fff;
	text-decoration:underline;
	text-underline-offset:.2em;
}

/* ── 1 · hero ── */
.bf-hero {
	position:relative;
	min-height:clamp(560px,42vw,760px);
	display:flex;
	align-items:flex-end;
	overflow:hidden;
}
.bf-hero__img {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
}
.bf-hero::after {
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(90deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.55) 55%,rgba(11,11,12,.2) 100%),
		linear-gradient(0deg,var(--bf-k) 0%,rgba(11,11,12,0) 40%);
}
.bf-hero__in {
	position:relative;
	z-index:1;
	padding-block:clamp(56px,6vw,96px) clamp(48px,5vw,72px);
}
/* pastilla BLACK FRIDAY arriba a la derecha, como en el banner del mailing.
   Esquinas rectas: lo redondeado son los botones. En móvil queda por encima del titular. */
.bf-hero__tag {
	position:absolute;
	top:clamp(20px,3vw,48px);
	left:0;
	right:0;
	z-index:1;
	margin-inline:auto;
	text-align:right;
}
.bf-pill {
	display:inline-block;
	padding:.7em 1.2em;
	font-size:clamp(13px,1.3vw,20px);
	font-weight:700;
	line-height:1;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--bf-y);
	background:var(--bf-k);
	border:2px solid var(--bf-y);
}
.bf-lead {
	max-width:600px;
	font-size:clamp(16px,1.25vw,20px);
	line-height:1.6;
	color:#ddd;
}
.bf-chips {
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin:30px 0;
}
.bf-chip {
	min-width:180px;
	padding:12px 18px;
	background:rgba(23,23,26,.9);
	border-top:3px solid var(--bf-y);
}
.bf-chip span {
	display:block;
	font-size:clamp(12px,.85vw,13px);
	color:var(--bf-m);
}
.bf-chip b {
	font-size:clamp(24px,1.9vw,30px);
	font-weight:700;
	letter-spacing:-.02em;
}
.bf-chip small {
	font-size:13px;
	font-weight:500;
	letter-spacing:0;
	color:#ccc;
}
/* chips de regalo: en amarillo para separarlos de los precios */
.bf-chip--y {
	color:var(--bf-k);
	background:var(--bf-y);
	border-top-color:var(--white);
}
.bf-chip--y span,
.bf-chip--y small {
	color:#3A3000;
}

/* ── 2 · ofertas: pestañas ── */
.bf-tabs {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:34px 0 26px;
}
.bf-tabs[hidden] {
	display:none;
}
/* con una sola oferta (?seg=nuevos o ?seg=actualiza) el panel recupera el aire de la fila de pestañas */
.bf-tabs[hidden] ~ .bf-panel {
	margin-top:34px;
}
.bf-tab {
	padding:14px 20px;
	text-align:left;
	font-family:inherit;
	font-size:clamp(14px,1vw,16px);
	font-weight:600;
	line-height:1.35;
	color:#fff;
	background:var(--bf-k2);
	border:1px solid var(--bf-k3);
	cursor:pointer;
}
.bf-tab small {
	display:block;
	font-size:12px;
	font-weight:400;
	color:var(--bf-m);
}
.bf-tab[aria-selected="true"] {
	color:var(--bf-k);
	background:var(--bf-y);
	border-color:var(--bf-y);
}
.bf-tab[aria-selected="true"] small {
	color:#3A3000;
}
.bf-tab:focus-visible {
	outline:2px solid var(--bf-m);
	outline-offset:3px;
}

/* ── 2 · ofertas: tarjetas ──
   Las tarjetas se reparten el ancho: con dos, cada una ocupa la mitad. Por debajo de unos 750 px, una por fila. */
.bf-cards {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
	gap:clamp(18px,1.6vw,24px);
}
.bf-card {
	position:relative;
	padding:clamp(22px,2vw,30px);
	background:var(--bf-k2);
	border-top:5px solid var(--bf-c,var(--bf-y));
}
.bf-card h3 {
	padding-right:80px;     /* que el nombre no se meta debajo del sello */
	font-size:clamp(20px,1.5vw,24px);
	font-weight:700;
	line-height:1.2;
}
.bf-card__d {
	padding-right:80px;
	margin-top:4px;
	font-size:clamp(14px,.95vw,15px);
	line-height:1.5;
	color:var(--bf-m);
}
.bf-card__f {
	margin-top:16px;
	font-size:13px;
	color:var(--bf-m);
}
.bf-card__p {
	font-size:clamp(44px,4vw,64px);
	font-weight:700;
	line-height:1;
	letter-spacing:-.03em;
	color:var(--white);
}
.bf-card__p small {
	font-size:17px;
	font-weight:500;
	letter-spacing:0;
	color:#ccc;
}
.bf-card__inc {
	display:inline-block;
	margin-top:10px;
	padding:3px 8px;
	font-size:12px;
	font-weight:700;
	color:var(--bf-k);
	background:var(--bf-y);
}
.bf-card ul {
	display:grid;
	gap:7px;
	margin:18px 0;
	font-size:clamp(14px,.95vw,15px);
	line-height:1.5;
	color:#ddd;
}
.bf-card li::before {
	content:"✓";
	content:"✓" / "";
	margin-right:9px;
	color:var(--bf-y);
}
.bf-card s {
	color:var(--bf-s);
}
.bf-card__alt {
	margin-top:12px;
	font-size:13px;
	line-height:1.5;
	color:var(--bf-m);
}
/* regalo */
.bf-gift {
	display:flex;
	align-items:center;
	gap:14px;
	margin:16px 0 4px;
	padding:14px 16px;
	color:var(--bf-k);
	background:var(--bf-y);
}
.bf-gift > span {
	flex:1;                 /* todo el ancho junto al «+», para que el filete de los créditos llegue a la derecha */
}
.bf-gift::before {
	content:"+";
	content:"+" / "";
	font-size:44px;
	font-weight:700;
	line-height:.8;
}
.bf-gift__k {
	display:block;
	font-size:11px;
	font-weight:700;
	letter-spacing:.14em;
}
.bf-gift__h {
	display:block;
	margin-top:2px;
	font-size:clamp(18px,1.35vw,21px);
	font-weight:700;
	line-height:1.15;
	letter-spacing:-.01em;
}
.bf-gift__s {
	display:block;
	margin-top:3px;
	font-size:13px;
	font-weight:500;
}
/* línea de los créditos IA de regalo, separada del regalo principal */
.bf-gift__c {
	display:block;
	margin-top:8px;
	padding-top:8px;
	font-size:14px;
	font-weight:700;
	border-top:2px solid var(--bf-k);
}
.bf-gift__c b {
	margin-right:4px;
	font-size:30px;
	letter-spacing:-.03em;
}
.bf-gift__c i {
	display:block;
	font-size:12px;
	font-style:normal;
	font-weight:500;
}
/* sello girado */
.bf-badge {
	position:absolute;
	right:-10px;
	top:-14px;
	width:92px;
	height:92px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	border-radius:50%;
	color:var(--bf-k);
	background:var(--bf-y);
	transform:rotate(-8deg);
	box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.bf-badge small {
	font-size:9px;
	font-weight:700;
	letter-spacing:.14em;
}
.bf-badge b {
	font-size:21px;
	font-weight:700;
	line-height:1.05;
	letter-spacing:-.03em;
}
.bf-badge span {
	max-width:70px;
	font-size:9px;
	font-weight:600;
	line-height:1.1;
}

/* ── 2 · ofertas: nota, módulos, créditos IA ── */
.bf-note {
	margin-top:18px;
	padding:16px 18px;
	font-size:15px;
	line-height:1.6;
	background:var(--bf-k2);
	border-left:4px solid var(--bf-y);
}
.bf-note a {
	color:var(--bf-y);
	font-weight:600;
}
.bf-mods-t {
	margin-top:40px;
	font-size:clamp(20px,1.5vw,24px);
	font-weight:700;
}
.bf-mods-t span {
	font-size:15px;
	font-weight:500;
	color:var(--bf-m);
}
.bf-mods {
	width:100%;
	margin-top:18px;
	border-collapse:collapse;
	font-size:15px;
}
.bf-mods td {
	padding:14px 0;
	vertical-align:top;
	border-bottom:1px solid var(--bf-k3);
}
.bf-mods td:last-child {
	padding-left:16px;
	text-align:right;
	white-space:nowrap;
	font-weight:700;
}
.bf-mods td span {
	display:block;
	font-size:13px;
	font-weight:400;
	color:var(--bf-m);
}
.bf-mods s {
	display:block;
	font-size:12px;
	font-weight:400;
	color:var(--bf-s);
}
/* Etiquetas bajo el precio: descuento aplicado (amarillo) y créditos de regalo (borde).
   El contenedor sí deja saltar de línea: en móvil se apilan en vez de salirse de la celda */
.bf-mods .bf-mods__tags {
	white-space:normal;
}
.bf-mods .bf-mods__dto,
.bf-mods .bf-mods__cr {
	display:inline-block;
	margin-top:5px;
	padding:2px 7px;
	font-size:12px;
	font-weight:700;
	white-space:normal;
}
.bf-mods .bf-mods__dto {
	margin-right:4px;
	color:var(--bf-k);
	background:var(--bf-y);
}
.bf-mods .bf-mods__cr {
	color:var(--bf-y);
	border:2px solid var(--bf-y);
}
.bf-ia {
	display:grid;
	grid-template-columns:auto 1fr;
	gap:clamp(24px,3vw,48px);
	align-items:center;
	padding:clamp(24px,2.6vw,40px);
	background:var(--bf-k2);
}
.bf-ia__pct {
	font-size:clamp(80px,10vw,160px);
	font-weight:700;
	line-height:.85;
	letter-spacing:-.06em;
	color:var(--bf-y);
}
.bf-ia__h {
	margin-top:8px;
	font-size:clamp(26px,2.6vw,40px);
	font-weight:700;
	line-height:1.1;
	letter-spacing:-.02em;
}
.bf-bars {
	display:grid;
	gap:10px;
	max-width:560px;
	margin-top:20px;
}
.bf-bars div {
	display:flex;
	align-items:center;
	gap:14px;
	font-size:14px;
	color:var(--bf-m);
}
.bf-bars span {
	flex:none;
	width:70px;
}
.bf-bars i {
	display:block;
	padding:12px 14px;
	font-style:normal;
	font-size:18px;
	font-weight:700;
	color:#fff;
	background:#2A2A2E;
}
.bf-bars .is-y i {
	color:var(--bf-k);
	background:var(--bf-y);
}
.bf-ia__alt {
	margin-top:16px;
	font-size:13px;
	line-height:1.6;
	color:var(--bf-m);
}
.bf-cta {
	margin-top:28px;
}

/* ── 3 · por qué deco (banda blanca) ── */
.bf-why {
	color:var(--bf-k);
	background:#fff;
}
.bf-why .bf-kick,.bf-why .bf-h2 i {
	color:var(--dh-amber);
}
.bf-why .bf-sub {
	color:#555;
}
.bf-grid3 {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:clamp(20px,2vw,32px);
	margin-top:40px;
}
.bf-grid3 img {
	width:100%;
	aspect-ratio:16/10;
	object-fit:cover;
}
.bf-grid3 h3 {
	margin-top:14px;
	font-size:clamp(18px,1.3vw,21px);
	font-weight:600;
}
.bf-grid3 p {
	margin-top:6px;
	font-size:15px;
	line-height:1.6;
	color:#555;
}
.bf-facts {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	gap:2px;
	margin-top:48px;
	background:#E6E6E6;
}
.bf-facts div {
	padding:22px;
	background:#fff;
}
.bf-facts b {
	display:block;
	font-size:clamp(28px,2.4vw,38px);
	font-weight:700;
	letter-spacing:-.03em;
}
.bf-facts span {
	font-size:14px;
	color:#555;
}

/* ── 4 · cómo funciona ── */
.bf-steps {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:clamp(18px,2vw,32px);
	margin-top:36px;
}
.bf-step {
	padding-top:18px;
	border-top:1px solid #333;
}
.bf-step b {
	font-size:clamp(36px,3vw,48px);
	font-weight:700;
	line-height:1.2;
	color:var(--bf-y);
}
.bf-step h3 {
	font-size:clamp(17px,1.25vw,20px);
	font-weight:600;
}
.bf-step p {
	margin-top:6px;
	font-size:15px;
	line-height:1.6;
	color:var(--bf-m);
}

/* ── 5 · solicita tu oferta (formulario) ── */
.bf-sol {
	background:var(--bf-k2);
}
.bf-sol__g {
	display:grid;
	grid-template-columns:1fr 1.2fr;
	gap:clamp(32px,4vw,64px);
	align-items:start;
}
.bf-form {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:16px;
	padding:clamp(24px,2.4vw,32px);
	background:var(--bf-k);
	border-radius:16px;
}
.bf-form__full {
	grid-column:1 / -1;
}
.bf-form label {
	display:block;
	margin-bottom:7px;
	font-size:13px;
	font-weight:500;
	color:var(--bf-m);
}
.bf-form input:not([type="checkbox"]),.bf-form select {
	width:100%;
	height:48px;
	padding:0 14px;
	font-family:inherit;
	font-size:15px;
	color:#fff;
	background:var(--bf-k2);
	border:1px solid #333;
	border-radius:8px;
}
.bf-form :is(input,select):focus {
	outline:2px solid var(--bf-y);
	outline-offset:1px;
}
.bf-chk {
	display:flex;
	align-items:flex-start;
	gap:10px;
}
.bf-chk input {
	margin-top:3px;
	accent-color:var(--bf-y);
}
.bf-form .bf-chk label {
	margin:0;
	line-height:1.5;
}
.bf-chk a {
	color:#fff;
	text-decoration:underline;
}
.bf-form .btn {
	width:100%;
	justify-content:center;
	cursor:pointer;
	font-family:inherit;
}
/* mientras se envía (black-friday.js lo desactiva para que no salgan dos correos) */
.bf-form .btn:disabled {
	cursor:progress;
	opacity:.7;
}
.bf-ok {
	padding:18px;
	font-weight:600;
	color:var(--bf-k);
	background:var(--bf-y);
	border-radius:8px;
}
.bf-ok:empty {
	display:none;
}

/* ── 6 · preguntas frecuentes ── */
.bf-faq .bf-h2 {
	margin-bottom:20px;
}
.bf-faq details {
	padding:18px 0;
	border-bottom:1px solid var(--bf-k3);
}
.bf-faq summary {
	display:flex;
	justify-content:space-between;
	gap:16px;
	list-style:none;
	cursor:pointer;
	font-size:clamp(16px,1.15vw,18px);
	font-weight:600;
}
.bf-faq summary::-webkit-details-marker {
	display:none;
}
.bf-faq summary::after {
	content:"+";
	content:"+" / "";
	font-size:22px;
	line-height:1;
	color:var(--bf-y);
}
.bf-faq details[open] summary::after {
	content:"–";
	content:"–" / "";
}
.bf-faq summary:focus-visible {
	outline:2px solid var(--bf-y);
	outline-offset:4px;
}
.bf-faq details p {
	max-width:800px;
	margin-top:10px;
	line-height:1.6;
	color:var(--bf-m);
}

/* ── condiciones (lo que la original llevaba en su pie) ── */
.bf-legal {
	padding-block:28px;
	font-size:13px;
	line-height:1.6;
	color:var(--bf-s);
	border-top:1px solid var(--bf-k3);
}

/* ── adaptación ── */
@media (max-width:760px) {
	.bf-sol__g,.bf-form,.bf-ia {
		grid-template-columns:1fr;
	}
}
@media (max-width:560px) {
	/* cifras del hero a lo ancho y pestañas en 2 × 2 */
	.bf-chip {
		flex:1 1 100%;
	}
	.bf-tab {
		flex:1 1 calc(50% - 4px);
	}
}