/* ==========================================================================
   CASO: BIEN BONITO
   Misma plantilla que Pwnterrey —portada, índice pegajoso, categorías
   numeradas, documentos que se recorren— con la paleta de la marca sacada
   de sus propias piezas: rosa frambuesa, rosa claro, crema y cacao.

   Donde Pwnterrey es duro (negro, verde lima, tipografía de píxeles), esto
   es lo contrario: esquinas redondas, crema y rosa. La estructura se repite;
   el tono, no.
   ========================================================================== */
.caso--bb {
	--b-rosa: #e0447f;
	--b-rosa-claro: #ffd7e6;
	--b-rosa-suave: #fde8f0;
	--b-crema: #ffeef5;
	--b-crema-claro: #fffafc;
	--b-texto: #2a1620;
	--b-texto-2: #7a5566;
	--b-vino: #8f1c46;
	--b-linea: rgba(42, 22, 32, .12);

	color: var(--b-texto);
	background: var(--b-crema-claro);
}

.caso-wrap {
	width: min(100%, 1180px);
	margin-inline: auto;
	padding-inline: var(--vc-gut);
}

/* --- Barra de avance ----------------------------------------------------- */
.caso-progress {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 60;
	height: 3px;
	background: transparent;
	pointer-events: none;
}
.caso-progress span {
	display: block;
	height: 100%;
	width: 100%;
	transform: scaleX(var(--caso-progress, 0));
	transform-origin: left;
	background: var(--b-rosa);
}

/* --- Piezas de texto ----------------------------------------------------- */
.caso-kicker,
.caso-label {
	margin: 0;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--b-rosa);
}

.caso-back {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-bottom: 1.4rem;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--b-texto-2);
	text-decoration: none;
}
.caso-back:hover { color: var(--b-rosa); }

/* --- Portada ------------------------------------------------------------- */
.bb-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
	background:
		radial-gradient(circle at 12% 8%, var(--b-rosa-suave), transparent 55%),
		radial-gradient(circle at 88% 78%, rgba(143, 28, 70, .14), transparent 52%),
		var(--b-crema);
}

.bb-hero__layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

.bb-hero__brand h1 { margin: 1rem 0 1.2rem; }
.bb-hero__brand h1 img {
	display: block;
	width: min(100%, 420px);
	height: auto;
	border-radius: 18px;
}

.bb-hero__lead {
	margin: 0;
	max-width: 36ch;
	font-size: clamp(1.05rem, 2.4vw, 1.35rem);
	line-height: 1.45;
	color: var(--b-texto-2);
}

.bb-hero__summary {
	padding: clamp(1.4rem, 3vw, 2rem);
	border-radius: 22px;
	background: rgba(255, 255, 255, .72);
	box-shadow: 0 4px 20px rgba(42, 22, 32, .07);
}
.bb-hero__summary p { margin: .7rem 0 1.1rem; line-height: 1.6; color: var(--b-texto-2); }
.bb-hero__summary ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.bb-hero__summary li {
	position: relative;
	padding-left: 1.4rem;
	font-size: .95rem;
	font-weight: 600;
}
.bb-hero__summary li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--b-rosa);
}

