/* Nórtica Arquitectos — v2
   Estudio minimalista: blanco, negro grafito y un acento ocre tomado de la tierra del norte.
   Alineación a la izquierda, retícula de 12 columnas, fotografía grande y poco texto.
   Un solo momento animado: la imagen del inicio se descubre al cargar. */
:root{
  --blanco:#FFFFFF;
  --piedra:#EFEDE9;
  --linea:#DAD6CF;
  --grafito:#5E5A54;
  --negro:#1A1917;
  --ocre:#9A6440;
  --error:#A3261B;
  --ok:#2E6B45;

  --f:"Instrument Sans","Helvetica Neue",Arial,sans-serif;

  --t-hero:clamp(2.4rem,1.2rem + 3.2vw,4.3rem);
  --t-1:clamp(2rem,1.3rem + 2.6vw,3.4rem);
  --t-2:clamp(1.4rem,1.15rem + 1vw,1.9rem);
  --t-3:1.2rem;
  --t-base:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;

  --ancho:1280px;
  --g:clamp(16px,4vw,48px);
  --sec:clamp(4.5rem,9vw,8.5rem);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanco);color:var(--negro);font-family:var(--f);font-size:var(--t-base);line-height:1.6;font-feature-settings:"ss01"}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:500;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:var(--t-hero);font-weight:450;overflow-wrap:break-word;hyphens:manual}
h2{font-size:var(--t-1)}
h3{font-size:var(--t-2);letter-spacing:-.02em;line-height:1.15}
p{margin:0;max-width:62ch}
:focus-visible{outline:2px solid var(--ocre);outline-offset:3px}
.salto{position:absolute;left:-9999px;top:0;background:var(--negro);color:var(--blanco);padding:.7rem 1rem;z-index:100}
.salto:focus{left:16px;top:16px}
.cont{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--g)}

/* ---------- Encabezado ---------- */
.cab{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cab__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:100px}
.logo{display:block;text-decoration:none;color:var(--negro);line-height:0}
.logo svg{display:block;width:auto;height:74px}
@media (max-width:520px){.logo svg{height:58px}}
.nav{display:flex;align-items:center;gap:2.25rem}
.nav a{text-decoration:none;font-size:var(--t-sm);color:var(--grafito);padding-block:.35rem;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--negro)}
.nav a[aria-current="page"]{color:var(--negro);border-bottom-color:var(--negro)}
.nav .btn{color:var(--blanco);border-bottom:0;padding:.75rem 1.2rem}
.nav .btn:hover,.nav .btn[aria-current="page"]{color:var(--blanco);border-bottom:0}
.menu{display:none;background:none;border:0;width:44px;height:44px;margin-right:-10px;cursor:pointer;color:var(--negro)}
.menu svg{width:24px;height:24px}
@media (max-width:820px){
  .menu{display:inline-grid;place-items:center}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--blanco);border-bottom:1px solid var(--linea);padding:.5rem var(--g) 1.5rem}
  .nav.abierto{display:flex}
  .nav a{padding:1rem 0;border-bottom:1px solid var(--linea);font-size:1.05rem;color:var(--negro)}
  .nav a[aria-current="page"]{border-bottom-color:var(--linea);color:var(--ocre)}
  .nav .btn{margin-top:1rem;justify-content:center;border-bottom:0}
}

