/* SCL Arquitectura — estilos del tema.
   El diseño usa estilos en línea en las plantillas; aquí van estados, componentes interactivos y adaptación a móvil. */

body { margin:0; background:#f4f4f2; -webkit-font-smoothing:antialiased; text-wrap:pretty; }
a { color:#1f4d46; text-decoration:none; }
a:hover { color:#14171a; }
.scl-root input, .scl-root button, .scl-root textarea { font-family:Barlow, system-ui, sans-serif; }
.scl-root [hidden] { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
::selection { background:#1f4d46; color:#fff; }
.scl-root .scl-navlink:hover { color:#1f4d46 !important; }

/* Menú: desplegables de Servicios y Zonas (ratón con :hover y botón con .is-open) */
.scl-sub { display:none; }
.scl-navitem:hover .scl-sub, .scl-navitem.is-open .scl-sub { display:block; }
.scl-root .scl-sub a:hover { background:#f4f4f2; }
.scl-root .scl-subbtn:hover, .scl-root .scl-subbtn:focus-visible { color:#1f4d46 !important; }

/* Hover generados desde el diseño */
.scl-root .h1:hover{background:#f4f4f2 !important;color:#14171a !important}
.scl-root .h2:hover{background:#f4f4f2 !important;color:#14171a !important;border-color:#f4f4f2 !important}
.scl-root .h3:hover{background:#14171a !important}
.scl-root .h4:hover{background:#1f4d46 !important;color:#fff !important}
.scl-root .h5:hover{background:#14171a !important;color:#fff !important}
.scl-root .h6:hover{background:#14171a !important;color:#f4f4f2 !important}
.scl-root .h7:hover{background:#14171a !important;border-color:#14171a !important;color:#f4f4f2 !important}
.scl-root .h8:hover{background:#eef2f0 !important;color:#14171a !important}
.scl-root .h9:hover{color:#f4f4f2 !important}

/* Texto de páginas genéricas */
.scl-prose { font-size:17px; line-height:1.7; color:#2c3532; }
.scl-prose h2, .scl-prose h3 { font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; line-height:1.05; color:#14171a; margin:1.6em 0 .5em; }
.scl-prose a { text-decoration:underline; }
.scl-prose > * { max-width:68ch; }
.scl-prose p, .scl-prose ul, .scl-prose ol { margin:0 0 1.2em; }
.scl-prose table { border-collapse:collapse; width:100%; margin:0 0 1.2em; font-size:15px; }
.scl-prose th, .scl-prose td { border:1px solid #e4e6e2; padding:8px 10px; text-align:left; vertical-align:top; }
.scl-prose th { background:#f4f4f2; }
.scl-prose h2 { font-size:clamp(28px,3vw,38px); }
.scl-prose h3 { font-size:24px; }
.scl-prose ul, .scl-prose ol { padding-left:1.3em; }
.scl-prose li { margin:0 0 .4em; }
.scl-prose img { display:block; max-width:100%; height:auto; }
.scl-prose figure { margin:2em 0; }
.scl-prose figcaption { margin-top:8px; font:500 12px/1.5 ui-monospace,Menlo,monospace; color:#6f7570; }
.scl-prose blockquote { margin:2em 0; padding:4px 0 4px 20px; border-left:3px solid #1f4d46; color:#42504c; }

/* Formulario de presupuesto */
.scl-q { background:#fff; border:1px solid #dfe2dd; padding:26px 26px 22px; color:#14171a; font-family:Barlow,system-ui,sans-serif; }
.scl-q-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:6px; }
.scl-q h3 { margin:0; font:700 26px/1 'Barlow Condensed',Barlow,sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.scl-q-count { font:500 11px/1 ui-monospace,Menlo,monospace; letter-spacing:.1em; color:#6f7570; white-space:nowrap; }
.scl-q-count b { font-weight:500; }
.scl-q-lead { margin:0 0 18px; font-size:14px; line-height:1.5; color:#5c6360; max-width:44ch; }
.scl-q-bars { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:22px; }
.scl-q-bars span { height:3px; background:#e4e6e2; transition:background .2s; }
.scl-q-bars span.on { background:#1f4d46; }
.scl-q-label { margin:0 0 12px; font:600 13px/1 Barlow,sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.scl-q-opts { display:grid; gap:8px; }
.scl-q-opts + .scl-q-label { margin-top:22px; }
.scl-opt { text-align:left; cursor:pointer; padding:13px 14px; font:500 14px/1.25 Barlow,sans-serif; background:#fbfbfa; border:1px solid #dfe2dd; color:#14171a; border-radius:0; }
.scl-opt:hover { border-color:#1f4d46; color:#1f4d46; }
.scl-opt.is-on { background:#eef2f0; border-color:#1f4d46; color:#1f4d46; box-shadow:inset 0 0 0 1px #1f4d46; }
.scl-q-contact:not([hidden]) { display:grid; gap:10px; }
.scl-q-contact .scl-q-label { margin-bottom:2px; }
.scl-q input:not([type=checkbox]) { width:100%; box-sizing:border-box; border:1px solid #dfe2dd; background:#fbfbfa; padding:13px 14px; font:400 15px/1 Barlow,sans-serif; color:#14171a; outline:none; border-radius:0; }
.scl-q input:focus { border-color:#1f4d46; }
.scl-q-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.scl-q-consent { display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.45; color:#6f7570; cursor:pointer; }
.scl-q-consent input { margin:2px 0 0; accent-color:#1f4d46; width:15px; height:15px; flex:none; }
.scl-hp { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; }
.scl-q-nav { display:flex; gap:10px; align-items:center; margin-top:22px; }
.scl-q-back { border:1px solid #dfe2dd; background:transparent; color:#6f7570; padding:15px 18px; font:600 13px/1 Barlow,sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.scl-q-back:hover { border-color:#14171a; color:#14171a; }
.scl-q-next { flex:1; border:none; padding:16px 20px; font:700 13px/1 Barlow,sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; background:#1f4d46; color:#fff; }
.scl-q-next:hover { background:#14171a; }
.scl-q-next:disabled { background:#c9cdc8; cursor:not-allowed; }
.scl-q-foot { margin:14px 0 0; font:500 11px/1.5 ui-monospace,Menlo,monospace; letter-spacing:.06em; color:#9aa09c; text-transform:uppercase; }
.scl-q-error { margin:14px 0 0; color:#a63b25; font-size:14px; line-height:1.5; }
.scl-q-done { padding:14px 0; }
.scl-q-check { width:44px; height:44px; border:1px solid #1f4d46; color:#1f4d46; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px; }
.scl-q-done h3 { margin-bottom:10px; font-size:28px; }
.scl-q-done p { margin:0 0 8px; font-size:15px; line-height:1.6; color:#5c6360; max-width:46ch; }
.scl-q-done .scl-q-sum { margin-bottom:20px; font:500 12px/1.6 ui-monospace,Menlo,monospace; color:#6f7570; }
.scl-q-wa { display:inline-block; background:#14171a; color:#f4f4f2 !important; padding:15px 22px; font:600 13px/1 Barlow,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.scl-q-wa:hover { background:#1f4d46; }

/* Comparador antes / después */
.scl-ba { font-family:Barlow,system-ui,sans-serif; }
.scl-ba-frame { position:relative; aspect-ratio:16/10; overflow:hidden; background:#dedbd4; user-select:none; }
.scl-ba-after, .scl-ba-before { position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px; }
.scl-ba-after { background:repeating-linear-gradient(135deg,#d9d5cd 0 12px,#cfcbc2 12px 24px); justify-content:flex-end; }
.scl-ba-before { background:repeating-linear-gradient(135deg,#7e8580 0 12px,#6d746f 12px 24px); clip-path:inset(0 calc(100% - var(--p)) 0 0); }
.scl-ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scl-ba-tag { position:relative; font:500 10px/1 ui-monospace,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; padding:6px 8px; }
.scl-ba-tag.is-light { color:#5c6360; background:#f4f4f2; }
.scl-ba-tag.is-dark { color:#f4f4f2; background:#14171a; }
.scl-ba-line { position:absolute; top:0; bottom:0; left:var(--p); width:2px; background:#f4f4f2; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.scl-ba-knob { position:absolute; top:50%; left:var(--p); transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#f4f4f2; color:#14171a; display:flex; align-items:center; justify-content:center; font:600 12px/1 Barlow,sans-serif; pointer-events:none; }
.scl-ba input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.scl-ba-cap { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding-top:12px; }
.scl-ba-cap p { margin:0; font:500 13px/1.4 Barlow,sans-serif; color:#5c6360; }
.scl-ba-cap span { font:500 10px/1 ui-monospace,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; color:#9aa09c; white-space:nowrap; }

/* Filtro de proyectos */
.scl-filter { cursor:pointer; padding:12px 18px; font:600 12px/1 Barlow,sans-serif; letter-spacing:.1em; text-transform:uppercase; border:1px solid #c9cdc8; background:transparent; color:#14171a; }
.scl-filter:hover { border-color:#1f4d46; color:#1f4d46; }
.scl-filter.is-active { border-color:#1f4d46; background:#1f4d46; color:#fff; }

/* Galería de proyecto: fotos a sangre, sin márgenes laterales (también en móvil, ver abajo) */
.scl-galeria img { display:block; }

/* Adaptación a tablet y móvil */
/* Menú hamburguesa en su propio punto de corte: el menú completo (6 entradas, ▾, idiomas, teléfono y CTA) necesita ~1290 px en español. */
@media (max-width:1340px) {
  .scl-burger { display:inline-flex !important; }
  .scl-nav { display:none !important; }
  .scl-header.is-open .scl-nav { display:flex !important; position:absolute; top:78px; left:0; right:0; flex-direction:column; gap:0 !important; margin:0 !important; padding:4px 24px 16px; background:#f4f4f2; border-bottom:1px solid #e4e6e2; }
  .scl-header.is-open .scl-nav a { padding:16px 0 !important; border-bottom:1px solid #e4e6e2 !important; }
  .scl-header.is-open .scl-langs { border-left:0 !important; padding:8px 0 0 !important; gap:18px !important; }
  .scl-header.is-open .scl-langs a { border-bottom:0 !important; }
  .scl-header.is-open .scl-navitem { display:block !important; }
  .scl-header.is-open .scl-subbtn { display:none !important; }
  .scl-header.is-open .scl-sub { display:block !important; position:static !important; min-width:0 !important; padding:0 0 0 16px !important; border:0 !important; box-shadow:none !important; background:transparent !important; }
  .scl-header.is-open .scl-sub a { padding:12px 0 !important; font-weight:500; }
}
@media (min-width:961px) {
  .scl-mbar { display:none !important; }
}
@media (max-width:960px) {
  .scl-cookies { bottom:46px !important; max-height:calc(100vh - 46px); overflow-y:auto; }
  .scl-cookies > div { padding:16px 20px !important; }
  .scl-root [style*="grid-template-columns:minmax"] { grid-template-columns:minmax(0,1fr) !important; gap:40px !important; }
  .scl-root [style*="position:sticky; top:110px"] { position:static !important; }
  .scl-root main section > div { padding-left:20px !important; padding-right:20px !important; }
  .scl-root footer > div { padding-left:20px !important; padding-right:20px !important; }
}
@media (max-width:600px) {
  .scl-hphone, .scl-brand-sub { display:none !important; }
  .scl-hcta { display:none !important; } /* Sin hueco para el CTA: la barra móvil ya ofrece Presupuesto. */
  .scl-header > div { padding:0 16px !important; gap:12px !important; }
  .scl-root main section > div { padding-top:64px !important; padding-bottom:64px !important; }
  .scl-q { padding:22px 18px 18px; }
  .scl-q-row { grid-template-columns:1fr; }
}

/* La galería sigue a sangre en móvil (más específica que «main section > div»). */
.scl-root main section.scl-galeria > div { padding:0 !important; }