/* =========================================================
   Ramasil · estilos de la web
   Colores principales: salen del panel (Apariencia) y app.js los pisa en :root
     --marca  (principal: azul)   --oscuro (oscuro: azul marino)   --claro (claro: fondo)
   El amarillo es el del logo de Ramasil (detalles y acentos de la firma).
   Rangos: < 750px celular · 750–1099px tablet · ≥ 1100px compu.
   ========================================================= */
:root {
  --marca: #0477f8;
  --oscuro: #024085;
  --claro: #f2f5fa;
  --amarillo: #fff200;
  --sobre-marca: #ffffff;
  --marca-fuerte: color-mix(in srgb, var(--marca) 82%, #001a40);   /* botones con texto blanco: contraste AA */
  --oscuro-hondo: color-mix(in srgb, var(--oscuro) 70%, #000814);
  --texto: color-mix(in srgb, var(--oscuro) 30%, #0a1220);
  --suave: color-mix(in srgb, var(--oscuro) 25%, #5d6a7c);
  --linea: color-mix(in srgb, var(--oscuro) 12%, #e6e9ee);
  --tarjeta: #ffffff;
  --fondo: var(--claro);
  --ok: #138a4c;
  --alerta: #b54708;
  --error: #c0262d;
  --radio: 16px;
  --radio-chico: 10px;
  --ancho: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --f-titulo: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sombra: 0 1px 2px rgb(2 20 50 / 0.06), 0 8px 24px -12px rgb(2 20 50 / 0.18);
  --sombra-alta: 0 30px 60px -24px rgb(2 20 50 / 0.45);
  --arriba: 104px;   /* lo que ocupa el header flotante */

  /* Firma NS adaptada a la marca */
  --ns-accent: var(--amarillo);
  --ns-on-accent: var(--oscuro-hondo);
  --ns-bar: var(--oscuro);
  --ns-panel-bg: var(--oscuro-hondo);
  --ns-top-bg: var(--oscuro);
  --ns-font-display: var(--f-titulo);
  --ns-font-body: var(--f-texto);
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-texto); font-size: 1rem; line-height: 1.55; background: var(--fondo); color: var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 800; line-height: 1.02; letter-spacing: -0.005em; margin: 0; color: var(--oscuro); text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--marca); }
p { margin: 0; }
main { min-height: 70svh; outline: none; }
svg { width: 20px; height: 20px; flex: none; }
.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
::selection { background: var(--amarillo); color: var(--oscuro-hondo); }
.rm-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rm-saltar { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 16px; border-radius: 10px; background: var(--amarillo); color: var(--oscuro-hondo); font-weight: 700; text-decoration: none; }
.rm-saltar:focus-visible { top: 12px; }
.rm-centro { text-align: center; margin-top: 24px; }
.error { color: var(--error); font-size: 0.92rem; }
.error:empty { display: none; }
@media (min-width: 750px) { .rm-solo-movil { display: none !important; } }

/* ---------------------------------------------------------------- botones y links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--marca-fuerte); color: #fff; font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.25s var(--ease), background-color 0.2s, box-shadow 0.2s; }
.btn:hover { background: var(--oscuro); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; }
.btn--grande { min-height: 54px; padding: 0 28px; font-size: 1.05rem; }
.btn--chico { min-height: 40px; padding: 0 14px; font-size: 0.9rem; }
.btn--sec { background: transparent; color: var(--oscuro); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--sec:hover { background: var(--oscuro); color: #fff; box-shadow: inset 0 0 0 1.5px var(--oscuro); }
.btn--claro { color: #fff; }
.btn--claro:hover { background: #fff; color: var(--oscuro); box-shadow: inset 0 0 0 1.5px #fff; }
.btn--amarillo { background: var(--amarillo); color: var(--oscuro-hondo); }
.btn--amarillo:hover { background: #fff; color: var(--oscuro-hondo); }
.btn.is-ok { background: var(--ok); }
.rm-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--marca-fuerte); font-weight: 700; text-decoration: none; cursor: pointer; }
.rm-link svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.rm-link:hover svg { transform: translateX(3px); }
.rm-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.rm-link--claro { color: var(--amarillo); }
.rm-link--gris { color: var(--suave); font-weight: 500; font-size: 0.85rem; }
.rm-icono-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color 0.2s; }
.rm-icono-btn:hover { background: rgb(2 20 50 / 0.07); }
.rm-icono-btn--chico { width: 32px; height: 32px; }
.rm-icono-btn--chico svg { width: 16px; height: 16px; }
.rm-antetitulo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marca-fuerte); }
.rm-antetitulo svg { width: 16px; height: 16px; }
.rm-antetitulo--claro { color: var(--amarillo); }

/* ---------------------------------------------------------------- aviso de la tienda (panel → Aviso) */
.aviso { position: fixed; z-index: 55; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 36px; padding: 6px 16px; background: var(--amarillo); color: var(--oscuro-hondo); font-size: 0.88rem; font-weight: 600; text-align: center; transition: transform 0.4s var(--ease); }
.aviso a { color: inherit; font-weight: 800; }
html.con-aviso body { padding-top: 36px; }
html.con-aviso .ns-header { top: calc(var(--ns-gap) + 36px); transition: --ns-bar-h 0.35s var(--ns-ease), top 0.4s var(--ease); }
html.con-aviso:has(.ns-header.is-scrolled) .aviso--bar { transform: translateY(-100%); }
html.con-aviso:has(.ns-header.is-scrolled) .ns-header { top: var(--ns-gap); }
.aviso--floating { top: auto; left: 16px; right: 16px; bottom: 16px; z-index: 66; max-width: 560px; margin-inline: auto; padding: 12px 48px 12px 18px; border-radius: 16px; box-shadow: var(--sombra-alta); }
.aviso__cerrar { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 1.4rem; cursor: pointer; }

/* ---------------------------------------------------------------- header (firma NS) con buscador */
/* Fuera de la portada (fondo claro) la barra va casi sólida: el vidrio transparente sobre blanco queda grisáceo */
html:not([data-pagina='inicio']) .ns-header { --ns-glass: color-mix(in srgb, var(--ns-bar) 94%, transparent); }
.ns-bar { gap: 14px; padding-inline: clamp(16px, 1.6vw, 22px) 8px; }
.ns-brand { min-width: 0; }
.ns-brand img { height: calc(var(--ns-bar-h) - 30px); max-width: 160px; object-fit: contain; object-position: left center; }
.rm-logotipo { font-family: var(--f-titulo); font-weight: 800; font-style: italic; font-size: 1.7rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--amarillo); line-height: 1; }
.ns-brand span#marca { display: flex; }
.rm-buscador { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.rm-buscador > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: currentColor; opacity: 0.7; pointer-events: none; }
.rm-buscador input { width: 100%; min-width: 0; height: 44px; padding: 0 44px 0 42px; border: 1px solid rgb(255 255 255 / 0.18); border-radius: 999px; background: rgb(255 255 255 / 0.1); color: #fff; outline: none; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.rm-buscador input::placeholder { color: rgb(255 255 255 / 0.72); }
.rm-buscador input::-webkit-search-cancel-button { filter: invert(1); }
.rm-buscador input:focus { background: #fff; color: var(--texto); border-color: var(--amarillo); }
.rm-buscador input:focus::placeholder { color: var(--suave); }
.rm-buscador input:focus::-webkit-search-cancel-button { filter: none; }
.rm-buscador:focus-within > svg { color: var(--oscuro); opacity: 1; }
.rm-buscador kbd { position: absolute; right: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgb(255 255 255 / 0.3); font: 600 0.75rem var(--f-texto); color: rgb(255 255 255 / 0.75); pointer-events: none; }
.rm-buscador:focus-within kbd { display: none; }
.rm-buscador--barra { max-width: 620px; margin-inline: auto; }
.rm-acciones { display: flex; align-items: center; gap: 4px; flex: none; }
.rm-accion { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: rgb(255 255 255 / 0.9); font-weight: 600; font-size: 0.9rem; text-decoration: none; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.rm-accion:hover, .rm-accion[aria-current] { background: rgb(255 255 255 / 0.1); color: #fff; }
.rm-accion svg { width: 19px; height: 19px; }
.rm-accion--rapido svg { color: var(--amarillo); }
.rm-accion--buscar { display: none; }
.rm-accion span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-cta { margin-left: 0; color: var(--ns-on-accent); font-weight: 700; }
.contador { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 2px; border-radius: 99px; background: var(--oscuro-hondo); color: var(--amarillo); font-size: 0.75rem; transition: transform 0.3s var(--ease); }
.contador.is-lleno { animation: rm-latido 0.5s var(--ease); }
@keyframes rm-latido { 50% { transform: scale(1.25); } }
@media (max-width: 1099px) {
  .rm-accion span { display: none; }
  .rm-accion { width: 44px; justify-content: center; padding: 0; }
}
@media (max-width: 749px) {
  .rm-buscador--barra { display: none; }
  .rm-accion--buscar { display: inline-flex; }
  .rm-accion--rapido { display: none; }
  .ns-bar { gap: 4px; padding-left: 58px; }
  .ns-brand { margin-right: auto; }
  .rm-logotipo { font-size: 1.45rem; }
}
/* Menú grande: subenlaces y rubros */
.ns-panel__sub { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 0 12px 2.6em; }
.ns-panel__nav .ns-panel__sub a { display: inline; font-family: var(--f-texto); font-size: 1rem; font-weight: 500; line-height: 1.4; padding: 2px 0; border: 0; opacity: 0.75; transform: none; }
.ns-panel__nav .ns-panel__sub a:hover { opacity: 1; padding-left: 0; }
.ns-panel__nav > a[aria-current] { color: var(--amarillo); }
.ns-panel__nav a { text-transform: uppercase; }
.rm-panel-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ns-panel__nav .rm-panel-cats a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgb(255 255 255 / 0.18); border-radius: 999px; font-family: var(--f-texto); font-size: 0.88rem; font-weight: 600; text-transform: none; opacity: 1; transform: none; }
.ns-panel__nav .rm-panel-cats a:hover { padding-left: 14px; border-color: var(--amarillo); }
.ns-panel__nav .rm-panel-cats svg { width: 16px; height: 16px; color: var(--amarillo); }
.ns-panel__social span { font-size: 0.72rem; font-weight: 600; }
.horario { opacity: 0.8; font-size: 0.9rem; }

/* ---------------------------------------------------------------- sugerencias del buscador */
.rm-sugerencias { position: fixed; z-index: 75; max-height: min(70svh, 560px); overflow-y: auto; padding: 8px; border-radius: 20px; background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra-alta), 0 0 0 1px var(--linea); animation: rm-entra 0.25s var(--ease); }
@keyframes rm-entra { from { opacity: 0; transform: translateY(-6px); } }
.rm-sug__grupo { padding: 6px 4px; }
.rm-sug__grupo + .rm-sug__grupo { border-top: 1px solid var(--linea); }
.rm-sug__grupo > p { padding: 6px 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); }
.rm-sug__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 6px 6px; }
.rm-sug__chips a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--claro); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.rm-sug__chips a b { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--marca-fuerte); }
.rm-sug__chips a small { color: var(--suave); }
.rm-sug__chips svg { width: 16px; height: 16px; color: var(--marca); }
.rm-sug__prod { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; text-decoration: none; }
.rm-sug__prod img, .rm-sug__prod .rm-sinfoto { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); }
.rm-sug__prod span { display: grid; min-width: 0; }
.rm-sug__prod strong { font-weight: 600; font-size: 0.95rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rm-sug__prod small { color: var(--suave); font-size: 0.8rem; }
.rm-sug__prod em { font-style: normal; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.rm-sugerencias a:hover, .rm-sugerencias a.is-activa { background: color-mix(in srgb, var(--marca) 9%, #fff); }
.rm-sugerencias mark { background: color-mix(in srgb, var(--amarillo) 70%, transparent); color: inherit; border-radius: 3px; }
.rm-sug__todos { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 4px; padding: 12px; border-radius: 12px; background: var(--oscuro); color: #fff !important; font-weight: 700; text-decoration: none; }
.rm-sug__todos:hover { background: var(--marca-fuerte) !important; }
.rm-sug__todos svg { width: 16px; height: 16px; }
.rm-sug__nada { padding: 4px 10px 10px; color: var(--suave); }
.rm-sug__nada a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ok); }
.rm-busqueda-movil { position: fixed; z-index: 74; inset: 0; padding: 12px; background: rgb(2 20 50 / 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rm-busqueda-movil .rm-buscador { padding: 6px; border-radius: 999px; background: var(--oscuro); }
.rm-busqueda-movil .rm-buscador > svg { left: 20px; }
.rm-busqueda-movil .rm-buscador input { height: 48px; padding-right: 12px; font-size: 16px; }
.rm-busqueda-movil .rm-icono-btn { color: #fff; }
html.rm-buscando { overflow: hidden; }

/* ---------------------------------------------------------------- carga y estados vacíos */
.rm-cargando { height: 70svh; }
.rm-espera { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px 16px; color: var(--suave); }
.rm-espera__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--marca); animation: rm-pulso 1s ease-in-out infinite; }
@keyframes rm-pulso { 50% { transform: scale(1.6); opacity: 0.4; } }
.rm-vacia { display: grid; justify-items: center; gap: 14px; padding: 150px 0 80px; text-align: center; }
.rm-vacia > svg { width: 48px; height: 48px; color: var(--marca); }
.rm-vacia h1 { font-size: clamp(2rem, 5vw, 3rem); }
.rm-vacia p { color: var(--suave); max-width: 520px; }
.rm-vacia p:has(.btn) { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rm-nada { display: grid; justify-items: center; gap: 10px; padding: 56px 20px; border: 1.5px dashed var(--linea); border-radius: var(--radio); text-align: center; color: var(--suave); }
.rm-nada svg { width: 36px; height: 36px; color: var(--marca); }
.rm-nada h2 { font-size: 1.6rem; }
.rm-nota { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px; border-radius: 14px; background: color-mix(in srgb, var(--marca) 8%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marca) 20%, transparent); font-size: 0.95rem; }
.rm-nota svg { color: var(--marca-fuerte); margin-top: 2px; }
.rm-nota a { font-weight: 700; color: var(--marca-fuerte); }
.rm-nota ul { margin: 6px 0 0; padding-left: 18px; }
.rm-nota--ok { background: color-mix(in srgb, var(--ok) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 25%, transparent); }
.rm-nota--ok svg { color: var(--ok); }
.rm-nota--aviso { background: color-mix(in srgb, var(--alerta) 8%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alerta) 25%, transparent); }
.rm-nota--aviso svg { color: var(--alerta); }
.rm-listo { display: grid; justify-items: center; gap: 10px; padding: 32px 12px; text-align: center; }
.rm-listo > svg { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 14%, #fff); color: var(--ok); }
.rm-listo h2 { font-size: 1.8rem; }
.rm-listo p { color: var(--suave); }

/* ---------------------------------------------------------------- portada */
.rm-hero { position: relative; overflow: hidden; padding: calc(var(--arriba) + 40px) 0 0; background: var(--oscuro-hondo); color: #fff; isolation: isolate; }
.rm-hero__fondo { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--marca) 55%, transparent), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--oscuro) 90%, transparent), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--oscuro-hondo); }
.rm-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--amarillo) 0 14px, var(--oscuro-hondo) 14px 28px); opacity: 0.9; }
.rm-hero__grilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.rm-hero h1 { color: #fff; font-size: clamp(2.7rem, 6.4vw, 5.4rem); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.01em; }
.rm-hero h1 em { display: inline; color: var(--amarillo); font-style: italic; }
.rm-hero__bajada { max-width: 560px; margin-top: 20px; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: rgb(255 255 255 / 0.82); }
.rm-buscador--grande { margin-top: 28px; max-width: 640px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.6), 0 0 0 4px rgb(255 255 255 / 0.08); }
.rm-buscador--grande > svg { left: 22px; color: var(--oscuro); opacity: 1; width: 22px; height: 22px; }
.rm-buscador--grande input { height: 52px; padding: 0 12px 0 52px; border: 0; background: transparent; color: var(--texto); font-size: 1.05rem; }
.rm-buscador--grande input::placeholder { color: var(--suave); }
.rm-buscador--grande input:focus { background: transparent; }
.rm-buscador--grande .btn { min-height: 52px; padding: 0 26px; flex: none; }
.rm-hero__ejemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: 0.9rem; color: rgb(255 255 255 / 0.65); }
.rm-hero__ejemplos a { padding: 4px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.08); color: #fff; text-decoration: none; transition: background-color 0.2s; }
.rm-hero__ejemplos a:hover { background: rgb(255 255 255 / 0.18); }
.rm-hero__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rm-hero__botones svg { color: currentColor; }
.rm-hero__lado { min-width: 0; }
.rm-hero__lado:not(:has(*)) { display: none; }
.rm-hero__grilla:has(> .rm-hero__lado:not(:has(*))) { grid-template-columns: minmax(0, 1fr); }
.rm-hero__grilla:has(> .rm-hero__lado:not(:has(*))) .rm-hero__texto { max-width: 820px; }
.rm-mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rm-mosaico a { position: relative; display: grid; align-content: space-between; gap: 22px; aspect-ratio: 1; padding: 16px; border-radius: 20px; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); text-decoration: none; overflow: hidden; transition: transform 0.4s var(--ease), background-color 0.3s, border-color 0.3s; animation: rm-sube 0.7s var(--ease) both; animation-delay: calc(0.08s * var(--i)); }
.rm-mosaico a:nth-child(3n + 2) { transform: translateY(18px); }
.rm-mosaico a:hover { background: var(--marca-fuerte); border-color: transparent; transform: translateY(-4px); }
.rm-mosaico a:nth-child(3n + 2):hover { transform: translateY(12px); }
.rm-mosaico svg { width: 36px; height: 36px; color: var(--amarillo); }
.rm-mosaico span { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.05; text-transform: uppercase; }
@keyframes rm-sube { from { opacity: 0; translate: 0 20px; } }
.rm-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: clamp(40px, 6vw, 64px) 0 0; padding: 22px 0 34px; border-top: 1px solid rgb(255 255 255 / 0.14); }
.rm-datos div { padding: 4px 18px 4px 0; }
.rm-datos div + div { padding-left: 18px; border-left: 1px solid rgb(255 255 255 / 0.14); }
.rm-datos dt { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; color: var(--amarillo); }
.rm-datos dd { margin: 4px 0 0; font-size: 0.92rem; color: rgb(255 255 255 / 0.75); }
.rm-datos--claro { margin: 0 0 20px; padding: 0; border: 0; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm-datos--claro div, .rm-datos--claro div + div { padding: 18px; border: 0; border-radius: var(--radio); background: var(--oscuro); }
@media (max-width: 899px) {
  .rm-hero__grilla { grid-template-columns: 1fr; }
  .rm-mosaico { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rm-mosaico a { aspect-ratio: auto; min-height: 104px; padding: 12px; gap: 12px; }
  .rm-mosaico a:nth-child(3n + 2), .rm-mosaico a:nth-child(3n + 2):hover { transform: none; }
  .rm-mosaico svg { width: 28px; height: 28px; }
}
@media (max-width: 749px) {
  .rm-hero { padding-top: calc(var(--arriba) + 8px); }
  .rm-buscador--grande .btn { padding: 0 16px; }
  .rm-buscador--grande input { font-size: 16px; padding-left: 46px; }
  .rm-buscador--grande > svg { left: 18px; }
  .rm-hero__botones .btn { flex: 1; }
  .rm-datos { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .rm-datos div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .rm-mosaico span { font-size: 0.9rem; }
}

/* ---------------------------------------------------------------- secciones */
.rm-seccion { padding: clamp(44px, 6vw, 80px) 0; }
.rm-seccion--gris { background: color-mix(in srgb, var(--oscuro) 5%, var(--claro)); }
.rm-seccion__cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.rm-seccion__cab h2 { font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; }
.rm-seccion__cab p { color: var(--suave); flex-basis: 100%; }
[data-aparecer] { opacity: 0; translate: 0 26px; transition: opacity 0.7s ease, translate 0.8s var(--ease); }
[data-aparecer].is-visible { opacity: 1; translate: 0 0; }

/* Rubros */
.rm-rubros__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.rm-rubro { display: grid; align-content: start; gap: 10px; padding: 18px; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra); transition: transform 0.35s var(--ease), box-shadow 0.35s; }
.rm-rubro:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--marca), var(--sombra); }
.rm-rubro__cab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; text-decoration: none; }
.rm-rubro__icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--oscuro); }
.rm-rubro__icono svg { width: 30px; height: 30px; color: var(--amarillo); transition: transform 0.4s var(--ease); }
.rm-rubro:hover .rm-rubro__icono svg { transform: rotate(-8deg) scale(1.08); }
.rm-rubro__cab strong { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: 1.35rem; line-height: 1.02; text-transform: uppercase; color: var(--oscuro); }
.rm-rubro__cab small { color: var(--suave); }
.rm-rubro__flecha { width: 20px; color: var(--marca); transition: transform 0.3s var(--ease); }
.rm-rubro:hover .rm-rubro__flecha { transform: translateX(4px); }
.rm-rubro ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rm-rubro li a { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--claro); font-size: 0.84rem; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.rm-rubro li a:hover { background: var(--oscuro); color: #fff; }
.rm-rubro__mas { font-weight: 700; color: var(--marca-fuerte); }

/* Hacete cliente */
.rm-cliente { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: linear-gradient(120deg, var(--oscuro) 0%, var(--marca-fuerte) 140%); color: #fff; position: relative; overflow: hidden; }
.rm-cliente::before { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgb(255 242 0 / 0.12); }
.rm-cliente h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); text-transform: uppercase; }
.rm-cliente h2 em { color: var(--amarillo); }
.rm-cliente > div > p { margin-top: 14px; color: rgb(255 255 255 / 0.82); max-width: 520px; }
.rm-cliente .btn { margin-top: 22px; }
.rm-cliente__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; position: relative; }
.rm-cliente__lista li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.12); font-weight: 600; }
.rm-cliente__lista svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--amarillo); color: var(--oscuro-hondo); }
@media (max-width: 849px) { .rm-cliente { grid-template-columns: 1fr; } }