/* --- Índice pegajoso ----------------------------------------------------- */
.caso-index {
	position: sticky;
	z-index: 55;
	top: var(--vc-alto-cabecera, 85px);
	border-block: 1px solid var(--b-linea);
	background: rgba(255, 250, 252, .95);
	backdrop-filter: blur(12px);
}
.caso-index .caso-wrap {
	display: flex;
	padding-inline: 0;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.caso-index .caso-wrap::-webkit-scrollbar { display: none; }

.caso-index a {
	flex: 1 0 auto;
	display: flex;
	justify-content: center;
	gap: .5rem;
	padding: .95rem clamp(.9rem, 2vw, 1.6rem);
	border-right: 1px solid var(--b-linea);
	color: var(--b-texto-2);
	font-size: .69rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .2s ease, background .2s ease;
}
.caso-index a:first-child { border-left: 1px solid var(--b-linea); }
.caso-index a span { color: var(--b-rosa); }
.caso-index a:hover,
.caso-index a.is-active { color: #fff; background: var(--b-rosa); }
.caso-index a:hover span,
.caso-index a.is-active span { color: var(--b-rosa-claro); }

/* --- Categorías ---------------------------------------------------------- */
.caso-category {
	scroll-margin-top: calc(var(--vc-alto-cabecera, 85px) + var(--vc-alto-indice, 50px) + 10px);
	padding-block: clamp(3.5rem, 8vw, 7rem);
}
.caso-category--crema { background: var(--b-crema-claro); }
.caso-category--rosa  { background: var(--b-rosa-suave); }
.caso-category--cacao { color: var(--b-crema); background: var(--b-texto); }

.caso-category__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.caso-category__head > div {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	margin-bottom: .9rem;
}
.caso-category__head > div span {
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--b-rosa);
	line-height: 1;
}
.caso-category__head > div p {
	margin: 0;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--b-texto-2);
}
.caso-category__head h2 {
	margin: 0 0 .8rem;
	font-size: clamp(1.5rem, 3.6vw, 2.5rem);
	line-height: 1.15;
	text-wrap: balance;
}
.caso-category__head p { margin: 0; line-height: 1.6; color: var(--b-texto-2); }

.caso-category__head--oscuro > div p,
.caso-category__head--oscuro p { color: rgba(255, 238, 245, .78); }
.caso-category__head--oscuro > div span { color: var(--b-rosa-claro); }

/* --- Rejillas ------------------------------------------------------------ */
.bb-posts,
.bb-fotos {
	display: grid;
	gap: clamp(.7rem, 1.6vw, 1.2rem);
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}

.bb-posts figure,
.bb-fotos figure {
	margin: 0;
	overflow: hidden;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(42, 22, 32, .08);
}
.bb-posts img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.bb-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

.bb-fotos figure { box-shadow: 0 6px 22px rgba(0, 0, 0, .3); }

/* --- Documentos que se recorren ------------------------------------------ */
.caso-doc {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 24px rgba(42, 22, 32, .1);
}

.caso-doc figcaption,
.bb-feed__cab {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .4rem 1rem;
	padding: 1rem 1.15rem;
	border-bottom: 1px solid var(--b-linea);
}

.caso-doc__t {
	font-size: .74rem;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--b-texto);
}
.caso-doc__n {
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--b-rosa);
}

.caso-doc__visor {
	scrollbar-width: thin;
	scrollbar-color: var(--b-rosa) var(--b-rosa-suave);
}
.caso-doc__visor:focus-visible { outline: 2px solid var(--b-rosa); outline-offset: -2px; }
.caso-doc__visor::-webkit-scrollbar { width: 9px; height: 9px; }
.caso-doc__visor::-webkit-scrollbar-track { background: var(--b-rosa-suave); }
.caso-doc__visor::-webkit-scrollbar-thumb { background: var(--b-rosa); border-radius: 5px; }

/* La proporción reserva el alto: sin ella las imágenes diferidas miden 0,
   el visor se encoge y nunca llegan a cargarse. */
.caso-doc__visor img { display: block; width: 100%; height: auto; }
.caso-doc__visor--vertical {
	display: grid;
	gap: 10px;
	max-height: min(76vh, 620px);
	padding: 10px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--b-crema-claro);
}

/* --- La tarjeta de contacto ---------------------------------------------- */
.bb-tarjeta {
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(42, 22, 32, .1);
}
.bb-tarjeta img { display: block; width: 100%; height: auto; }
.bb-tarjeta figcaption {
	padding: .9rem 1.15rem;
	border-top: 1px solid var(--b-linea);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--b-texto-2);
}

/* --- La racha de campañas ------------------------------------------------
   Dieciocho barras, una por mes, que se encienden en cadena. La animación
   ES el argumento: se ve que no hay ningún hueco. */
.bb-racha {
	padding: clamp(1.5rem, 4vw, 2.6rem);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(42, 22, 32, .1);
}

.bb-racha__dato {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	margin: 0 0 1.4rem;
	flex-wrap: wrap;
}
.bb-racha__dato b {
	font-size: clamp(3rem, 9vw, 5rem);
	font-weight: 900;
	line-height: 1;
	color: var(--b-rosa);
}
.bb-racha__dato span {
	font-size: .95rem;
	font-weight: 700;
	color: var(--b-texto-2);
}

