@charset "UTF-8";
/* ==========================================================================
   Casa Brea — hoja de estilo principal

   Concepto: "el corralón que llega". El chevron del isotipo es el motor
   gráfico de toda la página: aparece como separador, como viñeta de lista y
   como marca de los cortes a 45° que heredamos de la tipografía Spaceport.

   Sistema:
   1. Fuentes
   2. Variables
   3. Reset y base
   4. Utilidades de layout
   5. Tipografía de sección
   6. Botones
   7. Logotipo e isotipo
   8. Encabezado y navegación
   9. Hero
   10. Por qué
   11. Materiales
   12. Historia
   13. Marcas
   14. Opiniones
   15. Zona
   16. Contacto
   17. Pie
   18. Botón flotante
   19. Animaciones
   20. Página simple (fallback)
   ========================================================================== */

/* 1. FUENTES ============================================================== */

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-latin-ext.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* Spaceport es la fuente del logotipo. Charset limitado y sin acentos fiables:
   se usa SOLO para display corto (kickers, números, etiquetas), nunca para
   párrafos ni texto con tildes. */
@font-face {
	font-family: "Spaceport";
	src: url("../fonts/Spaceport_2006.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* 2. VARIABLES ============================================================ */

:root {
	/* Colores extraídos pixel a pixel de los logos oficiales */
	--rojo:        #e01e33;
	--rojo-hondo:  #b11d28;
	--rojo-claro:  #f4425a;
	--tinta:       #030304;
	--grafito:     #2b2a2b;
	--grafito-alto:#1a1a1b;
	--hueso:       #f3f3f3;
	--blanco:      #ffffff;

	/* Grises derivados */
	--gris-90: #16161a;
	--gris-70: #3f3f43;
	--gris-50: #6e6e74;
	--gris-30: #a8a8ae;
	--gris-15: #d9d9de;
	--gris-08: #e9e9ec;

	/* Tipografía */
	--fuente:  "Montserrat", "Segoe UI", system-ui, sans-serif;
	--display: "Spaceport", "Montserrat", sans-serif;

	/* Escala fluida */
	--t-xs:  clamp(0.72rem, 0.69rem + 0.14vw, 0.8rem);
	--t-sm:  clamp(0.84rem, 0.8rem + 0.18vw, 0.94rem);
	--t-md:  clamp(0.98rem, 0.93rem + 0.24vw, 1.12rem);
	/* Escalón intermedio para los párrafos introductorios de sección: destacan
	   sobre el cuerpo de texto sin llegar al tamaño de un subtítulo. */
	--t-intro: clamp(1.02rem, 0.96rem + 0.3vw, 1.22rem);
	--t-lg:  clamp(1.16rem, 1.05rem + 0.5vw, 1.5rem);
	--t-xl:  clamp(1.55rem, 1.3rem + 1.15vw, 2.3rem);
	--t-2xl: clamp(1.95rem, 1.55rem + 1.85vw, 3.15rem);
	--t-3xl: clamp(2.4rem, 1.8rem + 2.8vw, 4.2rem);

	/* Ritmo */
	--wrap:      1240px;
	--wrap-fino: 860px;
	--pad:       clamp(1.15rem, 4vw, 2.5rem);
	--seccion:   clamp(4.5rem, 9vw, 8.5rem);
	--radio:     14px;
	--corte:     16px; /* corte a 45°, guiño a la Spaceport */

	/* Movimiento */
	--curva: cubic-bezier(0.22, 0.61, 0.36, 1);
	--rapido: 0.22s;
	--medio:  0.45s;

	/* Sombras */
	--sombra-sm: 0 1px 2px rgba(3, 3, 4, 0.06), 0 3px 10px rgba(3, 3, 4, 0.05);
	--sombra-md: 0 4px 12px rgba(3, 3, 4, 0.08), 0 18px 40px rgba(3, 3, 4, 0.09);
	--sombra-lg: 0 20px 60px rgba(3, 3, 4, 0.28);

	/* Grano: textura de cemento/papel de archivo. Evita el plano digital plano. */
	--grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* 3. RESET Y BASE ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 92px;
}

body {
	margin: 0;
	background: var(--hueso);
	color: var(--tinta);
	font-family: var(--fuente);
	font-size: var(--t-md);
	line-height: 1.65;
	font-weight: 450;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	margin: 0;
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

img, svg, video {
	display: block;
	max-width: 100%;
	height: auto;
}

a { color: inherit; text-decoration: none; }

button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var(--rojo);
	outline-offset: 3px;
	border-radius: 3px;
}

::selection {
	background: var(--rojo);
	color: var(--blanco);
}

.cb-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.85rem 1.4rem;
	background: var(--rojo);
	color: var(--blanco);
	font-weight: 700;
}
.cb-skip:focus { left: 0; }

/* 4. LAYOUT =============================================================== */

.cb-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.cb-wrap--angosto { max-width: var(--wrap-fino); }

.cb-seccion {
	position: relative;
	padding-block: var(--seccion);
}

.cb-seccion--clara { background: var(--hueso); }

.cb-seccion--oscura {
	background: var(--grafito);
	color: var(--hueso);
}

/* 5. TIPOGRAFÍA DE SECCIÓN ================================================ */

/* Medida en rem y no en ch: Montserrat es ancha y en `ch` los títulos
   terminaban partidos en 4-5 líneas cortitas. */
.cb-cabecera {
	max-width: 34rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cb-cabecera--split {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	max-width: none;
	align-items: end;
}

@media (min-width: 900px) {
	.cb-cabecera--split { grid-template-columns: 1.15fr 0.85fr; }
}

.cb-cabecera__texto {
	color: var(--gris-50);
	font-size: var(--t-intro);
	line-height: 1.65;
	max-width: 46ch;
}

.cb-cabecera__texto--claro { color: var(--gris-30); }

/* Número de sección: recurso editorial en la fuente del logo */
.cb-num {
	display: block;
	margin-bottom: 0.9rem;
	font-family: var(--display);
	font-size: var(--t-sm);
	letter-spacing: 0.25em;
	color: var(--gris-30);
}

.cb-num--claro { color: rgba(243, 243, 243, 0.35); }

.cb-kicker {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.85rem;
	color: var(--rojo);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.cb-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--rojo);
}

.cb-kicker--claro { color: var(--rojo-claro); }
.cb-kicker--claro::before { background: var(--rojo-claro); }

/* Sobre el fondo rojo del cierre, el rojo del kicker no contrasta:
   ahí va en blanco translúcido. */
.cb-contacto .cb-kicker--claro { color: rgba(255, 255, 255, 0.82); }
.cb-contacto .cb-kicker--claro::before { background: rgba(255, 255, 255, 0.7); }

.cb-titulo { font-size: var(--t-xl); }
.cb-titulo--md { font-size: var(--t-2xl); }
.cb-titulo--lg { font-size: var(--t-3xl); }
.cb-titulo--claro { color: var(--hueso); }

.cb-prosa { font-size: var(--t-md); color: var(--gris-70); }
.cb-prosa > * + * { margin-top: 1rem; }

/* 6. BOTONES ============================================================== */

.cb-btn {
	--btn-bg: var(--rojo);
	--btn-fg: var(--blanco);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.92rem 1.5rem;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	border-radius: 3px;
	/* Corte a 45° en la esquina inferior derecha, como las letras del logo */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%);
	transition: transform var(--rapido) var(--curva), background var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
	overflow: hidden;
}

