/* =========================================================================
   MENTA - variante blanca para KouponClone (JR Netmedia)
   CSS puro, metodologia BEM, un unico archivo compartido por las 9 paginas.
   Solo tema light. Fondo blanco. Sin frameworks. Sin JavaScript.
   Tipografia: Rubik (redondeada, calida). Acento: verde menta/teal.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* acento principal: menta / teal */
  --menta-50:  #f0fdfa;
  --menta-100: #d7f5f0;
  --menta-200: #a9e9e0;
  --menta-400: #2dd4bf;
  --menta-500: #14b8a6;
  --menta-600: #0d9488;
  --menta-700: #0f766e;
  --menta-800: #115e59;

  /* secundario coral: solo urgencia */
  --coral-50:  #fff2ef;
  --coral-200: #ffd2c7;
  --coral-600: #d94a33;
  --coral-700: #c1392a;

  /* tinta */
  --ink:   #111c1a;
  --ink-2: #3f4f4c;
  --ink-3: #5d6b69;

  /* lineas y superficies (siempre claras) */
  --line:   #e4ebe9;
  --line-2: #eef2f1;
  --white:  #ffffff;
  --soft:   #f9fafb;
  --soft-2: #fafafa;

  /* radios generosos, lenguaje redondeado */
  --r-xl:   28px;
  --r-lg:   20px;
  --r-md:   14px;
  --r-sm:   10px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(17, 28, 26, .05);
  --shadow-md: 0 8px 24px rgba(17, 28, 26, .07);
  --shadow-lg: 0 14px 40px rgba(17, 28, 26, .09);

  --wrap: 1240px;
  --tap: 48px;
  --header-h: 68px;
}

/* -------------------------------------------------------------------------
   2. Reset y base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Rubik", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body { font-size: 17px; }
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a {
  color: var(--menta-700);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--menta-600);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection {
  background: var(--menta-100);
  color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 60;
  padding: 12px 20px;
  background: var(--menta-700);
  color: var(--white);
  border-radius: var(--r-pill);
  font-weight: 500;
  transition: top .15s ease;
}

.skip-link:focus { top: 12px; text-decoration: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) { .wrap { padding: 0 24px; } }
@media (min-width: 1280px) { .wrap { padding: 0 32px; } }

/* iconos */
.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; flex: none; }
.icon--md { width: 22px; height: 22px; flex: none; }
.icon--lg { width: 26px; height: 26px; flex: none; }
.icon--xl { width: 32px; height: 32px; flex: none; }
.icon--menta { color: var(--menta-600); }
.icon--coral { color: var(--coral-600); }
.icon--muted { color: var(--ink-3); }
.icon--star { color: #f0a500; }
.icon--star-off { color: #d8dedd; }

/* -------------------------------------------------------------------------
   3. Cabecera
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.site-header__bar { background: var(--white); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--header-h);
  padding-top: 8px;
  padding-bottom: 8px;
}

@media (min-width: 1024px) {
  .site-header__inner { gap: 18px; }
}

/* menu movil con details/summary */
.site-header__mobile { position: relative; }

.site-header__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.site-header__burger::-webkit-details-marker { display: none; }
.site-header__burger:hover { background: var(--menta-50); border-color: var(--menta-200); }

.site-header__mobile[open] .site-header__burger {
  background: var(--menta-50);
  border-color: var(--menta-200);
  color: var(--menta-800);
}

@media (min-width: 1024px) {
  .site-header__mobile { display: none; }
}

.mobile-nav {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 50;
  width: min(84vw, 300px);
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.mobile-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 8px 14px;
  border-radius: var(--r-md);
  color: var(--ink);
  font-weight: 500;
}

.mobile-nav__item:hover {
  background: var(--menta-50);
  color: var(--menta-800);
  text-decoration: none;
}

.mobile-nav__sep {
  display: block;
  height: 1px;
  margin: 8px 14px;
  background: var(--line-2);
}

/* marca */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.brand:hover { text-decoration: none; }

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--menta-600);
  color: var(--white);
}

.brand__name { display: inline-block; }
.brand__accent { color: var(--menta-600); }

/* navegacion de escritorio */
.site-nav {
  display: none;
  align-items: center;
  gap: 4px;
}

@media (min-width: 1024px) { .site-nav { display: flex; } }

.site-nav__link,
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.site-nav__toggle::-webkit-details-marker { display: none; }

.site-nav__link:hover,
.site-nav__toggle:hover {
  background: var(--menta-50);
  color: var(--menta-800);
  text-decoration: none;
}

.site-nav__drop { position: relative; }

.site-nav__drop[open] .site-nav__toggle {
  background: var(--menta-50);
  color: var(--menta-800);
}

