/* ============================================================
   XOLLOYA V2 — DESIGN SYSTEM (tokens + base)
   Mobile-first real: 360→430px es el ciudadano de primera clase.
   Breakpoints: phone <640 · tablet 640-1023 · desktop ≥1024 · wide ≥1280
   ============================================================ */

/* ---------- Fonts (local, subset latin) ---------- */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/pjs-400.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/pjs-500.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/pjs-600.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/pjs-700.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/pjs-800.woff2") format("woff2");}

/* ---------- Tokens ---------- */
:root{
  /* palette */
  --x-white:#FFFFFF; --x-bg:#FFFFFF; --x-bg-2:#F3F4F6; --x-bg-3:#E9EBEF;
  /* ESCALA DE TEXTO REVISADA (7-oct) POR CONTRASTE WCAG.
     Antes: ink-3 #6B7280 (4,83:1 sobre blanco, ok) e ink-4 #9CA3AF, que da 2,54:1 sobre blanco.
     El mínimo de WCAG AA para texto normal son 4,5:1 (y 3:1 incluso para texto grande), así que
     ink-4 estaba POR DEBAJO DE TODO, y se usa en 20 sitios para texto de verdad: el precio anterior
     tachado, la marca de las tarjetas de producto, los metadatos de cupones, el texto de los
     placeholders, los ejes del gráfico... Además en las tarjetas grises (--x-bg-2) ink-3 se quedaba
     en 4,39:1. Ahora los dos cumplen en blanco Y en gris, y la escala sigue ordenada (cada nivel más
     claro que el anterior):
       ink #0D0D0D 19,44 | ink-2 #3C414B 10,24 | ink-3 #5A6270 6,15 | ink-4 #68707E 4,99  (sobre blanco)
       ink #0D0D0D 17,66 | ink-2 #3C414B  9,31 | ink-3 #5A6270 5,59 | ink-4 #68707E 4,54  (sobre bg-2)
     Se verifica con scripts/auditar-accesibilidad.py y el cálculo vive en tokens/contraste. */
  --x-ink:#0D0D0D; --x-ink-2:#3C414B; --x-ink-3:#5A6270; --x-ink-4:#68707E;
  --x-line:#E5E7EB; --x-line-2:#D4D7DE;
  --x-green:#B9FF38;      /* Xollo Green: micro-destellos y marca, nunca texto sobre él claro */
  --x-green-deep:#1E2A00; /* para texto sobre lima si hiciera falta */
  --x-turq:#18C1D6; --x-turq-soft:#E3F8FB; --x-turq-ink:#0A6E7C;
  --x-purple:#7C5CFF; --x-purple-soft:#EFEBFF; --x-purple-ink:#4A33B8;
  --x-orange:#FF8A00; --x-orange-soft:#FFF1DF; --x-orange-ink:#9A5400;
  --x-red:#E5484D; --x-red-soft:#FDECEC; --x-red-ink:#A32A2E;
  --x-black:#0D0D0D; /* CTAs fuertes */
  /* semantic */
  --x-primary:var(--x-black); --x-primary-fg:var(--x-white);
  --x-accent:var(--x-green);
  --x-price-drop:var(--x-green); --x-price-drop-ink:#19330A; --x-price-drop-bg:var(--x-green);
  --x-link:var(--x-purple-ink);
  --x-trust:var(--x-turq-ink); --x-trust-bg:var(--x-turq-soft);
  --x-deal:var(--x-orange-ink); --x-deal-bg:var(--x-orange-soft);
  --x-score:var(--x-purple);
  /* typography */
  --x-font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --x-fs-11:0.6875rem; --x-fs-12:0.75rem; --x-fs-13:0.8125rem; --x-fs-14:0.875rem;
  --x-fs-16:1rem; --x-fs-18:1.125rem; --x-fs-20:1.25rem; --x-fs-22:1.375rem; --x-fs-24:1.5rem;
  --x-fs-28:1.75rem; --x-fs-34:2.125rem; --x-fs-44:2.75rem; --x-fs-56:3.5rem;
  --x-lh-tight:1.12; --x-lh-snug:1.3; --x-lh-body:1.55;
  --x-ls-caps:0.06em;
  /* spacing (4px base) */
  --x-sp-1:4px; --x-sp-2:8px; --x-sp-3:12px; --x-sp-4:16px; --x-sp-5:20px;
  --x-sp-6:24px; --x-sp-8:32px; --x-sp-10:40px; --x-sp-12:48px; --x-sp-16:64px; --x-sp-20:80px;
  /* radius */
  --x-r-sm:8px; --x-r-md:12px; --x-r-lg:16px; --x-r-xl:22px; --x-r-2xl:28px; --x-r-full:999px;
  /* borders */
  --x-b-1:1px solid var(--x-line);
  /* shadows / elevation */
  --x-sh-1:0 1px 2px rgba(13,13,13,.06);
  --x-sh-2:0 2px 8px rgba(13,13,13,.08);
  --x-sh-3:0 8px 24px rgba(13,13,13,.10);
  --x-sh-4:0 16px 48px rgba(13,13,13,.14);
  --x-sh-pop:0 -8px 32px rgba(13,13,13,.12);
  /* layout */
  --x-gutter:16px; --x-max:1240px; --x-col:64px;
  --x-nav-h:56px; --x-bottom-nav-h:64px; --x-safe-b:env(safe-area-inset-bottom,0px);
  --x-safe-t:env(safe-area-inset-top,0px);
  /* z-index scale */
  --x-z-content:1; --x-z-sticky:40; --x-z-header:50; --x-z-sheet:80; --x-z-modal:90; --x-z-toast:100; --x-z-search:95;
  /* motion */
  --x-dur-1:120ms; --x-dur-2:200ms; --x-dur-3:320ms; --x-dur-4:480ms;
  --x-ease:cubic-bezier(.22,.61,.21,1);
  --x-ease-out:cubic-bezier(.16,1,.3,1);
  --x-ease-spring:cubic-bezier(.34,1.56,.64,1);
  /* touch */
  --x-tap:44px;
}
@media (min-width:640px){ :root{ --x-gutter:24px; } }
/* El jefe lo pidió CUATRO veces: "respetar todos los márgenes, espacios, etcétera, en absolutamente
   todo, sin excepción de nada… en toda la web, en todas las secciones". Con 32px en un lienzo de
   1240 quedaba apretado en pantallas grandes. Al subirlo aquí se arregla en TODA la web de golpe
   (el contenedor y las cabeceras usan este token), sin tocar plantilla por plantilla. */
@media (min-width:1280px){ :root{ --x-gutter:40px; --x-max:1280px; } }

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0;font-family:var(--x-font);background:var(--x-bg);color:var(--x-ink);
  font-size:var(--x-fs-16);line-height:var(--x-lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--x-purple);outline-offset:2px;border-radius:4px}
::selection{background:var(--x-green);color:var(--x-ink)}

/* ---------- App shell ---------- */
.x-app{min-height:100dvh;display:flex;flex-direction:column}
.x-main{flex:1;padding-bottom:calc(var(--x-bottom-nav-h) + var(--x-safe-b) + 12px)}
@media (min-width:1024px){ .x-main{padding-bottom:0} }
.x-container{width:100%;max-width:var(--x-max);margin-inline:auto;padding-inline:var(--x-gutter)}

/* ---------- Type scale ---------- */
.x-h1{font-size:var(--x-fs-28);font-weight:800;line-height:var(--x-lh-tight);letter-spacing:-.02em}
.x-h2{font-size:var(--x-fs-20);font-weight:800;line-height:1.18;letter-spacing:-.015em}
.x-h3{font-size:var(--x-fs-16);font-weight:700;line-height:var(--x-lh-snug)}
.x-kicker{font-size:var(--x-fs-12);font-weight:700;letter-spacing:var(--x-ls-caps);text-transform:uppercase;color:var(--x-ink-3)}
.x-body{font-size:var(--x-fs-14);color:var(--x-ink-2)}
.x-meta{font-size:var(--x-fs-13);color:var(--x-ink-3)}
.x-num{font-variant-numeric:tabular-nums}
@media (min-width:640px){ .x-h1{font-size:var(--x-fs-34)} .x-h2{font-size:var(--x-fs-24)} }
@media (min-width:1024px){ .x-h1{font-size:var(--x-fs-44)} .x-h2{font-size:var(--x-fs-28)} }

/* ---------- Buttons ---------- */
.x-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--x-tap);padding:10px 18px;border-radius:var(--x-r-full);
  font-weight:700;font-size:var(--x-fs-14);letter-spacing:.01em;
  transition:transform var(--x-dur-1) var(--x-ease),box-shadow var(--x-dur-2) var(--x-ease),background var(--x-dur-2) var(--x-ease);
  user-select:none;white-space:nowrap;
}
.x-btn:active{transform:scale(.96)}
.x-btn--black{background:var(--x-black);color:#fff}
.x-btn--black:hover{background:#26262e}
.x-btn--green{background:var(--x-green);color:var(--x-green-deep)}
.x-btn--green:hover{filter:brightness(1.05)}
.x-btn--outline{border:1.5px solid var(--x-line-2);background:#fff;color:var(--x-ink)}
.x-btn--outline:hover{border-color:var(--x-ink)}
.x-btn--ghost{color:var(--x-ink-2)}
.x-btn--ghost:hover{background:var(--x-bg-2)}
.x-btn--danger{background:var(--x-red-soft);color:var(--x-red-ink)}
.x-btn--sm{min-height:36px;padding:6px 14px;font-size:var(--x-fs-13)}
.x-btn--lg{min-height:52px;padding:14px 26px;font-size:var(--x-fs-16)}
.x-btn--block{width:100%}
.x-btn[disabled],.x-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.x-btn--icon{width:var(--x-tap);min-height:var(--x-tap);padding:0;border-radius:var(--x-r-full)}

/* floating action */
.x-fab{
  position:fixed;right:16px;bottom:calc(var(--x-bottom-nav-h) + var(--x-safe-b) + 16px);
  z-index:var(--x-z-sticky);min-height:52px;padding:0 22px;border-radius:var(--x-r-full);
  background:var(--x-black);color:#fff;font-weight:800;font-size:var(--x-fs-14);
  display:inline-flex;align-items:center;gap:8px;box-shadow:var(--x-sh-3);
  transition:transform var(--x-dur-2) var(--x-ease-spring),opacity var(--x-dur-2);
}
.x-fab:active{transform:scale(.93)}
@media (min-width:1024px){ .x-fab{right:28px;bottom:28px} }

/* ---------- Chips / badges ---------- */
.x-chip{
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 14px;
  border-radius:var(--x-r-full);border:1.5px solid var(--x-line);background:#fff;
  font-size:var(--x-fs-13);font-weight:600;color:var(--x-ink-2);white-space:nowrap;
  transition:border-color var(--x-dur-1),background var(--x-dur-1),transform var(--x-dur-1);
}
.x-chip:active{transform:scale(.95)}
.x-chip[aria-pressed="true"],.x-chip--active{background:var(--x-black);border-color:var(--x-black);color:#fff}
.x-chip--turq{background:var(--x-turq-soft);border-color:transparent;color:var(--x-turq-ink)}
.x-chip--orange{background:var(--x-deal-bg);border-color:transparent;color:var(--x-deal)}
.x-chip--purple{background:var(--x-purple-soft);border-color:transparent;color:var(--x-purple-ink)}
.x-chip--green{background:var(--x-green);border-color:transparent;color:var(--x-green-deep);font-weight:800}
.x-chips-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to right, black calc(100% - 40px), transparent)}
/* EN PANTALLA GRANDE, QUE SE VEAN TODOS LOS CHIPS (arreglo 06/10/2026).
   Antes esta fila era solo deslizable y con la barra oculta (solo se intuia por el difuminado de la
   derecha), asi que en un PC no habia forma clara de saber que habia mas: el ultimo chip (p.ej. "Otros"
   en /tiendas) parecia CORTADO. El jefe lo reporto con el desplegable "Todas las categor…" de /productos.
   En movil se sigue deslizando (con el dedo es lo natural); en PC se envuelve y se ve todo.
   OJO: aqui hay que QUITAR el difuminado, porque si no el ultimo chip de cada linea saldria borroso. */
@media (min-width:900px){
  .x-chips-row{flex-wrap:wrap;overflow-x:visible;mask-image:none;-webkit-mask-image:none}
}
.x-chips-row::-webkit-scrollbar{display:none}
.x-chips-row .x-chip{scroll-snap-align:start}

.x-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--x-fs-12);font-weight:800;padding:3px 9px;border-radius:var(--x-r-full);line-height:1.3}
.x-badge--drop{background:var(--x-price-drop-bg);color:var(--x-price-drop-ink)}
.x-badge--hot{background:var(--x-red);color:#fff}
.x-badge--verified{background:var(--x-trust-bg);color:var(--x-trust)}
.x-badge--new{background:var(--x-purple);color:#fff}
.x-badge--neutral{background:var(--x-bg-2);color:var(--x-ink-2)}

/* ---------- Inputs ---------- */
.x-input{
  width:100%;min-height:var(--x-tap);padding:12px 16px;border-radius:var(--x-r-md);
  border:1.5px solid var(--x-line-2);background:#fff;font-size:var(--x-fs-16); /* 16px = no zoom en iOS */
  transition:border-color var(--x-dur-2),box-shadow var(--x-dur-2);
}
.x-input:focus{outline:none;border-color:var(--x-black);box-shadow:0 0 0 3px rgba(13,13,13,.08)}
.x-input::placeholder{color:var(--x-ink-4)}
.x-field{display:flex;flex-direction:column;gap:6px}
.x-field__label{font-size:var(--x-fs-13);font-weight:700;color:var(--x-ink-2)}

.x-searchbar{
  display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;
  background:var(--x-bg-2);border:1.5px solid transparent;border-radius:var(--x-r-full);
  color:var(--x-ink-3);font-size:var(--x-fs-14);font-weight:500;width:100%;
  transition:border-color var(--x-dur-2),background var(--x-dur-2);
}
.x-searchbar:active,.x-searchbar:hover{background:#fff;border-color:var(--x-line-2)}
.x-searchbar .x-kbd{margin-left:auto}
.x-kbd{font-size:var(--x-fs-12);font-weight:700;color:var(--x-ink-3);border:1px solid var(--x-line-2);border-radius:6px;padding:2px 8px;background:#fff}
@media (max-width:639px){ .x-kbd{display:none} }

/* switch */
.x-switch{position:relative;width:46px;height:28px;border-radius:999px;background:var(--x-line-2);transition:background var(--x-dur-2);flex:none}
.x-switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--x-sh-1);transition:transform var(--x-dur-2) var(--x-ease-spring)}
.x-switch[aria-checked="true"]{background:var(--x-green)}
.x-switch[aria-checked="true"]::after{transform:translateX(18px)}

/* ---------- Surfaces ---------- */
.x-card{background:#fff;border:var(--x-b-1);border-radius:var(--x-r-xl);box-shadow:var(--x-sh-1);overflow:hidden;transition:box-shadow var(--x-dur-2) var(--x-ease),transform var(--x-dur-2) var(--x-ease)}
.x-card--flat{box-shadow:none}
.x-card--pad{padding:var(--x-sp-4)}
a.x-card:hover,.x-card--link:hover{box-shadow:var(--x-sh-2);transform:translateY(-2px)}
a.x-card:active,.x-card--link:active{transform:scale(.985)}
.x-tile{background:var(--x-bg-2);border-radius:var(--x-r-lg)}

/* ---------- Rails & grids ---------- */
.x-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--x-gutter) 4px calc(var(--x-gutter));margin-inline:calc(var(--x-gutter) * -1);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.x-rail::-webkit-scrollbar{display:none}
.x-rail > *{flex:0 0 auto;scroll-snap-align:start}
.x-rail--card{width:min(72vw,268px)}
/* En PC los carriles TAMBIEN se deslizan en horizontal (lo pidio el jefe: "que puedan deslizar para
   el lado y ver mas productos"). Antes esta regla ponia overflow:visible + flex-wrap:wrap, o sea que
   la rejilla quedaba FIJA en 4 tarjetas y no habia manera de ver el resto: el deslizar solo existia
   en movil (max-width:639px). Con nowrap + overflow-x se ven 4 y se arrastra para ver mas. */
@media (min-width:1024px){
  .x-rail{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px}
  .x-rail > *{flex:0 0 calc((100% - 36px)/4);width:auto;min-width:0}
}
.x-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){ .x-grid{grid-template-columns:repeat(3,1fr);gap:16px} }
@media (min-width:1024px){ .x-grid{grid-template-columns:repeat(4,1fr)} }
.x-grid--1{grid-template-columns:1fr}
@media (min-width:640px){ .x-grid--1{grid-template-columns:repeat(2,1fr)} }
.x-section{margin-block:var(--x-sp-10)}
.x-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:var(--x-sp-4)}
.x-section__more{font-size:var(--x-fs-13);font-weight:800;color:var(--x-link);white-space:nowrap;padding:8px 10px;border-radius:var(--x-r-full);transition:background var(--x-dur-1)}
.x-section__more:active{background:var(--x-bg-2)}

/* ---------- Skeleton / states ---------- */
.x-skel{background:linear-gradient(90deg,var(--x-bg-2) 25%,#eceef2 50%,var(--x-bg-2) 75%);background-size:200% 100%;animation:x-skel 1.4s var(--x-ease) infinite;border-radius:var(--x-r-md)}
@keyframes x-skel{to{background-position:-200% 0}}
.x-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:var(--x-sp-12) var(--x-sp-4);color:var(--x-ink-3)}
.x-empty__icon{width:72px;height:72px;border-radius:var(--x-r-full);background:var(--x-bg-2);display:grid;place-items:center;color:var(--x-ink-4)}

/* ---------- Utilities ---------- */
[hidden]{display:none !important}
.x-row{display:flex;align-items:center;gap:8px}
.x-between{display:flex;align-items:center;justify-content:space-between;gap:8px}
.x-col{display:flex;flex-direction:column;gap:8px}
.x-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.x-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.x-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.x-hide-mobile{display:none}
@media (min-width:1024px){ .x-hide-mobile{display:revert} .x-hide-desktop{display:none !important} }

/* ============================================================
   XOLLOYA V2 — componentes (cards, score, nav, sheets...)
   ============================================================ */

/* icons */
.x-ic{display:inline-flex;width:20px;height:20px;vertical-align:-3px}
.x-ic svg{width:100%;height:100%}
.x-ic--xs{width:14px;height:14px}.x-ic--sm{width:17px;height:17px}.x-ic--lg{width:26px;height:26px}
.x-sc{color:var(--x-score)}.x-turq{color:var(--x-turq)}.x-red{color:var(--x-red)}
.x-link{color:var(--x-link)}

/* logo & wordmark */
.x-logo{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--ls)/6);width:var(--ls);height:var(--ls);flex:none}
.x-logo i{border-radius:32%}
.x-wordmark{font-size:var(--x-fs-20);font-weight:800;letter-spacing:-.03em}
.x-wordmark span{color:var(--x-purple-ink)}
.x-wordmark--sm{font-size:var(--x-fs-16);font-weight:800;letter-spacing:-.02em}
.x-live{display:inline-flex;align-items:center;gap:6px;font-size:var(--x-fs-12);font-weight:700;color:var(--x-ink-3)}
.x-live i{width:8px;height:8px;border-radius:50%;background:var(--x-green);box-shadow:0 0 0 4px rgba(185,255,56,.25);animation:x-pulse 2.2s infinite}
.x-live--snapshot i{animation:none;box-shadow:none}
@keyframes x-pulse{50%{box-shadow:0 0 0 7px rgba(185,255,56,.08)}}