.bb-racha__meses {
	display: flex;
	align-items: flex-end;
	gap: clamp(3px, 1vw, 7px);
	height: clamp(64px, 14vw, 104px);
}
.bb-racha__meses i {
	flex: 1;
	height: 100%;
	border-radius: 6px 6px 3px 3px;
	background: var(--b-rosa-claro);
	transform: scaleY(.18);
	transform-origin: bottom;
	transition: transform .5s cubic-bezier(.2, .8, .3, 1), background .5s ease;
}
.is-visible .bb-racha__meses i,
.bb-racha.is-visible .bb-racha__meses i {
	transform: scaleY(1);
	background: var(--b-rosa);
	transition-delay: calc(var(--i) * 55ms);
}

.bb-racha__pie {
	margin: 1rem 0 0;
	font-size: .82rem;
	color: var(--b-texto-2);
}

/* --- El feed de tres meses ----------------------------------------------- */
.bb-feed {
	margin-top: clamp(2rem, 4vw, 3rem);
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 24px rgba(42, 22, 32, .1);
}

/* --- Cierre -------------------------------------------------------------- */
.caso-cierre {
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	color: var(--b-crema);
	background: var(--b-texto);
}
.caso-cierre__inner { max-width: 60ch; }
.caso-cierre h2 {
	margin: .8rem 0 .9rem;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	line-height: 1.15;
	text-wrap: balance;
}
.bb-punto { color: var(--b-rosa); }
.caso-cierre p { margin: 0; line-height: 1.6; color: rgba(255, 238, 245, .78); }

.bb-btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-top: 1.6rem;
	padding: 1rem 1.5rem;
	border-radius: 999px;
	background: var(--b-rosa);
	color: #fff;
	font-size: .78rem;
	font-weight: 900;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}
.bb-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(224, 68, 127, .35);
}
.bb-btn svg { transition: transform .18s ease; }
.bb-btn:hover svg { transform: translateX(3px); }

/* --- Entradas ------------------------------------------------------------ */
.caso-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1);
}
.caso-reveal.is-visible { opacity: 1; transform: none; }

/* --- Escritorio ---------------------------------------------------------- */
@media (min-width: 900px) {
	.bb-hero__layout { grid-template-columns: 1.15fr .85fr; align-items: center; }
}

@media (max-width: 620px) {
	.bb-posts,
	.bb-fotos { grid-template-columns: 1fr 1fr; }
	.caso-doc__visor--vertical { max-height: 64vh; }
}

@media (prefers-reduced-motion: reduce) {
	.caso-reveal { opacity: 1; transform: none; transition: none; }
	.bb-racha__meses i { transform: scaleY(1); background: var(--b-rosa); transition: none; }
	.bb-btn, .bb-btn svg { transition: none; }
	.caso-index .caso-wrap { scroll-behavior: auto; }
}

/* --- Que nada ensanche la pagina ---------------------------------------
   En movil, un solo hijo mas ancho que la ventana hace que el navegador
   aleje TODA la pagina y deje un margen muerto en la orilla. Aqui pasaba
   con los rotulos del indice, que no encogen.

   Se usa clip y no hidden a proposito: hidden convertiria este contenedor
   en el ambito de scroll y el indice pegajoso dejaria de pegarse. */
.caso { overflow-x: clip; }

/* Los rotulos del indice ya se recorren dentro de su propia caja; esto
   evita que ademas empujen hacia fuera. */
.caso-index { max-width: 100%; }
.caso-index .caso-wrap { max-width: 100%; min-width: 0; }

/* Los textos dentro de cajas flex pueden encogerse por debajo de su
   contenido: sin esto, una palabra larga fija el ancho de toda la fila. */
.caso-doc figcaption > span,
.bb-feed__cab > span,
.bb-racha__dato > span { min-width: 0; overflow-wrap: anywhere; }

/* La barra de avance sigue a la ventana, no al documento */
.caso-progress { max-width: 100vw; }

