/* ===== base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;background:#111;color:#f5f5f2}
button{font:inherit}
.app{width:100vw;height:100vh;min-height:600px;overflow:hidden;position:relative;background:#111}
.header{position:absolute;top:0;left:0;width:100%;height:76px;padding:0 4%;display:flex;align-items:center;z-index:50;color:#fff}.main-nav{margin-left:auto;margin-right:28px}
.logo{background:none;border:0;color:#fff;font-size:14px;font-weight:700;cursor:pointer}.logo span{opacity:.5;font-weight:400}
.main-nav{display:flex;gap:30px}.nav-item{position:relative;border:0;background:none;color:#fff;font-size:12px;font-weight:500;letter-spacing:1.1px;text-transform:uppercase;opacity:.72;cursor:pointer;padding:10px 0;transition:.25s}.nav-item:hover,.nav-item.active{opacity:1}.nav-item.active:after{content:"";position:absolute;height:1px;background:#fff;left:0;right:0;bottom:2px}
.header-cta{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.65);padding:12px 19px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:1.1px;cursor:pointer}.header-cta:hover{background:#fff;color:#000}
.slide{position:absolute;inset:0;padding-top:76px;opacity:0;pointer-events:none;transform:translateX(40px);transition:opacity .55s ease,transform .7s cubic-bezier(.76,0,.24,1)}.slide.active{opacity:1;pointer-events:auto;transform:translateX(0)}
.label{font-size:9px;letter-spacing:1.7px;text-transform:uppercase;opacity:.55}.section-title{font-size:clamp(32px,4vw,64px);font-weight:500;line-height:1;letter-spacing:-2px}.description{font-size:12px;line-height:1.8;opacity:.7;max-width:430px}
.hero{display:flex;flex-direction:column;background:#111}.hero-top{height:38%;min-height:255px;padding:5vh 4% 7vh;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid rgba(255,255,255,.14);flex-shrink:0;position:relative;overflow:hidden;background:#111}.hero-top:before{content:"";position:absolute;inset:0;background:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2200&q=90") center/cover no-repeat;opacity:.6}.hero-top:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.45),rgba(0,0,0,.25))}.hero-copy{position:relative;z-index:2;display:block;max-width:620px}.hero-title{font-size:clamp(28px,3vw,50px);font-weight:500;line-height:1;letter-spacing:-2px;max-width:600px}.hero-description{margin-top:26px;max-width:470px;font-size:12px;line-height:1.8;opacity:.72}.hero-link{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.55);color:#fff;padding:0 0 8px;font-size:9px;text-transform:uppercase;letter-spacing:1.1px;cursor:pointer;white-space:nowrap}
.hero-cta{margin-top:28px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.65);padding:13px 22px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:1.1px;cursor:pointer;transition:.25s}
.hero-cta:hover{background:#fff;color:#111}
.hero-columns{display:flex;flex:1;min-height:0;overflow:hidden}.service-column{position:relative;flex:1;min-width:0;overflow:hidden;border-right:1px solid rgba(255,255,255,.14);cursor:pointer;transition:flex .8s cubic-bezier(.76,0,.24,1)}.service-column:last-child{border-right:0}.service-column.expanded{flex:2.2}.service-image{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(55%) brightness(.6);transform:scale(1.04);transition:transform 1s cubic-bezier(.76,0,.24,1),filter .6s ease}.service-column.expanded .service-image{transform:scale(1.1);filter:grayscale(15%) brightness(.85)}.service-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.08))}.service-content{position:relative;z-index:2;height:100%;padding:20px;display:flex;flex-direction:column;justify-content:flex-end}.service-number{position:absolute;top:18px;left:18px;font-size:9px;letter-spacing:1.5px;opacity:.6}.service-title{font-size:clamp(16px,1.5vw,24px);font-weight:500;line-height:1;writing-mode:vertical-rl;transform:rotate(180deg);transition:.5s;white-space:nowrap}.service-column.expanded .service-title{writing-mode:horizontal-tb;transform:rotate(0);white-space:normal}.service-description{max-height:0;opacity:0;overflow:hidden;margin-top:0;font-size:11px;line-height:1.6;max-width:220px;transition:max-height .5s,opacity .4s,margin-top .4s}.service-column.expanded .service-description{max-height:100px;opacity:.75;margin-top:14px}.service-arrow{position:absolute;right:18px;bottom:18px;font-size:20px;opacity:0;transform:translateX(-8px);transition:.4s}.service-column.expanded .service-arrow{opacity:1;transform:translateX(0)}
.about{background:#f0f0ec;color:#111;padding:0}.about-inner{height:100%;padding:8vh 8%;display:grid;grid-template-columns:1.1fr .9fr;gap:8%;align-items:center}.about-title{font-size:clamp(38px,5vw,76px);line-height:1;font-weight:500;letter-spacing:-3px;max-width:700px}.about-right{display:flex;flex-direction:column;gap:32px}.about-line{border-top:1px solid rgba(0,0,0,.15);padding-top:17px;display:flex;flex-wrap:wrap;gap:12px;font-size:9px;letter-spacing:1px;text-transform:uppercase}.about-image{height:180px;width:100%;background:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1400&q=85") center/cover;filter:grayscale(1)}.text-button{width:fit-content;background:none;border:0;border-bottom:1px solid currentColor;padding-bottom:8px;font-size:9px;text-transform:uppercase;letter-spacing:1px;cursor:pointer}
.process{background:#f0f0ec;color:#111;padding:0}.process-inner{height:100%;padding:8vh 8%;display:flex;flex-direction:column}.process-list{margin-top:auto;border-top:1px solid rgba(0,0,0,.14)}.process-item{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.14);padding:22px 0;display:grid;grid-template-columns:90px 1fr 1fr;text-align:left;color:#111;cursor:pointer;transition:.3s}.process-item:hover{padding-left:15px;background:rgba(0,0,0,.025)}.process-number{font-size:10px;opacity:.5}.process-name{font-size:19px;font-weight:500}.process-description{font-size:11px;line-height:1.6;opacity:.65}
.projects{background:#080808;padding:0}.project-image{position:absolute;top:0;right:0;width:62%;height:100%;background-size:cover;background-position:center;filter:grayscale(.3);transition:background-image .5s}.project-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.35),rgba(0,0,0,.05))}.project-info{position:absolute;left:8%;right:44%;bottom:15%;z-index:2;max-width:560px}.project-count{margin-bottom:25px;font-size:9px;letter-spacing:1.7px;opacity:.55}.project-name{font-size:clamp(40px,5vw,80px);line-height:.95;font-weight:500;letter-spacing:-3px;overflow-wrap:break-word}.project-category{margin-top:18px;font-size:9px;letter-spacing:1.4px;opacity:.65}.project-controls{position:absolute;right:5%;bottom:7%;z-index:3;display:flex;gap:25px}.project-controls button{background:none;color:#fff;border:0;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:7px;font-size:9px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.contact{background:#050505;padding:0}.contact-inner{height:100%;padding:8vh 8%;display:flex;flex-direction:column}.contact-title{margin-top:35px;font-size:clamp(44px,6vw,92px);line-height:.95;letter-spacing:-4px;font-weight:500}.contact-bottom{margin-top:auto;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:45px}.contact-item small{display:block;margin-bottom:10px;font-size:9px;letter-spacing:1.3px;opacity:.5}.contact-item p{margin:4px 0;font-size:12px;opacity:.75}.contact-button{background:#fff;color:#000;border:0;padding:15px 22px;font-size:9px;text-transform:uppercase;letter-spacing:1px;cursor:pointer}

@media(max-width:800px){.app{min-height:600px}.header{height:65px;padding:0 20px}.main-nav{display:none}.header-cta{margin-left:auto}.slide{padding-top:65px}.hero-top{height:34%;min-height:200px;padding:30px 20px}.hero-copy{display:block}.hero-copy .label{margin-bottom:15px}.hero-title{font-size:32px}.hero-link{display:none}.service-column{min-width:58px}.service-content{padding:12px}.service-number{top:12px;left:12px}.service-column.expanded{flex:3}.about-inner{display:flex;flex-direction:column;justify-content:center;padding:50px 8%}.about-title{font-size:42px}.process-inner,.contact-inner{padding:50px 8%}.process-item{grid-template-columns:40px 1fr}.process-description{display:none}.project-image{width:100%;opacity:.55}.project-info{left:8%;right:8%;bottom:18%;max-width:none}.project-name{font-size:50px}.contact-title{font-size:52px}.contact-bottom{grid-template-columns:1fr;gap:15px}}

/* ===== force-visible-adjustments ===== */
/* AJUSTES VISIBLES */
.header{
  padding-left:4%!important;
  padding-right:4%!important;
}
.main-nav{
  margin-left:auto!important;
  margin-right:36px!important;
  gap:38px!important;
}
.nav-item{
  font-size:14px!important;
  font-weight:600!important;
  opacity:.95!important;
  letter-spacing:1.2px!important;
}
.header-cta{
  padding:14px 24px!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:1.2px!important;
}
/* Más aire REAL debajo del contenido y antes de las columnas */
.hero-top{
  height:42%!important;
  min-height:310px!important;
  padding:5vh 4% 10vh!important;
}
.hero-description{
  margin-top:28px!important;
}

/* ===== menu-subtle-refinement ===== */
/* Refinamiento: menú y botón más pequeños y sutiles */
.main-nav{
  margin-right:28px!important;
  gap:28px!important;
}
.nav-item{
  font-size:11px!important;
  font-weight:500!important;
  opacity:.72!important;
  letter-spacing:1px!important;
}
.header-cta{
  padding:10px 16px!important;
  font-size:10px!important;
  font-weight:500!important;
  letter-spacing:1px!important;
  border-color:rgba(255,255,255,.45)!important;
}

/* ===== about-mazzaglia-style ===== */
.about{overflow:auto;background:#f0f0ec;color:#111;}
.about-page{min-height:100%;padding:105px 4% 42px;display:flex;flex-direction:column;gap:34px;}
.about-header{display:grid;grid-template-columns:1.5fr .75fr;column-gap:9%;align-items:end;border-bottom:1px solid rgba(0,0,0,.16);padding-bottom:30px;}
.about-kicker,.eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:600;opacity:.55;}
.about-header h2{grid-column:1;font-size:clamp(32px,4.1vw,66px);font-weight:500;line-height:.98;letter-spacing:-2.8px;margin-top:18px;}
.about-header p{grid-column:2;grid-row:1 / span 2;font-size:12px;line-height:1.75;max-width:390px;opacity:.7;align-self:end;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;}
.about-story{max-width:570px;}
.about-story h3{font-size:clamp(28px,3.2vw,50px);line-height:.98;font-weight:500;letter-spacing:-2px;margin:18px 0 24px;}
.about-story p{font-size:12px;line-height:1.75;opacity:.72;margin-bottom:13px;}
.about-stats{border-top:1px solid rgba(0,0,0,.16);}
.stat{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.16);align-items:center;}
.stat strong{font-size:clamp(30px,3vw,47px);font-weight:500;letter-spacing:-2px;}
.stat b{display:block;font-size:9px;letter-spacing:1.15px;margin-bottom:7px;}
.stat span{display:block;font-size:11px;line-height:1.55;opacity:.65;}
.about-process{margin-top:auto;padding-top:5px;}
.process-heading{border-bottom:1px solid rgba(0,0,0,.16);padding-bottom:14px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.3px;opacity:.6;}
.about-steps{display:grid;grid-template-columns:repeat(4,1fr);}
.about-step{padding:20px 20px 0 0;border-right:1px solid rgba(0,0,0,.14);margin-right:20px;min-height:130px;}
.about-step:last-child{border-right:0;margin-right:0;}
.about-step span{display:block;font-size:9px;letter-spacing:1px;opacity:.45;margin-bottom:24px;}
.about-step b{display:block;font-size:14px;font-weight:500;line-height:1.15;margin-bottom:10px;}
.about-step p{font-size:10px;line-height:1.6;opacity:.62;}
@media(max-width:800px){
 .about-page{padding:90px 7% 35px;gap:28px;}
 .about-header,.about-grid{grid-template-columns:1fr;gap:22px;}
 .about-header p{grid-column:1;grid-row:auto;}
 .about-header h2{font-size:42px;}
 .about-steps{grid-template-columns:1fr 1fr;}
 .about-step{border-bottom:1px solid rgba(0,0,0,.14);padding-bottom:18px;margin-bottom:15px;}
 .about-steps .about-step:nth-child(2){border-right:0;}
 .process-heading{gap:20px;}
}

