/* ============================================================
   BIMM STUDIO — sistema visual
   ============================================================

   DE DÓNDE SALE ESTE DISEÑO

   De los documentos de Bimm —la cotización, la orden de servicio, el manual—,
   cuyo sistema vive en `../formatos/comun/estilos.css`. Lo pidió Isaac, y
   además de gustarle tiene una razón de peso: lo que el cliente LEE en el
   sitio y lo que FIRMA después se ven como la misma casa. Un proveedor cuya
   web y cuyos contratos no se parecen en nada da la impresión de dos empresas
   distintas.

   Lo que se trae de allá, literal:
     · Las MANCHAS de marca: gradientes radiales que se desvanecen al 70 %.
     · El FILETE: la banda de 7px con el degradado de cuatro paradas.
     · La tinta verdosa `#12201F`, que no es negro puro y por eso el papel no
       vibra.
     · El mobiliario de documento: filetes finos, rótulos en versalitas muy
       espaciadas, numeración 01/02/03 y cifras en `tabular-nums`.

   DOS TEMAS, DISEÑADOS JUNTOS

   El claro es EL DOCUMENTO: papel y tinta. El oscuro es LA MARCA: el negro de
   la landing. No es uno el negativo del otro —invertir un tema claro da grises
   sucios—: cada uno tiene sus valores y su contraste comprobado por separado.
   ============================================================ */

/* ── Tema claro: el documento ───────────────────────────────
   Contraste sobre papel #ffffff:
     tinta #12201F ......... 16.1:1   AAA
     tinta-suave #556867 .... 5.9:1   AA   (texto secundario)
     acento #057B7A ......... 5.0:1   AA   (enlaces y rótulos)
   El coral #FF3D3E da 3.4:1 y NO se usa como texto sobre papel: sólo como
   trazo, filete o marca de énfasis. */

