/* Header y hero de steelframingcordoba.com con el modelo de pintor.uy (26/10/2026).
   Va después de sitio.css y solo pisa estilos: no cambia textos, enlaces ni encabezados.
   Paleta nueva (26/10): gris oscuro #303136 (barra superior, velo, pie) y rojo #E1282D (botones, rayas del menú), la del logo de la cercha. */
:root{--sfc-oscuro:#303136;--sfc-velo:30,30,33;--alto-header:64px}
@media(min-width:1100px){:root{--alto-header:80px}}

/* Header: logo más grande, como pintor (64/80 px de alto) */
.header__logo{padding:5px 0}
.header__logo img{height:52px}
@media(min-width:1100px){.header__logo img{height:66px}}
.nav__link::after{bottom:20px}
@media(min-width:1100px){.nav__link::after{bottom:22px}}
.header.is-scrolled,.header.menu-abierto{box-shadow:0 3px 0 rgba(48,49,54,.08)}
/* Sobre la foto: el mismo logo a color con contorno blanco (no la versión con letras blancas) y menú blanco */
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto):not(:has(.is-abierto)){border-bottom-color:transparent}
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto):not(:has(.is-abierto)) :is(.nav__link,.nav__abrir){text-shadow:0 1px 8px rgba(0,0,0,.3)}
.header__logo img{aspect-ratio:1112/300}.header .logo--claro,.header__logo img.logo--claro{aspect-ratio:820/240}.footer .logo{aspect-ratio:820/240}
/* Celular: solo logo y hamburguesa, sin el botón (como pintor.uy) */
@media(max-width:767px){.header .header__cta{display:none}}
.burger span{background:var(--c-texto)}

