/* ==========================================================================
   HOME 2026 — el diseño que entregó el diseñador

   Vive en su propio archivo y no toca los estilos existentes. Todo cuelga de
   `.home-2026`, la clase del body de la portada, así que tienda, producto,
   nosotros y contacto siguen exactamente como estaban.

   Los colores salen de las variables --d26-* de components.css, leídas de los
   PNG de paleta píxel a píxel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Héroe: franja naranja con el eslogan
   -------------------------------------------------------------------------- */
/*
  El pie lleva 56px de margen arriba. En las paginas de contenido no se nota
  —encima hay fondo claro— pero en la portada, donde el banner de delivery
  acaba a sangre, dejaba una franja blanca entre la foto y la banda roja: 25px
  en telefono y 57 en escritorio. En el mockup no hay tal franja, la banda
  roja arranca pegada a la foto.
*/
.home-2026 .pie { margin-top: 0; }

.home-2026 .hero26 {
  /* El mockup mide #FD1B0D, un rojo. La paleta que entregó el diseñador dice
     #FE5B11, naranja. No es ruido del render: en el mismo archivo el amarillo
     sale #FBDB05 y el hueso #F8F6F0, los dos exactos a la paleta. Manda el
     mockup, que es la página que hay que reproducir. */
  background: #FD1B0D;
  /* Alto de la banda: 25.86% del ancho de la página, medido del mockup */
  height: 25.86vw;
  min-height: 84px;
  display: flex;
  align-items: flex-end;      /* el recorte va por ARRIBA, no repartido */
  justify-content: center;
  /* El diseñador recorta el eslogan por arriba: en su mockup la tilde de
     PÉGALE queda cortada, y solo eso —un 8.8% del alto de la obra—. */
  overflow: hidden;
}

/*
  El eslogan es la OBRA del diseñador, no texto.

  Lo comprobé abriendo su Canva: la única fuente que carga es Cooper Hewitt.
  El eslogan de su mockup es `slogan.png` colocado como imagen. Por eso
  ninguna letra lo igualaba: no es una letra, es un dibujo pintado a mano con
  relleno multicolor letra a letra y contorno.

  Sigue siendo el <h1> de la página y sigue diciendo la frase: el texto va en
  el `alt`, que es lo que leen Google y un lector de pantalla.

  Va en PNG con paleta de 128 colores y no en WebP: la obra es de colores
  planos, y así pesa 22 KB donde el WebP pesaba 178. En Barquisimeto eso son
  datos del cliente.
*/
.home-2026 .hero26-h1 { margin: 0; line-height: 0; }
.home-2026 .hero26-slogan {
  display: block;
  /*
    64vw, medido del mockup: el eslogan va de su 19.20% a su 83.21%. Antes
    puse 80.8%, que salió de una medición contaminada por el borde de la
    banda; a ese ancho la obra medía 32.9vw de alto en una banda de 25.86 y
    el recorte se comía «A TU VIDA».

    En vw y no en %: el porcentaje se mediría sobre el <h1>, que al ser hijo
    de un flex se encoge a su contenido.
  */
  width: 64vw;
  margin-bottom: 1.39vw;   /* el aire que deja el mockup debajo */
  height: auto;
  max-width: none;
}

/* ==========================================================================
   MÓDULO 3 — la banda crema

   Medido del mockup (todo en % del ancho de la página):

     alto de la banda   21.45%      fondo #F8F6F0
     titular            4.74% de alto de letra, de 2.70% a 49.96%
     nota               1.63%, dos líneas, empieza en 3.02%
     botón verde        de 60.01% a 89.54% — ancho 29.53%, alto 7.31%

   El titular a la IZQUIERDA y el botón a la DERECHA, en la misma línea. Yo
   los tenía apilados y el botón ocupaba el ancho entero de la pantalla, que
   es lo que se veía mal en el teléfono.
   ========================================================================== */
