/* contenedorescasas.uy — hoja de estilos del sitio. Mobile first. */
/* Fuentes propias (19/10, estilo del usuario): Oswald 700 para títulos, menú y botones; Open Sans variable para el texto. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url("../fonts/open-sans-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:"Open Sans";font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url("../fonts/open-sans-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}
@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}
/* Respaldo con las medidas de Open Sans (Arial escalada): mientras carga la fuente el texto ocupa lo mismo (CLS 0) */
@font-face{font-family:"Open Sans Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");size-adjust:105.1%;ascent-override:101.7%;descent-override:27.9%;line-gap-override:0%}
/* ============================================================
   Sistema de escala y espaciado (base casasmodulares, adaptado a Contenedores Casas)
   Títulos: Oswald 700 en mayúsculas. Texto: Open Sans.
   Espaciado en pasos de 4/8 px; tipografía fluida con clamp().
   ============================================================ */
:root {
  /* Paleta ConstruFach (19/10, a pedido del usuario; la misma de instalaciondeaire.uy y cargadorautoelectrico.uy): azul marino, rojo en los botones y grises cálidos */
  --c-primario: #0B3557; --c-secundario: #0E3F68; --c-acento: #0B3557;
  --c-fondo: #FFFFFF; --c-fondo-2: #F4F4F2; --c-texto: #2B2F36; --c-texto-2: #4A5765; --c-borde: #E4E0DA; --c-wa: #25D366;
  --c-oscuro: #0B3557; --c-oscuro-2: #071F34;
  --c-rojo: #DA2141; --c-rojo-2: #B81B37; --c-gris-calido: #F0EDE8; --c-pri-claro: #E7EDF3; --pri-rgb: 11, 53, 87;
  --c-hero-1: #F0EDE8; --c-hero-2: #C9D2DC;
  --velo: 7, 31, 52; /* azul noche de ConstruFach, para el velo de las fotos del hero (en rgba) */
  --fuente: "Open Sans", "Open Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --fuente-titulos: Oswald, "Arial Narrow", sans-serif;

  /* Escala tipográfica */
  --t-h1: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem);
  --t-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --t-h2-prosa: clamp(1.375rem, 1.15rem + .9vw, 1.875rem);
  --t-h3: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem);
  --t-h4: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --t-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-base: 1rem;
  --t-chico: .875rem;
  --t-mini: .8125rem;

  /* Espaciado */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 40px; --e-8: 48px; --e-9: 64px;
  --sec: clamp(48px, 32px + 4vw, 88px);          /* padding vertical de secciones */
  --sec-chica: clamp(32px, 24px + 2.5vw, 56px);

  --radio: 12px; --radio-s: 8px;
  --ancho: 1180px; --gutter: 20px;
  --alto-header: 64px;
  --logo-h: 1.625rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-header) + 16px); }
