/*
Theme Name: Huerta Arquitectos
Author: Huerta Arquitectos
Description: Tema minimalista y elegante para estudio de arquitectura. Paleta piedra y bronce, tipografía Marcellus. Textos, fotografías y datos de contacto editables desde Apariencia → Personalizar; menús desde Apariencia → Menús.
Version: 1.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: huerta
*/

/* ============================================================
   Tipografías integradas en el tema (no dependen de Google Fonts)
   ============================================================ */
@font-face{
  font-family:'Marcellus'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/marcellus-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:300; font-display:swap;
  src:url('assets/fonts/archivo-latin-300-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/archivo-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/archivo-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/archivo-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/playfair-display-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/playfair-display-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Italiana'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/italiana-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:300; font-display:swap;
  src:url('assets/fonts/jost-latin-300-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/jost-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/jost-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/jost-latin-600-normal.woff2') format('woff2');
}

/* ============================================================
   Paleta y tipografía (editables aquí)
   ============================================================ */
:root{
  --tinta:      #1B1A18;   /* grafito cálido, fondo oscuro y textos */
  --hueso:      #ECEAE6;   /* gris piedra claro, fondo general */
  --blanco:     #FBFAF8;   /* blanco cálido para tarjetas y secciones */
  --piedra:     #8F897F;   /* gris piedra medio, textos secundarios */
  --linea:      rgba(27,26,24,.15);
  --linea-clara:rgba(236,234,230,.16);
  --bronce:      #8A672C;  /* acento sobre fondos claros (úsalo poco) */
  --bronce-claro:#C39B57;  /* acento sobre fondos oscuros */
  --texto:       #1B1A18;  /* color del texto general (Personalizar → Colores) */
  --titulos:     #1B1A18;  /* color de los títulos (Personalizar → Colores) */

  --serif: 'Marcellus', 'Times New Roman', Georgia, serif;
  --sans:  'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ancho: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-padding-top:88px; font-size:calc(100% * var(--escala-texto, 1)); }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

body{
  font-family:var(--sans);
  font-weight:var(--peso-texto, 300);
  color:var(--texto);
  background:var(--hueso);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
ul{ list-style:none; }

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

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

/* accesibilidad estándar de WordPress */
.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; width:1px;
  margin:-1px; overflow:hidden; padding:0; position:absolute !important;
  word-wrap:normal !important;
}

/* ---------- utilidades tipográficas ---------- */
.ceja{
  font-size:.72rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--bronce);
}
.oscuro .ceja{ color:var(--bronce-claro); }

.titulo{
  font-family:var(--serif); font-weight:var(--peso-titulos, 400);
  line-height:1.14; letter-spacing:.015em;
  color:var(--titulos);
}
.pilar h3, .tarjeta-info h3, .lista-entradas h2,
.contenido-pagina h2, .contenido-pagina h3{ color:var(--titulos); }
/* En secciones oscuras los títulos siempre van en claro */
.hero, .oscuro, .pie{ --titulos:#ECEAE6; --texto:#ECEAE6; }

/* ---------- motivo celosía ---------- */
.celosia{
  background-image:repeating-linear-gradient(90deg,
    transparent 0, transparent 26px,
    var(--linea-clara) 26px, var(--linea-clara) 27px);
}
.celosia-clara{
  background-image:repeating-linear-gradient(90deg,
    transparent 0, transparent 26px,
    var(--linea) 26px, var(--linea) 27px);
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  height:52px; padding-inline:1.9rem;
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-claro{ background:var(--hueso); color:var(--tinta); }
.btn-claro:hover{ background:var(--blanco); }
.btn-borde-claro{ background:transparent; color:var(--hueso); border-color:rgba(236,234,230,.45); }
.btn-borde-claro:hover{ border-color:var(--hueso); }
.btn-tinta{ background:var(--tinta); color:var(--hueso); }
.btn-tinta:hover{ background:var(--bronce); }
.btn-borde-tinta{ background:transparent; color:var(--tinta); border-color:rgba(27,26,24,.35); }
.btn-borde-tinta:hover{ border-color:var(--tinta); }

/* ============================================================
   ENCABEZADO
   ============================================================ */
.encabezado{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(27,26,24, var(--barra-opacidad, .85));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea-clara);
  color:var(--hueso);
}
.admin-bar .encabezado{ top:32px; }
@media (max-width:782px){ .admin-bar .encabezado{ top:46px; } }

.encabezado .contenedor{
  display:flex; align-items:center; justify-content:space-between; height:80px;
}

.logo{ display:flex; flex-direction:column; line-height:1.05; }
.logo strong{
  font-family:var(--serif); font-weight:400; font-size:1.3rem;
  letter-spacing:.09em; text-transform:uppercase;
}
.logo span{
  font-size:.6rem; font-weight:500; letter-spacing:.5em;
  text-transform:uppercase; color:var(--piedra); margin-top:2px;
}
.custom-logo-link .custom-logo{ height:46px; width:auto; }

/* ---------- navegación de escritorio (salida nativa de wp_nav_menu) ---------- */
.nav-escritorio{ display:flex; align-items:center; gap:2.4rem; }
.nav-escritorio > li{ position:relative; }
.nav-escritorio > li > a{
  display:inline-flex; align-items:center; gap:.45rem;
  padding-block:1.9rem;
  font-size:.74rem; font-weight:400; letter-spacing:.24em; text-transform:uppercase;
  transition:color .2s ease;
}
.nav-escritorio > li > a:hover{ color:var(--bronce-claro); }
.nav-escritorio > li.menu-item-has-children > a::after{
  content:''; width:6px; height:6px; margin-top:-3px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); opacity:.6;
}

/* submenú desplegable */
.nav-escritorio .sub-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  min-width:300px; padding-block:.6rem;
  background:var(--tinta); border:1px solid var(--linea-clara);
  opacity:0; visibility:hidden; translate:0 -6px;
  transition:opacity .22s ease, translate .22s ease, visibility .22s;
}
.nav-escritorio li:hover > .sub-menu,
.nav-escritorio li:focus-within > .sub-menu{
  opacity:1; visibility:visible; translate:0 0;
}
.nav-escritorio .sub-menu a{
  display:block; padding:.7rem 1.6rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(236,234,230,.75);
  transition:color .2s ease, padding-left .2s ease;
}
.nav-escritorio .sub-menu a:hover{ color:var(--bronce-claro); padding-left:1.9rem; }