/* ===== about-simple-mazzaglia ===== */
/* Página Nosotros simplificada */
.about{overflow:hidden;background:#f0f0ec;color:#111;}
.about-page-simple{height:100%;padding:76px 4% 0;display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:stretch;}
.about-copy{padding:8vh 0 7vh;max-width:650px;display:flex;flex-direction:column;align-items:flex-start;}
.about-kicker{font-size:9px;letter-spacing:1.5px;font-weight:600;opacity:.5;}
.about-copy h2{font-size:clamp(35px,4vw,62px);font-weight:500;line-height:.98;letter-spacing:-2.8px;margin-top:18px;max-width:670px;}
.about-rule{width:100%;height:1px;background:rgba(0,0,0,.15);margin:28px 0;}
.about-copy h3{font-size:clamp(25px,2.7vw,42px);font-weight:500;line-height:1;letter-spacing:-1.8px;margin-bottom:18px;}
.about-copy p{font-size:12px;line-height:1.72;opacity:.7;max-width:530px;margin-bottom:12px;}
.about-mini-stats{display:flex;width:100%;border-top:1px solid rgba(0,0,0,.14);margin-top:24px;padding-top:17px;gap:26px;}
.about-mini-stats div{flex:1;}
.about-mini-stats strong{display:block;font-size:clamp(24px,2.5vw,38px);font-weight:500;letter-spacing:-1.5px;margin-bottom:7px;}
.about-mini-stats span{font-size:8px;line-height:1.35;letter-spacing:.9px;opacity:.6;}
.about-cta{margin-top:25px;background:#111;color:#fff;border:1px solid #111;padding:13px 20px;font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:.25s;}
.about-cta:hover{background:transparent;color:#111;}
.about-photo{position:relative;height:100%;min-height:0;background:#d4d4cf;overflow:hidden;}
.photo-placeholder{position:absolute;inset:0;background:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1500&q=90") center/cover;filter:grayscale(100%);display:flex;align-items:flex-end;padding:28px;}
.photo-placeholder:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.03));}
.photo-placeholder span{position:relative;z-index:2;color:#fff;font-size:8px;letter-spacing:1.3px;opacity:.8;}
.photo-caption{position:absolute;right:24px;bottom:24px;z-index:3;color:#fff;font-size:8px;letter-spacing:1.1px;writing-mode:vertical-rl;}
@media(max-width:800px){
 .about{overflow:auto;}
 .about-page-simple{height:auto;min-height:100%;padding:75px 7% 0;grid-template-columns:1fr;gap:0;}
 .about-copy{padding:40px 0 45px;}
 .about-copy h2{font-size:40px;}
 .about-mini-stats{gap:12px;}
 .about-mini-stats strong{font-size:27px;}
 .about-photo{height:340px;min-height:340px;}
}

/* ===== global-typography-and-light-menu ===== */
/* Ajuste global de textos descriptivos */
.hero-description,
.description,
.about-copy p,
.process-description,
.about-step p,
.stat span,
.contact-item p{
  font-size:13px!important;
  line-height:1.8!important;
}

/* Más contraste sobre fondos claros */
.about .label,
.about .description,
.about .about-kicker,
.about .eyebrow,
.about .about-copy p,
.about .about-mini-stats span,
.about .stat span,
.process .label,
.process .process-description,
.process .about-step p{
  color:rgba(0,0,0,.72)!important;
  opacity:1!important;
}

/* El menú siempre negro en páginas claras */
.header.light-header,
.header.is-light{
  color:#111!important;
}
.header.light-header .logo,
.header.light-header .nav-item,
.header.light-header .header-cta,
.header.is-light .logo,
.header.is-light .nav-item,
.header.is-light .header-cta{
  color:#111!important;
}
.header.light-header .header-cta,
.header.is-light .header-cta{
  border-color:rgba(0,0,0,.45)!important;
}
.header.light-header .nav-item.active:after,
.header.is-light .nav-item.active:after{
  background:#111!important;
}

/* En Inicio, Proyectos y Contacto se mantiene blanco */
.header.dark-header,
.header.dark-header .logo,
.header.dark-header .nav-item,
.header.dark-header .header-cta{
  color:#fff!important;
}
.header.dark-header .header-cta{border-color:rgba(255,255,255,.45)!important;}
.header.dark-header .nav-item.active:after{background:#fff!important;}

/* ===== force-dark-header-all-pages ===== */
.header{
  position:fixed!important;
  top:0!important;left:0!important;
  width:100%!important;
  background:#101010!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.header .logo,
.header .nav-item,
.header .header-cta{
  color:#fff!important;
}
.header .nav-item{
  opacity:.72!important;
}
.header .nav-item:hover,
.header .nav-item.active{
  opacity:1!important;
}
.header .header-cta{
  border-color:rgba(255,255,255,.45)!important;
}
.header .nav-item.active:after{
  background:#fff!important;
}

/* ===== contact-form-and-cards ===== */
.contact{background:#f0f0ec;color:#111;overflow:auto;}
.contact-page{min-height:100%;padding:106px 4% 42px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:8%;}
.contact-form-side{max-width:720px;}
.contact-kicker{font-size:9px;letter-spacing:1.5px;font-weight:600;opacity:.55;margin-bottom:18px;}
.contact-form-side h2{font-size:clamp(38px,4.5vw,70px);font-weight:500;line-height:.96;letter-spacing:-3px;margin-bottom:20px;}
.contact-intro{font-size:13px!important;line-height:1.75!important;max-width:520px;color:rgba(0,0,0,.72);margin-bottom:28px;}
.contact-form{border-top:1px solid rgba(0,0,0,.18);padding-top:20px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.field{padding:0 0 18px;margin-bottom:12px;border-bottom:1px solid rgba(0,0,0,.2);}
.field label{display:block;font-size:9px;letter-spacing:1px;text-transform:uppercase;opacity:.5;margin-bottom:8px;}
.field input,.field textarea{width:100%;border:0;outline:0;background:transparent;color:#111;font:inherit;font-size:13px;padding:0;}
.field input::placeholder,.field textarea::placeholder{color:rgba(0,0,0,.4);}
.field textarea{height:64px;resize:none;line-height:1.5;}
.contact-submit{margin-top:10px;background:#111;color:#fff;border:1px solid #111;padding:13px 22px;font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:.25s;}
.contact-submit:hover{background:transparent;color:#111;}
.form-message{display:inline-block;margin-left:16px;font-size:10px;opacity:.65;}
.contact-cards-side{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(0,0,0,.14);align-self:stretch;}
.contact-card{background:#deded8;padding:24px;min-height:210px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;}
.contact-card span{font-size:8px;letter-spacing:1.2px;opacity:.48;margin-bottom:auto;}
.contact-card strong{font-size:clamp(17px,1.8vw,26px);font-weight:500;line-height:1.08;letter-spacing:-.8px;margin-bottom:12px;overflow-wrap:anywhere;}
.contact-card p{font-size:10px;line-height:1.55;opacity:.62;margin:0;}
.contact-card a{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#111;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.35);padding-bottom:4px;}
.contact-card a:hover{border-color:#111;}
@media(max-width:850px){
 .contact-page{grid-template-columns:1fr;padding:95px 7% 40px;gap:36px;}
 .contact-cards-side{min-height:520px;}
}
@media(max-width:560px){
 .form-row{grid-template-columns:1fr;gap:0;}
 .contact-cards-side{grid-template-columns:1fr;}
 .contact-card{min-height:150px;}
 .contact-form-side h2{font-size:44px;}
}

/* ===== contact-cards-vertical ===== */
/* Cards de contacto apiladas verticalmente */
.contact-cards-side{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:repeat(4,1fr)!important;
  gap:1px!important;
  background:rgba(0,0,0,.14)!important;
  align-self:stretch!important;
}
.contact-card{
  min-height:0!important;
  padding:22px 26px!important;
}
@media(max-width:850px){
  .contact-cards-side{
    min-height:600px!important;
  }
}

/* ===== contact-vertical-center ===== */
/* Centrar verticalmente toda la composición de Contacto */
.contact-page{
  min-height:100vh!important;
  height:100vh!important;
  padding:76px 4% 0!important;
  align-items:center!important;
  box-sizing:border-box!important;
}
.contact-form-side,
.contact-cards-side{
  align-self:center!important;
}
.contact-cards-side{
  height:min(620px,72vh)!important;
  grid-template-rows:repeat(4,1fr)!important;
}
.contact-card{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.contact-card span{
  margin-bottom:14px!important;
}
.contact-card strong{
  margin-bottom:10px!important;
}
@media(max-width:850px){
  .contact-page{
    height:auto!important;
    min-height:100vh!important;
    padding:105px 7% 45px!important;
    align-items:start!important;
  }
  .contact-cards-side{
    height:auto!important;
  }
}

/* ===== global-legibility-fix ===== */
/* LEGIBILIDAD GLOBAL: evitar microtextos, labels demasiado tenues y placeholders ilegibles */
.label,.eyebrow,.about-kicker,.about-kicker,.contact-kicker,
.process-heading,.photo-caption,
.field label,.contact-card span,.about-mini-stats span,
.about-step span,.stat b,.about-kicker,.form-message{
  font-size:11px!important;
  font-weight:500!important;
  letter-spacing:.9px!important;
  opacity:1!important;
  color:rgba(0,0,0,.72)!important;
}

/* Elementos sobre fondos oscuros */
.header .nav-item,.header .logo,.header .header-cta,
.hero .label,.hero .eyebrow,.hero .photo-caption,
.projects .label,.contact .photo-caption{
  color:#fff!important;
}

/* Textos secundarios: más oscuros y fáciles de leer */
.hero-description,.description,.about-copy p,.process-description,
.about-step p,.stat span,.contact-item p,.contact-intro,
.about-mini-stats span,.contact-card p{
  opacity:1!important;
  color:rgba(0,0,0,.74)!important;
}

/* Excepción para la descripción sobre el hero oscuro */
.hero .hero-description{
  color:rgba(255,255,255,.86)!important;
}

/* Formularios */
.field input,.field textarea{
  font-size:14px!important;
  color:#111!important;
}
.field input::placeholder,.field textarea::placeholder{
  color:rgba(0,0,0,.58)!important;
  opacity:1!important;
  font-size:13px!important;
}

/* Cards y microtextos */
.contact-card span,.contact-card a{
  font-size:11px!important;
  opacity:1!important;
}
.contact-card p{font-size:12px!important;}
.contact-card a{font-weight:500!important;}
.about-mini-stats span{font-size:10px!important;}

/* ===== refined-text-weights ===== */
/* Refinamiento: conservar títulos originales y reforzar solo textos auxiliares */
.label,.eyebrow,.about-kicker,.contact-kicker,
.field label,.contact-card span,.about-mini-stats span,
.about-step span,.stat b,.process-heading,.photo-caption{
  font-weight:500!important;
}

/* Párrafos y textos de apoyo: legibles, sin verse gruesos */
p,.hero-description,.description,.about-copy p,.contact-intro,
.process-description,.about-step p,.stat span,.contact-card p,
input,textarea{
  font-weight:400!important;
}

/* Menú y botones con presencia, pero sin exceso */
.nav-item,.header-cta,.contact-card a,.about-cta,.contact-submit{
  font-weight:500!important;
}

/* Los títulos conservan los pesos originales del diseño */

/* ===== contact-card-icons ===== */
.contact-card{
  display:grid!important;
  grid-template-columns:42px 1fr!important;
  column-gap:18px!important;
  align-items:center!important;
}
.contact-card-icon{
  width:40px!important;
  height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(0,0,0,.22)!important;
  flex-shrink:0!important;
}
.contact-card-icon svg{
  width:18px!important;
  height:18px!important;
  fill:none!important;
  stroke:#111!important;
  stroke-width:1.6!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.contact-card-content{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

/* ===== contact-icons-black-and-links-refined ===== */
/* Iconos: fondo negro, símbolo blanco */
.contact-card-icon{
  background:#111!important;
  border-color:#111!important;
}
.contact-card-icon svg{
  stroke:#fff!important;
}

/* Botones/enlaces: línea corta y ajustada al texto */
.contact-card a{
  display:inline-block!important;
  width:max-content!important;
  align-self:flex-start!important;
  border-bottom:1px solid rgba(0,0,0,.35)!important;
  padding-bottom:3px!important;
  line-height:1.2!important;
}
.contact-card-content a{
  width:max-content!important;
}

/* ===== services-five-columns-legacy ===== */
.services-page{background:#151515;color:#fff;overflow:hidden;display:flex;flex-direction:column;padding-top:76px;}
.services-intro{height:34%;min-height:220px;padding:5vh 4% 7vh;display:flex;align-items:flex-end;gap:8%;}
.services-kicker{font-size:11px;font-weight:500;letter-spacing:1px;opacity:.8;align-self:flex-start;}
.services-intro-copy{max-width:620px;}
.services-intro h2{font-size:clamp(30px,3.3vw,52px);font-weight:500;line-height:1;letter-spacing:-2px;margin-bottom:18px;}
.services-intro p{font-size:13px;line-height:1.8;color:rgba(255,255,255,.86);max-width:500px;}
.services-columns{height:66%;display:flex;width:100%;min-height:0;}
.service-column{position:relative;flex:1;min-width:0;border:0;border-right:1px solid rgba(255,255,255,.16);background:#262626;color:#fff;overflow:hidden;cursor:pointer;text-align:left;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;transition:flex .5s ease,filter .35s ease;}
.service-column:last-child{border-right:0;}
.service-column:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.08));z-index:1;}
.service-column:after{content:"";position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(100%);opacity:.6;transition:.45s;}
.service-column:nth-child(1):after{background-image:url("https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1200&q=85");}
.service-column:nth-child(2):after{background-image:url("https://images.unsplash.com/photo-1505373877841-8d25f7d46678?auto=format&fit=crop&w=1200&q=85");}
.service-column:nth-child(3):after{background-image:url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1200&q=85");}
.service-column:nth-child(4):after{background-image:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1200&q=85");}
.service-column:nth-child(5):after{background-image:url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1200&q=85");}
.service-column:nth-child(6):after{background-image:url("https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=85");}
.service-number,.service-name,.service-plus{position:relative;z-index:2;}
.service-number{position:absolute;top:22px;left:22px;font-size:11px;font-weight:500;}
.service-name{font-size:clamp(15px,1.35vw,22px);font-weight:500;line-height:1.05;letter-spacing:-.5px;}
.service-plus{position:absolute;right:22px;bottom:21px;font-size:22px;font-weight:400;}
.service-column:hover,.service-column.expanded{flex:2.2;}
.service-column:hover:after,.service-column.expanded:after{opacity:.9;transform:scale(1.03);}
@media(max-width:800px){
 .services-intro{height:30%;min-height:210px;padding:4vh 7% 5vh;}
 .services-columns{height:70%;}
 .service-column{padding:14px 10px;}
 .service-name{font-size:12px;word-break:break-word;}
 .service-number{top:12px;left:10px;font-size:10px;}
 .service-plus{right:10px;bottom:12px;}
}

/* ===== services-intro-left-aligned ===== */
.services-intro{
  display:block!important;
  height:34%!important;
  min-height:220px!important;
  padding:5vh 4% 7vh!important;
}
.services-intro-copy{
  width:100%!important;
  max-width:650px!important;
  margin:0!important;
  text-align:left!important;
}
.services-intro h2,
.services-intro p{
  text-align:left!important;
}
.services-intro h2{
  margin-top:0!important;
}

/* ===== services-full-height-columns ===== */
/* Servicios: las 6 columnas ocupan toda la pantalla debajo del header */
.services-page{
  padding-top:76px!important;
  height:100vh!important;
  min-height:100vh!important;
  box-sizing:border-box!important;
}
.services-columns{
  height:100%!important;
  min-height:0!important;
  flex:1!important;
}
.service-column{
  height:100%!important;
}

/* ===== service-detail-back-button ===== */
.service-back{
  position:fixed;top:94px;right:4%;z-index:600;
  border:1px solid rgba(0,0,0,.28);background:#f0f0ec;color:#111;
  padding:10px 15px;font-size:11px;font-weight:500;letter-spacing:.5px;
  cursor:pointer;
}
@media(max-width:800px){.service-back{top:90px;right:7%;}}

/* ===== mazzaglia-columns-restored ===== */
/* Restauración del comportamiento original: suave, reversible y sin quedarse abierto */
#home .service-column,
#services .service-column{
  transition:
    flex .65s cubic-bezier(.25,.46,.45,.94),
    opacity .38s ease !important;
}

#home .service-column .service-image,
#services .service-column .service-image{
  transition:transform .7s cubic-bezier(.25,.46,.45,.94) !important;
}

#home .service-column .service-overlay,
#services .service-column .service-overlay{
  transition:opacity .38s ease !important;
}

#home .service-description,
#services .service-description{
  transition:opacity .3s ease, transform .4s ease !important;
}

/* Solo mientras el cursor está dentro del contenedor */
#home .services-grid:hover .service-column,
#services:hover .service-column{
  flex:1 1 0 !important;
  opacity:.48;
}

#home .service-column:hover,
#services .service-column:hover{
  flex:2.15 1 0 !important;
  opacity:1 !important;
}

#home .service-column:hover .service-image,
#services .service-column:hover .service-image{
  transform:scale(1.035) !important;
}

#home .service-column:hover .service-overlay,
#services .service-column:hover .service-overlay{
  opacity:.5 !important;
}

#home .service-column:hover .service-description,
#services .service-column:hover .service-description{
  opacity:1 !important;
  transform:translateY(0) !important;
}

/* Al salir del contenedor, todas vuelven exactamente a su estado base */
#home .services-grid:not(:hover) .service-column,
#services:not(:hover) .service-column{
  flex:1 1 0 !important;
  opacity:1 !important;
}

/* El JS anterior podía dejar la clase expanded pegada: neutralizarla visualmente */
#home .service-column.expanded,
#services .service-column.expanded{
  flex:1 1 0 !important;
  opacity:1 !important;
}

#home .service-column:hover.expanded,
#services .service-column:hover.expanded{
  flex:2.15 1 0 !important;
}

/* Detalle: conservar los estilos mejorados anteriores sin afectar las columnas */
#service-detail .service-detail-head{
  display:grid !important;
}

/* ===== service-detail-isolated-final ===== */
.service-detail-page{
  display:none;
  position:absolute;
  inset:0;
  z-index:60;
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding:76px 4% 28px;
  background:#f0f0ec;
  color:#161616;
  overflow:hidden;
}
.service-detail-page.is-open{
  display:flex;
  flex-direction:column;
}
.service-detail-page .service-detail-head{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  column-gap:70px;
  padding:clamp(24px,4vh,46px) 0 clamp(18px,3vh,30px);
  border-bottom:1px solid rgba(0,0,0,.15);
}
.service-detail-page .service-detail-copy{
  max-width:760px;
}
.service-detail-page .service-detail-kicker{
  display:block;
  margin-bottom:13px;
  color:rgba(0,0,0,.56);
  font-size:11px;
  font-weight:500;
  letter-spacing:1.5px;
}
.service-detail-page h1{
  margin:0 0 15px;
  color:#171717;
  font-size:clamp(44px,5vw,74px);
  line-height:.96;
  letter-spacing:-.055em;
  font-weight:500;
}
.service-detail-page .service-detail-copy p{
  margin:0;
  max-width:680px;
  color:rgba(0,0,0,.72);
  font-size:15px;
  line-height:1.6;
  font-weight:400;
}
.service-detail-page .service-detail-cta{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-width:205px;
  padding:16px 20px;
  background:#151515;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:500;
  letter-spacing:.35px;
  box-sizing:border-box;
  transition:transform .25s ease, background .25s ease;
}
.service-detail-page .service-detail-cta:hover{
  background:#2b2b2b;
  transform:translateY(-2px);
}
.service-detail-page .service-detail-cta span{
  font-size:18px;
  line-height:1;
}
.service-detail-page .service-gallery{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:10px;
  padding-top:clamp(16px,2.5vh,26px);
}
.service-detail-page .gallery-item{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  overflow:hidden;
  background:#d9d9d5;
  cursor:zoom-in;
}
.service-detail-page .gallery-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(100%);
  transition:transform .55s cubic-bezier(.25,.46,.45,.94), filter .4s ease;
}
.service-detail-page .gallery-item:hover img{
  transform:scale(1.045);
  filter:grayscale(0%);
}
@media(max-width:800px){
  .service-detail-page{padding:76px 6% 18px;}
  .service-detail-page .service-detail-head{
    grid-template-columns:1fr;
    gap:16px;
    padding:22px 0 16px;
  }
  .service-detail-page h1{font-size:clamp(36px,10vw,54px);}
  .service-detail-page .service-detail-copy p{font-size:13px;line-height:1.5;}
  .service-detail-page .service-detail-cta{justify-self:start;}
  .service-detail-page .service-gallery{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(4,minmax(0,1fr));
    gap:6px;
    padding-top:14px;
  }
}

/* ===== detail-uses-global-menu ===== */
/* El detalle queda debajo del header original: exactamente el mismo menú que toda la web */
#service-detail{
  top:76px !important;
  height:calc(100vh - 76px) !important;
  z-index:50 !important;
}

#service-detail.is-open{
  display:flex !important;
}

/* El header original siempre queda por encima de todas las vistas */
header,
.site-header,
#header{
  z-index:100 !important;
}

/* ===== rounded-buttons-global ===== */
/* Botones redondeados en toda la web */
button,
.btn,
.cta,
.cta-button,
.header-cta,
.contact-button,
.service-detail-cta,
a[class*="button"],
a[class*="btn"],
input[type="submit"],
input[type="button"]{
  border-radius:999px !important;
  overflow:hidden;
}

/* Mantener las columnas de servicios rectas: no son botones visuales */
.service-column,
.gallery-item{
  border-radius:0 !important;
}

/* Botones de formulario y enlaces de acción */
form button,
form input[type="submit"]{
  border-radius:999px !important;
}

/* ===== service-detail-animations ===== */
/* Animación de apertura/cierre del panel de detalle de servicio */
.service-detail-page,
#service-detail{
  display:flex !important;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(28px) scale(.99);
  transition:opacity .5s cubic-bezier(.65,0,.35,1),
             transform .6s cubic-bezier(.65,0,.35,1),
             visibility 0s linear .5s;
}
.service-detail-page.is-open,
#service-detail.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:opacity .5s cubic-bezier(.65,0,.35,1),
             transform .6s cubic-bezier(.65,0,.35,1),
             visibility 0s linear 0s;
}

