/*
 * Tokens del nuevo diseño (docs/plan-rediseno-publico.md, fase 2).
 * ÚNICO sitio donde viven colores, tipografías y medidas del tema v2: el resto
 * de CSS v2 (app.css, portada.css, galeria.css) solo usa estas variables.
 *
 * Colores: sacados de los rellenos del PDF del diseñador
 * (documentos/jose olivares web BASE -arte final v1.pdf); los fondos, de sus
 * anotaciones posteriores (color y opacidad sobre blanco).
 *
 * TIPOGRAFÍAS:
 *   - Texto e interfaz: MONTSERRAT (decisión del diseñador del 26 de octubre de
 *     2026, en lugar de Gotham). Licencia libre SIL OFL (fonts/Montserrat-OFL.txt),
 *     servida desde aquí y no desde Google Fonts. Es la versión variable del juego
 *     latino de @fontsource-variable/montserrat 5.2.8: un archivo vale para todos
 *     los pesos.
 *   - Titulares: PLAYFAIR DISPLAY Regular, con su cursiva para la palabra
 *     destacada («Especial *bodas*»). PRUEBA propuesta por el diseñador el 27 de
 *     octubre de 2026 en lugar de Miller Banner, que tiene licencia de pago.
 *     Licencia libre SIL OFL (fonts/PlayfairDisplay-OFL.txt), servida desde aquí.
 *     Son los TTF estáticos de Google Fonts pasados a woff2 SIN recortar: el
 *     nombre «Playfair Display» está reservado y un subconjunto contaría como
 *     versión modificada. Solo se usa el peso 400.
 *     Para volver a Miller Banner: descomentar sus @font-face (con sus woff2 en
 *     fonts/) y ponerla primera en --jo-fuente-titulos.
 */

@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-latin-wght-italic.woff2') format('woff2-variations'), url('../fonts/montserrat-latin-wght-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }

