/* ============================================================
   de la Cruz Estudio — hoja de estilos
   Paleta: --crema (#E9E1D9) / --tinta (#111111)
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Satisfy&display=swap');

:root{
  --crema:#E9E1D9;
  --tinta:#111111;
  --crema-osc:#D8CCBF;
  --tinta-suave:#2b2b2b;
  --blanco:#FFFFFF;
  --linea: rgba(17,17,17,0.14);
  --serif: 'Fraunces', serif;
  --sans: 'Montserrat', sans-serif;
  --max: 1240px;
  --pad: 6vw;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--tinta);}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--crema);
  color:var(--tinta);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  margin:0;
  line-height:1.05;
  letter-spacing:-0.01em;
}
p{margin:0;line-height:1.7;}
button{font-family:var(--sans);cursor:pointer;}

:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}

/* ---------- Top bar / anuncio fino ---------- */
.topbar{
  background:var(--tinta);
  color:var(--crema);
  text-align:center;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:8px 12px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.lang-switch{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; gap:6px; font-size:.7rem; letter-spacing:.08em;
}
.lang-switch a{
  color:rgba(233,225,217,.55); transition:color .2s ease;
}
.lang-switch a.is-active{color:var(--crema); font-weight:600;}
.lang-switch a:hover{color:var(--crema);}
.lang-switch span{color:rgba(233,225,217,.35);}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:500;
  background:var(--crema);
  border-bottom:1px solid var(--linea);
}
.nav{
  max-width:var(--max); margin:0 auto; padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:.01em;
  white-space:nowrap;
  display:flex; align-items:center; gap:10px;
}
.logo-icon{
  height:50px; width:auto; display:block;
}
.logo-script{
  font-family:'Satisfy', cursive;
  font-weight:400;
  font-size:32px;
}
.logo-sans{
  font-family:var(--sans);
  font-weight:400;
}
.nav-links{
  display:flex; gap:42px;
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
}
.nav-links a{
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--tinta);
  transition:width .35s ease;
}
.nav-links a:hover::after, .nav-links a.is-active::after{width:100%;}
.nav-links a.is-active{font-style:italic;}

.nav-cta{
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--tinta);
  padding:10px 22px;
  transition:background .3s ease, color .3s ease;
}
.nav-cta:hover{background:var(--tinta); color:var(--crema);}

.burger{
  display:none;
  width:32px; height:22px; position:relative; background:none; border:none; padding:0;
  z-index:500;
}
.burger span{
  position:absolute; left:0; width:100%; height:1px; background:var(--tinta);
  transition:transform .3s ease, opacity .3s ease;
}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:10px;}
.burger span:nth-child(3){top:20px;}
.burger.open span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

/* ---------- Hero slider (Inicio) ---------- */
.hero{
  position:relative; height:92vh; min-height:560px;
  overflow:hidden;
  color:var(--crema);
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.6s ease, transform 7s ease;
}
.hero-slide.is-active{opacity:1; transform:scale(1);}
.hero-slide img{
  width:100%; height:100%; object-fit:cover;
}
.hero-slide::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,17,17,.18) 0%, rgba(17,17,17,.32) 60%, rgba(17,17,17,.55) 100%);
}
.hero-content{
  position:relative; z-index:5;
  height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  max-width:1600px; margin:0 auto;
  padding:0 var(--pad) 64px;
}
.hero-eyebrow{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  opacity:.9; margin-bottom:22px;
  display:flex; align-items:center; gap:14px;
}
.hero-eyebrow::before{content:'';width:34px;height:1px;background:var(--crema);}
.hero h1{
  font-size:clamp(2.6rem, 6.4vw, 5.4rem);
  max-width:14ch;
  color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero h1 em{font-style:italic; font-weight:300;}
.hero-sub{
  margin-top:26px; max-width:46ch;
  font-size:1.05rem; font-weight:300; opacity:.92;
}
.hero-dots{
  position:absolute; right:var(--pad); bottom:54px; z-index:6;
  display:flex; flex-direction:column; gap:14px;
}
.hero-dots button{
  width:8px; height:8px; border-radius:50%;
  background:transparent; border:1px solid var(--crema);
  padding:0; opacity:.7; transition:all .35s ease;
}
.hero-dots button.is-active{background:var(--crema); opacity:1; transform:scale(1.25);}
.hero-index{
  position:absolute; left:var(--pad); bottom:54px; z-index:6;
  font-size:.78rem; letter-spacing:.1em;
}

.scroll-cue{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:6; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; opacity:.85;
}
.scroll-cue .line{width:1px; height:28px; background:var(--crema); animation:cue 2.2s ease-in-out infinite;}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top;}50%{transform:scaleY(1); transform-origin:top;}50.01%{transform-origin:bottom;}100%{transform:scaleY(0); transform-origin:bottom;}}