/* Contenido interno: entra con una leve subida + fundido, escalonado */
.service-detail-page .service-back,
.service-detail-page .service-detail-copy,
.service-detail-page .service-detail-cta,
.service-detail-page .gallery-item{
  opacity:0;
  transform:translateY(16px);
}
.service-detail-page.is-open .service-back{
  animation:serviceDetailIn .5s cubic-bezier(.25,.46,.45,.94) .05s forwards;
}
.service-detail-page.is-open .service-detail-copy{
  animation:serviceDetailIn .55s cubic-bezier(.25,.46,.45,.94) .12s forwards;
}
.service-detail-page.is-open .service-detail-cta{
  animation:serviceDetailIn .55s cubic-bezier(.25,.46,.45,.94) .22s forwards;
}
.service-detail-page.is-open .gallery-item{
  animation:serviceDetailIn .6s cubic-bezier(.25,.46,.45,.94) forwards;
}
.service-detail-page.is-open .gallery-item:nth-child(1){animation-delay:.28s;}
.service-detail-page.is-open .gallery-item:nth-child(2){animation-delay:.32s;}
.service-detail-page.is-open .gallery-item:nth-child(3){animation-delay:.36s;}
.service-detail-page.is-open .gallery-item:nth-child(4){animation-delay:.40s;}
.service-detail-page.is-open .gallery-item:nth-child(5){animation-delay:.44s;}
.service-detail-page.is-open .gallery-item:nth-child(6){animation-delay:.48s;}
.service-detail-page.is-open .gallery-item:nth-child(7){animation-delay:.52s;}
.service-detail-page.is-open .gallery-item:nth-child(8){animation-delay:.56s;}
.service-detail-page.is-open .gallery-item:nth-child(9){animation-delay:.60s;}
.service-detail-page.is-open .gallery-item:nth-child(10){animation-delay:.64s;}
.service-detail-page.is-open .gallery-item:nth-child(11){animation-delay:.68s;}
.service-detail-page.is-open .gallery-item:nth-child(12){animation-delay:.72s;}

@keyframes serviceDetailIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

@media(max-width:800px){
  .service-detail-page,
  #service-detail{
    transform:translateY(18px);
  }
  .service-detail-page.is-open,
  #service-detail.is-open{
    transform:translateY(0);
  }
}

@media(prefers-reduced-motion:reduce){
  .service-detail-page,
  #service-detail,
  .service-detail-page .service-back,
  .service-detail-page .service-detail-copy,
  .service-detail-page .service-detail-cta,
  .service-detail-page .gallery-item{
    animation:none !important;
    transition:opacity .2s ease !important;
    transform:none !important;
  }
}

/* ===== service-lightbox-style ===== */
/* El lightbox no tenía ningún estilo: se agrega su presentación + animación */
.service-lightbox{
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(8,8,8,.94);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.service-lightbox.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
.service-lightbox img{
  max-width:86vw;
  max-height:82vh;
  object-fit:contain;
  transform:scale(.94);
  opacity:0;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94), opacity .4s ease;
}
.service-lightbox.open img{
  transform:scale(1);
  opacity:1;
}
.service-lightbox button{
  position:absolute;
  background:none;
  border:0;
  color:#fff;
  cursor:pointer;
  opacity:.75;
  font-size:26px;
  line-height:1;
  transition:opacity .2s ease;
}
.service-lightbox button:hover{opacity:1;}
.lightbox-close{top:26px;right:4%;font-size:30px;}
.lightbox-prev{left:4%;top:50%;transform:translateY(-50%);}
.lightbox-next{right:4%;top:50%;transform:translateY(-50%);}
.lightbox-count{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:11px;letter-spacing:1.3px;opacity:.65;
}
@media(max-width:800px){
  .lightbox-close{top:16px;right:6%;font-size:26px;}
  .lightbox-prev{left:2%;font-size:22px;}
  .lightbox-next{right:2%;font-size:22px;}
}

/* ===== hero-new-projects-badge ===== */
.hero-badge{
  position:absolute;
  right:6%;
  bottom:9%;
  z-index:5;
  width:clamp(140px,13vw,190px);
  height:clamp(140px,13vw,190px);
  border-radius:50%;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-badge-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:heroBadgeSpin 16s linear infinite;
}
.hero-badge-ring text{
  fill:#fff;
  font-size:14.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:500;
}
.hero-badge-arrow{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38%;
  height:38%;
  border-radius:50%;
  background:#fff;
  color:#111;
  font-size:clamp(18px,1.8vw,24px);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94), background .3s ease;
}
.hero-badge:hover .hero-badge-arrow{
  transform:scale(1.1) rotate(45deg);
  background:#d9d9d5;
}
.hero-badge:hover .hero-badge-ring{
  animation-play-state:paused;
}
@keyframes heroBadgeSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@media(max-width:800px){
  .hero-badge{
    right:6%;
    bottom:6%;
    width:112px;
    height:112px;
  }
  .hero-badge-ring text{
    font-size:12.5px;
    letter-spacing:1.4px;
  }
}

/* ===== content-max-width-1450 ===== */
/* Ancho de contenido: máximo 1450px, con 70px de padding lateral cuando la pantalla es más ancha */
@media(min-width:801px){
  .header,
  .hero-top,
  .about-page-simple,
  .about-page,
  .contact-page,
  .service-detail-page{
    padding-left:max(70px, calc((100% - 1450px) / 2)) !important;
    padding-right:max(70px, calc((100% - 1450px) / 2)) !important;
  }
  .project-info{
    left:max(70px, calc((100% - 1450px) / 2)) !important;
  }
  .project-controls{
    right:max(70px, calc((100% - 1450px) / 2)) !important;
  }
}

/* ===== sidebar-layout-final ===== */
:root{--sidebar-w:272px;}

/* ---------- LAYOUT GENERAL ---------- */
@media(min-width:801px){
  .app{padding-left:0!important;}
  /* Los .slide son position:absolute:inset:0 -> se resuelven contra la caja de
     relleno de .app, por lo que el padding no los desplazaba y la 1ª columna
     quedaba debajo del sidebar. Se desplazan con left. */
  .slide{padding-top:0!important;left:var(--sidebar-w)!important;right:0!important;width:auto!important;}
  #service-detail{
    top:0!important;left:var(--sidebar-w)!important;right:0!important;
    width:auto!important;height:100vh!important;
    padding:34px max(56px,calc((100% - 1300px)/2)) 28px!important;
  }
  .service-back{top:30px!important;right:46px!important;}
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  position:fixed;top:0;left:0;z-index:300;
  width:var(--sidebar-w);height:100vh;
  display:flex;flex-direction:column;
  padding:32px 26px 26px;
  background:#0e0e0e;color:#fff;
  border-right:1px solid rgba(255,255,255,.13);
}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:44px;}
.side-logo{
  background:none;border:0;color:#fff;cursor:pointer;text-align:left;
  font-size:14px;font-weight:700;letter-spacing:1.2px;line-height:1.35;
}
.side-logo span{display:block;font-weight:400;font-size:11px;letter-spacing:2.4px;opacity:.55;margin-top:5px;}
.sidebar-toggle{display:none;background:none;border:0;color:#fff;font-size:21px;cursor:pointer;line-height:1;}

.side-nav{display:flex;flex-direction:column;gap:3px;}
.side-nav .nav-item,
.nav-submenu :is(button,a){
  width:100%;text-align:left;background:none;border:0;color:#fff;cursor:pointer;
  font-family:inherit;
}
.side-nav .nav-item{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;
  font-size:13px;font-weight:500;letter-spacing:.6px;
  opacity:.66;transition:opacity .25s ease,padding-left .25s ease;
}
.side-nav .nav-item:hover{opacity:1;padding-left:6px;}
.side-nav .nav-item.active{opacity:1;}
.side-nav .nav-item.active:before{
  content:"";position:absolute;left:-26px;top:50%;transform:translateY(-50%);
  width:12px;height:1px;background:#fff;
}
.side-nav .nav-item:after{display:none!important;}
.nav-caret{font-size:15px;opacity:.6;transition:transform .3s ease;line-height:1;}
.nav-group.open .nav-caret{transform:rotate(45deg);}

.nav-submenu{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.25,.46,.45,.94);
}
.nav-group.open .nav-submenu{grid-template-rows:1fr;}
.nav-submenu-inner{
  overflow:hidden;
  display:flex;flex-direction:column;
  border-left:1px solid rgba(255,255,255,.16);
  margin-left:2px;
}
.nav-submenu :is(button,a){
  padding:8px 0 8px 14px;
  font-size:11.5px;letter-spacing:.5px;line-height:1.35;
  opacity:.55;transition:opacity .22s ease,padding-left .22s ease;
}
.nav-submenu :is(button,a):hover{opacity:1;padding-left:19px;}

