/* =========================================================================
   Yuan Import · estilos de la web (prefijo yu-). Va después de ns-firma.css.
   Identidad de la tienda original: crema cálido, tinta, turquesa de marca, coral y sol, círculos pastel con brillo
   arriba a la izquierda, todo muy redondeado. Títulos Gabarito, texto Plus Jakarta Sans.
   Rangos: < 750px celular · 750–1099px tablet · ≥ 1100px compu.
   ========================================================================= */

:root {
  --yu-crema: #FFF9F2;          /* fondo (panel → Apariencia → claro) */
  --yu-crema-2: #FFFDF9;        /* cajones, tarjetas sobre crema */
  --yu-tinta: #16233B;          /* texto (panel → oscuro) */
  --yu-tinta-suave: #4B5568;    /* texto secundario: AA sobre crema y blanco */
  --yu-turq: #0E7C88;           /* botones y fondos sólidos (panel → principal); texto blanco AA */
  --yu-turq-h: #0B6470;
  --yu-acento: #1AA0AE;         /* foco, anillos, relleno de la barra de descuentos */
  --yu-coral: #E2483A;
  --yu-coral-texto: #C2352A;    /* coral para texto chico (AA) */
  --yu-sol: #FFC94D;
  --yu-menta: #E4F5F2;
  --yu-menta-2: #D3F0E9;
  --yu-borde: #E9E3D8;
  --yu-ok: #12805C;
  --yu-error: #B42318;
  --yu-glow: radial-gradient(120% 140% at 18% 0%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 55%);
  --yu-sombra: 0 18px 40px -26px rgb(22 35 59 / 0.45);
  --yu-sombra-chica: 0 8px 20px -14px rgb(22 35 59 / 0.4);
  --yu-r: 16px;                 /* tarjetas */
  --yu-r-foto: 24px;            /* fotos y bloques grandes */
  /* Dos anchos, sin tope, para que se vea igual en una laptop y en un monitor grande:
     amplio (banner, franja 10%, calculadora) = mismo borde que la barra y el pie;
     contenido (productos, categorías y páginas) = un margen extra que crece con la pantalla. */
  --yu-ancho-amplio: calc(100% - 2 * var(--yu-margen));
  --yu-margen-prod: calc(var(--yu-margen) + clamp(40px, 5.5vw, 170px));
  --yu-ancho: calc(100% - 2 * var(--yu-margen-prod));
  --yu-margen: clamp(16px, 2.8vw, 40px);
  --yu-gap: clamp(12px, 1.6vw, 24px);
  --yu-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --yu-titulos: 'Gabarito', 'Plus Jakarta Sans', system-ui, sans-serif;
  --yu-texto: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --yu-anuncio-h: 0px;
  --yu-cab: calc(var(--ns-gap) + 70px);   /* lo que ocupa el header arriba (el anuncio va aparte, en el flujo) */

  /* Firma NS adaptada a Yuan: barra menta clara con texto tinta (antes el texto chico se perdía) */
  --ns-accent: var(--yu-acento);
  --ns-on-accent: #fff;
  --ns-bar: #EAF7F3;
  --ns-text: var(--yu-tinta);
  --ns-panel-bg: var(--yu-crema-2);
  --ns-top-bg: var(--yu-tinta);
  --ns-font-display: var(--yu-titulos);
  --ns-font-body: var(--yu-texto);
  --ns-gap-x: var(--yu-margen);          /* el header alineado con el contenido */
}
@media (max-width: 749px) { :root { --yu-margen-prod: var(--yu-margen); } } /* en celular, un solo margen */

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--yu-cab) + 80px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--yu-texto);
  font-size: 16px;
  line-height: 1.55;
  color: var(--yu-tinta);
  background: var(--yu-crema);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--yu-titulos); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
main { outline: none; min-height: 60svh; }
/* El contenido recibe el foco al cambiar de página (lectores de pantalla) sin mostrar un contorno */
#app:focus, #app:focus-visible { outline: none !important; }
.yu-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yu-saltar { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--yu-tinta); color: #fff; text-decoration: none; font-weight: 600; transition: top 0.2s; }
.yu-saltar:focus { top: 12px; }
::selection { background: var(--yu-menta-2); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--yu-acento); outline-offset: 3px; }

.yu-pagina { width: var(--yu-ancho); margin-inline: auto; padding-top: calc(var(--yu-cab) + clamp(20px, 3vw, 32px)); padding-bottom: clamp(48px, 7vw, 88px); }
.yu-seccion { width: var(--yu-ancho); margin-inline: auto; padding-block: clamp(36px, 5vw, 64px) 0; }
.yu-seccion--ultima { padding-bottom: clamp(56px, 8vw, 96px); }
.yu-seccion__cab { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 2vw, 28px); }
.yu-seccion__acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.yu-seccion__acciones .yu-link-flecha { margin-right: 8px; color: var(--yu-tinta); }
.yu-seccion__cab h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.yu-etiqueta-seccion { display: inline-block; justify-self: start; width: fit-content; margin-bottom: 10px; padding: 6px 14px; border-radius: 999px; background: var(--yu-menta); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yu-turq-h); }
.yu-link-flecha { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: none; color: var(--yu-turq); white-space: nowrap; min-height: 44px; }
.yu-link-flecha svg { width: 18px; height: 18px; transition: transform 0.3s var(--yu-ease); }
.yu-link-flecha:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ botones y campos */
.yu-btn {
  --b-bg: var(--yu-turq); --b-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg); font-weight: 700; font-size: 0.98rem; text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s, transform 0.25s var(--yu-ease), box-shadow 0.25s, color 0.2s;
}
.yu-btn svg { width: 19px; height: 19px; flex: none; }
.yu-btn:hover { --b-bg: var(--yu-turq-h); transform: translateY(-1px); box-shadow: var(--yu-sombra-chica); }
.yu-btn:active { transform: translateY(0) scale(0.98); }
.yu-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.yu-btn--grande { min-height: 54px; padding: 0 28px; font-size: 1.02rem; }
.yu-btn--chico { min-height: 42px; padding: 0 16px; font-size: 0.9rem; }
.yu-btn--tinta { --b-bg: var(--yu-tinta); }
.yu-btn--tinta:hover { --b-bg: #22324f; }
.yu-btn--borde { --b-bg: transparent; --b-fg: var(--yu-tinta); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--yu-tinta) 30%, transparent); }
.yu-btn--borde:hover { --b-bg: #fff; box-shadow: inset 0 0 0 1.5px var(--yu-tinta); }
.yu-btn--texto { --b-bg: transparent; --b-fg: var(--yu-tinta); padding-inline: 12px; }
.yu-btn--texto:hover { --b-bg: color-mix(in srgb, var(--yu-tinta) 6%, transparent); box-shadow: none; }
.yu-btn.is-cargando { position: relative; color: transparent !important; pointer-events: none; }
.yu-btn.is-cargando::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #fff; border-right-color: transparent; animation: yu-gira 0.7s linear infinite; }
.yu-btn--borde.is-cargando::after { border-color: var(--yu-tinta); border-right-color: transparent; }
.yu-btn.is-agregado { --b-bg: var(--yu-ok); }
@keyframes yu-gira { to { transform: rotate(360deg); } }

.yu-icono-btn {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; text-decoration: none;
  transition: background-color 0.2s, transform 0.25s var(--yu-ease);
}
.yu-icono-btn svg { width: 22px; height: 22px; }
.yu-icono-btn:hover { background: rgb(255 255 255 / 0.75); }
.yu-icono-btn:disabled { opacity: 0.35; cursor: default; }

.yu-campo { display: grid; gap: 6px; font-size: 0.92rem; font-weight: 600; }
.yu-campo > span small, .yu-campo small { font-weight: 500; color: var(--yu-tinta-suave); }
.yu-campo input, .yu-campo textarea, .yu-campo select, .yu-avisame input, .yu-cupon input {
  width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid var(--yu-borde); border-radius: 14px;
  background: #fff; font-size: 1rem; font-weight: 500; transition: border-color 0.2s, box-shadow 0.2s;
}
.yu-campo textarea { min-height: 96px; resize: vertical; }
.yu-campo input:hover, .yu-campo textarea:hover { border-color: #d5ccbd; }
.yu-campo input:focus, .yu-campo textarea:focus, .yu-campo select:focus, .yu-avisame input:focus, .yu-cupon input:focus { outline: none; border-color: var(--yu-acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--yu-acento) 18%, transparent); }
.yu-campo__ayuda { font-weight: 500; }
.yu-campo__error { color: var(--yu-error) !important; font-weight: 600 !important; min-height: 0; }
.yu-campo__error:empty { display: none; }
.yu-campo.is-error input, .yu-campo.is-error select, [aria-invalid='true'] { border-color: var(--yu-error) !important; }
.yu-campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.yu-error { color: var(--yu-error); font-weight: 600; font-size: 0.92rem; }
.yu-error:empty { display: none; }
.yu-form-estado { font-weight: 600; font-size: 0.92rem; color: var(--yu-turq); }
.yu-form-estado:empty { display: none; }

.yu-select { position: relative; display: inline-flex; align-items: center; }
.yu-select select { appearance: none; min-height: 44px; padding: 0 40px 0 16px; border: 1.5px solid var(--yu-borde); border-radius: 999px; background: #fff; font-weight: 600; font-size: 0.92rem; cursor: pointer; }
.yu-select > svg { position: absolute; right: 14px; width: 16px; height: 16px; pointer-events: none; }
.yu-select--campo { display: flex; }
.yu-select--campo select { width: 100%; min-height: 50px; border-radius: 14px; font-size: 1rem; font-weight: 500; }
.yu-select--filtro { display: grid; gap: 4px; font-size: 0.82rem; font-weight: 600; color: var(--yu-tinta-suave); }
.yu-select--filtro > svg { top: 36px; }

.yu-interruptor { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 0.92rem; cursor: pointer; white-space: nowrap; }
.yu-interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.yu-interruptor span { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #d9d2c5; transition: background-color 0.25s; }
.yu-interruptor span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform 0.3s var(--yu-ease); }
.yu-interruptor input:checked + span { background: var(--yu-turq); }
.yu-interruptor input:checked + span::after { transform: translateX(18px); }
.yu-interruptor input:focus-visible + span { outline: 2px solid var(--yu-acento); outline-offset: 3px; }

/* Círculos pastel con brillo (el lenguaje visual de la tienda) */
.yu-circulo {
  --yu-bg: var(--yu-menta-2);
  position: relative; display: grid; place-items: center; flex: none;
  width: var(--yu-circ, 112px); aspect-ratio: 1; border-radius: 50%;
  background: var(--yu-glow), var(--yu-bg);
  box-shadow: inset 0 -6px 14px -8px rgb(22 35 59 / 0.12);
  transition: transform 0.45s var(--yu-ease), box-shadow 0.45s var(--yu-ease);
}
.yu-circulo > .yu-ill, .yu-circulo > svg { width: 56%; height: 56%; }
.yu-circulo--chico { --yu-circ: 46px; }
.yu-circulo--mini { --yu-circ: 30px; }
.yu-circulo--grande { --yu-circ: clamp(96px, 12vw, 136px); }
.yu-circulo-icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--yu-menta); color: var(--yu-turq); }
.yu-circulo-icono svg { width: 20px; height: 20px; }

.yu-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; margin-inline: -2px; scroll-snap-type: x proximity; }
.yu-chips::-webkit-scrollbar { display: none; }
.yu-chip { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 5px 16px 5px 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--yu-borde); font-weight: 600; font-size: 0.92rem; text-decoration: none; scroll-snap-align: start; transition: box-shadow 0.2s, background-color 0.2s, color 0.2s; }
.yu-chip:first-child:not(:has(.yu-circulo)) { padding-left: 16px; }
.yu-chip:hover { box-shadow: inset 0 0 0 1.5px var(--yu-tinta); }
.yu-chip[aria-current='page'] { background: var(--yu-turq); color: #fff; box-shadow: none; }
.yu-chip .yu-circulo--mini { --yu-circ: 32px; }
.yu-chip--sub { padding: 0 14px; min-height: 38px; font-size: 0.86rem; }

.yu-burbuja { position: absolute; top: 2px; right: 0; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--yu-coral); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; }

