/* =====================================================================
YAYOMITL · SISTEMA DE DISEÑO
yayomitl.css — fuente de verdad de tokens y componentes complejos
---------------------------------------------------------------------
Metáfora: "el apartado de una pieza única en una galería".
El cliente no paga: aparta su pieza. Tiempo dilatado, mucho aire,
tipografía protagonista, dorado como joyería discreta.
CÓMO CONSUMIR ESTE ARCHIVO
1. en cada pantalla,
DESPUÉS del CDN de Tailwind.
2. Usa Tailwind para layout y utilidades (grid, flex, gap, padding…).
3. Usa las clases .yym-* solo para componentes complejos donde
Tailwind se vuelve ruido (botón primario con estados, card de
producto, modal, acordeón, hero sticky, mini-carrito).
4. Nunca inventes colores nuevos: usa las variables var(--…).
===================================================================== */
:root {
/* ---------- PALETA ---------- */
--crema: #FAF8F4; /* fondo principal (blanco roto cálido) */
--crema-sup: #F4F1EA; /* superficie un punto más profunda */
--crema-hund: #EFEBE1; /* hundido / inputs en reposo */
--tinta: #1C1A17; /* texto principal */
--obsidiana: #0A0A0A; /* fondos oscuros, botón primario */
--niebla: #8C887F; /* texto secundario, gris cálido */
--niebla-cl: #B8B2A6; /* placeholders, texto deshabilitado */
--filete: #E7E2D8; /* líneas finas, divisores, bordes */
--blanco: #FFFFFF; /* superficie de cards sobre crema */
--oro: oklch(0.74 0.10 75); /* acento — joyería discreta */
--oro-cl: oklch(0.74 0.10 75 / 0.16); /* veladura dorada */
--oro-hund: oklch(0.66 0.10 75); /* dorado en active */
/* Semánticos (usados con extrema discreción, nunca estridentes) */
--exito: oklch(0.55 0.06 150); /* verde apagado, casi gris */
--alerta: oklch(0.58 0.10 50); /* terracota tenue para errores */
--alerta-cl: oklch(0.58 0.10 50 / 0.10);
/* ---------- TIPOGRAFÍA ---------- */
--serif: "Cormorant Garamond", Georgia, serif; /* títulos */
--sans: "Manrope", system-ui, -apple-system, sans-serif; /* cuerpo/UI */
--mono: "IBM Plex Mono", ui-monospace, monospace; /* datos técnicos */
/* Escala tipográfica (mobile-first; ver utilidades .yym-* abajo) */
--fs-display: 3.25rem; /* 52px — héroes serif */
--fs-h1: 2.5rem; /* 40px */
--fs-h2: 1.875rem; /* 30px */
--fs-h3: 1.375rem; /* 22px */
--fs-body-lg: 1.125rem; /* 18px */
--fs-body: 0.9375rem;/* 15px */
--fs-caption: 0.8125rem;/* 13px */
--fs-micro: 0.625rem; /* 10px — micro-label en mayúsculas */
--fs-mono: 0.75rem; /* 12px — folios, SKU, coordenadas */
--lh-tight: 1.05;
--lh-snug: 1.25;
--lh-body: 1.65;
--track-micro: 0.26em; /* tracking de micro-labels */
--track-mono: 0.04em;
/* ---------- ESPACIADO (escala base 4px) ---------- */
--paso-1: 0.25rem; /* 4px */
--paso-2: 0.5rem; /* 8px */
--paso-3: 0.75rem; /* 12px */
--paso-4: 1rem; /* 16px */
--paso-5: 1.25rem; /* 20px */
--paso-6: 1.5rem; /* 24px */
--paso-8: 2rem; /* 32px */
--paso-10: 2.5rem; /* 40px */
--paso-12: 3rem; /* 48px */
--paso-16: 4rem; /* 64px */
--paso-20: 5rem; /* 80px */
--paso-24: 6rem; /* 96px */
--paso-32: 8rem; /* 128px — respiración entre bloques mayores */
/* ---------- RADIOS (máximo 8px — nunca pills decorativas) ---------- */
--radio-0: 0px; /* filos rectos: inputs de filete, secciones */
--radio-1: 2px; /* badges, tags */
--radio-2: 4px; /* botones, cards estándar */
--radio-3: 8px; /* cards mayores, modales (tope del sistema) */
--radio-full: 9999px;/* SOLO para puntos/indicadores circulares */
/* ---------- ELEVACIÓN (mínima, cálida, nunca dura) ---------- */
--sombra-0: none;
--sombra-1: 0 1px 2px oklch(0.2 0.02 70 / 0.04),
0 2px 8px oklch(0.2 0.02 70 / 0.04); /* cards en reposo */
--sombra-2: 0 4px 16px oklch(0.2 0.02 70 / 0.07),
0 12px 40px oklch(0.2 0.02 70 / 0.06); /* modales, hover */
/* ---------- MOVIMIENTO ---------- */
--calma: cubic-bezier(0.22, 0.61, 0.36, 1); /* easing contemplativo principal */
--suave: cubic-bezier(0.40, 0.00, 0.20, 1); /* entradas suaves */
--salida: cubic-bezier(0.40, 0.00, 1.00, 1); /* salidas */
--dur-micro: 200ms; /* feedback inmediato (color, opacity pequeña) */
--dur-rapida: 320ms; /* hover de cards, focos */
--dur-media: 460ms; /* colapsos, revelados */
--dur-lenta: 550ms; /* acordeón, transiciones de pantalla */
--dur-ritual: 900ms; /* gestos ceremoniales (shimmer del botón) */
}
/* =====================================================================
UTILIDADES TIPOGRÁFICAS
===================================================================== */
.yym-display { font-family: var(--serif); font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: 0.005em; }
.yym-h1 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-tight); }
.yym-h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); }
.yym-h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.yym-serif-italic { font-family: var(--serif); font-style: italic; font-weight: 400; }
.yym-body-lg { font-family: var(--sans); font-size: var(--fs-body-lg); line-height: var(--lh-body); font-weight: 300; }
.yym-body { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; }
.yym-caption { font-family: var(--sans); font-size: var(--fs-caption); line-height: 1.5; color: var(--niebla); }
.yym-micro { font-family: var(--sans); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track-micro); color: var(--niebla); }
.yym-mono { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); font-weight: 400; }
/* =====================================================================
BOTONES
.yym-btn base + modificadores. Estados: :hover :active :disabled
y [data-loading] para el estado de carga tipográfico.
===================================================================== */
.yym-btn {
--_bg: var(--obsidiana);
--_fg: var(--crema);
--_bd: var(--obsidiana);
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: var(--paso-2);
font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500;
text-transform: uppercase; letter-spacing: var(--track-micro);
padding: var(--paso-4) var(--paso-8);
background: var(--_bg); color: var(--_fg);
border: 1px solid var(--_bd); border-radius: var(--radio-2);
cursor: pointer; overflow: hidden; user-select: none;
transition: color var(--dur-rapida) var(--calma),
border-color var(--dur-media) var(--calma),
background-color var(--dur-rapida) var(--calma),
transform var(--dur-micro) var(--calma);
}
/* Shimmer dorado ceremonial que cruza al hover (solo primario) */
.yym-btn--primario::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, var(--oro-cl) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform var(--dur-ritual) var(--calma);
}
.yym-btn--primario:hover:not(:disabled) { border-color: var(--oro); }
.yym-btn--primario:hover:not(:disabled)::before { transform: translateX(120%); }
.yym-btn:active:not(:disabled) { transform: translateY(1px); }
/* Secundario — fantasma de filete */
.yym-btn--secundario { --_bg: transparent; --_fg: var(--tinta); --_bd: var(--filete); }
.yym-btn--secundario:hover:not(:disabled) { --_bd: var(--tinta); }
/* Terciario — relleno crema suave */
.yym-btn--terciario { --_bg: var(--crema-sup); --_fg: var(--tinta); --_bd: var(--crema-sup); }
.yym-btn--terciario:hover:not(:disabled) { --_bd: var(--filete); }
/* Ghost — solo texto, sin caja */
.yym-btn--ghost {
--_bg: transparent; --_fg: var(--niebla); --_bd: transparent;
text-transform: none; letter-spacing: 0; font-size: var(--fs-caption);
padding: var(--paso-2) var(--paso-1);
}
.yym-btn--ghost:hover:not(:disabled) { --_fg: var(--tinta); }
/* Tamaños */
.yym-btn--lg { padding: var(--paso-5) var(--paso-10); font-size: 0.6875rem; }
.yym-btn--bloque { display: flex; width: 100%; }
/* Disabled */
.yym-btn:disabled {
--_bg: var(--crema-hund); --_fg: var(--niebla-cl); --_bd: var(--crema-hund);
cursor: not-allowed;
}
/* Loading — oculta el label y muestra dots tipográficos */
.yym-btn[data-loading="true"] { color: transparent; pointer-events: none; }
.yym-btn[data-loading="true"]::after {
content: "• • •"; position: absolute; inset: 0;
display: grid; place-items: center; letter-spacing: 0.1em;
color: var(--_fg); font-size: var(--fs-caption);
animation: yym-dots 1.4s var(--calma) infinite;
}
@keyframes yym-dots { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
/* =====================================================================
CAMPOS DE FORMULARIO
.yym-field con filamento dorado al enfocar. Variantes de estado.
Estructura:
===================================================================== */
.yym-field { position: relative; display: block; }
.yym-field > label {
display: block; font-family: var(--sans); font-size: var(--fs-micro);
text-transform: uppercase; letter-spacing: var(--track-micro);
color: var(--niebla); margin-bottom: var(--paso-2);
}
.yym-field input, .yym-field textarea, .yym-field select {
width: 100%; background: transparent; color: var(--tinta);
font-family: var(--sans); font-size: 1rem; /* 16px evita zoom iOS */
border: none; border-bottom: 1px solid var(--filete); border-radius: 0;
padding: var(--paso-3) var(--paso-1);
transition: border-color var(--dur-media) var(--calma);
}
.yym-field input::placeholder, .yym-field textarea::placeholder { color: var(--niebla-cl); }
.yym-field input:focus, .yym-field textarea:focus, .yym-field select:focus { outline: none; border-bottom-color: var(--oro); }
/* Filamento dorado que crece desde el centro */
.yym-field::after {
content: ""; position: absolute; left: 50%; bottom: 0; height: 1px; width: 0;
background: var(--oro); transform: translateX(-50%);
transition: width var(--dur-media) var(--calma);
}
.yym-field:focus-within::after { width: 100%; }
/* Pista de ayuda / error / éxito */
.yym-field .yym-pista { margin-top: var(--paso-2); font-size: var(--fs-caption); color: var(--niebla); }
.yym-field--error input { border-bottom-color: var(--alerta); }
.yym-field--error .yym-pista { color: var(--alerta); }
.yym-field--exito input { border-bottom-color: var(--exito); }
.yym-field--exito .yym-pista { color: var(--exito); }
/* =====================================================================
CARD DE PRODUCTO
===================================================================== */
.yym-card-producto {
display: block; background: var(--blanco); border: 1px solid var(--filete);
border-radius: var(--radio-3); overflow: hidden; text-decoration: none; color: inherit;
transition: border-color var(--dur-rapida) var(--calma),
transform var(--dur-rapida) var(--calma),
box-shadow var(--dur-rapida) var(--calma);
}
.yym-card-producto:hover { border-color: #C9C0AE; transform: translateY(-3px); box-shadow: var(--sombra-1); }
.yym-card-producto__foto { position: relative; aspect-ratio: 4/5; background: var(--crema-sup); overflow: hidden; }
.yym-card-producto__foto img { width: 100%; height: 100%; object-fit: cover; }
.yym-card-producto__cuerpo { padding: var(--paso-5); }
/* =====================================================================
CARD DE OPCIÓN (radio premium tipo card — token propio)
Úsalo para franjas de entrega, método de pago, direcciones.
===================================================================== */
.yym-card-opcion {
position: relative; display: block; width: 100%; text-align: left;
background: var(--blanco); border: 1px solid var(--filete); border-radius: var(--radio-2);
padding: var(--paso-5); cursor: pointer;
transition: border-color var(--dur-rapida) var(--calma),
transform var(--dur-rapida) var(--calma),
box-shadow var(--dur-rapida) var(--calma);
}
.yym-card-opcion:hover:not([aria-disabled="true"]) { border-color: #C9C0AE; transform: translateY(-2px); }
.yym-card-opcion[aria-selected="true"] {
border-color: var(--oro);
box-shadow: inset 0 0 0 1px var(--oro-cl);
}
.yym-card-opcion[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* Indicador radio interno */
.yym-radio { flex: none; width: 1rem; height: 1rem; border-radius: var(--radio-full);
border: 1px solid var(--filete); display: grid; place-items: center;
transition: border-color var(--dur-rapida) var(--calma); }
.yym-card-opcion[aria-selected="true"] .yym-radio { border-color: var(--oro); }
.yym-radio::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radio-full);
background: var(--oro); transform: scale(0); transition: transform var(--dur-rapida) var(--calma); }
.yym-card-opcion[aria-selected="true"] .yym-radio::after { transform: scale(1); }
/* =====================================================================
CHECK DE FILETE (token propio — no palomita verde)
Uso: y añade
.yym-check--on para disparar el trazo.
===================================================================== */
.yym-check { width: 1.375rem; height: 1.375rem; }
.yym-check .anillo { fill: none; stroke: var(--oro); stroke-width: 1.25; }
.yym-check .trazo { fill: none; stroke: var(--oro); stroke-width: 1.25;
stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
.yym-check--on .trazo { animation: yym-trazo var(--dur-ritual) var(--calma) forwards; }
.yym-check--on .anillo { animation: yym-anillo 720ms var(--calma) forwards; }
@keyframes yym-trazo { to { stroke-dashoffset: 0; } }
@keyframes yym-anillo { from { stroke-dasharray: 0 120; } to { stroke-dasharray: 120 0; } }
/* =====================================================================
BADGES Y TAGS
===================================================================== */
.yym-badge {
display: inline-flex; align-items: center; gap: var(--paso-2);
font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.16em;
padding: var(--paso-1) var(--paso-3); border-radius: var(--radio-1);
border: 1px solid var(--filete); color: var(--niebla); background: var(--crema-sup);
}
.yym-badge--oro { border-color: var(--oro); color: var(--oro-hund); background: var(--oro-cl); }
.yym-badge--tinta { border-color: var(--tinta); color: var(--crema); background: var(--tinta); }
.yym-badge--punto::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: var(--radio-full); background: currentColor; }
/* Tag de precio en serif */
.yym-precio { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); color: var(--tinta); }
.yym-precio--filamento { position: relative; }
.yym-precio--filamento::after { content: ""; display: block; width: 2.5rem; height: 1px; background: var(--oro); margin-top: var(--paso-2); }
/* =====================================================================
MODAL PREMIUM
Estructura:
===================================================================== */
.yym-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
padding: var(--paso-6); opacity: 0; pointer-events: none;
transition: opacity var(--dur-media) var(--calma); }
.yym-modal[data-abierto] { opacity: 1; pointer-events: auto; }
.yym-modal__velo { position: absolute; inset: 0; background: oklch(0.2 0.02 70 / 0.30); backdrop-filter: blur(3px); }
.yym-modal__caja {
position: relative; width: 100%; max-width: 25rem;
background: var(--crema); border: 1px solid var(--filete); border-radius: var(--radio-3);
box-shadow: var(--sombra-2); padding: var(--paso-10);
transform: translateY(14px); transition: transform var(--dur-lenta) var(--calma);
}
.yym-modal[data-abierto] .yym-modal__caja { transform: translateY(0); }
/* =====================================================================
ACORDEÓN VERTICAL (el del checkout)
Estructura: .yym-acordeon > .yym-acc-item(.is-open/.is-done/.is-locked)
> .yym-acc-head + .yym-acc-body > .yym-acc-inner
===================================================================== */
.yym-acordeon { border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); }
.yym-acc-item { border-bottom: 1px solid var(--filete); transition: opacity var(--dur-media) var(--calma); }
.yym-acc-item:last-child { border-bottom: none; }
.yym-acc-item.is-locked { opacity: 0.4; pointer-events: none; }
.yym-acc-head { width: 100%; display: flex; align-items: flex-start; gap: var(--paso-4);
padding: var(--paso-8) 0; background: none; border: none; cursor: pointer; text-align: left; }
.yym-acc-body { display: grid; grid-template-rows: 0fr; opacity: 0;
transition: grid-template-rows var(--dur-lenta) var(--calma), opacity var(--dur-media) ease; }
.yym-acc-body > .yym-acc-inner { overflow: hidden; min-height: 0; }
.yym-acc-item.is-open .yym-acc-body { grid-template-rows: 1fr; opacity: 1; }
.yym-acc-item.is-open .yym-acc-resumen { display: none; }
.yym-acc-inner { padding-bottom: var(--paso-10); }
/* =====================================================================
HERO STICKY (producto fijo en checkout)
===================================================================== */
.yym-hero-sticky { position: sticky; top: 0; z-index: 30;
background: oklch(0.98 0.005 80 / 0.92); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--filete); }
.yym-hero-sticky__foto { flex: none; aspect-ratio: 4/5; background: var(--crema-sup);
border: 1px solid var(--filete); border-radius: var(--radio-2); overflow: hidden; }
/* =====================================================================
MINI-CARRITO STICKY
===================================================================== */
.yym-mini-carrito { position: sticky; bottom: var(--paso-4); z-index: 20;
background: var(--blanco); border: 1px solid var(--filete); border-radius: var(--radio-3);
box-shadow: var(--sombra-2); padding: var(--paso-4) var(--paso-5);
display: flex; align-items: center; gap: var(--paso-4); }
/* =====================================================================
LOADING TIPOGRÁFICO (dots, no spinner)
===================================================================== */
.yym-dots span { opacity: 0.2; animation: yym-dot 1.4s infinite; }
.yym-dots span:nth-child(2) { animation-delay: 0.2s; }
.yym-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes yym-dot { 0%,80%,100% { opacity: 0.2; } 40% { opacity: 1; } }
/* =====================================================================
SKELETON CONTEMPLATIVO (sin destello agresivo; respiración lenta)
===================================================================== */
.yym-skeleton { background: var(--crema-sup); border-radius: var(--radio-2);
position: relative; overflow: hidden; }
.yym-skeleton::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(100deg, transparent 30%, oklch(1 0 0 / 0.45) 50%, transparent 70%);
transform: translateX(-100%); animation: yym-skel 2.4s var(--calma) infinite; }
@keyframes yym-skel { to { transform: translateX(100%); } }
/* =====================================================================
TOAST
===================================================================== */
.yym-toast { display: flex; align-items: flex-start; gap: var(--paso-3);
background: var(--obsidiana); color: var(--crema); border-radius: var(--radio-3);
padding: var(--paso-4) var(--paso-5); box-shadow: var(--sombra-2);
max-width: 22rem; }
.yym-toast__punto { flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--radio-full);
background: var(--oro); margin-top: 0.45rem; }
.yym-toast--claro { background: var(--blanco); color: var(--tinta); border: 1px solid var(--filete); }
/* =====================================================================
DIVISOR / FILETE
===================================================================== */
.yym-filete { height: 1px; background: var(--filete); border: none; }
.yym-filete--oro { background: var(--oro); width: 2.5rem; height: 1px; }
/* =====================================================================
PLACEHOLDER DE IMAGEN DIGNIFICADO
===================================================================== */
.yym-ph { background-image: repeating-linear-gradient(135deg, #F0ECE3 0 14px, #ECE7DC 14px 28px); }
.yym-ph__label { font-family: var(--mono); font-size: var(--fs-mono); color: var(--niebla); }
/* =====================================================================
RESPIRACIÓN (ritual de carga)
===================================================================== */
.yym-breathe { animation: yym-breathe 3.4s ease-in-out infinite; }
@keyframes yym-breathe { 0%,100% { opacity: 0.55; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1); } }
/* Entrada suave reutilizable */
.yym-rise { opacity: 0; transform: translateY(10px); animation: yym-rise var(--dur-ritual) var(--calma) forwards; }
@keyframes yym-rise { to { opacity: 1; transform: translateY(0); } }
/* =====================================================================
ACCESIBILIDAD: respeta reduced-motion
===================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}