.site-nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: 250px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.site-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--r-md);
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
}

.site-nav__item:hover {
  background: var(--menta-50);
  color: var(--menta-800);
  text-decoration: none;
}

/* buscador de cabecera */
.site-header__search {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 768px) { .site-header__search { display: block; } }

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 8px 0 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.search-box:focus-within {
  background: var(--white);
  border-color: var(--menta-400);
  box-shadow: 0 0 0 4px var(--menta-50);
}

.search-box__icon { color: var(--ink-3); display: flex; }

.search-box__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 15px;
  outline: none;
}

.search-box__input::placeholder { color: var(--ink-3); }

.search-box__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--menta-700);
  color: var(--white);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}

.search-box__btn:hover { background: var(--menta-800); }

/* acciones de cabecera */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.site-header__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--white);
}

.site-header__icon-link:hover {
  background: var(--menta-50);
  border-color: var(--menta-200);
  color: var(--menta-800);
  text-decoration: none;
}

@media (min-width: 768px) {
  .site-header__icon-link--search { display: none; }
}

.site-header__cta {
  display: none;
  align-items: center;
  gap: 8px;
  height: var(--tap);
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--menta-700);
  color: var(--white);
  font-weight: 500;
  white-space: nowrap;
}

.site-header__cta:hover { background: var(--menta-800); text-decoration: none; }

@media (min-width: 1024px) { .site-header__cta { display: inline-flex; } }

/* fila de accesos rapidos */
.quick-row { border-top: 1px solid var(--line-2); background: var(--white); }

.quick-row__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: thin;
}

.quick-row__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--menta-50);
  color: var(--menta-800);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.quick-row__link:hover { background: var(--menta-100); text-decoration: none; }

/* -------------------------------------------------------------------------
   4. Huecos de publicidad (AdSense)
   ------------------------------------------------------------------------- */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px dashed #cbd5d3;
  border-radius: var(--r-md);
  background: var(--soft-2);
  overflow: hidden;
}

.ad-slot__marker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8b9997;
}

/* leaderboard: altura reservada 100px movil / 90px escritorio */
.ad-slot--leaderboard {
  min-height: 100px;
  height: 100px;
  margin: 16px 0;
}

@media (min-width: 768px) {
  .ad-slot--leaderboard { min-height: 90px; height: 90px; margin: 20px 0; }
}

/* in-feed: se coloca ENTRE dos rejillas hermanas, nunca dentro del grid */
.ad-slot--infeed {
  min-height: 280px;
  height: 280px;
  margin: 24px 0;
}

@media (min-width: 768px) {
  .ad-slot--infeed { min-height: 180px; height: 180px; margin: 28px 0; }
}

/* rectangulo 300x250 */
/* El hueco ocupa todo el ancho de la columna para que sus bordes coincidan con
 * las tarjetas vecinas: fijado a 300px quedaba metido hacia dentro y parecia un
 * fallo de maquetacion. Los 250px de alto siguen reservados y el anuncio de
 * 300x250 queda centrado dentro (la caja ya centra su contenido). */
.ad-slot--rect {
  width: 100%;
  min-height: 250px;
  height: 250px;
}

/* -------------------------------------------------------------------------
   5. Estructura de pagina
   ------------------------------------------------------------------------- */
.site-main { display: block; padding-bottom: 56px; }

.section { padding: 28px 0; }
.section--tight { padding: 18px 0; }
.section--soft {
  background: var(--soft);
  padding: 36px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.section__title {
  font-size: 22px;
  font-weight: 600;
}

@media (min-width: 768px) { .section__title { font-size: 26px; } }

.section__sub {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 15px;
}

.section__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--menta-800);
  font-weight: 500;
  font-size: 15px;
}

.section__link:hover {
  background: var(--menta-50);
  border-color: var(--menta-200);
  text-decoration: none;
}

/* migas de pan */
.crumbs { padding: 14px 0 2px; }

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--ink-3);
}

.crumbs__item { display: inline-flex; align-items: center; gap: 4px; }
.crumbs__link { color: var(--ink-3); }
.crumbs__link:hover { color: var(--menta-700); }
.crumbs__sep { color: #b7c2c0; display: inline-flex; }
.crumbs__current { color: var(--ink-2); font-weight: 500; }

/* cabecera de pagina interior */
.page-head { padding: 10px 0 22px; }

.page-head__title {
  font-size: 28px;
  font-weight: 600;
}

@media (min-width: 768px) { .page-head__title { font-size: 38px; } }

.page-head__lead {
  margin-top: 10px;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 16px;
}

@media (min-width: 768px) { .page-head__lead { font-size: 18px; } }

.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* -------------------------------------------------------------------------
   6. Portada: hero
   ------------------------------------------------------------------------- */
.hero { padding: 24px 0 8px; }

.hero__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 44px; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--menta-50);
  color: var(--menta-800);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
}

