/*
 * bewytec-web.css — línea visual del sitio público
 *
 * Hereda la línea de la plataforma de Producción. Referencia con archivo y línea en
 * serverDash/docs/linea_visual_plataforma.md (2026-08-25).
 *
 * REGLA DE ESTE ARCHIVO: los colores se declaran UNA vez, aquí, como variables.
 * La plataforma tiene el azul escrito a mano 460 veces y por eso se le colaron dos hovers
 * distintos para el mismo botón y azules de Tailwind. Se heredan los valores, no el método.
 * Si algo necesita el azul, es var(--bw-blue). Nunca #026EEE suelto.
 */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
	/* --- Marca. Coinciden exactamente entre el Manual de Identidad y la plataforma. --- */
	--bw-blue:          #026EEE;
	--bw-blue-soft:     #5598EF;
	--bw-yellow:        #F7B923;

	/* Cierre del degradado de la cabecera. Sale del sitio actual (style.css:667), donde
	   estaba escrito como rgba(62,138,237,1). Es identidad que bewytec.com ya tiene. */
	--bw-blue-header-end: #3E8AED;

	/* Hover del primario. La plataforma tiene dos (#015fd7 y #0257bd); se toma el que gana
	   por mayoría, 11 usos contra 1. */
	--bw-blue-hover:    #015fd7;

	/* --- Neutros. No están en el manual: son invención de la plataforma, coherente. --- */
	--bw-ink:           #0c224e;  /* titulares y texto fuerte */
	--bw-surface:       #f2f4f7;  /* fondo de página */
	--bw-white:         #ffffff;
	--bw-logo-bg:       #071b3c;  /* pastilla bajo el logo blanco */
	/* El cierre de la página. La cinta «Estamos contigo» y el pie forman un solo
	   bloque en degradado: antes la cinta era #071b3c y el pie el gris #212529 de
	   Bootstrap, dos oscuros que no casaban y cortaban la página en seco.
	   Va de oscuro a más azul según baja, haciendo eco del héroe. El blanco sobre
	   el tono final da 11.82, de sobra para el texto y los enlaces del pie; el azul
	   de marca puro se descartó porque con blanco encima se queda en 4.7. */
	--bw-cierre-medio:  #0a2450;  /* donde se encuentran cinta y pie */
	--bw-cierre-fin:    #0f3573;  /* el final de la página */

	/* El hielo del iceberg. La punta va sobre fondo casi blanco, así que necesita
	   relleno y borde propios o desaparece; la masa sumergida va detrás de texto
	   blanco, así que se queda en una insinuación. */
	--bw-hielo:         #dce8fa;  /* relleno de la punta */
	--bw-hielo-borde:   #7ea9e8;  /* su contorno, para que se recorte del fondo */
	--bw-hielo-sombra:  #c2d6f2;  /* la cara en sombra, que le da volumen */

	/* --- Escala slate (azulada, no gris neutro) --- */
	--bw-slate-700:     #334155;
	--bw-slate-600:     #475569;
	--bw-slate-500:     #64748b;
	--bw-slate-400:     #94a3b8;
	--bw-slate-300:     #cbd5e1;
	--bw-slate-200:     #e2e8f0;
	--bw-slate-100:     #f1f5f9;
	--bw-slate-50:      #f8fafc;

	/* --- Bordes y sombras. Las sombras son AZULES teñidas, no grises: es lo que le da
	       unidad al conjunto. Una sombra gris estándar se siente ajena aunque el color
	       sea el mismo. --- */
	--bw-border:        rgba(2, 110, 238, 0.09);
	--bw-shadow-card:   0 2px 12px rgba(2, 110, 238, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
	--bw-shadow-hover:  0 8px 28px rgba(2, 110, 238, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);

	/* --- Radios. rounded-xl (0.75rem) es la norma de facto de la plataforma;
	       1rem para tarjetas y botones de cara al público. --- */
	--bw-radius-sm:     0.5rem;
	--bw-radius:        0.75rem;
	--bw-radius-lg:     1rem;

	/* --- Tipografía ---
	   Agrandir es la del Manual de Marca (decisión de Daniel, 25-ago). La plataforma usa
	   Inter y NO carga Agrandir: en tipografía manda el Manual, no la plataforma.
	   PERO el tema solo trae UN corte de Agrandir (Narrow, peso normal). Con un solo peso
	   no se sostiene una jerarquía completa, así que:
	     - Agrandir  -> titulares (su peso natural; nunca pedirle bold, saldría sintético)
	     - Inter     -> cuerpo, interfaz y cifras (tiene 400-900 y es lo que ya usa el producto) */
	--bw-font-display:  'Agrandir Narrow', 'Inter', system-ui, sans-serif;
	--bw-font-body:     'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ============================================================
   2. BASE
   ============================================================ */

body.bw {
	font-family: var(--bw-font-body);
	background: var(--bw-surface);
	color: var(--bw-slate-700);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.bw h1, .bw h2, .bw h3, .bw .bw-display {
	font-family: var(--bw-font-display);
	color: var(--bw-ink);
	line-height: 1.15;
	letter-spacing: -0.01em;
	/* Agrandir solo tiene peso normal: pedir 700 produce negrita sintética y se ve sucia. */
	font-weight: 400;
}

/* Enlaces de texto.
 *
 * Van dentro de :where() a propósito. Escrito como `.bw a` la especificidad es (0,1,1) y le
 * gana a cualquier clase de componente, que es (0,1,0): el resultado era un botón primario
 * con el texto azul sobre fondo azul, ilegible. Se detectó abriendo el prototipo en Chrome
 * — en el código no se ve.
 *
 * :where() vale 0, así que esta regla queda en (0,1,0) y cualquier componente definido
 * después la gana limpiamente. No convertir esto de vuelta a `.bw a`. */
.bw :where(a) { color: var(--bw-blue); }
.bw :where(a:hover) { color: var(--bw-blue-hover); }

/* Entrada de página — parte del carácter del producto (bewytec.css:37-43). */
.bw-fade { animation: bw-fade-in 0.35s ease-out both; }
@keyframes bw-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* Respeta a quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	.bw-fade { animation: none; }
	.bw *, .bw *::before, .bw *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   2b. MARCA EN LA CABECERA
   ============================================================ */

/* La cabecera va en el AZUL DE MARCA con el borde amarillo: es como está hoy en bewytec.com
   y se conserva tal cual, no se inventa nada.
   Esta regla REPITE a propósito lo que ya hace style.css:664-672, con una diferencia: allí
   el color está escrito a mano (`rgba(85,152,239,1)`) y aquí sale de las variables. Gana
   esta por especificidad (.bw .site-header) y por orden de carga, así que el color de la
   cabecera queda gobernado por los tokens. La de style.css queda como deuda a limpiar.
   El logotipo oficial ya es blanco: va directo encima, sin pastilla. */
.bw .site-header {
	background: var(--bw-blue-soft);
	background: linear-gradient(90deg, var(--bw-blue-soft) 0%, var(--bw-blue-soft) 44%, var(--bw-blue-header-end) 100%);
	border-bottom: 1px solid var(--bw-yellow);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.bw .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.bw .custom-logo {
	height: 30px;
	width: auto;
	max-width: none;
	display: block;
}
@media (max-width: 767.98px) {
	.bw .custom-logo { height: 24px; }
}

/* Los ítems de menú de dos palabras («Cómo funciona») se partían en dos renglones y
   desalineaban toda la barra. Se vio al montar el tema en un WordPress de verdad: con el
   menú vacío del prototipo no aparecía. */
.bw .main-navigation :where(a) { white-space: nowrap; }

/* El logotipo ya dice BEWYTEC. Repetirlo en texto al lado lo escribe dos veces.
   Se oculta a la vista pero se deja en el DOM: es el <h1> de la portada y hace falta para
   los buscadores y para quien navega con lector de pantalla. */
.bw .site-title,
.bw .site-description {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Franja de 3 px con los tres colores de marca: el único sitio donde se ven juntos. */
.bw-brandbar {
	height: 3px;
	background: linear-gradient(90deg, var(--bw-blue), var(--bw-blue-soft), var(--bw-yellow));
}

/* ============================================================
   3. SECCIONES
   ============================================================ */

.bw-section { padding: 4.5rem 0; }
.bw-section--tight { padding: 3rem 0; }
.bw-section--white { background: var(--bw-white); }
.bw-section--ink {
	background: var(--bw-logo-bg);
	color: rgba(255, 255, 255, 0.82);
}
.bw-section--ink h2,
.bw-section--ink h3,
.bw-section--ink .bw-display { color: var(--bw-white); }

.bw-kicker {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	/* La plataforma usa #94a3b8 aquí. Sobre blanco y a 0.7rem no llega a contraste AA,
	   y esto es un sitio público: se sube a slate-500. Desvío consciente. */
	color: var(--bw-slate-500);
	margin-bottom: 0.75rem;
}
.bw-section--ink .bw-kicker { color: var(--bw-blue-soft); }

.bw-section-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 1rem; }
.bw-lead {
	font-size: 1.0625rem;
	color: var(--bw-slate-600);
	max-width: 60ch;
}
.bw-section--ink .bw-lead { color: rgba(255, 255, 255, 0.82); }

/* ============================================================
   4. HÉROE
   ============================================================ */

.bw-hero {
	background: linear-gradient(160deg, var(--bw-logo-bg) 0%, #0d2a5e 55%, var(--bw-blue) 160%);
	color: var(--bw-white);
	padding: 5rem 0 4.5rem;
}
.bw-hero h1 {
	color: var(--bw-white);
	font-size: clamp(2.25rem, 6vw, 4rem);
	margin-bottom: 1.25rem;
}
.bw-hero__lead {
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	color: rgba(255, 255, 255, 0.85);
	max-width: 54ch;
	margin-bottom: 2rem;
}

/* ============================================================
   5. BOTONES
   ============================================================ */

.bw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	/* Radio del dialecto público de la plataforma: es el que ya ve quien llega de afuera. */
	border-radius: var(--bw-radius-lg);
	font-family: var(--bw-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}
.bw-btn:active { transform: scale(0.98); }

.bw-btn--primary { background: var(--bw-blue); color: var(--bw-white); }
.bw-btn--primary:hover { background: var(--bw-blue-hover); color: var(--bw-white); }

.bw-btn--ghost {
	background: transparent;
	color: var(--bw-white);
	border-color: rgba(255, 255, 255, 0.35);
}
.bw-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--bw-white);
}

.bw-btn--outline {
	background: transparent;
	/* El azul de marca (#026EEE) sobre el gris de sección (#f2f4f7) da 4.27 y AA pide
	   4.5: se queda corto justo en un botón, que es lo último que debe costar leer.
	   Se usa el tono de hover, que ya es un token de la marca y sube a 5.27. */
	color: var(--bw-blue-hover);
	border-color: var(--bw-blue-hover);
}
.bw-btn--outline:hover { background: var(--bw-blue); color: var(--bw-white); }

/* Foco visible para teclado — el sitio público no puede perder esto. */
.bw a:focus-visible,
.bw button:focus-visible,
.bw input:focus-visible,
.bw textarea:focus-visible {
	outline: 3px solid var(--bw-blue-soft);
	outline-offset: 2px;
}

/* ============================================================
   6. TARJETAS
   ============================================================ */

.bw-card {
	background: var(--bw-white);
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius-lg);
	padding: 1.75rem;
	box-shadow: var(--bw-shadow-card);
	height: 100%;
}
.bw-card--hover { transition: box-shadow 0.2s, transform 0.2s; }
.bw-card--hover:hover { box-shadow: var(--bw-shadow-hover); transform: translateY(-2px); }

.bw-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--bw-radius);
	background: rgba(2, 110, 238, 0.1);
	color: var(--bw-blue);
	font-size: 1.125rem;
	margin-bottom: 1rem;
}
/* El ícono de la ruta del conductor va en el acento, no en el azul: es la señal de que
   esa mitad de la página es suya. */
