:root{
  --hueso:#F7F8F7; --celadon:#DCE7E1; --grafito:#454C52;
  --verde:#21514A; --acero:#9AA3A6; --laton:#A8874F;
  --ancho:1140px; --margen:80px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--hueso); color:var(--grafito);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--verde); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}

.env{max-width:var(--ancho); margin:0 auto; padding:0 var(--margen)}
section{padding:96px 0}
.hueso{background:var(--hueso)}
.celadon{background:var(--celadon)}
.grafito{background:var(--grafito); color:var(--celadon)}
.grafito a{color:var(--celadon)}

/* filete de acero: el elemento grafico recurrente del sistema */
.filete{border:0; border-top:1px solid var(--acero); opacity:.45; margin:0}
.filete-corto{width:56px; border-top:1px solid var(--laton); opacity:1;
  margin:0 0 28px; border-left:0; border-right:0; border-bottom:0}
.grafito .filete-corto{border-top-color:var(--laton)}

/* Playfair SOLO en mayusculas con tracking */
.antetitulo{
  font-family:"Playfair Display",Georgia,serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.28em; font-size:11.5px;
  color:var(--acero); margin:0 0 22px;
}
.grafito .antetitulo{color:var(--laton)}
h1,h2,.titular{
  font-family:"Playfair Display",Georgia,serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; line-height:1.22;
  margin:0 0 24px; color:var(--grafito);
  font-size:clamp(27px,3.4vw,42px);
}
.grafito h1,.grafito h2,.grafito .titular{color:var(--celadon)}
h3,.subtitulo{
  font-family:"Playfair Display",Georgia,serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.06em; font-size:20px;
  margin:0 0 12px; color:var(--grafito); line-height:1.3;
}
.grafito h3{color:var(--celadon)}
p{margin:0 0 18px; max-width:68ch}
.plomo{color:var(--acero)}

/* un solo CTA por pantalla, siempre en verde profundo */
.cta{
  display:inline-block; background:var(--verde); color:var(--hueso);
  font-family:Inter,sans-serif; font-weight:500; font-size:14.5px;
  padding:15px 30px; letter-spacing:.01em; border:1px solid var(--verde);
}
.cta:hover{background:transparent; color:var(--verde); text-decoration:none}
.grafito .cta{background:var(--celadon); color:var(--grafito); border-color:var(--celadon)}
.grafito .cta:hover{background:transparent; color:var(--celadon)}
.cta-linea{
  display:inline-block; font-size:14.5px; font-weight:500; color:var(--verde);
  border-bottom:1px solid var(--verde); padding-bottom:3px;
}
.cta-linea:hover{text-decoration:none; border-bottom-width:2px}

/* barra superior */
.barra{
  position:sticky; top:0; z-index:40; background:var(--hueso);
  border-bottom:1px solid rgba(154,163,166,.35);
}
.barra .env{display:flex; align-items:center; gap:28px;
  min-height:74px; justify-content:space-between}
.marca{display:flex; align-items:center; gap:14px}
.marca:hover{text-decoration:none}
/* el SVG del monograma YA trae su marco rectangular: no se le pone otro */
.mono{width:29px; height:46px; flex:0 0 auto; color:var(--grafito)}
.mono svg{width:100%; height:100%; display:block}
.marca-txt{
  font-family:"Playfair Display",Georgia,serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; font-size:12px;
  color:var(--grafito); line-height:1.5;
}
.marca-txt span{display:block; color:var(--acero); letter-spacing:.2em; font-size:10px}
.nav{display:flex; gap:26px; align-items:center}
.nav a{
  font-size:13.5px; color:var(--grafito); font-weight:400; letter-spacing:.01em;
}
.nav a:hover{color:var(--verde)}

/* hero: arquitectura o señaletica, sin personas en el primer impacto */
.hero{padding:0}
.hero-grid{display:grid; grid-template-columns:1fr 1.06fr; min-height:520px}
.hero-txt{display:flex; flex-direction:column; justify-content:center;
  padding:72px var(--margen) 72px 0}
.hero-txt h1{font-size:clamp(29px,3.3vw,41px)}
.hero-img{position:relative; background:var(--celadon)}
.hero-img img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  /* encuadre en el borde izquierdo de la placa: asi el recorte muestra el
     canto del vidrio y se lee deliberado, en vez de cortar una palabra */
  object-position:26% center}
.hero-dato{
  display:flex; gap:44px; margin-top:36px; padding-top:26px;
  border-top:1px solid var(--acero);
}
.hero-dato div{font-size:13.5px; line-height:1.5}
.hero-dato b{
  display:block; font-family:"Playfair Display",Georgia,serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; font-size:15px;
}