.hero__title {
  margin-top: 16px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.12;
}

@media (min-width: 768px) { .hero__title { font-size: 46px; } }
@media (min-width: 1280px) { .hero__title { font-size: 54px; } }

.hero__title-accent { color: var(--menta-700); }

.hero__lead {
  margin-top: 16px;
  max-width: 52ch;
  color: var(--ink-2);
  font-size: 17px;
}

@media (min-width: 768px) { .hero__lead { font-size: 19px; } }

.hero__form { margin-top: 24px; max-width: 560px; }

.hero__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 8px 0 20px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}

.hero__search:focus-within {
  border-color: var(--menta-500);
  box-shadow: 0 0 0 5px var(--menta-50);
}

.hero__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 16px;
  outline: none;
}

.hero__input::placeholder { color: var(--ink-3); }

.hero__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--menta-700);
  color: var(--white);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.hero__submit:hover { background: var(--menta-800); }
.hero__submit-text { display: none; }

@media (min-width: 480px) { .hero__submit-text { display: inline; } }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
  max-width: 560px;
}

@media (min-width: 480px) {
  .hero__stats { grid-template-columns: repeat(3, 1fr); }
}

.hero__grid > * { min-width: 0; }

.stat {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.stat__value {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--menta-800);
  line-height: 1.1;
}

.stat__label {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-3);
}

/* tarjeta destacada del hero */
.hero__panel {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.hero__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.hero__panel-title { font-size: 17px; font-weight: 600; }

.hero__panel-list { display: grid; gap: 12px; }

/* -------------------------------------------------------------------------
   7. Rejillas del catalogo
   4 columnas escritorio / 2 tableta / 1 movil
   ------------------------------------------------------------------------- */
.deal-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .deal-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .deal-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

.store-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) { .store-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .store-grid { grid-template-columns: repeat(4, 1fr); } }

.cat-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }

/* -------------------------------------------------------------------------
   8. Tarjeta de cupon
   ------------------------------------------------------------------------- */
.deal-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.deal-card:hover {
  border-color: var(--menta-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.deal-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.deal-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--white);
  flex: none;
}

.deal-card__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.deal-card__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: var(--menta-50);
  color: var(--menta-700);
  font-size: 22px;
  font-weight: 600;
}

.deal-card__off {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--menta-700);
  letter-spacing: -.03em;
}

.deal-card__title {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  /* Dos lineas de alto fijo: los titulos de tres lineas hacian su fila de la
   * rejilla 21px mas alta que las demas. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.7em;
}

.deal-card__title-link { color: var(--ink); }
.deal-card__title-link:hover { color: var(--menta-700); }

.deal-card__store {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-3);
}

.deal-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 16px;
  /* Alto de dos lineas de etiquetas: en el buscador unas tarjetas llevaban una
   * linea y otras dos, y la rejilla quedaba con alturas distintas. */
  height: 64px;
  overflow: hidden;
}

.deal-card__foot { margin-top: auto; }

/* variante densa para el listado de cupones */
.deal-card--dense { padding: 16px; }
.deal-card--dense .deal-card__logo { width: 58px; height: 58px; border-radius: 16px; }
.deal-card--dense .deal-card__off { font-size: 23px; }
.deal-card--dense .deal-card__title { font-size: 15px; }

/* tarjeta compacta (panel del hero, columna lateral) */
.mini-deal {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--white);
}

.mini-deal:hover {
  border-color: var(--menta-200);
  background: var(--menta-50);
  text-decoration: none;
}

.mini-deal__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--white);
  flex: none;
}

.mini-deal__body { min-width: 0; }

.mini-deal__off {
  font-size: 15px;
  font-weight: 600;
  color: var(--menta-700);
}

.mini-deal__title {
  display: block;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-deal__store {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
}

/* -------------------------------------------------------------------------
   9. Etiquetas tipo pildora
   ------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}

.tag--code {
  background: var(--menta-600);
  color: var(--white);
}

.tag--deal {
  background: var(--menta-50);
  color: var(--menta-800);
}

.tag--soft {
  background: var(--soft);
  color: var(--ink-2);
  border: 1px solid var(--line);
}

.tag--urgent {
  background: var(--coral-700);
  color: var(--white);
}

.tag--urgent-soft {
  background: var(--coral-50);
  color: var(--coral-700);
  border: 1px solid var(--coral-200);
}

.tag--star {
  background: var(--soft);
  color: var(--ink-2);
  border: 1px solid var(--line);
}

/* -------------------------------------------------------------------------
   10. Revelar codigo (details/summary, sin JavaScript)
   ------------------------------------------------------------------------- */
.reveal { width: 100%; }

.reveal__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--menta-700);
  color: var(--white);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  text-align: center;
}