/* --- La rejilla del <main> no debe estirarse ---------------------------
   El tema pone display:grid en el <main>. Sus hijos son elementos de
   rejilla y, por defecto, no pueden encogerse por debajo de su contenido
   minimo: el indice, que mide 499 px de rotulos, estiraba la columna y con
   ella toda la pagina. En el telefono eso se ve como si el sitio se alejara
   y dejara un hueco muerto en la orilla. */
.caso { grid-template-columns: minmax(0, 1fr); }
.caso > * { min-width: 0; }

/* --- Piezas propias de Bien Bonito -------------------------------------- */
/* El logo viene en blanco: necesita fondo oscuro para leerse. */
.bb-hero__brand h1 img {
	padding: clamp(1.2rem, 4vw, 2rem);
	background: var(--b-vino);
}

.bb-posts,
.bb-fotos {
	display: grid;
	gap: clamp(.7rem, 1.6vw, 1.2rem);
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}
.bb-posts figure,
.bb-fotos figure {
	margin: 0;
	overflow: hidden;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(42, 22, 32, .1);
}
.bb-posts img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.bb-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* La tienda: capturas reales del sitio en linea */
.bb-tienda {
	display: grid;
	gap: clamp(.8rem, 2vw, 1.4rem);
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	align-items: start;
}
.bb-tienda figure {
	margin: 0;
	overflow: hidden;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 6px 22px rgba(42, 22, 32, .12);
}
.bb-tienda img { display: block; width: 100%; height: auto; }
.bb-tienda figcaption {
	padding: .85rem 1.05rem;
	border-top: 1px solid var(--b-linea);
	font-size: .72rem;
	line-height: 1.45;
	color: var(--b-texto-2);
}
.bb-tienda figcaption b {
	display: block;
	margin-bottom: .2rem;
	font-size: .7rem;
	font-weight: 900;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--b-texto);
}
.bb-tienda__ancho { grid-column: 1 / -1; }

.bb-punto { color: var(--b-rosa); }

@media (max-width: 620px) {
	.bb-posts, .bb-fotos { grid-template-columns: 1fr 1fr; }
}

/* --- La cadena de la campaña -------------------------------------------
   Cuatro pasos que explican por que sirve que la foto, el anuncio y la
   tienda los haga la misma persona. En pantalla ancha van en fila con una
   flecha entre uno y otro; en el telefono, apilados. */
.bb-cadena {
	display: grid;
	gap: clamp(.9rem, 2vw, 1.2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	counter-reset: bb;
}
.bb-cadena__paso {
	position: relative;
	padding: clamp(1.2rem, 3vw, 1.6rem);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(42, 22, 32, .1);
}
.bb-cadena__n {
	display: block;
	margin-bottom: .5rem;
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .1em;
	color: var(--b-rosa);
}
.bb-cadena__paso b { display: block; margin-bottom: .35rem; font-size: 1.05rem; }
.bb-cadena__paso p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--b-texto-2); }

/* La flecha entre pasos: solo cuando van en fila */
@media (min-width: 900px) {
	.bb-cadena__paso:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: calc(clamp(.9rem, 2vw, 1.2rem) / -2 - 5px);
		width: 10px;
		height: 10px;
		margin-top: -5px;
		border-top: 2px solid var(--b-rosa);
		border-right: 2px solid var(--b-rosa);
		transform: rotate(45deg);
	}
}

.bb-visita {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem 1.3rem;
	margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
}
.bb-visita span { font-size: .82rem; color: var(--b-texto-2); }

/* ==========================================================================
   LA FICHA DE MARCA
   Rejilla tipo brief: el logo grande y a su lado las piezas del sistema.
   ========================================================================== */
.bb-brief {
	display: grid;
	gap: clamp(.8rem, 2vw, 1.2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.bb-brief__logo {
	grid-column: 1 / -1;
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: var(--b-vino);
}
.bb-brief__logo img { display: block; width: 100%; height: auto; padding: clamp(1.6rem, 5vw, 3rem); }
.bb-brief__logo figcaption {
	padding: .85rem 1.1rem;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .68rem;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 215, 230, .9);
}

.bb-brief__caja {
	padding: clamp(1.2rem, 3vw, 1.6rem);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(42, 22, 32, .1);
}
.bb-brief__t {
	display: block;
	margin-bottom: .9rem;
	font-size: .7rem;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--b-texto);
}
.bb-brief__nota { margin: 0 0 1rem; font-size: .875rem; line-height: 1.55; color: var(--b-texto-2); }
.bb-brief__caja--dato .bb-brief__nota { margin-bottom: 0; }

