/* Hero de pergolas.uy con el estilo de pintor.uy (23/10/2026).
   Solo H1, bajada y botón de WhatsApp. Texto a la izquierda sobre la foto, velo negro de abajo hacia arriba (pedido del usuario, 23/10: "que sea negro"),
   H1 en Oswald mayúsculas y botón rectangular de radio 8 en madera. */
:root{
  --hero-fs-lg:clamp(1.0625rem,.99rem + .3vw,1.25rem);   /* 17–20: bajada */
  --hero-fs-h1:clamp(2rem,1.55rem + 1.9vw,3.125rem);      /* 32–50 */
  --hero-fs-h1-home:clamp(2.125rem,1.5rem + 2.6vw,3.5rem); /* 34–56 */
}

/* Alto según el contenido; el header transparente va encima */
.pergola-hero.pergola-hero--foto{padding:calc(var(--alto-header) + 28px) 0 40px;background-color:#1B1B1B}
.pergola-hero.pergola-hero--foto.pergola-hero--home{padding:calc(var(--alto-header) + 52px) 0 60px}
.pergola-hero--foto .pergola-hero__inner{display:block;min-height:0}
.pergola-hero--foto .pergola-hero__contenido{max-width:none;width:100%;text-shadow:0 1px 12px rgba(0,0,0,.35)}

/* Velo: negro como pintor.uy, más fuerte abajo */
.pergola-hero--foto::before{background:linear-gradient(0deg,rgba(20,20,20,.92) 0%,rgba(20,20,20,.7) 40%,rgba(20,20,20,.35) 80%,rgba(20,20,20,.3) 100%)}

/* H1 */
.pergola-hero--foto .pergola-hero__title,.pergola-hero:not(.pergola-hero--home) .pergola-hero__title{font-family:var(--cab-f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.015em;line-height:1.05;color:#fff;max-width:none;margin:.15em 0 .35em;font-size:var(--hero-fs-h1);text-wrap:balance}
.pergola-hero--foto.pergola-hero--home .pergola-hero__title{font-size:var(--hero-fs-h1-home)}

/* Bajada */
.pergola-hero--foto .pergola-hero__intro,.pergola-hero:not(.pergola-hero--home) .pergola-hero__intro{font-size:var(--hero-fs-lg);line-height:1.65;color:#EBEBEB;max-width:760px}
.pergola-hero--foto .pergola-hero__intro p{margin:0 0 1em}
.pergola-hero--foto .pergola-hero__intro strong,.pergola-hero--foto .pergola-hero__intro a{color:#fff}

/* Botón de WhatsApp: rectángulo de radio 8 px en madera, letra blanca */
.pergola-hero--foto .pergola-hero__actions{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:10px;margin-top:20px;flex-direction:row}
.pergola-hero--foto .pergola-hero__actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:auto;min-width:0;min-height:0;padding:.85em 1.5em;border-radius:8px;border:2px solid transparent;font-family:var(--cab-f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:calc(var(--cab-fs-btn) * 1.1);line-height:1.2;text-decoration:none;text-shadow:none;box-shadow:none;transform:none;background:var(--cab-acento);color:#fff}
.pergola-hero--foto .pergola-hero__actions .btn:hover{background:var(--cab-acento-2);color:#fff}
.pergola-hero--foto .pergola-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){
  .pergola-hero--foto .pergola-hero__actions{flex-direction:column;align-items:stretch}
  .pergola-hero--foto .pergola-hero__actions .btn{width:100%}
  .pergola-hero.pergola-hero--foto .pergola-hero__title,.pergola-hero.pergola-hero--foto:not(.pergola-hero--home) .pergola-hero__title{font-size:6.8vw}
}
@media (max-width:600px){.pergola-hero--foto::before{background:linear-gradient(0deg,rgba(20,20,20,.92) 0%,rgba(20,20,20,.75) 50%,rgba(20,20,20,.5) 100%)}}
/* 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){.pergola-hero--foto .pergola-hero__actions .btn{font-size:.9375rem;padding-left:12px;padding-right:12px}}

/* La tarjeta que iba al costado del hero (reseñas o confianza) queda en una franja debajo */
.pergola-hero-debajo{padding:28px 0 8px}
.pergola-hero-debajo .pergola-hero__lateral{display:block;margin:0 auto}
.pergola-hero-debajo .pergola-hero__lateral:empty{display:none}
.pergola-hero-debajo .resenas-google{max-width:none}
@media (min-width:900px){.pergola-hero-debajo .resenas-google__confianza{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px}.pergola-hero-debajo .resenas-google__confianza li{border-bottom:0}}