/**
 * CellBoost - hoja principal.
 *
 * El sistema de diseno (color, tipografia, espaciado) vive en theme.json y
 * llega como variables --wp--preset--*. Aqui solo va lo que theme.json no
 * puede expresar: composicion, la escena animada y los componentes propios.
 */

/* ==========================================================================
   Base
   ========================================================================== */

:root {
	--cb-radio: 0.75rem;
	--cb-radio-lg: 1.25rem;
	--cb-transicion: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--cb-ancho: min(100% - 2.5rem, 78rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

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

:where(a, button, input, textarea, select):focus-visible {
	outline: 3px solid var(--wp--preset--color--azul);
	outline-offset: 2px;
	border-radius: 4px;
}

.cb-solo-lectores {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.cb-sobretitulo {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--naranja);
	margin: 0 0 0.75rem;
}

.cb-contenedor { width: var(--cb-ancho); margin-inline: auto; }

.cb-seccion { padding-block: clamp(3.5rem, 8vw, 7rem); }
.cb-seccion--suave { background: var(--wp--preset--color--superficie); }
.cb-seccion--oscura {
	background: linear-gradient(160deg, #0E2A50 0%, #10192B 100%);
	color: #D8E4F2;
}
.cb-seccion--oscura :is(h2, h3) { color: #fff; }

/* ==========================================================================
   Encabezado
   ========================================================================== */

.cb-cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.cb-cabecera__fila {
	width: var(--cb-ancho);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.5rem;
}

.cb-cabecera__marca { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.cb-cabecera__marca img { height: 2.25rem; width: auto; }

.cb-nav { margin-left: auto; }
.cb-nav ul {
	display: flex; gap: 1.5rem;
	list-style: none; margin: 0; padding: 0;
}
.cb-nav a {
	text-decoration: none;
	color: var(--wp--preset--color--marina);
	font-weight: 550;
	font-size: var(--wp--preset--font-size--sm);
	padding-block: 0.5rem;
	border-bottom: 2px solid transparent;
}
.cb-nav a:hover { border-bottom-color: var(--wp--preset--color--naranja); }

.cb-boton {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.4rem;
	border-radius: var(--cb-radio);
	font-weight: 650;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	border: 2px solid transparent;
	transition: background var(--cb-transicion), color var(--cb-transicion), transform var(--cb-transicion);
	line-height: 1.2;
}
.cb-boton:hover { transform: translateY(-1px); }
.cb-boton--wa      { background: #25D366; color: #05320f; }
.cb-boton--wa:hover{ background: #1eb85a; color: #05320f; }
.cb-boton--primario      { background: var(--wp--preset--color--azul); color: #fff; }
.cb-boton--primario:hover{ background: var(--wp--preset--color--marina); color: #fff; }
.cb-boton--fantasma {
	border-color: currentColor;
	color: var(--wp--preset--color--marina);
	background: transparent;
}
.cb-boton--fantasma:hover { background: var(--wp--preset--color--marina); color: #fff; }

/* ==========================================================================
   Hero
   ========================================================================== */

.cb-hero {
	position: relative;
	background:
		radial-gradient(60rem 30rem at 78% -10%, rgba(79, 167, 242, 0.16), transparent 60%),
		linear-gradient(165deg, #0E2A50 0%, #10192B 100%);
	color: #DCE7F5;
	padding-block: clamp(3rem, 6vw, 4.5rem);
	overflow: hidden;
}

.cb-hero__rejilla {
	width: var(--cb-ancho);
	margin-inline: auto;
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 60rem) {
	.cb-hero__rejilla { grid-template-columns: 1.05fr 0.95fr; }
}

.cb-hero h1 {
	color: #fff;
	margin: 0 0 1.25rem;
	font-size: clamp(2.25rem, 4.2vw, 3.5rem);
	max-width: 15ch;
	line-height: 1.08;
	text-wrap: balance;
}
.cb-hero__bajada {
	font-size: var(--wp--preset--font-size--md);
	color: #B9CCE4;
	margin: 0 0 2rem;
	max-width: 34rem;
	text-wrap: pretty;
}
.cb-hero__acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.cb-hero__avales {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: var(--wp--preset--font-size--sm);
	color: #9DB4D0;
}
.cb-hero__aval { display: flex; align-items: center; gap: 0.45rem; }
.cb-hero__aval::before {
	content: "";
	width: 0.5rem; height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--naranja);
	flex: none;
}

/* Tarjeta de cifras del hero */
.cb-cifras {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--cb-radio-lg);
	overflow: hidden;
}
.cb-cifra { background: rgba(9, 20, 38, 0.72); padding: 1.6rem 1.4rem; }
.cb-cifra__num {
	display: block;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	font-weight: 800;
	line-height: 1.05;
	color: #fff;
	letter-spacing: -0.03em;
}
.cb-cifra__num span { color: var(--wp--preset--color--naranja); }
.cb-cifra__txt {
	display: block;
	margin-top: 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
	color: #A9BFD9;
	line-height: 1.45;
}

/* ==========================================================================
   Animacion "como funciona"
   ========================================================================== */

.cb-anim { padding-block: clamp(3.5rem, 8vw, 7rem); }

.cb-anim__intro {
	width: var(--cb-ancho);
	margin-inline: auto;
	max-width: 46rem;
	text-align: center;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.cb-anim__titulo { margin: 0 0 1rem; text-wrap: balance; }
.cb-anim__bajada {
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--md);
	margin: 0;
	text-wrap: pretty;
}

.cb-anim__lienzo {
	width: var(--cb-ancho);
	margin-inline: auto;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
	.cb-anim__lienzo {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 4rem;
		align-items: start;
	}
}

.cb-anim__escena {
	position: relative;
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--cb-radio-lg);
	padding: 0.75rem;
	box-shadow: var(--wp--preset--shadow--suave);
}
@media (min-width: 62rem) {
	.cb-anim__escena { position: sticky; top: 6rem; }
}

.cb-esc { display: block; width: 100%; height: auto; border-radius: 0.9rem; }

.cb-anim__pie {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0.75rem 0.5rem 0.35rem;
	min-height: 1.6rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris);
}
.cb-anim__pie-num {
	font-weight: 700;
	color: var(--wp--preset--color--azul);
	font-variant-numeric: tabular-nums;
	flex: none;
}

/* --- pasos --- */

.cb-anim__pasos { list-style: none; margin: 0; padding: 0; }

.cb-paso {
	padding: 1.5rem 0 1.5rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--borde);
	opacity: 0.45;
	transition: opacity var(--cb-transicion), border-color var(--cb-transicion);
}
.cb-paso.es-activo { opacity: 1; border-left-color: var(--wp--preset--color--naranja); }

@media (min-width: 62rem) {
	.cb-paso { min-height: 48vh; display: flex; flex-direction: column; justify-content: center; }
}

.cb-paso__rotulo {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--naranja);
}
.cb-paso__titulo { margin: 0 0 0.6rem; font-size: var(--wp--preset--font-size--lg); }
.cb-paso__texto  { margin: 0; color: var(--wp--preset--color--gris); text-wrap: pretty; }

/* --- estados de la escena, gobernados por data-paso --- */

.cb-esc__foco,
.cb-esc__difusion,
.cb-esc__pantalla,
.cb-esc__antena-int { opacity: 0; transition: opacity var(--cb-transicion); }

.cb-esc__yagi,
.cb-esc__antena-ext,
.cb-esc__ampli { transition: opacity var(--cb-transicion), transform var(--cb-transicion); }

.cb-esc__antena-ext,
.cb-esc__coax,
.cb-esc__ampli { opacity: 0.32; }

.cb-onda {
	stroke: var(--wp--preset--color--naranja);
	stroke-width: 5;
	opacity: 0;
	transition: opacity var(--cb-transicion), stroke var(--cb-transicion);
}
.cb-onda--1 { opacity: 0.85; }

.cb-esc__coax-flujo {
	stroke-dasharray: 14 12;
	stroke-dashoffset: 0;
	opacity: 0;
}

.cb-led { fill: #33465F; transition: fill var(--cb-transicion); }
.cb-pb  { fill: var(--wp--preset--color--azul-claro); }

.cb-b { fill: #C6D3E2; transition: fill var(--cb-transicion), opacity var(--cb-transicion); }
.cb-b--1 { fill: var(--wp--preset--color--naranja); }
.cb-b--2, .cb-b--3, .cb-b--4 { opacity: 0.35; }

/* Paso 2: captacion */
[data-paso="2"] .cb-esc__antena-ext { opacity: 1; }
[data-paso="2"] .cb-esc__foco        { opacity: 1; }
[data-paso="2"] .cb-onda             { opacity: 0.9; stroke: var(--wp--preset--color--azul-claro); }
[data-paso="2"] .cb-esc__yagi        { transform: translateY(-2px); }

/* Paso 3: conduccion */
[data-paso="3"] .cb-esc__antena-ext { opacity: 1; }
[data-paso="3"] .cb-onda            { opacity: 0.55; stroke: var(--wp--preset--color--azul-claro); }
[data-paso="3"] .cb-esc__coax       { opacity: 1; }
[data-paso="3"] .cb-esc__coax-flujo {
	opacity: 1;
	animation: cb-flujo 1.1s linear infinite;
}

/* Paso 4: amplificacion */
[data-paso="4"] .cb-esc__antena-ext { opacity: 1; }
[data-paso="4"] .cb-esc__coax       { opacity: 1; }
[data-paso="4"] .cb-esc__coax-flujo { opacity: 1; animation: cb-flujo 1.1s linear infinite; }
[data-paso="4"] .cb-esc__ampli      { opacity: 1; }
[data-paso="4"] .cb-esc__ampli .cb-esc__foco { opacity: 1; }
[data-paso="4"] .cb-esc__pantalla   { opacity: 1; }
[data-paso="4"] .cb-led             { fill: var(--wp--preset--color--azul-claro); }
[data-paso="4"] .cb-led--1          { fill: #34D177; }
[data-paso="4"] .cb-onda            { opacity: 0.35; stroke: var(--wp--preset--color--azul-claro); }

/* Paso 5: distribucion y resultado */
[data-paso="5"] .cb-esc__antena-ext,
[data-paso="5"] .cb-esc__coax,
[data-paso="5"] .cb-esc__ampli      { opacity: 1; }
[data-paso="5"] .cb-esc__coax-flujo { opacity: 1; animation: cb-flujo 1.1s linear infinite; }
[data-paso="5"] .cb-esc__pantalla   { opacity: 1; }
[data-paso="5"] .cb-led             { fill: var(--wp--preset--color--azul-claro); }
[data-paso="5"] .cb-led--1          { fill: #34D177; }
[data-paso="5"] .cb-esc__antena-int { opacity: 1; }
[data-paso="5"] .cb-esc__difusion   { opacity: 1; animation: cb-pulso 2.4s ease-out infinite; }
[data-paso="5"] .cb-onda            { opacity: 0.3; stroke: var(--wp--preset--color--azul-claro); }
[data-paso="5"] .cb-b               { fill: var(--wp--preset--color--azul); opacity: 1; }
[data-paso="5"] .cb-b--1            { fill: var(--wp--preset--color--azul); }

/* Version estatica (sin IntersectionObserver): todo resuelto, sin movimiento */
[data-estatico="si"] .cb-paso { opacity: 1; border-left-color: var(--wp--preset--color--borde); }
[data-estatico="si"] .cb-esc__coax-flujo,
[data-estatico="si"] .cb-esc__difusion { animation: none; }

/* Movimiento reducido: los pasos avanzan con la lectura, sin animacion continua */
[data-movimiento="reducido"] .cb-esc__coax-flujo,
[data-movimiento="reducido"] .cb-esc__difusion { animation: none; }

@keyframes cb-flujo  { to { stroke-dashoffset: -52; } }
@keyframes cb-pulso  {
	0%   { opacity: 0.15; }
	45%  { opacity: 1; }
	100% { opacity: 0.15; }
}

/* --- cierre de la animacion: los tres mensajes --- */

.cb-anim__cierre {
	width: var(--cb-ancho);
	margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .cb-anim__cierre { grid-template-columns: repeat(3, 1fr); } }

.cb-anim__cierre-item {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde);
	border-top: 3px solid var(--wp--preset--color--naranja);
	border-radius: var(--cb-radio);
	padding: 1.6rem;
}
.cb-anim__cierre-item h3 { margin: 0 0 0.55rem; font-size: var(--wp--preset--font-size--md); }
.cb-anim__cierre-item p  { margin: 0; color: var(--wp--preset--color--gris); font-size: var(--wp--preset--font-size--sm); }

/* ==========================================================================
   Tarjetas genericas
   ========================================================================== */

.cb-rejilla { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .cb-rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .cb-rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .cb-rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

.cb-tarjeta {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--cb-radio);
	padding: 1.75rem;
	transition: box-shadow var(--cb-transicion), transform var(--cb-transicion);
}
.cb-tarjeta:hover { box-shadow: var(--wp--preset--shadow--media); transform: translateY(-2px); }
.cb-tarjeta h3 { margin: 0 0 0.6rem; font-size: var(--wp--preset--font-size--md); }
.cb-tarjeta p  { margin: 0; color: var(--wp--preset--color--gris); }

.cb-tarjeta__num {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--marina);
	color: #fff;
	font-weight: 700;
	margin-bottom: 1rem;
}

.cb-encabezado-seccion { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cb-encabezado-seccion h2 { margin: 0 0 0.85rem; text-wrap: balance; }
.cb-encabezado-seccion > p:not(.cb-sobretitulo) {
	margin: 0;
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--md);
}
.cb-seccion--oscura .cb-encabezado-seccion > p:not(.cb-sobretitulo) { color: #A9BFD9; }

/* ==========================================================================
   Relatos de clientes
   ========================================================================== */

.cb-relato {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--cb-radio);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.cb-relato__cita { margin: 0; font-size: var(--wp--preset--font-size--md); color: var(--wp--preset--color--tinta); }
.cb-relato__cita::before { content: "\201C"; color: var(--wp--preset--color--naranja); font-weight: 800; }
.cb-relato__cita::after  { content: "\201D"; color: var(--wp--preset--color--naranja); font-weight: 800; }
.cb-relato__meta {
	margin: 0; font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris);
	border-top: 1px solid var(--wp--preset--color--borde);
	padding-top: 0.9rem;
}
.cb-relato__medicion {
	display: flex; gap: 1.25rem; flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
}
.cb-relato__medicion b { color: var(--wp--preset--color--marina); }

/* ==========================================================================
   Barra de canales
   ========================================================================== */

.cb-canales {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.cb-canales__enlace {
	width: 3.25rem; height: 3.25rem;
	border-radius: 50%;
	display: grid; place-items: center;
	box-shadow: var(--wp--preset--shadow--media);
	color: #fff;
	text-decoration: none;
	transition: transform var(--cb-transicion);
}
.cb-canales__enlace:hover { transform: scale(1.07); }
.cb-canales__enlace svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.cb-canales__enlace--wa  { background: #25D366; color: #08341A; }
.cb-canales__enlace--tel { background: var(--wp--preset--color--marina); }
.cb-canales__enlace--ig  { background: linear-gradient(45deg, #F09433, #DC2743 45%, #BC1888); }
.cb-canales__enlace--ms  { background: #0084FF; }

@media (max-width: 47.99rem) {
	.cb-canales {
		right: 0; left: 0; bottom: 0;
		flex-direction: row;
		justify-content: center;
		gap: 0.75rem;
		padding: 0.6rem;
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--wp--preset--color--borde);
	}
	.cb-canales__enlace { width: 2.9rem; height: 2.9rem; }
	body { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   Pie
   ========================================================================== */

.cb-pie {
	background: #0B1626;
	color: #93A9C4;
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	font-size: var(--wp--preset--font-size--sm);
}
.cb-pie__rejilla {
	width: var(--cb-ancho);
	margin-inline: auto;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .cb-pie__rejilla { grid-template-columns: 1.2fr 0.85fr 0.85fr 0.9fr; } }

.cb-pie h3 {
	color: #fff;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.cb-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.cb-pie a { color: #B7C9DF; text-decoration: none; }
.cb-pie a:hover { color: #fff; text-decoration: underline; }

/* --- Síguenos: iconos de redes + última publicación --- */

.cb-pie__redes { display: flex; gap: 0.65rem; margin-bottom: 1.35rem; }
.cb-pie__red {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #DCE7F5;
	transition: background var(--cb-transicion), color var(--cb-transicion), transform var(--cb-transicion);
}
.cb-pie__red svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.cb-pie__red:hover {
	background: var(--wp--preset--color--naranja);
	color: #2A1500;
	transform: translateY(-2px);
	text-decoration: none;
}

.cb-pie__publicacion {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.6rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--cb-radio);
	background: rgba(255, 255, 255, 0.04);
	transition: border-color var(--cb-transicion), background var(--cb-transicion);
}
.cb-pie__publicacion:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.07);
	text-decoration: none;
}
.cb-pie__publicacion img {
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 0.55rem;
	object-fit: cover;
	flex: none;
}
.cb-pie__publicacion-texto {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #C7D6EA;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
}
.cb-pie__publicacion-rotulo {
	display: block;
	color: var(--wp--preset--color--naranja);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.68rem;
	margin-bottom: 0.2rem;
}
.cb-pie__legal {
	width: var(--cb-ancho);
	margin: 2.5rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--xs);
}



.cb-relato__detalle { color: var(--wp--preset--color--gris); }
.cb-relato__meta strong { color: var(--wp--preset--color--marina); }

/* ==========================================================================
   Menu movil
   Debajo de 62rem la navegacion horizontal no cabe y se desbordaba fuera de
   la pantalla, llevandose consigo el boton de WhatsApp. Aqui se sustituye por
   un desplegable <details>, sin JavaScript.
   ========================================================================== */

.cb-menu-movil { display: none; margin-left: auto; position: relative; }

.cb-menu-movil > summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--cb-radio);
	border: 1px solid var(--wp--preset--color--borde);
	color: var(--wp--preset--color--marina);
	background: var(--wp--preset--color--blanco);
}
.cb-menu-movil > summary::-webkit-details-marker { display: none; }
.cb-menu-movil > summary svg { width: 1.35rem; height: 1.35rem; }
.cb-menu-movil[open] > summary {
	background: var(--wp--preset--color--marina);
	color: #fff;
	border-color: var(--wp--preset--color--marina);
}

.cb-menu-movil__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.6rem);
	width: min(17rem, calc(100vw - 2rem));
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--cb-radio);
	box-shadow: var(--wp--preset--shadow--alta);
	padding: 0.75rem;
}
.cb-menu-movil__panel ul {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: grid;
}
.cb-menu-movil__panel a:not(.cb-boton) {
	display: block;
	padding: 0.75rem 0.6rem;
	border-radius: 0.5rem;
	text-decoration: none;
	font-weight: 550;
	color: var(--wp--preset--color--marina);
}
.cb-menu-movil__panel a:not(.cb-boton):hover { background: var(--wp--preset--color--superficie); }
.cb-menu-movil__panel .cb-boton { width: 100%; justify-content: center; }

@media (max-width: 61.99rem) {
	.cb-nav,
	.cb-cabecera__wa { display: none; }
	.cb-menu-movil    { display: block; }
	.cb-cabecera__fila { min-height: 4rem; }
}

/* ==========================================================================
   Escena fija tambien en movil
   Sin esto la escena se va de pantalla al llegar al paso 2 y el lector queda
   leyendo pasos sin ver de que hablan, que es justo lo que la animacion tenia
   que evitar. Se fija bajo la cabecera y se limita su altura para que quede
   sitio al texto.
   ========================================================================== */

@media (max-width: 61.99rem) {
	.cb-anim__escena {
		position: sticky;
		top: 4.25rem;
		z-index: 2;
		padding: 0.5rem;
		box-shadow: 0 12px 20px -14px rgba(14, 42, 80, 0.4);
	}

	/*
	 * Banda opaca detras de la escena fija. Sin ella el texto que pasa por
	 * debajo se ve cortado a media linea contra el borde redondeado de la
	 * tarjeta. La banda vive dentro del contexto de apilamiento de la escena
	 * (z-index 2), asi que tapa el texto aunque lleve z-index negativo.
	 */
	.cb-anim__escena::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: -0.85rem;
		bottom: -1rem;
		left: -1.25rem;
		right: -1.25rem;
		background: var(--wp--preset--color--blanco);
	}
	.cb-esc { max-height: 34vh; }
	.cb-anim__pie { margin-top: 0.5rem; min-height: 1.3rem; }
	.cb-paso { min-height: auto; padding-block: 1.25rem; }
	.cb-anim__lienzo { gap: 1.5rem; }
}

/* ==========================================================================
   Logotipo
   ========================================================================== */

.cb-cabecera__logo {
	height: 2.1rem;
	width: auto;
	display: block;
}
@media (max-width: 30rem) { .cb-cabecera__logo { height: 1.8rem; } }

/* ==========================================================================
   Video explicativo
   Miniatura servida desde este servidor y enlace a YouTube. No se incrusta el
   reproductor: un iframe de YouTube carga cerca de 1 MB y cookies de terceros
   antes de que nadie pulse reproducir.
   ========================================================================== */

.cb-video {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	text-align: left;
	text-decoration: none;
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--cb-radio);
	padding: 0.6rem;
	margin-top: 1.75rem;
	max-width: 24rem;
	transition: box-shadow var(--cb-transicion), transform var(--cb-transicion), border-color var(--cb-transicion);
}
.cb-video:hover {
	box-shadow: var(--wp--preset--shadow--media);
	transform: translateY(-1px);
	border-color: var(--wp--preset--color--azul-claro);
}

.cb-video__lienzo {
	position: relative;
	flex: none;
	width: 7.5rem;
	border-radius: 0.5rem;
	overflow: hidden;
	line-height: 0;
	background: var(--wp--preset--color--marina);
}
.cb-video__lienzo img { width: 100%; height: auto; display: block; }

.cb-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
}
.cb-video__play svg {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(14, 42, 80, 0.82);
	padding: 0.35rem;
	transition: background var(--cb-transicion), transform var(--cb-transicion);
}
.cb-video:hover .cb-video__play svg {
	background: var(--wp--preset--color--naranja);
	transform: scale(1.06);
}

.cb-video__texto { display: grid; gap: 0.15rem; min-width: 0; }
.cb-video__rotulo {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--naranja);
}
.cb-video__titulo {
	font-weight: 650;
	color: var(--wp--preset--color--marina);
	line-height: 1.3;
	font-size: var(--wp--preset--font-size--sm);
}
.cb-video__pie {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris);
}

/* Variante destacada: para la pagina "como funciona" */
.cb-video--destacado {
	display: flex;
	max-width: 34rem;
	padding: 0.75rem;
	gap: 1.1rem;
}
.cb-video--destacado .cb-video__lienzo { width: 11rem; }
.cb-video--destacado .cb-video__titulo { font-size: var(--wp--preset--font-size--base); }

@media (max-width: 30rem) {
	.cb-video { display: flex; width: 100%; }
	.cb-video__lienzo { width: 6rem; }
}

/* ==========================================================================
   Contacto
   ========================================================================== */

.cb-contacto { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 62rem) {
	.cb-contacto { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: start; }
}

.cb-contacto__intro {
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--md);
	max-width: 38rem;
	margin: 0 0 2rem;
}
.cb-contacto__intro strong { color: var(--wp--preset--color--marina); }

