/*
 * base.css — Reset, tokens, tipografia y accesibilidad.
 *
 * Base visual global. El verde NICE es color de marca: CTA, estados
 * interactivos y pequeños detalles. No cubre la pagina (Maestro §1, §20:
 * ningun elemento visual resta protagonismo al producto).
 *
 * 19/09/2026 — direccion visual «obrador calido». Los neutros pasan de frios a
 * calidos y entra una familia caramelo de acento. El motivo no es decorativo: las
 * seis fotografias de producto son caramelo, dorado y madera, y la interfaz que las
 * rodeaba era gris. El contenedor recoge ahora la temperatura del contenido.
 * El verde NICE NO cambia: sigue siendo marca y conversion, no ambiente.
 *
 * PENDIENTE — logotipo, tipografia corporativa y packaging siguen sin aportarse
 * (docs/02-diseno/13-identidad-y-assets.md, apartado 4.1). El tema no dibuja ni
 * genera identidad: la existente se respeta (Maestro §1, §35, §38.15).
 */

:root {

	/*
	 * IDENTIDAD NICE — colores de marca.
	 * Verde principal extraido del logotipo oficial. Uso: marca, CTA, estados
	 * interactivos, pequeños detalles y elementos destacados. Nunca como fondo
	 * general de la pagina.
	 */
	--dcn-verde: #008125;
	--dcn-verde-oscuro: #00611c;
	/* Verde de ambiente. Desde el 19/09/2026 cubre la seccion Presencia entera, no
	   solo paneles sueltos, y por eso pierde algo de frialdad. */
	--dcn-verde-tenue: #edf4ea;

	/*
	 * VERDE PROFUNDO — 19/09/2026. El verde como SUPERFICIE, no como acento.
	 * Cubre la franja de beneficios, el CTA comercial y el pie. Es lo que da
	 * autoridad al conjunto sin tocar el verde de marca.
	 *
	 * NO sustituye a --dcn-verde: ese sigue siendo la identidad, los botones y la
	 * conversion. Este es fondo, y nunca se usa para texto ni para un CTA.
	 *
	 * Blanco sobre el: 12,3:1. El foco azul daria 1,4:1 y seria invisible, asi que
	 * cada superficie profunda redefine su propio :focus-visible en blanco.
	 */
	--dcn-verde-profundo: #103d18;
	/* Franja de cierre del pie: un escalon mas oscuro, para rematar sin otra linea. */
	--dcn-verde-profundo-oscuro: #0c2f12;
	/* Texto secundario sobre verde profundo. 8,9:1: legible sin competir con el blanco. */
	--dcn-verde-claro-texto: #cfe0cb;
	/* Rotulos de seccion sobre verde profundo. 6,5:1. */
	--dcn-verde-claro-rotulo: #a8c9a2;
	--dcn-negro: #000000;
	--dcn-blanco: #ffffff;

	/*
	 * CARAMELO — acento calido, subordinado al verde.
	 * No es un segundo color corporativo y no debe presentarse como tal: su origen
	 * son los propios productos fotografiados. Se usa en detalles informativos
	 * —peso, rotulos, filetes—, nunca en CTA ni en superficies grandes.
	 *
	 * REGLA DE CONTRASTE, y no es opcional:
	 *   --dcn-caramelo         3,7:1 sobre blanco. SOLO bordes, filetes y elementos
	 *                          no textuales (WCAG 1.4.11 pide >=3:1). NUNCA texto pequeño.
	 *   --dcn-caramelo-oscuro  6,2:1 sobre blanco. Es el unico valido para texto pequeño.
	 */
	--dcn-caramelo: #b8752a;
	--dcn-caramelo-oscuro: #8a5418;
	--dcn-caramelo-tenue: #fdf3e4;

	/*
	 * NEUTROS DE INTERFAZ — subordinados a la identidad.
	 * No son colores corporativos de NICE y no deben presentarse como tales.
	 */
	--dcn-color-fondo: var(--dcn-blanco);
	/* Crema. Sustituye a un gris frio que sobre blanco daba 1,09:1 y no llegaba a
	   leerse como cambio de seccion. El salto de luminancia sigue siendo pequeño
	   —1,14:1—, pero el de TONO si se percibe: es lo que separa Hero, Historia y pie
	   del resto de la pagina. Texto #1a1a1a sobre el: 15,2:1. */
	--dcn-color-fondo-alt: #f7efe1;
	/* Superficie calida de marcos y area fotografica. */
	--dcn-color-superficie: #fdfaf4;
	--dcn-color-texto: #1a1a1a;
	--dcn-color-texto-suave: #595959;
	--dcn-color-borde: #e3dbcd;
	/* Borde de componentes interactivos: WCAG 1.4.11 exige >=3:1. Este da 17,4:1
	   sobre blanco, frente a 1,45:1 de --dcn-color-borde, que queda solo para
	   separadores decorativos (Maestro §26). */
	--dcn-color-borde-interactivo: #1a1a1a;
	/* Variante discreta del anterior para el CTA secundario: 3,47:1 sobre blanco. */
	--dcn-color-borde-suave: #8a8a85;

	/*
	 * Acento = verde NICE. Blanco sobre el: 5,04:1. El verde sobre blanco: 5,04:1.
	 *
	 * CUIDADO sobre crema: --dcn-verde sobre --dcn-color-fondo-alt da ~4,4:1 y se queda
	 * por debajo del minimo AA para texto pequeño. En esas superficies el texto verde
	 * pequeño usa --dcn-verde-oscuro, que da ~6,7:1. Ver .dcn-hero__etiqueta.
	 */
	--dcn-color-acento: var(--dcn-verde);
	--dcn-color-acento-hover: var(--dcn-verde-oscuro);
	--dcn-color-acento-texto: var(--dcn-blanco);

	/* Marcadores de desarrollo. No forman parte de la identidad. */
	--dcn-color-aviso-fondo: #fdf6e3;
	--dcn-color-aviso-borde: #8a6400;
	--dcn-color-aviso-texto: #4a3806;

	/* Foco. Deliberadamente ajeno a la paleta de marca para que nunca se confunda
	   con un estado decorativo. 5,13:1 sobre blanco (Maestro §26). */
	--dcn-color-foco: #0b5fff;

	/*
	 * Tipografia — pila del sistema, sin fuentes externas (Maestro §27).
	 * Sans-serif contemporanea, muy legible y de coste cero en red. La tipografia
	 * corporativa de NICE sigue PENDIENTE y su licencia web debe verificarse antes
	 * de usarla (docs/02-diseno/13, apartado 4.1).
	 */
	--dcn-fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/*
	 * Pila SERIF DEL SISTEMA — 19/09/2026. Solo para titulares editoriales grandes:
	 * H1 y titulos de seccion. Es lo que devuelve el caracter de la referencia
	 * original, que usaba serif en los titulares.
	 *
	 * NO se descarga nada: ni Google Fonts, ni @font-face, ni ninguna peticion de red
	 * (Maestro §27). Son fuentes que el dispositivo ya tiene.
	 *
	 * Y NO es la tipografia corporativa de NICE: esa sigue PENDIENTE y su licencia web
	 * sin verificar (13 §4.1, bloqueo B3). Esto es una decision de diseño del tema,
	 * reversible cambiando una linea, y no se presenta como identidad de marca.
	 *
	 * La interfaz —botones, navegacion, rotulos, datos y texto corrido— permanece en
	 * la pila sans: mezclar serif en cuerpos pequeños perjudicaria la lectura.
	 */
	--dcn-fuente-titulo: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
	--dcn-tamano-base: 1rem;
	--dcn-interlineado: 1.6;

	/* Espaciado y medidas */
	--dcn-espacio-xs: 0.5rem;
	--dcn-espacio-s: 1rem;
	--dcn-espacio-m: 1.5rem;
	--dcn-espacio-l: 2.5rem;
	--dcn-espacio-xl: 4rem;
	--dcn-ancho-contenedor: 72rem;
	--dcn-ancho-texto: 42rem;
	/* Lado del circulo flotante de WhatsApp, la variante mayor del componente: 56px
	   por debajo de 64em. Desde 64em pasa a pildora, mas baja que este valor, de modo
	   que 56px sigue siendo una reserva conservadora del hueco inferior del pie. */
	--dcn-alto-flotante: 3.5rem;
	--dcn-radio: 4px;
	--dcn-radio-m: 8px;
	--dcn-radio-l: 14px;

	/* Microinteracciones. El bloque prefers-reduced-motion del final las anula. */
	--dcn-transicion: 180ms ease;
}

