:root{
    --cafe:#2E2116;
    --cafe-2:#4A3625;
    --salvia:#8A9A7E;
    --salvia-2:#5F6E52;
    --champan:#DCE3D1;
    --crema:#F5F1E8;
    --grafito:#565B62;
    --serif:'Spectral', Georgia, serif;
    --sans:'Manrope', -apple-system, sans-serif;
    --mono:'IBM Plex Mono', Menlo, monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--crema); color:var(--cafe); font-family:var(--sans);
    line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  img,svg{display:block;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
  .thread{height:4px; background:linear-gradient(90deg, var(--salvia-2), var(--salvia), var(--champan));}

  /* ---------- nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(245,241,232,.9); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--champan);
  }
  nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1120px; margin:0 auto;}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
  .brand .name{font-family:var(--sans); font-weight:800; font-size:15px; letter-spacing:.01em; color:var(--cafe); line-height:1.2;}
  .brand .desc{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--salvia-2);}
  .navlinks{display:flex; align-items:center; gap:34px; list-style:none;}
  .navlinks a{font-size:14px; font-weight:600; text-decoration:none; color:var(--grafito); transition:color .15s;}
  .navlinks a:hover{color:var(--cafe);}
  .nav-cta{
    font-family:var(--sans); font-weight:700; font-size:13.5px; text-decoration:none;
    background:var(--cafe); color:var(--crema); padding:11px 20px; border-radius:3px;
    display:inline-flex; align-items:center; gap:8px; transition:background .15s;
  }
  .nav-cta:hover{background:var(--cafe-2);}
  .menu-btn{display:none;}

  /* ---------- hero ---------- */
  .hero{padding:96px 0 90px; position:relative; overflow:hidden;}
  .hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;}
  .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--salvia-2); margin-bottom:22px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:''; width:22px; height:2px; background:var(--salvia);}
  h1{font-family:var(--serif); font-size:52px; font-weight:700; line-height:1.12; letter-spacing:-.01em; color:var(--cafe);}
  .hero p.lead{font-size:18px; color:var(--grafito); max-width:520px; margin-top:24px;}
  .hero-ctas{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
  .btn{
    font-family:var(--sans); font-weight:700; font-size:14.5px; text-decoration:none;
    padding:15px 26px; border-radius:3px; display:inline-flex; align-items:center; gap:10px;
    transition:transform .15s, background .15s;
  }
  .btn-primary{background:var(--cafe); color:var(--crema);}
  .btn-primary:hover{background:var(--cafe-2); transform:translateY(-1px);}
  .btn-ghost{background:transparent; color:var(--cafe); border:1.5px solid var(--cafe-2);}
  .btn-ghost:hover{background:var(--champan);}
  .hero-mark{
    background:var(--cafe); border-radius:6px; aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  }
  .hero-mark::after{content:''; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg, var(--salvia-2), var(--salvia), var(--champan));}
  .hero-mark svg{width:52%; height:auto;}

  /* ---------- section shared ---------- */
  section{padding:100px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{font-family:var(--serif); font-size:36px; color:var(--cafe); font-weight:700; letter-spacing:-.01em;}
  .section-head p{color:var(--grafito); font-size:16px; margin-top:16px;}
  #nosotros{background:#fff; border-top:1px solid var(--champan); border-bottom:1px solid var(--champan);}

  /* ---------- nosotros / timeline ---------- */
  .nosotros-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:72px;}
  .founder-card{background:var(--crema); border:1px solid var(--champan); border-radius:6px; padding:32px; height:fit-content;}
  .founder-avatar{width:64px; height:64px; border-radius:50%; background:var(--cafe); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
  .founder-avatar svg{width:30px;}
  .founder-card h3{font-family:var(--serif); font-size:21px; color:var(--cafe);}
  .founder-card .role{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--salvia-2); margin-top:4px;}
  .founder-card p{font-size:14px; color:var(--grafito); margin-top:16px;}

  .mission{display:flex; flex-direction:column; justify-content:center; height:100%; border-left:3px solid var(--salvia); padding-left:36px;}
  .mission-lead{font-family:var(--serif); font-style:italic; font-size:27px; line-height:1.5; color:var(--cafe);}
  .mission-sign{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--salvia-2); margin-top:20px;}

  .vmv{margin-top:72px; padding-top:56px; border-top:1px solid var(--champan);}
  .vmv-top{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:48px;}
  .vmv-card{background:var(--crema); border:1px solid var(--champan); border-radius:6px; padding:32px;}
  .vmv-label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--salvia-2); margin-bottom:14px;}
  .vmv-card p{font-size:15px; color:var(--cafe); line-height:1.6;}
  .valores-label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--salvia-2); margin-bottom:20px;}
  .valores-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;}
  .valor{border-top:2px solid var(--salvia); padding-top:16px;}
  .valor h4{font-family:var(--sans); font-weight:700; font-size:16px; color:var(--cafe);}
  .valor p{font-size:13.5px; color:var(--grafito); margin-top:8px; line-height:1.55;}

  /* ---------- servicios ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--champan); border:1px solid var(--champan);}
  .service{background:var(--crema); padding:36px 30px; transition:background .15s;}
  .service:hover{background:#fff;}
  .service .code{
    font-family:var(--mono); font-size:12px; font-weight:600; color:var(--salvia-2);
    border:1px solid var(--salvia); border-radius:3px; width:34px; height:34px;
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  }
  .service h3{font-family:var(--serif); font-size:19px; color:var(--cafe); font-weight:700;}
  .service p{font-size:14px; color:var(--grafito); margin-top:10px;}

  /* ---------- por qué ---------- */
  #porque{background:var(--cafe); color:var(--crema);}
  #porque .section-head h2{color:var(--crema);}
  #porque .section-head p{color:var(--champan);}
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:44px;}
  .pillar-n{font-family:var(--serif); font-size:15px; color:var(--salvia); margin-bottom:14px;}
  .pillar h3{font-family:var(--sans); font-weight:700; font-size:18px; color:var(--crema);}
  .pillar p{font-size:14px; color:var(--champan); margin-top:10px; opacity:.9;}

  /* ---------- contacto ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .contact-card{background:#fff; border:1px solid var(--champan); border-radius:6px; padding:40px;}
  .contact-row{display:flex; align-items:flex-start; gap:16px; padding:16px 0; border-top:1px solid var(--champan);}
  .contact-row:first-child{border-top:none; padding-top:0;}
  .contact-row .label{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--salvia-2); width:90px; flex-shrink:0; padding-top:2px;}
  .contact-row a, .contact-row span{font-size:15px; color:var(--cafe); text-decoration:none; font-weight:600;}
  .contact-row a:hover{color:var(--salvia-2);}

  /* ---------- footer ---------- */
  footer{background:var(--cafe-2); color:var(--champan); padding:56px 0 28px;}
  .foot-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px;}
  .foot-brand{display:flex; align-items:center; gap:12px;}
  .foot-brand .name{font-family:var(--sans); font-weight:800; font-size:15px; color:var(--crema);}
  .foot-brand .desc{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--salvia);}
  .foot-links{display:flex; gap:40px; flex-wrap:wrap;}
  .foot-col h5{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--salvia); margin-bottom:14px;}
  .foot-col a{display:block; font-size:13.5px; color:var(--champan); text-decoration:none; margin-bottom:9px; opacity:.85;}
  .foot-col a:hover{opacity:1; color:var(--crema);}
  .foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid rgba(220,227,209,.15); font-family:var(--mono); font-size:11px; color:var(--champan); opacity:.6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  /* ---------- whatsapp float ---------- */
  .wa-float{
    position:fixed; bottom:24px; right:24px; z-index:60;
    background:var(--salvia-2); color:#fff; width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; text-decoration:none;
    box-shadow:0 10px 24px -8px rgba(46,33,22,.45); transition:transform .15s;
  }
  .wa-float:hover{transform:scale(1.06);}
  .wa-float svg{width:26px; height:26px;}

  @media (max-width:860px){
    .navlinks{display:none;}
    h1{font-size:36px;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-mark{max-width:220px; margin:0 auto;}
    .nosotros-grid{grid-template-columns:1fr;}
    .vmv-top{grid-template-columns:1fr;}
    .valores-grid{grid-template-columns:1fr 1fr;}
    .services-grid{grid-template-columns:1fr 1fr;}
    .pillars{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    section{padding:64px 0;}
    .wrap{padding:0 20px;}
  }
  @media (max-width:520px){
    .services-grid{grid-template-columns:1fr;}
  }