/* Reposición sugerida */
.rm-repo { padding: 28px 0 0; }
.rm-repo--cuenta { padding-top: calc(var(--arriba) + 16px); }
.rm-repo__caja { padding: clamp(20px, 3.5vw, 36px); border-radius: 26px; background: var(--oscuro); color: #fff; box-shadow: var(--sombra-alta); }
.rm-repo__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; }
.rm-repo__cab h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.rm-repo__cab p { margin-top: 6px; color: rgb(255 255 255 / 0.75); }
.rm-repo__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.rm-repo__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; margin-top: 22px; }
.rm-repo__item { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; color: var(--texto); }
.rm-repo__item strong { font-weight: 700; line-height: 1.25; }
.rm-repo__item small { color: var(--suave); }
.rm-repo__item p { margin-top: 4px; font-size: 0.88rem; color: var(--alerta); }
.rm-repo .rm-espera { color: rgb(255 255 255 / 0.7); }
.rm-repo__item .rm-compra--chico { flex-direction: row; align-items: center; }
@media (max-width: 749px) {
  /* En el celular las sugerencias pasan de costado, para no hacer la portada eterna */
  .rm-repo__lista { grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .rm-repo__lista > * { scroll-snap-align: start; }
  .rm-repo__botones, .rm-repo__botones .btn { width: 100%; }
}

/* Marcas: cinta que se mueve sola */
.rm-marcas { overflow: hidden; }
.rm-marquesina { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rm-marquesina__pista { display: flex; width: max-content; animation: rm-cinta 45s linear infinite; }
.rm-marquesina:hover .rm-marquesina__pista, .rm-marquesina:focus-within .rm-marquesina__pista { animation-play-state: paused; }
.rm-marquesina__grupo { display: flex; gap: 12px; padding-right: 12px; }
.rm-marquesina a { display: grid; place-items: center; min-width: 170px; height: 88px; padding: 14px 26px; border-radius: 18px; background: var(--tarjeta); box-shadow: var(--sombra); text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.rm-marquesina a:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--marca), var(--sombra); }
.rm-marquesina img { max-height: 46px; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter 0.3s, opacity 0.3s; }
.rm-marquesina a:hover img { filter: none; opacity: 1; }
.rm-marquesina span { font-family: var(--f-titulo); font-weight: 800; font-style: italic; font-size: 1.5rem; text-transform: uppercase; color: var(--oscuro); white-space: nowrap; }
@keyframes rm-cinta { to { transform: translateX(-50%); } }

/* Beneficios */
.rm-beneficios { padding: clamp(40px, 5vw, 64px) 0; background: var(--marca-fuerte); color: #fff; }
.rm-beneficios ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.rm-beneficios li { display: grid; gap: 8px; align-content: start; }
.rm-beneficios svg { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: rgb(255 255 255 / 0.12); color: var(--amarillo); --rm-fondo-icono: var(--marca-fuerte); }
.rm-beneficios strong { font-family: var(--f-titulo); font-weight: 700; font-size: 1.45rem; line-height: 1.05; }
.rm-beneficios p { color: rgb(255 255 255 / 0.82); font-size: 0.95rem; }

/* Service y Academy */
.rm-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rm-tarjeta-grande { display: grid; align-content: end; gap: 12px; min-height: 340px; padding: clamp(24px, 3.4vw, 40px); border-radius: 28px; text-decoration: none; position: relative; overflow: hidden; transition: transform 0.4s var(--ease); }
.rm-tarjeta-grande:hover { transform: translateY(-4px); }
.rm-tarjeta-grande h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); text-transform: uppercase; }
.rm-tarjeta-grande p:not(.rm-antetitulo) { max-width: 460px; }
.rm-tarjeta-grande--service { background: var(--oscuro-hondo); color: #fff; }
.rm-tarjeta-grande--service h2 { color: #fff; }
.rm-tarjeta-grande--service h2 em { color: var(--amarillo); }
.rm-tarjeta-grande--service p:not(.rm-antetitulo) { color: rgb(255 255 255 / 0.78); }
.rm-tarjeta-grande--service::before { content: ''; position: absolute; right: -40px; top: -40px; width: 240px; height: 240px; background: repeating-linear-gradient(-45deg, rgb(255 242 0 / 0.16) 0 12px, transparent 12px 24px); border-radius: 50%; }
.rm-tarjeta-grande--academy { background: var(--amarillo); color: var(--oscuro-hondo); }
.rm-tarjeta-grande--academy h2, .rm-tarjeta-grande--academy h2 em, .rm-tarjeta-grande--academy .rm-antetitulo, .rm-tarjeta-grande--academy .rm-link { color: var(--oscuro-hondo); }
.rm-tarjeta-grande--academy::before { content: ''; position: absolute; right: 28px; top: 28px; width: 90px; height: 90px; border-radius: 50%; background: var(--oscuro-hondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff200' d='M9 6.5v11a.6.6 0 0 0 .9.5l8.5-5.5a.6.6 0 0 0 0-1L9.9 6a.6.6 0 0 0-.9.5z'/%3E%3C/svg%3E") center / 44px no-repeat; transition: transform 0.4s var(--ease); }
.rm-tarjeta-grande--academy:hover::before { transform: scale(1.1); }
@media (max-width: 749px) { .rm-dos { grid-template-columns: 1fr; } .rm-tarjeta-grande { min-height: 260px; } }

/* ---------------------------------------------------------------- tarjeta de producto */
.rm-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.rm-tarjeta { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra); overflow: hidden; transition: box-shadow 0.3s, transform 0.35s var(--ease); }
.rm-tarjeta:hover { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--marca) 60%, transparent), var(--sombra); }
.rm-tarjeta__foto { position: relative; display: block; aspect-ratio: 1; padding: 14px; background: #fff; border-bottom: 1px solid var(--linea); }
.rm-tarjeta__foto img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s var(--ease); }
.rm-tarjeta:hover .rm-tarjeta__foto img { transform: scale(1.05); }
.rm-tarjeta__cuerpo { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 6px; padding: 12px 14px 14px; }
.rm-tarjeta__marca { justify-self: start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--marca-fuerte); text-decoration: none; }
.rm-tarjeta__marca:hover { text-decoration: underline; }
.rm-tarjeta__titulo { font-family: var(--f-texto); font-size: 0.98rem; font-weight: 600; line-height: 1.3; color: var(--texto); letter-spacing: 0; }
.rm-tarjeta__titulo a { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rm-tarjeta__titulo a::after { content: ''; }
.rm-tarjeta__titulo a:hover { color: var(--marca-fuerte); }
.rm-tarjeta__datos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.8rem; color: var(--suave); }
.rm-tarjeta__precio { align-self: end; padding-top: 4px; }
.rm-codigo { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texto); }
.rm-stock { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ok); }
.rm-stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rm-stock--poco { color: var(--alerta); }
.rm-stock--no { color: var(--suave); }
.rm-multiplo { padding: 1px 7px; border-radius: 6px; background: var(--claro); font-weight: 700; color: var(--oscuro); }
.rm-etiqueta { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 8px; background: var(--amarillo); color: var(--oscuro-hondo); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.rm-etiqueta--gris { background: var(--oscuro); color: #fff; }
.rm-sinfoto { display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%; min-height: 100%; border-radius: 12px; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--oscuro) 4%, #fff) 0 10px, #fff 10px 20px); color: color-mix(in srgb, var(--oscuro) 35%, #fff); }
.rm-sinfoto svg { width: 42%; height: auto; max-width: 84px; aspect-ratio: 1; }
.rm-sinfoto small { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.rm-sinfoto--chico { border-radius: 8px; }
.rm-sinfoto--chico svg { width: 56%; }
/* Precio */
.precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.precio__valor { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--f-titulo); font-weight: 800; font-size: 1.45rem; line-height: 1; color: var(--oscuro); font-variant-numeric: tabular-nums; }
.precio__moneda { padding: 1px 5px; border-radius: 5px; background: var(--oscuro); color: var(--amarillo); font-family: var(--f-texto); font-size: 0.66rem; font-weight: 800; text-decoration: none; letter-spacing: 0.04em; }
.precio s { color: var(--suave); font-size: 0.9rem; }
.precio__etiqueta { padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--ok) 12%, #fff); color: var(--ok); font-size: 0.72rem; font-weight: 700; }
.precio__otra { flex-basis: 100%; font-size: 0.78rem; color: var(--suave); }
.precio--grande .precio__valor { font-size: clamp(2.2rem, 4vw, 2.9rem); }
.precio--oculto { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--claro); font-size: 0.85rem; color: var(--suave); }
.precio--oculto svg { width: 16px; height: 16px; color: var(--marca); }
.precio--oculto a { font-weight: 700; color: var(--marca-fuerte); }
/* Cantidad con +/- */
.rm-cant { display: inline-flex; align-items: center; height: 46px; border: 1.5px solid var(--linea); border-radius: 999px; background: #fff; overflow: hidden; flex: none; }
.rm-cant button { width: 40px; height: 100%; padding: 0; border: 0; background: none; font-size: 1.25rem; line-height: 1; color: var(--oscuro); cursor: pointer; transition: background-color 0.2s; }
.rm-cant button:hover:not(:disabled) { background: var(--claro); }
.rm-cant button:disabled { opacity: 0.35; cursor: default; }
.rm-cant input { width: 52px; height: 100%; padding: 0; border: 0; background: none; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; outline: none; }
.rm-cant input::-webkit-inner-spin-button, .rm-cant input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rm-cant:focus-within { border-color: var(--marca); }
.rm-cant--chico, .rm-compra--chico .rm-cant { height: 40px; }
.rm-cant--chico button, .rm-compra--chico .rm-cant button { width: 32px; }
.rm-cant--chico input, .rm-compra--chico .rm-cant input { width: 40px; }
.rm-compra { display: flex; gap: 8px; align-items: center; }
.rm-compra .btn { flex: 1; min-width: 0; }
.rm-compra--chico { margin-top: 6px; }
.rm-compra--chico .btn { padding: 0 10px; }
@media (max-width: 420px) {
  .rm-grilla { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rm-tarjeta__cuerpo { padding: 10px; }
  .rm-compra--chico { flex-direction: column; align-items: stretch; }
  .rm-compra--chico .rm-cant { justify-content: space-between; }
  .rm-compra--chico .rm-cant input { flex: 1; }
  .precio__valor { font-size: 1.25rem; }
}
/* Vista de lista */
.rm-filas { display: grid; gap: 8px; }
.rm-fila { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto minmax(230px, auto); gap: 16px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-fila__foto { display: block; width: 72px; height: 72px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); }
.rm-fila__foto img { width: 100%; height: 100%; object-fit: contain; }
.rm-fila__info { display: grid; gap: 4px; min-width: 0; }
.rm-fila__info .rm-tarjeta__titulo a { -webkit-line-clamp: 2; }
.rm-fila__precio { text-align: right; }
.rm-fila__precio .precio { justify-content: flex-end; }
.rm-fila__compra { display: flex; justify-content: flex-end; }
@media (max-width: 849px) {
  .rm-fila { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px 12px; }
  .rm-fila__foto { width: 60px; height: 60px; }
  .rm-fila__compra { grid-column: 1 / -1; }
  .rm-fila__compra .rm-compra { width: 100%; }
}

/* Aviso abajo ("agregado al pedido") */
.rm-aviso-flotante { position: fixed; z-index: 80; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px); padding: 12px 14px 12px 16px; border-radius: 16px; background: var(--oscuro-hondo); color: #fff; box-shadow: var(--sombra-alta); font-size: 0.94rem; transform: translate(-50%, 24px); opacity: 0; transition: transform 0.4s var(--ease), opacity 0.3s; }
.rm-aviso-flotante.is-visible { transform: translate(-50%, 0); opacity: 1; }
.rm-aviso-flotante svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--ok); color: #fff; }
.rm-aviso-flotante.is-error svg { background: var(--error); }
.rm-aviso-flotante .rm-link { color: var(--amarillo); white-space: nowrap; }

/* ---------------------------------------------------------------- cabecera de páginas */
.rm-cabecera { padding: calc(var(--arriba) + 22px) 0 28px; background: linear-gradient(180deg, color-mix(in srgb, var(--oscuro) 7%, var(--claro)), var(--claro)); }
.rm-cabecera--oscura { background: var(--oscuro-hondo); color: #fff; position: relative; overflow: hidden; padding-bottom: 44px; }
.rm-cabecera--oscura::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--amarillo) 0 12px, var(--oscuro-hondo) 12px 24px); }
.rm-cabecera--oscura h1 { color: #fff; }
.rm-cabecera--oscura h1 em { color: var(--amarillo); }
.rm-cabecera--oscura .rm-migas, .rm-cabecera--oscura .rm-migas a { color: rgb(255 255 255 / 0.7); }
.rm-cabecera--oscura .rm-cabecera__texto { color: rgb(255 255 255 / 0.8); }
.rm-cabecera--oscura .rm-cabecera__icono { background: rgb(255 255 255 / 0.1); }
.rm-cabecera--chica { padding-bottom: 12px; }
.rm-cabecera h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); text-transform: uppercase; }
.rm-migas { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 16px; font-size: 0.85rem; color: var(--suave); }
.rm-migas a { color: var(--suave); text-decoration: none; }
.rm-migas a:hover { color: var(--marca-fuerte); text-decoration: underline; }
.rm-migas > * + *::before { content: '/'; margin: 0 8px; opacity: 0.5; }
.rm-migas [aria-current] { color: inherit; font-weight: 600; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-cabecera__fila { display: flex; align-items: center; gap: 18px; }
.rm-cabecera__icono { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: var(--oscuro); flex: none; }
.rm-cabecera__icono svg { width: 36px; height: 36px; color: var(--amarillo); }
.rm-cabecera__logo { width: 120px; height: 68px; object-fit: contain; padding: 8px; border-radius: 16px; background: #fff; box-shadow: var(--sombra); }
.rm-cabecera__cuenta { margin-top: 6px; color: var(--suave); font-weight: 600; }
.rm-cabecera__texto { max-width: 720px; margin-top: 12px; color: var(--suave); font-size: 1.05rem; }
@media (max-width: 749px) { .rm-cabecera__icono { width: 52px; height: 52px; border-radius: 16px; } .rm-cabecera__icono svg { width: 28px; height: 28px; } }
.rm-chips { display: flex; gap: 8px; margin-top: 22px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.rm-chips a { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 16px; border-radius: 999px; background: var(--tarjeta); box-shadow: inset 0 0 0 1px var(--linea); font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.rm-chips a small { color: var(--suave); font-weight: 500; }
.rm-chips a svg { width: 18px; height: 18px; color: var(--marca); }
.rm-chips a:hover { box-shadow: inset 0 0 0 1.5px var(--marca); }
.rm-chips a[aria-current='page'] { background: var(--oscuro); color: #fff; box-shadow: none; }
.rm-chips a[aria-current='page'] small, .rm-chips a[aria-current='page'] svg { color: var(--amarillo); }
.rm-chips--columna { flex-direction: column; overflow: visible; margin-top: 10px; }

/* ---------------------------------------------------------------- listado con filtros */
.rm-listado { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; padding: 24px 0 64px; }
.rm-filtros { position: sticky; top: 96px; display: grid; gap: 4px; max-height: calc(100svh - 110px); overflow-y: auto; padding: 18px; border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-filtros__cab, .rm-filtros__pie { display: none; }
.rm-filtro { border-top: 1px solid var(--linea); }
.rm-filtro summary { display: flex; justify-content: space-between; align-items: center; min-height: 46px; font-weight: 700; cursor: pointer; list-style: none; }
.rm-filtro summary::-webkit-details-marker { display: none; }
.rm-filtro summary::after { content: '+'; font-size: 1.3rem; color: var(--suave); }
.rm-filtro[open] summary::after { content: '−'; }
.rm-filtro__cuerpo { display: grid; gap: 2px; padding-bottom: 12px; }
.rm-filtro__largo { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.rm-filtro__nada { padding: 12px 0; font-size: 0.85rem; color: var(--suave); }
.rm-check { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-height: 36px; padding: 2px 6px; border-radius: 8px; font-size: 0.92rem; cursor: pointer; }
.rm-check:hover { background: var(--claro); }
.rm-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--marca); }
.rm-check small { color: var(--suave); }
.rm-check:has(input:checked) { font-weight: 700; color: var(--oscuro); }
.rm-interruptor { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; cursor: pointer; }
.rm-interruptor input { position: absolute; opacity: 0; }
.rm-interruptor span { position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--linea); transition: background-color 0.25s; flex: none; }
.rm-interruptor span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform 0.3s var(--ease); }
.rm-interruptor input:checked + span { background: var(--ok); }
.rm-interruptor input:checked + span::after { transform: translateX(18px); }
.rm-interruptor input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 3px; }
.rm-barra-lista { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; margin-bottom: 14px; }
.rm-barra-lista .rm-solo-movil { margin-right: auto; }
.rm-barra-lista .rm-solo-movil b:not(:empty) { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 99px; background: var(--amarillo); color: var(--oscuro-hondo); font-size: 0.72rem; }
.rm-orden { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--suave); }
.rm-orden select { min-height: 40px; padding: 0 34px 0 14px; border: 1.5px solid var(--linea); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23024085' stroke-width='2' d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; color: var(--texto); font-weight: 600; appearance: none; cursor: pointer; }
.rm-vista { display: flex; padding: 3px; border-radius: 999px; background: var(--tarjeta); box-shadow: inset 0 0 0 1.5px var(--linea); }
.rm-vista button { display: grid; place-items: center; width: 36px; height: 34px; border: 0; border-radius: 999px; background: none; color: var(--suave); cursor: pointer; }
.rm-vista button[aria-pressed='true'] { background: var(--oscuro); color: #fff; }
.rm-vista svg { width: 17px; height: 17px; }
.rm-activos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rm-activos:empty { display: none; }
.rm-activos button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border: 0; border-radius: 999px; background: var(--oscuro); color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.rm-activos svg { width: 14px; height: 14px; }
#lista { transition: opacity 0.2s; }
#lista.is-cargando { opacity: 0.45; pointer-events: none; }
.rm-mas { display: grid; justify-items: center; gap: 10px; margin-top: 28px; color: var(--suave); font-size: 0.9rem; }
.rm-mas:empty { display: none; }
.rm-filtros-velo { position: fixed; inset: 0; z-index: 68; background: rgb(2 20 50 / 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 899px) {
  .rm-listado { grid-template-columns: 1fr; padding-top: 16px; }
  .rm-filtros { position: fixed; z-index: 69; left: 0; right: 0; bottom: 0; top: auto; max-height: 86svh; padding: 0; border-radius: 26px 26px 0 0; transform: translateY(105%); transition: transform 0.45s var(--ease); grid-template-rows: auto minmax(0, 1fr) auto; }
  .rm-filtros.is-open { transform: none; }
  .rm-filtros__cab { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--linea); font-size: 1.1rem; }
  #filtros-cuerpo { overflow-y: auto; padding: 4px 20px 16px; }
  .rm-filtros__pie { display: block; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
  .rm-filtros__pie .btn { width: 100%; }
  html.rm-filtros-abiertos { overflow: hidden; }
}
@media (min-width: 750px) and (max-width: 899px) { .rm-barra-lista .rm-solo-movil { display: inline-flex !important; } }

/* Sin resultados */
.rm-sinres { padding-bottom: 64px; display: grid; gap: 24px; }
.rm-sinres__cab { display: flex; gap: 18px; align-items: center; padding: 24px; border-radius: 20px; background: var(--oscuro); color: #fff; }
.rm-sinres__cab > svg { width: 52px; height: 52px; padding: 12px; border-radius: 16px; background: rgb(255 255 255 / 0.1); color: var(--amarillo); }
.rm-sinres__cab h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.rm-sinres__cab p { margin-top: 6px; color: rgb(255 255 255 / 0.8); }
.rm-sinres h3 { font-size: 1.6rem; text-transform: uppercase; }
.rm-sinres__ayuda { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.rm-sinres__caja { display: grid; align-content: start; gap: 12px; padding: 22px; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-sinres__caja p { color: var(--suave); }
.rm-sinres__caja > .btn { justify-self: start; background: #128c4a; }
@media (max-width: 749px) { .rm-sinres__ayuda { grid-template-columns: 1fr; } .rm-sinres__cab { flex-direction: column; align-items: flex-start; } }

/* Marcas */
.rm-marcas-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.rm-marca { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; border-radius: 18px; background: var(--tarjeta); box-shadow: var(--sombra); text-align: center; text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.rm-marca:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--marca), var(--sombra); }
.rm-marca img { height: 56px; width: 100%; object-fit: contain; }
.rm-marca__nombre { display: grid; place-items: center; height: 56px; font-family: var(--f-titulo); font-weight: 800; font-style: italic; font-size: 1.7rem; text-transform: uppercase; color: var(--oscuro); line-height: 1; }
.rm-marca strong { font-weight: 700; }
.rm-marca small { color: var(--suave); }

/* ---------------------------------------------------------------- ficha */
.rm-ficha { padding: calc(var(--arriba) + 18px) 0 40px; }
.rm-ficha__grilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.rm-galeria { position: sticky; top: 96px; display: grid; gap: 10px; }
.rm-galeria__principal { position: relative; aspect-ratio: 1; padding: clamp(16px, 4vw, 40px); border-radius: 24px; background: #fff; box-shadow: var(--sombra); overflow: hidden; }
.rm-galeria__principal img { width: 100%; height: 100%; object-fit: contain; animation: rm-aparece 0.4s ease; }
@keyframes rm-aparece { from { opacity: 0; } }
.rm-galeria__principal .rm-sinfoto { border-radius: 16px; }
.rm-galeria__video { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 0; border-radius: 999px; background: var(--oscuro); color: #fff; font-weight: 700; cursor: pointer; }
.rm-galeria__video svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--amarillo); color: var(--oscuro-hondo); }
.rm-galeria__miniaturas { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.rm-galeria__miniaturas button { width: 76px; height: 76px; flex: none; padding: 6px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea); cursor: pointer; }
.rm-galeria__miniaturas button[aria-current] { box-shadow: inset 0 0 0 2px var(--marca); }
.rm-galeria__miniaturas img { width: 100%; height: 100%; object-fit: contain; }
.rm-ficha__info { display: grid; gap: 16px; }
.rm-ficha__marca { justify-self: start; padding: 5px 12px; border-radius: 8px; background: var(--oscuro); color: var(--amarillo); font-family: var(--f-titulo); font-weight: 800; font-style: italic; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.rm-ficha__info h1 { font-size: clamp(2rem, 3.6vw, 3rem); }
.rm-ficha__datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 0.92rem; }
.rm-codigo-grande { display: inline-flex; align-items: center; gap: 4px; padding: 2px 2px 2px 12px; border-radius: 999px; background: var(--tarjeta); box-shadow: inset 0 0 0 1px var(--linea); color: var(--suave); }
.rm-codigo-grande b { color: var(--texto); font-variant-numeric: tabular-nums; }
.rm-ficha__resenas { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; color: var(--suave); }
.rm-ficha__promo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--amarillo) 40%, #fff); }
.rm-ficha__promo small { color: var(--suave); }
.rm-ficha__precio { padding: 18px 0; border-block: 1px solid var(--linea); }
.rm-ficha__precio .precio--oculto { padding: 14px 16px; font-size: 1rem; }
.rm-opcion { display: grid; gap: 10px; }
.rm-opcion strong span { font-weight: 500; color: var(--suave); }
.rm-opcion__valores { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-opcion__valores button { min-width: 48px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--tarjeta); font-weight: 600; cursor: pointer; transition: border-color 0.2s; }
.rm-opcion__valores button:hover { border-color: var(--marca); }
.rm-opcion__valores button[aria-pressed='true'] { border-color: var(--oscuro); background: var(--oscuro); color: #fff; }
.rm-opcion__valores button.muestra { width: 42px; min-width: 42px; padding: 0; border-radius: 50%; background: var(--color); border-color: rgb(0 0 0 / 0.15); }
.rm-opcion__valores button.muestra[aria-pressed='true'] { background: var(--color); outline: 2px solid var(--oscuro); outline-offset: 3px; }
.rm-ficha__multiplo { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--claro); font-size: 0.95rem; }
.rm-ficha__multiplo svg { color: var(--marca); }
.rm-ficha__compra { gap: 10px; }
.rm-ficha__compra .rm-cant { height: 54px; }
.rm-ficha__compra .rm-cant button { width: 46px; }
.rm-avisame { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: color-mix(in srgb, var(--alerta) 7%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alerta) 22%, transparent); }
.rm-avisame strong { display: flex; gap: 8px; align-items: center; }
.rm-avisame strong svg { color: var(--alerta); }
.rm-ficha__docs { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-ficha__docs small { padding: 1px 6px; border-radius: 5px; background: var(--error); color: #fff; font-size: 0.66rem; }
.rm-ficha__ayuda { display: grid; gap: 8px; margin-top: 4px; }
.rm-ficha__ayuda-btn { display: flex; gap: 14px; align-items: center; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--tarjeta); box-shadow: inset 0 0 0 1px var(--linea); text-align: left; text-decoration: none; cursor: pointer; transition: box-shadow 0.2s, transform 0.3s var(--ease); }
.rm-ficha__ayuda-btn:hover { box-shadow: inset 0 0 0 1.5px var(--marca); transform: translateX(3px); }
.rm-ficha__ayuda-btn > svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--oscuro); color: var(--amarillo); }
.rm-ficha__ayuda-btn span { display: grid; }
.rm-ficha__ayuda-btn small { color: var(--suave); font-size: 0.85rem; }
.rm-ficha__detalle { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
.rm-ficha__detalle:empty { display: none; }
.rm-ficha__bloque { padding: clamp(20px, 3vw, 30px); border-radius: 22px; background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-ficha__bloque h2 { margin-bottom: 14px; font-size: 1.8rem; text-transform: uppercase; }
.descripcion { color: color-mix(in srgb, var(--texto) 85%, #fff); }
.descripcion > * + * { margin-top: 0.8em; }
.descripcion img { border-radius: 12px; }
.caracteristicas { display: grid; margin: 0; }
.caracteristicas div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.caracteristicas div:last-child { border-bottom: 0; }
.caracteristicas dt { color: var(--suave); }
.caracteristicas dd { margin: 0; font-weight: 700; }
.ficha__video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.ficha__video--vertical { aspect-ratio: 9 / 16; max-width: 360px; }
.ficha__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ficha__video-portada { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.ficha__video-portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.ficha__video-portada span { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--amarillo); color: var(--oscuro-hondo); transition: transform 0.3s var(--ease); }
.ficha__video-portada:hover span { transform: scale(1.08); }
.ficha__video-portada svg { width: 30px; height: 30px; margin-left: 4px; }
.preguntas { display: grid; gap: 8px; align-content: start; }
.preguntas details { border-radius: 14px; background: var(--claro); }
.rm-ficha__bloque.preguntas details { background: var(--claro); }
.preguntas summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; font-weight: 700; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; color: var(--marca); font-size: 1.3rem; line-height: 1; }
.preguntas details[open] summary::after { content: '−'; }
.preguntas details p { padding: 0 16px 16px; color: var(--suave); }
.rm-barra-compra { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: rgb(255 255 255 / 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -10px 30px -16px rgb(2 20 50 / 0.3); transform: translateY(110%); transition: transform 0.4s var(--ease); }
.rm-barra-compra.is-visible { transform: none; }
.rm-barra-compra .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rm-barra-compra .contenedor > span { display: grid; min-width: 0; }
.rm-barra-compra strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-barra-compra #barra-precio { font-family: var(--f-titulo); font-weight: 800; font-size: 1.2rem; color: var(--oscuro); }
@media (min-width: 900px) { .rm-barra-compra { display: none; } }
html[data-pagina='producto'] .ns-top { bottom: 84px; }
@media (min-width: 900px) { html[data-pagina='producto'] .ns-top { bottom: max(18px, env(safe-area-inset-bottom)); } }
@media (max-width: 899px) {
  .rm-ficha__grilla { grid-template-columns: 1fr; }
  .rm-galeria { position: static; }
}
/* Reseñas */
.resenas h2 { font-size: 2rem; text-transform: uppercase; margin-bottom: 8px; }
.estrellas { color: #e0a100; letter-spacing: 2px; }
.resenas__promedio { font-family: var(--f-texto); font-size: 1rem; font-weight: 500; margin-left: 10px; text-transform: none; color: var(--suave); }
.resena { padding: 16px 0; border-top: 1px solid var(--linea); }
.resena p { margin: 0 0 6px; }
.resena small { color: var(--suave); }
.resena__respuesta { margin-top: 10px !important; padding-left: 12px; border-left: 3px solid var(--amarillo); }
.resena-form { margin-top: 16px; }
.resena-form h2 { font-size: 1.4rem; }
.resena-form__estrellas { display: grid; gap: 4px; border: 0; padding: 0; margin: 0; }
.resena-form__estrellas label { display: flex; gap: 8px; align-items: center; color: #e0a100; cursor: pointer; }
.rm-form .resena-form__estrellas input { width: auto; min-height: 0; padding: 0; accent-color: var(--marca); }

/* ---------------------------------------------------------------- formularios */
.rm-form { display: grid; gap: 12px; }
.rm-form input:not([type=radio]):not([type=checkbox]):not([type=file]), .rm-form select, .rm-form textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid var(--linea); border-radius: 14px; background: #fff; color: var(--texto); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.rm-form textarea { min-height: 110px; resize: vertical; }
.rm-form input:focus, .rm-form select:focus, .rm-form textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 15%, transparent); }
.rm-form input::placeholder, .rm-form textarea::placeholder { color: color-mix(in srgb, var(--suave) 80%, #fff); }
.rm-form__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 599px) { .rm-form__dos { grid-template-columns: 1fr; } }
.rm-form--linea { display: flex; gap: 8px; }
.rm-form--linea input { flex: 1; min-width: 0; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--linea); border-radius: 999px; background: #fff; outline: none; }
.rm-form--linea input:focus { border-color: var(--marca); }
.rm-form .rm-form--linea input { border-radius: 999px; }
.rm-form__estado { font-size: 0.92rem; color: var(--suave); }
.rm-form__estado:empty { display: none; }
.rm-campo-fecha { display: grid; gap: 4px; font-size: 0.8rem; color: var(--suave); }
.rm-campo-fecha input { min-height: 46px !important; }
.rm-caja { padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-caja h2 { display: flex; align-items: center; gap: 10px; font-size: 1.7rem; text-transform: uppercase; }
.rm-caja h2 svg { width: 30px; height: 30px; color: var(--marca); }
.rm-caja > p { color: var(--suave); }
.rm-caja--oscura { background: var(--oscuro); color: #fff; display: grid; gap: 10px; }
.rm-caja--oscura h2 { color: #fff; }
.rm-caja--oscura h2 svg { color: var(--amarillo); }
.rm-caja--oscura p { display: flex; gap: 10px; align-items: center; color: rgb(255 255 255 / 0.85); }
.rm-caja--oscura a { display: inline-flex; gap: 10px; align-items: center; color: #fff; text-decoration: none; }
.rm-caja--oscura a:hover { color: var(--amarillo); }
.rm-caja--oscura svg { color: var(--amarillo); width: 18px; height: 18px; }
.rm-soltar { position: relative; display: grid; justify-items: center; gap: 8px; padding: 36px 20px; border: 2px dashed color-mix(in srgb, var(--marca) 40%, var(--linea)); border-radius: 20px; background: color-mix(in srgb, var(--marca) 4%, #fff); text-align: center; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.rm-soltar:hover, .rm-soltar.is-encima, .rm-soltar:focus-within { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 9%, #fff); }
.rm-soltar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rm-soltar svg { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--oscuro); color: var(--amarillo); }
.rm-soltar span { max-width: 460px; font-size: 0.88rem; color: var(--suave); }
.rm-soltar--chico { padding: 18px; grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 2px 14px; }
.rm-soltar--chico svg { grid-row: span 2; width: 40px; height: 40px; padding: 9px; }

/* ---------------------------------------------------------------- pedido rápido */
.rm-rapido { padding: 28px 0 72px; }
.rm-pestanas { display: flex; gap: 6px; padding: 5px; margin-bottom: 16px; border-radius: 999px; background: var(--tarjeta); box-shadow: var(--sombra); width: max-content; max-width: 100%; overflow-x: auto; }
.rm-pestanas button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font-weight: 700; white-space: nowrap; cursor: pointer; color: var(--suave); }
.rm-pestanas button[aria-selected='true'] { background: var(--oscuro); color: #fff; }
.rm-pestanas button[aria-selected='true'] svg { color: var(--amarillo); }
.rm-panel { padding: clamp(18px, 3vw, 28px); border-radius: 24px; background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-rapido__form { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; }
.rm-rapido__entrada { display: grid; gap: 10px; }
.rm-rapido__entrada label { font-weight: 700; }
.rm-rapido__entrada textarea { width: 100%; min-height: 230px; padding: 16px; border: 1.5px solid var(--linea); border-radius: 16px; background: color-mix(in srgb, var(--oscuro) 3%, #fff); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.95rem; line-height: 1.75; resize: vertical; outline: none; }
.rm-rapido__entrada textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 15%, transparent); }
.rm-rapido__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.rm-rapido__ayuda { align-self: start; padding: 20px; border-radius: 18px; background: var(--oscuro); color: #fff; }
.rm-rapido__ayuda ul { display: grid; gap: 12px; margin: 14px 0; padding: 0; list-style: none; font-size: 0.9rem; color: rgb(255 255 255 / 0.8); }
.rm-rapido__ayuda code { display: block; margin-bottom: 2px; color: var(--amarillo); font-size: 0.92rem; }
.rm-rapido__ayuda p { font-size: 0.9rem; color: rgb(255 255 255 / 0.8); }
@media (max-width: 849px) { .rm-rapido__form { grid-template-columns: 1fr; } }
.rm-foto { max-width: 720px; }
.rm-foto > p { color: var(--suave); }
#revision:not(:empty) { margin-top: 20px; }
.rm-revision__buscando { position: relative; display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-radius: 18px; background: var(--oscuro); color: #fff; overflow: hidden; }
.rm-revision__buscando svg { color: var(--amarillo); animation: rm-pulso 1s ease-in-out infinite; }
.rm-revision__buscando i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p); background: var(--amarillo); transition: width 0.3s; }
.rm-revision { padding: clamp(18px, 3vw, 28px); border-radius: 24px; background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-revision__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rm-revision__cab h2 { font-size: 2rem; text-transform: uppercase; }
.rm-revision__resumen { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-revision__resumen span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; }
.rm-revision__resumen svg { width: 16px; height: 16px; }
.is-ok { --c: var(--ok); }
.is-elegir { --c: var(--alerta); }
.is-nada { --c: var(--error); }
.rm-revision__resumen span { background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); }
.rm-revision__lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rm-renglon { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 110px 44px; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 4%, #fff); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px var(--linea); }
.rm-renglon__estado svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--c); color: #fff; }
.rm-renglon__producto { display: grid; gap: 3px; min-width: 0; }
.rm-renglon__producto strong { font-weight: 700; line-height: 1.3; }
.rm-renglon__producto > small { color: var(--suave); font-size: 0.82rem; }
.rm-renglon__escrito { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-renglon__producto select { width: 100%; min-height: 44px; padding: 0 36px 0 12px; border: 1.5px solid var(--c); border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23024085' stroke-width='2' d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; font-weight: 600; appearance: none; text-overflow: ellipsis; }
.rm-renglon__aviso { color: var(--alerta) !important; font-weight: 600; }
.rm-renglon__aviso.is-error { color: var(--error) !important; }
.rm-renglon__precio { text-align: right; font-family: var(--f-titulo); font-weight: 800; font-size: 1.15rem; color: var(--oscuro); }
.rm-renglon .rm-cant { height: 42px; }
.rm-revision__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }
#resultado:not(:empty) { margin-top: 16px; }
@media (max-width: 749px) {
  .rm-renglon { grid-template-columns: 32px minmax(0, 1fr) 40px; gap: 8px 10px; }
  .rm-renglon__cant { grid-column: 2; }
  .rm-renglon__precio { grid-column: 2 / 4; grid-row: 3; text-align: left; }
  .rm-renglon > .rm-icono-btn { grid-column: 3; grid-row: 1; }
  .rm-revision__pie .btn { width: 100%; }
}

/* ---------------------------------------------------------------- compra */
.compra { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 32px; align-items: start; padding: 20px 0 72px; }
.compra__form fieldset { display: grid; gap: 12px; margin: 0 0 14px; padding: clamp(18px, 3vw, 26px); border: 0; border-radius: 22px; background: var(--tarjeta); box-shadow: var(--sombra); }
.compra__form legend { float: left; display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 4px; padding: 0; font-family: var(--f-titulo); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; color: var(--oscuro); }
.compra__form legend b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--oscuro); color: var(--amarillo); font-size: 0.95rem; }
.compra__form fieldset > *:not(legend) { clear: both; }
.compra__form fieldset .rm-nota { margin: 0; }
.opcion-radio { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--linea); border-radius: 14px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.opcion-radio:has(input:checked) { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); }
.opcion-radio span { display: grid; gap: 2px; }
.opcion-radio small { color: var(--suave); }
.rm-form .opcion-radio input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--marca); }
#pago-paso:not(:empty) { margin-top: 4px; }
.compra__resumen { position: sticky; top: 96px; display: grid; gap: 12px; padding: clamp(18px, 3vw, 26px); border-radius: 22px; background: var(--tarjeta); box-shadow: var(--sombra); }
.compra__resumen h2 { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.6rem; text-transform: uppercase; }
.compra__resumen h2 small { font-family: var(--f-texto); font-size: 0.85rem; font-weight: 500; text-transform: none; color: var(--suave); }
.resumen__lineas { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.resumen__linea { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; }
.resumen__linea small { color: var(--suave); }
.compra__resumen dl { display: grid; gap: 8px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--linea); }
.compra__resumen dl div { display: flex; justify-content: space-between; gap: 12px; }
.compra__resumen dd { margin: 0; font-variant-numeric: tabular-nums; }
.resumen__total { padding-top: 8px; font-family: var(--f-titulo); font-size: 1.6rem; font-weight: 800; color: var(--oscuro); }
.resumen__seguro { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: var(--claro); font-size: 0.85rem; color: var(--suave); }
.resumen__seguro svg { color: var(--ok); }
.compra__nacimiento { display: grid; gap: 6px; font-size: 0.92rem; }
.compra__nacimiento small { color: var(--suave); }
@media (max-width: 899px) { .compra { grid-template-columns: 1fr; } .compra__resumen { position: static; } }
.pedido { max-width: 760px; display: grid; gap: 16px; padding: calc(var(--arriba) + 28px) 0 72px; }
.pedido__cab { display: flex; gap: 18px; align-items: center; padding: 24px; border-radius: 22px; background: var(--oscuro); color: #fff; }
.pedido__cab > svg { width: 56px; height: 56px; padding: 12px; border-radius: 50%; background: var(--ok); color: #fff; }
.pedido__cab.is-cancelado > svg { background: var(--error); }
.pedido__cab h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.8rem); text-transform: uppercase; }
.pedido__cab p { color: rgb(255 255 255 / 0.8); }
.pedido__instrucciones { padding: 18px; border-radius: 16px; background: color-mix(in srgb, var(--amarillo) 35%, #fff); }
.pedido__nota { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--suave); }
.pedido__envio { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: var(--tarjeta); box-shadow: var(--sombra); }
.pedido__envio strong { display: flex; gap: 8px; align-items: center; }
.pedido p:has(> .btn) { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- páginas institucionales */
.rm-service { padding: 28px 0 72px; display: grid; gap: 28px; }
.rm-service__accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: -60px; position: relative; }
.rm-acceso { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 18px; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra); text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
a.rm-acceso:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--marca), var(--sombra); }
.rm-acceso > svg { grid-row: span 2; width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--oscuro); color: var(--amarillo); }
.rm-acceso strong { font-weight: 700; }
.rm-acceso span { color: var(--suave); font-size: 0.9rem; overflow-wrap: anywhere; }
.rm-acceso--quieto { margin: 0; }
.rm-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; counter-reset: paso; }
.rm-pasos div { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 20px; background: color-mix(in srgb, var(--oscuro) 5%, var(--claro)); }
.rm-pasos b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--amarillo); color: var(--oscuro-hondo); font-family: var(--f-titulo); font-size: 1.3rem; }
.rm-pasos strong { font-family: var(--f-titulo); font-size: 1.35rem; font-weight: 700; color: var(--oscuro); }
.rm-pasos p { font-size: 0.92rem; color: var(--suave); }
.rm-service__grilla { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rm-service__lado { display: grid; gap: 16px; }
@media (max-width: 899px) { .rm-service__grilla { grid-template-columns: 1fr; } }
.rm-garantias { display: grid; gap: 8px; }
.rm-garantia { border-radius: 16px; background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-garantia summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.rm-garantia summary::-webkit-details-marker { display: none; }
.rm-garantia summary strong { font-family: var(--f-titulo); font-size: 1.35rem; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--oscuro); }
.rm-garantia summary span { padding: 4px 12px; border-radius: 999px; background: var(--amarillo); color: var(--oscuro-hondo); font-weight: 700; font-size: 0.85rem; }
.rm-garantia p { padding: 0 18px 18px; color: var(--suave); }
.rm-academy { display: grid; gap: 24px; }
.rm-vivo { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin-top: -60px; padding: clamp(22px, 4vw, 40px); border-radius: 26px; background: var(--amarillo); color: var(--oscuro-hondo); box-shadow: var(--sombra-alta); }
.rm-vivo h2 { color: var(--oscuro-hondo); font-size: clamp(2rem, 4.4vw, 3.2rem); text-transform: uppercase; }
.rm-vivo .rm-antetitulo { color: var(--oscuro-hondo); }
.rm-vivo__punto { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--error); color: #fff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.rm-vivo__punto::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: rm-pulso 1.2s infinite; }
.rm-vivo__fecha { margin-top: 8px; font-size: 1.15rem; font-weight: 700; text-transform: capitalize; }
.rm-vivo__falta { margin-top: 4px; font-variant-numeric: tabular-nums; }
.rm-vivo .btn { background: var(--oscuro-hondo); color: var(--amarillo); }
@media (max-width: 749px) { .rm-vivo { grid-template-columns: 1fr; } }
.rm-academy > .rm-caja:first-child { margin-top: -60px; position: relative; }
.rm-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.rm-curso { display: grid; gap: 6px; padding: 20px; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra); text-decoration: none; }
.rm-curso svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--oscuro); color: var(--amarillo); }
.rm-curso strong { font-family: var(--f-titulo); font-size: 1.4rem; font-weight: 700; color: var(--oscuro); }
.rm-curso span { color: var(--suave); font-size: 0.9rem; }
.rm-catalogos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.rm-catalogo { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 20px; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-catalogo > svg { width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--oscuro); color: var(--amarillo); }
.rm-catalogo strong { font-family: var(--f-titulo); font-size: 1.5rem; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--oscuro); }
.rm-catalogo p { color: var(--suave); font-size: 0.92rem; }
.rm-catalogo__botones { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.rm-nosotros { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.rm-nosotros aside { display: grid; gap: 16px; }
.rm-nosotros .rm-caja { display: grid; gap: 6px; }
.rm-nosotros .rm-caja > svg { color: var(--marca); }
@media (max-width: 849px) { .rm-nosotros { grid-template-columns: 1fr; } }
.rm-prosa { font-size: 1.12rem; max-width: 70ch; }
.rm-prosa > * + * { margin-top: 1em; }
.rm-prosa strong { color: var(--oscuro); }
.rm-prosa h2, .rm-prosa h3 { margin-top: 1.4em; text-transform: uppercase; }
.legal { font-size: 1rem; }
.rm-contacto { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rm-contacto__datos { display: grid; gap: 10px; }
@media (max-width: 849px) { .rm-contacto { grid-template-columns: 1fr; } }
.rm-preguntas { max-width: 860px; }
.rm-preguntas details { background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-cuenta__intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 849px) { .rm-cuenta__intro { grid-template-columns: 1fr; } }
/* "Mi cuenta" la dibuja la plataforma: se afina con sus variables */
.rm-cuenta .tc { --tc-color: var(--marca-fuerte); --tc-sobre-color: #fff; --tc-radio: 16px; --tc-superficie: var(--tarjeta); --tc-linea: var(--linea); --tc-suave: var(--suave); }
.rm-cuenta .tc__hola { font-family: var(--f-titulo); font-weight: 800; text-transform: uppercase; color: var(--oscuro); }

/* Cursos (módulo) */
.curso { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.curso__ver { display: grid; gap: 14px; min-width: 0; }
.curso__video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: #000; }
.curso__temario { display: grid; gap: 6px; position: sticky; top: 110px; }
.curso__modulo { margin-top: 10px; }
.curso__temario button { display: flex; gap: 10px; align-items: baseline; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); text-align: left; cursor: pointer; }
.curso__temario button span { min-width: 1.4em; color: var(--suave); }
.curso__temario button small { margin-left: auto; color: var(--suave); white-space: nowrap; }
.curso__temario button[aria-current] { border-color: var(--marca); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca) 25%, transparent); }
.curso__temario button:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 849px) { .curso { grid-template-columns: 1fr; } .curso__temario { position: static; } }

/* ---------------------------------------------------------------- ayuda flotante y asistente */
.rm-ayuda { position: fixed; z-index: 44; left: max(16px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; }
.rm-ayuda__wa { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #1fa855; color: #fff; box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.5); transition: transform 0.3s var(--ease); }
.rm-ayuda__wa:hover { transform: scale(1.08); }
.rm-ayuda__wa svg { width: 28px; height: 28px; }
.rm-ayuda__asistente { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--oscuro); color: #fff; font-weight: 700; box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.5); cursor: pointer; }
.rm-ayuda__asistente svg { color: var(--amarillo); }
html[data-pagina='producto'] .rm-ayuda { bottom: 84px; }
@media (min-width: 900px) { html[data-pagina='producto'] .rm-ayuda { bottom: max(18px, env(safe-area-inset-bottom)); } }
@media (max-width: 749px) { .rm-ayuda__asistente span { display: none; } .rm-ayuda__asistente { width: 54px; padding: 0; justify-content: center; } .rm-ayuda__wa, .rm-ayuda__asistente { width: 50px; height: 50px; min-height: 50px; } }
html.rm-carrito-abierto .rm-ayuda, html.ns-menu-open .rm-ayuda { opacity: 0; pointer-events: none; }
.asistente { position: fixed; z-index: 72; left: max(16px, env(safe-area-inset-left)); bottom: 86px; width: min(400px, calc(100vw - 32px)); max-height: min(620px, calc(100svh - 120px)); display: flex; flex-direction: column; border-radius: 24px; background: var(--tarjeta); box-shadow: var(--sombra-alta), 0 0 0 1px var(--linea); overflow: hidden; animation: rm-entra 0.3s var(--ease); }
.asistente header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 10px 14px 18px; background: var(--oscuro); color: #fff; }
.asistente header > span { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; }
.asistente header svg { grid-row: span 2; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgb(255 255 255 / 0.12); color: var(--amarillo); }
.asistente header small { color: rgb(255 255 255 / 0.7); font-size: 0.78rem; }
.asistente header button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
.asistente__charla { flex: 1; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 16px; }
.asistente__msj { max-width: 92%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--claro); line-height: 1.45; justify-self: start; font-size: 0.95rem; }
.asistente__msj--yo { background: var(--marca-fuerte); color: #fff; justify-self: end; border-radius: 16px 16px 4px 16px; }
.asistente__msj--espera { color: var(--suave); }
.rm-escribiendo { display: inline-flex; gap: 4px; }
.rm-escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--suave); animation: rm-pulso 1s infinite; }
.rm-escribiendo i:nth-child(2) { animation-delay: 0.15s; }
.rm-escribiendo i:nth-child(3) { animation-delay: 0.3s; }
.asistente__productos { display: grid; gap: 8px; margin-top: 10px; }
.asistente__productos a { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); text-decoration: none; }
.asistente__productos img, .asistente__productos .rm-sinfoto { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; flex: none; }
.asistente__productos span { display: grid; gap: 2px; }
.asistente__productos small { color: var(--suave); }
.asistente__ideas { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.asistente__ideas button { padding: 7px 12px; border: 1px solid var(--linea); border-radius: 999px; background: #fff; font-size: 0.85rem; cursor: pointer; }
.asistente__ideas button:hover { border-color: var(--marca); }
.asistente form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--linea); }
.asistente form input { flex: 1; min-width: 0; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--linea); border-radius: 999px; outline: none; font-size: 16px; }
.asistente form input:focus { border-color: var(--marca); }
.asistente form .btn { width: 46px; min-height: 46px; padding: 0; }
.asistente__humano { padding: 0 16px 12px; font-size: 0.82rem; color: var(--suave); }
.asistente__humano a { color: var(--ok); font-weight: 700; }

/* ---------------------------------------------------------------- carrito (firma NS 4) */
.carrito-velo { position: fixed; inset: 0; z-index: 70; background: rgb(2 20 50 / 0.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.carrito { position: fixed; z-index: 71; top: 10px; right: 10px; bottom: 10px; width: min(440px, calc(100% - 20px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 24px; background: var(--tarjeta); box-shadow: var(--sombra-alta); transform: translateX(calc(100% + 20px)); transition: transform 0.45s var(--ease); }
.carrito.is-open { transform: none; }
.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(--ease); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .carrito.is-open { transform: translateY(var(--arrastre, 0px)); }
  .carrito.is-arrastrando { transition: none; }
  .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(0 0 0 / 0.18); }
  .carrito__cab { touch-action: none; }
}
.carrito__cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 22px; border-bottom: 1px solid var(--linea); }
.carrito__cab h2 { font-size: 1.6rem; text-transform: uppercase; }
.carrito__cab small { font-family: var(--f-texto); font-size: 0.85rem; font-weight: 500; text-transform: none; color: var(--suave); }
.carrito__cerrar { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--claro); font-size: 1.5rem; cursor: pointer; }
.carrito__lineas { overflow-y: auto; padding: 4px 22px; }
.linea { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.linea > img, .linea .sin-foto { width: 60px; height: 60px; padding: 4px; object-fit: contain; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); display: grid; place-items: center; color: var(--suave); }
.linea__info { display: grid; gap: 2px; min-width: 0; }
.linea__info strong { font-weight: 600; font-size: 0.94rem; line-height: 1.3; }
.linea__info small { color: var(--suave); font-size: 0.8rem; }
.linea__cant { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.linea__total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.carrito__vacio { display: grid; justify-items: center; gap: 12px; padding: 48px 12px; text-align: center; color: var(--suave); }
.carrito__vacio > svg { width: 48px; height: 48px; padding: 11px; border-radius: 16px; background: var(--claro); color: var(--marca); }
.carrito__vacio strong { color: var(--texto); }
.carrito__pie { display: grid; gap: 10px; padding: 16px 22px 20px; border-top: 1px solid var(--linea); }
.carrito__pie:empty { display: none; }
.carrito__pie .rm-link { justify-self: center; }
.carrito__total { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-titulo); font-size: 1.6rem; font-weight: 800; color: var(--oscuro); }
.carrito__nota { color: var(--suave); text-align: center; }
.carrito__minimo { display: grid; gap: 6px; }
.carrito__minimo span { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--ok) var(--p), var(--linea) var(--p)); }
.carrito__minimo small { color: var(--suave); }