.reveal__summary::-webkit-details-marker { display: none; }
.reveal__summary:hover { background: var(--menta-800); }

.reveal__caret { transition: transform .15s ease; }
.reveal[open] .reveal__caret { transform: rotate(180deg); }

.reveal__panel {
  padding: 14px;
  /* Borde COMPLETO y esquinas redondeadas por los cuatro lados. Antes iba sin
     borde superior y en pico arriba porque se dibujaba pegado debajo del boton;
     desde que al abrir el boton se oculta (para que no salte la pagina), el
     panel se queda solo y la linea de arriba quedaba abierta. */
  border: 1px solid var(--menta-200);
  border-radius: var(--r-md);
  background: var(--menta-50);
}

.reveal__code {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 14px;
  border: 2px dashed var(--menta-400);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--menta-800);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .12em;
  word-break: break-all;
}

.reveal__hint {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}

.reveal__go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--menta-200);
  color: var(--menta-800);
  font-weight: 500;
  font-size: 14px;
}

.reveal__go:hover { background: var(--white); border-color: var(--menta-500); text-decoration: none; }

/* -------------------------------------------------------------------------
   11. Botones
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
}

.btn--primary { background: var(--menta-700); color: var(--white); }
.btn--primary:hover { background: var(--menta-800); text-decoration: none; }

.btn--ghost {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}

.btn--ghost:hover { background: var(--menta-50); border-color: var(--menta-200); text-decoration: none; }

.btn--block { width: 100%; }

/* -------------------------------------------------------------------------
   12. Tarjeta de tienda
   ------------------------------------------------------------------------- */
.store-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 18px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--ink);
}

.store-card:hover {
  border-color: var(--menta-200);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.store-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background: var(--white);
}

.store-card__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.store-card__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: var(--menta-50);
  color: var(--menta-700);
  font-size: 24px;
  font-weight: 600;
}

.store-card__name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
}

.store-card__meta {
  font-size: 13px;
  color: var(--ink-3);
}

.store-card__best {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--menta-50);
  color: var(--menta-800);
  font-size: 12.5px;
  font-weight: 500;
}

/* fila compacta de tienda (listado A-Z, similares) */
.store-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
}

.store-row:hover { border-color: var(--menta-200); background: var(--menta-50); text-decoration: none; }

.store-row__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 7px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--white);
  flex: none;
}

.store-row__body { min-width: 0; }
.store-row__name { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.3; word-break: break-word; }
.store-row__meta { display: block; font-size: 13px; color: var(--ink-3); }

/* -------------------------------------------------------------------------
   13. Directorio A-Z
   ------------------------------------------------------------------------- */
.alpha {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.alpha__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.alpha__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--menta-800);
  font-weight: 500;
  font-size: 14px;
}

.alpha__link:hover { background: var(--menta-600); border-color: var(--menta-600); color: var(--white); text-decoration: none; }

.alpha__link--off {
  color: #a9b4b2;
  background: var(--soft);
  border-color: var(--line-2);
  cursor: not-allowed;
}

.letter-block { padding: 22px 0; border-top: 1px solid var(--line-2); }
.letter-block:first-of-type { border-top: 0; }

.letter-block__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.letter-block__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--menta-50);
  color: var(--menta-800);
  font-size: 19px;
  font-weight: 600;
}

.letter-block__count { font-size: 14px; color: var(--ink-3); }

/* -------------------------------------------------------------------------
   14. Categorias
   ------------------------------------------------------------------------- */
.cat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--ink);
}

.cat-card:hover {
  border-color: var(--menta-200);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.cat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: var(--menta-50);
  color: var(--menta-700);
  flex: none;
}

.cat-card__name { display: block; font-size: 16px; font-weight: 500; }
.cat-card__count { display: block; font-size: 13.5px; color: var(--ink-3); }