.side-cta{
  margin-top:26px;
  width:100%;padding:14px 18px;
  background:#fff;color:#111;border:1px solid #fff;
  font-size:11px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;
  cursor:pointer;transition:.25s;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.side-cta:hover{background:transparent;color:#fff;}

.side-projects{
  margin-top:18px;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 0 0;
  border:0;border-top:1px solid rgba(255,255,255,.14);
  background:none;color:#fff;cursor:pointer;text-align:left;
  font-size:12px;font-weight:500;letter-spacing:.5px;
  opacity:.75;transition:opacity .25s ease;
}
.side-projects:hover{opacity:1;}
.side-projects small{display:block;margin-top:5px;font-size:9.5px;letter-spacing:1.1px;opacity:.55;}
.side-projects-arrow{font-size:16px;}

.side-social{
  margin-top:auto;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;align-items:center;gap:9px;
}
.side-social a{
  width:34px;height:34px;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.26);border-radius:50%;
  color:#fff;text-decoration:none;opacity:.72;transition:.25s;
}
.side-social a:hover{opacity:1;background:#fff;color:#111;border-color:#fff;}
.side-social svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.side-legal{margin-top:16px;font-size:9px;letter-spacing:1px;opacity:.38;}

/* ---------- PORTADA: SOLO LAS 6 COLUMNAS ---------- */
.hero{flex-direction:row!important;height:100%;}
.hero-columns{
  flex:1 1 auto!important;width:100%!important;height:100%!important;
  display:flex!important;flex-direction:row!important;overflow:hidden!important;
}
.hero-columns .service-column{
  flex:1 1 0!important;min-width:0!important;
  border-right:1px solid rgba(255,255,255,.14)!important;border-bottom:0!important;
  transition:flex .65s cubic-bezier(.25,.46,.45,.94),opacity .4s ease!important;
}
.hero-columns .service-column:last-child{border-right:0!important;}
.hero-columns .service-title{
  writing-mode:vertical-rl!important;transform:rotate(180deg)!important;
  white-space:nowrap!important;font-size:clamp(17px,1.6vw,26px)!important;
}
/* El nombre aparece desde abajo, ya en horizontal (sin giro) */
.hero-columns .service-column .service-title{
  transition:opacity .25s ease!important;
}
.hero-columns .service-column.expanded .service-title,
.hero-columns .service-column:hover .service-title{
  writing-mode:horizontal-tb!important;
  white-space:normal!important;
  transform:none!important;
  animation:serviceNameUp .5s cubic-bezier(.25,.46,.45,.94) both!important;
}
@keyframes serviceNameUp{
  from{opacity:0;transform:translateY(34px);}
  to{opacity:1;transform:translateY(0);}
}
.hero-columns .service-column .service-description{
  transition:opacity .3s ease .1s,max-height .4s ease,margin-top .3s ease!important;
}
.hero-columns .service-content{padding:26px 24px!important;}
.hero-columns .service-description{max-width:260px!important;}
.hero-columns:hover .service-column{opacity:.5;}
.hero-columns .service-column:hover{flex:2.2 1 0!important;opacity:1!important;}
.hero-columns .service-column:hover .service-image{filter:grayscale(15%) brightness(.85)!important;}
.hero-columns .service-column:hover .service-description{max-height:120px!important;opacity:.85!important;margin-top:14px!important;}
.hero-columns .service-column:hover .service-arrow{opacity:1!important;transform:translateX(0)!important;}

/* ---------- MÓVIL ---------- */
@media(max-width:800px){
  .app{padding-left:0!important;}
  .sidebar{
    width:100%;height:auto;max-height:100vh;
    padding:16px 20px;overflow-y:auto;
  }
  .sidebar-head{margin-bottom:0;}
  .sidebar-toggle{display:block;}
  .side-nav,.side-cta,.side-badge,.side-social,.side-legal{display:none;}
  .sidebar.open{padding-bottom:26px;}
  .sidebar.open .sidebar-head{margin-bottom:22px;}
  .sidebar.open .side-nav{display:flex;}
  .sidebar.open .side-cta{display:flex;}
  .sidebar.open .side-badge{display:flex;}
  .sidebar.open .side-social{display:flex;}
  .slide{padding-top:62px!important;}
  #service-detail{top:62px!important;height:calc(100vh - 62px)!important;padding:22px 6% 18px!important;}
  .service-back{top:74px!important;right:6%!important;}
  .hero-columns{flex-direction:column!important;}
  .hero-columns .service-column{
    border-right:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important;
  }
  .hero-columns .service-title{
    writing-mode:horizontal-tb!important;transform:none!important;white-space:normal!important;
    font-size:15px!important;
  }
  .hero-columns .service-content{padding:14px 18px!important;}
}

/* ===== sidebar-fixes-and-collapse ===== */
/* ---- Corrección: los botones globales redondeados recortaban el sidebar ---- */
.sidebar,
.sidebar .side-logo,
.sidebar .side-nav .nav-item,
.sidebar .nav-submenu :is(button,a),
.sidebar .side-projects,
.sidebar .side-legal{
  border-radius:0!important;
  overflow:visible!important;
}
.sidebar .side-cta{border-radius:999px!important;overflow:hidden!important;}
.sidebar .sidebar-collapse,
.sidebar .sidebar-toggle,
.side-social a{border-radius:50%!important;overflow:visible!important;}
.sidebar,.sidebar *{box-sizing:border-box;}
.sidebar .side-logo,
.sidebar .side-nav .nav-item,
.sidebar .side-projects,
.sidebar .side-cta{white-space:normal;}

/* ---- Estructura ---- */
.sidebar{
  transition:width .38s cubic-bezier(.25,.46,.45,.94),padding .38s ease;
  overflow:visible;
}
.side-logo{display:flex;align-items:center;min-width:0;}
.logo-full{display:block;}
.logo-mark{display:none;font-size:19px;font-weight:700;letter-spacing:0;}
.side-logo .logo-full > span{display:block;font-weight:400;font-size:11px;letter-spacing:2.4px;opacity:.55;margin-top:5px;}

.sidebar-collapse{
  position:relative;flex:0 0 auto;
  width:30px;height:24px;padding:0;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:0;cursor:pointer;
  border-radius:0!important;
}
.sidebar-collapse span{
  display:block;width:22px;height:1.5px;background:#fff;
  opacity:.7;transition:opacity .25s ease;
}
.sidebar-collapse:hover span{opacity:1;}

/* Ítems con icono + etiqueta */
.side-nav .nav-item{
  display:flex!important;align-items:center;gap:12px;
  justify-content:flex-start!important;
}
.side-nav .nav-item .nav-label{flex:1;}
.nav-ico{
  flex:0 0 18px;width:18px;height:18px;
  display:none;align-items:center;justify-content:center;
}
.nav-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.side-projects{display:flex;align-items:center;gap:12px;}
.side-projects .nav-label{flex:1;}

/* ---- Estado colapsado (escritorio) ---- */
@media(min-width:801px){
  body.nav-collapsed{--sidebar-w:84px;}
  body.nav-collapsed .sidebar{padding:32px 14px 22px;align-items:center;}
  body.nav-collapsed .sidebar-head{
    flex-direction:column;align-items:center;gap:20px;margin-bottom:32px;
  }
  body.nav-collapsed .logo-full{display:none;}
  body.nav-collapsed .logo-mark{display:block;}
  body.nav-collapsed .side-nav{width:100%;gap:8px;}
  body.nav-collapsed .side-nav .nav-item{justify-content:center!important;padding:12px 0;gap:0;}
  body.nav-collapsed .nav-ico{display:flex;}
  body.nav-collapsed .nav-label,
  body.nav-collapsed .nav-caret,
  body.nav-collapsed .side-legal{display:none;}
  body.nav-collapsed .side-nav .nav-item.active:before{left:-14px;width:6px;}
  body.nav-collapsed .nav-submenu{display:none;}
  body.nav-collapsed .side-cta{
    width:46px;height:46px;padding:0;margin:26px auto 0;
    justify-content:center;align-self:center;
  }
  body.nav-collapsed .cta-arrow{font-size:16px;}
  body.nav-collapsed .side-social{flex-direction:column;gap:8px;align-items:center;}
}

/* ---- Móvil: sin colapsar, se usa el botón hamburguesa ---- */
@media(max-width:800px){
  .sidebar-collapse{display:none;}
  .sidebar{overflow-y:auto;}
  .nav-ico{display:flex;}
}

/* ===== sidebar-typography-refine ===== */
/* Ítems del menú más grandes y con blanco pleno */
.sidebar .side-nav .nav-item{
  font-size:15.5px!important;
  font-weight:500!important;
  letter-spacing:.4px!important;
  padding:13px 0!important;
  color:#fff!important;
  opacity:.88!important;
}
.sidebar .side-nav .nav-item:hover,
.sidebar .side-nav .nav-item.active{opacity:1!important;}

/* Lista de servicios: más legible */
.sidebar .nav-submenu :is(button,a){
  font-size:13.5px!important;
  letter-spacing:.3px!important;
  line-height:1.4!important;
  padding:9px 0 9px 16px!important;
  color:#fff!important;
  opacity:.72!important;
}
.sidebar .nav-submenu :is(button,a):hover{opacity:1!important;}
.sidebar .nav-submenu-inner{border-left-color:rgba(255,255,255,.28)!important;}

/* Punta de flecha en lugar del "+" */
.nav-caret{
  display:flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex:0 0 16px;
  opacity:.85;transition:transform .3s ease,opacity .25s ease;
}
.nav-caret svg{
  width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.nav-group.open .nav-caret{transform:rotate(180deg);opacity:1;}

/* Resto del sidebar: blancos más limpios */
.sidebar .side-logo{color:#fff!important;}
.sidebar .side-logo .logo-full > span{opacity:.75!important;}
.sidebar .side-projects{
  font-size:13.5px!important;
  opacity:.9!important;
  color:#fff!important;
}
.sidebar .side-projects small{opacity:.7!important;font-size:10px!important;}
.sidebar .side-cta{font-size:11.5px!important;}
.sidebar .side-social a{opacity:.85!important;border-color:rgba(255,255,255,.4)!important;}
.sidebar .side-legal{opacity:.5!important;}
.sidebar-collapse span{opacity:.85!important;}

/* ===== home-columns-lighter ===== */
/* Columnas de inicio: imágenes más visibles con un velo suave */
.hero-columns .service-image{
  filter:grayscale(35%) brightness(.92)!important;
}
.hero-columns .service-overlay{
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.10) 100%)!important;
}
.hero-columns:hover .service-column{opacity:.72!important;}
.hero-columns .service-column:hover{opacity:1!important;}
.hero-columns .service-column:hover .service-image{
  filter:grayscale(0%) brightness(1)!important;
}
.hero-columns .service-column:hover .service-overlay{
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.05) 100%)!important;
}
/* El texto sigue legible sobre la imagen más clara */
.hero-columns .service-title,
.hero-columns .service-number,
.hero-columns .service-description{
  text-shadow:0 1px 14px rgba(0,0,0,.65);
}

/* ===== hero-intro-overlay ===== */
.hero-intro{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 max(48px,calc((100% - 1100px)/2));
  background:#101010;
  overflow:hidden;
  transition:opacity .7s cubic-bezier(.65,0,.35,1),transform .8s cubic-bezier(.65,0,.35,1),visibility 0s linear .8s;
}
.hero-intro:before{
  content:"";position:absolute;inset:0;
  background:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2200&q=90") center/cover no-repeat;
  filter:grayscale(45%);opacity:.42;
}
.hero-intro:after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.62) 0%,rgba(0,0,0,.82) 100%);
}
.hero-intro-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.hero-intro-kicker{
  display:block;margin-bottom:20px;
  font-size:11px;font-weight:500;letter-spacing:2.2px;color:rgba(255,255,255,.72);
}
.hero-intro-title{
  font-size:clamp(34px,4.4vw,68px);font-weight:500;line-height:1;letter-spacing:-2.5px;
  color:#fff;margin-bottom:26px;
}
.hero-intro-text{
  max-width:600px;margin-left:auto;margin-right:auto;font-size:14px;line-height:1.8;color:rgba(255,255,255,.86);margin-bottom:34px;
}
.hero-intro-skip{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 26px;background:#fff;color:#111;border:1px solid #fff;
  font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:.25s;
}
.hero-intro-skip:hover{background:transparent;color:#fff;}

/* Entrada escalonada del contenido */
.hero-intro-kicker,.hero-intro-title,.hero-intro-text,.hero-intro-skip{
  opacity:0;transform:translateY(22px);
  animation:heroIntroIn .6s cubic-bezier(.25,.46,.45,.94) both;
}
.hero-intro-kicker{animation-delay:.1s;}
.hero-intro-title{animation-delay:.2s;}
.hero-intro-text{animation-delay:.34s;}
.hero-intro-skip{animation-delay:.46s;}
@keyframes heroIntroIn{to{opacity:1;transform:translateY(0);}}

/* Barra de tiempo */
.hero-intro-progress{
  position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:rgba(255,255,255,.14);z-index:3;
}
.hero-intro-progress span{
  display:block;height:100%;width:0;background:#fff;opacity:.75;
  animation:heroIntroBar 3.1s linear .2s forwards;
}
@keyframes heroIntroBar{to{width:100%;}}

/* Salida */
.hero-intro.is-hidden{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-36px);
  transition:opacity .7s cubic-bezier(.65,0,.35,1),transform .8s cubic-bezier(.65,0,.35,1),visibility 0s linear .7s;
}

/* Las columnas entran escalonadas cuando la intro se va */
.hero-columns .service-column{opacity:0;}
body.intro-done .hero-columns .service-column{
  animation:heroColIn .75s cubic-bezier(.25,.46,.45,.94) both;
}
body.intro-done .hero-columns .service-column:nth-child(1){animation-delay:.05s;}
body.intro-done .hero-columns .service-column:nth-child(2){animation-delay:.13s;}
body.intro-done .hero-columns .service-column:nth-child(3){animation-delay:.21s;}
body.intro-done .hero-columns .service-column:nth-child(4){animation-delay:.29s;}
body.intro-done .hero-columns .service-column:nth-child(5){animation-delay:.37s;}
body.intro-done .hero-columns .service-column:nth-child(6){animation-delay:.45s;}
@keyframes heroColIn{
  from{opacity:0;transform:translateY(42px);}
  to{opacity:1;transform:translateY(0);}
}

@media(max-width:800px){
  .hero-intro{padding:0 7%;}
  .hero-intro-title{font-size:34px;letter-spacing:-1.5px;}
  .hero-intro-text{font-size:13px;margin-bottom:26px;}
}
@media(prefers-reduced-motion:reduce){
  .hero-intro-kicker,.hero-intro-title,.hero-intro-text,.hero-intro-skip,
  body.intro-done .hero-columns .service-column{animation:none!important;opacity:1!important;transform:none!important;}
  .hero-intro-progress span{animation-duration:3.1s;}
}