.bw-card__icon--y { background: rgba(247, 185, 35, 0.16); color: #a16207; }
.bw-card__title { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.bw-card p { color: var(--bw-slate-600); margin-bottom: 0; }

/* --- Cifra destacada. La etiqueta diminuta en mayúsculas sobre el número enorme en peso
       900 es la firma visual más reconocible del dashboard. El número va en Inter porque
       Agrandir no tiene ese peso. --- */
.bw-stat__value {
	font-family: var(--bw-font-body);
	font-size: clamp(2.25rem, 5vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--bw-ink);
	line-height: 1;
	display: block;
}
.bw-section--ink .bw-stat__value { color: var(--bw-white); }
.bw-stat__label {
	font-size: 0.8125rem;
	color: var(--bw-slate-500);
	margin-top: 0.5rem;
	display: block;
}
.bw-section--ink .bw-stat__label { color: rgba(255, 255, 255, 0.7); }

.bw-stat__pct { font-size: 0.5em; }

.bw-source {
	font-size: 0.8125rem;
	color: var(--bw-slate-500);
	margin: 0.9rem 0 0;
}

/* Tarjeta de ruta (empresa / conductor) */
.bw-route {
	display: block;
	text-decoration: none;
	border-left: 4px solid var(--bw-blue);
}
.bw-route--driver { border-left-color: var(--bw-yellow); }
.bw-route:hover { text-decoration: none; }

/* Variantes de tarjeta. El riel de color de la izquierda codifica de qué tipo es el bloque:
   amarillo = matiz o salvedad, azul = capacidad destacada. No es decoración. */
.bw-card--accent  { border-left: 4px solid var(--bw-yellow); }
.bw-card--feature { border-left: 4px solid var(--bw-blue); }

/* El matiz honesto: fondo tenue para que se lea como una nota al margen, no como un
   argumento de venta más. */
.bw-card--quote {
	background: var(--bw-slate-50);
	border-left: 4px solid var(--bw-slate-300);
}

/* Tarjeta sobre fondo oscuro. */
.bw-card--ghost {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}
.bw-card--ghost .bw-card__title { color: var(--bw-white); }
.bw-card--ghost p { color: rgba(255, 255, 255, 0.82); }

/* ============================================================
   7. LISTA DE VERIFICACIÓN
   ============================================================ */

.bw-check { list-style: none; padding: 0; margin: 0; }
.bw-check li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.875rem;
	color: var(--bw-slate-600);
}
.bw-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--bw-blue);
}
.bw-section--ink .bw-check li { color: rgba(255, 255, 255, 0.82); }

