/* ============================================================================
 * HOME 2026 — estilos de la portada nueva                       RUFI 12/10/26
 * ----------------------------------------------------------------------------
 * Viene de la propuesta del cliente (ROMERO/new-2026/), pero NO copiada tal cual:
 *
 *   · AISLADA bajo .h26 y con prefijo h26- en todas las clases. La propuesta
 *     redefinía .btn (es la clase de botón de Bootstrap en toda la web), estilaba
 *     los elementos header y footer (son la cabecera y el pie COMPARTIDOS) y
 *     hacía un *{margin:0;padding:0} global. Pegada sin más, rompía la cabecera
 *     y los botones de toda la página.
 *   · Solo las reglas que se usan. La propuesta arrastraba ~80 de bloques que no
 *     están en su maqueta final (Para quién, Innovación, Ventajas...).
 *   · Sin el verde menta. Decisión de Rufi (12/10/26): GRIS PIEDRA como acento, y
 *     un toque de CREMA en contados puntos para que no quede monótono.
 *
 * La tipografía (Poppins) y el negro ya son los de la web actual: no se carga
 * ninguna fuente nueva.
 * ========================================================================== */

.h26 {
  --h26-ink:   #0f0f0f;
  --h26-body:  #6e6e6e;
  --h26-soft:  #9a9a9a;
  --h26-line:  #ececec;
  --h26-card:  #f4f4f4;   /* fondo neutro de fichas y categorías */
  --h26-max:   1240px;

  /* Acento principal: gris piedra (sustituye al verde menta de la propuesta). */
  --h26-tint:     #efeeeb;   /* bloques destacados: ROMO, fábrica, proyectos */
  --h26-tint-2:   #f6f5f3;   /* variante más clara */
  --h26-tint-ink: #5a5852;   /* etiquetas pequeñas: "Novedad", numeración */

  /* Toque cálido, SOLO en dos sitios para que se note sin cansar:
     la ficha destacada del catálogo (paso 3) — con gris no se distinguía de las
     fichas neutras, #efeeeb frente a #f4f4f4 — y el bloque final "Visita la
     fábrica" (paso 7). No usarlo en más sitios sin decidirlo. */
  --h26-cream:     #f4eee3;
  --h26-cream-2:   #faf7f1;
  --h26-cream-ink: #80683f;

  font-family: Poppins, system-ui, sans-serif;
  font-weight: 300;
  color: var(--h26-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background: #fff;
}

/* ---- base, solo dentro de la portada ------------------------------------- */
.h26 h1, .h26 h2, .h26 h3, .h26 h4 {
  margin: 0;
  font-family: inherit;
  color: var(--h26-ink);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.h26 h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.h26 h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
/* Con :where() estos resets pesan CERO: cualquier clase de componente los gana.
   Escritos como ".h26 p" pesaban más que ".h26-hero-sub" y se comían sus márgenes
   (pasó en el paso 2: titular, texto y botones quedaban pegados). Siguen ganando
   al "p { margin-bottom: 1rem }" de Bootstrap porque esta hoja se carga después. */
:where(.h26) p   { margin: 0; }
:where(.h26) img { display: block; max-width: 100%; }
.h26 a, .h26 a:hover { color: inherit; text-decoration: none; }

.h26-wrap { max-width: var(--h26-max); margin: 0 auto; padding: 0 32px; }
.h26-sec  { padding: 130px 0; }

.h26-kicker {
  display: inline-block;
  margin-bottom: 18px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--h26-ink);
}
.h26-kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1.5px;
  margin-right: 10px;
  vertical-align: middle;
  background: currentColor;
}

.h26-lead { font-size: 1.08rem; max-width: 620px; }

/* Etiqueta pequeña que hace de título del bloque (H2 con aspecto de etiqueta). */
.h26 h2.h26-kicker { font-size: .78rem; font-weight: 500; line-height: 1.5; letter-spacing: .04em; }

/* Fotos de los bloques: <img> con loading="lazy" (en la propuesta eran fondos CSS
   y se descargaban todas al abrir la página) y recortadas como antes. */
