:root{
    --arena:#EDE6D6;
    --arena-light:#F7F3E9;
    --ink:#17251F;
    --teal:#166E68;
    --teal-deep:#0D3B39;
    --gold:#DE9A3C;
    --gold-soft:#F1C888;
    --line: rgba(23,37,31,0.14);
    --white:#FDFBF6;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--arena);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.5;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  .mono{
    font-family:'JetBrains Mono', monospace;
    letter-spacing:0.02em;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
  img,svg{display:block; max-width:100%;}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(237,230,214,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px;
    max-width:1120px; margin:0 auto;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem;
  }
  .logo-img{height:24px; width:auto; display:block;}
  .logo-suffix{opacity:0.85;}
  .logo .sun{width:24px; height:24px; flex-shrink:0;}
  .nav-links{
    display:flex; gap:32px; font-size:0.92rem; font-weight:500;
  }
  .nav-links a{opacity:0.75; transition:opacity .2s;}
  .nav-links a:hover{opacity:1;}
  .nav-right{display:flex; align-items:center; gap:16px;}
  #langToggle{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem; font-weight:500;
    border:1px solid var(--ink); border-radius:100px;
    padding:6px 14px; background:transparent; cursor:pointer;
    color:var(--ink);
  }
  .btn-wa{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--teal); color:var(--white);
    padding:10px 18px; border-radius:100px;
    font-size:0.88rem; font-weight:500;
    white-space:nowrap;
    transition:transform .2s, background .2s;
  }
  .btn-wa:hover{background:var(--teal-deep); transform:translateY(-1px);}
  .btn-wa svg{width:16px; height:16px;}
  @media (max-width:820px){ .nav-links{display:none;} }

  /* ---------- hero ---------- */
  .hero{
    padding:88px 0 60px;
    display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:0.78rem;
    text-transform:uppercase; letter-spacing:0.12em;
    color:var(--teal); margin-bottom:18px; display:block;
  }
  .hero h1{
    font-size:clamp(2.4rem, 5vw, 3.6rem);
    line-height:1.04;
    margin-bottom:22px;
  }
  .hero h1 em{color:var(--teal); font-style:italic;}
  .hero p.lead{
    font-size:1.08rem; max-width:460px; opacity:0.82; margin-bottom:30px;
  }
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  .btn-ghost{
    border:1px solid var(--ink); border-radius:100px;
    padding:12px 22px; font-size:0.92rem; font-weight:500;
  }
  .hero .btn-wa{padding:12px 24px; font-size:0.95rem;}

  .hero-visual{position:relative; aspect-ratio:1/1;}

  /* ---------- section shared ---------- */
  section{padding:84px 0;}
  .section-head{max-width:620px; margin-bottom:52px;}
  .section-head .eyebrow{margin-bottom:14px;}
  .section-head h2{font-size:clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom:14px;}
  .section-head p{opacity:0.78; font-size:1.02rem;}

  /* ---------- servicios ---------- */
  #servicios{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .services-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .service-card{
    background:var(--white); padding:34px 26px;
    display:flex; flex-direction:column; gap:16px;
  }
  .service-card .num{font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--teal); opacity:0.8;}
  .service-card .icon{width:38px; height:38px; color:var(--teal);}
  .service-card h3{font-size:1.12rem; margin-top:4px;}
  .service-card p{font-size:0.92rem; opacity:0.75;}
  @media (max-width:900px){ .services-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .services-grid{grid-template-columns:1fr;} }

  /* ---------- por que ---------- */
  #porque{background:var(--teal-deep); color:var(--arena-light);}
  #porque .section-head h2, #porque .section-head p{color:var(--arena-light);}
  #porque .eyebrow{color:var(--gold-soft);}
  .reasons{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
  .reason h3{
    font-family:'JetBrains Mono', monospace; font-weight:500; font-size:0.95rem;
    color:var(--gold-soft); margin-bottom:12px;
  }
  .reason p{opacity:0.82; font-size:0.96rem; color:var(--arena-light);}
  @media (max-width:800px){ .reasons{grid-template-columns:1fr;} }

  /* ---------- proceso ---------- */
  #proceso{background:var(--arena);}
  .steps{display:flex; flex-direction:column;}
  .step{
    display:grid; grid-template-columns:70px 1fr; gap:24px;
    padding:26px 0; border-bottom:1px solid var(--line);
  }
  .step:first-child{border-top:1px solid var(--line);}
  .step .stepnum{font-family:'Fraunces', serif; font-size:1.8rem; opacity:0.35;}
  .step h3{font-size:1.08rem; margin-bottom:6px;}
  .step p{font-size:0.94rem; opacity:0.75; max-width:560px;}

  /* ---------- compromiso ---------- */
  #compromiso{background:var(--white); border-top:1px solid var(--line);}
  .commit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
  .commit{padding:26px 0;}
  .commit .icon{width:30px; height:30px; color:var(--gold); margin-bottom:14px;}
  .commit h3{font-size:1rem; margin-bottom:8px;}
  .commit p{font-size:0.92rem; opacity:0.75;}
  @media (max-width:800px){ .commit-grid{grid-template-columns:1fr;} }

  /* ---------- cotizador (form) ---------- */
  #cotizador{background:var(--white); border-top:1px solid var(--line);}
  .quote-form{
    max-width:560px; background:var(--arena-light);
    border:1px solid var(--line); border-radius:14px;
    padding:36px; display:flex; flex-direction:column; gap:20px;
  }
  .form-row{display:flex; flex-direction:column; gap:8px;}
  .form-row-split{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .form-row-split > div{display:flex; flex-direction:column; gap:8px;}
  .quote-form label{font-size:0.86rem; font-weight:500; opacity:0.8;}
  .quote-form input[type="text"],
  .quote-form input[type="email"],
  .quote-form input[type="tel"]{
    font-family:'Work Sans', sans-serif; font-size:0.95rem;
    padding:12px 14px; border:1px solid var(--line); border-radius:8px;
    background:var(--white); color:var(--ink);
  }
  .quote-form input[type="file"]{
    font-family:'Work Sans', sans-serif; font-size:0.86rem;
    padding:10px 0;
  }
  .quote-form input:focus{outline:2px solid var(--teal); outline-offset:1px;}
  .form-note{font-size:0.8rem; opacity:0.62; text-align:center;}
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
  @media (max-width:560px){ .form-row-split{grid-template-columns:1fr;} .quote-form{padding:26px 20px;} }

  /* ---------- contacto ---------- */
  #contacto{
    background:var(--gold); color:var(--ink);
    text-align:center;
  }
  #contacto h2{font-size:clamp(2rem,4vw,2.8rem); margin-bottom:16px;}
  #contacto p{max-width:520px; margin:0 auto 34px; opacity:0.85; font-size:1.02rem;}
  #contacto .btn-wa{background:var(--ink); font-size:1.02rem; padding:16px 32px;}
  #contacto .btn-wa:hover{background:var(--teal-deep);}

  footer{
    background:var(--ink); color:var(--arena-light);
    padding:40px 0; font-size:0.86rem;
  }
  .foot-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; opacity:0.75;}

  /* floating whatsapp */
  .wa-float{
    position:fixed; bottom:24px; right:24px; z-index:60;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,0.22);
    transition:transform .2s;
  }
  .wa-float:hover{transform:scale(1.08);}
  .wa-float svg{width:28px; height:28px; fill:#fff;}

  [data-en]{display:none;}
  html[lang="en"] [data-es]{display:none;}
  html[lang="en"] [data-en]{display:revert;}
  html[lang="en"] .service-card [data-en],
  html[lang="en"] .reason [data-en],
  html[lang="en"] .step [data-en],
  html[lang="en"] .commit [data-en]{display:block;}
  html[lang="en"] span[data-en]{display:inline;}

  @media (max-width:900px){
    .hero{grid-template-columns:1fr; padding-top:56px;}
    .hero-visual{max-width:340px; margin:0 auto;}
  }