/* Variante "lo que NO hace": el punto se vuelve una raya, no un check. */
.bw-check--no li::before {
	width: 0.75rem;
	height: 2px;
	border-radius: 2px;
	background: var(--bw-yellow);
	top: 0.75em;
}

/* ============================================================
   8. PASOS NUMERADOS
   ============================================================ */

.bw-step__num {
	font-family: var(--bw-font-body);
	font-size: 0.8125rem;
	font-weight: 800;
	color: var(--bw-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(2, 110, 238, 0.1);
	margin-bottom: 0.875rem;
}

/* ============================================================
   9. FORMULARIO
   ============================================================ */

.bw-form .form-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--bw-slate-600);
	margin-bottom: 0.5rem;
}
.bw-form .form-control {
	border-radius: var(--bw-radius);
	border: 1px solid var(--bw-slate-200);
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	color: var(--bw-ink);
	transition: border-color 0.2s, box-shadow 0.2s;
}
/* El foco azul con halo es la seña de identidad del formulario en la plataforma. */
.bw-form .form-control:focus {
	border-color: var(--bw-blue);
	box-shadow: 0 0 0 3px rgba(2, 110, 238, 0.15);
	outline: none;
}
.bw-form .form-check-input:checked {
	background-color: var(--bw-blue);
	border-color: var(--bw-blue);
}
.bw-form .form-check-label {
	font-size: 0.875rem;
	color: var(--bw-slate-600);
}

