/* RTRO - hoja compartida por la home y las paginas de servicio.
   Se extrajo del bloque <style> de landing.html: es la misma, sin cambios. */
@font-face{
  font-family:'Alte Haas Grotesk';
  src:url('fonts/AlteHaasGrotesk.woff2') format('woff2'),url('fonts/AlteHaasGrotesk.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Alte Haas Grotesk';
  src:url('fonts/AlteHaasGrotesk_Bold.woff2') format('woff2'),url('fonts/AlteHaasGrotesk_Bold.woff') format('woff');
  font-weight:700;font-style:normal;font-display:swap;
}
:root{
  --negro:#212121;
  --negro2:#2D2921;
  --crema:#eae4d4;
  --crema2:#d8d0bc;
  --taupe:#8f826b;
  --taupe-bg:#a99d86;
  --verde:#534A36;
  --linea:rgba(234,228,212,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--negro)}
body{
  background:var(--negro);
  color:var(--crema);
  font-family:'Alte Haas Grotesk',Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 6vw}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 6vw;
  background:linear-gradient(to bottom,rgba(33,33,33,.92),rgba(33,33,33,0));
  transition:background .3s;
}
nav.solid{background:rgba(33,33,33,.96);border-bottom:1px solid var(--linea)}
.logo{position:relative;z-index:2}
.logo img{height:62px;width:auto;display:block}
nav ul{display:flex;gap:6px;list-style:none;align-items:center}
/* boton de menu: solo aparece en movil */
.menu-btn{
  display:none;position:relative;z-index:2;
  width:44px;height:44px;padding:0;margin:0;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;
}
.menu-btn span{
  display:block;width:26px;height:1.5px;background:var(--crema);
  transition:transform .35s ease,opacity .25s ease,width .35s ease;
}
.menu-btn span:nth-child(2){width:20px}
nav.abierto .menu-btn span:nth-child(1){transform:translateY(7.5px) rotate(45deg);width:26px}
nav.abierto .menu-btn span:nth-child(2){opacity:0}
nav.abierto .menu-btn span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);width:26px}
/* todos los enlaces reservan el mismo espacio y un borde transparente:
   asi el recuadro puede moverse de uno a otro sin recorrer la navegacion */
nav ul a{
  display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  opacity:.7;padding:10px 15px;border:1px solid transparent;
  transition:opacity .25s,border-color .35s;
}
/* recuadro de la seccion en la que vas */
nav ul a.navact{opacity:1;border-color:var(--crema)}
/* Inicio solo tiene sentido dentro del menu desplegable */
nav ul li.solo-movil{display:none}
/* al pasar el cursor se pinta en beige, como el boton del hero */
nav ul a:hover{
  opacity:1;background:var(--crema);border-color:var(--crema);color:var(--negro);
}

/* ---------- EL PROBLEMA ---------- */
/* Los tres huecos: la linea superior se corta entre bloque y bloque,
   de modo que la separacion misma dibuja el hueco del que habla el titulo. */
.prob-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:70px}
.prob{
  position:relative;border-top:1px solid var(--linea);padding:26px 0 0;
  transition:transform .45s ease;
}
.prob::before{                      /* al pasar el cursor, la linea se completa */
  content:'';position:absolute;top:-1px;left:0;width:0;height:1px;
  background:var(--crema);transition:width .55s ease;
}
.prob:hover{transform:translateY(-5px)}
.prob:hover::before{width:100%}
.prob-num{
  display:block;font-size:clamp(30px,3.4vw,44px);line-height:1;
  color:var(--taupe);letter-spacing:.04em;transition:color .45s ease;
}
.prob:hover .prob-num{color:var(--taupe-bg)}
.prob h4{
  font-weight:400;font-size:clamp(14px,1.2vw,17px);letter-spacing:.09em;
  text-transform:uppercase;color:var(--crema);margin:18px 0 0;line-height:1.35;
}
/* en tres columnas los rotulos van en un solo renglon, para que los tres midan igual */
@media(min-width:901px){.prob h4{white-space:nowrap}}
.prob-cierre{
  margin-top:80px;text-align:center;font-size:clamp(19px,2.6vw,26px);
  line-height:1.6;color:var(--crema);max-width:820px;margin-left:auto;margin-right:auto;
}
.prob-cierre em{font-style:normal;color:var(--taupe)}
@media(max-width:900px){
  .prob-grid{grid-template-columns:1fr;gap:30px}
  .prob{padding-top:20px}
  .prob h4{margin-top:12px}
}

/* ---------- CINTA DE VALORES ---------- */
.ticker{
  overflow:hidden;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:20px 0;background:var(--negro);
}
.ticker-track{
  display:flex;gap:0;width:max-content;animation:marquee 55s linear infinite;
}
.ticker-track span{
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--taupe);white-space:nowrap;padding:0 28px;
}
.ticker-track span::after{content:'●';color:var(--crema2);opacity:.4;margin-left:56px;font-size:8px;vertical-align:middle}
.burger{display:none}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;position:relative;display:flex;
  align-items:center;justify-content:center;text-align:center;overflow:hidden;
}
.hero-slide{
  position:absolute;inset:0;background-position:center;background-size:cover;
  opacity:0;transition:opacity 2.4s ease;filter:brightness(.5) saturate(.95);
}
.hero-slide.on{opacity:1}
.hero-inner{position:relative;z-index:1;padding:0 6vw}
.hero .marca img{
  width:clamp(260px,46vw,620px);height:auto;margin:0 auto;display:block;
}
.hero-inner{max-width:1020px;margin:0 auto}
.hero .hero-claim{
  margin:34px auto 0;max-width:22em;
  font-size:clamp(21px,3vw,38px);line-height:1.25;letter-spacing:.01em;color:var(--crema);
}
.hero .hero-desc{
  margin:22px auto 0;max-width:44em;
  font-size:clamp(14px,1.5vw,17px);line-height:1.7;color:var(--crema2);
}
.hero .hero-serv{
  margin-top:32px;font-size:clamp(9.5px,1.1vw,14px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--crema);
  display:flex;justify-content:center;align-items:center;
  gap:clamp(8px,1.4vw,20px);flex-wrap:nowrap;white-space:nowrap;
}
.hero .hero-serv a{
  color:var(--crema);padding-bottom:4px;
  border-bottom:1px solid transparent;transition:border-color .3s,color .3s;
}
.hero .hero-serv a:hover{border-bottom-color:var(--crema)}
.hero .hero-serv span{color:var(--taupe)}
.hero .hero-cifras{
  margin:14px auto 0;max-width:52em;
  font-size:clamp(10.5px,1.05vw,12.5px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--taupe);line-height:1.9;
}
.hero .cta{
  display:inline-block;margin-top:42px;padding:16px 42px;
  border:1px solid var(--crema);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  transition:all .3s;
}
.hero .cta:hover{background:var(--crema);color:var(--negro)}
.scrolldown{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  width:1px;height:56px;background:var(--linea);overflow:hidden;
}
.scrolldown::after{
  content:'';position:absolute;top:-50%;left:0;width:100%;height:50%;
  background:var(--crema);animation:drop 2s ease-in-out infinite;
}
@keyframes drop{to{top:110%}}

/* ---------- SECTION BASE ---------- */
section{padding:110px 0}
.kicker{
  font-size:15px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:24px;
}
h2{
  font-size:clamp(30px,4.4vw,52px);font-weight:400;
  letter-spacing:.06em;line-height:1.18;text-transform:uppercase;
}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.on{opacity:1;transform:none}

