/* Distrito Azul — estilos base compartidos por todas las páginas.
   Extraído del index v3 (28-jul-2026). Editar aquí, no en cada página. */
  :root{
    --paper:#FBFAF7;
    --ink:#273446;
    --plan:#91B4C8;
    --sand:#C7A986;
    --sand-text:#A0824F;
    --plan-text:#617A8E;
    /* coords sobre papel: mezcla más entintada para AA (~5,5:1) */
    --plan-text:color-mix(in srgb, #91B4C8 45%, #273446);
    /* la misma mezcla cae a 4,00:1 sobre la banda piedra: por debajo de AA.
       Sobre piedra hace falta entintar más (5,4:1). */
    --plan-text-banda:#465A6D;
    /* numerales grandes: el --plan puro da 1,65:1 sobre piedra. Este es el tono
       de cielo más claro que aguanta el 3:1 de texto grande (3,36:1). */
    --plan-num:#617A8E;
    --stone:#E3DFD9;
    --earth:#59452C;
    --ease:cubic-bezier(0.16,1,0.3,1);
    --sec-gap:clamp(48px,5.2vw,76px);
    --sec-head-gap:clamp(28px,3vw,42px);
    --nav-height:73px;
    --copy-size:clamp(.9rem,1.25vw,1.05rem);
    --heading-size:clamp(1.7rem,3.2vw,2.85rem);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* El pin restaura el scroll al recalcular: el smooth global falsea esas medidas. */
  html{scroll-behavior:auto;scroll-padding-top:104px}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Mulish',sans-serif;
    font-weight:300;
    font-size:16px;
    line-height:1.75;
    overflow-x:clip;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}

  /* ---------- utilidades tipográficas ---------- */
  .label{
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--sand-text);
  }
  .coord{
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--plan-text);
  }
  /* sobre banda azul, la señalética pasa a arena para mantener contraste */
  .magazine .coord{color:var(--sand)}
  .display{
    font-family:'Fira Sans',sans-serif;
    font-weight:700;
    line-height:1.08;
    letter-spacing:-0.015em;
  }
  .mask{display:block;overflow:hidden}
  .ml{display:block;will-change:transform}
  .sr-only{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .hairline{border:none;border-top:1px solid var(--plan);opacity:.55;height:0}

  /* ---------- regla lateral ---------- */
  .side-rule{
    position:fixed;
    left:16px;
    top:50%;
    writing-mode:vertical-rl;
    transform:translateY(-50%) rotate(180deg);
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:.4em;
    text-transform:uppercase;
    color:var(--sand-text);
    z-index:5;
    pointer-events:none;
  }
  @media (max-width:1180px){ .side-rule{display:none} }

  /* ---------- nav ---------- */
  .nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:50;
    background:rgba(251,250,247,.92);
    border-bottom:1px solid rgba(39,52,70,.1);
    /* misma clave de rejilla que .sec-pad/.hero-content: el padding vive en el borde full-bleed
       y el inner se centra dentro, de modo que el wordmark cae en left=56px */
    padding:0 clamp(20px,4vw,56px);
  }
  .nav-inner{
    max-width:1360px;
    margin:0 auto;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:72px;
    flex-wrap:wrap;
  }
  .wordmark{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    width:clamp(200px,16vw,230px);
    color:var(--ink);
  }
  .wordmark svg{width:100%;height:auto;display:block}
  .nav-links{display:flex;align-items:center;gap:clamp(2px,1.4vw,20px);list-style:none}
  .nav-links a{
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0 10px;
    border-bottom:1px solid transparent;
    transition:border-color .3s var(--ease);
  }
  .nav-links a:hover{border-bottom-color:var(--sand)}

  /* ---------- submenú de Qué hacemos ----------
     Business y Residencial cuelgan de aquí y no tienen sitio propio en el menú.
     Se abre con el ratón y también con el tabulador (:focus-within). */
  .nav-item--sub{position:relative}
  .nav-sub{
    position:absolute;top:100%;left:0;
    min-width:190px;
    list-style:none;
    padding:6px 0;
    background:rgba(251,250,247,.98);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(39,52,70,.12);
    border-top:0;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  }
  .nav-item--sub:hover > .nav-sub,
  .nav-item--sub:focus-within > .nav-sub{opacity:1;visibility:visible;transform:none}
  .nav-sub a{
    display:flex;width:100%;
    min-height:40px;
    /* mismo padding que el enlace padre: el texto del panel cae en su misma x */
    padding:0 10px;
    letter-spacing:.16em;
    border-bottom:0;
    transition:background .25s var(--ease),color .25s var(--ease);
  }
  .nav-sub a:hover,
  .nav-sub a:focus-visible{background:var(--stone);border-bottom-color:transparent}
  /* el arena como texto se queda en 3,47:1 sobre el panel claro; como filete
     es elemento gráfico y le basta con 3:1, así que la marca va ahí */
  .nav-sub a[aria-current="page"]{color:var(--ink);box-shadow:inset 2px 0 0 var(--sand)}
  /* en móvil el menú ya va apretado en una fila: el mapa completo vive en el pie */
  @media (max-width:760px){ .nav-sub{display:none} }
  @media (max-width:760px){
    :root{--nav-height:97px}
    .nav{padding:0} /* en móvil el padding vuelve al inner para el layout apilado */
    .nav-inner{flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:0;padding:6px 12px 2px}
    .nav-links{width:100%;justify-content:center;flex-wrap:nowrap;gap:0}
    .nav-links a{padding:0 5px;font-size:10px;letter-spacing:.12em;white-space:nowrap}
    html{scroll-padding-top:100px}
  }

  /* ---------- hero (negativo: noche sobre azul) ---------- */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#18222F;
  }
  .hero-shader{
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .hero-shader canvas{width:100%;height:100%;display:block}
  .hero-plan{
    position:absolute;
    inset:-6% 0;
    width:100%;
    height:112%;
    pointer-events:none;
    opacity:.24; /* manzanas apenas susurradas sobre la noche */
  }
  .hero-plan svg{width:100%;height:100%;display:block}
  .hero-plan .parcela-plan{fill-opacity:.09 !important}
  /* capa lejana del plano: profundidad bajo el agua */
  .hero-plan-far{opacity:.1;transform:scale(1.18)}
  /* cover: el mar queda al fondo, la página desliza por encima */
  .hero{z-index:0}
  section,footer{position:relative;z-index:2}
  .estudio,.retail,#que-hacemos{background:var(--paper)}
  /* parcelas: las cuatro tarjetas de fase son enlace y todas reaccionan al hover */
  .parcela{overflow:hidden}
  .parcela img{transition:transform 1.2s var(--ease)}
  /* Tarjeta-enlace: el ancla del titular se estira sobre toda la tarjeta,
     así el nombre accesible sigue siendo corto y el destino es todo el bloque. */
  .parcela--enlace{position:relative;cursor:pointer;color:inherit}
  .parcela-link::after{content:"";position:absolute;inset:0;z-index:3}
  .parcela--enlace:hover img{transform:scale(1.04)}
  .parcela--enlace:hover .parcela-top .coord{color:var(--sand-text)}
  .parcela-link:focus-visible{outline:2px solid var(--sand);outline-offset:4px}
  .parcela--retail{color:inherit}
  .parcela--retail:hover .parcela-top .coord{color:var(--sand-text)}
  /* señalética del hero en negativo */
  .hero .label{color:var(--sand)}
  .hero .coord{color:var(--plan)}
  .hero .hairline{border-top-color:var(--plan);opacity:.4}
  /* composición móvil dedicada: reencuadre de la trama, parcela sin relleno duro */
  @media (max-width:760px){
    .hero-plan{inset:0;height:100%;opacity:.3}
    .hero-plan svg{transform:translate(4%,6%) scale(1.32);transform-origin:50% 42%}
    .hero-plan .parcela-plan,
    .estudio-plan .parcela-plan{fill-opacity:.05 !important}
    .estudio-plan{opacity:.09}
  }
  /* velo de legibilidad full-bleed: oscurece sin desplazar el contenido */
  .hero-scrim{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(100deg, rgba(24,34,47,.62) 0%, rgba(24,34,47,.34) 42%, rgba(24,34,47,0) 72%);
  }
  /* misma clave de rejilla que .sec-pad + .sec-inner: borde izquierdo en 56px */
  .hero-content{
    position:relative;
    z-index:2;
    width:100%;
    padding:clamp(120px,15vh,160px) clamp(20px,4vw,56px) clamp(80px,10vh,110px);
  }
  .hero-inner{
    max-width:1360px;
    margin:0 auto;
  }
  .hero-panel{
    max-width:640px;
  }
  .hero-eyebrow{
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:clamp(10px,1.32vw,14px);
    letter-spacing:.18em;
    line-height:1.5;
    color:var(--sand);
    text-transform:uppercase;
    white-space:nowrap;
    margin:0;
  }
  /* en pantallas muy estrechas se permite envolver para no desbordar */
  @media (max-width:600px){ .hero-eyebrow{white-space:normal;letter-spacing:.12em} }
  .hero-logo{
    width:min(100%,clamp(320px,64vw,900px));
    margin:34px 0 40px;
    color:var(--stone);
  }
  .hero-logo svg{width:100%;height:auto;display:block}
  .hero-lede{
    max-width:52ch;
    font-size:clamp(0.9rem,1.25vw,1.05rem);
    line-height:1.8;
    color:var(--stone);
  }
  .hero-rule{width:88px;margin:0 0 30px}
  /* acción secundaria del hero: enlace de texto ligero, sin caja */
  .hero-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    font-family:'Prompt',sans-serif;
    font-weight:400;
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--stone);
    opacity:.82;
    transition:opacity .3s var(--ease);
  }
  .hero-link .arrow{font-family:'Mulish',sans-serif;transition:transform .35s var(--ease)}
  .hero-link:hover{opacity:1}
  .hero-link:hover .arrow{transform:translateX(6px)}

  /* ---------- secciones comunes ---------- */
  section{position:relative}
  .sec-pad{padding:var(--sec-gap) clamp(20px,4vw,56px)}
  .sec-inner{max-width:1360px;margin:0 auto;position:relative}
  .sec-head{display:flex;align-items:baseline;gap:24px;margin-bottom:clamp(48px,6vw,88px)}
  .sec-head .hairline{flex:1}

  /* ---------- estudio ---------- */
  .estudio{overflow:hidden}
  .estudio-plan{
    position:absolute;
    inset:0;
    opacity:.15;
    pointer-events:none;
  }
  .estudio-plan svg{width:100%;height:100%;display:block}
  .estudio-grid{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(0,4fr);
    gap:clamp(40px,6vw,110px);
    /* petición del cliente: texto e imagen centrados como bloque compacto */
    align-items:center;
  }
  .estudio-copy p{max-width:56ch;margin-bottom:1.4em}
  .estudio-copy p:last-child{margin-bottom:0}
  .estudio-media{margin-top:0}
  .estudio-media figure{margin:0}
  .estudio-media .frame{
    border:1px solid var(--plan);
    padding:14px;
  }
  /* encuadre nivelado: la foto no debe sobresalir muy por debajo del texto */
  .estudio-media img{width:100%;height:auto;object-fit:cover;aspect-ratio:3/3.4;max-height:580px}
  .estudio-media figcaption{margin-top:14px}
  @media (max-width:900px){
    .estudio-grid{grid-template-columns:1fr}
    .estudio-media{max-width:420px;margin-top:8px}
  }

  /* ---------- qué hacemos ---------- */
  .qh-intro{padding-bottom:clamp(56px,7vw,110px)}
  .qh-intro h2{
    font-family:'Fira Sans',sans-serif;
    font-size:clamp(1.6rem,3.3vw,3rem);
    line-height:1.18;
    font-weight:700;
    letter-spacing:-0.015em;
    max-width:22ch;
    margin-bottom:clamp(28px,3vw,44px);
  }
  .qh-intro-cols{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(28px,5vw,90px);
  }
  .qh-intro-cols p{max-width:52ch}
  @media (max-width:900px){ .qh-intro-cols{grid-template-columns:1fr} }

  /* base: apilado (móvil y reduced motion) */
  .qh-pin{
    position:relative;
    overflow:hidden;
    padding:32px 0 var(--sec-gap);
  }
  .qh-track{
    padding:0 clamp(20px,4vw,56px);
    max-width:1360px;
    margin:0 auto;
  }
  .parcela{
    border:1px solid var(--plan);
    background:var(--paper);
    display:flex;
    flex-direction:column;
    max-width:880px;
    margin:0 0 44px;
  }
  .parcela:last-child{margin-bottom:0}
  /* horizontal pinned: solo escritorio con motion y JS real (html.js-motion, no bots) */
  @media (min-width:901px) and (min-height:600px) and (prefers-reduced-motion: no-preference){
    html.js-motion .qh-pin{
      height:100svh;
      display:flex;
      align-items:center;
      padding:0;
    }
    html.js-motion .qh-track{
      display:flex;
      align-items:stretch;
      gap:clamp(24px,3.4vw,56px);
      padding:0 clamp(20px,7vw,110px);
      width:max-content;
      max-width:none;
      margin:0;
      will-change:transform;
    }
    html.js-motion .parcela{
      width:52vw;
      min-width:52vw;
      max-width:none;
      margin:0;
      height:min(76vh,680px);
    }
    html.js-motion .parcela img{height:auto;flex:1;min-height:0}
    html.js-motion .parcela-body{flex:0 0 auto}
    /* coda: panel estrecho de cierre, aire final del track */
    html.js-motion .qh-coda{
      width:26vw;
      min-width:26vw;
      margin:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:20px;
      padding-right:clamp(20px,4vw,64px);
    }
  }
  .qh-coda{margin:12px 0 0;display:flex;flex-direction:column;gap:16px}
  .qh-coda-link{
    font-family:'Fira Sans',sans-serif;
    font-weight:600;
    font-size:clamp(1.45rem,2.4vw,2.3rem);
    line-height:1.15;
    letter-spacing:-0.01em;
    color:var(--ink);
    display:inline-flex;
    align-items:center;
    gap:14px;
  }
  .qh-coda-link .arrow{font-family:'Mulish',sans-serif;transition:transform .35s var(--ease)}
  .qh-coda-link:hover .arrow{transform:translateX(8px)}
  .parcela-top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding:20px 26px;
    border-bottom:1px solid var(--plan);
  }
  .parcela-top h3{
    font-family:'Fira Sans',sans-serif;
    font-weight:700;
    /* v4: las tarjetas llevan nombres de fase («Conceptualización y branding»),
       no nombres de ámbito de una palabra. Cuerpo y tracking a su medida. */
    font-size:clamp(1.05rem,1.5vw,1.45rem);
    line-height:1.15;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .parcela-top .coord{flex:0 0 auto;white-space:nowrap}
  .parcela img{
    width:100%;
    height:clamp(240px,38vh,380px);
    object-fit:cover;
  }
  .parcela-body{
    padding:26px;
    display:flex;
    flex-direction:column;
    gap:20px;
    flex:1;
  }
  .parcela-words{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    column-gap:0;
  }
  .parcela-words li{
    font-size:clamp(.95rem,1.2vw,1.1rem);
    font-weight:300;
    padding:8px 18px 8px 0;
    margin-right:18px;
    border-right:1px solid var(--stone);
  }
  .parcela-words li:last-child{border-right:none;margin-right:0}
  .parcela-note{max-width:58ch;color:var(--earth)}
  @media (max-width:899px){
    .qh-pin{overflow:visible}
    .qh-track{
      display:block;
      width:auto;
      padding:0 clamp(20px,4vw,56px);
    }
    .parcela{width:100%;min-width:0;margin-bottom:40px}
  }

  /* ---------- retail deep ---------- */
  .retail-grid{
    display:grid;
    grid-template-columns:minmax(0,4fr) minmax(0,7fr);
    gap:clamp(36px,6vw,110px);
    align-items:center;
  }
  .retail-media .frame{border:1px solid var(--plan);padding:14px}
  .retail-media img{width:100%;height:auto;object-fit:cover;aspect-ratio:3/3.4;max-height:580px}
  .retail-copy h2{
    font-family:'Fira Sans',sans-serif;
    font-size:clamp(1.6rem,3.1vw,2.85rem);
    line-height:1.2;
    font-weight:700;
    letter-spacing:-0.015em;
    margin:26px 0 30px;
    max-width:24ch;
  }
  .retail-copy p{max-width:56ch;margin-bottom:1.3em}
  @media (max-width:900px){
    .retail-grid{grid-template-columns:1fr}
    .retail-media{max-width:420px}
  }

  /* ---------- magazine ---------- */
  .magazine{background:var(--ink);color:var(--paper);font-weight:400} /* Mulish 400 sobre azul oscuro: mejor legibilidad */
  .magazine .label{color:var(--sand)} /* sobre tinta, el arena claro sí contrasta */
  .magazine .sec-head .hairline{border-top-color:var(--paper);opacity:.25}
  .magazine-grid{
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:clamp(40px,6vw,110px);
    align-items:center;
  }
  .magazine-media figure{margin:0}
  .magazine-media .frame{border:1px solid rgba(251,250,247,.5);padding:14px}
  .magazine-media img{width:100%;height:auto;object-fit:cover;aspect-ratio:2/3}
  .magazine-media figcaption{margin-top:14px;color:var(--sand)}
  .magazine-title{
    font-size:clamp(2rem,4.5vw,4.1rem);
    line-height:1.08;
    margin:24px 0 34px;
  }
  .magazine-quote{
    font-family:'Fira Sans',sans-serif;
    font-size:clamp(1.25rem,2vw,1.7rem);
    line-height:1.5;
    font-weight:600;
    font-style:normal;
    color:var(--stone);
    border-left:1px solid var(--sand);
    padding-left:26px;
    margin:0 0 30px;
  }
  .magazine-copy p{max-width:52ch;color:rgba(251,250,247,.82);margin-bottom:1.2em}
  .magazine-sig{color:var(--sand)}
  @media (max-width:900px){
    .magazine-grid{grid-template-columns:1fr}
    .magazine-media{max-width:440px}
  }

  /* ---------- contacto: la marea vuelve ---------- */
  .contacto{
    text-align:left;
    background:#18222F;
    color:var(--stone);
    font-weight:400;
    overflow:hidden;
  }
  .contacto-sea{position:absolute;inset:0;pointer-events:none}
  .contacto-sea canvas{width:100%;height:100%;display:block}
  .contacto .sec-inner{max-width:1360px}
  .contacto-grid{
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:clamp(40px,6vw,96px);
    align-items:start;
  }
  .contacto-line{
    display:block;
    margin:0 0 clamp(28px,4vw,44px);
    height:clamp(60px,8vh,100px);
  }
  .contacto h2{
    font-family:'Fira Sans',sans-serif;
    font-size:clamp(1.8rem,4vw,3.2rem);
    font-weight:700;
    line-height:1.06;
    letter-spacing:-0.015em;
    margin:22px 0 28px;
    color:var(--paper);
  }
  .contacto .coord{color:var(--sand)}
  .contacto p{max-width:44ch;margin:0 0 8px}
  @media (max-width:900px){
    .contacto-grid{grid-template-columns:1fr}
  }

  /* ---------- formulario de contacto (banda oscura) ---------- */
  .contacto-form{display:flex;flex-direction:column;gap:18px}
  .contacto-form[hidden],.cf-success[hidden]{display:none}
  .cf-title{
    font-family:'Fira Sans',sans-serif;
    font-weight:700;
    font-size:clamp(1.1rem,1.7vw,1.45rem);
    line-height:1.15;
    letter-spacing:-0.01em;
    color:var(--paper);
  }
  .cf-support{color:rgba(251,250,247,.8);max-width:46ch;margin:0}
  .cf-note{
    font-family:'Prompt',sans-serif;
    font-size:11px;
    letter-spacing:.08em;
    color:var(--sand);
    margin:0;
  }
  .cf-field{display:flex;flex-direction:column;gap:8px}
  .cf-field label,.cf-consent label{
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--stone);
  }
  .cf-field input,.cf-field textarea{
    width:100%;
    font-family:'Mulish',sans-serif;
    font-size:15px;
    color:var(--paper);
    background:rgba(251,250,247,.06);
    border:1px solid rgba(251,250,247,.22);
    padding:12px 14px;
    border-radius:0;
    transition:border-color .3s var(--ease),background .3s var(--ease);
  }
  .cf-field textarea{resize:vertical;min-height:120px;line-height:1.6}
  .cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(251,250,247,.4)}
  .cf-field input:focus,.cf-field textarea:focus{
    outline:none;
    border-color:var(--sand);
    background:rgba(251,250,247,.1);
  }
  .cf-field input[aria-invalid="true"],.cf-field textarea[aria-invalid="true"]{border-color:#C88A78}
  .cf-consent{display:flex;align-items:flex-start;gap:12px}
  .cf-consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--sand)}
  .cf-consent label{
    text-transform:none;
    letter-spacing:normal;
    font-weight:400;
    font-size:13px;
    line-height:1.6;
    color:rgba(251,250,247,.82);
  }
  .cf-consent a{color:var(--sand);border-bottom:1px solid currentColor}
  .cf-error{font-family:'Mulish',sans-serif;font-size:13px;line-height:1.5;color:#E4A896}
  .cf-submit{align-self:flex-start;margin-top:6px}
  .cf-success{
    border:1px solid rgba(251,250,247,.3);
    padding:clamp(24px,3vw,36px);
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .cf-success p{color:rgba(251,250,247,.85);margin:0}
  .cf-success:focus{outline:2px solid var(--sand);outline-offset:4px}

  /* ---------- widget flotante de WhatsApp ---------- */
  .wa-fab{
    position:fixed;
    right:clamp(16px,3vw,28px);
    bottom:clamp(16px,3vw,28px);
    z-index:60;
    width:56px;height:56px;
    min-width:44px;min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--sand);
    color:var(--ink);
    border-radius:50%;
    border:1px solid rgba(39,52,70,.18);
    transition:transform .35s var(--ease);
  }
  .wa-fab svg{width:28px;height:28px;display:block}
  .wa-fab:hover{transform:translateY(-2px)}
  @media (prefers-reduced-motion: no-preference){
    .wa-fab{animation:waIn .6s var(--ease) both;animation-delay:.7s}
  }
  @keyframes waIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  .btn-ghost{
    display:inline-flex;
    align-items:center;
    /* sin esto, un <button> hereda el gris del navegador y cae a 1,06:1 */
    background:transparent;
    gap:16px;
    min-height:52px;
    padding:0 38px;
    border:1px solid var(--stone);
    color:var(--stone);
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:12px;
    letter-spacing:.28em;
    text-transform:uppercase;
    transition:background .35s var(--ease),color .35s var(--ease);
  }
  .btn-ghost .arrow{transition:transform .35s var(--ease);font-family:'Mulish',sans-serif}
  .btn-ghost:hover{background:var(--stone);color:var(--ink)}
  .btn-ghost:hover .arrow{transform:translateX(8px)}
  .contacto-cta{text-align:left}

  /* ---------- footer: cierre nocturno ---------- */
  footer{
    background:#18222F;
    color:var(--stone);
    border-top:1px solid rgba(251,250,247,.12);
    /* misma clave de rejilla que nav/secciones: contenido alineado a left=56px */
    padding:0 clamp(20px,4vw,56px);
  }
  footer .wordmark{color:var(--stone)}
  .footer-inner{
    max-width:1360px;
    margin:0 auto;
    padding:56px 0 44px;
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
    gap:44px clamp(32px,6vw,96px);
    align-items:start;
  }
  @media (max-width:760px){
    .footer-inner{grid-template-columns:1fr;gap:36px}
  }
  .footer-col-title{
    display:block;
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--sand);
    margin-bottom:14px;
  }
  .footer-nav{list-style:none;display:flex;flex-direction:column}
  .footer-links{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none}
  .footer-nav a,
  .footer-links a{
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    border-bottom:1px solid transparent;
    transition:border-color .3s var(--ease);
  }
  .footer-nav a:hover,
  .footer-links a:hover{border-bottom-color:var(--sand)}
  /* padding-right: reserva para que el FAB de WhatsApp no tape el crédito a 1440 */
  .footer-coord{grid-column:1/-1;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(251,250,247,.14);padding-top:22px;padding-right:96px}
  .footer-copy{
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(251,250,247,.55);
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .footer-seal-group{display:inline-flex;align-items:center;gap:14px}
  .footer-seal{height:30px;width:auto;display:block;color:var(--stone);flex:none}
  .footer-credit{
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(251,250,247,.55);
    display:inline-flex;
    align-items:center;
    min-height:44px;
    border-bottom:1px solid transparent;
    transition:color .3s var(--ease),border-color .3s var(--ease);
  }
  .footer-credit:hover{color:var(--stone);border-bottom-color:var(--sand)}
  .footer-brand{display:flex;flex-direction:column;gap:16px;max-width:520px}
  .footer-tagline{font-size:14px;line-height:1.7;color:rgba(251,250,247,.72);max-width:52ch}
  .footer-social{display:flex;gap:8px;margin-top:4px}
  .footer-social a{
    width:44px;height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--stone);opacity:.8;
    border:1px solid rgba(251,250,247,.18);
    transition:opacity .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
  }
  .footer-social a:hover{opacity:1;color:var(--sand);border-color:var(--sand)}
  .footer-social svg{width:19px;height:19px;display:block}

  /* ---------- hero: acciones ---------- */
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:20px 44px;
    margin-top:36px;
  }
  .hero-actions .btn-ghost{min-height:52px}

  /* ---------- titular de sección (una visión / el estudio) ---------- */
  .lead-h2{
    font-family:'Fira Sans',sans-serif;
    font-size:clamp(1.7rem,3.2vw,2.85rem);
    line-height:1.16;
    font-weight:700;
    letter-spacing:-0.015em;
    max-width:22ch;
    margin:0 0 clamp(28px,3vw,42px);
  }
  /* énfasis de color como el manifiesto del template */
  .lead-h2 em{font-style:normal;color:var(--sand)}
  /* titular protagonista (Una visión de conjunto): más peso/tamaño */
  .lead-h2--feature{
    font-size:clamp(1.95rem,3.9vw,3.5rem);
    line-height:1.12;
    max-width:18ch;
  }
  /* negritas puntuales de cuerpo: peso, no color */
  p strong,.hero-lede strong{font-weight:600}

  /* ---------- CTA de texto (secciones claras y banda azul) ---------- */
  .link-cta{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-height:44px;
    margin-top:14px;
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:12px;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:inherit;
    border-bottom:1px solid currentColor;
    transition:opacity .3s var(--ease);
  }
  .link-cta .arrow{font-family:'Mulish',sans-serif;transition:transform .35s var(--ease)}
  .link-cta:hover{opacity:.7}
  .link-cta:hover .arrow{transform:translateX(6px)}

  /* ---------- magazine: cabecera, teaser y acciones ---------- */
  .magazine-h2{
    font-family:'Fira Sans',sans-serif;
    font-size:clamp(1.7rem,3.2vw,2.9rem);
    line-height:1.14;
    font-weight:700;
    letter-spacing:-0.015em;
    margin:22px 0 28px;
    max-width:20ch;
  }
  .magazine-copy{margin-bottom:34px}
  .magazine-teaser{
    border-top:1px solid rgba(251,250,247,.22);
    padding-top:26px;
    margin-bottom:30px;
  }
  .magazine-teaser .teaser-title{
    font-family:'Fira Sans',sans-serif;
    font-weight:700;
    font-size:clamp(1.25rem,2vw,1.7rem);
    line-height:1.2;
    color:var(--stone);
    margin:12px 0 12px;
  }
  .magazine-teaser p{max-width:52ch;color:rgba(251,250,247,.82);margin-bottom:6px}

  /* ---------- magazine: blog (rejilla de 3 entradas sobre banda azul) ---------- */
  .mag-intro{
    max-width:56ch;
    color:rgba(251,250,247,.82);
    margin:22px 0 clamp(44px,5vw,68px);
  }
  .mag-blog{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(24px,3vw,44px);
    align-items:stretch;
  }
  .mag-card{
    border:1px solid rgba(251,250,247,.22);
    background:transparent;
    display:flex;
    flex-direction:column;
  }
  .mag-card-link{display:flex;flex-direction:column;height:100%}
  .mag-thumb{
    overflow:hidden;
    aspect-ratio:3/2;
    background:rgba(251,250,247,.04);
  }
  .mag-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 1.2s var(--ease);
  }
  .mag-card-body{
    padding:22px 24px 26px;
    display:flex;
    flex-direction:column;
    gap:14px;
    flex:1;
  }
  .mag-meta{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
  .mag-date{
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(251,250,247,.58);
  }
  .mag-card-title{
    font-family:'Fira Sans',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,1.7vw,1.55rem);
    line-height:1.2;
    letter-spacing:-0.01em;
    color:var(--paper);
  }
  .mag-excerpt{
    font-family:'Mulish',sans-serif;
    font-size:14px;
    line-height:1.7;
    color:rgba(251,250,247,.72);
    flex:1;
  }
  .mag-read{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--sand);
  }
  .mag-read .arrow{font-family:'Mulish',sans-serif;transition:transform .35s var(--ease)}
  /* hover sutil SOLO en la tarjeta real */
  .mag-card--active:hover .mag-thumb img{transform:scale(1.03)}
  .mag-card--active:hover .mag-read .arrow{transform:translateX(6px)}
  /* placeholders honestos: solo la imagen se atenúa; el texto mantiene contraste AA */
  .mag-card--soon .mag-thumb img{filter:grayscale(1);opacity:.55}
  .mag-card--soon .mag-card-body{justify-content:flex-start;gap:16px}
  .mag-card--soon .label{color:var(--sand)}
  .mag-soon{
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(251,250,247,.78);
  }
  .mag-cta{margin-top:clamp(44px,5vw,68px)}
  @media (max-width:900px){
    .mag-blog{grid-template-columns:1fr}
  }

  /* ---------- foco accesible contextual ---------- */
  /* secciones claras: tinta */
  a:focus-visible,
  .btn-ghost:focus-visible,
  .link-cta:focus-visible,
  .wordmark:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
  /* fondos oscuros: arena */
  .hero a:focus-visible,.hero .btn-ghost:focus-visible,
  .magazine a:focus-visible,
  .contacto a:focus-visible,.contacto .btn-ghost:focus-visible,
  footer a:focus-visible{outline-color:var(--sand)}

  /* ============================================================
     VARIANTE — Nueva versión (jul 2026), sobre comentarios de Pablo:
       1) Home: hero SOLO marea — se oculta el plano de calles
          (las "líneas" que resultaban muy tech). Queda el shader de agua.
       2) Retail: franja Azul Distrito para que destaque como especialidad;
          reutiliza el mismo tratamiento oscuro que Magazine y rompe el blanco.
     Reversible: basta con borrar este bloque para volver a la base aprobada.
     ============================================================ */
  /* 1 — Home: fuera el plano de calles del hero */
  #planHero,#planHeroFar{display:none !important}
  /* 2 — Retail como banda oscura (mismo patrón que .magazine) */
  .retail{background:var(--ink);color:var(--paper)}
  .retail .coord{color:var(--sand)}
  .retail .sec-head .hairline{border-top-color:var(--paper);opacity:.25}
  .retail-copy p{color:rgba(251,250,247,.82)}
  .retail-copy p strong{color:var(--paper)}
  .retail-media .frame{border-color:rgba(251,250,247,.5)}
  .retail a:focus-visible{outline-color:var(--sand)}

  /* 3 — Magazine: peonza (símbolo personal) arriba y pequeña; titular a 2 líneas */

  /* ---------- Magazine en registro editorial ----------
     El cliente pide (sept-2026) que el azul oscuro deje de ser el protagonista
     de la revista. No se añaden colores: el azul pasa de superficie a tinta y
     la piedra pasa a fondo. Se aplica SOLO al hub y a su apertura; el teaser de
     la home sigue en azul, que es donde hace de puerta.
     Ojo con el arena: sobre piedra da 2,73:1 y suspende en rótulos pequeños, así
     que la señalética usa --plan-text-banda (5,4:1) y --earth (6,8:1). El arena
     se queda para filetes y flechas, que son elemento gráfico. */
  .ph.mag-ph,
  .magazine.mag-lista{background:var(--stone);color:var(--ink);font-weight:300}
  .ph.mag-ph .ph-velo{display:none}
  .ph.mag-ph .coord,
  .magazine.mag-lista .coord{color:var(--plan-text-banda)}
  .ph.mag-ph .hairline,
  .magazine.mag-lista .sec-head .hairline{border-top-color:var(--ink);opacity:.2}
  .ph.mag-ph .lead-h2{color:var(--ink)}
  .ph.mag-ph .ph-lede{color:rgba(39,52,70,.82)}
  .magazine.mag-lista .mag-intro{color:rgba(39,52,70,.82)}
  .magazine.mag-lista .mag-card{border-color:rgba(39,52,70,.22)}
  .magazine.mag-lista .mag-card-title{color:var(--ink)}
  .magazine.mag-lista .mag-excerpt{color:rgba(39,52,70,.78)}
  .magazine.mag-lista .mag-date,
  .magazine.mag-lista .mag-soon{color:var(--plan-text-banda)}
  .magazine.mag-lista .label,
  .magazine.mag-lista .mag-read{color:var(--earth)}
  /* la flecha es un carácter, no un filete: sobre piedra el arena da 2,73:1,
     así que hereda el color de la etiqueta. El arena se queda para los filetes. */
  .magazine.mag-lista .mag-read .arrow{color:inherit}
  .magazine.mag-lista .magazine-sig{color:var(--plan-text-banda)}
  .magazine.mag-lista a:focus-visible{outline-color:var(--ink)}

  .mag-peonza{display:block;width:auto;height:clamp(42px,4.5vw,56px);margin:0 0 20px;opacity:.92}
  .magazine-h2{max-width:34ch}

  /* ===== VARIANTE v3 (reestructura 25-jul) ===== */
  /* Retail volvió a ser enlace (tiene página propia): recupera la affordance.
     Estas tres reglas la anulaban desde la reestructura del 25-jul. */
  /* Retail en profundidad: índice de obra sobre piedra
     — numerales gigantes en cielo (el color del plano), títulos con peso,
       hairlines de tinta y aire generoso. Rompe el blanco con carácter. */
  /* transición papel→piedra muy leve en la entrada de la franja */
  .qh-services{background:linear-gradient(180deg,var(--paper) 0,var(--stone) clamp(120px,16vw,240px))}
  .qh-services .sec-head{margin-bottom:clamp(28px,4vw,56px)}
  .svc-list{list-style:none}
  .svc-item{
    display:grid;
    grid-template-columns:clamp(100px,14vw,210px) minmax(0,1fr);
    gap:clamp(16px,4vw,56px);
    align-items:start;
    padding:clamp(38px,5vw,72px) 0;
    border-top:1px solid rgba(39,52,70,.25);
    position:relative;
  }
  .svc-item:last-child{border-bottom:1px solid rgba(39,52,70,.25)}
  /* hover a sangre: la fila se ilumina a todo el ancho de la pantalla */
  .svc-item::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:50%;
    width:100vw;
    transform:translateX(-50%);
    background:var(--paper);
    opacity:0;
    transition:opacity .45s var(--ease);
    pointer-events:none;
  }
  .svc-item:hover::before{opacity:.55}
  .svc-item>*{position:relative;z-index:1}
  .svc-num{
    font-family:'Fira Sans',sans-serif;
    font-weight:800;
    font-size:clamp(64px,9vw,132px);
    line-height:.75;
    letter-spacing:-.035em;
    color:var(--plan-num);
    position:relative;
    top:-.08em; /* el numeral cruza la línea del plano: gesto editorial */
    transition:color .45s var(--ease);
  }
  .svc-item:hover .svc-num{color:var(--ink)}
  .svc-item--soon .svc-num{opacity:.4}
  .svc-title{
    font-family:'Fira Sans',sans-serif;
    font-weight:700;
    font-size:clamp(1.55rem,2.8vw,2.4rem);
    line-height:1.12;
    letter-spacing:-0.015em;
    margin-bottom:clamp(14px,1.6vw,20px);
  }
  .svc-item p{max-width:58ch;margin:0}
  .svc-soon{
    font-family:'Prompt',sans-serif;
    font-weight:500;
    font-size:12px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--sand-text);
  }
  @media (max-width:700px){
    .svc-item{grid-template-columns:1fr;gap:10px;padding:clamp(30px,8vw,44px) 0}
    .svc-num{font-size:clamp(48px,16vw,72px);top:0}
  }

  /* Más allá del Retail: contenido centrado + fondo de materia muy sutil con parallax */
  .mar-bg{
    position:absolute;
    inset:-14% 0; /* margen extra vertical: recorrido del parallax */
    z-index:0;
    pointer-events:none;
  }
  .mar-bg img{width:100%;height:100%;object-fit:cover;opacity:.10;filter:saturate(.55)}
  .mar-velo{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    /* funde con el papel de las secciones vecinas */
    background:linear-gradient(180deg,var(--paper) 0,rgba(251,250,247,.30) 30%,rgba(251,250,247,.30) 70%,var(--paper) 100%);
  }
  /* el contenido siempre por delante del velo (antes iba atado al id de una sección,
     así que en /retail el velo tapaba el texto). Ahora es componente. */
  .mar-bg ~ .sec-inner,
  .mar-velo ~ .sec-inner{position:relative;z-index:2}
  section:has(.mar-bg){position:relative;overflow:hidden}
  .mar-center{text-align:center}
  .mar-center .lead-h2{margin-left:auto;margin-right:auto}
  .mar-center .estudio-copy{margin:0 auto;max-width:56ch}
  .mar-center .estudio-copy p{margin-left:auto;margin-right:auto}

  /* ---------- utilidades de páginas internas (compartidas) ---------- */
  .pag-hero{padding-top:calc(var(--sec-gap) + 72px)}
  .pag-lede{
    font-size:clamp(1.05rem,1.6vw,1.3rem);
    line-height:1.65;
    max-width:56ch;
    margin-top:clamp(20px,2.4vw,30px);
  }
  .pag-lede--sec{margin-bottom:clamp(30px,4vw,52px)}
  .pag-grid{
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(28px,5vw,88px);
    align-items:start;
  }
  .pag-banda{background:var(--stone)}
  .pag-lista{list-style:none;margin:26px 0 0}
  .pag-lista li{
    padding:14px 0 14px 26px;
    border-top:1px solid rgba(39,52,70,.18);
    position:relative;
    max-width:60ch;
  }
  .pag-lista li:last-child{border-bottom:1px solid rgba(39,52,70,.18)}
  .pag-lista li::before{
    content:"";
    position:absolute;
    left:0;top:1.45em;
    width:10px;height:1px;
    background:var(--plan);
  }
  .pag-enlaces{
    display:flex;flex-wrap:wrap;
    gap:8px clamp(24px,4vw,52px);
    margin-top:clamp(24px,3vw,38px);
  }
  .svc-p2{margin-top:1.1em !important;color:var(--plan-text)}
  .pag-cierre{background:var(--ink);color:var(--paper)}
  .pag-cierre .estudio-copy p{color:rgba(251,250,247,.82)}
  .pag-cierre .lead-h2 em{color:var(--sand)}
  .pag-cierre a:focus-visible{outline-color:var(--sand)}
  @media (max-width:900px){
    .pag-grid{grid-template-columns:1fr;gap:18px}
  }

  /* ================================================================
     PÁGINAS INTERNAS v2 — patrón definido en /retail (28-jul)
     Rompe el monocultivo de .pag-grid: apertura con imagen, bloques
     espejados, cita a sangre y cierre. Funciona con y sin fotografía.
     ================================================================ */

  /* --- apertura con imagen a sangre --- */
  .ph{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
  .ph-foto{position:absolute;inset:0;z-index:0}
  .ph-foto img{width:100%;height:100%;object-fit:cover;opacity:.55}
  .ph-velo{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to top,rgba(39,52,70,.94) 0%,rgba(39,52,70,.72) 42%,rgba(39,52,70,.38) 100%);
  }
  .ph-inner{
    position:relative;z-index:2;
    max-width:1360px;margin:0 auto;
    padding:calc(var(--sec-gap) + 64px) clamp(20px,4vw,56px) var(--sec-gap);
    min-height:64svh;display:flex;flex-direction:column;justify-content:flex-end;
  }
  .ph .coord{color:var(--sand)}
  .ph .hairline{border-top-color:rgba(251,250,247,.35);opacity:1}
  .ph h1{color:var(--paper)}
  .ph-lede{
    color:rgba(251,250,247,.86);
    font-size:clamp(1.05rem,1.6vw,1.3rem);
    line-height:1.6;max-width:52ch;margin-top:clamp(18px,2.2vw,26px);
  }
  /* estado sin fotografía: la apertura sigue siendo azul y digna */
  .ph--sin-foto .ph-foto{display:none}

  /* --- bloque espejado: imagen a un lado, prosa al otro --- */
  .pb{
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:clamp(32px,5vw,96px);
    align-items:center;
  }
  .pb--invertido{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .pb--invertido .pb-media{order:2}
  .pb-media figure{margin:0}
  .pb-media .frame{border:1px solid var(--plan);padding:14px}
  .pb-media img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/5}
  .pb-media figcaption{
    margin-top:12px;
    font-family:'Prompt',sans-serif;font-weight:500;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--plan-text);
  }
  .pb-copy p{max-width:58ch}
  .pb-copy p + p{margin-top:1.2em}
  @media (max-width:900px){
    .pb,.pb--invertido{grid-template-columns:1fr;gap:24px}
    .pb--invertido .pb-media{order:0}
    .pb-media{max-width:460px}
  }

  /* --- cita a sangre sobre materia --- */
  .pcita{position:relative;overflow:hidden;background:var(--ink)}
  .pcita-foto{position:absolute;inset:-10% 0;z-index:0}
  .pcita-foto img{width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(.6)}
  .pcita-inner{
    position:relative;z-index:2;
    max-width:1000px;margin:0 auto;text-align:center;
    padding:0 clamp(20px,4vw,56px);
  }
  .pcita blockquote{
    font-family:'Fira Sans',sans-serif;font-weight:700;
    font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.18;
    letter-spacing:-0.015em;color:var(--paper);margin:0;
  }
  .pcita blockquote em{font-style:normal;color:var(--sand)}
  .pcita .coord{color:var(--sand);display:block;margin-bottom:clamp(20px,2.6vw,32px)}

  /* --- corrección de contraste: 2º párrafo de fase sobre piedra (AA) --- */
  .svc-p2{color:rgba(39,52,70,.74) !important}

  /* Si el titular trae cortes de línea escritos a mano (.mask/.ml), esos cortes
     mandan: el max-width no debe volver a partirlos (rompía la animación y
     dejaba huérfanas). Verificado en /retail 28-jul. */
  .lead-h2:has(.mask),
  .pcita blockquote:has(.mask){max-width:none}

  /* --- iconografía de línea (ver .pag-lista--iconos) --- */
  /* viñeta de lista con la cruz del plano en vez del guion */
  .pag-lista--plano li::before{
    content:"";
    position:absolute;left:0;top:1.42em;
    width:12px;height:12px;background:none;
    /* cruz del plano: mismo gesto que las marcas del blueprint de la home */
    background-image:
      linear-gradient(var(--plan),var(--plan)),
      linear-gradient(var(--plan),var(--plan));
    background-size:12px 1px,1px 12px;
    background-position:center center,center center;
    background-repeat:no-repeat;
  }
  .pag-lista--plano li{padding-left:30px}

  /* --- PROYECTOS: rejilla lista para CMS, con estado vacío honesto --- */
  .pproj-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:clamp(20px,2.6vw,36px);
    list-style:none;
  }
  .pproj-card{border:1px solid var(--stone);background:var(--paper)}
  .pproj-card a{display:block}
  .pproj-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
  .pproj-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
  .pproj-card a:hover .pproj-thumb img{transform:scale(1.04)}
  .pproj-body{padding:clamp(18px,2vw,26px)}
  .pproj-meta{
    font-family:'Prompt',sans-serif;font-weight:500;
    font-size:11px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--plan-text);
  }
  .pproj-titulo{
    font-family:'Fira Sans',sans-serif;font-weight:700;
    font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.25;
    margin:10px 0 0;
  }
  /* estado vacío: ni tarjetas falsas ni huecos grises */
  .pproj-vacio{
    border:1px solid var(--stone);
    padding:clamp(34px,5vw,64px);
    text-align:center;
    background:linear-gradient(180deg,var(--paper),rgba(227,223,217,.35));
  }
  .pproj-vacio p{max-width:52ch;margin:0 auto}
  .pproj-vacio .coord{display:block;margin-bottom:14px}

  /* --- lista con iconografía de línea propia --- */
  .pag-lista--iconos li{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:18px;
    align-items:start;
    padding:16px 0;
  }
  .pag-lista--iconos li::before{display:none}
  .pl-icono{display:block;width:28px;height:28px;margin-top:.15em}
  .pl-icono svg{
    width:100%;height:100%;display:block;
    fill:none;stroke:var(--plan);stroke-width:1;
    stroke-linecap:square;stroke-linejoin:miter;
    vector-effect:non-scaling-stroke;
  }

  /* sobre la banda piedra, --plan-text se queda en 4,00:1 */
  .pag-banda .coord,
  .pag-banda figcaption{color:var(--plan-text-banda)}

  /* --- Menú de proyectos: nivel 1, elige el proyecto --- */
  /* el índice va en registro de etiqueta, no de titular: así el nombre grande
     del panel no suena a eco de la pestaña, sino a lo que el índice señala */
  .pmenu{
    display:flex;flex-wrap:wrap;gap:0 clamp(22px,2.8vw,40px);
    margin:clamp(30px,4vw,48px) 0 0;
    border-top:1px solid rgba(39,52,70,.16);
  }
  .pmenu-item{
    display:flex;align-items:baseline;gap:9px;
    background:transparent;border:0;padding:16px 0 14px;
    cursor:pointer;color:rgba(39,52,70,.78);
    border-bottom:1px solid transparent;margin-bottom:-1px;
    transition:color .35s var(--ease),border-color .35s var(--ease);
    text-align:left;
  }
  .pmenu-num,.pmenu-nom{
    font-family:'Prompt',sans-serif;
    letter-spacing:.16em;text-transform:uppercase;
  }
  .pmenu-num{font-weight:400;font-size:10px;letter-spacing:.2em}
  .pmenu-nom{font-weight:500;font-size:12px;line-height:1.25}
  .pmenu-item:hover{color:var(--ink)}
  .pmenu-item[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
  .pmenu-item[aria-selected="true"] .pmenu-nom{font-weight:600}
  .pmenu-item:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

  /* --- Panel del proyecto: nivel 2, su ficha y sus fotos --- */
  .ppanel[hidden]{display:none}
  .ppanel-cab{
    display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
    gap:clamp(20px,4vw,64px);align-items:start;
    padding:clamp(30px,4vw,52px) 0 clamp(24px,3vw,40px);
  }
  .ppanel-titulo{
    font-family:'Fira Sans',sans-serif;font-weight:700;
    font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12;margin:0;
    letter-spacing:-.01em;
  }
  .ppanel-desc{margin:0;max-width:60ch;color:rgba(39,52,70,.86)}
  @media (max-width:760px){
    .ppanel-cab{grid-template-columns:1fr;gap:14px}
    .pmenu{gap:0 clamp(18px,4vw,28px)}
  }

  /* --- Coverflow de fotos del proyecto: tarjetas en perspectiva --- */
  .pflow{
    position:relative;
    width:100%;
    min-height:clamp(300px,42vw,480px);
    display:flex;align-items:center;justify-content:center;
    perspective:1600px;
    overflow:hidden;
    outline:none;
  }
  .pflow-pista{position:relative;transform-style:preserve-3d}
  .pflow-card{
    position:absolute;left:50%;top:50%;
    overflow:hidden;
    transform-style:preserve-3d;transform-origin:center center;
    backface-visibility:hidden;
    /* fondo claro: cualquier sangrado de subpíxel en el borde queda invisible
       sobre el papel (con --ink se veía una línea oscura alrededor) */
    background:var(--stone);
    transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s cubic-bezier(.22,1,.36,1);
    will-change:transform;
    border:0;padding:0;
    cursor:pointer;
    display:block;
  }
  .pflow-card[aria-current="true"]{cursor:default}
  /* 2px de sobremedida: la foto llega siempre al corte pese al redondeo de subpíxel */
  .pflow-card img{
    position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);
    max-width:none; /* si no, el img{max-width:100%} global anula la sobremedida */
    object-fit:cover;display:block;user-select:none;backface-visibility:hidden;
  }
  .pflow-velo{
    position:absolute;inset:0;background:var(--ink);
    transition:opacity .6s cubic-bezier(.22,1,.36,1);pointer-events:none;
  }
  /* segmento arriba a la izquierda: chip translúcido, legible sobre cualquier foto */
  .pflow-seg{
    position:absolute;top:0;left:0;
    margin:clamp(14px,1.6vw,22px);
    padding:6px 12px 5px;
    background:rgba(39,52,70,.72);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    color:var(--paper);pointer-events:none;
  }
  .pflow-seg .pproj-meta{color:inherit;display:block}
  /* descripción abajo a la izquierda, más pequeña y con el velo justo al pie */
  .pflow-pie{
    position:absolute;left:0;right:0;bottom:0;
    padding:clamp(46px,6vw,72px) clamp(16px,1.8vw,24px) clamp(14px,1.6vw,20px);
    background:linear-gradient(180deg,
      rgba(39,52,70,0) 0%,
      rgba(39,52,70,.18) 40%,
      rgba(39,52,70,.74) 74%,
      rgba(39,52,70,.90) 100%);
    color:var(--paper);text-align:left;pointer-events:none;
  }
  .pflow-pie .pflow-titulo{
    font-family:'Fira Sans',sans-serif;font-weight:600;
    font-size:clamp(.9rem,1.05vw,1.02rem);line-height:1.3;margin:0;
  }
  .pflow-nav{
    display:flex;gap:10px;justify-content:center;align-items:center;
    margin-top:clamp(22px,2.6vw,34px);
  }
  .pflow-punto{
    width:28px;height:1px;background:rgba(39,52,70,.28);
    border:0;padding:0;cursor:pointer;
    transition:background .35s var(--ease),transform .35s var(--ease);
  }
  .pflow-punto[aria-current="true"]{background:var(--ink);transform:scaleY(3)}
  .pflow-punto:focus-visible{outline:2px solid var(--sand);outline-offset:6px}
  @media (max-width:640px){
    .pflow-seg{margin:12px;padding:5px 9px 4px}
    .pflow-seg .pproj-meta{font-size:10px;letter-spacing:.18em}
    .pflow-pie{padding:clamp(34px,10vw,48px) 14px 12px}
  }
  @media (prefers-reduced-motion:reduce){
    .pflow-card,.pflow-velo{transition:none}
  }