/* ============================================================
   10. CINTA DE CIERRE
   ============================================================ */

.bw-signature {
	font-family: var(--bw-font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--bw-white);
}

/* ============================================================
   11. TARJETAS DEL BLOG
   ============================================================ */
/* Las miniaturas vienen casi todas de Instagram y son cuadradas; algunas son
   apaisadas. Antes salían a su proporción original dentro de un col-md-4 y la
   fila quedaba desalineada y con las fotos deformadas.
   El recorte se hace aquí, con aspect-ratio + object-fit, y no en WordPress:
   así da igual qué suba quien publique, y no hay que regenerar miniaturas. */

.bw-post {
	background: var(--bw-white);
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius-lg);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: var(--bw-shadow-card);
	transition: box-shadow 0.2s, transform 0.2s;
}
.bw-post:hover { box-shadow: var(--bw-shadow-hover); transform: translateY(-2px); }

.bw-post__img {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bw-slate-100);
}
.bw-post__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}
.bw-post:hover .bw-post__img img { transform: scale(1.03); }

.bw-post__cuerpo {
	padding: 1.1rem 1.15rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.bw-post__fecha {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--bw-slate-500);
}
.bw-post__titulo {
	font-size: 1.0625rem;
	line-height: 1.35;
	margin: 0;
	text-wrap: balance;
}
/* :where() para que el color del enlace no le gane al del encabezado. */
.bw-post__titulo :where(a) { color: var(--bw-ink); text-decoration: none; }
.bw-post__titulo a:hover { color: var(--bw-blue); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.bw-post, .bw-post__img img { transition: none; }
	.bw-post:hover { transform: none; }
	.bw-post:hover .bw-post__img img { transform: none; }
}