.cb-btn svg { flex: none; }

.cb-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(224, 30, 51, 0.3);
}

.cb-btn:active { transform: translateY(0); }

.cb-btn--lg {
	padding: 1.05rem 1.85rem;
	font-size: var(--t-md);
	--corte: 18px;
}

.cb-btn--sm {
	padding: 0.62rem 1.05rem;
	font-size: var(--t-xs);
	--corte: 11px;
}

.cb-btn--rojo:hover { --btn-bg: var(--rojo-hondo); }

.cb-btn--blanco {
	--btn-bg: var(--blanco);
	--btn-fg: var(--tinta);
}
.cb-btn--blanco:hover {
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.cb-btn--fantasma {
	--btn-bg: transparent;
	--btn-fg: var(--hueso);
	box-shadow: inset 0 0 0 1.5px rgba(243, 243, 243, 0.32);
}
.cb-btn--fantasma:hover {
	--btn-bg: rgba(243, 243, 243, 0.1);
	box-shadow: inset 0 0 0 1.5px rgba(243, 243, 243, 0.6);
}

/* La flecha del botón secundario acompaña el hover */
.cb-btn--fantasma svg { transition: transform var(--rapido) var(--curva); }
.cb-btn--fantasma:hover svg { transform: translateX(4px); }

/* 7. LOGOTIPO E ISOTIPO =================================================== */

.cb-logotipo {
	display: inline-flex;
	flex-direction: column;
	gap: 0.22em;
	line-height: 1;
}

.cb-logotipo__marca {
	font-family: var(--display);
	font-size: 1.42rem;
	letter-spacing: 0.01em;
	text-transform: lowercase;
}

.cb-logotipo__casa { color: currentColor; }
.cb-logotipo__brea { color: var(--rojo); }

.cb-logotipo__bajada {
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	opacity: 0.62;
}

/* El SVG lleva width/height intrínsecos como respaldo; acá mandamos por alto
   y dejamos que el ancho se calcule solo para no deformar el isotipo. */
.cb-isotipo {
	width: auto;
	height: 34px;
}

/* 8. ENCABEZADO =========================================================== */

.cb-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	color: var(--hueso);
	transition: background var(--medio) var(--curva), backdrop-filter var(--medio) var(--curva);
}

.cb-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(3, 3, 4, 0.72), rgba(3, 3, 4, 0));
	opacity: 1;
	transition: opacity var(--medio) var(--curva);
	pointer-events: none;
}

