/* ==========================================================
   estilo.css — hoja única del sitio corporativo
   1. Tokens · 2. Base · 3. Navegación · 4. Tapa · 5. Bloques
   6. Historia · 7. Servicios · 8. Equipo · 9. Trabajos
   10. Contacto · 11. Cierre y pie · 12. Utilidades
   ========================================================== */

/* ---------- 1. TOKENS: cambiar solo acá para re-tematizar ---------- */
:root{
  --tinta:#14232B;
  --tinta-2:#4A5C64;
  --papel:#F4F2ED;
  --papel-2:#E9E5DC;
  --marca:#1F6F63;
  --senal:#E0A426;
  --linea:rgba(20,35,43,.16);
  --linea-clara:rgba(244,242,237,.2);
  --wa:#25D366;

  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --texto:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --t-xl:clamp(2.3rem,6vw,4rem);
  --t-l:clamp(1.7rem,3.6vw,2.4rem);
  --t-m:clamp(1.05rem,1.8vw,1.25rem);
  --t-xs:.78rem;

  --gap:clamp(1rem,2.4vw,1.7rem);
  --seccion:clamp(3.5rem,8vw,6rem);
  --ancho:1180px;
  --radio:4px;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display); font-weight:800; line-height:1.06; letter-spacing:-.02em; margin:0}
p{margin:0 0 1em}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--senal); outline-offset:3px}

.envoltorio{width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto}
.seccion{padding-block:var(--seccion)}
.raya{border-top:1px solid var(--linea)}

.saltar{position:absolute; left:-9999px; background:var(--tinta); color:var(--papel); padding:.7rem 1rem; z-index:100}
.saltar:focus{left:1rem; top:1rem}

.rotulo{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--marca); margin:0 0 .9rem; display:flex; align-items:center; gap:.6rem}
.rotulo::after{content:""; flex:1; height:1px; background:var(--linea)}

.titulo{font-size:var(--t-l); max-width:22ch; margin-bottom:1rem}
.bajada{color:var(--tinta-2); max-width:58ch; margin-bottom:2.6rem}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:1rem; padding:.85rem 1.5rem; border-radius:var(--radio);
  border:1.5px solid var(--tinta); text-decoration:none; cursor:pointer;
  transition:transform .15s, background .15s, color .15s, border-color .15s}
.btn:hover{transform:translateY(-2px)}
.btn-lleno{background:var(--tinta); color:var(--papel)}
.btn-lleno:hover{background:var(--marca); border-color:var(--marca)}
.btn-vacio{background:transparent; color:var(--tinta)}
.btn-vacio:hover{background:var(--tinta); color:var(--papel)}
.btn-vacio-claro{background:transparent; color:var(--papel); border-color:var(--papel)}
.btn-vacio-claro:hover{background:var(--papel); color:var(--tinta)}

/* ---------- 3. NAVEGACIÓN ---------- */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--papel) 93%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea)}
.nav-int{display:flex; align-items:center; gap:var(--gap); min-height:72px}
.logo{font-family:var(--display); font-weight:800; font-size:1.15rem; text-decoration:none; letter-spacing:-.02em}
.logo span{color:var(--marca)}
.menu{margin-left:auto}
.menu ul{display:flex; gap:1.5rem; list-style:none; padding:0; margin:0}
.menu a{text-decoration:none; font-size:.95rem; font-weight:500; padding-block:.3rem; border-bottom:2px solid transparent}
.menu a:hover{border-color:var(--senal)}
.menu a.activo{border-color:var(--marca)}
.nav-cta{padding:.6rem 1.1rem}

.hamburguesa{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.5rem}
.hamburguesa span{width:24px; height:2px; background:var(--tinta); display:block}

@media (max-width:960px){
  .hamburguesa{display:flex; margin-left:auto}
  .nav-cta{display:none}
  .menu{position:absolute; top:72px; left:0; right:0; margin:0;
    background:var(--papel); border-bottom:1px solid var(--linea); display:none}
  .menu.abierto{display:block}
  .menu ul{flex-direction:column; gap:0; padding:.5rem 1.2rem 1.2rem}
  .menu li{border-top:1px solid var(--linea)}
  .menu a{display:block; padding:.9rem 0; border-bottom:0}
}

/* ---------- 4. TAPA DE PÁGINA ---------- */
.tapa{padding-block:clamp(3rem,6vw,4.5rem) clamp(2rem,4vw,3rem); border-bottom:1px solid var(--linea)}
.tapa h1{font-size:var(--t-xl); max-width:18ch; margin-bottom:.7rem}
.tapa h1 em{font-style:normal; color:var(--marca)}
.tapa-texto{font-size:var(--t-m); color:var(--tinta-2); max-width:56ch; margin:0}