.cb-canal-lista { display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .cb-canal-lista { grid-template-columns: repeat(2, 1fr); } }

.cb-canal {
	display: grid;
	gap: 0.2rem;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--cb-radio);
	text-decoration: none;
	background: var(--wp--preset--color--blanco);
	transition: border-color var(--cb-transicion), box-shadow var(--cb-transicion), transform var(--cb-transicion);
}
.cb-canal:hover {
	border-color: var(--wp--preset--color--azul-claro);
	box-shadow: var(--wp--preset--shadow--suave);
	transform: translateY(-1px);
}
.cb-canal__que {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--naranja);
}
.cb-canal__dato { font-weight: 650; color: var(--wp--preset--color--marina); }
.cb-canal__nota { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--gris); }

.cb-contacto__domicilio { margin-top: 2.5rem; }
.cb-contacto__domicilio h3 { margin: 0 0 0.6rem; font-size: var(--wp--preset--font-size--md); }
.cb-contacto__domicilio p { margin: 0 0 0.75rem; color: var(--wp--preset--color--gris); }

/* --- formulario --- */

.cb-contacto__forma {
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--cb-radio-lg);
	padding: 1.75rem;
}
.cb-contacto__forma h3 { margin: 0 0 0.4rem; font-size: var(--wp--preset--font-size--lg); }
.cb-forma__intro { margin: 0 0 1.5rem; color: var(--wp--preset--color--gris); font-size: var(--wp--preset--font-size--sm); }