/* ---------- Botones y enlaces ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:500 1rem/1 var(--f);padding:1.05rem 1.6rem;background:var(--negro);color:var(--blanco);border:1px solid var(--negro);text-decoration:none;cursor:pointer;min-height:48px;transition:background .15s,color .15s}
.btn:hover{background:var(--ocre);border-color:var(--ocre)}
.btn--linea{background:transparent;color:var(--negro)}
.btn--linea:hover{background:var(--negro);color:var(--blanco);border-color:var(--negro)}
.btn svg{width:18px;height:18px}
.enl{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;text-decoration:none;border-bottom:1px solid var(--negro);padding-bottom:2px}
.enl:hover{color:var(--ocre);border-color:var(--ocre)}

/* ---------- Secciones ---------- */
.sec{padding-block:var(--sec)}
.sec--piedra{background:var(--piedra)}
.sec--negro{background:var(--negro);color:var(--blanco)}
.cabeza{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,5vw,6rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.cabeza p{color:var(--grafito);font-size:1.125rem}
.sec--negro .cabeza p{color:#BDB8B0}
@media (max-width:860px){.cabeza{grid-template-columns:1fr}}
.marca-ocre{display:block;width:44px;height:2px;background:var(--ocre);margin-bottom:1.5rem}

/* ---------- Inicio: hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);min-height:min(86vh,820px);border-bottom:1px solid var(--linea)}
.hero__txt{display:flex;flex-direction:column;justify-content:space-between;gap:3rem;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,4vw,4rem) clamp(2rem,4vw,3rem) max(var(--g),calc((100vw - var(--ancho))/2 + var(--g)))}
.hero__txt p{font-size:clamp(1.05rem,1rem + .3vw,1.25rem);color:var(--grafito);max-width:34ch;margin-top:1.75rem}
.hero__acc{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}
.hero__pie{font-size:var(--t-sm);color:var(--grafito);border-top:1px solid var(--linea);padding-top:1.25rem;display:flex;flex-wrap:wrap;gap:.25rem 1.75rem}
.hero__img{position:relative;overflow:hidden;background:var(--piedra)}
.hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;animation:descubrir 1.6s cubic-bezier(.7,0,.2,1) both}
@keyframes descubrir{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.hero__img img{animation:none}html{scroll-behavior:auto}}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__txt{padding:3rem var(--g) 2.5rem;gap:2rem}
  .hero__img{aspect-ratio:4/3;max-width:100%}
}

/* ---------- Servicios (3 pilares) ---------- */
.pilares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.pilar{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:1rem;min-width:0}
.pilar__img{aspect-ratio:4/5;max-width:100%;overflow:hidden;background:var(--piedra);margin-bottom:.75rem}
.pilar__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pilar:hover .pilar__img img{transform:scale(1.03)}
.pilar p{color:var(--grafito)}
.pilar ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.pilar li{padding:.7rem 0;border-bottom:1px solid var(--linea);font-size:var(--t-sm)}
.pilar .enl{justify-self:start;margin-top:.5rem}
@media (max-width:900px){.pilares{grid-template-columns:1fr;gap:3.5rem}.pilar__img{aspect-ratio:16/10}}

/* ---------- Sectores ---------- */
.sectores{border-top:1px solid #3A3835}
.sector{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2fr);gap:2rem;align-items:center;padding:2rem 0;border-bottom:1px solid #3A3835}
.sector h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.3rem)}
.sector p{color:#BDB8B0}
.sector__img{aspect-ratio:4/3;max-width:100%;overflow:hidden}
.sector__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .4s}
.sector:hover .sector__img img{filter:none}
@media (max-width:760px){.sector{grid-template-columns:1fr;gap:1rem}.sector__img{display:none}}

/* ---------- Proceso (secuencia) ---------- */
.proceso{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);counter-reset:p}
.proceso li{counter-increment:p;border-top:1px solid var(--negro);padding-top:1.25rem;display:grid;gap:.6rem;align-content:start;min-width:0}
.proceso li::before{content:counter(p);font-size:var(--t-sm);color:var(--ocre);font-weight:600;font-variant-numeric:tabular-nums}
.proceso h3{font-size:var(--t-3);font-weight:600;letter-spacing:-.01em}
.proceso p{color:var(--grafito);font-size:var(--t-sm)}
@media (max-width:900px){.proceso{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.proceso{grid-template-columns:1fr}}

/* ---------- Banda de imagen con frase ---------- */
.banda{position:relative;min-height:clamp(380px,60vw,640px);display:flex;align-items:flex-end;color:var(--blanco);overflow:hidden}
.banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banda::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,25,23,.72),rgba(26,25,23,0) 65%)}
.banda .cont{position:relative;z-index:1;padding-block:clamp(2.5rem,6vw,5rem);width:100%}
.banda p{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.7rem);line-height:1.2;letter-spacing:-.02em;max-width:26ch}

