/* ============================================================
   ESTILOS COMPARTIDOS · paginas interiores de arqvazquez.com
   (landings de servicio, notas, curso, gracias, 404)
   Editar aca una sola vez y cambia en todas.
   ============================================================ */

/* ============================================================
   PALETA Y VARIABLES
   ============================================================ */
:root{
  --negro:#000000;
  --gris-osc:#151515;
  --gris:#535353;
  --gris-claro:#DBDBDB;
  --blanco:#FFFFFF;
  --acento:#FFFFFF;
  --nav-h:64px;
  --fuente:'Saira Condensed', 'Arial Narrow', sans-serif;
  --max:1400px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--fuente);
  background:var(--blanco);
  color:var(--negro);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:transparent;
  transition:background .35s ease, border-color .35s ease;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.header.solid{
  background:var(--negro);
  border-bottom-color:rgba(255,255,255,.12);
}
.header__inner{
  height:100%;max-width:var(--max);margin:0 auto;
  padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:flex;align-items:center;gap:10px;}
.logo img{height:34px;width:auto;filter:brightness(0) invert(1);}
.logo__img{height:42px;width:auto;margin-right:13px;flex:0 0 auto;}
.logo__txt{
  white-space:nowrap;color:var(--blanco);font-weight:600;font-size:15px;
  letter-spacing:2.5px;text-transform:uppercase;line-height:1;
}
.logo__txt small{display:block;font-weight:300;font-size:10px;letter-spacing:1.4px;opacity:.7;margin-top:3px;white-space:nowrap;}
@media(max-width:520px){.logo__txt small{font-size:8.5px;letter-spacing:.8px;}}

.nav{display:flex;align-items:center;gap:28px;}
.nav a{
  color:var(--blanco);font-size:14px;font-weight:500;
  letter-spacing:.5px;text-transform:uppercase;
  position:relative;padding:6px 0;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--blanco);
  transition:width .3s ease;
}
.nav a:hover::after{width:100%;}