/* ===== intro-collapsed-nav ===== */
/* Durante la portada el sidebar está colapsado; al desplegarse todo reacomoda con transición */
@media(min-width:801px){
  .slide{transition:left .38s cubic-bezier(.25,.46,.45,.94),opacity .55s ease,transform .7s cubic-bezier(.76,0,.24,1)!important;}
  #service-detail{transition:left .38s cubic-bezier(.25,.46,.45,.94),opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1),visibility 0s linear .5s;}
}

/* ===== pages-width-fit ===== */
/* Las secciones ya no viven bajo un header de 76px: el contenido usa todo el
   ancho real de la sección (viewport - sidebar) con paddings consistentes. */
@media(min-width:801px){
  /* --pad debe existir también fuera de .slide: el detalle de servicio es
     hermano de .app y sin la variable su padding se anulaba (var inválida). */
  :root,body,.slide,#service-detail,.service-back{
    --pad:max(48px,calc((100% - 1400px) / 2));
  }

  /* NOSOTROS */
  .about-page-simple{
    padding:0 var(--pad)!important;
    height:100%!important;
    grid-template-columns:1fr 1fr!important;
    gap:6%!important;
  }
  .about-copy{padding:7vh 0 6vh!important;justify-content:center;max-width:none!important;}
  .about-copy h2,.about-copy p{max-width:none!important;}

  /* SERVICIOS */
  .services-page{padding:0!important;height:100%!important;min-height:0!important;}
  .services-columns{height:100%!important;}

  /* PROYECTOS */
  .project-info{
    left:var(--pad)!important;
    right:42%!important;
    max-width:none!important;
  }
  .project-controls{right:var(--pad)!important;}

  /* CONTACTO */
  .contact-page{
    padding:0 var(--pad)!important;
    height:100%!important;min-height:0!important;
    grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)!important;
    gap:6%!important;
  }
  .contact-form-side{max-width:none!important;}
  .contact-intro{max-width:640px!important;}

  /* DETALLE DE SERVICIO */
  #service-detail{
    padding:34px var(--pad) 28px!important;
    top:0!important;left:var(--sidebar-w)!important;right:0!important;
    width:auto!important;height:100vh!important;
  }
  .service-back{
    position:absolute!important;
    top:34px!important;
    right:var(--pad)!important;
    z-index:6!important;
  }
}

/* En móvil se conserva el respiro lateral y el espacio de la barra superior */
@media(max-width:800px){
  .about-page-simple{padding:74px 7% 0!important;}
  .services-page{padding-top:62px!important;}
  .contact-page{padding:80px 7% 40px!important;}
}

/* ===== detail-smooth-and-back-button ===== */
/* 1) El panel de detalle acompaña la apertura/cierre del sidebar sin saltos.
      La regla .is-open tenía más especificidad y no incluía "left". */
#service-detail,
#service-detail.is-open,
.service-detail-page.is-open{
  transition:
    left .38s cubic-bezier(.25,.46,.45,.94),
    padding .38s cubic-bezier(.25,.46,.45,.94),
    opacity .5s cubic-bezier(.65,0,.35,1),
    transform .6s cubic-bezier(.65,0,.35,1),
    visibility 0s linear 0s !important;
}
#service-detail:not(.is-open){
  transition:
    left .38s cubic-bezier(.25,.46,.45,.94),
    padding .38s cubic-bezier(.25,.46,.45,.94),
    opacity .5s cubic-bezier(.65,0,.35,1),
    transform .6s cubic-bezier(.65,0,.35,1),
    visibility 0s linear .5s !important;
}
/* La galería se reajusta con la misma curva */
#service-detail .service-gallery{
  transition:gap .38s ease!important;
}

/* 2) Botón "Volver" en el flujo, arriba a la izquierda, alineado al contenido */
#service-detail .service-back{
  position:static!important;
  align-self:flex-start!important;
  order:-1!important;
  display:inline-flex!important;
  align-items:center;gap:9px;
  margin:0 0 clamp(14px,2.2vh,24px)!important;
  padding:9px 18px 9px 14px!important;
  background:transparent!important;
  border:1px solid rgba(0,0,0,.3)!important;
  border-radius:999px!important;
  color:#111!important;
  font-size:11.5px!important;font-weight:500!important;letter-spacing:.8px!important;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease!important;
}
#service-detail .service-back:hover{
  background:#111!important;color:#fff!important;border-color:#111!important;
}
#service-detail .service-detail-head{
  padding-top:0!important;
}
@media(max-width:800px){
  #service-detail .service-back{
    margin-bottom:14px!important;
    padding:8px 15px 8px 12px!important;
    font-size:11px!important;
  }
}

/* ===== detail-back-in-kicker-slot ===== */
/* El botón "Volver" ocupa el lugar del antiguo kicker "SERVICIO" */
#service-detail .service-detail-kicker{display:none!important;}
#service-detail .service-back{
  order:0!important;
  align-self:flex-start!important;
  margin:0 0 16px!important;
}
#service-detail .service-detail-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
}
@media(max-width:800px){
  #service-detail .service-back{margin-bottom:12px!important;}
}

/* ===== detail-gallery-color ===== */
/* Galería del detalle: fotos a color */
#service-detail .gallery-item img,
.service-detail-page .gallery-item img{
  filter:none!important;
  transition:transform .55s cubic-bezier(.25,.46,.45,.94)!important;
}
#service-detail .gallery-item:hover img,
.service-detail-page .gallery-item:hover img{
  filter:none!important;
  transform:scale(1.045)!important;
}
/* El lightbox también a color */
.service-lightbox img{filter:none!important;}

/* ===== light-sections-whiter ===== */
/* Fondos claros: blanco casi puro en toda la web */
.about,.process,.contact,
.service-detail-page,#service-detail{
  background:#fbfbfa!important;
}
.about-page-simple,.about-page,.contact-page{background:transparent!important;}

/* Superficies secundarias: un gris muy leve para conservar la jerarquía */
.contact-card{background:#f2f2ef!important;}
.contact-cards-side{background:rgba(0,0,0,.10)!important;}
.gallery-item{background:#eeeeeb!important;}
.about-photo{background:#eeeeeb!important;}
.service-back{background:transparent!important;}

/* Separadores un poco más marcados sobre el blanco */
.about-rule,
.about-mini-stats,
.contact-form,
.service-detail-page .service-detail-head{
  border-color:rgba(0,0,0,.16)!important;
}
.field{border-bottom-color:rgba(0,0,0,.22)!important;}

/* ===== about-photo-color ===== */
/* Foto de Nosotros a color */
.about-photo .photo-placeholder,
.about-image{
  filter:none!important;
}

/* ===== services-cards-grid ===== */
.services-page{
  background:#151515;color:#fff;
  display:block!important;
  overflow-y:auto!important;overflow-x:hidden;
}
.services-wrap{
  min-height:100%;
  display:flex;flex-direction:column;
  padding:clamp(38px,6vh,64px) var(--pad) clamp(34px,5vh,52px);
  gap:clamp(26px,4vh,44px);
}
.services-head{max-width:760px;flex:0 0 auto;}
.services-head .services-kicker{
  display:block;margin-bottom:16px;
  font-size:11px;font-weight:500;letter-spacing:2.2px;color:rgba(255,255,255,.7);
}
.services-head h2{
  font-size:clamp(28px,3.2vw,50px);font-weight:500;line-height:1.02;letter-spacing:-2px;
  margin-bottom:18px;color:#fff;
}
.services-head p{
  max-width:620px;font-size:14px;line-height:1.8;color:rgba(255,255,255,.78);
}

.services-grid{
  flex:1 1 auto;min-height:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:minmax(440px,1fr);
  gap:clamp(12px,1.2vw,18px);
}
.svc-card{
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;
  min-width:0;min-height:0;padding:0;
  background:#1e1e1e;border:1px solid rgba(255,255,255,.12);
  border-radius:0!important;
  color:#fff;text-align:left;cursor:pointer;
  transition:border-color .35s ease,transform .45s cubic-bezier(.25,.46,.45,.94);
}
.svc-card:hover{border-color:rgba(255,255,255,.42);transform:translateY(-4px);}
.svc-card-media{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.55;
  transition:opacity .5s ease,transform .8s cubic-bezier(.25,.46,.45,.94);
}
.svc-card:hover .svc-card-media{opacity:.85;transform:scale(1.06);}
.svc-card:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.12) 100%);
  transition:background .4s ease;
}
.svc-card-body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;
  width:100%;padding:clamp(18px,2.2vw,26px);
}
.svc-card-num{
  position:absolute;top:calc(-1 * clamp(18px,2.2vw,26px) + 0px);
  font-size:11px;letter-spacing:1.5px;color:rgba(255,255,255,.75);
}
.svc-card-title{
  font-size:clamp(17px,1.5vw,23px);font-weight:500;line-height:1.1;letter-spacing:-.6px;
  margin-bottom:10px;
}
.svc-card-text{
  font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.78);
  max-width:330px;margin-bottom:14px;
}
.svc-card-link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10.5px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;
  color:#fff;opacity:.65;
  padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.45);
  transition:opacity .3s ease,gap .3s ease;
}
.svc-card-link em{font-style:normal;font-size:14px;}
.svc-card:hover .svc-card-link{opacity:1;gap:14px;}

/* Numeración arriba a la izquierda de cada card */
.svc-card .svc-card-num{
  position:absolute;top:clamp(16px,2vw,22px);left:clamp(18px,2.2vw,26px);
}
.svc-card-body{padding-top:clamp(44px,5vw,58px);}

@media(max-width:1100px){
  /* 5 cards: 3 arriba + 2 abajo, sin huecos */
  .services-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(260px,1fr));}
  .svc-card:nth-child(-n+3){grid-column:span 2;}
  .svc-card:nth-child(n+4){grid-column:span 3;}
}
@media(max-width:800px){
  .services-page{padding-top:62px!important;}
  .services-wrap{padding:26px 7% 38px;gap:24px;}
  .services-head h2{font-size:30px;letter-spacing:-1.2px;}
  .services-head p{font-size:13px;}
  .services-grid{grid-template-columns:1fr;grid-template-rows:none;}
  .svc-card:nth-child(n){grid-column:auto;}
  .svc-card{min-height:210px;}
}

/* ===== services-light-theme ===== */
/* Servicios sobre fondo claro, como Nosotros y Contacto */
.services-page{background:#fbfbfa!important;color:#111!important;}
.services-head .services-kicker{color:rgba(0,0,0,.6)!important;}
.services-head h2{color:#111!important;}
.services-head p{color:rgba(0,0,0,.74)!important;}

/* Cards: la imagen queda a color y el texto pasa a una banda inferior clara */
.svc-card{
  background:#f2f2ef!important;
  border-color:rgba(0,0,0,.14)!important;
  color:#111!important;
  display:flex!important;flex-direction:column!important;justify-content:flex-end!important;
}
.svc-card:hover{border-color:rgba(0,0,0,.4)!important;}
.svc-card-media{opacity:1!important;}
.svc-card:hover .svc-card-media{opacity:1!important;}
.svc-card:after{
  background:linear-gradient(to top,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 42%,rgba(255,255,255,.35) 72%,rgba(255,255,255,0) 100%)!important;
}
.svc-card-body{padding-top:clamp(16px,1.8vw,22px)!important;margin-top:auto;}
.svc-card .svc-card-num{
  top:clamp(14px,1.8vw,20px)!important;left:clamp(18px,2.2vw,26px)!important;
  color:#fff!important;
  background:rgba(0,0,0,.55);
  padding:5px 10px;border-radius:999px;
  font-size:10px!important;letter-spacing:1.3px!important;
}
.svc-card-title{color:#111!important;}
.svc-card-text{color:rgba(0,0,0,.7)!important;}
.svc-card-link{
  color:#111!important;opacity:.75!important;
  border-bottom-color:rgba(0,0,0,.4)!important;
}
.svc-card:hover .svc-card-link{opacity:1!important;}

/* ===== services-cards-dark-media ===== */
/* Sin numeración */
.svc-card .svc-card-num{display:none!important;}

/* Foto con velo oscuro y tipografía blanca */
.svc-card{
  background:#1a1a1a!important;
  border-color:rgba(0,0,0,.16)!important;
  color:#fff!important;
}
.svc-card:hover{border-color:rgba(0,0,0,.42)!important;}
.svc-card-media{opacity:.9!important;}
.svc-card:hover .svc-card-media{opacity:1!important;}
.svc-card:after{
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.68) 45%,rgba(0,0,0,.35) 75%,rgba(0,0,0,.2) 100%)!important;
}
.svc-card:hover:after{
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.58) 48%,rgba(0,0,0,.22) 78%,rgba(0,0,0,.08) 100%)!important;
}
.svc-card-body{padding:clamp(18px,2.2vw,26px)!important;margin-top:auto;}
.svc-card-title{color:#fff!important;}
.svc-card-text{color:rgba(255,255,255,.82)!important;}
.svc-card-link{
  color:#fff!important;opacity:.7!important;
  border-bottom-color:rgba(255,255,255,.5)!important;
}
.svc-card:hover .svc-card-link{opacity:1!important;}

/* ===== pages-consistency-unified ===== */
/* ===== SISTEMA COMÚN DE MEDIDAS =====
   Mismo ancho útil, mismos paddings y misma escala tipográfica en
   Servicios, Detalle de servicio, Contacto y Nosotros. */
@media(min-width:801px){
  :root,body,.slide,#service-detail,.service-back,.services-wrap,
  .project-detail-page,#project-detail{
    --pad:max(48px,calc((100% - 1400px) / 2));
    --pad-y:clamp(40px,6vh,68px);
  }

  /* --- Paddings idénticos --- */
  .services-wrap{padding:var(--pad-y) var(--pad)!important;gap:clamp(28px,4.5vh,46px)!important;}
  #service-detail{padding:var(--pad-y) var(--pad)!important;}
  .contact-page{padding:var(--pad-y) var(--pad)!important;align-items:center!important;}
  .about-page-simple{padding:0 var(--pad)!important;}
  .about-copy{padding:var(--pad-y) 0!important;}

  /* --- Columna de contenido de igual ancho --- */
  .services-head,
  .contact-form-side,
  #service-detail .service-detail-copy{
    max-width:820px!important;
  }
  .services-head p,
  .contact-intro,
  #service-detail .service-detail-copy p{
    max-width:640px!important;
  }
}