.acciones-encabezado{ display:flex; align-items:center; gap:1rem; }
.btn-encabezado{ height:42px; padding-inline:1.3rem; font-size:.68rem; }

.hamburguesa{
  display:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center;
  color:var(--hueso);
}
.hamburguesa svg{ width:24px; height:24px; }

/* ---------- navegación móvil ---------- */
.nav-movil{
  display:none; position:fixed; inset:80px 0 0 0; z-index:55;
  background:var(--tinta); color:var(--hueso);
  padding:2rem var(--pad) 3rem; overflow-y:auto;
}
.admin-bar .nav-movil{ top:126px; }
.nav-movil.abierto{ display:block; }
.nav-movil a{
  display:block; padding:.85rem 0;
  font-size:.85rem; letter-spacing:.22em; text-transform:uppercase;
  border-bottom:1px solid var(--linea-clara);
}
.nav-movil .sub-menu a{
  padding-left:1.2rem; font-size:.74rem; color:rgba(236,234,230,.7);
}
.nav-movil .btn{ margin-top:1.8rem; width:100%; }

/* ============================================================
   HERO (portada)
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  background:var(--tinta); color:var(--hueso);
  overflow:hidden;
  background-size:cover; background-position:center;
}
.hero-celosia{
  position:absolute; inset:0; pointer-events:none;
  mask-image:linear-gradient(105deg, transparent 42%, black 100%);
  -webkit-mask-image:linear-gradient(105deg, transparent 42%, black 100%);
}
.hero .contenedor{ position:relative; width:100%; padding-block:9rem 6rem; }

.hero .ceja{ display:block; margin-bottom:1.6rem; color:var(--bronce-claro); }
.hero h1{
  font-size:calc(clamp(2.6rem, 6.6vw, 5.4rem) * var(--escala-titulos, 1));
  max-width:22ch;
  margin-bottom:1.8rem;
}
.hero h1 em{ font-style:normal; color:var(--bronce-claro); }
.hero p{
  max-width:44ch; font-size:1.05rem; font-weight:300;
  color:rgba(236,234,230,.78);
  margin-bottom:2.6rem;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero-pie{
  position:absolute; left:0; right:0; bottom:0;
  border-top:1px solid var(--linea-clara);
}
.hero-pie .contenedor{
  display:flex; justify-content:space-between; align-items:center;
  padding-block:1.1rem; font-size:.68rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--piedra);
}

@media (prefers-reduced-motion: no-preference){
  .hero [data-entrada]{ opacity:0; transform:translateY(26px); animation:entrada .9s cubic-bezier(.22,.7,.3,1) forwards; }
  .hero [data-entrada="2"]{ animation-delay:.15s; }
  .hero [data-entrada="3"]{ animation-delay:.3s; }
  .hero [data-entrada="4"]{ animation-delay:.45s; }
  @keyframes entrada{ to{ opacity:1; transform:none; } }
}

/* ============================================================
   SECCIONES GENERALES
   ============================================================ */