/* ---------- QUIENES SOMOS ---------- */
.about-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:76px;align-items:stretch}
.about-copy{display:flex;flex-direction:column;justify-content:center}
.about-copy h2{max-width:15em}
/* parrafo de entrada */
.about-grid .destacado{
  margin-top:30px;padding-top:28px;border-top:1px solid var(--linea);
  color:var(--crema);font-size:clamp(19px,2vw,22px);line-height:1.5;
}
/* cuerpo */
.about-parrafos{margin-top:26px;display:grid;gap:18px}
.about-parrafos p{color:var(--crema2);font-size:16.5px;line-height:1.7}
/* cierre destacado */
.about-cierre{
  margin-top:36px;border-left:2px solid var(--crema);padding-left:26px;
  color:var(--crema);font-size:clamp(17px,1.85vw,21px);line-height:1.55;
}
/* foto con esquinas de marco */
.about-foto{position:relative}
.about-foto img{border:1px solid var(--linea);width:100%;height:100%;object-fit:cover;min-height:520px}
.about-foto::before,.about-foto::after{
  content:'';position:absolute;width:78px;height:78px;pointer-events:none;
}
.about-foto::before{top:-14px;right:-14px;border-top:1px solid var(--taupe);border-right:1px solid var(--taupe)}
.about-foto::after{bottom:-14px;left:-14px;border-bottom:1px solid var(--taupe);border-left:1px solid var(--taupe)}
/* cifras */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--linea);margin-top:96px;
}
.stat{padding:40px 30px 0;border-left:1px solid var(--linea)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-size:clamp(36px,4.4vw,56px);font-weight:400;color:var(--crema);letter-spacing:.02em;line-height:1}
.stat span{display:block;margin-top:14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);line-height:1.6}

/* ---------- BARRA DE CREDIBILIDAD ---------- */
/* el padding inferior lo daba la cinta de valores que iba aqui; al quitarla
   la linea de sectores quedaba pegada a la franja siguiente */
#credibilidad{padding:96px 0 118px}
#credibilidad .stats{margin-top:0}
.cred-meta{
  margin-top:56px;padding-top:34px;border-top:1px solid var(--linea);
}
.cred-sectores{
  font-size:clamp(16px,1.7vw,21px)!important;color:var(--crema)!important;
  line-height:1.9;letter-spacing:.08em;
}
.cred-lbl{
  display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:12px;
}
.cred-meta p{font-size:15px;color:var(--crema2);line-height:1.8;letter-spacing:.03em}
.cred-logos{margin-top:80px;background:var(--taupe-bg);padding:52px 0}
@media(max-width:820px){
  #credibilidad{padding:76px 0 68px}
  .cred-meta{grid-template-columns:1fr;gap:30px}
  .cred-logos{margin-top:56px;padding:40px 0}
}

/* ---------- ELECCION DE SERVICIO ---------- */
#eleccion{background:var(--negro2)}
.el-intro{
  margin-top:28px;font-size:clamp(16px,1.75vw,20px);color:var(--crema2);
  line-height:1.6;max-width:44em;
}
.el-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:52px}
.el-card{
  display:flex;flex-direction:column;
  border:1px solid rgba(169,157,134,.85);
  background:rgba(169,157,134,.45);
  padding:38px 32px 32px;
  transition:border-color .35s,background .35s,transform .35s,box-shadow .35s;
}
.el-card:hover{
  border-color:var(--crema);
  background:rgba(169,157,134,.64);
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}
.el-card .flecha{
  font-size:22px;color:var(--taupe-bg);line-height:1;margin-bottom:20px;
  transition:transform .35s,color .35s;
}
.el-card:hover .flecha{transform:translateX(10px);color:#fff}
.el-card h4{
  font-weight:400;font-size:clamp(17px,1.7vw,21px);letter-spacing:.02em;
  line-height:1.35;color:var(--crema);margin-bottom:16px;
}
.el-card p{font-size:14px;color:var(--crema2);line-height:1.6;margin-bottom:26px}
.el-card .necesitas{
  margin-top:auto;padding-top:22px;border-top:1px solid rgba(234,228,212,.28);
  transition:color .35s;
}
/* numero chico arriba y nombre del servicio debajo */
/* numero y nombre del servicio: beige mas tenue que el texto de arriba */
.el-card .necesitas i{
  display:block;font-style:normal;font-size:11px;letter-spacing:.26em;
  color:#c6bba3;margin-bottom:8px;transition:color .35s;
}
.el-card .necesitas b{display:block;font-weight:400;font-size:16px;
  letter-spacing:.16em;text-transform:uppercase;color:#c6bba3;
  line-height:1.45;min-height:2.9em;
  transition:color .35s,text-shadow .35s}
.el-card:hover .necesitas i{color:var(--crema)}
.el-card:hover .necesitas b{color:var(--crema);text-shadow:0 0 22px rgba(234,228,212,.28)}
.el-card:hover .necesitas{color:var(--crema2)}
.el-pie{
  margin-top:50px;display:flex;align-items:center;justify-content:center;
  gap:28px;flex-wrap:wrap;text-align:center;
}
.el-pie p{font-size:15px;color:var(--crema2);max-width:520px}
.el-pie a{
  display:inline-block;padding:15px 38px;border:1px solid var(--crema);
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;transition:all .3s;
  white-space:nowrap;
}
.el-pie a:hover{background:var(--crema);color:var(--negro)}
@media(max-width:900px){
  .el-grid{grid-template-columns:1fr 1fr;gap:16px}
  .el-card{padding:30px 26px 26px}
  .el-pie{flex-direction:column;gap:22px;margin-top:38px}
}

/* ---------- SERVICIOS ---------- */
#servicios{background:var(--verde)}
.serv-lista{margin-top:70px;border-top:1px solid var(--linea)}
.serv{border-bottom:1px solid var(--linea)}
.serv-head{
  display:flex;align-items:baseline;gap:5vw;padding:36px 8px;cursor:pointer;
  transition:background .25s;
}
.serv-head:hover{background:rgba(234,228,212,.04)}
.serv-head .num{font-size:15px;color:var(--taupe);letter-spacing:.15em;min-width:44px}
.serv-head h3{font-size:clamp(20px,3vw,30px);font-weight:400;letter-spacing:.08em;text-transform:uppercase;flex:1}
.serv-head .mas{
  font-size:26px;color:var(--taupe);transition:transform .35s;line-height:1;
}
.serv.open .mas{transform:rotate(45deg)}
.serv-body{max-height:0;overflow:hidden;transition:max-height .5s ease}
.serv-body-in{padding:6px 8px 46px calc(44px + 5vw);overflow:hidden}
.serv-body p.intro{color:var(--crema2);max-width:720px;margin-bottom:34px}
.serv-pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.paso{
  background:var(--taupe-bg);
  padding:12px;
  min-height:330px;min-width:0;
  display:flex;flex-direction:column;
}
/* marco de linea interior */
.paso::before{
  content:'';position:absolute;inset:12px;
  border:1px solid rgba(255,255,255,.45);pointer-events:none;
}
.paso{position:relative}
.paso > *{position:relative;z-index:1}
.paso h4{
  order:1;
  font-weight:400;font-size:clamp(16px,1.5vw,20px);
  letter-spacing:.03em;line-height:1.2;text-transform:uppercase;
  color:#fff;margin:22px 22px 0;
}
.paso b{
  order:2;margin:auto 22px 6px;
  display:block;font-weight:400;color:#fff;
  font-size:26px;letter-spacing:.02em;line-height:1;
}
.paso p{
  order:3;margin:0 22px;
  font-size:13px;color:#3f3a2e;line-height:1.5;
}
/* logotipo RTRO al pie */
.paso::after{
  content:'';order:4;
  height:26px;margin:20px 22px 16px;
  background:url('images/rtro_lineas_blanco.png') center/auto 9px no-repeat;
  opacity:.85;
}

/* ---------- SECTORES (carrusel) ---------- */
.carrusel{position:relative;margin-top:60px}
.car-vista{overflow:hidden}
.car-track{display:flex;transition:transform .55s cubic-bezier(.22,.8,.3,1)}
.car-item{flex:0 0 25%;padding:0 9px;box-sizing:border-box}
.sect{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--linea)}
.sect img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.92);transition:transform .6s,filter .4s}
.sect:hover img{transform:scale(1.05);filter:brightness(.8)}
.sect span{
  position:absolute;left:0;right:0;bottom:22px;text-align:center;
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;
}
.car-flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--crema);background:rgba(24,24,21,.72);color:var(--crema);
  font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;user-select:none;
}
.car-flecha:hover{background:var(--crema);color:var(--negro)}
.car-flecha.prev{left:-16px}
.car-flecha.next{right:-16px}
.car-flecha[disabled]{opacity:.25;cursor:default;pointer-events:none}