/* ---------- Comparador Antes / Después (hero) ---------- */
.hero-ba{background:var(--crema);}
.ba-compare{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:hidden; user-select:none;
}
.ba-img{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block; pointer-events:none;
}
.ba-before-wrap{
  position:absolute; top:0; left:0; bottom:0;
  width:50%; overflow:hidden;
}
.ba-before-wrap .ba-img{
  position:absolute; top:0; left:0;
  width:100vw; max-width:none; height:100%; object-fit:cover;
}
.ba-compare::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,17,17,0) 55%, rgba(17,17,17,.55) 100%);
  pointer-events:none; z-index:4;
}
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:var(--crema);
  transform:translateX(-1px);
  cursor:ew-resize; z-index:10;
  display:flex; align-items:center; justify-content:center;
}
.ba-handle-inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
}
.ba-handle-grip svg{width:20px; height:20px;}
.ba-handle-grip{
  width:46px; height:46px; border-radius:50%;
  background:var(--crema); color:var(--tinta);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  animation:ba-pulse 1.8s ease-in-out infinite;
}
@keyframes ba-pulse{
  0%, 100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}
.ba-hint{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%);
  white-space:nowrap;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--crema); background:rgba(17,17,17,.5);
  padding:7px 16px;
  opacity:1; transition:opacity .5s ease;
}
.ba-hint.is-hidden{opacity:0;}
.ba-tag{
  position:absolute; top:28px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--crema); background:rgba(17,17,17,.45);
  padding:8px 16px; z-index:5;
}
.ba-tag-before{left:24px;}
.ba-tag-after{right:24px;}

.hero-content-ba{
  z-index:6; pointer-events:none;
}

@media (max-width:760px){
  .ba-handle-grip{width:40px; height:40px;}
}

/* Comparador dentro de una tarjeta de proyecto (no a pantalla completa) */
.proyecto-ba{
  position:relative;
  width:100%; aspect-ratio:16/9;
  overflow:hidden;
  background:var(--tinta);
}
.proyecto-ba .ba-tag{top:20px;}
.proyecto-ba .ba-tag-before{left:20px;}
.proyecto-ba .ba-tag-after{right:20px;}

.proyecto-bloque{margin-bottom:90px;}
.proyecto-bloque:last-child{margin-bottom:0;}
.proyecto-bloque-info{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:10px;
  margin-bottom:24px;
}
.proyecto-bloque-info h3{font-size:clamp(1.6rem,2.6vw,2.2rem);}
.proyecto-bloque-info .cat-label{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave);
}

/* ---------- Secciones generales ---------- */
section{padding:120px 0;}
.section-tight{padding:80px 0;}
.eyebrow{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta-suave);
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
}
.eyebrow::before{content:'';width:34px;height:1px;background:var(--tinta);}
.eyebrow-no-line::before{display:none;}

.intro-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.intro-grid h2{font-size:clamp(2rem, 3.6vw, 3rem); max-width:16ch;}
.intro-grid p{font-size:1.02rem; color:var(--tinta-suave); max-width:42ch;}

/* Filosofía / valores */
.valores{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--linea);
  margin-top:80px;
}
.valor{
  padding:42px 36px 0; border-right:1px solid var(--linea);
}
.valor:last-child{border-right:none;}
.valor .num{font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--tinta-suave); margin-bottom:18px; display:block;}
.valor h3{font-size:1.3rem; margin-bottom:14px; min-height:2.4em;}
.valor p{font-size:.95rem; color:var(--tinta-suave);}

