/* Portada rehecha el 11-11-2026, variante B «Escaparate de marca» (elegida por el usuario entre tres).
   Solo la carga index.html. Bloques, de arriba abajo:
   1. Portada con foto de ambiente y una acción principal (Hick: una sola en verde lleno).
   2. Franja de confianza en una tarjeta que monta sobre la foto (región común).
   3. Mosaico de líneas: Aires en grande y oscuro (Von Restorff, Pareto: es lo que más se vende),
      cada tarjeta entera es el enlace (Fitts).
   4. Bloque de marca: «1 de cada 3» en grande + los iconos de beneficios.
   5. Más vendidos (las tarjetas de css/mas-vendidos.css).
   6. Cierre: dónde comprar (peak-end).
   Verde Gtronic #00845c principal (el de garantias; tokens --gtronic-verde* de correcciones.css), celeste solo en el foco; Montserrat 400/600/700; tarjetas sin borde
   de color arriba. Los textos y las cifras son los que ya tenía la web (sin inventar). */

.pb {
   --p-verde: var(--gtronic-verde, #00845c);
   --p-verde-oscuro: var(--gtronic-verde-oscuro, #006e4d);
   --p-verde-claro: var(--gtronic-verde-claro, #e7f5f1);
   --p-tinta: #1b2731;
   --p-noche: #13202a;
   --p-texto: #4a5862;
   --p-borde: #e2eaef;
   --p-frio: #f3f8fb;
   --p-ancho: 1200px;
   display: block;
   overflow-x: clip;
   background: #ffffff;
   color: var(--p-texto);
   font-family: "Montserrat", Arial, sans-serif;
   font-size: 16px;
   line-height: 1.6;
}

.pb *,
.pb *::before,
.pb *::after {
   box-sizing: border-box;
}

/* la plantilla del sitio centra y colorea los encabezados y párrafos sueltos: aquí manda esta hoja */
.pb :where(h1, h2, h3, p, ul, li) {
   margin: 0;
   padding: 0;
   text-align: left;
   text-transform: none;
   letter-spacing: 0;
   font-family: inherit;
}

.pb :where(ul) {
   list-style: none;
}

.pb a:focus-visible {
   outline: 3px solid var(--gtronic-celeste, #13b2eb);
   outline-offset: 3px;
}

.pb-contenedor {
   width: 100%;
   max-width: var(--p-ancho);
   margin: 0 auto;
   padding: 0 24px;
}

/* ---------- títulos de sección ---------- */
.pb-cabeza {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 24px;
   margin-bottom: 28px;
}

.pb-rotulo {
   display: inline-block;
   margin-bottom: 10px;
   font-size: 12.5px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--p-verde-oscuro);
}

/* «#1 Líder en tecnología» (11-11-2026, del usuario, en lugar de «Por qué Gtronic»): en texto y no en imagen (0 KB,
   nítido a cualquier tamaño y lo lee Google). El «1» en verde ocupa las dos líneas y la almohadilla va abajo a la
   izquierda, como en su diseño. Montserrat 800 (el usuario lo pidió más contundente que el 700 del resto del sitio;
   la portada ya carga el 800) y el texto en --p-tinta: el selector lleva .pb-marca-texto porque
   «.pb .pb-marca-texto p» (el párrafo del bloque) es más específico y lo dejaba en el gris --p-texto */
.pb .pb-marca-texto .pb-lider {
   display: flex;
   align-items: center;
   gap: 0.08em;
   margin: 0 0 6px;
   max-width: none;
   font-size: clamp(28px, 2.7vw, 38px);
   font-weight: 800;
   line-height: 0.95;
   text-transform: uppercase;
   color: var(--p-tinta);
}

.pb-lider-num {
   display: inline-flex;
   align-items: flex-end;
   font-size: 2.6em;
   line-height: 0.74;
   letter-spacing: -0.04em;
   color: var(--p-verde);
}

.pb-lider-almohadilla {
   margin-right: -0.04em;
   font-size: 0.36em;
   line-height: 1;
   color: var(--p-tinta);
}

.pb-lider-txt {
   letter-spacing: -0.01em;
}

.pb .pb-titulo {
   font-size: clamp(26px, 3vw, 38px);
   font-weight: 700;
   line-height: 1.15;
   color: var(--p-tinta);
}

.pb .pb-entrada {
   max-width: 520px;
   margin-top: 10px;
   font-size: 16px;
   color: var(--p-texto);
}

/* ---------- botones ---------- */
.pb-botones {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.pb .pb-boton {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 50px;
   padding: 12px 26px;
   border: 2px solid var(--p-verde);
   border-radius: 999px;
   background: var(--p-verde);
   color: #ffffff;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   text-decoration: none;
   transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pb .pb-boton::after {
   content: "→";
   transition: transform 0.2s ease;
}

.pb .pb-boton:hover,
.pb .pb-boton:focus-visible {
   border-color: var(--p-verde-oscuro);
   background: var(--p-verde-oscuro);
   color: #ffffff;
}

.pb .pb-boton:hover::after {
   transform: translateX(4px);
}

.pb .pb-boton--borde {
   background: transparent;
   color: var(--p-tinta);
   border-color: rgba(27, 39, 49, 0.25);
}

.pb .pb-boton--borde::after {
   content: none;
}

.pb .pb-boton--borde:hover,
.pb .pb-boton--borde:focus-visible {
   background: var(--p-tinta);
   border-color: var(--p-tinta);
   color: #ffffff;
}

/* ---------- 1. portada ---------- */
/* Banner de cocina (11-11-2026, 1920×720): el tercio izquierdo es blanco y es donde va el texto; la batidora, el
   horno, la cafetera y la mujer quedan limpios a la derecha, sin velo. El hero guarda la proporción del banner
   (37,5vw = 720/1920), así la foto entra entera y la zona blanca siempre mide ~32vw; el texto va pegado a la
   izquierda (no al contenedor de 1200 px centrado, que a 1600 px ya lo metería encima de los productos).
   Por debajo de 1180 px esa zona se queda corta: foto entera arriba y texto debajo. */
.pb-hero {
   --hero-margen: clamp(24px, 4vw, 80px);
   position: relative;
   display: flex;
   align-items: center;
   min-height: min(37.5vw, 760px);
   background: #fdfdfd;
   overflow: hidden;
}

.pb-hero-foto {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: right center;
}

.pb-hero .pb-contenedor {
   position: relative;
   z-index: 2;
   max-width: none;
   margin: 0;
   padding: 28px 0 44px var(--hero-margen);
}

.pb-hero-texto {
   max-width: calc(31vw - var(--hero-margen));
}

/* «El hogar de tus sueños» (11-11-2026, del usuario): más grande que el titular anterior, que era más largo, en verde
   y en 800, como en su diseño (la portada ya carga el 800) */
.pb .pb-hero h1 {
   font-size: clamp(34px, 3.6vw, 60px);
   font-weight: 800;
   line-height: 1.05;
   color: var(--p-verde);
}

/* la plantilla achica y pone en cursiva el <span> de los h1 */
.pb .pb-hero h1 span {
   display: inline;
   font-size: inherit;
   font-style: normal;
   font-weight: inherit;
   line-height: inherit;
   color: var(--p-verde);
}

.pb .pb-hero-lema {
   margin: 16px 0 28px;
   max-width: 470px;
   font-size: clamp(17px, 1.45vw, 22px);
   font-weight: 400;
   line-height: 1.35;
   color: var(--p-texto);
}

/* ---------- 2. franja de confianza ---------- */
/* monta 24 px sobre el hero: solo el borde gris de la encimera, no las tablas del pan y la pizza */
.pb-confianza {
   position: relative;
   z-index: 3;
   margin-top: -24px;
}

.pb-confianza ul {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border: 1px solid var(--p-borde);
   border-radius: 20px;
   background: #ffffff;
   box-shadow: 0 24px 48px -30px rgba(18, 52, 77, 0.45);
}

.pb-confianza li {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 22px 26px;
}

.pb-confianza li+li {
   border-left: 1px solid var(--p-borde);
}

.pb-confianza strong {
   flex: none;
   font-size: 30px;
   font-weight: 700;
   line-height: 1;
   color: var(--p-verde);
}

.pb-confianza span {
   font-size: 14px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--p-tinta);
}

/* ---------- 3. mosaico de líneas ---------- */
.pb-lineas {
   padding: 88px 0 40px;
}

.pb-mosaico {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 236px;
   gap: 16px;
}

.pb-linea {
   position: relative;
   display: flex;
   flex-direction: column;
   padding: 22px 22px 20px;
   border-radius: 22px;
   background: linear-gradient(160deg, var(--p-frio) 0%, #e7eff4 100%);
   overflow: clip; /* clip: con hidden, la G que sobresale lo hacía desplazable al enfocar un enlace (11-11-2026) */
   isolation: isolate;
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pb-linea:hover,
.pb-linea:focus-within {
   transform: translateY(-4px);
   box-shadow: 0 26px 46px -28px rgba(18, 52, 77, 0.5);
}

/* la foto, abajo a la derecha y por debajo del texto: con 62 % de alto llegaba a «UPS, mini UPS y baterías…» y a
   los textos de 3 líneas (11-11-2026, el usuario vio el solape en Bancos de energía) */
.pb-linea img {
   position: absolute;
   right: 5%;
   bottom: 5%;
   z-index: -1;
   width: 56%;
   height: 38%;
   object-fit: contain;
   object-position: right bottom;
   transition: transform 0.4s ease;
}

.pb-linea:hover img {
   transform: scale(1.05);
}

.pb .pb-linea h3 {
   max-width: 70%;
   font-size: 19px;
   font-weight: 700;
   line-height: 1.2;
   color: var(--p-tinta);
}

.pb-linea h3 a,
.pb-linea h3 a:hover,
.pb-linea h3 a:focus {
   color: inherit;
   text-decoration: none;
}

/* Fitts: el enlace del nombre cubre toda la tarjeta */
.pb-linea h3 a::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
}

.pb .pb-linea-que {
   max-width: 58%;
   margin-top: 6px;
   font-size: 13px;
   line-height: 1.45;
   color: var(--p-texto);
}

.pb-linea-ir {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   margin-top: auto;
   border-radius: 50%;
   background: #ffffff;
   color: var(--p-verde-oscuro);
   font-size: 18px;
   font-weight: 700;
   box-shadow: 0 6px 16px -8px rgba(18, 52, 77, 0.4);
   transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pb-linea:hover .pb-linea-ir {
   background: var(--p-verde);
   color: #ffffff;
   transform: translateX(3px);
}

/* las alturas: la nevera en una tarjeta alta, los aires en la grande */
.pb-linea--alta {
   grid-row: span 2;
}

/* la nevera, un poco a la derecha del centro para no rozar la flecha de abajo a la izquierda */
.pb-linea--alta img {
   right: 40%;
   bottom: 4%;
   width: 70%;
   height: 66%;
   object-position: center bottom;
   transform: translateX(50%);
}

.pb-linea--alta:hover img {
   transform: translateX(50%) scale(1.05);
}

.pb-linea--grande {
   grid-column: span 2;
   grid-row: span 2;
   padding: 34px 34px 30px;
   background: var(--p-noche);
}

/* la «G» de la marca de agua, blanca, en la grande */
.pb-linea--grande::before {
   content: "";
   position: absolute;
   top: -75px;
   right: -60px;
   z-index: -2;
   width: 370px;
   height: 370px;
   background: url(/media/optimizadas/marca/marca-agua-blanca.webp) no-repeat center / contain;
   opacity: 0.1;
}

/* split Enduramax recortado (aires-split.webp, 1000×371): el usuario lo pidió más grande (94%) y luego
   más pequeño en dos pasos (85% y 76% del ancho de la caja, 11-11-2026) */
.pb-linea--grande img {
   right: 50%;
   bottom: 16%;
   width: 76%;
   height: 42%;
   object-position: center bottom;
   transform: translateX(50%);
}

.pb-linea--grande:hover img {
   transform: translateX(50%) scale(1.04);
}

.pb .pb-linea--grande h3 {
   max-width: 80%;
   font-size: clamp(26px, 2.6vw, 34px);
   color: #ffffff;
}

.pb .pb-linea--grande .pb-linea-que {
   max-width: 80%;
   font-size: 15px;
   color: #c4d2db;
}

.pb-linea--grande .pb-linea-ir {
   background: var(--p-verde);
   color: #ffffff;
   box-shadow: none;
}

.pb-linea--grande:hover .pb-linea-ir {
   background: #ffffff;
   color: var(--p-verde-oscuro);
}

/* los tipos de aire: enlaces propios, por encima del enlace que cubre la tarjeta */
.pb-tipos {
   position: relative;
   z-index: 2;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 16px;
}

.pb .pb-tipos a {
   display: inline-flex;
   align-items: center;
   min-height: 34px;
   padding: 6px 14px;
   border: 1px solid rgba(255, 255, 255, 0.22);
   border-radius: 999px;
   color: #ffffff;
   font-size: 13px;
   font-weight: 600;
   text-decoration: none;
   transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pb .pb-tipos a:hover,
.pb .pb-tipos a:focus-visible {
   border-color: var(--p-verde);
   background: var(--p-verde);
   color: #ffffff;
}

/* ---------- 4. bloque de marca ---------- */
/* separador de marca (11-11-2026): líneas con la G, entre el mosaico, «1 de cada 3» y más vendidos. La G venía
   en el verde lima antiguo y se repintó al de marca (#00845c) */
.pb-separador {
   display: flex;
   justify-content: center;
   padding: 0 24px;
}

/* 400 px como en el diseño anterior (el usuario: 960 era demasiado); el archivo es de 800 para pantallas 2× */
.pb-separador img {
   display: block;
   width: min(100%, 400px);
   height: auto;
}

.pb-marca {
   padding: 40px 0;
}

.pb-marca-caja {
   position: relative;
   display: grid;
   grid-template-columns: 1.05fr 1fr;
   align-items: center;
   gap: 48px;
   padding: 56px;
   border-radius: 28px;
   background: var(--p-verde-claro);
   overflow: hidden;
   isolation: isolate;
}

.pb-marca-caja::before {
   content: "";
   position: absolute;
   left: -90px;
   bottom: -120px;
   z-index: -1;
   width: 420px;
   height: 455px;
   background: url("/media/optimizadas/marca/marca-agua-verde.webp?v=2") no-repeat center / contain;
   opacity: 0.08;
}

.pb .pb-cifra {
   display: block;
   font-size: clamp(48px, 6vw, 84px);
   font-weight: 700;
   line-height: 0.95;
   white-space: nowrap;
   color: var(--p-verde);
}

.pb .pb-marca h2 {
   margin-top: 8px;
   font-size: clamp(22px, 2.4vw, 30px);
   font-weight: 700;
   line-height: 1.2;
   color: var(--p-tinta);
}

.pb .pb-marca-texto p {
   margin: 16px 0 28px;
   max-width: 460px;
   color: var(--p-texto);
}

/* la foto «1 de cada 3 aires en Venezuela es Gtronic» (11-11-2026) en lugar de la cifra escrita: tarjeta blanca como
   las de los iconos; el split se sale por la izquierda de la foto, y el recorte de la tarjeta lo deja limpio */
.pb .pb-marca-foto {
   margin: 14px 0 0;
   overflow: hidden;
   border-radius: 20px;
   background: #ffffff;
   box-shadow: 0 16px 36px -28px rgba(18, 52, 77, 0.4);
}

.pb-marca-foto img {
   display: block;
   width: 100%;
   height: auto;
}

/* ---------- 4b. vídeo de tecnología ---------- */
.pb-video {
   padding: 40px 0 48px;
}

.pb-video-caja {
   display: grid;
   grid-template-columns: 4fr 8fr;
   align-items: center;
   gap: 48px;
}

.pb-video-texto .pb-boton {
   margin-top: 26px;
}

.pb-video-marco {
   position: relative;
   overflow: hidden;
   aspect-ratio: 16 / 9;
   border-radius: 28px;
   background: #ffffff;
   box-shadow: 0 24px 48px -30px rgba(18, 52, 77, 0.45);
}

.pb-video-v {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* el vídeo trae bandas negras grabadas (120 px arriba y abajo de 720, medido en todos los fotogramas): con JS
   (sin controles nativos, que quedarían tapados) el marco toma la proporción útil, 1280×480, y el vídeo se
   estira un 150 % de alto y sube un 25 % para que las bandas queden fuera */
.pb-video-marco.pb-video--recortado {
   aspect-ratio: 1280 / 480;
}

.pb-video--recortado .pb-video-v {
   position: absolute;
   top: -25%;
   left: 0;
   height: 150%;
}

/* pausar / reanudar (lo pone js/portada.js cuando el vídeo arranca solo: WCAG 2.2.2) */
.pb-video-pausa {
   position: absolute;
   right: 16px;
   bottom: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.92);
   color: var(--p-verde);
   font-size: 15px;
   line-height: 1;
   box-shadow: 0 6px 18px -8px rgba(18, 52, 77, 0.5);
   cursor: pointer;
}

.pb-video-pausa:hover,
.pb-video-pausa:focus-visible {
   background: var(--p-verde);
   color: #ffffff;
}

.pb-beneficios {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
}

/* tarjetas que giran (11-11-2026, js/portada.js): cada una tiene cara de delante y, con JS, de atrás; al girar,
   la de atrás trae el siguiente de los 9 iconos. La tarjeta blanca es la cara, no el <li>, para que gire entera */
.pb-beneficios li {
   perspective: 1000px;
}

.pb-flip-in {
   position: relative;
   height: 100%;
   transform-style: preserve-3d;
   transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.25, 1);
}

.pb-flip.pb-girada .pb-flip-in {
   transform: rotateY(180deg);
}

.pb-flip-cara {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   padding: 14px 10px 8px;
   border-radius: 20px;
   background: #ffffff;
   box-shadow: 0 16px 36px -28px rgba(18, 52, 77, 0.4);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

.pb-flip-cara--atras {
   position: absolute;
   inset: 0;
   transform: rotateY(180deg);
}

.pb-beneficios img {
   display: block;
   width: 100%;
   max-width: 170px;
   height: auto;
}

/* ---------- 5. más vendidos ---------- */
.pb-vendidos {
   padding: 24px 0 80px;
}

/* recién llegados, justo debajo de más vendidos: sin el relleno de arriba (ya lo da el de abajo de la anterior) */
.pb-vendidos.pb-llegados {
   padding-top: 0;
}

/* ---------- 6. cierre ---------- */
.pb-final {
   padding: 0 0 80px;
}

.pb-final-caja {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   padding: 52px 56px;
   border-radius: 28px;
   background: var(--p-noche);
   overflow: clip; /* clip: con hidden, la G que sobresale lo hacía desplazable al enfocar un enlace (11-11-2026) */
   isolation: isolate;
}

.pb-final-caja::before {
   content: "";
   position: absolute;
   top: -40px;
   right: -15px;
   z-index: -1;
   width: 295px;
   height: 330px;
   background: url(/media/optimizadas/marca/marca-agua-blanca.webp) no-repeat center / contain;
   opacity: 0.1;
}

.pb .pb-final h2 {
   font-size: clamp(24px, 2.6vw, 34px);
   font-weight: 700;
   line-height: 1.2;
   color: #ffffff;
}

.pb .pb-final p {
   margin-top: 10px;
   color: #c4d2db;
}

.pb-final .pb-botones {
   flex: none;
}

.pb .pb-final .pb-boton--borde {
   color: #ffffff;
   border-color: rgba(255, 255, 255, 0.35);
}

.pb .pb-final .pb-boton--borde:hover,
.pb .pb-final .pb-boton--borde:focus-visible {
   background: #ffffff;
   border-color: #ffffff;
   color: var(--p-tinta);
}

/* ---------- animaciones de entrada (js/portada.js pone .pb-js; sin JS todo se ve) ---------- */
.pb-js .pb-revela {
   opacity: 0;
   transform: translateY(26px);
   transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
   transition-delay: var(--pb-retardo, 0s);
}

.pb-js .pb-revela.pb-visto {
   opacity: 1;
   transform: none;
}

/* ---------- tableta ---------- */
/* hero apilado: por debajo de 1180 px la zona blanca del banner no da para el titular (a 1024 serían ~290 px) */
@media (max-width: 1179px) {
   .pb-hero {
      display: block;
      min-height: 0;
      background: #ffffff;
   }

   .pb-hero picture {
      display: block;
   }

   .pb-hero-foto {
      position: static;
      display: block;
      height: auto;
      aspect-ratio: 1920 / 720;
      object-position: center;
   }

   .pb-hero .pb-contenedor {
      max-width: var(--p-ancho);
      margin: 0 auto;
      padding: 30px 24px 40px;
   }

   .pb-hero-texto {
      max-width: 660px;
   }

   .pb .pb-hero h1 {
      font-size: clamp(36px, 5vw, 48px);
   }

   .pb .pb-hero-lema {
      font-size: 19px;
   }

   .pb-confianza {
      margin-top: 0;
   }
}

@media (max-width: 1024px) {
   /* vídeo debajo del texto, a todo el ancho */
   .pb-video-caja {
      grid-template-columns: 1fr;
      gap: 24px;
   }

   .pb-video-texto .pb-boton {
      margin-top: 18px;
   }

   .pb-marca-foto {
      max-width: 560px;
   }

   .pb-mosaico {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 210px;
   }

   .pb-marca-caja {
      grid-template-columns: 1fr;
      padding: 44px 36px;
   }

   .pb-beneficios {
      grid-template-columns: repeat(4, 1fr);
   }

   .pb-final-caja {
      flex-direction: column;
      align-items: flex-start;
      padding: 44px 36px;
   }
}

/* ---------- móvil ---------- */
@media (max-width: 768px) {
   .pb-contenedor {
      padding: 0 16px;
   }

   /* el recorte del banner sin la zona blanca (hero-cocina-movil-*, 1300×720), arriba del texto */
   .pb-hero-foto {
      aspect-ratio: 1300 / 720;
   }

   .pb-hero .pb-contenedor {
      padding: 26px 16px 28px;
   }

   .pb .pb-hero h1 {
      font-size: 36px;
   }

   .pb .pb-hero-lema {
      margin: 12px 0 22px;
      font-size: 18px;
   }

   .pb .pb-cifra {
      font-size: clamp(36px, 12vw, 56px);
   }

   .pb-hero .pb-botones {
      flex-direction: column;
   }

   .pb .pb-boton {
      width: 100%;
   }

   .pb-confianza {
      margin-top: 0;
   }

   .pb-confianza ul {
      grid-template-columns: 1fr;
   }

   .pb-confianza li {
      padding: 16px 18px;
   }

   .pb-confianza li+li {
      border-left: 0;
      border-top: 1px solid var(--p-borde);
   }

   .pb-confianza strong {
      min-width: 92px;
      font-size: 24px;
   }

   .pb-lineas {
      padding: 56px 0 24px;
   }

   .pb-cabeza {
      display: block;
   }

   .pb-mosaico {
      gap: 12px;
      grid-auto-rows: 176px;
   }

   .pb-linea {
      padding: 16px 16px 14px;
      border-radius: 18px;
   }

   .pb .pb-linea h3 {
      max-width: 100%;
      font-size: 16px;
   }

   .pb .pb-linea-que {
      display: none;
   }

   .pb-linea img {
      right: 8%;
      bottom: 8%;
      width: 58%;
      height: 54%;
   }

   .pb-linea-ir {
      width: 34px;
      height: 34px;
      font-size: 16px;
   }

   .pb-linea--grande {
      grid-row: span 2;
      padding: 24px 20px 20px;
   }

   .pb .pb-linea--grande h3 {
      font-size: 24px;
   }

   .pb .pb-linea--grande .pb-linea-que {
      display: block;
      max-width: 100%;
      font-size: 14px;
   }

   /* right: 50% otra vez: el «.pb-linea img { right: 8% }» de arriba pisaba el centrado (translateX(50%)) de la
      grande y de la alta, y el aire y la nevera salían corridos a la derecha y cortados */
   .pb-linea--grande img {
      right: 50%;
      bottom: 10%;
      width: 78%;
      height: 34%;
   }

   .pb-linea--alta img {
      right: 38%;
   }

   .pb-linea--grande .pb-linea-ir {
      display: none;
   }

   .pb-marca {
      padding: 28px 0;
   }

   .pb-video {
      padding: 28px 0 32px;
   }

   .pb-video-marco {
      border-radius: 20px;
   }

   .pb-video-pausa {
      right: 10px;
      bottom: 10px;
      width: 40px;
      height: 40px;
   }

   .pb-separador {
      padding: 0 16px;
   }

   .pb-marca-caja {
      gap: 32px;
      padding: 36px 22px;
      border-radius: 22px;
   }

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

   .pb-vendidos {
      padding: 8px 0 56px;
   }

   .pb-final {
      padding-bottom: 56px;
   }

   .pb-final-caja {
      padding: 36px 22px;
      border-radius: 22px;
   }

   .pb-final .pb-botones {
      width: 100%;
      flex-direction: column;
   }
}

@media (prefers-reduced-motion: reduce) {

   .pb-linea,
   .pb-linea img,
   .pb-linea-ir,
   .pb-flip-in,
   .pb .pb-boton::after {
      transition: none;
   }

   .pb-linea:hover,
   .pb-linea:focus-within,
   .pb-linea:hover img {
      transform: none;
   }

   .pb-linea--alta:hover img,
   .pb-linea--grande:hover img {
      transform: translateX(50%);
   }
}

/* ---------- 7. pie: ahora es común a toda la web, en css/pie.css (11-11-2026) ---------- */