/* ============================================================
   12. ICEBERG
   ============================================================ */
/* Sustituye a la imagen JPEG que traía el texto quemado dentro y era ilegible en
   móvil. Aquí el texto es HTML: escala, se selecciona y lo lee un lector de
   pantalla. La silueta es puramente decorativa, así que si no se ve no se pierde
   nada — ese es el punto: la información no depende del dibujo.

   Va COMPACTO a propósito. En su primera versión medía 660px, con título propio
   y las dos cifras en tarjetas grandes: se leía como una sección aparte y dejaba
   «Quiénes somos» en 1.195px, casi el doble que cualquier otra sección de la
   portada. Ahora el título es un rótulo, las cifras van en una línea y las causas
   se reparten en dos columnas. Es un apoyo dentro de la sección, no su
   protagonista. */

.bw-iceberg {
	margin: 2.5rem 0 0;
	border-radius: var(--bw-radius-lg);
	overflow: hidden;
	box-shadow: var(--bw-shadow-card);
}

/* --- Sobre el agua --- */
.bw-iceberg__aire {
	position: relative;      /* ancla de la punta */
	background: var(--bw-slate-50);
	/* El padding inferior le reserva sitio a la punta: sin él se montaría sobre
	   la línea de las cifras. */
	padding: 1.1rem 1.5rem 4.25rem;
	text-align: center;
}
.bw-iceberg__rotulo {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--bw-slate-500);
	margin: 0 0 0.5rem;
}
.bw-iceberg__rotulo--claro { color: var(--bw-blue-soft); margin-bottom: 0.9rem; }

/* Las cifras, antes en dos tarjetas de 100px de alto, ahora en una línea. */
.bw-iceberg__resumen {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--bw-slate-700);
}
.bw-iceberg__resumen strong {
	font-family: var(--bw-font-display);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--bw-ink);
	vertical-align: -0.05em;
}
.bw-iceberg__sep { color: var(--bw-slate-300); margin: 0 0.35rem; }

/* La punta emergiendo. Va absoluta y pegada al fondo del bloque claro, y el
   propio bloque reserva sitio con su padding-bottom. Solapa 1px sobre el agua
   para que no quede un pelo de fondo entre el hielo y la superficie. */
.bw-iceberg__punta {
	position: absolute;
	left: 50%;
	bottom: -1px;
	transform: translateX(-50%);
	width: min(190px, 48%);
	line-height: 0;
	pointer-events: none;
}
.bw-iceberg__punta svg { display: block; width: 100%; height: auto; }

/* --- La línea de agua --- */
.bw-iceberg__agua {
	background: var(--bw-slate-50);
	line-height: 0;
	/* Un pelo de solape arriba y abajo. El bloque no mide 26px redondos sino 25.99,
	   así que el navegador reparte el último píxel entre el relleno oscuro del SVG
	   y este fondo claro: por esa fracción asomaba una línea blanca tenue justo
	   debajo de la ola. El -1px de abajo deja que el bloque sumergido suba y la
	   tape; el de arriba cierra la misma costura contra el bloque claro. */
	margin-top: -1px;
	margin-bottom: -1px;
}
.bw-iceberg__agua svg { display: block; width: 100%; height: 26px; }

