/* =============================================================
   Excellent — Design Tokens (light / editorial)
   Base blanca, tipografía bold uppercase, fotografía protagonista.
   ============================================================= */
/* Bricks (tema padre) aplica html{font-size:62.5%} (=10px), que encogía todo.
   Fijamos la base tipográfica del sitio. 109.375% = 17.5px (17.5/16). Toda la escala rem parte de aquí. */
html { font-size: 109.375% !important; }

:root {
	/* --- Colores --- */
	--c-bg:        #ffffff;  /* fondo principal */
	--c-soft:      #f5f4f1;  /* secciones alternas */
	--c-ink:       #141414;  /* titulares y texto fuerte */
	--c-body:      #6f6f6f;  /* texto secundario */
	--c-muted:     #9a9a9a;  /* texto terciario */
	--c-line:      #e7e5e1;  /* bordes sutiles */
	--c-dark:      #141414;  /* footer / bloques oscuros */
	--c-dark-2:    #1d1d1d;
	--c-gold:      #a9843f;  /* acento discreto (del logo) */
	--c-gold-soft: #f0e7d6;  /* fondo suave del acento (pastillas, resaltados) */
	--c-white:     #ffffff;
	--c-sale:      #c0392b;  /* etiqueta rebaja */

	/* --- Estados (pastillas de pedido, avisos) --- */
	--c-ok:        #2f6f4e;  /* completado / entregado */
	--c-ok-soft:   #e6f0ea;
	--c-wait:      #8a6d1f;  /* en proceso / pendiente de pago */
	--c-wait-soft: #f7f0dc;
	--c-off:       #6f6f6f;  /* cancelado / reembolsado */
	--c-off-soft:  #f0efec;
	--c-err-soft:  #fbeae8;  /* fallido (texto usa --c-sale) */

	/* --- Tipografía --- */
	--font-display: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* titulares */
	--font-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* === Escala tipográfica modular ===
	   Base 16px · ratio ≈ 1.25 (Tercera Mayor). Todo tamaño de texto sale de aquí. */

	/* Texto de interfaz / cuerpo */
	--fs-2xs:  0.6875rem;  /* 11 — micro: badges, etiqueta de marca */
	--fs-xs:   0.75rem;    /* 12 — etiquetas, eyebrows, captions */
	--fs-sm:   0.875rem;   /* 14 — navegación, botones, texto secundario */
	--fs-base: 1rem;       /* 16 — cuerpo base */
	--fs-md:   1.125rem;   /* 18 — párrafo destacado (lead) */

	/* Encabezados (semánticos H1–H6) */
	--fs-h6:   1.125rem;   /* 18 */
	--fs-h5:   1.25rem;    /* 20 */
	--fs-h4:   1.5rem;     /* 24 */
	--fs-h3:   1.875rem;   /* 30 */
	--fs-h2:   2.25rem;    /* 36 */
	--fs-h1:   2.75rem;    /* 44 */
	--fs-display: clamp(2.5rem, 4.5vw, 3.75rem); /* 40→60 — hero */

	/* Alias de compatibilidad (mapeados a la escala) */
	--fs-lg:   var(--fs-h4);   /* 24 */
	--fs-xl:   var(--fs-h3);   /* 30 */
	--fs-2xl:  var(--fs-h2);   /* 36 */
	--fs-hero: var(--fs-display);

	--tracking-wide: 0.14em;
	--tracking-mid:  0.06em;

	/* --- Espaciado --- */
	--space-05: 0.25rem;
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4.5rem;
	--space-7: 6.5rem;

	/* === Layout: los tres que gobiernan TODO el espaciado ===
	   Antes no existían: el margen lateral estaba escrito a mano en cuatro
	   reglas distintas y el vertical era un 50px fijo igual para un teléfono
	   que para un monitor. Cualquier vista nueva debe salir de aquí. */

	/* Margen lateral. Único en todo el proyecto: nunca volver a escribir
	   `clamp(...)` suelto en un padding-inline. */
	--gutter: clamp(1.25rem, 5vw, 3rem);      /* 21px → 52.5px */

	/* Aire vertical entre secciones. Fluido: en móvil sobraba. */
	--section-y: clamp(2.5rem, 6vw, 5rem);    /* 44px → 87.5px */

	/* Ritmo entre elementos dentro de un bloque (título ↔ texto ↔ acción). */
	--flow: clamp(1rem, 2vw, 1.5rem);         /* 17.5px → 26px */

	/* --- Tokens semánticos (por componente) --- */
	--product-card-gap: 3px;       /* separación entre marca / nombre / precio en la tarjeta */
	--product-carousel-gap: 16px;  /* separación entre productos en el carrusel/grilla */
	--carousel-card-w: clamp(220px, 24vw, 300px); /* ancho de tarjeta en el carrusel continuo */
	--carousel-duration: 45s;      /* velocidad del marquee (menor = más rápido) */

	/* --- Hero (carrusel de inicio) --- */
	--hero-text-indent: 40px;      /* sangría del texto para librar la flecha ‹ */

	/* --- Carrito --- */
	--cart-summary-w: 24rem;       /* ancho de la tarjeta de totales */

	/* --- Cabecera --- */
	--header-logo-h: 50px;     /* alto del logo; el ancho lo pone su proporción */
	--header-icon:   38px;     /* área de cada icono de acción */
	--header-gap:    1.15rem;  /* separación entre iconos */

	/* --- Menú móvil (navegación por niveles) ---
	   Tocar una sección no despliega hacia abajo: desliza a una pantalla propia
	   con flecha de volver. Dos niveles: secciones → contenido de la sección. */
	--mmenu-w:      min(86vw, 24rem); /* ancho del panel */
	--mmenu-bar-h:  3.5rem;           /* barra superior: volver · título · cerrar */
	--mmenu-row-h:  3rem;             /* alto mínimo de fila = objetivo táctil */
	--mmenu-pad-x:  1.5rem;           /* sangría lateral del panel */
	--mmenu-anim:   .3s;              /* deslizamiento entre niveles */

	/* --- Botón flotante de WhatsApp ---
	   El verde y el z-index son de marca y de capa, no decisiones estéticas del
	   sitio: viven aquí para que nadie los vuelva a escribir a mano. La capa se
	   queda POR DEBAJO del velo (150) a propósito — con el menú o el cajón del
	   carrito abiertos el botón debe quedar tapado, no flotando sobre el velo. */
	--wa-size:    3.25rem;   /* 56,9px — por encima del mínimo táctil de 44px */
	--wa-offset:  1.25rem;   /* separación al borde inferior y derecho */
	--wa-bg:      #25d366;   /* verde oficial de WhatsApp */
	--wa-bg-hover:#1da851;
	--wa-fg:      #fff;
	--wa-z:       120;

	/* --- Mega menú --- */
	--mega-visual-w: clamp(18rem, 28vw, 28rem); /* ancho de la foto del panel */
	--mega-cols-gap: clamp(2rem, 5vw, 4.5rem);  /* separación entre columnas de enlaces */
	--mega-gap: clamp(1.5rem, 3vw, 2.75rem);    /* separación foto ↔ columnas y entre columnas */
	--mega-link-y: 0.15rem;                     /* aire vertical de cada enlace del panel */
	--mega-cols-pad: clamp(1rem, 3vw, 3.5rem);  /* sangría lateral del bloque de columnas */

	--container: 1500px;
	--radius: 0px;      /* estética limpia sin esquinas redondeadas */

	/* --- Líneas y foco (a11y) --- */
	--hairline: 1px;          /* grosor de líneas divisorias sutiles */
	--focus-w: 2px;           /* grosor del anillo de foco visible */
	--tracking-tight: -0.015em; /* titulares grandes más compactos */

	/* --- PDP (página de producto individual) --- */
	--pdp-container: 1280px;                /* la ficha respira más que el resto del sitio */
	--pdp-pad-x: clamp(1.25rem, 5vw, 3rem); /* aire lateral de la ficha */
	--pdp-gap: clamp(2rem, 5vw, 4.5rem);  /* separación galería ↔ resumen */
	--pdp-summary-max: 33rem;             /* ancho máx. de la columna resumen */
	--pdp-thumb-w: 76px;                  /* ancho de miniaturas de galería */
	--pdp-arrow-size: 44px;               /* botones ‹ › sobre la imagen principal */
	--pdp-control-h: 2.75rem;             /* altura de cantidad y botón añadir */
	--pdp-panel-max: 47rem;               /* ancho de lectura: descripción/reseñas */


	/* --- Formularios (campos compartidos: cuenta, checkout) --- */
	--field-border: 1.5px;                /* grosor de borde de inputs y botones */
	/* Alto de campo y de botón. Compacto: 48px hacía formularios muy altos y en
	   el checkout se notaba mucho. En táctil vuelve a subir (ver más abajo):
	   por debajo de ~44px un dedo falla el objetivo. */
	--field-h: 2.375rem;                  /* 41.5px */
	--field-pad-x: 1rem;
	/* Tamaño del texto dentro de los campos. Iba a --fs-base (17.5px) mientras
	   el resto de la interfaz va a --fs-sm: los campos se veían de otra escala.
	   Un único valor para toda la web, sin excepciones por dispositivo. */
	--field-fs: var(--fs-sm);

	/* --- Proceso de compra (carrito → checkout) --- */
	--co-container:  1180px;    /* más estrecho que el sitio: menos distracción */
	--co-head-h:     4.5rem;    /* alto de la cabecera reducida */
	--co-aside-w:    22rem;     /* ancho del resumen fijo */
	--co-gap:        clamp(1.5rem, 3vw, 2.5rem); /* separación pasos ↔ resumen */
	--co-card-pad:   clamp(1.25rem, 3vw, 2rem);  /* interior de cada bloque */
	--co-step-n:     1.75rem;   /* círculo numerado de cada paso */
	--co-dot:        0.5rem;    /* punto de la barra de pasos */
	--co-bg:         #f6f5f3;   /* fondo del lienzo, las tarjetas van en blanco */
	--co-sticky-top: 1.5rem;    /* separación del resumen al fijarse */
	--coitem-thumb:  4.25rem;   /* miniatura de producto en el resumen */
	--coitem-gap:    0.875rem;  /* foto ↔ texto en la línea de producto */
	--cosum-row-y:   0.7rem;    /* aire vertical de cada fila de totales */
	--cosum-sep-y:   1.25rem;   /* separación entre bloques del resumen */
	/* Identificación (paso 1): tarjeta de sesión iniciada y avisos del paso. */
	--coid-caja-bg:  #f3f6f3;   /* verde muy lavado: "esto ya está resuelto" */
	--coid-caja-pad: 0.9rem;    /* interior de la tarjeta de sesión */
	--coid-error:    #b3261e;   /* aviso de error del paso (contraste AA sobre blanco) */
	--coid-gap:      0.6rem;    /* aire entre casilla, nota y contraseña */

	--cartline-thumb: 5.5rem;   /* miniatura de la fila del carrito */
	--cart-row-y:    0.875rem;  /* aire vertical de cada fila del carrito */
	/* Sangría del contenido dentro de las tablas. Sin esto el texto y la foto
	   arrancan justo donde empieza el filete y se leen pegados al borde.
	   Vale para TODA la web, no solo el carrito. */
	--cell-pad-x:    0.875rem;  /* 15px */
	--cell-pad-y:    0.75rem;   /* 13px — alto de celda, compacto */
	/* La fila de encabezados solo lleva etiquetas: no necesita el aire del
	   contenido y con el mismo valor quedaba una banda de 50px. */
	--cell-head-y:   0.45rem;   /* 8px */

	/* --- Checkout: dirección con autocompletado --- */
	--addr-geo-size:  2rem;      /* botón "usar mi ubicación" dentro del campo */
	--addr-list-max:  17rem;     /* alto máx. del desplegable de sugerencias */
	--addr-item-y:    0.6rem;    /* aire vertical de cada sugerencia */
	--addr-pin:       1rem;      /* icono de pin de cada sugerencia */
	--addr-note-gap:  0.4rem;    /* separación campo ↔ mensaje de estado */

	/* --- Cuenta / autenticación --- */
	--auth-panel-max: 27rem;              /* ancho del formulario en login/registro */
	--auth-min-h: 44rem;                  /* alto mínimo del split foto + formulario */
	--account-nav-w: 15rem;               /* ancho de la navegación lateral de la cuenta */
	--account-gap: clamp(2rem, 4vw, 3.5rem); /* separación nav ↔ contenido */
	--account-card-pad: clamp(1rem, 2vw, 1.5rem);   /* interior de tarjetas de la cuenta */

	/* --- Elevación (uso muy puntual: paneles flotantes) --- */
	--shadow-sm: 0 1px 2px rgba(20,20,20,.05);
	--shadow-md: 0 30px 50px -30px rgba(20,20,20,.2);

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Táctil: los campos vuelven a ~48px. El compacto es para ratón; con el dedo,
   un objetivo por debajo de 44px se falla, y en un formulario de compra eso se
   paga en pedidos abandonados.

   Se usa `pointer: coarse` y no `hover: none`: este último daba positivo en
   escritorio (basta un portátil con pantalla táctil, o el navegador en modo
   automatizado) y colaba la escala táctil donde no tocaba. `pointer: coarse`
   mira el puntero principal, que en portátil sigue siendo el trackpad. */
@media (pointer: coarse), (max-width: 640px) {
	:root {
		--field-h:    2.75rem;   /* 48px */
		--cell-pad-y: 0.9rem;
		/* Iconos de cabecera: 38px es un objetivo pequeño para un dedo. El glifo
		   sigue midiendo 21px, así que solo crece el área que se puede tocar. */
		--header-icon:   2.75rem;  /* 48px */
	}
}

/* Cabecera compacta por ANCHO de pantalla, no por tipo de puntero: cuánto mide
   el logo es cuestión de sitio, no de dedo. Puesto en el bloque táctil, un
   portátil con pantalla táctil se quedaba con el logo pequeño a 2880px. */
@media (max-width: 900px) {
	:root {
		--header-logo-h: 38px;    /* cede alto para que quepan las 4 acciones */
		--header-gap:    0.15rem; /* con cajas de 48px el aire ya lo da el área */
	}
}