.home-2026 .intro26 {
  background: var(--d26-hueso);
  padding: 1.35vw 2.8vw 2.6vw;
}
.home-2026 .intro26-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
}
.home-2026 .intro26-txt { min-width: 0; }
.home-2026 .intro26-h1 {
  margin: 0;
  font-family: var(--font-principal);
  font-weight: 800;
  font-size: 5.3vw;            /* «Todo para tu proyecto,» en UNA linea */
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--d26-naranja);
}
.home-2026 .intro26-cta {
  flex: none;
  width: 29.53vw;
  min-height: 7.31vw;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.6vw 1vw;
  border-radius: 999px;
  background: var(--d26-verde);
  color: #fff;
  font-family: var(--font-principal);
  font-weight: 800;
  font-size: 2.5vw;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  /* El verde de marca con texto blanco da 1.9. Con el texto en el azul de la
     paleta daría 8.4, pero el mockup lo pone blanco: se le añade un borde
     oscuro del mismo verde, que es lo que lo despega sin cambiar el color. */
  border: 0.2vw solid #3E9C00;
  box-shadow: 0 0.3vw 0 #3E9C00;
  -webkit-text-stroke: max(0.6px, 0.09vw) #2C6E00;
  paint-order: stroke fill;
  transition: transform .15s ease, background .15s ease;
}
.home-2026 .intro26-cta:hover { background: #7BE22B; transform: translateY(-2px); }
.home-2026 .intro26-cta:focus-visible { outline: 3px solid var(--d26-azul); outline-offset: 3px; }

.home-2026 .intro26-nota {
  margin: 0.3vw 0 0;
  font-family: var(--font-principal);
  font-size: 2.26vw;           /* 1.63% de alto de letra */
  line-height: 1.35;
  color: var(--d26-naranja);
  text-align: left;
}

/* ==========================================================================
   MÓDULO 4 — la banda amarilla

   Medido del mockup:

     alto de la banda   33.95%     fondo #FBDB05
     título             3.06% de alto de letra, centrado, azul
     tarjetas           32.48% de ancho cada una, 18.18% de alto,
                        1.63% de hueco, de borde a borde de la página
     colores            #FF6A04 naranja · #113670 azul · #01B913 verde
     dentro             texto a la izquierda, foto a la derecha a sangre

   Las tarjetas NO van escritas aquí: salen de la tabla `promos`, que el dueño
   edita desde /admin. Esto es solo su forma.
   ========================================================================== */
.home-2026 .destacados26 {
  background: var(--d26-amarillo);
  padding: 1.8vw 0 4.5vw;
}
.home-2026 .destacados26-t {
  margin: 0 0 4.5vw;
  font-family: var(--font-principal);
  font-weight: 800;
  font-size: 4.25vw;           /* 3.06% de alto de letra */
  line-height: 1.1;
  color: var(--d26-azul);
  text-align: center;
  letter-spacing: -0.01em;
}

.home-2026 .destacados26 .promo { max-width: none; margin: 0; padding: 0; }
.home-2026 .promo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.63vw;
  padding-inline: 0.12vw;
}

/* En el telefono no caben tres: se arrastra una a una */
@media (max-width: 599px) {
  .home-2026 .promo-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
}
.home-2026 .promo-grid::-webkit-scrollbar { display: none; }
.home-2026 .promo-grid > * { scroll-snap-align: start; }

/*
  Con mas de tres promociones la fila se arrastra tambien en pantalla grande.
  Hasta tres no cambia nada: siguen las tres columnas de siempre. Con cuatro,
  antes la cuarta caia sola a un segundo renglon y dejaba un hueco amarillo del
  ancho de dos tarjetas.

  Es el mismo recurso que ya se usaba en el telefono desde los 599px, con su
  misma logica: la tarjeta no ocupa el ancho exacto, asi asoma un pedazo de la
  siguiente y se entiende que hay mas sin ponerle un cartel.

  Se mueve SOLO cuando el visitante lo pide — dedo, flechas o teclado. Nada de
  temporizadores: el riel viejo de los destacados se quito porque se desplazaba
  solo cada 30 ms y corria la tarjeta mientras el cliente leia un precio.
*/
.home-2026 .promo-riel { position: relative; }

