/* ==========================================================================
   Clappbox — sistema de diseño
   La marca (colores, letras, tamaños) vive en theme.json. Acá están los
   componentes. Convención: todo lleva prefijo cbx-; las maquetas de producto, mk-.
   Color por componente: clase cbx-c-{celeste|coral|ambar|verde} define --c.
   Orden de colores en filas de 4: celeste, coral, ámbar, verde (el del logo).
   ========================================================================== */

:root {
	--cbx-celeste: var(--wp--preset--color--celeste);
	--cbx-coral: var(--wp--preset--color--coral);
	--cbx-ambar: var(--wp--preset--color--ambar);
	--cbx-verde: var(--wp--preset--color--verde);
	--cbx-noche: var(--wp--preset--color--noche);
	--cbx-noche-2: var(--wp--preset--color--noche-2);
	--cbx-tinta: var(--wp--preset--color--tinta);
	--cbx-gris: var(--wp--preset--color--gris);
	--cbx-niebla: var(--wp--preset--color--niebla);
	--cbx-radio: 18px;
	--cbx-radio-chico: 12px;
	--cbx-sombra: 0 24px 60px -24px rgba(11, 22, 34, .35);
	--cbx-sombra-suave: 0 10px 30px -14px rgba(11, 22, 34, .25);
	--cbx-cabecera: 104px;
	--c: var(--cbx-celeste);
}