/* ---------- COMO TRABAJAMOS ---------- */
.proceso{background:var(--negro2)}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:70px}
.proc{background:var(--negro2);padding:44px 30px}
.proc b{display:block;font-weight:400;font-size:13px;letter-spacing:.2em;color:var(--taupe);margin-bottom:16px}
.proc h4{font-weight:400;font-size:18px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.proc p{font-size:14.5px;color:var(--crema2);line-height:1.6}
.proc .cond{margin-top:18px;font-size:13px;color:var(--taupe);font-style:italic;border-top:1px solid var(--linea);padding-top:14px}
.paises-line{
  margin-top:70px;text-align:center;font-size:clamp(13px,1.8vw,17px);
  letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);
}
.paises-line em{font-style:normal;color:var(--crema2);padding:0 .8vw}

/* ---------- ALCANCE MODULAR ---------- */
#alcance{background:var(--negro)}
#alcance .wrap{max-width:1400px;padding:0 4vw}
.al-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:stretch;margin-top:44px}
.al-svg{width:100%;height:auto;overflow:visible;align-self:center}
.lv{cursor:pointer}
/* fill transparent = toda el area interior es sensible al cursor */
.lv circle{fill:transparent;stroke:rgba(234,228,212,.32);stroke-width:1.4;transition:stroke .35s,stroke-width .35s}
.lv .hit{fill:transparent;stroke:none}
.lv line{stroke:rgba(234,228,212,.28);stroke-width:1;transition:stroke .35s}
.lv .num{fill:rgba(234,228,212,.5);font-size:46px;font-family:'Alte Haas Grotesk',sans-serif;transition:fill .35s}
.lv .cap{fill:var(--taupe);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-family:'Alte Haas Grotesk',sans-serif;transition:fill .35s}
.lv .pt{fill:rgba(234,228,212,.5);transition:fill .35s}
.al-svg.act .lv{opacity:.28;transition:opacity .35s}
.al-svg.act .lv.on{opacity:1}
.lv.on circle{stroke:var(--crema);stroke-width:2}
.lv.on line{stroke:var(--crema)}
.lv.on .num{fill:#fff}
.lv.on .cap{fill:var(--crema)}
.lv.on .pt{fill:#fff}
/* panel de modulos: misma altura que el diagrama */
.al-panel{display:flex;flex-direction:column;justify-content:space-between}
.al-panel h3{
  font-weight:400;font-size:clamp(19px,2.2vw,26px);letter-spacing:.06em;
  text-transform:uppercase;color:var(--crema);margin-bottom:10px;
}
.al-panel .al-desc{font-size:14.5px;color:var(--crema2);line-height:1.55;min-height:4.7em}
.al-mods{
  list-style:none;margin:20px 0 0;border-top:1px solid var(--linea);
  display:grid;grid-template-columns:1fr;
}
.al-mods li{
  display:flex;align-items:baseline;gap:10px;padding:5.5px 2px;
  border-bottom:1px solid var(--linea);font-size:13px;color:var(--crema2);
  line-height:1.4;transition:opacity .3s,color .3s;
}
.al-mods li i{
  font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--taupe);
  min-width:14px;transition:color .3s;
}
/* encabezado de cada servicio dentro de la lista */
.al-mods li.al-grupo{
  grid-column:1 / -1;border-bottom:0;padding:13px 2px 5px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--crema);
}
.al-mods li.al-grupo:first-child{padding-top:6px}
.al-mods.act li{opacity:.3}
/* el encabezado del servicio se prende solo si alguno de sus entregables esta prendido */
.al-mods.act li.al-grupo.on{opacity:1;color:#fff}
.al-mods.act li.on{opacity:1;color:#fff}
.al-mods.act li.on i{color:var(--crema)}
.al-nota{
  margin-top:16px;font-size:12.5px;line-height:1.55;color:var(--taupe);font-style:italic;
}
.al-cta{
  display:inline-block;margin-top:24px;padding:14px 32px;border:1px solid var(--crema);
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;transition:all .3s;
}
.al-cta:hover{background:var(--crema);color:var(--negro)}
@media(max-width:1100px){
  .al-grid{grid-template-columns:1fr;gap:38px}
  .al-svg{max-width:620px;margin:0 auto}
  .al-panel .al-desc{min-height:0}
}

/* ---------- DIAGRAMA METODOLOGIA ---------- */
/* metodologia: bloque dentro de Procurement Management, mas ancho que el contenedor */
.svc-metodo{margin-top:76px;padding-top:58px;border-top:1px solid var(--linea)}
.svc-metodo .kicker{margin-bottom:18px}
.svc-metodo h2{font-size:clamp(24px,3.2vw,40px)}
.dg-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:48px;align-items:center;margin-top:0}
.dg-svg{max-width:660px;margin-left:auto;margin-right:auto}
.dg-info p.dgintro{margin-top:26px;font-size:15px;color:var(--crema2);line-height:1.65}
.dg-wrap{position:relative}
.dg-svg{width:100%;height:auto;display:block;overflow:visible}
/* texto dentro del circulo */
.dg-centro{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34%;text-align:center;pointer-events:none;
}
.dg-centro h3{
  font-weight:400;font-size:clamp(19px,2vw,28px);letter-spacing:.05em;
  line-height:1.2;color:#fff;margin-bottom:14px;
}
.dg-centro p{font-size:14px;color:var(--crema2);line-height:1.6}
.dg-centro .hint{
  color:var(--crema);font-size:clamp(13px,1.45vw,17px);
  letter-spacing:.2em;text-transform:uppercase;line-height:1.9;
}
.dg-base{fill:none;stroke:rgba(234,228,212,.22);stroke-width:1.2}
.dg-flow{
  fill:none;stroke:var(--crema);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:110 890;animation:dgflow 11s linear infinite;
}
@keyframes dgflow{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
.dg-dot{fill:var(--crema2);transition:r .3s,fill .3s}
.dg-lbl{
  fill:var(--crema2);font-family:'Alte Haas Grotesk',sans-serif;font-size:16px;
  letter-spacing:.04em;cursor:pointer;transition:fill .3s;dominant-baseline:middle;
}
.dg-hito{
  fill:var(--taupe);font-family:'Alte Haas Grotesk',sans-serif;font-size:10px;
  letter-spacing:.18em;dominant-baseline:middle;
}
.dg-lbl:hover,.dg-lbl.on{fill:#fff}
.dg-dot.on{fill:#fff;r:10}
.dg-lista{display:none}
@media(max-width:1100px){
  .dg-grid{grid-template-columns:1fr;gap:26px}
  .dg-svg{max-width:720px;margin:0 auto}
}
@media(max-width:820px){
  .dg-wrap{display:none}
  .dg-lista{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    background:var(--linea);border:1px solid var(--linea);
    margin-top:50px;list-style:none;
  }
  .dg-lista li{background:var(--negro);padding:22px 18px}
  .dg-lista b{display:block;font-weight:400;font-size:14px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--crema);margin-bottom:8px}
  .dg-lista span{font-size:13px;color:var(--crema2);line-height:1.55}
}
@media(max-width:560px){
  .dg-lista{grid-template-columns:1fr}
}

/* ---------- PROYECTOS (acordeon, un proyecto por servicio) ---------- */
#proyectos{padding-bottom:0}
/* de borde a borde: la franja no se limita al ancho de la columna de texto */
.pacordeon{display:flex;gap:6px;margin-top:60px;width:100%;height:min(78vh,680px)}
.ppanel{
  position:relative;flex:1;overflow:hidden;cursor:pointer;min-width:0;
  transition:flex .7s cubic-bezier(.22,.8,.3,1);
}
.ppanel.act{flex:3.1}
.ppanel img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.55) saturate(.85);transition:filter .7s ease,transform 1.2s ease;
}
.ppanel.act img{filter:brightness(.92) saturate(1);transform:scale(1.03)}
.ppanel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(33,33,33,.9) 8%,transparent 55%);
}
.ptxt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px}
.ptxt i{
  font-style:normal;display:block;font-size:11.5px;letter-spacing:.24em;
  color:var(--taupe-bg);margin-bottom:10px;
}
/* el titulo crece cuando el panel se abre, para que no se corte al estar cerrado */
.ptxt b{
  display:block;font-weight:400;font-size:clamp(12.5px,1vw,15px);letter-spacing:.08em;
  text-transform:uppercase;color:var(--crema);line-height:1.32;
  transition:font-size .5s ease,letter-spacing .5s ease;
}
.ppanel.act .ptxt b{font-size:clamp(16px,1.5vw,22px);letter-spacing:.1em}
.ptxt p{
  max-height:0;opacity:0;overflow:hidden;margin-top:0;
  font-size:13px;color:var(--crema2);letter-spacing:.05em;
  transition:max-height .6s ease,opacity .5s ease,margin-top .6s ease;
}
.ppanel.act .ptxt p{max-height:90px;opacity:1;margin-top:12px}