/* rejilla generica: maximo 3 elementos por pantalla */
.tres{display:grid; grid-template-columns:repeat(3,1fr); gap:52px}
.dos{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.cab{max-width:640px; margin-bottom:56px}
.cab p{margin-bottom:0}

/* tramites: SIN fotografia. celadon plano y tipografia */
.lista-tramites{border-top:1px solid rgba(69,76,82,.22)}
.fila{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid rgba(69,76,82,.22);
}
.fila:hover{text-decoration:none}
.fila-n{font-family:"Playfair Display",Georgia,serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; font-size:17px; color:var(--grafito)}
.fila:hover .fila-n{color:var(--verde)}
.fila-d{display:block; font-size:14px; color:var(--grafito); opacity:.78;
  margin-top:5px; max-width:58ch}
.fila-n{display:block}
.fila-p{
  font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:16px;
  letter-spacing:.04em; white-space:nowrap; color:var(--grafito);
}
.fila-t{font-size:12.5px; color:var(--grafito); opacity:.62; white-space:nowrap}

/* pasos numerados */
.paso-n{
  font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:13px;
  letter-spacing:.2em; color:var(--laton); display:block; margin-bottom:14px;
}

/* ficha del tramite */
.ficha{background:var(--celadon); padding:38px 40px}
.ficha dl{margin:0}
.ficha dt{
  font-family:"Playfair Display",Georgia,serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em; font-size:10.5px;
  color:var(--grafito); opacity:.72; margin-bottom:6px;
}
.ficha dd{
  margin:0 0 26px; font-family:"Playfair Display",Georgia,serif;
  font-weight:600; font-size:23px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--grafito);
}
.ficha dd.chico{font-size:15px; text-transform:none; letter-spacing:0;
  font-family:Inter,sans-serif; font-weight:400; line-height:1.6}
.ficha dd:last-child{margin-bottom:0}

ul.marcas{list-style:none; padding:0; margin:0 0 18px}
ul.marcas li{
  padding:12px 0 12px 26px; position:relative;
  border-bottom:1px solid rgba(154,163,166,.4); font-size:15.5px;
}
ul.marcas li:before{
  content:""; position:absolute; left:0; top:21px;
  width:9px; height:1px; background:var(--laton);
}
ol.pasos{counter-reset:p; list-style:none; padding:0; margin:0}
ol.pasos li{counter-increment:p; padding:0 0 26px 46px; position:relative; font-size:15.5px}
ol.pasos li:before{
  content:counter(p,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:13px;
  letter-spacing:.14em; color:var(--laton);
}

/* preguntas */
details{border-bottom:1px solid rgba(69,76,82,.22); padding:20px 0}
details summary{
  cursor:pointer; list-style:none; font-size:16px; font-weight:500;
  display:flex; justify-content:space-between; gap:24px; color:var(--grafito);
}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"+"; color:var(--laton); font-size:19px; line-height:1}
details[open] summary:after{content:"–"}
details p{margin:16px 0 0; font-size:15.5px; opacity:.86}

/* pie */
.pie{background:var(--grafito); color:var(--celadon); padding:80px 0 44px}
.pie a{color:var(--celadon)}
.pie-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:56px; margin-bottom:56px}
.pie h4{
  font-family:"Playfair Display",Georgia,serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em; font-size:10.5px;
  color:var(--laton); margin:0 0 18px;
}
.pie p,.pie li{font-size:14px; opacity:.88; line-height:1.7}
.pie ul{list-style:none; padding:0; margin:0}
.pie li{margin-bottom:9px}
.firma{display:flex; align-items:center; gap:16px; margin-bottom:22px}
.firma .mono{color:var(--celadon)}
.firma-txt{
  font-family:"Playfair Display",Georgia,serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; font-size:12px; line-height:1.6;
}
.pie-legal{
  border-top:1px solid rgba(220,231,225,.24); padding-top:26px;
  font-size:12.5px; opacity:.7; display:flex; justify-content:space-between; gap:24px;
}

/* miga */
.miga{font-size:12.5px; color:var(--acero); padding:26px 0 0}
.miga a{color:var(--acero)}

@media(max-width:900px){
  :root{--margen:24px}
  section{padding:64px 0}
  .hero-grid{grid-template-columns:1fr}
  .hero-txt{padding:56px 0 44px; order:2}
  .hero-img{order:1; min-height:280px; position:relative}
  .tres,.dos,.pie-grid{grid-template-columns:1fr; gap:40px}
  .nav{display:none}
  .hero-dato{gap:28px; flex-wrap:wrap}
  .fila{grid-template-columns:1fr}
  .pie-legal{flex-direction:column; gap:10px}
}