/* Ecosistémica — hoja de estilos principal */

@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url("/assets/fonts/source-serif-4.woff2") format('woff2-variations'),
      url("/assets/fonts/source-serif-4.woff2") format('woff2');
}
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/work-sans.woff2") format('woff2-variations'),
      url("/assets/fonts/work-sans.woff2") format('woff2');
}

:root{
  --font-serif-display:'Source Serif 4',Georgia,serif;
  --font-sans-body:'Work Sans',-apple-system,sans-serif;
  --font-mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;

  --paper:#fdfbf7;--paper-dim:#f4f0e8;
  --neutral-50:#f7f5f0;--neutral-100:#eae6dd;--neutral-200:#d3cec2;--neutral-300:#b3ab9c;--neutral-400:#8d8576;--neutral-500:#6b6558;--neutral-600:#5d6a77;--neutral-700:#465059;--neutral-800:#333c44;--neutral-900:#2c3e50;--neutral-950:#1c2733;
  --terracotta-100:#f6e3d3;--terracotta-200:#e7cfbd;--terracotta-300:#e2925a;--terracotta-400:#dd7b3a;--terracotta-500:#c2621f;--terracotta-600:#a04000;--terracotta-700:#7a3200;
  --olive-100:#e6ecd3;--olive-200:#dbe1c5;--olive-300:#a3bb63;--olive-400:#8da855;--olive-500:#6b8e23;--olive-600:#56731c;--olive-700:#425715;
  --ink:var(--neutral-900);
  --surface-page:var(--paper);--surface-page-alt:var(--paper-dim);--surface-card:#ffffff;--surface-sunken:var(--neutral-50);--surface-inverse:var(--neutral-900);
  --text-primary:var(--neutral-900);--text-secondary:var(--neutral-600);--text-muted:var(--neutral-400);--text-on-inverse:var(--neutral-50);--text-on-accent:#fff;
  --border-subtle:var(--neutral-200);--border-default:var(--neutral-300);--border-strong:var(--neutral-500);
  --brand-primary:var(--terracotta-400);--brand-primary-hover:var(--terracotta-500);--brand-primary-active:var(--terracotta-600);--brand-primary-soft:var(--terracotta-100);
  --brand-secondary:var(--olive-500);--brand-secondary-hover:var(--olive-600);--brand-secondary-soft:var(--olive-100);
  --accent-sage:var(--olive-200);--accent-tan:var(--terracotta-200);
  --success:var(--olive-500);--success-soft:var(--olive-100);--warning:#b8863a;--warning-soft:#f6ecd8;--danger:#a0432c;--danger-soft:#f6ded7;--info:var(--neutral-600);--info-soft:var(--neutral-100);
  --focus-ring:var(--terracotta-400);

  --text-display-xl:3.75rem;--text-display-lg:2.75rem;--text-display-md:2rem;
  --text-heading-lg:1.75rem;--text-heading-md:1.375rem;--text-heading-sm:1.125rem;
  --text-body-lg:1.125rem;--text-body-md:1rem;--text-body-sm:0.875rem;--text-caption:0.75rem;
  --leading-tight:1.1;--leading-snug:1.3;--leading-normal:1.55;--leading-relaxed:1.7;
  --tracking-tight:-0.02em;--tracking-normal:0;--tracking-wide:0.04em;--tracking-wider:0.12em;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;
  --shadow-sm:0 1px 2px rgba(28,39,51,0.06),0 1px 1px rgba(28,39,51,0.04);
  --shadow-md:0 4px 12px rgba(28,39,51,0.08),0 2px 4px rgba(28,39,51,0.05);
  --shadow-lg:0 12px 32px rgba(28,39,51,0.12),0 4px 8px rgba(28,39,51,0.06);
  --shadow-inset:inset 0 1px 2px rgba(28,39,51,0.08);
  --ease-standard:cubic-bezier(0.4,0,0.2,1);--ease-out:cubic-bezier(0,0,0.2,1);--ease-in:cubic-bezier(0.4,0,1,1);
  --duration-fast:120ms;--duration-normal:200ms;--duration-slow:340ms;
  --container-max:1200px;
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;background:var(--surface-page);font-family:var(--font-sans-body);color:var(--text-primary)}
img{max-width:100%;display:block}
a{color:inherit}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 48px;position:sticky;top:0;background:var(--surface-page);z-index:10;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;gap:12px}
.nav-brand{display:flex;flex-direction:column;gap:2px}
.nav-brand-row{display:flex;align-items:center;justify-content:center;gap:1px}
.nav-brand-row span{font-family:var(--font-serif-display);font-size:1.5rem;color:var(--ink)}
.nav-logo-img{height:38px;width:auto;filter:brightness(0) saturate(100%) invert(15%) sepia(15%) hue-rotate(160deg)}
.nav-subtitle{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-secondary);text-align:center}
.nav-links{display:flex;gap:32px;font-size:var(--text-body-md);color:var(--text-secondary);align-items:center}
.nav-links a{text-decoration:none}
.nav-cta{color:#fff !important;background:var(--brand-primary);padding:9px 18px;border-radius:var(--radius-md);text-decoration:none;font-weight:600}

/* Hero */
.hero{min-height:280px;background:var(--neutral-900)}
.hero-inner{padding:32px 64px;display:flex;flex-direction:column;gap:14px;justify-content:center;color:#fff;max-width:760px}
.hero-eyebrow{font-size:14px;letter-spacing:0.12em;text-transform:uppercase;color:var(--terracotta-300)}
.hero-inner h1{font-family:var(--font-serif-display);font-size:2.6rem;line-height:1.15;margin:0;font-weight:400}
.hero-desc{font-size:var(--text-body-lg);line-height:1.55;color:var(--neutral-200);margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.btn-primary{background:var(--brand-primary);color:#fff;padding:14px 26px;border-radius:var(--radius-md);text-decoration:none;font-weight:600;display:inline-block;border:none;font-family:inherit;font-size:1rem;cursor:pointer}
.btn-outline{background:transparent;border:1px solid #fff;color:#fff;padding:14px 26px;border-radius:var(--radius-md);text-decoration:none;font-weight:600;display:inline-block}

/* Galería de fotos con parallax: capa <img> con transform vía JS (funciona igual en
   escritorio y móvil; background-attachment:fixed se descartó porque Safari no lo
   renderiza bien en elementos con overflow:hidden) */
.galeria-foto{position:relative;overflow:hidden;height:400px;background:var(--neutral-200) center/cover no-repeat}
.galeria-foto.h600{height:600px}
.galeria-img{position:absolute;top:-30%;left:0;width:100%;height:160%;object-fit:cover;will-change:transform}

/* Servicios */
.servicios{padding:80px 64px;background:var(--surface-sunken)}
.section-eyebrow{font-size:14px;letter-spacing:0.1em;text-transform:uppercase;color:var(--brand-primary);font-weight:600;display:block}
.section-eyebrow.on-dark{color:var(--terracotta-300)}
.servicios h2,.metodo h2,.equipo h2,.experiencia h2,.contacto h2{font-family:var(--font-serif-display);font-size:2.1rem;color:var(--ink);margin:12px 0 8px;font-weight:400}
.metodo h2,.experiencia h2{color:#fff}
.servicios > p,.contacto-info > p{font-size:var(--text-body-md);color:var(--text-secondary);max-width:640px;margin:0 0 36px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:28px}
.card .num{font-family:var(--font-serif-display);color:var(--terracotta-400);font-size:18px}
.card h3{font-family:var(--font-serif-display);font-size:1.15rem;color:var(--ink);margin:10px 0 8px;font-weight:400}
.card p{font-size:var(--text-body-sm);color:var(--text-secondary);line-height:1.5;margin:0}

/* Método */
.metodo{padding:140px 64px;background:var(--neutral-900);color:#fff}
.metodo-intro p{font-size:var(--text-body-md);color:var(--neutral-200);max-width:640px;margin:0 0 40px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-4 strong{font-size:1rem;color:var(--terracotta-300);display:block}
.grid-4 p{font-size:var(--text-body-sm);color:var(--neutral-200);line-height:1.5;margin:6px 0 0}

/* Equipo */
.equipo{padding:88px 64px;background:var(--surface-page)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-2 .card h3{margin:0 0 8px}

/* Experiencia */
.experiencia{background:var(--neutral-900);color:#fff}
.experiencia-inner{padding:122px 64px;display:flex;flex-direction:column;justify-content:center;gap:32px}
.grid-2-exp{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.grid-2-exp strong{font-size:1.05rem;display:block}
.grid-2-exp p{font-size:var(--text-body-sm);color:var(--neutral-200);line-height:1.5;margin:6px 0 0}

/* Contacto */
.contacto{padding:88px 64px;background:var(--surface-sunken);display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contacto-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.btn-mail{background:var(--brand-primary);color:#fff;padding:12px 22px;border-radius:var(--radius-md);text-decoration:none;font-weight:600;font-size:14px}
.btn-whatsapp{background:#25D366;border:none;color:#fff;padding:12px 22px;border-radius:var(--radius-md);text-decoration:none;font-weight:600;font-size:14px}
.contacto-form{display:flex;flex-direction:column;gap:14px}
.contacto-form label{font-size:13px;color:var(--text-secondary);display:flex;flex-direction:column;gap:6px}
.contacto-form input,.contacto-form textarea{padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border-default);font-family:inherit;font-size:14px;width:100%}
.contacto-form textarea{resize:none}
.contacto-form button{background:var(--brand-primary);color:#fff;border:none;border-radius:var(--radius-md);padding:13px;font-weight:600;font-size:15px;cursor:pointer}

/* Footer */
.footer{background:var(--neutral-900);color:var(--neutral-300);padding:32px 48px;font-size:var(--text-body-sm);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.footer-brand{display:flex;align-items:center;gap:1px}
.footer-brand span{font-family:var(--font-serif-display);font-size:1rem;color:var(--neutral-100)}
.footer-logo-img{height:22px;width:auto}

/* ==== Mobile (<=700px) ==== */
@media (max-width:700px){
  .nav{padding:14px 20px;gap:12px}
  .nav-brand-row span{font-size:1.15rem}
  .nav-logo-img{height:28px}
  .nav-subtitle{display:none}
  .nav-links{gap:12px;font-size:0.8rem}
  .nav-links a:not(.nav-cta){display:none}
  .nav-cta{padding:8px 14px;font-size:13px}

  .hero-inner{padding:40px 24px;max-width:100%}
  .hero-eyebrow{font-size:12px}
  .hero-inner h1{font-size:1.9rem}
  .hero-desc{font-size:0.95rem}
  .btn-primary,.btn-outline{padding:12px 22px;font-size:14px}

  .galeria-foto,.galeria-foto.h600{height:260px}

  .servicios{padding:48px 20px}
  .servicios h2,.metodo h2,.equipo h2,.experiencia h2,.contacto h2{font-size:1.6rem}
  .servicios > p{font-size:0.9rem}
  .grid-3{grid-template-columns:1fr;gap:16px}
  .card{padding:20px}

  .metodo{padding:56px 20px}
  .metodo-intro p{font-size:0.9rem}
  .grid-4{grid-template-columns:1fr;gap:20px}

  .equipo{padding:48px 20px}
  .grid-2{grid-template-columns:1fr;gap:16px}

  .experiencia-inner{padding:56px 20px}
  .grid-2-exp{grid-template-columns:1fr;gap:20px}

  .contacto{padding:48px 20px;grid-template-columns:1fr;gap:32px}

  .footer{padding:24px 20px}
}