/* =============================================================
   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 */

	/* --- 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 */
	--field-h: 2.75rem;                   /* alto de campo y de botón de formulario */
	--field-pad-x: 1rem;

	/* --- 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 */
	--cartline-thumb: 5.5rem;   /* miniatura de la fila del carrito */
	--cart-row-y:    1.25rem;   /* aire vertical de cada fila del carrito */

	/* --- 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);
}