.h26-st .h26-ph, .h26-brand .h26-ph { overflow: hidden; }
.h26-st .h26-ph img, .h26-brand .h26-ph img, .h26-fam-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h26-cta-box .h26-ph { position: relative; }
.h26-cta-box .h26-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }

/* ---- botones (NO .btn: esa es la de Bootstrap) --------------------------- */
.h26-btn {
  display: inline-flex;
  font-family: inherit;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
  cursor: pointer;
}
.h26 .h26-btn--dark,
.h26 .h26-btn--dark:hover { color: #fff; }
.h26-btn--dark       { background: var(--h26-ink); }
.h26-btn--dark:hover { background: #333; }
.h26 .h26-btn--line  { border-color: currentColor; color: var(--h26-ink); }
.h26-btn--line:hover { background: rgba(0, 0, 0, .04); }
.h26-btn:focus-visible { outline: 2px solid var(--h26-ink); outline-offset: 3px; }

.h26-arrow::after { content: "→"; display: inline-block; transition: transform .2s; }
.h26-btn:hover .h26-arrow::after,
.h26-arrow:hover::after { transform: translateX(3px); }


/* ============================================================================
 * HERO
 * ========================================================================== */
.h26-hero { padding: 64px 0 40px; }
.h26-hero .h26-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* El H1 es la línea pequeña de "Fabricantes…" y no el titular grande: así lleva
   las palabras que la gente busca sin tocar el diseño. Por eso hay que quitarle
   aquí el aspecto de H1 que le da la base. */
.h26 .h26-hero-kicker {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
}
.h26-hero-title {
  margin-bottom: 22px;
  font-size: clamp(2.8rem, 5.6vw, 5.2rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--h26-ink);
  text-wrap: balance;
}
.h26-hero-sub { max-width: 520px; margin-bottom: 32px; font-size: 1.08rem; }
.h26-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.h26-hero-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: #1a1a1a center / cover no-repeat;
}
.h26-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h26-hero-meta {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.h26-pill {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--h26-ink);
  font-size: .8rem;
  font-weight: 500;
}
.h26-pill i { width: 8px; height: 8px; border-radius: 50%; background: #3fb26b; }
.h26-vctl {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--h26-ink);
  cursor: pointer;
}
.h26-vctl:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


/* ============================================================================
 * CIFRAS
 * ========================================================================== */
.h26-stats { padding: 70px 0 0; }
.h26-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--h26-line);
}
.h26-stat { padding: 36px 28px 0 0; }
.h26-stat b {
  display: block;
  color: var(--h26-ink);
  font-weight: 600;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  letter-spacing: -.03em;
  line-height: 1;
}
.h26-stat span { display: block; margin-top: 10px; font-size: .92rem; }


/* ---- piezas comunes de los bloques ---------------------------------------- */
.h26-sec--top0 { padding-top: 0; }
.h26-center { text-align: center; }
.h26-center .h26-lead { margin-left: auto; margin-right: auto; }
.h26 .h26-link {
  font-weight: 500;
  color: var(--h26-ink);
  border-bottom: 1px solid var(--h26-ink);
  padding-bottom: 2px;
}
.h26-dic {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
}
.h26-head-row {             /* cabecera de bloque: título a la izq., enlace a la dcha. */
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}


/* ============================================================================
 * DEPARTAMENTO DE PROYECTOS — "Ve tu local amueblado antes de pedir"
 * ========================================================================== */