.seccion{ padding-block:clamp(4.5rem, 9vw, 8rem); }
.oscuro{ background:var(--tinta); color:var(--hueso); }

.cabecera-seccion{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; margin-bottom:clamp(2.5rem, 5vw, 4rem);
}
.cabecera-seccion .titulo{ font-size:calc(clamp(1.9rem, 3.6vw, 2.8rem) * var(--escala-titulos, 1)); margin-top:.9rem; }
.enlace-flecha{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.74rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  border-bottom:1px solid var(--linea); padding-bottom:.35rem;
  transition:border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.enlace-flecha:hover{ border-color:var(--bronce); color:var(--bronce); }
.enlace-flecha svg{ width:14px; height:14px; transition:transform .25s ease; }
.enlace-flecha:hover svg{ transform:translateX(4px); }

.revelar{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.7,.3,1); }
.revelar.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .revelar{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   FILOSOFÍA
   ============================================================ */
.filosofia{ background:var(--blanco); text-align:center; }
.filosofia .ceja{ display:block; margin-bottom:1.4rem; }
.filosofia blockquote{
  font-family:var(--serif); font-weight:var(--peso-titulos, 400);
  font-size:calc(clamp(1.5rem, 3.2vw, 2.4rem) * var(--escala-titulos, 1)); line-height:1.35;
  max-width:26ch; margin:0 auto;
}
.filosofia blockquote strong{ font-weight:var(--peso-titulos, 400); color:var(--bronce); }
.filosofia hr{
  width:64px; border:0; border-top:1px solid var(--bronce);
  margin:2.6rem auto 0;
}

.pilares{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:2.5rem; margin-top:clamp(3rem, 6vw, 5rem);
  text-align:left;
}
.pilar{ border-top:1px solid var(--linea); padding-top:1.4rem; }
.pilar h3{
  font-family:var(--serif); font-weight:var(--peso-titulos, 400); font-size:calc(1.35rem * var(--escala-titulos, 1));
  margin-bottom:.6rem;
}
.pilar p{ font-size:.93rem; color:rgba(27,26,24,.65); max-width:34ch; }

/* ============================================================
   PROYECTOS
   ============================================================ */
.malla-proyectos{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.5rem, 3vw, 2.5rem);
}
.tarjeta{ display:block; }
.tarjeta-visual{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--blanco); border:1px solid var(--linea);
  display:flex; align-items:center; justify-content:center;
  color:var(--piedra);
  transition:border-color .3s ease;
}
.tarjeta-visual img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.7,.3,1);
}
.tarjeta-visual .glifo{
  width:min(46%, 190px); height:auto;
  transition:transform .5s cubic-bezier(.22,.7,.3,1), color .3s ease;
}
.tarjeta:hover .tarjeta-visual{ border-color:var(--tinta); }
.tarjeta:hover .tarjeta-visual img{ transform:scale(1.04); }
.tarjeta:hover .glifo{ transform:translateY(-6px); color:var(--tinta); }