.cb-header.is-fijo {
	background: rgba(26, 26, 27, 0.93);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.cb-header.is-fijo::before { opacity: 0; }

.cb-header__linea {
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(243, 243, 243, 0.18), transparent);
	opacity: 0;
	transition: opacity var(--medio) var(--curva);
}

.cb-header.is-fijo .cb-header__linea { opacity: 1; }

.cb-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 0.95rem var(--pad);
}

.cb-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
}

.cb-header__iso { height: 30px; }

.cb-header__logo-img { max-height: 42px; width: auto; }

.cb-logotipo--header .cb-logotipo__marca { font-size: 1.28rem; }

.cb-nav {
	display: flex;
	align-items: center;
	gap: clamp(1.2rem, 2.6vw, 2.4rem);
}

.cb-nav__lista {
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 2.2vw, 2rem);
}

.cb-nav__link {
	position: relative;
	font-size: var(--t-sm);
	font-weight: 600;
	color: rgba(243, 243, 243, 0.88);
	transition: color var(--rapido) var(--curva);
}

.cb-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 2px;
	background: var(--rojo);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--rapido) var(--curva);
}

.cb-nav__link:hover { color: var(--blanco); }
.cb-nav__link:hover::after,
.cb-nav__link.is-activo::after { transform: scaleX(1); }

/* Botón hamburguesa */
.cb-burger {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	margin-right: -8px;
}

.cb-burger__linea {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 2px;
	background: var(--hueso);
	transition: transform var(--rapido) var(--curva), opacity var(--rapido) var(--curva);
}

.cb-burger__linea:nth-child(1) { top: 18px; }
.cb-burger__linea:nth-child(2) { top: 25px; }

.cb-burger[aria-expanded="true"] .cb-burger__linea:nth-child(1) {
	transform: translateY(3.5px) rotate(45deg);
}
.cb-burger[aria-expanded="true"] .cb-burger__linea:nth-child(2) {
	transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 900px) {
	.cb-burger { display: block; }

	.cb-nav {
		position: fixed;
		inset: 0 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 5.5rem var(--pad) 2.2rem;
		background: rgba(20, 20, 21, 0.98);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		transform: translateY(-100%);
		visibility: hidden;
		transition: transform var(--medio) var(--curva), visibility var(--medio);
	}

	.cb-nav.is-abierta {
		transform: translateY(0);
		visibility: visible;
	}

	.cb-nav__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.cb-nav__item + .cb-nav__item { border-top: 1px solid rgba(243, 243, 243, 0.1); }

	.cb-nav__link {
		display: block;
		padding: 1.05rem 0;
		font-size: var(--t-lg);
		font-weight: 700;
	}

	.cb-nav__link::after { display: none; }

	.cb-nav__cta {
		margin-top: 1.5rem;
		justify-content: center;
	}
}

/* 9. HERO ================================================================= */

.cb-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding-block: clamp(6.5rem, 12vh, 8.5rem) clamp(4.5rem, 9vh, 6rem);
	background: var(--grafito-alto);
	color: var(--hueso);
	overflow: hidden;
}

.cb-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cb-hero__imagen,
.cb-hero__video,
.cb-hero__slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Viraje cálido leve, pensado para las fotos B&N de archivo: las saca del gris
   muerto. Con fotos actuales a color hay que ser mucho más suave, o el cielo y
   los colores de la flota quedan apagados: eso lo resuelve la clase
   .cb-hero__imagen--color, que se aplica desde la plantilla. */
.cb-hero__imagen,
.cb-hero__slide img {
	filter: saturate(0.72) contrast(1.06) sepia(0.12);
}

.cb-hero__imagen--color,
.cb-hero__slide img.cb-hero__imagen--color {
	filter: saturate(0.94) contrast(1.04);
}

.cb-hero__slider { position: absolute; inset: 0; }

.cb-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.3s var(--curva);
}

.cb-hero__slide.is-activa { opacity: 1; }

/* Velo: oscurece la foto para que el texto blanco se lea siempre.
   Dos capas: una horizontal, más densa del lado del texto y liviana del lado de
   la foto, y un pie que ancla botones y números.
   Las DOS escalan con --cb-hero-oscuro. Antes el pie era fijo (0.92 abajo) y se
   superponía a la otra capa, así que bajar el control casi no se notaba: con el
   control en 30 la zona del título terminaba al 66% y el pie al 97%. */
.cb-hero__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right,
			rgba(3, 3, 4, calc(var(--cb-hero-oscuro, 0.3) + 0.18)) 0%,
			rgba(3, 3, 4, calc(var(--cb-hero-oscuro, 0.3) + 0.10)) 40%,
			rgba(3, 3, 4, calc(var(--cb-hero-oscuro, 0.3) * 0.42)) 72%,
			rgba(3, 3, 4, calc(var(--cb-hero-oscuro, 0.3) * 0.30)) 100%),
		linear-gradient(to top,
			rgba(3, 3, 4, calc(var(--cb-hero-oscuro, 0.3) * 1.15)) 0%,
			rgba(3, 3, 4, calc(var(--cb-hero-oscuro, 0.3) * 0.45)) 30%,
			rgba(3, 3, 4, 0) 58%,
			rgba(3, 3, 4, calc(var(--cb-hero-oscuro, 0.3) * 0.55)) 100%);
}

