/* ══ EXPLORA EL CATÁLOGO, PROPUESTA A (dueño, 15/10/2026, explora) ══════════
   Los tres bloques del inicio (Index.cshtml, dentro de .ex de cs-portada.css)
   y la página nueva /marcas (Listados/Marcas.cshtml). Va después de los de
   página en tailwind-input.css. Hex literales: Tailwind v4 no emite las
   var(--color-…). Prefijos propios: .ex-cat* (inicio), .ex-fm*, .ex-tm* y
   .ex-tf (las filas por marca de «Lo que más se vende», 26/10/2026, por
   marca), .ex-marca* y .ex-tira (la tarjeta de marca, hoy solo en /marcas) y
   .mc-* (/marcas); .ex y .ex-seo siguen en cs-portada.css.

   EL TELÉFONO PRIMERO (390 y 360):
   · «Compra por categoría»: rejilla de 2 columnas (las 8 a la vista, sin
     deslizar: el dueño quiere todo a la vista), foto 4:3 sobre #f7f7f7 y,
     debajo, el nombre de 15 y dos líneas de 13 («N productos», «desde $X»).
     Desde 640, 4×2.
   · «Lo que más se vende» (una fila por marca desde el 26/10/2026, por
     marca): cada fila, una .cs-tira del sistema con tarjetas 2×2 del 80 %
     (asoma la siguiente); en la compu 4 a la vista con flechas (ver su bloque).
   · /marcas: el h1 y la bajada en ~90 px, «Las que más se venden» en 2
     columnas (4 desde 1024), y la barra pegajosa con el buscador de 44 y el
     índice de letras de 34 que se desliza (en una fila hasta 1279).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Los bloques del inicio ─────────────────────────────────────────────── */
.ex-bloque{margin-top:1.75rem}
.ex-bloque:first-child{margin-top:0}
.ex-bloque[hidden]{display:none}