.cbx-c-celeste { --c: var(--cbx-celeste); --c-suave: #E3F6FF; }
.cbx-c-coral   { --c: var(--cbx-coral);   --c-suave: #FFE9E9; }
.cbx-c-ambar   { --c: var(--cbx-ambar);   --c-suave: #FFF4DE; }
.cbx-c-verde   { --c: var(--cbx-verde);   --c-suave: #DFF7EE; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cbx-cabecera) + 16px); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* Las secciones van pegadas: nada de franjas blancas entre bandas de color */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block: 0 !important; }
main.wp-block-group { margin-block: 0; }

::selection { background: var(--cbx-celeste); color: var(--cbx-noche); }

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

.cbx-saltar {
	position: absolute; left: 1rem; top: -100px; z-index: 100;
	background: var(--cbx-ambar); color: var(--cbx-noche); padding: .6em 1em; border-radius: 8px; font-weight: 700;
}
.cbx-saltar:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   Cabecera: transparente sobre el hero, sólida al bajar
   -------------------------------------------------------------------------- */

.cbx-header-wrap {
	position: fixed; top: 0; left: 0; right: 0; z-index: 60;
	transition: background-color .25s ease, box-shadow .25s ease;
}
.admin-bar .cbx-header-wrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .cbx-header-wrap { top: 46px; } }

.cbx-header { min-height: var(--cbx-cabecera); display: flex; align-items: center; }
.cbx-header > .alignwide { width: 100%; }
.cbx-scrolled .cbx-header-wrap,
.cbx-header-wrap:focus-within {
	/* Sin backdrop-filter: crea un bloque contenedor y el menú móvil (position:fixed)
	   quedaba encerrado en la altura de la cabecera, mostrando solo el primer ítem. */
	background: rgba(11, 22, 34, .97);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.cbx-header .wp-block-site-logo img { width: 300px; height: auto; }
@media (max-width: 1180px) {
	.cbx-header .wp-block-site-logo img { width: 250px; }
	.cbx-header .wp-block-navigation { gap: 1.3rem; }
}
@media (max-width: 900px) {
	:root { --cbx-cabecera: 88px; }
	.cbx-header .wp-block-site-logo img { width: 210px; }
	.cbx-header .wp-block-navigation { gap: 1rem; font-size: .92rem; }
}
@media (max-width: 600px) { .cbx-header .wp-block-site-logo img { width: 240px; } }
@media (max-width: 360px) { .cbx-header .wp-block-site-logo img { width: 210px; } }

.cbx-header .wp-block-navigation { color: #fff; gap: 1.9rem; }
.cbx-header .wp-block-navigation a { color: #fff; text-decoration: none; }
.cbx-header .wp-block-navigation .wp-block-navigation-item__content { position: relative; padding-block: .35em; }
.cbx-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--c, var(--cbx-celeste));
	transition: right .25s ease;
}
.cbx-header .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.cbx-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after { right: 0; }

/* Cada ítem del menú subraya con el color de su producto */
.cbx-header .cbx-nav-celeste { --c: var(--cbx-celeste); }
.cbx-header .cbx-nav-coral { --c: var(--cbx-coral); }
.cbx-header .cbx-nav-ambar { --c: var(--cbx-ambar); }
.cbx-header .cbx-nav-verde { --c: var(--cbx-verde); }


.cbx-header__cta .wp-block-button__link { padding: .7em 1.25em; font-size: .95rem; }
/* Con 5 ítems en el menú, el botón no entra por debajo de 1180 px: queda el flotante de WhatsApp */
@media (max-width: 1180px) { .cbx-header .cbx-header__cta { display: none !important; } }

/* Menú móvil. WordPress muestra la hamburguesa recién debajo de 600 px; con 5 ítems el menú
   no entra en una línea hasta 781 px, así que se adelanta a ese ancho. */
@media (min-width: 600px) and (max-width: 781px) {
	.cbx-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.cbx-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* Menú móvil */
.cbx-header .wp-block-navigation__responsive-container-open { color: #fff; }
.cbx-header .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--cbx-noche) !important; color: #fff !important;
	padding: 28px 24px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.6rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
.is-menu-open .wp-block-navigation-item__content { display: flex !important; align-items: center; gap: .7rem; }
.is-menu-open .wp-block-navigation-item[class*="cbx-nav-"] .wp-block-navigation-item__content::before {
	content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c);
}
.is-menu-open .wp-block-navigation-item__content::after { display: none; }
.is-menu-open .cbx-solo-movil { margin-top: 1rem; }
.is-menu-open .cbx-solo-movil .wp-block-navigation-item__content {
	background: var(--cbx-verde); color: var(--cbx-noche) !important; border-radius: 999px; padding: .6em 1.2em !important; font-size: 1.15rem;
}
.cbx-solo-movil { display: none !important; }
.is-menu-open .cbx-solo-movil { display: flex !important; }

/* --------------------------------------------------------------------------
   Piezas de texto
   -------------------------------------------------------------------------- */

.cbx-overline {
	display: inline-flex; align-items: center; gap: .6em;
	font-family: var(--wp--preset--font-family--titulos); font-weight: 600;
	font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--c); margin-bottom: 0;
}
.cbx-overline::before {
	content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent);
}
.cbx-overline.cbx-arcoiris::before {
	width: 44px; border-radius: 6px; box-shadow: none;
	background: linear-gradient(90deg, var(--cbx-celeste) 0 25%, var(--cbx-coral) 25% 50%, var(--cbx-ambar) 50% 75%, var(--cbx-verde) 75%);
}
.cbx-oscuro .cbx-overline.cbx-arcoiris { color: #fff; }

.cbx-bajada { font-size: var(--wp--preset--font-size--l); line-height: 1.5; color: var(--cbx-gris); max-width: 46rem; }
.cbx-oscuro .cbx-bajada, .cbx-hero .cbx-bajada { color: rgba(255, 255, 255, .78); }
.has-text-align-center.cbx-bajada, .cbx-centrado .cbx-bajada { margin-inline: auto; }

.cbx-resalte { color: var(--c, var(--cbx-celeste)); }

.cbx-titulo-seccion { max-width: 52rem; }
.cbx-centrado { text-align: center; }
.cbx-centrado .cbx-titulo-seccion { margin-inline: auto; }
.cbx-cabeza { margin-bottom: var(--wp--preset--spacing--50); }
.cbx-cabeza > * + * { margin-top: .9rem; }

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */

.cbx-seccion { padding-block: var(--wp--preset--spacing--70); position: relative; }
.cbx-seccion--corta { padding-block: var(--wp--preset--spacing--60); }
.cbx-oscuro { background: var(--cbx-noche); color: #fff; }
.cbx-oscuro h1, .cbx-oscuro h2, .cbx-oscuro h3, .cbx-oscuro h4 { color: #fff; }
.cbx-oscuro a:not(.wp-element-button) { color: #fff; }
.cbx-niebla { background: var(--cbx-niebla); }
.cbx-blanco { background: #fff; }

/* Brillo de color de fondo en secciones oscuras */
.cbx-brillo { overflow: hidden; isolation: isolate; }
.cbx-brillo::before {
	content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; border-radius: 50%;
	right: -260px; top: -380px;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 34%, transparent), transparent);
	pointer-events: none;
}
.cbx-brillo.cbx-brillo--izq::before { right: auto; left: -300px; top: auto; bottom: -420px; }

/* Grilla de puntos, detalle de fondo */
.cbx-puntos {
	background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: 22px 22px;
}
.cbx-niebla.cbx-puntos { background-image: radial-gradient(rgba(11, 22, 34, .07) 1px, transparent 1px); }

/* --------------------------------------------------------------------------
   Hero de la home: foto a pleno, degradé negro (nunca blanco)
   -------------------------------------------------------------------------- */

.cbx-hero {
	position: relative; isolation: isolate; color: #fff;
	min-height: min(80vh, 740px); display: flex; flex-direction: column; justify-content: center;
	padding-top: calc(var(--cbx-cabecera) + var(--wp--preset--spacing--60)) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
	background-color: var(--cbx-noche);
	/* La foto es más alta que el hero: se alinea abajo (se ve el perro) y la punta del Obelisco queda cerca del borde superior */
	background-size: auto 112% !important; background-position: 29% 100% !important; background-repeat: no-repeat !important;
}
/* La foto es ancha (2186 px): en pantallas de 1024 a 1366 se corre un poco para que la cara no quede debajo del título */
@media (min-width: 782px) and (max-width: 1180px) { .cbx-hero { background-position: 56% 100% !important; } }
@media (min-width: 782px) { .cbx-hero h1 { font-size: clamp(2.4rem, 4.3vw, 3.9rem); } }
/* Pantallas bajas (notebooks): el hero queda más alto que lo visible y el perro caía bajo el pliegue.
   Acá la foto se mide contra el alto de la pantalla y el pie de la colchoneta queda apoyado en su borde inferior. */
@media (min-width: 782px) and (max-height: 820px) {
	.cbx-hero { background-size: auto 112vh !important; background-position-y: calc(-7.5vh - 10px) !important; }
}
/* Escritorio (1181 px o más): la foto se ubica por el borde derecho de la colchoneta (84 % del ancho de la imagen),
   que queda pegado al borde derecho de la pantalla. En pantallas muy anchas se acerca lo más posible sin dejar hueco. */
@media (min-width: 1181px) {
	.cbx-hero { background-size: auto 870px !important; background-position: right calc(-1 * min(352px, 2030px - 100vw)) bottom !important; }
}
/* Pantallas bajas: el hero ocupa justo la pantalla y termina donde termina la foto (ahí va el borde de colores) */
@media (min-width: 1181px) and (max-height: 820px) {
	.cbx-hero {
		min-height: 100vh;
		padding-top: calc(var(--cbx-cabecera) + 1.5rem) !important; padding-bottom: 2rem !important;
		background-size: auto 112% !important; background-position: right calc(-1 * min(45.4vh, 261.3vh - 100vw)) bottom !important;
	}
}
.cbx-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 22%),
		linear-gradient(90deg, rgba(4, 10, 16, .9) 0%, rgba(4, 10, 16, .7) 30%, rgba(4, 10, 16, .15) 48%, rgba(4, 10, 16, 0) 58%);
}
.cbx-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 1;
	background: linear-gradient(90deg, var(--cbx-celeste) 0 25%, var(--cbx-coral) 25% 50%, var(--cbx-ambar) 50% 75%, var(--cbx-verde) 75%);
}
.cbx-hero > .alignwide { width: 100%; }
.cbx-hero h1 { color: #fff; max-width: 15ch; margin-block: .35em .3em; }
.cbx-botones-seccion { margin-top: var(--wp--preset--spacing--50) !important; }
.cbx-hero .cbx-bajada { max-width: 34rem; }
.cbx-hero__textos { max-width: 42rem; }
.cbx-hero__datos {
	margin-top: var(--wp--preset--spacing--40) !important; max-width: 36rem;
	font-size: .95rem; line-height: 1.7; color: rgba(255, 255, 255, .8);
}
.cbx-hero__datos strong { color: #fff; }

/* Celular: la foto arriba (se ve la cara y el Obelisco) y el texto abajo, sobre fondo noche */
@media (max-width: 781px) {
	.cbx-hero {
		min-height: 0; justify-content: flex-start;
		background-size: auto 400px !important; background-position: 59% 0 !important; background-repeat: no-repeat;
		padding-top: 400px !important;
	}
	.cbx-hero::before {
		/* Arriba a la izquierda, más oscuro: ahí van el logo y su leyenda blanca */
		background:
			radial-gradient(ellipse 330px 170px at 0 0, rgba(0, 0, 0, .72), rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0) 100%),
			linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 100px, rgba(11, 22, 34, 0) 372px, var(--cbx-noche) 400px);
	}
	.cbx-hero h1 { max-width: none; }
}

/* --------------------------------------------------------------------------
   Hero de las landings: fondo oscuro con brillo del color del producto
   -------------------------------------------------------------------------- */

.cbx-hero-producto {
	padding-top: calc(var(--cbx-cabecera) + var(--wp--preset--spacing--60)) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}
.cbx-hero-producto h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); margin-block: .35em .35em; }
.cbx-hero-producto .wp-block-columns { gap: var(--wp--preset--spacing--60); }
.cbx-hero-producto::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--c);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.wp-block-button__link { transition: transform .15s ease, background-color .2s, color .2s, box-shadow .2s; }
.wp-block-button__link:hover { transform: translateY(-2px); }