/* panel de cierre: el isotipo y el acceso al listado completo */
.pcierre{
  flex:1.25;min-width:0;background:var(--negro2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:30px;padding:30px 22px;text-align:center;
}
.pcierre img{width:min(46%,120px);height:auto;opacity:.9}
.pcierre p{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--crema2);line-height:2}
.pcierre a{
  display:inline-block;padding:15px 26px;border:1px solid var(--crema);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;transition:all .3s;
}
.pcierre a:hover{background:var(--crema);color:var(--negro)}

@media(max-width:900px){
  /* en columna, flex:1 anula la altura fijada y los paneles quedan disparejos:
     por eso aqui manda la altura y no el reparto de espacio */
  .pacordeon{flex-direction:column;height:auto;margin-top:40px;gap:8px}
  .ppanel{flex:0 0 auto;height:230px}
  .ppanel.act{flex:0 0 auto;height:340px}
  .ptxt{padding:20px 18px}
  .ptxt b,.ppanel.act .ptxt b{font-size:16px;letter-spacing:.1em}
  .pcierre{flex:0 0 auto;padding:56px 30px}
}
.mosaico .alto{grid-row:span 2}
.mosaico .ancho{grid-column:span 2}

/* ---------- CLIENTES ---------- */
#clientes{background:var(--taupe-bg)}
.marquee{overflow:hidden;position:relative}
#clientes{padding:70px 0}
.marquee::before,.marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(to right,var(--taupe-bg),transparent)}
.marquee::after{right:0;background:linear-gradient(to left,var(--taupe-bg),transparent)}
.marquee-track{
  display:flex;align-items:center;gap:90px;width:max-content;
  animation:marquee 80s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:60px;width:auto;opacity:.92}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECCIONES DE SERVICIO A DETALLE ---------- */
/* franja que anuncia el capitulo */
.svc-capitulo{
  background:var(--negro2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:30px 0;
}
.svc-capitulo .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.svc-cap-lbl{font-size:16px;letter-spacing:.3em;text-transform:uppercase;color:var(--crema)}
.svc-cap-num{font-size:14px;letter-spacing:.34em;color:var(--taupe)}

/* cada seccion de servicio */
.svc{position:relative}
.svc-bignum{
  position:absolute;top:52px;right:3vw;z-index:0;
  font-size:clamp(110px,17vw,290px);line-height:.78;letter-spacing:-.02em;
  color:rgba(234,228,212,.055);pointer-events:none;user-select:none;
}
.svc .wrap{position:relative;z-index:1}
.svc-num{
  display:block;font-size:15px;letter-spacing:.22em;color:var(--taupe);
  text-transform:uppercase;margin-bottom:18px;padding-bottom:18px;
  border-bottom:1px solid var(--linea);
}
.svc-num b{font-weight:400;color:var(--crema)}
.svc-head{max-width:940px}

/* barra de navegacion de servicios */
.svc-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:rgba(33,33,33,.94);border-top:1px solid var(--linea);
  transform:translateY(100%);transition:transform .4s ease;
}
.svc-bar.on{transform:translateY(0)}
.svc-bar-in{
  max-width:1200px;margin:0 auto;padding:0 4vw;
  display:flex;align-items:stretch;
}
.svc-bar a{
  flex:1;display:flex;align-items:center;gap:12px;
  padding:17px 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--crema2);opacity:.55;transition:opacity .3s,color .3s;
  border-left:1px solid var(--linea);
}
.svc-bar a:first-child{border-left:0}
.svc-bar a i{font-style:normal;font-size:11px;letter-spacing:.1em;color:var(--taupe)}
.svc-bar a:hover{opacity:1}
.svc-bar a.act{opacity:1;color:#fff}
.svc-bar a.act i{color:var(--crema)}
@media(max-width:700px){
  .svc-bar a{font-size:0;gap:0;justify-content:center;padding:15px 4px}
  .svc-bar a i{font-size:13px;letter-spacing:.1em}
  .svc-bignum{top:34px;right:5vw}
}
.svc-promesa{
  margin-top:24px;font-size:clamp(18px,2.3vw,26px);line-height:1.4;
  color:var(--crema);letter-spacing:.02em;
}
.svc-head p.txt{margin-top:22px;font-size:16px;color:var(--crema2);line-height:1.7}
.svc-head p.txt em{font-style:normal;color:var(--crema)}
/* atribucion de la firma que presta el servicio.
   El logotipo lleva ancho fijo y alto automatico: su proporcion no se altera. */
/* Servicio 01: la etiqueta y la firma de TRAMA comparten un solo renglon,
   unidas por la punteada. El isotipo es un circulo: ancho y alto iguales. */
.svc-num.con-firma{display:flex;align-items:center;gap:18px}
.svc-num.con-firma .etq{flex:0 0 auto}
.svc-num.con-firma .guia{
  flex:1 1 auto;min-width:20px;height:0;
  border-top:1px dotted rgba(169,157,134,.6);
}
/* flex:0 0 auto no la dejaba encogerse y desbordaba la pagina en movil */
.svc-num.con-firma .por{
  flex:0 1 auto;min-width:0;font-size:12px;letter-spacing:.1em;color:var(--taupe-bg);
}
.svc-num.con-firma img{width:34px;height:34px;display:block;opacity:.9;flex:0 0 auto}
@media(max-width:1000px){
  /* ya no caben en un renglon: la firma baja y la punteada estorba */
  .svc-num.con-firma{flex-wrap:wrap;gap:10px 14px}
  .svc-num.con-firma .guia{display:none}
  .svc-num.con-firma .etq{flex:1 1 100%}
  .svc-num.con-firma .por{font-size:11.5px}
  .svc-num.con-firma img{width:28px;height:28px}
}
.svc-sub{
  margin-top:70px;padding-bottom:16px;border-bottom:1px solid var(--linea);
  font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);
}
.svc-list{list-style:none;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:15px 46px}
.svc-list li{position:relative;padding-left:24px;font-size:15px;color:var(--crema2);line-height:1.6}
.svc-list li::before{content:'—';position:absolute;left:0;top:0;color:var(--taupe)}
/* carrusel de pilares: tarjetas altas y angostas */
.pcar{position:relative;margin-top:34px}
.pcar-vista{overflow:hidden}
.pcar-track{display:flex;transition:transform .55s cubic-bezier(.22,.8,.3,1)}
.pcar-item{flex:0 0 25%;padding:0 9px;box-sizing:border-box;min-width:0}
.pcar .paso{min-height:470px}
/* alineacion: el contenido se ancla desde ARRIBA con alturas fijas,
   asi los numeros y los textos quedan a la misma altura en todas las tarjetas */
