/* ============================================================
   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;

	/* 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);
	--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;

	/* 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;
		--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; }

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 cambio de tema se anima, pero SÓLO el color: animar más produce un
	   barrido raro en toda la página. */
	transition: background-color var(--tr-media), 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. */
.page .site-content,
.home .site-content,
.page .inside-article,
.home .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;
	}
}