/* -------------------------------------------------------------------------
   15. Filtros y paginacion
   ------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.filters__group {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}

.filters__chip:hover { background: var(--menta-50); border-color: var(--menta-200); color: var(--menta-800); text-decoration: none; }

.filters__chip--active {
  background: var(--menta-700);
  border-color: var(--menta-700);
  color: var(--white);
}

.filters__chip--active:hover { background: var(--menta-800); border-color: var(--menta-800); color: var(--white); }

.sort { position: relative; flex: none; }

.sort__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.sort__toggle::-webkit-details-marker { display: none; }
.sort__toggle:hover { background: var(--menta-50); border-color: var(--menta-200); }
.sort[open] .sort__toggle { background: var(--menta-50); border-color: var(--menta-200); color: var(--menta-800); }

.sort__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 230px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.sort__item {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 14.5px;
}

.sort__item:hover { background: var(--menta-50); color: var(--menta-800); text-decoration: none; }

.result-count {
  margin: 18px 0;
  font-size: 15px;
  color: var(--ink-3);
}

.result-count__strong { color: var(--ink); font-weight: 500; }

.pager { margin-top: 32px; }

.pager__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-2);
  font-weight: 500;
}

.pager__link:hover { background: var(--menta-50); border-color: var(--menta-200); color: var(--menta-800); text-decoration: none; }

.pager__link--current {
  background: var(--menta-700);
  border-color: var(--menta-700);
  color: var(--white);
}

.pager__link--current:hover { background: var(--menta-800); color: var(--white); }

.pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 46px;
  color: var(--ink-3);
}

/* -------------------------------------------------------------------------
   16. Ficha de tienda (single)
   ------------------------------------------------------------------------- */
.store-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) { .store-hero { padding: 28px; gap: 28px; } }

.store-hero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--white);
  flex: none;
}

@media (min-width: 768px) {
  .store-hero__logo { width: 128px; height: 128px; padding: 20px; }
}

.store-hero__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.store-hero__body { flex: 1 1 260px; min-width: 0; }

.store-hero__title { font-size: 28px; font-weight: 600; }

@media (min-width: 768px) { .store-hero__title { font-size: 36px; } }

.store-hero__lead { margin-top: 10px; color: var(--ink-2); max-width: 60ch; }

.store-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.rating { display: inline-flex; align-items: center; gap: 8px; }
.rating__stars { display: inline-flex; gap: 2px; }
.rating__value { font-weight: 600; color: var(--ink); }
.rating__count { font-size: 14px; color: var(--ink-3); }

.split {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) 352px; gap: 36px; }
}

.side-stack { display: grid; gap: 20px; }

@media (min-width: 1024px) {
}

.side-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.side-card__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 14px;
}

.side-card__list { display: grid; gap: 10px; }

.side-card__text { font-size: 15px; color: var(--ink-2); line-height: 1.65; }
.side-card__cta { margin-top: 16px; }

.fact-list { display: grid; gap: 10px; }

.fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
  font-size: 14.5px;
}

.fact:last-child { border-bottom: 0; padding-bottom: 0; }
.fact__label { color: var(--ink-3); }
.fact__value { font-weight: 500; color: var(--ink); text-align: right; }

/* cupon en fila ancha, usado en la ficha de tienda */
.coupon-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

@media (min-width: 640px) {
  .coupon-row { grid-template-columns: 112px minmax(0, 1fr) 220px; align-items: center; gap: 20px; padding: 20px; }
}

.coupon-row:hover { border-color: var(--menta-200); box-shadow: var(--shadow-md); }

.coupon-row__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  /* Mismo alto en todos aunque cambie el texto del descuento. */
  min-height: 72px;
  border-radius: 18px;
  background: var(--menta-50);
  color: var(--menta-800);
}

.coupon-row__off {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-align: center;
  /* En una sola linea siempre: "10% dto." pedia 87px y solo tenia 80, asi que
     se partia en dos y el bloque pasaba de 72 a 95px de alto. Con unos cupones
     a dos lineas y otros a tres, la columna quedaba descuadrada. */
  white-space: nowrap;
}

.coupon-row__kind { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.coupon-row__title { font-size: 17px; font-weight: 500; line-height: 1.35; }
.coupon-row__desc { margin-top: 6px; font-size: 14.5px; color: var(--ink-3); line-height: 1.55; }
.coupon-row__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.coupon-list { display: grid; gap: 14px; }

/* -------------------------------------------------------------------------
   17. Contenido editorial (page / dmca)
   ------------------------------------------------------------------------- */
.prose { max-width: 72ch; color: var(--ink-2); }

.prose > * + * { margin-top: 18px; }

/* El h2 de seccion y el primer parrafo de .prose iban pegados: el h2 no lleva
 * margen inferior y .prose tampoco superior, asi que entre el texto del titulo
 * y el del parrafo quedaban unos 5px, por debajo de los 6px pedidos. En la
 * ficha de tienda ese parrafo es ademas lo primero que aparece bajo la ultima
 * fila de cupones, y el aviso .reveal__hint le caia casi encima. El aire se
 * mete AQUI, en el bloque de fuera, y nunca dentro de .reveal-box (altura fija
 * de 152px que reserva el desplegable abierto): asi no se recorta nada. */
.section__title + .prose { margin-top: 14px; }

.prose h2 {
  margin-top: 36px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

@media (min-width: 768px) { .prose h2 { font-size: 25px; } }

.prose h3 {
  margin-top: 26px;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--ink);
}

.prose p { font-size: 16.5px; line-height: 1.75; }

.prose ul { display: grid; gap: 10px; }

.prose li {
  position: relative;
  padding-left: 26px;
  font-size: 16.5px;
  line-height: 1.7;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--menta-400);
}