/* Proyectos destacados / grid */
.proyectos-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  background:var(--tinta);
}
.proyecto-card{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  background:var(--tinta);
}
.proyecto-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  filter:saturate(.94);
}
.proyecto-card:hover img{transform:scale(1.06);}
.proyecto-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:34px;
  background:linear-gradient(180deg, rgba(17,17,17,0) 40%, rgba(17,17,17,.78) 100%);
  color:var(--crema);
}
.proyecto-overlay .cat{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85; margin-bottom:8px;
}
.proyecto-overlay h3{font-family:var(--serif); font-size:1.5rem; font-weight:400;}
.proyecto-overlay .ver{
  margin-top:14px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; opacity:0; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.proyecto-card:hover .ver{opacity:1; transform:translateY(0);}

/* Listado completo de proyectos (página) */
.filtros{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:54px;
}
.filtro{
  border:1px solid var(--tinta); padding:9px 20px;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; transition:background .3s ease, color .3s ease;
}
.filtro.is-active, .filtro:hover{background:var(--tinta); color:var(--crema);}

/* CTA banda */
.cta-band{
  background:var(--crema); color:var(--tinta);
  padding:110px 0; text-align:center;
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
.cta-band h2{font-size:clamp(2rem,4vw,3.2rem); max-width:18ch; margin:0 auto 30px;}
.cta-band p{color:var(--tinta-suave); max-width:46ch; margin:0 auto 40px;}

.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid currentColor; padding:15px 34px;
  transition:background .3s ease, color .3s ease;
}
.btn-light{color:var(--crema);}
.btn-light:hover{background:var(--crema); color:var(--tinta);}
.btn-dark{color:var(--tinta);}
.btn-dark:hover{background:var(--tinta); color:var(--crema);}

/* ---------- Conóceme ---------- */
.about-hero{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:0; align-items:stretch;
  margin-top:0;
}
.about-hero .img-col{position:relative; min-height:560px; background:var(--tinta);}
.about-hero .img-col img{width:100%; height:100%; object-fit:cover;}
.about-hero .text-col{
  display:flex; flex-direction:column; justify-content:center;
  padding:80px var(--pad);
}
.about-hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem); margin-bottom:26px;}
.about-hero p{font-size:1.05rem; color:var(--tinta-suave); max-width:48ch;}
.signature{
  margin-top:36px; font-family:var(--serif); font-style:italic; font-size:1.3rem;
}

.trayectoria{
  display:grid; grid-template-columns:.7fr 1.3fr; gap:80px;
}
.timeline{border-top:1px solid var(--linea);}
.timeline-item{
  display:grid; grid-template-columns:110px 1fr; gap:30px;
  padding:34px 0; border-bottom:1px solid var(--linea);
}
.timeline-item .year{font-family:var(--serif); font-style:italic; color:var(--tinta-suave);}
.timeline-item h4{font-size:1.1rem; margin-bottom:8px; font-family:var(--sans); font-weight:600;}
.timeline-item p{color:var(--tinta-suave); font-size:.95rem;}

.about-quote{
  font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.2rem);
  font-style:italic; line-height:1.4; max-width:24ch;
}

/* ---------- Contacto ---------- */
.contacto-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:90px;
}
.contacto-info h2{font-size:clamp(2rem,3.6vw,2.8rem); margin-bottom:24px; max-width:14ch;}
.contacto-info p{color:var(--tinta-suave); max-width:40ch; margin-bottom:46px;}
.info-list{list-style:none; padding:0; margin:0; border-top:1px solid var(--linea);}
.info-list li{
  display:flex; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--linea);
  font-size:.95rem;
}
.info-list .label{color:var(--tinta-suave); letter-spacing:.06em; text-transform:uppercase; font-size:.74rem;}
.socials{margin-top:40px; display:flex; gap:24px; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;}
.socials a{border-bottom:1px solid var(--tinta); padding-bottom:3px;}

.field{margin-bottom:26px;}
.field label{
  display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-suave); margin-bottom:10px;
}
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:none;
  border-bottom:1px solid var(--linea);
  font-family:var(--sans); font-size:1rem; color:var(--tinta);
  padding:10px 0; transition:border-color .3s ease;
}
.field textarea{resize:vertical; min-height:110px;}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--tinta); outline:none;
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:30px;}