/* Color del producto de la sección */
.wp-block-button.is-style-producto .wp-block-button__link { background: var(--c); color: var(--cbx-noche); }
.wp-block-button.is-style-producto .wp-block-button__link:hover { background: var(--cbx-noche); color: #fff; }
.cbx-oscuro .wp-block-button.is-style-producto .wp-block-button__link:hover { background: #fff; color: var(--cbx-noche); }

.wp-block-button.is-style-oscuro .wp-block-button__link { background: var(--cbx-noche); color: #fff; }
.wp-block-button.is-style-oscuro .wp-block-button__link:hover { background: var(--c); color: var(--cbx-noche); }

.wp-block-button.is-style-contorno .wp-block-button__link {
	background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor;
}
.wp-block-button.is-style-contorno .wp-block-button__link:hover { background: #fff; color: var(--cbx-noche); box-shadow: inset 0 0 0 2px #fff; }
.cbx-niebla .wp-block-button.is-style-contorno .wp-block-button__link:hover,
.cbx-blanco .wp-block-button.is-style-contorno .wp-block-button__link:hover { background: var(--cbx-noche); color: #fff; box-shadow: inset 0 0 0 2px var(--cbx-noche); }

/* WhatsApp: con el ícono de mensaje */
.wp-block-button.is-style-whatsapp .wp-block-button__link {
	background: var(--cbx-verde); color: var(--cbx-noche); display: inline-flex; align-items: center; gap: .55em;
}
.wp-block-button.is-style-whatsapp .wp-block-button__link::before {
	content: ""; width: 1.2em; height: 1.2em; background: currentColor;
	-webkit-mask: var(--cbx-i-mensaje) center / contain no-repeat; mask: var(--cbx-i-mensaje) center / contain no-repeat;
}
.wp-block-button.is-style-whatsapp .wp-block-button__link:hover { background: #fff; color: var(--cbx-noche); }
.cbx-niebla .wp-block-button.is-style-whatsapp .wp-block-button__link:hover,
.cbx-blanco .wp-block-button.is-style-whatsapp .wp-block-button__link:hover { background: var(--cbx-noche); color: #fff; }

/* Enlace "Conocé más →" */
.cbx-mas { font-family: var(--wp--preset--font-family--titulos); font-weight: 600; margin-top: auto !important; }
.cbx-mas a { color: var(--c) !important; text-decoration: none; display: inline-flex; align-items: center; gap: .45em; }
.cbx-mas a::after {
	content: ""; width: 1.05em; height: 1.05em; background: currentColor; transition: transform .2s;
	-webkit-mask: var(--cbx-i-flecha) center / contain no-repeat; mask: var(--cbx-i-flecha) center / contain no-repeat;
}
.cbx-mas a:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Ícono en círculo de color: cualquier bloque con cbx-ico + cbx-i-NOMBRE
   -------------------------------------------------------------------------- */

.cbx-ico::before {
	content: ""; display: block; flex: none;
	width: 56px; height: 56px; border-radius: 16px; margin-bottom: 1.1rem;
	background:
		var(--c) padding-box;
	-webkit-mask: none; mask: none;
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c) 80%, transparent);
}
.cbx-ico { position: relative; }
.cbx-ico::after {
	content: ""; position: absolute; top: 14px; left: 14px; width: 28px; height: 28px;
	background: var(--cbx-noche);
	-webkit-mask: var(--cbx-i) center / contain no-repeat; mask: var(--cbx-i) center / contain no-repeat;
}
.cbx-card.cbx-ico::after { top: calc(var(--cbx-pad) + 14px); left: calc(var(--cbx-pad) + 14px); }

/* --------------------------------------------------------------------------
   Grillas y tarjetas
   -------------------------------------------------------------------------- */

.cbx-grilla { display: grid !important; gap: var(--wp--preset--spacing--30); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.cbx-grilla--2 { grid-template-columns: repeat(2, 1fr); }
.cbx-grilla--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .cbx-grilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 781px) { .cbx-grilla--2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cbx-grilla--3 { grid-template-columns: 1fr; } }
.cbx-pedidos { display: grid !important; gap: 1rem; }
.cbx-pedidos > * { margin: 0 !important; }
.cbx-grilla--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .cbx-grilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cbx-grilla--4 { grid-template-columns: 1fr; } }
.cbx-grilla > * { margin: 0 !important; }

.cbx-card {
	--cbx-pad: clamp(1.4rem, 2.4vw, 2rem);
	position: relative; display: flex; flex-direction: column; gap: .55rem;
	padding: var(--cbx-pad); border-radius: var(--cbx-radio);
	background: #fff; color: var(--cbx-tinta);
	box-shadow: var(--cbx-sombra-suave);
	border-top: 5px solid var(--c);
	transition: transform .25s ease, box-shadow .25s ease;
}
.cbx-card > * { margin: 0 !important; }
.cbx-card h3 { font-size: 1.3rem; }
.cbx-card p { color: var(--cbx-gris); }
.cbx-card:hover { transform: translateY(-4px); box-shadow: var(--cbx-sombra); }

.cbx-oscuro .cbx-card { background: var(--cbx-noche-2); color: #fff; box-shadow: none; border: 1px solid rgba(255, 255, 255, .07); border-top: 5px solid var(--c); }
.cbx-oscuro .cbx-card p { color: rgba(255, 255, 255, .72); }
.cbx-oscuro .cbx-card:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }

/* Tarjeta de producto de la home: toda clickeable */
.cbx-producto { min-height: 100%; }
.cbx-producto .cbx-mas a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cbx-producto__tag { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c) !important; }

/* Origen del producto: "nació a medida para…" */
.cbx-producto__origen { font-size: .88rem; font-style: italic; color: var(--c) !important; opacity: .95; }

/* Tarjetas chicas de características: ícono a la izquierda */
.cbx-item {
	display: grid; grid-template-columns: 48px 1fr; column-gap: 1rem; row-gap: .2rem; align-items: start;
	padding: 1.2rem 1.25rem; border-radius: var(--cbx-radio-chico); background: #fff;
	box-shadow: 0 1px 0 rgba(11, 22, 34, .06), 0 8px 20px -14px rgba(11, 22, 34, .3);
	position: relative;
}
.cbx-item > * { grid-column: 2; margin: 0 !important; }
.cbx-item::before {
	content: ""; grid-column: 1; grid-row: 1 / span 3; width: 48px; height: 48px; border-radius: 14px;
	background: var(--c-suave, var(--cbx-niebla));
}
.cbx-item::after {
	content: ""; position: absolute; top: calc(1.2rem + 12px); left: calc(1.25rem + 12px); width: 24px; height: 24px;
	background: color-mix(in srgb, var(--c) 100%, #000 25%);
	-webkit-mask: var(--cbx-i) center / contain no-repeat; mask: var(--cbx-i) center / contain no-repeat;
}
.cbx-item h3, .cbx-item h4 { font-size: 1.08rem; line-height: 1.3; }
.cbx-item p { color: var(--cbx-gris); font-size: .98rem; line-height: 1.5; }
.cbx-oscuro .cbx-item { background: var(--cbx-noche-2); box-shadow: none; border: 1px solid rgba(255, 255, 255, .07); }
.cbx-oscuro .cbx-item::before { background: color-mix(in srgb, var(--c) 18%, transparent); }
.cbx-oscuro .cbx-item::after { background: var(--c); }
.cbx-oscuro .cbx-item p { color: rgba(255, 255, 255, .7); }

/* Estado "Próximamente" dentro de un ítem */
.cbx-pronto { opacity: .92; }
.cbx-pronto h3::after, .cbx-pronto h4::after {
	content: "Próximamente"; display: inline-block; margin-left: .55em; vertical-align: .15em;
	font: 700 .66rem/1 var(--wp--preset--font-family--texto); letter-spacing: .08em; text-transform: uppercase;
	padding: .45em .7em; border-radius: 999px; background: var(--cbx-ambar); color: var(--cbx-noche);
}

/* --------------------------------------------------------------------------
   Citas ("¿Te suena?")
   -------------------------------------------------------------------------- */

.cbx-cita {
	position: relative; display: flex; flex-direction: column; gap: .8rem;
	padding: 2.1rem 1.6rem 1.6rem; border-radius: var(--cbx-radio); background: #fff;
	box-shadow: var(--cbx-sombra-suave); overflow: hidden;
}
.cbx-cita > * { margin: 0 !important; }
.cbx-cita::before {
	content: "“"; position: absolute; top: -.18em; right: .12em;
	font: 700 7.5rem/1 var(--wp--preset--font-family--titulos); color: var(--c); opacity: .9;
}
.cbx-cita::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.cbx-cita__quien { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cbx-gris); padding-right: 3.2rem; }
.cbx-cita__texto { font-family: var(--wp--preset--font-family--titulos); font-weight: 600; font-size: 1.22rem; line-height: 1.35; color: var(--cbx-tinta); }
.cbx-cita .cbx-mas { font-size: .95rem; padding-top: .4rem; border-top: 1px dashed rgba(11, 22, 34, .14); }
.cbx-oscuro .cbx-cita { background: var(--cbx-noche-2); box-shadow: none; }
.cbx-oscuro .cbx-cita__texto { color: #fff; }
.cbx-oscuro .cbx-cita__quien { color: rgba(255, 255, 255, .6); }

/* --------------------------------------------------------------------------
   Filas producto: texto + maqueta sobre panel de color
   -------------------------------------------------------------------------- */

.cbx-fila { gap: var(--wp--preset--spacing--60) !important; align-items: center !important; }
.cbx-fila + .cbx-fila { margin-top: var(--wp--preset--spacing--70) !important; }
@media (min-width: 782px) {
	.cbx-fila.cbx-fila--invertida { flex-direction: row-reverse; }
}
.cbx-fila h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-block: .4em .5em; }
.cbx-fila .cbx-bajada { font-size: 1.12rem; }

.cbx-panel {
	position: relative; border-radius: 28px; padding: clamp(1.5rem, 4vw, 3.2rem);
	background:
		radial-gradient(rgba(255, 255, 255, .28) 1.2px, transparent 1.2px) 0 0 / 18px 18px,
		linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 72%, #0B1622));
	box-shadow: var(--cbx-sombra);
	overflow: hidden;
}
.cbx-panel::after {
	content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%;
	right: -18%; bottom: -30%; background: rgba(255, 255, 255, .16); pointer-events: none;
}
.cbx-panel > * { position: relative; z-index: 1; }
.cbx-panel--oscuro {
	background:
		radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 20px 20px,
		var(--cbx-noche-2);
	border: 1px solid rgba(255, 255, 255, .08);
}
.cbx-panel--oscuro::after { background: color-mix(in srgb, var(--c) 30%, transparent); filter: blur(60px); }

/* Lista con tildes del color del producto */
.cbx-tildes { list-style: none; padding-left: 0 !important; display: grid; gap: .7rem; }
.cbx-tildes li { position: relative; padding-left: 2.1rem; line-height: 1.45; }
.cbx-tildes li::before {
	content: ""; position: absolute; left: 0; top: .08em; width: 1.4rem; height: 1.4rem; border-radius: 50%;
	background: var(--c);
}
.cbx-tildes li::after {
	content: ""; position: absolute; left: .3rem; top: calc(.08em + .3rem); width: .8rem; height: .8rem; background: var(--cbx-noche);
	-webkit-mask: var(--cbx-i-check) center / contain no-repeat; mask: var(--cbx-i-check) center / contain no-repeat;
}
.cbx-tildes--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); column-gap: 1.6rem; }

/* --------------------------------------------------------------------------
   Caia en todas: pedidos de ejemplo
   -------------------------------------------------------------------------- */

.cbx-pedido {
	position: relative; padding: 1.3rem 1.4rem 1.3rem 3.6rem; border-radius: 16px 16px 16px 4px;
	background: var(--cbx-noche-2); border: 1px solid rgba(255, 255, 255, .08);
	font-family: var(--wp--preset--font-family--titulos); font-weight: 600; font-size: 1.08rem; line-height: 1.4; color: #fff;
}
.cbx-pedido > * { margin: 0 !important; }
.cbx-pedido::before {
	content: ""; position: absolute; left: 1.1rem; top: 1.3rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
	background: var(--c);
}
.cbx-pedido::after {
	content: ""; position: absolute; left: calc(1.1rem + .4rem); top: calc(1.3rem + .4rem); width: .8rem; height: .8rem; background: var(--cbx-noche);
	-webkit-mask: var(--cbx-i) center / contain no-repeat; mask: var(--cbx-i) center / contain no-repeat;
}
.cbx-pedido__donde { display: block; font: 800 .72rem/1 var(--wp--preset--font-family--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--c); margin-bottom: .55rem !important; }

/* --------------------------------------------------------------------------
   Pasos numerados
   -------------------------------------------------------------------------- */

.cbx-pasos { counter-reset: paso; }
.cbx-paso {
	counter-increment: paso; position: relative; padding: 1.6rem 1.5rem 1.5rem; border-radius: var(--cbx-radio);
	background: #fff; box-shadow: var(--cbx-sombra-suave); display: flex; flex-direction: column; gap: .5rem;
}
.cbx-paso > * { margin: 0 !important; }
.cbx-paso::before {
	content: counter(paso, decimal-leading-zero);
	font: 700 2.6rem/1 var(--wp--preset--font-family--titulos); color: var(--c); margin-bottom: .4rem;
}
.cbx-paso h3 { font-size: 1.2rem; }
.cbx-paso p { color: var(--cbx-gris); }
.cbx-oscuro .cbx-paso { background: var(--cbx-noche-2); box-shadow: none; border: 1px solid rgba(255, 255, 255, .07); }
.cbx-oscuro .cbx-paso p { color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------------------------------
   Datos / números
   -------------------------------------------------------------------------- */

.cbx-datos { display: grid !important; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-top: var(--wp--preset--spacing--50) !important; }
.cbx-datos > * { margin: 0 !important; }
.cbx-dato { border-left: 4px solid var(--c); padding: .2rem 0 .2rem 1.1rem; }
.cbx-dato > * { margin: 0 !important; }
.cbx-dato__numero { font: 700 clamp(2.2rem, 4vw, 3rem)/1 var(--wp--preset--font-family--titulos); color: var(--c); }
.cbx-dato p:last-child { color: var(--cbx-gris); margin-top: .35rem !important; }
.cbx-oscuro .cbx-dato p:last-child { color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------------------------------
   Precios
   -------------------------------------------------------------------------- */

.cbx-precio {
	position: relative; padding: 2rem 1.8rem; border-radius: var(--cbx-radio); background: #fff; color: var(--cbx-tinta);
	box-shadow: var(--cbx-sombra-suave); display: flex; flex-direction: column; gap: .6rem;
}
.cbx-precio > * { margin: 0 !important; }
.cbx-precio__nombre { font: 700 .82rem/1 var(--wp--preset--font-family--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--cbx-gris); }
.cbx-precio__monto { font: 700 clamp(1.9rem, 3vw, 2.4rem)/1.05 var(--wp--preset--font-family--titulos); color: var(--cbx-tinta); }
.cbx-precio__monto small { font-size: .45em; font-weight: 600; color: var(--cbx-gris); letter-spacing: 0; }
.cbx-precio p:not([class]) { color: var(--cbx-gris); }
.cbx-precio--destacado { background: var(--cbx-noche); color: #fff; box-shadow: 0 0 0 3px var(--c), var(--cbx-sombra); }
.cbx-precio--destacado .cbx-precio__monto { color: #fff; }
.cbx-precio--destacado p:not([class]), .cbx-precio--destacado .cbx-precio__nombre { color: rgba(255, 255, 255, .75); }
.cbx-precio--destacado::before {
	content: "El más elegido"; position: absolute; top: -14px; left: 1.8rem;
	font: 800 .72rem/1 var(--wp--preset--font-family--texto); letter-spacing: .1em; text-transform: uppercase;
	padding: .55em .9em; border-radius: 999px; background: var(--c); color: var(--cbx-noche);
}
.cbx-nota { font-size: .92rem; color: var(--cbx-gris); }
.cbx-precio__lista { font-size: .95rem; gap: .5rem !important; margin-top: .4rem !important; }
.cbx-precio__lista li { color: inherit; }
.cbx-precio--destacado .cbx-precio__lista li { color: rgba(255, 255, 255, .85); }
.cbx-precio .wp-block-buttons { margin-top: auto !important; padding-top: .8rem; }
.cbx-planes { align-items: stretch; }
.cbx-planes .cbx-precio { height: 100%; }
.cbx-planes .cbx-precio__monto { white-space: nowrap; font-size: clamp(1.6rem, 2.1vw, 2.2rem); }
.cbx-precio--destacado .wp-block-button.is-style-producto .wp-block-button__link:hover { background: #fff; color: var(--cbx-noche); }

/* --------------------------------------------------------------------------
   Antes / después
   -------------------------------------------------------------------------- */

.cbx-antes, .cbx-despues { padding: 1.8rem; border-radius: var(--cbx-radio); height: 100%; }
.cbx-antes > *, .cbx-despues > * { margin-top: 0; }
.cbx-antes { background: #fff; border: 2px dashed rgba(11, 22, 34, .14); }
.cbx-despues { background: var(--cbx-noche); color: #fff; box-shadow: 0 0 0 3px var(--c); }
.cbx-despues h3 { color: #fff; }
.cbx-antes h3, .cbx-despues h3 { font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; }
.cbx-antes ul, .cbx-despues ul { list-style: none; padding: 0; display: grid; gap: .75rem; margin: 1rem 0 0; }
.cbx-antes li, .cbx-despues li { position: relative; padding-left: 1.9rem; }
.cbx-antes li::before, .cbx-despues li::before {
	content: ""; position: absolute; left: 0; top: .15em; width: 1.15rem; height: 1.15rem;
	-webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.cbx-antes li::before { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); background: var(--cbx-coral); }
.cbx-despues li::before { --m: var(--cbx-i-check); background: var(--c); }
.cbx-antes li { color: var(--cbx-gris); }

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   -------------------------------------------------------------------------- */

.cbx-faq .wp-block-details {
	border-radius: var(--cbx-radio-chico); background: #fff; padding: 0; margin: 0 0 .8rem !important;
	box-shadow: 0 1px 0 rgba(11, 22, 34, .06), 0 8px 20px -16px rgba(11, 22, 34, .35);
	border-left: 4px solid var(--c);
}
.cbx-faq summary {
	cursor: pointer; list-style: none; padding: 1.2rem 3.4rem 1.2rem 1.4rem; position: relative;
	font: 600 1.08rem/1.35 var(--wp--preset--font-family--titulos);
}
.cbx-faq summary::-webkit-details-marker { display: none; }
.cbx-faq summary::after {
	content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
	width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
	background: var(--c-suave, var(--cbx-niebla)); color: var(--cbx-noche); font: 700 1.2rem/1 var(--wp--preset--font-family--titulos);
	transition: transform .2s;
}
.cbx-faq details[open] summary::after { content: "–"; }
.cbx-faq details > :not(summary) { padding: 0 1.4rem 1.2rem; margin: 0; color: var(--cbx-gris); }

/* --------------------------------------------------------------------------
   Llamado final con foto fija (parallax) y velo negro
   -------------------------------------------------------------------------- */

.cbx-cta {
	position: relative; isolation: isolate; color: #fff; text-align: center;
	background-color: var(--cbx-noche); background-size: cover; background-position: center; background-attachment: fixed;
	padding-block: clamp(5rem, 12vw, 9rem) !important;
}
.cbx-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(4, 10, 16, .62); }
.cbx-cta h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cbx-cta .cbx-bajada { color: rgba(255, 255, 255, .85); margin-inline: auto; }
.cbx-cta .wp-block-buttons { justify-content: center; }
@media (hover: none), (max-width: 781px) { .cbx-cta { background-attachment: scroll; } }

/* Banda de color de marca con texto oscuro (contraste AA) */
.cbx-banda { background: var(--c); color: var(--cbx-noche); }
.cbx-banda h2, .cbx-banda h3 { color: var(--cbx-noche); }
.cbx-banda .cbx-bajada { color: rgba(11, 22, 34, .8); }
.cbx-banda .cbx-overline { color: var(--cbx-noche); }
.cbx-banda .cbx-overline::before { background: var(--cbx-noche); box-shadow: 0 0 0 5px rgba(11, 22, 34, .15); }

/* Tira de logos de productos del mismo ecosistema */
.cbx-ecosistema { display: flex !important; flex-wrap: wrap; gap: .7rem; }
.cbx-ecosistema > * { margin: 0 !important; }
.cbx-chip {
	display: inline-flex; align-items: center; gap: .55em; padding: .55em 1em .55em .7em; border-radius: 999px;
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
	font: 600 .95rem/1 var(--wp--preset--font-family--titulos);
}
.cbx-chip::before { content: ""; width: .8em; height: .8em; border-radius: 50%; background: var(--c); }
.cbx-chip a { color: #fff !important; text-decoration: none; }
.cbx-niebla .cbx-chip, .cbx-blanco .cbx-chip { background: #fff; border-color: rgba(11, 22, 34, .1); }
.cbx-niebla .cbx-chip a, .cbx-blanco .cbx-chip a { color: var(--cbx-tinta) !important; }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.cbx-footer { background: #070F17; color: rgba(255, 255, 255, .72); font-size: .98rem; position: relative; }
.cbx-footer::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--cbx-celeste) 0 25%, var(--cbx-coral) 25% 50%, var(--cbx-ambar) 50% 75%, var(--cbx-verde) 75%);
}
.cbx-footer a { color: #fff; text-decoration: none; }
.cbx-footer a:hover { color: var(--cbx-celeste); }
.cbx-footer__titulo { color: #fff; font-size: .82rem !important; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem !important; }
.cbx-footer p { line-height: 2; }
.cbx-footer .cbx-logo img { width: 280px; }
.cbx-footer hr { border-color: rgba(255, 255, 255, .1); opacity: 1; margin-block: var(--wp--preset--spacing--50) 1.2rem; }
.cbx-legal { font-size: .88rem; color: rgba(255, 255, 255, .5); }
.cbx-footer .cbx-pie-lista a { display: inline-flex; align-items: center; gap: .5em; }
.cbx-footer .cbx-pie-lista a::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--c, var(--cbx-celeste)); }

/* Tarjeta de persona (Quiénes somos) */
.cbx-persona {
	position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
	padding: 2.2rem 1.8rem 1.8rem; border-radius: 24px; background: #fff; color: var(--cbx-tinta);
	box-shadow: var(--cbx-sombra); border-top: 6px solid var(--c);
}
.cbx-persona > * { margin: 0 !important; }
.cbx-persona__iniciales, .cbx-persona__foto img {
	width: 132px; height: 132px; border-radius: 50%; margin-bottom: .8rem !important;
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 25%, transparent);
}
.cbx-persona__foto { margin: 0 0 .8rem !important; }
.cbx-persona__foto img { object-fit: cover; object-position: 50% 40%; display: block; }
.cbx-persona__iniciales {
	display: grid; place-items: center; color: #fff;
	font: 700 2.6rem/1 var(--wp--preset--font-family--titulos); letter-spacing: .02em;
	background: linear-gradient(135deg, var(--cbx-celeste), color-mix(in srgb, var(--cbx-celeste) 55%, #0B1622));
}
.cbx-persona__nombre { font-size: 1.6rem !important; color: var(--cbx-tinta) !important; }
.cbx-persona__cargo { font-weight: 800; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 100%, #000 25%); }
.cbx-persona__texto { color: var(--cbx-gris); max-width: 30rem; margin-top: .5rem !important; }
.cbx-persona .wp-block-buttons { justify-content: center; margin-top: 1rem !important; gap: .6rem; }
.cbx-persona .wp-block-button__link { font-size: .92rem; padding: .75em 1.2em; }
.wp-block-button.is-style-linkedin .wp-block-button__link {
	background: #0A66C2; color: #fff; display: inline-flex; align-items: center; gap: .55em;
}
.wp-block-button.is-style-linkedin .wp-block-button__link::before {
	content: ""; width: 1.1em; height: 1.1em; background: currentColor;
	-webkit-mask: var(--cbx-i-linkedin) center / contain no-repeat; mask: var(--cbx-i-linkedin) center / contain no-repeat;
}
.wp-block-button.is-style-linkedin .wp-block-button__link:hover { background: var(--cbx-noche); color: #fff; }
.cbx-persona .wp-block-button.is-style-whatsapp .wp-block-button__link:hover { background: var(--cbx-noche); color: #fff; }

/* Redes en el pie: íconos */
.cbx-redes { display: flex; gap: .7rem; margin-top: 1rem !important; }
.cbx-red {
	width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(255, 255, 255, .08); transition: background-color .2s, transform .2s;
}
.cbx-red::before {
	content: ""; width: 21px; height: 21px; background: #fff;
	-webkit-mask: var(--cbx-i) center / contain no-repeat; mask: var(--cbx-i) center / contain no-repeat;
}
.cbx-red span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cbx-red.cbx-i-instagram:hover { background: var(--cbx-coral); transform: translateY(-2px); }
.cbx-red.cbx-i-youtube:hover { background: #FF0033; transform: translateY(-2px); }
.cbx-red.cbx-i-linkedin:hover { background: #0A66C2; transform: translateY(-2px); }

/* Botón flotante de WhatsApp */
.cbx-wa {
	position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 60px; height: 60px; border-radius: 50%;
	background: var(--cbx-verde); display: grid; place-items: center;
	box-shadow: 0 12px 28px -8px rgba(0, 185, 124, .7); transition: transform .2s;
}
.cbx-wa:hover { transform: scale(1.07); }
.cbx-wa::before {
	content: ""; width: 30px; height: 30px; background: #fff;
	-webkit-mask: var(--cbx-i-mensaje) center / contain no-repeat; mask: var(--cbx-i-mensaje) center / contain no-repeat;
}
.cbx-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ==========================================================================
   MAQUETAS DE PRODUCTO (mk-): interfaces dibujadas con HTML y CSS.
   No son capturas: muestran cómo se usa cada producto.
   ========================================================================== */

.mk { font-family: var(--wp--preset--font-family--texto); color: var(--cbx-tinta); font-size: 14px; line-height: 1.4; text-align: left; }
.mk * { box-sizing: border-box; }
.mk p { margin: 0; }
.mk-envoltura { position: relative; padding: 14px 0; }

.mk-ventana { background: #fff; border-radius: 14px; box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .55); overflow: hidden; }
.mk-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F2F5F8; border-bottom: 1px solid #E3E8EE; }
.mk-barra i { width: 10px; height: 10px; border-radius: 50%; background: #D5DCE3; }
.mk-barra i:nth-child(1) { background: #FF5C5D; } .mk-barra i:nth-child(2) { background: #FFBD3E; } .mk-barra i:nth-child(3) { background: #00B97C; }
.mk-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-left: 10px; flex: 1; background: #fff; border-radius: 6px; padding: 4px 10px; font-size: 11.5px; color: #7A8896; }
.mk-cuerpo { padding: 16px; }

.mk-chip {
	position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px;
	background: #fff; color: var(--cbx-tinta); border-radius: 12px; padding: 9px 13px; font-size: 12.5px; font-weight: 700;
	box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .45); white-space: nowrap;
}
.mk-chip b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: var(--cbx-noche); font-size: 12px; }
.mk-chip--arriba { top: -6px; right: -10px; }
.mk-chip--abajo { bottom: -8px; left: -12px; }
@media (max-width: 600px) { .mk-chip--arriba { right: 4px; } .mk-chip--abajo { left: 4px; } }

.mk-titulo { font-weight: 800; font-size: 15px; }
.mk-sub { color: #7A8896; font-size: 12px; }
.mk-pill { white-space: nowrap; display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--c-suave, #E3F6FF); color: color-mix(in srgb, var(--c) 100%, #000 45%); }
.mk-btn { display: block; text-align: center; padding: 10px; border-radius: 10px; font-weight: 800; font-size: 13px; background: var(--c); color: var(--cbx-noche); }
.mk-btn--linea { background: transparent; box-shadow: inset 0 0 0 2px #DCE3EA; color: var(--cbx-tinta); }

/* --- A medida: tablero del proyecto --- */
.mk-etapas { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mk-etapa { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #F5F8FA; }
.mk-etapa b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--c); color: var(--cbx-noche); }
.mk-etapa.is-pendiente b { background: #E3E8EE; color: #7A8896; }
.mk-etapa em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #7A8896; }
.mk-barra-avance { grid-column: 2 / 4; height: 6px; border-radius: 6px; background: #E3E8EE; overflow: hidden; }
.mk-barra-avance i { display: block; height: 100%; width: 66%; background: var(--c); border-radius: 6px; }

/* --- Caia SEO/GEO: auditoría --- */
.mk-seo { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; }
.mk-puntaje {
	width: 110px; height: 110px; border-radius: 50%; display: grid; place-content: center; text-align: center;
	background: conic-gradient(var(--cbx-verde) 0 87%, #E3E8EE 0); position: relative;
}
.mk-puntaje::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.mk-puntaje > * { position: relative; }
.mk-puntaje strong { font: 700 30px/1 var(--wp--preset--font-family--titulos); }
.mk-puntaje span { font-size: 11px; color: #7A8896; }
.mk-puntaje em { font-style: normal; font-size: 10px; font-weight: 800; color: #0A7F57; }
.mk-barras { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.mk-barras div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; font-size: 11.5px; }
.mk-barras i { height: 7px; border-radius: 7px; background: linear-gradient(90deg, var(--cbx-verde) var(--v), #E3E8EE var(--v)); }
.cbx-c-verde .mk-puja:first-child { background: #DFF7EE; }
@media (max-width: 480px) { .mk-seo { grid-template-columns: 1fr; justify-items: center; } }

/* --- Mayoristas --- */
.mk-tienda__cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.mk-tienda__grilla { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; }
.mk-prod { border: 1px solid #E6EBF0; border-radius: 12px; overflow: hidden; }
.mk-prod__foto { aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(135deg, #E3F6FF, #CDEEFF); }
.mk-remera { width: 58%; aspect-ratio: 1; background: var(--cbx-celeste);
	clip-path: polygon(30% 6%, 40% 11%, 60% 11%, 70% 6%, 97% 22%, 88% 42%, 77% 37%, 77% 96%, 23% 96%, 23% 37%, 12% 42%, 3% 22%); }
.mk-prod__info { padding: 10px; }
.mk-prod__precio { font-weight: 800; font-size: 16px; margin-top: 4px; }
.mk-prod__precio small { font-size: 11px; color: #7A8896; font-weight: 700; }
.mk-escalas { border: 1px solid #E6EBF0; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.mk-escala { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; background: #F5F8FA; }
.mk-escala strong { font-weight: 800; }
.mk-escala.is-activa { background: var(--cbx-celeste); color: var(--cbx-noche); }
.mk-total { margin-top: 6px; padding-top: 10px; border-top: 1px dashed #DCE3EA; display: flex; justify-content: space-between; align-items: baseline; }
.mk-total strong { font-size: 18px; font-weight: 800; }

/* --- Gestión Comercial: teléfono + escritorio --- */
.mk-gestion { position: relative; display: grid; grid-template-columns: 1fr; justify-items: center; }
.mk-telefono {
	width: min(290px, 100%); background: #0B1622; border-radius: 38px; padding: 12px;
	box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .6), inset 0 0 0 2px #25384A;
}
.mk-pantalla { background: #fff; border-radius: 28px; overflow: hidden; }
.mk-app-cab { background: var(--cbx-coral); color: var(--cbx-noche); padding: 26px 16px 14px; }
.mk-app-cab .mk-titulo { font-size: 17px; }
.mk-app-cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mk-cliente { background: #FFF1F1; border-radius: 10px; padding: 9px 11px; }
.mk-linea { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid #EEF2F5; }
.mk-linea b { display: grid; place-items: center; height: 24px; border-radius: 6px; background: #F2F5F8; font-size: 12px; }
.mk-linea span:last-child { font-weight: 800; }
.mk-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.mk-botones .mk-btn { font-size: 12px; padding: 9px 4px; }

/* --- Subastas --- */
.mk-lote { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: stretch; }
.mk-lote__foto { border-radius: 12px; background: #FFF4DE; display: grid; place-items: center; padding: 16px; }
.mk-estampilla {
	width: 78%; aspect-ratio: 4 / 5; position: relative;
	background: radial-gradient(circle at 50% 50%, transparent 5px, #fff 5.5px) -8px -8px / 16px 16px;
	padding: 9px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18));
}
.mk-estampilla div {
	width: 100%; height: 100%; border: 3px solid #fff;
	background:
		radial-gradient(circle at 50% 38%, #F6D08A 0 22%, transparent 23%),
		radial-gradient(ellipse at 50% 100%, #C47A2C 0 36%, transparent 37%),
		linear-gradient(160deg, #B5541E, #7E2F12);
	outline: 2px solid #E9C58B; outline-offset: -8px;
}
.mk-reloj { display: flex; gap: 6px; margin: 8px 0 10px; }
.mk-reloj span { flex: 1; text-align: center; background: var(--cbx-noche); color: #fff; border-radius: 8px; padding: 6px 0; font: 700 16px/1.1 var(--wp--preset--font-family--titulos); }
.mk-reloj span small { display: block; font: 700 9px/1.2 var(--wp--preset--font-family--texto); letter-spacing: .08em; opacity: .7; }
.mk-oferta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.mk-oferta strong { font: 700 24px/1 var(--wp--preset--font-family--titulos); }
.mk-pujas { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.mk-puja { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 7px; background: #F5F8FA; }
.mk-puja:first-child { background: #FFF4DE; font-weight: 800; }
.mk-puja em { font-style: normal; color: #7A8896; font-weight: 600; }

/* --- Caia: chat --- */
.mk-chat { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .55); }
.mk-chat__cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--cbx-noche); color: #fff; }
.mk-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cbx-verde); display: grid; place-items: center; }
.mk-avatar::before { content: ""; width: 18px; height: 18px; background: var(--cbx-noche); -webkit-mask: var(--cbx-i-robot) center / contain no-repeat; mask: var(--cbx-i-robot) center / contain no-repeat; }
.mk-chat__cab small { display: block; color: #8FE3C3; font-size: 11px; }
.mk-chat__cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #F6F9FB; }
.mk-msj { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; }
.mk-msj--yo { align-self: flex-end; background: var(--cbx-noche); color: #fff; border-bottom-right-radius: 4px; }
.mk-msj--caia { align-self: flex-start; background: #fff; border: 1px solid #E3E9EE; border-bottom-left-radius: 4px; }
.mk-tabla { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; }
.mk-tabla td { padding: 5px 4px; border-top: 1px solid #EEF2F5; }
.mk-tabla td:last-child { white-space: nowrap; text-align: right; font-weight: 800; color: #0A7F57; }
.mk-tabla s { color: #9AA7B3; font-weight: 600; margin-right: 4px; }
.mk-acciones { display: flex; gap: 8px; margin-top: 10px; }
.mk-acciones .mk-btn { flex: 1; padding: 8px; }
.mk-escribir { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid #E6EBF0; background: #fff; color: #9AA7B3; font-size: 12.5px; }
.mk-escribir span { flex: 1; }
.mk-escribir i { width: 30px; height: 30px; border-radius: 50%; background: var(--cbx-verde); display: grid; place-items: center; }
.mk-escribir i::before { content: ""; width: 14px; height: 14px; background: var(--cbx-noche); -webkit-mask: var(--cbx-i-microfono) center / contain no-repeat; mask: var(--cbx-i-microfono) center / contain no-repeat; }

@media (max-width: 480px) {
	.mk-tienda__grilla, .mk-lote { grid-template-columns: 1fr; }
	.mk-prod__foto { aspect-ratio: 16 / 9; }
	.mk-lote__foto { aspect-ratio: 16 / 9; }
	.mk-estampilla { width: auto; height: 100%; }
}

/* Fotos */
.cbx-foto { margin: 0; }
.cbx-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: var(--cbx-sombra); display: block; }
.cbx-banda .cbx-foto img { box-shadow: 0 24px 50px -22px rgba(11, 22, 34, .55); outline: 6px solid rgba(255, 255, 255, .35); outline-offset: -6px; }
.cbx-banda .wp-block-columns { gap: var(--wp--preset--spacing--60); }
@media (min-width: 782px) { .cbx-banda .wp-block-columns.cbx-fila--invertida { flex-direction: row-reverse; } }

/* Tarjeta con foto a sangre arriba */
.cbx-card--foto { overflow: hidden; }
.cbx-card--foto .cbx-card__foto { margin: calc(-1 * var(--cbx-pad)) calc(-1 * var(--cbx-pad)) .9rem !important; }
.cbx-card--foto .cbx-card__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform .5s ease; }
.cbx-card--foto:hover .cbx-card__foto img { transform: scale(1.04); }

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}