/* Hero: solo H1, bajada y un botón de WhatsApp. Migas, etiquetas y nota quedan en el HTML (y las migas en el JSON-LD), sin mostrarse */
.hero .migas,.hero__etiquetas,.hero__nota{display:none}
.hero{padding:28px 0 40px}
.hero--home{padding:52px 0 60px}
@media(min-width:900px){.hero,.hero--foto{padding:52px 0 60px}.hero--home{padding:72px 0 80px}.hero--guia{padding:40px 0 48px}}
.hero__texto{max-width:none}
.hero h1{max-width:none;margin:.15em 0 .35em}
.hero__lead{max-width:760px;color:#EBEBEB}
.hero__cta{gap:10px;margin-top:20px}
@media(min-width:900px){.hero__cta{margin-top:24px}}
.hero .btn--lg{min-height:0;padding:.85em 1.5em;font-size:clamp(1.0625rem,1rem + .25vw,1.25rem)}

/* Velo del oscuro de la marca, más fuerte abajo; la sombra del texto, como pintor */
.hero--foto::after{background:var(--velo-arriba),linear-gradient(0deg,rgba(var(--sfc-velo),.92) 0%,rgba(var(--sfc-velo),.7) 40%,rgba(var(--sfc-velo),.35) 80%,rgba(var(--sfc-velo),.3) 100%)}
@media(min-width:900px){.hero--foto::after{background:var(--velo-arriba),linear-gradient(0deg,rgba(var(--sfc-velo),.92) 0%,rgba(var(--sfc-velo),.7) 40%,rgba(var(--sfc-velo),.35) 80%,rgba(var(--sfc-velo),.3) 100%)}}
.hero--foto h1,.hero--foto .hero__lead,.hero--foto .hero__fecha{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero--foto .btn{text-shadow:none}
.hero:not(.hero--foto){background:var(--sfc-oscuro)}

/* Celular: H1 a 6,8vw y el botón a todo el ancho */
@media(max-width:767px){
  .hero h1,.hero--home h1,.hero--guia h1{font-size:6.8vw}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
}
@media(max-width:374px){.hero__cta .btn{font-size:.9375rem;padding-left:12px;padding-right:12px}}

.header__logo img.logo--claro{height:58px}@media(min-width:1100px){.header__logo img.logo--claro{height:72px}}
@media(min-width:1100px) and (max-width:1499px){.topbar__extra{display:none}}

/* ===== Ventajas de la home (26/10/2026), CSS de las ventajas de pintor.uy / casasdeisopanel.uy =====
   Franja blanca propia debajo del hero (no se monta encima). Paleta nueva: rojo #E1282D, gris oscuro #303136, blanco.
   Celular: una tarjeta con filas, ícono en círculo a la izquierda. Desde 760 px: tarjetas sueltas con pestaña roja,
   ícono en círculo gris claro, título Oswald con rayita roja y sombra recta. 4 columnas desde 1100 px. */
:root{--sfc-rojo:#E1282D;--sfc-gris:#303136}
.ventajas{position:relative;z-index:2;margin:0;padding:clamp(28px,4vw,52px) 0 clamp(28px,4vw,48px);background:#fff}
.ventajas__tarjeta{display:grid;grid-template-columns:1fr;gap:0;list-style:none;margin:0;padding:0;background:#fff;border:1px solid #E0E0E0;border-radius:14px;box-shadow:0 4px 0 rgba(48,49,54,.06)}
.ventaja{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:0;align-items:start;padding:20px 18px 22px;border:0;border-bottom:1px solid #E0E0E0}
.ventaja:last-child{border-bottom:0}
.ventaja__ico{grid-row:1 / 3;align-self:start;width:72px;height:72px;margin:0;object-fit:contain;box-sizing:border-box;padding:6px;background:radial-gradient(circle closest-side,#EBEBEB 0 calc(100% - .5px),transparent 100%);transition:background .2s,transform .25s}
.ventaja__t{position:relative;align-self:start;margin:4px 0 0;padding-bottom:8px;font-family:var(--f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.25rem;line-height:1.1;color:var(--sfc-gris)}
.ventaja__t::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:2px;background:var(--sfc-rojo)}
.ventaja__d{grid-column:2;margin:8px 0 0;font-size:.9375rem;line-height:1.55;color:#545454}
.ventaja__d a{color:var(--sfc-rojo);font-weight:700;text-underline-offset:3px}
@media(min-width:760px){
  .ventajas__tarjeta{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;background:none;border:0;border-radius:0;box-shadow:none}
  .ventaja,.ventaja:last-child{position:relative;grid-template-columns:1fr;grid-template-rows:auto;padding:30px 26px 28px;background:#fff;border:1px solid #E0E0E0;border-radius:16px;box-shadow:0 6px 0 rgba(48,49,54,.07);transition:transform .2s,box-shadow .2s}
  .ventaja::before{content:"";position:absolute;top:-1px;left:26px;width:56px;height:4px;border-radius:0 0 4px 4px;background:var(--sfc-rojo)}
  .ventaja__ico{grid-row:auto;width:96px;height:96px;padding:8px;margin:0 0 20px}
  .ventaja__t{margin-top:0;font-size:1.375rem;padding-bottom:10px}
  .ventaja__d{grid-column:auto;margin-top:12px}
  .ventaja:hover{transform:translateY(-4px);box-shadow:0 10px 0 rgba(48,49,54,.09)}
  .ventaja:hover .ventaja__ico{background:radial-gradient(circle closest-side,#E0E0E0 0 calc(100% - .5px),transparent 100%);transform:translateY(-2px) scale(1.04)}
}
@media(min-width:1100px){.ventajas__tarjeta{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.ventaja,.ventaja:last-child{padding:32px 24px 30px}}
@media(prefers-reduced-motion:reduce){.ventaja,.ventaja__ico{transition:none}.ventaja:hover,.ventaja:hover .ventaja__ico{transform:none}}
.ventajas + .indice,.ventajas + .cuerpo-wrap{margin-top:0}
.footer img.logo{display:block;height:72px;width:auto;margin-bottom:14px}
/* Logo de la cercha (más ancho que el apilado): alto un poco menor en escritorio y menú más compacto hasta 1499 px para que entre el botón */
@media(min-width:1100px){.header__logo img{height:56px}.header__logo img.logo--claro{height:62px}}
@media(min-width:1100px) and (max-width:1499px){.nav__link{padding:0 9px;font-size:1rem}.nav__link::after{left:9px;right:9px}.nav__abrir{width:28px}.header__fila{gap:12px}}
