:root{
  --terracota:#d75b48;      /* color de acento principal */
  --terracota-oscuro:#cb4538;
  --negro:#242424;
  --gris-oscuro:#313131;
  --crema:#f5f1ec;
  --blanco:#ffffff;
  --fuente:'Jost',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fuente);font-weight:300;color:var(--negro);background:var(--crema);line-height:1.6}
img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- utilidades ---------- */
.contenedor{max-width:1280px;margin:0 auto;padding:0 24px}
.etiqueta{font-size:13px;letter-spacing:.25em;text-transform:uppercase;color:var(--terracota);font-weight:400}
.btn{display:inline-block;padding:15px 40px;border:1px solid currentColor;text-decoration:none;color:inherit;
     font-size:13px;letter-spacing:.18em;text-transform:uppercase;transition:all .3s ease}
.btn:hover{background:var(--terracota);border-color:var(--terracota);color:var(--blanco)}
.btn--lleno{background:var(--terracota);border-color:var(--terracota);color:var(--blanco)}
.btn--lleno:hover{background:var(--terracota-oscuro);border-color:var(--terracota-oscuro)}
.fade{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.fade.visible{opacity:1;transform:none}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;
       background:#1c1c1c;border-bottom:1px solid rgba(255,255,255,.08);
       box-shadow:0 2px 16px rgba(0,0,0,.35);transition:padding .3s,background .3s}
header.solido{background:rgba(28,28,28,.98);padding:10px 0}
header .contenedor{display:flex;align-items:center;justify-content:space-between}
.logo{color:var(--blanco);text-decoration:none;font-size:20px;letter-spacing:.3em;text-transform:uppercase;font-weight:400}
nav ul{display:flex;gap:36px;list-style:none}
nav a{color:var(--blanco);text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.9;transition:.2s}
nav a:hover{opacity:1;color:var(--terracota)}
nav a.activo{opacity:1;color:var(--terracota)}
@media(max-width:860px){nav{display:none}}

/* ---------- hero: foto gigante a pantalla completa (solo inicio) ---------- */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:flex-end;color:var(--blanco);overflow:hidden}
.hero > img{position:absolute;inset:0;z-index:0}
.hero::after{content:'';position:absolute;inset:0;z-index:1;
             background:linear-gradient(rgba(36,36,36,.15) 40%,rgba(36,36,36,.75))}
.hero .contenedor{position:relative;z-index:2;padding-bottom:100px}
.hero h1{font-size:13px;letter-spacing:.3em;text-transform:uppercase;font-weight:400;color:var(--blanco);opacity:.9;margin-bottom:22px}
.hero .titular{font-size:clamp(38px,5.6vw,72px);font-weight:300;line-height:1.12;max-width:17ch;margin-bottom:40px}

/* ---------- subhero: encabezado de páginas interiores (texto) ---------- */
.subhero{background:var(--negro);color:var(--blanco);padding:190px 0 80px}
.subhero h1{font-size:clamp(34px,4.5vw,58px);font-weight:300;line-height:1.15;margin-top:14px}

/* ---------- page-hero: encabezado fotográfico de páginas interiores ---------- */
/* 100vh: la primera pantalla es solo el hero, nunca quedan tarjetas cortadas al cargar */
.page-hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:flex-end;color:var(--blanco);overflow:hidden}
.page-hero > img{position:absolute;inset:0;z-index:0}
.page-hero::after{content:'';position:absolute;inset:0;z-index:1;
                  background:linear-gradient(rgba(28,28,28,.55),rgba(28,28,28,.2) 45%,rgba(28,28,28,.88))}
.page-hero .contenedor{position:relative;z-index:2;width:100%;padding-bottom:90px;
                       text-shadow:0 1px 3px rgba(0,0,0,.5),0 0 30px rgba(0,0,0,.35)}