/* ---------- Llamado a cotizar ---------- */
.llamado{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.llamado p{color:var(--grafito);font-size:1.125rem;margin-top:1.25rem}
.llamado__acc{display:grid;gap:1rem;justify-items:start}
.dato-linea{font-size:var(--t-sm);color:var(--grafito)}
.dato-linea a{color:var(--negro)}
@media (max-width:860px){.llamado{grid-template-columns:1fr}}

/* ---------- Página interior ---------- */
.intro{padding-block:clamp(3.5rem,8vw,7rem) clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--linea)}
.intro__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,5vw,5rem);align-items:end}
.intro p{color:var(--grafito);font-size:1.125rem}
@media (max-width:860px){.intro__grid{grid-template-columns:1fr}}

.bloque{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.bloque + .bloque{margin-top:var(--sec)}
.bloque--inv .bloque__img{order:2}
.bloque__img{aspect-ratio:5/4;max-width:100%;overflow:hidden;background:var(--piedra)}
.bloque__img img{width:100%;height:100%;object-fit:cover}
.bloque__txt{display:grid;gap:1.25rem;min-width:0}
.bloque__txt > p{color:var(--grafito);font-size:1.0625rem}
.lista{list-style:none;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem;border-top:1px solid var(--linea)}
.lista li{padding:.8rem 0;border-bottom:1px solid var(--linea);font-size:var(--t-sm);min-width:0}
.lista li strong{display:block;font-weight:600;font-size:var(--t-base)}
.lista li span{color:var(--grafito)}
@media (max-width:860px){.bloque{grid-template-columns:1fr}.bloque--inv .bloque__img{order:0}}
@media (max-width:520px){.lista{grid-template-columns:1fr}}

/* FAQ */
.faq{border-top:1px solid var(--negro)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.4rem 0;font-size:1.125rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;background:linear-gradient(var(--negro),var(--negro)) center/12px 1.5px no-repeat,linear-gradient(var(--negro),var(--negro)) center/1.5px 12px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.5rem;color:var(--grafito)}

/* Estudio */
.valores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.valor{border-top:1px solid var(--negro);padding-top:1.25rem;display:grid;gap:.75rem;align-content:start}
.valor p{color:var(--grafito);font-size:var(--t-sm)}
@media (max-width:860px){.valores{grid-template-columns:1fr}}
.comunas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.comunas h3{font-size:var(--t-3);font-weight:600;padding-bottom:.9rem;border-bottom:1px solid var(--negro);margin-bottom:.9rem}
.comunas ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;color:var(--grafito)}
@media (max-width:700px){.comunas{grid-template-columns:1fr}}
.foto-ancha{aspect-ratio:21/9;max-width:100%;overflow:hidden}
.foto-ancha img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.foto-ancha{aspect-ratio:4/3}}