/* --- Bajo el agua --- */
.bw-iceberg__fondo {
	position: relative;
	background: var(--bw-logo-bg);
	color: rgba(255, 255, 255, 0.82);
	padding: 1.35rem 1.5rem 1.15rem;
}
/* La silueta, detrás del texto y con opacidad muy baja para no robarle contraste. */
.bw-iceberg__fondo::before {
	content: "";
	position: absolute;
	inset: 0;
	/* La masa sumergida. Encaja con la punta por aritmética, no por ojo: su caja
	   es el doble de ancha (380 frente a 190), así que para que la cima mida los
	   mismos 55px reales que la base de la punta, el path arranca en x 171→229 de
	   su viewBox de 400 (58/400 × 380 = 55). Abajo se abre hasta x 20→380, que son
	   342px: seis veces la cima.
	   Esa desproporción es el chiste del iceberg y antes no estaba —la masa era tan
	   estrecha como la punta y no se leía la idea. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMin slice'%3E%3Cpath d='M171 0 L229 0 L258 48 L238 66 L306 128 L282 152 L352 226 L326 252 L380 300 L20 300 L74 262 L52 236 L118 168 L96 142 L160 74 L146 50 Z' fill='%235598EF'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: min(380px, 92%) auto;
	opacity: 0.16;
	pointer-events: none;
}
.bw-iceberg__fondo > * { position: relative; }

.bw-iceberg__columnas {
	display: grid;
	grid-template-columns: 1.75fr 1fr;
	gap: 1.25rem 2.25rem;
	max-width: 940px;
	margin-inline: auto;
}
.bw-iceberg__sub {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--bw-white);
	margin: 0 0 0.5rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.bw-iceberg__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.83rem;
	line-height: 1.4;
}
/* Las seis causas en dos columnas: tres filas en vez de seis. Es lo que más
   altura ahorra de todo el bloque. */
.bw-iceberg__lista--dos { columns: 2; column-gap: 1.75rem; }
.bw-iceberg__lista li {
	position: relative;
	padding-left: 0.85rem;
	margin-bottom: 0.4rem;
	break-inside: avoid;
}
.bw-iceberg__lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--bw-yellow);
}

/* Los enlaces a las fuentes. Sobre el azul casi negro heredarían el azul de marca
   de `.bw :where(a)`: azul sobre azul oscuro, sin contraste. Es el mismo choque
   que ya salió con el botón, el menú y los títulos del pie. */
.bw-source :where(a) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bw-source a:hover { color: var(--bw-blue); }
.bw-iceberg__fuente a:hover { color: var(--bw-white); }

.bw-iceberg__fuente {
	color: var(--bw-slate-400);
	margin: 1.1rem 0 0;
	text-align: center;
}

/* La cita que acompaña al bloque de «Quiénes somos». */
.bw-cita {
	margin: 0;
	padding: 1.25rem 0 1.25rem 1.25rem;
	border-left: 3px solid var(--bw-yellow);
	font-family: var(--bw-font-display);
	font-size: clamp(1.15rem, 2.3vw, 1.45rem);
	line-height: 1.35;
	color: var(--bw-ink);
}

/* ============================================================
   13. PIE
   ============================================================ */
/* El pie lo pinta footer.php con .bg-dark de Bootstrap, y no es una sección
   mía: no lleva .bw-section--ink. La regla de encabezados de la sección 2
   (.bw h1, .bw h2, .bw h3 → --bw-ink) también lo alcanzaba, y dejaba «Redes»,
   «Contacto» y «Bewytec» en azul casi negro sobre negro — contraste 1.01,
   literalmente ilegibles.
   Es el mismo choque de especificidad que ya apareció con el botón primario y
   con el menú: una regla mía de (0,1,1) ganándole a lo que debía mandar. Se
   arregla igual que en .bw-section--ink, con un override explícito y más
   específico (0,2,1), no con !important.
   Solo se veía montando el tema en un WordPress real: el prototipo tiene pie
   propio y nunca cargó este. */
/* El degradado del cierre, en dos tramos. Cinta y pie son elementos distintos y
   uno vive en index.php y el otro en footer.php, así que no se puede pintar un
   solo degradado que los cruce. Se parte en dos y ambos se encuentran en
   --bw-cierre-medio: la unión queda invisible aunque las alturas cambien con el
   contenido, que es justo lo que un porcentaje único no aguantaría.
   Se usa background-image y no background: las utilidades de Bootstrap declaran
   background-color con !important, y a eso no se le gana por especificidad —
   pero un background-image se pinta por encima igual. */
