@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap');

/* =========================================================
   AVANZ BOUTIQUE REAL ESTATE — SISTEMA VISUAL
   Índice de bloques:
   1. Reset
   2. Variables y design tokens
   3. Tipografía
   4. Layout
   5. Header y navegación
   6. Botones y enlaces
   7. Home
   8. Proyectos (listado)
   9. Detalle de proyecto
   10. Desarrolladores
   11. Contacto y formularios
   12. Footer
   13. Animaciones
   14. Responsive
   15. Accesibilidad y reduced motion
   ========================================================= */

/* ==================================================
   1. RESET
   ================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; }
/* Red de seguridad: una sola palabra larga (URLs, correos, términos sin
   espacios como "automáticamente" en tamaños de fuente grandes) no debe
   poder empujar el ancho de la página. Rompe solo cuando es necesario;
   nunca a mitad de palabras que sí caben. */
h1, h2, h3, h4, h5, h6, p, blockquote, dd, dt, li, a, span { overflow-wrap: break-word; }

/* ==================================================
   2. VARIABLES Y DESIGN TOKENS
   ================================================== */
:root{
  /* Color */
  --ink:#171816;
  --paper:#f3f1eb;
  --warm:#e8e3d8;
  --sage:#7c8275;
  --muted:#60645d;
  --muted-2:#63675e;
  --muted-2-inverse:#8a8e85;
  --line:rgba(23,24,22,.16);
  --line-strong:rgba(23,24,22,.25);
  --white:#ffffff;
  --footer-bg:#111310;
  --dark-bg:#171916;

  /* Tipografía */
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Manrope",Arial,sans-serif;

  /* Layout */
  --max:1380px;
  --max-narrow:1000px;
  --text-width:760px;
  --gutter:48px;
  --gutter-sm:30px;
  --header-h:92px;
  --header-h-sm:74px;

  /* Sistema global de espaciado vertical — responde al contenido, no a
     alturas fijas. Reemplaza los padding:150px 0 planos que dejaban
     demasiado aire entre secciones con poco contenido. */
  --section-space-xl:clamp(112px,9vw,168px);
  --section-space-lg:clamp(88px,7vw,128px);
  --section-space-md:clamp(64px,5vw,96px);

  /* Radios */
  --radius-sm:4px;
  --radius-full:50%;

  /* Sombras */
  --shadow-sm:0 2px 10px rgba(23,24,22,.08);
  --shadow-md:0 12px 40px rgba(23,24,22,.16);
  --shadow-modal:0 25px 70px rgba(0,0,0,.45);

  /* Transiciones */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.2s;
  --t-base:.3s;
  --t-reveal:.6s;
  --t-image:.8s;

  /* Z-index scale */
  --z-header:50;
  --z-menu:60;
  --z-modal:100;
  --z-skiplink:200;
}

/* ==================================================
   3. TIPOGRAFÍA
   ================================================== */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
em{ font-family:var(--serif); font-weight:500; font-style:italic; }
.kicker{ font-size:11px; letter-spacing:.2em; font-weight:600; margin:0 0 25px; }
.kicker.dark{ color:var(--muted-2); }

/* ==================================================
   4. LAYOUT
   ================================================== */
body.menu-open{ overflow:hidden; }
.shell{ width:min(calc(100% - var(--gutter)),var(--max)); margin-inline:auto; }
.narrow{ max-width:var(--max-narrow); }

/* ==================================================
   ACCESIBILIDAD — SKIP LINK Y UTILIDADES (usadas en todo el sitio)
   ================================================== */