.pcar .paso h4{
  font-size:clamp(15px,1.35vw,18px);margin:22px 20px 0;
  line-height:1.2;min-height:3.6em;   /* espacio reservado para 3 renglones */
}
.pcar .paso b{font-size:24px;margin:30px 20px 8px}   /* separacion fija => numeros alineados */
.pcar .paso .sub{
  display:block;margin:0 20px 10px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--taupe-bg);line-height:1.35;
  min-height:2.7em;   /* espacio reservado para 2 renglones => los textos alineados */
}
.pcar .paso p{font-size:12.5px;margin:0 20px}
.pcar .paso::after{margin:auto 20px 16px}            /* el logotipo se queda al fondo */
.pcar-flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--crema);background:rgba(33,33,33,.75);color:var(--crema);
  font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;user-select:none;
}
.pcar-flecha:hover{background:var(--crema);color:var(--negro)}
.pcar-flecha.prev{left:-16px}
.pcar-flecha.next{right:-16px}
.pcar-flecha[disabled]{opacity:.25;cursor:default;pointer-events:none}
@media(max-width:1100px){
  .pcar-item{flex:0 0 33.3333%}
}
@media(max-width:820px){
  .pcar-item{flex:0 0 50%}
  .pcar .paso{min-height:420px}
  .pcar-flecha{width:42px;height:42px}
  .pcar-flecha.prev{left:-8px}
  .pcar-flecha.next{right:-8px}
}
@media(max-width:560px){
  .pcar-item{flex:0 0 100%;padding:0 4px}
}
.svc-nota{
  margin-top:52px;border-left:2px solid var(--taupe-bg);padding-left:26px;
  font-size:clamp(16px,1.8vw,20px);line-height:1.6;color:var(--crema);max-width:760px;
}
.svc-nota + .svc-cta{margin-top:38px}
.svc-cta{
  display:inline-block;margin-top:52px;padding:17px 42px;border:1px solid var(--crema);
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;transition:all .3s;
}
.svc-cta:hover{background:var(--crema);color:var(--negro)}
@media(max-width:820px){
  .svc-list{grid-template-columns:1fr;gap:13px}
  .svc-sub{margin-top:52px}
}

/* ---------- TRANSPARENCIA ---------- */
#transparencia{background:var(--verde)}
.tr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);margin-top:56px}
.tr-card{background:rgba(0,0,0,.14);padding:36px 30px}
.tr-card h4{
  font-weight:400;font-size:16px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--crema);margin-bottom:16px;
}
.tr-card p{font-size:14.5px;color:var(--crema2);line-height:1.65}
.tr-nota{
  margin-top:44px;border-left:2px solid var(--crema);padding-left:28px;
  font-size:16px;color:var(--crema);line-height:1.7;max-width:900px;
}
.tr-nota + .tr-nota{margin-top:26px;border-left-color:var(--taupe);color:var(--crema2)}
@media(max-width:820px){
  .tr-grid{grid-template-columns:1fr}
}

/* ---------- QUIENES SOMOS + FUNDADORAS ---------- */
.ns-intro h2{max-width:20em}
.ns-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:54px;
  margin-top:34px;padding-top:30px;border-top:1px solid var(--linea);
}
.ns-lead{color:var(--crema);font-size:clamp(18px,1.95vw,22px);line-height:1.5}
.ns-parrafos{display:grid;gap:18px}
.ns-parrafos p{color:var(--crema2);font-size:16px;line-height:1.7}
.ns-fund{margin-top:86px;padding-top:58px;border-top:1px solid var(--linea)}
.ns-sub{
  font-size:15px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:8px;
}
@media(max-width:820px){
  .ns-cols{grid-template-columns:1fr;gap:26px}
  .ns-fund{margin-top:62px;padding-top:44px}
}

/* ---------- FUNDADORAS ---------- */
.fund-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:70px}
.fund img{
  filter:grayscale(1);border:1px solid var(--linea);
  width:100%;max-width:390px;
  aspect-ratio:3/4;object-fit:cover;object-position:center top;
}
.fund h3{margin-top:30px;font-size:21px;font-weight:400;letter-spacing:.16em;text-transform:uppercase}
.fund .rol{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);margin-top:8px}
.fund p{margin-top:20px;color:var(--crema2);font-size:15.5px}
.fund-cierre{
  margin-top:90px;text-align:center;max-width:760px;margin-left:auto;margin-right:auto;
  font-size:clamp(19px,2.6vw,26px);line-height:1.6;color:var(--crema);
}
.fund-cierre em{font-style:normal;color:var(--taupe)}

/* ---------- FAQ ---------- */
#faq{background:var(--negro2)}
.faq-lista{margin-top:60px;border-top:1px solid var(--linea);max-width:860px}
.faq{border-bottom:1px solid var(--linea)}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:26px 8px;cursor:pointer;font-size:17.5px;letter-spacing:.03em;
  transition:background .25s;
}
.faq-q:hover{background:rgba(234,228,212,.04)}
.faq-q .mas{font-size:24px;color:var(--taupe);transition:transform .35s;line-height:1;flex-shrink:0}
.faq.open .mas{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease}
.faq-a p{padding:2px 8px 28px;color:var(--crema2);max-width:720px;font-size:15.5px}

/* ---------- CONTACTO ---------- */
#contacto{text-align:center;padding:140px 0}
#contacto h2{font-size:clamp(34px,5.5vw,64px)}
#contacto h2 img{
  height:.82em;width:auto;display:inline-block;vertical-align:baseline;
  margin:0 .04em;transform:translateY(.06em);
}
#contacto .sub{margin-top:24px;color:var(--crema2);font-size:18px}
.mailbtn{
  display:inline-block;margin-top:52px;padding:20px 56px;
  background:var(--crema);color:var(--negro);
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  transition:all .3s;border:1px solid var(--crema);
}
.mailbtn:hover{background:transparent;color:var(--crema)}
.contact-datos{
  margin-top:70px;display:flex;justify-content:center;gap:9vw;flex-wrap:wrap;
}
.cdato{font-size:14.5px;color:var(--crema2);line-height:2}
.cdato b{display:block;font-weight:400;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);margin-bottom:6px}
.cdato a:hover{color:var(--crema)}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--linea);padding:44px 6vw;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
footer .logo{font-size:16px}
footer p{font-size:12px;letter-spacing:.14em;color:var(--taupe)}
footer a{letter-spacing:.14em;font-size:12px;color:var(--crema2)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  nav{padding:16px 5vw}
  .menu-btn{display:flex}
  /* el indice completo se despliega a pantalla entera */
  nav ul{
    position:fixed;inset:0;z-index:1;
    flex-direction:column;align-items:center;justify-content:center;gap:4px;
    background:rgba(24,24,21,.98);
    opacity:0;pointer-events:none;transition:opacity .35s ease;
  }
  nav.abierto ul{opacity:1;pointer-events:auto}
  nav ul li,nav ul li.solo-movil{display:block}
  nav ul a{
    font-size:15px;letter-spacing:.24em;padding:15px 26px;opacity:.8;
  }
  nav ul a.navact{opacity:1;border-color:var(--crema)}
  .about-grid,.fund-grid{grid-template-columns:1fr;gap:46px}
  .about-foto img{max-height:70vh;min-height:0}
  .about-foto::before,.about-foto::after{display:none}
  .about-cierre{padding-left:20px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(n+3){margin-top:34px;padding-top:34px;border-top:1px solid var(--linea)}
  .serv-pasos{grid-template-columns:1fr 1fr}
  .serv-body-in{padding-left:8px}
  .proc-grid{grid-template-columns:1fr 1fr}
  .proc{padding:34px 24px}
  .car-item{flex:0 0 50%}
  .car-flecha{width:44px;height:44px;font-size:17px}
  .car-flecha.prev{left:-4px}
  .car-flecha.next{right:-4px}
  .marquee::before,.marquee::after{width:44px}
  .marquee-track{gap:56px}
  .marquee-track img{height:44px}
  .ticker-track span{padding:0 18px;font-size:11.5px}
  .ticker-track span::after{margin-left:34px}
  .paises-line{letter-spacing:.2em;line-height:1.9}
}
@media(max-width:560px){
  body{font-size:16px}
  .el-grid{grid-template-columns:1fr}
  .hero .hero-serv{flex-wrap:wrap;white-space:normal;row-gap:6px}
  section{padding:74px 0}
  .wrap{padding:0 7vw}
  .serv-pasos{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:30px 12px}
  .stat span{font-size:10px;letter-spacing:.16em}
  .serv-head{gap:16px;padding:26px 4px}
  .serv-head .num{min-width:32px;font-size:13px}
  .car-item{flex:0 0 100%;padding:0 5px}
  .car-flecha{width:40px;height:40px}
  .about-grid p{font-size:16.5px}
  .about-grid .destacado{font-size:19px}
  #contacto{padding:100px 0}
  .contact-datos{gap:40px;margin-top:50px}
  .mailbtn{padding:17px 40px;letter-spacing:.2em}
  footer{justify-content:center;text-align:center;gap:14px}
  .faq-q{font-size:16px;padding:22px 4px}
}

/* ==========================================================
   REESTRUCTURA 2026: clientes bajo el hero, tarjetas-boton,
   salida hacia las paginas de servicio.
   ========================================================== */

/* ---------- CLIENTES DEBAJO DEL HERO ----------
   El hero se recorta lo justo para que la cinta de logotipos
   asome en la primera pantalla, sin necesidad de scroll. */
.hero{min-height:calc(100vh - 132px)}
.clientes-hero .cred-logos{margin-top:0}
@media(max-width:820px){
  .hero{min-height:calc(100vh - 108px)}
}

/* ---------- LA TARJETA SE LEE COMO BOTON ---------- */
.el-card .vermas{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(234,228,212,.22);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:#c6bba3;transition:color .35s;
}
.el-card .vermas i{font-style:normal;font-size:15px;transition:transform .35s}
.el-card:hover .vermas{color:var(--crema)}
.el-card:hover .vermas i{transform:translateX(6px)}
/* la flecha decorativa de arriba sobra cuando abajo ya hay una accion */
.el-card .flecha{display:none}

/* ---------- SALIDA HACIA LAS PAGINAS DE SERVICIO ---------- */
.al-pie{
  margin-top:74px;padding:46px 46px 40px;
  border:1px solid var(--linea);background:rgba(169,157,134,.07);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:36px 56px;align-items:start;
}
.al-pie-txt h3{
  margin-top:14px;font-weight:400;font-size:clamp(22px,2.3vw,30px);
  letter-spacing:.02em;line-height:1.25;color:var(--crema);
}
.al-pie-sub{margin-top:14px;font-size:15px;color:var(--crema2);line-height:1.7}
/* los cuatro servicios a un clic, para no obligar a pasar por el indice */
/* Lista editorial, no una retícula de botones: cada servicio es un renglon
   con su numero y una linea que se completa al pasar el cursor. */
.al-pie-lista{list-style:none;display:flex;flex-direction:column}
.al-pie-lista li + li{border-top:1px solid rgba(234,228,212,.12)}
.al-pie-lista a{
  position:relative;display:flex;align-items:baseline;gap:18px;
  padding:17px 2px;min-width:0;
}
.al-pie-lista a::after{
  content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;
  background:var(--crema);transition:width .5s ease;
}
.al-pie-lista a:hover::after{width:100%}
.al-pie-lista i{
  font-style:normal;font-size:10.5px;letter-spacing:.2em;
  color:var(--taupe);flex:0 0 auto;transition:color .3s;
}
.al-pie-lista b{
  font-weight:400;font-size:15px;letter-spacing:.05em;
  color:var(--crema2);line-height:1.35;min-width:0;transition:color .3s;
}
.al-pie-lista em{
  margin-left:auto;font-style:normal;font-size:15px;color:var(--taupe);
  flex:0 0 auto;transition:transform .35s,color .3s;
}
.al-pie-lista a:hover i{color:var(--crema2)}
.al-pie-lista a:hover b{color:var(--crema)}
.al-pie-lista a:hover em{color:var(--crema);transform:translateX(7px)}
.al-todos{
  grid-column:1 / -1;justify-self:start;
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--crema);padding:15px 28px;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .3s,color .3s;
}
.al-todos i{font-style:normal;font-size:15px;transition:transform .3s}
.al-todos:hover{background:var(--crema);color:var(--negro)}
.al-todos:hover i{transform:translateX(5px)}