/* --- Escala tipográfica compartida (todas las pantallas) --- */
.services-head .services-kicker,
.contact-kicker{
  display:block!important;
  font-size:11px!important;font-weight:500!important;letter-spacing:2.2px!important;
  margin-bottom:16px!important;
  color:rgba(0,0,0,.6)!important;opacity:1!important;
}
.services-head h2,
.contact-form-side h2,
#service-detail h1{
  font-size:clamp(30px,3.4vw,54px)!important;
  font-weight:500!important;
  line-height:1.02!important;
  letter-spacing:-2px!important;
  margin:0 0 18px!important;
  color:#111!important;
}
.services-head p,
.contact-intro,
#service-detail .service-detail-copy p{
  font-size:14px!important;
  line-height:1.8!important;
  color:rgba(0,0,0,.74)!important;
  margin:0!important;
}

/* --- Botones de acción con la misma altura y tipografía --- */
.contact-submit,
#service-detail .service-detail-cta,
.about-cta{
  padding:14px 24px!important;
  font-size:11.5px!important;font-weight:600!important;
  letter-spacing:1px!important;text-transform:uppercase!important;
}

/* --- Separadores homogéneos --- */
.contact-form,
#service-detail .service-detail-head{
  border-color:rgba(0,0,0,.16)!important;
}
#service-detail .service-detail-head{
  padding:0 0 clamp(20px,3vh,32px)!important;
  margin-bottom:0!important;
  column-gap:60px!important;
}
#service-detail .service-gallery{
  padding-top:clamp(18px,2.6vh,28px)!important;
}
.contact-form{padding-top:clamp(18px,2.6vh,26px)!important;margin-top:clamp(14px,2vh,22px)!important;}

@media(max-width:800px){
  .services-wrap{padding:24px 7% 38px!important;}
  #service-detail{padding:22px 7% 20px!important;}
  .contact-page{padding:78px 7% 40px!important;}
  .about-page-simple{padding:74px 7% 0!important;}
}

/* ===== sidebar-cta-spacing ===== */
.sidebar .side-cta{margin-top:30px!important;}
@media(max-width:800px){.sidebar .side-cta{margin-top:22px!important;}}

/* ===== map-modal-style ===== */
.map-modal{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;
  padding:5vh 5vw;
  background:rgba(8,8,8,.78);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
.map-modal.open{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .35s ease,visibility 0s linear 0s;
}
.map-modal-box{
  width:min(980px,100%);max-height:88vh;
  display:flex;flex-direction:column;
  background:#fbfbfa;color:#111;
  border-radius:0;overflow:hidden;
  transform:translateY(22px) scale(.98);
  transition:transform .45s cubic-bezier(.25,.46,.45,.94);
}
.map-modal.open .map-modal-box{transform:translateY(0) scale(1);}
.map-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;border-bottom:1px solid rgba(0,0,0,.14);
}
.map-modal-kicker{
  display:block;margin-bottom:7px;
  font-size:10.5px;font-weight:500;letter-spacing:2px;color:rgba(0,0,0,.55);
}
.map-modal-head strong{font-size:17px;font-weight:500;letter-spacing:-.4px;}
.map-modal-close{
  width:36px;height:36px;flex:0 0 36px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(0,0,0,.22);
  border-radius:50%!important;
  color:#111;font-size:21px;line-height:1;cursor:pointer;
  transition:.25s;
}
.map-modal-close:hover{background:#111;color:#fff;border-color:#111;}
.map-modal-frame{
  flex:1 1 auto;min-height:0;
  height:min(56vh,460px);background:#e9e9e6;
}
.map-modal-frame iframe{display:block;width:100%;height:100%;border:0;}
.map-modal-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 26px;border-top:1px solid rgba(0,0,0,.14);
  font-size:12px;color:rgba(0,0,0,.7);
}
.map-modal-foot a{
  color:#111;text-decoration:none;font-size:11px;font-weight:500;
  letter-spacing:1px;text-transform:uppercase;
  border-bottom:1px solid rgba(0,0,0,.4);padding-bottom:3px;
}
.map-modal-foot a:hover{border-color:#111;}
@media(max-width:700px){
  .map-modal{padding:0;}
  .map-modal-box{width:100%;max-height:100vh;height:100vh;}
  .map-modal-frame{height:auto;}
  .map-modal-head,.map-modal-foot{padding:16px 20px;}
  .map-modal-foot{flex-direction:column;align-items:flex-start;gap:10px;}
}

/* ===== projects-split-gallery ===== */
/* ================= ÚLTIMOS PROYECTOS ================= */
.projects{background:#0b0b0b;overflow:hidden;}
.project-split{
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  column-gap:clamp(26px,2.6vw,44px);
  padding:var(--pad-y) var(--pad);
}
.project-side{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  min-width:0;padding-right:clamp(6px,1vw,18px);
}
.project-side .project-count{
  margin:0 0 20px!important;
  font-size:11px;font-weight:500;letter-spacing:2px;color:rgba(255,255,255,.62);
}
.project-side .project-name{
  font-size:clamp(30px,3.4vw,54px)!important;
  font-weight:500;line-height:1.02;letter-spacing:-2px;
  color:#fff;margin:0 0 14px;overflow-wrap:break-word;
}
.project-side .project-category{
  margin:0 0 22px!important;
  font-size:11px;letter-spacing:1.6px;color:rgba(255,255,255,.66);
}
.project-side .project-text{
  margin:0;max-width:460px;
  font-size:14px!important;line-height:1.8!important;color:rgba(255,255,255,.8)!important;
}
.project-controls{
  position:static!important;
  display:flex;gap:12px;
  margin-top:clamp(26px,4vh,42px);
  padding-top:clamp(18px,2.6vh,26px);
  border-top:1px solid rgba(255,255,255,.16);
  width:100%;max-width:340px;
}
.pc-btn{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 16px!important;
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.32)!important;
  border-radius:999px!important;
  font-size:10.5px!important;font-weight:500;letter-spacing:1.1px;text-transform:uppercase;
  cursor:pointer;transition:.25s;
}
.pc-btn:hover{background:#fff;color:#111;border-color:#fff!important;}
.pc-ico{font-size:14px;line-height:1;}

/* --- Galería 2 columnas x 6 filas --- */
.project-gallery{
  min-width:0;min-height:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(6,minmax(0,1fr));
  gap:8px;
}
.project-gallery button{
  position:relative;display:block;
  width:100%;height:100%;min-width:0;min-height:0;
  padding:0;border:0;border-radius:0!important;
  overflow:hidden;background:#161616;cursor:zoom-in;
  opacity:0;animation:projThumbIn .5s cubic-bezier(.25,.46,.45,.94) both;
}
.project-gallery img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.25,.46,.45,.94),opacity .4s ease;
  opacity:.88;
}
.project-gallery button:hover img{transform:scale(1.05);opacity:1;}
@keyframes projThumbIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

/* ================= LIGHTBOX ================= */
.project-lightbox{
  position:fixed;inset:0;z-index:1300;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,8,.94);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
.project-lightbox.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s ease,visibility 0s linear 0s;}
.project-lightbox img{max-width:86vw;max-height:82vh;object-fit:contain;}
.project-lightbox button{
  position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  opacity:.75;font-size:26px;line-height:1;transition:opacity .2s ease;
}
.project-lightbox button:hover{opacity:1;}
.pl-close{top:26px;right:4%;font-size:30px;}
.pl-prev{left:4%;top:50%;transform:translateY(-50%);}
.pl-next{right:4%;top:50%;transform:translateY(-50%);}
.pl-count{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:#fff;font-size:11px;letter-spacing:1.3px;opacity:.65;}

/* ================= MÓVIL ================= */
@media(max-width:800px){
  .projects{overflow-y:auto;}
  .project-split{
    grid-template-columns:1fr;
    padding:78px 7% 40px;
    row-gap:26px;height:auto;min-height:100%;
  }
  .project-side{justify-content:flex-start;padding-right:0;}
  .project-side .project-name{font-size:32px;letter-spacing:-1.2px;}
  .project-controls{max-width:none;}
  .project-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(6,120px);
    gap:6px;
  }
}

/* ===== sidebar-logo-social-and-readability ===== */
/* ====== LOGO CON IMAGEN ====== */
.side-logo{
  padding:0!important;background:none!important;border:0!important;
  display:flex!important;align-items:center!important;
  min-width:0;line-height:0;
}
.side-logo img{display:block;height:auto;}
.side-logo .logo-full{
  width:100%;max-width:150px;
  object-fit:contain;
}
.side-logo .logo-mark{
  display:none;
  width:40px;max-width:40px;
  object-fit:contain;
}

/* ====== CABECERA DEL SIDEBAR: ALINEACIÓN ====== */
.sidebar-head{
  display:flex!important;align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;min-height:44px;
}
.sidebar-collapse{
  width:30px!important;height:30px!important;flex:0 0 30px!important;
  align-items:center!important;
  padding:0!important;margin:0!important;
}

/* Colapsado: miniatura y hamburguesa centradas sobre el mismo eje
   que los iconos del menú (18px de icono dentro de 56px útiles) */
@media(min-width:801px){
  body.nav-collapsed .sidebar{padding-left:14px!important;padding-right:14px!important;}
  body.nav-collapsed .sidebar-head{
    flex-direction:column!important;align-items:center!important;
    gap:18px!important;margin-bottom:30px!important;
  }
  body.nav-collapsed .side-logo{
    width:100%;justify-content:center!important;
  }
  body.nav-collapsed .side-logo .logo-full{display:none!important;}
  body.nav-collapsed .side-logo .logo-mark{display:block!important;margin:0 auto;}
  body.nav-collapsed .sidebar-collapse{
    margin:0 auto!important;justify-content:center!important;
  }
  body.nav-collapsed .sidebar-collapse span{margin:0 auto;}
  body.nav-collapsed .side-nav .nav-item{width:100%;}
  body.nav-collapsed .side-social{width:100%;}
}

/* ====== REDES SOCIALES: FONDO BLANCO, ICONO NEGRO ====== */
.side-social a{
  background:#fff!important;
  border:1px solid #fff!important;
  color:#111!important;
  opacity:1!important;
  transition:background .25s ease,color .25s ease,transform .25s ease!important;
}
.side-social a:hover{
  background:#111!important;color:#fff!important;
  border-color:rgba(255,255,255,.55)!important;
  transform:translateY(-2px);
}
.side-social svg{stroke:currentColor!important;}

/* ====== TEXTOS DE APOYO MÁS GRANDES Y LEGIBLES ====== */
.contact-intro,
.services-head p,
#service-detail .service-detail-copy p,
.about-copy p,
.svc-card-text,
.project-side .project-text,
.hero-intro-text{
  font-size:15.5px!important;
  line-height:1.75!important;
  letter-spacing:.1px!important;
  font-weight:400!important;
}
.contact-intro,
.services-head p,
#service-detail .service-detail-copy p,
.about-copy p{
  color:rgba(0,0,0,.8)!important;
  max-width:660px!important;
}
.svc-card-text{
  font-size:13.5px!important;line-height:1.6!important;
  color:rgba(255,255,255,.86)!important;max-width:340px!important;
}
.project-side .project-text{color:rgba(255,255,255,.86)!important;max-width:480px!important;}
.hero-intro-text{color:rgba(255,255,255,.9)!important;}
.field input,.field textarea{font-size:15px!important;}
.field input::placeholder,.field textarea::placeholder{font-size:14px!important;}
.contact-card p{font-size:13px!important;line-height:1.6!important;}
.about-mini-stats span{font-size:11px!important;}

@media(max-width:800px){
  .contact-intro,.services-head p,#service-detail .service-detail-copy p,
  .about-copy p,.project-side .project-text,.hero-intro-text{
    font-size:14.5px!important;line-height:1.72!important;
  }
}

/* ====== BARRA DE TIEMPO DE LA PORTADA MÁS VISIBLE ====== */
.hero-intro-progress{
  height:4px!important;
  background:rgba(255,255,255,.22)!important;
}
.hero-intro-progress span{
  opacity:1!important;
  background:#fff!important;
  box-shadow:0 0 14px rgba(255,255,255,.55);
}

/* ===== home-columns-no-borders ===== */
/* Sin líneas divisorias entre las columnas de la portada */
.hero-columns .service-column,
.hero-columns .service-column:last-child{
  border:0!important;
  box-shadow:none!important;
}

/* ===== poppins-body-text ===== */
/* Poppins solo para textos de apoyo, etiquetas, botones y menú.
   Los títulos (h1, h2, h3 y nombres de servicio/proyecto) conservan
   la tipografía original de la marca. */
:root{--font-ui:'Poppins',Arial,Helvetica,sans-serif;}

/* --- Menú lateral --- */
.side-nav .nav-item,
.side-nav .nav-label,
.nav-submenu :is(button,a),
.side-cta,
.side-legal{
  font-family:var(--font-ui)!important;
}

/* --- Párrafos y textos de apoyo --- */
p,span,small,li,label,figcaption,
.services-head .services-kicker,
.contact-kicker,
.contact-intro,
.services-head p,
.svc-card-text,.svc-card-link,
.about-copy p,.about-mini-stats span,
.project-side .project-count,
.project-side .project-category,
.project-side .project-text,
.pc-btn,
#service-detail .service-detail-copy p,
#service-detail .service-detail-cat,
.service-back,
.hero-intro-kicker,.hero-intro-text,.hero-intro-skip,
.contact-card,.contact-card strong,.contact-card p,.contact-card a,
.map-modal-kicker,.map-modal-foot,.map-modal-foot a,
.pl-count{
  font-family:var(--font-ui)!important;
}

/* --- Formulario y botones --- */
.field label,.field input,.field textarea,
.contact-submit,
.project-view,
#service-detail .service-detail-cta,
.about-cta{
  font-family:var(--font-ui)!important;
}

/* --- Los títulos NO cambian --- */
h1,h2,h3,h4,
.hero-intro-title,
.services-head h2,
.contact-form-side h2,
.about-copy h2,
.project-side .project-name,
.svc-card-title,
.hero-columns .service-title,
#service-detail h1,
.map-modal-head strong{
  font-family:Arial,Helvetica,sans-serif!important;
}

/* Poppins es algo más ancha: pequeños ajustes de tracking */
.side-nav .nav-item{letter-spacing:.2px!important;}
.nav-submenu :is(button,a){letter-spacing:.15px!important;}
.side-cta,.pc-btn,.contact-submit,.project-view,
#service-detail .service-detail-cta,.service-back{letter-spacing:.9px!important;}

/* ===== nav-hover-slide ===== */
/* Desplazamiento lateral al pasar el mouse */
.side-nav .nav-item{
  transition:opacity .25s ease,transform .3s cubic-bezier(.25,.46,.45,.94)!important;
  padding-left:0!important;
  will-change:transform;
}
.side-nav .nav-item:hover{
  transform:translateX(10px);
  padding-left:0!important;
}
/* El ítem activo mantiene la posición base; solo se desplaza en hover */
.side-nav .nav-item.active{transform:none;}
.side-nav .nav-item.active:hover{transform:translateX(10px);}