/* v6 — feedback 12-oct: escala común desde la entrada de Home y aire reducido. */
body{font-size:var(--copy-size);font-weight:400;line-height:1.8}
.hero-lede,.ph-lede,.pag-lede,.estudio-copy p,.retail-copy p,
.magazine-copy p,.parcela-note,.svc-body p,.contacto p{
  font-family:'Mulish',sans-serif;font-size:var(--copy-size);font-weight:400;line-height:1.8;
}
.lead-h2,.lead-h2--feature,.magazine-h2,.contacto h2,.pcita blockquote{
  font-family:'Fira Sans',sans-serif;font-size:var(--heading-size);font-weight:700;line-height:1.16;
}
.sec-head{margin-bottom:var(--sec-head-gap)}
/* El aire visible del hero se equilibra descontando el menú fijo. */
.hero-content{padding:calc(var(--nav-height) + var(--sec-gap)) clamp(20px,4vw,56px) var(--sec-gap)}
.hero-panel{max-width:640px}
.hero-logo{margin:24px 0 28px}
.hero-rule{margin-bottom:22px}
.hero-lede p+p{margin-top:1em}
@media (min-width:900px) and (max-height:760px){
  .hero-logo{width:min(100%,560px);margin:18px 0 20px}
  .hero-rule{margin-bottom:18px}
  .hero-lede p+p{margin-top:.75em}
  .hero .hero-actions{margin-top:22px}
}
.hero .hero-actions{margin-top:26px}
.hero .btn-ghost{position:relative;z-index:3}
/* Sobre el mismo fondo, el margen inferior de Visión ya aporta el aire entre bloques. */
#hacemos .qh-intro{padding-top:0}
#mirada-copy + #fases,
#fases + #otros-ambitos{padding-top:0}
#hacemos .qh-pin{padding:var(--sec-head-gap) 0 var(--sec-gap)}
.estudio-grid,.pb,.pag-grid{gap:clamp(28px,4vw,64px)}
#hacemos .qh-intro .sec-head{margin-bottom:0}
#hacemos .parcela{aspect-ratio:4/5;max-width:440px;margin:0 auto 28px}
#hacemos .parcela:last-child{margin-bottom:0}
#hacemos .parcela-top{padding:18px 20px;gap:14px;align-items:start}
#hacemos .parcela-top h3{font-size:clamp(.95rem,1.25vw,1.12rem);line-height:1.25;letter-spacing:.025em}
#hacemos .parcela-top .coord{font-size:9px;letter-spacing:.12em}
#hacemos .parcela img{height:0;min-height:0;flex:1;object-fit:contain}
#hacemos .parcela-body{padding:18px 20px;flex:0 0 auto}
#hacemos .parcela-note{font-size:var(--copy-size);line-height:1.65}
#magazine .sec-head{align-items:center;gap:20px}
#magazine .mag-peonza{order:3;flex:none;margin:0;height:44px}
#magazine .magazine-h2{max-width:none;margin:0 0 30px}
#magazine .magazine-grid{grid-template-columns:minmax(0,6fr) minmax(0,4fr);align-items:start;gap:clamp(28px,5vw,76px)}
#magazine .magazine-copy{margin:0}
#magazine .magazine-copy p{max-width:60ch;color:var(--paper);margin-bottom:1.4em}
#magazine .magazine-media{margin:0;width:100%;max-width:400px;justify-self:end}
#magazine .magazine-media .frame{padding:12px}
#magazine .magazine-media img{aspect-ratio:2/3;width:100%;height:auto;object-fit:contain}
#magazine .mag-cta{margin-top:28px}
#contacto{background:#fff;color:var(--ink);overflow:visible}
#contacto .contacto-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,86px)}
#contacto .contacto-line{display:none}
#contacto h2{color:var(--ink);margin:16px 0 24px}
#contacto .coord,#contacto .cf-note{color:var(--plan-text-banda)}
#contacto .cf-note{font-family:'Mulish',sans-serif;font-size:13px;font-weight:400;line-height:1.6;letter-spacing:normal}
#contacto .contacto-intro>p{max-width:48ch}
#contacto .home-contacto-photo{width:min(100%,310px);margin:28px 0 0;border:1px solid var(--plan);padding:14px}
#contacto .home-contacto-photo img{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain}
#contacto .contacto-form-wrap{padding-top:0}
#contacto .cf-title{color:var(--ink);font-size:clamp(1.3rem,2vw,1.7rem)}
#contacto .cf-support,#contacto .cf-field label,#contacto .cf-consent label,
#contacto .cf-success p{color:var(--ink)}
#contacto .cf-field input,#contacto .cf-field textarea{color:var(--ink);background:#fff;border-color:#728091;font-weight:400}
#contacto .cf-field input::placeholder,#contacto .cf-field textarea::placeholder{color:#596574;opacity:1}
#contacto .cf-field input:focus,#contacto .cf-field textarea:focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
#contacto .cf-consent a{color:var(--ink)}
#contacto .cf-error{color:#963c31}
#contacto .btn-ghost{border-color:var(--ink);color:var(--ink)}
#contacto .btn-ghost:hover{background:var(--ink);color:#fff}
#contacto a:focus-visible,#contacto .btn-ghost:focus-visible,#contacto .cf-success:focus{outline-color:var(--ink)}
#contacto .cf-success{border-color:var(--plan-text-banda)}
.cf-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.footer-coord{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);align-items:center;padding-right:0;gap:20px clamp(32px,6vw,96px)}
.footer-seal-group{justify-self:start}
.footer-copy{justify-self:start;text-align:left;color:#bdc2c8}
.footer-credit{justify-self:start;text-align:left;color:#bdc2c8;margin-right:0}
.footer-social-inactive{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--stone);border:1px solid rgba(251,250,247,.18)}
@media (min-width:901px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  html.js-motion #hacemos .qh-pin{height:auto}
  html.js-motion #hacemos .qh-track{padding:0 clamp(20px,4vw,56px);gap:24px}
  /* Conservar proporciones y reservar menú y márgenes en portátiles de poca altura. */
  html.js-motion #hacemos .parcela{
    width:min(30vw,calc((100svh - var(--nav-height) - var(--sec-head-gap) - var(--sec-gap)) * .8));
    min-width:0;max-width:440px;height:auto;aspect-ratio:4/5;flex:none;margin:0;
  }
}
@media (max-width:900px){
  #magazine .magazine-grid,#contacto .contacto-grid{grid-template-columns:1fr}
  #magazine .magazine-media{justify-self:start;max-width:340px}
  #magazine .mag-peonza{height:36px}
  #magazine .sec-head .coord{max-width:23ch}
  #contacto .contacto-form-wrap{padding-top:8px}
}
@media (max-width:600px){
  .hero-logo{margin:24px 0 28px}
  .hero .hero-actions{margin-top:24px}
  .btn-ghost{padding:0 20px;letter-spacing:.16em;gap:12px}
}
@media (max-width:760px){
  .footer-coord{grid-template-columns:auto minmax(0,1fr);gap:12px 18px}
  .footer-copy{justify-self:end}
  .footer-credit{grid-column:1/-1;justify-self:start}
}

/* Tipologías y listas de trayectoria comparten el cuerpo de Home. */
body #proyectos .paises-lista,body #proyectos .region-ciudades,body #otros-ambitos .parcela-words li{font-size:var(--copy-size);font-family:'Mulish',sans-serif;font-weight:400;line-height:1.8}