/* Hero de volquetasmontevideo.com con el estilo de pintor.uy (23/10/2026), como sanitariosmoviles.uy.
   Solo H1, bajada y botón de WhatsApp. Texto a la izquierda sobre la foto, velo negro de abajo hacia arriba,
   H1 en Oswald mayúsculas y botón rectangular de radio 8 en rojo con letra blanca. */
:root{
  --hero-fs-lg:clamp(1.0625rem,.99rem + .3vw,1.25rem);   /* 17–20: bajada */
  --hero-fs-h1:clamp(2.125rem,1.5rem + 2.6vw,3.5rem);     /* 34–56 */
}

/* Alto según el contenido; el header transparente va encima */
.hero{background:#1B1B1B !important}
.hero .hero__layout{min-height:0 !important;padding:calc(var(--alto-header) + 52px) 16px 60px !important;justify-content:flex-start}
@media (min-width:700px){.hero .hero__layout{padding-left:28px !important;padding-right:28px !important}}
.hero__content{max-width:none !important;width:100%;text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 16px rgba(0,0,0,.45)}

/* Foto sin filtro y velo negro suave (23/10: "más clarito"), más fuerte abajo; el texto lleva sombra para leerse */
.hero__bg-img{filter:none !important}
.hero__bg-overlay{background:linear-gradient(0deg,rgba(20,20,20,.68) 0%,rgba(20,20,20,.48) 40%,rgba(20,20,20,.22) 80%,rgba(20,20,20,.15) 100%) !important}
@media (max-width:600px){.hero__bg-overlay{background:linear-gradient(0deg,rgba(20,20,20,.72) 0%,rgba(20,20,20,.55) 50%,rgba(20,20,20,.35) 100%) !important}}

/* H1 */
.hero__title{font-family:var(--cab-f-titulos) !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:.015em !important;line-height:1.05 !important;color:#fff !important;max-width:none;margin:.15em 0 .35em !important;font-size:var(--hero-fs-h1) !important;text-wrap:balance;animation:none !important;opacity:1 !important}
.hero__title em{font-style:normal}

/* Bajada */
.hero__subtitle{font-family:"Host Grotesk",sans-serif !important;font-size:var(--hero-fs-lg) !important;font-weight:400 !important;line-height:1.65 !important;color:#EBEBEB !important;max-width:760px;margin:0 !important;animation:none !important;opacity:1 !important}

/* Botón de WhatsApp: rectángulo de radio 8 px en rojo, letra blanca */
.hero__actions{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:10px;margin-top:24px !important;animation:none !important;opacity:1 !important}
.hero__actions .hero__btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.85em 1.5em !important;border-radius:8px !important;font-size:calc(var(--cab-fs-btn) * 1.1) !important;text-shadow:none}
.hero__actions .hero__btn-primary::after{content:none !important}
.hero__actions .icon{width:1.15em;height:1.15em;flex:0 0 auto}

/* Celular: el botón a todo el ancho; H1 que entra en pocas líneas */
@media (max-width:767px){
  .hero .hero__layout{padding-top:calc(var(--alto-header) + 32px) !important;padding-bottom:44px !important}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .hero__btn-primary{width:100%}
  .hero__title{font-size:6.8vw !important}
}
/* Celulares chicos (menos de 375 px): el botón con letra un poco menor para que "Obtener tu presupuesto" entre en una línea */
@media (max-width:374px){.hero__actions .hero__btn-primary{font-size:.9375rem !important;padding-left:12px !important;padding-right:12px !important}}

.hero__eyebrow{display:none !important}

.hero__actions .hero__btn-primary{background:var(--cab-acento) !important;color:#fff !important;border-color:transparent !important;font-family:var(--cab-f-titulos) !important;font-weight:700 !important;text-transform:uppercase;letter-spacing:.04em;box-shadow:none !important}
.hero__actions .hero__btn-primary:hover{background:var(--cab-acento-2) !important}
.hero__btn-primary::before{content:none !important}

/* Fotos del hero (23/10/2026), una por resolución: la volqueta a la derecha en escritorio y tablet, abajo en celular */
.hero__bg-img{object-position:right 70% !important}
@media (max-width:600px){.hero__bg-img{object-position:center bottom !important}}
/* style.css apila y centra los botones en tablet: desde 768 px el botón queda a la izquierda, alineado con el texto */
@media (min-width:768px){.hero__actions{flex-direction:row !important;align-items:center !important;justify-content:flex-start !important}}