@font-face { font-family: 'Playfair Display'; src: url('../fonts/PlayfairDisplay-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/PlayfairDisplay-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/*
@font-face { font-family: 'Miller Banner'; src: url('../fonts/MillerBanner-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Miller Banner'; src: url('../fonts/MillerBanner-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
*/

:root {
	/* -------------------------------------------------- Color */
	--jo-fondo: #f2eeea;            /* crema de toda la página: #c5b7a4 al 23 % sobre blanco */
	--jo-blanco: #ffffff;           /* cabecera, paneles de producto */
	--jo-panel: #e5dfd6;            /* pie, paneles suaves: #c5b7a4 al 45 % sobre blanco */
	--jo-panel-medio: #dad4cd;      /* banners «Inspiración» */
	--jo-panel-oscuro: #ccc5c0;     /* franja de patrocinadores, newsletter: #a2968d al 55 % sobre blanco */
	--jo-panel-arena: #bbb2a4;      /* paneles de los banners de «Inspiración» */
	--jo-rojo: #a30000;             /* panel «Sevilla.» de «Inspiración» */
	--jo-linea: #c9c2bd;            /* separadores */

	--jo-texto: #1a1a1a;
	--jo-texto-suave: #79726d;      /* titulares serif grandes («Nuestras bodas») */
	--jo-texto-tenue: #a39383;      /* pies de tarjeta, textos secundarios */
	--jo-texto-serif: #847273;      /* «Inspiración Royal.» */

	--jo-enlace: #385f94;           /* era «Web corporativa/Blog» del menú; hoy, la página de mantenimiento (errors/503) */
	--jo-azul: #4381b5;             /* estrellas y sello de reseñas */
	--jo-acento: #d77a5c;           /* sello «Novedad», botón del configurador */
	--jo-alerta: #ef4444;           /* contador del carrito */

	/* Círculos de la barra lateral */
	--jo-circulo: #d4c9bb;           /* categorías: #c5b7a4 al 75 % (un 25 % más claro; diseñador, 27-10-2026) */
	--jo-circulo-destacados: #af9150;
	--jo-circulo-promociones: #d88782;
	--jo-circulo-configurador: #9795a8;
	--jo-circulo-venta: #75695c;
	--jo-circulo-feria: #a30000;

	/* Portada (revisión del 23 de octubre de 2026) */
	--jo-ventaja-salvia: #65897c;   /* círculos de «Ventajas», en el orden del diseño */
	--jo-ventaja-pizarra: #627694;
	--jo-ventaja-mostaza: #b09252;
	--jo-ventaja-teja: #e6866d;
	--jo-ventaja-rosa: #d88782;
	--jo-ventaja-malva: #9d6889;
	--jo-panel-newsletter: #b7ada6; /* recuadro «Suscríbete a nuestra newsletter» */
	--jo-panel-configurador: #e0d7cd; /* panel de «Configura tu evento» */
	--jo-panel-resenas: #d4cfca;    /* fondo de «Tu opinión cuenta» */
	--jo-tarjeta-resena: #e0ddda;   /* cada reseña */
	--jo-avatar-resena: #a9a19b;    /* círculo con la inicial */

	/* Web corporativa («jose olivares WEB CORPORATIVA.pdf», 28-10-2026) */
	--jo-circulo-historia: #c2b6aa; /* años de la línea del tiempo */
	--jo-linea-historia: #634748;   /* línea que los une */
	--jo-circulo-valor: #d4cfca;    /* «Nuestros valores», cara delantera */

	/* Blog («jose olivares blog.pdf», 30-10-2026) */
	--jo-blog-leer: #3e6b5b;        /* «Leer más» de las tarjetas */

	/* Configurador (págs. 18-19): cada paso tiene su color */
	--jo-paso-1: #dc9f40;           /* mostaza */
	--jo-paso-2: #709286;           /* salvia */
	--jo-paso-3: #b4666c;           /* rosa viejo */
	--jo-paso-4: #d77a5c;           /* teja, el mismo que --jo-acento */
	--jo-paso-5: #4381b5;           /* azul, el mismo que --jo-azul */
	--jo-paso-6: #1a1a1a;
	--jo-paso-hecho: #a2978e;       /* pasos ya completados */
	--jo-panel-azul: #d6deee;       /* paneles de productos del paso 5 */
	--jo-exito: #1f9d63;            /* total estimado del paso 6 */
	--jo-whatsapp: #25d366;         /* botón «Enviar copia por WhatsApp» */

	/* -------------------------------------------------- Tipografía */
	--jo-fuente-texto: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--jo-fuente-titulos: 'Playfair Display', Georgia, 'Times New Roman', serif;

	--jo-texto-xs: 11px;
	--jo-texto-s: 13px;
	--jo-texto-m: 15px;
	--jo-texto-l: 17px;
	--jo-titulo-s: 24px;
	--jo-titulo-m: 32px;
	--jo-titulo-l: 44px;
	--jo-titulo-xl: 64px;

	/* -------------------------------------------------- Medidas */
	--jo-ancho: 1200px;             /* ancho máximo del contenido */
	--jo-ancho-barra: 210px;        /* barra lateral de categorías */
	--jo-margen: 16px;              /* margen lateral en móvil */
	--jo-radio: 2px;                /* el diseño es casi de esquinas rectas */
	--jo-alto-cabecera: 64px;
	--jo-hueco-seccion: 48px;
}

@media (min-width: 768px) {
	:root {
		--jo-margen: 24px;
		--jo-alto-cabecera: 72px;
		--jo-hueco-seccion: 72px;
	}
}

@media (min-width: 1200px) {
	:root {
		--jo-margen: 32px;
		--jo-alto-cabecera: 80px;       /* 88 px antes: el diseñador pidió una cabecera más estrecha (27-10-2026) */
		--jo-hueco-seccion: 96px;
	}
}