.bw-section--tight.bw-section--ink {
	background-image: linear-gradient(180deg, var(--bw-logo-bg) 0%, var(--bw-cierre-medio) 100%);
}
.bw .site-footer {
	background-image: linear-gradient(180deg, var(--bw-cierre-medio) 0%, var(--bw-cierre-fin) 100%);
}

.bw .site-footer h1,
.bw .site-footer h2,
.bw .site-footer h3,
.bw .site-footer h4,
.bw .site-footer .widget-title { color: var(--bw-white); }

/* ============================================================
   14. AJUSTES RESPONSIVE
   ============================================================ */

/* Debajo de 992px .container-lg deja de tener max-width y pasa a ocupar todo el
   ancho. Ahí se destapa el canalón: las filas con g-5 llevan márgenes negativos
   de 1.5rem por lado (48px de ancho de más) y el contenedor solo aporta 0.75rem
   de padding por lado (24px). Sobran 24px y la portada se desplaza 12px en
   horizontal — ese arrastre lateral que en un móvil se nota enseguida.
   Se baja el canalón horizontal a 1.5rem, que es justo lo que el contenedor
   puede absorber. --bs-gutter-y no se toca: la separación vertical entre los
   bloques ya apilados se mantiene igual. */
@media (max-width: 991.98px) {
	.bw .row { --bs-gutter-x: 1.5rem; }

	/* El tema colapsa el menú en 37.5em (600px), pero la cabecera lo maqueta con
	   d-lg-flex de Bootstrap, que es 992px. Entre 600 y 992 quedaban desalineados:
	   la hamburguesa desaparecía y el menú se abría en fila dentro de un col-md-6
	   de 360px, con cinco ítems que piden más de 700px. Resultado, 283px de
	   desborde horizontal en tablet — un iPad en vertical entra justo ahí.
	   Se manda el breakpoint de Bootstrap, que es el que usa el marcado. No se
	   toca el bloque original de style.css: esta hoja carga después y lo pisa. */
	.bw .menu-toggle { display: block; }
	.bw .main-navigation ul { display: none; }
	.bw .main-navigation.toggled ul { display: block; }

	/* El embed de Instagram de la barra lateral trae min-width:326px en el style
	   inline, y a 768px vive en un col-md-4 de 256px: se sale 97px y arrastra la
	   página en horizontal. Esto NO lo trae el rediseño — bewytec.com ya lo hace
	   hoy, con el mismo marcado. Se cubre aquí porque un sitio de ventas que se
	   desplaza de lado en un iPad se ve mal, y porque el arreglo es acotado.
	   Lleva !important a propósito y es el único de la hoja que sirve para pisar
	   a un tercero: min-width viene en un atributo style inline, y a eso no se le
	   gana por especificidad. (Los otros !important de la hoja son los del bloque
	   prefers-reduced-motion y el del campo trampa, donde son la convención.) */
	.bw .widget blockquote.instagram-media,
	.bw .widget_block blockquote.instagram-media { min-width: 0 !important; }
}

@media (max-width: 767.98px) {
	.bw-section { padding: 3rem 0; }
	.bw-hero { padding: 3.5rem 0 3rem; }
	.bw-card { padding: 1.375rem; }

	/* El iceberg en móvil. Todo el sentido de haberlo sacado de la imagen JPEG
	   estaba aquí: en pantalla estrecha las columnas se apilan y el texto conserva
	   su tamaño en vez de encogerse hasta no leerse. */
	.bw-iceberg { margin-top: 2rem; }
	.bw-iceberg__aire { padding: 1rem 1.1rem 1.1rem; }
	.bw-iceberg__fondo { padding: 1.25rem 1.1rem 1.1rem; }
	.bw-iceberg__columnas { grid-template-columns: 1fr; gap: 1.25rem; }
	/* Las causas vuelven a una sola columna: a 390px, dos columnas dejan renglones
	   de tres palabras y se lee peor que la lista larga. */
	.bw-iceberg__lista--dos { columns: 1; }
	.bw-iceberg__resumen { font-size: 0.9rem; }
	/* La silueta estorba más de lo que aporta en vertical: el bloque queda alto y
	   estrecho, y el dibujo se estira sin leerse. Se retira y queda el color. */
	.bw-iceberg__fondo::before { display: none; }
	.bw-cita { font-size: 1.1rem; padding-left: 1rem; }
}