/* Header y hero de steelframingbuenosaires.com con el CSS de pintor.uy (23/10/2026).
   Misma estructura, medidas y paleta que pintor.uy (gris oscuro #2E2E2E, rojo #D62828). Va después de style.css y pisa
   las reglas viejas del header y del hero; algunas clases van dobles (.topbar.topbar) para ganarle a selectores viejos como
   .home-page .topbar. Sin blur. */
@font-face{font-family:Oswald;font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/oswald-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Oswald;font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/oswald-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --cab-f-titulos:Oswald,"Arial Narrow",sans-serif;
  --cab-pri:#2E2E2E;--cab-pri-2:#1F1F1F;--cab-rojo:#D62828;--cab-rojo-2:#B01E1E;
  --cab-texto:#181818;--cab-texto-2:#545454;--cab-borde:#E5E5E5;--cab-fondo-2:#F5F5F5;
  --cab-radio:8px;
  --cab-fs-xs:.8125rem;
  --cab-fs-sm:clamp(.875rem,.85rem + .1vw,.9375rem);
  --cab-fs-lg:clamp(1.0625rem,.99rem + .3vw,1.25rem);
  --cab-fs-h3:clamp(1.25rem,1.15rem + .4vw,1.5rem);
  --cab-fs-h1:clamp(2rem,1.55rem + 1.9vw,3.125rem);
  --cab-fs-h1-home:clamp(2.125rem,1.5rem + 2.6vw,3.5rem);
  --cab-fs-btn:clamp(1rem,.95rem + .2vw,1.125rem);
  --alto-header:64px;
}
@media (min-width:1100px){:root{--alto-header:80px}}
html{scroll-padding-top:90px}