/* ---------------------------------------------------------------- cookies */
.cookies { position: fixed; z-index: 65; right: 16px; bottom: 16px; width: min(440px, calc(100% - 32px)); display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--oscuro-hondo); color: #fff; font-size: 0.9rem; box-shadow: var(--sombra-alta); }
.cookies a { color: var(--amarillo); }
.cookies div { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.cookies .btn { min-height: 42px; }

/* ---------------------------------------------------------------- pie */
.pie { position: relative; margin-top: 0; padding: 64px 0 24px; background: var(--oscuro-hondo); color: rgb(255 255 255 / 0.85); }
.pie::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--amarillo) 0 12px, var(--oscuro-hondo) 12px 24px); }
.pie__arriba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; }
.pie__logo { display: inline-block; text-decoration: none; }
.pie__logo img { height: 46px; width: auto; }
.pie__logo .rm-logotipo { font-size: 2.4rem; }
.pie__frase { margin-top: 10px; font-family: var(--f-titulo); font-size: 1.35rem; font-weight: 700; color: #fff; }
.pie__contacto { display: grid; gap: 10px; margin-top: 22px; font-size: 0.95rem; }
.pie__contacto a, .pie__contacto p { display: flex; gap: 10px; align-items: center; text-decoration: none; }
.pie__contacto a:hover { color: var(--amarillo); }
.pie__contacto svg { width: 18px; height: 18px; color: var(--amarillo); }
.pie__redes { display: flex; gap: 8px; margin-top: 8px; }
.pie__redes a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 50%; transition: border-color 0.2s, background-color 0.2s; }
.pie__redes a:hover { border-color: var(--amarillo); background: rgb(255 255 255 / 0.06); }
.pie__redes svg { color: #fff; }
.pie__redes span { font-size: 0.68rem; font-weight: 700; }
.pie__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 28px; align-content: start; }
.pie__grilla strong { font-family: var(--f-titulo); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--amarillo); }
.pie__grilla ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.pie a { text-decoration: none; }
.pie__grilla a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.pie__base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / 0.14); font-size: 0.85rem; }
.pie__base > span:nth-child(2) { display: flex; gap: 16px; flex-wrap: wrap; }
.pie__base a:hover { color: #fff; }
.pie .ns-credito { --ns-credito-tinta: #f4f4f1; --ns-credito-color: #b9a8ff; }
@media (max-width: 849px) { .pie__arriba { grid-template-columns: 1fr; } .pie__grilla { grid-template-columns: 1fr 1fr; } }
html:not([data-pagina='inicio']) .pie { margin-top: 0; }

/* ---------------------------------------------------------------- movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  [data-aparecer] { opacity: 1; translate: none; }
  .rm-marquesina__pista { animation: none; flex-wrap: wrap; width: auto; }
  .rm-marquesina__grupo[aria-hidden] { display: none; }
  .rm-marquesina__grupo { flex-wrap: wrap; justify-content: center; }
  .rm-marquesina { mask-image: none; }
}

/* =========================================================
   Versión 2 (feedback de Nico, 16/10): header centrado, secciones a todo el ancho, marca destacada,
   banners, Academy con videos, ingreso en ventana y "Mi cuenta" propia.
   ========================================================= */

/* ---------------------------------------------------------------- header: logo · buscador al centro · accesos */
.ns-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px) minmax(0, 1fr); gap: 16px; }
.ns-brand { justify-self: start; }
.rm-derecha { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.rm-buscador--barra { width: 100%; max-width: none; margin: 0; height: calc(var(--ns-bar-h) - 16px); padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2); transition: box-shadow 0.25s; }
.rm-buscador--barra:focus-within { box-shadow: 0 0 0 3px var(--amarillo); }
.rm-buscador--barra > svg { left: 16px; color: var(--oscuro); opacity: 1; }
.rm-buscador--barra input, .rm-buscador--barra input:focus { height: 100%; padding: 0 8px 0 40px; border: 0; border-radius: 999px; background: transparent; color: var(--texto); }
.rm-buscador--barra input::placeholder { color: var(--suave); }
.rm-buscador--barra input::-webkit-search-cancel-button { filter: none; }
.rm-buscador__ir { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 100%; padding: 0 18px; border: 0; border-radius: 999px; background: var(--amarillo); color: var(--oscuro-hondo); font-weight: 800; cursor: pointer; transition: background-color 0.2s, transform 0.25s var(--ease); }
.rm-buscador__ir:hover { background: var(--oscuro-hondo); color: var(--amarillo); }
.rm-buscador__ir svg { width: 16px; height: 16px; }
.rm-buscador--barra .rm-buscador__ir svg { display: none; }
.rm-buscador--grande .rm-buscador__ir { min-height: 52px; padding: 0 26px; font-size: 1rem; }
/* Botón del pedido: sólido, sin bordes raros */
.ns-cta { height: calc(var(--ns-bar-h) - 16px); box-shadow: none; border: 0; }
.ns-cta:hover { background: #fff; transform: none; }
.contador { background: var(--oscuro); color: #fff; }
@media (max-width: 1099px) {
  .ns-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rm-buscador--barra .rm-buscador__ir span { display: none; }
  .rm-buscador--barra .rm-buscador__ir svg { display: block; }
  .rm-buscador--barra .rm-buscador__ir { padding: 0 14px; }
}
@media (max-width: 749px) {
  .ns-bar { grid-template-columns: minmax(0, 1fr) auto; padding-left: 58px; }
  .rm-busqueda-movil .rm-buscador { padding: 6px; }
  .rm-busqueda-movil .rm-buscador input { color: #fff; }
}

/* Menú grande: rubros en mosaico con íconos, a todo el ancho del panel */
.rm-panel-rubros { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.12); }
.rm-panel-rubros > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; }
.rm-panel-rubros a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1); color: #fff; text-decoration: none; opacity: 0; transform: translateY(8px); transition: background-color 0.25s, border-color 0.25s, opacity 0.4s ease, transform 0.5s var(--ns-ease); }
.ns-header.is-open .rm-panel-rubros a { opacity: 1; transform: none; transition-delay: 0s, 0s, calc(0.18s + var(--i, 0) * 0.03s), calc(0.18s + var(--i, 0) * 0.03s); }
.rm-panel-rubros a:hover { background: var(--marca-fuerte); border-color: transparent; }
.rm-panel-rubros svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgb(255 242 0 / 0.12); color: var(--amarillo); }
.rm-panel-rubros span { display: grid; font-weight: 700; font-size: 0.92rem; line-height: 1.2; }
.rm-panel-rubros small { font-weight: 500; font-size: 0.75rem; color: rgb(255 255 255 / 0.6); }