:root {
	--papel:        #ffffff;
	--papel-hondo:  #f7faf9;
	--tinta:        #12201f;
	--tinta-suave:  #556867;
	--linea:        #dde4e3;
	--linea-fuerte: #b9c9c7;
	--acento:       #057b7a;

	/* ── La neblina de las tarjetas de la Bimm App ──────────────
	   🚨 LA NIEBLA NO ES LA MISMA EN LOS DOS TEMAS, y darlo por hecho fue el
	   fallo. En oscuro, algo lejano se APAGA; en papel, se LAVA hacia el blanco.
	   La primera versión usaba los números del tema oscuro en los dos —velo de
	   tinta al 13 % y `brightness(0.74)`— y sobre papel eso es un wash negro
	   encima de una tarjeta blanca: Isaac lo describió exacto, «se ve negro y
	   parece mancha».

	   Aquí, entonces: el brillo SUBE un poco, el contraste baja bastante —que
	   es lo que hace que el texto se lea lejano— y el velo se queda en un 5 %,
	   un susurro de gris. Con más, vuelve la mancha. */
	--niebla-lavado:    saturate(0.30) brightness(1.04) contrast(0.84);
	--niebla-densidad:  5%;

	/* Los cuatro de la marca: los del filete y los de las manchas. No cambian
	   entre temas — sólo su opacidad. */
	--crema:    #fbefb7;
	--coral:    #ff3d3e;
	--turquesa: #52f5dc;
	--teal:     #07abaa;

	--grad-marca: linear-gradient(90deg, var(--crema) 0%, var(--coral) 33%,
	                              var(--turquesa) 67%, var(--teal) 100%);

	/* Opacidad de las manchas. En papel van suaves: tienen que sentirse como
	   tinta que traspasó la hoja, no como un fondo de color. */
	--mancha-teal:  0.18;
	--mancha-menta: 0.24;
	--mancha-crema: 0.42;

	--cont-max:   1180px;
	--sec-pad-x:  clamp(1.5rem, 5vw, 4rem);
	--sec-pad-y:  clamp(4rem, 8vw, 7rem);

	--radio-sm: 3px;
	--radio-md: 6px;

	/* Curvas. La de entrada es la de siempre; la de SALIDA es más corta a
	   propósito —un 65 %—: lo que se va tiene que sentirse resuelto, no
	   arrastrado. `--muelle` es la única con rebote, y se reserva para lo que
	   el cursor empuja. */
	--tr-rapida: 140ms cubic-bezier(0.32, 0.72, 0, 1);
	--tr-media:  220ms cubic-bezier(0.32, 0.72, 0, 1);
	--tr-lenta:  420ms cubic-bezier(0.32, 0.72, 0, 1);
	--tr-salida:  90ms cubic-bezier(0.4, 0, 1, 1);
	/* 🚨 LA DEL FOCO NO PUEDE SER `--tr-lenta`, aunque dure parecido. Esa curva
	   arranca disparada —a la cuarta parte del tiempo ya va por el 80% del
	   recorrido— y para un cambio de nitidez eso se lee como un CORTE, no como
	   un enfoque. Es lo que Isaac llamó «muy brusco». Ésta reparte el
	   movimiento por el medio, que es como enfoca una lente. */
	--tr-foco:  2400ms cubic-bezier(0.4, 0, 0.2, 1);
	--muelle:    520ms cubic-bezier(0.23, 1.12, 0.32, 1);
	/* La curva del morfeo de ancho de la pildora. Es la de cajon de Vaul e
	   Ionic: arranca decidida y frena largo, que es como se siente algo con
	   peso. Abrir dura mas que cerrar — abrir es el gesto que el usuario
	   pidio, cerrar es el sistema respondiendo. */
	--tr-pildora: 420ms cubic-bezier(0.32, 0.72, 0, 1);

	/* ── Liquid Glass ────────────────────────────────────────
	   Vidrio de verdad: lo que lo hace creerse no es la transparencia, son
	   las TRES capas juntas —el desenfoque de lo que hay detras, el brillo
	   especular del borde superior, y la sombra corta que lo separa del
	   fondo—. Con solo transparencia queda un plastico sucio.

	   Y necesita COLOR detras para refractar: por eso las superficies de
	   vidrio van sobre las manchas, nunca sobre papel liso.

	   🚨 La opacidad es ALTA (72 %) a proposito. Un vidrio bonito al 40 %
	   baja el contraste del texto por debajo de 4.5:1 en cuanto una mancha
	   pasa por detras, y el contraste no se negocia. El efecto lo da el
	   desenfoque, no la transparencia. */
	--vidrio:        rgba(255, 255, 255, 0.72);
	--vidrio-borde:  rgba(255, 255, 255, 0.65);
	--vidrio-brillo: rgba(255, 255, 255, 0.85);
	--vidrio-sombra: 0 8px 32px rgba(18, 32, 31, 0.10);
	--vidrio-blur:   blur(24px) saturate(180%);
	--radio-vidrio:  20px;

	--fuente-titulo: 'Space Grotesk', system-ui, sans-serif;
	--fuente-texto:  'Source Serif 4', Georgia, 'Times New Roman', serif;
	--fuente-logo:   'Bagel Fat One', var(--fuente-titulo);
}

/* ── Tema oscuro: la marca ──────────────────────────────────
   Contraste sobre #0b0f0f:
     tinta #ffffff ......... 18.9:1   AAA
     tinta-suave ........... 10.3:1   AA
     turquesa #52f5dc ...... 14.8:1   AA
   El fondo NO es negro puro: `#0b0f0f` lleva el mismo verde de la tinta del
   documento, y por eso las manchas se funden en él en vez de flotar encima. */