/* Botones del header y del hero: rectángulo de radio 8 px; el de presupuesto va en rojo */
.header .btn,.page-intro .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.8em 1.3em;border-radius:var(--cab-radio);font-family:var(--cab-f-titulos);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:var(--cab-fs-btn);text-decoration:none;border:2px solid transparent;line-height:1.2;cursor:pointer;transition:background-color .2s,color .2s;min-height:0;box-shadow:none;transform:none}
.header .btn--wa,.page-intro .btn--wa{background:var(--cab-rojo);color:#fff}
.header .btn--wa:hover,.page-intro .btn--wa:hover{background:var(--cab-rojo-2);color:#fff;transform:none;box-shadow:none}
.header .btn--grande,.page-intro .btn--grande{font-size:calc(var(--cab-fs-btn) * 1.1);padding:.85em 1.5em}
.header .btn--bloque{width:100%}
.header .btn i,.page-intro .btn i{font-size:1.15em;line-height:1}

/* Barra superior: gris oscuro de la marca, solo desde 860 px; se va con el scroll */
.topbar.topbar{display:none;height:auto;overflow:visible;background:var(--cab-pri);color:#fff;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;font-family:inherit;font-size:var(--cab-fs-xs);font-weight:600;letter-spacing:0;text-transform:none;position:relative;z-index:51}
@media (min-width:860px){.topbar.topbar{display:block}}
.topbar__fila{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:38px}
.topbar.topbar i{color:#fff;opacity:.85;margin-right:5px}
.topbar__zona,.topbar__precio{color:#E4E4E4;display:inline-flex;align-items:center}
.topbar__precio strong{color:#fff;font-weight:700;margin:0 .25em}
.topbar__precio{display:none}
@media (min-width:1180px){.topbar__precio{display:inline}}
.topbar__acciones{display:flex;align-items:center;gap:22px;margin-left:auto}
.topbar.topbar a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;letter-spacing:.02em}
.topbar.topbar a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Header: blanco y sólido; sobre el hero arranca transparente */
.header.header{position:sticky;top:0;z-index:50;width:auto;background:#fff;box-shadow:none;transition:background-color .25s,box-shadow .25s}
.header.header.is-scrolled,.header.header.menu-abierto{box-shadow:0 6px 20px rgba(24,24,24,.08)}
.header__fila{display:flex;align-items:center;gap:20px;min-height:64px}
@media (min-width:1100px){.header__fila{min-height:80px}}
.header .logo{display:block;text-decoration:none;flex:0 0 auto}
.header .logo__img{display:block;width:auto;height:46px}
@media (min-width:1100px){.header .logo__img{height:56px}}
.header .logo__img--claro{display:none}

/* Menú de escritorio: Oswald en mayúsculas, raya roja abajo en hover y en la sección activa */
.nav{display:none;flex:1;align-self:stretch}
.nav__lista{display:flex;justify-content:center;align-items:stretch;gap:2px;list-style:none;margin:0;padding:0;height:100%}
.nav__item{position:relative;display:flex}
.nav__link{position:relative;display:flex;align-items:center;padding:0 14px;text-decoration:none;color:var(--cab-texto);font-family:var(--cab-f-titulos);font-weight:700;font-size:var(--cab-fs-btn);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:18px;height:3px;border-radius:2px;background:var(--cab-rojo);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav__link:hover,.nav__link[aria-current]{color:var(--cab-pri)}
.nav__link:hover::after,.nav__link[aria-current]::after,.nav__item--sub:focus-within>.nav__link::after{transform:scaleX(1)}
.nav__panel{position:absolute;top:100%;left:50%;min-width:250px;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.nav__item--sub:hover .nav__panel,.nav__item--sub:focus-within .nav__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav__sub{list-style:none;margin:0;padding:10px;background:#fff;border-top:3px solid var(--cab-rojo);border-radius:0 0 var(--cab-radio) var(--cab-radio);box-shadow:0 18px 40px rgba(24,24,24,.16)}
.nav__sub a{display:block;padding:9px 12px;border-radius:6px;font-size:var(--cab-fs-sm);font-weight:600;color:var(--cab-texto);text-decoration:none;border-left:3px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.nav__sub a:hover,.nav__sub a[aria-current]{background:var(--cab-fondo-2);color:var(--cab-pri);border-left-color:var(--cab-rojo)}

.header__acciones{margin-left:auto;display:flex;align-items:center;gap:6px}
.header .header__cta{padding:.6em 1.1em;white-space:nowrap;flex-shrink:0;height:auto}
@media (min-width:1100px) and (max-width:1279px){.nav__link{padding:0 10px}.nav__link::after{left:10px;right:10px}}
.header .header__cta span{display:none}
@media (min-width:600px) and (max-width:1099px),(min-width:1280px){.header .header__cta span{display:inline}}

/* Hamburguesa que se vuelve X */
.burger{width:46px;height:46px;border:0;background:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer;padding:0;border-radius:var(--cab-radio)}
.burger span{display:block;width:24px;height:2.5px;background:var(--cab-texto);border-radius:2px;transition:transform .25s,opacity .2s,background-color .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
@media (min-width:1100px){.nav{display:block}.burger{display:none}}

/* Menú de celular: panel blanco bajo el header */
.menu-movil{background:#fff;border-top:1px solid var(--cab-borde);padding:8px 0 28px;max-height:calc(100dvh - var(--alto-header));overflow:auto;overscroll-behavior:contain}
.menu-movil[hidden]{display:none}
.menu-movil__lista{list-style:none;margin:0 0 20px;padding:0}
.menu-movil__lista>li{border-bottom:1px solid var(--cab-borde)}
.menu-movil__lista>li>a,.menu-movil__lista summary{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;font-family:var(--cab-f-titulos);font-weight:700;font-size:var(--cab-fs-h3);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;color:var(--cab-texto);cursor:pointer;list-style:none}
.menu-movil__lista summary::-webkit-details-marker{display:none}
.menu-movil__lista>li>a[aria-current],.menu-movil__lista details[open]>summary{color:var(--cab-pri)}
.menu-movil__flecha{font-size:.7em;color:var(--cab-rojo);transform:rotate(90deg);transition:transform .2s}
.menu-movil__lista details[open] .menu-movil__flecha{transform:rotate(-90deg)}
.menu-movil__sub{list-style:none;margin:0 0 12px;padding:4px 0 4px 14px;border-left:3px solid var(--cab-rojo)}
.menu-movil__sub a{display:block;padding:9px 4px;font-weight:600;color:var(--cab-texto-2);text-decoration:none}
.menu-movil__sub a[aria-current]{color:var(--cab-pri)}
.menu-movil__acciones{display:grid;gap:10px}
.menu-movil__zona{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:var(--cab-fs-sm);color:var(--cab-texto-2)}
.menu-movil__zona i{color:var(--cab-rojo)}
body.menu-abierto{overflow:hidden}

/* Sobre el hero: transparente con textos blancos hasta que el header llega arriba o se abre el menú */
.header.header--sobre-hero{margin-bottom:calc(-1 * var(--alto-header))}
.header.header--sobre-hero:not(.is-scrolled):not(.menu-abierto){background:transparent;box-shadow:none}
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto) .logo__img{display:none}
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto) .logo__img--claro{display:block}
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto) .nav__link{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto) .burger span{background:#fff}

/* Celular: el header queda solo con logo y menú, sin el botón (como pintor.uy) */
@media (max-width:767px){.header .header__cta{display:none}}

/* ===== Hero (como pintor.uy): solo H1, bajada y un botón de WhatsApp; foto con velo gris casi negro de abajo hacia arriba ===== */
.page-intro.page-intro{position:relative;color:#fff;padding:calc(var(--alto-header) + 28px) 0 40px;background-color:#1B1B1B;
  background-image: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%),url('../images/hero/hero-steel-framing.webp');
  background-size:cover;background-position:center 40%;background-repeat:no-repeat}
@media (max-width:767px){.page-intro.page-intro{background-image:linear-gradient(0deg,rgba(20,20,20,.92) 0%,rgba(20,20,20,.7) 40%,rgba(20,20,20,.4) 80%,rgba(20,20,20,.35) 100%),url('../images/hero/hero-steel-framing-mobile.webp');background-position:center top}}
.fi-home .page-intro.page-intro{padding:calc(var(--alto-header) + 52px) 0 60px}
.page-intro .page-intro__inner{max-width:none;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.page-intro .btn{text-shadow:none}
.page-intro.page-intro .page-intro__title{font-family:var(--cab-f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.015em;line-height:1.05;color:#fff;font-size:var(--cab-fs-h1);margin:.15em 0 .35em;max-width:none;text-wrap:balance}
.fi-home .page-intro.page-intro .page-intro__title{font-size:var(--cab-fs-h1-home)}
.page-intro.page-intro .page-intro__desc{font-size:var(--cab-fs-lg);line-height:1.65;color:#EBEBEB;max-width:760px;margin:0 0 1em}
.page-intro .page-intro__desc a{color:#fff}
.page-intro .hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
/* Migas (internas): chicas arriba del H1, como en pintor.uy */
.page-intro .pj-crumb{padding:0;margin:0 0 12px}
.page-intro .pj-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:var(--cab-fs-xs);color:#D0D0D0}
.page-intro .pj-crumb li+li::before{content:"›";margin-right:6px;background:none;width:auto;height:auto;color:#D0D0D0}
.page-intro .pj-crumb a{color:#fff;text-decoration:none}
.page-intro .pj-crumb a:hover{text-decoration:underline}
.page-intro .pj-crumb [aria-current]{color:#D0D0D0}

@media (max-width:767px){
  .page-intro .hero__cta{flex-direction:column;align-items:stretch}
  .page-intro .hero__cta .btn{width:100%}
  .page-intro.page-intro .page-intro__title,.fi-home .page-intro.page-intro .page-intro__title{font-size:6.8vw}
}
@media (max-width:374px){.page-intro .hero__cta .btn{font-size:.9375rem;padding-left:12px;padding-right:12px}}

/* Blog: la franja de arriba va en el gris oscuro (era roja y el botón rojo del header se perdía encima) */
.fi-blog .bgeo-banda{background:var(--cab-pri)}

/* Segundo botón del hero: contorno blanco (como pintor.uy) */
.page-intro .btn--linea{background:transparent;color:#fff;border-color:#fff}
.page-intro .btn--linea:hover{background:#fff;color:var(--cab-pri)}

/* Formulario de presupuesto en su propia franja debajo del hero (23/10/2026): tarjeta blanca con filete gris oscuro arriba
   (el de pintor.uy) y los tres datos de confianza al costado */
.fi-presu{background:var(--cab-fondo-2);padding:40px 0;border-bottom:1px solid var(--cab-borde)}
.fi-presu__grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media (min-width:900px){.fi-presu__grid{grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:48px}}
.fi-presu .fi-form{border-radius:var(--cab-radio);border-top:4px solid var(--cab-pri);box-shadow:8px 8px 0 rgba(46,46,46,.10);padding:24px 24px 20px}
.fi-presu .fi-form__title{font-family:var(--cab-f-titulos);color:var(--cab-pri);font-size:var(--cab-fs-h3)}
@media (min-width:700px){.fi-presu .fi-form__row{grid-template-columns:1fr 1fr}}
.fi-presu .fi-form__submit{border-radius:var(--cab-radio);background:var(--cab-rojo);font-family:var(--cab-f-titulos);text-transform:uppercase;letter-spacing:.04em}
.fi-presu .fi-form__submit:hover{background:var(--cab-rojo-2)}
.fi-presu__trust{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fi-presu__trust li{display:flex;align-items:center;gap:14px;font-family:var(--cab-f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:var(--cab-fs-h3);line-height:1.15;color:var(--cab-pri)}
.fi-presu__trust i{flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--cab-rojo);display:flex;align-items:center;justify-content:center;font-size:1.25rem;box-shadow:inset 0 0 0 2px var(--cab-borde)}
@media (max-width:899px){.fi-presu__trust{order:-1;grid-template-columns:1fr;gap:10px}.fi-presu__trust li{font-size:1.05rem}.fi-presu__trust i{flex-basis:40px;width:40px;height:40px;font-size:1rem}}

/* Foto del hero, una por resolución (23/10/2026): escritorio 3:2, tablet 1:1, celular 2:3 (stock editado con ChatGPT, sin gente) */
.page-intro.page-intro{background-image: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%),url('../images/hero/steel-framing-buenos-aires-escritorio.webp');background-position:center center}
@media (max-width:1023px){.page-intro.page-intro{background-image:linear-gradient(0deg,rgba(20,20,20,.92) 0%,rgba(20,20,20,.7) 40%,rgba(20,20,20,.4) 80%,rgba(20,20,20,.35) 100%),url('../images/hero/steel-framing-buenos-aires-tablet.webp')}}
@media (max-width:599px){.page-intro.page-intro{background-image:linear-gradient(0deg,rgba(20,20,20,.92) 0%,rgba(20,20,20,.7) 40%,rgba(20,20,20,.4) 80%,rgba(20,20,20,.35) 100%),url('../images/hero/steel-framing-buenos-aires-celular.webp');background-position:center top}}

/* H1 del hero en celular más grande (pedido del usuario 23/10: "casi no se lee"); pisa el 6.8vw de pintor */
@media (max-width:767px){
  .page-intro.page-intro .page-intro__title,.fi-home .page-intro.page-intro .page-intro__title{font-size:clamp(1.85rem,8.6vw,2.6rem);line-height:1.08}
  .page-intro.page-intro .page-intro__desc{font-size:1.0625rem}
}

/* Bug: la tarjeta del formulario y la franja "¿Querés saber cuánto sale?" se pasaban del borde derecho en celular
   (los ítems de grilla y flex no se achicaban por debajo de su contenido) */
.fi-presu__grid>*,.fi-layout>*{min-width:0}
.fi-banner__txt{min-width:0;flex:1 1 220px}
.fi-banner__txt>div{min-width:0}

/* Formulario con diseño simple (23/10/2026): tarjeta blanca con borde fino, campos blancos con borde gris, sin íconos adentro,
   etiquetas cortas en minúscula, un botón rojo. Pisa el estilo del formulario viejo solo en la franja de arriba. */
.fi-presu .fi-form{background:#fff;border:1px solid #E0E0E0;border-top:1px solid #E0E0E0;border-radius:var(--cab-radio);box-shadow:none;padding:28px}
.fi-presu .fi-form__head{margin-bottom:18px}
.fi-presu .fi-form__title{font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);margin:0 0 4px}
.fi-presu .fi-form__sub{font-size:.9375rem;color:var(--cab-texto-2)}
.fi-presu .fi-form__row{gap:0 16px}
.fi-presu .fi-form__field{margin-bottom:14px}
.fi-presu .fi-form__label{font-family:inherit;text-transform:none;letter-spacing:0;font-size:.875rem;font-weight:600;color:var(--cab-texto);margin:0 0 6px}
.fi-presu .fi-form__control>i:first-child{display:none}
.fi-presu .fi-form__control input,.fi-presu .fi-form__control select,.fi-presu .fi-form__control textarea{background:#fff;border:1px solid #CFCFCF;border-radius:var(--cab-radio);padding:12px 14px;font-size:1rem;box-shadow:none;min-height:48px}
.fi-presu .fi-form__control select{padding-right:2.4rem}
.fi-presu .fi-form__control textarea{min-height:96px}
.fi-presu .fi-form__control input:focus,.fi-presu .fi-form__control select:focus,.fi-presu .fi-form__control textarea:focus{border-color:var(--cab-pri);box-shadow:0 0 0 3px rgba(46,46,46,.12);outline:0}
.fi-presu .fi-form__submit{margin-top:6px;padding:.9em 1.4em;font-size:var(--cab-fs-btn);box-shadow:none}
.fi-presu .fi-form__submit i{display:none}
.fi-presu .fi-form__wa{font-size:.9375rem}
.fi-presu .fi-form__nota{font-size:.8125rem}
@media (max-width:599px){.fi-presu .fi-form{padding:20px 16px}.fi-presu{padding:28px 0}}

/* Íconos de los 3 datos de confianza: dibujos propios hechos con ChatGPT (23/10/2026), planos en gris oscuro y rojo */
.fi-presu__trust img{flex:0 0 64px;width:64px;height:64px;object-fit:contain}
@media (max-width:899px){.fi-presu__trust img{flex-basis:48px;width:48px;height:48px}}
/* Bug (23/10): en celular el cuerpo de la página (.fi-layout) quedaba sin margen lateral y las tarjetas iban pegadas al borde */
.container.fi-layout{padding-left:1.25rem;padding-right:1.25rem}
@media (max-width:599px){.container.fi-layout{padding-left:16px;padding-right:16px}}