/* ---------------------------------------------------------------- portada: hero con movimiento */
.rm-hero { min-height: min(100svh, 940px); display: grid; align-content: center; }
.rm-hero__fondo { overflow: hidden; animation: rm-grilla 30s linear infinite; }
@keyframes rm-grilla { to { background-position: 0 0, 0 0, 0 44px, 44px 0, 0 0; } }
.rm-hero__luz { position: absolute; width: 46vw; aspect-ratio: 1; right: -12vw; top: -18vw; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--marca) 55%, transparent), transparent 65%); filter: blur(10px); animation: rm-flota 14s ease-in-out infinite alternate; }
.rm-hero__luz--dos { width: 30vw; left: -10vw; right: auto; top: auto; bottom: -12vw; background: radial-gradient(circle, rgb(255 242 0 / 0.16), transparent 65%); animation-duration: 18s; }
@keyframes rm-flota { to { transform: translate(-6vw, 5vw) scale(1.12); } }
.rm-hero__video { position: absolute; inset: 0; z-index: -1; overflow: hidden; opacity: 0; transition: opacity 1.2s ease; }
.rm-hero__video.is-listo { opacity: 1; }
.rm-hero__video video, .rm-hero__video iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78svh); height: max(100%, 56.25vw); transform: translate(-50%, -50%); border: 0; object-fit: cover; pointer-events: none; }
.rm-hero__video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 10 30 / 0.92) 0%, rgb(0 10 30 / 0.65) 45%, rgb(0 10 30 / 0.3) 100%), linear-gradient(0deg, rgb(0 10 30 / 0.7), transparent 40%); }
.rm-hero--video .rm-hero__texto { max-width: 760px; }
.rm-palabra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.rm-palabra > span { display: inline-block; animation: rm-palabra 0.9s var(--ease) both; }
.rm-hero__titulo .rm-palabra:nth-child(1) > span { animation-delay: 0.05s; }
.rm-hero__titulo .rm-palabra:nth-child(2) > span { animation-delay: 0.12s; }
.rm-hero__titulo .rm-palabra:nth-child(3) > span { animation-delay: 0.19s; }
.rm-hero__titulo .rm-palabra:nth-child(4) > span { animation-delay: 0.26s; }
.rm-hero__titulo em .rm-palabra:nth-child(1) > span { animation-delay: 0.36s; }
.rm-hero__titulo em .rm-palabra:nth-child(2) > span { animation-delay: 0.43s; }
.rm-hero__titulo em .rm-palabra:nth-child(3) > span { animation-delay: 0.5s; }
@keyframes rm-palabra { from { transform: translateY(105%); } }
.rm-entra { animation: rm-sube 0.8s var(--ease) both; animation-delay: calc(0.08s * var(--d, 0)); }
.rm-mosaico a { align-content: end; gap: 4px; }
.rm-mosaico a > svg { position: absolute; top: 16px; left: 16px; }
.rm-mosaico a small { font-size: 0.75rem; color: rgb(255 255 255 / 0.6); }