.cb-hero__grano {
	position: absolute;
	inset: 0;
	background-image: var(--grano);
	opacity: 0.16;
	mix-blend-mode: overlay;
	pointer-events: none;
}

.cb-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.cb-hero__contenido {
	max-width: 46rem;
	/* Dos sombras en vez de una: la cerrada despega el texto de lo que tenga
	   detrás (un camión blanco, el cielo), la abierta lo asienta sobre la escena.
	   Así se puede dejar la foto clara sin perder legibilidad, en vez de tapar
	   la imagen con más velo. */
	text-shadow:
		0 1px 3px rgba(3, 3, 4, 0.55),
		0 2px 26px rgba(3, 3, 4, 0.5);
}

.cb-hero__kicker { margin-bottom: 1.35rem; }

.cb-hero__kicker-marco {
	display: inline-block;
	padding: 0.42rem 1.05rem;
	border: 1.5px solid var(--rojo);
	border-radius: 999px;
	font-family: var(--display);
	font-size: var(--t-xs);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--rojo-claro);
}

/* El hero tiene que entrar completo en pantalla junto con el remate, el
   párrafo, los botones y los números: por eso su escala es más contenida
   que la de los títulos de sección. */
.cb-hero__titulo {
	font-size: clamp(2rem, 1.25rem + 3.1vw, 3.9rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
}

.cb-hero__remate {
	margin-top: 0.45rem;
	color: var(--rojo-claro);
	font-size: clamp(1.5rem, 1rem + 2.1vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.cb-hero__texto {
	margin-top: 1.25rem;
	max-width: 46ch;
	color: rgba(243, 243, 243, 0.86);
	font-size: var(--t-md);
	line-height: 1.6;
}

.cb-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1.85rem;
}

.cb-hero__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	gap: 1.1rem 1.7rem;
	max-width: 620px;
	margin-top: clamp(1.9rem, 4vh, 2.9rem);
	padding-top: 1.35rem;
	border-top: 1px solid rgba(243, 243, 243, 0.18);
}

.cb-stat__num {
	font-family: var(--display);
	font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
	line-height: 1;
	color: var(--hueso);
}

.cb-stat__eti {
	margin-top: 0.4rem;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(243, 243, 243, 0.5);
}

/* Puntos del pase de imágenes */
.cb-hero__puntos {
	position: absolute;
	right: var(--pad);
	bottom: 2.2rem;
	z-index: 2;
	display: flex;
	gap: 0.5rem;
}

.cb-hero__punto {
	width: 26px;
	height: 3px;
	background: rgba(243, 243, 243, 0.3);
	transition: background var(--rapido) var(--curva), width var(--rapido) var(--curva);
}

.cb-hero__punto.is-activo {
	width: 42px;
	background: var(--rojo);
}

.cb-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 1.6rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-left: -21px;
	border: 1px solid rgba(243, 243, 243, 0.28);
	border-radius: 50%;
	color: rgba(243, 243, 243, 0.75);
	animation: cb-flota 2.4s ease-in-out infinite;
	transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}

.cb-hero__scroll:hover {
	background: var(--rojo);
	border-color: var(--rojo);
	color: var(--blanco);
}

@media (max-width: 700px) {
	.cb-hero__scroll { display: none; }
	.cb-hero__puntos { left: var(--pad); right: auto; bottom: 1.4rem; }
}

/* 10. POR QUÉ ============================================================= */

.cb-tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(0.9rem, 1.6vw, 1.35rem);
}

.cb-tarjeta {
	position: relative;
	padding: clamp(1.5rem, 2.4vw, 2rem);
	background: var(--blanco);
	border: 1px solid var(--gris-08);
	border-radius: var(--radio);
	/* Corte a 45° en la esquina inferior derecha */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
	transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}

.cb-tarjeta:hover {
	transform: translateY(-5px);
	box-shadow: var(--sombra-md);
}

/* El triángulo que rellena visualmente la esquina cortada */
.cb-tarjeta__esquina {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 22px;
	height: 22px;
	background: linear-gradient(135deg, transparent 50%, var(--rojo) 50%);
	opacity: 0.16;
	transition: opacity var(--medio) var(--curva);
}

.cb-tarjeta:hover .cb-tarjeta__esquina { opacity: 1; }

.cb-tarjeta__icono {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1.15rem;
	color: var(--rojo);
	background: rgba(224, 30, 51, 0.08);
	border-radius: 10px;
}

.cb-tarjeta__titulo {
	font-size: var(--t-lg);
	letter-spacing: -0.02em;
}

.cb-tarjeta__texto {
	margin-top: 0.55rem;
	color: var(--gris-50);
	font-size: var(--t-sm);
	line-height: 1.6;
}

/* 11. MATERIALES ========================================================== */