.tarjeta-info{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; padding-top:1.1rem;
}
.tarjeta-info h3{
  font-family:var(--serif); font-weight:var(--peso-titulos, 400); font-size:calc(1.3rem * var(--escala-titulos, 1));
  transition:color .25s ease;
}
.tarjeta:hover .tarjeta-info h3{ color:var(--bronce); }
.tarjeta-info span{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--piedra); white-space:nowrap;
}

/* ============================================================
   MÉTODO Y CIFRAS
   ============================================================ */
.pasos{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:2.5rem; margin-top:clamp(2.5rem, 5vw, 4rem);
}
.paso{ border-top:1px solid var(--linea-clara); padding-top:1.4rem; }
.paso .numero{
  font-family:var(--serif); font-size:1rem; letter-spacing:.12em;
  color:var(--bronce-claro); display:block; margin-bottom:.7rem;
}
.paso h3{ font-weight:500; font-size:.98rem; letter-spacing:.06em; margin-bottom:.5rem; }
.paso p{ font-size:.88rem; color:rgba(236,234,230,.62); }

.cifras{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:2rem; margin-top:clamp(3.5rem, 7vw, 5.5rem);
  padding-top:clamp(2.5rem, 5vw, 3.5rem);
  border-top:1px solid var(--linea-clara);
  text-align:center;
}
.cifra strong{
  font-family:var(--serif); font-weight:var(--peso-titulos, 400);
  font-size:calc(clamp(2.2rem, 4.5vw, 3.4rem) * var(--escala-titulos, 1)); display:block; line-height:1;
}
.cifra span{
  display:block; margin-top:.7rem;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--piedra);
}

/* ============================================================
   CONTACTO / CTA
   ============================================================ */
.cta .caja{
  background:var(--blanco); border:1px solid var(--linea);
  padding:clamp(2.5rem, 6vw, 5rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:2.5rem;
}
.cta h2{ font-size:calc(clamp(2rem, 4vw, 3rem) * var(--escala-titulos, 1)); max-width:14ch; }
.cta p{ max-width:44ch; color:rgba(27,26,24,.65); margin-top:1rem; }
.cta-acciones{ display:flex; flex-direction:column; gap:.9rem; min-width:260px; }
.cta-acciones small{
  text-align:center; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--piedra);
}

/* ============================================================
   PIE DE PÁGINA
   ============================================================ */
.pie{ background:var(--tinta); color:var(--hueso); padding-block:4.5rem 2rem; }
.pie-malla{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:3rem; padding-bottom:3.5rem;
}
.pie .logo span{ color:rgba(236,234,230,.5); }
.pie-lema{
  margin-top:1.2rem; max-width:26ch;
  font-size:.9rem; color:rgba(236,234,230,.6);
}
.pie-redes{ display:flex; gap:1.2rem; margin-top:1.4rem; flex-wrap:wrap; }
.pie-redes a{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(236,234,230,.55); border-bottom:1px solid var(--linea-clara);
  padding-bottom:.2rem; transition:color .2s ease, border-color .2s ease;
}
.pie-redes a:hover{ color:var(--bronce-claro); border-color:var(--bronce-claro); }
.pie h4{
  font-size:.68rem; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:var(--piedra); margin-bottom:1.3rem;
}
.pie .menu-pie li{ margin-bottom:.65rem; }
.pie .menu-pie a{
  font-size:.86rem; color:rgba(236,234,230,.72);
  transition:color .2s ease;
}
.pie .menu-pie a:hover{ color:var(--bronce-claro); }
.pie address{
  font-style:normal; font-size:.86rem; line-height:2;
  color:rgba(236,234,230,.72);
}
.pie address a{ color:var(--hueso); border-bottom:1px solid var(--linea-clara); }
.pie address a:hover{ border-color:var(--bronce-claro); color:var(--bronce-claro); }

