/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — Sistema de diseño Tecnosol

   Este es EL archivo para retocar la estética de todo el sitio.
   Si cambiás un color, radio o espaciado acá, cambia en todas las páginas.

   Hay DOS paletas con los mismos nombres de variables:
   1. Tecnosol (verdes + azul marino, del logo): todo el sitio.
   2. Biopiscinas (azules de piscina, de la landing): solo en Hogar y sus
      subpáginas (clase "pagina-hogar" en el <body>). Decisión de Lucas, 2026-09-24.

   Importante: si cambiás un color de la paleta Tecnosol, cambialo también en
   theme.json (sección "palette") para que el editor de bloques ofrezca el mismo color.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
	/* ── 1. Paleta Tecnosol ─────────────────────────────────────────────────
	   Base: los dos colores del logo, azul petróleo #27758D y verde #74B887. */
	--abyss:     #0B2230;   /* azul marino: fondo de secciones oscuras */
	--abyss-2:   #0F2E3E;
	--deep:      #123A4C;
	--deep-2:    #1E5E72;
	--brand:     #27758D;   /* petróleo del logo — etiquetas y acentos (5.2:1 sobre blanco) */
	--brand-600: #3A7F55;   /* verde de los botones llenos (4.8:1 con blanco) */
	--brand-700: #2F6B47;   /* verde al pasar el mouse / enlaces */
	--aqua:      #74B887;   /* verde del logo — acento sobre fondos oscuros */
	--aqua-soft: #A9D8B6;

	/* Palabra resaltada en serif dentro de los títulos */
	--em:        #326E4A;   /* sobre fondo claro */
	--em-dark:   #A9D8B6;   /* sobre fondo oscuro */

	/* Mismos colores en formato "r, g, b" para usarlos con transparencia */
	--brand-600-rgb: 58, 127, 85;    /* sombras de los botones llenos */
	--halo-1: rgba(39,117,141,.30);  /* halo de las secciones oscuras (petróleo) */
	--halo-2: rgba(116,184,135,.16); /* halo de las secciones oscuras (verde) */
	--aqua-rgb:      116, 184, 135;

	/* Neutros (con un toque verde) */
	--paper:     #FFFFFF;
	--mist:      #F3F7F4;   /* fondo de secciones claras alternas */
	--mist-2:    #E4EFE8;
	--ink:       #0C1F29;   /* títulos */
	--ink-2:     #34505C;   /* cuerpo de texto */
	--ink-3:     #5C7780;   /* texto secundario (4.8:1 sobre blanco) */
	--line:      #E0E9E4;
	--line-2:    #C9D9D0;
	--pie:       #081A25;   /* fondo del pie del sitio (un tono más oscuro que --abyss) */

	/* Semánticos */
	--ok:        #12996E;
	--warn:      #B5701A;
	--danger:    #C6453F;

	/* Tipografías */
	--font-sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-serif: 'Instrument Serif', Georgia, serif;

	/* Radios */
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-xl: 34px;
	--r-full: 999px;

	/* Sombras — suaves y del tono del azul marino, nunca gris neutro */
	--sh-sm: 0 1px 2px rgba(11,34,48,.06), 0 2px 8px rgba(11,34,48,.04);
	--sh-md: 0 2px 4px rgba(11,34,48,.05), 0 12px 28px rgba(11,34,48,.07);
	--sh-lg: 0 4px 8px rgba(11,34,48,.06), 0 24px 60px rgba(11,34,48,.12);
	--sh-xl: 0 30px 90px rgba(8,26,37,.24);

	/* Ritmo vertical y anchos */
	--pad-section: clamp(5.5rem, 11vw, 10rem);
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--maxw: 1240px;
	--maxw-narrow: 780px;

	/* Movimiento */
	--e-out:  cubic-bezier(.22,.61,.36,1);
	--e-soft: cubic-bezier(.4,0,.2,1);
}

/* ── 2. Paleta Biopiscinas: solo Hogar (idéntica a la landing) ───────────── */
.pagina-hogar {
	--abyss:     #04161F;
	--abyss-2:   #072230;
	--deep:      #073448;
	--deep-2:    #0A4A66;
	--brand:     #0E86B9;
	--brand-600: #0A6D97;
	--brand-700: #085B7F;
	--aqua:      #52C7EB;
	--aqua-soft: #9EE0F5;

	--em:        #0E86B9;
	--em-dark:   #9EE0F5;

	--brand-600-rgb: 10, 109, 151;
	--halo-1: rgba(14,134,185,.20);
	--halo-2: rgba(82,199,235,.13);
	--aqua-rgb:      82, 199, 235;

	--mist:      #F4FAFD;
	--mist-2:    #E7F4FA;
	--ink:       #0A1E27;
	--ink-2:     #33505E;
	--ink-3:     #5E7A8A;
	--line:      #E2ECF2;
	--line-2:    #CBDDE7;

	--sh-sm: 0 1px 2px rgba(7,52,72,.06), 0 2px 8px rgba(7,52,72,.04);
	--sh-md: 0 2px 4px rgba(7,52,72,.05), 0 12px 28px rgba(7,52,72,.07);
	--sh-lg: 0 4px 8px rgba(7,52,72,.06), 0 24px 60px rgba(7,52,72,.12);
	--sh-xl: 0 30px 90px rgba(4,22,31,.24);
}

/* ── 3. Acento Biopiscinas dentro de una página Tecnosol ─────────────────────
   Solo cambia los acentos claros sobre fondo oscuro (etiqueta y palabra en serif)
   al celeste de la landing; el fondo sigue siendo el de Tecnosol.
   Uso: recuadro de las fichas de Piscinas que lleva a la landing (pedido de Lucas). */
.acento-biopiscinas {
	--aqua:      #52C7EB;
	--aqua-soft: #9EE0F5;
	--em-dark:   #9EE0F5;
}