/* La paleta */
.bb-paleta { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.bb-paleta li { display: flex; align-items: center; gap: .7rem; }
.bb-paleta b {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(42, 22, 32, .12);
}
.bb-paleta span { font-size: .82rem; font-weight: 700; }
.bb-paleta i { font-style: normal; font-weight: 500; color: var(--b-texto-2); }

/* Las siluetas troqueladas */
.bb-formas { display: flex; gap: .9rem; align-items: flex-end; }
.bb-formas img {
	flex: 1;
	min-width: 0;
	height: auto;
	max-height: 96px;
	object-fit: contain;
	object-position: bottom;
}

/* ==========================================================================
   LOS REELS
   ========================================================================== */
.bb-reels {
	display: grid;
	gap: clamp(.8rem, 2vw, 1.2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	margin-top: clamp(1.2rem, 3vw, 1.8rem);
}
.bb-reel {
	overflow: hidden;
	border-radius: 18px;
	background: var(--b-texto);
	box-shadow: 0 6px 22px rgba(42, 22, 32, .14);
}
.bb-reel video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.bb-reels__pie { margin: 1rem 0 0; font-size: .85rem; color: var(--b-texto-2); }

/* ==========================================================================
   LA ESCENA DEL ANUNCIO
   Tres momentos en un mismo teléfono: el anuncio, la ficha y el pedido.
   Se cuenta moviéndose porque el argumento es que son la misma pieza; en
   cuatro tarjetas de texto eso se lee como una lista y no se siente.
   ========================================================================== */
.bb-anuncio {
	display: grid;
	gap: clamp(1.4rem, 4vw, 2.5rem);
	justify-items: center;
	align-items: center;
}

.bb-anuncio__tel {
	position: relative;
	width: min(260px, 78vw);
	aspect-ratio: 9 / 17;
	padding: 10px;
	border-radius: 30px;
	background: var(--b-texto);
	box-shadow: 0 16px 40px rgba(42, 22, 32, .28);
}

.bb-anuncio__barra {
	position: absolute;
	top: 16px;
	left: 50%;
	width: 62px;
	height: 5px;
	margin-left: -31px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .28);
	z-index: 3;
}

.bb-anuncio__pantalla {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 22px;
	background: #fff;
}

.bb-anuncio__esc {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: 2rem 1rem 1rem;
	opacity: 0;
}

.bb-anuncio__eti {
	align-self: flex-start;
	padding: .2rem .55rem;
	border-radius: 999px;
	background: var(--b-rosa-suave);
	color: var(--b-rosa);
	font-size: .56rem;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.bb-anuncio__foto {
	display: block;
	height: 42%;
	border-radius: 12px;
	background:
		radial-gradient(circle at 35% 35%, var(--b-rosa-claro), transparent 62%),
		radial-gradient(circle at 70% 70%, rgba(143, 28, 70, .22), transparent 58%),
		var(--b-crema);
}

.bb-anuncio__l {
	display: block;
	height: 7px;
	border-radius: 4px;
	background: #e9dfe4;
}
.bb-anuncio__l--corta { width: 58%; }

.bb-anuncio__precio {
	font-size: 1.25rem;
	font-weight: 900;
	color: var(--b-texto);
}

.bb-anuncio__btn {
	margin-top: auto;
	padding: .6rem;
	border-radius: 999px;
	background: var(--b-rosa);
	color: #fff;
	font-size: .68rem;
	font-weight: 900;
	letter-spacing: .05em;
	text-align: center;
}
.bb-anuncio__btn--carrito { background: var(--b-vino); }

.bb-anuncio__esc--ok {
	align-items: center;
	justify-content: center;
	gap: .9rem;
	padding: 1rem;
}
.bb-anuncio__palomita {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #2f855a;
	color: #fff;
}
.bb-anuncio__ok { font-size: .95rem; font-weight: 900; color: var(--b-texto); }

/* El dedo que toca, justo antes de cada cambio */
.bb-anuncio__dedo {
	position: absolute;
	right: 26%;
	bottom: 16%;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(42, 22, 32, .28);
	box-shadow: 0 0 0 0 rgba(42, 22, 32, .28);
	opacity: 0;
	z-index: 4;
}

.bb-anuncio__pie {
	margin: 0;
	max-width: 40ch;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--b-texto-2);
	text-align: center;
}

/* --- El ciclo: anuncio, ficha, pedido, y vuelta ------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.bb-anuncio__esc--ad    { animation: bb-esc 9s ease-in-out infinite; }
	.bb-anuncio__esc--ficha { animation: bb-esc 9s ease-in-out infinite 3s; }
	.bb-anuncio__esc--ok    { animation: bb-esc 9s ease-in-out infinite 6s; }
	.bb-anuncio__dedo       { animation: bb-toca 3s ease-in-out infinite; }
}

@keyframes bb-esc {
	0%          { opacity: 0; transform: translateY(10px); }
	4%, 30%     { opacity: 1; transform: none; }
	34%, 100%   { opacity: 0; transform: translateY(-10px); }
}

@keyframes bb-toca {
	0%, 76%   { opacity: 0; transform: scale(1); box-shadow: 0 0 0 0 rgba(42, 22, 32, .3); }
	84%       { opacity: 1; transform: scale(.82); box-shadow: 0 0 0 9px rgba(42, 22, 32, 0); }
	92%, 100% { opacity: 0; transform: scale(1); }
}

/* Sin animación, se enseña el primer momento y ya */
@media (prefers-reduced-motion: reduce) {
	.bb-anuncio__esc--ad { opacity: 1; }
}

@media (min-width: 820px) {
	.bb-anuncio { grid-template-columns: auto minmax(0, 1fr); justify-items: start; }
	.bb-anuncio__pie { text-align: left; font-size: 1.05rem; }
}

@media (max-width: 620px) {
	.bb-reels { grid-template-columns: 1fr 1fr; }
	.bb-formas img { max-height: 74px; }
}

/* ==========================================================================
   TABLERO DE MARCA
   El formato con el que se presenta una identidad: el logo grande, la paleta
   con sus valores, los recursos gráficos y las aplicaciones. Cada bloque es
   una ficha y la rejilla las acomoda solas.
   ========================================================================== */
.bb-tablero {
	display: grid;
	gap: clamp(.7rem, 1.6vw, 1.1rem);
	grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}

.bb-tablero__logo {
	grid-column: 1 / -1;
	margin: 0;
	overflow: hidden;
	border-radius: 22px;
	background: var(--b-vino);
}
.bb-tablero__logo img {
	display: block;
	width: min(100%, 520px);
	margin-inline: auto;
	height: auto;
	padding: clamp(1.8rem, 6vw, 3.5rem) clamp(1.2rem, 4vw, 2rem);
}
.bb-tablero__logo figcaption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .3rem 1rem;
	padding: .9rem 1.2rem;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .66rem;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 215, 230, .88);
}