.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;
}
.skip-link{
  position:fixed; top:-100%; left:12px; z-index:var(--z-skiplink);
  background:var(--ink); color:#fff; padding:14px 20px; font-size:13px;
  letter-spacing:.04em; border-radius:var(--radius-sm); transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{ top:12px; }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.header :focus-visible,
.hero :focus-visible,
.section-dark :focus-visible,
.footer :focus-visible{ outline-color:#fff; }

/* ==================================================
   5. HEADER Y NAVEGACIÓN
   ================================================== */
.header{
  position:fixed; z-index:var(--z-header); top:0; left:0; width:100%;
  color:#fff; border-bottom:1px solid rgba(255,255,255,.18);
  background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent);
  transition:background var(--t-base) var(--ease), color var(--t-base) var(--ease),
             opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
/* Oculto mientras el journey hero ocupa la pantalla; assets/js/main.js
   lo revela al hacer scroll hacia la siguiente sección. Sin JS, o en
   cualquier otra página, el header permanece visible por defecto. */
.header.is-hidden{ opacity:0; transform:translateY(-100%); }
.header.scrolled,
.header.header-dark{
  background:rgba(243,241,235,.96);
  backdrop-filter:blur(14px);
  color:var(--ink);
  border-color:var(--line);
}
.nav{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; }
.wordmark{ display:flex; flex-direction:column; line-height:.9; letter-spacing:.18em; }
.wordmark span{ font-size:24px; font-weight:600; }
.wordmark small{ font-size:8px; margin-top:8px; }
.links{ display:flex; gap:36px; font-size:13px; }
.links a{ position:relative; transition:opacity var(--t-fast); padding:4px 0; }
.links a:hover{ opacity:.58; }
.links a[aria-current="page"]{ opacity:1; border-bottom:1px solid currentColor; }
.nav-cta{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid currentColor; padding-bottom:5px; transition:opacity var(--t-fast); }
.nav-cta:hover{ opacity:.58; }
.menu{ display:none; background:none; border:0; color:inherit; padding:8px; cursor:pointer; }
.menu svg{ display:block; }

/* Navegación contextual (páginas de proyecto) */
.project-nav{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.project-nav-inner{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  gap:20px; flex-wrap:wrap;
}
.project-nav-inner a{ display:inline-flex; align-items:center; gap:8px; transition:opacity var(--t-fast); }
.project-nav-inner a:hover{ opacity:.6; }
.project-nav-siblings{ display:flex; gap:26px; }

/* ==================================================
   6. BOTONES Y ENLACES
   ================================================== */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 24px; border:1px solid; letter-spacing:.06em;
  text-transform:uppercase; font-size:11px; font-weight:600;
  transition:background var(--t-fast), color var(--t-fast);
  cursor:pointer; min-height:44px;
}
.button.light{ background:#fff; color:var(--ink); border-color:#fff; }
.button.light:hover{ background:transparent; color:#fff; }
.button.dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.button.dark:hover{ background:transparent; color:var(--ink); }
.button.outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.button.outline:hover{ background:var(--ink); color:#fff; }
.button.full{ width:100%; }
.button[disabled]{ opacity:.5; cursor:not-allowed; }
.text-link{ display:inline-flex; align-items:center; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.text-link.light-link{ color:#fff; }

/* Icono de flecha único, reutilizado en todo el sitio en vez de los
   caracteres Unicode ↗ → ← ↓. iOS/Safari renderiza esos símbolos con
   la fuente de emoji en algunos contextos (icono azul en un cuadro),
   fuera de control tipográfico. Una sola forma (apunta a la derecha)
   rotada por CSS cubre las cuatro direcciones que usa el sitio. */
.icon-arrow{
  width:.85em; height:.85em; flex-shrink:0; display:inline-block;
  vertical-align:-.05em; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon-arrow--up-right{ transform:rotate(-45deg); }
.icon-arrow--down-right{ transform:rotate(45deg); }
.icon-arrow--left{ transform:rotate(180deg); }
.icon-arrow--down{ transform:rotate(90deg); }
/* Envoltura para flechas que antes iban sueltas dentro del texto de un
   enlace. Sin margen propio: todos los contenedores donde aparece
   (.text-link, .button, .project-nav-inner a, .hero-foot span) ya
   usan flex + gap, así que el espaciado lo da el padre. */
.icon-inline{ display:inline-flex; align-items:center; }

/* ==================================================
   7. HOME
   ================================================== */
.hero{ min-height:100svh; position:relative; color:#fff; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media,.partner-media,.project-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(9,10,9,.72),rgba(10,12,10,.1) 68%),
             linear-gradient(0deg,rgba(8,9,8,.48),transparent 55%);
}
.hero-overlay.strong{ background:rgba(10,12,10,.58); }
.hero-content{ position:relative; z-index:2; padding-bottom:13vh; max-width:1180px; }
.hero h1{ font-size:clamp(64px,6.3vw,112px); line-height:.94; letter-spacing:-.045em; font-weight:400; max-width:1050px; margin:0; }
.hero h1 em{ font-size:.88em; }
.hero .hero-lead{ font-size:clamp(20px,1.4vw,22px); line-height:1.45; max-width:670px; margin:26px 0 34px; }
.hero-lead{ font-size:clamp(17px,1.6vw,23px); max-width:650px; margin:34px 0; color:rgba(255,255,255,.82); }
.hero-actions{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.hero-foot{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; justify-content:space-between; font-size:10px; letter-spacing:.12em; width:min(calc(100% - var(--gutter)),var(--max));
}
.hero-foot span:last-child{ display:flex; align-items:center; gap:8px; }

.section{ padding:var(--section-space-xl) 0; }
.statement{ text-align:center; padding:120px 0; }
.statement .shell{ max-width:900px; }
.statement h2{ font-size:clamp(46px,5.2vw,78px); line-height:1.1; letter-spacing:-.04em; font-weight:400; margin:0; }
.statement p:last-child:not(.statement-accent){ max-width:720px; margin:35px auto 0; color:#575b55; font-size:18px; }
.statement .section-intro{ color:#575b55; max-width:640px; margin:22px auto 0; font-size:18px; }
.statement .statement-accent{ max-width:650px; margin-top:26px; }

.split{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:10vw; row-gap:0; border-top:1px solid var(--line); padding-top:56px; }
.split h2{ font-size:clamp(32px,4vw,65px); line-height:1.12; letter-spacing:-.04em; font-weight:400; margin:0; }
.principles > div{ display:grid; grid-template-columns:50px minmax(0,1fr); padding:0 0 32px; margin-bottom:32px; border-bottom:1px solid var(--line); }
.principles > div:last-child{ margin-bottom:0; border-bottom:0; padding-bottom:0; }
.principles span{ font-size:11px; color:var(--muted-2); }
.principles h3{ font-size:25px; font-weight:500; margin:0 0 12px; }
.principles p{ grid-column:2; color:#62665f; margin:0; max-width:620px; }

.section-dark{ background:var(--dark-bg); color:#fff; padding:var(--section-space-xl) 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:52px; gap:24px; flex-wrap:wrap; }
.section-head h2{ max-width:700px; font-size:clamp(32px,4vw,65px); line-height:1.12; letter-spacing:-.04em; font-weight:400; margin:0; }

.project-grid,.project-list{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; }
.project-card{
  position:relative; min-height:680px; color:#fff; overflow:hidden;
  display:block; border-radius:var(--radius-sm);
}
a.project-card{ cursor:pointer; }
.project-image{ transition:transform var(--t-image) var(--ease); }
.project-card:hover .project-image,
.project-card:focus-visible .project-image{ transform:scale(1.025); }
.project-card:hover .project-shade,
.project-card:focus-visible .project-shade{ background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 55%); }
.project-card:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }
.project-shade{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.62),transparent 55%); }
.project-copy{ position:absolute; z-index:2; inset:auto 34px 30px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.project-copy span,.project-copy .project-status{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.project-copy h3{ font-size:clamp(28px,3vw,39px); font-weight:400; margin:8px 0 4px; letter-spacing:-.03em; }
.project-copy p{ margin:0; color:rgba(255,255,255,.65); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.project-arrow{
  width:52px; height:52px; min-width:52px; border:1px solid rgba(255,255,255,.45);
  border-radius:var(--radius-full); display:grid; place-items:center; font-size:20px;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.project-card:hover .project-arrow,
.project-card:focus-visible .project-arrow{ background:rgba(255,255,255,.12); border-color:#fff; transform:translate(3px,-3px); }

.process{ padding:var(--section-space-lg) 0; }
.process-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12vw; }
.process h2{ font-size:clamp(28px,3.4vw,53px); line-height:1.12; letter-spacing:-.04em; font-weight:400; margin:0; }
.process ol{ list-style:none; margin:0; padding:0; }
.process li{ display:grid; grid-template-columns:55px minmax(0,1fr); padding:0 0 26px; margin-bottom:26px; border-bottom:1px solid var(--line); }
.process li:last-child{ margin-bottom:0; border-bottom:0; padding-bottom:0; }
.process li span{ font-size:11px; color:var(--muted-2); }
.process h3{ font-size:24px; margin:0 0 8px; }
.process li p{ margin:0; color:#656960; }

.partner-call{ min-height:85vh; position:relative; color:#fff; display:flex; align-items:center; overflow:hidden; }
.partner-content{ position:relative; z-index:2; text-align:center; }
.partner-content h2{ font-size:clamp(38px,6vw,80px); line-height:1.08; font-weight:400; letter-spacing:-.045em; margin:0 auto; max-width:850px; }
.partner-content h2 em{ font-size:.82em; }
.partner-content p:not(.kicker):not(.cta-note){ max-width:650px; margin:30px auto; font-size:18px; color:rgba(255,255,255,.82); }
.partner-content .hero-actions{ justify-content:center; margin-top:10px; }
.partner-content .text-link{ color:#fff; }

/* Texto destacado tipo pull-quote, reutilizado en varias secciones editoriales */
.statement-accent{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(20px,2.2vw,29px); color:var(--ink); margin:34px auto 0; max-width:680px; }
.section-dark .statement-accent{ color:#fff; }

/* ==================================================
   JOURNEY HERO — entrada dual editorial (Personas / Desarrolladores)
   Reemplaza el antiguo hero único + la sección .dual-entry: la
   elección de audiencia ocurre en la primera vista, sin modal ni
   pantalla intermedia. Indexable, visible sin JS, sin scroll-jacking.
   ================================================== */
.journey-hero{ position:relative; }
.journey-hero-brand{
  position:absolute; top:0; left:0; right:0; z-index:3; margin:0;
  padding:calc(var(--header-h) + 22px) 20px 30px; text-align:center;
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; background:linear-gradient(180deg,rgba(8,9,8,.55),transparent);
  pointer-events:none;
}
.journey-panels{ position:relative; display:grid; grid-template-columns:1fr 1fr; min-height:100svh; }
/* Una sola fotografía compartida detrás de los dos paneles — balance
   visual real en vez de dos imágenes distintas cosidas a la mitad. */
.journey-hero-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform var(--t-image) var(--ease);
}
.journey-panels:has(.journey-panel:hover) .journey-hero-media,
.journey-panels:has(.journey-panel:focus-visible) .journey-hero-media{ transform:scale(1.02); }
.journey-panel{
  position:relative; z-index:1; display:flex; align-items:flex-end;
  color:#fff; min-height:440px;
}
.journey-panel--developers{ border-left:1px solid rgba(255,255,255,.16); }
.journey-panel-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(8,9,8,.75),rgba(8,9,8,.16) 58%);
  transition:background var(--t-base);
}
.journey-panel:hover .journey-panel-overlay,
.journey-panel:focus-visible .journey-panel-overlay{ background:linear-gradient(0deg,rgba(8,9,8,.82),rgba(8,9,8,.26) 58%); }
.journey-panel:focus-visible{ outline:2px solid #fff; outline-offset:-6px; }
.journey-panel-content{ position:relative; z-index:2; padding:0 clamp(24px,4vw,56px) 64px; max-width:560px; }
.journey-panel-eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8); margin:0 0 14px; }
.journey-panel-content h2{ font-size:clamp(28px,3vw,46px); line-height:1.05; letter-spacing:-.03em; font-weight:400; margin:0 0 14px; }
.journey-panel-desc{ font-size:16px; line-height:1.55; color:rgba(255,255,255,.84); margin:0 0 24px; max-width:440px; }
.journey-panel-cta{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:6px; transition:border-color var(--t-fast);
}
.journey-panel:hover .journey-panel-cta,
.journey-panel:focus-visible .journey-panel-cta{ border-color:#fff; }
.journey-panel-preferred{
  position:absolute; top:22px; right:22px; z-index:2; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.4); padding:6px 12px; border-radius:999px;
}
.journey-hero-micro{ padding:26px var(--gutter) 0; font-size:13px; color:var(--muted); text-align:center; }

/* Introducción breve de marca — sustituye la vieja sección .dual-entry */
.brand-intro{ padding:var(--section-space-md) 0; }
.brand-intro-lead{ font-size:clamp(19px,2vw,24px); line-height:1.55; color:#3a3d37; max-width:840px; margin:16px 0 0; }

/* Párrafo introductorio bajo un h2 en secciones sobre fondo oscuro */
.section-intro{ color:rgba(255,255,255,.68); max-width:680px; margin-top:18px; font-size:17px; line-height:1.6; }

/* Cierre de texto dentro de .split (grid de 2 columnas) — ocupa ambas columnas */
.split-closing{ grid-column:1/-1; margin-top:0; padding-top:28px; border-top:1px solid var(--line); font-size:18px; color:var(--muted); max-width:700px; }

/* Cierre de texto dentro de .process */
.process-closing{ margin-top:0; padding-top:32px; border-top:1px solid var(--line); font-size:18px; color:var(--muted); max-width:700px; }

/* Comparativa de modelo: "Comercialización fragmentada" vs "Sistema AVANZ" */
.model-compare-section{ padding-top:110px; }
.model-compare-head h2{ font-size:clamp(30px,4vw,52px); line-height:1.12; letter-spacing:-.04em; font-weight:400; margin:20px 0 0; max-width:760px; }
.model-compare-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:60px; border:1px solid var(--line); }
.model-compare-col{ padding:44px; }
.model-compare-col:first-child{ border-right:1px solid var(--line); }
.model-compare-col h3{ font-size:22px; font-weight:500; margin:0 0 26px; }
.model-compare-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.model-compare-col li{ padding-left:22px; position:relative; font-size:15px; color:#5c6059; }
.model-compare-col li::before{ content:"–"; position:absolute; left:0; color:#9a9d95; }
.model-compare-col.accent{ background:var(--ink); color:#fff; }
.model-compare-col.accent li{ color:rgba(255,255,255,.82); }
.model-compare-col.accent li::before{ color:rgba(255,255,255,.5); }
.model-compare-closing{ margin-top:40px; font-size:17px; color:var(--muted); max-width:640px; }

/* Criterio de selección — párrafo introductorio antes de .shift-list */
.criteria-lead{ font-size:19px; color:#5d615b; max-width:640px; margin:24px 0 6px; line-height:1.6; }
.criteria-list{ list-style:none; margin:38px 0 0; padding:0; max-width:760px; counter-reset:none; }
.criteria-list li{ display:flex; align-items:baseline; gap:26px; padding:20px 0; border-bottom:1px solid var(--line); font-size:19px; color:#33362f; }
.criteria-list li:first-child{ border-top:1px solid var(--line); }
.criteria-list li span{ font-size:12px; color:var(--muted-2); min-width:22px; }

/* ==================================================
   8. PROYECTOS (LISTADO)
   ================================================== */
.page-hero{ padding-top:230px; padding-bottom:120px; }
.page-hero h1{ font-size:clamp(38px,5.5vw,90px); line-height:1.05; letter-spacing:-.045em; font-weight:400; max-width:900px; margin:0; }
.page-hero p:not(.kicker){ max-width:650px; font-size:19px; color:#62665f; margin-top:35px; }
.page-hero .text-link{ display:inline-flex; margin-top:26px; }
.project-list{ padding-bottom:150px; }
.project-list .project-card:nth-child(even){ transform:translateY(110px); }
.simple-cta{ border-top:1px solid var(--line); padding:130px 0 150px; text-align:center; }
.simple-cta h2{ font-size:clamp(30px,4vw,54px); font-weight:400; letter-spacing:-.04em; margin:0; }
.simple-cta p{ color:#62665f; margin:18px 0 30px; }

/* ==================================================
   9. DETALLE DE PROYECTO
   ================================================== */
.project-hero{ min-height:100svh; position:relative; color:#fff; display:flex; align-items:flex-end; overflow:hidden; }
.project-hero .hero-content{ padding-bottom:14vh; }
.project-hero .kicker{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.project-hero h1{ font-size:clamp(40px,6.5vw,100px); line-height:1.03; letter-spacing:-.045em; font-weight:400; max-width:1000px; margin:0; }
.project-hero .hero-lead{ font-style:italic; font-family:var(--serif); font-size:clamp(19px,2vw,27px); color:#fff; }

.project-intro{ padding:150px 0 100px; }
.project-intro-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:10vw; }
.project-intro h2{ font-size:clamp(28px,3.4vw,44px); line-height:1.16; letter-spacing:-.03em; font-weight:400; margin:0; }
.project-intro-body{ font-size:18px; color:#4c4f49; line-height:1.7; }
.project-intro-body p{ margin:0 0 20px; }
.project-intro-body p:last-child{ margin-bottom:0; }

.project-gallery{ padding:0 0 150px; display:grid; gap:22px; }
.project-gallery figure{ margin:0; }
.project-gallery img{ width:100%; height:100%; object-fit:cover; }
.gallery-full{ aspect-ratio:16/9; }
.gallery-pair{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; }
.gallery-pair figure{ aspect-ratio:4/5; overflow:hidden; }
.gallery-full figure{ overflow:hidden; height:100%; }
.project-gallery figcaption{ margin-top:10px; font-size:12px; color:var(--muted-2); }

.project-essence{ background:var(--warm); padding:130px 0; }
.essence-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:50px; margin-top:60px; }
.essence-grid h3{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; margin:0 0 14px; color:var(--muted); }
.essence-grid p{ margin:0; font-size:19px; line-height:1.5; color:var(--ink); }

.project-features{ padding:130px 0; }
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0; margin-top:60px; border-top:1px solid var(--line-strong); border-left:1px solid var(--line); }
.features-grid > div{ padding:32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.features-grid dt{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); margin-bottom:10px; }
.features-grid dd{ margin:0; font-size:22px; font-weight:400; letter-spacing:-.01em; }

.project-emotional{ position:relative; min-height:75vh; color:#fff; display:flex; align-items:center; overflow:hidden; }
.project-emotional img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.project-emotional .hero-overlay{ background:rgba(10,12,10,.45); }
.project-emotional-content{ position:relative; z-index:2; max-width:700px; }
.project-emotional-content p{ font-size:clamp(22px,2.6vw,34px); font-family:var(--serif); font-style:italic; line-height:1.3; margin:0; }

.project-location{ padding:130px 0; }
.location-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8vw; align-items:center; margin-top:50px; }
.location-body p{ color:#4c4f49; font-size:17px; line-height:1.7; }
.location-map{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-sm); }
.location-map img{ width:100%; height:100%; object-fit:cover; }

/* Brochure — componente preparado, se activa solo cuando exista un PDF real */
.project-brochure{ background:var(--dark-bg); color:#fff; padding:130px 0; }
.brochure-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:8vw; align-items:center; margin-top:50px; }
.brochure-cover{ aspect-ratio:3/4; overflow:hidden; box-shadow:var(--shadow-md); }
.brochure-cover img{ width:100%; height:100%; object-fit:cover; }
.brochure-info h3{ font-size:clamp(28px,3vw,40px); font-weight:400; margin:0 0 14px; letter-spacing:-.02em; }
.brochure-info p{ color:rgba(255,255,255,.72); font-size:16px; line-height:1.6; max-width:520px; }
.brochure-meta{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:16px 0 30px; }
.brochure-actions{ display:flex; gap:20px; flex-wrap:wrap; }

.brochure-modal{
  position:fixed; inset:0; z-index:var(--z-modal); display:none;
  background:rgba(8,9,8,.86); align-items:center; justify-content:center; padding:24px;
}
.brochure-modal[data-open="true"]{ display:flex; }
.brochure-modal-panel{
  position:relative; width:min(100%,960px); height:min(90vh,1200px);
  background:#fff; border-radius:var(--radius-sm); box-shadow:var(--shadow-modal);
  display:flex; flex-direction:column; overflow:hidden;
}
.brochure-modal-header{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }
.brochure-modal-close{ background:none; border:0; cursor:pointer; padding:10px; min-width:44px; min-height:44px; }
.brochure-modal iframe{ border:0; width:100%; flex:1; }
.brochure-modal-fallback{ padding:16px 20px; font-size:13px; border-top:1px solid var(--line); }

.project-final-cta{ border-top:1px solid var(--line); padding:130px 0 150px; text-align:center; }
.project-final-cta h2{ font-size:clamp(30px,4vw,54px); font-weight:400; letter-spacing:-.04em; margin:0 auto; max-width:720px; }
.project-final-cta p{ color:#62665f; margin:18px 0 30px; }

/* ==================================================
   10. DESARROLLADORES
   ================================================== */
.developer-hero{ min-height:100svh; position:relative; color:#fff; display:flex; align-items:flex-end; overflow:hidden; }
.developer-hero .hero-content{ padding-bottom:11vh; }
.developer-hero h1{ font-size:clamp(40px,7vw,100px); line-height:1.02; letter-spacing:-.045em; font-weight:400; max-width:1000px; margin:0; }

.developer-intro{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:10vw; }
.developer-intro h2{ font-size:clamp(30px,4vw,52px); line-height:1.12; letter-spacing:-.04em; font-weight:400; margin:0; }
.developer-intro > p{ font-size:19px; color:#5d615b; padding-top:40px; line-height:1.7; }
.muted{ background:var(--warm); }
.position-block h2{ font-size:clamp(30px,4vw,52px); line-height:1.12; letter-spacing:-.04em; font-weight:400; margin:20px 0 0; max-width:800px; }
.position-block p:not(.statement-accent){ font-size:19px; color:#5d615b; max-width:700px; margin-top:30px; line-height:1.7; }
.block-title{ font-size:clamp(28px,3.4vw,44px); line-height:1.16; letter-spacing:-.03em; font-weight:400; margin:20px 0 0; max-width:760px; }

.deliverables{ padding:130px 0; }
.deliverable-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:60px; }
.deliverable-grid article{ padding:35px; border-top:1px solid var(--line-strong); border-right:1px solid var(--line); }
.deliverable-grid span{ font-size:11px; color:var(--muted-2); }
.deliverable-grid h3{ font-size:25px; margin:40px 0 12px; }
.deliverable-grid p{ color:var(--muted); margin:0; }

.process-steps{ padding:130px 0; }
.process-steps-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:36px; margin-top:60px; counter-reset:step; }
.process-steps-list li{ list-style:none; border-top:1px solid var(--line-strong); padding-top:20px; }
.process-steps-list span{ font-size:11px; color:var(--muted-2); display:block; margin-bottom:10px; }
.process-steps-list h3{ font-size:19px; margin:0 0 8px; font-weight:500; }
.process-steps-list p{ margin:0; color:var(--muted); font-size:15px; }

.model-compare-head p{ font-size:18px; color:#5d615b; max-width:680px; margin-top:20px; line-height:1.6; }

/* Caso de estudio — pilares (reutiliza .essence-grid) y estadísticas reales */
.case-study-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px; margin-top:60px; padding-top:50px; border-top:1px solid var(--line-strong); }
.case-study-stats strong{ display:block; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(28px,3.2vw,42px); color:var(--ink); margin-bottom:10px; }
.case-study-stats span{ display:block; font-size:14px; color:var(--muted); line-height:1.5; max-width:260px; }

.cta-note{ font-size:13px; color:rgba(255,255,255,.75); margin-top:26px; }

.shift-list{ margin-top:40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px 40px; }
.shift-list li{ list-style:none; padding-left:28px; position:relative; color:#4c4f49; font-size:16px; line-height:1.5; }
.shift-list li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--ink); border-radius:var(--radius-full); }

.fit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10vw; }
.fit h2{ font-size:clamp(28px,3.4vw,44px); line-height:1.16; letter-spacing:-.03em; font-weight:400; margin:0; }
.fit h3{ font-size:22px; margin:0 0 16px; }
.fit ul{ padding-left:20px; color:#5c6059; margin-bottom:35px; }
.fit li{ margin:12px 0; }

/* ==================================================
   11. CONTACTO Y FORMULARIOS
   ================================================== */
.contact-page{ padding-top:230px; padding-bottom:150px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:10vw; align-items:start; }
.contact-page h1{ font-size:clamp(36px,5vw,68px); line-height:1.1; letter-spacing:-.03em; font-weight:400; margin:0; }
.contact-page > div > p{ font-size:18px; color:#60645d; max-width:620px; }
.contact-direct{ display:flex; flex-direction:column; gap:8px; margin-top:55px; }
.contact-direct a{ font-size:clamp(16px,4.5vw,20px); border-bottom:1px solid; max-width:100%; overflow-wrap:anywhere; }
.contact-direct span{ font-size:12px; color:var(--muted-2); }

.contact-form{ display:flex; flex-direction:column; gap:26px; }
.contact-form fieldset{ border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:26px; }
.contact-form fieldset[hidden]{ display:none; }
.contact-form legend{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); padding:0 0 6px; }
.contact-form label{ display:flex; flex-direction:column; gap:10px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.contact-form .field-optional{ font-normal:normal; text-transform:none; letter-spacing:0; color:var(--muted-2); font-size:12px; }
.contact-form input,
.contact-form textarea,
.contact-form select{
  background:transparent; border:0; border-bottom:1px solid #767a70; padding:12px 2px;
  outline:none; text-transform:none; letter-spacing:0; font-size:16px; min-height:44px;
}
.contact-form select{ appearance:auto; }
.contact-form textarea{ min-height:auto; resize:vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible{ border-color:var(--ink); outline:none; }
.contact-form input:invalid:not(:placeholder-shown),
.contact-form.was-submitted input:invalid,
.contact-form.was-submitted select:invalid,
.contact-form.was-submitted textarea:invalid{ border-color:#a33; }
.field-error{ font-size:12px; color:#a33; text-transform:none; letter-spacing:0; min-height:16px; }
.intent-group{ display:flex; flex-direction:column; gap:14px; }
.intent-option{ display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); padding:16px; cursor:pointer; transition:border-color var(--t-fast); }
.intent-option:has(input:checked){ border-color:var(--ink); }
.intent-option input{ margin-top:3px; min-height:auto; }
.intent-option-text{ display:flex; flex-direction:column; gap:4px; text-transform:none; letter-spacing:0; }
.intent-option-text strong{ font-size:15px; font-weight:500; }
.intent-option-text span{ font-size:13px; color:var(--muted); }
.consent-field{ flex-direction:row; align-items:flex-start; gap:10px; }
.consent-field input{ margin-top:4px; min-height:auto; width:16px; height:16px; }
.consent-field span{ text-transform:none; letter-spacing:0; font-size:13px; line-height:1.5; color:var(--muted); }
.contact-form small{ color:var(--muted); line-height:1.5; }
.contact-form .button{ width:max-content; }
.form-status{ font-size:13px; padding:14px 16px; border-radius:var(--radius-sm); display:none; }
.form-status[data-visible="true"]{ display:block; }
.form-status.error{ background:#fbeaea; color:#8f2c2c; }

.success{ min-height:75vh; display:grid; place-items:center; text-align:center; padding-top:120px; }
.success h1{ font-size:clamp(40px,6vw,88px); font-weight:400; letter-spacing:-.05em; margin:0 0 24px; }
.success p{ max-width:580px; color:var(--muted); margin:0 auto 30px; }
.success .hero-actions{ justify-content:center; }

/* ==================================================
   12. FOOTER
   ================================================== */
.footer{ background:var(--footer-bg); color:#fff; padding:84px 0 28px; border-top:1px solid rgba(255,255,255,.08); }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:48px; }
.footer-brand p{ color:#92968e; margin-top:22px; font-size:15px; line-height:1.6; max-width:340px; }
.footer-grid > div{ min-width:0; }
.footer-grid > div:not(.footer-brand){ display:flex; flex-direction:column; gap:12px; font-size:14px; }
.footer-grid small{ color:var(--muted-2-inverse); letter-spacing:.15em; margin-bottom:6px; font-size:11px; }
.footer-grid a{ transition:opacity var(--t-fast); overflow-wrap:anywhere; }
.footer-grid a:hover{ opacity:.68; }
.legal{ border-top:1px solid rgba(255,255,255,.12); margin-top:54px; padding-top:24px; display:flex; justify-content:space-between; font-size:11px; color:#94988e; }

/* ==================================================
   13. ANIMACIONES
   ================================================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--t-reveal) ease, transform var(--t-reveal) ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.no-js .reveal{ opacity:1; transform:none; }

/* ==================================================
   14. RESPONSIVE
   ================================================== */
@media (max-width:1080px){
  .developer-intro,.fit{ gap:8vw; }
  .project-intro-grid,.location-grid,.brochure-grid{ gap:7vw; }
  .dual-entry{ padding:88px 0; }
}

@media (max-width:850px){
  :root{ --header-h:var(--header-h-sm); --gutter:30px; }
  .shell{ width:min(calc(100% - var(--gutter-sm)),var(--max)); }
  .nav{ height:var(--header-h); }
  .links{
    position:fixed; inset:0; top:var(--header-h); background:#151714; color:#fff;
    display:flex; opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity var(--t-fast) var(--ease), visibility var(--t-fast), transform var(--t-fast) var(--ease);
    flex-direction:column; justify-content:center; align-items:center; font-size:26px; gap:28px;
    height:calc(100dvh - var(--header-h));
  }
  .links.open{ opacity:1; visibility:visible; transform:none; }
  .menu{ display:block; z-index:2; min-width:44px; min-height:44px; }
  .nav-cta{ display:none; }

  .project-hero h1,.developer-hero h1{ font-size:clamp(38px,10vw,56px); }
  .hero h1{ font-size:clamp(43px,13vw,60px); line-height:.94; }
  .hero .hero-lead{ font-size:17px; line-height:1.48; margin:20px 0 30px; }
  .hero-content{ padding-bottom:12vh; }
  .hero-actions{ align-items:flex-start; flex-direction:column; gap:22px; }
  .hero .hero-actions{ width:100%; }
  .hero .hero-actions .button{ width:100%; }
  .hero .hero-content{ padding-inline:22px; }
  .section{ padding:95px 0; }
  .statement{ padding:72px 0; }

  .split,.process-grid,.developer-intro,.fit,.contact-page,
  .project-intro-grid,.location-grid,.brochure-grid,.gallery-pair,
  .model-compare-grid{
    grid-template-columns:minmax(0,1fr); gap:50px;
  }
  .model-compare-col:first-child{ border-right:0; border-bottom:1px solid var(--line); }

  /* Journey hero — distribución real en columna con gap, no solo
     min-height + align-items: evita el amontonamiento y las
     superposiciones entre eyebrow, título, descripción y CTA. */
  .journey-hero-brand{
    padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 20px;
    font-size:10px;
  }
  .journey-panels{ grid-template-columns:1fr; min-height:auto; }
  .journey-panel{ min-height:clamp(390px,50svh,500px); }
  .journey-panel--developers{ border-left:0; border-top:1px solid rgba(255,255,255,.16); }
  .journey-panel-overlay{ background:linear-gradient(0deg,rgba(8,9,8,.82),rgba(8,9,8,.2) 58%); }
  .journey-panel-content{
    display:flex; flex-direction:column; gap:12px;
    padding:24px 22px calc(28px + env(safe-area-inset-bottom,0px));
    max-width:none; width:100%;
  }
  .journey-panel-eyebrow{ font-size:11px; line-height:1.4; margin:0; max-width:26ch; }
  .journey-panel-content h2{ font-size:clamp(30px,7.5vw,38px); line-height:1.08; margin:0; max-width:15ch; }
  .journey-panel-desc{ font-size:clamp(17px,4vw,20px); line-height:1.42; margin:0; max-width:32ch; }
  .journey-panel-cta{ margin-top:4px; }
  .journey-panel-preferred{ top:calc(env(safe-area-inset-top,0px) + 16px); right:16px; }
  .section-head{ align-items:flex-start; flex-direction:column; gap:25px; }
  .project-grid,.project-list{ grid-template-columns:minmax(0,1fr); }
  .project-card{ min-height:clamp(230px,64vw,420px); }
  .project-list .project-card:nth-child(even){ transform:none; }
  .deliverable-grid{ grid-template-columns:minmax(0,1fr); }
  .footer{ padding:60px 0 22px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .footer-brand,.footer-contact{ grid-column:1/-1; }
  .legal{ margin-top:44px; }
  .legal{ gap:20px; flex-direction:column; }
  .page-hero,.contact-page,.project-intro{ padding-top:150px; }
  .partner-call{ min-height:750px; }
  .project-hero{ min-height:100svh; }
  .project-nav-inner{ flex-direction:column; align-items:flex-start; gap:14px; }
  .brochure-actions .button{ width:100%; }
  .brochure-modal-panel{ height:90dvh; }
  .essence-grid,.features-grid{ margin-top:40px; }
}

@media (max-width:420px){
  .project-hero h1,.developer-hero h1{ font-size:clamp(34px,11vw,44px); }
  .simple-cta h2,.project-final-cta h2{ font-size:clamp(26px,8vw,36px); }
}

/* Alturas de hero muy bajas (laptops de poca altura) */
@media (max-height:700px) and (min-width:851px){
  .hero,.developer-hero,.project-hero{ min-height:auto; padding-top:calc(var(--header-h) + 60px); padding-bottom:60px; }
}

/* Orientación horizontal en móvil */
@media (max-width:850px) and (orientation:landscape){
  .hero,.developer-hero,.project-hero{ min-height:auto; padding-top:calc(var(--header-h) + 40px); padding-bottom:40px; }
  .journey-panel{ min-height:70svh; }
  .links{ justify-content:flex-start; padding-top:40px; font-size:20px; gap:18px; }
}

/* ==================================================
   15. ACCESIBILIDAD Y REDUCED MOTION
   ================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .project-image{ transition:none; }
  .header{ transition:none; }
  .journey-hero-media,.journey-panel-overlay{ transition:none; }
  .journey-panels:has(.journey-panel:hover) .journey-hero-media,
  .journey-panels:has(.journey-panel:focus-visible) .journey-hero-media{ transform:none; }
}

/* ===== Standardized project system 2026-07 ===== */
.project-facts{padding:110px 0;background:#f3f0e9;border-block:1px solid var(--line)}
.project-facts .features-grid{margin-top:44px}
.data-note{font-size:12px;color:var(--muted-2);margin:28px 0 0}
.essence-numbered article span,.option-grid article span{font-size:11px;letter-spacing:.12em;color:var(--muted-2)}
.essence-numbered article h3{margin-top:18px}
.project-options{padding:130px 0;background:#fff}
.project-options h2,.project-location h2,.project-brochure h2{font-size:clamp(34px,4.2vw,64px);font-weight:400;line-height:1.05;letter-spacing:-.04em;max-width:900px;margin:18px 0 54px}
.option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.option-grid article{padding:34px 32px 12px 0;border-right:1px solid var(--line)}
.option-grid article+article{padding-left:32px}.option-grid article:last-child{border-right:0}
.option-grid h3{font-size:clamp(24px,2.2vw,34px);font-weight:400;margin:18px 0 14px}.option-grid p{color:#5c6059;line-height:1.65}
.project-location .location-grid{align-items:start}.project-location h2{margin-bottom:0}.location-body{font-size:clamp(18px,1.5vw,22px);line-height:1.65;color:#4d504a}.location-body .text-link{margin-top:28px}
.dark-link{color:var(--ink)}
.brochure-inline{display:flex;justify-content:space-between;align-items:flex-end;gap:60px}.brochure-inline h2{color:#fff;margin-bottom:18px}.brochure-inline p{max-width:670px;color:rgba(255,255,255,.7)}
.event-hero .hero-lead{max-width:760px}
@media(max-width:760px){.project-facts,.project-options{padding:76px 0}.option-grid{grid-template-columns:1fr}.option-grid article,.option-grid article+article{padding:28px 0;border-right:0;border-bottom:1px solid var(--line)}.brochure-inline{align-items:flex-start;flex-direction:column;gap:28px}.project-options h2,.project-location h2,.project-brochure h2{margin-bottom:34px}.project-gallery{padding-bottom:88px}.project-essence,.project-location,.project-brochure{padding-block:82px}}

/* =========================================================
   PARA DESARROLLADORES — narrativa y composición 2026-07
   Todo queda limitado a .developer-page para no alterar otras páginas.
========================================================= */
.developer-page .developer-hero-overlay{background:linear-gradient(90deg,rgba(12,13,12,.83) 0%,rgba(12,13,12,.58) 47%,rgba(12,13,12,.18) 76%,rgba(12,13,12,.08) 100%)}
.developer-page .developer-hero .hero-content{padding-bottom:clamp(72px,10vh,118px)}
.developer-page .developer-hero h1{max-width:1120px;font-size:clamp(52px,6.3vw,96px);line-height:.98}
.developer-page .developer-hero h1 em{font-size:.82em;line-height:1.03;display:inline-block;max-width:950px}
.developer-page .developer-hero .hero-lead{max-width:720px;font-size:clamp(18px,1.35vw,22px);line-height:1.5;margin-top:28px}
.developer-page .developer-hero .hero-actions{gap:26px;align-items:center}

.developer-page .developer-opening{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.65fr);gap:clamp(60px,8vw,140px);align-items:start}
.developer-page .developer-opening h2{font-size:clamp(38px,4.7vw,70px);line-height:1.04;letter-spacing:-.045em;font-weight:400;margin:0;max-width:900px}
.developer-page .developer-opening-copy{padding-top:42px}
.developer-page .developer-opening-copy p{font-size:clamp(17px,1.2vw,20px);line-height:1.65;color:#5d615b;margin:0 0 22px}

.developer-page .developer-diagnosis,.developer-page .developer-ecosystem,.developer-page .developer-case{padding:var(--section-space-lg) 0}
.developer-page .developer-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.48fr);column-gap:clamp(50px,8vw,130px);align-items:end}
.developer-page .developer-section-head .kicker{grid-column:1/-1}
.developer-page .developer-section-head h2{font-size:clamp(38px,4.5vw,66px);line-height:1.06;letter-spacing:-.045em;font-weight:400;margin:0;max-width:920px}
.developer-page .developer-section-head>p:last-child{font-size:18px;line-height:1.65;color:var(--muted);margin:0 0 5px}
.developer-page .developer-diagnosis-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:72px;border-top:1px solid var(--line-strong);border-left:1px solid var(--line)}
.developer-page .developer-diagnosis-grid article{padding:32px 28px 38px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:265px}
.developer-page .developer-diagnosis-grid span,.developer-page .developer-ecosystem-grid span{font-size:11px;color:var(--muted-2)}
.developer-page .developer-diagnosis-grid h3{font-size:23px;line-height:1.15;margin:46px 0 13px;font-weight:500}
.developer-page .developer-diagnosis-grid p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.developer-page .developer-diagnosis-close{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.4vw,36px);margin:46px 0 0;max-width:720px}

.developer-page .developer-thesis{background:var(--ink);color:#fff;padding:var(--section-space-xl) 0}
.developer-page .developer-thesis-inner{max-width:1120px}
.developer-page .developer-thesis h2{font-size:clamp(36px,5.4vw,82px);line-height:1.05;letter-spacing:-.05em;font-weight:400;margin:0 0 30px;max-width:1000px}
.developer-page .developer-thesis p:not(.kicker){font-size:clamp(18px,1.45vw,22px);line-height:1.6;color:rgba(255,255,255,.72);max-width:780px}
.developer-page .developer-thesis blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(29px,3.2vw,48px);line-height:1.16;margin:68px 0 0;padding-left:clamp(22px,3vw,48px);border-left:1px solid rgba(255,255,255,.35);max-width:760px}

.developer-page .developer-system{scroll-margin-top:90px}
.developer-page .developer-system-list{list-style:none;margin:76px 0 0;padding:0;border-top:1px solid var(--line-strong)}
.developer-page .developer-system-list li{display:grid;grid-template-columns:70px minmax(0,1fr);gap:28px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.developer-page .developer-system-list li>span{font-size:12px;color:var(--muted-2);padding-top:7px}
.developer-page .developer-system-list li>div{display:grid;grid-template-columns:minmax(240px,.55fr) minmax(300px,.8fr);gap:clamp(35px,7vw,120px);align-items:start}
.developer-page .developer-system-list h3{font-size:clamp(26px,2.5vw,38px);font-weight:400;letter-spacing:-.025em;margin:0}
.developer-page .developer-system-list p{font-size:17px;line-height:1.6;color:var(--muted);margin:5px 0 0;max-width:600px}
.developer-page .developer-system-close{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.4vw,36px);margin:52px 0 0}

.developer-page .developer-ecosystem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:72px;border-top:1px solid var(--line-strong);border-left:1px solid var(--line)}
.developer-page .developer-ecosystem-grid article{padding:30px 30px 38px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:230px}
.developer-page .developer-ecosystem-grid h3{font-size:25px;margin:42px 0 12px;font-weight:500}
.developer-page .developer-ecosystem-grid p{font-size:15px;line-height:1.55;color:var(--muted);margin:0}

.developer-page .developer-partnership .developer-section-head{display:block;max-width:970px}
.developer-page .developer-partnership .developer-section-head>p:last-child{max-width:720px;margin-top:24px}
.developer-page .developer-compare{display:grid;grid-template-columns:1fr 1fr;margin-top:70px;border:1px solid var(--line)}
.developer-page .developer-compare>div{padding:clamp(34px,4vw,58px)}
.developer-page .developer-compare>div:first-child{border-right:1px solid var(--line)}
.developer-page .developer-compare-accent{background:var(--ink);color:#fff}
.developer-page .developer-compare-label{font-size:11px;letter-spacing:.14em;margin:0 0 38px;color:var(--muted-2)}
.developer-page .developer-compare-accent .developer-compare-label{color:rgba(255,255,255,.5)}
.developer-page .developer-compare ul{list-style:none;margin:0;padding:0}
.developer-page .developer-compare li{font-size:clamp(18px,1.7vw,24px);padding:15px 0;border-bottom:1px solid var(--line);line-height:1.25}
.developer-page .developer-compare li:last-child{border-bottom:0}
.developer-page .developer-compare-accent li{border-color:rgba(255,255,255,.16)}
.developer-page .developer-outcomes{display:grid;grid-template-columns:minmax(180px,.35fr) minmax(0,1fr);gap:70px;margin-top:72px;padding-top:45px;border-top:1px solid var(--line-strong)}
.developer-page .developer-outcomes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 55px}
.developer-page .developer-outcomes li{font-size:17px;line-height:1.5;padding-left:24px;position:relative}
.developer-page .developer-outcomes li:before{content:'—';position:absolute;left:0;color:var(--muted-2)}

.developer-page .developer-case-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.55fr);gap:clamp(50px,8vw,130px);align-items:end}
.developer-page .developer-case-head h2{font-size:clamp(38px,4.2vw,62px);line-height:1.07;letter-spacing:-.04em;font-weight:400;margin:0;max-width:900px}
.developer-page .developer-case-head>p{font-size:18px;line-height:1.65;color:var(--muted);margin:0}
.developer-page .developer-case-pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-top:68px;border-top:1px solid var(--line-strong);border-left:1px solid var(--line)}
.developer-page .developer-case-pillars article{padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:205px}
.developer-page .developer-case-pillars h3{font-size:22px;margin:0 0 15px}
.developer-page .developer-case-pillars p{font-size:15px;line-height:1.55;color:var(--muted);margin:0}
.developer-page .developer-case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;border-top:1px solid var(--line-strong)}
.developer-page .developer-case-stats>div{padding:42px 36px 20px 0}
.developer-page .developer-case-stats strong{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(32px,3.5vw,50px);font-weight:500;margin-bottom:12px}
.developer-page .developer-case-stats span{display:block;color:var(--muted);font-size:14px;line-height:1.55;max-width:280px}
.developer-page .developer-case-footer{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-top:48px;padding-top:38px;border-top:1px solid var(--line)}
.developer-page .developer-case-footer p{font-family:var(--serif);font-style:italic;font-size:clamp(23px,2.5vw,36px);line-height:1.2;max-width:760px;margin:0}

.developer-page .fit-intro{font-size:18px;line-height:1.6;color:var(--muted);max-width:590px;margin-top:25px}
.developer-page .developer-fit-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-strong)}
.developer-page .developer-fit-list li{padding:18px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.4;margin:0}
.developer-page .developer-final-cta{min-height:clamp(620px,82vh,820px)}

@media (max-width:1024px){
  .developer-page .developer-diagnosis-grid{grid-template-columns:repeat(2,1fr)}
  .developer-page .developer-ecosystem-grid{grid-template-columns:repeat(2,1fr)}
  .developer-page .developer-section-head,.developer-page .developer-case-head{grid-template-columns:1fr;gap:24px}
  .developer-page .developer-section-head>p:last-child,.developer-page .developer-case-head>p{max-width:700px}
}
@media (max-width:760px){
  .developer-page .developer-hero{min-height:100svh;padding-top:calc(var(--header-h) + 38px);padding-bottom:0;align-items:flex-end}
  .developer-page .developer-hero .hero-content{padding-bottom:52px}
  .developer-page .developer-hero h1{font-size:clamp(39px,11vw,54px);line-height:.98}
  .developer-page .developer-hero h1 br{display:none}
  .developer-page .developer-hero h1 em{display:inline;font-size:.88em}
  .developer-page .developer-hero .hero-lead{font-size:17px;margin-top:22px}
  .developer-page .developer-hero .hero-actions{align-items:stretch;gap:18px}
  .developer-page .developer-hero .text-link{text-align:center}
  .developer-page .developer-opening{grid-template-columns:1fr;gap:32px}
  .developer-page .developer-opening-copy{padding-top:0}
  .developer-page .developer-opening h2{font-size:clamp(36px,10vw,50px)}
  .developer-page .developer-diagnosis-grid,.developer-page .developer-ecosystem-grid,.developer-page .developer-case-pillars,.developer-page .developer-case-stats{grid-template-columns:1fr}
  .developer-page .developer-diagnosis-grid article,.developer-page .developer-ecosystem-grid article{min-height:0}
  .developer-page .developer-thesis blockquote{margin-top:48px}
  .developer-page .developer-system-list{margin-top:52px}
  .developer-page .developer-system-list li{grid-template-columns:42px 1fr;gap:14px;padding:24px 0}
  .developer-page .developer-system-list li>div{grid-template-columns:1fr;gap:10px}
  .developer-page .developer-system-list h3{font-size:27px}
  .developer-page .developer-system-list p{font-size:16px;margin:0}
  .developer-page .developer-compare{grid-template-columns:1fr}
  .developer-page .developer-compare>div:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .developer-page .developer-outcomes{grid-template-columns:1fr;gap:22px}
  .developer-page .developer-outcomes ul{grid-template-columns:1fr;gap:18px}
  .developer-page .developer-case-footer{display:block}
  .developer-page .developer-case-footer .text-link{display:inline-block;margin-top:28px}
  .developer-page .developer-case-stats>div{padding:30px 0;border-bottom:1px solid var(--line)}
  .developer-page .developer-final-cta{min-height:680px}
}
@media (max-width:420px){
  .developer-page .developer-diagnosis-grid article,.developer-page .developer-ecosystem-grid article,.developer-page .developer-case-pillars article{padding:26px 22px 30px}
  .developer-page .developer-compare>div{padding:32px 24px}
  .developer-page .developer-compare li{font-size:18px}
}


/* Project imagery system — curated and optimized 2026-07-19 */
.project-card .project-image,.project-gallery img,.project-hero .hero-media{object-fit:cover;object-position:center;}
.project-card[href*="amores"] .project-image{object-position:center 62%;}
.project-card[href*="casa-x"] .project-image{object-position:center 48%;}
.project-card[href*="enalto"] .project-image{object-position:center 55%;}
.project-card[href*="tierra-viva"] .project-image{object-position:center 55%;}
.project-card[href*="vida-sana"] .project-image{object-position:center 52%;}
.project-hero.event-hero .hero-media{object-position:center 50%;}
.project-gallery figure{overflow:hidden;background:#e9e7e1;}
.project-gallery img{display:block;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.6,.2,1);}
@media (hover:hover){.project-gallery figure:hover img{transform:scale(1.015);}}
@media (max-width:760px){.project-gallery img{transition:none}.project-card .project-image{object-position:center center}.project-hero .hero-media{object-position:center center;}}
@media (prefers-reduced-motion:reduce){.project-gallery img{transition:none!important}.project-gallery figure:hover img{transform:none!important}}

/* =========================================================
   AVANZ — VISOR DE BROCHURES
   ========================================================= */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.brochure-viewer-page{margin:0;background:#f4f0e9;color:#302c27;min-height:100svh}
.brochure-viewer-shell{width:min(1080px,calc(100% - 48px));margin:0 auto;padding:26px 0 54px}
.brochure-viewer-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(48,44,39,.14);padding-bottom:20px}
.brochure-viewer-brand{display:inline-flex;flex-direction:column;color:inherit;text-decoration:none;line-height:1}
.brochure-viewer-brand span{font-size:24px;letter-spacing:.16em;font-weight:600}
.brochure-viewer-brand small{font-size:8px;letter-spacing:.38em;margin-top:7px}
.brochure-viewer-close{color:inherit;text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:12px;display:inline-flex;align-items:center;gap:10px}
.brochure-viewer-close span{font-size:24px;line-height:1;font-weight:300}
.brochure-viewer-intro{text-align:center;padding:56px 16px 42px}
.brochure-viewer-intro h1{font-family:var(--serif);font-size:clamp(48px,6vw,78px);line-height:.98;font-weight:400;margin:0 0 28px}
.brochure-viewer-eyebrow{font-size:13px;letter-spacing:.19em;text-transform:uppercase;margin:0 0 20px;color:#645947}
.brochure-viewer-intro>p:last-child{font-size:17px;color:#877a68;margin:0}
.brochure-stage{scroll-margin-top:24px}
.brochure-progress{height:4px;background:rgba(48,44,39,.13);border-radius:999px;overflow:hidden;margin-bottom:24px}
.brochure-progress span{display:block;height:100%;width:0;background:#726350;border-radius:inherit;transition:width .35s ease}
.brochure-page-frame{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:20px;background:#e7e1d7;box-shadow:0 22px 55px rgba(45,37,28,.15);min-height:300px;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.brochure-page-frame.is-zoomed{cursor:grab}
.brochure-page-frame.is-zoomed.is-panning{cursor:grabbing}
.brochure-transform-layer{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:0 0;will-change:transform;backface-visibility:hidden}
.brochure-transform-layer.is-animating{transition:transform .2s ease}
.brochure-page-frame img{display:block;width:100%;height:auto;max-height:min(72vh,920px);object-fit:contain;background:#fff;opacity:1;transition:opacity .2s ease;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.brochure-page-frame.is-loading img{opacity:.15}
.brochure-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s ease}
.brochure-page-frame.is-loading .brochure-loader{opacity:1}
.brochure-loader>span:first-child{width:34px;height:34px;border-radius:50%;border:2px solid rgba(48,44,39,.2);border-top-color:#302c27;animation:brochure-spin .8s linear infinite}
@keyframes brochure-spin{to{transform:rotate(360deg)}}
.brochure-zoom-reset{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(48,44,39,.14);background:rgba(255,255,255,.94);color:#302c27;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-shadow:0 8px 20px rgba(45,37,28,.18);transition:opacity .18s ease,transform .18s ease,background .18s ease,color .18s ease}
.brochure-zoom-reset:hover{background:#302c27;color:#fff}
.brochure-zoom-reset:focus-visible{outline:2px solid #302c27;outline-offset:2px}
.brochure-zoom-reset[hidden]{display:none}
.brochure-zoom-hint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);z-index:2;background:rgba(23,24,22,.82);color:#fff;font-size:12px;letter-spacing:.02em;padding:8px 14px;border-radius:999px;pointer-events:none;opacity:0;transition:opacity .3s ease;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.brochure-zoom-hint.is-visible{opacity:1}
.brochure-controls{display:flex;align-items:center;justify-content:center;gap:26px;padding:28px 0 0}
.brochure-controls p{margin:0;min-width:120px;text-align:center;color:#897b68;font-size:15px}
.brochure-controls strong{color:#302c27}
.brochure-arrow{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:56px;height:56px;border-radius:50%;border:1px solid rgba(48,44,39,.12);background:#fff;color:#302c27;font-size:25px;cursor:pointer;transition:transform .2s ease,background .2s ease,opacity .2s ease}
.brochure-arrow:not(:disabled):hover{transform:translateY(-2px);background:#302c27;color:#fff}
.brochure-arrow:disabled{opacity:.28;cursor:not-allowed}
.brochure-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:36px}
.brochure-actions .button{min-height:58px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.button.outline-dark{background:transparent;color:#302c27;border:1px solid rgba(48,44,39,.17)}
.button.outline-dark:hover{background:#302c27;color:#fff}
.project-site-button{background:#74634f;color:#fff}
.project-site-button:hover{background:#5f5141}
.brochure-help{text-align:center;color:#938673;font-size:13px;margin:22px 0 0}
.brochure-noscript{padding:20px;text-align:center}
.brochure-inline-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.brochure-inline-actions .text-link{white-space:nowrap}
@media(max-width:760px){
  .brochure-viewer-shell{width:min(100% - 28px,1080px);padding:16px 0 36px}
  .brochure-viewer-header{padding-bottom:14px}
  .brochure-viewer-brand span{font-size:20px}
  .brochure-viewer-intro{padding:40px 8px 30px}
  .brochure-viewer-intro h1{font-size:clamp(44px,14vw,62px);margin-bottom:20px}
  .brochure-viewer-eyebrow{font-size:11px;line-height:1.45;margin-bottom:16px}
  .brochure-viewer-intro>p:last-child{font-size:15px}
  .brochure-progress{margin-bottom:14px}
  .brochure-page-frame{border-radius:14px;min-height:220px;box-shadow:0 15px 35px rgba(45,37,28,.14)}
  .brochure-page-frame img{max-height:none}
  .brochure-controls{gap:16px;padding-top:20px}
  .brochure-arrow{width:50px;height:50px}
  .brochure-actions{display:grid;grid-template-columns:1fr;margin-top:28px}
  .brochure-actions .button{width:100%;min-height:54px}
  .brochure-help{line-height:1.5;padding:0 18px}
  .brochure-inline-actions{width:100%;justify-content:flex-start}
}
@media(max-width:420px){
  .brochure-viewer-close{font-size:0}.brochure-viewer-close span{font-size:28px}
  .brochure-controls p{min-width:100px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.brochure-progress span,.brochure-page-frame img,.brochure-arrow,.brochure-transform-layer.is-animating,.brochure-zoom-reset,.brochure-zoom-hint{transition:none}.brochure-loader>span:first-child{animation:none}}