/* Portada del inicio, con marco tipo cartel */
.portada{padding-block:clamp(3rem,6vw,5rem)}
.portada-marco{border:1.5px solid var(--tinta); border-radius:var(--radio);
  padding:clamp(1.6rem,5vw,3.4rem); background:var(--papel-2); position:relative}
.portada-marco::before{content:""; position:absolute; inset:7px; border:1px solid var(--linea); border-radius:2px; pointer-events:none}
.portada h1{font-size:var(--t-xl); max-width:16ch; margin-bottom:.6rem}
.portada h1 em{font-style:normal; color:var(--marca)}
.portada-bajada{font-size:var(--t-m); color:var(--tinta-2); max-width:50ch; margin-bottom:1.8rem}
.portada-acciones{display:flex; flex-wrap:wrap; gap:.8rem}
.sello{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--marca); margin-bottom:1.2rem}

/* ---------- 5. BLOQUES GENERALES ---------- */
.grilla{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.dos{display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1.1fr 1fr; align-items:start}
@media (max-width:860px){ .dos{grid-template-columns:1fr} }

.tarjeta{border:1px solid var(--linea); border-radius:var(--radio); padding:1.7rem; background:var(--papel);
  transition:border-color .2s, transform .2s}
.tarjeta:hover{border-color:var(--marca); transform:translateY(-3px)}
.tarjeta h3{font-size:1.2rem; margin-bottom:.5rem}
.tarjeta p{color:var(--tinta-2); font-size:.96rem; margin:0 0 1rem}
.tarjeta .numero{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em; color:var(--marca); display:block; margin-bottom:.9rem}
.tarjeta .enlace{font-size:.92rem; font-weight:600; text-decoration:none; border-bottom:2px solid var(--senal)}

/* Cifras */
.cifras{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); padding-block:2.4rem}
.cifra b{font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,5vw,3rem); display:block; line-height:1; color:var(--marca)}
.cifra span{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2)}

/* Marcador de imagen: borrar cuando entren las fotos reales */
.ph{aspect-ratio:4/3; width:100%; border:1px dashed var(--linea); border-radius:var(--radio);
  background:var(--papel-2); display:grid; place-content:center; text-align:center;
  font-family:var(--mono); font-size:var(--t-xs); color:var(--tinta-2); padding:1rem}
.ph-retrato{aspect-ratio:3/4}

/* ---------- 6. HISTORIA ---------- */
.historia{list-style:none; padding:0; margin:0; position:relative}
.historia::before{content:""; position:absolute; left:8px; top:8px; bottom:8px; width:1px; background:var(--linea)}
.hito{position:relative; padding:0 0 2.2rem 2.6rem}
.hito::before{content:""; position:absolute; left:3px; top:9px; width:11px; height:11px; border-radius:50%;
  background:var(--papel); border:2px solid var(--marca)}
.hito:last-child{padding-bottom:0}
.hito:last-child::before{background:var(--marca)}
.hito b{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em; color:var(--marca); display:block; margin-bottom:.3rem}
.hito h3{font-size:1.2rem; margin-bottom:.35rem}
.hito p{color:var(--tinta-2); font-size:.96rem; margin:0}

/* ---------- 7. SERVICIOS ---------- */
.servicio{padding-block:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--linea)}
.servicio:first-of-type{border-top:0}
.servicio .dos{align-items:center}
.servicio:nth-child(even) .servicio-media{order:-1}
@media (max-width:860px){ .servicio:nth-child(even) .servicio-media{order:0} }
.servicio h2{font-size:var(--t-l); margin-bottom:.8rem}
.servicio p{color:var(--tinta-2)}
.incluye{list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.6rem; font-size:.96rem}
.incluye li{display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start}
.incluye li::before{content:"✓"; color:var(--marca); font-weight:700}

/* Índice de servicios */
.indice{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem}
.indice a{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--linea); border-radius:999px; padding:.45rem .9rem}
.indice a:hover{border-color:var(--marca); color:var(--marca)}

/* ---------- 8. EQUIPO ---------- */
.area{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-2); margin:2.6rem 0 1.2rem; padding-top:1.2rem; border-top:1px solid var(--linea)}
.area:first-of-type{margin-top:0; padding-top:0; border-top:0}
.personas{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.persona img,.persona .ph{border-radius:var(--radio); margin-bottom:.9rem; aspect-ratio:3/4; object-fit:cover; width:100%}
.persona h3{font-size:1.05rem; margin-bottom:.15rem}
.persona .cargo{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--marca); margin:0 0 .5rem}
.persona p{font-size:.92rem; color:var(--tinta-2); margin:0}
.persona a{font-size:.88rem; text-decoration:none; border-bottom:1px solid var(--linea)}
.persona a:hover{border-color:var(--marca); color:var(--marca)}