.nav-submenu :is(button,a){
  transition:opacity .22s ease,transform .28s cubic-bezier(.25,.46,.45,.94)!important;
  padding-left:16px!important;
}
.nav-submenu :is(button,a):hover{
  transform:translateX(8px);
  padding-left:16px!important;
}

/* Colapsado: sin desplazamiento, los iconos permanecen centrados */
@media(min-width:801px){
  body.nav-collapsed .side-nav .nav-item,
  body.nav-collapsed .side-nav .nav-item:hover,
  body.nav-collapsed .side-nav .nav-item.active{transform:none!important;}
  body.nav-collapsed .side-nav .nav-item:hover{opacity:1!important;}
}

/* ===== nav-underline-hover ===== */
/* Línea que se dibuja de izquierda a derecha bajo cada ítem */
.side-nav .nav-item{position:relative;}
.side-nav .nav-item:after{
  content:""!important;
  display:block!important;
  position:absolute;
  left:0;bottom:4px;
  width:64px;height:1px;
  background:#fff;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .38s cubic-bezier(.25,.46,.45,.94);
  opacity:.85;
}
.side-nav .nav-item:hover:after{transform:scaleX(1);}
/* El ítem activo no muestra la línea: solo aparece en hover */
.side-nav .nav-item.active:after{transform:scaleX(0);}
.side-nav .nav-item.active:hover:after{transform:scaleX(1);}

/* Lo mismo en la lista de servicios */
.nav-submenu :is(button,a){position:relative;}
.nav-submenu :is(button,a):after{
  content:"";position:absolute;
  left:16px;bottom:3px;width:44px;height:1px;
  background:#fff;opacity:.7;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .34s cubic-bezier(.25,.46,.45,.94);
}
.nav-submenu :is(button,a):hover:after{transform:scaleX(1);}

/* Colapsado: sin subrayado, solo iconos */
@media(min-width:801px){
  body.nav-collapsed .side-nav .nav-item:after{display:none!important;}
}

/* ===== cta-arrow-circle ===== */
/* Flecha del CTA dentro de un círculo */
.side-cta{
  padding:8px 8px 8px 20px!important;
  gap:12px!important;
  align-items:center!important;
}
.side-cta .cta-arrow{
  flex:0 0 34px;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:#111;color:#fff;
  font-size:15px;line-height:1;
  transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(.25,.46,.45,.94);
}
.side-cta:hover .cta-arrow{
  background:#fff;color:#111;
  transform:translateX(3px);
}

/* Colapsado: solo el círculo con la flecha */
@media(min-width:801px){
  body.nav-collapsed .side-cta{
    padding:0!important;gap:0!important;
    width:46px;height:46px;
  }
  body.nav-collapsed .side-cta .cta-arrow{
    flex:0 0 auto;width:100%;height:100%;font-size:16px;
  }
}

/* ===== cta-arrow-svg-align ===== */
.side-cta .cta-arrow{
  padding:0!important;
  font-size:0!important;line-height:0!important;
}
.side-cta .cta-arrow svg{
  display:block;
  width:15px;height:15px;
  fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
@media(min-width:801px){
  body.nav-collapsed .side-cta .cta-arrow svg{width:16px;height:16px;}
}

/* ===== mobile-menu-transition ===== */
@media(max-width:800px){
  /* El panel crece y se contrae en lugar de aparecer de golpe */
  .sidebar{
    max-height:62px;
    overflow:hidden;
    transition:max-height .48s cubic-bezier(.25,.46,.45,.94),
               padding .38s ease,
               background .3s ease;
  }
  .sidebar.open{
    max-height:100vh;
    overflow-y:auto;
  }

  /* Los elementos permanecen en el DOM y se animan */
  .sidebar .side-nav{display:flex!important;}
  .sidebar .side-cta{display:flex!important;}
  .sidebar .side-social{display:flex!important;}
  .sidebar .side-legal{display:block!important;}

  .sidebar .side-nav,
  .sidebar .side-cta,
  .sidebar .side-social,
  .sidebar .side-legal{
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:opacity .3s ease,transform .38s cubic-bezier(.25,.46,.45,.94);
  }
  .sidebar.open .side-nav,
  .sidebar.open .side-cta,
  .sidebar.open .side-social,
  .sidebar.open .side-legal{
    opacity:1;transform:translateY(0);pointer-events:auto;
  }
  .sidebar.open .side-nav{transition-delay:.1s;}
  .sidebar.open .side-cta{transition-delay:.22s;}
  .sidebar.open .side-social{transition-delay:.28s;}
  .sidebar.open .side-legal{transition-delay:.32s;}

  /* Entrada escalonada de cada ítem */
  .sidebar .side-nav .nav-item,
  .sidebar .side-nav .nav-group{
    opacity:0;transform:translateX(-14px);
    transition:opacity .32s ease,transform .42s cubic-bezier(.25,.46,.45,.94);
  }
  .sidebar.open .side-nav .nav-item,
  .sidebar.open .side-nav .nav-group{opacity:1;transform:translateX(0);}
  .sidebar.open .side-nav > *:nth-child(1){transition-delay:.14s;}
  .sidebar.open .side-nav > *:nth-child(2){transition-delay:.2s;}
  .sidebar.open .side-nav > *:nth-child(3){transition-delay:.26s;}
  .sidebar.open .side-nav > *:nth-child(4){transition-delay:.32s;}
  .sidebar.open .side-nav > *:nth-child(5){transition-delay:.38s;}

  /* Botón hamburguesa: se convierte en X */
  .sidebar-toggle{
    display:flex!important;flex-direction:column;justify-content:center;gap:5px;
    width:28px;height:24px;padding:0;font-size:0!important;
  }
  .sidebar-toggle:before,
  .sidebar-toggle:after{
    content:"";display:block;width:22px;height:1.5px;background:#fff;
    transition:transform .4s cubic-bezier(.25,.46,.45,.94);
  }
  .sidebar.open .sidebar-toggle:before{transform:translateY(3.25px) rotate(45deg);}
  .sidebar.open .sidebar-toggle:after{transform:translateY(-3.25px) rotate(-45deg);}
}

/* ===== whatsapp-float ===== */
.wa-float{
  position:fixed;right:26px;bottom:26px;z-index:1400;
  display:inline-flex;align-items:center;gap:0;
  height:58px;padding:0;
  background:#25D366;color:#fff;text-decoration:none;
  border-radius:999px;
  box-shadow:0 8px 26px rgba(0,0,0,.32);
  overflow:hidden;
  transition:gap .35s cubic-bezier(.25,.46,.45,.94),
             padding .35s cubic-bezier(.25,.46,.45,.94),
             transform .3s ease,
             box-shadow .3s ease,
             background .25s ease;
}
.wa-float svg{
  flex:0 0 58px;width:58px;height:58px;
  padding:16px;
  fill:#fff;position:relative;z-index:2;
}
.wa-float-label{
  max-width:0;opacity:0;white-space:nowrap;
  font-family:'Poppins',Arial,Helvetica,sans-serif;
  font-size:13px;font-weight:500;letter-spacing:.3px;
  overflow:hidden;position:relative;z-index:2;
  transition:max-width .4s cubic-bezier(.25,.46,.45,.94),opacity .3s ease;
}
.wa-float:hover{
  background:#1fb855;
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  padding-right:22px;
}
.wa-float:hover .wa-float-label{max-width:160px;opacity:1;}

/* Halo intermitente */
.wa-float-pulse{
  position:absolute;left:29px;top:29px;
  width:58px;height:58px;margin:-29px 0 0 -29px;
  border-radius:50%;background:#25D366;
  opacity:.55;z-index:1;
  animation:waPulse 2.6s cubic-bezier(.25,.46,.45,.94) infinite;
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.5;}
  70%{transform:scale(1.55);opacity:0;}
  100%{transform:scale(1.55);opacity:0;}
}

/* No compite con el lightbox ni con el modal del mapa */
.project-lightbox.open ~ .wa-float,
.map-modal.open ~ .wa-float{opacity:0;pointer-events:none;}

@media(max-width:800px){
  .wa-float{right:16px;bottom:16px;height:52px;}
  .wa-float svg{flex:0 0 52px;width:52px;height:52px;padding:14px;}
  .wa-float-pulse{left:26px;top:26px;width:52px;height:52px;margin:-26px 0 0 -26px;}
  .wa-float-label{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .wa-float-pulse{animation:none;}
}

/* ===== fail-safe-visibility ===== */
/* ==========================================================
   A PRUEBA DE FALLOS
   El contenido nunca depende de que una animación se ejecute
   para ser visible. Si las animaciones están desactivadas
   (prefers-reduced-motion, ajustes del sistema, extensiones),
   todo se ve igual, solo sin el efecto de entrada.
   ========================================================== */

/* --- Detalle de servicio --- */
.service-detail-page .service-back,
.service-detail-page .service-detail-copy,
.service-detail-page .service-detail-cta,
.service-detail-page .gallery-item{
  opacity:1!important;
  transform:none;
}
.service-detail-page.is-open .service-back,
.service-detail-page.is-open .service-detail-copy,
.service-detail-page.is-open .service-detail-cta,
.service-detail-page.is-open .gallery-item{
  animation-name:sdFadeUp;
  animation-fill-mode:both;
}
@keyframes sdFadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

/* --- Galería de proyectos --- */
.project-gallery button{
  opacity:1!important;
  animation-name:projThumbIn;
  animation-fill-mode:both;
}

/* --- Portada --- */
.hero-intro-kicker,.hero-intro-title,.hero-intro-text,.hero-intro-skip{
  opacity:1!important;transform:none;
  animation-name:heroIntroIn;animation-fill-mode:both;
}
.hero-columns .service-column{opacity:1!important;}

/* --- Si el sistema pide menos movimiento: sin animación, pero visible --- */
@media(prefers-reduced-motion:reduce){
  .service-detail-page .service-back,
  .service-detail-page .service-detail-copy,
  .service-detail-page .service-detail-cta,
  .service-detail-page .gallery-item,
  .service-detail-page.is-open .service-back,
  .service-detail-page.is-open .service-detail-copy,
  .service-detail-page.is-open .service-detail-cta,
  .service-detail-page.is-open .gallery-item,
  .project-gallery button,
  .hero-intro-kicker,.hero-intro-title,.hero-intro-text,.hero-intro-skip,
  .hero-columns .service-column{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .service-detail-page.is-open,#service-detail.is-open,
  .projects,.hero-intro{transition:none!important;}
}

/* --- El panel debe poder desplazarse si la pantalla es corta --- */
#service-detail{overflow-y:auto!important;}
#service-detail .service-gallery{flex:1 1 auto;min-height:220px;}

/* ===== sidebar-short-screen-fix ===== */
/* ==========================================================
   Pantallas poco altas: al abrir el dropdown de servicios el
   contenido crecía y el CTA se comprimía. Ahora el sidebar
   reparte el espacio correctamente y desplaza si hace falta.
   ========================================================== */
@media(min-width:801px){
  .sidebar{
    overflow-y:auto;
    overflow-x:visible;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.28) transparent;
  }
  .sidebar::-webkit-scrollbar{width:4px;}
  .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px;}
  .sidebar::-webkit-scrollbar-track{background:transparent;}

  /* Ningún bloque puede encogerse por debajo de su tamaño real */
  .sidebar-head,
  .side-nav,
  .side-cta,
  .side-social,
  .side-legal{flex-shrink:0!important;}

  /* El CTA conserva siempre su altura */
  .side-cta{
    min-height:50px;
    height:50px;
    box-sizing:border-box;
  }
  .side-cta .cta-arrow{flex:0 0 34px!important;height:34px!important;}

  /* El submenú puede desplazarse en lugar de empujar todo hacia abajo */
  .nav-group.open .nav-submenu-inner{
    max-height:min(38vh,300px);
    overflow-y:auto;
    scrollbar-width:thin;
  }
  .nav-group.open .nav-submenu-inner::-webkit-scrollbar{width:3px;}
  .nav-group.open .nav-submenu-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);}
}

/* Pantallas realmente bajas: se compacta todo un poco */
@media(min-width:801px) and (max-height:760px){
  .sidebar{padding:22px 26px 18px;}
  .sidebar-head{margin-bottom:26px!important;}
  .side-logo .logo-full{max-width:126px;}
  .sidebar .side-nav .nav-item{padding:10px 0!important;font-size:14.5px!important;}
  .sidebar .nav-submenu :is(button,a){padding:7px 0 7px 16px!important;font-size:12.5px!important;}
  .side-cta{margin-top:18px!important;min-height:46px;height:46px;}
  .side-social{padding-top:16px!important;gap:7px;}
  .side-social a{width:31px;height:31px;flex:0 0 31px;}
  .side-legal{margin-top:11px;}
}

@media(min-width:801px) and (max-height:620px){
  .sidebar{padding:16px 22px 14px;}
  .sidebar-head{margin-bottom:18px!important;}
  .sidebar .side-nav .nav-item{padding:8px 0!important;font-size:13.5px!important;}
  .side-cta{margin-top:14px!important;min-height:42px;height:42px;font-size:10.5px!important;}
  .side-cta .cta-arrow{flex:0 0 30px!important;height:30px!important;}
  .side-legal{display:none;}
}

/* ===== contact-card-data-size ===== */
/* Datos de contacto un poco más pequeños */
.contact-card strong{
  font-size:14.5px!important;
  line-height:1.35!important;
  letter-spacing:-.1px!important;
  word-break:break-word;
}
@media(max-width:800px){
  .contact-card strong{font-size:13.5px!important;}
}

/* ===== home-columns-true-image ===== */
/* Las fotos de la portada se muestran tal cual, sin filtros de color */
.hero-columns .service-image,
.hero-columns .service-column:hover .service-image,
.hero-columns .service-column.expanded .service-image{
  filter:none!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
/* Velo mínimo, solo el necesario para leer el nombre */
.hero-columns .service-overlay{
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.24) 42%,rgba(0,0,0,0) 78%)!important;
  opacity:1!important;
}
.hero-columns .service-column:hover .service-overlay{
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.16) 50%,rgba(0,0,0,0) 82%)!important;
  opacity:1!important;
}
.hero-columns:hover .service-column{opacity:1!important;}
.hero-columns .service-column:hover{opacity:1!important;}

/* ===== kill-ghost-column-images ===== */
/* El archivo original pintaba una SEGUNDA imagen sobre cada columna
   mediante .service-column:nth-child(n):after (fotos antiguas).
   Esa capa fantasma se elimina para que se vean solo las de img/. */
