/*
Theme Name:   Creaciones Arcoíris
Theme URI:    https://creacionesarcoiris.es
Description:  Child theme de Hello Elementor para Creaciones Arcoíris. Tokens de diseño fluidos (clamp/calc), WPO y kit de Elementor precargado.
Author:       DonDigital
Author URI:   https://dondigital.es
Template:     hello-elementor
Version:      1.0.2
Requires PHP: 8.0
Text Domain:  creaciones-arcoiris
*/

/* ==========================================================================
   1. TOKENS DE DISEÑO
   Sacados del diseño (frame de escritorio 1440 px).
   Escala fluida entre 390 px (móvil) y 1440 px (escritorio):
   clamp(mínimo, calc(base + pendiente·vw), máximo)
   ========================================================================== */
:root {
	/* --- Colores (sRGB exactos del .ai) --- */
	--c-marron: #5E451F;        /* Texto principal, bordes, botón sólido */
	--c-marron-rojizo: #5A332D; /* Títulos de acento (FAQ, «Para regalar») */
	--c-marron-gris: #443C2C;   /* Textos legales / copyright */
	--c-naranja: #E69C69;       /* Cabecera y barra final */
	--c-crema: #F6EDC1;         /* Hero home, CTA final, chips de producto */
	--c-azul: #A9C0D3;          /* Bandas de envío, bloque «Hecho en Menorca» */
	--c-azul-claro: #D9E0E6;    /* Hero categoría, buscador, filtros */
	--c-rosa: #F3C8D2;          /* Banda «Aquí las cosas…», formulario contacto */
	--c-rosa-intenso: #DBB1B5;  /* Botón favoritos (corazón) */
	--c-salvia: #C2C4A0;        /* «No hay dos iguales», «¿Tienes alguna otra pregunta?» */
	--c-arena: #F0E3D4;         /* Pasos 01–04, bloque de iconos ficha */
	--c-blanco: #FFFFFF;
	--c-placeholder: #E6E6E6;   /* Fondo mientras carga la imagen */

	/* --- Tipografías --- */
	--ff-titulos: "Lastik", Georgia, "Times New Roman", serif;
	--ff-texto: "Acumin Variable Concept", "acumin-variable", "Acumin Pro", "Helvetica Neue", Arial, sans-serif;
	--ff-simbolos: "Inter Tight", var(--ff-texto);

	--fw-light: 300;
	--fw-regular: 400;
	--fw-semibold: 600;

	/* --- Tamaños de letra --- */
	--fs-display: clamp(2.25rem, calc(1.8089rem + 1.8095vw), 3.4375rem); /* 36 → 55  · «¿Ya has encontrado tu pieza favorita?» */
	--fs-h1:      clamp(2.125rem, calc(1.7536rem + 1.5238vw), 3.125rem); /* 34 → 50  · Título hero */
	--fs-h2:      clamp(1.75rem, calc(1.4714rem + 1.1429vw), 2.5rem);    /* 28 → 40  · Títulos de sección */
	--fs-h3:      clamp(1.5rem, calc(1.3607rem + 0.5714vw), 1.875rem);   /* 24 → 30  · Nombre de producto (ficha) */
	--fs-xl:      clamp(1.25rem, calc(1.1339rem + 0.4762vw), 1.5625rem); /* 20 → 25  · Botones, FAQ, bandas, subtítulos */
	--fs-lead:    clamp(1.125rem, calc(1.0089rem + 0.4762vw), 1.4375rem);/* 18 → 23  · Entradilla del hero */
	--fs-l:       clamp(1.0625rem, calc(0.9929rem + 0.2857vw), 1.25rem); /* 17 → 20  · Texto general, menú */
	--fs-m:       clamp(1rem, calc(0.9536rem + 0.1905vw), 1.125rem);     /* 16 → 18  · Pasos 01–04 */
	--fs-s:       clamp(0.9375rem, calc(0.9143rem + 0.0952vw), 1rem);    /* 15 → 16  · Opciones de producto */
	--fs-xs:      clamp(0.8125rem, calc(0.7661rem + 0.1905vw), 0.9375rem);/* 13 → 15 · Reseñas, legales */

	--lh-titulos: 0.9;
	--lh-texto: 1.15;

	/* --- Espaciados --- */
	--sp-xs: clamp(0.5rem, calc(0.4536rem + 0.1905vw), 0.625rem);  /* 8 → 10  · Margen de página y gap entre tarjetas */
	--sp-s:  clamp(1rem, calc(0.9071rem + 0.3810vw), 1.25rem);     /* 16 → 20 · Padding interior de tarjeta */
	--sp-m:  clamp(1.75rem, calc(1.4714rem + 1.1429vw), 2.5rem);   /* 28 → 40 · Separación título / contenido */
	--sp-l:  clamp(2.5rem, calc(1.9429rem + 2.2857vw), 4rem);      /* 40 → 64 · Separación entre secciones */
	--sp-xl: clamp(2rem, calc(1.1179rem + 3.6190vw), 4.375rem);    /* 32 → 70 · Padding superior del hero */

	--gutter: var(--sp-xs);
	--gap: var(--sp-xs);
	--max-width: 1440px;

	/* --- Formas --- */
	--radius-card: 15px;  /* Tarjetas y bloques grandes */
	--radius-band: 10px;  /* Bandas finas (envíos) y barra final */
	--radius-pill: 999px; /* Botones y campos */
	--border: 1px solid var(--c-marron);
	--border-fino: 0.75px solid var(--c-marron);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
	background: var(--c-blanco);
	color: var(--c-marron);
	font-family: var(--ff-texto);
	font-weight: var(--fw-light);
	font-size: var(--fs-l);
	line-height: var(--lh-texto);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	margin-block: 0;
	color: var(--c-marron);
	font-weight: var(--fw-regular);
}