[data-tema='oscuro'] {
	--papel:        #0b0f0f;
	--papel-hondo:  #070a0a;
	--tinta:        #ffffff;
	--tinta-suave:  rgba(255, 255, 255, 0.70);
	--linea:        rgba(255, 255, 255, 0.10);
	--linea-fuerte: rgba(255, 255, 255, 0.22);
	--acento:       #52f5dc;

	/* La niebla en oscuro: aquí el velo es blanco —`--tinta` lo es— y lo que
	   aleja es APAGAR, no lavar. Ver la nota entera en el bloque de papel. */
	--niebla-lavado:    saturate(0.28) brightness(0.74) contrast(0.92);
	--niebla-densidad:  13%;

	/* En papel las manchas se leen por resta y aquí por suma: con la misma
	   opacidad, en negro no se verían. */
	--mancha-teal:  0.30;
	--mancha-menta: 0.26;
	--mancha-crema: 0.16;

	/* En oscuro el vidrio se tinta de la tinta del fondo, no de blanco: un
	   vidrio blanco translucido sobre negro se ve gris lechoso. El brillo
	   del borde sí es blanco — es el reflejo, y es lo que da el relieve. */
	--vidrio:        rgba(23, 32, 31, 0.66);
	--vidrio-borde:  rgba(255, 255, 255, 0.12);
	--vidrio-brillo: rgba(255, 255, 255, 0.22);
	--vidrio-sombra: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* Quien no ha elegido tema recibe el de su sistema. La preferencia guardada
   gana siempre, y la aplica el script del <head> antes del primer pintado. */
@media (prefers-color-scheme: dark) {
	:root:not([data-tema='claro']) {
		--papel:        #0b0f0f;
		--papel-hondo:  #070a0a;
		--tinta:        #ffffff;
		--tinta-suave:  rgba(255, 255, 255, 0.70);
		--linea:        rgba(255, 255, 255, 0.10);
		--linea-fuerte: rgba(255, 255, 255, 0.22);
		--acento:       #52f5dc;
		--niebla-lavado:    saturate(0.28) brightness(0.74) contrast(0.92);
		--niebla-densidad:  13%;
		--mancha-teal:  0.30;
		--mancha-menta: 0.26;
		--mancha-crema: 0.16;
		--vidrio:        rgba(23, 32, 31, 0.66);
		--vidrio-borde:  rgba(255, 255, 255, 0.12);
		--vidrio-brillo: rgba(255, 255, 255, 0.22);
		--vidrio-sombra: 0 8px 32px rgba(0, 0, 0, 0.45);
	}
}

/* ── La paleta de GeneratePress ──────────────────────────────
   GeneratePress pinta TODO —cabecera, cajas, widgets, pie, formularios,
   enlaces— con siete variables que declara en `:root`. Apuntarlas a las
   nuestras es lo que vuelve suyo nuestro tema, sin perseguir veinte
   selectores. Y como apuntan a variables, el conmutador de tema las arrastra
   también: no hay que repetir nada por tema.

   🚨 `:root:root` Y NO `:root`: GeneratePress imprime su `:root` en un
   `<style>` EN LÍNEA que va después de nuestras hojas en el `<head>`, y a
   igual especificidad gana el último. Duplicar el selector nos pone por
   encima (0,2,0 contra 0,1,0). Sin ese truco haría falta `!important` en cada
   declaración.

   🚨 Y ESTO NO SE VE EN LA VISTA LOCAL, porque ahí el tema padre no existe.
   La comprobación que vale es capturar la página SERVIDA. */

:root:root {
	--contrast:   var(--tinta);
	--contrast-2: var(--tinta-suave);
	--contrast-3: var(--linea-fuerte);
	--base:       var(--linea);
	--base-2:     var(--papel);
	--base-3:     var(--papel);
	--accent:     var(--acento);
}

/* ── Base ──────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

/* 🚨 LOS BORDES DEL TELÉFONO (2/oct/2026). Isaac: «en móvil, al cambiar de
   claro a oscuro se quedan los bordes blancos y tengo que recargar». Safari
   pinta sus barras, la zona del notch y el rebote del scroll con lo que
   encuentra en la RAÍZ, y la raíz no tenía fondo propio: heredaba el del
   <body> sólo al cargar. Con fondo y `color-scheme` en `html`, y el
   `theme-color` que mantiene `tema()` en bloques.js, el borde sigue al tema
   sin recargar. */
html {
	background: var(--papel);
	color-scheme: light;
}

[data-tema='oscuro'] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
	:root:not([data-tema='claro']) { color-scheme: dark; }
}