.cb-materiales { padding-top: 0; }

.cb-rubros {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 1px;
	background: var(--gris-15);
	border: 1px solid var(--gris-15);
	border-radius: var(--radio);
	overflow: hidden;
}

.cb-rubro {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1.35rem clamp(1.1rem, 2vw, 1.6rem);
	background: var(--blanco);
	transition: background var(--rapido) var(--curva);
}

.cb-rubro:hover { background: var(--hueso); }

.cb-rubro__chevron {
	flex: none;
	margin-top: 2px;
	color: var(--rojo);
	transition: transform var(--rapido) var(--curva);
}

.cb-rubro:hover .cb-rubro__chevron { transform: translateX(3px); }

.cb-rubro__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
}

.cb-rubro__nombre {
	font-weight: 700;
	font-size: var(--t-md);
	letter-spacing: -0.01em;
}

.cb-rubro__detalle {
	color: var(--gris-50);
	font-size: var(--t-sm);
	line-height: 1.5;
}

.cb-materiales__cta {
	margin-top: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

/* 12. HISTORIA ============================================================ */

.cb-historia { overflow: hidden; }

.cb-historia__grano {
	position: absolute;
	inset: 0;
	background-image: var(--grano);
	opacity: 0.1;
	pointer-events: none;
}

.cb-historia .cb-wrap { position: relative; z-index: 1; }

/* Carrusel horizontal en desktop, apilado en mobile */
.cb-linea {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(272px, 1fr);
	gap: clamp(1rem, 2vw, 1.6rem);
	overflow-x: auto;
	padding-bottom: 1.2rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: rgba(243, 243, 243, 0.24) transparent;
}

.cb-linea::-webkit-scrollbar { height: 5px; }
.cb-linea::-webkit-scrollbar-track { background: rgba(243, 243, 243, 0.08); }
.cb-linea::-webkit-scrollbar-thumb {
	background: rgba(243, 243, 243, 0.26);
	border-radius: 3px;
}

.cb-hito {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

.cb-hito__figura {
	position: relative;
	margin: 0 0 1.15rem;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radio);
	background: var(--gris-90);
}

.cb-hito__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Viraje cálido: las fotos son B&N puro y esto las hace respirar */
	filter: sepia(0.28) contrast(1.05) brightness(0.96);
	transition: transform 0.7s var(--curva), filter var(--medio) var(--curva);
}

.cb-hito:hover .cb-hito__img {
	transform: scale(1.045);
	filter: sepia(0.1) contrast(1.08) brightness(1.02);
}

.cb-hito__vineta {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(3, 3, 4, 0.55), rgba(3, 3, 4, 0) 55%);
	pointer-events: none;
}

.cb-hito__anio {
	display: inline-block;
	margin-bottom: 0.55rem;
	padding: 0.24rem 0.7rem;
	background: var(--rojo);
	color: var(--blanco);
	font-family: var(--display);
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	border-radius: 3px;
}

.cb-hito__titulo {
	font-size: var(--t-lg);
	color: var(--hueso);
	letter-spacing: -0.02em;
}

.cb-hito__texto {
	margin-top: 0.5rem;
	color: rgba(243, 243, 243, 0.6);
	font-size: var(--t-sm);
	line-height: 1.6;
}