.prose ol { display: grid; gap: 10px; counter-reset: menta-ol; }

.prose ol > li { padding-left: 38px; }

.prose ol > li::before {
  counter-increment: menta-ol;
  content: counter(menta-ol);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--menta-50);
  color: var(--menta-800);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toc {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--soft);
}

.toc__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Los 6 enlaces del sumario se veian como un bloque continuo: 4px entre filas,
 * sin linea separadora ni fondo propio, hacia que los titulos parecieran
 * pegados unos a otros. Subimos el hueco a 8px (el minimo pedido son 6px).
 * El .toc NO es un menu desplegable, es un sumario fijo de la pagina, asi que
 * aqui si toca separar las filas. */
.toc__list { display: grid; gap: 8px; }

.toc__link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: 14.5px;
}

.toc__link:hover { background: var(--white); color: var(--menta-800); text-decoration: none; }

.notice {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--menta-200);
  border-radius: var(--r-lg);
  background: var(--menta-50);
}

.notice--warn {
  border-color: var(--coral-200);
  background: var(--coral-50);
}

.notice__body { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.notice__title { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }

/* -------------------------------------------------------------------------
   18. Formularios
   ------------------------------------------------------------------------- */
.form {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
}

@media (min-width: 768px) { .form { padding: 28px; } }

.form__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .form__grid { grid-template-columns: repeat(2, 1fr); }
  .form__field--wide { grid-column: 1 / -1; }
}

.form__field { display: grid; gap: 8px; }

.form__label { font-size: 14.5px; font-weight: 500; color: var(--ink); }

.form__req { color: var(--coral-700); }

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: 16px;
  outline: none;
}

.form__textarea { min-height: 160px; resize: vertical; line-height: 1.6; }

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--menta-500);
  box-shadow: 0 0 0 4px var(--menta-50);
}

.form__hint { font-size: 13.5px; color: var(--ink-3); }

.form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

.form__checkbox {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--menta-700);
  flex: none;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.form__note { font-size: 13.5px; color: var(--ink-3); }

/* -------------------------------------------------------------------------
   19. Modulos varios
   ------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: var(--menta-50);
  color: var(--menta-700);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 14px;
}

.step__title { font-size: 17px; font-weight: 600; }
.step__text { margin-top: 8px; font-size: 15px; color: var(--ink-2); line-height: 1.6; }

.info-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .info-cards { grid-template-columns: repeat(3, 1fr); } }

.info-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--ink);
}

.info-card:hover { border-color: var(--menta-200); box-shadow: var(--shadow-md); text-decoration: none; }

.info-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--menta-50);
  color: var(--menta-700);
}

.info-card__title { font-size: 16.5px; font-weight: 600; }
.info-card__text { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px;
  border: 1px solid var(--menta-200);
  border-radius: var(--r-xl);
  background: var(--menta-50);
}

.cta-band__title { font-size: 21px; font-weight: 600; }
.cta-band__text { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; max-width: 56ch; }

.faq {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  overflow: hidden;
}

.faq + .faq { margin-top: 10px; }

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap);
  padding: 12px 18px;
  font-weight: 500;
  font-size: 15.5px;
  cursor: pointer;
  list-style: none;
}

.faq__summary::-webkit-details-marker { display: none; }
.faq__summary:hover { background: var(--menta-50); color: var(--menta-800); }
.faq[open] .faq__summary { background: var(--menta-50); color: var(--menta-800); }
.faq__caret { transition: transform .15s ease; color: var(--ink-3); }
.faq[open] .faq__caret { transform: rotate(180deg); }

.faq__body {
  padding: 4px 18px 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* -------------------------------------------------------------------------
   20. Pie
   ------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--white);
}

.site-footer__top { padding: 40px 0 32px; }

.site-footer__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; } }

.site-footer__about { max-width: 40ch; }

.site-footer__tagline {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-3);
}

.site-footer__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}

.site-footer__list { display: grid; gap: 2px; }

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--ink-3);
  font-size: 14.5px;
}

.site-footer__link:hover { color: var(--menta-700); }

.site-footer__bottom {
  border-top: 1px solid var(--line-2);
  padding: 20px 0 28px;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-3);
}

.site-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* -------------------------------------------------------------------------
   21. Utilidades minimas
   ------------------------------------------------------------------------- */