/* ---------- MENU DE MOVIL: LOS CUATRO SERVICIOS ---------- */
@media(max-width:900px){
  nav ul li.sub a{
    font-size:11px;opacity:.62;letter-spacing:.18em;
    text-transform:none;
  }
  nav ul li.sub a::before{content:'— ';color:var(--taupe)}
}

/* ==========================================================
   PAGINAS DE SERVICIO (/servicios y /servicios/<slug>)
   Reutilizan .svc, .svc-num, .svc-list, .pcar y el diagrama
   de metodologia tal como estaban en la home.
   ========================================================== */

.svc-hero{
  padding:190px 0 70px;background:var(--negro2);
  border-bottom:1px solid var(--linea);
}
.miga{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:34px;
}
.miga a{color:var(--taupe);transition:color .25s}
.miga a:hover{color:var(--crema)}
.miga i{font-style:normal;margin:0 8px;opacity:.55}
.miga span{color:var(--crema2)}
.svc-hero h1{
  margin-top:22px;font-size:clamp(30px,4.4vw,54px);font-weight:400;
  letter-spacing:.02em;line-height:1.18;
}
.svc-hero .txt{
  margin-top:26px;max-width:56em;font-size:17px;
  color:var(--crema2);line-height:1.75;
}
.svc-hero .txt + .txt{margin-top:16px}
.svc-cuerpo{padding-top:78px}
/* dentro de la pagina de servicio la metodologia ya no lleva su propio fondo */
.svc-cuerpo .svc-metodo{margin-top:64px}

/* ---------- INDICE DE SERVICIOS ---------- */
.svc-indice{padding:86px 0 20px}
.sidx{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:0;align-items:stretch;
  border:1px solid var(--linea);margin-bottom:20px;
  transition:border-color .35s,background .35s,transform .35s;
}
.sidx:hover{border-color:var(--crema);background:rgba(169,157,134,.10);transform:translateY(-3px)}
.sidx-foto{overflow:hidden;min-height:210px}
.sidx-foto img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.7) saturate(.9);transition:transform .8s ease,filter .45s;
}
.sidx:hover .sidx-foto img{transform:scale(1.05);filter:brightness(.92) saturate(1)}
.sidx-txt{display:flex;flex-direction:column;padding:34px 38px;min-width:0}
.sidx-txt i{
  font-style:normal;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--taupe);
}
.sidx-txt b{
  display:block;margin-top:12px;font-weight:400;
  font-size:clamp(21px,2.3vw,28px);letter-spacing:.03em;color:var(--crema);
}
.sidx-txt em{
  display:block;margin-top:10px;font-style:normal;
  font-size:15px;color:var(--crema2);
}
.sidx-desc{
  display:block;margin-top:16px;font-size:14px;
  color:var(--crema2);line-height:1.7;max-width:52em;opacity:.85;
}
.sidx-trama{
  display:flex;align-items:center;gap:9px;margin-top:16px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);
}
/* el mismo tamano que lleva en las paginas de proyecto y de servicio */
.sidx-trama img{width:28px;height:28px;opacity:.9}
.sidx-cta{
  margin-top:auto;padding-top:22px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:#c6bba3;transition:color .35s;
}
.sidx-cta i{font-style:normal;font-size:14px;display:inline-block;transition:transform .35s}
.sidx:hover .sidx-cta{color:var(--crema)}
.sidx:hover .sidx-cta i{transform:translateX(6px)}

/* ---------- LOS DEMAS SERVICIOS ---------- */
.otros-svc{padding:90px 0;background:var(--negro2);border-top:1px solid var(--linea)}
.otros-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.otro{
  display:flex;flex-direction:column;padding:30px 28px;
  border:1px solid var(--linea);transition:border-color .35s,background .35s,transform .35s;
}
.otro:hover{border-color:var(--crema);background:rgba(169,157,134,.12);transform:translateY(-4px)}
.otro i{font-style:normal;font-size:11px;letter-spacing:.26em;color:var(--taupe)}
.otro b{
  display:block;margin-top:14px;font-weight:400;font-size:19px;
  letter-spacing:.03em;color:var(--crema);line-height:1.35;
}
.otro span{margin-top:14px;font-size:13.5px;color:var(--crema2);line-height:1.65}
.otro em{
  margin-top:auto;padding-top:22px;font-style:normal;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#c6bba3;transition:color .35s;
}
.otro:hover em{color:var(--crema)}

@media(max-width:900px){
  .svc-hero{padding:150px 0 56px}
  .otros-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .sidx{grid-template-columns:1fr}
  .sidx-foto{min-height:190px}
  .sidx-txt{padding:26px 24px}
}

@media(max-width:900px){
  .al-pie{grid-template-columns:1fr;padding:34px 26px 30px;gap:28px}
  .al-todos{justify-self:stretch;justify-content:space-between}
}

/* ==========================================================
   TARJETAS DE LA SOLUCION: que se vea de entrada que son
   cuatro servicios numerados.
   ========================================================== */