/* ---------- 9. TRABAJOS ---------- */
.trabajo{display:grid; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:1fr 1.2fr; align-items:center;
  padding-block:clamp(2rem,4vw,3rem); border-top:1px solid var(--linea)}
.trabajo:first-of-type{border-top:0; padding-top:0}
@media (max-width:860px){ .trabajo{grid-template-columns:1fr} }
.trabajo-meta{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--marca); margin-bottom:.5rem}
.trabajo h3{font-size:var(--t-l); margin-bottom:.6rem}
.trabajo p{color:var(--tinta-2); margin:0}

.logos{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); background:var(--linea); border:1px solid var(--linea)}
.logos div{background:var(--papel); display:grid; place-content:center; padding:2rem 1rem; text-align:center;
  font-family:var(--mono); font-size:.85rem; color:var(--tinta-2)}

/* ---------- 10. CONTACTO ---------- */
.form{display:grid; gap:1rem}
.campo{display:grid; gap:.4rem}
.campo label{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2)}
.campo input,.campo textarea,.campo select{font-family:var(--texto); font-size:1rem; color:var(--tinta);
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); padding:.8rem .9rem}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--marca); outline:none}
.campo textarea{min-height:140px; resize:vertical}
.tarro{position:absolute; left:-9999px}
.aviso{font-size:.95rem; min-height:1.4em; margin:0}
.aviso[data-tipo="ok"]{color:var(--marca); font-weight:600}
.aviso[data-tipo="error"]{color:#B4402F; font-weight:600}

.datos{list-style:none; padding:0; margin:0; display:grid; gap:1.3rem}
.datos li{display:grid; gap:.2rem}
.datos span{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2)}
.datos a{text-decoration:none; border-bottom:1px solid var(--linea)}
.datos a:hover{border-color:var(--marca); color:var(--marca)}
.mapa{margin-top:2rem; border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden}
.mapa iframe{display:block; width:100%; height:300px; border:0; filter:grayscale(1) contrast(.9)}

/* ---------- 11. CIERRE Y PIE ---------- */
.cierre{background:var(--tinta); color:var(--papel); text-align:center; padding-block:clamp(3rem,6vw,4.5rem)}
.cierre h2{font-size:var(--t-l); max-width:20ch; margin-inline:auto; margin-bottom:.7rem}
.cierre p{color:rgba(244,242,237,.72); max-width:48ch; margin-inline:auto; margin-bottom:1.8rem}
.cierre .btn-lleno{background:var(--papel); color:var(--tinta); border-color:var(--papel)}
.cierre .btn-lleno:hover{background:var(--senal); border-color:var(--senal); color:var(--tinta)}
.cierre-acciones{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}

.pie{background:var(--tinta); color:rgba(244,242,237,.7); padding-block:3rem 1.5rem; font-size:.93rem;
  border-top:1px solid var(--linea-clara)}
.pie-grilla{display:grid; gap:2rem; grid-template-columns:1.4fr 1fr 1.2fr 1fr}
@media (max-width:860px){ .pie-grilla{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .pie-grilla{grid-template-columns:1fr} }
.pie-logo{font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--papel); margin-bottom:.4rem}
.pie-lema{max-width:32ch; margin:0}
.pie-titulo{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--senal); margin-bottom:.8rem}
.pie-lista{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.pie-lista a{color:rgba(244,242,237,.85); text-decoration:none}
.pie-lista a:hover{color:var(--senal)}
.pie-legal{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--linea-clara); font-size:.85rem}
.pie-legal p{margin:0}
.pie-legal a{color:rgba(244,242,237,.85); text-decoration:none}
.pie-legal a:hover{color:var(--senal)}

.flotante{position:fixed; right:1.1rem; bottom:1.1rem; z-index:60; display:inline-flex; align-items:center; gap:.6rem;
  background:var(--wa); color:#fff; text-decoration:none; font-weight:600; padding:.85rem 1.2rem;
  border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.22); transition:transform .15s}
.flotante:hover{transform:scale(1.04)}
.flotante svg{width:22px; height:22px; fill:currentColor; flex:none}
@media (max-width:520px){ .flotante span{display:none} .flotante{padding:.95rem; border-radius:50%} }

/* ---------- 12. UTILIDADES ---------- */
.aparece{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.aparece.visible{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aparece{opacity:1; transform:none; transition:none}
  .btn:hover,.tarjeta:hover,.flotante:hover{transform:none}
}