.bb-tablero__caja {
	padding: clamp(1.2rem, 3vw, 1.6rem);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(42, 22, 32, .09);
}
.bb-tablero__caja h3 {
	margin: 0 0 1rem;
	font-size: .7rem;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--b-texto);
}
.bb-tablero__nota { margin: 0 0 1rem; font-size: .85rem; line-height: 1.55; color: var(--b-texto-2); }
.bb-tablero__caja > .bb-tablero__nota:last-child { margin-bottom: 0; }

/* --- La paleta, con sus valores ---------------------------------------- */
.bb-paleta { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.bb-paleta li { display: flex; align-items: center; gap: .8rem; }
.bb-paleta b {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(42, 22, 32, .14);
}
.bb-paleta span {
	display: grid;
	min-width: 0;
	font-size: .72rem;
	font-weight: 700;
	color: var(--b-texto);
	line-height: 1.4;
}
.bb-paleta i { font-style: normal; font-size: .82rem; font-weight: 900; }
.bb-paleta em { font-style: normal; font-weight: 500; color: var(--b-texto-2); }

/* --- Las siluetas ------------------------------------------------------- */
.bb-formas { display: flex; gap: .9rem; align-items: flex-end; }
.bb-formas img {
	flex: 1;
	min-width: 0;
	height: auto;
	max-height: 92px;
	object-fit: contain;
	object-position: bottom;
}

/* --- La regla del contorno --------------------------------------------- */
.bb-tablero__prueba { display: flex; flex-wrap: wrap; gap: .5rem; }
.bb-tablero__chip {
	padding: .55rem .8rem;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 900;
	letter-spacing: .05em;
	color: #fff;
	text-shadow: 0 0 3px rgba(0, 0, 0, .35);
}
.bb-tablero__chip--foto {
	background:
		radial-gradient(circle at 30% 30%, var(--b-rosa-claro), transparent 60%),
		radial-gradient(circle at 75% 70%, rgba(143, 28, 70, .5), transparent 55%),
		#8a6b76;
}
.bb-tablero__chip--color { background: var(--b-rosa); }
.bb-tablero__chip--claro { background: var(--b-crema); color: var(--b-texto); text-shadow: none; }

/* --- Las aplicaciones --------------------------------------------------- */
.bb-tablero__caja--aplica { grid-column: 1 / -1; }
.bb-aplica {
	display: grid;
	gap: .7rem;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	margin-bottom: 1rem;
}
.bb-aplica img { display: block; width: 100%; height: auto; border-radius: 14px; aspect-ratio: 1 / 1; object-fit: cover; }

@media (min-width: 900px) {
	.bb-tablero__caja--paleta { grid-row: span 2; }
}

/* ==========================================================================
   LOS VIDEOS
   Mismo formato que el caso de Pwnterrey: el video y debajo su leyenda, con
   el número y una línea de qué es. Se lee sin tener que darle play.
   ========================================================================== */
.bb-videos {
	display: grid;
	gap: clamp(.9rem, 2vw, 1.4rem);
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	align-items: start;
}

.bb-video-card {
	overflow: hidden;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(42, 22, 32, .13);
}
.bb-video-card video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	background: var(--b-texto);
}
.bb-video-card > div { padding: 1rem 1.1rem 1.2rem; }
.bb-video-card span {
	display: block;
	margin-bottom: .4rem;
	font-size: .66rem;
	font-weight: 900;
	letter-spacing: .09em;
	color: var(--b-rosa);
}
.bb-video-card p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--b-texto-2); }