.page-hero h1{font-size:clamp(42px,5.2vw,74px);font-weight:300;line-height:1.08;margin-top:16px}
.page-hero .bajada{max-width:56ch;margin-top:20px;font-size:17px;color:rgba(255,255,255,.88)}
.page-hero .etiqueta{color:#ff8a73}  /* terracota más luminoso: legible sobre la foto */

/* secciones interiores más compactas */
.compacta{padding:80px 0}

/* ---------- secciones genéricas ---------- */
section{padding:110px 0}
.titulo-seccion{font-size:clamp(28px,3.6vw,46px);font-weight:300;line-height:1.2;margin:14px 0 24px}

/* ---------- intro ---------- */
.intro .contenedor{max-width:860px;text-align:center}
.intro p{font-size:18px;margin-bottom:36px;color:var(--gris-oscuro)}

/* ---------- áreas de servicio: fotos grandes con nombre ---------- */
.portafolio{background:var(--negro);color:var(--blanco)}
.grilla-proyectos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
.proyecto{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:3/4}
.proyecto img{transition:transform .7s ease}
.proyecto:hover img{transform:scale(1.06)}
.proyecto::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.65))}
.proyecto h3{position:absolute;left:20px;bottom:18px;z-index:2;font-weight:400;font-size:18px;letter-spacing:.06em;color:var(--blanco)}
@media(max-width:1000px){.grilla-proyectos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grilla-proyectos{grid-template-columns:1fr}}

/* ---------- lista de servicios ---------- */
.servicios-lista ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 40px;list-style:none;margin-top:40px}
.servicios-lista li{padding:14px 0;border-bottom:1px solid rgba(36,36,36,.15);font-size:17px;display:flex;justify-content:space-between}
.servicios-lista li::after{content:'→';color:var(--terracota)}

/* ---------- servicios destacados: foto grande + texto ---------- */
.servicio{padding:0}
.servicio .fila{display:grid;grid-template-columns:1.15fr 1fr;min-height:640px}
.servicio .foto{overflow:hidden}
.servicio .texto{display:flex;flex-direction:column;justify-content:center;padding:80px clamp(24px,6vw,90px)}
.servicio--invertido .fila{grid-template-columns:1fr 1.15fr}
.servicio--invertido .foto{order:2}
.servicio .texto p{margin-bottom:30px;color:var(--gris-oscuro)}
.servicio .btn{align-self:flex-start}
@media(max-width:860px){
  .servicio .fila,.servicio--invertido .fila{grid-template-columns:1fr}
  .servicio--invertido .foto{order:0}
  .servicio .foto{aspect-ratio:4/3}
}

/* ---------- últimos proyectos ---------- */
.grilla-destacados{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:50px}
.destacado .foto{aspect-ratio:16/10;overflow:hidden;margin-bottom:18px}
.destacado img{transition:transform .7s ease}
.destacado:hover img{transform:scale(1.05)}
.destacado h3{font-weight:400;font-size:20px;margin-bottom:6px}
.destacado a{color:var(--terracota);text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:700px){.grilla-destacados{grid-template-columns:1fr}}

/* ---------- testimonios ---------- */
.testimonios{background:var(--negro);color:var(--blanco);text-align:center}
.testimonios blockquote{max-width:760px;margin:40px auto 20px;font-size:clamp(20px,2.6vw,28px);font-weight:300;line-height:1.5}
.testimonios cite{font-style:normal;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--terracota)}

/* ---------- cierre: CTA sobre foto a pantalla completa ---------- */
.cierre{position:relative;padding:180px 0;color:var(--blanco);text-align:center;overflow:hidden}
.cierre > img{position:absolute;inset:0;z-index:0}
.cierre::after{content:'';position:absolute;inset:0;z-index:1;background:rgba(36,36,36,.72)}
.cierre .contenedor{position:relative;z-index:2}
.cierre .titulo-seccion{max-width:24ch;margin-left:auto;margin-right:auto}

/* ---------- footer ---------- */
footer{background:var(--negro);color:rgba(255,255,255,.7);padding:70px 0 30px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:50px}
footer h4{color:var(--blanco);font-weight:400;letter-spacing:.15em;text-transform:uppercase;font-size:13px;margin-bottom:18px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{color:rgba(255,255,255,.7);text-decoration:none}
footer a:hover{color:var(--terracota)}
.footer-legal{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr}}