.h26-pbanner {
  display: grid;
  grid-template-columns: .9fr 1.25fr;
  gap: 48px;
  align-items: center;
  padding: 56px;
  border-radius: 28px;
  background: var(--h26-tint);
}
.h26 .h26-pbanner h2 { margin-bottom: 16px; font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.h26-pb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0 32px; }
.h26-pb-steps > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--h26-ink);
}
.h26-ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.h26-ba figure {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #ddd;
}
.h26-ba img { width: 100%; height: 100%; object-fit: cover; }
.h26-ba figcaption {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--h26-ink);
  font-size: .75rem;
  font-weight: 500;
}
.h26-ba figcaption.on { background: var(--h26-ink); color: #fff; }
.h26-ba-arrow { font-size: 1.4rem; color: var(--h26-ink); }


/* ============================================================================
 * CATÁLOGO (+ buscador por filtros, que la propuesta no traía)
 * ========================================================================== */
.h26-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.h26-cat { display: block; }
/* Las fotos de categoría son apaisadas (512×350) con fondo liso #eaeaea: en la ficha
   cuadrada van ENTERAS ("contain") sobre ese mismo gris. Con "cover", como en la
   propuesta, se cortaban los productos por los lados (el taburete salía cortado). */
.h26-cat .h26-ph { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #eaeaea; }
.h26-cat img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s; }
.h26-cat:hover img { transform: scale(1.04); }
.h26-cat .h26-lb { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 4px 0; }
.h26 .h26-cat h3 { font-size: 1.05rem; }
.h26-cat small { font-size: .8rem; color: var(--h26-soft); text-align: right; }
/* CREMA, punto 1 de 2: la tarjeta destacada. Con gris no se distinguía de las demás. */
.h26-cat .h26-ph--cream {
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--h26-cream);
  color: var(--h26-ink);
  font-weight: 500;
  text-align: center;
}

/* El buscador es el de siempre (includes/buscador.php, con su JS y su diseño
   responsive): aquí solo se le quita el contenedor de Bootstrap que traía y se
   igualan esquinas y borde con el resto de la portada. */
.h26-buscador { margin-top: 56px; }
.h26-buscador-label { display: block; margin-bottom: 14px; font-size: .78rem; font-weight: 500; letter-spacing: .04em; color: var(--h26-ink); }
.h26 #buscador-romero .container { max-width: none; padding: 0; margin: 0 !important; }
.h26 #buscador-romero .buscador-box {
  border: 1px solid var(--h26-line);
  border-radius: 18px;
  box-shadow: none;
  padding: 18px 22px;
}
.h26 #buscador-romero .buscador-label { font-family: inherit; font-weight: 600; font-size: .9rem; }
.h26 #buscador-romero .buscador-icon { border-radius: 999px; }


/* ============================================================================
 * NUESTRO COMPROMISO
 * ========================================================================== */
.h26-claim { background: #f4f4f4; }
.h26-claim-head { margin-bottom: 40px; }
.h26-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.h26-pic {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 28px;
  border: 1.5px solid #bdbdbd;
  border-radius: 14px;
  background: #fff;
}
.h26 .h26-pl h3 { margin-bottom: 12px; font-size: 1.55rem; font-weight: 600; }
.h26-pl p { font-size: 1rem; }
.h26-minis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 70px;
  padding-top: 40px;
  border-top: 1px solid #e2e2e2;
}
.h26-mi { display: flex; gap: 14px; align-items: center; }
.h26-mi .h26-dic { width: 52px; height: 52px; }
.h26-mi .h26-dic svg { width: 24px; height: 24px; }
.h26-mi .h26-dic-img { flex: none; width: auto; height: 52px; }
.h26-mi b { display: block; color: var(--h26-ink); font-weight: 600; font-size: .95rem; }
.h26-mi > div > span { font-size: .84rem; }


/* ============================================================================
 * NOVEDADES — productos de la base de datos por característica temporal
 * ========================================================================== */