.cb-historia__cierre {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	max-width: 40ch;
	margin-top: clamp(2.2rem, 4vw, 3.2rem);
	color: var(--hueso);
	font-size: var(--t-lg);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

.cb-historia__cierre-chevron {
	flex: none;
	color: var(--rojo);
}

@media (max-width: 640px) {
	.cb-linea {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		overflow-x: visible;
	}
	.cb-hito__figura { aspect-ratio: 3 / 2; }
}

/* 13. MARCAS ============================================================== */

.cb-marcas {
	padding-block: clamp(2.8rem, 5vw, 4.2rem);
	background: var(--tinta);
	color: var(--hueso);
	overflow: hidden;
}

.cb-marcas__titulo {
	margin-bottom: 1.8rem;
	text-align: center;
	color: rgba(243, 243, 243, 0.45);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.cb-cinta {
	display: flex;
	width: max-content;
	/* Máscara: las marcas se desvanecen en los bordes en vez de cortarse seco */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
	animation: cb-cinta 42s linear infinite;
}

.cb-cinta:hover { animation-play-state: paused; }

.cb-cinta__pista {
	display: flex;
	align-items: center;
	gap: clamp(2.4rem, 5vw, 4.5rem);
	padding-right: clamp(2.4rem, 5vw, 4.5rem);
}

/* Alto fijo para que logos y nombres compartan la misma linea de base optica,
   sin importar la proporcion de cada archivo. */
.cb-cinta__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
}

.cb-cinta__nombre {
	font-family: var(--display);
	font-size: clamp(1.2rem, 0.9rem + 1.1vw, 1.9rem);
	letter-spacing: 0.03em;
	color: rgba(243, 243, 243, 0.55);
	white-space: nowrap;
	transition: color var(--rapido) var(--curva);
}

.cb-cinta__item:hover .cb-cinta__nombre { color: var(--hueso); }

/* Los logos se sirven ya normalizados y en blanco (ver tools/logos.py), asi que
   no se los fuerza con filtros: se respeta el archivo oficial de cada marca.
   El alto es un techo, no una medida fija; el ancho tambien esta acotado para
   que un logo muy apaisado no domine la cinta. */
.cb-cinta__logo {
	/* Techo generoso a proposito: los logos compactos -- apilados o encerrados en
	   un contenedor, como Loma Negra -- necesitan mas alto que los horizontales
	   para pesar lo mismo a la vista. Quien iguala el tamano optico es
	   tools/logos.py; esto es solo una red de seguridad. */
	max-height: 72px;
	max-width: 150px;
	width: auto;
	height: auto;
	opacity: 0.55;
	transition: opacity var(--rapido) var(--curva);
}

.cb-cinta__item:hover .cb-cinta__logo { opacity: 1; }

/* 14. OPINIONES =========================================================== */

/* Los testimonios son capturas reales de WhatsApp, así que la sección imita el
   chat de verdad: fondo empapelado, burbuja blanca del cliente a la izquierda y
   verde de Casa Brea a la derecha. Los colores son los de WhatsApp a propósito
   —no los de la marca—: es lo que hace que se lea como una captura y no como un
   recuadro de diseño. El rojo Casa Brea vuelve en el encabezado y los controles,
   que sí son nuestros. */

.cb-opiniones {
	--wa-papel:  #e6ded5;
	--wa-propia: #d9fdd3;
	--wa-ajena:  #ffffff;
	--wa-tinta:  #111b21;
	--wa-gris:   #667781;
}

/* -- Carrusel ------------------------------------------------------------- */

.cb-chats { position: relative; }

/* La pista se sale del wrap para que las tarjetas se corten contra el borde de
   la pantalla y se vea que hay más: si terminaran justo en el margen, el chat
   parecería una grilla de tres y nadie buscaría el cuarto. */
.cb-chats__pista {
	display: flex;
	gap: clamp(1rem, 2.2vw, 1.6rem);
	margin: 0;
	margin-inline: calc(var(--pad) * -1);
	padding: 0.5rem var(--pad) 1.6rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Sin scroll-snap: la cinta avanza sola y de a poco, y un imán que la
	   acomodara a cada tarjeta pelearía contra ese movimiento. */
}

.cb-chats__pista::-webkit-scrollbar { display: none; }

/* La mano solo aparece con JS: sin él no hay nada que agarrar. */
.cb-chats.is-vivo .cb-chats__pista { cursor: grab; }

.cb-chats.is-agarrado .cb-chats__pista {
	cursor: grabbing;
	/* Si no, arrastrar la cinta selecciona el texto de los mensajes. */
	user-select: none;
}

/* El foco va en la pista y no en cada tarjeta: quien navega con teclado la
   recorre con las flechas, que es como funciona un carrusel nativo. */
.cb-chats__pista:focus-visible {
	outline: 2px solid var(--rojo);
	outline-offset: 4px;
	border-radius: var(--radio);
}

.cb-chats__slide {
	display: flex;
	flex: 0 0 min(84vw, 380px);
}

/* -- Tarjeta de conversación ---------------------------------------------- */

.cb-chat {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background: var(--wa-papel);
	border-radius: var(--radio);
	/* Esquina cortada a 45°, el mismo guiño a la Spaceport que las demás
	   tarjetas del sitio. Es lo único que delata que esto es Casa Brea. */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%);
	box-shadow: var(--sombra-md);
}

/* Empapelado del chat: puntitos muy tenues, apenas para que el fondo no sea un
   plano liso. El doodle real de WhatsApp es de ellos y no se puede copiar. */
.cb-chat__cuerpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.45rem;
	padding: 1.1rem 0.95rem 1.3rem;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(3, 3, 4, 0.045) 1px, transparent 1px),
		radial-gradient(circle at 70% 75%, rgba(3, 3, 4, 0.035) 1px, transparent 1px);
	background-size: 28px 28px, 44px 44px;
}

.cb-chat__cab {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.8rem 1rem;
	background: var(--grafito);
	color: var(--hueso);
}

.cb-chat__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--rojo);
	color: var(--blanco);
	font-family: var(--display);
	font-size: var(--t-sm);
	line-height: 1;
	/* La Spaceport no centra ópticamente: el trazo queda pesado abajo. */
	padding-top: 2px;
}