body {
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--fuente-texto);
	font-size: 17px;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	/* 🚨 EL FONDO DEL BODY NO SE ANIMA, y lo pide Safari. La barra de ARRIBA
	   del iPhone se tiñe con el fondo del <body>: con una transición, Safari
	   lo leía a mitad del fundido —todavía el color viejo— y la barra se
	   quedaba así hasta recargar. Dejarlo transparente fue peor: la barra se
	   quedó blanca SIEMPRE (2/oct/2026). El cambio de tema ya lo anima la onda
	   de la transición de vista; esto no hacía falta. */
	transition: color var(--tr-media);
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--fuente-titulo);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.028em;
	color: var(--tinta);
}

p { line-height: 1.65; }

a { color: var(--acento); text-decoration: none; }

/* El foco NUNCA se apaga: es la única pista de quien navega con teclado, y
   tiene que verse en los dos temas. Va con `outline` y no con `box-shadow`
   porque el outline no lo recorta un contenedor con overflow. */
:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection { background: var(--turquesa); color: #12201f; }

/* Las cifras SIEMPRE tabulares. Viene de los documentos y no es cosmética: sin
   ella, un número que pasa de 9 a 10 mueve toda la fila. */
.bm-num,
table td,
time { font-variant-numeric: tabular-nums; }

/* ── Correcciones a GeneratePress ─────────────────────────── */

/* Separa el contenido en cajas con sombra. Aquí el fondo es papel continuo: la
   sombra parte la página en rectángulos que no existen. */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content {
	box-shadow: none;
}

.grid-container { max-width: var(--cont-max); }

/* Nuestras páginas traen sus propias secciones a sangre: el relleno del padre
   las descuadra.

   ⚠ QUIEN SUELTA EL ANCHO DE VERDAD NO ES ESTA REGLA, es la de
   «EL CONTENIDO VA A SANGRE» en `bloques.css`, que toca los cuatro niveles del
   envoltorio de GeneratePress. Aquí sólo se quita el relleno. Se intentó
   arreglar la 404 desde aquí el 2/sep/2026 y quedó a medias: la caja
   desapareció pero el contenido no se centraba. Si algo sale descuadrado,
   mirar allá primero. */
.page .site-content,
.home .site-content,
.error404 .site-content,
.page .inside-article,
.home .inside-article,
.error404 .inside-article { padding: 0; }

input[type='text'],
input[type='email'],
input[type='url'],
input[type='search'],
input[type='tel'],
input[type='number'],
textarea,
select {
	background-color: transparent;
	color: var(--tinta);
	border: 1px solid var(--linea-fuerte);
	border-radius: var(--radio-sm);
	font-family: var(--fuente-texto);
	transition: border-color var(--tr-rapida);
}

input:focus, textarea:focus, select:focus { border-color: var(--acento); }
input::placeholder, textarea::placeholder { color: var(--tinta-suave); }

/* ── Acentos de marca ──────────────────────────────────────── */

/* El degradado recortado a la silueta de las letras. `color: transparent` va
   junto al `background-clip`: por separado, uno de los dos deja el texto
   invisible o el degradado en un rectángulo. */
.bm-grad {
	background: var(--grad-marca);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Bagel Fat One SÓLO aquí: es la tipografía del logotipo y en un párrafo es
   ilegible. */
.bm-logo {
	font-family: var(--fuente-logo);
	font-weight: 400;
	letter-spacing: 0;
}

/* ── Quien pide menos movimiento, recibe menos movimiento ─────
   No es «apagar animaciones»: es que nada se mueva y todo siga legible. Por
   eso `bloques.css` fuerza además el estado final de `.bm-up`, en vez de
   dejar el contenido en opacidad 0 para siempre. */
@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;
	}
}