/* Cartelería: el 3 en 1 (WhatsApp + Instagram + Google) es el más grande. Los vinilos se sacaron
   a pedido de Valentín (30/10/2026): quedan solo los carteles. */

/* Arriba de todo: el 3 en 1 grande a la izquierda y a la derecha los otros dos carteles. */
.hero-products.hp-v2{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"main main s1 s2";align-items:end}
.hp-v2 .hero-product{grid-column:auto}
.hp-v2 .hero-product-1{grid-area:main}
.hp-v2 .hero-product-2{grid-area:s1}
.hp-v2 .hero-product-3{grid-area:s2}
.hp-v2 .hero-product-1 img{height:430px}
.hp-v2 .hp-sign img{height:300px}
.hp-v2 .hero-product-1 figcaption{font-size:.78rem}

/* Ficha del 3 en 1: foto más grande y destacada */
.product-card-featured .product-visual{height:620px;position:relative}
.product-card-featured .product-visual img{object-position:center 40%}
.product-badge{color:var(--light);background:var(--primary);border-radius:999px;padding:7px 13px;font-size:.78rem;font-weight:800;position:absolute;top:12px;left:12px;box-shadow:0 6px 18px oklch(39% .11 266/.25)}
.product-card-featured .product-title h3{font-size:clamp(1.9rem,3.2vw,2.8rem)}

@media (width<=950px){
  .hp-v2 .hero-product-1 img{height:340px}
  .hp-v2 .hp-sign img{height:230px}
  .product-card-featured .product-visual{height:540px}
}

/* Celular: el 3 en 1 a todo lo ancho y abajo, uno al lado del otro, los otros dos carteles */
@media (width<=700px){
  .hero-products.hp-v2{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"main main" "s1 s2"}
  .hp-v2 .hero-product-1 img{height:250px}
  .hp-v2 .hp-sign img{height:150px}
  .hp-v2 .hp-sign figcaption{font-size:.58rem}
  .hp-v2 .hero-product-1 figcaption{font-size:.62rem}
  .product-card-featured .product-visual{aspect-ratio:1113/1197;height:auto}
  .product-badge{font-size:.7rem;top:12px;left:12px}
}

/* Para qué sirve cada uno: WhatsApp, Google e Instagram (reemplaza el título grande) */
.hero h1.benefits-title{margin:0 auto 18px;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.15}
.hero h1.benefits-title:after{display:none}
.benefits{text-align:left;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 auto 26px;padding:0;list-style:none;display:grid}
.benefit{--c:var(--wa-green-deep);--tint:color-mix(in oklab,var(--c) 9%,var(--card));border:1px solid color-mix(in oklab,var(--c) 30%,var(--border));background:var(--tint);border-radius:14px;align-items:center;gap:14px;padding:16px;display:flex;position:relative;overflow:hidden}
.benefit:before{content:"";background:var(--c);width:5px;position:absolute;top:0;bottom:0;left:0}
.benefit img{background:#fff;border-radius:12px;flex:none;width:58px;height:58px;padding:5px;box-shadow:0 4px 14px oklch(19% .025 258/.1)}
.benefit div{flex-direction:column;gap:2px;min-width:0;display:flex}
.benefit-name{color:var(--muted-foreground);letter-spacing:.08em;text-transform:uppercase;font-size:.7rem;font-weight:800}
.benefit-big{font-family:var(--font-display);color:var(--c);font-size:1.22rem;font-weight:800;line-height:1.15}
.benefit-small{color:var(--muted-foreground);font-size:.82rem;line-height:1.4}
.benefit-wa{--c:oklch(55% .16 156)}
.benefit-g{--c:oklch(55% .19 262)}
.benefit-ig{--c:oklch(57% .24 350)}
.benefit-ig .benefit-big{width:fit-content;background:linear-gradient(90deg,#f09433,#dc2743 45%,#bc1888);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}
.benefit-ig:before{background:var(--ig-gradient)}

@media (width<=950px){
  .benefits{grid-template-columns:minmax(0,1fr);max-width:560px}
}
@media (width<=700px){
  .hero h1.benefits-title{margin-bottom:14px}
  .benefits{gap:10px;margin-bottom:22px}
  .benefit{gap:12px;padding:12px 14px 12px 16px}
  .benefit img{width:50px;height:50px;padding:4px}
  .benefit-big{font-size:1.12rem}
  .benefit-small{font-size:.78rem}
}

/* Orden de arriba (30/10/2026, pedido de Valentín): primero los productos con el 3 en 1 grande
   (.hero-top); al bajar, «¿Cómo funciona?» con el video; después, «Para qué sirve cada uno»
   (.hero-benefits, sin los círculos de fondo). */
.hero.hero-top{min-height:auto;padding-bottom:24px}
.hero-top+.how-it-works{padding-top:36px}
.hero.hero-benefits{min-height:auto;padding:72px 0 8px}
.hero.hero-benefits:before,.hero.hero-benefits:after{display:none}
@media (width<=700px){
  .hero.hero-top{padding-bottom:16px}
  .hero-top+.how-it-works{padding-top:24px}
  .hero.hero-benefits{padding:52px 0 0}
}