/* 1 · Compra por categoría */
.ex-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.ex-cats>li{display:flex;min-width:0}
.ex-cat{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;padding:.5rem .5rem .7rem;border-radius:1rem;background:#fff;
  box-shadow:0 0 0 1px rgb(229 231 235 / .8);color:#0f1111;text-decoration:none;transition:box-shadow .2s}
.ex-cat:hover{box-shadow:0 0 0 1px #f9a8d4,0 10px 24px -14px rgba(219,39,119,.35)}
.ex-cat:focus-visible{outline:2px solid #db2777;outline-offset:2px}
.ex-cat-foto{position:relative;display:block;aspect-ratio:4/3;margin:0 0 .5rem;border-radius:.75rem;background:#f7f7f7;overflow:hidden}
.ex-cat-foto img{position:absolute;inset:0;width:100%;height:100%;padding:.5rem;object-fit:contain;mix-blend-mode:multiply}
.ex-cat-nom{font:700 15px/1.25 'Plus Jakarta Sans',Inter,sans-serif;letter-spacing:-.01em;color:#0f1111;overflow-wrap:anywhere}
.ex-cat:hover .ex-cat-nom{color:#9d174d;text-decoration:underline;text-underline-offset:2px}
.ex-cat-det{margin-top:.15rem;font:400 13px/1.35 Inter,sans-serif;color:#4b5563}
.ex-cat-det+.ex-cat-det{margin-top:0}
.ex-cat-det b{font-weight:700;color:#0f1111}

/* Las tiras: un poco de aire arriba para que la tarjeta que sube al pasar
   el mouse (.store-card:hover, -4 px) no se corte contra el borde de la pista. */
.ex-tira .cs-tira-pista{padding-top:6px}
.ex-tira .cs-tira-pista>li{display:flex;min-width:0}

/* 2 · La tarjeta de marca (_ExploraMarca: en /marcas; la tira del inicio se
   fue el 22/10/2026) */
.ex-marca{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;padding:.5rem .5rem .7rem;border-radius:1rem;background:#fff;
  box-shadow:0 0 0 1px rgb(229 231 235 / .8);color:#0f1111;text-decoration:none;transition:box-shadow .2s}
.ex-marca:hover{box-shadow:0 0 0 1px #f9a8d4,0 10px 24px -14px rgba(219,39,119,.35)}
.ex-marca:focus-visible{outline:2px solid #db2777;outline-offset:2px}
.ex-marca-fotos{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:4px;aspect-ratio:3/2;margin:0 0 .5rem}
.ex-marca-fotos.es-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ex-marca-fotos.es-3{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}
.ex-marca-fotos.es-3 .es-grande{grid-row:1 / span 2}
.ex-marca-foto{position:relative;display:block;min-width:0;min-height:0;border-radius:.625rem;background:#f7f7f7;overflow:hidden}
.ex-marca-foto img{position:absolute;inset:0;width:100%;height:100%;padding:.3rem;object-fit:contain;mix-blend-mode:multiply}
.ex-marca-mono{display:flex;align-items:center;justify-content:center;border-radius:.625rem;background:#fdf2f8;
  font:800 34px/1 'Plus Jakarta Sans',Inter,sans-serif;color:#9d174d}
.ex-marca-nom{font:700 15px/1.25 'Plus Jakarta Sans',Inter,sans-serif;letter-spacing:-.01em;color:#0f1111;overflow-wrap:anywhere}
.ex-marca:hover .ex-marca-nom{color:#9d174d;text-decoration:underline;text-underline-offset:2px}
.ex-marca-n{margin-top:.15rem;font:400 13px/1.35 Inter,sans-serif;color:#4b5563}

/* La punteada «Las N marcas» al final de la tira del inicio (.ex-todas), la
   del carrusel (.ex-fantasma) y sus esqueletos (.ex-esq) se fueron con la
   tira y los carruseles (22/10/2026, dueño): ahora va «Lo que más se vende». */

/* 3 · «LO QUE MÁS SE VENDE», UNA FILA POR MARCA (dueño, 26/10/2026, por marca)
   Como «Explora el catálogo» de la app del teléfono (TarjetaExploraView) y las
   tarjetas de Amazon. Las 12 tarjetas de una 2×2 (.ex-mv*, 22/10/2026) se
   fueron. Cada marca (.ex-fm): su nombre bonito y «Ver los N →» arriba, y una
   .cs-tira con sus tarjetas 2×2 (.ex-tm, _MasVendidoMarca) y al final la
   fantasma punteada «Ver los N productos de {Marca}» (.ex-tf).
   · LA TARJETA: blanca con su aro; el título (2 líneas como mucho) con «›» y,
     en una familia, «34 tonos · Labiales»; la 2×2 de teselas GRISES
     (#f7f7f7: la foto se funde con multiply, el nombre en UNA línea con «…»
     y el precio partido con la píldora «-10%» si le toca). Con 3 teselas, la
     cuarta celda es «Ver los N» (.ex-tm-mas); con 2, «Ver los N» va a lo
     ancho debajo; con 1, la tesela ocupa la 2×2 (como la app).
   · LA CABECERA MIDE LO QUE TRAE (26/10/2026, por marca, revisión; la app
     lo arregló el 15/10 en TarjetaExploraView). Por debajo de 1024 se ve
     una tarjeta a la vez y la 2×2 va pegada al título: lo que sobra cuando
     otra tarjeta de la fila tiene el título más alto se lo llevan las fotos
     (.ex-tm-rej y .ex-tm-foto crecen), no una franja blanca de hasta 47 px
     («Más de Almay»). Desde 1024, con 4 lado a lado, la 2×2 va pegada al pie
     (margin-top:auto) para que todas queden a la misma altura.
   · < 640: la pista sangra al borde y cada tarjeta mide el 80 % (asoma la
     siguiente, como Amazon y la app; snap).
   · 640-1023: dos y asoma la tercera; flechas desde 768.
   · 1024-1279: 3 y asoma la cuarta (revisión: con 4 la tesela medía 99 px,
     menos que en un teléfono de 360, y el «…» se comía el tono).
   · ≥ 1280: 4 a la vista con las flechas del sistema (cs-sistema.js las
     esconde en los extremos); 5 desde 1600, que si no la tarjeta mide 450
     px a 1920; desde 2048, 5 y asoma la fantasma (antes 6 sin deslizar: el
     dueño pidió «con scroll»). La piel «Caribe suave» de los cuadraditos de
     la portada (cs-portada.css): borde crema, sombra aguamarina apenas, el
     azul noche del logo en el nombre de la marca y teselas de un gris tibio.
   · Los esqueletos (.ex-tm.es-esq) de las filas perezosas: las MISMAS piezas
     de la tarjeta con el texto transparente sobre su barra (miden lo mismo:
     al llegar la fila no salta nada), quietos; sin JavaScript no se ven
     (noscript de Index.cshtml). */
.ex-fm{position:relative}
.ex-pm-bloque>.cs-sec+.ex-fm{margin-top:.875rem}
.ex-fm+.ex-fm{margin-top:1.5rem}
.ex-fm[hidden]{display:none}
.ex-fm-cab{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin:0 0 .5rem}
.ex-fm-marca{min-width:0;margin:0;font:800 19px/1.2 'Plus Jakarta Sans',Inter,sans-serif;letter-spacing:-.02em}
.ex-fm-marca a{color:#0f1111;text-decoration:none}
.ex-fm-marca a:hover{color:#9d174d;text-decoration:underline;text-underline-offset:3px}
.ex-fm-marca a:focus-visible{outline:2px solid #db2777;outline-offset:2px;border-radius:.25rem}
.ex-fm-ver{flex:none;display:inline-flex;align-items:center;gap:.15rem;min-height:2.25rem;font:600 14px/1.2 Inter,sans-serif;color:#9d174d;
  text-decoration:none;white-space:nowrap}
.ex-fm-ver::after{content:"";width:1em;height:1em;background:currentColor;-webkit-mask:var(--cs-chev-d) center/contain no-repeat;mask:var(--cs-chev-d) center/contain no-repeat}
.ex-fm-ver:hover{text-decoration:underline;text-underline-offset:2px}
.ex-fm-ver:focus-visible{outline:2px solid #db2777;outline-offset:2px;border-radius:.25rem}
.ex-fm-tira .cs-tira-pista{padding-bottom:10px}
.ex-fm-tira .cs-tira-pista>li{display:flex;min-width:0;flex-basis:80%}

/* El vigía de la tanda que sigue (27/10/2026, dueño: «carga 4 hileras y luego
   otras 4»): un encabezado y unas tarjetas grises, del ancho de las de verdad,
   mientras HomeController.FilasDeMarca responde. Quieto: es lo último de la
   sección y se va solo cuando no quedan marcas. */
.ex-fm-mas{display:block;margin-top:1.5rem}
.ex-fm-mas-cab{display:block;width:9rem;height:1.45rem;margin:0 0 .75rem;border-radius:.375rem;background:#eeeeee}
.ex-fm-mas-tira{display:flex;gap:.625rem;overflow:hidden}
.ex-fm-mas-tira i{flex:0 0 80%;height:24rem;border-radius:1rem;background:#fff;box-shadow:0 0 0 1px rgb(229 231 235 / .9)}
@media (min-width:640px){.ex-fm-mas-tira i{flex-basis:44%}}
@media (min-width:1024px){.ex-fm-mas-tira{gap:1rem}.ex-fm-mas-tira i{flex-basis:calc((100% - 3rem) / 3.25)}}
@media (min-width:1280px){.ex-fm-mas-tira i{flex-basis:calc((100% - 3rem) / 4)}}
@media (min-width:1600px){.ex-fm-mas-tira i{flex-basis:calc((100% - 4rem) / 5)}}

/* La tarjeta. position:relative en ella y en cada tesela: el «$7.30» para el
   lector (.sr-only de PrecioPartido) es absoluto y, sin un contenedor
   posicionado dentro de la pista, una tarjeta fuera de pantalla ensanchaba
   la página del teléfono (la lección de las .ex-mv del 22/10/2026). */
.ex-tm{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-width:0;padding:.625rem .75rem .75rem;border-radius:1rem;background:#fff;
  box-shadow:0 0 0 1px rgb(229 231 235 / .9)}
.ex-tm-cab{margin:0 0 .5rem}
.ex-tm-tit{margin:0;font:800 16px/1.25 'Plus Jakarta Sans',Inter,sans-serif;letter-spacing:-.015em}
.ex-tm-tit a{display:flex;align-items:flex-start;justify-content:space-between;gap:.375rem;color:#0f1111;text-decoration:none}
.ex-tm-tit span{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.ex-tm-tit a::after{content:"";flex:none;width:1.15em;height:1.15em;margin-top:.05em;background:currentColor;
  -webkit-mask:var(--cs-chev-d) center/contain no-repeat;mask:var(--cs-chev-d) center/contain no-repeat}
.ex-tm-tit a:hover{color:#9d174d}
.ex-tm-tit a:hover span{text-decoration:underline;text-underline-offset:3px}
.ex-tm-tit a:focus-visible{outline:2px solid #db2777;outline-offset:2px;border-radius:.25rem}
.ex-tm-sub{margin:.15rem 0 0;font:500 12.5px/1.3 Inter,sans-serif;color:#565959;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* La 2×2: filas iguales (1fr con alto automático = la más alta), así «Ver los
   N» mide lo que una tesela. Por debajo de 1024 crece con la tarjeta y sus
   fotos se llevan lo que sobra (ver arriba); desde 1024, pegada al pie. */
.ex-tm-rej{list-style:none;flex:1 1 auto;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:.5rem}
.ex-tm-rej>li{display:flex;min-width:0}
.ex-tm-rej.es-1>li:first-child{grid-column:1 / -1;grid-row:1 / -1}
.ex-tm-rej.es-2:not(.con-mas)>li{grid-row:1 / -1}
.ex-tm-rej.es-2.con-mas>.ex-tm-mas-li{grid-column:1 / -1}
.ex-tm-p{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-width:0;border-radius:.75rem;background:#f7f7f7;overflow:hidden;
  color:#0f1111;text-decoration:none}
.ex-tm-p:focus-visible{outline:2px solid #db2777;outline-offset:2px}
.ex-tm-foto{position:relative;display:block;flex:1 0 auto;aspect-ratio:1}
/* LA FOTO NO SE QUEDA CON EL DEDO (27/10/2026, dueño: «no permite scrollear
   horizontalmente si toco la imagen»). La foto era el blanco del toque: el
   teléfono la trata como imagen (mantener para arrastrarla o guardarla) y,
   en cuanto empezaba ese gesto, la tira ya no se movía. Sin pointer-events el
   toque cae en el enlace (abre igual el producto) y el deslizamiento es de la
   tira. El zoom de hover, solo con mouse: en el teléfono se quedaba pegado
   tras el toque y la foto escalada desbordaba su tesela recortada. */
.ex-tm-foto img{position:absolute;inset:0;width:100%;height:100%;padding:8%;object-fit:contain;mix-blend-mode:multiply;transition:transform .2s ease;
  pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
@media (hover:hover) and (pointer:fine){.ex-tm-p:hover .ex-tm-foto img{transform:scale(1.04)}}
.ex-tm-pie{display:flex;flex-direction:column;gap:.05rem;min-width:0;padding:0 .5rem .45rem}
.ex-tm-nom{font:500 12.5px/1.3 Inter,sans-serif;color:#0f1111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-tm-p:hover .ex-tm-nom{color:#9d174d;text-decoration:underline;text-underline-offset:2px}
.ex-tm-precios{display:flex;align-items:center;gap:.35rem;min-width:0;white-space:nowrap}
.ex-tm-precio{font:700 17px/1.15 Inter,sans-serif;color:#0f1111;white-space:nowrap}
.ex-tm-precio sup{position:relative;top:-.5em;font-size:max(.55em,10px);font-weight:600;vertical-align:baseline}

/* La celda «Ver los 6 tonos» / «Ver los 85»: rosa claro con su círculo blanco y «›». */
.ex-tm-mas{position:relative;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-width:0;
  min-height:4.5rem;padding:.5rem;border-radius:.75rem;background:#fdf2f8;color:#9d174d;text-align:center;text-decoration:none}
.ex-tm-mas-ic{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:#fff;color:#be185d}
.ex-tm-mas-ic::before{content:"";width:1.1rem;height:1.1rem;background:currentColor;-webkit-mask:var(--cs-chev-d) center/contain no-repeat;mask:var(--cs-chev-d) center/contain no-repeat}
.ex-tm-mas-txt{font:700 13px/1.25 Inter,sans-serif;overflow-wrap:anywhere}
.ex-tm-mas:hover .ex-tm-mas-txt{text-decoration:underline;text-underline-offset:2px}
.ex-tm-mas:focus-visible{outline:2px solid #db2777;outline-offset:2px}
.ex-tm-rej.es-2.con-mas .ex-tm-mas{flex-direction:row}

/* La fantasma: «Ver los 85 productos de Maybelline», del alto de las demás. */
.ex-tf{position:relative;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-width:0;min-height:12rem;
  padding:1.5rem 1.25rem;border:2px dashed #f9a8d4;border-radius:1rem;background:#fff;color:#9d174d;text-align:center;text-decoration:none}
.ex-tf-ic{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:50%;background:#fdf2f8;color:#be185d}
.ex-tf-ic::before{content:"";width:1.6rem;height:1.6rem;background:currentColor;-webkit-mask:var(--cs-chev-d) center/contain no-repeat;mask:var(--cs-chev-d) center/contain no-repeat}
.ex-tf-txt{max-width:14rem;font:800 18px/1.25 'Plus Jakarta Sans',Inter,sans-serif;letter-spacing:-.015em;overflow-wrap:anywhere}
.ex-tf:hover{border-color:#ec4899}
.ex-tf:hover .ex-tf-txt{text-decoration:underline;text-underline-offset:3px}
.ex-tf:focus-visible{outline:2px solid #db2777;outline-offset:2px}

/* El esqueleto de una tarjeta mientras llega su fila (26/10/2026, por marca,
   revisión): las piezas de la tarjeta de verdad (el título real, que parte
   igual; el subtítulo; las teselas con su pie) con el texto transparente y su
   barra gris, así mide lo mismo y nada salta al llegar. El título deja libre
   lo que ocupa el «›» de la tarjeta (1.15em y el hueco de .375rem). Las
   barras del pie van al 70 % del alto de su línea, para que se separen. */
.ex-tm.es-esq{pointer-events:none}
.ex-tm.es-esq .ex-tm-tit>span{width:fit-content;margin-right:calc(1.15em + .375rem);border-radius:.375rem;color:transparent;background:#eeeeee}
.ex-tm.es-esq .ex-tm-sub{width:fit-content;max-width:100%;border-radius:.3rem;color:transparent;background:#f2f2f2}
.ex-tm.es-esq .ex-tm-foto{margin:8%;border-radius:.5rem;background:rgb(0 0 0 / .035)}
.ex-tm.es-esq .ex-tm-nom{width:75%;color:transparent;background:linear-gradient(rgb(0 0 0 / .06),rgb(0 0 0 / .06)) 0 50% / 100% 70% no-repeat;border-radius:.3rem}
.ex-tm.es-esq .ex-tm-precio{display:inline-block;width:3.2em;color:transparent;background:linear-gradient(rgb(0 0 0 / .06),rgb(0 0 0 / .06)) 0 50% / 100% 70% no-repeat;border-radius:.3rem}
@media (prefers-reduced-motion:reduce){.ex-tm-foto img{transition:none}.ex-tm-p:hover .ex-tm-foto img{transform:none}}

/* ── /marcas ────────────────────────────────────────────────────────────── */
.mc-pagina{padding-top:.75rem;padding-bottom:1rem}
.mc-migas-arriba{display:none;margin:0 0 .5rem}
.mc-migas-abajo{margin-top:2rem}
.mc-cab{margin:0 0 .25rem}
.mc-cab .cs-bajada b{font-weight:700;color:#0f1111}
/* «100% originales»: en el teléfono, su propia línea y sin «·» (con el
   punto abría la segunda línea, «· 100% originales»); desde 640, en la misma
   línea y el punto lo pone el ::before (16/10/2026, explora). */
.mc-junto{display:block;white-space:nowrap}

/* «Las que más se venden»: en el teléfono la tira del inicio (.cs-tira, se
   ven 2 y asoma la tercera); desde 640, rejilla de 4 sin deslizar. */

/* La barra pegajosa: el buscador y el índice. En el teléfono a top:0 (el
   header no se pega) y a todo el ancho; desde 768 bajo el header fijo de 80. */
.mc-barra{position:sticky;top:0;z-index:20;margin:0 -1rem .75rem;padding:.5rem 1rem;background:#fff;
  box-shadow:0 1px 0 #e5e7eb,0 6px 12px -10px rgba(15,17,17,.25)}
.mc-buscar{margin:0 0 .5rem}
/* El índice: UNA fila que se desliza. Con 36 de ancho y 4 de aire, a 390
   cabían justas A–I y la J empezaba fuera: parecía que el índice acababa en
   la I. Con 34 y 2 asoma la siguiente letra, y el script de Marcas.cshtml le
   pone es-mas mientras quede índice a la derecha: el borde se desvanece,
   como la tira de Amazon que queda cortada (16/10/2026, explora). */
.mc-letras ul{list-style:none;margin:0 -1rem;padding:0 1rem;display:flex;gap:.125rem;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:1rem}
.mc-letras ul::-webkit-scrollbar{display:none}
.mc-letras ul.es-mas{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 3rem),transparent)}
.mc-letras li{flex:none}
.mc-letra-ir{display:inline-flex;align-items:center;justify-content:center;min-width:2.125rem;height:2.25rem;padding:0 .25rem;border-radius:.5rem;
  font:700 14px/1 Inter,sans-serif;color:#9d174d;text-decoration:none}
a.mc-letra-ir:hover{background:#fdf2f8}
a.mc-letra-ir:focus-visible{outline:2px solid #db2777;outline-offset:1px}
.mc-letra-ir.es-apagada{color:#9ca3af;font-weight:500;pointer-events:none}

.mc-nada{margin:1rem 0;font:400 14px/1.5 Inter,sans-serif;color:#4b5563}
.mc-nada[hidden]{display:none}

/* Cada letra: su título y las marcas en tarjetitas de 2 columnas (Amazon:
   foto a la izquierda, nombre y conteo a la derecha). El ancla deja libre
   el alto REAL de la barra pegajosa: --mc-barra lo pone el script de
   Marcas.cshtml al cargar y al cambiar el ancho (16/10/2026, explora); sin
   script, el alto de la barra de una fila. */
.mc-grupo{margin:0 0 1.25rem;scroll-margin-top:calc(var(--mc-barra,6.5rem) + .75rem)}
.mc-grupo[hidden]{display:none}
.mc-letra{margin:0 0 .5rem;padding-bottom:.25rem;border-bottom:1px solid #e5e7eb;font:800 20px/1.2 'Plus Jakarta Sans',Inter,sans-serif;color:#0f1111}
.mc-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.mc-lista>li{display:flex;min-width:0}
.mc-lista>li[hidden]{display:none}
.mc-marca{flex:1 1 auto;display:flex;align-items:center;gap:.5rem;min-width:0;min-height:3.75rem;padding:.4rem .6rem .4rem .4rem;border-radius:.75rem;
  background:#fff;box-shadow:0 0 0 1px rgb(229 231 235 / .8);color:#0f1111;text-decoration:none}
.mc-marca:hover{box-shadow:0 0 0 1px #f9a8d4}
.mc-marca:focus-visible{outline:2px solid #db2777;outline-offset:2px}
.mc-foto{position:relative;flex:none;width:2.75rem;height:2.75rem;border-radius:.5rem;background:#f7f7f7;overflow:hidden}
.mc-foto img{position:absolute;inset:0;width:100%;height:100%;padding:.2rem;object-fit:contain;mix-blend-mode:multiply}
.mc-mono{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#fdf2f8;
  font:800 18px/1 'Plus Jakarta Sans',Inter,sans-serif;color:#9d174d}
.mc-texto{display:flex;flex-direction:column;min-width:0}
.mc-nom{font:700 14px/1.25 Inter,sans-serif;color:#0f1111;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-marca:hover .mc-nom{color:#9d174d;text-decoration:underline;text-underline-offset:2px}
.mc-n{font:400 12.5px/1.3 Inter,sans-serif;color:#4b5563}

/* ═══════ Desde 640 ═══════ */
@media (min-width:640px){
  .mc-junto{display:inline}
  .mc-junto::before{content:'· '}
  .ex-cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
  .ex-fm-tira .cs-tira-pista>li{flex-basis:44%}
  .mc-top .cs-tira-pista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:0;padding:2px;overflow:visible}
  .mc-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ═══════ Desde 768: sin sangrados; lo pegajoso bajo el header de 80 ═══════ */
@media (min-width:768px){
  .ex-bloque{margin-top:2.5rem}
  .ex-bloque:first-child{margin-top:0}
  .mc-pagina{padding-top:1rem}
  .mc-migas-arriba{display:block}
  .mc-migas-abajo{display:none}
  .mc-barra{top:88px;margin:0 0 1rem;padding:.75rem;border-radius:1rem;box-shadow:0 0 0 1px #e5e7eb,0 6px 16px -12px rgba(15,17,17,.3);
    display:flex;align-items:center;gap:1rem}
  .mc-buscar{flex:0 0 18rem;margin:0}
  .mc-letras{flex:1 1 auto;min-width:0}
  /* Hasta 1279 las letras siguen en UNA fila que se desliza (16/10/2026,
     explora): con flex-wrap se repartían en 2-3 filas (a 768, «A-L», «M-X»,
     «Y Z #») y la barra crecía hasta 136 px. Desde 1280 caben todas. */
  .mc-letras ul{margin:0;padding:0;gap:.125rem;scroll-padding-inline:0}
  .mc-letra-ir{min-width:2rem;height:2.25rem}
  /* Bajo el header fijo (88) y la barra, con su alto real. */
  .mc-grupo{scroll-margin-top:calc(88px + var(--mc-barra,4.25rem) + .75rem)}
  .mc-lista{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.625rem}
}

/* ═══════ Desde 1024 ═══════ */
@media (min-width:1024px){
  .ex-cats{gap:1rem}
  .ex-cat-foto{aspect-ratio:16/10}
  .mc-top .cs-tira-pista{gap:1rem}
  .mc-marca{min-height:4.25rem}
  .mc-foto{width:3.25rem;height:3.25rem}
  /* «Lo que más se vende», una fila por marca (26/10/2026, por marca): las
     flechas del sistema y la piel «Caribe suave». La pista sale 10 px a cada
     lado (y los devuelve de relleno) para que la sombra de las tarjetas no
     se corte contra su borde. */
  .ex-pm-bloque>.cs-sec+.ex-fm{margin-top:1.25rem}
  .ex-fm+.ex-fm{margin-top:2rem}
  .ex-fm-cab{margin-bottom:.625rem}
  .ex-fm-marca{font-size:22px}
  .ex-fm-marca a{color:#00215a}
  .ex-fm-tira .cs-tira-pista{gap:1rem;margin:0 -.625rem;padding:.25rem .625rem .875rem;scroll-padding-inline:.625rem}
  /* Hasta 1279, 3 y asoma la cuarta (revisión, 26/10/2026): con 4 la tesela
     medía 99 px a 1024 (115 en un teléfono de 360) y casi todos los tonos
     salían cortados; así mide ~125. Las 4 a la vista, desde 1280. */
  .ex-fm-tira .cs-tira-pista>li{flex-basis:calc((100% - 3rem) / 3.25)}
  .ex-fm-tira .cs-flecha.es-izq{left:-.25rem}
  .ex-fm-tira .cs-flecha.es-der{right:-.25rem}
  /* Las 4 lado a lado: la 2×2 pegada al pie para que todas queden a la misma
     altura aunque un título tenga 1 línea y otro 2; las fotos, cuadradas. */
  .ex-tm-rej{flex:none;margin-top:auto}
  .ex-tm-foto{flex:none}
  .ex-tm{padding:.75rem .75rem .8rem;border:1px solid #f3e7d8;border-radius:.85rem;box-shadow:0 3px 10px rgba(20,90,100,.1)}
  .ex-tm-cab{margin-bottom:.625rem}
  .ex-tm-tit{font-size:16px}
  .ex-tm-sub{font-size:12.5px}
  .ex-tm-rej{gap:.5rem}
  .ex-tm-p{background:#f6f4f0}
  .ex-tm-pie{padding:.1rem .5rem .5rem}
  .ex-tf{border-radius:.85rem}
}

/* ═══════ Desde 1280: 4 a la vista y las tarjetas de las filas respiran ═══════ */
@media (min-width:1280px){
  .ex-fm-tira .cs-tira-pista>li{flex-basis:calc((100% - 3rem) / 4)}
  .ex-tm{padding:.875rem 1rem 1rem}
  .ex-tm-tit{font-size:17px}
  .ex-tm-sub{font-size:13px}
  .ex-tm-rej{gap:.75rem}
  .ex-tm-pie{padding:.1rem .625rem .55rem}
  .ex-tm-nom{font-size:13px}
  .ex-tm-precio{font-size:18px}
  .ex-tf-txt{font-size:19px}
}

/* ═══════ Desde 1280: el índice entero a la vista ═══════ */
@media (min-width:1280px){
  .mc-letras ul{flex-wrap:wrap;overflow:visible}
  .mc-letras ul.es-mas{-webkit-mask-image:none;mask-image:none}
}

/* ═══════ Desde 1600: las 8 categorías en una fila (22/10/2026, dueño) ═══════
   Con el inicio a todo el ancho (cs-portada.css), en 4x2 cada tarjeta medía
   ~440 px a 1920 y la foto se volvía enorme. */
@media (min-width:1600px){
  .ex-cats{grid-template-columns:repeat(8,minmax(0,1fr))}
  /* Cinco tarjetas a la vista: con 4, a 1920 cada una medía ~450 px (26/10/2026, por marca). */
  .ex-fm-tira .cs-tira-pista>li{flex-basis:calc((100% - 4rem) / 5)}
}
/* Desde 2048, 5 y asoma la fantasma (26/10/2026, por marca, revisión): con 6
   a la vista las 5 tarjetas y la fantasma cabían enteras, la fila ya no se
   deslizaba ni llevaba flechas, y el dueño pidió «4 o 5 cuadros 2x2 con scroll». */
@media (min-width:2048px){
  .ex-fm-tira .cs-tira-pista>li{flex-basis:calc((100% - 5rem) / 5.5)}
}

/* 4 · «LOS MÁS VENDIDOS DE LA TIENDA» Y «PARA TU TONO» (dueño, 27/10/2026:
   «También añade una sección de tu tono y más vendidos en general.» · «En la
   página principal»). Las dos filas (_FilaDeLaTienda) son las de marca: la
   misma .cs-tira.ex-fm-tira y las mismas tarjetas 2×2 (.ex-tm,
   _TarjetasDosPorDos), así que no traen medidas propias. Aquí solo lo suyo:
   el punto de su color en el título, los enlaces de la bajada, el puesto
   «#N» sobre la foto (el ámbar de la ventana «Lo más vendido») y la
   invitación al test sin tono (.ex-it*). Va al final, con sus propios
   media queries después del de 2048: así las reglas de las filas por marca
   no se mueven. */
.ex-dt-punto{display:inline-block;width:.7em;height:.7em;margin:0 .4em .08em 0;border-radius:9999px;vertical-align:middle;
  box-shadow:0 0 0 2px #fff,0 0 0 3px rgb(0 0 0 / .14)}
.ex-dt-sub a{color:#9d174d;font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.ex-dt-sub a:hover{color:#831843}
.ex-dt-sub a:focus-visible{outline:2px solid #db2777;outline-offset:2px;border-radius:.25rem}
.ex-tm-ins{position:absolute;top:.35rem;left:.35rem;z-index:1;min-width:1.75rem;padding:.1rem .4rem;border-radius:9999px;
  background:#fbbf24;color:#111827;font:800 11px/1.3 Inter,sans-serif;text-align:center;pointer-events:none}
.ex-it-caja{display:grid;gap:.75rem;padding:1rem;border-radius:1rem;background:#fff;box-shadow:0 0 0 1px rgb(229 231 235 / .9)}
.ex-it-bolitas{list-style:none;margin:0;padding:0;display:flex;gap:.4rem}
.ex-it-bolitas li{flex:none;width:1.5rem;height:1.5rem;border-radius:9999px;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.18)}
.ex-it-datos{margin:0 0 .25rem;font:600 12px/1.3 Inter,sans-serif;color:#9d174d}
.ex-it-acc{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.ex-it-acc .cs-boton{flex:1 1 100%}
.ex-it-otra{display:inline-flex;align-items:center;min-height:2.25rem;font:600 13.5px/1.3 Inter,sans-serif;color:#9d174d;
  text-decoration:underline;text-underline-offset:2px}
.ex-it-otra:focus-visible{outline:2px solid #db2777;outline-offset:2px;border-radius:.25rem}
/* De 768 a 1023 (iPad en vertical) las bolitas van arriba a todo el ancho y
   debajo el texto con el botón (27/10/2026, revisión): en tres columnas el
   enlace del traductor no se parte y al texto le quedaban 188 px a 768, con
   «cuenta» sola en otra línea. Desde 1024, las tres columnas en una fila. */
@media (min-width:768px){
  .ex-it-caja{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem 1.25rem;padding:1.25rem 1.5rem}
  .ex-it-bolitas{grid-column:1 / -1}
  .ex-it-acc{flex-direction:column;align-items:flex-end;gap:.25rem}
  .ex-it-acc .cs-boton{flex:none}
}
@media (min-width:1024px){
  .ex-it-caja{grid-template-columns:auto minmax(0,1fr) auto;gap:1.25rem;border:1px solid #f3e7d8;border-radius:.85rem;box-shadow:0 3px 10px rgba(20,90,100,.1)}
  .ex-it-bolitas{grid-column:auto}
  .ex-tm-ins{font-size:12px}
}

/* 5 · «SIGUE COMPRANDO» (dueño, 27/10/2026: «…aparte añade una seccion de
   continuar comprando mostrando los productos que le interesaron al
   cliente.» · «la seccion del tono seria lo equivalente a la seccion de
   recomendaciones de amazon.»). La fila es la de la tienda (_FilaDeLaTienda:
   .cs-tira.ex-fm-tira y las 2×2 .ex-tm), así que no trae medidas. Mientras
   llega, el hueco que deja el script del inicio usa las tarjetas grises del
   vigía de las tandas (.ex-fm-mas-tira, bloque 3), con el ancho de las de
   verdad en cada ancho y, solo aquí (.ex-sc, las reglas del final), también
   su alto y el relleno de su pista. En el encabezado, en vez de «Ver los N»,
   «Borrar historial» (el «Remove all items from view» de Amazon): gris,
   subrayado y sin «›», porque no lleva a ninguna parte. Sin JavaScript el
   script del hueco se queda como primer hijo de .ex y la primera sección
   perdería su margen cero: la regla de .ex>script se lo devuelve. */
.ex-sc-borrar{flex:none;display:inline-flex;align-items:center;min-height:2.25rem;margin:0;padding:0 .125rem;border:0;background:none;
  font:500 13px/1.2 Inter,sans-serif;color:#4b5563;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;cursor:pointer}
.ex-sc-borrar:hover{color:#9d174d}
.ex-sc-borrar:focus-visible{outline:2px solid #db2777;outline-offset:2px;border-radius:.25rem}
.ex>script:first-child+.ex-bloque{margin-top:0}
/* El hueco mide lo que la fila (27/10/2026, dueño: «…aparte añade una seccion
   de continuar comprando…»; revisión del 28/10). Con los 24rem fijos del vigía
   y sin el relleno de la pista, la 2×2 de verdad (su ancho + 133 px; +141
   desde 1024, +146 desde 1280) y su pista (12-18 px de relleno) hacían saltar
   todo lo de abajo 23-132 px al llegar la fila, el mismo error que
   _FilasDeMarca corrigió el 26/10. Aquí la tarjeta gris es cuadrada más el
   alto de la cabecera y los pies, y la pista sangra al borde en el teléfono
   como la de verdad (cs-sistema.css .cs-tira-pista y .ex-fm-tira). Solo el
   hueco (.ex-sc): el vigía de las tandas no cambia. */
.ex-sc .ex-fm-mas-tira{margin:0 -1rem;padding:2px 1rem 10px}
.ex-sc .ex-fm-mas-tira i{box-sizing:content-box;height:auto;aspect-ratio:1;padding-bottom:8.3125rem}
@media (min-width:768px){.ex-sc .ex-fm-mas-tira{margin:0;padding:2px 2px 10px}}
@media (min-width:1024px){.ex-sc .ex-fm-mas-tira{margin:0 -.625rem;padding:.25rem .625rem .875rem}.ex-sc .ex-fm-mas-tira i{padding-bottom:8.8125rem}}
@media (min-width:1280px){.ex-sc .ex-fm-mas-tira i{padding-bottom:9.125rem}}