.el-card{padding:30px 32px 32px}
.el-lbl{
  display:block;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--taupe);
}
/* el numero grande, en transparencia, hace de marca de agua del servicio */
.el-num{
  display:block;line-height:.9;margin:2px 0 18px;
  font-size:clamp(58px,6.4vw,88px);letter-spacing:.02em;
  color:rgba(234,228,212,.20);
  transition:color .4s;
}
.el-card:hover .el-num{color:rgba(234,228,212,.42)}
.el-card h4{margin-bottom:14px}
.el-card p{margin-bottom:24px}
/* el nombre del servicio cierra la tarjeta, antes del boton */
.el-card .necesitas b{
  font-size:15px;letter-spacing:.16em;min-height:0;color:var(--crema);
}
.el-card .vermas{
  justify-content:center;gap:10px;margin-top:16px;padding:13px 14px;
  border:1px solid rgba(234,228,212,.45);border-top:1px solid rgba(234,228,212,.45);
  /* en cuatro columnas la caja es angosta: sin esto el rotulo se parte */
  letter-spacing:.16em;white-space:nowrap;
  transition:background .3s,border-color .3s,color .3s;
}
.el-card:hover .vermas{background:var(--crema);border-color:var(--crema);color:var(--negro)}

/* ---------- ALCANCE MODULAR COMO UNA SOLA SECCION ---------- */
#alcance .al-grid{margin-top:56px}

/* la etiqueta y el numero van debajo del texto, como pie de identidad
   de la tarjeta: el texto queda arriba y la ficha del servicio abajo */
.el-card{padding:34px 32px 32px}
.el-card p{margin-bottom:0}
.el-card .el-lbl{margin-top:auto;padding-top:26px}
.el-card .el-num{margin:0 0 10px}
.el-card .necesitas{margin-top:0;padding-top:0;border-top:0}

/* Las cuatro tarjetas deben alinear su pie exactamente, aunque el texto de
   arriba ocupe distinto numero de renglones. Con margenes automaticos la
   cuarta se desfasaba, asi que las filas se fijan: el parrafo absorbe la
   diferencia y el numero cae siempre a la misma altura. */
.el-card{
  display:grid;
  grid-template-rows:auto 1fr auto auto auto auto;
  align-content:stretch;
}
.el-card .el-lbl{margin-top:0;padding-top:26px;align-self:end}
/* "Interiorismo" cabe en un renglon y los otros tres nombres en dos: sin
   una altura fija su numero subia respecto al de las demas tarjetas. */
.el-card .necesitas b{min-height:2.9em}

/* Con el encabezado ya dentro de #alcance, el hueco de abajo de credibilidad
   se sumaba al padding de la seccion siguiente y quedaba demasiado. */
#credibilidad{padding:96px 0 46px}
/* el titulo se lee de corrido, en un solo renglon */
#alcance > .wrap > h2{
  white-space:nowrap;font-size:clamp(19px,3.4vw,44px);
}
@media(max-width:820px){
  #credibilidad{padding:76px 0 34px}
}
/* en pantallas chicas no cabe en un renglon sin volverse ilegible */
@media(max-width:820px){
  #alcance > .wrap > h2{white-space:normal;font-size:clamp(21px,5.4vw,30px)}
}
/* el encabezado es una frase, no un rotulo: se lee mejor a un cuerpo medio */
#alcance > .wrap > h2{
  white-space:normal;font-size:clamp(21px,2.8vw,34px);
  line-height:1.3;max-width:26em;
}
@media(max-width:820px){
  #alcance > .wrap > h2{font-size:clamp(20px,4.6vw,26px)}
}
/* el titulo vuelve a ser el rotulo corto, en un solo renglon */
#alcance > .wrap > h2{
  white-space:nowrap;font-size:clamp(19px,3.4vw,44px);
  line-height:1.2;max-width:none;
}
@media(max-width:820px){
  #alcance > .wrap > h2{white-space:normal;font-size:clamp(21px,5.4vw,30px)}
}
/* el boton sube hacia el texto: la tarjeta queda mas compacta */
.al-pie{gap:22px 56px;padding:44px 46px 36px}
.al-pie .al-todos{margin-top:-4px}
@media(max-width:900px){
  .al-pie{gap:22px;padding:32px 26px 28px}
}

/* Los numeros de la lista pasan a ser grandes y en transparencia, como en
   las tarjetas de la solucion: dan escala al bloque y ordenan la lectura. */
.al-pie-lista a{align-items:center;gap:22px;padding:14px 2px}
.al-pie-lista i{
  font-size:clamp(34px,3.6vw,54px);line-height:1;letter-spacing:.01em;
  color:rgba(234,228,212,.22);
  /* ancho fijo para que los nombres arranquen todos en la misma vertical */
  flex:0 0 auto;min-width:1.9em;
  transition:color .35s;
}
.al-pie-lista b{font-size:16px;letter-spacing:.06em}
.al-pie-lista a:hover i{color:rgba(234,228,212,.55)}
@media(max-width:900px){
  .al-pie-lista i{font-size:38px;min-width:1.7em}
  .al-pie-lista a{gap:16px}
}
/* mas escala todavia: el numero manda en el renglon */
.al-pie-lista i{font-size:clamp(46px,5.4vw,78px);min-width:1.8em}
.al-pie-lista a{padding:10px 2px;gap:26px}
.al-pie-lista b{font-size:17px}
@media(max-width:900px){
  .al-pie-lista i{font-size:52px;min-width:1.7em}
}

/* El boton va pegado al texto, en la columna izquierda, y no al fondo de la
   tarjeta: la lista de la derecha ocupa las dos filas. */
.al-pie{grid-template-rows:auto 1fr}
.al-pie-txt{grid-column:1;grid-row:1}
.al-pie-lista{grid-column:2;grid-row:1 / span 2}
.al-pie .al-todos{
  grid-column:1;grid-row:2;
  align-self:start;justify-self:start;margin-top:0;
}
@media(max-width:900px){
  .al-pie{grid-template-rows:auto auto auto}
  .al-pie-txt,.al-pie-lista,.al-pie .al-todos{grid-column:1}
  .al-pie-txt{grid-row:1}
  .al-pie-lista{grid-row:2}
  .al-pie .al-todos{grid-row:3;justify-self:stretch}
}
/* la columna izquierda es angosta: sin esto el rotulo del boton se parte */
.al-pie .al-todos{white-space:nowrap;letter-spacing:.18em;padding:15px 22px}

/* Las cuatro fichas del indice de servicios miden lo mismo: se toma como
   referencia la de Consultoria Tecnica, que es la que lleva la firma de
   TRAMA. El resumen se acota a tres renglones para que ninguna crezca. */
@media(min-width:761px){
  .sidx{min-height:349px}
  .sidx-desc{
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* La foto de la ficha ya no manda sobre la altura: al ser vertical estiraba
   la tarjeta hasta 450px. Se recorta dentro de su caja. */
.sidx-foto{position:relative;overflow:hidden}
.sidx-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ==========================================================
   TARJETAS DE "QUE INCLUYE" CON EL FORMATO DE LA LANDING:
   texto arriba y el numero grande en transparencia abajo.
   ========================================================== */
.pcar .paso{
  background:rgba(169,157,134,.45);
  border:1px solid rgba(169,157,134,.85);
  padding:30px 28px 28px;min-height:470px;
  display:flex;flex-direction:column;
  transition:border-color .35s,background .35s,transform .35s,box-shadow .35s;
}
.pcar .paso::before,
.pcar .paso::after{display:none}      /* fuera el marco interior y el logotipo */
.pcar-item:hover .paso{
  border-color:var(--crema);
  background:rgba(169,157,134,.64);
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}
.pcar .paso h4{
  order:1;margin:0 0 14px;
  font-size:clamp(16px,1.6vw,20px);letter-spacing:.02em;line-height:1.35;
  text-transform:none;color:var(--crema);
  min-height:2.7em;                    /* dos renglones reservados */
}
.pcar .paso .sub{
  order:2;display:block;margin:0 0 12px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#c6bba3;line-height:1.35;min-height:2.7em;
}
.pcar .paso p{
  order:3;margin:0;
  font-size:13.5px;color:var(--crema2);line-height:1.6;
}
.pcar .paso b{
  order:4;margin:auto 0 0;padding-top:26px;
  display:block;font-weight:400;line-height:.9;
  font-size:clamp(52px,5.6vw,78px);letter-spacing:.02em;
  color:rgba(234,228,212,.22);
  transition:color .4s;
}
.pcar-item:hover .paso b{color:rgba(234,228,212,.45)}
/* con el formato nuevo la tarjeta necesita menos alto: quedaba mucho hueco */
.pcar .paso{min-height:408px}
/* el titulo de cada tarjeta gana cuerpo; el numero y el resto no se tocan */
.pcar .paso h4{font-size:clamp(18px,1.95vw,25px);line-height:1.28;min-height:2.56em}

/* Cierre del indice de servicios. Antes reutilizaba el panel de la landing,
   que es de dos columnas, y dejaba media caja vacia. */
.svc-cierre{
  padding:0 0 100px;background:transparent;border-top:0;
}
.svc-cierre .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px 40px;padding-top:44px;
  border-top:1px solid var(--linea);
}
.svc-cierre p{
  font-size:16px;color:var(--crema2);line-height:1.7;max-width:44em;min-width:0;
}
.svc-cierre a{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--crema);padding:15px 26px;white-space:nowrap;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s,color .3s;
}
.svc-cierre a i{font-style:normal;font-size:15px;transition:transform .3s}
.svc-cierre a:hover{background:var(--crema);color:var(--negro)}
.svc-cierre a:hover i{transform:translateX(5px)}
@media(max-width:760px){
  .svc-cierre{padding-bottom:70px}
  .svc-cierre a{width:100%;justify-content:space-between}
}