h1, h2 {
	font-family: var(--ff-titulos);
	line-height: var(--lh-titulos);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-family: var(--ff-texto); font-weight: var(--fw-light); line-height: 1.1; }
h4, h5, h6 { font-size: var(--fs-xl); font-family: var(--ff-texto); font-weight: var(--fw-light); line-height: 1.15; }

a { color: inherit; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }

img { height: auto; }

::selection { background: var(--c-crema); color: var(--c-marron); }

:focus-visible { outline: 2px solid var(--c-marron); outline-offset: 2px; }

/* ==========================================================================
   3. CLASES DE APOYO PARA ELEMENTOR
   Se escriben en Avanzado → Clases CSS del contenedor o widget.
   ========================================================================== */

/* Contenedor de página: margen lateral de 10 px como en el diseño */
.ca-page { padding-inline: var(--gutter); gap: var(--gap); }

/* Tarjeta: fondo redondeado con padding interior */
.ca-card { border-radius: var(--radius-card); padding: var(--sp-s); overflow: hidden; }

/* Banda fina de envíos */
.ca-band { border-radius: var(--radius-band); padding: 0.4em var(--sp-s); text-align: center; font-size: var(--fs-xl); }

/* Imagen que rellena su tarjeta */
.ca-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); background: var(--c-placeholder); }

/* Botón píldora con borde (estilo por defecto del diseño) */
.ca-btn .elementor-button,
.ca-btn.elementor-button {
	background: transparent;
	color: var(--c-marron);
	border: var(--border);
	border-radius: var(--radius-pill);
	font-family: var(--ff-texto);
	font-weight: var(--fw-light);
	font-size: var(--fs-xl);
	line-height: 1;
	padding: 0.3em 0.5em;
	transition: background-color .2s ease, color .2s ease;
}
.ca-btn .elementor-button:hover,
.ca-btn.elementor-button:hover { background: var(--c-marron); color: var(--c-crema); }

/* Botón sólido (Contacto en cabecera) */
.ca-btn--solid .elementor-button { background: var(--c-marron); color: var(--c-crema); }
.ca-btn--solid .elementor-button:hover { background: transparent; color: var(--c-marron); }

/* Chip de producto (Ver producto / Añadir a la cesta) */
.ca-chip .elementor-button,
.ca-chip .button {
	background: var(--c-crema);
	color: var(--c-marron);
	border: 0;
	border-radius: var(--radius-pill);
	font-size: var(--fs-l);
	font-weight: var(--fw-light);
	padding: 0.25em 0.5em;
}

/* Texto en mayúsculas («HECHO EN MENORCA», «AQUÍ LAS COSAS…») */
.ca-caps { text-transform: uppercase; }

/* Línea divisoria fina (pasos, FAQ, pie) */
.ca-divider { border-top: var(--border-fino); }

/* ==========================================================================
   4. WOOCOMMERCE · BASE
   (se amplía cuando maquetemos ficha, categoría, carrito y checkout)
   ========================================================================== */
.woocommerce .price,
.woocommerce .amount { color: var(--c-marron); font-weight: var(--fw-light); }

.woocommerce input[type="radio"] { accent-color: var(--c-marron); }

/* ==========================================================================
   5. ACCESIBILIDAD Y MOVIMIENTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}