body { margin: 0; font-family: var(--fuente); color: var(--c-texto); background: var(--c-fondo); line-height: 1.65; font-size: var(--t-base); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-titulos); text-transform: uppercase; font-weight: 700; line-height: 1.1; margin: 0 0 var(--e-4); letter-spacing: .015em; color: var(--c-acento); text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.08; overflow-wrap: break-word; margin-bottom: var(--e-4); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.1; margin-bottom: var(--e-3); }
h4, h5, h6 { font-size: var(--t-h4); line-height: 1.15; margin-bottom: var(--e-2); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
.container { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--c-acento); color: #fff; padding: var(--e-2) var(--e-3); border-radius: 6px; z-index: 100; }
.skip-link:focus { left: 8px; }
mark.pendiente { background: var(--c-pri-claro); color: var(--c-primario); border: 1px dashed var(--c-hero-2); border-radius: 4px; padding: 0 .3em; font-size: .85em; font-weight: 600; overflow-wrap: anywhere; }

/* Botones (estilo del usuario): Oswald 700 en mayúsculas, rectángulos de radio 8, alto mínimo táctil de 48 px. Los de WhatsApp van en rojo con texto blanco; el verde queda solo en el botón flotante */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .6em 1.2em; border-radius: 8px; font-family: var(--fuente-titulos); text-transform: uppercase; font-weight: 700; font-size: 1.0625rem; letter-spacing: .04em; line-height: 1.15; text-align: center; border: 2px solid transparent; cursor: pointer; transition: transform .12s, background .12s; text-decoration: none !important; }
.btn i { font-size: 1.2em; line-height: 1; }
.btn--primario { background: var(--c-primario); color: #fff; }
.btn--primario:hover { background: var(--c-secundario); }
.btn--whatsapp { background: var(--c-rojo); color: #fff; }
.btn--whatsapp:hover { background: var(--c-rojo-2); color: #fff; }
.btn--linea { background: transparent; color: #fff; border-color: #fff; }
.btn--linea:hover { background: #fff; color: var(--c-primario); }
.btn--outline { background: transparent; border-color: var(--c-acento); color: var(--c-acento); }
.btn--outline:hover { background: var(--c-acento); color: #fff; }
.btn--claro { background: #fff; color: var(--c-acento); }
.btn--fantasma { background: transparent; border-color: #fff; color: #fff; }
.btn--fantasma:hover { background: rgba(255,255,255,.12); }
.btn--lg { min-height: 52px; padding: .7em 1.2em; font-size: clamp(1rem, .9rem + .5vw, 1.125rem); }
.btn--block { width: 100%; }

/* Header: logo, 5 secciones y un solo botón a WhatsApp. Transparente sobre la foto del hero y blanco sólido al bajar (sin blur). */
.header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--c-borde); transition: background-color .2s, border-color .2s; }
.header.is-scrolled { box-shadow: 0 3px 0 rgba(var(--pri-rgb), .10); }
.header--sobre-hero { margin-bottom: calc(-1 * var(--alto-header)); }
.header :focus-visible { outline: 3px solid var(--c-primario); outline-offset: 2px; border-radius: 4px; }
.header--sobre-hero:not(.is-scrolled) { background: transparent; border-bottom-color: rgba(255,255,255,.18); box-shadow: none; }
.header--sobre-hero:not(.is-scrolled) .logo__img { display: none; }
.header--sobre-hero:not(.is-scrolled) .logo__img--blanco { display: block; }
.header--sobre-hero:not(.is-scrolled) .header__nav a { color: #fff; }
.header--sobre-hero:not(.is-scrolled) .header__nav a::after { background: var(--c-rojo); }
.header--sobre-hero:not(.is-scrolled) .header__burger span { background: #fff; }
.header--sobre-hero:not(.is-scrolled) :focus-visible { outline-color: #fff; }
.header__inner { display: flex; align-items: center; gap: var(--e-2); height: var(--alto-header); }
.header__logo { flex-shrink: 0; min-width: 0; margin-right: auto; }
/* Logo: imagen de alto --logo-h (isotipo + nombre); la blanca solo sobre el hero y en el footer */
.logo { display: inline-flex; flex-shrink: 0; align-items: center; }
.logo__img { display: block; width: auto; height: var(--logo-h); }
.logo__img--blanco { display: none; }

/* Menú de escritorio (desde 1024 px): Oswald en mayúsculas con raya roja en hover y en la sección actual */
.header__nav { display: none; flex: 1; align-self: stretch; }
.header__nav ul { display: flex; justify-content: center; align-items: stretch; gap: 2px; height: 100%; list-style: none; margin: 0; padding: 0; }
.header__nav li { display: flex; }
.header__nav a { position: relative; display: flex; align-items: center; padding: 0 14px; color: var(--c-texto); font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; transition: color .15s; }
.header__nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 18px; height: 3px; border-radius: 2px; background: var(--c-rojo); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.header__nav a:hover, .header__nav a[aria-current] { color: var(--c-primario); text-decoration: none; }
.header__nav a:hover::after, .header__nav a[aria-current]::after { transform: scaleX(1); }
/* Botón a WhatsApp: rojo con texto. "Cotizá" en celular y entre 1024 y 1279 px; "Cotizá por WhatsApp" con lugar (nombre accesible: Cotizá por WhatsApp) */
.header__cta { flex-shrink: 0; min-height: 44px; padding: .55em 1em; white-space: nowrap; }
.header__cta .largo { display: none; }
@media (min-width: 600px) and (max-width: 1023px), (min-width: 1280px) { .header__cta .largo { display: inline; } .header__cta .corto { display: none; } }
.header__burger { margin-right: -10px; flex-shrink: 0; width: 44px; height: 44px; border: 0; background: transparent; display: flex; flex-direction: column; justify-content: center; gap: 5px; align-items: center; cursor: pointer; }
.header__burger span { width: 22px; height: 2px; background: var(--c-acento); transition: transform .2s, opacity .2s; }
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Menú de celular: pantalla completa debajo del header, secciones grandes y el botón de WhatsApp al final */
.menu-movil { background: #fff; border-top: 1px solid var(--c-borde); padding: var(--e-1) var(--gutter) var(--e-6); height: calc(100vh - var(--alto-header)); height: calc(100dvh - var(--alto-header)); overflow-y: auto; overscroll-behavior: contain; }
.menu-movil[hidden] { display: none; }
.menu-movil ul { list-style: none; margin: 0 0 var(--e-5); padding: 0; }
.menu-movil a:not(.btn) { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: var(--e-2) var(--e-1); border-bottom: 1px solid var(--c-borde); color: var(--c-texto); font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.375rem; text-transform: uppercase; letter-spacing: .03em; }
.menu-movil a:not(.btn) i { color: var(--c-primario); font-size: 1.5rem; }
.menu-movil a:not(.btn)[aria-current] { color: var(--c-primario); }
.menu-movil a:not(.btn):hover { text-decoration: none; color: var(--c-primario); }

/* Migas (dentro del hero) */
.migas { font-size: var(--t-mini); margin-bottom: var(--e-4); }
.migas ol { display: flex; flex-wrap: wrap; gap: var(--e-1) 6px; list-style: none; margin: 0; padding: 0; }
.migas li + li::before { content: "›"; color: rgba(255,255,255,.55); margin-right: 6px; }
.migas a { color: rgba(255,255,255,.75); }
.migas a:hover { color: #fff; }
.migas span { color: #fff; font-weight: 500; }

.hero-pag .form-card { color: var(--c-texto); }
.hero-pag__form { display: none; }

/* Layout con lateral (fix: solo padding vertical, así no pisa el padding lateral del .container) */
.layout-pag, .layout-home, .layout-contacto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-7); padding-top: var(--sec-chica); padding-bottom: var(--sec-chica); }
.lateral { display: grid; gap: var(--e-4); align-content: start; }
.lateral__box { background: var(--c-fondo-2); border-radius: var(--radio); padding: var(--e-5); }
.lateral__box > :last-child { margin-bottom: 0; }
.lateral__box--wa { background: var(--c-gris-calido); border-top: 4px solid var(--c-rojo); }
.lateral__t { font-family: var(--fuente-titulos); text-transform: uppercase; font-weight: 600; margin: 0 0 var(--e-3); font-size: 1.375rem; line-height: 1.1; letter-spacing: .02em; color: var(--c-acento); }
.lateral__box p.lateral__t + p { margin-top: calc(var(--e-1) * -1); }
.lateral__box p + .lateral__t { margin-top: var(--e-5); }
.lateral__nota { font-size: var(--t-mini); line-height: 1.5; color: var(--c-texto-2); margin: var(--e-3) 0 0; }
.lateral__indice ol { margin: 0; padding-left: 1.3em; font-size: var(--t-chico); line-height: 1.45; }
.lateral__indice li { margin: 0 0 var(--e-2); }
.lateral__indice li:last-child { margin-bottom: 0; }
.lateral__indice a { color: var(--c-texto); }
.lista-simple { list-style: none; padding: 0; margin: 0; font-size: var(--t-chico); }
.lista-simple li { padding: 10px 0; border-bottom: 1px solid var(--c-borde); line-height: 1.4; }
.lista-simple li:first-child { padding-top: 0; }
.lista-simple li:last-child { border: 0; padding-bottom: 0; }

/* Prosa (contenido de las fichas) */
.prosa { min-width: 0; max-width: 74ch; overflow-wrap: break-word; line-height: 1.7; }
.prosa h2 { font-size: var(--t-h2-prosa); margin: clamp(40px, 32px + 2.5vw, 64px) 0 var(--e-4); }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin: var(--e-6) 0 var(--e-3); }
.prosa h2 + h3 { margin-top: var(--e-4); }
.prosa p, .prosa li { color: var(--c-texto); }
.prosa li { margin-bottom: var(--e-2); }
.prosa li:last-child { margin-bottom: 0; }
.prosa ul, .prosa ol { margin-bottom: 1.25em; }
.prosa a { text-decoration: underline; text-decoration-color: rgba(var(--pri-rgb), .35); text-underline-offset: 2px; }
.prosa a:hover { text-decoration-color: var(--c-primario); }
.tabla-wrap { overflow-x: auto; margin: var(--e-5) 0; border: 1px solid var(--c-borde); border-radius: var(--radio-s); -webkit-overflow-scrolling: touch; }
.prosa table { width: 100%; border-collapse: collapse; font-size: var(--t-chico); line-height: 1.5; min-width: 600px; }
.prosa th, .prosa td { padding: var(--e-3) 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-borde); }
.prosa th { background: var(--c-fondo-2); font-weight: 600; white-space: nowrap; }
.tabla-precios td:nth-child(3) { white-space: nowrap; color: var(--c-primario); }
.nota-precios { font-size: var(--t-mini); line-height: 1.55; color: var(--c-texto-2); }
.actualizado { font-size: var(--t-mini); color: var(--c-texto-2); margin: var(--e-8) 0 0; display: flex; gap: 6px; align-items: center; }
.prosa tr:last-child td { border-bottom: 0; }
.prosa tbody tr:nth-child(even) { background: #F7F5F2; }
.cta-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin: var(--e-6) 0; padding: var(--e-4); background: var(--c-fondo-2); border-radius: var(--radio); }
.cta-inline .btn { flex: 1 1 240px; }
.cta-inline__tel { flex: 1 1 100%; text-align: center; font-weight: 600; color: var(--c-texto-2); font-size: var(--t-chico); }
.faq { display: grid; gap: var(--e-2); margin: var(--e-5) 0 var(--e-6); }
.faq__item { border: 1px solid var(--c-borde); border-radius: var(--radio-s); background: #fff; }
.faq__q { cursor: pointer; padding: var(--e-4) 52px var(--e-4) 20px; font-family: var(--fuente); font-weight: 600; line-height: 1.45; list-style: none; position: relative; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; line-height: 1; color: var(--c-primario); }
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a { padding: 0 20px 18px; color: var(--c-texto-2); }
.faq__a p:last-child { margin-bottom: 0; }

/* Cards */
.cards { display: grid; gap: var(--e-4); }
.card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--c-borde); border-radius: var(--radio); background: #fff; color: var(--c-texto); overflow: hidden; transition: border-color .12s; text-decoration: none !important; }
.card:hover { border-color: var(--c-primario); }
.card__icono { width: 40px; height: 40px; border-radius: 10px; background: var(--c-pri-claro); color: var(--c-primario); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: var(--e-2); }
.card__titulo { font-family: var(--fuente-titulos); text-transform: uppercase; font-weight: 600; font-size: 1.5rem; letter-spacing: .02em; line-height: 1.05; color: var(--c-acento); }
.card__meta { font-size: var(--t-mini); color: var(--c-primario); font-weight: 600; }
.card__desc { font-size: var(--t-chico); line-height: 1.5; color: var(--c-texto-2); }
/* Fix: la foto ocupa todo el ancho de la card (antes max-width:100% la dejaba corta a la derecha) */
.card__foto { width: calc(100% + 40px); max-width: none; margin: -20px -20px var(--e-3); aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.grilla-sec { margin-top: var(--e-8); }
.grilla-sec > h2 { margin-bottom: var(--e-5); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chips a { display: inline-flex; align-items: center; min-height: 40px; padding: var(--e-2) var(--e-4); border-radius: 999px; background: #fff; border: 1px solid var(--c-borde); color: var(--c-texto); font-weight: 500; font-size: var(--t-chico); }
.chips a:hover { border-color: var(--c-primario); color: var(--c-primario); text-decoration: none; }
.link-flecha { font-weight: 600; font-size: .9375rem; display: inline-flex; align-items: center; gap: var(--e-1); white-space: nowrap; }

/* Formulario */
.form-card { color: var(--c-texto); background: #fff; border: 1px solid var(--c-borde); border-radius: var(--radio); padding: var(--e-5); }
.form-card__head { margin-bottom: var(--e-5); }
.form-card__titulo { font-size: var(--t-h3); color: var(--c-acento); margin: 0 0 var(--e-2); }
.form-card__sub { color: var(--c-texto-2); font-size: var(--t-chico); line-height: 1.5; margin: 0; }
.form-card__error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; border-radius: var(--radio-s); padding: 10px var(--e-3); margin: 0 0 var(--e-4); font-size: var(--t-chico); display: flex; gap: var(--e-2); align-items: center; }
.form { display: grid; gap: var(--e-4); }
.form__fila { display: grid; gap: var(--e-4); }
.form__campo { display: grid; gap: 6px; font-size: var(--t-chico); font-weight: 500; }
.form__campo b { color: var(--c-primario); font-weight: 700; }
.form__campo input, .form__campo select, .form__campo textarea { width: 100%; min-height: 48px; font: inherit; font-size: 1rem; font-weight: 400; padding: 11px 14px; border: 1px solid #C9D2DC; border-radius: var(--radio-s); background: #fff; color: var(--c-texto); }
.form__campo input:focus, .form__campo select:focus, .form__campo textarea:focus { outline: 2px solid var(--c-primario); outline-offset: 1px; border-color: var(--c-primario); }
.form__campo textarea { resize: vertical; min-height: 104px; }
.form .btn { margin-top: var(--e-1); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__nota { font-size: var(--t-mini); color: var(--c-texto-2); margin: 0; text-align: center; }
.form-card--compacto .form-card__sub { display: none; }

/* Cierre */
.cierre { background: var(--c-oscuro); color: #F0EDE8; padding: var(--sec) 0; }
.cierre__texto h2 { color: #fff; }  /* fix: antes ".cierre h2" dejaba en blanco el título del formulario */
.cierre__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-7); }
.cierre__texto p { color: #C9D2DC; font-size: var(--t-lead); line-height: 1.6; max-width: 46ch; margin-bottom: var(--e-6); }
.cierre .form-card { border: 0; }

/* Home */
.hero-home__lead mark.pendiente { background: var(--c-pri-claro); }
.hero-home__form { display: none; }
.seccion { padding: var(--sec) 0; }
.seccion--gris { background: var(--c-fondo-2); }
.seccion__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e-2) var(--e-5); margin-bottom: var(--e-6); }
.seccion__head h2 { margin: 0; }
.seccion + .layout-home { padding-top: 0; }
.prosa--home h2:first-child { margin-top: 0; }

/* Fotos de obras */
.fotos-tipo { padding: var(--sec-chica) 0 0; }
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-2); margin: 0 0 var(--e-5); }
.galeria .foto { display: block; aspect-ratio: 4 / 3; border-radius: var(--radio-s); overflow: hidden; background: var(--c-fondo-2); }
.galeria .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.galeria .foto:hover img { transform: scale(1.04); }
.galeria--tira { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.proyecto { margin-top: var(--e-6); }
.proyecto h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-bottom: var(--e-3); }
.proyecto__tipo { font-family: var(--fuente); font-size: .75rem; font-weight: 600; line-height: 1.4; letter-spacing: .03em; text-decoration: none !important; background: var(--c-pri-claro); padding: var(--e-1) 10px; border-radius: 999px; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1200px); max-height: 92vh; }
.lightbox::backdrop { background: rgba(var(--velo), .9); }
.lightbox img { max-width: 96vw; max-height: 84vh; width: auto; height: auto; display: block; margin: 0 auto; border-radius: var(--radio-s); }
.lightbox__t { color: #fff; text-align: center; margin: var(--e-3) 0 0; font-size: var(--t-chico); }
.lightbox__cerrar { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 1.6rem; cursor: pointer; }

/* Gracias / 404 */
.gracias { padding: var(--sec) 0; }
.gracias__inner { max-width: 680px; text-align: center; }
.gracias__inner > p { color: var(--c-texto-2); font-size: var(--t-lead); line-height: 1.6; }
.gracias__icono { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--c-pri-claro); color: var(--c-primario); font-size: 2.4rem; margin-bottom: var(--e-5); }
.gracias__icono--404 { background: var(--c-gris-calido); color: var(--c-rojo); }
.gracias__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin: var(--e-6) 0; }
.gracias__acciones .btn { flex: 1 1 100%; }
.gracias__inner > p.gracias__mientras { color: var(--c-texto-2); font-size: var(--t-chico); line-height: 1.7; margin: 0; }

/* WhatsApp flotante */
.wa-flotante { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--c-wa); color: #fff; display: grid; place-items: center; font-size: 1.9rem; box-shadow: 0 3px 0 rgba(0,0,0,.18); transition: transform .12s; }
.wa-flotante:hover { transform: scale(1.06); text-decoration: none; }

/* Footer (19/10/2026, estilo del usuario copiado de cargadorautoelectrico.uy): mismos enlaces y títulos. Raya roja arriba,
   títulos en Oswald blancos con raya roja, enlaces claros con flechita roja, WhatsApp como píldora roja y franja inferior más oscura a todo el ancho. */
.footer { position: relative; background: var(--c-oscuro-2); color: #C9D2DC; padding: 56px 0 0; border-top: 4px solid var(--c-rojo); font-size: .9375rem; overflow-x: clip; }
.footer a { color: #C9D2DC; text-decoration: none; transition: color .15s; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer__grid { display: grid; gap: 36px 28px; }
.footer__marca .logo { margin-bottom: 0; }
.footer__marca p { max-width: 340px; margin: 16px 0 0; font-size: .9375rem; line-height: 1.6; color: #C9D2DC; }
.footer__wa { display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 0; padding: 10px 18px; border-radius: 999px; background: var(--c-rojo); color: #fff !important; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase; transition: background-color .15s; }
.footer__wa:hover { background: var(--c-rojo-2); }
.footer__wa i { font-size: 1.25em; }
.footer__mail { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .875rem; color: #C9D2DC; }
.footer__mail i { color: var(--c-rojo); font-size: 1.05em; }
.footer__h { position: relative; margin: 0 0 18px; padding-bottom: 10px; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.0625rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.footer__h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--c-rojo); }
.footer__col ul { list-style: none; margin: 0; padding: 0; font-size: .9375rem; line-height: 1.4; }
.footer__col li { margin: 0 0 9px; break-inside: avoid; }
.footer__col li a { display: inline-flex; align-items: baseline; gap: 9px; }
.footer__col li a::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-top: 2px solid var(--c-rojo); border-right: 2px solid var(--c-rojo); transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.footer__col li a:hover::before { transform: translate(2px, -2px) rotate(45deg); }
.footer__horario { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: .875rem; line-height: 1.5; color: #9AAABB; }
.footer__horario i { margin-top: .15em; color: var(--c-rojo); }
.footer__abajo { display: grid; gap: 6px; margin-top: 44px; padding: 18px 0 22px; background: #051526; box-shadow: 0 0 0 100vmax #051526; clip-path: inset(0 -100vmax); font-size: .8125rem; line-height: 1.5; color: #9AAABB; }
.footer__abajo p { margin: 0; }
@media (min-width: 600px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__marca { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; gap: 36px 28px; } .footer__marca { grid-column: auto; } }
/* ≥ 480px: botones de 404/gracias vuelven a su ancho natural; el logo vuelve a su tamaño */
@media (min-width: 480px) {
  :root { --logo-h: 2.125rem; }
  .gracias__acciones .btn { flex: 0 1 auto; }
}

/* ≥ 720px */
@media (min-width: 720px) {
  :root { --gutter: 32px; --logo-h: 2.3rem; }
  .form-card { padding: var(--e-6); }
  .form__fila { grid-template-columns: 1fr 1fr; }
  .cards { gap: 20px; }
  .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .galeria { grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }
  .cta-inline { padding: 20px; }
  .cta-inline .btn { flex: 0 1 auto; }
  .cta-inline__tel { flex: 0 1 auto; text-align: left; padding: 0 var(--e-2); }
  .layout-contacto { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--e-6); }
}

/* ≥ 1024px */
@media (min-width: 1024px) {
  :root { --alto-header: 76px; }
  .header__inner { gap: var(--e-4); }
  .header__logo { margin-right: 0; }
  .header__nav { display: block; }
  .header__burger, .menu-movil { display: none !important; }
  .wa-flotante { right: 24px; bottom: 24px; width: 60px; height: 60px; font-size: 2.1rem; }
  .layout-pag, .layout-home { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e-9); }
  .prosa { font-size: 1.0625rem; }
  .lateral { position: sticky; top: calc(var(--alto-header) + var(--e-5)); }
  .cards { gap: var(--e-5); }
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  .galeria, .galeria--tira { grid-template-columns: repeat(4, 1fr); }
  .cierre__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--e-9); }
}

/* 1024–1199px: menú más apretado para que entre junto al botón */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header__nav a { padding: 0 10px; }
  .header__nav a::after { left: 10px; right: 10px; }
}

@media print { .header, .wa-flotante, .footer, .cierre, .hero-pag__form, .lateral { display: none !important; } }

/* Blog GEO: misma escala y gutter que el resto del sitio */
.bgeo .bgeo__wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.bgeo .bgeo__h1 { font-size: var(--t-h1); line-height: .98; margin-bottom: var(--e-4); }
.bgeo .bgeo__sec h2, .bgeo .bgeo__faq h2 { font-size: var(--t-h2-prosa); line-height: 1.05; margin: clamp(40px, 32px + 2.5vw, 64px) 0 var(--e-4); }
.bgeo .bgeo__sec h3 { font-size: var(--t-h3); margin: var(--e-6) 0 var(--e-3); }
.bgeo .bgeo__h2-chico { font-size: var(--t-h4); }
/* Galería de imágenes ilustrativas (contenedorescasas) */
.galeria--cuadrada .foto { aspect-ratio: 1 / 1; }
.fotos-nota { font-size: var(--t-mini); color: var(--c-texto-2); margin: var(--e-2) 0 0; }
.card__foto--cuadrada { aspect-ratio: 4 / 3; }

/* Móvil: tarjetas con foto en formato lista (miniatura a la izquierda) para no hacer la página eterna */
@media (max-width: 599px) {
  .card:has(.card__foto) { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; row-gap: 4px; padding: 12px; align-items: center; align-content: center; }
  .card:has(.card__foto) .card__foto { grid-row: 1 / span 3; width: 96px; height: 96px; margin: 0; aspect-ratio: 1; border-radius: 8px; }
  .card:has(.card__foto) .card__titulo { font-size: 1.15rem; }
  .card:has(.card__foto) .card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cards { gap: 10px; }
}
/* Tablas angostas: sin ancho mínimo (solo las de 4+ columnas hacen scroll) */
.prosa .tabla-wrap--angosta table { min-width: 0; }

/* ============================================================
   ESTILO DEL USUARIO (19/10/2026): barra superior, hero y ventajas copiados de cargadorautoelectrico.uy
   (mismo sistema que sanitario.uy y casascontainer.com), con la paleta ConstruFach. Sin blur, sin vidrio, sombras rectas.
   ============================================================ */

/* Barra superior: azul de la marca, solo desde 860 px; se va con el scroll (no es sticky) */
.topbar { display: none; position: relative; z-index: 51; background: var(--c-primario); color: #fff; font-size: .8125rem; font-weight: 600; }
@media (min-width: 860px) { .topbar { display: block; } }
.topbar__fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px; }
.topbar__valor { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; color: var(--c-hero-2); white-space: nowrap; }
.topbar__valor > span { overflow: hidden; text-overflow: ellipsis; }
.topbar__extra { display: none; }
@media (min-width: 1100px) { .topbar__extra { display: inline; } }
.topbar__acciones { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 8px; color: #fff; text-decoration: none; letter-spacing: .02em; white-space: nowrap; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar [class^="ri-"] { color: var(--c-rojo); font-size: 15px; }
.topbar__valor [class^="ri-"] { color: var(--c-hero-2); }
.topbar__sep { width: 1px; height: 16px; background: rgba(255,255,255,.25); }
.topbar :focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: 4px; }

/* Logo por ancho (es de una línea): entra junto al botón "Cotizá" y el menú en 360 px */
.header__logo .logo__img { width: 168px; height: auto; }
@media (max-width: 374px) { .header__logo .logo__img { width: 150px; } .header__inner { gap: 6px; } .header__cta { padding: .5em .75em; } }
@media (min-width: 600px) { .header__logo .logo__img { width: 210px; } }
@media (min-width: 1024px) { .header__logo .logo__img { width: 220px; } }
@media (min-width: 1280px) { .header__logo .logo__img { width: 250px; } }
.footer__marca .logo__img { width: 230px; height: auto; }

/* Migas dentro del hero */
.migas { font-size: .8125rem; margin-bottom: 12px; }
.migas ol { color: var(--c-hero-2); }
.migas li + li::before { color: var(--c-hero-2); }
.migas a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: 3px; }
.migas a:hover { color: #fff; text-decoration-color: #fff; }
.migas span { color: var(--c-hero-1); font-weight: 600; }

/* Hero (home y páginas): foto de fondo con velo azul noche en degradé lineal (más claro a la derecha para que se vea la casa),
   H1 Oswald en mayúsculas, bajada pegada al H1 (texto SEO), botón rojo a WhatsApp + botón de contorno blanco y una nota chica. */
.hero-home, .hero-pag { position: relative; isolation: isolate; overflow: hidden; color: #fff; background-color: var(--c-primario); background-size: cover; background-position: center 55%; background-repeat: no-repeat; padding: calc(var(--alto-header) + 28px) 0 36px; }
.hero-home::before, .hero-pag::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--velo), .62) 0, rgba(var(--velo), 0) calc(var(--alto-header) + 70px)), linear-gradient(180deg, rgba(var(--velo), .52) 0, rgba(var(--velo), .62) 55%, rgba(var(--velo), .74) 100%); }
@media (min-width: 900px) {
  .hero-home::before, .hero-pag::before { background: linear-gradient(180deg, rgba(var(--velo), .62) 0, rgba(var(--velo), 0) calc(var(--alto-header) + 70px)), linear-gradient(90deg, rgba(var(--velo), .74) 0, rgba(var(--velo), .6) max(520px, calc(50% - 60px)), rgba(var(--velo), .3) max(820px, calc(50% + 230px)), rgba(var(--velo), .08) 100%); }
}
.hero-home__texto, .hero-pag__texto { max-width: 720px; }
.hero-home h1, .hero-pag h1 { margin: 0 0 14px; color: #fff; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem); line-height: 1.08; letter-spacing: .015em; }
.hero-home h1, .hero-pag h1, .hero-home__lead, .hero-pag__lead, .hero-pag .migas, .hero-nota, .hero-puntos { text-shadow: 0 1px 2px rgba(var(--velo), .65); }
.hero-home__lead, .hero-pag__lead { max-width: 640px; margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--c-hero-1); }
.hero-home__lead a, .hero-pag__lead a { color: #fff; text-underline-offset: 3px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.hero-cta .btn--lg { min-height: 48px; padding: .6em 1.2em; }
.hero-home :focus-visible, .hero-pag :focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }
.hero-nota { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--c-hero-2); }
.hero-nota i { color: #fff; font-size: 1.05em; }
.hero-puntos { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; padding: 0; font-size: .8125rem; line-height: 1.5; color: var(--c-hero-2); }
.hero-puntos li { display: inline-flex; align-items: center; gap: 6px; }
.hero-puntos i { color: #fff; font-size: 1.05em; }
.hero-pag--simple { padding-bottom: 48px; }
@media (max-width: 599px) { .hero-cta .btn { flex: 1 1 100%; } }
@media (max-width: 389px) { .hero-cta .btn { font-size: .9375rem; padding-left: .7em; padding-right: .7em; } }
@media (max-width: 759px) {
  .hero-home h1, .hero-pag h1 { font-size: 1.75rem; }
  .hero-home__lead, .hero-pag__lead { font-size: .9375rem; line-height: 1.55; }
  .hero-cta .btn--linea.btn--lg { min-height: 44px; padding: .5em 1em; }
}
@media (min-width: 760px) {
  .hero-pag { padding: calc(var(--alto-header) + 56px) 0 60px; }
  .hero-home { padding: calc(var(--alto-header) + 64px) 0 60px; }
  .hero-pag--simple { padding-bottom: 56px; }
}

/* Ventajas debajo del hero (home): franja blanca propia, sin solape. Celular: una tarjeta con filas; desde 760 px tarjetas sueltas
   con pestaña roja arriba, ícono en círculo gris cálido (rojo con ícono blanco al pasar el mouse) y sombra recta. */
.franja { background: #fff; padding: clamp(28px, 4vw, 52px) 0 clamp(28px, 4vw, 48px); }
.franja__grid { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; border: 1px solid var(--c-borde); border-radius: 14px; }
.franja__item { position: relative; display: grid; grid-template-columns: 68px 1fr; column-gap: 16px; align-items: start; align-content: start; padding: 18px 18px 20px; border-bottom: 1px solid var(--c-borde); }
.franja__item:last-child { border-bottom: 0; }
.franja__icono { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--c-fondo-2); color: var(--c-primario); transition: background-color .2s, color .2s; }
/* Íconos propios (SVG de línea a dos tonos, dibujados para el sitio): azul marino con detalles rojos; en hover todo blanco sobre el círculo rojo */
.franja__icono { --ico-fondo: var(--c-fondo-2); --ico-acento: var(--c-rojo); }
.franja__icono svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.franja__icono .a { stroke: var(--ico-acento); transition: stroke .2s; }
.franja__icono .f { fill: var(--ico-fondo); transition: fill .2s; }
.franja__item strong { position: relative; margin: 2px 0 0; padding-bottom: 9px; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.1875rem; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; color: var(--c-primario); }
.franja__item strong::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--c-rojo); }
.franja__item > span:last-child { grid-column: 2; margin: 8px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--c-texto-2); }
@media (min-width: 760px) {
  .franja__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; background: none; border: 0; border-radius: 0; }
  .franja__item { grid-template-columns: 1fr; padding: 30px 26px 28px; background: #fff; border: 1px solid var(--c-borde); border-radius: 16px; box-shadow: 0 6px 0 rgba(var(--pri-rgb), .07); transition: transform .2s, box-shadow .2s; }
  .franja__item:last-child { border-bottom: 1px solid var(--c-borde); }
  .franja__item::before { content: ""; position: absolute; top: -1px; left: 26px; width: 56px; height: 4px; border-radius: 0 0 4px 4px; background: var(--c-rojo); }
  .franja__icono { grid-row: auto; width: 96px; height: 96px; margin-bottom: 22px; }
  .franja__icono svg { width: 66px; height: 66px; }
  .franja__item strong { font-size: 1.3125rem; }
  .franja__item > span:last-child { grid-column: auto; margin-top: 12px; }
  .franja__item:hover { transform: translateY(-4px); box-shadow: 0 10px 0 rgba(var(--pri-rgb), .09); }
  .franja__item:hover .franja__icono { background: var(--c-rojo); color: #fff; --ico-fondo: var(--c-rojo); --ico-acento: #fff; }
}
@media (prefers-reduced-motion: reduce) { .franja__item, .franja__icono { transition: none; } .franja__item:hover { transform: none; } }

/* ============================================================
   ÍCONOS PROPIOS (19/10/2026, src/libs/Iconos.php): SVG de línea a dos tonos dibujados para el sitio.
   Trazo azul marino (currentColor), detalles en rojo (.a → --ico-acento) y rellenos que tapan con el color del fondo (.f → --ico-fondo).
   ============================================================ */
.ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--c-fondo-2); color: var(--c-primario); --ico-fondo: var(--c-fondo-2); --ico-acento: var(--c-rojo); }
.ico-svg { width: 68%; height: 68%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ico-svg .a { stroke: var(--ico-acento); }
.ico-svg .f { fill: var(--ico-fondo); }
/* H2 con ícono: el círculo a la izquierda, el título igual que siempre */
h2.h2-ico { display: flex; align-items: center; gap: 14px; }
.ico--h2 { width: 46px; height: 46px; }
@media (min-width: 720px) { h2.h2-ico { gap: 16px; } .ico--h2 { width: 58px; height: 58px; } }
.seccion--gris .ico--h2 { background: #fff; --ico-fondo: #fff; }
/* Cajas laterales (fondo gris): círculo blanco */
.lateral__t--ico { display: flex; align-items: center; gap: 12px; }
.ico--lateral { width: 48px; height: 48px; background: #fff; --ico-fondo: #fff; }
/* Lista de contacto: un ícono por pregunta */
.lista-ico li { display: flex; align-items: center; gap: 12px; }
.ico--item { width: 40px; height: 40px; background: #fff; --ico-fondo: #fff; }
/* Cierre (fondo azul): círculo blanco grande arriba del título */
.ico--cierre { width: 76px; height: 76px; margin-bottom: 18px; background: #fff; --ico-fondo: #fff; }
/* Gracias y 404 */
.gracias__icono { width: 104px; height: 104px; --ico-fondo: var(--c-pri-claro); --ico-acento: var(--c-rojo); }
.gracias__icono--404 { color: var(--c-primario); --ico-fondo: var(--c-gris-calido); }
.gracias__icono .ico-svg { width: 70%; height: 70%; }