/* Identidad JB Construcciones: colores corporativos del logo (azul #2C67DE y rojo #C53029) sobre el azul marino de sus
   piezas gráficas. Limpio y profesional: fondos claros, tarjetas blancas, el azul para la interfaz y el rojo solo para la
   acción principal. Se carga después de styles.css y solo toca la capa visual. */
:root, :root[data-theme="light"] {
  /* Los colores de marca (--navy, --red) los fija el panel; aquí solo los neutros y el azul del logo */
  --bg: #f4f6fa; --bg-2: #e9edf5; --surface: #ffffff; --ink: #0f1a2e; --muted: #56627a; --line: #d9e0ec;
  --jb-azul: #2c67de; --jb-azul-2: #5b8cf0; --jb-azul-suave: #e6eefc;
  --shadow: 0 22px 48px -30px rgba(11, 26, 51, .35);
}
/* Fondos: sin tramas; los bloques oscuros llevan un resplandor azul, como sus gráficas */
.hero::before, .section--navy::before, .footer::before, .cat-head::before, .about::before, #cotizar::before { display: none !important; }
.hero::after { display: none !important; }
.hero { background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--jb-azul) 45%, transparent), transparent 60%), linear-gradient(160deg, var(--navy-2), var(--navy) 55%) !important; }
.section--navy, .footer, .cat-head, .about, #cotizar { background: radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--jb-azul) 28%, transparent), transparent 60%), var(--navy) !important; }
/* Línea corporativa azul-rojo que separa los bloques oscuros */
.hero, .section--navy, .footer, .cat-head, .about, #cotizar { position: relative; }
.section--navy::before, .footer::before { display: block !important; content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3; background: linear-gradient(90deg, var(--jb-azul) 0 60%, var(--red) 60% 100%) !important; -webkit-mask-image: none !important; mask-image: none !important; opacity: 1; }
/* Portada: la foto en una tarjeta redondeada con la franja corporativa */
.hero__slash { display: none !important; }
.hero__photo { clip-path: none !important; inset: 2rem 2rem 2rem auto !important; width: 46% !important; border-radius: 24px !important; overflow: hidden !important; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7) !important; background: var(--surface); padding: 0 0 6px 0; }
.hero__photo::after { content: ""; position: absolute; inset: auto 0 0 0 !important; height: 6px; background: linear-gradient(90deg, var(--jb-azul) 0 60%, var(--red) 60% 100%); }
@media (max-width: 960px) { .hero__photo { position: relative !important; inset: auto !important; width: 100% !important; margin: 0 0 1.5rem !important; } }
/* Titulares: la palabra clave en el azul claro sobre oscuro y en azul corporativo sobre claro */
h1 em, h2 em, .hero h1 em, #nosotros h1 em, .section--navy h2 em, #cotizar h2 em { background: none !important; animation: none !important; font-style: inherit !important; color: var(--jb-azul-2) !important; }
.section:not(.section--navy):not(#cotizar):not(.about) h2 em { color: var(--jb-azul) !important; }
.hero__stats strong { font-style: normal !important; font-stretch: 100% !important; letter-spacing: -.03em; color: #fff; }
/* Etiquetas de sección: píldora azul corporativa */
.tag { clip-path: none !important; font-style: normal !important; font-stretch: 100% !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; font-size: .72rem !important; border-radius: 999px !important; padding: .35rem .9rem !important; background: var(--jb-azul) !important; color: #fff !important; border: 0 !important; }
.section:not(.section--navy):not(#cotizar):not(.about) .tag { background: var(--jb-azul-suave) !important; color: var(--jb-azul) !important; }
/* Navegación: azul marino, línea corporativa abajo, logo con fondo blanco */
.nav { background: var(--navy) !important; border-bottom: 0 !important; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--jb-azul) 0 60%, var(--red) 60% 100%); }
.brand img { background: #fff; border-radius: 50%; padding: 3px; box-shadow: 0 0 0 2px var(--jb-azul); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--jb-azul-2) !important; }
/* Tarjetas blancas, limpias, con sombra azulada */
.svc-main, .svc, .mold, .step, .faq details, .form, .calc2__in, .ba, .dudas > li, .ventajas li, .cmp, .fam a figure, .pg-lado, .circ__grid figure {
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: var(--shadow) !important; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s !important;
}
.mold:hover, .svc:hover, .step:hover, .fam a:hover figure, .circ__grid figure:hover { transform: translateY(-4px); border-color: var(--jb-azul-2) !important; box-shadow: 0 28px 50px -28px rgba(44, 103, 222, .45) !important; }
.svc, .svc h3, .svc li { color: var(--ink) !important; } .svc p { color: var(--muted) !important; } .svc .link, .svc a { color: var(--jb-azul) !important; } .svc i, .svc .ph, .step i, .ventajas i, .dudas i { color: var(--jb-azul) !important; }
.mold__img img, .fam img, .gallery img, .circ__grid img { transition: transform .7s var(--ease); }
.mold:hover .mold__img img, .fam a:hover img { transform: scale(1.05); }
.gallery__cap, .circ__grid figcaption { clip-path: none !important; font-style: normal !important; font-stretch: 100% !important; letter-spacing: 0; background: rgba(11, 26, 51, .85) !important; color: #fff !important; border-radius: 10px !important; left: .75rem !important; bottom: .75rem !important; padding: .4rem .8rem !important; }
.about__sello { clip-path: none !important; border-radius: 14px !important; background: var(--jb-azul) !important; }
/* Botones: rojo para la acción principal, azul para la secundaria */
.btn { border-radius: 12px !important; }
.btn--primary { background: var(--red) !important; box-shadow: 0 12px 26px -14px var(--red) !important; }
.btn--primary:hover { background: #d63a32 !important; }
.btn--ghost, .btn--light { border: 2px solid var(--jb-azul-2) !important; color: #fff !important; background: transparent !important; }
.btn--ghost:hover, .btn--light:hover { background: var(--jb-azul) !important; border-color: var(--jb-azul) !important; }
.section:not(.section--navy):not(#cotizar):not(.about) .btn--ghost { color: var(--jb-azul) !important; border-color: var(--jb-azul) !important; }
.section:not(.section--navy):not(#cotizar):not(.about) .btn--ghost:hover { color: #fff !important; }
.link, .linkbtn { color: var(--jb-azul) !important; }
/* Campos del formulario y calculadora */
.field input, .field select, .field textarea, .search input, .calc input { border-radius: 10px !important; background: #fff !important; border: 1.5px solid var(--line) !important; color: var(--ink) !important; }
.field input:focus, .field select:focus, .field textarea:focus, .search input:focus, .calc input:focus { border-color: var(--jb-azul) !important; outline: 3px solid color-mix(in srgb, var(--jb-azul) 25%, transparent) !important; }
.opt span, .chips li { border-radius: 999px !important; }
.opt input:checked + span { background: var(--jb-azul) !important; border-color: var(--jb-azul) !important; color: #fff !important; }
.swatches b { border-radius: 10px !important; } .swatches button[aria-pressed="true"] b { outline-color: var(--jb-azul) !important; }
/* Bloque de cotización: textos claros garantizados y recuadros translúcidos */
#cotizar h2, #cotizar .lead, #cotizar p, #cotizar li, #cotizar strong, #cotizar .incluye *, #cotizar .contact *, #cotizar .comunas { color: #fff !important; }
#cotizar .lead, #cotizar .comunas, #cotizar .contact span, #cotizar small { color: var(--on-navy-muted) !important; }
#cotizar .incluye, #cotizar .contact { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 14px !important; }
#cotizar .incluye i, #cotizar .contact i { color: var(--jb-azul-2) !important; }
#cotizar .form, #cotizar .form *:not(.btn):not(.btn *) { color: var(--ink); }
#cotizar .form .btn--primary, #cotizar .form .btn--primary * { color: #fff !important; }
#cotizar .form .btn--ghost { color: var(--jb-azul) !important; border-color: var(--jb-azul) !important; }
/* Aparición suave */
@media (prefers-reduced-motion: no-preference) { .js [data-reveal] { transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .js [data-reveal].is-in { transform: none; } }
/* Ajustes finos */
/* El ::after de .svc-main lo usa el brillo de [data-tilt]; el oscurecido va en el cuerpo del texto */
.svc-main__body { position: relative; z-index: 1; width: 100%; padding-top: 6rem !important; background: linear-gradient(to top, rgba(5, 14, 35, .94) 0%, rgba(5, 14, 35, .8) 55%, rgba(5, 14, 35, 0)); }
.avance { background: linear-gradient(90deg, var(--jb-azul), var(--jb-azul-2)) !important; }
.cmp__head .is-us { box-shadow: inset 0 4px 0 var(--jb-azul) !important; }
.svc-main h3, .svc-main p { color: #fff !important; } .svc-main p { color: #dfe6f5 !important; }
.section--navy .dudas > li, .section--navy .dudas h3 { color: var(--ink) !important; } .section--navy .dudas p { color: var(--muted) !important; }
.steps li::before { -webkit-text-stroke-color: var(--jb-azul) !important; color: transparent !important; font-style: normal !important; font-stretch: 100% !important; letter-spacing: -.02em; }
.about__sello strong, .hitos strong, .hero__stats strong, .calc2__total strong, .calc2__big { font-style: normal !important; font-stretch: 100% !important; }
.hitos strong { color: var(--jb-azul-2) !important; } .hitos li::before { background: var(--jb-azul) !important; box-shadow: 0 0 0 5px color-mix(in srgb, var(--jb-azul) 30%, transparent) !important; }
.hitos li { border-top-color: rgba(255, 255, 255, .18) !important; }
.form .btn--ghost, .calc2__in .btn--ghost { color: var(--jb-azul) !important; border-color: var(--jb-azul) !important; }
.form .btn--ghost:hover, .calc2__in .btn--ghost:hover { color: #fff !important; background: var(--jb-azul) !important; }
#cotizar .contact a { border-bottom-color: rgba(255, 255, 255, .14) !important; }
.footer a:hover { color: var(--jb-azul-2) !important; }
.mold a, .mold a:hover, .fam__cap a { color: var(--jb-azul) !important; }
.footer .suc { display: grid; gap: .15rem; margin-top: .4rem; font-size: .92rem; } .footer .suc strong { color: #fff; } .footer .suc span { color: var(--on-navy-muted); }
.footer .suc__mapa { display: block; width: 100%; max-width: 360px; height: 150px; border: 0; border-radius: 12px; margin-top: .5rem; background: var(--navy-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.footer .suc__ir { display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; font-weight: 700; color: var(--jb-azul-2) !important; text-decoration: none; }
.footer .suc__ir:hover { text-decoration: underline; }
/* Pie en cuatro columnas cuando hay sucursales; en tablet, dos y dos; en móvil, una */
.footer__grid:has(.footer__ubic) { grid-template-columns: 1.3fr .8fr 1fr 1.1fr; gap: 2rem; }
@media (max-width: 1100px) { .footer__grid:has(.footer__ubic) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .footer__grid:has(.footer__ubic) { grid-template-columns: 1fr; } }
.footer .suc { margin-top: 0; } .footer .suc + .suc { margin-top: 1.1rem; }
.footer .suc__mapa { height: 130px; }
/* Aviso fijo bajo la calculadora: los valores son referenciales */
.calc2__aviso { display: flex; align-items: flex-start; gap: .45rem; margin: 1rem 0 .4rem; padding: .6rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: .9rem; font-weight: 600; line-height: 1.35; }
.calc2__aviso i { flex: none; font-size: 1.1rem; margin-top: .05rem; }
.calc2__nota strong { color: inherit; font-weight: 700; }