.home-2026 .promo-grid--riel {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* Las flechas son de raton: en el telefono se arrastra con el dedo */
.home-2026 .promo-flecha { display: none; }

/*
  29%, no 31.5%: con 31.5% entraban las tres pero de la cuarta asomaban 10px a
  1440 y CERO a 1024 — o sea, no se veia que hubiera mas, que es justo para lo
  que sirve. Con 29% asoma cerca de un decimo de tarjeta en todos los anchos.
*/
@media (min-width: 600px) {
  .home-2026 .promo-grid--riel { grid-auto-columns: 29%; }
}

/*
  Las flechas, solo desde 1024px y FUERA de las tarjetas. Puestas encima tapaban
  34px de la primera, justo donde va el titulo. El riel se estrecha lo que miden
  ellas y se colocan en ese margen: no cubren nada. Por debajo de 1024 no hay
  sitio para sacarlas, y ahi la fila se arrastra con el dedo.
*/
@media (min-width: 1024px) {
  .home-2026 .promo-riel.es-riel { padding-inline: 54px; }

  .home-2026 .promo-flecha {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0 0 3px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--d26-azul, #14213D);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
    transition: opacity .15s ease;
  }
  .home-2026 .promo-flecha-izq { left: 0; }
  .home-2026 .promo-flecha-der { right: 0; }
  /* Una flecha que no lleva a ningun lado confunde mas que ayuda */
  .home-2026 .promo-flecha.esta-apagada { opacity: .28; pointer-events: none; }
  .home-2026 .promo-flecha:focus-visible { outline: 3px solid var(--d26-azul, #14213D); outline-offset: 2px; }
}

.home-2026 .promo-tile {
  position: relative;
  display: flex;
  align-items: stretch;
  /* Alto MINIMO, no fijo: con el alto clavado en el 18.18% del mockup, en un
     telefono el precio y el boton quedaban cortados por abajo. La proporcion
     del diseno se cumple en cuanto hay sitio; donde no lo hay, la tarjeta
     crece en vez de esconder el precio. */
  min-height: max(118px, 18.18vw);
  border-radius: max(8px, 1.4vw);
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.home-2026 .promo-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.home-2026 .promo-tile:focus-visible { outline: 3px solid var(--d26-azul); outline-offset: 3px; }

/*
  Los colores son los del mockup, tal cual. El blanco sobre el naranja #FF6A04
  da 2.87 y el mínimo es 3: se queda corto por poco. Es la decisión del
  diseñador y se respeta; si algún día se quiere que cumpla, basta con bajar
  el naranja a #E85E00, que a ojo es el mismo y da 3.48.
*/
.home-2026 .promo-c-naranja { background: #FF6B07; }
.home-2026 .promo-c-marino  { background: #113670; }
.home-2026 .promo-c-verde   { background: #00BB01; }
/* En el mockup la tarjeta del MDF es la azul */
.home-2026 .promo-c-mdf     { background: #113670; }
.home-2026 .promo-c-dorado  { background: #E0A800; }

.home-2026 .promo-tile-txt {
  position: relative; z-index: 1;
  /* 58% y no el 55% del mockup: «Desde $12.00» necesitaba 204px y la
     columna le daba 195, asi que el ultimo cero quedaba cortado por el
     borde de la foto. Se ve en tablet y en PC. Cooper Hewitt es mas ancha
     que la letra del diseno y por eso al 55% no entra. */
  flex: 1 1 58%;
  max-width: 58%;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: max(2px, 0.3vw);
  padding: max(7px, 1.1vw) max(4px, 0.8vw) max(7px, 1.1vw) max(9px, 1.8vw);
  overflow: hidden;
  color: #fff;
}
.home-2026 .promo-c-verde .promo-tile-txt,
.home-2026 .promo-c-naranja .promo-tile-txt {
  -webkit-text-stroke: max(0.5px, 0.07vw) rgba(0,0,0,0.55);
  paint-order: stroke fill;
}

.home-2026 .promo-tile h3 {
  margin: 0;
  font-family: var(--font-principal);
  font-weight: 800;
  font-size: max(13px, 2.44vw);
  line-height: 1.02;
  color: #fff;
}
.home-2026 .promo-tile-txt p {
  margin: 0;
  font-family: var(--font-principal);
  font-size: max(10px, 1.6vw);
  line-height: 1.25;
  color: #fff;
}
.home-2026 .promo-precio {
  font-family: var(--font-principal);
  font-weight: 800;
  font-size: max(14px, 1.95vw);
  line-height: 1.1;
  color: #fff;
  margin-top: 0.3vw;
  white-space: nowrap;   /* «Desde $12.00» en un renglon, como el mockup */
}
/* En la naranja el precio va en azul: blanco sobre ese naranja no se despega */
.home-2026 .promo-c-naranja .promo-precio { color: #0E1B3D; }

.home-2026 .promo-cta {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex; align-items: center;
  min-height: max(22px, 3.59vw);
  padding: max(3px,0.4vw) max(7px,1.2vw);
  border-radius: max(5px, 0.7vw);
  font-family: var(--font-principal);
  font-weight: 700;
  font-size: max(10px, 1.6vw);
  white-space: nowrap;
  /* Blanco con el texto del color de la tarjeta, como el mockup */
  background: #fff;
  color: #113670;
}
/* En la naranja el botón es azul con letra blanca */
.home-2026 .promo-c-naranja .promo-cta { background: #0E1B3D; color: #fff; }
.home-2026 .promo-c-verde  .promo-cta { color: #017A0D; }

/*
  La foto va posicionada, no en el flujo. Las fotos del catalogo son
  verticales (800x1200): como pieza de la fila estiraba la tarjeta a 383px
  donde el mockup pide 262. Sacada del flujo, el alto lo decide el texto y la
  foto rellena lo que haya.
*/
.home-2026 .promo-tile img {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 42%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-2026 .promo-distintivo {
  position: absolute; top: 0.8vw; right: 0.8vw;
  background: rgba(0,0,0,.35); color: #fff;
  font-size: 1.3vw; font-weight: 700;
  padding: 0.2vw 0.7vw; border-radius: 999px;
}

/* El mockup no lleva tarjeta ancha; el banner no se pinta en la portada. */
.home-2026 .promo-ancho { display: none; }

/*
  En el telefono la tarjeta mide 180px: con el reparto 55/45 del mockup la
  columna de texto se queda en 81px y «Desde $12.00» no cabe —se cortaba a
  «Desde $12»—. Se le da mas sitio al texto y menos a la foto. De 600px para
  arriba manda el reparto del diseno.
*/
@media (max-width: 599px) {
  /*
    Una tarjeta a la vez, con un pedazo de la siguiente asomando.

    Con las tres a 180px, en un telefono de 390 se veian dos enteras y de la
    tercera quedaba una tira de 14px: el texto salia recortado a una letra
    por renglon, en vertical, y parecia un fallo en vez de una fila que se
    arrastra. A 86% se lee una entera y asoma un cuarto de la siguiente, que
    es lo que le dice a cualquiera que hay mas a la derecha.
  */
  .home-2026 .promo-grid { padding-inline: 2.5vw; }
  .home-2026 .promo-tile-txt { flex-basis: 60%; max-width: 60%; }
  .home-2026 .promo-tile img { width: 40%; }
  /* «Ver accesorios» no cabe de una pieza en 102px: puede partirse */
  .home-2026 .promo-cta { white-space: normal; padding-inline: 6px; line-height: 1.15; }
  /* «Desde $12.00» a 14px mide 88 en una columna de 102: llegaba justo al
     borde de la foto y el ultimo cero se leia sobre la imagen. */
  .home-2026 .promo-precio { font-size: 16px; }
}



/* ==========================================================================
   MÓDULO 5 — «TODO LO QUE NECESITAS AQUÍ!»

   Medido del mockup: banda de 66.8% de alto sobre #F8F6F0, cuatro tarjetas
   de 22.34% de ancho con 1.47% de hueco, margen izquierdo 4.53%. Cada
   tarjeta: foto arriba de 16.79% de alto y debajo un bloque blanco con el
   nombre, cuántos productos y «Ver productos».

   En el teléfono van de dos en dos. Cuatro en 390px dejan la tarjeta en
   87px, y ahí no cabe «Ver productos →» ni al tamaño del diseño.
   ========================================================================== */
.home-2026 .necesitas26 {
  background: var(--d26-hueso);
  padding: 3.4vw 4.53vw 4vw 4.53vw;
}
.home-2026 .necesitas26-t {
  margin: 0 0 3vw;
  font-family: var(--font-principal);
  font-weight: 800;
  font-size: 5.2vw;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--d26-azul);
  text-align: center;
}
.home-2026 .necesitas26-t em { font-style: normal; color: var(--d26-naranja); }

.home-2026 .necesitas26 .products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.47vw;
}
@media (min-width: 720px) {
  .home-2026 .necesitas26 .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.home-2026 .cat26 {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: max(8px, 1.1vw);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 6px 16px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.home-2026 .cat26:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.home-2026 .cat26:focus-visible { outline: 3px solid var(--d26-azul); outline-offset: 3px; }

.home-2026 .cat26 img,
.home-2026 .cat26-sinfoto {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;      /* en el mockup la foto es cuadrada */
  object-fit: cover;
  background: #E9E6E0;
}
.home-2026 .cat26-txt {
  display: flex; flex-direction: column;
  gap: max(2px, 0.35vw);
  padding: max(9px, 1.2vw) max(9px, 1.3vw) max(11px, 1.5vw);
}
.home-2026 .cat26-n {
  font-family: var(--font-principal);
  font-weight: 800;
  font-size: max(14px, 2vw);
  line-height: 1.15;
  color: var(--d26-azul);
}
.home-2026 .cat26-c {
  font-family: var(--font-principal);
  font-size: max(11px, 1.5vw);
  line-height: 1.2;
  /* Gris sobre blanco: #6B6B6B da 5.3 */
  color: #6B6B6B;
}
.home-2026 .cat26-ver {
  margin-top: max(4px, 0.6vw);
  font-family: var(--font-principal);
  font-weight: 700;
  font-size: max(11px, 1.5vw);
  line-height: 1.2;
  color: var(--d26-azul);
}

.home-2026 .necesitas26-cargando { grid-column: 1 / -1; text-align: center; color: #6B6B6B; }
/* El mockup no lleva «Ver todo el catálogo» debajo de la parrilla: cada
   tarjeta ya lleva al catálogo por su categoría. */
.home-2026 .necesitas26-vertodo { display: none; }

/* --------------------------------------------------------------------------
   Banner de delivery
   -------------------------------------------------------------------------- */
.home-2026 .delivery26 { display: block; line-height: 0; }
.home-2026 .delivery26 img { width: 100%; height: auto; display: block; }
.home-2026 .delivery26:focus-visible { outline: 4px solid var(--d26-azul); outline-offset: -4px; }

/* --------------------------------------------------------------------------
   Teléfono y tableta
   -------------------------------------------------------------------------- */
/*
  EL MÓVIL ES LA REFERENCIA, NO EL ESCRITORIO

  El diseño entregado es el del teléfono, y ahí las tres tarjetas van en fila
  y los productos en cuatro columnas. Antes yo las apilaba —uno y dos— porque
  di por hecho que en móvil había que apilar. No era lo pedido.

  La retícula es la misma en todos los anchos; lo único que cambia con la
  pantalla es el tamaño del texto y los espacios, que ya se ajustan solos con
  `clamp()`.
*/
@media (max-width: 900px) {
}

@media (max-width: 520px) {
}

@media (prefers-reduced-motion: reduce) {
  .home-2026 .promo-tile:hover,
  .home-2026 .promo-ancho:hover,
  .home-2026 .intro26-cta:hover { transform: none; }
}

/* ==========================================================================
   ESCRITORIO: el cuerpo de la portada deja de crecer con la pantalla.

   Mismo problema que la cabecera y por la misma razon: el mockup es un
   lienzo de telefono de 735px y todo va en proporcion al ancho, asi que en
   un monitor sale al doble. Medido contra cuatro tiendas reales a 1440:

                       boton principal        titular de seccion
     Promart PE          301x44   18px          —
     Construmart         410x46   16px          26px
     Home Depot          405x44   16px          —
     Sherwin-Williams    230x51   16px          51px
     PintaPeg           425x105   36px          61px

   Aqui el cuerpo se topa en 1280px, igual que la cabecera, y la letra baja
   a medidas de escritorio. EL TELEFONO Y LA TABLET VERTICAL NO SE TOCAN:
   todo vive dentro de `min-width: 900px`, y hasta 899 sigue mandando la
   proporcion del mockup.
   ========================================================================== */
@media (min-width: 900px) {

  /* Las bandas siguen a sangre; su contenido se centra y para en 1280 */
  .home-2026 .intro26,
  .home-2026 .necesitas26 { padding-inline: max(24px, calc((100% - 1280px) / 2)); }
  .home-2026 .destacados26 { padding-inline: max(24px, calc((100% - 1280px) / 2)); }
  .home-2026 .promo-grid { padding-inline: 0; }

  /* ---- banda crema ---- */
  .home-2026 .intro26 { padding-block: 34px 38px; }
  /*
    Esta banda es un cartel ANCLADO: el mensaje sujeta el borde izquierdo y
    el boton el derecho, y la tension entre los dos extremos es lo que la
    compone. Eso solo funciona si el titular tiene masa suficiente para
    sujetar su lado.

    Primero baje el titular a 40px y el boton se quedo colgado en el borde:
    669px de vacio entre ambos. Luego cerre la fila en 760px para juntarlos
    y sali peor: un grupito a la izquierda y el 40% de la banda vacio. Los
    dos intentos arreglaban un numero, no la composicion.

    A 52px el titular ocupa el 41% del ancho —el mockup le da el 47%— y
    vuelve a sujetar su lado. Sigue siendo un 32% mas pequeno que los 76px
    con los que empezo.
  */
  /* -------------------------------------------------------------------
     LA BANDA, EN DOS MITADES

     Idea del cliente, y es mejor que las mias. La banda se parte en dos: el
     mensaje centrado en la mitad izquierda, el boton centrado en la
     derecha. Nada queda colgado en una esquina y el aire se reparte.

     Ademas encaja con el resto de la pagina, que va CENTRADA de arriba
     abajo: el eslogan, PRODUCTOS DESTACADOS y TODO LO QUE NECESITAS. Esta
     banda era la unica alineada a la izquierda y rompia ese ritmo.

     Antes probe dos cosas y las dos salieron mal: bajar el titular a 40px
     dejo 669px de vacio hasta el boton, y cerrar la fila en 760px dejo un
     grupito a la izquierda con el 40% de la banda vacio. Las dos arreglaban
     un numero, ninguna miraba la banda.

     `display: contents` en la fila para que titular, nota y boton pasen a
     ser celdas de esta rejilla sin tocar el HTML. Solo aqui: en el telefono
     la nota tiene que seguir DEBAJO de la fila, no dentro de la columna del
     titular, que la dejaria en una tira de una palabra.
     ------------------------------------------------------------------- */
  .home-2026 .intro26 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 40px;
  }
  .home-2026 .intro26-in { display: contents; }
  .home-2026 .intro26-txt { grid-column: 1; grid-row: 1; text-align: center; }
  .home-2026 .intro26-nota {
    grid-column: 1; grid-row: 2;
    text-align: center;
    margin-top: 12px;
  }
  .home-2026 .intro26-cta {
    grid-column: 2; grid-row: 1 / span 2;
    justify-self: center; align-self: center;
  }

  .home-2026 .intro26-h1 { font-size: 52px; line-height: 1.15; }   /* era 76 */
  .home-2026 .intro26-cta {
    width: auto;                                                    /* era 425px */
    min-height: 50px;                                               /* era 105 */
    padding: 0 30px;
    font-size: 17px;                                                /* era 36 */
    border-width: 2px;
    box-shadow: 0 3px 0 #3E9C00;
  }
  .home-2026 .intro26-nota { font-size: 17px; margin-top: 14px; }   /* era 33 */

  /* ---- banda amarilla ---- */
  .home-2026 .destacados26 { padding-block: 30px 40px; }
  .home-2026 .destacados26-t { font-size: 32px; margin-bottom: 26px; }  /* era 61 */
  .home-2026 .promo-grid { gap: 20px; }
  .home-2026 .promo-tile { min-height: 190px; border-radius: 14px; }
  .home-2026 .promo-tile-txt { gap: 5px; padding: 18px 12px 18px 20px; }
  .home-2026 .promo-tile h3 { font-size: 21px; line-height: 1.15; }     /* era 35 */
  .home-2026 .promo-tile-txt p { font-size: 14px; }                     /* era 23 */
  .home-2026 .promo-precio { font-size: 20px; }                         /* era 28 */
  .home-2026 .promo-cta { font-size: 14px; min-height: 36px; padding: 0 14px; border-radius: 8px; }

  /* ---- banda hueso ---- */
  .home-2026 .necesitas26 { padding-block: 40px 46px; }
  .home-2026 .necesitas26-t { font-size: 32px; margin-bottom: 26px; }   /* era 75 */
  .home-2026 .necesitas26 .products-grid { gap: 20px; }
  .home-2026 .cat26 { border-radius: 12px; }
  .home-2026 .cat26-txt { gap: 3px; padding: 14px 16px 16px; }
  .home-2026 .cat26-n { font-size: 18px; }                              /* era 29 */
  .home-2026 .cat26-c,
  .home-2026 .cat26-ver { font-size: 14px; }                            /* eran 22 */
  .home-2026 .cat26-ver { margin-top: 6px; }
}