.social{display:flex;align-items:center;gap:6px;}
.social a{
  width:30px;height:30px;display:grid;place-items:center;
  transition:background .25s ease;
}
.social a svg{width:15px;height:15px;fill:var(--blanco);transition:fill .25s ease;}
.social a:hover{background:var(--blanco);}
.social a:hover svg{fill:var(--negro);}

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.burger span{display:block;width:22px;height:2px;background:var(--blanco);margin:5px 0;transition:.3s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============================================================
   SECCIONES GENERALES
   ============================================================ */
.seccion{padding:90px 24px;}
.seccion--negro{background:var(--negro);color:var(--blanco);}
.seccion--gris{background:#F4F4F4;}
.wrap{max-width:var(--max);margin:0 auto;}
.wrap--angosto{max-width:920px;margin:0 auto;}

.titulo{
  font-size:clamp(1.6rem,3.2vw,2.6rem);
  font-weight:600;letter-spacing:3px;text-transform:uppercase;
  line-height:1.05;
}
.titulo--centro{text-align:center;}
.titulo__linea{
  width:56px;height:2px;background:currentColor;
  margin-top:18px;
}
.titulo--centro .titulo__linea{margin-left:auto;margin-right:auto;}
.bajada{
  margin-top:20px;font-size:1.05rem;font-weight:300;
  line-height:1.65;letter-spacing:.4px;max-width:720px;
}
.titulo--centro + .bajada{margin-left:auto;margin-right:auto;text-align:center;}

.btn-linea{
  display:inline-block;margin-top:34px;
  padding:13px 38px;border:1px solid var(--blanco);
  color:var(--blanco);font-size:14px;font-weight:500;
  letter-spacing:2.5px;text-transform:uppercase;
  transition:background .3s ease,color .3s ease;
}
.btn-linea:hover{background:var(--blanco);color:var(--negro);}
.btn-linea--full{background:var(--blanco);color:var(--negro);}
.btn-linea--full:hover{background:transparent;color:var(--blanco);}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */
.faq{margin-top:34px;border-top:1px solid var(--gris-claro);}
.faq details{border-bottom:1px solid var(--gris-claro);}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-size:1.02rem;font-weight:500;letter-spacing:.4px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:300;line-height:1;transition:transform .25s ease;
}
.faq details[open] summary::after{content:'\2212';}
.faq summary:hover{opacity:.65;}
.faq__r{padding:0 44px 22px 0;}
.faq__r p{font-size:.98rem;font-weight:300;line-height:1.75;color:var(--gris-osc);}
.faq__r a{box-shadow:inset 0 -1px 0 var(--gris);}
.faq__r a:hover{box-shadow:inset 0 -1px 0 var(--negro);}

/* ============================================================
   FORMULARIO
   ============================================================ */
.form{display:grid;gap:16px;}
.form input,.form textarea{
  width:100%;padding:14px 16px;
  background:transparent;border:1px solid rgba(255,255,255,.28);
  color:var(--blanco);font-family:var(--fuente);font-size:1rem;font-weight:300;
  transition:border-color .25s ease;
}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.45);letter-spacing:1px;}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--blanco);}
.form textarea{min-height:130px;resize:vertical;}
.form button{
  justify-self:start;padding:14px 44px;
  background:transparent;border:1px solid var(--blanco);color:var(--blanco);
  font-family:var(--fuente);font-size:14px;font-weight:500;
  letter-spacing:2.5px;text-transform:uppercase;cursor:pointer;
  transition:background .3s ease,color .3s ease;
}
.form button:hover{background:var(--blanco);color:var(--negro);}
.form select{
  width:100%;padding:14px 16px;background:transparent;
  border:1px solid rgba(255,255,255,.28);color:var(--blanco);
  font-family:var(--fuente);font-size:1rem;font-weight:300;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.form select:focus{outline:none;border-color:var(--blanco);}
.form select option{background:var(--negro);color:var(--blanco);}
.form__nota{font-size:.86rem;font-weight:300;opacity:.6;}
.form__nota a{box-shadow:inset 0 -1px 0 rgba(255,255,255,.5);}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--negro);color:var(--gris-claro);padding:22px 24px;border-top:1px solid rgba(255,255,255,.1);}
.footer__inner{
  max-width:var(--max);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
}
.footer__nav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;}
.footer__nav a{opacity:.72;}
.footer__nav a:hover{opacity:1;box-shadow:inset 0 -1px 0 currentColor;}

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(150deg,#60D26B 0%,#3FBF5B 45%,#25A24C 100%);
  display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:transform .25s ease;
}
.wa:hover{transform:scale(1.08);}
.wa svg{width:30px;height:30px;fill:#fff;}

/* ============================================================
   PAGINAS INTERIORES · subhero, texto, obras, CTA, relacionados
   ============================================================ */
.subhero{position:relative;min-height:56vh;min-height:56svh;display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 60px) 24px 54px;background:var(--negro);overflow:hidden;}
.subhero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5;}
.subhero__in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%;color:var(--blanco);}
.miga{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;opacity:.65;margin-bottom:18px;}
.miga a:hover{box-shadow:inset 0 -1px 0 currentColor;}
.subhero h1{font-size:clamp(2rem,5.2vw,3.8rem);font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;line-height:1.05;max-width:16ch;}
.subhero__sub{margin-top:18px;font-size:clamp(1rem,1.7vw,1.22rem);font-weight:300;
  line-height:1.6;max-width:62ch;opacity:.88;}

.texto{max-width:74ch;}
.texto h2{font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:600;letter-spacing:1px;
  text-transform:uppercase;margin-top:52px;line-height:1.2;}
.texto h2:first-child{margin-top:0;}
.texto h3{font-size:1.06rem;font-weight:600;letter-spacing:.6px;margin-top:30px;}
.texto p{margin-top:16px;font-size:1.04rem;font-weight:300;line-height:1.8;color:var(--gris-osc);}
.texto ul{margin:18px 0 0;padding:0;list-style:none;}
.texto ul li{position:relative;padding:11px 0 11px 24px;font-size:1.02rem;font-weight:300;
  line-height:1.65;border-bottom:1px solid var(--gris-claro);}