.h26-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; }
.h26-tab {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f4;
  color: var(--h26-ink);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.h26-tab[aria-selected="true"] { background: var(--h26-ink); color: #fff; }
.h26-tab:focus-visible { outline: 2px solid var(--h26-ink); outline-offset: 2px; }
.h26-prods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.h26-prods[hidden] { display: none; }
.h26-prod { display: block; }
.h26-prod .h26-ph { aspect-ratio: 1; margin-bottom: 12px; border-radius: 14px; overflow: hidden; background: #f4f4f4; }
.h26-prod img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.h26-prod:hover img { transform: scale(1.04); }
.h26-prod small { font-size: .75rem; font-weight: 500; color: var(--h26-tint-ink); }
.h26 .h26-prod h3 { font-size: .95rem; font-weight: 500; letter-spacing: 0; }


/* ============================================================================
 * ASISTENTE ROMO
 * ========================================================================== */
.h26-romo-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 70px;
  border-radius: 28px;
  background: var(--h26-tint);
}
.h26-romo-box .h26-lead { margin: 18px 0 30px; }
.h26-romo-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.h26-romo-list span { padding: 8px 16px; border-radius: 999px; background: #fff; font-size: .85rem; color: var(--h26-ink); }
.h26-romo-img { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #fff; }
.h26-romo-img img { width: 100%; height: 100%; object-fit: cover; }


/* ============================================================================
 * ROMERO Y ROCO
 * ========================================================================== */
.h26-brands { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 60px; text-align: left; }
.h26-brand { border-radius: 22px; overflow: hidden; background: #f4f4f4; }
.h26-brand--roco { background: var(--h26-tint-2); }
.h26-brand .h26-ph { aspect-ratio: 16 / 10; background: #ddd center / cover no-repeat; }
.h26-brand .h26-tx { padding: 34px 36px 38px; }
.h26-brand .h26-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.h26-bname { width: auto; height: 30px; }
.h26-brand .h26-name { font-size: 2rem; font-weight: 300; letter-spacing: .1em; color: var(--h26-ink); }
.h26-brand .h26-tag { padding: 6px 14px; border-radius: 999px; background: #fff; font-size: .75rem; font-weight: 500; color: var(--h26-ink); }
.h26-brand p { max-width: 460px; margin-bottom: 24px; }


/* ============================================================================
 * NUESTRA FÁBRICA
 * ========================================================================== */
.h26-factory { background: var(--h26-tint); }
.h26-factory h2 { max-width: 640px; }
.h26-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.h26-st .h26-ph {
  aspect-ratio: 3 / 4;
  margin-bottom: 18px;
  border-radius: 16px;
  background: #e2e1dd center / cover no-repeat;
}
.h26-st .h26-n { font-size: .78rem; font-weight: 500; color: var(--h26-tint-ink); }
.h26 .h26-st h3 { margin: 4px 0 6px; }
.h26-st p { font-size: .88rem; }


/* ============================================================================
 * EMPRESA FAMILIAR
 * ========================================================================== */
.h26-fam { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: center; }
.h26-fam .h26-lead { margin-top: 20px; }
.h26-tl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px; margin-top: 36px; }
.h26-tl > div { padding-top: 14px; border-top: 1px solid var(--h26-ink); }
.h26-tl b { display: block; margin-bottom: 4px; color: var(--h26-ink); font-weight: 600; font-size: 1rem; }
.h26-tl span { font-size: .9rem; }
.h26-fam .h26-link { display: inline-block; margin-top: 36px; }
.h26-fam-img { aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #eee center / cover no-repeat; }


/* ============================================================================
 * VISITA LA FÁBRICA O PIDE TU PRESUPUESTO
 * ========================================================================== */
/* CREMA, punto 2 de 2: el bloque final, la invitación a venir. */
.h26-cta-box {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-radius: 28px;
  overflow: hidden;
  background: var(--h26-cream);
}
.h26-cta-box .h26-tx { padding: 80px 70px; }
.h26 .h26-cta-box h2 { margin-bottom: 18px; }
.h26-cta-box .h26-lead { margin-bottom: 34px; }
.h26-cta-box .h26-ph { min-height: 420px; background: #ddd center 55% / cover no-repeat; }
.h26-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.h26-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; font-size: .9rem; }
.h26-addr b { display: block; margin-bottom: 4px; color: var(--h26-ink); font-weight: 500; }
.h26-addr a { color: inherit; }


/* ============================================================================
 * PROYECTOS — reseñas de Google (las de la home actual, con el diseño nuevo).
 * Los seis "Logo cliente" de la propuesta NO se pintan hasta tener los logos.
 * ========================================================================== */
.h26-revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; text-align: left; }
.h26-rev {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--h26-line);
  border-radius: 18px;
  background: #fff;
}
.h26-rev-stars { color: var(--h26-ink); font-size: .9rem; letter-spacing: 2px; }
.h26-rev p { color: var(--h26-ink); font-size: .95rem; font-weight: 400; }
.h26-rev-who { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.h26-rev-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.h26-rev-who b { display: block; color: var(--h26-ink); font-weight: 500; font-size: .9rem; }
.h26-rev-who small { font-size: .78rem; color: var(--h26-soft); }
.h26-revs-more { margin-top: 30px; }


/* ============================================================================
 * BLOG (no estaba en la propuesta: aporta enlaces internos y contenido fresco)
 * ========================================================================== */
.h26-posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.h26-post { display: block; }
.h26-post .h26-ph { aspect-ratio: 4 / 3; margin-bottom: 14px; border-radius: 16px; overflow: hidden; background: #f3f3f3; }
.h26-post img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.h26-post:hover img { transform: scale(1.04); }
.h26-post small { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 500; color: var(--h26-soft); }
.h26 .h26-post h3 { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }


/* ============================================================================
 * NEWSLETTER (no estaba en la propuesta). Los id (subscribe_form, _email, _btn)
 * son los que espera js/subscribeNews.js: NO cambiarlos.
 * ========================================================================== */
.h26-news { padding: 80px 0; border-top: 1px solid var(--h26-line); }
.h26-news-box { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.h26 .h26-news h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.h26-news p { margin-top: 10px; }
.h26-news form { display: flex; gap: 10px; }
.h26-news input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 22px;
  border: 1px solid var(--h26-line);
  border-radius: 999px;
  background: #fff;
  color: var(--h26-ink);
  font: inherit;
  font-size: .95rem;
}
.h26-news input[type="email"]:focus-visible { outline: 2px solid var(--h26-ink); outline-offset: 2px; }


/* ============================================================================
 * RESPONSIVE
 * ========================================================================== */
@media (max-width: 1100px) {
  .h26-steps { grid-template-columns: repeat(3, 1fr); }
  .h26-prods { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .h26-sec { padding: 90px 0; }
  .h26-sec--top0 { padding-top: 0; }
  .h26-hero { padding: 40px 0 20px; }
  .h26-hero .h26-wrap { grid-template-columns: 1fr; gap: 36px; }
  .h26-hero-media { aspect-ratio: 4 / 3; }
  .h26-stats-grid { grid-template-columns: 1fr 1fr; }
  .h26-pbanner { grid-template-columns: 1fr; gap: 30px; padding: 36px 20px; }
  .h26-ba { gap: 8px; }
  .h26-cats, .h26-posts { grid-template-columns: repeat(2, 1fr); }
  .h26-pillars { grid-template-columns: 1fr; gap: 40px; }
  .h26-minis { grid-template-columns: 1fr 1fr; gap: 22px; }
  .h26-romo-box { grid-template-columns: 1fr; gap: 30px; padding: 40px 24px; }
  .h26-brands, .h26-fam, .h26-cta-box, .h26-news-box { grid-template-columns: 1fr; gap: 40px; }
  .h26-cta-box { gap: 0; }
  .h26-cta-box .h26-tx { padding: 50px 28px; }
  .h26-cta-box .h26-ph { min-height: 260px; }
  .h26-revs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .h26-wrap { padding: 0 16px; }
  .h26-stat { padding-right: 14px; }
  .h26-pb-steps, .h26-minis, .h26-addr, .h26-revs, .h26-posts { grid-template-columns: 1fr; }
  .h26-pb-steps > div { flex-direction: row; align-items: center; }
  /* minmax(0,1fr) y no 1fr: con 1fr la columna crece hasta el texto más largo
     ("Complementos" + "Ver todo") y a 360 px la rejilla se salía por la derecha. */
  .h26-cats, .h26-steps, .h26-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .h26-cat .h26-lb { flex-direction: column; gap: 2px; }
  .h26-cat small { text-align: left; }
  .h26-brand .h26-tx { padding: 28px 22px 30px; }
  .h26-news form { flex-direction: column; }
  .h26-news input[type="email"] { flex: none; width: 100%; }   /* con flex:1 en columna quedaba aplastado */
  .h26-news .h26-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .h26 *, .h26 *::before, .h26 *::after { transition: none !important; }
}