@media (max-width: 620px) {
	.bb-videos { grid-template-columns: 1fr; }
	.bb-formas img { max-height: 72px; }
}

/* El tablero de marca va como lámina completa: en bloques sueltos de HTML
   se leía como una lista de fichas, no como la presentación de una
   identidad. */
.bb-lamina {
	margin: 0;
	overflow: hidden;
	border-radius: 22px;
	box-shadow: 0 8px 30px rgba(42, 22, 32, .14);
}
.bb-lamina img { display: block; width: 100%; height: auto; }

/* --- La portada, en el vino de la marca ---------------------------------
   Antes el logo iba dentro de un recuadro claro porque la version que se
   usaba tenia las letras negras. Con la de letras blancas va suelto sobre
   el color, que es como se ve en sus propias piezas. */
.bb-hero {
	color: var(--b-crema);
	background:
		radial-gradient(circle at 14% 12%, rgba(224, 68, 127, .55), transparent 58%),
		radial-gradient(circle at 86% 84%, rgba(42, 22, 32, .5), transparent 55%),
		var(--b-vino);
}

.bb-hero .caso-back { color: rgba(255, 215, 230, .78); }
.bb-hero .caso-back:hover { color: #fff; }
.bb-hero .caso-kicker,
.bb-hero .caso-label { color: var(--b-rosa-claro); }

/* El logo, sin caja */
.bb-hero__brand h1 img {
	width: min(100%, 400px);
	padding: 0;
	border-radius: 0;
	background: none;
}

.bb-hero__lead { color: rgba(255, 238, 245, .84); }

.bb-hero__summary {
	background: rgba(255, 255, 255, .09);
	box-shadow: inset 0 0 0 1px rgba(255, 215, 230, .2);
}
.bb-hero__summary p { color: rgba(255, 238, 245, .82); }
.bb-hero__summary li { color: var(--b-crema); }
.bb-hero__summary li::before { background: var(--b-rosa-claro); }