/* Banners a todo el ancho (1905 × 500, los de la web actual) */
.rm-banners { position: relative; background: var(--oscuro-hondo); overflow: hidden; touch-action: pan-y; }
.rm-banners__pista { position: relative; aspect-ratio: 1905 / 500; max-height: 560px; width: 100%; margin-inline: auto; }
.rm-banner { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.rm-banner.is-activo { opacity: 1; z-index: 1; }
.rm-banner img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
.rm-banner.is-activo img { transform: scale(1); }
.rm-banners__control { position: absolute; z-index: 2; left: 0; right: 0; bottom: 16px; }
.rm-banners__puntos { display: flex; gap: 8px; }
.rm-banners__puntos button { position: relative; width: 56px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.rm-banners__puntos button::before, .rm-banners__puntos i { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px; background: rgb(255 255 255 / 0.35); }
.rm-banners__puntos i { right: 100%; background: var(--amarillo); }
.rm-banners__puntos button[aria-current] i { right: 0; transition: right 6s linear; }
@media (max-width: 749px) { .rm-banners__pista { aspect-ratio: 16 / 7; } .rm-banners__puntos button { width: 34px; } }

/* ---------------------------------------------------------------- filas de productos a todo el ancho */
.rm-fila-productos .rm-seccion__cab { margin-bottom: 20px; }
.rm-seccion__acciones { display: flex; align-items: center; gap: 18px; }
.rm-flechas { display: flex; gap: 6px; }
.rm-carrusel__flecha { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--linea); border-radius: 50%; background: var(--tarjeta); color: var(--oscuro); cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s; }
.rm-carrusel__flecha[data-carrusel='-1'] svg { transform: rotate(180deg); }
.rm-carrusel__flecha:hover:not(:disabled) { background: var(--oscuro); border-color: var(--oscuro); color: #fff; }
.rm-carrusel__flecha:disabled { opacity: 0.35; cursor: default; }
.rm-carrusel { position: relative; }
.rm-carrusel__pista { display: grid; grid-auto-flow: column; grid-auto-columns: 264px; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 8px 0 22px; scrollbar-width: none; }
.rm-carrusel__pista::-webkit-scrollbar { display: none; }
.rm-carrusel__pista > * { scroll-snap-align: start; }
/* La fila arranca alineada con el contenido y se va por el borde derecho de la pantalla */
.rm-carrusel--ancho .rm-carrusel__pista { --borde: max(16px, (100vw - var(--ancho)) / 2); padding-inline: var(--borde); scroll-padding-inline: var(--borde); }
.rm-carrusel--ancho .rm-carrusel__pista::after { content: ''; width: 1px; }
/* La fila de la ficha ("Armá el kit") todavía usa las flechas sobre las tarjetas */
.rm-carrusel > .rm-carrusel__flecha { position: absolute; z-index: 2; top: 35%; }
.rm-carrusel > .rm-carrusel__flecha[data-carrusel='-1'] { left: -14px; }
.rm-carrusel > .rm-carrusel__flecha[data-carrusel='1'] { right: -14px; }
@media (max-width: 749px) {
  .rm-carrusel__pista { grid-auto-columns: 72%; gap: 12px; }
  .rm-flechas, .rm-carrusel > .rm-carrusel__flecha { display: none; }
}
.rm-carrusel .rm-tarjeta { height: 100%; }
.rm-ver-precio { width: 100%; }
.rm-ver-precio span { overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- marca destacada (Lüsqtoff) */
.rm-destacada { --dest: #ff7a00; position: relative; padding: clamp(56px, 8vw, 110px) 0 clamp(32px, 4vw, 56px); background: #0d0d0f; color: #fff; overflow: hidden; isolation: isolate; }
.rm-destacada::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--dest) 35%, transparent), transparent 70%), radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--dest) 18%, transparent), transparent 70%); }
.rm-destacada__cinta { position: absolute; z-index: -1; top: 18px; left: 0; display: flex; width: max-content; font-family: var(--f-titulo); font-weight: 800; font-style: italic; font-size: clamp(5rem, 14vw, 12rem); line-height: 0.85; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--dest) 40%, transparent); white-space: nowrap; animation: rm-cinta 60s linear infinite; pointer-events: none; opacity: 0.6; }
.rm-destacada__grilla { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.rm-destacada__marca { font-family: var(--f-titulo); font-weight: 800; font-style: italic; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; text-transform: uppercase; color: var(--dest); margin-bottom: 10px; }
.rm-destacada__logo { max-height: 64px; width: auto; margin-bottom: 14px; }
.rm-destacada .rm-antetitulo { color: rgb(255 255 255 / 0.7); }
.rm-destacada h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 4.2rem); text-transform: uppercase; line-height: 0.92; }
.rm-destacada h2 em { color: var(--dest); }
.rm-destacada__bajada { margin-top: 16px; max-width: 520px; color: rgb(255 255 255 / 0.75); font-size: 1.05rem; }
.rm-destacada__claves { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.rm-destacada__claves li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.05rem; }
.rm-destacada__claves svg { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--dest); color: #0d0d0f; }
.rm-destacada__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rm-destacada .btn:not(.btn--sec) { background: var(--dest); color: #0d0d0f; }
.rm-destacada .btn:not(.btn--sec):hover { background: #fff; }
.rm-destacada__imagen { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--dest) 50%, transparent); cursor: pointer; aspect-ratio: 16 / 9; }
.rm-destacada__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.rm-destacada__imagen:hover img { transform: scale(1.04); }
div.rm-destacada__imagen { cursor: default; }
.rm-destacada__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--dest); color: #0d0d0f; animation: rm-onda 2.2s ease-out infinite; }
.rm-destacada__play svg { width: 34px; height: 34px; margin-left: 4px; }
@keyframes rm-onda { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dest) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 26px transparent; } }
.rm-destacada__cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(40px, 5vw, 64px); margin-bottom: 14px; color: rgb(255 255 255 / 0.7); }
.rm-destacada__cab strong { color: var(--dest); font-family: var(--f-titulo); font-size: 1.4rem; }
.rm-destacada .rm-carrusel__flecha { background: transparent; border-color: rgb(255 255 255 / 0.25); color: #fff; }
.rm-destacada .rm-carrusel__flecha:hover:not(:disabled) { background: var(--dest); border-color: var(--dest); color: #0d0d0f; }
.rm-destacada .rm-tarjeta { background: #17171a; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); color: #fff; }
.rm-destacada .rm-tarjeta:hover { box-shadow: 0 0 0 1.5px var(--dest); }
.rm-destacada .rm-tarjeta__foto { background: #fff; border-bottom: 0; }
.rm-destacada .rm-tarjeta__titulo, .rm-destacada .rm-codigo { color: #fff; }
.rm-destacada .rm-tarjeta__marca { color: var(--dest); }
.rm-destacada .precio__valor { color: #fff; }
.rm-destacada .precio--oculto { background: rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.7); }
.rm-destacada .btn--sec { color: #fff; }
.rm-destacada .btn--sec:hover { background: var(--dest); color: #0d0d0f; box-shadow: inset 0 0 0 1.5px var(--dest); }
.rm-destacada .rm-cant { background: transparent; border-color: rgb(255 255 255 / 0.2); }
.rm-destacada .rm-cant button, .rm-destacada .rm-cant input { color: #fff; }
.rm-destacada .rm-multiplo { background: rgb(255 255 255 / 0.1); color: #fff; }
@media (max-width: 899px) { .rm-destacada__grilla { grid-template-columns: 1fr; } .rm-destacada__imagen { order: -1; } }

/* ---------------------------------------------------------------- pedido rápido: banda oscura a todo el ancho */
.rm-rapido-banda { position: relative; padding: clamp(56px, 7vw, 96px) 0; background: var(--oscuro); color: #fff; overflow: hidden; }
.rm-rapido-banda::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 36px 36px, linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 36px 36px; mask-image: linear-gradient(90deg, transparent, #000 60%); }
.rm-rapido-promo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.rm-rapido-promo h2 { color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.6rem); text-transform: uppercase; }
.rm-rapido-promo h2 em { color: var(--amarillo); }
.rm-rapido-promo__texto > p:not(.rm-antetitulo) { margin-top: 16px; color: rgb(255 255 255 / 0.78); max-width: 520px; }
.rm-pasos-mini { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-weight: 600; }
.rm-pasos-mini li { display: flex; align-items: center; gap: 10px; }
.rm-pasos-mini b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--amarillo); color: var(--oscuro-hondo); font-size: 0.85rem; }
.rm-rapido-promo__form { display: grid; gap: 12px; padding: 14px; border-radius: 22px; background: rgb(0 8 25 / 0.55); border: 1px solid rgb(255 255 255 / 0.12); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6); transform: rotate(-1.2deg); transition: transform 0.5s var(--ease); }
.rm-rapido-promo__form:focus-within, .rm-rapido-promo__form:hover { transform: none; }
.rm-rapido-promo__barra { display: flex; align-items: center; gap: 6px; padding: 2px 6px; color: rgb(255 255 255 / 0.5); font-size: 0.8rem; }
.rm-rapido-promo__barra i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 0.2); }
.rm-rapido-promo__barra i:first-child { background: #ff5f56; }
.rm-rapido-promo__barra i:nth-child(2) { background: #ffbd2e; }
.rm-rapido-promo__barra i:nth-child(3) { background: #27c93f; }
.rm-rapido-promo__barra span { margin-left: 8px; font-family: ui-monospace, Consolas, monospace; }
.rm-rapido-promo__form textarea { width: 100%; padding: 16px; border: 0; border-radius: 14px; background: rgb(255 255 255 / 0.06); color: #fff; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.95rem; line-height: 1.8; resize: vertical; outline: none; }
.rm-rapido-promo__form textarea::placeholder { color: rgb(255 255 255 / 0.55); }
.rm-rapido-promo__form textarea:focus { box-shadow: 0 0 0 2px var(--amarillo); }
@media (max-width: 849px) { .rm-rapido-promo { grid-template-columns: 1fr; } .rm-rapido-promo__form { transform: none; } }

/* ---------------------------------------------------------------- Academy: clases en video */
.rm-clases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rm-clases--grilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rm-clase { display: grid; align-content: start; gap: 8px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.rm-clase__foto { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--oscuro); box-shadow: var(--sombra); }
.rm-clase__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), filter 0.4s; filter: saturate(0.9); }
.rm-clase:hover .rm-clase__foto img { transform: scale(1.05); filter: none; }
.rm-clase__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 10 30 / 0.55), transparent 55%); }
.rm-clase__play { position: absolute; z-index: 1; left: 14px; bottom: 14px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--amarillo); color: var(--oscuro-hondo); transition: transform 0.3s var(--ease); }
.rm-clase:hover .rm-clase__play { transform: scale(1.1); }
.rm-clase__play svg { margin-left: 3px; }
.rm-clase__marca { position: absolute; z-index: 1; top: 12px; right: 12px; padding: 3px 10px; border-radius: 8px; background: rgb(0 10 30 / 0.7); color: #fff; font-size: 0.75rem; font-weight: 700; }
.rm-clase strong { font-family: var(--f-titulo); font-size: 1.35rem; font-weight: 700; line-height: 1.05; color: var(--oscuro); }
.rm-clase small { color: var(--suave); font-size: 0.9rem; }
.rm-vivo-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 18px; padding: 14px 18px; border-radius: 16px; background: var(--amarillo); color: var(--oscuro-hondo); text-decoration: none; }
.rm-vivo-mini .rm-vivo__punto { position: static; }
.rm-vivo-mini svg { margin-left: auto; }
.rm-chips--sin-margen { margin-top: 0; }
@media (max-width: 849px) {
  .rm-clases { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .rm-clases > * { scroll-snap-align: start; }
  .rm-clases--grilla { grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; }
}

/* Service: banda */
.rm-seccion--sin-arriba { padding-top: 0; }
.rm-service-banda { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--oscuro-hondo); color: #fff; text-decoration: none; position: relative; overflow: hidden; transition: transform 0.4s var(--ease); }
.rm-service-banda::before { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: repeating-linear-gradient(-45deg, rgb(255 242 0 / 0.14) 0 12px, transparent 12px 24px); }
.rm-service-banda:hover { transform: translateY(-3px); }
.rm-service-banda__icono svg { width: 64px; height: 64px; padding: 14px; border-radius: 20px; background: rgb(255 255 255 / 0.08); color: var(--amarillo); }
.rm-service-banda > span:nth-child(2) { display: grid; gap: 4px; }
.rm-service-banda .rm-antetitulo { margin: 0; }
.rm-service-banda strong { font-family: var(--f-titulo); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; text-transform: uppercase; line-height: 1; }
.rm-service-banda strong em { color: var(--amarillo); }
.rm-service-banda span span { color: rgb(255 255 255 / 0.75); }
.rm-service-banda .btn { position: relative; }
@media (max-width: 749px) { .rm-service-banda { grid-template-columns: 1fr; } .rm-service-banda__icono { display: none; } }

/* Marcas: sin cortes al pasar el mouse */
.rm-marquesina { padding-block: 10px 18px; }
.rm-marquesina a { display: grid; justify-items: center; gap: 2px; align-content: center; }
.rm-marquesina small { font-size: 0.72rem; color: var(--suave); }

/* ---------------------------------------------------------------- ventanas (ingreso y videos) */
dialog.rm-modal { padding: 0; border: 0; border-radius: 28px; background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra-alta); max-width: calc(100vw - 24px); max-height: calc(100svh - 24px); overflow: auto; }
dialog.rm-modal[open] { animation: rm-modal 0.4s var(--ease); }
dialog.rm-modal::backdrop { background: rgb(2 12 32 / 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@keyframes rm-modal { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
.rm-modal__cerrar { position: absolute; z-index: 2; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--claro); font-size: 1.5rem; cursor: pointer; }
.rm-modal--ingreso { width: min(480px, 100%); }
.rm-modal--video { width: min(1100px, 100%); background: #000; border-radius: 22px; overflow: visible; }
.rm-modal--video .rm-modal__cerrar { top: -54px; right: 0; background: #fff; }
.rm-modal__video { aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; }
.rm-modal__video iframe, .rm-modal__video video { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 749px) { .rm-modal--video .rm-modal__cerrar { top: auto; bottom: -58px; right: 50%; margin-right: -22px; } }
.rm-ingreso { display: grid; gap: 18px; padding: clamp(24px, 5vw, 36px); }
.rm-ingreso__cab { display: grid; gap: 6px; padding-right: 40px; }
.rm-ingreso__icono svg { width: 48px; height: 48px; padding: 11px; margin-bottom: 6px; border-radius: 16px; background: var(--oscuro); color: var(--amarillo); }
.rm-ingreso__cab h2 { font-size: 2rem; text-transform: uppercase; }
.rm-ingreso__cab p { color: var(--suave); }
.rm-ingreso__pestanas { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--claro); }
.rm-ingreso__pestanas button { min-height: 42px; border: 0; border-radius: 999px; background: none; font-weight: 700; color: var(--suave); cursor: pointer; }
.rm-ingreso__pestanas button[aria-selected='true'] { background: var(--oscuro); color: #fff; }
.rm-ingreso .rm-form .btn { width: 100%; }
.rm-clave { position: relative; display: block; }
.rm-clave input { padding-right: 48px !important; }
.rm-clave button { position: absolute; right: 8px; top: 50%; translate: 0 -50%; color: var(--suave); }
.rm-ingreso__olvide { justify-self: center; }
.rm-ingreso__ayuda { text-align: center; font-size: 0.88rem; color: var(--suave); }
.rm-ingreso__ayuda a { color: var(--ok); font-weight: 700; }
.rm-ingreso-pagina { padding-bottom: 64px; }
.rm-ingreso-caja { border-radius: 28px; background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra-alta); }
.rm-ingreso-pagina .rm-cliente__lista { margin-top: 24px; }

/* ---------------------------------------------------------------- "Mi cuenta" */
.rm-cuenta { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; padding: calc(var(--arriba) + 24px) 0 72px; }
.rm-cuenta__lado { position: sticky; top: 96px; display: grid; gap: 14px; }
.rm-cuenta__quien { display: flex; align-items: center; gap: 12px; }
.rm-cuenta__quien div { display: grid; min-width: 0; }
.rm-cuenta__quien strong { line-height: 1.2; }
.rm-cuenta__quien small { color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-avatar { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--marca), var(--oscuro)); color: #fff; font-family: var(--f-titulo); font-weight: 800; font-size: 1.3rem; }
.rm-insignia { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--oscuro-hondo); color: var(--amarillo); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.rm-insignia::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amarillo); }
.rm-cuenta__nav { display: grid; gap: 2px; padding: 8px; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-cuenta__nav a, .rm-cuenta__nav button { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: none; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer; color: var(--texto); white-space: nowrap; }
.rm-cuenta__nav svg { width: 18px; height: 18px; color: var(--suave); }
.rm-cuenta__nav a:hover, .rm-cuenta__nav button:hover { background: var(--claro); }
.rm-cuenta__nav a[aria-current] { background: var(--oscuro); color: #fff; }
.rm-cuenta__nav a[aria-current] svg { color: var(--amarillo); }
.rm-cuenta__nav b:not(:empty) { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--claro); color: var(--oscuro); font-size: 0.75rem; text-align: center; }
.rm-cuenta__nav a[aria-current] b { background: rgb(255 255 255 / 0.15); color: #fff; }
.rm-cuenta__nav button { color: var(--error); }
.rm-cuenta__nav button svg { color: var(--error); transform: rotate(180deg); }
.rm-cuenta__ayuda { display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: var(--amarillo); color: var(--oscuro-hondo); font-size: 0.9rem; }
.rm-cuenta__ayuda a { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; color: var(--oscuro-hondo); }
.rm-cuenta__principal { display: grid; gap: 16px; min-width: 0; }
.rm-cuenta__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.rm-cuenta__cab h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); text-transform: uppercase; }
.rm-cuenta__cab p { color: var(--suave); font-size: 1.05rem; }
.rm-cuenta__franja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 12px 18px; border-radius: 16px; background: var(--tarjeta); box-shadow: var(--sombra); font-size: 0.9rem; color: var(--suave); }
.rm-cuenta__franja b { color: var(--texto); }
.rm-estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.rm-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rm-estado--ok { background: color-mix(in srgb, var(--ok) 12%, #fff); color: var(--ok); }
.rm-estado--alerta { background: color-mix(in srgb, var(--alerta) 12%, #fff); color: var(--alerta); }
.rm-estado--azul { background: color-mix(in srgb, var(--marca) 12%, #fff); color: var(--marca-fuerte); }
.rm-estado--gris { background: var(--claro); color: var(--suave); }
.rm-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rm-numero { display: grid; align-content: start; gap: 4px; padding: 18px; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra); text-decoration: none; min-width: 0; }
.rm-numero > svg { width: 18px; height: 18px; color: var(--marca); }
.rm-numero small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); }
.rm-numero strong { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.05; color: var(--oscuro); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rm-numero span { color: var(--suave); font-size: 0.85rem; }
.rm-numero--destacado { background: var(--oscuro); transition: transform 0.3s var(--ease); }
.rm-numero--destacado:hover { transform: translateY(-3px); }
.rm-numero--destacado > svg, .rm-numero--destacado strong { color: var(--amarillo); }
.rm-numero--destacado small, .rm-numero--destacado span { color: rgb(255 255 255 / 0.75); }
.rm-cuenta__dos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.rm-caja__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.rm-caja__cab strong { font-family: var(--f-titulo); font-size: 1.5rem; font-weight: 800; color: var(--oscuro); text-transform: uppercase; }
.rm-mis-datos dl { display: grid; margin: 0; }
.rm-mis-datos dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 0.92rem; }
.rm-mis-datos dl div:last-child { border: 0; }
.rm-mis-datos dt { color: var(--suave); }
.rm-mis-datos dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.rm-falta { color: var(--suave); font-weight: 400; font-style: italic; }
/* Gráfico de compras por mes (una sola serie: un color, tooltip al pasar y tabla para lectores de pantalla) */
.rm-grafico { margin: 0; }
.rm-grafico figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.rm-grafico figcaption strong { font-family: var(--f-titulo); font-size: 1.5rem; font-weight: 800; color: var(--oscuro); text-transform: uppercase; }
.rm-grafico figcaption small { color: var(--suave); }
.rm-grafico__area { position: relative; height: 230px; padding-left: 64px; }
.rm-grafico__ejes { position: absolute; inset: 0 0 28px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.rm-grafico__ejes span { position: relative; border-top: 1px solid var(--linea); }
.rm-grafico__ejes i { position: absolute; left: 0; top: -9px; font-style: normal; font-size: 0.72rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.rm-grafico__barras { position: relative; height: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; align-items: end; padding-bottom: 28px; }
.rm-barra { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; outline: none; cursor: default; }
.rm-barra i { width: min(36px, 70%); height: var(--h); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--marca); transition: background-color 0.2s; }
.rm-barra:hover i, .rm-barra:focus-visible i { background: var(--oscuro); }
.rm-barra b { position: absolute; bottom: -24px; font-weight: 500; font-size: 0.78rem; color: var(--suave); text-transform: capitalize; }
.rm-barra em { position: absolute; bottom: calc(var(--h) + 6px); font-style: normal; font-weight: 700; font-size: 0.75rem; color: var(--texto); white-space: nowrap; }
.rm-barra__tip { position: absolute; z-index: 2; bottom: calc(var(--h) + 10px); display: grid; padding: 8px 10px; border-radius: 10px; background: var(--oscuro-hondo); color: #fff; font-size: 0.82rem; font-weight: 700; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.rm-barra__tip small { font-weight: 500; color: rgb(255 255 255 / 0.7); }
.rm-barra:hover .rm-barra__tip, .rm-barra:focus-visible .rm-barra__tip { opacity: 1; transform: none; }
.rm-barra:hover em, .rm-barra:focus-visible em { opacity: 0; }
/* Tabla de pedidos */
.rm-tabla { overflow-x: auto; }
.rm-tabla table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.rm-tabla th { padding: 10px 12px; border-bottom: 1px solid var(--linea); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); text-align: left; }
.rm-tabla td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.rm-tabla tr:last-child td { border-bottom: 0; }
.rm-tabla td small { display: block; color: var(--suave); font-size: 0.78rem; }
.rm-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.rm-tabla__acciones { text-align: right; white-space: nowrap; }
.rm-tabla__acciones .btn { margin-left: 8px; }
.rm-repo--cuenta { padding: 0; }
.rm-repo--cuenta .rm-repo__caja { box-shadow: var(--sombra); }
/* Mis pedidos */
.rm-pedidos { display: grid; gap: 10px; }
.rm-pedido { border-radius: 18px; background: var(--tarjeta); box-shadow: var(--sombra); }
.rm-pedido summary { display: grid; grid-template-columns: auto auto 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; cursor: pointer; list-style: none; }
.rm-pedido summary::-webkit-details-marker { display: none; }
.rm-pedido summary span:nth-child(2) { color: var(--suave); }
.rm-pedido summary .rm-estado { justify-self: start; }
.rm-pedido summary b { font-family: var(--f-titulo); font-size: 1.25rem; color: var(--oscuro); }
.rm-pedido__cuerpo { display: grid; gap: 10px; padding: 0 18px 18px; }
.rm-pedido__cuerpo ul { display: grid; gap: 6px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--linea); list-style: none; font-size: 0.92rem; }
.rm-pedido__cuerpo li { display: flex; justify-content: space-between; gap: 12px; }
.rm-pedido__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-form--angosto { max-width: 640px; }
.rm-campo { display: grid; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--suave); }
.rm-campo__fijo { padding: 12px 16px; border-radius: 14px; background: var(--claro); color: var(--texto); font-weight: 500; font-size: 1rem; }
.rm-cuenta-sola { padding: calc(var(--arriba) + 24px) 0 72px; }
@media (max-width: 1099px) { .rm-numeros { grid-template-columns: 1fr 1fr; } .rm-cuenta__dos { grid-template-columns: 1fr; } }
@media (max-width: 849px) {
  .rm-cuenta { grid-template-columns: 1fr; }
  .rm-cuenta__lado { position: static; }
  .rm-cuenta__nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .rm-cuenta__ayuda { display: none; }
  .rm-pedido summary { grid-template-columns: auto 1fr auto; }
  .rm-pedido summary span:nth-child(2) { display: none; }
}
@media (max-width: 599px) {
  .rm-tabla th:nth-child(2), .rm-tabla td:nth-child(2) { display: none; }
  .rm-grafico__area { padding-left: 52px; }
  .rm-grafico__barras { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-hero__fondo, .rm-hero__luz, .rm-destacada__cinta, .rm-destacada__play, .rm-palabra > span, .rm-entra { animation: none !important; }
}
.rm-nosotros__foto { background: var(--oscuro-hondo); }
.rm-nosotros__foto img { width: 100%; max-height: 520px; aspect-ratio: 1905 / 500; object-fit: cover; }
/* Ajustes: el buscador nunca pisa los accesos; tarjetas sin precio con el botón al pie */
.ns-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(12px, 2vw, 28px); }
.rm-buscador--barra { justify-self: center; max-width: 640px; }
@media (max-width: 1279px) { .rm-accion--rapido span { display: none; } .rm-accion--rapido { width: 44px; justify-content: center; padding: 0; } }
.rm-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 6px; }
.rm-tarjeta__datos { margin-bottom: auto; }
.rm-tarjeta__precio { padding-top: 6px; }
.rm-tarjeta__foto { text-decoration: none; }
/* Menú grande: enlaces numerados a la izquierda; rubros y "Hablemos" a la derecha, todo a la vista */
@media (min-width: 900px) {
  .ns-panel { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr; gap: 24px 40px; }
  .ns-panel__nav { grid-row: 1 / 3; }
  .ns-panel__nav a { font-size: clamp(1.5rem, 2.6vw, 2.3rem); padding-block: 6px; }
  .rm-panel-rubros { grid-column: 2; grid-row: 1; padding-top: 0; border-top: 0; }
  .rm-panel-rubros > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ns-panel__info { grid-column: 2; grid-row: 2; align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / 0.12); }
  .ns-panel__info .ns-panel__label, .ns-panel__info .ns-panel__social { grid-column: 1 / -1; }
}
.rm-panel-rubros a { padding: 10px 12px; }
/* "Mi cuenta" en el celular: nada más ancho que la pantalla */
@media (max-width: 849px) {
  .rm-cuenta { grid-template-columns: minmax(0, 1fr); }
  .rm-cuenta__principal, .rm-cuenta__lado { min-width: 0; }
  .rm-cuenta__cab h1 { font-size: clamp(2rem, 9vw, 2.6rem); overflow-wrap: anywhere; }
  .rm-numeros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .rm-numero { padding: 14px; }
  .rm-numero strong { font-size: 1.6rem; }
  .rm-cuenta__dos { grid-template-columns: minmax(0, 1fr); }
  .rm-cuenta__franja { gap: 6px 16px; }
}
.rm-repo, .rm-repo__caja, .rm-repo__lista { min-width: 0; max-width: 100%; }
.rm-seccion__cab > * { min-width: 0; max-width: 100%; }
/* Grillas de una columna: que su contenido (filas con scroll, chips) nunca las ensanche más que la pantalla */
.rm-cuenta__principal, .rm-academy, .rm-service, .rm-sinres, .pedido, .rm-ficha__info, .rm-cuenta__lado, .rm-repo__caja { grid-template-columns: minmax(0, 1fr); }
/* Marca destacada: la imagen va entera (respeta su forma) y a todo el ancho; el texto en dos columnas debajo */
.rm-destacada__grilla { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
.rm-destacada__imagen { order: -1; aspect-ratio: auto; }
.rm-destacada__imagen img { height: auto; }
@media (min-width: 900px) {
  .rm-destacada__texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
  .rm-destacada__texto > :is(.rm-destacada__marca, .rm-destacada__logo, .rm-antetitulo, h2) { grid-column: 1; }
  .rm-destacada__texto > :is(.rm-destacada__bajada, .rm-destacada__claves, .rm-destacada__botones) { grid-column: 2; }
  .rm-destacada__bajada { grid-row: 1 / span 2; margin-top: 0; }
  .rm-destacada__texto h2 { grid-row: 3; }
  .rm-destacada__claves { grid-row: 3; margin-top: 0; }
  .rm-destacada__botones { grid-row: 4; margin-top: 22px; }
}
/* El botón de play va en una esquina, para no tapar el texto de la imagen */
.rm-destacada__play { left: auto; top: auto; right: 20px; bottom: 20px; width: auto; height: 56px; margin: 0; padding: 0 22px 0 16px; gap: 8px; grid-auto-flow: column; border-radius: 999px; font-weight: 800; }
.rm-destacada__play svg { width: 24px; height: 24px; margin: 0; }
.rm-destacada__play::after { content: 'Ver video'; }
@media (max-width: 749px) { .rm-destacada__play { right: 12px; bottom: 12px; height: 46px; padding: 0 16px 0 12px; } }

/* =========================================================
   Versión 3 (feedback de Nico, 16/10): secciones de artículos a todo el ancho, cuenta más ancha,
   nota de pedido en vez de "código", "¿Quisiste decir…?" y Service sin superposiciones.
   ========================================================= */

/* Contenedor ancho: casi todo el ancho de la pantalla, con un margen que se adapta a cada dispositivo */
:root { --borde-ancho: clamp(16px, 3vw, 48px); --ancho-max: 1760px; }
.contenedor--ancho { width: min(100% - 2 * var(--borde-ancho), var(--ancho-max)); }
/* Las filas de productos arrancan en el mismo margen que su título y llegan al borde derecho */
.rm-carrusel--ancho .rm-carrusel__pista { --borde: max(var(--borde-ancho), (100vw - var(--ancho-max)) / 2); }
@media (min-width: 1500px) { .rm-carrusel__pista { grid-auto-columns: 280px; } }
@media (min-width: 1800px) { .rm-carrusel__pista { grid-auto-columns: 300px; } }
/* Catálogo ancho: más productos por fila en pantallas grandes */
.rm-listado.contenedor--ancho { grid-template-columns: 280px minmax(0, 1fr); }
@media (max-width: 899px) { .rm-listado.contenedor--ancho { grid-template-columns: minmax(0, 1fr); } }
.rm-listado .rm-grilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* "Mi cuenta" más ancha */
.rm-cuenta.contenedor--ancho { grid-template-columns: 280px minmax(0, 1fr); gap: clamp(20px, 2.4vw, 40px); }
@media (max-width: 849px) { .rm-cuenta.contenedor--ancho { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1400px) { .rm-cuenta__dos { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

/* ---------------------------------------------------------------- nota de pedido (en vez de "código") */
.rm-nota-pedido { position: relative; }
.rm-rapido-promo__form.rm-nota-pedido { gap: 0; padding: 0; border: 0; border-radius: 14px; background: #fffdf4; color: var(--texto); box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.55), 0 1px 0 rgb(0 0 0 / 0.04); transform: rotate(-1.2deg); overflow: hidden; }
.rm-nota-pedido__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 16px 22px 12px 58px; border-bottom: 2px solid color-mix(in srgb, var(--marca) 40%, transparent); background: #fffdf4; }
.rm-nota-pedido__cab strong { font-family: var(--f-titulo); font-weight: 800; font-size: 1.45rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--oscuro); }
.rm-nota-pedido__cab span { font-size: 0.85rem; color: var(--suave); font-weight: 500; }
/* Hoja rayada con margen rojo, como la libreta del mostrador */
.rm-rapido-promo__form.rm-nota-pedido textarea,
textarea.rm-nota-pedido__hoja {
  --renglon: 34px;
  width: 100%; min-height: calc(var(--renglon) * 6 + 12px); padding: 6px 22px 6px 58px; border: 0; border-radius: 0;
  background:
    linear-gradient(90deg, transparent 43px, rgb(220 60 60 / 0.55) 43px, rgb(220 60 60 / 0.55) 45px, transparent 45px),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--renglon) - 1px), rgb(4 119 248 / 0.18) calc(var(--renglon) - 1px), rgb(4 119 248 / 0.18) var(--renglon)) 0 6px,
    #fffdf4;
  color: var(--oscuro-hondo); font-family: var(--f-texto); font-size: 1.08rem; font-weight: 500; line-height: var(--renglon); resize: vertical; outline: none; box-shadow: none;
  background-attachment: local;
}
.rm-rapido-promo__form.rm-nota-pedido textarea::placeholder, textarea.rm-nota-pedido__hoja::placeholder { color: color-mix(in srgb, var(--suave) 75%, #fff); font-style: italic; }
.rm-rapido-promo__form.rm-nota-pedido textarea:focus, textarea.rm-nota-pedido__hoja:focus { box-shadow: none; }
.rm-rapido-promo__form.rm-nota-pedido .btn { margin: 0; border-radius: 0; min-height: 58px; }
.rm-rapido__entrada.rm-nota-pedido { gap: 0; border-radius: 16px; overflow: hidden; background: #fffdf4; box-shadow: inset 0 0 0 1.5px var(--linea); }
.rm-rapido__entrada.rm-nota-pedido:focus-within { box-shadow: inset 0 0 0 2px var(--marca); }
.rm-rapido__entrada.rm-nota-pedido > label { font-weight: inherit; }
textarea.rm-nota-pedido__hoja { min-height: calc(34px * 8 + 12px); }
.rm-rapido__entrada.rm-nota-pedido .rm-rapido__acciones { padding: 14px 18px; background: #fff; border-top: 1px solid var(--linea); }
.rm-rapido__ayuda ul { gap: 14px; }
.rm-rapido__ayuda li { display: grid; gap: 2px; }
.rm-rapido__ayuda li b { justify-self: start; padding: 4px 10px; border-radius: 8px; background: #fffdf4; color: var(--oscuro-hondo); font-weight: 700; transform: rotate(-1deg); }
.rm-rapido__ayuda li span { font-size: 0.88rem; }
.rm-renglon__escrito { font-family: var(--f-texto); font-style: italic; font-size: 0.82rem !important; }
@media (max-width: 849px) { .rm-rapido-promo__form.rm-nota-pedido { transform: none; } }

/* ---------------------------------------------------------------- "¿Quisiste decir…?" */
.rm-sug__corregir { display: flex; align-items: center; gap: 10px; margin: 4px 4px 2px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--amarillo) 55%, #fff) !important; text-decoration: none; font-size: 1rem; }
.rm-sug__corregir b { color: var(--oscuro); }
.rm-sug__corregir svg { width: 18px; height: 18px; color: var(--oscuro); }
.rm-corregir { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 18px; background: var(--amarillo); color: var(--oscuro-hondo); text-decoration: none; font-size: 1.15rem; transition: transform 0.3s var(--ease); }
.rm-corregir:hover { transform: translateY(-2px); }
.rm-corregir b { font-family: var(--f-titulo); font-size: 1.6rem; font-weight: 800; text-transform: uppercase; }
.rm-corregir svg:last-child { margin-left: auto; }

/* ---------------------------------------------------------------- Service y Academy: sin tarjetas montadas sobre la cabecera */
.rm-service { padding-top: clamp(28px, 4vw, 48px); gap: clamp(24px, 3vw, 40px); }
.rm-service__accesos { margin-top: 0; }
.rm-pasos { margin-top: 0; }
.rm-vivo, .rm-academy > .rm-caja:first-child { margin-top: 0; }
.rm-service .rm-seccion { padding: 0; }
.rm-service .rm-seccion__cab { margin-bottom: 16px; }
.rm-service-banda { padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 56px); }
@media (max-width: 560px) { .rm-listado .rm-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } }

/* =========================================================
   Versión 4 (16/10): aviso y carrito en el celular, hero sin cuadriculado, cinta de obra animada
   ========================================================= */
/* El header queda siempre debajo del aviso, mida lo que mida (uno o dos renglones) */
html.con-aviso body { padding-top: var(--aviso-h, 36px); }
html.con-aviso .ns-header { top: calc(var(--ns-gap) + var(--aviso-h, 36px)); }
html.con-aviso:has(.ns-header.is-scrolled) .ns-header { top: var(--ns-gap); }
@media (max-width: 749px) { .aviso { font-size: 0.8rem; line-height: 1.35; padding: 6px 14px; } }
/* Carrito en pantallas angostas: ícono con el número como globito en la esquina */
@media (max-width: 479px) {
  .ns-cta { position: relative; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .ns-cta > span { display: none; }
  .ns-cta svg { width: 20px; height: 20px; }
  .ns-cta .contador { position: absolute; top: -4px; right: -6px; min-width: 22px; height: 22px; margin: 0; padding: 0 5px; font-size: 0.7rem; box-shadow: 0 0 0 2px var(--amarillo); }
  .rm-derecha { gap: 2px; }
  .rm-acciones { gap: 0; }
}

/* Hero sin cuadriculado: azul profundo con luz, como un taller de noche */
.rm-hero__fondo { animation: none; background:
    radial-gradient(70% 80% at 85% 0%, color-mix(in srgb, var(--marca) 50%, transparent), transparent 70%),
    radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--oscuro) 95%, transparent), transparent 70%),
    linear-gradient(160deg, var(--oscuro) 0%, var(--oscuro-hondo) 70%); }
.rm-rapido-banda::before { display: none; }

/* La cinta de obra (amarilla y azul) se desliza despacio en todas las páginas: la firma de Ramasil en movimiento */
.rm-hero::after, .rm-cabecera--oscura::after, .pie::before { background-size: 34px 100%; animation: rm-obra 2.4s linear infinite; }
@keyframes rm-obra { to { background-position: 34px 0; } }
@media (prefers-reduced-motion: reduce) { .rm-hero::after, .rm-cabecera--oscura::after, .pie::before { animation: none; } }

/* ---------------------------------------------------------------- Mi cuenta: estadísticas por período */
.rm-periodo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.rm-periodo__opciones { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tarjeta); box-shadow: var(--sombra); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.rm-periodo__opciones button { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font-weight: 700; font-size: 0.9rem; color: var(--suave); white-space: nowrap; cursor: pointer; }
.rm-periodo__opciones button:hover { color: var(--oscuro); }
.rm-periodo__opciones button[aria-pressed='true'] { background: var(--oscuro); color: #fff; }
.rm-periodo__fechas { display: flex; flex-wrap: wrap; gap: 10px; }
.rm-periodo__fechas label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--suave); }
.rm-periodo__fechas input { min-height: 42px; padding: 0 12px; border: 1.5px solid var(--linea); border-radius: 12px; background: #fff; color: var(--texto); font: inherit; }
.rm-periodo__fechas input:focus { border-color: var(--marca); outline: none; }
.rm-estadisticas { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.rm-cuenta__franja a { color: var(--alerta); text-decoration: none; }
.rm-cuenta__franja a b { color: var(--alerta); }
.rm-nota--chica { margin: 0; padding: 10px 14px; font-size: 0.85rem; }
.rm-grafico figcaption { flex-wrap: wrap; }
.rm-grafico__monedas { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--claro); }
.rm-grafico__monedas button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-weight: 700; font-size: 0.8rem; color: var(--suave); cursor: pointer; }
.rm-grafico__monedas button[aria-pressed='true'] { background: var(--oscuro); color: #fff; }
.rm-grafico__barras--muchas { gap: 4px; }
.rm-grafico__barras--muchas .rm-barra b { font-size: 0.66rem; }
.rm-grafico__barras--muchas .rm-barra:nth-child(even) b { display: none; }
.rm-grafico .rm-nada { margin: 0; }
.rm-top ol { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: top; }
.rm-top li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); counter-increment: top; }
.rm-top li:last-child { border-bottom: 0; }
.rm-top li::before { content: counter(top); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--claro); color: var(--oscuro); font-family: var(--f-titulo); font-weight: 800; }
.rm-top li:first-child::before { background: var(--amarillo); }
.rm-top li > div:first-of-type { display: grid; min-width: 0; }
.rm-top strong { font-weight: 700; font-size: 0.94rem; line-height: 1.25; }
.rm-top small { color: var(--suave); font-size: 0.8rem; }
.rm-top .rm-caja__cab small { color: var(--suave); }
@media (max-width: 599px) {
  .rm-top li { grid-template-columns: auto minmax(0, 1fr); }
  .rm-top li .rm-compra { grid-column: 2; }
  .rm-periodo__fechas, .rm-periodo__fechas label { width: 100%; }
  .rm-periodo__fechas input { flex: 1; }
}
.rm-estadisticas__dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1600px) { .rm-estadisticas__dos { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.rm-barra b { white-space: nowrap; font-size: 0.74rem; }
.rm-top .rm-caja__cab strong { font-size: 1.5rem; }

/* ---------------------------------------------------------------- pesos y dólares en el pedido */
.carrito__monedas { display: grid; gap: 4px; }
.carrito__monedas .carrito__total { font-size: 1.25rem; }
.carrito__nota--monedas { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--amarillo) 35%, #fff); color: var(--oscuro-hondo); text-align: left; }
.carrito__nota--monedas svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.resumen__grupo { margin: 10px 0 2px; padding-top: 12px; border-top: 2px solid var(--linea); font-family: var(--f-titulo); font-size: 1.15rem; font-weight: 800; text-transform: uppercase; color: var(--marca-fuerte); }
.compra__resumen h2 + .resumen__grupo { margin-top: 0; padding-top: 0; border-top: 0; }
.pedido__grupo { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: color-mix(in srgb, var(--marca) 8%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marca) 20%, transparent); }
.pedido__grupo > svg { color: var(--marca-fuerte); margin-top: 2px; }
.pedido__grupo p { color: var(--suave); margin-top: 4px; }
.pedido__grupo ul { margin: 10px 0 0; padding-left: 18px; }
.pedido__grupo a { font-weight: 700; color: var(--marca-fuerte); }

/* ---------------------------------------------------------------- Mi cuenta: bajaron de precio */
.rm-bajas { padding: clamp(18px, 3vw, 28px); border-radius: 22px; background: var(--tarjeta); box-shadow: var(--sombra), inset 0 0 0 2px color-mix(in srgb, var(--ok) 35%, transparent); }
.rm-bajas__cab h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); text-transform: uppercase; }
.rm-bajas__cab .rm-antetitulo { color: var(--ok); }
.rm-bajas__cab p:not(.rm-antetitulo) { margin-top: 4px; color: var(--suave); }
.rm-bajas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.rm-bajas__lista li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--claro); }
.rm-bajas__foto { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: #fff; color: var(--suave); }
.rm-bajas__foto img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.rm-bajas__info { display: grid; gap: 2px; min-width: 0; }
.rm-bajas__info a { text-decoration: none; }
.rm-bajas__info strong { font-weight: 700; line-height: 1.25; }
.rm-bajas__info small { color: var(--suave); font-size: 0.8rem; }
.rm-bajas__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.rm-bajas__precio s { color: var(--suave); font-size: 0.85rem; }
.rm-bajas__precio b { font-family: var(--f-titulo); font-size: 1.25rem; color: var(--oscuro); }
.rm-bajas__precio em { padding: 1px 8px; border-radius: 99px; background: var(--ok); color: #fff; font-style: normal; font-weight: 700; font-size: 0.75rem; }
@media (max-width: 599px) { .rm-bajas__lista li { grid-template-columns: 56px minmax(0, 1fr); } .rm-bajas__lista .rm-compra { grid-column: 1 / -1; } }
.rm-interruptor--texto { font-weight: 600; font-size: 0.95rem; color: var(--texto); }

/* Pesos y dólares en un mismo pedido: subtotal por moneda y el tipo de cambio del total */
.resumen__moneda dd { font-weight: 700; }
.resumen__cambio dt, .resumen__cambio dd { font-size: .82rem; color: var(--suave); }

/* Pedido: avance (recibido → pago → listo / en camino → entregado) */
.pedido__avance { list-style: none; margin: 0; padding: 18px 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-radius: 18px; background: var(--tarjeta); box-shadow: var(--sombra); counter-reset: paso; }
.pedido__avance li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--suave); }
.pedido__avance li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tarjeta); box-shadow: inset 0 0 0 2px var(--linea); font-weight: 800; }
.pedido__avance li > span svg { width: 18px; height: 18px; }
.pedido__avance li + li::before { content: ""; position: absolute; top: 16px; right: 50%; width: 100%; height: 2px; background: var(--linea); }
.pedido__avance li.is-hecho { color: var(--oscuro); }
.pedido__avance li.is-hecho > span { background: var(--ok); color: #fff; box-shadow: none; }
.pedido__avance li.is-hecho::before { background: var(--ok); }
.pedido__avance li.is-actual > span { box-shadow: inset 0 0 0 2px var(--marca); color: var(--marca-fuerte); animation: rm-latido 2.4s ease-in-out infinite; }
.pedido__avance li.is-actual { color: var(--marca-fuerte); }
@keyframes rm-latido { 50% { box-shadow: inset 0 0 0 2px var(--marca), 0 0 0 6px color-mix(in srgb, var(--marca) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pedido__avance li.is-actual > span { animation: none; } }

/* Pedido: dónde y cuándo, con el mapa */
.pedido__entrega { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-radius: 22px; overflow: hidden; background: var(--tarjeta); box-shadow: var(--sombra); }
.pedido__entrega--sin-mapa { grid-template-columns: minmax(0, 1fr); }
.pedido__entrega-datos { display: grid; align-content: start; gap: 12px; padding: 24px; }
.pedido__entrega-tipo { display: flex; gap: 8px; align-items: center; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--marca-fuerte); }
.pedido__entrega-tipo svg { width: 18px; height: 18px; }
.pedido__entrega-lugar { font-family: var(--f-titulo); font-size: 1.45rem; line-height: 1.15; color: var(--oscuro); }
.pedido__entrega dl { display: grid; gap: 6px; margin: 0; }
.pedido__entrega dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--linea); font-size: .92rem; }
.pedido__entrega dt { color: var(--suave); }
.pedido__entrega dd { margin: 0; font-weight: 600; text-align: right; }
.pedido__entrega-aviso { font-size: .88rem; color: var(--suave); }
.pedido__entrega-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.pedido__entrega-botones .btn { display: inline-flex; gap: 8px; align-items: center; }
.pedido__entrega-botones .btn svg { width: 18px; height: 18px; }
.pedido__mapa { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; background: var(--linea); }
@media (max-width: 680px) {
  .pedido__entrega { grid-template-columns: minmax(0, 1fr); }
  .pedido__mapa { min-height: 240px; order: -1; }
  .pedido__avance { padding: 14px 10px; }
  .pedido__avance li { font-size: .74rem; }
}