/* ---------- Contacto ---------- */
.contacto{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,6vw,6rem);align-items:start}
@media (max-width:900px){.contacto{grid-template-columns:1fr}}
.form{display:grid;gap:1.5rem;min-width:0}
.fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
@media (max-width:560px){.fila{grid-template-columns:1fr}}
.campo{display:grid;gap:.45rem;min-width:0}
.campo label{font-size:var(--t-sm);font-weight:500}
.campo label small{font-weight:400;color:var(--grafito);font-size:inherit}
.campo input,.campo select,.campo textarea{font:inherit;font-size:1rem;color:var(--negro);background:var(--blanco);border:0;border-bottom:1px solid var(--grafito);padding:.75rem 0;width:100%;border-radius:0;min-height:48px}
.campo select{appearance:none;background:linear-gradient(45deg,transparent 50%,var(--negro) 50%) calc(100% - 10px) 55%/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--negro) 50%) calc(100% - 4px) 55%/6px 6px no-repeat;padding-right:1.5rem}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-bottom:2px solid var(--ocre)}
.campo [aria-invalid="true"]{border-bottom-color:var(--error)}
.err{color:var(--error);font-size:var(--t-xs);min-height:1em}
.consent{display:grid;grid-template-columns:20px 1fr;gap:.7rem;font-size:var(--t-xs);color:var(--grafito);align-items:start}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--negro)}
.form__pie{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.form__pie small{color:var(--grafito);font-size:var(--t-xs)}
.exito{border-top:1px solid var(--negro);padding-top:1.5rem;display:grid;gap:1rem}
.exito h2{font-size:var(--t-2)}
.exito p{color:var(--grafito)}
.exito .aviso{font-size:var(--t-xs);border-top:1px solid var(--linea);padding-top:1rem}
.directo{display:grid;gap:2rem;position:sticky;top:130px}
.directo > div{border-top:1px solid var(--negro);padding-top:1.25rem;display:grid;gap:.5rem}
.directo h2{font-size:var(--t-3);font-weight:600;letter-spacing:-.01em}
.directo p,.directo li{color:var(--grafito);font-size:var(--t-sm)}
.directo ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.directo a{color:var(--negro)}

/* ---------- Pie ---------- */
.pie{background:var(--negro);color:#BDB8B0;padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;font-size:var(--t-sm)}
.pie__grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:2rem}
.pie .logo{color:var(--blanco)}
.pie .logo svg{height:110px}
.pie h2{font-size:var(--t-sm);font-weight:600;color:var(--blanco);letter-spacing:0;margin-bottom:1rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pie a{text-decoration:none}
.pie a:hover{color:var(--blanco)}
.pie__frase{margin-top:1.25rem;max-width:34ch}
.pie__legal{margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.5rem;border-top:1px solid #3A3835;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:var(--t-xs)}
@media (max-width:860px){.pie__grid{grid-template-columns:1fr 1fr}.pie__grid > :first-child{grid-column:1/-1}}

/* WhatsApp flotante (solo si hay número configurado) */
.wa-flot{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;width:54px;height:54px;border-radius:50%;background:#1F7A4A;color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.wa-flot svg{width:26px;height:26px}

/* Portafolio */
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2rem,4vw,3rem)}
.filtros button{font:500 var(--t-sm) var(--f);padding:.65rem 1.1rem;border:1px solid var(--linea);background:var(--blanco);color:var(--negro);cursor:pointer;min-height:44px}
.filtros button:hover{border-color:var(--negro)}
.filtros button[aria-pressed="true"]{background:var(--negro);color:var(--blanco);border-color:var(--negro)}
.obras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,2.5vw,2rem)}
.obra{display:grid;gap:.6rem;align-content:start;min-width:0}
.obra__img{position:relative;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:var(--piedra);margin-bottom:.4rem}
.obra__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.obra:hover .obra__img img{transform:scale(1.03)}
.obra__ref{position:absolute;left:.75rem;bottom:.75rem;background:rgba(255,255,255,.92);color:var(--grafito);font-size:var(--t-xs);padding:.25rem .55rem}
.obra__cat{font-size:var(--t-xs);color:var(--ocre);font-weight:600}
.obra h2{font-size:var(--t-3);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.obra p{color:var(--grafito);font-size:var(--t-sm)}
@media (max-width:900px){.obras{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.obras{grid-template-columns:1fr}}

/* FAQ página */
.faq-pagina{display:grid;gap:clamp(3rem,6vw,4.5rem);max-width:900px}
.faq-grupo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1rem,4vw,3rem);align-items:start}
.faq-grupo h2{font-size:var(--t-3);font-weight:600;letter-spacing:-.01em;padding-top:1.4rem}
@media (max-width:760px){.faq-grupo{grid-template-columns:1fr}.faq-grupo h2{padding-top:0}}