.cb-campo { display: grid; gap: 0.35rem; margin: 0 0 1rem; }
.cb-campo label { font-weight: 600; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--marina); }
.cb-campo label span { color: var(--wp--preset--color--naranja); }
.cb-campo :is(input, textarea) {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 0.5rem;
	background: var(--wp--preset--color--blanco);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--tinta);
}
.cb-campo :is(input, textarea):focus-visible { border-color: var(--wp--preset--color--azul); }
.cb-campo textarea { resize: vertical; min-height: 5rem; }

.cb-contacto__forma .cb-boton { width: 100%; justify-content: center; margin-top: 0.25rem; }

.cb-forma__legal {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris);
	line-height: 1.5;
}

/* Campo trampa contra robots: fuera de pantalla, nunca oculto con display:none
   -algunos robots ignoran los campos ocultos y asi seguirian pasando-. */
.cb-forma__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cb-aviso {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border-radius: 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
	border: 1px solid;
}
.cb-aviso--exito { background: #E8F7EE; border-color: #9AD9B4; color: #14532D; }
.cb-aviso--error { background: #FDECEC; border-color: #F3B4B4; color: #7F1D1D; }

/* ==========================================================================
   Contenido de pagina generico
   ========================================================================== */

.cb-prosa { max-width: 44rem; }
.cb-prosa > * + * { margin-top: 1.15rem; }
.cb-prosa h2 { margin-top: 2.75rem; }
.cb-prosa h3 { margin-top: 2rem; }
.cb-prosa ul, .cb-prosa ol { padding-left: 1.25rem; }
.cb-prosa li + li { margin-top: 0.5rem; }
.cb-prosa .cb-destacado {
	border-left: 3px solid var(--wp--preset--color--naranja);
	padding: 0.25rem 0 0.25rem 1.25rem;
	color: var(--wp--preset--color--marina);
	font-size: var(--wp--preset--font-size--md);
}

/* ==========================================================================
   Encabezado de pagina interior
   La plantilla usa disposicion libre, no "constrained": las secciones de ancho
   completo -contacto, verticales, relatos- necesitan el ancho entero, y cada
   bloque de prosa se limita solo con .cb-prosa. Con la disposicion constrained
   de WordPress el formulario de contacto quedaba estrangulado y el titulo
   flotaba desalineado del contenido.
   ========================================================================== */

.cb-encabezado-pagina {
	width: var(--cb-ancho);
	margin-inline: auto;
	padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2rem);
}
.cb-encabezado-pagina h1 {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(2rem, 3.6vw, 3rem);
	line-height: 1.1;
}

/* El primer bloque de prosa no necesita separarse otra vez del titulo. */
.cb-encabezado-pagina + .wp-block-post-content > .cb-prosa:first-child { margin-top: 0; }

/* Una seccion de ancho completo justo despues del titulo respira mejor asi. */
.cb-encabezado-pagina + .wp-block-post-content > .cb-seccion:first-child { padding-top: 0; }

/* El logotipo trae su lema incrustado; a menos altura se vuelve ilegible. */
.cb-cabecera__logo { height: 2.35rem; }

/* Campo de casilla del formulario */
.cb-campo--casilla {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.6rem;
	margin-bottom: 1.25rem;
}
.cb-campo--casilla input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--wp--preset--color--azul);
}
.cb-campo--casilla label { font-weight: 500; line-height: 1.4; }
.cb-campo__opcional { color: var(--wp--preset--color--gris); font-weight: 400; }

/* ==========================================================================
   Carril para la barra flotante de canales
   La barra vertical vive fija a la derecha y, entre 900 y 1366 px, se montaba
   encima del contenido: en /contacto/ llegaba a tapar los campos del
   formulario. Se le reserva su carril estrechando el contenedor solo en esa
   franja.
   NO se usa `padding-right` en el body a proposito: las secciones de fondo
   completo -el hero y la de cobertura- dejarian una franja blanca a la derecha.
   Por debajo de 48rem la barra ya es horizontal abajo y no estorba; por encima
   de 90rem el margen natural del contenedor ya la libera.
   ========================================================================== */

@media (min-width: 48rem) and (max-width: 89.99rem) {
	:root { --cb-ancho: min(100% - 9.5rem, 78rem); }
}