.stack-md { display: grid; gap: 16px; }
.stack-lg { display: grid; gap: 24px; }
.text-muted { color: var(--ink-3); }
.text-urgent { color: var(--coral-700); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* ---------- Sin salto de maquetacion al revelar codigo ----------
 * El contenedor EXTERIOR reserva la altura del estado revelado, de modo que abrir
 * el codigo no mueve ni un pixel del resto de la pagina. La altura no puede ir en
 * el propio <details>: el navegador trata al <summary> como caso especial y su
 * contenido colapsa igualmente. Regla del cliente: nada de layout shift.
 * Tambien igualamos alturas de tarjeta, que el cliente pidio expresamente. */

/* El panel abierto de menta es alto (caja del codigo + boton + aviso), asi que
 * se compacta un poco y la caja exterior reserva exactamente lo que ocupa
 * abierto: ni recorta el codigo ni mueve la pagina al abrirlo. */
.reveal__panel { padding: 10px; }
.reveal__code { min-height: 40px; font-size: 17px; }
.reveal__go { min-height: 38px; margin-top: 8px; }
.reveal__hint { margin-top: 8px; font-size: 12px; }

.reveal-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 152px;
  min-height: 152px;
  overflow: hidden;
}

.reveal-box .reveal {
  width: 100%;
}

/* En los listados el desplegable vive dentro de .deal-card__foot: esa caja es
 * la que reserva la altura, sin tocar el HTML. Sin esto, abrir un codigo movia
 * la pagina entera (medido: hasta 908px de salto en el listado de cupones).
 * En tarjeta de listado se omite el aviso, que ya se explica en la ficha. */
.deal-card__foot {
  height: 108px;
  min-height: 108px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.deal-card__foot .reveal__hint { display: none; }

/* Con la tarjeta mas estrecha el texto del boton pasa a dos lineas y el estado
 * abierto necesita 116px, no 108: se recortaba por abajo. Se reserva un poco
 * mas por debajo de escritorio, que sigue sin mover la pagina al abrir. */
@media (max-width: 1199px) {
  .deal-card__foot {
    height: 120px;
    min-height: 120px;
  }
}

.reveal[open] .reveal__summary {
  display: none;
}


/* ---------- Tarjetas de la misma altura ----------
 * Peticion del cliente: "intenta mantener siempre los tamanos siempre iguales...
 * cada card ocupa una altura diferente y tiene un ligero movimiento por el texto".
 * El titulo se recorta a dos lineas de altura fija y los metadatos van en una sola
 * fila, asi que un titulo largo y uno corto producen tarjetas identicas. */

.coupon-row__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  height: 2.75em;
}

.coupon-row__meta {
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}

.coupon-row {
  min-height: 188px;
}


/* ---------- Widget "con mas cupones" (sustituye a las estadisticas) ----------
 * Peticion del cliente: "un widget mas interesante, sin requerir movimientos, tal
 * vez un top con las paginas con mas cupones en vez de estadisticas". Lista
 * estatica, nada que pulsar, y todas las filas de la MISMA altura. */

.toplist {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.toplist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.toplist__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.toplist__all {
  font-size: 13px;
  font-weight: 600;
  color: #0d9488;
  white-space: nowrap;
}

.toplist__items {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toplist__item {
  display: grid;
  grid-template-columns: 20px 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid #e2e8f0;
}

.toplist__item:last-child { border-bottom: 0; }

.toplist__rank {
  font-size: 14px;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
}

.toplist__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 3px;
}

.toplist__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.toplist__count {
  font-size: 17px;
  font-weight: 700;
  color: #0d9488;
  font-variant-numeric: tabular-nums;
}

.toplist__foot {
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid #e2e8f0;
  background: #f7fafc;
  font-size: 12px;
  color: #64748b;
}

/* ---------- Indice alfabetico compacto ----------
 * El cliente lo veia "un poco feo": una sola tira con las letras repartidas por
 * igual, sin caja individual por letra. */

.alpha,
.alpha-nav,
.alpha__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: 2px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f7fafc;
  list-style: none;
}

.alpha__item,
.alpha__link,
.alpha-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  transition: background 160ms ease, color 160ms ease;
}

.alpha__item:hover,
.alpha__link:hover,
.alpha-nav__item:hover {
  background: #0f172a;
  color: #ffffff;
}


/* ---------- Metadatos sin recortar en pantallas estrechas ----------
 * Mismo caso que en la ficha de las otras variantes: por debajo de escritorio
 * las filas de cupon van una debajo de otra, asi que la altura fija de los
 * metadatos solo servia para cortar la ultima etiqueta. */