.cb-chat__quien {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.cb-chat__nombre {
	font-size: var(--t-sm);
	font-weight: 700;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cb-chat__rol {
	color: var(--gris-30);
	font-size: var(--t-xs);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -- Burbujas ------------------------------------------------------------- */

.cb-msg {
	position: relative;
	max-width: 85%;
	padding: 0.5rem 0.7rem 0.45rem;
	border-radius: 9px;
	box-shadow: 0 1px 1px rgba(3, 3, 4, 0.14);
}

.cb-msg--cliente {
	align-self: flex-start;
	background: var(--wa-ajena);
	border-top-left-radius: 2px;
}

.cb-msg--casabrea {
	align-self: flex-end;
	background: var(--wa-propia);
	border-top-right-radius: 2px;
}

/* Colita de la burbuja. Solo la lleva la primera de cada tanda: dos mensajes
   seguidos de la misma persona van pegados y sin pico, igual que en la app. */
.cb-msg::after {
	content: "";
	position: absolute;
	top: 0;
	width: 9px;
	height: 12px;
}

.cb-msg--cliente::after {
	left: -8px;
	background: var(--wa-ajena);
	clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.cb-msg--casabrea::after {
	right: -8px;
	background: var(--wa-propia);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

.cb-msg--cliente + .cb-msg--cliente::after,
.cb-msg--casabrea + .cb-msg--casabrea::after { display: none; }

/* Y van más juntos entre sí, para que la tanda se lea como un bloque. */
.cb-msg--cliente + .cb-msg--cliente,
.cb-msg--casabrea + .cb-msg--casabrea { margin-top: -0.2rem; }

.cb-msg--cliente + .cb-msg--cliente { border-top-left-radius: 9px; }
.cb-msg--casabrea + .cb-msg--casabrea { border-top-right-radius: 9px; }

.cb-msg__texto {
	margin: 0;
	color: var(--wa-tinta);
	font-size: var(--t-sm);
	line-height: 1.45;
	/* Los mensajes traen tal cual lo que escribió el cliente, incluidas palabras
	   largas o links: sin esto una sola desborda la burbuja. */
	overflow-wrap: anywhere;
}

/* La hora se mete en el renglón final del texto, como en la app: flota a la
   derecha y el párrafo la esquiva. */
.cb-msg__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.22rem;
	float: right;
	margin: 0.35rem -0.1rem -0.1rem 0.5rem;
	color: var(--wa-gris);
	font-size: 0.68rem;
	line-height: 1;
	white-space: nowrap;
}

.cb-msg__tildes {
	width: 15px;
	height: 10px;
	color: #53bdeb;
}

/* -- Controles ------------------------------------------------------------ */

.cb-chats__pie {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	margin-top: 0.4rem;
}

.cb-chats__boton {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--gris-15);
	background: var(--blanco);
	color: var(--grafito);
	cursor: pointer;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
	transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}

.cb-chats__boton svg { width: 18px; height: 18px; }

.cb-chats__boton:hover,
.cb-chats__boton:focus-visible {
	background: var(--rojo);
	border-color: var(--rojo);
	color: var(--blanco);
}

/* Nace oculto y lo enciende el JS. Hay que ganarle al display: grid de arriba. */
.cb-chats__boton[hidden] { display: none; }

.cb-chats__boton .cb-chats__ico-play { display: none; }
.cb-chats__boton.is-pausado .cb-chats__ico-pausa { display: none; }
.cb-chats__boton.is-pausado .cb-chats__ico-play { display: block; }

/* Se queda siempre a la vista: agarrar la cinta con el mouse no se le ocurre
   a nadie si no se lo decimos, y no hay ícono que lo sugiera. */
.cb-chats__ayuda {
	margin: 0;
	color: var(--gris-50);
	font-size: var(--t-xs);
	text-align: center;
}

/* 15. ZONA ================================================================ */

.cb-zona { padding-top: 0; }

.cb-zona__grid {
	display: grid;
	gap: clamp(2.2rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 900px) {
	.cb-zona__grid { grid-template-columns: 1.05fr 0.95fr; }
}

.cb-zona__intro {
	max-width: 44ch;
	margin-top: 1.1rem;
	color: var(--gris-50);
	font-size: var(--t-intro);
	line-height: 1.65;
}

.cb-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-top: 1.9rem;
}

.cb-etiqueta {
	padding: 0.48rem 0.95rem;
	background: var(--blanco);
	border: 1px solid var(--gris-15);
	border-radius: 999px;
	font-size: var(--t-sm);
	font-weight: 600;
	transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}

.cb-etiqueta:hover {
	border-color: var(--rojo);
	color: var(--rojo);
	transform: translateY(-2px);
}

.cb-zona__cta { margin-top: 2.1rem; }

.cb-zona__mapa {
	position: relative;
	padding: clamp(1.2rem, 2.5vw, 2rem);
	background: var(--blanco);
	border: 1px solid var(--gris-08);
	border-radius: var(--radio);
	box-shadow: var(--sombra-sm);
}

.cb-zona__img {
	width: 100%;
	border-radius: calc(var(--radio) - 4px);
}

.cb-zona__svg { width: 100%; height: auto; }

.cb-zona__nota {
	margin-top: 0.9rem;
	text-align: center;
	color: var(--gris-50);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* 16. CONTACTO ============================================================ */

.cb-contacto {
	position: relative;
	background:
		radial-gradient(120% 100% at 0% 0%, var(--rojo) 0%, var(--rojo-hondo) 46%, var(--grafito-alto) 100%);
	color: var(--hueso);
	overflow: hidden;
}

.cb-contacto__grano {
	position: absolute;
	inset: 0;
	background-image: var(--grano);
	opacity: 0.12;
	pointer-events: none;
}

.cb-contacto .cb-wrap { position: relative; z-index: 1; }

.cb-contacto__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.cb-contacto__grid { grid-template-columns: 1.1fr 0.9fr; }
}

.cb-contacto .cb-num--claro { color: rgba(243, 243, 243, 0.4); }

.cb-contacto__texto {
	max-width: 42ch;
	margin: 1.2rem 0 2.2rem;
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--t-intro);
	line-height: 1.65;
}

.cb-contacto__nota {
	margin-top: 1.1rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--t-sm);
}

.cb-contacto__datos {
	display: grid;
	gap: 0.7rem;
}

.cb-dato__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.25rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}