/* ---------- headers ---------- */
.x-mhead{position:sticky;top:0;z-index:var(--x-z-header);display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--x-gutter);padding-top:calc(10px + var(--x-safe-t));background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:var(--x-b-1)}
@media (min-width:1024px){ .x-mhead{display:none} }
.x-icbtn{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--x-r-full);color:var(--x-ink-2);transition:background var(--x-dur-1),transform var(--x-dur-1)}
.x-icbtn:active{transform:scale(.9)}
.x-icbtn:hover{background:var(--x-bg-2)}
.x-icbtn--solid{background:#fff;box-shadow:var(--x-sh-2)}
.x-icbtn.x-on{color:var(--x-red)}
.x-icbtn.x-on svg{fill:var(--x-red)}

.x-dhead{display:none;border-bottom:var(--x-b-1);background:#fff;position:sticky;top:0;z-index:var(--x-z-header)}
.x-dhead__in{display:flex;align-items:center;gap:26px;height:64px}
.x-dnav{display:flex;gap:2px;align-items:center}
.x-dnav a,.x-dd>button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--x-r-full);font-size:var(--x-fs-14);font-weight:700;color:var(--x-ink-2);transition:background var(--x-dur-1),color var(--x-dur-1)}
.x-dnav a:hover{background:var(--x-bg-2);color:var(--x-ink)}
.x-dnav a.on{background:var(--x-black);color:#fff}
.x-dd{position:relative}
.x-dd__menu{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;background:#fff;border:var(--x-b-1);border-radius:var(--x-r-lg);box-shadow:var(--x-sh-3);padding:6px;
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:all var(--x-dur-2) var(--x-ease);z-index:10}
.x-dd:hover .x-dd__menu,.x-dd:focus-within .x-dd__menu{opacity:1;transform:none;pointer-events:auto}
.x-dd__menu a{display:block;padding:10px 12px;border-radius:var(--x-r-sm);font-weight:600;font-size:var(--x-fs-14)}
.x-dd__menu a:hover{background:var(--x-bg-2)}
.x-dhead__right{margin-left:auto;display:flex;align-items:center;gap:6px}
@media (min-width:1024px){ .x-dhead{display:block} }

/* ---------- bottom nav (la joya de la corona) ---------- */
.x-bnav{position:fixed;bottom:0;left:0;right:0;z-index:var(--x-z-header);display:flex;justify-content:space-around;align-items:stretch;
  height:calc(var(--x-bottom-nav-h) + var(--x-safe-b));padding-bottom:var(--x-safe-b);
  background:rgba(255,255,255,.94);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-top:var(--x-b-1)}
@media (min-width:1024px){ .x-bnav{display:none} }
.x-bnav__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--x-tap);
  font-size:var(--x-fs-11);font-weight:700;color:var(--x-ink-4);position:relative;transition:color var(--x-dur-2)}
.x-bnav__item .x-ic{transition:transform var(--x-dur-2) var(--x-ease-spring)}
.x-bnav__item:active .x-ic{transform:scale(.82)}
.x-bnav__item--on{color:var(--x-ink)}
.x-bnav__item--on .x-ic{transform:translateY(-1px)}
.x-bnav__item--on::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--x-green)}
.x-bnav__item--on span:first-child{color:var(--x-ink)}
.x-bnav__item--center{background:var(--x-black);color:#fff;width:54px;flex:none;border-radius:var(--x-r-full) var(--x-r-full) 0 0;
  margin-top:-14px;height:calc(var(--x-bottom-nav-h));align-self:flex-end;box-shadow:var(--x-sh-3)}
.x-bnav__item--center span{font-size:var(--x-fs-11);font-weight:800}
.x-bnav__item--center .x-ic{width:22px;height:22px}

/* ---------- hero ---------- */
.x-hero{padding-block:20px 8px}
.x-hero .x-h1{margin:4px 0}
.x-hero__sub{color:var(--x-ink-3);font-size:var(--x-fs-14);margin-top:6px;max-width:52ch}
.x-hero-home{padding-block:22px 26px;background:
  radial-gradient(560px 240px at 88% -10%,rgba(124,92,255,.07),transparent),
  radial-gradient(480px 220px at -8% 0%,rgba(24,193,214,.07),transparent)}