/* El recuadro de la pagina o seccion en la que estas se pinta en beige,
   igual que al pasar el cursor, para que se distinga de un vistazo. */
nav ul a.navact{
  opacity:1;background:var(--crema);border-color:var(--crema);color:var(--negro);
}

/* ---------- METODOLOGIA EN CELULAR ----------
   En pantalla chica el diagrama se sustituye por la lista de las 14 etapas,
   y con la explicacion de cada una desplegada ocupaba 1.800px: casi un
   tercio de la pagina. Ahora se ven los nombres y la explicacion aparece
   al tocar. El texto sigue en la pagina, solo esta plegado. */
@media(max-width:820px){
  .dg-lista{grid-template-columns:1fr;margin-top:40px}
  .dg-lista li{
    position:relative;padding:0;cursor:pointer;
  }
  .dg-lista b{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-bottom:0;padding:16px 46px 16px 18px;
  }
  /* el signo indica que hay algo que abrir */
  .dg-lista li::after{
    content:'+';position:absolute;top:15px;right:18px;
    font-size:17px;line-height:1;color:var(--taupe);
    transition:transform .3s,color .3s;
  }
  .dg-lista li.abierta::after{transform:rotate(45deg);color:var(--crema)}
  .dg-lista span{
    display:block;overflow:hidden;max-height:0;
    padding:0 18px;
    transition:max-height .35s ease,padding .35s ease;
  }
  .dg-lista li.abierta span{max-height:220px;padding:0 18px 18px}
}

/* ==========================================================
   PROYECTOS DENTRO DE UNA PAGINA DE SERVICIO
   El acordeon de la portada supone cuatro paneles del mismo peso; aqui hay
   servicios con un solo proyecto y en celular ocupaba pantallas enteras.
   Se sustituye por tarjetas: funcionan con uno o con cuatro.
   ========================================================== */
#proyectos{padding-bottom:100px}
.pgrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  margin-top:44px;
}
.pobra{display:flex;flex-direction:column;min-width:0}
.pobra-foto{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3;border:1px solid var(--linea);
}
.pobra-foto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.78) saturate(.92);
  transition:transform .8s ease,filter .45s;
}
.pobra:hover .pobra-foto img{transform:scale(1.05);filter:brightness(.95) saturate(1)}
.pobra:hover .pobra-foto{border-color:var(--crema)}
.pobra-txt{display:block;padding:16px 2px 0;min-width:0}
.pobra-txt b{
  display:block;font-weight:400;font-size:14.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--crema);line-height:1.35;
  transition:color .3s;
}
.pobra-txt i{
  display:block;margin-top:7px;font-style:normal;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);
}
.pgrid-pie{margin-top:44px}
.pgrid-pie a{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--crema);padding:15px 26px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s,color .3s;
}
.pgrid-pie a i{font-style:normal;font-size:15px;transition:transform .3s}
.pgrid-pie a:hover{background:var(--crema);color:var(--negro)}
.pgrid-pie a:hover i{transform:translateX(5px)}

@media(max-width:900px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:34px}
}
@media(max-width:560px){
  /* en celular la foto se recorta mas: asi caben dos proyectos por pantalla */
  .pgrid{grid-template-columns:1fr;gap:12px}
  .pobra-foto{aspect-ratio:16/9}
  .pgrid-pie a{width:100%;justify-content:space-between}
}
/* dos renglones reservados para el titulo: asi los anios quedan alineados */
@media(min-width:561px){
  .pobra-txt b{min-height:2.7em}
}
/* En escritorio cuatro columnas dejaban tarjetas de ~280px: demasiado chicas
   para lucir la fotografia. Con dos columnas la foto gana el doble de ancho
   y los cuatro proyectos caben en dos filas. */
@media(min-width:901px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .pobra-foto{aspect-ratio:3/2}
  .pobra-txt{padding-top:20px}
  .pobra-txt b{font-size:17px;letter-spacing:.08em;min-height:0}
  .pobra-txt i{font-size:12px;margin-top:9px}
}

/* ---------- CARRUSEL DE PROYECTOS EN LA PAGINA DE SERVICIO ----------
   Con la reticula quedaban dos franjas muertas a los lados; el carrusel las
   aprovecha para las flechas y deja ver mas proyectos sin alargar la pagina. */
.pcar-obras{margin-top:44px}
.pcar-obras .pcar-item{flex:0 0 33.3333%;padding:0 11px}
.pcar-obras .pobra-foto{aspect-ratio:3/2}
.pcar-obras .pobra-txt{padding:18px 2px 0}
.pcar-obras .pobra-txt b{font-size:15.5px;letter-spacing:.08em;min-height:2.7em}
.pcar-obras .pobra-txt i{font-size:11.5px;margin-top:8px}
/* las flechas se salen del bloque, sobre el margen vacio */
.pcar-obras .pcar-flecha.prev{left:-26px}
.pcar-obras .pcar-flecha.next{right:-26px}
@media(max-width:1100px){
  .pcar-obras .pcar-item{flex:0 0 50%}
}
@media(max-width:820px){
  .pcar-obras .pcar-flecha.prev{left:-8px}
  .pcar-obras .pcar-flecha.next{right:-8px}
}
@media(max-width:560px){
  .pcar-obras .pcar-item{flex:0 0 100%;padding:0}
  .pcar-obras .pobra-foto{aspect-ratio:16/9}
  .pcar-obras .pobra-txt b{min-height:0}
}
/* un carrusel que no necesita recorrerse no muestra flechas */
.pcar.sin-flechas .pcar-flecha{display:none}
/* y si solo hay un proyecto, ocupa el ancho completo en vez de media caja */
.pcar-obras.sin-flechas .pcar-item:only-child{flex:0 0 100%}

/* ---------- BLOQUE A TODO LO ANCHO ----------
   Los proyectos aprovechan el ancho completo de la pantalla en vez de
   quedarse dentro de la caja de 1200px del resto del contenido. */
@media(min-width:901px){
  .ancho-total{max-width:none;padding:0 4vw}
  /* las flechas se quedan dentro, sobre la primera y la ultima tarjeta */
  .pcar-obras .pcar-flecha.prev{left:14px}
  .pcar-obras .pcar-flecha.next{right:14px}
}
/* Cuantas caben depende del ancho real: el objetivo es que ninguna tarjeta
   baje de unos 300px, que es donde la fotografia deja de lucirse. */
@media(min-width:901px){ .pcar-obras .pcar-item{flex:0 0 33.3333%} }
@media(min-width:1280px){ .pcar-obras .pcar-item{flex:0 0 25%} }
@media(min-width:1700px){ .pcar-obras .pcar-item{flex:0 0 20%} }