a.cb-dato__link:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: translateX(4px);
}

.cb-dato__icono {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 8px;
}

.cb-dato__cuerpo { display: flex; flex-direction: column; }

.cb-dato__eti {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.cb-dato__valor {
	font-size: var(--t-md);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* 17. PIE ================================================================= */

.cb-footer {
	background: var(--tinta);
	color: var(--hueso);
}

.cb-footer__inner {
	display: grid;
	gap: clamp(2.2rem, 5vw, 4rem);
	max-width: var(--wrap);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 4.5rem) var(--pad);
}

@media (min-width: 800px) {
	.cb-footer__inner { grid-template-columns: 1.2fr 1fr; }
}

.cb-footer__marca {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.15rem;
}

.cb-footer__iso { height: 44px; }

.cb-logotipo--footer .cb-logotipo__marca { font-size: 1.6rem; }

.cb-footer__tagline {
	max-width: 34ch;
	color: rgba(243, 243, 243, 0.55);
	font-size: var(--t-sm);
	line-height: 1.6;
}

.cb-footer__datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 2rem;
}

.cb-footer__titulo {
	margin-bottom: 1rem;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(243, 243, 243, 0.42);
}

.cb-footer__lista { display: grid; gap: 0.7rem; }

.cb-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 0.62rem;
	color: rgba(243, 243, 243, 0.8);
	font-size: var(--t-sm);
	transition: color var(--rapido) var(--curva);
}

.cb-footer__link svg { flex: none; color: var(--rojo); }

a.cb-footer__link:hover { color: var(--blanco); }

.cb-footer__base {
	border-top: 1px solid rgba(243, 243, 243, 0.1);
}

.cb-footer__legal {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 1.4rem var(--pad);
	color: rgba(243, 243, 243, 0.35);
	font-size: var(--t-xs);
}

/* 18. BOTÓN FLOTANTE ====================================================== */

.cb-flotante {
	position: fixed;
	right: clamp(1rem, 3vw, 1.9rem);
	bottom: clamp(1rem, 3vw, 1.9rem);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.15rem;
	background: #25d366;
	color: #04310f;
	font-size: var(--t-sm);
	font-weight: 700;
	border-radius: 999px;
	box-shadow: 0 8px 26px rgba(37, 211, 102, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(0.94);
	transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva), visibility var(--medio);
}

.cb-flotante.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.cb-flotante:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5);
}

@media (max-width: 560px) {
	.cb-flotante {
		padding: 0;
		width: 56px;
		height: 56px;
		justify-content: center;
	}
	.cb-flotante__texto { display: none; }
}

/* 19. ANIMACIONES ========================================================= */

/* Aparición al entrar en pantalla. El JS agrega .is-visible. */
.cb-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 0.75s var(--curva) var(--cb-delay, 0ms),
		transform 0.75s var(--curva) var(--cb-delay, 0ms);
	will-change: opacity, transform;
}

.cb-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* El hero se anima al cargar, sin esperar scroll */
.cb-hero .cb-reveal {
	animation: cb-entra 0.85s var(--curva) both;
	animation-delay: var(--cb-delay, 0ms);
	opacity: 1;
	transform: none;
	transition: none;
}

@keyframes cb-entra {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}

@keyframes cb-cinta {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes cb-flota {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}

/* Respeto por quienes prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.cb-reveal,
	.cb-hero .cb-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.cb-cinta { animation: none; }
	.cb-hero__scroll { animation: none; }
}

/* 20. PÁGINA SIMPLE (fallback de index.php) =============================== */

.cb-simple { padding-top: calc(var(--seccion) + 4rem); }
.cb-simple__articulo > * + * { margin-top: 1.1rem; }
.cb-simple__volver { margin-top: 2.5rem; }

/* Aviso cuando ACF no está activo */
.cb--sin-acf .cb-header__inner::after {
	content: "Modo demostración · activá ACF Pro para editar";
	position: absolute;
	left: 50%;
	bottom: -26px;
	transform: translateX(-50%);
	padding: 2px 10px;
	background: var(--rojo);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 3px;
	white-space: nowrap;
}