.x-hero-home__t{font-size:var(--x-fs-34);font-weight:800;line-height:var(--x-lh-tight);letter-spacing:-.03em;margin:8px 0 10px}
.x-mark{background:linear-gradient(transparent 62%,var(--x-green) 62%)}
.x-hero-home__s{color:var(--x-ink-3);max-width:40ch;font-size:var(--x-fs-14)}
.x-hero-home__search{margin-top:18px;max-width:560px;background:#fff;border:1.5px solid var(--x-line-2);box-shadow:var(--x-sh-2)}
.x-hero-home__strip{display:flex;gap:10px;margin-top:20px;align-items:center}
.x-hstrip__logo{width:34px;height:34px;border-radius:10px;background:#fff;border:var(--x-b-1);display:grid;place-items:center;font-weight:800;color:var(--x-ink-3);font-size:13px}
@media (min-width:640px){ .x-hero-home__t{font-size:var(--x-fs-56)} .x-hero-home__s{font-size:var(--x-fs-16)} }

/* ---------- stars ---------- */
.x-stars{display:flex !important;flex-direction:row !important;gap:1px;width:auto !important;height:14px !important}
.x-stars .x-ic{flex:0 0 auto;width:14px;height:14px}
.x-stars .x-ic svg{width:14px;height:14px;display:block}
.x-stars .on{color:var(--x-orange)}
.x-stars__num{font-weight:800;font-size:var(--x-fs-13);color:var(--x-ink);margin-left:6px}
.x-stars__cnt{font-weight:600;color:var(--x-ink-3)}
.x-review__big{font-size:var(--x-fs-44);font-weight:800;letter-spacing:-.04em}
.x-rdist{display:grid;grid-template-columns:26px 1fr 40px;gap:8px;align-items:center;margin-top:6px;font-size:var(--x-fs-12);color:var(--x-ink-3)}
.x-rdist i{height:8px;border-radius:99px;background:var(--x-bg-2);overflow:hidden}
.x-rdist b{display:block;height:100%;background:var(--x-orange)}
.x-rdist em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.x-review__tools{margin-top:8px;justify-content:space-between}

/* ---------- price ---------- */
.x-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.x-price__cur{font-size:var(--x-fs-18);font-weight:800;letter-spacing:-.02em}
.x-price--big .x-price__cur{font-size:var(--x-fs-34);letter-spacing:-.03em}
.x-price__was{color:var(--x-ink-4);text-decoration:line-through;font-size:var(--x-fs-13);font-weight:600}
@media (min-width:640px){ .x-price--big .x-price__cur{font-size:var(--x-fs-44)} }

/* ---------- recommendation cards (Para ti) ---------- */
.x-reccard{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border:var(--x-b-1);border-radius:var(--x-r-lg);background:#fff;transition:box-shadow var(--x-dur-2),transform var(--x-dur-1)}
.x-reccard:hover{box-shadow:var(--x-sh-2);transform:translateY(-2px)}
.x-reccard:active{transform:scale(.98)}
.x-reccard--wide{width:min(72vw,268px);flex:0 0 auto}
.x-reccard .x-row{width:100%;align-items:center;gap:8px;justify-content:flex-start}
.x-reccard .x-stars{flex:0 0 auto}
.x-reccard .x-num{flex:0 0 auto;margin-left:auto}
.x-reccard b{font-size:var(--x-fs-14);font-weight:700;line-height:var(--x-lh-snug);margin-top:4px}
.x-reccard .x-art{width:100%;height:120px;border-radius:12px;object-fit:cover}

/* ---------- product card ---------- */
.x-pcard{display:block;position:relative;width:100%}
.x-pcard__link{display:block;height:100%;color:inherit;text-decoration:none}
.x-rail .x-pcard{width:min(72vw,268px)}
.x-pcard__media{position:relative;display:block}
.x-pcard__media .x-art{width:100%;height:150px;object-fit:cover}
.x-pcard__off{position:absolute;top:10px;left:10px}
.x-pcard .x-scorechip{position:static}
.x-pcard__body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.x-pcard__brand{font-size:var(--x-fs-11);font-weight:800;letter-spacing:var(--x-ls-caps);text-transform:uppercase;color:var(--x-ink-4)}
.x-pcard__title{font-size:var(--x-fs-14);font-weight:700;line-height:var(--x-lh-snug)}
.x-pcard__rate{margin:2px 0}
.x-pcard__store{font-size:var(--x-fs-12);color:var(--x-ink-3);display:flex;align-items:center;gap:4px}
.x-cardacts{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:6px}
.x-pcard .x-cardacts{top:10px;right:10px}

/* score chip (ring) */
.x-score{position:relative;width:var(--sz);height:var(--sz);display:inline-block}
.x-score__num{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:calc(var(--sz)*.34);letter-spacing:-.03em}
.x-score__arc{transition:stroke-dashoffset var(--x-dur-4) var(--x-ease-out)}
.x-score__label{font-size:var(--x-fs-12);font-weight:800;margin-left:-4px}
.x-score__label span{color:var(--x-purple-ink)}
.x-scorechip{display:grid;place-items:center;min-width:30px;height:30px;padding:0 7px;border-radius:9px;background:#fff;
  font-weight:800;font-size:var(--x-fs-13);color:var(--sc,var(--x-score));box-shadow:var(--x-sh-1);border:1.5px solid var(--sc)}
.x-scorechip::after{content:none}
.x-scorefull{display:flex;flex-direction:column;gap:12px}
.x-scorefull__head{display:flex;gap:12px;align-items:center}
.x-scorebar{display:grid;grid-template-columns:120px 1fr 28px;align-items:center;gap:10px;font-size:var(--x-fs-12);color:var(--x-ink-2);font-weight:600}
.x-scorebar i{height:7px;background:var(--x-bg-2);border-radius:99px;overflow:hidden}
.x-scorebar b{display:block;height:100%;border-radius:99px}
.x-scorebar em{font-style:normal;text-align:right;font-weight:800}
.x-reco{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--x-r-md);border:var(--x-b-1)}
.x-reco p{font-size:var(--x-fs-13);color:var(--x-ink-3);margin-top:2px}
.x-reco--buy{background:var(--x-turq-soft);border-color:transparent}
.x-reco--buy .x-reco__ic{background:var(--x-turq);color:#fff}
.x-reco--wait{background:var(--x-orange-soft);border-color:transparent}
.x-reco--wait .x-reco__ic{background:var(--x-orange);color:#fff}
.x-reco__ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}

/* ---------- deal card ---------- */
.x-dcard{display:flex;gap:0;flex-direction:column;position:relative;width:100%}
.x-rail .x-dcard{width:min(72vw,268px)}
.x-dcard__media{position:relative}
.x-dcard__media .x-art{width:100%;height:132px}
.x-dcard__off{position:absolute;left:10px;top:10px;background:var(--x-green);color:var(--x-green-deep);border-radius:12px;padding:5px 10px;font-weight:800;line-height:1;box-shadow:var(--x-sh-2)}
.x-dcard__off b{font-size:var(--x-fs-18)}.x-dcard__off i{font-style:normal;font-size:var(--x-fs-12)}
.x-dcard__pct{position:absolute;right:10px;top:10px;background:var(--x-black);color:#fff;border-radius:10px;padding:4px 8px;font-weight:800;font-size:var(--x-fs-13);line-height:1;box-shadow:var(--x-sh-2)}
.x-dcard__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px}
.x-dcard__store{display:flex;align-items:center;gap:7px;font-size:var(--x-fs-12);font-weight:700;color:var(--x-ink-3)}
.x-dcard__store .x-dot{width:8px;height:8px;border-radius:50%}
.x-dcard__when{margin-left:auto;font-weight:600}
.x-dcard__title{font-weight:700;font-size:var(--x-fs-14);line-height:var(--x-lh-snug)}
.x-dcard__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.x-dcard__price b{font-size:var(--x-fs-18);font-weight:800;letter-spacing:-.02em}
.x-dcard__price s{color:var(--x-ink-4);font-size:var(--x-fs-12)}
.x-dcard__price em{font-style:normal;font-size:var(--x-fs-11);font-weight:800;color:var(--x-green-deep);background:var(--x-green);padding:2px 8px;border-radius:99px}
.x-dcard__cta{display:flex;align-items:center;gap:4px;font-size:var(--x-fs-13);font-weight:800;color:var(--x-purple-ink);margin-top:4px}

/* compact row */
.x-compact{display:flex;align-items:center;gap:12px;padding:10px;border:var(--x-b-1);border-radius:var(--x-r-lg);background:#fff;transition:box-shadow var(--x-dur-2)}
.x-compact:hover{box-shadow:var(--x-sh-2)}
.x-compact .x-art--sq{width:56px;height:56px;flex:none;border-radius:10px;object-fit:cover;background:var(--x-bg-2)}
.x-compact__info{flex:1;min-width:0}
.x-compact__info b{font-size:var(--x-fs-14)}
.x-compact__go{color:var(--x-ink-4)}

/* ---------- product detail ---------- */
.x-crumbs{font-size:var(--x-fs-12);color:var(--x-ink-3);padding-block:12px}
.x-crumbs ol{display:flex;flex-wrap:wrap;gap:4px}
.x-crumbs i{font-style:normal;opacity:.5;margin-inline:2px}
.x-crumbs a:hover{color:var(--x-ink)}
.x-pd{display:grid;gap:18px;padding-block:6px 22px}
@media (min-width:640px){ .x-pd{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .x-pd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding-block:20px 36px} }
.x-pd__media{position:relative;border-radius:var(--x-r-2xl);overflow:hidden;border:var(--x-b-1)}
.x-pd__media{align-self:start;display:grid;place-items:center;aspect-ratio:1.12;background:var(--x-bg-2)}
.x-pd__media .x-art{display:block;width:100%;height:100%;max-height:none;object-fit:contain}
.x-pd__off{position:absolute;top:12px;left:12px;font-size:var(--x-fs-14);padding:6px 12px}
.x-pd__info{display:flex;flex-direction:column;gap:12px}
.x-pd__info .x-price{margin:14px 0 8px}
.x-pd__info .x-price__cur{font-size:var(--x-fs-44);letter-spacing:-.04em;font-weight:800}
@media (min-width:640px){.x-pd__info .x-price__cur{font-size:var(--x-fs-56)}}
.x-pd__info .x-price__was{font-size:var(--x-fs-16)}
.x-pd__info .x-price .x-badge{font-size:var(--x-fs-14);padding:4px 10px}
.x-pd__best{display:none}
@media (min-width:1024px){.x-pd__best{display:block}}
.x-pd__bestbox{position:sticky;top:84px;background:#fff;border:var(--x-b-1);border-radius:var(--x-r-xl);padding:16px;box-shadow:var(--x-sh-1);display:flex;flex-direction:column;gap:8px}
.x-pd__bestprice{font-size:var(--x-fs-34);font-weight:800;letter-spacing:-.03em}
.x-cols{display:grid;gap:16px}
@media (min-width:640px){.x-cols{grid-template-columns:1fr 1fr;align-items:start}}
.x-pd__modules{margin-top:8px}
.x-pdmod{display:none;padding-block:18px}
.x-pdmod--on{display:block}
@media (max-width:1023px){
  .x-pd__modules [data-x-tabs]{display:none}
  .x-pdmod{display:block;border-top:var(--x-b-1);padding-block:6px 18px}
  .x-pdmod>.x-cols{margin-top:12px}
}
@media (max-width:1023px){
  .x-pdmod:not(.x-pdmod--on){display:none}
  .x-pdmod--on{display:block}
  .x-pd__modules [data-x-tabs]{display:flex}
}
/* móvil: convierte tabs en accordion-like: mostramos todas en stack compacto */
@media (max-width:639px){
  .x-pd__modules [data-x-tabs]{display:flex}
  .x-pdmod{display:none}.x-pdmod--on{display:block}
}
.x-offer{display:flex;align-items:center;gap:12px;padding:12px;border:var(--x-b-1);border-radius:var(--x-r-lg);margin-bottom:10px;background:#fff;flex-wrap:wrap}
.x-offer__logo{width:44px;height:44px;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.x-offer__info{flex:1;min-width:140px;display:flex;flex-direction:column;gap:2px}
.x-offer__price{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.x-offer__price b{font-size:var(--x-fs-18);font-weight:800}
.x-specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.x-spec{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;border:var(--x-b-1);border-radius:var(--x-r-md);font-size:var(--x-fs-13);background:#fff}
.x-spec b{color:var(--x-ink-3);font-weight:600}
.x-pros ul,.x-cons ul{margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:var(--x-fs-14);color:var(--x-ink-2)}
.x-pros li::marker{content:"✓ "}.x-cons li::marker{content:"✗ "}

/* ---------- chart ---------- */
.x-chart{margin:0;border:var(--x-b-1);border-radius:var(--x-r-xl);padding:14px;background:#fff}
.x-chart svg{margin-top:10px}
.x-chart__x{display:flex;justify-content:space-between;font-size:var(--x-fs-11);color:var(--x-ink-4);margin-top:6px}
.x-legend{display:flex;flex-direction:column;gap:8px;margin-top:14px;font-size:var(--x-fs-13);color:var(--x-ink-3)}
.x-legend span{display:flex;align-items:center;gap:8px}

/* ---------- tabs ---------- */
.x-tabs{display:flex;gap:4px;border-bottom:var(--x-b-1);overflow-x:auto;scrollbar-width:none}
.x-tabs::-webkit-scrollbar{display:none}
.x-tab{padding:12px 14px;font-size:var(--x-fs-14);font-weight:700;color:var(--x-ink-3);border-bottom:2.5px solid transparent;white-space:nowrap;transition:color var(--x-dur-1),border-color var(--x-dur-1)}
.x-tab--on{color:var(--x-ink);border-color:var(--x-black)}
.x-tab:hover{color:var(--x-ink)}

/* ---------- coupon ---------- */
.x-coupon{display:flex;flex-direction:column;gap:8px;padding:16px;position:relative;overflow:hidden}
.x-coupon::after{content:"";position:absolute;top:0;bottom:0;left:0;width:5px;background:repeating-linear-gradient(var(--x-purple) 0 6px,transparent 6px 12px)}
.x-coupon__store{font-size:var(--x-fs-12);font-weight:800;color:var(--x-ink-3);letter-spacing:.04em;text-transform:uppercase}
.x-coupon__value{font-size:var(--x-fs-28);font-weight:800;letter-spacing:-.03em;color:var(--x-ink)}
.x-coupon__title{font-size:var(--x-fs-14);font-weight:600;color:var(--x-ink-2);min-height:2.8em}
.x-coupon__code{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1.5px dashed var(--x-line-2);border-radius:var(--x-r-md);padding:8px 8px 8px 12px;background:var(--x-bg-2)}
.x-coupon__code i{font-style:normal;font-weight:800;letter-spacing:.05em;font-size:var(--x-fs-14)}
.x-coupon__meta{font-size:var(--x-fs-11);color:var(--x-ink-4);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.x-copied .x-coupon__code{border-color:var(--x-turq);background:var(--x-turq-soft)}

/* ---------- store / brand / trust ---------- */
.x-storecard{display:flex;align-items:center;gap:12px;padding:14px;flex-wrap:wrap}
.x-storecard__logo{width:48px;height:48px;border-radius:14px;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.x-storecard .x-col{flex:1;min-width:150px}
.x-storehead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:16px 22px;margin-block:8px 0;border-radius:var(--x-r-2xl) var(--x-r-2xl) 0 0}
.x-storehead__logo{width:64px;height:64px;border-radius:18px;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:800;font-size:var(--x-fs-20);box-shadow:var(--x-sh-2)}
.x-storehead .x-h1{font-size:var(--x-fs-28)}
.x-trust{border:var(--x-b-1);border-radius:var(--x-r-xl);padding:16px;background:#fff}
.x-trust__head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.x-trust__head b{display:block}
.x-trust__big{width:64px;height:64px;border-radius:var(--x-r-lg);background:var(--x-bg-2);color:var(--x-turq-ink);display:grid;place-items:center;font-size:var(--x-fs-24);font-weight:800;flex:none}
.x-trust__seg{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:var(--x-fs-12)}
.x-trust__seg b{color:#fff;font-size:10px;padding:3px 6px;border-radius:6px;background:var(--x-turq);display:block;min-width:40px;text-align:center;transition:width var(--x-dur-4)}
.x-trust__seg span{color:var(--x-ink-3)}
.x-brandgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.x-brandgrid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){.x-brandgrid{grid-template-columns:repeat(6,1fr)}}
.x-brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 10px;border:var(--x-b-1);border-radius:var(--x-r-lg);background:#fff;transition:box-shadow var(--x-dur-2),transform var(--x-dur-2)}
.x-brand:hover{box-shadow:var(--x-sh-2);transform:translateY(-2px)}
.x-brand__logo{width:44px;height:44px;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:800;font-size:var(--x-fs-18)}
.x-brand__logo img{display:block;width:100%;height:100%;object-fit:contain;padding:6px;background:#fff;border-radius:inherit}
.x-brand b{font-size:var(--x-fs-13);max-width:100%}

/* ---------- explore ---------- */
.x-explore{position:fixed;inset:0;z-index:var(--x-z-sheet)}
.x-explore__scrim{position:absolute;inset:0;background:rgba(13,13,13,.42);backdrop-filter:blur(2px)}
.x-explore__panel{position:absolute;inset:0;top:52px;background:var(--x-bg);border-radius:var(--x-r-2xl) var(--x-r-2xl) 0 0;padding:18px var(--x-gutter) calc(20px + var(--x-safe-b));overflow-y:auto;animation:x-sheetup var(--x-dur-3) var(--x-ease-out)}
@media (min-width:1024px){.x-explore{display:none}}
@keyframes x-sheetup{from{transform:translateY(36px);opacity:.4}}
.x-explore__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.x-explore__grid{grid-template-columns:repeat(4,1fr)}}
.x-explore__tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 8px;border:var(--x-b-1);border-radius:var(--x-r-xl);background:#fff;font-size:var(--x-fs-14);font-weight:800;transition:transform var(--x-dur-1),box-shadow var(--x-dur-2)}
.x-explore__tile span{width:46px;height:46px;border-radius:14px;background:var(--x-bg-2);display:grid;place-items:center;color:var(--x-ink)}
.x-explore__tile i{font-style:normal;font-size:var(--x-fs-11);color:var(--x-ink-4);font-weight:600;text-align:center}
.x-explore__tile:active{transform:scale(.95)}
.x-explore__tile:hover{box-shadow:var(--x-sh-2)}
.x-explore__cats{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- search overlay ---------- */
.x-sover{position:fixed;inset:0;z-index:var(--x-z-search);background:rgba(255,255,255,.98);animation:x-fade var(--x-dur-2)}
@keyframes x-fade{from{opacity:0}}
.x-sover__in{max-width:680px;margin-inline:auto;padding:calc(10px + var(--x-safe-t)) var(--x-gutter) 0}
.x-sover__bar{display:flex;align-items:center;gap:8px}
.x-sover__input{width:100%;border:0;background:transparent;font-size:var(--x-fs-18);font-weight:600;padding:12px 0}
.x-sover__input:focus{outline:none}
.x-sover__bar::after{content:"";position:absolute;left:var(--x-gutter);right:var(--x-gutter);top:64px;height:1px;background:var(--x-line)}
.x-sover__body{margin-top:18px;max-height:calc(100dvh - 96px);overflow-y:auto}
.x-sover [hidden]{display:none}
.x-sres__group{margin-bottom:20px}
.x-sres__group h4{font-size:var(--x-fs-12);text-transform:uppercase;letter-spacing:var(--x-ls-caps);color:var(--x-ink-4);margin-bottom:8px}
.x-sres__row{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:var(--x-r-md);font-weight:600;transition:background var(--x-dur-1)}
.x-sres__row:hover,.x-sres__row--on{background:var(--x-bg-2)}
.x-sres__row .x-ic{color:var(--x-ink-4)}
.x-sres__meta{margin-left:auto;font-size:var(--x-fs-12);color:var(--x-ink-4)}

/* ---------- sheets ---------- */
.x-sheet{position:fixed;inset:0;z-index:var(--x-z-modal)}
.x-sheet__scrim{position:absolute;inset:0;background:rgba(13,13,13,.45);animation:x-fade var(--x-dur-2)}
.x-sheet__panel{position:absolute;left:0;right:0;bottom:0;max-height:82dvh;overflow-y:auto;background:#fff;border-radius:var(--x-r-2xl) var(--x-r-2xl) 0 0;
  padding:10px var(--x-gutter) calc(18px + var(--x-safe-b));animation:x-sheetup var(--x-dur-3) var(--x-ease-out);box-shadow:var(--x-sh-pop)}
.x-sheet__grab{width:44px;height:5px;border-radius:99px;background:var(--x-line-2);margin:4px auto 12px}
.x-sheet__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.x-sheet__body{display:flex;flex-direction:column;gap:14px}
@media (min-width:1024px){
  .x-sheet__panel{left:50%;right:auto;translate:-50% 0;bottom:auto;top:10dvh;width:min(560px,92vw);border-radius:var(--x-r-2xl);max-height:76dvh}
}

/* ---------- filters ---------- */
.x-offerslayout{display:grid;gap:20px;padding-bottom:26px}
@media (min-width:1024px){ .x-offerslayout{grid-template-columns:250px 1fr} }
.x-offerslayout__side{display:none}
@media (min-width:1024px){ .x-offerslayout__side{display:block;position:sticky;top:84px;align-self:start} }
.x-filters{display:flex;flex-direction:column;gap:14px;background:#fff;border:var(--x-b-1);border-radius:var(--x-r-xl);padding:16px}
.x-rescount{font-size:var(--x-fs-13);color:var(--x-ink-3);margin:0}
.x-fcount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--x-green);color:var(--x-green-deep);font-size:var(--x-fs-11);font-weight:800;margin-left:6px}
.x-filterbar{margin-bottom:12px}

/* ---------- ranking ---------- */
.x-ranklist{display:flex;flex-direction:column;gap:10px}
.x-rank{display:flex;align-items:center;gap:12px;padding:10px 12px;border:var(--x-b-1);border-radius:var(--x-r-xl);background:#fff;transition:box-shadow var(--x-dur-2),transform var(--x-dur-2)}
.x-rank:hover{box-shadow:var(--x-sh-2);transform:translateY(-1px)}
.x-rank__n{width:34px;height:34px;border-radius:12px;background:var(--x-bg-2);display:grid;place-items:center;font-weight:800;font-size:var(--x-fs-14);color:var(--x-ink-2);flex:none}
.x-rank__n[data-r="1"]{background:var(--x-black);color:var(--x-green)}
.x-rank__n[data-r="2"]{background:var(--x-purple);color:#fff}
.x-rank__n[data-r="3"]{background:var(--x-turq);color:#fff}
.x-rank .x-art--sq{width:52px;height:52px;border-radius:10px;flex:none}
.x-rank__info{flex:1;min-width:0;gap:2px}
.x-rank__side{display:flex;align-items:center;gap:20px;flex:none}
.x-rank__side b{font-weight:800}

/* ---------- editorial ---------- */
.x-edu{display:grid;grid-template-columns:1fr;border-radius:var(--x-r-2xl);overflow:hidden;border:var(--x-b-1);background:#fff}
@media (min-width:640px){ .x-edu{grid-template-columns:.9fr 1.1fr} }
.x-edu__art{display:block;min-height:190px;background:#F6F8FC}
.x-edu__art .x-art,.x-edu__img{display:block;width:100%;height:100%;min-height:190px}
.x-edu__img{object-fit:contain;background:#fff;padding:18px}
.x-edu__body{padding:20px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.x-edu:hover{box-shadow:var(--x-sh-3)}

/* category grid/pills */
.x-catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:640px){.x-catgrid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){.x-catgrid{grid-template-columns:repeat(6,1fr)}}
.x-catgrid--full{grid-template-columns:1fr;margin-block:8px 26px}
@media (min-width:640px){.x-catgrid--full{grid-template-columns:1fr 1fr}}
.x-catpill{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:var(--x-r-lg);background:#fff;border:var(--x-b-1);font-weight:800;font-size:var(--x-fs-14);transition:transform var(--x-dur-1),box-shadow var(--x-dur-2)}
.x-catpill:hover{box-shadow:var(--x-sh-2);transform:translateY(-1px)}
.x-catpill .x-ic{color:var(--cc)}
.x-catbig{display:flex;align-items:center;gap:12px;padding:16px;border:var(--x-b-1);border-radius:var(--x-r-xl);background:#fff;transition:box-shadow var(--x-dur-2),transform var(--x-dur-2)}
.x-catbig:hover{box-shadow:var(--x-sh-2);transform:translateY(-2px)}
.x-catbig__ic{width:52px;height:52px;border-radius:16px;background:var(--x-bg-2);display:grid;place-items:center;color:var(--cc)}
.x-catcard{display:flex;align-items:center;gap:10px;padding:12px}
.x-catcard__ic{width:40px;height:40px;border-radius:12px;background:var(--x-bg-2);display:grid;place-items:center;color:var(--cc)}

/* logo row (stores) */
.x-logorow{display:grid;grid-auto-flow:column;grid-auto-columns:92px;gap:10px;overflow-x:auto;padding:6px 0;scrollbar-width:none}
.x-logorow::-webkit-scrollbar{display:none}
/* M4 (auditoría menú/consistencia): aquí vivía una regla de 5 columnas fijas para ≥1024px
   (un @media min-width:1024px que pedía cinco columnas) que estaba MUERTA: refresh.css la anulaba a
   esa misma anchura (la fila «Tiendas con catálogo» es un carrusel, que es lo que pidió el dueño).
   Borrada para no dejar reglas que no hacen nada. */
.x-logotile{position:relative;display:grid;place-items:center;height:76px;border:var(--x-b-1);border-radius:var(--x-r-lg);background:#fff;font-weight:800;color:var(--c);font-size:var(--x-fs-16);transition:box-shadow var(--x-dur-2)}
.x-logotile:hover{box-shadow:var(--x-sh-2)}
.x-logotile__trust{position:absolute;bottom:6px;right:6px;font-style:normal;font-size:10px;font-weight:800;color:var(--x-trust);background:var(--x-trust-bg);border-radius:99px;padding:1px 6px}

/* trust section */
.x-trustsec{display:grid;gap:12px}
@media (min-width:640px){ .x-trustsec{grid-template-columns:repeat(3,1fr)} }
.x-trustsec .x-card{display:flex;flex-direction:column;gap:8px}
.x-tic{width:42px;height:42px;border-radius:13px;background:var(--x-bg-2);display:grid;place-items:center;color:var(--x-ink)}
.x-trustsec b{font-size:var(--x-fs-16)}

/* guide card */
.x-guidecard{display:flex;flex-direction:column;width:100%}
.x-rail .x-guidecard{width:min(80vw,300px)}
.x-guidecard__cover{height:120px;display:grid;place-items:center;background:var(--x-bg-2);color:var(--x-ink-3)}
.x-guidecard__cover[data-cat="tecnologia"]{background:var(--x-turq-soft);color:var(--x-turq-ink)}
.x-guidecard__cover[data-cat="hogar"]{background:#F4FAE9;color:#3E5A0F}
.x-guidecard__cover[data-cat="deporte"]{background:#EDF4FF;color:#1E3A8A}
.x-guidecard__body,.x-guidecard{padding-bottom:0}
.x-guidecard .x-col{padding:12px 14px 16px;gap:4px}

/* travel */
.x-tcard__media{height:110px;background:linear-gradient(135deg,var(--x-turq-soft),#dbe7ff);display:flex;align-items:flex-end;padding:10px;position:relative}
.x-tcard__media b{font-size:var(--x-fs-18);font-weight:800}
.x-tcard__media .x-badge{position:absolute;top:10px;right:10px}
.x-tcard__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px}
.x-tcard__title{font-weight:700;font-size:var(--x-fs-14)}
.x-tcard__body .x-row s{color:var(--x-ink-4);font-size:var(--x-fs-12)}

/* compare */
.x-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin:8px 0 4px}
.x-vs__mid{align-self:center;font-weight:800;color:var(--x-ink-4);font-size:var(--x-fs-12)}
.x-vs__side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:12px;border:var(--x-b-1);border-radius:var(--x-r-xl);background:#fff}
.x-vs__side .x-art--sm{width:96px;height:70px;border-radius:12px}
.x-vs__side b{font-size:var(--x-fs-13);line-height:1.3}
.x-vs__side i{font-style:normal;font-size:var(--x-fs-11);color:var(--x-ink-4);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.x-vsmark{color:var(--x-purple);font-size:.6em;vertical-align:middle}
.x-vsrow{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:10px 0;border-bottom:var(--x-b-1);font-size:var(--x-fs-14)}
.x-vsrow:last-child{border-bottom:0}
.x-vsrow .x-num{font-weight:800;width:36px;text-align:center;border-radius:8px;padding:3px 0;background:var(--x-bg-2)}
.x-vsrow--win-a .x-num:first-child,.x-vsrow--win-b .x-num:last-child{background:var(--x-green);color:var(--x-green-deep)}
.x-vsrow__label{flex:1;text-align:center;font-weight:600;color:var(--x-ink-2);font-size:var(--x-fs-13)}
.x-vsprice{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:14px;text-align:center}
.x-vsprice>div{display:flex;flex-direction:column;gap:2px}
.x-vsprice b{font-size:var(--x-fs-20);font-weight:800}
.x-verdict{padding:18px}
.x-verdict__win{display:flex;gap:14px;align-items:center;background:var(--x-bg-2);border-radius:var(--x-r-xl);padding:14px}
.x-verdict__win .x-art--win{width:84px;height:62px;border-radius:12px;flex:none}
.x-verdict__win>span{display:flex;flex-direction:column;gap:4px}
.x-verdict__win b{font-size:var(--x-fs-16)}
.x-verdict__cols{display:grid;gap:14px;margin-top:16px}
@media (min-width:640px){ .x-verdict__cols{grid-template-columns:1fr 1fr} }
.x-vsmini{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px;border:var(--x-b-1);border-radius:var(--x-r-lg);background:#fff;font-size:var(--x-fs-13)}
.x-vsmini b{color:var(--x-purple);font-size:var(--x-fs-16)}
.x-vsmini i{font-style:normal;color:var(--x-ink-3);font-size:var(--x-fs-12)}
.x-battle{gap:10px}
.x-battle .x-row .x-art--sq{width:44px;height:44px;border-radius:10px}
.x-comparebar{position:fixed;left:12px;right:12px;bottom:calc(var(--x-bottom-nav-h) + var(--x-safe-b) + 10px);z-index:var(--x-z-sticky);
  display:flex;align-items:center;gap:10px;background:var(--x-black);color:#fff;border-radius:var(--x-r-full);padding:8px 10px 8px 16px;box-shadow:var(--x-sh-4);
  animation:x-sheetup var(--x-dur-3) var(--x-ease-out)}
.x-comparebar b{font-size:var(--x-fs-13);flex:none}
.x-comparebar i{font-style:normal}
.x-comparebar #x-compare-slots{display:flex;gap:0;flex:1}
.x-comparebar .x-slot{width:26px;height:26px;border-radius:50%;background:var(--x-bg-3);display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--x-green-deep);border:2px solid var(--x-black)}
@media (min-width:1024px){ .x-comparebar{left:auto;right:28px;width:420px;bottom:28px} }

/* saved / guardados panes */
.x-guard__pane{display:none;padding-top:18px}.x-guard__pane--on{display:block}
.x-vj__pane{display:none;padding-top:18px}.x-vj__pane--on{display:block}

/* profile */
.x-avatar{width:56px;height:56px;border-radius:var(--x-r-full);background:var(--x-purple);color:#fff;display:grid;place-items:center;font-weight:800;font-size:var(--x-fs-22);flex:none}
.x-pic{width:36px;height:36px;border-radius:11px;background:var(--x-bg-2);display:grid;place-items:center;color:var(--x-ink)}
.x-profile .x-card--pad.x-row{align-items:center}

/* misc */
.x-acc{border:var(--x-b-1);border-radius:var(--x-r-lg);margin-top:10px;background:#fff}
.x-acc summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;font-weight:700;font-size:var(--x-fs-14);cursor:pointer;list-style:none}
.x-acc summary::-webkit-details-marker{display:none}
.x-acc summary .x-ic{transition:transform var(--x-dur-2)}
.x-acc[open] summary .x-ic{transform:rotate(180deg)}
.x-acc__body{padding:0 16px 16px}
.x-pages{display:flex;gap:6px;justify-content:center;margin-top:24px}
.x-page{min-width:40px;height:40px;display:grid;place-items:center;border:var(--x-b-1);border-radius:12px;font-weight:700;font-size:var(--x-fs-14);background:#fff;transition:all var(--x-dur-1)}
.x-page:hover{border-color:var(--x-ink)}
.x-page--on{background:var(--x-black);color:#fff;border-color:var(--x-black)}
.x-page--off{opacity:.4}
.x-page__dots{align-self:center;color:var(--x-ink-4)}
.x-toasts{position:fixed;left:0;right:0;bottom:calc(var(--x-bottom-nav-h) + var(--x-safe-b) + 18px);z-index:var(--x-z-toast);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
@media (min-width:1024px){ .x-toasts{bottom:28px} }
.x-toast{background:var(--x-black);color:#fff;font-size:var(--x-fs-13);font-weight:700;padding:11px 18px;border-radius:var(--x-r-full);box-shadow:var(--x-sh-4);
  animation:x-toastin var(--x-dur-3) var(--x-ease-out);display:flex;align-items:center;gap:8px}
.x-toast .x-ic{color:var(--x-green)}
@keyframes x-toastin{from{transform:translateY(14px);opacity:0}}
.x-toast.x-out{animation:x-toastout var(--x-dur-2) forwards}
@keyframes x-toastout{to{transform:translateY(10px);opacity:0}}
.x-consent{position:fixed;z-index:130;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:calc(var(--x-bottom-nav-h) + var(--x-safe-b) + 16px);max-width:680px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--x-line);border-radius:var(--x-r-xl);background:rgba(255,255,255,.98);box-shadow:var(--x-sh-4)}
.x-consent p{margin:4px 0 0;font-size:var(--x-fs-13);color:var(--x-ink-3);line-height:1.4}.x-consent__actions{display:flex;gap:8px;flex-shrink:0}.x-foot__link{padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}@media (min-width:1024px){.x-consent{bottom:22px}}@media (max-width:620px){.x-consent{left:14px;right:auto;width:calc(100% - 28px);box-sizing:border-box;align-items:flex-start;flex-direction:column;gap:10px;padding:14px}.x-consent p{font-size:12px;line-height:1.35}.x-consent__actions{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}.x-consent__actions .x-btn{width:100%;min-width:0;padding:10px 6px;font-size:12px;white-space:normal;line-height:1.15}}
.x-legal p{max-width:65ch}
.x-legend,.x-rankmini{font-size:var(--x-fs-12)}
.x-rankmini{font-style:normal;background:var(--x-bg-2);border-radius:8px;padding:4px 8px;color:var(--x-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;display:inline-block}
.x-rankhero{position:relative;display:flex;gap:14px;align-items:center;padding:18px;flex-wrap:wrap}
.x-rankhero .x-col{flex:1;min-width:220px;gap:4px}
.x-rankhero b{font-size:var(--x-fs-18);font-weight:800;letter-spacing:-.02em}
.x-rankhero__n{position:absolute;top:-12px;left:-6px;width:36px;height:36px;border-radius:12px;background:var(--x-score);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:var(--x-sh-2)}
.x-article__head{padding-block:18px}
.x-article__head .x-h1{margin:6px 0}
.x-slab{padding-block:14px;border-top:var(--x-b-1)}
.x-reccard{display:flex;align-items:center;gap:12px;padding:14px;border:var(--x-b-1);border-radius:var(--x-r-lg);background:#fff;transition:box-shadow var(--x-dur-2)}
.x-reccard:hover{box-shadow:var(--x-sh-2)}
.x-reccard > span:not(.x-stars):not(.x-row):not(.x-ic){flex:1;min-width:0;display:flex;flex-direction:column}
.x-reccard span span{font-size:var(--x-fs-12);color:var(--x-ink-3)}
.x-reccard__ic{width:36px;height:36px;border-radius:11px;background:var(--x-purple-soft);color:var(--x-purple-ink);display:grid;place-items:center;flex:none}
.x-alertcard{padding:14px}
.x-dsk{display:none}@media (min-width:1024px){.x-dsk{display:block}}
.x-storeglyph{width:30px;height:30px;border-radius:9px;background:var(--c);color:#fff;display:inline-grid;place-items:center;font-size:var(--x-fs-11);font-weight:800;flex:none}

/* footer */
.x-foot{background:var(--x-black);color:#fff;margin-top:40px}
.x-foot__cols{display:grid;gap:26px;padding-block:34px 22px}
@media (min-width:640px){.x-foot__cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.x-foot__cols{grid-template-columns:1.4fr repeat(4,1fr)}}
.x-foot__cols b{display:block;font-size:var(--x-fs-12);text-transform:uppercase;letter-spacing:var(--x-ls-caps);color:var(--x-green);margin-bottom:10px}
.x-foot__cols a{display:block;font-size:var(--x-fs-14);color:rgba(255,255,255,.75);padding:8px 0}
.x-foot__cols a:hover{color:#fff}
.x-foot .x-meta{color:rgba(255,255,255,.6)}
.x-foot .x-wordmark{color:#fff}
.x-foot__bar{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-block:16px 22px;font-size:var(--x-fs-12);color:rgba(255,255,255,.55)}
.x-foot__bar a{color:rgba(255,255,255,.75)}
.x-foot__bar a:hover{color:var(--x-green)}

/* offline banner (PWA) */
.x-offline{display:none;position:fixed;top:0;left:0;right:0;z-index:120;background:var(--x-orange);color:#fff;text-align:center;font-size:var(--x-fs-12);font-weight:800;padding:6px;animation:x-fade .3s}
body.x-is-offline .x-offline{display:block}

/* [hidden] gana SIEMPRE (los !important de aquí van al final de la cascata del bundle) */
[hidden]{display:none !important}
.x-comparebar[hidden]{display:none !important}

/* rails: que se perciba que hay más contenido a la derecha (fade solo-derecha) */
.x-rail{mask-image:linear-gradient(to right, black calc(100% - 26px), transparent)}
@supports not (mask-image:linear-gradient(black,white)){ .x-rail{-webkit-mask-image:linear-gradient(to right, black calc(100% - 26px), transparent)} }

/* page transitions suaves (app-like) */
@keyframes x-pagein{from{opacity:0;transform:translateY(6px)}}
.x-main{animation:x-pagein .28s var(--x-ease-out)}

/* art base */
.x-art{width:100%;height:100%}

/* Shared UI corrections — September 2026 */
.x-catalog-page{padding-block:24px}

.x-catalog-filters .x-field>span{font-weight:700;font-size:13px}
#catalog-status{margin:16px 0}
.x-catalog-pages{justify-content:center;margin-top:28px;gap:20px}
.x-catalog-pages button:disabled{opacity:.4;cursor:default}
.x-live-card{display:flex;flex-direction:column;height:100%}
.x-live-link{display:flex;flex-direction:column;flex:1;min-width:0}
.x-live-actions{display:flex;justify-content:space-between;gap:6px;padding:0 14px 16px;flex-wrap:wrap}
.x-catalog-image{display:block;width:100%;height:190px;object-fit:contain;background:#fff;padding:16px}
/* Si la foto remota del producto NO carga (URL caducada: ~2% de las 170.302 del catalogo), se pone el
   mismo aviso discreto que cuando el producto no tiene imagen, en vez de un hueco en blanco o un icono
   roto. OJO: aqui se probo a poner el DIBUJO de colores de respaldo (artFor) y en las secciones de
   productos importados quedaba enorme y feo (lo reporto el jefe: "etiquetas de colores gigantes").
   Retirado. El respaldo dibujado se queda solo donde ya estaba de antes (fichas sin foto). */
.x-pcard__media--noimg::after{content:"Imagen no disponible";display:grid;place-items:center;width:100%;height:190px;border-radius:12px;background:var(--x-bg-2);color:var(--x-ink-3);font-size:13px;text-align:center;padding:16px}
.x-imported-media .x-catalog-image{height:100%;max-height:520px}
.x-image-empty{display:grid;place-items:center;min-height:190px;color:var(--x-ink-3);background:var(--x-bg-2);font-size:13px;padding:20px;text-align:center}
.x-imported-specs{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;margin-bottom:0;font-size:14px}
.x-imported-specs dd{margin:0;overflow-wrap:anywhere}
.x-imported-specs dt{font-weight:700}
@media(max-width:639px){.x-catalog-filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px;gap:12px}.x-catalog-filters>.x-field:first-child{grid-column:1/-1}.x-catalog-image{height:160px}.x-imported-specs{grid-template-columns:80px minmax(0,1fr)}}
.x-ranking-article{max-width:1120px}.x-ranking-updated{margin-top:14px}.x-article-index{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0;padding:16px 18px;border:1px solid var(--x-line);border-radius:16px;background:#fff}.x-article-index a{color:var(--x-purple-ink);font-weight:700}.x-editorial-intro{max-width:800px}.x-editorial-intro .x-body+.x-body{margin-top:12px}.x-table-scroll{overflow-x:auto;border:1px solid var(--x-line);border-radius:16px}.x-table-scroll .x-compare-table{margin:0;min-width:720px}.x-editorial-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.x-editorial-products .x-btn{margin-top:14px}.x-editorial-criteria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.x-editorial-criteria>div{padding:16px;background:#fff;border:1px solid var(--x-line);border-radius:14px}.x-editorial-criteria .x-body{margin-top:6px}
@media(max-width:639px){.x-article-index{align-items:flex-start;flex-direction:column}.x-editorial-products,.x-editorial-criteria{grid-template-columns:1fr}.x-ranking-article .x-section{margin-top:38px}}
.x-product-editorial{max-width:900px}.x-product-editorial .x-body{margin-top:14px;line-height:1.75}
.x-slab{padding-block:24px 30px}.x-slab>.x-h2{margin-bottom:18px}.x-slab>.x-editorial-criteria{margin-top:0}.x-slab .x-editorial-criteria>div{padding:18px}.x-slab .x-editorial-criteria>div>b{display:block;line-height:1.35}.x-slab .x-editorial-criteria .x-body{margin-top:9px;line-height:1.58}
.x-product-checks{margin-top:clamp(56px,7vw,82px)!important;padding:clamp(24px,3vw,34px)!important;border:1px solid #e5ddff!important;border-radius:24px;background:linear-gradient(135deg,#f6f3ff,#fff)}.x-product-checks__intro{max-width:620px;margin:-6px 0 20px;color:var(--x-ink-3);line-height:1.55}.x-product-actions{display:flex;gap:10px;flex-wrap:wrap}.x-product-actions .x-btn{justify-content:center}@media(max-width:639px){.x-product-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.x-product-actions .x-btn{min-width:0;padding-inline:9px;font-size:12px}.x-product-actions .x-btn:last-child{grid-column:1/-1}.x-product-checks{margin-top:58px!important;border-radius:20px}.x-product-checks .x-editorial-criteria{gap:12px}.x-product-checks .x-editorial-criteria>div{padding:16px}}
.x-pd--imported .x-pd__info{align-self:start}.x-imported-title{max-width:19ch;font-size:clamp(30px,3.25vw,52px);line-height:1.08;letter-spacing:-.04em;overflow-wrap:anywhere}.x-pd--imported .x-price{margin-top:22px}.x-pd--imported .x-pd__info>.x-body{margin-top:20px}.x-pd--imported .x-pd__info>.x-meta{max-width:54ch;line-height:1.6}.x-pd--imported .x-pd__info>.x-btn{width:100%;justify-content:center;margin-top:18px}.x-pd--imported .x-pd__info>.x-row{margin-top:10px;gap:8px}.x-pd--imported .x-pd__info>.x-row .x-btn{flex:1;justify-content:center;min-width:min(100%,180px)}@media(max-width:767px){.x-imported-title{max-width:none;font-size:clamp(28px,8vw,38px)}.x-pd--imported .x-pd__info>.x-row .x-btn{min-width:0}}
/* Second visual pass: rankings, stores, coupons and consistent card rhythm. */
@keyframes x-rise{from{transform:translateY(5px)}to{transform:translateY(0)}}
.x-foot__cols a.x-row{display:flex;align-items:center;gap:10px}
.x-foot__cols .x-wordmark{font-size:22px;letter-spacing:-.03em;text-transform:none;margin:0;color:#fff}
.x-foot__cols .x-wordmark span{color:var(--x-green)}
.x-store-sidebar .x-spec{grid-template-columns:100px minmax(0,1fr);gap:12px;line-height:1.6}
.x-store-sidebar .x-spec span{overflow-wrap:anywhere}
.x-store-content>.x-row{padding-top:10px}
.x-alert-welcome{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:32px}
.x-alert-welcome>div{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.x-alert-symbol{display:grid;place-items:center;background:var(--x-purple-soft);color:var(--x-purple-ink);width:58px;height:58px;border-radius:18px;margin-bottom:4px}
.x-alert-actions{display:flex;flex-wrap:wrap;gap:10px;margin-block:8px}
.x-alert-steps{display:flex;flex-direction:column;gap:26px;margin:0;padding:28px;list-style:none;border:var(--x-b-1);border-radius:24px;background:var(--x-bg-2)}
.x-alert-steps li{display:flex;gap:14px;align-items:flex-start}
.x-alert-steps li>span{display:grid;place-items:center;width:30px;height:30px;background:#fff;border-radius:10px;font-weight:800;flex:none;color:var(--x-purple-ink)}
.x-alert-steps p{font-size:13px;color:var(--x-ink-3);margin-top:5px}
.x-alert-preview{max-width:640px;margin-top:20px;border-top:var(--x-b-1);padding-top:20px}
.x-alert-preview summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;list-style:none;font-size:14px;font-weight:700;padding-block:12px}
.x-alert-preview[open] summary>.x-ic{transform:rotate(180deg)}
.x-alert-preview #x-alert-form{margin-top:12px;padding:24px}
@media(max-width:767px){.x-alert-welcome{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:18px}.x-alert-steps{padding:20px;gap:20px}.x-alert-preview #x-alert-form{padding:18px}}
.x-main{padding-bottom:48px}
.x-main>.x-hero,.x-pagehead>.x-hero{padding-block:28px 24px}
.x-main>.x-hero .x-hero__sub{max-width:65ch;line-height:1.7}
.x-ranking-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.x-rankhero{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;flex-wrap:nowrap}
.x-ranking-art{display:block;background:var(--x-bg-2);height:180px;padding:16px}
.x-ranking-art .x-art{width:100%;height:100%;object-fit:contain}
.x-ranking-art .x-editorial-cover{display:block;width:100%;height:100%;border-radius:14px;object-fit:cover}
.x-ranking-hero-image{display:block;overflow:hidden;margin:24px 0 20px;border:1px solid var(--x-line);border-radius:22px;background:var(--x-bg-2)}
.x-ranking-hero-image img{display:block;width:100%;height:clamp(180px,31vw,330px);object-fit:cover}
.x-ranking-hero-image figcaption{padding:9px 14px;color:var(--x-ink-3);font-size:12px}
.x-guide-hero-image{display:block;overflow:hidden;margin:24px 0 2px;border:1px solid var(--x-line);border-radius:22px;background:var(--x-bg-2)}
.x-guide-hero-image img{display:block;width:100%;height:clamp(180px,31vw,330px);object-fit:cover}.x-guide-hero-image figcaption{padding:9px 14px;color:var(--x-ink-3);font-size:12px}
.x-guidecard__cover{overflow:hidden;height:auto;aspect-ratio:3/2}.x-guidecard__cover img{display:block;width:100%;height:100%;object-fit:cover}

/* Artículos editoriales: ritmo de lectura, decisión práctica y móvil sin cortes. */
.x-article,.x-ranking-article{overflow-x:clip}.x-article__head{padding-top:28px;padding-bottom:18px}.x-article-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);align-items:center;gap:clamp(24px,5vw,72px);max-width:1120px}.x-article-hero>div{min-width:0}.x-article-hero .x-h1{max-width:720px;margin:9px 0 15px;font-size:clamp(34px,4.15vw,58px);line-height:1.02;letter-spacing:-.05em;overflow-wrap:anywhere}.x-article-hero .x-hero__sub{max-width:650px;font-size:16px;line-height:1.62}.x-article-hero__meta{display:flex;gap:8px 14px;flex-wrap:wrap;margin-top:20px;color:var(--x-ink-3);font-size:12px;font-weight:700}.x-article-hero__meta span{display:inline-flex;align-items:center;gap:5px}.x-article-hero__meta .x-ic{color:var(--x-purple);width:15px;height:15px}.x-article-hero .x-guide-hero-image{width:100%;margin:0;border-radius:24px;box-shadow:var(--x-sh-2)}.x-article-hero .x-guide-hero-image img{height:clamp(240px,28vw,350px)}.x-guide-index{margin-top:14px}.x-guide-decision{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:26px;margin-top:26px;padding:clamp(22px,3.2vw,38px);border:1px solid #e5ddff;border-radius:26px;background:#f6f3ff}.x-guide-decision .x-h2{max-width:430px;margin:8px 0 12px;font-size:clamp(25px,3vw,38px);letter-spacing:-.04em}.x-guide-decision .x-body{max-width:465px;line-height:1.62}.x-guide-decision__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.x-guide-decision__steps section{padding:14px;border:1px solid #e5ddff;border-radius:16px;background:rgba(255,255,255,.88)}.x-guide-decision__steps span{display:block;margin-bottom:18px;color:var(--x-purple-ink);font-size:11px;font-weight:800;letter-spacing:.08em}.x-guide-decision__steps h3{font-size:14px;line-height:1.25}.x-guide-decision__steps p{margin-top:7px;color:var(--x-ink-3);font-size:12px;line-height:1.5}.x-guide-content{max-width:920px;margin-top:clamp(44px,6vw,78px)}.x-guide-section{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:clamp(16px,3vw,34px);padding:0 0 clamp(36px,5vw,66px)}.x-guide-section::before{content:"";position:absolute;top:54px;bottom:0;left:21px;width:1px;background:var(--x-line)}.x-guide-section:last-child::before{display:none}.x-guide-section__number{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--x-black);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em}.x-guide-section .x-h2{max-width:730px;margin:6px 0 10px;font-size:clamp(24px,2.65vw,35px);letter-spacing:-.04em;overflow-wrap:anywhere}.x-guide-section .x-body{max-width:720px;font-size:16px;line-height:1.72}.x-guide-tip{display:flex;align-items:flex-start;gap:10px;max-width:640px;margin-top:20px;padding:14px 16px;border-radius:16px;background:#f5fbec;color:var(--x-ink-2)}.x-guide-tip .x-ic{margin-top:1px;color:#557a13}.x-guide-tip span{display:grid;gap:3px}.x-guide-tip b{font-size:13px}.x-guide-tip small{font-size:12px;line-height:1.5}.x-guide-product-pair{display:grid;gap:7px;max-width:620px;margin-top:22px;padding:15px;border:1px solid var(--x-line);border-radius:18px;background:#fff}.x-guide-product-pair>a{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border-radius:11px}.x-guide-product-pair>a:hover{background:var(--x-bg-2)}.x-guide-product-pair .x-art{width:38px;height:38px;padding:4px}.x-guide-product-pair span{display:grid;gap:2px;min-width:0}.x-guide-product-pair b{font-size:13px;line-height:1.25}.x-guide-product-pair small{color:var(--x-ink-3);font-size:11px}.x-guide-product-pair .x-ic{color:var(--x-purple-ink)}.x-guide-checklist{display:grid;grid-template-columns:minmax(0,.75fr) minmax(280px,1fr);gap:28px;align-items:center;max-width:1120px;margin-top:4px;padding:clamp(24px,3.5vw,42px);border-radius:26px;background:#111117;color:#fff}.x-guide-checklist .x-kicker{color:#ccc7d8}.x-guide-checklist .x-h2{margin:8px 0 10px;font-size:clamp(25px,2.8vw,36px);letter-spacing:-.04em}.x-guide-checklist .x-body{color:#d0cdd6;line-height:1.58}.x-guide-checklist ul{display:grid;gap:9px}.x-guide-checklist li{display:flex;align-items:flex-start;gap:9px;padding:12px;border:1px solid #343440;border-radius:14px;background:#1b1b23;color:#efedf3;font-size:13px;line-height:1.45}.x-guide-checklist .x-ic{flex:none;color:var(--x-green);width:17px;height:17px}.x-guide-ranking-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;margin-top:18px;padding:14px 18px;border:1px solid #e5ddff;border-radius:16px;background:#f6f3ff;color:var(--x-purple-ink);font-size:14px;font-weight:800;text-align:center}.x-guide-ranking-link .x-ic{width:17px;height:17px}
@media(max-width:1023px){.x-article__head{padding-top:20px}.x-article-hero{grid-template-columns:1fr;gap:20px}.x-article-hero .x-h1{font-size:clamp(30px,6vw,43px);letter-spacing:-.055em}.x-article-hero .x-hero__sub{font-size:15px;overflow-wrap:anywhere}.x-article-hero .x-guide-hero-image img{height:220px}.x-guide-decision{grid-template-columns:1fr;padding:22px;border-radius:22px}.x-guide-decision__steps{grid-template-columns:1fr}.x-guide-decision__steps section{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px}.x-guide-decision__steps span{margin:2px 0 0}.x-guide-decision__steps h3{margin-top:0}.x-guide-decision__steps p{grid-column:2;margin-top:4px}.x-guide-content{margin-top:48px}.x-guide-section{grid-template-columns:48px minmax(0,1fr);gap:12px;padding-bottom:42px}.x-guide-section::before{top:46px;left:20px}.x-guide-section__number{width:40px;height:40px;border-radius:12px;font-size:11px}.x-guide-section .x-h2{font-size:25px;line-height:1.1}.x-guide-section .x-body{font-size:15px;line-height:1.66}.x-guide-checklist{grid-template-columns:1fr;gap:18px;margin-top:0;padding:24px;border-radius:22px}.x-guide-ranking-link{font-size:13px}.x-article .x-card{min-width:0}}

.x-ranking-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.62fr);gap:clamp(24px,5vw,70px);align-items:end}.x-ranking-top>div{min-width:0}.x-ranking-top .x-h1{max-width:760px;margin:8px 0 14px;font-size:clamp(36px,4.2vw,60px);line-height:1.02;letter-spacing:-.052em;overflow-wrap:anywhere}.x-ranking-top .x-hero__sub{max-width:720px;font-size:16px;line-height:1.6}.x-ranking-summary{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:18px;border:1px solid #e5ddff;border-radius:20px;background:#f6f3ff}.x-ranking-summary>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#fff;color:var(--x-purple-ink)}.x-ranking-summary>div{display:grid;gap:5px}.x-ranking-summary b{font-size:14px;line-height:1.3}.x-ranking-summary p{color:var(--x-ink-3);font-size:12px;line-height:1.52}.x-ranking-summary ul{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.x-ranking-summary li{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border-radius:999px;background:#fff;color:var(--x-ink-2);font-size:10px;font-weight:700}.x-ranking-summary li .x-ic{width:12px;height:12px;color:var(--x-purple)}.x-ranking-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px;margin-top:28px}.x-ranking-paths>a{position:relative;display:grid;gap:5px;min-height:148px;padding:17px;border:1px solid var(--x-line);border-radius:18px;background:#fff}.x-ranking-paths>a:hover{border-color:#cfc5ff;box-shadow:var(--x-sh-2);transform:translateY(-2px)}.x-ranking-paths>a>span{display:grid;place-items:center;width:35px;height:35px;margin-bottom:5px;border-radius:11px;background:var(--x-purple-soft);color:var(--x-purple-ink)}.x-ranking-paths>a:nth-child(2)>span{background:#f5fbec;color:#5a7c15}.x-ranking-paths>a:nth-child(3)>span{background:#e6f9fb;color:#007d8c}.x-ranking-paths b{font-size:14px}.x-ranking-paths small{max-width:22ch;color:var(--x-ink-3);font-size:11px;line-height:1.45}.x-ranking-paths>a>.x-ic{position:absolute;right:14px;bottom:14px;width:15px;height:15px;color:var(--x-purple-ink)}.x-ranking-analysis-intro{max-width:680px;margin:7px 0 18px;line-height:1.58}.x-editorial-products--rich{grid-template-columns:repeat(2,minmax(0,1fr))}.x-editorial-product-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:16px;border:1px solid var(--x-line);border-radius:20px;background:#fff}.x-editorial-product-card__art{display:grid;place-items:center;align-self:start;min-height:112px;border-radius:14px;background:var(--x-bg-2);overflow:hidden}.x-editorial-product-card__art .x-art{width:100%;height:112px;object-fit:contain}.x-editorial-product-card>div{display:grid;align-content:start;gap:8px;min-width:0}.x-editorial-product-card h3{font-size:16px;line-height:1.28}.x-editorial-product-card p:not(.x-kicker){color:var(--x-ink-2);font-size:13px;line-height:1.55}.x-editorial-product-card ul{display:grid;gap:5px}.x-editorial-product-card li{display:flex;align-items:flex-start;gap:5px;color:var(--x-ink-3);font-size:11px;line-height:1.4}.x-editorial-product-card li .x-ic{flex:none;width:13px;height:13px;color:#638917}.x-editorial-product-card .x-btn{justify-self:start;margin-top:3px}.x-editorial-product-card .x-btn .x-ic{width:13px;height:13px}
@media(max-width:1023px){.x-ranking-top{grid-template-columns:1fr;gap:18px}.x-ranking-top .x-h1{font-size:clamp(30px,6vw,43px);letter-spacing:-.055em}.x-ranking-top .x-hero__sub{font-size:15px;overflow-wrap:anywhere}.x-ranking-summary{padding:16px}.x-ranking-paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}.x-ranking-paths>a{min-height:155px;padding:13px}.x-ranking-paths small{font-size:10px}.x-editorial-products--rich{grid-template-columns:1fr}.x-editorial-product-card{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:13px}.x-editorial-product-card__art,.x-editorial-product-card__art .x-art{min-height:84px;height:84px}.x-editorial-product-card h3{font-size:15px}.x-editorial-product-card p:not(.x-kicker){font-size:12px}.x-ranking-article .x-ranking-hero-image{margin-top:20px}}
.x-brand__logo--fallback{background:#f2eeff!important;color:var(--x-purple-ink)!important;border:1px solid #e5ddff;font-size:12px!important;font-weight:800;letter-spacing:.06em}
.x-brand__logo--wordmark{background:#fff!important;border:1px solid #e5ddff;overflow:hidden}
.x-brand__logo--wordmark img{padding:0!important;background:transparent!important}
.x-empty--saved{margin:24px 0 6px;padding:28px 20px;border:1px solid var(--x-line);border-radius:20px;background:linear-gradient(135deg,#fff 0%,#f8f6ff 100%);color:var(--x-ink)}
.x-empty--saved .x-empty__icon{width:60px;height:60px;background:var(--x-purple-soft);color:var(--x-purple-ink)}
.x-empty--saved .x-body{max-width:460px;color:var(--x-ink-3);line-height:1.55}
.x-empty__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:4px}
.x-saved-card{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:14px;color:inherit;text-decoration:none}
.x-saved-card__media{display:grid;place-items:center;width:76px;height:76px;overflow:hidden;border:1px solid var(--x-line);border-radius:14px;background:#fff}
.x-saved-card__media img{display:block;width:100%;height:100%;object-fit:contain;padding:6px}
.x-saved-card+.x-btn{align-self:flex-start;margin-top:4px}
#x-saved-products{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:639px){#x-saved-products{grid-template-columns:1fr}}
.x-install{max-width:1120px}.x-install__hero{max-width:760px;padding:26px 0 34px}.x-install__hero .x-btn{margin-top:22px}.x-install__hero .x-meta{margin-top:12px}.x-install__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.x-install__steps .x-card{position:relative;padding-top:58px}.x-install__steps .x-h3{margin-bottom:10px}.x-install__number{position:absolute;top:18px;left:18px;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--x-purple-soft);color:var(--x-purple-ink);font-weight:800}.x-install__benefits{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-top:26px}.x-install__benefits>div:first-child{max-width:650px}@media(max-width:767px){.x-install__steps{grid-template-columns:1fr}.x-install__benefits{align-items:flex-start;flex-direction:column}.x-install__benefits .x-btn{width:100%;justify-content:center}}
.x-ranking-body{display:flex;flex-direction:column;align-items:stretch;padding:24px;gap:12px;flex:1;min-width:0}
.x-ranking-eyebrow{color:var(--x-purple-ink);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.x-ranking-body>b{font-size:21px;line-height:1.35}
.x-ranking-body>.x-meta{line-height:1.65}
.x-ranking-podium{display:flex;flex-direction:column;gap:10px;margin:6px 0 12px}
.x-ranking-podium>span{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px}
.x-ranking-podium i{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:8px;background:var(--x-purple-soft);color:var(--x-purple-ink);font-style:normal;font-weight:800}
.x-ranking-podium>span>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x-ranking-cta{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:var(--x-b-1);font-weight:800;font-size:14px;margin-top:auto}
.x-store-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.x-store-directory .x-storecard{padding:24px;gap:16px;min-width:0}
.x-storecard .x-col{min-width:0;gap:8px}
.x-storecard .x-col>b{font-size:17px}
.x-store-directory .x-storecard>.x-badge{margin-left:auto}
.x-store-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.5fr);gap:32px;align-items:start}
.x-store-sidebar{display:flex;flex-direction:column;gap:20px;min-width:0}
.x-store-content{min-width:0;scroll-margin-top:100px}
.x-store-content .x-compact__info,.x-store-content .x-compact>.x-col{min-width:0}
.x-store-content .x-compact .x-row{flex-wrap:wrap;gap:8px}
.x-store-content .x-compact .x-clamp-1{-webkit-line-clamp:2;line-height:1.5}
.x-store-content .x-compact{padding:16px;gap:16px}
.x-storehead{padding-block:24px 32px;gap:18px}
.x-storehead>div{flex:1;min-width:0}
.x-storehead .x-h1{margin-bottom:10px}
.x-store-coupons{margin-top:32px;padding-top:24px;border-top:var(--x-b-1)}
.x-trust{padding:24px}
.x-trust__head{align-items:flex-start;gap:14px;margin-bottom:24px}
.x-trust__head>div{min-width:0}
.x-trust__head b{font-size:15px;margin-bottom:6px}
.x-trust__big{height:72px;gap:0;line-height:1;padding:12px;background:var(--x-purple-soft);color:var(--x-purple-ink)}
.x-trust__big small{font-size:11px;font-weight:600}
.x-trust-metric{margin-top:18px}
.x-trust-metric>div{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;margin-bottom:8px}
.x-trust-metric b{font-size:13px;white-space:nowrap}
.x-trust-track{display:block;background:var(--x-bg-2);height:7px;border-radius:20px;overflow:hidden}
.x-trust-track i{display:block;height:100%;background:var(--x-turq);border-radius:20px}
.x-trust-metric:last-child .x-trust-track i{background:var(--x-orange)}
.x-coupons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.x-coupons-grid>.x-coupon{max-width:580px;width:100%}
.x-store-content .x-coupons-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.x-coupon-store-summary{display:flex;align-items:center;gap:14px;max-width:580px;padding:18px;border:var(--x-b-1);border-radius:18px;margin-top:24px}
.x-coupon-store-summary>span:nth-child(2){display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.x-coupon__code{flex-wrap:wrap;row-gap:8px}
.x-coupon__code i{overflow-wrap:anywhere;min-width:0}
.x-coupon__actions{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}.x-coupon__actions .x-btn{white-space:nowrap}@media(max-width:520px){.x-coupon__actions{width:100%;margin-left:0}.x-coupon__actions .x-btn{flex:1}}
@media(max-width:639px){.x-coupons-grid{grid-template-columns:1fr}.x-coupon__code{align-items:stretch}.x-coupon__code i{padding-block:4px}.x-coupon__actions{width:100%;margin-left:0}.x-coupon__actions .x-btn{flex:1;min-width:0;padding-inline:8px;font-size:12px}}
.x-dcard__body{flex:1;gap:10px;padding:16px}
.x-dcard__store{flex-wrap:wrap;gap:6px;min-height:36px;line-height:1.4}
.x-dcard__when{font-size:10px;white-space:nowrap}
.x-dcard__title{min-height:2.8em;line-height:1.4}
.x-dcard__price{gap:6px;min-height:54px;align-content:start}
.x-dcard__price em{flex-basis:fit-content}
.x-dcard__cta{margin-top:auto;padding-top:4px}
.x-dcard__media .x-art{height:160px;object-fit:contain}
.x-coupon__meta{line-height:1.6}
.x-coupon__scope{display:flex;align-items:flex-start;gap:7px;padding:10px 11px;border-radius:12px;background:#fff8dc;color:#5e4a00;font-size:12px;line-height:1.5}.x-coupon__scope .x-ic{margin-top:2px}
@media(max-width:767px){
 .x-ranking-index,.x-store-directory,.x-store-layout{grid-template-columns:minmax(0,1fr);gap:20px}
 .x-ranking-body{padding:20px}.x-ranking-art{height:150px}
 .x-store-directory .x-storecard{padding:20px}
 .x-store-layout{gap:28px}.x-storehead>.x-btn{margin-left:82px}
 .x-main{padding-bottom:32px}.x-store-directory .x-storecard>.x-badge{font-size:10px}
 .x-store-content .x-compact{padding:12px;gap:10px}
 .x-store-sidebar .x-spec{grid-template-columns:100px minmax(0,1fr)}
}
.x-ic{flex-shrink:0}
.x-crumbs{width:100%;max-width:var(--x-max);margin-inline:auto;padding-inline:var(--x-gutter)}
.x-container .x-crumbs{padding-inline:0}
.x-crumbs ol{list-style:none;padding:0;margin:0;align-items:center;gap:6px}
.x-crumbs li{display:inline-flex;gap:6px;align-items:center;min-width:0}
.x-crumbs li:last-child i{display:none}
.x-crumbs li:last-child{overflow-wrap:anywhere}
.x-ranklist{list-style:none;padding-left:0}
.x-offerslayout>div{min-width:0}
.x-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Rejilla que se AJUSTA al numero de elementos y queda centrada. Cuando en una rejilla de 4 solo
   hay 3 (o 5, o 7), la ultima fila queda a medias y con un hueco a la derecha: es el "descuadre" que
   reporto el jefe en «guias para decidir» ("solo salen tres, o lo centras o que salgan cuatro").
   Con auto-fit + tope de ancho + justify-content:center, las tarjetas presentes se reparten
   simetricas y centradas, sin sobrar un hueco a un lado. */
/* ---- Filtro y "ver mas" de las guias ----
   Peticion del jefe: "un filtro para guias que puedan escoger por categoria" y "paginacion o que vayan
   bajando". Las pastillas van en fila y se deslizan en movil; el boton suelta las tarjetas de 12 en 12. */
.x-filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.x-filtro{display:inline-flex;align-items:center;gap:6px;border:var(--x-b-1);background:var(--x-bg);color:var(--x-ink-2);border-radius:999px;padding:8px 14px;font:inherit;font-size:var(--x-fs-14);font-weight:600;cursor:pointer;transition:background var(--x-dur-2) var(--x-ease),color var(--x-dur-2) var(--x-ease)}
.x-filtro:hover{border-color:var(--x-ink-3)}
.x-filtro.is-on{background:var(--x-ink);border-color:var(--x-ink);color:var(--x-bg)}
.x-filtro__n{font-size:var(--x-fs-12);opacity:.55;font-weight:700}
/* Sin logo real se pinta la inicial de la marca (7-oct). Antes se pedia un wordmark que no existia
   y el navegador mostraba el icono de imagen rota. */
.x-brand__ini{font-size:var(--x-fs-20);font-weight:800;letter-spacing:-.02em;color:var(--x-ink-2);line-height:1}
/* El filtro pasa de <button> a <a> (7-oct): conserva el mismo aspecto pero sin subrayado. */
a.x-filtro{text-decoration:none}
/* ── PAGINACIÓN del listado de guías (7-oct) ───────────────────────────────────────────────────
   Antes el listado pintaba las 5.661 guías en un único HTML (4,5 MB) y el JS escondía todas menos
   12. Ahora el servidor manda 60 por página y el resto se navega con estos enlaces, que además
   puede seguir Google. */
.x-paginacion{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:var(--x-b-1)}
.x-pag__nums{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.x-pag{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:10px;border:var(--x-b-1);background:var(--x-bg);color:var(--x-ink);font-size:var(--x-fs-14);font-weight:600;text-decoration:none;transition:border-color .15s ease,background .15s ease,color .15s ease}
.x-pag:hover{border-color:var(--x-ink)}
.x-pag.is-on{background:var(--x-ink);border-color:var(--x-ink);color:var(--x-bg)}
.x-pag.is-off{opacity:.35;cursor:default}
.x-pag--dir{white-space:nowrap;gap:6px}
.x-pag__puntos{color:var(--x-ink-3);padding:0 4px}
@media(max-width:640px){.x-paginacion{justify-content:center}.x-pag{min-width:34px;height:34px;padding:0 9px;font-size:var(--x-fs-13)}}
.x-vermas-caja{display:flex;justify-content:center;margin:24px 0 0}
.x-vermas{border:var(--x-b-1);background:var(--x-bg);color:var(--x-ink);border-radius:999px;padding:12px 26px;font:inherit;font-size:var(--x-fs-14);font-weight:700;cursor:pointer}
.x-vermas:hover{border-color:var(--x-ink)}
@media(max-width:639px){
  .x-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .x-filtros::-webkit-scrollbar{display:none}
  .x-filtro{flex:0 0 auto}
}
.x-grid.x-grid--auto{grid-template-columns:repeat(auto-fit,minmax(240px,300px));justify-content:center}
/* El filtro oculta tarjetas con el atributo [hidden], pero las tarjetas son display:flex y eso GANA al
   [hidden] del navegador (que es solo display:none de hoja de usuario). Sin esta regla el filtro y el
   "ver mas" no esconderian nada. */
[hidden]{display:none!important}

/* La etiqueta de un bloque ("41 guias de compra") iba PEGADA a la rejilla: el texto quedaba casi encima
   de las tarjetas (el jefe: "se ve muy pegado"). Esta variante le da aire. */
.x-kicker--bloque{display:block;margin:0 0 18px}
/* En escritorio SIEMPRE 4 por fila, como el resto de la web (el jefe: "se tendrian que ver 4 en una
   fila ... y asi con todos hasta el final"). El auto-fit de arriba solo actua en movil/tablet. */
@media(min-width:1024px){.x-grid.x-grid--auto{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* «Guias para decidir» de la portada: las tarjetas llevaban un ancho FIJO en linea (300px), asi que
   en PC entraban 3 por fila y sobraba hueco a la derecha ("solo salen tres" — el jefe). Ahora usan el
   carril comun: 4 por fila como el resto y se desliza para ver las 14. */
/* Las tarjetas de guía medían 300px fijos: a 1440px caben 3,9, así que salían TRES y quedaba un
   hueco a la derecha (el jefe: "no está centrado, está echado a la izquierda... o lo centras o que
   salgan cuatro"). Con el ancho calculado caben cuatro exactas y el carril queda alineado con los
   márgenes del resto de la portada. En pantallas estrechas se mantiene el ancho cómodo de siempre. */
.x-rail--guias>*{flex:0 0 calc((100% - 48px)/4);min-width:0}
@media(max-width:900px){.x-rail--guias>*{flex:0 0 min(80vw,300px)}}
@media(min-width:1024px){.x-rail--guias>*{flex:0 0 calc((100% - 48px)/4)}}
/* ── CARRILES EN PC: se deslizan Y SE VE LA BARRA ──────────────────────────────────────────────
   Lo pidio el jefe: "que deslicen tambien desde el PC... una barra o algo para que puedan deslizar y
   ver todas". Antes la barra estaba OCULTA (scrollbar-width:none) y no habia ninguna pista visual de
   que hubiera mas productos a los lados. Ahora sale una barra fina.
   `.x-carril` es la version carril de una rejilla: en movil una tarjeta ancha, en PC 4 por fila. */
.x-carril{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:4px 2px 12px;scrollbar-width:thin;scrollbar-color:rgba(14,14,40,.3) rgba(14,14,40,.06)}
.x-carril>*{flex:0 0 min(78vw,300px);min-width:0;scroll-snap-align:start}
@media(min-width:1024px){
  .x-carril>*{flex:0 0 calc((100% - 48px)/4)}
  /* «Tiendas con catalogo»: en PC pasaba a 5 columnas FIJAS y dejaba de deslizar. Vuelve a ser carril. */
  .x-logorow{grid-auto-flow:column;grid-auto-columns:118px;grid-template-columns:none;overflow-x:auto;padding-bottom:12px}
  /* «Cupones por tienda»: era rejilla fija de 3. Pasa a carril deslizable. */
  .x-home-coupon-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:16px;padding:4px 2px 12px}
  .x-home-coupon-grid>*{flex:0 0 calc((100% - 32px)/3);min-width:0}
  /* Barra fina y VISIBLE en todos los carriles (antes oculta en todos) */
  .x-carril,.x-rail,.x-for-you,.x-home-deals,.x-logorow,.x-home-coupon-grid{scrollbar-width:thin;scrollbar-color:rgba(14,14,40,.3) rgba(14,14,40,.06)}
  .x-carril::-webkit-scrollbar,.x-rail::-webkit-scrollbar,.x-for-you::-webkit-scrollbar,.x-home-deals::-webkit-scrollbar,.x-logorow::-webkit-scrollbar,.x-home-coupon-grid::-webkit-scrollbar{display:block;height:9px}
  .x-carril::-webkit-scrollbar-thumb,.x-rail::-webkit-scrollbar-thumb,.x-for-you::-webkit-scrollbar-thumb,.x-home-deals::-webkit-scrollbar-thumb,.x-logorow::-webkit-scrollbar-thumb,.x-home-coupon-grid::-webkit-scrollbar-thumb{background:rgba(14,14,40,.28);border-radius:999px}
  .x-carril::-webkit-scrollbar-track,.x-rail::-webkit-scrollbar-track,.x-for-you::-webkit-scrollbar-track,.x-home-deals::-webkit-scrollbar-track,.x-logorow::-webkit-scrollbar-track,.x-home-coupon-grid::-webkit-scrollbar-track{background:rgba(14,14,40,.06);border-radius:999px}
}

@media(min-width:640px){.x-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.x-grid--1{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.x-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.x-grid--1{grid-template-columns:repeat(2,minmax(0,1fr))}.x-offerslayout .x-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:639px){.x-comparebar>b{display:none}.x-comparebar{gap:6px}#x-compare-slots{min-width:0}.x-comparebar .x-slot{width:22px;height:22px;flex-shrink:0}}
.x-stars{align-items:center;flex-wrap:nowrap;flex-shrink:0}
.x-cardscore{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--x-ink-3)}
.x-cardscore .x-scorechip{height:27px;min-width:29px;box-shadow:none;border-radius:8px;font-size:12px}
.x-pcard__body{flex:1;min-width:0}
.x-pcard__title{min-height:2.6em}
.x-pcard__rate{display:flex;align-items:center;min-height:20px}
.x-pcard .x-cardacts{gap:4px}
.x-cardacts .x-icbtn{background:rgba(255,255,255,.96);border:1px solid var(--x-line-2);width:36px;height:36px}
.x-pcard__off{max-width:calc(100% - 58px)}
/* Antes era una REJILLA fija de 4 columnas: el jefe pidió poder deslizarla ("en para ti igual
   también que puedan deslizar"). La misma regla existía ya dentro de una media query, así que se
   aplicaba solo en pantallas estrechas; ahora vale siempre y las flechas le entran solas (el
   carrusel de flechas de src/client/app.js ya incluye .x-for-you en su lista). */
.x-for-you{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:4px 2px 12px;scrollbar-width:none}
.x-for-you::-webkit-scrollbar{display:none}
.x-for-you>*{flex:0 0 calc((100% - 48px)/4);min-width:0;scroll-snap-align:start}
.x-for-you__card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;border:var(--x-b-1);border-radius:var(--x-r-xl);background:#fff;box-shadow:var(--x-sh-1);transition:transform .2s,box-shadow .2s;min-width:0;text-decoration:none;color:inherit}
.x-for-you__card:hover{transform:translateY(-3px);box-shadow:var(--x-sh-2)}
.x-for-you__card>.x-row{font-size:12px;color:var(--x-ink-3);min-height:32px}
.x-for-you__card>.x-art{height:155px!important;object-fit:contain}
.x-for-you__card>b{font-size:15px;line-height:1.4;min-height:42px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.x-for-you__bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:auto;padding-top:10px}
.x-for-you__bottom>b{font-size:20px;white-space:nowrap}
.x-home-product-image{display:block;width:100%;height:155px!important;object-fit:contain;background:#fff;border-radius:12px;padding:10px}
.x-hero-home__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.75fr);gap:64px;align-items:center}.x-hero-home__panel{display:grid;gap:10px;padding:20px;border:1px solid rgba(124,92,255,.14);border-radius:24px;background:rgba(255,255,255,.88);box-shadow:var(--x-sh-2)}.x-hero-home__panel>.x-kicker{margin:2px 4px 4px}.x-hero-home__panel>a{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border-radius:16px;text-decoration:none;color:inherit}.x-hero-home__panel>a:hover{background:var(--x-bg-2)}.x-hero-home__panel>a>span:nth-child(2){display:grid;gap:3px}.x-hero-home__panel small{color:var(--x-ink-3);line-height:1.4}
.x-home-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.x-home-stats>span{display:flex;gap:5px;align-items:baseline;padding:9px 12px;border:1px solid rgba(13,13,13,.09);border-radius:999px;background:rgba(255,255,255,.72);font-size:12px;color:var(--x-ink-3)}.x-home-stats b{font-size:14px;color:var(--x-ink)}
.x-home-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.x-home-category{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px;text-decoration:none;color:inherit}.x-home-category>span:first-child{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--cc) 16%,#fff);color:var(--cc)}.x-home-category>span:nth-child(2){display:grid;gap:3px;min-width:0}.x-home-category small,.x-home-coupon small{color:var(--x-ink-3);line-height:1.4}.x-home-coupon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.x-home-coupon{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px;text-decoration:none;color:inherit}.x-home-coupon__mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--x-purple-soft);color:var(--x-purple-ink);font-weight:800;overflow:hidden}.x-home-coupon__mark--logo{background:#fff;border:1px solid var(--x-line)}.x-home-coupon__mark img{display:block;width:100%;height:100%;object-fit:contain;padding:7px}.x-home-coupon>span:nth-child(2){display:grid;gap:3px;min-width:0}.x-logotile--store{position:relative;display:grid!important;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;min-height:76px;padding:8px 28px 8px 10px;overflow:hidden;background:#fff!important;color:var(--x-ink)!important;border:var(--x-b-1);text-decoration:none}.x-logotile__mark{display:grid;place-items:center;width:64px;height:48px;overflow:hidden;border:1px solid var(--x-line);border-radius:11px;background:#fff}.x-logotile--store img{display:block;width:auto!important;height:auto!important;max-width:54px;max-height:32px;object-fit:contain;padding:0}.x-logotile__name{display:-webkit-box;overflow:hidden;color:var(--x-ink);font-size:12px;line-height:1.25;-webkit-box-orient:vertical;-webkit-line-clamp:2}.x-logotile--initial .x-logotile__mark{background:var(--x-purple-soft);border-color:#e5ddff;color:var(--x-purple-ink);font-size:12px;font-weight:800;letter-spacing:.06em}.x-logotile--store i{position:absolute;right:5px;bottom:5px;padding:2px 5px;border-radius:6px;background:#fff;color:var(--x-ink-3);font-size:8px;font-style:normal;box-shadow:var(--x-sh-1)}@media(max-width:639px){.x-logotile--store{grid-template-columns:54px minmax(0,1fr);padding-left:8px;gap:8px}.x-logotile__mark{width:54px;height:46px}.x-logotile--store img{max-width:46px;max-height:28px}.x-logotile__name{font-size:11px}}
@media(max-width:900px){.x-for-you,.x-home-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-home-coupon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.x-hero-home__grid{grid-template-columns:minmax(0,1fr);gap:28px}.x-hero-home__panel{max-width:620px}}
@media(max-width:639px){.x-home-stats{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.x-home-stats>span{grid-column:1/-1}.x-home-category-grid,.x-home-coupon-grid{grid-template-columns:minmax(0,1fr)}.x-home-deals{grid-template-columns:repeat(2,minmax(0,1fr))}.x-hero-home__panel{padding:12px;border-radius:20px}.x-hero-home__panel>a{padding:11px 8px}}
.x-rail .x-dcard{width:100%;height:100%}
.x-rail--card>.x-pcard{height:100%}
.x-rail .x-pcard{width:100%;display:flex;flex-direction:column}
.x-travel-search-head{margin-top:40px;padding-top:28px;border-top:var(--x-b-1)}
.x-dhead__in{gap:16px}
.x-dnav a,.x-dd>button{padding-inline:10px;white-space:nowrap}
.x-dhead__right{min-width:0}
#x-open-search-desktop{width:clamp(160px,19vw,260px);white-space:nowrap;text-align:left}
.x-search-label{overflow:hidden;text-overflow:ellipsis}
.x-pd__info{min-width:0}
.x-pd__info>.x-row{flex-wrap:wrap}
.x-rank__side>.x-num{min-width:75px;text-align:right;white-space:nowrap}
.x-foot__bar>.x-row{flex-wrap:wrap}
.x-compare-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.x-compare-picker .x-card{display:flex;flex-direction:column;gap:12px;padding:18px}
.x-compare-picker .x-input{min-width:0;text-overflow:ellipsis}
.x-cmp-hits{display:grid;gap:7px;min-width:0}.x-cmp-hits>.x-meta{margin:1px 0}.x-cmp-hit{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px;width:100%;padding:8px;border:1px solid var(--x-line);border-radius:12px;background:#fff;color:inherit;text-align:left;cursor:pointer}.x-cmp-hit:hover,.x-cmp-hit:focus-visible{border-color:var(--x-purple);box-shadow:0 0 0 3px var(--x-purple-soft);outline:0}.x-cmp-hit img,.x-cmp-hit .x-image-empty{width:48px;height:48px;object-fit:contain;border-radius:9px;background:#fafafe}.x-cmp-hit>span{display:grid;gap:3px;min-width:0}.x-cmp-hit b{font-size:12px;line-height:1.25}.x-cmp-hit small,.x-cmp-picked small{font-size:11px;color:var(--x-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-cmp-picked:empty{display:none}.x-cmp-picked>div{display:grid;grid-template-columns:auto 42px minmax(0,1fr);align-items:center;gap:8px;padding:9px;border-radius:12px;background:var(--x-purple-soft)}.x-cmp-picked>div>span{grid-row:1/3;padding:4px 6px;border-radius:999px;background:#fff;color:var(--x-purple-ink);font-size:9px;font-weight:800;text-transform:uppercase}.x-cmp-picked img{grid-row:1/3;width:42px;height:42px;object-fit:contain;border-radius:8px;background:#fff}.x-cmp-picked b{font-size:12px;line-height:1.25}.x-cmp-picked small{display:block}.x-cmp-table-product{display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px;align-items:center;color:inherit;text-decoration:none}.x-cmp-table-product img{width:46px;height:46px;object-fit:contain;border-radius:9px;background:#fff}.x-cmp-table-product span{display:grid;gap:3px}.x-cmp-table-product b{line-height:1.2}.x-cmp-table-product small{font-size:11px;color:var(--x-ink-3)}
.x-compare-results{overflow-x:auto;margin-top:24px;border-radius:18px;border:var(--x-b-1)}
.x-compare-results:empty{display:none}
.x-compare-table{border-collapse:collapse;width:100%;font-size:14px}
.x-compare-table th,.x-compare-table td{padding:16px;text-align:left;border-bottom:var(--x-b-1);min-width:150px;vertical-align:top}
.x-compare-table thead{background:var(--x-purple-soft)}
.x-compare-table th:first-child{min-width:115px}
.x-ranking-focus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.x-ranking-focus__card{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;padding:16px;border:1px solid var(--x-line);border-radius:18px;background:#fff}.x-ranking-focus__card>a:first-child{display:grid;place-items:center;align-self:stretch;min-height:108px;border-radius:13px;background:#fafafe;overflow:hidden}.x-ranking-focus__card .x-art{width:100%;height:100%;min-height:108px;object-fit:contain}.x-ranking-focus__card h3{margin:5px 0 6px;font-size:16px;line-height:1.2}.x-ranking-focus__card p:not(.x-kicker){margin:0 0 10px;color:var(--x-ink-3);font-size:13px;line-height:1.45}
.x-auth{max-width:480px;margin:48px auto;padding:28px;display:flex;flex-direction:column;gap:20px}
.x-auth form{display:flex;flex-direction:column;gap:16px}
.x-auth-note{padding:12px;border-radius:12px;background:var(--x-purple-soft);font-size:13px;line-height:1.6}
@media(min-width:1024px){.x-rail{gap:16px}.x-rail> .x-rail--card{width:calc((100% - 48px)/4);min-width:0}.x-rank__info .x-clamp-1{-webkit-line-clamp:2}.x-pcard__media .x-art{height:180px}
/* «Para ti» y «Opciones por menos de 50 €» eran REJILLAS fijas en PC: se veian 4 (o 2) y no habia
   forma de ver mas. Se pasan a carril deslizable, igual que el resto. Lo pidio el jefe. */
.x-for-you,.x-home-deals{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;gap:16px;scrollbar-width:none}
.x-for-you::-webkit-scrollbar,.x-home-deals::-webkit-scrollbar{display:none}
.x-for-you>*,.x-home-deals>*{flex:0 0 calc((100% - 48px)/4);width:auto;min-width:0;scroll-snap-align:start}}
@media(min-width:1024px) and (max-width:1199px){.x-dhead__in{gap:10px}.x-dnav a,.x-dd>button{padding-inline:7px}#x-open-search-desktop{width:160px}#x-open-search-desktop .x-kbd{display:none}}
@media(max-width:639px){
 .x-for-you{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;gap:12px}
 .x-for-you__card{flex:0 0 85%;scroll-snap-align:start}
 .x-rank{gap:8px;padding:10px}.x-rank__n{width:26px;height:26px}.x-rank .x-art--sq{width:40px;height:40px}
 .x-rank__side{flex-direction:column;align-items:flex-end;gap:8px}.x-rank__info>b{-webkit-line-clamp:2;font-size:13px}.x-rank__side>.x-num{min-width:0;font-size:13px}
 .x-rank__info .x-meta{font-size:11px}.x-rank__info .x-stars{margin-top:5px}
 .x-compare-picker{grid-template-columns:minmax(0,1fr)}
 .x-ranking-focus{grid-template-columns:1fr}.x-ranking-focus__card{grid-template-columns:88px minmax(0,1fr)}.x-ranking-focus__card>a:first-child,.x-ranking-focus__card .x-art{min-height:88px}
 .x-auth{margin:24px auto;padding:20px}
 .x-section__head{align-items:flex-start}.x-section__more{white-space:normal;text-align:right;flex-shrink:0;max-width:110px}
}
.x-storecard__logo img,.x-storehead__logo img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:inherit;padding:6px}
/* El logo del viaje ocupaba TODO el ancho (width:100% y 86px de alto) mientras la marca sin logo caía
   en .x-storeglyph (30x30): en la misma fila salían uno enorme y otro minúsculo — lo reportó el jefe
   con Brittany Ferries (con logo) e Iberostar (sin él). Ahora los dos comparten la MISMA caja: el logo
   recortado dentro y la marca escrita centrada, así la fila queda pareja haya logo o no. */
.x-promo-logo{width:100%;height:64px;object-fit:contain;background:#fff;border:1px solid var(--x-line);border-radius:14px;padding:10px}
.x-promo-logo--texto{display:grid;place-items:center;text-align:center;font-weight:800;font-size:var(--x-fs-13);letter-spacing:.04em;text-transform:uppercase;color:var(--x-ink-2);line-height:1.2;overflow-wrap:anywhere}
.x-affiliate-capabilities{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 22px}
.x-store-intro{margin:18px 0;max-width:850px}
.x-decision-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;margin:10px 0 24px;padding:22px 24px;border-radius:22px;background:linear-gradient(135deg,#f6f3ff,#fff);border:1px solid #e5ddff}.x-decision-intro .x-body{margin-top:7px;max-width:650px}@media(max-width:720px){.x-decision-intro{grid-template-columns:1fr;padding:20px}}
.x-legal__hero{max-width:820px;padding:28px 0 18px}.x-legal__hero .x-h1{margin:8px 0 14px}.x-legal__sections{max-width:850px;display:grid;gap:14px}.x-legal__sections section{padding:24px;border:1px solid var(--x-line);border-radius:20px;background:#fff}.x-legal__sections .x-h2{margin-bottom:10px}.x-legal__sections .x-body+.x-body{margin-top:10px}.x-legal__updated{margin-top:20px}
.x-trip-panel,.x-rewards-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;margin-top:18px}.x-rewards-panel{grid-template-columns:auto minmax(0,1fr) auto;background:linear-gradient(135deg,#f6ffd9,#fff)}.x-rewards-panel__icon{display:grid;place-items:center;width:50px;height:50px;border-radius:17px;background:#b9ff38;color:#151515}.x-trip-panel .x-body,.x-rewards-panel .x-body{margin-top:7px;max-width:680px}@media(max-width:720px){.x-trip-panel,.x-rewards-panel{grid-template-columns:1fr}.x-trip-panel .x-btn,.x-rewards-panel .x-btn{width:100%}.x-rewards-panel__icon{margin-bottom:-6px}}
.x-coupon-tools{display:grid;gap:14px;margin:4px 0 22px}.x-coupon-tools .x-field{max-width:520px}.x-coupon-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.x-coupon-brand{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:13px;padding:15px;text-decoration:none;color:inherit}.x-coupon-brand .x-storecard__logo{width:58px;height:58px;background:#f2eeff;color:var(--x-purple-ink);border:1px solid #e5ddff}.x-coupon-brand .x-storecard__logo img{border-radius:13px}.x-coupon-brand>span:nth-child(2){display:grid;gap:3px;min-width:0}.x-coupon-directory+.x-rewards-panel{margin-top:26px}.x-store-directory{margin-top:18px}.x-storecard{min-height:92px}.x-decision-intro+.x-store-directory{margin-top:26px}@media(max-width:900px){.x-coupon-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.x-coupon-directory{grid-template-columns:1fr}.x-coupon-brand{padding:13px}.x-decision-intro .x-row{gap:10px!important}.x-decision-intro .x-btn{width:100%}}
.x-store-tools{display:grid;gap:14px;margin:30px 0 18px}.x-store-tools .x-field{max-width:520px}
.x-brand-tools{display:grid;gap:13px;margin:4px 0 22px}.x-brand-tools .x-field{max-width:520px}.x-brand-more{display:flex;justify-content:center;margin-top:26px}.x-brand[hidden]{display:none}.x-ranking-note{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:14px 16px;border:1px solid #e5ddff;border-radius:16px;background:var(--x-purple-soft);max-width:760px}.x-ranking-note>span{display:grid;gap:3px}.x-ranking-note small{color:var(--x-ink-3);line-height:1.5}
.x-compare-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.x-compare-picker>[hidden]{display:none!important}@media(max-width:600px){.x-compare-actions .x-btn{width:100%}}
.x-auth-gate{max-width:720px;margin:32px auto;padding:32px;border:var(--x-b-1);border-radius:26px;background:linear-gradient(135deg,#f6f3ff,#fff)}.x-auth-gate .x-h1{margin:8px 0}.x-auth-gate .x-hero__sub{max-width:58ch}@media(max-width:600px){.x-auth-gate{margin-block:20px;padding:22px}}
.x-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.x-trip-widgets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}.x-trip-widget{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:20px;overflow:hidden}.x-trip-widget header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start}.x-trip-widget header .x-body{margin-top:4px}.x-trip-widget__note{min-height:58px;color:var(--x-ink-3);font-size:12px;line-height:1.5}.x-trip-widget>.x-btn{margin-top:auto}.x-trip-widget--active{border-color:#cfc5ff!important;background:linear-gradient(145deg,#f7f5ff,#fff)!important}@media(max-width:820px){.x-trip-widgets{grid-template-columns:1fr}.x-trip-widget__note{min-height:0}}@media(max-width:600px){.x-trip-widget{padding:16px}}
.x-trip-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0}.x-trip-modes>a{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:9px;align-items:center;min-height:86px;padding:13px;color:inherit;text-decoration:none}.x-trip-modes>a>span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--x-purple-soft);color:var(--x-purple-ink)}.x-trip-modes b{font-size:14px}.x-trip-modes small{grid-column:2;color:var(--x-ink-3);font-size:11px;line-height:1.35}.x-trip-modes>a>.x-ic{position:absolute;right:12px;bottom:12px;width:14px;height:14px;color:var(--x-purple-ink)}.x-trip-mode--active{border-color:#cfc5ff!important;background:#f6f3ff!important}.x-trip-checklist{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:28px;align-items:center;margin:30px 0 12px;padding:28px;border-radius:22px;background:#111117;color:#fff}.x-trip-checklist .x-kicker{color:#cbc6d8}.x-trip-checklist .x-h2{margin-top:8px;font-size:clamp(24px,3vw,36px);letter-spacing:-.04em}.x-trip-checklist ol{display:grid;gap:9px;counter-reset:trip}.x-trip-checklist li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;padding:10px 0;border-bottom:1px solid #343440}.x-trip-checklist li:last-child{border-bottom:0}.x-trip-checklist li::before{counter-increment:trip;content:counter(trip);display:grid;grid-row:span 2;place-items:center;width:26px;height:26px;border-radius:9px;background:#2b2936;color:var(--x-green);font-size:11px;font-weight:800}.x-trip-checklist b{font-size:13px}.x-trip-checklist span{grid-column:2;color:#cbc8d2;font-size:12px;line-height:1.48}@media(max-width:720px){.x-trip-modes{grid-template-columns:1fr}.x-trip-modes>a{min-height:72px}.x-trip-checklist{grid-template-columns:1fr;gap:18px;padding:22px}}
.x-travel-promo{gap:0!important;overflow:hidden}.x-travel-promo__media{aspect-ratio:16/8;background:#eaf1f5;overflow:hidden}.x-travel-promo__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.x-travel-promo__body{display:flex;flex:1;flex-direction:column;align-items:stretch;gap:12px;padding:18px}.x-travel-promo__body>.x-btn{margin-top:auto}@media(max-width:600px){.x-travel-promo__body{padding:16px}.x-travel-promo__media{aspect-ratio:16/9}}

/* Página de adopción: uso web, instalación y cuenta. */
.x-app-landing{overflow:hidden}.x-app-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(410px,.88fr);align-items:center;gap:clamp(36px,6vw,92px);padding-top:clamp(42px,7vw,96px);padding-bottom:clamp(48px,8vw,110px)}.x-app-hero__copy{min-width:0}.x-app-hero__title{max-width:710px;margin:10px 0 18px;font-size:clamp(40px,5.6vw,76px);font-weight:800;line-height:.99;letter-spacing:-.058em}.x-app-hero__copy .x-hero__sub{max-width:610px;font-size:clamp(16px,1.45vw,19px);line-height:1.58}.x-app-hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.x-app-install-status{margin-top:12px;max-width:570px;line-height:1.5}.x-app-proof{display:flex;gap:11px 18px;flex-wrap:wrap;margin-top:18px;font-size:12px;font-weight:700;color:var(--x-ink-2)}.x-app-proof li{display:inline-flex;align-items:center;gap:5px}.x-app-proof .x-ic{color:var(--x-purple);width:16px;height:16px}
.x-app-devices{position:relative;min-height:430px;isolation:isolate}.x-app-devices::before{content:"";position:absolute;inset:30px 0 14px 30px;border-radius:34px;background:#f2efff;z-index:-1}.x-app-browser{position:absolute;inset:0 28px 58px 0;border:1px solid #dcd8ee;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 20px 48px rgba(49,35,120,.13)}.x-app-browser__bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-bottom:1px solid #eceaf4;background:#fafafe}.x-app-browser__bar i{width:7px;height:7px;border-radius:50%;background:#dedbe9}.x-app-browser__bar i:first-child{background:#b9ff38}.x-app-browser__bar span{min-width:0;margin-left:8px;padding:5px 9px;border-radius:7px;background:#fff;color:#8a8795;font-size:9px;line-height:1}.x-app-browser__body{padding:18px 20px}.x-app-browser__top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px}.x-app-browser__top>b{display:flex;align-items:center;gap:3px;font-size:13px}.x-app-browser__top em,.x-app-phone__nav em{display:block;width:8px;height:8px;border-radius:3px;background:var(--x-green)}.x-app-browser__top em:nth-child(2),.x-app-phone__nav em:nth-child(2){background:var(--x-turq)}.x-app-browser__top em:nth-child(3),.x-app-phone__nav em:nth-child(3){background:var(--x-purple)}.x-app-browser__top em:nth-child(4),.x-app-phone__nav em:nth-child(4){background:var(--x-orange)}.x-app-browser__top span{padding:7px 10px;border:1px solid var(--x-line);border-radius:999px;color:var(--x-ink-3);font-size:9px}.x-app-browser__body>p{margin:25px 0 18px;font-size:clamp(21px,2.5vw,34px);line-height:1.08;letter-spacing:-.045em}.x-app-browser__body>p strong,.x-app-phone__screen>p strong{color:var(--x-purple)}.x-app-browser__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.x-app-browser__cards span{display:grid;gap:4px;padding:11px;border:1px solid var(--x-line);border-radius:12px}.x-app-browser__cards i{display:block;width:24px;height:24px;border-radius:8px;background:var(--x-purple-soft)}.x-app-browser__cards span:nth-child(2) i{background:#efffd1}.x-app-browser__cards span:nth-child(3) i{background:#e5faff}.x-app-browser__cards b{font-size:10px}.x-app-browser__cards small{font-size:8px;color:var(--x-ink-3)}
.x-app-phone{position:absolute;right:0;bottom:0;width:174px;height:355px;padding:8px;border:7px solid #17171d;border-radius:29px;background:#17171d;box-shadow:0 18px 38px rgba(13,13,13,.22)}.x-app-phone__notch{position:absolute;z-index:2;top:9px;left:50%;width:64px;height:16px;transform:translateX(-50%);border-radius:0 0 10px 10px;background:#17171d}.x-app-phone__screen{position:relative;display:flex;flex-direction:column;height:100%;padding:18px 10px 9px;border-radius:17px;background:#fff;overflow:hidden}.x-app-phone__nav{display:flex;justify-content:space-between;align-items:center}.x-app-phone__nav>b{display:flex;gap:2px}.x-app-phone__nav em{width:5px;height:5px;border-radius:2px}.x-app-phone__nav>i{display:block;width:26px;height:7px;border-radius:99px;background:#f0eff3}.x-app-phone__screen>p{margin:27px 0 12px;font-size:18px;font-weight:800;line-height:1.03;letter-spacing:-.06em}.x-app-phone__search{display:flex;align-items:center;gap:5px;padding:8px;border:1px solid var(--x-line);border-radius:8px;color:var(--x-ink-3);font-size:7px}.x-app-phone__search .x-ic{width:11px;height:11px}.x-app-phone__deal{display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px;margin-top:12px;padding:8px;border-radius:11px;background:#f3f1ff}.x-app-phone__deal>span{border-radius:8px;background:linear-gradient(135deg,#b9ff38,#91e7ee)}.x-app-phone__deal div{display:grid;gap:4px}.x-app-phone__deal small{font-size:6px;font-weight:800;letter-spacing:.08em;color:var(--x-purple-ink)}.x-app-phone__deal b{font-size:9px;line-height:1.2}.x-app-phone__deal i{display:inline-flex;align-items:center;gap:2px;font-size:7px;font-style:normal;color:var(--x-purple-ink)}.x-app-phone__deal .x-ic{width:9px;height:9px}.x-app-phone__tabs{display:flex;justify-content:space-between;gap:4px;margin-top:auto;padding-top:9px;border-top:1px solid var(--x-line);font-size:7px;color:var(--x-ink-3)}.x-app-phone__tabs b:first-child{color:var(--x-purple);font-weight:800}
.x-app-section{padding-block:clamp(58px,8vw,110px)}.x-app-section__head{max-width:700px;margin-bottom:26px}.x-app-section__head .x-h2{margin:8px 0 10px;font-size:clamp(28px,3.2vw,44px);letter-spacing:-.04em}.x-app-section__head .x-body{max-width:620px;font-size:16px;line-height:1.58}.x-app-value__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.x-app-value__card{display:flex;flex-direction:column;min-height:272px;padding:24px;border:var(--x-b-1);border-radius:22px;background:#fff}.x-app-value__icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:32px;border-radius:14px}.x-app-value__icon--violet{background:var(--x-purple-soft);color:var(--x-purple-ink)}.x-app-value__icon--lime{background:#efffd1;color:#456800}.x-app-value__icon--blue{background:#e5faff;color:#007a8a}.x-app-value__card .x-h3{font-size:18px;margin-bottom:8px}.x-app-value__card .x-body{line-height:1.57}.x-app-value__card a{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:22px;color:var(--x-purple-ink);font-size:13px;font-weight:800}.x-app-value__card a .x-ic{width:14px;height:14px}
.x-app-install{padding-block:clamp(58px,8vw,100px);background:#111117;color:#fff}.x-app-install .x-kicker{color:#cac6d8}.x-app-install .x-body{color:#c9c6d1}.x-app-install__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.x-app-install__card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:22px;border:1px solid #343440;border-radius:20px;background:#1a1a22}.x-app-install__device{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#2c293f;color:#d3c9ff}.x-app-install__device--android{background:#314016;color:#d8ff74}.x-app-install__device--ios{background:#16373e;color:#8de8f1}.x-app-install__card .x-h3{margin-top:5px;color:#fff}.x-app-install__card ul{grid-column:1/-1;display:grid;gap:10px;margin:8px 0 0;padding:0;list-style:none;counter-reset:install}.x-app-install__card li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;color:#d3d0da;font-size:13px;line-height:1.5}.x-app-install__card li::before{counter-increment:install;content:counter(install);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#2c2b35;color:#fff;font-size:10px;font-weight:800}.x-app-install__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding-top:20px;border-top:1px solid #343440}.x-app-install__foot .x-btn{flex-shrink:0;border-color:#595864;background:transparent;color:#fff}
.x-app-account{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.6fr);align-items:center;gap:44px;margin-top:clamp(58px,8vw,104px);margin-bottom:clamp(58px,8vw,104px);padding:clamp(28px,4vw,52px);border:1px solid #e5ddff;border-radius:28px;background:#f6f3ff}.x-app-account .x-h2{max-width:610px;margin:8px 0 12px;font-size:clamp(27px,3vw,40px);letter-spacing:-.04em}.x-app-account .x-body{max-width:690px;line-height:1.6}.x-app-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.x-app-account__actions small{width:100%;color:var(--x-ink-3);font-size:11px;line-height:1.5}.x-app-faq{padding-bottom:clamp(62px,9vw,116px)}.x-app-faq__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.x-app-faq .x-acc{height:100%;margin:0;border:var(--x-b-1);border-radius:16px;background:#fff}.x-app-final{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-bottom:clamp(54px,8vw,100px);padding:clamp(26px,4vw,46px);border-radius:28px;background:var(--x-green)}.x-app-final .x-h2{max-width:660px;margin-top:8px;font-size:clamp(26px,3vw,40px);letter-spacing:-.04em}.x-app-final__actions{display:flex;gap:10px;flex-wrap:wrap}.x-app-final .x-btn--green{background:var(--x-black);color:#fff;border-color:var(--x-black)}.x-app-final .x-btn--outline{border-color:rgba(13,13,13,.3);background:transparent}
.x-logotile__mark{box-sizing:border-box}.x-logotile--store img{box-sizing:border-box;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain;padding:7px}.x-editorial-product-image,.x-ranking-focus__card .x-editorial-product-image{display:block;width:100%;height:100%;min-height:inherit;object-fit:contain;background:#fff}.x-product-faq{max-width:920px}.x-product-faq__head{display:grid;gap:7px;margin-bottom:16px}.x-product-faq .x-acc{margin-top:10px;border-radius:16px}.x-product-faq .x-acc summary{padding:16px 18px}.x-product-faq .x-acc__body{padding:0 18px 18px}.x-product-unavailable{max-width:760px;display:grid;gap:16px;padding-block:clamp(42px,8vw,92px)}
@media(max-width:960px){.x-app-hero{grid-template-columns:minmax(0,1fr);gap:34px}.x-app-devices{width:min(100%,560px);justify-self:center}.x-app-value__grid,.x-app-install__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-app-install__card:last-child{grid-column:1/-1}.x-app-account{grid-template-columns:1fr;gap:24px}.x-app-final{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.x-app-hero{padding-top:32px;padding-bottom:58px}.x-app-hero__title{max-inline-size:335px;font-size:40px;letter-spacing:-.065em;overflow-wrap:anywhere;white-space:normal}.x-app-hero__actions .x-btn{width:100%}.x-app-proof{display:grid;gap:8px}.x-app-devices{min-height:336px;width:100%}.x-app-devices::before{inset:25px 0 8px 14px;border-radius:26px}.x-app-browser{inset:0 17px 40px 0;border-radius:14px}.x-app-browser__bar{height:29px}.x-app-browser__body{padding:13px}.x-app-browser__top{font-size:8px}.x-app-browser__top>b{font-size:10px}.x-app-browser__top span{padding:5px 7px;font-size:7px}.x-app-browser__body>p{margin:17px 0 12px;font-size:23px}.x-app-browser__cards span{padding:7px;border-radius:9px}.x-app-browser__cards i{width:17px;height:17px;border-radius:6px}.x-app-browser__cards b{font-size:8px}.x-app-browser__cards small{font-size:6px}.x-app-phone{width:138px;height:284px;border-width:5px;border-radius:23px}.x-app-phone__screen{padding:14px 8px 8px;border-radius:14px}.x-app-phone__notch{top:6px;width:52px;height:12px}.x-app-phone__screen>p{margin-top:21px;font-size:15px}.x-app-phone__deal{grid-template-columns:39px minmax(0,1fr);gap:6px;margin-top:9px;padding:6px}.x-app-phone__tabs{font-size:6px}.x-app-section{padding-block:58px}.x-app-section__head .x-body{font-size:15px}.x-app-value__grid,.x-app-install__grid,.x-app-faq__grid{grid-template-columns:1fr}.x-app-value__card{min-height:228px;padding:20px}.x-app-value__icon{margin-bottom:24px}.x-app-install__card:last-child{grid-column:auto}.x-app-install__foot{align-items:stretch;flex-direction:column}.x-app-install__foot .x-btn{width:100%}.x-app-account{margin-top:58px;margin-bottom:58px;padding:24px;border-radius:22px}.x-app-account__actions .x-btn{flex:1}.x-app-final{margin-bottom:52px;padding:24px;border-radius:22px}.x-app-final__actions{width:100%}.x-app-final__actions .x-btn{width:100%}}
.x-app-install__card{align-content:start;grid-template-rows:auto 1fr}
.x-app-install__card ul{align-content:start}
.x-app-install__card li{display:block;position:relative;padding-left:30px;min-height:22px;line-height:1.65}
.x-app-install__card li::before{position:absolute;left:0;top:2px}
.x-app-install__card li b{display:inline;overflow-wrap:normal}
.x-app-install{scroll-margin-top:90px}
.x-app-device-links{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 28px}
.x-app-device-links a{padding:11px 18px;border:1px solid #85838f;border-radius:999px;color:#fff;font-size:14px;font-weight:700}
.x-app-install__foot .x-btn{border-color:#85838f}
.x-app-final .x-btn--outline{border-color:var(--x-black)}
.x-app-account__actions small{font-size:12px}
.x-pd--imported{align-items:start;gap:clamp(24px,4vw,56px)}
.x-pd--imported .x-imported-media{display:flex;align-items:center;justify-content:center;min-height:0;height:clamp(280px,38vw,480px);padding:32px;background:#fff;border:1px solid var(--x-line);border-radius:24px;overflow:hidden}
.x-pd--imported .x-imported-media .x-catalog-image{width:100%;height:100%;max-height:416px;object-fit:contain;object-position:center}
.x-pd--imported .x-price__cur{font-size:clamp(24px,3vw,36px);line-height:1.2;letter-spacing:-.035em}
.x-pd--imported .x-pd__info{min-width:0}
.x-pd--imported .x-product-actions{flex-wrap:wrap;gap:10px;margin-block:20px}
.x-product-editorial>.x-h2{margin-bottom:18px}
@media(max-width:620px){.x-pd--imported .x-imported-media{height:300px;padding:24px}.x-pd--imported .x-product-actions .x-btn{flex:1 1 140px}.x-pd--imported .x-price__cur{font-size:28px}}
.x-app-device-links a:hover,.x-app-device-links a:focus-visible{background:#343440;outline:2px solid #b9ff38;outline-offset:3px}
.x-app-install__card[id]{scroll-margin-top:90px}
.x-app-faq__grid{align-items:start}
.x-app-faq .x-acc{height:auto}
@media(max-width:620px){.x-app-hero__title{font-size:clamp(32px,9vw,40px);overflow-wrap:normal}.x-app-account,.x-app-final{width:calc(100% - 32px);margin-inline:auto}.x-app-device-links a{flex:1;text-align:center}.x-app-install__card{padding:22px}.x-app-account__actions .x-btn{min-width:0}}
/* Recovered editorial pages retain their original model and source records. */
.x-recovered{padding-block:28px 64px}.x-recovered>header{max-width:850px;margin-bottom:32px}.x-recovered .x-h1{font-size:clamp(30px,4vw,48px);line-height:1.14;margin-block:12px 20px}.x-recovered-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-block:28px}.x-recovered-card{display:flex;flex-direction:column;gap:16px}.x-recovered-card img{display:block;width:100%;height:260px;object-fit:contain;background:white;margin-bottom:20px}.x-recovered-card .x-btn{margin-top:auto}.x-recovered-section{margin-top:48px}.x-recovered-section>.x-h2{margin-bottom:20px}.x-recovered-section p{margin-block:14px;line-height:1.65}.x-recovered-table{overflow:auto;margin-top:24px;border:1px solid var(--x-line);border-radius:16px}.x-recovered table{width:100%;border-collapse:collapse;text-align:left;min-width:650px}.x-recovered th,.x-recovered td{padding:18px;line-height:1.55;vertical-align:top;border-bottom:1px solid var(--x-line)}.x-recovered thead{background:#f6f3ff}.x-recovered-photo{padding:28px;background:#fff;border:1px solid var(--x-line);border-radius:24px}.x-recovered-photo img{display:block;width:100%;height:380px;object-fit:contain}.x-recovered-specs>div{display:grid;grid-template-columns:1fr 2fr;gap:20px;padding:18px;border-bottom:1px solid var(--x-line)}.x-recovered-specs dt{font-weight:700}.x-recovered-specs dd{margin:0}.x-recovered a:focus-visible{outline:3px solid var(--x-purple);outline-offset:4px}
@media(max-width:620px){.x-recovered-grid{grid-template-columns:1fr;gap:18px}.x-recovered-photo img{height:260px}.x-recovered-specs>div{grid-template-columns:1fr;gap:8px}.x-recovered-card img{height:220px}}
.x-recovered-grid>.x-card>img{display:block;width:100%;height:240px;object-fit:contain;background:#fff;margin-bottom:20px}.x-recovered-section li{margin-block:12px;line-height:1.65}.x-recovered-section ol,.x-recovered-section ul{padding-left:24px}.x-recovered-section[id]{scroll-margin-top:100px}
/* Comparativas editoriales: fotografía contenida y navegación clara. */
.x-editorial-tools{display:flex;align-items:end;gap:20px;flex-wrap:wrap;margin:28px 0 18px}
.x-editorial-tools .x-field{flex:1;min-width:240px;margin:0}
.x-editorial-comparison{display:flex;flex-direction:column;overflow:hidden;color:inherit;text-decoration:none}
.x-editorial-comparison[hidden]{display:none}
.x-editorial-comparison__images{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:24px;background:#fff}
.x-editorial-comparison__images img{width:100%;height:150px;object-fit:contain;min-width:0}
.x-editorial-comparison__images span{font-size:12px;font-weight:800;color:#666}
.x-editorial-comparison__body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.x-editorial-comparison__body p,.x-editorial-comparison__body h2{margin:0}
.x-editorial-comparison__cta{margin-top:auto;padding-top:12px;font-weight:700;font-size:14px;color:var(--x-purple)}
.x-editorial-comparison:hover{box-shadow:0 8px 28px #0000000d}
@media(max-width:600px){.x-editorial-tools{align-items:stretch;gap:14px}.x-editorial-tools>*{width:100%}.x-editorial-comparison__images img{height:130px}}


/* ============================================================
   LOGIN Y CUENTA — rediseño (UI64)
   ============================================================ */

/* Botón de Google: blanco, con borde y el logo "G" oficial.
   Va PRIMERO y como acción principal porque es la ÚNICA vía de acceso
   operativa hoy. Google exige su marca en el botón (logo G + fondo claro),
   así que no se puede pintar de negro como el resto de botones. */
.x-btn--google{display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:#1F1F1F;border:1px solid var(--x-line-2);font-weight:600;
  padding:14px 18px;border-radius:14px;cursor:pointer;transition:background .15s,border-color .15s}
.x-btn--google:hover:not([disabled]){background:#F8F9FA;border-color:#C8CCD1}
.x-btn--google svg{flex:0 0 auto}
.x-btn--google[disabled]{opacity:.55;cursor:not-allowed}

/* Separador "o con tu correo" */
.x-auth-divider{display:flex;align-items:center;gap:12px;margin:0;
  color:var(--x-ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.x-auth-divider::before,.x-auth-divider::after{content:"";flex:1;height:1px;background:var(--x-line)}

/* La nota dejaba de leerse como nota y parecía un aviso de error
   (caja lila con fondo). Ahora es texto secundario discreto y centrado. */
.x-auth .x-auth-note{padding:0;background:none;border:0;border-radius:0;
  font-size:13px;line-height:1.6;color:var(--x-ink-3);text-align:center}

/* El formulario por correo sigue visible pero atenuado y con aviso:
   hoy no puede completarse porque el registro por correo está bloqueado
   (no se envía correo). Evita que el usuario pierda el tiempo. */
.x-auth form[data-auth-pending]{opacity:.7}
.x-auth-pending-note{font-size:12px;line-height:1.5;color:var(--x-ink-4);text-align:center;margin:0}

/* BUG móvil: las acciones del perfil no cabían y el tercer botón
   ("Ver guardados") quedaba cortado fuera de pantalla. */
/* OJO: la primera versión de este arreglo llevaba white-space:nowrap y el
   propio arreglo provocaba el desbordamiento (los botones no podían encoger y
   el ancho mínimo de la tarjeta superaba la pantalla). Los botones deben poder
   encogerse y, en móvil, pasar a ancho completo. */
.x-auth-gate{max-width:100%;min-width:0;overflow-wrap:anywhere}
.x-auth-gate .x-alert-actions{flex-wrap:wrap;min-width:0}
.x-auth-gate .x-alert-actions .x-btn{flex:1 1 auto;min-width:0;justify-content:center;text-align:center}
@media (max-width:560px){
  .x-auth-gate .x-alert-actions .x-btn{flex:1 1 100%}
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   TARJETA DE COMPRA Y BOTON DE TIENDA (30-sep-2026)
   Antes: la tarjeta era un titulo y un boton, y el boton llevaba el NOMBRE COMPLETO del producto
   ("Ver precio de Torre de Refrigeracion ... 12.000 BTU/h ..."). Con nombres de 120 caracteres,
   el boton se desbordaba y todo parecia un formulario. Ahora:
     · el boton dice "Ver precio" + flecha, y el nombre completo va en el aria-label
     · la tarjeta lleva imagen, marca, nombre acotado a 2 lineas, precio REAL y tipo de uso
   El precio solo se pinta si el catalogo lo trae: nunca se estima.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.x-recovered-grid--buy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.x-buycard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover: hover) {
  .x-buycard:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  }
}

.x-buycard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--card, #fff) 92%, #000 8%);
  border-bottom: 1px solid var(--border);
}
.x-buycard__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.x-buycard__glyph { font-size: 1.6rem; opacity: .7; }

.x-buycard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  flex: 1;
}
.x-buycard__body .x-kicker { font-size: .72rem; letter-spacing: .06em; opacity: .8; }
.x-buycard__body .x-h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.32;
  min-height: 2.64em;
}
.x-buycard__price {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.x-buycard__body .x-meta { margin: 0; opacity: .78; }
.x-buycard__body .x-buybtn { margin-top: auto; width: 100%; justify-content: center; }

.x-buybtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-align: center;
}
.x-buybtn__ico {
  font-size: .95em;
  line-height: 1;
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .x-recovered-grid--buy { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .x-buycard__media { aspect-ratio: 1 / 1; padding: 10px; }
  .x-buycard__body { padding: 12px; gap: 6px; }
  .x-buycard__body .x-h3 { font-size: .92rem; }
  .x-buycard__price { font-size: 1.06rem; }
  .x-buybtn { font-size: .86rem; padding: 10px 12px; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   PREGUNTAS FRECUENTES DE LAS GUIAS (30-sep-2026)
   Usan <details>/<summary> nativo: funcionan sin JavaScript, se abren con el teclado y Google
   lee el texto igual. El schema FAQPage del <head> es lo que habilita el resultado enriquecido.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.x-recovered-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.x-faq { padding: 0; overflow: hidden; }
.x-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; cursor: pointer; font-weight: 600; line-height: 1.35;
  list-style: none; user-select: none;
}
.x-faq__q::-webkit-details-marker { display: none; }
.x-faq__q:hover { color: var(--accent); }
.x-faq__ico {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border);
  font-size: .95rem; line-height: 1; transition: transform .18s ease;
}
.x-faq[open] .x-faq__ico { transform: rotate(45deg); }
.x-faq__a { margin: 0; padding: 0 18px 16px; opacity: .9; }
.x-faq[open] { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }


/* ---------- Banner de programa (publicidad de TradeDoubler) ---------- */
/* Solo imagen, con width/height fijos y loading="lazy". Se pinta en tienda y cupones cuando el
   programa tiene creatividades (data/td/ads.json). */
.x-ad-slot { margin: 14px auto; }
.x-ad { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px;
  border: 1px solid rgba(14, 14, 40, .10); border-radius: 16px; background: #fbfbfe; }
.x-ad__link { display: block; line-height: 0; max-width: 100%; }
.x-ad__img { max-width: 100%; max-height: 320px; width: auto; height: auto; border-radius: 10px; }
/* `width:auto` es imprescindible: el <img> trae atributos width/height del tamano de banner
   estandar, y si la creatividad real es un LOGO pequeno el navegador lo escalaba hasta ese ancho
   (el "logo grandisimo" del jefe). Con ancho/alto en auto manda el tamano natural, y max-height
   evita que nada se desmadre. */
.x-ad__note { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(14, 14, 40, .55); }
@media (max-width: 560px) { .x-ad { padding: 10px; } .x-ad__img { max-width: 100%; max-height: 240px; width: auto; height: auto; } }

/* H2+H4: cada modelo de la guia lleva su enlace de compra de afiliado ademas de la ficha.
   Antes eran dos <a> que solo llevaban a la ficha, sin ninguna salida comercial. */
.x-guide-product-pair>.x-guide-pair-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border-radius:11px}
.x-guide-product-pair>.x-guide-pair-item:hover{background:var(--x-bg-2)}
.x-guide-product-pair .x-guide-pair-item__ficha{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;min-width:0}
.x-guide-product-pair .x-guide-pair-item__ficha .x-art{width:38px;height:38px;padding:4px}
.x-guide-product-pair .x-guide-pair-item__ficha span{display:grid;gap:2px;min-width:0}
.x-guide-product-pair .x-guide-pair-item__ficha b{font-size:13px;line-height:1.25}
.x-guide-product-pair .x-guide-pair-item__ficha small{color:var(--x-ink-3);font-size:11px}

/* Preguntas frecuentes de las GUIAS (I1: "se ven mal, tamaños y espacios").
   Medido con captura (05/10/2026): las cajas ocupaban los 1000px del contenedor entero y quedaba un
   hueco vacio enorme entre la pregunta y la flecha. Ahora: ancho de lectura, mas aire, la flecha
   rematada en un circulito y la caja se marca al pasar el raton. Solo afecta a .x-guide-faq, asi que
   NO cambia la FAQ de las fichas de producto ni ninguna otra pagina. */
.x-guide-faq{max-width:880px}
.x-guide-faq .x-acc{margin-top:12px;border-radius:14px;transition:border-color .18s ease,box-shadow .18s ease}
.x-guide-faq .x-acc:hover{border-color:var(--x-ink-4,#d8d8e2);box-shadow:0 2px 10px rgba(13,13,13,.05)}
.x-guide-faq .x-acc summary{padding:16px 18px;gap:16px;align-items:flex-start;font-size:15px;line-height:1.45}
.x-guide-faq .x-acc summary .x-ic{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f2f2f7;color:var(--x-ink-2);transition:background .18s ease,color .18s ease}
.x-guide-faq .x-acc[open] summary .x-ic{background:var(--x-green);color:#0d0d0d}
.x-guide-faq .x-acc__body{padding:0 18px 18px}
.x-guide-faq .x-acc__body .x-body{max-width:72ch;line-height:1.7;color:var(--x-ink-2)}
@media (max-width:640px){.x-guide-faq .x-acc summary{padding:15px 14px;font-size:14px}}

/* J2 · Carrusel de PROMOCIONES de la portada (05/10/2026).
   Fuente: src/data/td-vouchers.json (100 promociones de TradeDoubler con enlace propio; no las usaba
   nadie). Tarjeta tipo cupon: marca con su logo, texto a 3 lineas (los titulos de TD son largos y
   descuadraban la fila), chapa verde con el descuento, el codigo si lo tiene y la salida.
   min-height en el titulo para que todas las tarjetas queden a la misma altura. */
.x-rail--ofertas{margin-inline:0;padding-inline:0;padding-bottom:6px;align-items:stretch}
.x-promo-card{flex:0 0 min(74vw,250px);display:flex;flex-direction:column;gap:9px;border:var(--x-b-1);border-radius:20px;background:#fff;padding:14px;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease}
.x-promo-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(13,13,13,.10)}
.x-promo-card__top{display:flex;align-items:center;gap:9px;min-width:0}
.x-promo-card__mark{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#f2f2f7;overflow:hidden;font-size:12px;font-weight:800;color:var(--x-ink-2)}
.x-promo-card__mark img{width:100%;height:100%;object-fit:contain;display:block}
.x-promo-card__store{font-size:12px;font-weight:700;color:var(--x-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-promo-card__title{font-size:14px;font-weight:700;line-height:1.4;min-height:58px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.x-promo-card__foot{margin-top:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.x-promo-card__dto{font-size:11.5px;font-weight:800;color:#0d0d0d;background:var(--x-green);border-radius:999px;padding:3px 10px}
.x-promo-card__code{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--x-ink);background:#f2f2f7;border:1px dashed #d5d5e0;border-radius:8px;padding:3px 8px}
.x-promo-card__cta{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--x-ink-3)}
.x-promo-card:hover .x-promo-card__cta{color:var(--x-ink)}
@media (max-width:640px){.x-promo-card{flex:0 0 min(78vw,236px)}}

/* E1 · Filtros del catálogo COMPACTOS y visuales (pedido del jefe: "se ve demasiado grande").
   Antes: rejilla de 3 columnas con 24px de relleno y 16px de hueco; en móvil 2 columnas y muy alto.
   Ahora: barra pegajosa arriba, controles pequeños en una fila que se adapta, y una fila de chips
   (enlaces con ?parametro, el JS del catálogo ya lee la URL) para filtrar de un toque.
   Los chips son enlaces reales a propósito: funcionan sin JavaScript y Google los puede seguir. */
.x-filterchips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none;mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
.x-filterchips::-webkit-scrollbar{display:none}
.x-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--x-b-1);border-radius:999px;background:#fff;font-size:12.5px;font-weight:700;color:var(--x-ink-2);text-decoration:none;white-space:nowrap;transition:border-color .16s ease,background .16s ease,color .16s ease}
.x-chip:hover{border-color:var(--x-ink);color:var(--x-ink);background:#fafafa}
.x-chip--store{color:var(--x-ink-3)}
.x-catalog-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;margin:0 0 20px;padding:14px;background:var(--x-bg-2);border-radius:16px}
.x-catalog-filters .x-field{display:grid;gap:5px;min-width:0}
.x-catalog-filters .x-field>span{font-weight:700;font-size:11.5px;color:var(--x-ink-3);letter-spacing:.01em}
.x-catalog-filters .x-input{padding:8px 10px;font-size:13.5px;border-radius:10px}
.x-catalog-filters>.x-row{grid-column:1/-1;gap:8px}
.x-catalog-filters>.x-row .x-btn{padding:9px 16px;font-size:13.5px}
@media(min-width:900px){
  /* la barra acompaña al hacer scroll: antes habia que subir para cambiar el filtro */
  .x-filterchips{position:sticky;top:0;z-index:30;background:#fff;padding-top:8px}
  .x-catalog-filters{grid-template-columns:repeat(7,minmax(0,1fr));align-items:end}
  .x-catalog-filters>.x-row{grid-column:auto}
}
@media(max-width:639px){
  .x-catalog-filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:9px}
  .x-catalog-filters>.x-field:first-child{grid-column:1/-1}
  .x-catalog-filters .x-input{padding:7px 9px;font-size:13px}
}

/* P1 · Hueco de banner ancho (728x90) de la portada. En movil se encoge a lo que quepa en vez de
   desbordar (`max-width:100%`), y siempre con el aviso de "Publicidad" debajo (es un anuncio). */
.x-ad-slot--ancho{display:flex;justify-content:center;margin:6px auto 2px}
.x-ad-slot--ancho .x-ad{max-width:100%}
.x-ad-slot--ancho .x-ad__img{width:auto;max-width:100%;height:auto}
@media(max-width:760px){.x-ad-slot--ancho .x-ad__img{width:100%}}
.x-ad-slot--guia{margin:26px auto 6px;max-width:760px}
.x-ad-slot--guia .x-ad__img{max-width:100%;height:auto}
/* P1 · El cuarto tamaño (vertical 160x600). Flota a la derecha del contenido en pantallas anchas; en
   movil y tablet se oculta, porque una columna de 160 px al lado de un texto estrecho solo estorba. */
.x-ad-slot--vertical{display:none}
@media(min-width:1100px){
  .x-ad-slot--vertical{display:block;float:right;width:160px;margin:6px 0 18px 22px}
  .x-ad-slot--vertical .x-ad__img{width:160px;height:600px}
  .x-ad-slot--vertical .x-ad__note{font-size:10px;line-height:1.4}
}
/* BLOG (K1) · Rejilla del indice y chip activo. El chip activo se marca por haber entrado a /blog/guias
   y compania: como son URLs de verdad, funciona sin JavaScript y Google las indexa igual. */
.x-blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:18px}
.x-blog-item{display:grid;gap:7px;align-content:start;text-decoration:none;color:inherit;transition:box-shadow .18s ease,transform .18s ease}
.x-blog-item:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(13,13,13,.08)}
/* Portada de las tarjetas del blog (petición del jefe: «blog en forma de grid, con imagen de
   portada en cada artículo»). La foto va en una caja de proporción fija para que TODAS las
   tarjetas del grid queden iguales, sin importar el tamaño de la foto original. */
.x-blog-item__cover{display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#f4f4f6;margin-bottom:2px}
.x-blog-item__cover img{width:100%;height:100%;object-fit:contain;padding:12px}
.x-blog-item strong{font-size:15.5px;line-height:1.35}
.x-blog-item .x-meta{font-weight:700}
.x-chip--on{background:var(--x-ink);border-color:var(--x-ink);color:#fff}
.x-chip--on:hover{background:var(--x-ink);color:#fff}
/* I2 · Los datos de la portada ("143.585 productos", "958 bajadas con precio anterior"...) se CORTABAN en
   movil: el texto se salia de la pantalla. El bloque ya tenia flex-wrap y 2 columnas en movil; lo que
   faltaba es que su contenido pudiera encogerse: el chip es flex y por defecto no baja de su ancho
   minimo, asi que empujaba la pagina. Esta regla NO cambia la maquetacion (ni display ni grid): solo
   deja que el texto de dentro se parta cuando no cabe. */
/* I2 · El texto de los datos de la portada va ahora en su propio <i> (antes era texto suelto). Motivo:
   dentro de un contenedor flex, un texto suelto es un elemento anonimo con min-width:auto, asi que NO
   se encogia y empujaba la pagina; en movil "958 bajadas con precio anterior" salia CORTADO. Un elemento
   propio si se puede encoger y partir. */
.x-home-stats>span>i{font-style:normal;min-width:0;overflow-wrap:anywhere}
/* I2 · La banda de cookies se salia en movil: el boton "Aceptar analitica" salia cortado porque sus
   acciones llevan flex-shrink:0 (nunca se encogen). En pantallas pequenas se pone en columna y los
   botones se reparten y pueden bajar de linea. */
@media(max-width:700px){
  /* I2 · La banda de cookies se salia en movil y el boton "Aceptar analitica" salia cortado.
     Arreglo a prueba de balas: en pantallas pequenas los botones se APILAN a lo ancho (nada de
     repartir sitio entre dos), asi no hay ancho que negociar. Lo que fallaba antes: los botones son
     .x-btn.x-btn--sm (dos clases) y las acciones llevan flex-shrink:0, asi que no se encogian nunca. */
  .x-consent{flex-direction:column;align-items:stretch;gap:10px;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
  /* Mismo fallo que en los datos de la portada: el bloque de texto es hijo de un flex y por defecto no
     baja de su ancho minimo, asi que se salia por la derecha. Con min-width:0 ya se parte bien. */
  .x-consent>div{min-width:0;max-width:100%}
  /* OJO: las acciones NO son flex, son un GRID de 2 columnas (lo puso otro intento anterior), asi que
     `flex-direction:column` no hacia absolutamente nada y el segundo boton seguia cortado. En una
     columna sola, cada boton ocupa todo el ancho y no hay nada que cortar. */
  .x-consent__actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;flex-shrink:1}
  .x-consent__actions .x-btn{width:100%;min-width:0;white-space:normal;text-align:center;justify-content:center}
}
/* Q1 · Cifras de la tienda (precio desde/habitual/hasta + nº de productos). Bloque de contenido real
   dentro de la pagina de tienda, para que cada programa de afiliacion tenga pagina que lo explique. */
.x-store-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.x-store-facts>div{background:rgba(109,74,255,.05);border:1px solid rgba(13,13,13,.07);border-radius:14px;padding:10px 12px;min-width:0}
.x-store-facts span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--x-ink-3)}
.x-store-facts b{font-size:16px}
@media(max-width:640px){.x-store-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Carruseles con flechas (petición del jefe, 6-oct) ────────────────────────────────────
   Los carriles (.x-rail/.x-carril) ya se deslizan, pero la barra va oculta y no había ninguna
   pista visual de que se pudiera tirar de ellos. Las flechas las inyecta el cliente
   (src/client/app.js) como hijos ABSOLUTOS del contenedor del carril: fuera del flujo flex,
   así que no alteran el layout, y pegadas a los bordes de la zona visible. Se dibujan solo
   cuando de verdad hay más tarjetas (clase .x-carril-con-flechas la pone el JS midiendo). */
.x-carril-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:40px;height:40px;display:none;place-items:center;border-radius:999px;cursor:pointer;
  padding:0 0 3px;border:1px solid rgba(13,13,13,.10);background:#fff;color:var(--x-ink);
  font-size:22px;line-height:1;box-shadow:0 8px 22px rgba(14,14,40,.16);
  transition:background .15s ease,color .15s ease,opacity .15s ease}
.x-carril-con-flechas > .x-carril-flecha{display:grid}
.x-carril-flecha--ant{left:6px}
.x-carril-flecha--sig{right:6px}
.x-carril-flecha:hover:not(:disabled){background:var(--x-green);border-color:transparent}
.x-carril-flecha:focus-visible{outline:3px solid var(--x-green);outline-offset:2px}
.x-carril-flecha:disabled{opacity:.25;cursor:default;box-shadow:none}
/* En el móvil se desliza con el dedo: las flechas estorban más que ayudan. */
@media(max-width:900px){.x-carril-flecha{display:none}}

/* ============================================================
   ARREGLOS VISUALES · auditoría UX (10-oct-2026)
   ------------------------------------------------------------
   A) LOGOS (tienda/marca/promoción): UN SOLO contenedor, igual en toda la web.
      Antes convivían en una misma fila cajas de color sólido (var(--c)),
      cajas grises, cajas blancas con la imagen estirada y monogramas de texto
      sueltos, con tamaños y pesos visuales distintos (p.ej. una caja azul llena
      al lado de monogramas de color). Ahora TODOS los logos comparten el mismo
      cuadro: cuadrado, fondo BLANCO, borde suave y la imagen centrada sin
      deformar (object-fit:contain). El monograma de respaldo va centrado.
   B) Acciones hermanas de tarjeta (Guardar / Comparar): MISMO estilo.
      Antes "Guardar" era un botón con borde y "Comparar" texto sin borde,
      así que en la misma tarjeta parecían de dos webs distintas.
   ============================================================ */

/* --- A · caja única de logo (fondo blanco, cuadrada, imagen contenida) --- */
.x-logotile__mark,
.x-home-coupon__mark,
.x-storecard__logo,
.x-storehead__logo,
.x-brand__logo,
.x-offer__logo,
.x-storeglyph,
.x-promo-card__mark,
.x-hstrip__logo{
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:var(--x-logo-box,44px);
  height:var(--x-logo-box,44px);
  flex:none;
  padding:calc(var(--x-logo-box,44px) * .15);
  border:1px solid var(--x-line);
  border-radius:12px;
  background:#fff !important;
  color:var(--x-ink-2);
  font-weight:800;
  font-size:calc(var(--x-logo-box,44px) * .36);
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  overflow:hidden;
}
.x-logotile__mark img,
.x-home-coupon__mark img,
.x-storecard__logo img,
.x-storehead__logo img,
.x-brand__logo img,
.x-offer__logo img,
.x-storeglyph img,
.x-promo-card__mark img,
.x-hstrip__logo img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain;
  object-position:center;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border-radius:calc(12px - 4px);
}
/* Tamaño del cuadro por contexto: cada uno cuadrado y del mismo tipo. */
.x-logotile__mark{--x-logo-box:34px}
.x-hstrip__logo{--x-logo-box:34px}
.x-storeglyph{--x-logo-box:30px}
.x-promo-card__mark{--x-logo-box:40px}
.x-brand__logo{--x-logo-box:44px}
.x-offer__logo{--x-logo-box:44px}
.x-storecard__logo{--x-logo-box:48px}
.x-home-coupon__mark{--x-logo-box:48px}
.x-coupon-brand .x-storecard__logo{--x-logo-box:58px;background:#fff !important;color:var(--x-ink-2) !important;border:1px solid var(--x-line) !important}
.x-storehead__logo{--x-logo-box:60px}

/* --- B · Guardar / Comparar con el mismo aspecto --- */
.x-live-actions{justify-content:stretch}
.x-live-actions .x-btn{
  flex:1 1 0;
  min-width:0;
  justify-content:center;
  border:1.5px solid var(--x-line-2);
  background:#fff;
  color:var(--x-ink);
}
.x-live-actions .x-btn:hover{border-color:var(--x-ink);background:#fff}
.x-live-actions .x-btn.x-on{border-color:var(--x-red);color:var(--x-red)}

/* --- C · UN SOLO tamaño de cuadro de logo de tienda (M7 · auditoría menú/consistencia) ---
   El bloque A (arriba) ya hace que TODOS los logos compartan el MISMO cuadro: cuadrado, fondo
   BLANCO (también cuando NO hay logo y sale la inicial — M2) y el mismo borde/radio. Pero cada
   contexto arrastraba su propio --x-logo-box (34/44/48/58), así que el mismo concepto «logo de
   tienda» salía con CUATRO tamaños distintos (lo cazó la auditoría). El bloque A dice «el mismo
   cuadro»: aquí se le da un ÚNICO tamaño (48px) a las cuatro cajas de logo de tienda y se alinean
   las columnas que dependían del tamaño viejo. (Las cajas que NO son de tienda —glifo móvil,
   marca, cabecera de tienda hero— conservan su tamaño.) */
.x-logotile__mark{--x-logo-box:48px}
.x-storecard__logo{--x-logo-box:48px}
.x-offer__logo{--x-logo-box:48px}
.x-coupon-brand .x-storecard__logo{--x-logo-box:48px}
.x-logotile--store{grid-template-columns:48px minmax(0,1fr)}
.x-coupon-brand{grid-template-columns:48px minmax(0,1fr) auto}

/* --- D · «Tiendas con catálogo» (M4 · auditoría menú/consistencia) ---
   La fila es un CARRUSEL (lo que pidió el dueño: que deslice también en PC). Aquí solo se afina:
   las fichas encajan al deslizar (scroll-snap) para que ninguna quede a medias, y la regla MUERTA
   de 5 columnas que vivía en components.css (la anulaba esta hoja) ya se ha borrado allí. */
@media(min-width:1024px){
  .x-logorow{scroll-snap-type:x proximity;scroll-padding-inline:2px}
  .x-logorow>*{scroll-snap-align:start}
}