.phone-input{
  display:flex; align-items:flex-end; gap:10px;
}
.phone-input select{
  width:auto; flex:none; max-width:130px;
  border-bottom:1px solid var(--linea);
  padding:10px 4px 10px 0;
  font-family:var(--sans); font-size:.85rem; color:var(--tinta);
  background:transparent; border-top:none; border-left:none; border-right:none;
}
.phone-input input{flex:1;}
.form-msg{margin-top:18px; font-size:.88rem;}
.form-msg.ok{color:#3a6b4a;}
.form-msg.err{color:#9b3b3b;}

/* ---------- Footer ---------- */
footer{
  background:var(--tinta); color:var(--crema);
  padding:56px 0 28px;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:center;
  gap:30px; flex-wrap:wrap;
  padding-bottom:32px; margin-bottom:24px;
  border-bottom:1px solid rgba(233,225,217,.15);
}
.footer-brand{display:flex; flex-direction:column; gap:8px;}
.footer-brand .logo{font-size:1.3rem;}
.footer-brand .logo-script, .footer-brand .logo-sans{color:var(--crema);}
.footer-tagline{font-size:.85rem; color:rgba(233,225,217,.65); max-width:30ch;}
.footer-social-group{display:flex; align-items:center; gap:14px;}
.footer-social-label{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(233,225,217,.65);}
.footer-social{display:flex; gap:14px;}
.footer-social a{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(233,225,217,.3);
  display:flex; align-items:center; justify-content:center;
  color:var(--crema);
  transition:background .25s ease, border-color .25s ease;
}
.footer-social a:hover{background:rgba(233,225,217,.12); border-color:rgba(233,225,217,.5);}
.footer-social svg{width:18px; height:18px;}
.footer-col h4{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; margin-bottom:18px;
}
.footer-col a, .footer-col p{
  display:block; color:var(--tinta-suave); font-size:.92rem; margin-bottom:10px;
}
.footer-bottom{
  display:flex; justify-content:center;
  font-size:.76rem; color:rgba(233,225,217,.5);
  flex-wrap:wrap; gap:10px;
}

/* ---------- Acciones rápidas (Contacto) ---------- */
.quick-actions{
  display:flex; gap:18px; flex-wrap:wrap;
}
.quick-action{
  display:flex; align-items:center; justify-content:center; gap:12px;
  border:1px solid var(--linea);
  padding:16px 26px;
  min-width:190px;
  background:transparent;
  font-family:var(--sans);
  font-size:.85rem; letter-spacing:.04em;
  color:var(--tinta);
  transition:border-color .3s ease, background .3s ease;
}
.quick-action:hover{border-color:var(--tinta); background:rgba(17,17,17,.03);}
.quick-icon{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--tinta);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.quick-icon svg{width:18px; height:18px;}

.phone-modal{
  position:fixed; inset:0; z-index:1000;
  background:rgba(17,17,17,.55);
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.phone-modal.is-open{display:flex;}
.phone-modal-card{
  position:relative;
  background:var(--crema);
  padding:48px 40px;
  max-width:340px; width:100%;
  text-align:center;
}
.phone-modal-close{
  position:absolute; top:16px; right:16px;
  background:none; border:none; font-size:1rem; color:var(--tinta);
  width:32px; height:32px;
}
.phone-number{
  font-family:var(--serif); font-size:2rem; margin-bottom:28px;
}

@media (max-width:760px){
  .quick-actions{flex-direction:column;}
  .quick-action{justify-content:flex-start;}
}

/* ---------- Botón flotante de contacto ---------- */
.float-cta{
  position:fixed; right:28px; bottom:28px; z-index:400;
  display:flex; align-items:center; gap:12px;
  background:var(--tinta); color:var(--crema);
  padding:16px 22px;
  font-family:var(--sans); font-size:.82rem; letter-spacing:.03em;
  box-shadow:0 8px 24px rgba(17,17,17,.25);
  transition:transform .3s ease, box-shadow .3s ease;
}
.float-cta:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(17,17,17,.3);}
.float-cta svg{width:18px; height:18px; flex:none;}

@media (max-width:760px){
  .float-cta{
    right:16px; bottom:16px; left:16px;
    justify-content:center;
    padding:14px 20px;
  }
}

/* ---------- Botón flotante — versión incrustada (Inicio) ---------- */
.float-cta-inline{
  position:static;
  display:inline-flex;
  box-shadow:none;
  margin-top:0;
}
.float-cta-inline:hover{transform:none; box-shadow:none; opacity:.85;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .intro-grid{grid-template-columns:1fr; gap:34px;}
  .valores{grid-template-columns:1fr;}
  .valor{border-right:none; border-bottom:1px solid var(--linea); padding-bottom:34px;}
  .about-hero{grid-template-columns:1fr;}
  .about-hero .img-col{min-height:380px;}
  .trayectoria{grid-template-columns:1fr; gap:40px;}
  .contacto-grid{grid-template-columns:1fr; gap:60px;}
  .proyectos-grid{grid-template-columns:1fr 1fr;}
  .footer-top{flex-direction:column; align-items:flex-start; gap:28px;}
  .footer-social-group{flex-direction:row; gap:14px;}
}

@media (max-width:760px){
  :root{--pad:5vw;}

  /* Topbar */
  .topbar{
    font-size:.62rem;
    padding:8px var(--pad);
    justify-content:flex-start;
    text-align:left;
  }
  .lang-switch{position:static; margin-left:auto; transform:none;}

  /* Navegación */
  .nav-links{
    position:fixed; inset:0; top:57px;
    background:var(--crema);
    flex-direction:column; gap:0;
    transform:translateY(-110%); transition:transform .4s ease;
    padding:10px var(--pad) 40px;
    border-top:1px solid var(--linea);
    z-index:450;
    overflow-y:auto;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links a{padding:16px 0; border-bottom:1px solid var(--linea); width:100%; font-size:.9rem;}
  .burger{display:block;}

  /* Hero */
  .hero{height:100svh; min-height:500px;}
  .hero h1{font-size:clamp(2rem,10vw,3rem);}
  .ba-hint{font-size:.65rem; padding:6px 12px; top:calc(100% + 10px);}

  /* Secciones */
  section{padding:60px 0;}
  .section-tight{padding:50px 0;}

  /* Proyectos grid */
  .proyectos-grid{grid-template-columns:1fr;}
  .proyecto-card{aspect-ratio:3/2;}

  /* Comparador en proyectos */
  .proyecto-ba{aspect-ratio:4/3;}
  .proyecto-bloque{margin-bottom:60px;}
  .proyecto-bloque-info{flex-direction:column; gap:6px; margin-bottom:16px;}

  /* Valores / servicios */
  .valores{grid-template-columns:1fr !important;}
  .valor{padding:28px 0; border-right:none; border-bottom:1px solid var(--linea);}
  .valor:last-child{border-bottom:none;}

  /* CTA band */
  .cta-band{padding:70px 0;}
  .cta-band h2{font-size:clamp(1.6rem,7vw,2.4rem);}
  .cta-band > .container > div[style*="flex"]{flex-direction:column; align-items:center;}

  /* Formulario */
  .field-row{grid-template-columns:1fr;}

  /* Quick actions (Contacto) */
  .quick-actions{flex-direction:column; align-items:center;}
  .quick-action{width:100%; max-width:280px; justify-content:center;}

  /* Botón flotante */
  .float-cta{
    right:12px; bottom:12px; left:12px;
    justify-content:center;
    padding:14px 16px;
    font-size:.78rem;
  }

  /* Footer */
  .footer-top{flex-direction:column; align-items:flex-start; gap:24px;}
  .footer-social-group{flex-direction:row; align-items:center; gap:12px;}
  .footer-bottom{flex-direction:column; text-align:center; gap:6px;}

  /* Conócenos */
  .about-hero{display:block !important;}
  .about-hero .text-col{padding:60px var(--pad);}

  /* Timeline */
  .timeline-item{grid-template-columns:80px 1fr; gap:16px;}

  /* Logo */
  .logo-icon{height:36px !important;}
  .logo-icon{height:32px !important;}
  .logo-script{font-size:22px !important;}
  .logo-sans{font-size:13px !important;}
  .logo{gap:7px !important;}
}