.pie-legal{
  border-top:1px solid var(--linea-clara);
  padding-top:1.6rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:.72rem; color:rgba(236,234,230,.45);
}
.pie-legal a:hover{ color:var(--bronce-claro); }

/* ============================================================
   BLOG Y PÁGINAS INTERIORES
   ============================================================ */
.pagina-interior{ padding-top:80px; }
.titulo-pagina{ font-size:calc(clamp(2rem, 4.5vw, 3.2rem) * var(--escala-titulos, 1)); margin-bottom:.6rem; }
.meta-entrada{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--piedra); margin-bottom:2.5rem; display:block;
}

.lista-entradas article{
  border-top:1px solid var(--linea);
  padding-block:2.2rem;
}
.lista-entradas h2{
  font-family:var(--serif); font-weight:var(--peso-titulos, 400); font-size:calc(1.6rem * var(--escala-titulos, 1));
  margin-bottom:.4rem;
}
.lista-entradas h2 a:hover{ color:var(--bronce); }
.lista-entradas .extracto{ color:rgba(27,26,24,.65); max-width:65ch; margin-top:.6rem; }

.contenido-pagina{ max-width:70ch; }
.contenido-pagina > * + *{ margin-top:1.3rem; }
.contenido-pagina h2, .contenido-pagina h3{
  font-family:var(--serif); font-weight:400; margin-top:2.4rem;
}
.contenido-pagina h2{ font-size:1.8rem; }
.contenido-pagina h3{ font-size:1.4rem; }
.contenido-pagina ul, .contenido-pagina ol{ padding-left:1.4rem; }
.contenido-pagina ul{ list-style:disc; }
.contenido-pagina ol{ list-style:decimal; }
.contenido-pagina a{ color:var(--bronce); border-bottom:1px solid currentColor; }
.contenido-pagina blockquote{
  border-left:2px solid var(--bronce);
  padding-left:1.4rem; font-family:var(--serif); font-size:1.15rem;
}
.contenido-pagina img{ margin-block:2rem; }

.paginacion{ margin-top:3rem; }
.paginacion .nav-links{ display:flex; gap:1rem; flex-wrap:wrap; }
.paginacion a, .paginacion span.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding-inline:.8rem;
  border:1px solid var(--linea); font-size:.8rem;
}
.paginacion a:hover{ border-color:var(--tinta); }
.paginacion .current{ background:var(--tinta); color:var(--hueso); border-color:var(--tinta); }

/* alineaciones básicas del editor de WordPress */
.aligncenter{ margin-left:auto; margin-right:auto; }
.alignleft{ float:left; margin:0 1.5rem 1rem 0; }
.alignright{ float:right; margin:0 0 1rem 1.5rem; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 960px){
  .nav-escritorio, .acciones-encabezado .btn{ display:none; }
  .hamburguesa{ display:inline-flex; }
  .pilares{ grid-template-columns:1fr; gap:2rem; }
  .pasos{ grid-template-columns:repeat(2, 1fr); }
  .pie-malla{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .malla-proyectos{ grid-template-columns:1fr; }
  .pasos{ grid-template-columns:1fr; }
  .cifras{ grid-template-columns:1fr; gap:2.5rem; }
  .cabecera-seccion{ flex-direction:column; align-items:flex-start; }
  .pie-malla{ grid-template-columns:1fr; gap:2.2rem; }
  .hero-pie .contenedor{ flex-direction:column; gap:.4rem; text-align:center; }
}