.hero-columns .service-column:after,
.hero-columns .service-column:nth-child(1):after,
.hero-columns .service-column:nth-child(2):after,
.hero-columns .service-column:nth-child(3):after,
.hero-columns .service-column:nth-child(4):after,
.hero-columns .service-column:nth-child(5):after,
.hero-columns .service-column:nth-child(6):after{
  content:none!important;
  display:none!important;
  background-image:none!important;
}
/* El degradado base también se anula: el velo lo aporta .service-overlay */
.hero-columns .service-column:before{
  content:none!important;
  display:none!important;
}
/* La imagen real queda al fondo, por debajo del velo y del texto */
.hero-columns .service-image{z-index:0!important;}
.hero-columns .service-overlay{z-index:1!important;}
.hero-columns .service-content{z-index:2!important;}

/* ===== home-columns-slight-opacity ===== */
/* Ligera atenuación en reposo; al pasar el mouse la foto va a color pleno */
.hero-columns .service-image{
  opacity:.52!important;
  transition:opacity .5s ease,transform .7s cubic-bezier(.25,.46,.45,.94)!important;
}
.hero-columns .service-column:hover .service-image,
.hero-columns .service-column.expanded .service-image{
  opacity:1!important;
}

/* ===== hero-intro-local-bg ===== */
/* Fondo local de la portada de entrada + velo oscuro */
.hero-intro:before{
  background:url("/img/fondo.jpg") center/cover no-repeat!important;
  filter:none!important;
  opacity:1!important;
}
.hero-intro:after{
  background:linear-gradient(180deg,rgba(32,32,34,.78) 0%,rgba(26,26,28,.84) 50%,rgba(20,20,22,.9) 100%)!important;
}

/* ===== services-five-cards ===== */
/* Servicios: 5 cards altas en una sola fila (ocupan el alto de las dos filas anteriores) */
.svc-card-title{font-size:clamp(16px,1.35vw,21px)!important;line-height:1.12!important;margin-bottom:12px!important;}
.svc-card-text{font-size:13px!important;line-height:1.6!important;max-width:none!important;}
.svc-card-body{padding:clamp(18px,1.8vw,24px)!important;}
@media(max-width:1100px){.svc-card-title{font-size:clamp(17px,2vw,22px)!important;}}

/* ===== link-elements-reset ===== */
/* Los botones de navegación ahora son enlaces reales (<a>): mismo aspecto que los botones anteriores */
a.side-logo,a.nav-item,.nav-submenu a,a.service-column,a.svc-card{text-decoration:none;-webkit-tap-highlight-color:transparent;}
a.service-column,a.svc-card{display:flex;}

/* ===== collapsed-cta-circle ===== */
/* Menú colapsado: el botón de la flecha es un círculo perfecto (ancho = alto en todas las alturas de pantalla) */
@media(min-width:801px){
  body.nav-collapsed .sidebar .side-cta{
    --cta-size:50px;
    width:var(--cta-size)!important;height:var(--cta-size)!important;min-height:var(--cta-size)!important;
    padding:0!important;box-sizing:border-box!important;border-radius:50%!important;
  }
  body.nav-collapsed .sidebar .side-cta .cta-arrow{flex:0 0 34px!important;width:34px!important;height:34px!important;}
}
@media(min-width:801px) and (max-height:760px){
  body.nav-collapsed .sidebar .side-cta{--cta-size:46px;}
}
@media(min-width:801px) and (max-height:620px){
  body.nav-collapsed .sidebar .side-cta{--cta-size:42px;}
  body.nav-collapsed .sidebar .side-cta .cta-arrow{flex:0 0 30px!important;width:30px!important;height:30px!important;}
}

/* ===== svc-card-no-border ===== */
.svc-card,
.svc-card:hover{border:0!important;}

/* ===== mobile-legal-fix ===== */
/* En móvil el menú cerrado mide 62px, pero el copyright sobresalía y se veía
   sobre el contenido (una regla con !important le forzaba opacity:.5).
   Ahora solo se muestra cuando el menú está abierto. */
@media(max-width:800px){
  .sidebar{overflow:hidden!important;}
  .sidebar.open{overflow-y:auto!important;}
  .sidebar:not(.open) .side-legal{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  }
  .sidebar.open .side-legal{opacity:.5!important;visibility:visible!important;}
}

/* ===== mobile-top-spacing-unified ===== */
/* En móvil .slide ya reserva 62px para la barra superior. Nosotros, Contacto
   y Proyectos sumaban otros 74-80px (+40px en Nosotros) encima; ahora usan el
   mismo espacio superior que Servicios (24px). */
@media(max-width:800px){
  .about-page-simple{padding-top:24px!important;}
  .about-copy{padding-top:0!important;}
  .contact-page{padding-top:24px!important;}
  .project-split{padding-top:24px!important;}
}

/* ===== mobile-viewport-height-fix ===== */
/* En móvil 100vh incluye el espacio de la barra de direcciones del navegador,
   por eso la última fila del inicio quedaba cortada. 100dvh usa la altura
   realmente visible (el 100vh queda como respaldo para navegadores viejos). */
@media(max-width:800px){
  .app{height:100vh!important;height:100dvh!important;min-height:0!important;}
  #service-detail{
    height:calc(100vh - 62px)!important;
    height:calc(100dvh - 62px)!important;
  }
}

/* ===== mobile-normal-scroll ===== */
/* En móvil solo el INICIO queda encajonado en la pantalla (100dvh).
   Nosotros, Servicios, Proyectos y Contacto fluyen con el scroll normal del
   navegador. :has() detecta que el inicio no es la página activa. */
@media(max-width:800px){
  html:has(#slide0:not(.active)),
  body:has(#slide0:not(.active)){
    height:auto!important;min-height:100%!important;
    overflow-x:hidden!important;overflow-y:auto!important;
  }
  body:has(#slide0:not(.active)) .app{
    height:auto!important;min-height:100dvh!important;overflow:visible!important;
  }
  body:has(#slide0:not(.active)) .slide:not(.active){display:none!important;}
  body:has(#slide0:not(.active)) .slide.active{
    position:relative!important;inset:auto!important;left:auto!important;right:auto!important;
    width:100%!important;height:auto!important;min-height:100dvh!important;
    overflow:visible!important;transform:none!important;
  }
  body:has(#slide0:not(.active)) .about-page-simple,
  body:has(#slide0:not(.active)) .about-page,
  body:has(#slide0:not(.active)) .contact-page,
  body:has(#slide0:not(.active)) .project-split,
  body:has(#slide0:not(.active)) .services-wrap,
  body:has(#slide0:not(.active)) .services-page{
    height:auto!important;min-height:0!important;overflow:visible!important;
  }
  /* El panel de detalle de un servicio sigue siendo una hoja con scroll propio;
     que ese scroll no arrastre la página que queda detrás. */
  #service-detail{overscroll-behavior:contain;}
}

/* ===== mobile-service-detail-flow ===== */
/* En móvil, la página de cada servicio también usa el scroll normal del
   navegador (antes era una hoja fija de 100dvh con scroll interno). */
@media(max-width:800px){
  html:has(#service-detail.is-open),
  body:has(#service-detail.is-open){
    height:auto!important;min-height:100%!important;
    overflow-x:hidden!important;overflow-y:auto!important;
  }
  body:has(#service-detail.is-open) .app{
    height:auto!important;min-height:0!important;overflow:visible!important;
  }
  /* las páginas de abajo se ocultan; el menú superior (dentro de .app) sigue fijo */
  body:has(#service-detail.is-open) .slide{display:none!important;}
  #service-detail.is-open{
    position:relative!important;top:auto!important;left:auto!important;right:auto!important;
    width:100%!important;height:auto!important;min-height:100dvh!important;
    overflow:visible!important;transform:none!important;opacity:1!important;visibility:visible!important;
    padding:84px 7% 40px!important;   /* 62px del menú + 22px de aire */
    z-index:1!important;
  }
  /* la galería ya no reparte una altura fija: cada foto es un cuadrado */
  #service-detail.is-open .service-gallery{
    flex:none!important;min-height:0!important;
    grid-template-rows:none!important;grid-auto-rows:auto!important;
  }
  #service-detail.is-open .gallery-item{height:auto!important;aspect-ratio:1/1;}
  #service-detail.is-open .gallery-item img{position:absolute;inset:0;width:100%;height:100%;}
}

/* ===== mobile-about-bottom-spacing ===== */
/* Nosotros (móvil): aire debajo de la foto y separación entre texto y foto */
@media(max-width:800px){
  .about-page-simple{padding-bottom:40px!important;}
  .about-photo{margin-top:32px!important;}
}

/* ===== mobile-service-gallery-2cols ===== */
/* Detalle de servicio (móvil): 2 fotos por fila = 6 filas de 12 fotos */
@media(max-width:800px){
  #service-detail.is-open .service-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
}

/* ===== social-icons-improved ===== */
/* Íconos más nítidos: trazo uniforme, mayor tamaño dentro del círculo */
.side-social a svg{
  width:18px!important;height:18px!important;
  fill:none!important;stroke:currentColor!important;
  stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;
}
.side-social a svg .ico-fill{fill:currentColor!important;stroke:none!important;}
@media(min-width:801px) and (max-height:760px){
  .side-social a svg{width:16px!important;height:16px!important;}
}
/* Menú móvil: botones un poco más grandes */
@media(max-width:800px){
  .sidebar .side-social{gap:14px!important;padding-top:22px!important;}
  .sidebar .side-social a{width:44px!important;height:44px!important;flex:0 0 44px!important;}
  .sidebar .side-social a svg{width:22px!important;height:22px!important;}
}

/* ===== mobile-top-spacing-plus20 ===== */
/* Móvil (todas las páginas menos el inicio): +20px entre el header y el contenido */
@media(max-width:800px){
  .about-page-simple{padding-top:44px!important;}
  .contact-page{padding-top:44px!important;}
  .project-split{padding-top:44px!important;}
  .services-wrap{padding-top:44px!important;}
  #service-detail.is-open{padding-top:104px!important;}   /* 62px menú + 42px */
}

/* ===== social-icons-png ===== */
/* Los íconos del menú son ahora imágenes PNG de /img/icono/ */
.side-social a img{
  display:block;width:100%;height:100%;
  object-fit:contain;border-radius:50%;
  transition:transform .25s ease,opacity .25s ease;
}
.side-social a:hover img{transform:scale(1.06);}
.side-social a{padding:0!important;overflow:hidden!important;}

/* ===== mobile-social-icons-smaller ===== */
/* Menú móvil: íconos sociales más pequeños (antes 44px) */
@media(max-width:800px){
  .sidebar .side-social{gap:12px!important;}
  .sidebar .side-social a{width:36px!important;height:36px!important;flex:0 0 36px!important;}
}

/* ===== lightbox-circle-buttons ===== */
/* Flechas y cerrar de los visores de fotos (Proyectos y galería de servicios):
   cada una dentro de un círculo translúcido grande; todo el círculo es el botón. */
.service-lightbox button,
.project-lightbox button{
  display:flex!important;align-items:center;justify-content:center;
  width:58px!important;height:58px!important;padding:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.34)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff!important;font-size:26px!important;line-height:1!important;
  opacity:1!important;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease,border-color .2s ease,transform .2s ease!important;
}
.service-lightbox button:hover,
.project-lightbox button:hover{
  background:rgba(255,255,255,.30)!important;
  border-color:rgba(255,255,255,.7)!important;
}
.service-lightbox button:active,
.project-lightbox button:active{background:rgba(255,255,255,.42)!important;}
.lightbox-prev:hover,.lightbox-next:hover,.pl-prev:hover,.pl-next:hover{
  transform:translateY(-50%) scale(1.07)!important;
}
.lightbox-close,.pl-close{top:24px!important;right:4%!important;font-size:30px!important;}
.lightbox-close:hover,.pl-close:hover{transform:scale(1.07)!important;}
@media(max-width:800px){
  .service-lightbox button,
  .project-lightbox button{width:48px!important;height:48px!important;font-size:22px!important;}
  .lightbox-prev,.pl-prev{left:12px!important;}
  .lightbox-next,.pl-next{right:12px!important;}
  .lightbox-close,.pl-close{top:14px!important;right:14px!important;font-size:26px!important;}
}

/* ===== lightbox-circles-more-transparent ===== */
/* Círculos más transparentes en reposo; al pasar el mouse se vuelven más visibles */
.service-lightbox button,
.project-lightbox button{
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,255,255,.16)!important;
  color:rgba(255,255,255,.8)!important;
}
.service-lightbox button:hover,
.project-lightbox button:hover{
  background:rgba(255,255,255,.32)!important;
  border-color:rgba(255,255,255,.75)!important;
  color:#fff!important;
}
.service-lightbox button:active,
.project-lightbox button:active{background:rgba(255,255,255,.45)!important;}

/* ===== lightbox-buttons-above-image ===== */
/* La imagen del visor tiene transform/opacity (crea su propia capa) y está después
   de la flecha izquierda en el HTML, así que la tapaba. Los botones suben de capa. */
.service-lightbox img,
.project-lightbox img{position:relative;z-index:1;}
.service-lightbox button,
.project-lightbox button,
.lightbox-count,.pl-count{z-index:5!important;}

/* ===== lightbox-arrows-equal ===== */
/* Las flechas ← y → eran caracteres de texto y cada uno se dibujaba con distinto
   tamaño según la fuente del teléfono. Ahora son dibujos idénticos (espejo exacto). */
.lightbox-prev,.lightbox-next,.pl-prev,.pl-next{font-size:0!important;}
.lightbox-prev::before,.lightbox-next::before,.pl-prev::before,.pl-next::before{
  content:"";display:block;width:24px;height:24px;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.lightbox-prev::before,.pl-prev::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
}
.lightbox-next::before,.pl-next::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}
@media(max-width:800px){
  .lightbox-prev::before,.lightbox-next::before,.pl-prev::before,.pl-next::before{width:22px;height:22px;}
}

/* ===== lightbox-arrows-fix-double ===== */
/* La regla ".service-lightbox button{font-size:26px!important}" (más específica)
   mantenía visible la flecha de texto junto al dibujo: se oculta el texto con
   un selector de mayor especificidad. Queda solo el dibujo. */
.service-lightbox button.lightbox-prev,
.service-lightbox button.lightbox-next,
.project-lightbox button.pl-prev,
.project-lightbox button.pl-next{
  font-size:0!important;line-height:0!important;
}
@media(max-width:800px){
  .service-lightbox button.lightbox-prev,
  .service-lightbox button.lightbox-next,
  .project-lightbox button.pl-prev,
  .project-lightbox button.pl-next{font-size:0!important;}
}