/* Reset minimo */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--dcn-color-fondo);
	color: var(--dcn-color-texto);
	font-family: var(--dcn-fuente);
	font-size: var(--dcn-tamano-base);
	line-height: var(--dcn-interlineado);
	-webkit-font-smoothing: antialiased;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

h1,
h2,
h3 {
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 var(--dcn-espacio-s);
	/* Reparte las lineas del titular en navegadores que lo soportan; se ignora
	   en el resto sin consecuencias. */
	text-wrap: balance;
}

p,
ul,
ol,
address {
	margin: 0 0 var(--dcn-espacio-s);
}

address {
	font-style: normal;
}

ul {
	padding-left: 1.25rem;
}

a {
	color: inherit;
}

/* Accesibilidad (Maestro §26) */

/* Foco siempre visible, no dependiente unicamente del color */
:focus-visible {
	outline: 3px solid var(--dcn-color-foco);
	outline-offset: 2px;
}

.dcn-salto-contenido {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--dcn-espacio-xs) var(--dcn-espacio-s);
	background: var(--dcn-color-acento);
	color: var(--dcn-color-acento-texto);
	text-decoration: none;
}

.dcn-salto-contenido:focus {
	left: 0;
}

.dcn-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Maestro §21 y §38.25: se respeta la preferencia del sistema */
@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;
		scroll-behavior: auto !important;
	}
}