/* Layout: negro de punta a punta con el rosa Semilac; bandas a todo el ancho, contenido a 1160px; la única sorpresa es la cifra gigante en Playfair */
.bf{
  --negro:#0b0a0b; --carbon:#151214; --linea:#2c2529; --rosa:#e5197a; --rosa-s:#f3b8d0;
  --texto:#f6f1f3; --apag:#a69aa0;
  --display:"Playfair Display", Didot, Georgia, serif;
  --body:"Lato", "Helvetica Neue", Arial, sans-serif;
  color-scheme:dark; background:var(--negro); color:var(--texto);
  font-family:var(--body); font-size:16px; line-height:1.55; margin:0;
}
.bf, .bf *{box-sizing:border-box}
.bf a{color:inherit}
.bf img{max-width:100%; height:auto; display:block}
.bf h1, .bf h2, .bf h3, .bf p{margin:0}
.bf h2{font-family:var(--display); font-weight:900; font-size:clamp(30px,4.4vw,46px); line-height:1.06; text-wrap:balance; color:var(--texto)}
.bf .wrap{max-width:1160px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.bf .eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:13px; font-weight:900; letter-spacing:.26em; text-transform:uppercase; color:var(--rosa); margin-bottom:14px}
.bf .eyebrow .fechas{color:var(--apag); letter-spacing:.12em; font-weight:700}
.bf .tag-pro{background:var(--rosa); color:#fff; letter-spacing:.14em; padding:3px 8px 2px 10px; border-radius:3px}
.bf .btn{display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 26px; font:900 13px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; text-decoration:none; border:2px solid var(--rosa); border-radius:2px}
.bf .btn-solid{background:var(--rosa); color:#fff}
.bf .btn-line{background:transparent; color:var(--texto); border-color:var(--texto)}
.bf .btn:focus-visible, .bf a:focus-visible, .bf summary:focus-visible{outline:2px solid var(--rosa-s); outline-offset:3px}
.bf .ctas{display:flex; flex-wrap:wrap; gap:12px}

/* Portada */
.bf .hero{background:radial-gradient(90% 80% at 85% 0%, #2c0c1c 0%, var(--negro) 60%)}
.bf .hero .wrap:first-child{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:40px; align-items:center; padding-block:56px 32px}
.bf .cifra{font-family:var(--display); font-weight:900; font-size:clamp(120px,19vw,250px); line-height:.86; letter-spacing:-.03em; white-space:nowrap; color:var(--texto)}
.bf .cifra i{font-style:normal; color:var(--rosa)}
.bf .cifra .pc{font-size:.62em; margin-left:.04em}
/* 2+2: el + más pequeño y a media altura de los doses */
.bf .cifra .mas{display:inline-block; font-size:.5em; line-height:1; vertical-align:.2em; margin:0 .06em}
.bf .cifra small{display:block; font-family:var(--body); font-size:clamp(18px,2vw,24px); font-weight:900; letter-spacing:.3em; text-transform:uppercase; color:var(--apag); line-height:1; margin-bottom:10px}
.bf .sub{font-size:clamp(20px,2.2vw,26px); font-weight:700; line-height:1.25; margin-top:22px; max-width:30ch}
/* Agenda de la portada: encajada a la altura del 2+2 y su texto (desde debajo de la línea PRE-BLACK hasta los botones) */
.bf .hero .hero-ag{position:relative; align-self:stretch; width:auto; justify-self:stretch}
.bf .hero .ag-in{position:absolute; top:84px; bottom:0; left:50%; transform:translateX(-50%)} /* de la parte de arriba del 2 a la de abajo de los botones */
.bf .hero .ag-in img{height:100%; width:auto; max-width:none}
/* Agenda negra sobre fondo negro: foco rosa detrás, un punto más de luz y canto claro para separarla */
.bf .ag-in{isolation:isolate}
.bf .ag-in::before{content:""; position:absolute; inset:-14% -22%; z-index:-1; background:radial-gradient(closest-side, rgba(229,25,122,.62), rgba(229,25,122,.24) 55%, transparent 80%)}
.bf .hero .ag-in img{transform:rotate(4deg); filter:brightness(1.22) contrast(1.06) drop-shadow(0 0 1px rgba(255,255,255,.45)) drop-shadow(0 0 36px rgba(229,25,122,.55)) drop-shadow(0 22px 28px rgba(0,0,0,.6))}
.bf .agenda img{filter:brightness(1.22) contrast(1.06) drop-shadow(0 0 1px rgba(255,255,255,.45)) drop-shadow(0 0 36px rgba(229,25,122,.55)) drop-shadow(0 22px 28px rgba(0,0,0,.6))}
/* el mismo foco rosa que la agenda de arriba, detrás de la imagen */
.bf .agenda{overflow:hidden}
.bf .agenda .wrap{position:relative; isolation:isolate}
.bf .agenda .wrap::before{content:""; position:absolute; z-index:-1; left:calc(15% - 340px); top:50%; width:680px; height:680px; transform:translateY(-50%);
  background:radial-gradient(closest-side, rgba(229,25,122,.62), rgba(229,25,122,.24) 55%, transparent 100%)}
@media (max-width: 880px){ .bf .agenda .wrap::before{left:50%; top:0; width:480px; height:480px; transform:translateX(-50%)} }
.bf .agenda img{transform:rotate(-4deg)}
.bf .hero .sello{right:-40px; bottom:6%}
.bf .sello b{display:block; font-size:17px; font-weight:900; letter-spacing:.03em; line-height:1.05}
.bf .sello small{display:block; font-size:11px; font-weight:400; line-height:1.15; margin-top:5px}
@media (max-width: 880px){
  .bf .hero .hero-ag{align-self:auto; width:min(56%,210px); justify-self:center}
  .bf .hero .ag-in{position:relative; top:auto; bottom:auto; left:auto; transform:none}
  .bf .hero .ag-in img{width:100%; height:auto}
  .bf .hero .sello{right:-56px; bottom:8%}
  .bf .sello b{font-size:13px} .bf .sello small{font-size:9px; margin-top:3px}
}
.bf [id]{scroll-margin-top:140px} /* que la cabecera fija de la web no tape el título al bajar */
.bf .marcas{margin-top:10px; font-size:14px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--rosa)}
.bf .combina{font-size:18px; font-weight:700; color:var(--texto); margin-top:10px; max-width:46ch}
.bf .l2{font-size:18px; color:var(--rosa-s); margin-top:10px; max-width:46ch}
.bf .l2 b{color:#fff}
.bf .hero .ctas{margin-top:28px}
.bf .next{margin-top:18px; font-size:14px; color:var(--apag)}
.bf .next .cd{color:var(--texto); font-weight:700}
.bf .next .cd:not(:empty)::after{content:" · "; color:var(--apag); font-weight:400}
.bf .hero-ag{position:relative; justify-self:center; width:min(100%,340px)}
.bf .hero-ag img{transform:rotate(7deg); filter:drop-shadow(0 0 40px rgba(229,25,122,.3)) drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.bf .sello{position:absolute; right:-12px; bottom:4%; width:128px; height:128px; border-radius:50%; background:var(--rosa); color:#fff; display:grid; place-items:center; text-align:center; font-weight:900; font-size:15px; line-height:1.1; padding:14px; transform:rotate(-10deg)}
.bf .escalera{list-style:none; margin:0; padding:0 0 40px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:end}
.bf .escalera li{border-top:4px solid var(--linea); padding-top:12px; display:flex; flex-direction:column; gap:2px; min-width:0}
.bf .escalera li:nth-child(1){min-height:64px}.bf .escalera li:nth-child(2){min-height:88px}.bf .escalera li:nth-child(3){min-height:112px}
.bf .step-n{font-size:13px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:#73686d}
.bf .step-t{font-size:14px; color:#73686d}
.bf .escalera .on{border-top-color:var(--rosa); box-shadow:0 -8px 24px -10px rgba(229,25,122,.7)}
.bf .escalera .on .step-n{color:var(--texto)} .bf .escalera .on .step-t{color:var(--rosa-s)}
.bf .escalera .pasada .step-n{text-decoration:line-through}

/* Cómo funciona */
.bf .como{background:var(--carbon); border-block:1px solid var(--linea)}
.bf .como .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; padding-block:56px}
.bf .como-txt p:not(.eyebrow){color:var(--apag); margin-top:14px; max-width:48ch}
.bf .botes{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:end; justify-items:center}
.bf .botes figure{margin:0; display:grid; justify-items:center; gap:10px}
.bf .botes img{width:min(100%,78px); filter:drop-shadow(0 14px 16px rgba(0,0,0,.7))}
.bf .botes .g img{filter:drop-shadow(0 0 26px rgba(229,25,122,.8))}
.bf .botes figcaption{font-size:13px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:#7a6f74}
.bf .botes .g figcaption{color:var(--rosa)}
.bf .como-simple .wrap{grid-template-columns:minmax(0,1fr) auto}

/* Familias */
.bf .familias .wrap{padding-block:64px 24px}
.bf .fam-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:28px}
.bf .fam{display:grid; gap:2px; padding:22px 22px 18px; border:1px solid var(--linea); text-decoration:none; min-width:0}
.bf .fam-n{font-family:var(--display); font-weight:900; font-size:26px; line-height:1.1}
.bf .fam-d{color:var(--apag); font-size:14px}
.bf .fam-go{margin-top:10px; font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--rosa)}

/* Estrellas */
.bf .estrellas .wrap{padding-block:56px 72px}
.bf .sec-head{display:flex; justify-content:space-between; align-items:end; gap:16px 32px; flex-wrap:wrap}
.bf .sec-head > p{color:var(--apag); max-width:44ch}
.bf .grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 20px; margin-top:32px}
.bf .card{display:flex; flex-direction:column; gap:10px; min-width:0}
.bf .card-img{position:relative; display:block; background:#fff; border-radius:2px; overflow:hidden}
.bf .card-img img{width:100%; aspect-ratio:1/1; object-fit:contain}
.bf .badge{position:absolute; left:10px; top:10px; background:var(--negro); color:#fff; font-weight:900; font-size:15px; padding:6px 11px 4px; border-bottom:4px solid var(--rosa)}
.bf .card-name{text-decoration:none; font-weight:700; font-size:15px; line-height:1.3; min-height:2.6em}
.bf .card .btn{min-height:44px; font-size:12px}
.bf .card-price{margin:-4px 0 0; font-weight:900; font-size:15px; color:#fff}
.bf .card-price del{color:#a9a1a5; font-weight:400; margin-right:6px}
.bf .card-price ins{text-decoration:none; background:none; color:#fff}
.bf .card-price .woocommerce-price-suffix{display:none}

/* Agenda */
.bf .agenda{background:linear-gradient(110deg, #1d0a14 0%, var(--negro) 70%); border-top:1px solid var(--linea)}
.bf .agenda .wrap{display:grid; grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr); gap:48px; align-items:center; padding-block:64px}
.bf .agenda img{width:min(100%,260px); justify-self:center; transform:rotate(-6deg); filter:drop-shadow(0 0 36px rgba(229,25,122,.28))}
.bf .agenda p:not(.eyebrow){color:var(--apag); margin-top:14px; max-width:52ch; font-size:17px}
.bf .agenda .ctas{margin-top:24px}
.bf .agenda .nota{font-size:14px}

/* Profesionales */
.bf .pro{background:var(--rosa)}
.bf .pro .wrap{display:flex; justify-content:space-between; align-items:center; gap:24px 40px; flex-wrap:wrap; padding-block:48px}
.bf .pro .wrap > div:first-child{min-width:0; max-width:680px}
.bf .pro .eyebrow{color:#fff; opacity:.85}
.bf .pro h2{color:#fff}
.bf .pro p:not(.eyebrow){color:#fff; margin-top:10px}
.bf .pro .btn-solid{background:#fff; color:var(--rosa); border-color:#fff}
.bf .pro .btn-line{border-color:#fff; color:#fff}

/* Preguntas */
.bf .faq .wrap{padding-block:56px 72px; max-width:820px}
.bf .faq h2{margin-bottom:18px}
.bf details{border-top:1px solid var(--linea)}
.bf details:last-child{border-bottom:1px solid var(--linea)}
.bf summary{cursor:pointer; list-style:none; padding:18px 36px 18px 0; position:relative; font-weight:700; font-size:17px}
.bf summary::-webkit-details-marker{display:none}
.bf summary::after{content:"+"; position:absolute; right:4px; top:12px; font-size:26px; color:var(--rosa); font-weight:400}
.bf details[open] summary::after{content:"−"}
.bf details p{color:var(--apag); padding-bottom:18px; max-width:62ch}

@media (max-width: 880px){
  .bf .hero .wrap:first-child{grid-template-columns:minmax(0,1fr); gap:8px; padding-block:36px 24px}
  .bf .hero-ag{width:min(56%,210px); justify-self:center; margin-top:28px}
  .bf .sello{width:96px; height:96px; font-size:12px; padding:10px; right:-56px; bottom:8%}
  .bf .cifra{font-size:clamp(96px,30vw,150px)}
  .bf .como .wrap, .bf .como-simple .wrap{grid-template-columns:minmax(0,1fr); gap:28px; padding-block:44px}
  .bf .fam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bf .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px}
  .bf .agenda .wrap{grid-template-columns:minmax(0,1fr); gap:24px; padding-block:48px}
  .bf .agenda img{width:min(60%,200px)}
  .bf .escalera{gap:8px}
  .bf .step-n{font-size:11px; letter-spacing:.1em} .bf .step-t{font-size:12px}
}
@media (max-width: 420px){
  .bf .hero .ctas .btn, .bf .pro .btn, .bf .como-simple .btn{width:100%}
  .bf .fam{padding:16px}
  .bf .fam-n{font-size:21px}
}
@media (prefers-reduced-motion: no-preference){
  .bf .btn{transition:background .2s, color .2s, border-color .2s}
  .bf .btn-line:hover{background:var(--texto); color:var(--negro)}
  .bf .btn-solid:hover{background:#c4105f; border-color:#c4105f}
  .bf .fam{transition:border-color .2s} .bf .fam:hover{border-color:var(--rosa)}
}

/* Barra de urgencia (sustituye a la escalera: no se enseñan las fases siguientes) */
.bf .urg{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; border-top:4px solid var(--rosa); box-shadow:0 -10px 26px -14px rgba(229,25,122,.75); padding:16px 0 36px}
.bf .urg b{font-size:15px; font-weight:900; letter-spacing:.2em; text-transform:uppercase}
.bf .urg .cd{font-family:var(--display); font-weight:900; font-size:22px; color:var(--rosa-s)}
.bf .urg .urg-t{color:var(--apag); font-size:14px; margin-left:auto}
@media (max-width: 880px){ .bf .urg .urg-t{margin-left:0; width:100%} }

/* Black Weeks: los tres tramos */
.bf .tramos{background:var(--carbon); border-block:1px solid var(--linea)}
.bf .tramos .wrap{padding-block:56px}
.bf .tr-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:28px}
.bf .tr{display:grid; gap:4px; padding:26px 24px 20px; border:1px solid var(--linea); border-top:4px solid var(--rosa); text-decoration:none; min-width:0; background:var(--negro)}
.bf .tr-pc{font-family:var(--display); font-weight:900; font-size:56px; line-height:1; color:var(--texto)}
.bf .tr-n{font-weight:900; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-s); margin-top:6px}
.bf .tr-d{color:var(--apag); font-size:15px}
.bf .tr .fam-go{margin-top:10px; font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--rosa)}
/* Black Friday: básicos y familias con su % */
.bf .basicos{background:var(--carbon); border-block:1px solid var(--linea)}
.bf .equipo{border-top:1px solid var(--linea)}
.bf .equipo .wrap, .bf .basicos .wrap{padding-block:56px 64px}
.bf .fam-pc{font-family:var(--display); font-weight:900; font-size:22px; color:var(--rosa-s)}
@media (max-width: 880px){ .bf .tr-grid{grid-template-columns:minmax(0,1fr)} .bf .tr-pc{font-size:44px} }

.bf .fam-pro{grid-column:1 / -1; border-color:var(--rosa); background:linear-gradient(110deg, #1d0a14 0%, var(--negro) 70%)}
.bf .como-txt p b{color:var(--texto)}
.bf .eur{font-size:.8em}
.bf h2 .eur, .bf .cifra .eur, .bf .fam-n .eur, .bf .tr-pc .eur{font-size:.66em}
@media (min-width: 881px){ .bf .una-linea{white-space:nowrap} }
.bf .como-txt p.letra{font-size:13px; margin-top:10px}
.bf .como-txt .repite{margin-top:14px; padding:14px 18px; border-left:4px solid var(--rosa); background:var(--negro); color:var(--texto)}
.bf .como-txt .repite b{color:var(--rosa-s)}

/* En la web (Bricks): el contenedor del shortcode a todo el ancho, para que las bandas lleguen de borde a borde */
#brxe-bbfcon, .brxe-container:has(> .brxe-shortcode > .bys-bf), .brxe-shortcode:has(> .bys-bf){width:100%!important;max-width:100%!important}
/* Móvil: el primer bloque (texto de la portada) centrado */
@media (max-width: 880px){
  .bf .hero .hero-txt{text-align:center}
  .bf .hero .hero-txt .eyebrow, .bf .hero .hero-txt .ctas{justify-content:center}
  .bf .hero .hero-txt .sub, .bf .hero .hero-txt .combina, .bf .hero .hero-txt .l2{margin-inline:auto}
}
/* Móvil: bloque «¿Eres profesional?» con el título de corrido y todo centrado */
@media (max-width: 880px){
  .bf .pro .wrap{justify-content:center; text-align:center}
  .bf .pro .wrap > div:first-child{width:100%}
  .bf .pro h2{text-wrap:wrap}
  .bf .pro .eyebrow, .bf .pro .ctas{justify-content:center}
  .bf .pro .ctas{width:100%}
}
/* Móvil: los dos botones de la portada en la misma línea */
@media (max-width: 880px){
  .bf .hero .hero-txt .ctas{flex-wrap:nowrap; gap:10px; width:100%; max-width:440px; margin-inline:auto}
  .bf .hero .hero-txt .ctas .btn{flex:1 1 0; width:auto; min-width:0; padding:0 8px; font-size:11px; letter-spacing:.1em; white-space:nowrap}
}
@media (max-width: 360px){ .bf .hero .hero-txt .ctas .btn{font-size:10px; letter-spacing:.06em} }

/* Espera: la cifra gigante es la cuenta atrás */
.bf .hero.espera .wrap:first-child{display:flex; flex-direction:column; align-items:center; text-align:center; padding-block:64px 72px}
.bf .espera .eyebrow{justify-content:center}
.bf .bf-titulo{font-family:var(--display); font-weight:900; font-size:clamp(64px,13vw,170px); line-height:.88; letter-spacing:-.02em; text-transform:uppercase; color:var(--texto)}
.bf .bf-titulo i{font-style:normal; color:var(--rosa); display:block}
.bf .empieza{margin-top:22px; font-size:clamp(18px,2.2vw,24px); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--apag)}
.bf .empieza b{color:var(--texto)}
.bf .espera .sub{max-width:40ch; margin-inline:auto; font-weight:400; font-size:18px; color:var(--rosa-s)}
.bf .espera .ctas{justify-content:center; margin-top:26px}
.bf .reloj{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; width:min(100%,640px); margin-top:30px}
.bf .reloj div{display:grid; justify-items:center; border-top:4px solid var(--rosa); padding-top:10px; min-width:0}
.bf .reloj b{font-family:var(--display); font-weight:900; font-size:clamp(44px,8vw,96px); line-height:.9; font-variant-numeric:tabular-nums; color:var(--texto)}
.bf .reloj span{font-size:12px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:var(--apag); margin-top:8px}
.bf .pistas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:28px}
.bf .pista{padding:24px 22px 20px; border:1px solid var(--linea); border-top:4px solid var(--rosa); background:var(--negro); min-width:0}
.bf .pista-n{font-family:var(--display); font-weight:900; font-size:24px; line-height:1.15}
.bf .pista p{color:var(--apag); font-size:15px; margin-top:8px}
@media (max-width: 880px){ .bf .pistas{grid-template-columns:minmax(0,1fr)} .bf .reloj{gap:6px} }
/* «Avísame»: formulario propio → lista de Klaviyo (Luis 23/10) */
.bf .avisame{border-top:1px solid var(--linea)}
.bf .avisame .wrap{padding-block:52px 60px; text-align:center}
.bf .avisame .eyebrow{justify-content:center}
.bf .avisame h2{font-family:var(--display); font-weight:900; font-size:clamp(28px,4vw,40px); line-height:1.1}
.bf .av-sub{color:var(--apag); margin-top:10px}
.bf .av-form{max-width:560px; margin:24px auto 0; text-align:left}
.bf .av-fila{display:flex; gap:10px}
.bf .av-fila input{flex:1; min-width:0; min-height:50px; padding:0 16px; font:16px var(--body); color:#111; background:#fff; border:2px solid #fff; border-radius:2px}
.bf .av-fila .btn{cursor:pointer}
.bf .av-ok{display:flex; gap:10px; align-items:flex-start; margin-top:12px; font-size:13px; line-height:1.45; color:var(--apag); cursor:pointer}
.bf .av-ok input{margin-top:1px; width:18px; height:18px; flex:none; accent-color:var(--rosa)}
.bf .av-ok a{color:var(--rosa-s)}
.bf .av-msg{margin-top:12px; font-weight:700; min-height:1.4em}
.bf .av-msg.ok{color:#7ee0a3} .bf .av-msg.mal{color:#ff8fb8}
@media (max-width: 560px){ .bf .av-fila{flex-direction:column} }