.texto ul li::before{content:'';position:absolute;left:0;top:21px;width:11px;height:1px;background:var(--negro);}
.texto ol{margin:18px 0 0;padding-left:20px;}
.texto ol li{padding:9px 0;font-size:1.02rem;font-weight:300;line-height:1.7;}
.texto strong{font-weight:600;}
.texto a{box-shadow:inset 0 -1px 0 var(--gris);}
.texto a:hover{box-shadow:inset 0 -1px 0 var(--negro);}
.texto blockquote{margin:30px 0 0;padding:18px 24px;background:#F4F4F4;border-left:2px solid var(--negro);
  font-size:1rem;font-weight:300;line-height:1.7;}

.cta{background:var(--negro);color:var(--blanco);text-align:center;padding:clamp(56px,8vw,96px) 24px;}
.cta h2{font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;line-height:1.15;}
.cta p{margin-top:18px;font-size:1.05rem;font-weight:300;opacity:.78;max-width:60ch;margin-left:auto;margin-right:auto;line-height:1.7;}
.cta__bts{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

.obras{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;margin-top:34px;}
.obra{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--gris-claro);display:block;}
.obra img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.obra:hover img{transform:scale(1.06);}
.obra span{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));
  font-size:.82rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;line-height:1.35;}

.meta-nota{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gris);margin-bottom:14px;}

.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;margin-top:30px;}
.rel a{background:#F4F4F4;padding:24px;display:block;transition:background .25s ease;}
.rel a:hover{background:var(--gris-claro);}
.rel strong{display:block;font-size:1rem;font-weight:600;letter-spacing:.4px;line-height:1.35;}
.rel span{display:block;margin-top:9px;font-size:.9rem;font-weight:300;color:var(--gris);line-height:1.55;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .contacto{grid-template-columns:1fr;gap:44px;}
}
@media (max-width:820px){
  .burger{display:block;}
  .social{display:none;}
  .nav{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--negro);padding:0 24px;
    max-height:0;overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.15);
    transition:max-height .35s ease,padding .35s ease;
  }
  .nav.open{max-height:340px;padding:16px 24px 24px;}
  .nav a{width:100%;padding:14px 0;font-size:18px;}
  .seccion{padding:56px 20px;}
  .titulo{letter-spacing:2px;}
  .bajada{font-size:1rem;}
  .faq summary{font-size:.98rem;padding:18px 40px 18px 0;}
  .footer__inner{justify-content:center;text-align:center;}
  /* el boton de WhatsApp no tapa el pie */
  .footer{padding-bottom:80px;}
  .subhero{min-height:46vh;padding:calc(var(--nav-h) + 40px) 20px 40px;}
  .texto h2{margin-top:40px;}
  .cta__bts .btn-linea{margin-top:24px;}
}
@media (max-width:400px){
  .logo__txt{font-size:13px;letter-spacing:1.8px;}
  .logo__img{height:32px;margin-right:10px;}
  .seccion{padding:48px 18px;}
}

/* Botón de vuelta a proyectos (fondo claro) */
.volver{
  display:inline-block;margin-top:10px;
  padding:13px 38px;border:1px solid var(--negro);
  color:var(--negro);font-size:14px;font-weight:500;
  letter-spacing:2.5px;text-transform:uppercase;
  transition:background .3s ease,color .3s ease;
}
.volver:hover{background:var(--negro);color:var(--blanco);}

/* ---- Fichas de obra (páginas obra-*.html) ---- */
.datos-obra{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:2px;margin:30px 0 6px;
}
.datos-obra div{background:var(--gris-claro);padding:16px 18px;font-size:.94rem;line-height:1.5;}
.datos-obra b{
  display:block;font-size:11px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--gris);margin-bottom:6px;
}
.galeria-obra{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2px;margin-top:30px;
}
.galeria-obra img{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--gris-claro);
}
.nav-obras{
  display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;
  margin-top:40px;padding-top:24px;border-top:1px solid var(--gris-claro);
  font-size:.92rem;
}
.indice-obras{margin-top:34px;}
.indice-obras h3{
  font-size:12px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gris);margin:22px 0 10px;
}
.indice-obras ul{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px 26px;}
.indice-obras li{font-size:.92rem;line-height:1.5;}
@media (max-width:640px){
  .galeria-obra{grid-template-columns:1fr;}
  .datos-obra{grid-template-columns:1fr;}
  .nav-obras{gap:12px;}
}

/* El header es fijo: evita que los títulos queden tapados al llegar por un enlace */
[id]{scroll-margin-top:calc(var(--nav-h) + 14px);}