@media (max-width: 1199px) {
  .coupon-row__meta {
    height: auto;
    overflow: visible;
    /* Y que puedan bajar de linea: sin esto las etiquetas seguian en una sola
     * fila y, al dejar de recortarse, se salian por el lado de la tarjeta. */
    flex-wrap: wrap;
    white-space: normal;
  }
}


/* ---------- Rejillas que no pueden encogerse ----------
 * Con `1fr` una columna nunca baja de su contenido minimo, asi que una tarjeta
 * con una palabra o un boton largo empujaba la rejilla mas alla del ancho de la
 * pagina y salia barra de desplazamiento horizontal (medido: 8px de mas a
 * 1024px). Con minmax(0, 1fr) la columna si puede encoger y el contenido se
 * ajusta dentro. Va al final del fichero: una media query no aumenta la
 * especificidad y estas reglas tienen que pisar a las de arriba. */
@media (min-width: 640px) {
  .deal-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .deal-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .store-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-grid   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La ficha en movil se salia 108px por la derecha: .split usaba `1fr`, que
 * nunca baja del contenido minimo de la columna (el hueco de 300px del anuncio),
 * asi que empujaba la pagina entera. Con minmax(0, 1fr) la columna encoge. */
.split { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) 352px; }
}

/* Una etiqueta larga ("Sin fecha de caducidad") medía 3px mas que la tarjeta y
 * se cortaba por la mitad al llegar al borde. Con esto se acorta con puntos
 * suspensivos, que se lee como algo intencionado y no como un fallo. */
.deal-card__meta > .tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* En movil la ficha se salia 108px por la derecha: .coupon-row usaba `1fr`, que
 * no baja del contenido minimo de la fila (la caja del codigo revelado), asi que
 * empujaba la pagina entera. Con minmax(0, 1fr) la columna encoge y el contenido
 * se ajusta. Va al final: una media query no aumenta la especificidad. */
.coupon-row { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
  .coupon-row { grid-template-columns: 112px minmax(0, 1fr) 220px; }
}


/* ---------- Boton de revelar: mas pequeno y centrado ----------
 * Peticion de Jorge: "centrar boton verde" y "reducir tamano boton para que
 * tenga mas relevancia el propio contenido". Antes ocupaba el 100% del ancho de
 * su columna, asi que pesaba mas que el propio cupon. Ahora es una pastilla
 * compacta y centrada. El alto NO cambia respecto al panel abierto, para que
 * abrir el codigo siga sin mover ni un pixel de la pagina. */
.reveal__summary {
  /* display:flex y no inline-flex: un elemento EN LINEA ignora los margenes
     automaticos, asi que el boton se quedaba pegado a la izquierda. */
  display: flex;
  /* fit-content y no auto: un elemento de bloque con width:auto sigue ocupando
     todo el ancho de su contenedor, que es justo lo que habia que quitar. */
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
  padding: 0 20px;
  font-size: 14px;
}

/* El contenedor sigue mandando: centra la pastilla dentro de su hueco. */
.reveal-box, .deal-card__foot {
  align-items: center;
}


/* ---------- Codigo revelado: sin aire dentro ----------
 * Peticion de Jorge: "no pueden tener espacios vacios". La pastilla del codigo y
 * el boton ocupaban todo el ancho del hueco y su texto quedaba flotando en medio
 * (medido: hasta 208px de aire dentro de una sola pastilla). Ahora las dos
 * piezas se ajustan a su contenido y quedan centradas, una sobre otra. */
.reveal__code,
.reveal__go {
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
}

/* El boton de la tarjeta lateral ocupaba todo el ancho (557px de aire dentro,
 * con el texto flotando en medio). Se ajusta a su contenido y queda centrado. */
.side-card__cta .btn--block {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}


/* ---------- Logos de tienda: todos al mismo tamano ----------
 * Los ficheros de logo vienen a resoluciones distintas (de 16 a 128px) y aqui
 * no habia ninguna regla para ellos, asi que cada uno se pintaba a su tamano
 * natural dentro del mismo recuadro de 76px: medidos 16, 32, 36, 48 y 50px en
 * la misma rejilla. Se ajustan al hueco sin deformarse, como en el resto de
 * variantes de la maqueta. */
.deal-card__logo img,
.mini-deal__logo img,
.store-card__logo img,
.store-row__logo img,
.store-hero__logo img,
.toplist__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ttl {
	text-wrap: auto
}

:is(div, section):has(>ins.adsbygoogle[data-ad-status="unfilled"]) {
	display: none !important;
}

.couponswe {
	display: inline-block;
	width: 100%;
	text-align: right;
	font-size: 11px;
	margin-bottom: .5rem !important;
	font-weight: 500;
	text-transform: uppercase;
	color: #c8c7c7
}