/* ------------------------------------------------------------------ anuncio (panel → Aviso) */
.yu-anuncio { position: relative; z-index: 45; display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 36px; padding: 8px var(--yu-margen); background: var(--yu-tinta); color: #fff; font-size: 0.86rem; font-weight: 600; text-align: center; }
.yu-anuncio a { color: var(--yu-sol); font-weight: 700; text-underline-offset: 3px; }
.yu-anuncio--flotante { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 66; max-width: 560px; margin-inline: auto; padding: 12px 12px 12px 20px; border-radius: 18px; box-shadow: var(--yu-sombra); }
.yu-anuncio--flotante .yu-icono-btn { color: #fff; width: 36px; height: 36px; }
.yu-anuncio--flotante .yu-icono-btn:hover { background: rgb(255 255 255 / 0.12); }

/* ------------------------------------------------------------------ header (firma NS adaptada) */
.ns-header { top: calc(var(--ns-gap) + var(--yu-anuncio-h)); }
.ns-header .ns-bar, .ns-header .ns-menu-btn { border-color: rgb(22 35 59 / 0.07); box-shadow: 0 14px 34px -22px rgb(22 35 59 / 0.5); }
.ns-header { --ns-bar-h: 70px; }
.ns-header.is-scrolled, .ns-header.is-open { --ns-bar-h: 62px; }
.ns-header .ns-bar { background: var(--yu-glow), linear-gradient(100deg, rgb(211 240 233 / 0.92), rgb(227 246 242 / 0.92) 55%, rgb(216 241 235 / 0.92)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 16px 34px -22px rgb(14 124 136 / 0.45) !important; gap: clamp(12px, 2vw, 28px); padding-inline: clamp(16px, 1.8vw, 24px) clamp(14px, 1.3vw, 18px); }
.ns-header.is-scrolled .ns-bar, .ns-header.is-open .ns-bar { background: var(--yu-glow), linear-gradient(100deg, #d3f0e9, #e3f6f2 55%, #d8f1eb); }
/* ☰ en su círculo menta con brillo (compu), igual que la burbuja de WhatsApp de la derecha */
.ns-header .ns-menu-btn, .yu-wa-burbuja {
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 58%), #d3f0e9;
  border: 1px solid rgb(255 255 255 / 0.9); color: var(--yu-tinta);
  box-shadow: 0 16px 30px -18px rgb(14 124 136 / 0.5);
}
.ns-header .ns-menu-btn:hover { color: var(--yu-turq); }
/* Burbuja de WhatsApp: columna propia a la derecha de la barra; el panel del ☰ termina donde termina la barra */
.ns-header:has(.yu-wa-burbuja:not([hidden])) { grid-template-columns: var(--ns-bar-h) minmax(0, 1fr) var(--ns-bar-h); }
.yu-wa-burbuja {
  grid-column: 3; grid-row: 1; position: relative; display: grid; place-items: center; pointer-events: auto;
  width: var(--ns-bar-h); height: var(--ns-bar-h); border-radius: 50%; text-decoration: none;
  transition: transform 0.35s var(--yu-ease), background 0.25s ease, color 0.25s ease;
}
.yu-wa-burbuja svg { width: 46%; height: 46%; }
.yu-wa-burbuja:hover { background: #25d366; color: #fff; transform: translateY(-1px); }
.yu-wa-burbuja:hover svg { animation: yu-baile 0.6s var(--yu-ease); }
.yu-wa-burbuja::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 10px); right: 0; padding: 8px 12px; border-radius: 10px;
  background: var(--yu-turq); color: #fff; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.yu-wa-burbuja:hover::after, .yu-wa-burbuja:focus-visible::after { opacity: 1; transform: none; }
#wa-header { display: none !important; }

/* Logo: la palabra yuani en la tipografía de títulos, turquesa sólido (se lee bien sobre la barra clara) */
.yu-marca { flex: none; align-self: center; text-decoration: none; }
.yu-logo, .ns-brand .yu-logo {
  display: inline-block; font-family: var(--yu-titulos); font-weight: 800; font-size: 36px; line-height: 1;
  letter-spacing: -0.02em; color: var(--yu-turq); text-decoration: none;
  margin-top: 0.06em;   /* las letras son casi todas bajas: así la palabra queda centrada a la vista en la barra */
  transition: transform 0.45s var(--yu-ease);
}
.yu-marca:hover .yu-logo { transform: translateY(-1px) rotate(-2deg); }
.yu-marca img { height: 40px; width: auto; }

/* Menú en línea: tamaño legible, tinta sobre la barra clara */
.yu-nav { gap: clamp(4px, 1vw, 12px); margin-inline: auto; align-items: center; }
.ns-nav.yu-nav a::after { display: none; }
.yu-nav__item { position: relative; display: flex; align-items: center; }
.yu-nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 0.76rem !important; font-weight: 600 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important;
  color: var(--yu-tinta) !important; text-decoration: none; border-radius: 999px; transition: color 0.2s, background-color 0.2s;
}
.yu-nav__item .yu-nav__link { padding-right: 4px; }
.yu-nav__link:hover { color: var(--yu-turq) !important; }
.yu-nav__link.is-active { color: var(--yu-turq) !important; }
.yu-nav__link.is-active::before { content: ''; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--yu-turq); }
.yu-nav__abrir { display: grid; place-items: center; width: 30px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--yu-tinta); }
.yu-nav__abrir svg { width: 16px; height: 16px; transition: transform 0.3s var(--yu-ease); }
.yu-desplegable {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 5; display: grid; gap: 6px; width: min(680px, 86vw); padding: 16px 16px 10px;
  border-radius: 26px; background: radial-gradient(70% 120% at 8% 0%, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 55%), linear-gradient(135deg, #e3f6f2, #f6fcfa 60%, #fff8ef);
  box-shadow: 0 28px 56px -26px rgb(22 35 59 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.9);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity 0.2s, transform 0.3s var(--yu-ease), visibility 0s linear 0.3s;
}
.yu-desplegable { grid-template-columns: minmax(0, 1fr); }
.yu-desplegable > .yu-carrusel { min-width: 0; }
.yu-desplegable__pista { gap: 6px; padding: 4px 2px 2px; margin: 0; }
.yu-desplegable__pista > :first-child { margin-left: auto; }
.yu-desplegable__pista > :last-child { margin-right: auto; }
.ns-nav .yu-desplegable .yu-desplegable__pista a { flex: none; flex-direction: column; justify-content: flex-start; gap: 8px; width: 104px; min-height: 0; padding: 6px 4px 8px; border-radius: 20px; font-size: 0.88rem; text-align: center; }
.yu-desplegable__pista .yu-circulo { --yu-circ: 72px; }
.yu-desplegable .yu-carrusel__flecha { top: 44px; width: 36px; height: 36px; margin-top: -18px; }
.yu-desplegable .yu-carrusel__flecha--izq { left: -6px; }
.yu-desplegable .yu-carrusel__flecha--der { right: -6px; }
.yu-desplegable::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.ns-nav .yu-desplegable a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 0.97rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--yu-tinta); text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.ns-nav .yu-desplegable a:hover { color: var(--yu-turq); }
.yu-desplegable a:hover { background: #fff; }
.yu-desplegable a:hover .yu-circulo { transform: rotate(-6deg) scale(1.05); }
.ns-nav .yu-desplegable a.yu-desplegable__todo { justify-content: center; min-height: 40px; color: var(--yu-turq); border-top: 1px solid rgb(22 35 59 / 0.08); border-radius: 0 !important; }
.yu-desplegable__todo svg { width: 16px; height: 16px; }
.yu-nav__item.is-open .yu-desplegable { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.2s, transform 0.3s var(--yu-ease), visibility 0s; }
.yu-nav__item.is-open .yu-nav__abrir svg { transform: rotate(180deg); }
@media (hover: hover) {
  .yu-nav__item:hover .yu-desplegable { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.2s, transform 0.3s var(--yu-ease), visibility 0s; }
  .yu-nav__item:hover .yu-nav__abrir svg { transform: rotate(180deg); }
}

.yu-acciones { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ns-nav + .yu-acciones { margin-left: 0; }
/* Íconos del header con relleno pastel (como en Shopify) y un bailecito al pasar el mouse */
.yu-acciones .yu-icono-btn, .yu-carrito-btn { color: var(--yu-tinta); }
#abrir-buscador { --yu-fill: #FFEDB3; }
#ir-favoritos { --yu-fill: #FFD3CC; }
#wa-header { --yu-fill: #D9F7E5; }
.yu-carrito-btn { --yu-fill: #fff; }
.yu-acciones .yu-icono-btn:hover { background: rgb(255 255 255 / 0.7); }
@media (hover: hover) {
  .yu-acciones .yu-icono-btn:hover svg, .yu-carrito-btn:hover svg { animation: yu-baile 0.6s var(--yu-ease); }
}
@keyframes yu-baile {
  25% { transform: translateY(-2px) rotate(-10deg) scale(1.08); }
  50% { transform: translateY(-2px) rotate(8deg) scale(1.08); }
  75% { transform: translateY(-1px) rotate(-4deg) scale(1.04); }
}
.yu-carrito-btn {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; transition: background-color 0.2s;
}
.yu-carrito-btn svg { width: 24px; height: 24px; }
.yu-acciones .yu-icono-btn svg { width: 23px; height: 23px; }
.yu-carrito-btn:hover { background: rgb(255 255 255 / 0.7); }
.yu-burbuja--carrito { top: 1px; right: -1px; background: var(--yu-turq); color: #fff; box-shadow: 0 0 0 2px #eaf7f3; transition: transform 0.3s var(--yu-ease); }
.yu-burbuja--carrito.is-vacio { transform: scale(0); }
.yu-carrito-btn.is-salto { animation: yu-salto 0.55s var(--yu-ease); }
@keyframes yu-salto { 30% { transform: translateY(-4px) scale(1.06); } 60% { transform: translateY(0) scale(0.98); } }

/* Menú grande (☰): tarjeta crema con brillo, círculos con ilustración, columna "Hablemos" en tarjeta blanca */
.yu-panel { background: radial-gradient(70% 120% at 8% 0%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 55%), linear-gradient(135deg, #e3f6f2, #f2fbf8 55%, #fff8ef) !important; color: var(--yu-tinta); grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr) !important; border-color: rgb(255 255 255 / 0.9) !important; }
.yu-panel__nav { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; }
.yu-panel__grupo { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.45s var(--yu-ease); }
.ns-header.is-open .yu-panel__grupo, .ns-header.is-open .yu-panel__link--fav { opacity: 1; transform: none; transition-delay: calc(0.06s + var(--i, 0) * 0.045s); }
.ns-panel__nav a.yu-panel__link {
  display: flex; align-items: center; gap: 14px; padding: 6px 14px 6px 6px; border: 0; border-radius: 999px;
  font-family: var(--yu-titulos); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.1; color: var(--yu-tinta);
  opacity: 1; transform: none; transition: background-color 0.2s, color 0.2s;
}
.ns-panel__nav a.yu-panel__link:hover, .ns-panel__nav a.yu-panel__link.is-active { background: #fff; color: var(--yu-turq); padding-left: 6px; }
.yu-panel__link .yu-circulo { --yu-circ: 48px; }
.yu-panel__link:hover .yu-circulo { transform: rotate(-6deg) scale(1.05); }
.yu-panel__link--fav { opacity: 0; transform: translateY(8px); }
.yu-panel__link--fav .yu-circulo svg { width: 22px; height: 22px; color: var(--yu-coral); --yu-fill: #fff; }
.yu-panel__sub { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 12px 64px; }
.ns-panel__nav .yu-panel__sub a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.85); box-shadow: inset 0 0 0 1px var(--yu-borde); font-family: var(--yu-texto); font-size: 0.9rem; font-weight: 600; color: var(--yu-tinta); opacity: 1; transform: none; text-decoration: none; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.ns-panel__nav .yu-panel__sub a:hover { background: #fff; color: var(--yu-turq); box-shadow: inset 0 0 0 1.5px var(--yu-turq); padding-left: 14px; }
.yu-panel__info { align-self: start !important; padding: 22px; border-radius: 22px; background: #fff; color: var(--yu-tinta) !important; box-shadow: var(--yu-sombra-chica); }
.yu-panel__info .ns-panel__label { margin-bottom: 2px; font-family: var(--yu-titulos); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--yu-tinta); }
.yu-panel__redes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.yu-panel__redes a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--yu-menta); color: var(--yu-tinta); font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.yu-panel__redes a:hover { background: var(--yu-turq); color: #fff; }
.yu-panel__redes svg { width: 18px; height: 18px; }
.yu-panel__info > a, .yu-panel__info > p { min-height: 44px; font-weight: 600; }
.yu-panel__info > a:hover { color: var(--yu-turq); }
.yu-panel__info .ns-panel__social a { color: var(--yu-tinta); border-color: var(--yu-borde); }
.yu-horario { color: var(--yu-tinta-suave); font-size: 0.9rem; }
.ns-scrim { background: rgb(22 35 59 / 0.22); }

/* Volver arriba: se aparta con el carrito o el aviso abiertos */
.ns-top { z-index: 44; }
html.yu-carrito-abierto .ns-top, html.yu-buscando .ns-top, html:has(.yu-aviso-flotante.is-visible) .ns-top, html:has(.yu-compra-fija.is-visible) .ns-top, html:has(.yu-dbur.is-abierta) .ns-top { opacity: 0; visibility: hidden; }

@media (max-width: 1099px) {
  .yu-solo-compu { display: none !important; }
}
@media (max-width: 749px) {
  :root { --yu-cab: calc(var(--ns-gap) + 62px); }
  .ns-header { --ns-bar-h: 62px; }
  .ns-header.is-scrolled, .ns-header.is-open { --ns-bar-h: 56px; }
  .ns-header .ns-menu-btn { background: transparent; border: 0; box-shadow: none; color: var(--yu-tinta); }
  .ns-header .ns-menu-btn:hover { background: transparent; color: var(--yu-turq); }
  .yu-wa-burbuja { display: none !important; }
  #abrir-cuenta { display: none !important; }   /* en celular la cuenta va dentro del menú */
  .ns-header:has(.yu-wa-burbuja:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  #wa-header:not([hidden]) { display: inline-grid !important; }
  .ns-header .ns-bar { padding-left: 54px; padding-right: 13px; gap: 4px; }
  .yu-marca { position: absolute; left: 50%; transform: translateX(-50%); }
  .ns-brand .yu-logo { font-size: 30px; }
  .yu-acciones { width: 100%; }
  .yu-acciones #abrir-buscador { order: -1; margin-right: auto; }
  .yu-acciones .yu-icono-btn { width: 42px; height: 42px; }
  .yu-carrito-btn { width: 42px; height: 42px; }
  .yu-panel { grid-template-columns: 1fr !important; padding: 18px !important; }
  .yu-panel__nav { grid-template-columns: 1fr; }
  .ns-panel__nav a.yu-panel__link { font-size: 1.15rem; }
  .yu-panel__link .yu-circulo { --yu-circ: 42px; }
  .yu-panel__sub { padding-left: 58px; }
}
@media (max-width: 359px) { .yu-wa { display: none !important; } }

/* ------------------------------------------------------------------ ilustraciones animadas */
.yu-ill { --yu-ill-ink: #16233b; --yu-ill-white: #fff; --yu-ill-sun: #ffc94d; --yu-ill-coral: #ff7a6b; --yu-ill-accent: #1aa0ae; --yu-ill-choco: #7a4a2e; --yu-ill-green: #3fae8c; display: block; overflow: visible; }
.yu-ill * { transform-box: fill-box; transform-origin: center; }
.yu-ill__sway { transform-origin: 50% 100%; animation: yu-ill-sway 4s ease-in-out infinite alternate; }
.yu-ill__rock { animation: yu-ill-rock 3.2s ease-in-out infinite alternate; }
.yu-ill__flap { transform-origin: 100% 100%; animation: yu-ill-flap 3s ease-in-out infinite alternate; }
.yu-ill__flap--2 { transform-origin: 0% 100%; animation-name: yu-ill-flap-2; }
.yu-ill__lid { transform-origin: 50% 100%; animation: yu-ill-lid 2.6s cubic-bezier(0.22, 1.4, 0.36, 1) infinite; }
.yu-ill__flame { transform-origin: 50% 100%; animation: yu-ill-flicker 1.4s ease-in-out infinite alternate; }
.yu-ill__flame--in { animation-duration: 0.9s; }
.yu-ill__bubble { animation: yu-ill-rise 3s ease-in infinite; }
.yu-ill__bubble--2 { animation-delay: -1s; }
.yu-ill__bubble--3 { animation-delay: -2s; }
.yu-ill__drop { animation: yu-ill-drop 2.4s cubic-bezier(0.55, 0, 0.8, 0.4) infinite; }
.yu-ill__ripple { animation: yu-ill-ripple 2.4s ease-out infinite; }
.yu-ill__float { animation: yu-ill-float 3s ease-in-out infinite; }
.yu-ill__twinkle { animation: yu-ill-twinkle 2s ease-in-out infinite; }
.yu-ill__twinkle--2 { animation-delay: -1s; }
.yu-ill__bounce, .yu-ill__cherry { animation: yu-ill-bounce 1.6s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
.yu-ill__star { animation: yu-ill-star 3s ease-in-out infinite; }
.yu-ill__blink { animation: yu-ill-blink 1.5s ease-in-out infinite; }
.yu-ill__blink--2 { animation-delay: -0.5s; }
.yu-ill__blink--3 { animation-delay: -1s; }
.yu-ill__wobble { transform-origin: 50% 100%; animation: yu-ill-wobble 2.4s ease-in-out infinite; }
.yu-ill__swing { transform-origin: 50% 0; animation: yu-ill-wobble 2s ease-in-out infinite; }
.yu-ill__spin { animation: yu-ill-spin 8s linear infinite; }
.yu-ill__steam { opacity: 0; animation: yu-ill-steam 2.6s ease-out infinite; }
.yu-ill__steam--2 { animation-delay: -0.9s; }
.yu-ill__steam--3 { animation-delay: -1.7s; }
.yu-ill__drip { animation: yu-ill-drip 1.8s cubic-bezier(0.55, 0, 0.8, 0.4) infinite; }
.yu-ill__print { animation: yu-ill-print 2.4s ease-in-out infinite; }
.yu-ill__fill { transform-origin: 50% 100%; animation: yu-ill-fill 3.2s ease-in-out infinite alternate; }
@keyframes yu-ill-steam { 0% { transform: translateY(4px); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: translateY(-8px); opacity: 0; } }
@keyframes yu-ill-drip { 0% { transform: translateY(-3px) scale(0.6); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateY(9px) scale(1, 1.1); opacity: 1; } 100% { transform: translateY(11px) scale(1.3, 0.5); opacity: 0; } }
@keyframes yu-ill-print { 0%, 15% { transform: translateY(-10px); } 70%, 100% { transform: translateY(0); } }
@keyframes yu-ill-fill { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }
@keyframes yu-ill-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes yu-ill-rock { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes yu-ill-flap { from { transform: rotate(0); } to { transform: rotate(-10deg); } }
@keyframes yu-ill-flap-2 { from { transform: rotate(0); } to { transform: rotate(10deg); } }
@keyframes yu-ill-lid { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-6px) rotate(-8deg); } 80% { transform: translateY(-2px) rotate(4deg); } }
@keyframes yu-ill-spin { to { transform: rotate(360deg); } }
@keyframes yu-ill-flicker { 0% { transform: scale(1, 1) rotate(-3deg); } 50% { transform: scale(0.92, 1.08) rotate(2deg); } 100% { transform: scale(1.04, 0.94) rotate(-1deg); } }
@keyframes yu-ill-rise { 0% { transform: translateY(8px) scale(0.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-14px) scale(1); opacity: 0; } }
@keyframes yu-ill-drop { 0% { transform: translateY(-4px) scale(0.8); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(20px) scale(1, 1.1); opacity: 1; } 100% { transform: translateY(24px) scale(1.3, 0.5); opacity: 0; } }
@keyframes yu-ill-ripple { 0%, 75% { transform: scale(0.4); opacity: 0; } 85% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes yu-ill-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes yu-ill-twinkle { 0%, 100% { transform: scale(0.5) rotate(0); opacity: 0.4; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes yu-ill-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 60% { transform: translateY(0) scale(1.05, 0.95); } }
@keyframes yu-ill-star { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(20deg) scale(1.2); } }
@keyframes yu-ill-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes yu-ill-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
/* Las ilustraciones chicas (menú, chips, buscador) quietas hasta que se pasa el mouse: menos movimiento a la vez */
.yu-circulo--chico .yu-ill *, .yu-circulo--mini .yu-ill * { animation-play-state: paused; }
a:hover .yu-circulo--chico .yu-ill *, a:hover .yu-circulo--mini .yu-ill * { animation-play-state: running; }

/* ------------------------------------------------------------------ carrusel genérico */
.yu-carrusel { position: relative; }
.yu-carrusel__pista { display: flex; gap: var(--yu-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 4px 2px 12px; margin: -4px -2px 0; list-style: none; }
.yu-carrusel__pista::-webkit-scrollbar { display: none; }
.yu-carrusel__pista > * { scroll-snap-align: start; flex: none; }
.yu-carrusel__flecha { position: absolute; top: calc(50% - 30px); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--yu-tinta); box-shadow: var(--yu-sombra-chica); transition: opacity 0.25s, transform 0.25s var(--yu-ease); }
.yu-carrusel__flecha svg { width: 20px; height: 20px; }
.yu-carrusel__flecha:hover { transform: scale(1.06); }
.yu-carrusel__flecha:disabled { opacity: 0; pointer-events: none; }
.yu-carrusel__flecha--izq { left: -14px; }
.yu-carrusel__flecha--der { right: -14px; }
@media (hover: none), (max-width: 749px) { .yu-carrusel__flecha:not(.yu-carrusel__flecha--cab) { display: none; } }
/* Flechas en el encabezado de la sección (carruseles de productos, como en Shopify) */
.yu-carrusel__flecha--cab { position: static; width: 44px; height: 44px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--yu-borde); }
.yu-carrusel__flecha--cab:hover { transform: none; box-shadow: inset 0 0 0 1.5px var(--yu-tinta); }
.yu-carrusel__flecha--cab:disabled { opacity: 0.35; pointer-events: none; }
@media (max-width: 749px) { .yu-carrusel__flecha--cab { width: 40px; height: 40px; } .yu-seccion__acciones .yu-link-flecha { display: none; } }
/* Bordes que se desvanecen donde hay más para ver (en vez de un corte recto) */
.yu-carrusel { --yu-desv: clamp(32px, 6vw, 72px); }
.yu-carrusel--desvanece.puede-der .yu-carrusel__pista { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--yu-desv)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--yu-desv)), transparent); }
.yu-carrusel--desvanece.puede-izq .yu-carrusel__pista { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--yu-desv)); mask-image: linear-gradient(90deg, transparent, #000 var(--yu-desv)); }
.yu-carrusel--desvanece.puede-izq.puede-der .yu-carrusel__pista { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--yu-desv), #000 calc(100% - var(--yu-desv)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--yu-desv), #000 calc(100% - var(--yu-desv)), transparent); }
@media (hover: hover) and (pointer: fine) { .yu-carrusel__pista { cursor: grab; } }
.yu-carrusel.is-arrastrando .yu-carrusel__pista { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.yu-carrusel.is-arrastrando a { pointer-events: none; }

/* ------------------------------------------------------------------ portada: categorías */
.yu-cats { width: var(--yu-ancho); margin-inline: auto; padding-top: calc(var(--yu-cab) + clamp(20px, 3vw, 34px)); padding-bottom: clamp(18px, 2.4vw, 28px); }
/* Sin categorías la fila se oculta: lo que sigue (el banner) deja el lugar de la barra */
.yu-cats[hidden] + * { margin-top: calc(var(--yu-cab) + clamp(20px, 3vw, 34px)); }
.yu-cats__titulo { font-size: 1.3rem; margin-bottom: 14px; }
.yu-cats__lista { gap: clamp(10px, 2vw, 28px); }
.yu-cats__item { width: clamp(84px, 9.5vw, 124px); }
.yu-cats__link { display: grid; justify-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 0.95rem; text-align: center; line-height: 1.2; }
.yu-cats__link .yu-circulo { --yu-circ: 100%; }
.yu-cats__link:hover .yu-circulo { transform: translateY(-4px); box-shadow: 0 14px 24px -14px rgb(22 35 59 / 0.45); }
.yu-cats__item.is-cargando { display: grid; justify-items: center; gap: 10px; }
.yu-cats__item.is-cargando .yu-circulo { --yu-circ: 100%; background: #f1e8d8; }

/* ------------------------------------------------------------------ portada: banner
   Como en la tienda original (fondos pastel con manchas de luz que se mueven, chispitas, burbujas que aparecen y
   flotan), con la composición corregida: mismo aire arriba y abajo del contenido, controles abajo a la izquierda
   alineados con el texto, y las tres burbujas ordenadas en un cuadrado sin pisarse. */
.yu-hero {
  position: relative; width: var(--yu-ancho-amplio); margin-inline: auto;
  border-radius: clamp(24px, 2.6vw, 40px); overflow: hidden; isolation: isolate;
  box-shadow: 0 34px 70px -46px rgb(22 35 59 / 0.5);
  --yu-hero-px: clamp(28px, 6vw, 96px);
  --yu-hero-py: clamp(48px, 4.6vw, 72px);
  --yu-hero-ctrl: 56px;   /* lugar de los controles, abajo */
}
.yu-hero__slides { display: grid; }
/* Todas las diapositivas en la misma celda: el alto es el de la más alta y no salta al pasar */
.yu-hero__slide {
  position: relative; grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center; gap: clamp(24px, 4vw, 64px); min-height: clamp(380px, 34vw, 480px);
  /* abajo se reserva el lugar de los controles: contenido + controles quedan con el mismo aire arriba y abajo */
  padding: var(--yu-hero-py) var(--yu-hero-px) calc(var(--yu-hero-py) + var(--yu-hero-ctrl)); overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 120% at 12% 0%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0) 55%), linear-gradient(135deg, var(--bg1), var(--bg2));
  opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.yu-hero__slide.is-activa { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s; z-index: 1; }
.yu-tema-menta { --bg1: #B5EADF; --bg2: #E8F7F3; }
.yu-tema-durazno { --bg1: #FFD3C2; --bg2: #FFF0E8; }
.yu-tema-sol { --bg1: #FFE08A; --bg2: #FFF6D9; }
.yu-tema-lavanda { --bg1: #D9CEFF; --bg2: #F1EDFF; }
.yu-tema-cielo { --bg1: #C6E5FF; --bg2: #EAF5FF; }
.yu-tema-turquesa { --bg1: #8FDCD3; --bg2: #D5F3EF; }

/* Manchas de luz que se mueven despacio y chispitas que titilan */
.yu-hero__manchas, .yu-hero__chispas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.yu-hero__manchas i { position: absolute; z-index: -1; border-radius: 50%; opacity: 0.5; animation: yu-hero-mancha 24s ease-in-out infinite alternate; }
.yu-hero__manchas i:nth-child(1) { top: -20%; left: -10%; width: 44%; aspect-ratio: 1; background: radial-gradient(circle, rgb(255 255 255 / 0.9), transparent 70%); }
.yu-hero__manchas i:nth-child(2) { right: -12%; bottom: -30%; width: 58%; aspect-ratio: 1; background: radial-gradient(circle, rgb(255 255 255 / 0.6), transparent 68%); animation-duration: 30s; animation-delay: -6s; }
.yu-hero__manchas i:nth-child(3) { top: 14%; right: 36%; width: 26%; aspect-ratio: 1; background: radial-gradient(circle, rgb(255 201 77 / 0.3), transparent 68%); animation-duration: 20s; animation-delay: -10s; }
@keyframes yu-hero-mancha { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, 7%) scale(1.1); } }
.yu-hero__chispas i { position: absolute; z-index: -1; width: 12px; height: 12px; background: currentColor; opacity: 0; animation: yu-hero-chispa 6s ease-in-out infinite;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.yu-hero__chispas i:nth-child(1) { top: 16%; left: 48%; color: #ffc94d; }
.yu-hero__chispas i:nth-child(2) { bottom: 24%; left: 52%; color: #fff; width: 9px; height: 9px; animation-delay: -3s; }
.yu-hero__chispas i:nth-child(3) { top: 12%; right: 8%; color: #fff; width: 10px; height: 10px; animation-delay: -1.5s; animation-duration: 7s; }
@keyframes yu-hero-chispa { 0%, 100% { opacity: 0; transform: scale(0.5) rotate(0); } 50% { opacity: 0.9; transform: scale(1) rotate(45deg); } }

/* Texto: entra escalonado */
.yu-hero__texto { display: grid; justify-items: start; gap: clamp(14px, 1.4vw, 20px); max-width: 600px; }
.yu-hero__texto > * { opacity: 0; transform: translateY(18px); }
.yu-hero__slide.is-activa .yu-hero__texto > * { animation: yu-hero-entra 0.9s var(--yu-ease) forwards; animation-delay: calc(0.15s + var(--d, 0) * 0.1s); }
@keyframes yu-hero-entra { to { opacity: 1; transform: none; } }
.yu-hero__etiqueta { padding: 7px 16px; border-radius: 999px; background: rgb(255 255 255 / 0.6); border: 1px solid rgb(255 255 255 / 0.85); font-size: 0.86rem; font-weight: 700; }
.yu-hero__titulo { font-size: clamp(2.3rem, 5.2vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; }
.yu-hero__bajada { font-size: clamp(1rem, 1.3vw, 1.18rem); color: color-mix(in srgb, var(--yu-tinta) 80%, transparent); max-width: 44ch; }
.yu-hero__boton { margin-top: 6px; box-shadow: 0 14px 26px -18px rgb(22 35 59 / 0.7); }
.yu-hero__boton svg { transition: transform 0.3s var(--yu-ease); }
.yu-hero__boton:hover svg { transform: translateX(3px); }

/* Arte: tres burbujas ordenadas (grande arriba a la derecha, mediana abajo a la derecha, chica abajo a la izquierda) */
.yu-hero__arte { position: relative; justify-self: center; width: min(100%, 390px); aspect-ratio: 1; }
.yu-hero__burbuja {
  position: absolute; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 58%), var(--b);
  border: 1px solid rgb(255 255 255 / 0.9); box-shadow: 0 30px 50px -30px rgb(22 35 59 / 0.45);
  opacity: 0; transform: scale(0.85);
}
.yu-hero__burbuja .yu-ill { width: 62%; height: 62%; }
.yu-hero__burbuja--1 { top: 0; right: 4%; width: 60%; --flota: 9s; }
.yu-hero__burbuja--2 { right: 0; bottom: 0; width: 36%; --flota: 8s; }
.yu-hero__burbuja--3 { left: 4%; bottom: 10%; width: 30%; --flota: 7s; }
.yu-hero__burbuja--flota { right: -2%; bottom: -2%; width: 30%; --flota: 8s; z-index: 1; }
.yu-hero__slide.is-activa .yu-hero__burbuja { animation: yu-hero-pop 1s var(--yu-ease) forwards, yu-hero-flota var(--flota) ease-in-out 1s infinite alternate; }
.yu-hero__slide.is-activa .yu-hero__burbuja--2 { animation-delay: 0.15s, 1.15s; }
.yu-hero__slide.is-activa .yu-hero__burbuja--3 { animation-delay: 0.3s, 1.3s; }
@keyframes yu-hero-pop { to { opacity: 1; transform: none; } }
@keyframes yu-hero-flota { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(-10px); } }
.yu-hero__foto { position: absolute; inset: 2%; overflow: hidden; border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; box-shadow: 0 30px 50px -30px rgb(22 35 59 / 0.5); animation: yu-hero-forma 18s ease-in-out infinite alternate; }
.yu-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
@keyframes yu-hero-forma { 0% { border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; } 50% { border-radius: 46% 54% 48% 52% / 55% 46% 54% 45%; } 100% { border-radius: 52% 48% 42% 58% / 46% 52% 48% 54%; } }

/* Controles (los de antes): barritas de progreso a la izquierda, pausa y flechas a la derecha, en una fila
   alineada con el texto dentro del lugar reservado abajo */
.yu-hero__controles {
  position: absolute; z-index: 2; left: var(--yu-hero-px); right: var(--yu-hero-px);
  bottom: calc(var(--yu-hero-py) + 6px); display: flex; align-items: center; gap: 6px;
}
.yu-hero__puntos { display: flex; gap: 6px; margin-right: auto; }
.yu-hero__punto { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; }
.yu-hero__punto i { position: absolute; left: 4px; right: 4px; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 99px; background: rgb(22 35 59 / 0.18); overflow: hidden; }
.yu-hero__punto i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--yu-tinta); transform: scaleX(0); transform-origin: left; }
.yu-hero__punto[aria-current] i::after { transform: scaleX(1); }
.yu-hero__punto.is-corriendo i::after { animation: yu-progreso-slide var(--yu-hero-ms, 6s) linear forwards; }
@keyframes yu-progreso-slide { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.yu-hero__pausa { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--yu-tinta); }
.yu-hero__pausa svg { width: 18px; height: 18px; }
.yu-hero__flecha { background: rgb(255 255 255 / 0.85); color: var(--yu-tinta); }
.yu-hero__flecha:hover { background: #fff; }

@media (min-width: 750px) and (max-width: 989px) { .yu-hero__slide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
@media (max-width: 749px) {
  .yu-hero { --yu-hero-px: 22px; border-radius: 26px; }
  /* Celular: el arte arriba en una fila compacta, el texto debajo; los controles abajo al centro */
  .yu-hero { --yu-hero-py: 22px; --yu-hero-ctrl: 52px; }
  .yu-hero__slide { grid-template-columns: 1fr; align-content: start; gap: 16px; min-height: 0; padding: 20px 22px calc(18px + var(--yu-hero-ctrl)); }
  .yu-hero__arte { order: -1; justify-self: stretch; width: 100%; aspect-ratio: auto; height: 136px; display: flex; justify-content: center; align-items: center; gap: 10px; }
  .yu-hero__burbuja { position: static; flex: none; }
  .yu-hero__burbuja--1 { width: 128px; order: 2; }
  .yu-hero__burbuja--2 { width: 80px; order: 3; }
  .yu-hero__burbuja--3 { width: 72px; order: 1; }
  .yu-hero__burbuja--flota { display: none; }
  .yu-hero__foto { position: relative; inset: auto; width: 136px; height: 136px; }
  .yu-hero__titulo { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .yu-hero__boton { width: 100%; }
  .yu-hero__flecha { display: none; }
  .yu-hero__controles { bottom: 12px; }
}

/* ------------------------------------------------------------------ portada: franja de pago (10% transferencia o efectivo)
   Como en la tienda original: manchas de luz que se mueven, monedas que suben, brillo que recorre el número y una
   órbita punteada alrededor de la ilustración. */
.yu-franja {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 4vw, 56px);
  width: var(--yu-ancho-amplio); margin: clamp(40px, 5vw, 64px) auto 0;
  min-height: clamp(220px, 24vw, 300px); padding: clamp(32px, 4.5vw, 60px) clamp(28px, 6vw, 96px);
  border-radius: clamp(24px, 3vw, 40px); overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 140% at 10% 0%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 55%), linear-gradient(120deg, #B5EADF, #E8F7F3);
  border: 1px solid rgb(255 255 255 / 0.9); box-shadow: 0 30px 60px -46px rgb(22 35 59 / 0.45);
}
.yu-franja__manchas, .yu-franja__monedas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.yu-franja__manchas i { position: absolute; border-radius: 50%; animation: yu-franja-mancha 22s ease-in-out infinite alternate; }
.yu-franja__manchas i:nth-child(1) { top: -40%; left: 30%; width: 40%; aspect-ratio: 1; background: radial-gradient(circle, rgb(255 255 255 / 0.7), transparent 70%); }
.yu-franja__manchas i:nth-child(2) { right: -10%; bottom: -60%; width: 50%; aspect-ratio: 1; background: radial-gradient(circle, rgb(255 201 77 / 0.3), transparent 68%); animation-duration: 28s; }
@keyframes yu-franja-mancha { to { transform: translate(-8%, 10%) scale(1.1); } }
.yu-franja__monedas i {
  position: absolute; bottom: -24px; width: 16px; height: 16px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #ffc94d 60%, #e9a92a); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.5);
  animation: yu-franja-moneda 9s linear infinite;
}
.yu-franja__monedas i:nth-child(1) { left: 34%; }
.yu-franja__monedas i:nth-child(2) { left: 52%; width: 11px; height: 11px; animation-delay: -2s; animation-duration: 11s; }
.yu-franja__monedas i:nth-child(3) { left: 68%; animation-delay: -4.5s; }
.yu-franja__monedas i:nth-child(4) { left: 82%; width: 12px; height: 12px; animation-delay: -6s; animation-duration: 10s; }
.yu-franja__monedas i:nth-child(5) { left: 8%; width: 10px; height: 10px; animation-delay: -7.5s; }
@keyframes yu-franja-moneda { 0% { opacity: 0; transform: translateY(0) rotateY(0); } 15% { opacity: 0.85; } 85% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-340px) rotateY(720deg); } }
.yu-franja__numero { display: flex; align-items: flex-start; font-family: var(--yu-titulos); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; }
.yu-franja__numero b {
  font-size: clamp(4rem, 9vw, 8rem); font-weight: 800; color: transparent;
  background: linear-gradient(100deg, var(--yu-tinta) 40%, var(--yu-acento) 50%, var(--yu-tinta) 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; animation: yu-franja-brillo 5s ease-in-out infinite;
}
@keyframes yu-franja-brillo { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.yu-franja__numero span { margin: 0.3em 0 0 4px; font-size: clamp(1.4rem, 2.6vw, 2.3rem); letter-spacing: -0.02em; color: var(--yu-tinta); }
.yu-franja__texto { display: grid; gap: 8px; max-width: 620px; }
.yu-franja__texto h2 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.yu-franja__texto p:not(.yu-etiqueta-seccion) { color: color-mix(in srgb, var(--yu-tinta) 78%, transparent); max-width: 52ch; }
.yu-franja__orbita { position: relative; display: grid; place-items: center; padding: 14px; }
.yu-franja__anillo { position: absolute; inset: 0; border: 1.5px dashed rgb(14 124 136 / 0.35); border-radius: 50%; animation: yu-ill-spin 24s linear infinite; }
.yu-franja__anillo::after { content: ''; position: absolute; top: 8%; right: 8%; width: 10px; height: 10px; border-radius: 50%; background: var(--yu-sol); }
.yu-franja__ill { display: grid; place-items: center; width: clamp(96px, 10vw, 140px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.9);
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 58%), rgb(255 255 255 / 0.6); }
.yu-franja__ill .yu-ill { width: 70%; height: 70%; }
@media (max-width: 989px) { .yu-franja { grid-template-columns: auto minmax(0, 1fr); } .yu-franja__orbita { display: none; } }
@media (max-width: 749px) {
  .yu-franja { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 28px 22px; }
  .yu-franja__orbita { display: grid; position: absolute; top: 14px; right: 14px; padding: 8px; }
  .yu-franja__ill { width: 72px; }
}
@media (prefers-reduced-motion: reduce) { .yu-franja__numero b { color: var(--yu-tinta); } }

/* ------------------------------------------------------------------ portada: explorar (categorías del día) */
/* Explorar: una grande a la izquierda (dos filas) y las demás de a dos por columna, como en la tienda original */
.yu-explorar { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-auto-rows: clamp(150px, 13.5vw, 196px); gap: clamp(10px, 1.4vw, 18px); }
.yu-explorar__tarjeta {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(16px, 1.6vw, 22px);
  border-radius: var(--yu-r-foto); background: var(--yu-glow), var(--yu-bg); text-decoration: none; overflow: hidden; isolation: isolate;
  container-type: inline-size; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7); transition: transform 0.45s var(--yu-ease), box-shadow 0.45s var(--yu-ease);
}
.yu-explorar__tarjeta.is-grande, .yu-explorar__tarjeta.is-alta { grid-row: span 2; }
.yu-explorar__tarjeta:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7), var(--yu-sombra); }
.yu-explorar__texto { position: relative; z-index: 1; display: grid; gap: 4px; min-width: 0; max-width: 62%; }
.yu-explorar__tarjeta.is-grande .yu-explorar__texto { max-width: 100%; }
.yu-explorar__texto strong { font-family: var(--yu-titulos); font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.yu-explorar__tarjeta.is-grande .yu-explorar__texto strong { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.yu-explorar__texto small { color: var(--yu-tinta-suave); font-size: 0.86rem; }
.yu-explorar__ver { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; margin-top: auto; border-radius: 50%; background: #fff; color: var(--yu-tinta); transition: background-color 0.3s, color 0.3s; }
.yu-explorar__ver svg { width: 16px; height: 16px; transition: transform 0.3s var(--yu-ease); }
.yu-explorar__tarjeta:hover .yu-explorar__ver { background: var(--yu-turq); color: #fff; }
.yu-explorar__tarjeta:hover .yu-explorar__ver svg { transform: translateX(2px); }
/* Círculo blanco grande que sale por el borde derecho, con la ilustración adentro */
.yu-explorar__circulo { position: absolute; z-index: 0; top: 50%; right: -14%; display: grid; place-items: center; width: 58%; aspect-ratio: 1; border-radius: 50%; translate: 0 -50%;
  background: radial-gradient(circle at 35% 35%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.55) 70%); transition: transform 0.6s var(--yu-ease); }
.yu-explorar__tarjeta.is-grande .yu-explorar__circulo, .yu-explorar__tarjeta.is-alta .yu-explorar__circulo { top: auto; bottom: -10%; right: -12%; width: 82%; translate: none; }
.yu-explorar__tarjeta:hover .yu-explorar__circulo { transform: scale(1.06); }
.yu-explorar__ill { width: 50%; height: 50%; margin-right: 14%; transition: transform 0.6s var(--yu-ease); }
.yu-explorar__tarjeta.is-grande .yu-explorar__ill, .yu-explorar__tarjeta.is-alta .yu-explorar__ill { margin: 0 10% 10% 0; }
.yu-explorar__tarjeta:hover .yu-explorar__ill { transform: rotate(-6deg) scale(1.05); }
@container (max-width: 200px) { .yu-explorar__circulo { width: 64%; right: -20%; } .yu-explorar__texto { max-width: 70%; } }
@media (max-width: 749px) {
  .yu-explorar { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px; }
  .yu-explorar__tarjeta { padding: 14px; }
  .yu-explorar__tarjeta.is-grande, .yu-explorar__tarjeta.is-alta { grid-column: 1 / -1; grid-row: auto; }
  .yu-explorar__tarjeta.is-grande .yu-explorar__circulo, .yu-explorar__tarjeta.is-alta .yu-explorar__circulo { top: 50%; bottom: auto; right: -6%; width: 46%; translate: 0 -50%; }
  .yu-explorar__tarjeta.is-grande .yu-explorar__ill, .yu-explorar__tarjeta.is-alta .yu-explorar__ill { margin: 0 8% 0 0; }
  .yu-explorar__texto strong { font-size: 1.05rem; }
  .yu-explorar__tarjeta.is-grande .yu-explorar__texto strong { font-size: 1.5rem; }
  .yu-explorar__texto small { font-size: 0.78rem; }
  .yu-explorar__ver { width: 36px; height: 36px; }
}

/* ------------------------------------------------------------------ tarjetas de producto */
.yu-grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--yu-gap); }
.yu-fila-cards > .yu-card { width: calc((100% - 3 * var(--yu-gap)) / 4); }
@media (min-width: 1600px) { .yu-grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); } .yu-fila-cards > .yu-card { width: calc((100% - 4 * var(--yu-gap)) / 5); } }
@media (max-width: 1099px) { .yu-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yu-fila-cards > .yu-card { width: calc((100% - 2 * var(--yu-gap)) / 3); } }
@media (max-width: 749px) { .yu-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .yu-fila-cards > .yu-card { width: calc((100% - var(--yu-gap)) / 2); } }

.yu-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-width: 0; container-type: inline-size; }
/* Tarjeta angosta (tablet en 4 columnas, celular): Agregar queda solo con el ícono para que la fila entre */
@container (max-width: 230px) {
  .yu-card__agregar span { display: none; }
  .yu-card__agregar { flex: none; width: 42px; padding: 0; }
  .yu-card__comprar .yu-cant { flex: 1; min-width: 0; }
  .yu-card__comprar .yu-cant input { min-width: 0; }
  .yu-card__elegir { font-size: 0.86rem; padding: 0 10px; }
}
.yu-card__foto {
  position: relative; display: block; aspect-ratio: 1; border-radius: var(--yu-r-foto); overflow: hidden;
  background: var(--yu-glow), linear-gradient(140deg, var(--yu-foto-a, #fff8ee), var(--yu-foto-b, #f6ecdc));
}
.yu-card__foto img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform 0.7s var(--yu-ease); }
.yu-card:hover .yu-card__foto img { transform: scale(1.045); }
.yu-etiqueta { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.yu-etiqueta--oferta { background: var(--yu-coral); color: #fff; }
.yu-etiqueta--promo { background: var(--yu-turq); color: #fff; }
.yu-ficha__promo { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: var(--yu-crema-2); color: var(--yu-turq); font-size: 0.95rem; }
.yu-ficha__promo svg { flex: none; width: 18px; height: 18px; }
.yu-etiqueta--agotado { background: var(--yu-tinta); color: #fff; }
.yu-fav { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--yu-tinta); box-shadow: 0 6px 14px -10px rgb(22 35 59 / 0.6); transition: transform 0.25s var(--yu-ease), color 0.2s; }
.yu-fav svg { width: 20px; height: 20px; }
.yu-fav:hover { transform: scale(1.08); }
.yu-fav[aria-pressed='true'] { color: var(--yu-coral); }
.yu-fav[aria-pressed='true'] { --yu-fill: currentColor; }
.yu-fav.is-latido { animation: yu-latido 0.5s var(--yu-ease); }
@keyframes yu-latido { 35% { transform: scale(1.25); } 70% { transform: scale(0.95); } }
.yu-card__fav { position: absolute; top: 10px; right: 10px; z-index: 2; }
.yu-card__info { display: grid; align-content: start; gap: 6px; padding-inline: 2px; }
.yu-card__titulo { font-family: var(--yu-texto); font-size: 0.98rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-wrap: pretty; }
.yu-card__titulo a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; }
.yu-card__titulo a:hover { color: var(--yu-turq); }
.yu-card__titulo a::before { content: ''; position: absolute; inset: 0 0 56px; z-index: 1; border-radius: var(--yu-r-foto); }
.yu-card__comprar { position: relative; z-index: 2; display: flex; gap: 6px; }
.yu-card__agregar { flex: 1; }
.yu-card__elegir { width: 100%; }
@media (max-width: 749px) {
  .yu-card__agregar span { display: none; }
  .yu-card__agregar { flex: none; width: 42px; padding: 0; }
  .yu-card__comprar .yu-cant { flex: 1; }
  .yu-card__titulo { font-size: 0.92rem; }
  .yu-fav { width: 36px; height: 36px; }
  .yu-card__elegir { font-size: 0.86rem; padding: 0 10px; }
}

/* Precio: con transferencia grande (turquesa), el normal chico debajo */
.yu-precio { display: grid; gap: 1px; }
.yu-precio__fila { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.yu-precio b { font-family: var(--yu-titulos); font-size: 1.22rem; font-weight: 800; color: var(--yu-turq); letter-spacing: -0.01em; }
.yu-precio__tag { padding: 2px 8px; border-radius: 999px; background: var(--yu-menta); color: var(--yu-turq-h); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.yu-precio__otro { font-size: 0.8rem; color: var(--yu-tinta-suave); }
.yu-precio s { color: var(--yu-tinta-suave); font-size: 0.85em; }
.yu-precio--grande b { font-size: clamp(1.9rem, 3.2vw, 2.4rem); }
.yu-precio--grande .yu-precio__tag { font-size: 0.85rem; padding: 4px 12px; }
.yu-precio--grande .yu-precio__otro { font-size: 0.95rem; margin-top: 2px; }
.yu-precio--oculto { color: var(--yu-tinta-suave); font-size: 0.9rem; }
@media (max-width: 749px) { .yu-precio:not(.yu-precio--grande) b { font-size: 1.08rem; } .yu-precio__tag { font-size: 0.66rem; padding: 2px 6px; } }

/* Cantidad [− n +] */
.yu-cant { display: inline-flex; align-items: center; min-height: 50px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--yu-borde); }
.yu-cant button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--yu-tinta); }
.yu-cant button svg { width: 18px; height: 18px; }
.yu-cant button:hover:not(:disabled) { background: var(--yu-crema); }
.yu-cant button:disabled { opacity: 0.3; cursor: default; }
.yu-cant input, .yu-cant output { width: 36px; padding: 0; border: 0; background: none; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.yu-cant input::-webkit-inner-spin-button, .yu-cant input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.yu-cant input:focus-visible { outline: 2px solid var(--yu-acento); border-radius: 6px; }
.yu-cant--chica { min-height: 42px; }
.yu-cant--chica button { width: 34px; height: 38px; }
.yu-cant--chica input, .yu-cant--chica output { width: 26px; font-size: 0.92rem; }

/* Fantasmas de carga (mismo tamaño que lo real) */
.yu-card--cargando .yu-card__foto, .yu-linea-fantasma, .yu-cats__item.is-cargando .yu-circulo { background: linear-gradient(90deg, #f3eadb 25%, #faf3e7 50%, #f3eadb 75%) 0 0 / 200% 100% !important; animation: yu-brillo-carga 1.3s linear infinite; }
.yu-linea-fantasma { display: block; height: 14px; width: 80%; border-radius: 8px; }
.yu-linea-fantasma--corta { width: 45%; height: 18px; }
@keyframes yu-brillo-carga { to { background-position: -200% 0; } }
.yu-grilla.is-cargando { opacity: 0.55; pointer-events: none; transition: opacity 0.2s; }

/* ------------------------------------------------------------------ catálogo */
.yu-migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 0.88rem; color: var(--yu-tinta-suave); }
.yu-migas li { display: inline-flex; align-items: center; gap: 4px; }
.yu-migas li + li::before { content: '›'; opacity: 0.6; }
.yu-migas a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; font-weight: 600; color: var(--yu-tinta); }
.yu-migas a:hover { color: var(--yu-turq); }
.yu-migas [aria-current] { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yu-cat-cab { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(24px, 4vw, 48px) clamp(22px, 4vw, 56px); border-radius: clamp(24px, 3vw, 32px); background: var(--yu-glow), linear-gradient(120deg, #d6f3ec, #e8f8f4 55%, #fff3e4); }
.yu-cat-cab h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; }
.yu-cat-cab__desc { margin-top: 10px; max-width: 60ch; color: var(--yu-tinta-suave); }
.yu-cat-cab .yu-circulo { box-shadow: var(--yu-sombra-chica); }
.yu-cat-cab + .yu-grilla, .yu-cat-cab + .yu-vacio, .yu-cat-cab + .yu-contacto__grilla { margin-top: clamp(24px, 3vw, 40px); }
.yu-cat-cab__corazon { color: var(--yu-coral); }
.yu-cat-cab__corazon { --yu-fill: #FFD3CC; }

.yu-barra-cat {
  position: sticky; top: calc(var(--ns-gap) + 70px + 8px); /* debajo del header (70px de alto), apenas separada */ z-index: 20;
  display: flex; align-items: center; gap: 10px 14px; margin: 18px 0 12px; padding: 8px 8px 8px 8px;
  border-radius: 999px; background: color-mix(in srgb, #fff 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--yu-borde); transition: box-shadow 0.3s;
}
.yu-barra-cat.is-pegada { box-shadow: inset 0 0 0 1px var(--yu-borde), var(--yu-sombra); }
.yu-barra-cat__buscar { position: relative; flex: 1; min-width: 0; }
.yu-barra-cat__buscar svg { position: absolute; left: 16px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; color: var(--yu-tinta-suave); pointer-events: none; }
.yu-barra-cat__buscar input { width: 100%; min-height: 44px; padding: 0 16px 0 44px; border: 0; border-radius: 999px; background: var(--yu-crema); font-weight: 500; }
.yu-barra-cat__buscar input:focus { outline: none; box-shadow: 0 0 0 2px var(--yu-acento); }
.yu-barra-cat__total { font-size: 0.9rem; color: var(--yu-tinta-suave); white-space: nowrap; font-weight: 600; }
.yu-barra-cat .yu-select select { border: 0; background: var(--yu-crema); }
.yu-chips--cats { margin-bottom: 6px; }
.yu-chips--sub { margin-bottom: 6px; }
.yu-filtros { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 6px; }
.yu-grilla--catalogo { margin-top: 18px; }
.yu-mas { display: grid; justify-items: center; gap: 12px; margin-top: 40px; text-align: center; color: var(--yu-tinta-suave); font-weight: 600; font-size: 0.92rem; }
.yu-mas__barra { width: 200px; height: 4px; border-radius: 99px; background: var(--yu-borde); overflow: hidden; }
.yu-mas__barra span { display: block; height: 100%; background: var(--yu-turq); border-radius: inherit; }
.yu-vacio { grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; padding: 48px 16px; text-align: center; color: var(--yu-tinta-suave); }
.yu-vacio h1, .yu-vacio h2 { color: var(--yu-tinta); font-size: clamp(1.5rem, 3vw, 2.2rem); }
.yu-vacio .yu-circulo { --yu-circ: 96px; }
.yu-vacio .yu-circulo > svg:not(.yu-ill) { width: 36%; height: 36%; color: var(--yu-tinta); }
.yu-vacio--pagina { min-height: 60svh; align-content: center; }
.yu-vacio__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.yu-sugeridos { grid-column: 1 / -1; margin-top: 12px; }
.yu-sugeridos h2 { font-size: 1.3rem; margin-bottom: 16px; }

@media (max-width: 749px) {
  .yu-cat-cab .yu-circulo { --yu-circ: 72px; }
  .yu-barra-cat { flex-wrap: wrap; border-radius: 24px; padding: 8px; top: calc(var(--ns-gap) + 58px + 6px); }
  .yu-barra-cat__buscar { flex-basis: 100%; }
  .yu-barra-cat__total { order: 3; margin-left: auto; }
  .yu-barra-cat .yu-interruptor { order: 1; padding-left: 6px; }
  .yu-barra-cat .yu-select { order: 2; }
  .yu-barra-cat .yu-select select { padding-right: 34px; max-width: 160px; }
}

/* ------------------------------------------------------------------ ficha de producto */
.yu-ficha-pagina > .yu-seccion { width: 100%; }
.yu-ficha { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.yu-galeria { position: sticky; top: calc(var(--yu-cab) + 16px); display: grid; gap: 12px; min-width: 0; }
.yu-galeria__escenario { position: relative; border-radius: calc(var(--yu-r-foto) + 6px); overflow: hidden; background: var(--yu-glow), linear-gradient(140deg, var(--yu-foto-a, #fff8ee), var(--yu-foto-b, #f6ecdc)); }
.yu-galeria__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.yu-galeria__pista::-webkit-scrollbar { display: none; }
.yu-galeria__pista:focus-visible { outline: 2px solid var(--yu-acento); outline-offset: -4px; }
.yu-galeria__foto { flex: 0 0 100%; margin: 0; aspect-ratio: 1; scroll-snap-align: center; }
.yu-galeria__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.yu-galeria__foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.yu-galeria__etiqueta { top: 16px; left: 16px; font-size: 0.9rem; }
.yu-galeria__puntos { position: absolute; left: 0; right: 0; bottom: 14px; display: none; justify-content: center; gap: 6px; }
.yu-galeria__puntos span { width: 7px; height: 7px; border-radius: 99px; background: rgb(22 35 59 / 0.22); transition: width 0.3s var(--yu-ease), background-color 0.3s; }
.yu-galeria__puntos span.is-activo { width: 20px; background: var(--yu-tinta); }
.yu-galeria__flecha { position: absolute; top: 50%; margin-top: -22px; background: rgb(255 255 255 / 0.9); box-shadow: var(--yu-sombra-chica); opacity: 0; transition: opacity 0.25s; }
.yu-galeria__flecha--izq { left: 12px; }
.yu-galeria__flecha--der { right: 12px; }
.yu-galeria__escenario:hover .yu-galeria__flecha, .yu-galeria__flecha:focus-visible { opacity: 1; }
/* Miniaturas abajo, en carrusel */
.yu-galeria__tira .yu-carrusel__pista { gap: 10px; padding: 4px 2px; margin: 0; }
.yu-galeria__mini { flex: none; width: clamp(64px, 6.5vw, 88px); padding: 0; border: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 1; background: var(--yu-glow), linear-gradient(140deg, var(--yu-foto-a, #fff8ee), var(--yu-foto-b, #f6ecdc)); box-shadow: inset 0 0 0 1.5px rgb(22 35 59 / 0.06); opacity: 0.7; transition: opacity 0.2s, box-shadow 0.2s, transform 0.3s var(--yu-ease); }
.yu-galeria__mini img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.yu-galeria__mini:hover { opacity: 1; transform: translateY(-2px); }
.yu-galeria__mini[aria-selected='true'] { opacity: 1; box-shadow: 0 0 0 2px var(--yu-turq); }
.yu-galeria__tira .yu-carrusel__flecha { top: 50%; width: 36px; height: 36px; margin-top: -18px; }
.yu-galeria__tira .yu-carrusel__flecha--izq { left: -10px; }
.yu-galeria__tira .yu-carrusel__flecha--der { right: -10px; }

.yu-ficha__info { display: grid; gap: 18px; min-width: 0; }
.yu-ficha__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.yu-ficha__cab h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; }
.yu-ficha__fav { flex: none; width: 46px; height: 46px; box-shadow: inset 0 0 0 1.5px var(--yu-borde); }
.yu-dispo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-self: start; padding: 8px 14px; border-radius: 999px; font-size: 0.9rem; }
.yu-dispo.is-si { background: #e3f4ec; color: var(--yu-ok); }
.yu-dispo.is-no { background: #fdeee6; color: #A3360B; }
.yu-dispo small { color: var(--yu-tinta-suave); font-size: 0.86rem; }
.yu-dispo__punto { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
.yu-dispo.is-si .yu-dispo__punto { animation: yu-pulso 2.4s ease-in-out infinite; }
@keyframes yu-pulso { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 0%, transparent); } }
.yu-ficha__desc { color: color-mix(in srgb, var(--yu-tinta) 85%, transparent); }
.yu-texto-rico p { margin: 0 0 0.6em; }
.yu-texto-rico p:last-child { margin-bottom: 0; }
.yu-texto-rico ul { margin: 0 0 0.6em; padding-left: 1.2em; }
.yu-texto-rico a { color: var(--yu-turq); font-weight: 600; }
.yu-opcion { display: grid; gap: 10px; margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--yu-borde); }
.yu-opcion legend { padding: 0 0 10px; font-weight: 600; float: left; width: 100%; }
.yu-opcion legend b { font-weight: 700; color: var(--yu-turq); }
.yu-opcion__valores { display: flex; flex-wrap: wrap; gap: 8px; clear: both; }
.yu-opcion__valores button { min-width: 64px; min-height: 46px; padding: 0 18px; border: 1.5px solid var(--yu-borde); border-radius: 999px; background: #fff; font-weight: 600; transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s var(--yu-ease); }
.yu-opcion__valores button:hover { border-color: var(--yu-tinta); }
.yu-opcion__valores button[aria-pressed='true'] { border-color: var(--yu-turq); background: var(--yu-turq); color: #fff; }
.yu-opcion__valores button.is-agotado { color: var(--yu-tinta-suave); text-decoration: line-through; background: #faf6ef; }
.yu-opcion__valores button.is-agotado[aria-pressed='true'] { background: var(--yu-tinta-suave); color: #fff; }
.yu-muestra { width: 44px; min-width: 44px !important; padding: 0 !important; border-radius: 50%; background: var(--color) !important; border: 2px solid rgb(0 0 0 / 0.12) !important; }
.yu-muestra[aria-pressed='true'] { outline: 2px solid var(--yu-turq); outline-offset: 3px; }
.yu-ficha__nota { color: var(--yu-tinta-suave); font-size: 0.92rem; }
.yu-ficha__comprar { display: flex; gap: 10px; }
.yu-ficha__comprar .yu-cant { flex: none; min-height: 54px; }
.yu-ficha__agregar { flex: 1; }
.yu-ficha__descuento { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff7e0; font-size: 0.92rem; font-weight: 600; }
.yu-ficha__descuento:empty { display: none; }
.yu-ficha__descuento svg { width: 20px; height: 20px; flex: none; color: #B7791F; }
.yu-ficha__descuento b { color: var(--yu-turq-h); }
.yu-avisame { display: grid; gap: 10px; padding: 16px; border-radius: var(--yu-r); background: #fff; box-shadow: inset 0 0 0 1px var(--yu-borde); }
.yu-avisame p strong { display: block; }
.yu-avisame p small { color: var(--yu-tinta-suave); }
.yu-avisame__fila { display: flex; gap: 8px; }
.yu-avisame__fila input { flex: 1; min-width: 0; }
.yu-beneficios { display: grid; gap: 12px; margin: 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--yu-borde); }
.yu-beneficios li { display: flex; align-items: center; gap: 12px; }
.yu-beneficios li > span:last-child { display: grid; }
.yu-beneficios strong { font-size: 0.97rem; }
.yu-beneficios a { text-decoration: none; }
.yu-beneficios a:hover strong { color: var(--yu-turq); }
.yu-beneficios small { color: var(--yu-tinta-suave); font-size: 0.88rem; }
.yu-promo { display: flex; gap: 14px; padding: 18px; border-radius: var(--yu-r); background: var(--yu-glow), var(--yu-menta); color: #0B5D66; }
.yu-promo__ill { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: #fff; }
.yu-promo__ill .yu-ill { width: 70%; height: 70%; }
.yu-promo strong { display: block; color: var(--yu-tinta); font-size: 1.02rem; margin-bottom: 4px; }
.yu-promo ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; padding: 0; list-style: none; }
.yu-promo li { padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 0.86rem; }
.yu-promo small { font-size: 0.86rem; }
.yu-acordeon { border-top: 1px solid var(--yu-borde); }
.yu-acordeon details { border-bottom: 1px solid var(--yu-borde); }
.yu-acordeon summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-weight: 700; list-style: none; cursor: pointer; }
.yu-acordeon summary::-webkit-details-marker { display: none; }
.yu-acordeon summary svg { width: 20px; height: 20px; flex: none; transition: transform 0.3s var(--yu-ease); }
.yu-acordeon details[open] summary svg { transform: rotate(45deg); }
.yu-acordeon details > :not(summary) { padding-bottom: 18px; color: var(--yu-tinta-suave); }
.yu-acordeon details[open] > :not(summary) { animation: yu-aparece 0.35s var(--yu-ease); }
@keyframes yu-aparece { from { opacity: 0; transform: translateY(-4px); } }
.yu-specs { display: grid; margin: 0; border-radius: 12px; overflow: hidden; }
.yu-specs div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; }
.yu-specs div:nth-child(odd) { background: #fff; }
.yu-specs dt { color: var(--yu-tinta-suave); }
.yu-specs dd { margin: 0; color: var(--yu-tinta); font-weight: 600; text-align: right; }

/* Barra de compra al bajar (compu y celular): aparece cuando el botón principal sale de pantalla */
.yu-compra-fija {
  position: fixed; z-index: 43; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); width: min(760px, calc(100% - 20px));
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border-radius: 26px;
  background: color-mix(in srgb, #fff 92%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 24px 50px -24px rgb(22 35 59 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.9);
  transform: translate(-50%, 150%); transition: transform 0.5s var(--yu-ease);
}
.yu-compra-fija.is-visible { transform: translate(-50%, 0); }
.yu-compra-fija__foto { flex: none; width: 52px; height: 52px; border-radius: 16px; overflow: hidden; background: linear-gradient(140deg, var(--yu-foto-a, #fff8ee), var(--yu-foto-b, #f6ecdc)); }
.yu-compra-fija__foto img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.yu-compra-fija__texto { flex: 1; min-width: 0; display: grid; }
.yu-compra-fija__texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.yu-compra-fija__texto b { color: var(--yu-turq); }
.yu-compra-fija__texto small { color: var(--yu-tinta-suave); }
.yu-compra-fija .yu-btn { min-height: 46px; }
@media (max-width: 749px) { .yu-compra-fija__ya { display: none; } .yu-compra-fija { gap: 10px; border-radius: 22px; } .yu-compra-fija__foto { width: 44px; height: 44px; border-radius: 12px; } }
.yu-lupa { width: min(92vw, 860px); max-height: 92svh; padding: 0; border: 0; border-radius: var(--yu-r-foto); background: var(--yu-crema-2); box-shadow: var(--yu-sombra); }
.yu-lupa::backdrop { background: rgb(22 35 59 / 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.yu-lupa[open] { animation: yu-aparece 0.3s var(--yu-ease); }
.yu-lupa__foto img { width: 100%; max-height: 88svh; object-fit: contain; }
.yu-lupa__cerrar { position: absolute; top: 12px; right: 12px; background: #fff; box-shadow: var(--yu-sombra-chica); }

@media (max-width: 989px) {
  .yu-ficha { grid-template-columns: 1fr; gap: 22px; }
  .yu-galeria { position: static; }
  .yu-galeria__flecha { display: none; }
  .yu-ficha-pagina { padding-bottom: 110px; }
}
@media (max-width: 749px) {
  .yu-ficha-pagina { width: 100%; padding-inline: 0; }
  .yu-ficha-pagina > .yu-migas, .yu-ficha__info, .yu-ficha-pagina > .yu-seccion { padding-inline: var(--yu-margen); }
  .yu-ficha-pagina > .yu-seccion { width: 100%; }
  .yu-galeria__escenario { border-radius: 0; }
  .yu-galeria__tira { padding-inline: var(--yu-margen); }
  .yu-ficha__comprar .yu-cant button { width: 40px; }
}

/* ------------------------------------------------------------------ carrito (firma NS 4) */
.carrito-velo { position: fixed; inset: 0; z-index: 70; background: rgb(22 35 59 / 0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.35s ease; }
.carrito-velo.is-open { opacity: 1; }
.carrito {
  position: fixed; z-index: 71; top: 10px; right: 10px; bottom: 10px; width: min(440px, calc(100% - 20px));
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; border-radius: 24px; background: var(--yu-crema-2); overflow: hidden;
  box-shadow: 0 30px 60px -20px rgb(22 35 59 / 0.45);
  transform: translateX(calc(100% + 24px)); transition: transform 0.5s var(--yu-ease);
}
.carrito:not(.is-open) { visibility: hidden; transition: transform 0.5s var(--yu-ease), visibility 0s linear 0.5s; }
.carrito.is-open { transform: none; }
/* Firma NS 4 en celular: el carrito sube desde abajo como una hoja, con una manija para arrastrarlo y cerrarlo */
.carrito__asa { display: none; }
@media (max-width: 749px) {
  .carrito {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: min(88svh, 760px);
    border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(calc(100% + 20px)); transition: transform 0.5s var(--yu-ease);
  }
  .carrito.is-open { transform: translateY(var(--arrastre, 0px)); }
  .carrito.is-arrastrando { transition: none; }
  .carrito { grid-template-rows: auto auto auto minmax(0, 1fr) auto; } /* con la manija visible hay una fila más */
  .carrito__asa { display: grid; place-items: center; height: 22px; padding-top: 8px; touch-action: none; cursor: grab; }
  .carrito__asa span { width: 44px; height: 5px; border-radius: 99px; background: rgb(22 35 59 / 0.18); }
  .carrito__cab { padding-top: 4px; touch-action: none; }
}
.carrito__cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 10px 22px; }
.carrito__cab h2 { font-size: 1.3rem; }
.carrito__cab h2 span { color: var(--yu-tinta-suave); font-weight: 600; font-size: 0.95rem; }
.carrito__cab .yu-icono-btn { background: #fff; }
.carrito__progreso { padding: 0 16px; }
.carrito__progreso:empty { display: none; }
.carrito__lineas { overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px; }
.yu-lineas { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.yu-linea { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px; border-radius: 18px; background: #fff; transition: opacity 0.2s; }
.yu-linea.is-cambiando { opacity: 0.55; }
.yu-linea__foto { display: block; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: var(--yu-crema); }
.yu-linea__foto img, .yu-linea__foto .yu-sin-foto { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.yu-linea__info { display: grid; gap: 2px; min-width: 0; }
.yu-linea__titulo { font-weight: 600; font-size: 0.93rem; line-height: 1.3; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yu-linea__titulo:hover { color: var(--yu-turq); }
.yu-linea small { color: var(--yu-tinta-suave); font-size: 0.84rem; }
.yu-linea__acciones { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.yu-linea__acciones .yu-cant { min-height: 38px; }
.yu-linea__quitar { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--yu-tinta-suave); }
.yu-linea__quitar svg { width: 19px; height: 19px; }
.yu-linea__quitar:hover { color: var(--yu-error); background: #fdeee9; }
.yu-linea__total { font-size: 0.95rem; white-space: nowrap; }
.yu-linea__error { color: var(--yu-error); font-size: 0.84rem; font-weight: 600; }
.yu-linea__error:empty { display: none; }
.carrito__pie { display: grid; gap: 8px; padding: 14px 18px 16px; border-top: 1px solid var(--yu-borde); background: #fff; }
.carrito__pie .yu-btn--grande { min-height: 48px; font-size: 0.95rem; }
.carrito__pie .yu-btn--texto { min-height: 36px; font-size: 0.88rem; font-weight: 600; justify-self: center; }
.carrito__pie:empty { display: none; }
.yu-carrito__fila { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; font-weight: 600; }
.yu-carrito__fila strong { font-family: var(--yu-titulos); font-size: 1.25rem; }
.yu-carrito__nota { font-size: 0.84rem; color: var(--yu-tinta-suave); }
.yu-carrito-vacio { display: grid; justify-items: center; gap: 14px; padding: 48px 16px; text-align: center; color: var(--yu-tinta-suave); }
.yu-carrito-vacio .yu-circulo { --yu-circ: 80px; }
.yu-carrito-vacio .yu-btn { min-height: 44px; }

/* Barra de descuentos por monto (dentro del carrito y, compacta, en el aviso de "agregado") */
.yu-progreso { position: relative; display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--yu-glow), var(--yu-menta); overflow: hidden; }
.yu-progreso__texto { display: flex; align-items: center; gap: 10px; }
.yu-progreso__texto p { font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.yu-progreso__icono { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #fff; }
.yu-progreso__icono .yu-ill { width: 76%; height: 76%; }
.yu-progreso:not(.is-desbloqueado) .yu-progreso__icono .yu-ill * { animation-play-state: paused; }
.yu-progreso__barra { position: relative; height: 10px; margin: 0 8px; border-radius: 99px; background: rgb(255 255 255 / 0.9); box-shadow: inset 0 1px 2px rgb(22 35 59 / 0.08); }
.yu-progreso__relleno { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--yu-acento), #4fc7b8 60%, var(--yu-sol)); transition: width 0.7s var(--yu-ease); }
.yu-progreso__hito { position: absolute; top: 50%; left: calc(var(--x) * 100%); display: grid; place-items: center; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; color: transparent; box-shadow: 0 0 0 2px #cfe8e2; transition: background-color 0.4s, box-shadow 0.4s, color 0.4s; }
.yu-progreso__hito svg { width: 12px; height: 12px; }
.yu-progreso__hito.is-logrado { background: var(--yu-turq); color: #fff; box-shadow: 0 0 0 2px #fff; }
.yu-progreso__niveles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.yu-progreso__niveles li { padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.85); font-size: 0.8rem; color: var(--yu-tinta-suave); transition: background-color 0.3s, color 0.3s; }
.yu-progreso__niveles li b { color: var(--yu-tinta); }
.yu-progreso__niveles li.is-logrado { background: var(--yu-turq); color: #fff; }
.yu-progreso__niveles li.is-logrado b { color: #fff; }
.yu-progreso__nota { font-size: 0.76rem; color: var(--yu-tinta-suave); }
/* Recompensa: un brillo que cruza una sola vez y el hito que late; nada que se mueva todo el tiempo */
.yu-progreso.is-desbloqueado::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.85) 50%, transparent 70%); transform: translateX(-100%); animation: yu-destello 1.1s var(--yu-ease) 0.25s 1 forwards; pointer-events: none; }
.yu-progreso.is-desbloqueado .yu-progreso__hito.is-logrado { animation: yu-latido 0.6s var(--yu-ease) 0.5s 1; }
.yu-progreso.is-desbloqueado .yu-progreso__icono { animation: yu-latido 0.6s var(--yu-ease) 0.3s 1; }
@keyframes yu-destello { to { transform: translateX(100%); } }
.yu-progreso--compacta { padding: 10px 12px; gap: 8px; }
@media (max-height: 760px) { .carrito__progreso .yu-progreso__nota { display: none; } .carrito__progreso .yu-progreso { gap: 8px; padding: 12px 14px; } }
.yu-progreso--compacta .yu-progreso__texto p { font-size: 0.82rem; }

/* Aviso de "agregado al carrito" */
.yu-aviso-flotante { position: fixed; z-index: 65; right: 18px; bottom: 18px; width: min(380px, calc(100% - 20px)); pointer-events: none; }
.yu-aviso-flotante__caja { display: grid; gap: 10px; padding: 12px; border-radius: 22px; background: var(--yu-crema-2); box-shadow: 0 24px 50px -22px rgb(22 35 59 / 0.5), inset 0 0 0 1px rgb(22 35 59 / 0.06); opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.3s ease, transform 0.45s var(--yu-ease); }
.yu-aviso-flotante.is-visible { pointer-events: auto; }
.yu-aviso-flotante.is-visible .yu-aviso-flotante__caja { opacity: 1; transform: none; }
.yu-aviso-flotante__cab { display: flex; align-items: center; gap: 10px; }
.yu-aviso-flotante__cab img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; background: #fff; }
.yu-aviso-flotante__cab p { flex: 1; display: grid; min-width: 0; font-size: 0.92rem; }
.yu-aviso-flotante__cab small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--yu-tinta-suave); }
.yu-aviso-flotante__check { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yu-ok); color: #fff; }
.yu-aviso-flotante__check svg { width: 20px; height: 20px; }
.yu-aviso-flotante__botones { display: flex; }
.yu-aviso-flotante__botones .yu-btn { flex: 1; }
.yu-aviso-flotante__caja.is-error { grid-template-columns: 1fr auto; align-items: center; color: var(--yu-error); font-weight: 600; }
@media (max-width: 749px) { .yu-aviso-flotante { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; } body[data-pagina='producto'] .yu-aviso-flotante { bottom: 90px; } }


/* ------------------------------------------------------------------ burbuja de descuentos (abajo a la izquierda)
   El regalo con anillo de progreso; al tocarlo sale una solapa de vidrio menta que se llena como líquido (con ola y
   burbujitas), con el mensaje y los escalones. Como en la tienda original, pero solo con productos en el carrito. */
.yu-dbur { --yu-dbur-t: 58px; position: fixed; z-index: 42; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 10px; }
.yu-dbur:not([hidden]) { animation: yu-dbur-entra 0.6s var(--yu-ease); }
@keyframes yu-dbur-entra { from { opacity: 0; transform: scale(0.6); } }
.yu-dbur__regalo {
  position: relative; display: grid; place-items: center; flex: none; width: var(--yu-dbur-t); height: var(--yu-dbur-t); padding: 0;
  border: 1px solid rgb(255 255 255 / 0.95); border-radius: 50%; color: var(--yu-tinta);
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 58%), rgb(211 240 233 / 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 30px -16px rgb(14 124 136 / 0.55);
  transition: transform 0.3s var(--yu-ease);
}
.yu-dbur__regalo:hover { transform: translateY(-2px); }
.yu-dbur__anillo { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.yu-dbur__anillo circle { fill: none; stroke-width: 3; }
.yu-dbur__pista { stroke: rgb(255 255 255 / 0.85); }
.yu-dbur__lleno { stroke: var(--yu-turq); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); transition: stroke-dashoffset 1.2s var(--yu-ease); }
.yu-dbur__ill { width: 58%; height: 58%; }
.yu-dbur__ill .yu-ill { width: 100%; height: 100%; }
.yu-dbur:not(.is-premio) .yu-dbur__ill .yu-ill * { animation-play-state: paused; }
.yu-dbur__tag { position: absolute; top: -6px; right: -8px; padding: 3px 7px; border-radius: 99px; background: var(--yu-coral); color: #fff; font-size: 0.7rem; font-weight: 700; }
.yu-dbur__tag:empty { display: none; }
.yu-dbur.is-premio .yu-dbur__regalo { animation: yu-dbur-premio 0.7s var(--yu-ease); }
@keyframes yu-dbur-premio { 40% { transform: scale(1.14); } }
.yu-dbur__solapa {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--yu-dbur-t);
  max-width: min(560px, calc(100vw - var(--yu-dbur-t) - 42px)); padding: 8px 6px 8px 20px; overflow: hidden; isolation: isolate;
  border: 1px solid rgb(255 255 255 / 0.95); border-radius: 999px; box-shadow: 0 18px 36px -22px rgb(14 124 136 / 0.5);
  background: radial-gradient(120% 180% at 12% 0%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 55%), linear-gradient(100deg, rgb(211 240 233 / 0.94), rgb(227 246 242 / 0.94) 55%, rgb(216 241 235 / 0.94));
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0; visibility: hidden; clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path 0.7s var(--yu-ease), opacity 0.3s ease, visibility 0s linear 0.7s;
}
.yu-dbur.is-abierta .yu-dbur__solapa { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0 round 999px); transition: clip-path 0.7s var(--yu-ease), opacity 0.3s ease, visibility 0s; }
.yu-dbur__liquido { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.yu-dbur__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); transition: width 1.4s var(--yu-ease);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0) 55%), linear-gradient(90deg, #9fe3d6, #5cc9bb); }
.yu-dbur__fill::after {
  content: ''; position: absolute; top: -52px; right: -11px; width: 12px; height: calc(100% + 104px); background: #5cc9bb;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='26'%3E%3Cpath d='M0 0h5c8 6.5 8 19.5 0 26H0z'/%3E%3C/svg%3E") repeat-y;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='26'%3E%3Cpath d='M0 0h5c8 6.5 8 19.5 0 26H0z'/%3E%3C/svg%3E") repeat-y;
  animation: yu-dbur-ola 2.8s linear infinite;
}
.yu-dbur:not(.tiene-progreso) .yu-dbur__fill::after { display: none; }
@keyframes yu-dbur-ola { to { transform: translateY(26px); } }
.yu-dbur__fill i { position: absolute; bottom: -10px; width: 7px; height: 7px; border: 1.5px solid rgb(255 255 255 / 0.95); border-radius: 50%; opacity: 0; animation: yu-dbur-burbuja 4.5s ease-in infinite; }
.yu-dbur__fill i:nth-child(1) { left: 14%; }
.yu-dbur__fill i:nth-child(2) { left: 38%; width: 5px; height: 5px; animation-delay: -1.2s; animation-duration: 5.5s; }
.yu-dbur__fill i:nth-child(3) { left: 62%; animation-delay: -2.4s; }
.yu-dbur__fill i:nth-child(4) { left: 86%; width: 5px; height: 5px; animation-delay: -3.3s; }
@keyframes yu-dbur-burbuja { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-60px) scale(1); } }
.yu-dbur__contenido { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; }
.yu-dbur__msj { font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.yu-dbur__niveles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.yu-dbur__niveles li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.85); font-size: 0.78rem; white-space: nowrap; }
.yu-dbur__niveles li.is-logrado { background: var(--yu-turq); color: #fff; }
.yu-dbur__niveles svg { width: 13px; height: 13px; }
.yu-dbur__cerrar { width: 40px; height: 40px; background: rgb(255 255 255 / 0.85); flex: none; }
.yu-dbur__cerrar svg { width: 18px; height: 18px; }
/* Se aparta con los paneles abiertos y en la ficha del celular sube sobre la barra de compra */
html.ns-menu-open .yu-dbur, html.yu-buscando .yu-dbur, html:has(#cookies:not([hidden])) .yu-dbur, html:has(.yu-aviso-flotante.is-visible) .yu-dbur { opacity: 0; visibility: hidden; }
html:has(.yu-compra-fija.is-visible) .yu-dbur { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 76px); }
body[data-pagina='checkout'] .yu-dbur { display: none; }
@media (max-width: 749px) {
  .yu-dbur { --yu-dbur-t: 52px; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .yu-dbur__solapa { border-radius: 26px; clip-path: inset(0 100% 0 0 round 26px); padding: 10px 6px 10px 16px; }
  .yu-dbur.is-abierta .yu-dbur__solapa { clip-path: inset(0 0 0 0 round 26px); }
  .yu-dbur__msj { font-size: 0.84rem; }
}

/* ------------------------------------------------------------------ buscador */
.yu-buscador { position: fixed; inset: 0; z-index: 49; padding: calc(var(--yu-cab) + var(--yu-anuncio-h) + 14px) var(--yu-margen) 20px; background: rgb(22 35 59 / 0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.25s; }
.yu-buscador.is-open { opacity: 1; }
.yu-buscador__caja, .yu-buscador__resultados { width: min(100%, 720px); margin-inline: auto; }
.yu-buscador__caja { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 18px; border-radius: 999px; background: #fff; box-shadow: var(--yu-sombra); transform: translateY(-8px); transition: transform 0.35s var(--yu-ease); }
.yu-buscador.is-open .yu-buscador__caja { transform: none; }
.yu-buscador__caja > svg { width: 22px; height: 22px; flex: none; color: var(--yu-tinta-suave); }
.yu-buscador__caja input { flex: 1; min-width: 0; min-height: 48px; padding: 0 8px; border: 0; background: none; font-size: 1.05rem; font-weight: 500; }
.yu-buscador__caja input:focus { outline: none; }
.yu-buscador__caja input::-webkit-search-cancel-button { display: none; }
.yu-buscador__resultados { margin-top: 10px; max-height: calc(100svh - var(--yu-cab) - 120px); overflow-y: auto; padding: 16px; border-radius: 24px; background: var(--yu-crema-2); box-shadow: var(--yu-sombra); }
.yu-buscador__resultados:empty { display: none; }
.yu-buscador__resultados[aria-busy='true'] { opacity: 0.6; }
.yu-buscador__titulo { margin: 0 4px 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yu-tinta-suave); }
.yu-buscador__lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.yu-buscador__lista a { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 16px; text-decoration: none; }
.yu-buscador__lista a:hover, .yu-buscador__lista a:focus-visible { background: #fff; }
.yu-buscador__lista img, .yu-buscador__lista .yu-sin-foto { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: #fff; }
.yu-buscador__lista span { display: grid; min-width: 0; }
.yu-buscador__lista strong { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yu-buscador__lista small { color: var(--yu-turq); font-weight: 700; }
.yu-buscador__todos { width: 100%; margin-top: 10px; }
.yu-buscador__vacio { padding: 8px 4px; color: var(--yu-tinta-suave); }
.yu-buscador .yu-chips { flex-wrap: wrap; overflow: visible; }

/* ------------------------------------------------------------------ checkout */

.yu-checkout__cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.yu-checkout__col { display: grid; gap: 16px; min-width: 0; }
.yu-checkout__form { display: grid; gap: 16px; }
.yu-paso { display: grid; gap: 16px; margin: 0; padding: clamp(20px, 3vw, 32px); border: 0; border-radius: var(--yu-r-foto); background: #fff; box-shadow: inset 0 0 0 1px var(--yu-borde); animation: yu-aparece 0.4s var(--yu-ease); }
.yu-paso legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 4px; font-family: var(--yu-titulos); font-size: 1.4rem; font-weight: 700; }
.yu-paso legend + * { clear: both; }
.yu-paso__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--yu-menta); color: var(--yu-turq); font-family: var(--yu-texto); font-size: 0.95rem; }
.yu-paso h3 { font-size: 1.05rem; font-family: var(--yu-texto); font-weight: 700; letter-spacing: 0; margin-top: 4px; }
.yu-direccion { display: grid; gap: 14px; }
.yu-radios { display: grid; gap: 10px; }
.yu-radio { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 16px; border-radius: 16px; background: var(--yu-crema-2); box-shadow: inset 0 0 0 1.5px var(--yu-borde); cursor: pointer; transition: box-shadow 0.2s, background-color 0.2s; }
.yu-radio:hover { box-shadow: inset 0 0 0 1.5px #d5ccbd; }
.yu-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.yu-radio__marca { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #cfc6b6; transition: box-shadow 0.2s; }
.yu-radio:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 2px var(--yu-turq), 0 0 0 4px color-mix(in srgb, var(--yu-turq) 12%, transparent); }
.yu-radio input:checked + .yu-radio__marca { box-shadow: inset 0 0 0 7px var(--yu-turq); }
.yu-radio input:focus-visible + .yu-radio__marca { outline: 2px solid var(--yu-acento); outline-offset: 3px; }
.yu-radio__texto { flex: 1; display: grid; gap: 2px; min-width: 0; }
.yu-radio__texto small { color: var(--yu-tinta-suave); font-size: 0.86rem; }
.yu-radio__ahorro { font-style: normal; font-weight: 700; font-size: 0.84rem; color: var(--yu-ok); }
.yu-radio__ahorro:empty { display: none; }
.yu-radio__der { font-weight: 700; white-space: nowrap; }
.yu-cupon { border-radius: 16px; background: var(--yu-crema-2); padding: 0 16px; box-shadow: inset 0 0 0 1px var(--yu-borde); }
.yu-cupon summary { display: flex; align-items: center; min-height: 52px; font-weight: 600; cursor: pointer; color: var(--yu-turq); }
.yu-cupon__fila { display: flex; gap: 8px; padding-bottom: 10px; }
.yu-cupon__fila input { flex: 1; min-width: 0; text-transform: uppercase; }
.yu-cupon__estado { padding-bottom: 12px; font-size: 0.88rem; font-weight: 600; color: var(--yu-tinta-suave); }
.yu-cupon__estado:empty { display: none; }
.yu-cupon__estado.is-error { color: var(--yu-error); }
.yu-cupon__estado.is-ok { color: var(--yu-ok); }
.yu-revision { display: grid; gap: 10px; padding-top: 6px; }
.yu-revision dl { display: grid; gap: 8px; margin: 0; }
.yu-revision dl > div { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: var(--yu-crema-2); font-size: 0.92rem; }
.yu-revision dt { color: var(--yu-tinta-suave); font-weight: 600; }
.yu-revision dd { margin: 0; overflow-wrap: anywhere; }
.yu-revision a { color: var(--yu-turq); font-weight: 700; font-size: 0.88rem; }
.yu-checkout__nota { color: var(--yu-tinta-suave); font-size: 0.92rem; }
.yu-checkout__nota a { color: var(--yu-turq); font-weight: 700; }
.yu-checkout__botones { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap-reverse; }
.yu-checkout__botones .yu-btn--grande { min-width: min(100%, 300px); }
.yu-checkout__seguridad { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 0.84rem; color: var(--yu-tinta-suave); text-align: right; }
.yu-checkout__seguridad svg { width: 16px; height: 16px; flex: none; }
/* Paso de pago con la tarjeta dentro de la web: el formulario de Mercado Pago se abre debajo de su opción, dentro de la
   misma tarjeta. En el HTML queda fuera del formulario de la web (el borrador del checkout nunca lee los datos de la
   tarjeta); el formulario no arma caja propia (display: contents) y el orden lo pone la columna. */
.yu-checkout__form { display: contents; }
.yu-checkout__col > #compra > .yu-paso { order: 0; }
.yu-checkout__col > #pago-paso { order: 1; }
.yu-checkout__col > #compra > .yu-revision--caja { order: 2; }
.yu-checkout__col > #compra > #error { order: 3; }
.yu-checkout__col > #compra > .yu-checkout__botones { order: 4; }
.yu-checkout__col > #compra > .yu-checkout__seguridad { order: 5; }
#pago-paso:empty { display: none; }
.yu-revision--caja { padding: clamp(18px, 2.6vw, 26px); border-radius: var(--yu-r-foto); background: #fff; box-shadow: inset 0 0 0 1px var(--yu-borde); }
.yu-revision--caja h3 { margin: 0; font-size: 1.05rem; font-family: var(--yu-texto); font-weight: 700; letter-spacing: 0; }
/* La tarjeta del paso sigue en el panel de abajo; la opción elegida queda abierta hacia abajo */
/* Medios de pago como una sola lista (filas con divisor); con la tarjeta dentro de la web, el formulario de Mercado
   Pago se abre en la misma caja, debajo de su fila */
#medios { gap: 0; border: 1px solid var(--yu-borde); border-radius: 18px; overflow: hidden; background: #fff; }
#medios .yu-radio { min-height: 0; padding: 14px 18px; border-radius: 0; background: #fff; box-shadow: none; }
#medios .yu-radio + .yu-radio { border-top: 1px solid var(--yu-borde); }
#medios .yu-radio:hover { background: color-mix(in srgb, var(--yu-turq) 3%, #fff); box-shadow: none; }
#medios .yu-radio:has(input:checked) { background: color-mix(in srgb, var(--yu-turq) 7%, #fff); box-shadow: none; }
#medios .yu-radio__texto { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
#medios .yu-radio__texto > small { order: 2; flex-basis: 100%; }
#medios .yu-radio__ahorro { order: 1; padding: 2px 8px; border-radius: 999px; background: #e3f4ec; font-size: 0.76rem; white-space: nowrap; }
#medios .yu-campo__error { padding: 10px 18px; border-top: 1px solid var(--yu-borde); }
.yu-checkout__col:has(#pago-paso:not(:empty)) .yu-paso { padding-bottom: 0; border-radius: var(--yu-r-foto) var(--yu-r-foto) 0 0; box-shadow: inset 1px 0 0 var(--yu-borde), inset -1px 0 0 var(--yu-borde), inset 0 1px 0 var(--yu-borde); }
.yu-checkout__col:has(#pago-paso:not(:empty)) #medios { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#pago-paso { margin-top: -16px; padding: 0 clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px); border-radius: 0 0 var(--yu-r-foto) var(--yu-r-foto); background: #fff; box-shadow: inset 1px 0 0 var(--yu-borde), inset -1px 0 0 var(--yu-borde), inset 0 -1px 0 var(--yu-borde); }
#pago-paso > .tp { padding: 16px 18px 18px; border: 1px solid var(--yu-borde); border-top: 0; border-radius: 0 0 18px 18px; background: color-mix(in srgb, var(--yu-turq) 4%, #fdfbf8); animation: yu-aparece 0.35s var(--yu-ease); }
#pago-paso .tp__cargando { height: 230px; background: rgb(22 35 59 / 0.05); }
/* Adentro, el formulario oficial de Mercado Pago sin su tarjeta ni su título (ya están la opción y la caja). Si
   Mercado Pago cambia sus clases, solo se pierde este ajuste fino: el formulario sigue andando igual. */
#pago-paso [class*="mp-checkout-bricks__payment-form"] { padding: 0 !important; background: transparent !important; }
#pago-paso [class*="mp-checkout-bricks__payment-form"] > h1 { display: none !important; }
#pago-paso [class*="mp-checkout-bricks__payment-options"] { margin-bottom: 16px !important; border-color: var(--yu-borde) !important; border-radius: 14px !important; overflow: hidden; background: #fff; }
#pago-paso [class*="mp-checkout-bricks__selector-"][class*="active"] { background: color-mix(in srgb, var(--yu-turq) 6%, #fff) !important; }
#pago-paso [class*="mp-checkout-bricks__payment-option-"] form { padding: 4px 16px 18px !important; }
#pago-paso [class*="margin-bottom"]:has(> [class*="button-container"]) { margin-bottom: 0 !important; }
#pago-paso [class*="margin-bottom"]:has(> [class*="button-container"]), #pago-paso [class*="button-container"] { display: block !important; width: 100% !important; max-width: none !important; }
#pago-paso [class*="button-container"] button { width: 100%; min-height: 52px; border-radius: 999px !important; font-family: var(--yu-texto) !important; font-weight: 700 !important; font-size: 1rem !important; }
/* Logos de las tarjetas en la opción Mercado Pago */
.yu-tarjetas { display: inline-flex; align-items: center; gap: 5px; }
.yu-tarjetas__t { display: inline-grid; place-items: center; width: 38px; height: 24px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px rgb(22 35 59 / 0.14); font: 800 0.66rem/1 var(--yu-texto); letter-spacing: 0.02em; }
.yu-tarjetas__t--visa { background: #1A1F71; color: #fff; font-style: italic; box-shadow: none; }
.yu-tarjetas__t--master { position: relative; background: #1b1b1b; box-shadow: none; }
.yu-tarjetas__t--master i { position: absolute; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #EB001B; }
.yu-tarjetas__t--master i:first-child { left: 8px; }
.yu-tarjetas__t--master i:last-child { right: 8px; background: #F79E1B; mix-blend-mode: screen; }
.yu-tarjetas__t--oca { background: #0A4DA2; color: #FFD200; }
.yu-tarjetas__t--mas { width: 28px; color: var(--yu-tinta-suave); font-weight: 700; }
@media (max-width: 749px) {
  .yu-radio:has(.yu-tarjetas) { flex-wrap: wrap; }
  .yu-radio:has(.yu-tarjetas) .yu-radio__der { order: 3; flex-basis: 100%; padding-left: 36px; }
  .yu-tarjetas__t { width: 34px; height: 22px; }
  .yu-tarjetas__t--master i { top: 4px; }
}
.yu-checkout__error { padding: 12px 14px; border-radius: 12px; background: #fdeee9; }

.yu-resumen { position: sticky; top: calc(var(--yu-cab) + 16px); border-radius: var(--yu-r-foto); background: var(--yu-glow), var(--yu-menta); }
.yu-resumen__toggle { display: none; }
.yu-resumen__cuerpo { display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 26px); transition: opacity 0.2s; }
.yu-resumen__cuerpo[aria-busy='true'] { opacity: 0.6; }
.yu-resumen__titulo { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.25rem; }
.yu-resumen__titulo small { font-family: var(--yu-texto); font-size: 0.85rem; font-weight: 600; color: var(--yu-tinta-suave); letter-spacing: 0; }
.yu-resumen__lineas { display: grid; gap: 12px; margin: 0; padding: 8px 4px 4px 0; list-style: none; max-height: 340px; overflow-y: auto; }
.yu-resumen__lineas li { display: flex; align-items: center; gap: 12px; }
.yu-resumen__foto { position: relative; flex: none; width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(140deg, var(--yu-foto-a, #fff8ee), var(--yu-foto-b, #f6ecdc)); }
.yu-resumen__foto img, .yu-resumen__foto .yu-sin-foto { width: 100%; height: 100%; border-radius: 16px; object-fit: contain; mix-blend-mode: multiply; }
.yu-resumen__foto b { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--yu-tinta); color: #fff; font-size: 0.74rem; }
.yu-resumen__nombre { flex: 1; display: grid; min-width: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.yu-resumen__nombre small { color: var(--yu-tinta-suave); font-weight: 500; }
.yu-resumen__lineas strong { font-size: 0.92rem; white-space: nowrap; }
.yu-resumen__totales { display: grid; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px dashed rgb(22 35 59 / 0.18); }
.yu-resumen__totales > div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.94rem; }
.yu-resumen__totales dd { margin: 0; font-weight: 600; white-space: nowrap; }
.yu-resumen__totales .is-descuento { color: var(--yu-ok); }
.yu-resumen__total { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgb(22 35 59 / 0.12); font-size: 1.1rem !important; }
.yu-resumen__total dt { font-weight: 700; }
.yu-resumen__total dd { font-family: var(--yu-titulos); font-size: 1.6rem; font-weight: 800 !important; }
.yu-resumen__iva { font-size: 0.8rem !important; color: var(--yu-tinta-suave); }
.yu-resumen__iva dd { font-weight: 500 !important; }
.yu-resumen__aviso { padding: 10px 12px; border-radius: 12px; background: #fff7e0; font-size: 0.86rem; font-weight: 600; }
.yu-resumen__pista { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / 0.8); font-size: 0.86rem; font-weight: 600; }
.yu-resumen__pista svg { width: 18px; height: 18px; color: #B7791F; }
.yu-resumen__pista a { color: var(--yu-turq); }
.yu-resumen--pedido { position: static; padding: 20px; }

@media (max-width: 989px) {
  .yu-checkout__cuerpo { grid-template-columns: 1fr; }
  .yu-resumen { position: static; order: -1; }
  .yu-resumen__toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 18px; border: 0; background: none; font-weight: 700; color: var(--yu-turq-h); }
  .yu-resumen__toggle > svg { width: 20px; height: 20px; flex: none; }
  .yu-resumen__toggle strong { margin-left: auto; font-family: var(--yu-titulos); font-size: 1.15rem; color: var(--yu-tinta); }
  .yu-resumen__toggle > svg:last-child { transition: transform 0.3s var(--yu-ease); }
  .yu-resumen.is-abierto .yu-resumen__toggle > svg:last-child { transform: rotate(180deg); }
  .yu-resumen__cuerpo { display: none; padding-top: 0; }
  .yu-resumen.is-abierto .yu-resumen__cuerpo { display: grid; animation: yu-aparece 0.3s var(--yu-ease); }
}
@media (max-width: 749px) {
  .yu-campos-2 { grid-template-columns: 1fr; }
  .yu-paso { padding: 18px; border-radius: 22px; }
  #pago-paso { padding: 0 18px 18px; border-radius: 0 0 22px 22px; }
  .yu-checkout__col:has(#pago-paso:not(:empty)) .yu-paso { border-radius: 22px 22px 0 0; }
  .yu-revision--caja { padding: 18px; border-radius: 22px; }
  .yu-paso legend { font-size: 1.2rem; }
  .yu-checkout__botones { flex-direction: column-reverse; align-items: stretch; }
  .yu-checkout__botones .yu-btn { width: 100%; }
  .yu-checkout__seguridad { justify-content: center; text-align: center; }
  .yu-revision dl > div { grid-template-columns: 1fr auto; }
  .yu-revision dd { grid-column: 1 / -1; grid-row: 2; }
}

/* Página del pedido */
.yu-pedido { max-width: 760px; display: grid; gap: 18px; }
.yu-pedido__cab { display: grid; justify-items: center; gap: 10px; padding: clamp(24px, 4vw, 40px); border-radius: var(--yu-r-foto); text-align: center; background: var(--yu-glow), var(--yu-menta); }
.yu-pedido__cab h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.yu-pedido__cab.is-cancelado { background: var(--yu-glow), #fdeee9; }
.yu-pedido__cab.is-pendiente { background: var(--yu-glow), #fff3d6; }
.yu-pedido__icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--yu-turq); color: #fff; animation: yu-latido 0.7s var(--yu-ease) 0.2s 1; }
.yu-pedido__cab.is-cancelado .yu-pedido__icono { background: var(--yu-error); }
.yu-pedido__icono svg { width: 30px; height: 30px; }
.yu-pedido__instrucciones, .yu-pedido__envio { display: grid; gap: 8px; padding: 20px; border-radius: var(--yu-r); background: #fff; box-shadow: inset 0 0 0 1px var(--yu-borde); }
.yu-pedido__instrucciones h2, .yu-pedido__envio h2 { font-size: 1.15rem; }
.yu-pedido__botones { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------------ contacto, legales, cuenta */
.yu-contacto__grilla { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 48px); margin-top: clamp(20px, 3vw, 32px); align-items: start; }
.yu-contacto__datos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.yu-contacto__dato { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px var(--yu-borde); transition: box-shadow 0.2s, transform 0.25s var(--yu-ease); }
a.yu-contacto__dato:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--yu-turq); }
.yu-contacto__dato > span:last-child { display: grid; min-width: 0; }
.yu-contacto__dato small { color: var(--yu-tinta-suave); font-size: 0.9rem; overflow-wrap: anywhere; }
.yu-tarjeta-form { display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); border-radius: var(--yu-r-foto); background: #fff; box-shadow: inset 0 0 0 1px var(--yu-borde); }
.yu-tarjeta-form h2 { font-size: 1.4rem; }
.yu-tarjeta-form .yu-btn { justify-self: start; }
.yu-legal { max-width: 780px; }
.yu-legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 20px; }
.yu-cuenta { max-width: 900px; display: grid; gap: 18px; }
.yu-cuenta h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.yu-cuenta h2 { font-size: 1.3rem; margin-top: 8px; }
.yu-cuenta__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.yu-cuenta__lista { display: grid; gap: 10px; }
.yu-cuenta__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--yu-borde); }
.yu-cuenta__pedido { display: grid; gap: 2px; text-decoration: none; min-width: 0; }
.yu-cuenta__pedido span, .yu-cuenta__pedido small { color: var(--yu-tinta-suave); font-size: 0.9rem; }
.yu-estrellas { color: #d99a00; letter-spacing: 2px; }
.yu-estrellas-form { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
.yu-estrellas-form label { display: flex; gap: 8px; align-items: center; color: #d99a00; min-height: 36px; }
@media (max-width: 849px) { .yu-contacto__grilla, .yu-cuenta__dos { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ pie (como el de la tienda original)
   Tarjeta menta de borde a borde con brillo, marca con tres burbujas que flotan, menús del panel, contacto,
   formulario en una tarjeta blanca horizontal y, abajo, copyright, legales y medios de pago. */
.yu-pie { margin: clamp(48px, 7vw, 96px) var(--ns-gap-x) 0; }
.yu-pie__caja {
  position: relative; display: grid; gap: clamp(28px, 4vw, 48px); overflow: hidden; isolation: isolate;
  padding: clamp(36px, 5vw, 64px) clamp(22px, 5vw, 80px) 24px;
  border-radius: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) 0 0; border: 1px solid rgb(255 255 255 / 0.9); border-bottom: 0;
  background: radial-gradient(70% 120% at 8% 0%, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0) 55%), linear-gradient(135deg, #d3f0e9, #e8f7f3 55%, #fdf3e7);
}
.yu-pie__arriba { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.yu-pie__marca { display: grid; align-content: start; gap: 14px; max-width: 360px; }
.yu-logo--pie { font-size: 50px; justify-self: start; }
.yu-pie__marca > p { font-size: 0.95rem; color: color-mix(in srgb, var(--yu-tinta) 80%, transparent); }
.yu-pie__redes { display: flex; gap: 8px; }
.yu-pie__redes a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(255 255 255 / 0.75); color: var(--yu-tinta); transition: background-color 0.2s, transform 0.3s var(--yu-ease); }
.yu-pie__redes a:hover { background: #fff; transform: translateY(-2px); }
.yu-pie__redes svg { width: 18px; height: 18px; }
.yu-pie__deco { display: flex; gap: 10px; margin-top: 4px; }
.yu-pie__burbuja {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.9);
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 58%), var(--b);
  animation: yu-pie-flota 8s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -2s);
}
.yu-pie__burbuja .yu-ill { width: 66%; height: 66%; }
@keyframes yu-pie-flota { to { transform: translateY(-8px); } }
.yu-pie__col h2 { margin-bottom: 14px; font-size: 1.06rem; letter-spacing: -0.01em; }
.yu-pie__col h2 a { text-decoration: none; }
.yu-pie__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.yu-pie__col a { color: inherit; text-decoration: none; opacity: 0.82; transition: opacity 0.2s; }
.yu-pie__col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.yu-pie__contacto li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; line-height: 1.45; }
.yu-pie__contacto a { overflow-wrap: anywhere; }
.yu-pie__icono { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgb(255 255 255 / 0.75); color: var(--yu-turq); }
.yu-pie__icono svg { width: 15px; height: 15px; }
.yu-pie__form {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: 16px 32px; align-items: center;
  padding: clamp(20px, 2.4vw, 32px); border-radius: 28px; background: rgb(255 255 255 / 0.8); border: 1px solid rgb(255 255 255 / 0.95);
  box-shadow: 0 24px 50px -40px rgb(22 35 59 / 0.5);
}
.yu-pie__form-intro h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.yu-pie__form-intro p { margin-top: 6px; font-size: 0.9rem; color: var(--yu-tinta-suave); }
.yu-pie__campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr) auto; gap: 10px; }
.yu-pie__campos input { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid rgb(22 35 59 / 0.12); border-radius: 999px; background: #fff; font-size: 0.95rem; transition: border-color 0.2s, box-shadow 0.2s; }
.yu-pie__campos input:focus { outline: none; border-color: var(--yu-acento); box-shadow: 0 0 0 3px rgb(26 160 174 / 0.18); }
.yu-pie__form .yu-form-estado { grid-column: 1 / -1; }
.yu-pie__abajo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 20px; border-top: 1px solid rgb(22 35 59 / 0.1); font-size: 0.84rem; }
.yu-pie__abajo p { opacity: 0.78; }
.yu-pie__abajo nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.yu-pie__abajo a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; opacity: 0.78; }
.yu-pie__abajo a:hover { opacity: 1; text-decoration: underline; }
.yu-pie__pagos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.yu-pie__pagos li { padding: 4px 10px; border-radius: 8px; background: rgb(255 255 255 / 0.8); font-weight: 600; font-size: 0.76rem; }
@media (max-width: 989px) {
  .yu-pie__arriba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yu-pie__marca { grid-column: 1 / -1; }
  .yu-pie__form { grid-template-columns: minmax(0, 1fr); }
  .yu-pie__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yu-pie__ancho, .yu-pie__campos .yu-btn { grid-column: 1 / -1; }
}
@media (max-width: 749px) {
  .yu-pie { margin-inline: 0; }
  .yu-pie__arriba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .yu-pie__contacto { grid-column: 1 / -1; }
  .yu-pie__campos { grid-template-columns: minmax(0, 1fr); }
  .yu-pie__deco { display: none; }
  .yu-pie__abajo { flex-direction: column; align-items: flex-start; }
}
body[data-pagina='checkout'] .yu-pie__form { display: none; }

/* ------------------------------------------------------------------ cookies */
.yu-cookies { position: fixed; z-index: 64; left: 16px; bottom: 16px; width: min(440px, calc(100% - 32px)); display: grid; gap: 12px; padding: 18px; border-radius: 22px; background: var(--yu-tinta); color: #fff; font-size: 0.9rem; box-shadow: var(--yu-sombra); }
.yu-cookies a { color: var(--yu-sol); font-weight: 700; }
.yu-cookies div { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.yu-cookies .yu-btn--borde { --b-fg: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5); }
.yu-cookies .yu-btn--borde:hover { --b-bg: rgb(255 255 255 / 0.1); }

.yu-sin-foto { display: block; width: 100%; height: 100%; background: var(--yu-glow), #f3eadb; }


/* ------------------------------------------------------------------ cuentas: botón de la barra y popup */
#abrir-cuenta { --yu-fill: #FFE1D3; }
.yu-cuenta-btn.is-adentro::after { content: ''; position: absolute; right: 9px; bottom: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--yu-ok); box-shadow: 0 0 0 2px #eaf7f3; }
.yu-cuenta-pop {
  width: min(820px, calc(100% - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: 32px; overflow: hidden;
  display: none; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  background: var(--yu-crema-2); color: var(--yu-tinta); box-shadow: 0 50px 100px -40px rgb(22 35 59 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.9);
}
.yu-cuenta-pop[open] { display: grid; animation: yu-pop-entra 0.5s var(--yu-ease); }
.yu-cuenta-pop::backdrop { background: radial-gradient(60% 60% at 30% 30%, rgb(26 160 174 / 0.28), transparent 70%), radial-gradient(50% 50% at 75% 70%, rgb(255 201 77 / 0.22), transparent 70%), rgb(22 35 59 / 0.3); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
@keyframes yu-pop-entra { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
/* Panel de la izquierda: pastel con manchas de luz y burbujas que flotan */
.yu-cuenta-pop__arte {
  position: relative; display: flex; align-items: flex-end; min-height: 460px; padding: 32px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 70% at 15% 0%, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0) 55%), linear-gradient(150deg, #b5eadf, #d9f3ee 50%, #ffe7da);
}
.yu-cuenta-pop__manchas i { position: absolute; z-index: -1; border-radius: 50%; animation: yu-hero-mancha 18s ease-in-out infinite alternate; }
.yu-cuenta-pop__manchas i:nth-child(1) { top: -15%; left: -20%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgb(255 255 255 / 0.85), transparent 70%); }
.yu-cuenta-pop__manchas i:nth-child(2) { right: -25%; top: 30%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgb(255 201 77 / 0.35), transparent 70%); animation-duration: 24s; }
.yu-cuenta-pop__manchas i:nth-child(3) { left: 10%; bottom: -30%; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, rgb(227 219 255 / 0.9), transparent 70%); animation-duration: 20s; }
.yu-cuenta-pop__burbuja { position: absolute; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.9); background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 58%), var(--b); box-shadow: 0 24px 40px -26px rgb(22 35 59 / 0.5); animation: yu-hero-flota 7s ease-in-out infinite alternate; }
.yu-cuenta-pop__burbuja .yu-ill { width: 60%; height: 60%; }
.yu-cuenta-pop__burbuja--1 { top: 9%; left: 10%; width: 30%; }
.yu-cuenta-pop__burbuja--2 { top: 16%; right: 9%; width: 42%; animation-delay: -2s; }
.yu-cuenta-pop__burbuja--3 { top: 44%; left: 22%; width: 26%; animation-delay: -4s; }
.yu-cuenta-pop__burbuja--4 { top: 50%; right: 18%; width: 22%; animation-delay: -1s; }
.yu-cuenta-pop__lema { position: relative; font-family: var(--yu-titulos); font-size: 1.35rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
/* Lado del formulario */
.yu-cuenta-pop__lado { position: relative; display: grid; align-content: center; padding: 40px clamp(22px, 4vw, 44px) 36px; overflow-y: auto; max-height: calc(100svh - 24px); }
.yu-cuenta-pop__cerrar { position: absolute; top: 14px; right: 14px; background: #fff; box-shadow: var(--yu-sombra-chica); }
.yu-cuenta-pop__cuerpo { display: grid; gap: 16px; }
.yu-cuenta-pop__cab h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.yu-cuenta-pop__texto { margin-top: 6px; color: var(--yu-tinta-suave); font-size: 0.94rem; }
.yu-cuenta-pop__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: var(--yu-menta); }
.yu-cuenta-pop__tabs button { position: relative; z-index: 1; min-height: 42px; border: 0; border-radius: 999px; background: none; font-weight: 700; color: var(--yu-turq-h); transition: background-color 0.3s var(--yu-ease), color 0.3s, box-shadow 0.3s; }
.yu-cuenta-pop__tabs button[aria-selected='true'] { background: #fff; color: var(--yu-tinta); box-shadow: 0 6px 14px -8px rgb(22 35 59 / 0.35); }
.yu-cuenta-pop__form { display: grid; gap: 12px; }
.yu-cuenta-pop__form .yu-campo input { min-height: 50px; border-radius: 999px; padding: 12px 20px; background: #fff; border-color: rgb(22 35 59 / 0.1); }
.yu-cuenta-pop__form .yu-btn--grande { width: 100%; margin-top: 4px; }
.yu-cuenta-pop__olvide { justify-self: end; margin-top: -4px; padding: 4px 0; border: 0; background: none; font-size: 0.86rem; font-weight: 600; color: var(--yu-turq); text-decoration: underline; text-underline-offset: 3px; }
.yu-cuenta-pop__links { display: grid; gap: 8px; }
.yu-cuenta-pop__links a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgb(22 35 59 / 0.06); transition: box-shadow 0.2s, transform 0.25s var(--yu-ease); }
.yu-cuenta-pop__links a:hover { box-shadow: inset 0 0 0 1.5px var(--yu-turq); transform: translateY(-1px); }
.yu-cuenta-pop__links a > svg:first-child { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--yu-menta); color: var(--yu-turq); flex: none; }
.yu-cuenta-pop__links a > svg:last-child { width: 18px; height: 18px; margin-left: auto; flex: none; }
.yu-cuenta-pop__links span { display: grid; }
.yu-cuenta-pop__links small { color: var(--yu-tinta-suave); font-size: 0.82rem; }
@media (max-width: 749px) {
  /* En celular: hoja que sube desde abajo, con la franja de ilustraciones arriba */
  .yu-cuenta-pop { width: 100%; max-width: none; margin: auto 0 0; border-radius: 28px 28px 0 0; grid-template-columns: 1fr; max-height: 94svh; overflow-y: auto; }
  .yu-cuenta-pop[open] { animation: yu-pop-sube 0.45s var(--yu-ease); }
  @keyframes yu-pop-sube { from { transform: translateY(40%); opacity: 0; } }
  .yu-cuenta-pop__arte { min-height: 120px; padding: 0; }
  .yu-cuenta-pop__lema { display: none; }
  .yu-cuenta-pop__burbuja--1 { top: 18%; left: 8%; width: 70px; }
  .yu-cuenta-pop__burbuja--2 { top: 10%; left: 38%; right: auto; width: 96px; }
  .yu-cuenta-pop__burbuja--3 { top: 24%; left: auto; right: 22%; width: 60px; }
  .yu-cuenta-pop__burbuja--4 { top: 14%; right: 4%; width: 52px; }
  .yu-cuenta-pop__lado { padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); max-height: none; overflow: visible; }
}

/* ------------------------------------------------------------------ tarjetas de relleno (secciones que no quedan vacías) */
.yu-card--relleno { text-decoration: none; grid-template-rows: auto 1fr; }
.yu-card--relleno .yu-card__foto { display: grid; place-items: center; background: var(--yu-glow), var(--yu-bg) !important; transition: transform 0.45s var(--yu-ease); }
.yu-card--relleno .yu-card__ill { width: 42%; height: 42%; }
.yu-card--relleno:hover .yu-card__foto { transform: translateY(-3px); }
.yu-card--relleno .yu-card__titulo { font-weight: 700; }

/* Nuevos ingresos: dos filas de 4 */
.yu-grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 749px) { .yu-grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Categorías del catálogo: slider con flechas a los costados */
.yu-cats-tienda { margin-bottom: 6px; }
.yu-cats-tienda .yu-chips { flex-wrap: nowrap; margin: 0; padding: 4px 2px 6px; }
.yu-cats-tienda .yu-carrusel__flecha { top: 50%; width: 38px; height: 38px; transform: translateY(-50%); }
.yu-cats-tienda .yu-carrusel__flecha:hover { transform: translateY(-50%) scale(1.06); }
.yu-cats-tienda .yu-carrusel__flecha--izq { left: -6px; }
.yu-cats-tienda .yu-carrusel__flecha--der { right: -6px; }


/* ------------------------------------------------------------------ ficha: armonía, compra y fondo animado */
/* Info: como la tienda original. Título, precio suelto, disponibilidad, descripción, compra y debajo lo informativo */
.yu-ficha__info { gap: 14px; align-content: start; }
.yu-ficha__cab h1 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.08; }
#ficha-precio .yu-precio--grande b { font-size: clamp(1.9rem, 2.6vw, 2.3rem); }
.yu-ficha__info > .yu-dispo { margin: 2px 0 0; }
.yu-ficha__desc { font-size: 0.97rem; padding-bottom: 16px; border-bottom: 1px solid var(--yu-borde); }
.yu-ficha__desc > :first-child { margin-top: 0; }
.yu-opcion__valores { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.yu-ficha__comprar { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.yu-ficha__ya { grid-column: 1 / -1; }
.yu-ficha__ya[hidden] { display: none; }
/* Beneficios: filas simples con ícono chico */
.yu-beneficios { gap: 12px !important; margin-top: 6px !important; padding-top: 0 !important; border-top: 0 !important; }
.yu-beneficios .yu-circulo-icono { width: 38px; height: 38px; flex: none; }
.yu-beneficios .yu-circulo-icono svg { width: 18px; height: 18px; }
.yu-beneficios li > span:last-child { gap: 1px; }
.yu-beneficios strong { font-size: 0.93rem !important; line-height: 1.25; }
.yu-beneficios small { font-size: 0.82rem !important; }
/* Promo de descuentos por monto: un solo bloque, con el aviso de cuánto falta adentro */
.yu-promo { align-items: flex-start; padding: 16px 18px; }
.yu-promo__ill { width: 40px; height: 40px; color: var(--yu-turq); }
.yu-promo__ill svg { width: 20px; height: 20px; }
.yu-promo p { margin: 0; font-size: 0.88rem; }
.yu-promo strong { margin-bottom: 2px; }
.yu-ficha__descuento { display: block !important; margin-top: 4px !important; padding: 0 !important; background: none !important; font-weight: 700; color: var(--yu-tinta); }
.yu-ficha__descuento:empty { display: none; }
.yu-ficha__descuento b { color: var(--yu-turq-h); }
/* Calculadora: una fila más del acordeón, discreta */
.yu-ficha__calc { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0; border: 0; border-bottom: 1px solid var(--yu-borde); background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.yu-ficha__calc small { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--yu-menta); color: var(--yu-turq-h); font-size: 0.76rem; font-weight: 700; }
.yu-ficha__calc > svg { width: 18px; height: 18px; flex: none; transition: transform 0.3s var(--yu-ease); }
.yu-ficha__calc:hover { color: var(--yu-turq-h); }
.yu-ficha__calc:hover > svg { transform: translateX(3px); }
/* Ilustraciones de línea que aparecen y desaparecen muy suaves en los márgenes de la ficha */
.yu-ficha-fondo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.yu-ficha-fondo span { position: absolute; width: clamp(90px, 9vw, 150px); aspect-ratio: 1; opacity: 0; animation: yu-fondo-aparece 9s ease-in-out infinite; animation-delay: calc(var(--k) * -1.5s); }
.yu-ficha-fondo span:nth-child(1) { top: 18%; left: 1.5%; }
.yu-ficha-fondo span:nth-child(2) { top: 52%; left: 3%; }
.yu-ficha-fondo span:nth-child(3) { top: 80%; left: 0.5%; }
.yu-ficha-fondo span:nth-child(4) { top: 22%; right: 1.5%; }
.yu-ficha-fondo span:nth-child(5) { top: 56%; right: 3%; }
.yu-ficha-fondo span:nth-child(6) { top: 84%; right: 1%; }
.yu-ficha-fondo .yu-ill { width: 100%; height: 100%; }
.yu-ficha-fondo .yu-ill * { fill: none !important; stroke: var(--yu-turq) !important; stroke-width: 1.4 !important; }
@keyframes yu-fondo-aparece { 0%, 100% { opacity: 0; transform: translateY(8px) rotate(-4deg); } 45%, 60% { opacity: 0.1; transform: none; } }
body:not([data-pagina='producto']) .yu-ficha-fondo { display: none; }
@media (max-width: 1099px) { .yu-ficha-fondo { display: none; } }

/* ------------------------------------------------------------------ calculadora de materiales */
.yu-calc { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 28px); border-radius: 30px; background: radial-gradient(70% 120% at 8% 0%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 55%), linear-gradient(135deg, color-mix(in srgb, var(--yu-calc-bg, #D6EEFF) 70%, #fff), #fffdf9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 30px 60px -46px rgb(22 35 59 / 0.45); transition: background 0.5s ease; }
.yu-calc__materiales { display: flex; flex-wrap: wrap; gap: 8px; }
.yu-calc__material { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 16px 4px 4px; border-radius: 999px; background: rgb(255 255 255 / 0.75); font-weight: 700; cursor: pointer; transition: background-color 0.25s, box-shadow 0.25s, transform 0.25s var(--yu-ease); }
.yu-calc__material input { position: absolute; opacity: 0; pointer-events: none; }
.yu-calc__material:hover { transform: translateY(-1px); }
.yu-calc__material:has(input:checked) { background: #fff; box-shadow: 0 0 0 2px var(--yu-turq), 0 10px 20px -14px rgb(22 35 59 / 0.5); }
.yu-calc__material:has(input:focus-visible) { outline: 2px solid var(--yu-acento); outline-offset: 3px; }
.yu-calc__material .yu-circulo .yu-ill * { animation-play-state: paused; }
.yu-calc__material:has(input:checked) .yu-circulo .yu-ill * { animation-play-state: running; }
.yu-calc__cuerpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.yu-calc__datos { display: grid; gap: 14px; }
.yu-calc__modo { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: rgb(255 255 255 / 0.7); }
.yu-calc__modo label { position: relative; display: grid; }
.yu-calc__modo input { position: absolute; opacity: 0; }
.yu-calc__modo span { display: grid; place-items: center; min-height: 40px; padding: 0 10px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; color: var(--yu-tinta-suave); cursor: pointer; transition: background-color 0.25s, color 0.25s; text-align: center; }
.yu-calc__modo input:checked + span { background: #fff; color: var(--yu-tinta); box-shadow: 0 6px 14px -8px rgb(22 35 59 / 0.35); }
.yu-calc__modo input:focus-visible + span { outline: 2px solid var(--yu-acento); outline-offset: 2px; }
.yu-calc[data-modo='agua'] .yu-calc__medidas, .yu-calc[data-modo='medidas'] .yu-calc__agua { display: none; }
.yu-calc__medidas { display: grid; gap: 12px; }
.yu-calc__tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.yu-calc__unidad { position: relative; display: block; }
.yu-calc__unidad input { padding-right: 46px !important; }
.yu-calc__unidad b { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 0.85rem; color: var(--yu-tinta-suave); }
.yu-calc .yu-campo input, .yu-calc .yu-select select { background: #fff; }
.yu-calc__fila { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.yu-calc__fila .yu-cant { min-height: 46px; }
.yu-calc__fragancia input[type='range'] { width: 100%; accent-color: var(--yu-turq); min-height: 30px; padding: 0; border: 0; background: none; }
.yu-calc__resultado { position: sticky; top: calc(var(--yu-cab) + 20px); display: grid; gap: 12px; padding: 20px; border-radius: 24px; background: #fff; box-shadow: 0 20px 40px -30px rgb(22 35 59 / 0.5); }
.yu-calc__total { font-size: 0.95rem; color: var(--yu-tinta-suave); }
.yu-calc__total b { color: var(--yu-tinta); }
.yu-calc__cantidades { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.yu-calc__cantidades li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--yu-crema); animation: yu-aparece 0.35s var(--yu-ease); }
.yu-calc__cantidades li:first-child { background: color-mix(in srgb, var(--yu-calc-bg, #D6EEFF) 60%, #fff); }
.yu-calc__cantidades span { display: grid; font-weight: 600; }
.yu-calc__cantidades span small { font-weight: 500; font-size: 0.8rem; color: var(--yu-tinta-suave); }
.yu-calc__cantidades b { font-family: var(--yu-titulos); font-size: 1.5rem; font-weight: 800; white-space: nowrap; color: var(--yu-turq-h); }
.yu-calc__cantidades b small { font-family: var(--yu-texto); font-size: 0.85rem; font-weight: 700; }
.yu-calc__nota { font-size: 0.88rem; padding: 10px 12px; border-radius: 14px; background: #fff7e0; }
.yu-calc__nota:empty { display: none; }
.yu-calc__aviso { font-size: 0.78rem; color: var(--yu-tinta-suave); }
.yu-calc__mas { text-align: center; }
.yu-calc__mas .yu-link-flecha { white-space: normal; justify-content: center; }
.yu-calc__consejos { display: grid; gap: 8px; }
.yu-calc__consejos details { padding: 0 18px; border-radius: 20px; background: rgb(255 255 255 / 0.8); }
.yu-calc__consejos summary { display: flex; align-items: center; gap: 0.3em; min-height: 54px; font-weight: 700; cursor: pointer; list-style: none; }
.yu-calc__consejos summary::-webkit-details-marker { display: none; }
.yu-calc__consejos summary svg { width: 18px; height: 18px; flex: none; margin-left: auto; transition: transform 0.3s var(--yu-ease); }
.yu-calc__consejos details[open] summary svg { transform: rotate(45deg); }
.yu-calc__consejos ul, .yu-calc-guia ul { display: grid; gap: 8px; margin: 0; padding: 0 0 16px 1.1em; color: var(--yu-tinta-suave); }
@media (max-width: 849px) { .yu-calc__cuerpo { grid-template-columns: 1fr; } .yu-calc__resultado { position: static; } }
@media (max-width: 749px) { .yu-calc__materiales { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px; } .yu-calc__material { flex: none; } .yu-calc__tres { gap: 6px; } }
/* Sección de la portada */
.yu-calc-seccion { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.yu-calc-seccion__intro { display: grid; gap: 12px; align-content: center; }
.yu-calc-seccion__intro h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; }
.yu-calc-seccion__intro > p:not(.yu-etiqueta-seccion) { color: var(--yu-tinta-suave); }
.yu-calc-seccion__ill { display: flex; gap: 10px; margin-top: 6px; }
.yu-calc-seccion__ill span { display: grid; place-items: center; width: 64px; aspect-ratio: 1; border-radius: 50%; background: var(--yu-glow), #fff; box-shadow: var(--yu-sombra-chica); animation: yu-hero-flota 6s ease-in-out infinite alternate; }
.yu-calc-seccion__ill span:nth-child(2) { animation-delay: -2s; } .yu-calc-seccion__ill span:nth-child(3) { animation-delay: -4s; }
.yu-calc-seccion__ill .yu-ill { width: 60%; height: 60%; }
@media (max-width: 989px) { .yu-calc-seccion { grid-template-columns: 1fr; } }
/* Franja propia para la calculadora del inicio: turquesa de la marca con burbujas suaves, así no se mezcla con lo demás */
.yu-seccion.yu-calc-seccion { width: var(--yu-ancho-amplio); }
.yu-calc-seccion { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(36px, 5vw, 64px); padding: clamp(24px, 4vw, 56px); border-radius: clamp(28px, 3vw, 40px);
  background: radial-gradient(60% 90% at 0% 0%, rgb(255 255 255 / 0.16), transparent 60%), radial-gradient(50% 80% at 100% 100%, rgb(191 237 229 / 0.35), transparent 60%), linear-gradient(135deg, #0E7C88, #0B6470 60%, #13707c); color: #fff; }
.yu-calc-seccion::before, .yu-calc-seccion::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; background: rgb(255 255 255 / 0.07); animation: yu-hero-flota 9s ease-in-out infinite alternate; }
.yu-calc-seccion::before { width: 340px; aspect-ratio: 1; left: -120px; bottom: -160px; }
.yu-calc-seccion::after { width: 200px; aspect-ratio: 1; right: 30%; top: -110px; animation-delay: -4s; }
.yu-calc-seccion .yu-calc-seccion__intro .yu-etiqueta-seccion { background: rgb(255 255 255 / 0.16); color: #fff; }
.yu-calc-seccion .yu-calc-seccion__intro > p:not(.yu-etiqueta-seccion) { color: rgb(255 255 255 / 0.86); }
.yu-calc-seccion .yu-calc { color: var(--yu-tinta); box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.45); }
@media (max-width: 749px) { .yu-calc-seccion { padding: 22px 14px 14px; } }

/* Página */
/* Página de la calculadora: la calculadora sobre una franja menta más oscura, para que pestañas, campos y textos se lean */
.yu-calc-pagina #calc-pagina { margin-top: clamp(20px, 3vw, 32px); padding: clamp(12px, 2.2vw, 32px); border-radius: clamp(28px, 3vw, 40px);
  background: radial-gradient(50% 90% at 0% 0%, rgb(255 255 255 / 0.35), transparent 60%), linear-gradient(135deg, #BFE3DA, #CFE6EE 55%, #D9D6F2); }
.yu-calc-pagina #calc-pagina .yu-calc { box-shadow: 0 30px 60px -38px rgb(14 80 90 / 0.55); }
@media (max-width: 749px) { .yu-calc-pagina #calc-pagina { margin-inline: calc(-1 * var(--yu-margen) + 8px); padding: 10px; } }
.yu-calc-guia { margin-top: clamp(36px, 5vw, 56px); }
.yu-calc-guia h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 16px; }
/* Consejos: carrusel de una sola fila */
.yu-calc-guia__grilla > .yu-calc-guia__tarjeta { width: clamp(270px, calc((100% - 2 * var(--yu-gap)) / 3), 420px); }
@media (max-width: 749px) { .yu-calc-guia__grilla > .yu-calc-guia__tarjeta { width: 84%; } }
.yu-calc-guia__tarjeta { padding: 20px 22px 6px; border-radius: 24px; background: var(--yu-glow), var(--yu-menta); }
.yu-calc-guia__tarjeta:nth-child(2n) { background: var(--yu-glow), #fff3e4; }
.yu-calc-guia__tarjeta h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 1.2rem; }
/* Popup */
.yu-calc-pop { width: min(980px, calc(100% - 24px)); max-height: calc(100svh - 24px); padding: 20px; border: 0; border-radius: 32px; background: var(--yu-crema-2); color: var(--yu-tinta); box-shadow: 0 50px 100px -40px rgb(22 35 59 / 0.6); }
.yu-calc-pop::backdrop { background: rgb(22 35 59 / 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.yu-calc-pop[open] { animation: yu-pop-entra 0.45s var(--yu-ease); }
.yu-calc-pop__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 8px 16px; }
.yu-calc-pop__cab h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; }
.yu-calc-pop__cerrar { background: #fff; box-shadow: var(--yu-sombra-chica); }
.yu-calc-pop .yu-calc__resultado { position: static; }
@media (max-width: 749px) { .yu-calc-pop { width: 100%; max-width: none; margin: auto 0 0; padding: 14px; border-radius: 28px 28px 0 0; } }
/* Pie: acceso a la calculadora y formulario resaltado al ir a "Contacto" */
.yu-pie__calc { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px; background: rgb(255 255 255 / 0.75); text-decoration: none; max-width: 320px; transition: background-color 0.2s, transform 0.25s var(--yu-ease); }
.yu-pie__calc:hover { background: #fff; transform: translateY(-2px); }
.yu-pie__calc > .yu-ill { width: 40px; height: 40px; flex: none; }
.yu-pie__calc span { display: grid; }
.yu-pie__calc small { font-size: 0.8rem; color: var(--yu-tinta-suave); }
.yu-pie__form.is-resaltado { animation: yu-resaltar 1.6s var(--yu-ease); }
@keyframes yu-resaltar { 0% { box-shadow: 0 0 0 0 rgb(26 160 174 / 0.5); } 40% { box-shadow: 0 0 0 10px rgb(26 160 174 / 0.15); } 100% { box-shadow: 0 0 0 0 rgb(26 160 174 / 0); } }
.yu-pie__abajo .ns-credito { margin-left: auto; --ns-credito-tinta: var(--yu-tinta); }

/* Las grillas de la calculadora y de los popups se achican con la pantalla (sin esto, un campo empuja el ancho) */
.yu-calc, .yu-calc > *, .yu-calc__cuerpo > *, .yu-calc__datos > *, #calc-pop-cuerpo, .yu-cuenta-pop > *, .yu-cuenta-pop__cuerpo > *, .yu-cuenta-pop__form > * { min-width: 0; }
.yu-calc-pop, .yu-cuenta-pop { overflow-x: hidden; }
.yu-calc .yu-campo input, .yu-cuenta-pop__form input { max-width: 100%; }


/* ------------------------------------------------------------------ checkout: pasos claros arriba */
.yu-checkout__cab { display: grid; justify-items: center; gap: 6px; margin-bottom: clamp(22px, 3vw, 36px); text-align: center; }
.yu-checkout__cab .yu-etiqueta-seccion { justify-self: center; margin: 0; }
.yu-checkout__cab h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; }
.yu-pasos {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 860px); margin: 14px 0 0; padding: 18px 12px;
  list-style: none; border-radius: 28px; background: var(--yu-glow), linear-gradient(120deg, #e3f6f2, #f6fcfa 55%, #fff6ea); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 20px 40px -32px rgb(22 35 59 / 0.45);
  --x: calc(100% / 6);
}
/* La línea que une los pasos y se llena con el avance */
.yu-pasos::before, .yu-pasos::after { content: ''; position: absolute; top: calc(18px + 24px); left: var(--x); height: 4px; margin-top: -2px; border-radius: 4px; }
.yu-pasos::before { right: var(--x); background: rgb(22 35 59 / 0.1); }
.yu-pasos::after { width: calc((100% - 2 * var(--x)) * var(--avance, 0)); background: linear-gradient(90deg, var(--yu-acento), var(--yu-turq)); transition: width 0.7s var(--yu-ease); }
.yu-pasos__paso { position: relative; z-index: 1; display: grid; justify-items: center; }
.yu-pasos__paso > a, .yu-pasos__caja { display: grid; justify-items: center; gap: 8px; text-decoration: none; color: inherit; padding: 0 6px; }
.yu-pasos__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--yu-tinta-suave); font-family: var(--yu-titulos); font-size: 1.15rem; font-weight: 800; box-shadow: inset 0 0 0 2px rgb(22 35 59 / 0.12); transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.4s var(--yu-ease); }
.yu-pasos__num svg { width: 22px; height: 22px; }
.yu-pasos__texto { display: grid; gap: 1px; }
.yu-pasos__texto strong { font-size: 1rem; }
.yu-pasos__texto small { font-size: 0.8rem; color: var(--yu-tinta-suave); }
.yu-pasos__paso.is-falta .yu-pasos__texto { opacity: 0.6; }
.yu-pasos__paso.is-actual .yu-pasos__num { background: var(--yu-tinta); color: #fff; box-shadow: 0 0 0 6px rgb(22 35 59 / 0.12); transform: scale(1.06); }
.yu-pasos__paso.is-hecho .yu-pasos__num { background: var(--yu-turq); color: #fff; box-shadow: none; }
.yu-pasos__paso.is-hecho a:hover .yu-pasos__num { transform: scale(1.08); }
.yu-pasos__paso.is-hecho a:hover strong { color: var(--yu-turq); }
@media (max-width: 749px) {
  .yu-pasos { padding: 14px 4px; border-radius: 22px; }
  .yu-pasos::before, .yu-pasos::after { top: calc(14px + 19px); }
  .yu-pasos__num { width: 38px; height: 38px; font-size: 1rem; }
  .yu-pasos__texto small { display: none; }
  .yu-pasos__texto strong { font-size: 0.88rem; }
}

/* Cupón: siempre a mano, en el resumen */
.yu-resumen .yu-cupon { margin: 0 clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 26px); background: rgb(255 255 255 / 0.85); box-shadow: none; }
.yu-resumen .yu-cupon summary { gap: 8px; list-style: none; }
.yu-resumen .yu-cupon summary::-webkit-details-marker { display: none; }
.yu-resumen .yu-cupon summary > svg { width: 18px; height: 18px; flex: none; }
.yu-resumen .yu-cupon summary > svg:last-child { margin-left: auto; transition: transform 0.3s var(--yu-ease); }
.yu-resumen .yu-cupon[open] summary > svg:last-child { transform: rotate(180deg); }
.yu-resumen .yu-cupon__fila input { min-height: 46px; border-radius: 999px; padding: 10px 16px; }
@media (max-width: 989px) { .yu-resumen .yu-cupon { margin: 0 14px 14px; } }

/* Horario de retiro (solo con un envío de tipo retiro) */
.yu-retiro { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: var(--yu-glow), var(--yu-menta); animation: yu-aparece 0.35s var(--yu-ease); }
.yu-retiro h3 { margin: 0; }
.yu-horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.yu-horario { position: relative; display: grid; }
.yu-horario input { position: absolute; opacity: 0; }
.yu-horario span { display: grid; place-items: center; min-height: 46px; padding: 0 10px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 0.92rem; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--yu-borde); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.yu-horario span:hover { box-shadow: inset 0 0 0 1.5px var(--yu-tinta); }
.yu-horario input:checked + span { background: var(--yu-turq); color: #fff; box-shadow: none; }
.yu-horario input:focus-visible + span { outline: 2px solid var(--yu-acento); outline-offset: 3px; }

/* ------------------------------------------------------------------ movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .yu-ill * { animation: none !important; }
  .yu-hero__texto > *, .yu-hero__burbuja { transform: none !important; opacity: 1 !important; animation: none !important; }
  .yu-hero__manchas i, .yu-hero__chispas i, .yu-hero__foto { animation: none !important; }
}

/* Checkout: casillas (factura a empresa, lo recibe otra persona) — Opciones del checkout del panel */
.yu-casilla { display: inline-flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; min-height: 44px; }
.yu-casilla input { width: 20px; height: 20px; margin: 0; accent-color: var(--yu-turq); cursor: pointer; flex: none; }
.yu-casilla input:focus-visible { outline: 3px solid var(--yu-acento); outline-offset: 2px; }
.yu-empresa { display: grid; gap: 12px; }
.yu-empresa h3 { margin: 6px 0 0; font-size: 1rem; }
.yu-empresa [hidden], .yu-direccion [hidden] { display: none; }
/* Envío que se paga al recibir: aviso chico, no un precio */
.yu-radio__nota { display: block; font-size: 0.8rem; font-weight: 600; line-height: 1.25; text-align: right; color: var(--yu-tinta-suave); }

/* Menú Tienda de tres niveles: a la izquierda Moldes / Insumos, al costado las subcategorías del que se está mirando */
.yu-desplegable.yu-mega { display: flex; align-items: flex-start; gap: 12px; width: auto; padding: 0; left: -14px; background: none; box-shadow: none; transform: translate(0, -6px); }
.yu-nav__item.is-open .yu-mega { transform: translate(0, 0); }
@media (hover: hover) { .yu-nav__item:hover .yu-mega { transform: translate(0, 0); } }
.yu-mega__lista, .yu-mega__panel {
  border-radius: 24px; background: radial-gradient(70% 120% at 8% 0%, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 55%), linear-gradient(135deg, #e3f6f2, #f6fcfa 60%, #fff8ef);
  box-shadow: 0 28px 56px -26px rgb(22 35 59 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.9);
}
.yu-mega__lista { display: grid; gap: 4px; width: 260px; padding: 10px; }
.yu-mega__panel { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 4px 12px; padding: 14px; }
.yu-mega__panel[hidden] { display: none; }
.ns-nav .yu-mega a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 6px; border-radius: 18px; font-size: 0.97rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--yu-tinta); }
.ns-nav .yu-mega a:hover, .ns-nav .yu-mega a.is-activa { background: #fff; color: var(--yu-tinta); }
.yu-mega__principal .yu-circulo { --yu-circ: 46px; }
.yu-mega__panel .yu-circulo { --yu-circ: 38px; }
.yu-mega__texto { display: grid; flex: 1; line-height: 1.2; }
.yu-mega__texto small { font-size: 0.8rem; font-weight: 500; color: var(--yu-tinta-suave); }
.yu-mega__flecha { width: 16px; height: 16px; color: var(--yu-tinta-suave); }
.ns-nav .yu-mega a.yu-mega__todo { justify-content: center; min-height: 44px; margin-top: 4px; border-radius: 999px; background: rgb(255 255 255 / 0.7); font-size: 0.9rem; }
.yu-mega__todo svg { width: 16px; height: 16px; }
/* El panel de subcategorías aparece suave al pasar por Moldes (queda al costado de la lista) */
.yu-mega { position: absolute; }
.yu-mega__panel { position: absolute; top: 0; left: calc(260px + 12px); opacity: 0; visibility: hidden; transform: translateX(-10px);
  transition: opacity 0.2s, transform 0.3s var(--yu-ease), visibility 0s linear 0.3s; }
.yu-mega__panel.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.3s var(--yu-ease), visibility 0s; }
.yu-mega__panel::before { content: ''; position: absolute; top: 0; bottom: 0; left: -14px; width: 14px; }

/* Ficha: "Ahorrá X%" arriba del nombre cuando el producto está en oferta */
.yu-ficha__ahorra { position: static; display: inline-flex; align-self: flex-start; width: max-content; margin: 0 0 10px; transform: rotate(-3deg); box-shadow: 0 8px 18px -10px rgb(226 72 58 / 0.7); }
.yu-ficha__ahorra[hidden] { display: none; }
/* Ficha: botones de compra más compactos; con lugar, cantidad + agregar + comprar ahora en una sola fila */
.yu-ficha__info { container-type: inline-size; }
.yu-ficha__comprar .yu-btn--grande { min-height: 48px; padding: 0 18px; font-size: 0.95rem; }
.yu-ficha__comprar .yu-cant { min-height: 48px; }
.yu-ficha__comprar .yu-cant button { width: 40px; height: 40px; }
@container (min-width: 470px) {
  .yu-ficha__comprar { grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) !important; }
  .yu-ficha__comprar .yu-btn--grande { padding: 0 14px; font-size: 0.92rem; }
  .yu-ficha__ya { grid-column: auto; }
}

/* Pie: tarjeta de ubicación debajo de Contacto (se prende en el panel: Contacto y redes) */
.yu-pie__ubicacion { margin: 4px 0 14px; max-width: 340px; }
.yu-pie__ubicacion:hover { transform: none; }
.yu-pie__pin { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #FFE1D3; color: var(--yu-tinta); }
.yu-pie__pin svg { width: 20px; height: 20px; }
.yu-pie__ubicacion strong { font-size: 0.95rem; }

/* Campos de la tarjeta (formulario de Mercado Pago) con la forma de los campos de la web. Los números se escriben en
   marcos seguros de Mercado Pago: acá solo se viste el recuadro. El color del borde va con poca prioridad (:where) para
   que el rojo de error de Mercado Pago siga ganando. */
#pago-paso [class*="form-inputs"] label { margin-bottom: 6px !important; font-family: var(--yu-texto) !important; font-size: 0.9rem !important; font-weight: 600 !important; color: var(--yu-tinta) !important; }
#pago-paso [class*="input-container"] > div:not([class*="absolute"]), #pago-paso [class*="form-inputs"] > div > input, #pago-paso [class*="form-inputs"] section > div {
  min-height: 50px; border-width: 1.5px !important; border-radius: 14px !important; background: #fff !important; transition: border-color 0.2s, box-shadow 0.2s;
}
#pago-paso [class*="input-container"] > div:not([class*="absolute"]) { padding: 13px 16px !important; }
#pago-paso [class*="form-inputs"] > div > input { padding: 12px 16px !important; font-family: var(--yu-texto) !important; font-weight: 500; }
#pago-paso [class*="form-inputs"] section > div select { padding-left: 14px !important; font-family: var(--yu-texto) !important; }
#pago-paso [class*="form-inputs"] section > div { display: flex; align-items: stretch; }
#pago-paso [class*="form-inputs"] section > div > * { align-self: stretch; }
#pago-paso [class*="form-inputs"] section > div input { height: auto !important; padding: 12px 14px !important; font-family: var(--yu-texto) !important; }
:where(#pago-paso [class*="form-inputs"]) [class*="input-container"] > div:not([class*="absolute"]), :where(#pago-paso [class*="form-inputs"]) div > input:not([class*="split"]), :where(#pago-paso [class*="form-inputs"]) section > div[class] { border-color: var(--yu-borde); }
#pago-paso [class*="input-container"] > div:not([class*="absolute"]):focus-within, #pago-paso [class*="form-inputs"] > div > input:focus, #pago-paso [class*="form-inputs"] section > div:focus-within { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--yu-acento) 18%, transparent); }
#pago-paso [class*="mp-checkout-bricks__flags"] > div { border-color: var(--yu-borde) !important; border-radius: 6px !important; }
#pago-paso [class*="mp-checkout-bricks__container"]:has(> [class*="flags"]) { margin-bottom: 14px !important; }
/* Cómo pagar: cada cuenta en su tarjeta, con los números para copiar; la aclaración de la tienda abajo */
.yu-pedido__instrucciones { gap: 16px !important; padding: clamp(18px, 2.6vw, 26px) !important; border-radius: var(--yu-r-foto) !important; }
.yu-pedido__instr-cab { display: grid; gap: 4px; }
.yu-pedido__instr-cab h2 { font-size: 1.25rem; }
.yu-pedido__instr-cab p { color: var(--yu-tinta-suave); }
.yu-pedido__instr-cab strong { color: var(--yu-tinta); }
.yu-cuentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.yu-cuenta { display: grid; align-content: start; gap: 12px; padding: 16px; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--yu-bg) 55%, #fff), #fff 70%); box-shadow: inset 0 0 0 1px var(--yu-borde); }
.yu-cuenta__banco { display: flex; align-items: center; gap: 10px; margin: 0; }
.yu-cuenta__inicial { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--yu-bg); font: 800 1rem/1 var(--yu-titulos); color: var(--yu-tinta); }
.yu-cuenta__banco strong { font-family: var(--yu-titulos); font-size: 1.1rem; }
.yu-cuenta__banco small { color: var(--yu-tinta-suave); font-size: 0.82rem; }
.yu-cuenta dl { display: grid; gap: 8px; margin: 0; }
.yu-cuenta dl > div { display: grid; gap: 2px; }
.yu-cuenta dt { color: var(--yu-tinta-suave); font-size: 0.78rem; font-weight: 600; }
.yu-cuenta dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.yu-cuenta dd > span { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.yu-copiar { display: inline-flex; align-items: center; gap: 5px; flex: none; min-height: 32px; padding: 0 11px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--yu-borde); color: var(--yu-turq-h); font: 700 0.78rem/1 var(--yu-texto); cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.yu-copiar svg { width: 15px; height: 15px; }
.yu-copiar:hover { box-shadow: inset 0 0 0 1px var(--yu-turq); }
.yu-copiar.is-copiado { background: var(--yu-ok); color: #fff; box-shadow: none; }
.yu-pedido__nota-pago { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--yu-crema-2); color: var(--yu-tinta-suave); font-size: 0.9rem; line-height: 1.5; }
.yu-pedido__nota-pago > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--yu-turq); }
.yu-pedido__nota-pago p { margin: 0; }
.yu-pedido__nota-pago p + p { margin-top: 8px; }