:root{
    --ink:#171310;
    --ink-soft:#3A342C;
    --paper:#F1E9D6;
    --paper-deep:#E7DCBF;
    --gold:#A98A2E;
    --gold-bright:#C9A63C;
    --gold-deep:#6E5A20;
    --stone:#6E6656;
    --line:rgba(23,19,16,0.14);
    --line-on-ink:rgba(241,233,214,0.18);
    --radius:2px;
    --maxw:1180px;
    --nav-h:76px;
  }
  :root:not([data-theme="light"]){ }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#171310; --ink-soft:#3A342C; --paper:#F1E9D6; --paper-deep:#E7DCBF;
      --gold:#A98A2E; --gold-bright:#C9A63C; --gold-deep:#6E5A20; --stone:#6E6656;
      --line:rgba(23,19,16,0.14); --line-on-ink:rgba(241,233,214,0.18);
    }
  }
  :root[data-theme="dark"]{
    --ink:#171310; --ink-soft:#3A342C; --paper:#F1E9D6; --paper-deep:#E7DCBF;
    --gold:#A98A2E; --gold-bright:#C9A63C; --gold-deep:#6E5A20; --stone:#6E6656;
    --line:rgba(23,19,16,0.14); --line-on-ink:rgba(241,233,214,0.18);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{
    scroll-behavior:smooth;
    scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top,0px));
  }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans', system-ui, sans-serif;
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  button{color:inherit; font:inherit; background:none; border:none;}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  @media (max-width:640px){ .wrap{padding:0 22px;} }

  h1,h2,h3{
    font-family:'Big Shoulders Display', system-ui, sans-serif;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:0.96;
    text-transform:uppercase;
  }

  .mono{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:12px;
    letter-spacing:0.04em;
    color:var(--stone);
  }

  /* faint blueprint grid texture */
  .grid-bg{
    position:absolute; inset:0; pointer-events:none;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:56px 56px;
    opacity:0.5;
    -webkit-mask-image:linear-gradient(180deg, black, transparent 92%);
    mask-image:linear-gradient(180deg, black, transparent 92%);
  }

  /* ---------- NAV ---------- */
  header.site-nav{
    position:sticky; top:0; z-index:100;
    height:var(--nav-h);
    display:flex; align-items:center;
    background:rgba(241,233,214,0.86);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand img{height:38px; width:auto;}
  .nav-links{
    display:flex; gap:34px; list-style:none;
    font-size:14px; letter-spacing:0.02em;
  }
  .nav-links a{
    position:relative; padding:4px 0; color:var(--ink-soft);
    transition:color .2s ease;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
    background:var(--gold); transition:right .25s ease;
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a:hover::after{right:0;}
  .nav-social{display:flex; align-items:center; gap:16px;}
  .nav-social a{
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:50%;
    color:var(--ink-soft); transition:.2s ease;
  }
  .nav-social a:hover{border-color:var(--gold); color:var(--gold-deep); transform:translateY(-1px);}
  .nav-social svg{width:15px; height:15px;}
  .nav-burger{display:none;}
  @media (max-width:860px){
    .nav-links{display:none;}
    .nav-burger{
      display:flex; width:38px; height:38px; border:1px solid var(--line);
      align-items:center; justify-content:center; border-radius:50%; background:none;
      cursor:pointer;
    }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:calc(100svh - var(--nav-h));
    display:flex; align-items:center;
    overflow:hidden;
  }
  .hero-inner{
    width:100%; display:grid; grid-template-columns:1.3fr 0.9fr; gap:40px; align-items:center;
    padding-top:56px; padding-bottom:56px;
  }
  .hero h1{
    font-size:clamp(56px, 8.6vw, 118px);
    color:var(--ink);
  }
  .hero h1 > span{display:block;}
  .hero-sub{
    margin-top:26px; max-width:46ch; font-size:17px; color:var(--ink-soft);
  }
  .hero-meta{
    margin-top:44px; display:flex; gap:36px; flex-wrap:wrap;
  }
  .hero-meta div{border-left:2px solid var(--gold); padding-left:12px;}
  .hero-meta .mono{display:block; margin-bottom:4px;}
  .hero-cta{
    margin-top:44px; display:inline-flex; align-items:center; gap:14px;
    font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:19px;
    text-transform:uppercase; letter-spacing:.02em;
    padding-bottom:6px; border-bottom:2px solid var(--ink); cursor:pointer;
    transition:border-color .2s ease, color .2s ease, gap .2s ease;
  }
  .hero-cta:hover{gap:20px; border-color:var(--gold); color:var(--gold-deep);}

  .hero-mark{
    position:relative; justify-self:center;
    width:min(360px, 90%); aspect-ratio:1;
  }
  .hero-mark svg{width:100%; height:100%; overflow:visible;}
  .hero-mark .stroke{
    fill:none; stroke-linecap:round; stroke-linejoin:round;
  }
  .hero-mark .k{stroke:var(--ink); stroke-width:9;}
  .hero-mark .g{stroke:var(--gold);  stroke-width:9;}

  .mark-arrows, .mark-a{ transform-origin:100px 100px; }
  .mark-arrows{ animation: markExit .45s cubic-bezier(.4,0,.2,1) forwards; animation-delay:1.5s; }
  .mark-a{ opacity:0; animation: markEnter .55s cubic-bezier(.4,0,.2,1) forwards; animation-delay:1.6s; }

  .stroke-draw{
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: draw .9s cubic-bezier(.4,0,.2,1) forwards;
  }
  .stroke-draw.a2{ animation-delay:.2s; }
  .arrow-tick{ opacity:0; animation: tickIn .2s ease forwards; animation-delay:.8s; }

  /* Etapa 3: la V dorada grande (a3) se queda en su lugar y solo recolorea a dorado;
     la linea chica dorada (a4) se desvanece; entra una V negra grande nueva (a5),
     mas grande y mas baja, cruzando la dorada — "dos compases encontrados". */
  .a3{
    stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
    animation:
      draw .55s cubic-bezier(.4,0,.2,1) forwards 1.6s,
      toGold .5s cubic-bezier(.4,0,.2,1) forwards 2.8s;
  }
  .a4{
    stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
    animation:
      draw .55s cubic-bezier(.4,0,.2,1) forwards 1.75s,
      fadeOut .3s ease forwards 2.8s;
  }
  .a5{
    stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
    animation: draw .5s cubic-bezier(.4,0,.2,1) forwards 2.9s;
  }

  @keyframes draw{ to{ stroke-dashoffset:0; } }
  @keyframes tickIn{ to{ opacity:1; } }
  @keyframes markExit{
    from{ opacity:1; transform:scale(1) rotate(0deg); }
    to{ opacity:0; transform:scale(.82) rotate(10deg); }
  }
  @keyframes markEnter{
    from{ opacity:0; transform:scale(1.12) rotate(-8deg); }
    to{ opacity:1; transform:scale(1) rotate(0deg); }
  }
  @keyframes toGold{ to{ stroke:var(--gold); } }
  @keyframes fadeOut{ to{ opacity:0; } }
  @media (prefers-reduced-motion: reduce){
    .mark-arrows{ animation:none; opacity:0; }
    .mark-a{ animation:none; opacity:1; transform:none; }
    .stroke-draw{ animation:none; stroke-dashoffset:0; }
    .arrow-tick{ animation:none; opacity:0; }
    .a3{ animation:none; stroke-dashoffset:0; stroke:var(--gold); }
    .a4{ animation:none; opacity:0; }
    .a5{ animation:none; stroke-dashoffset:0; }
  }

  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr; padding-top:40px;}
    .hero-mark{order:-1; width:min(220px,60%); margin:0 auto;}
  }

  /* ---------- SECTION shell ---------- */
  section{position:relative; padding:120px 0;}
  .rule{border-top:1px solid var(--line);}
  @media (max-width:640px){ section{padding:80px 0;} }

  .kicker{
    display:flex; align-items:baseline; gap:14px; margin-bottom:20px;
  }
  .kicker .num{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--gold-deep);}
  h2.title{font-size:clamp(34px,4.4vw,54px);}

  /* ---------- ESTUDIO ---------- */
  .estudio-grid{
    display:grid; grid-template-columns:1.5fr 1fr; gap:70px; align-items:start;
  }
  .estudio-grid p{max-width:56ch; font-size:16.5px; color:var(--ink-soft); margin-top:18px;}
  .facts{display:flex; flex-direction:column; gap:26px;}
  .fact{border-top:1px solid var(--line); padding-top:14px;}
  .fact .mono{margin-bottom:6px;}
  .fact strong{font-family:'Big Shoulders Display',sans-serif; font-size:20px; font-weight:600; text-transform:none; display:block;}
  @media (max-width:820px){ .estudio-grid{grid-template-columns:1fr; gap:40px;} }

  /* ---------- PROYECTOS (flip cards) ---------- */
  .proyectos-note{max-width:60ch; color:var(--ink-soft); margin-top:16px; font-size:15.5px;}
  .cards{
    margin-top:56px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  }
  @media (max-width:980px){ .cards{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .cards{grid-template-columns:1fr;} }

  .card{
    perspective:1600px; height:340px; cursor:pointer;
  }
  .card-inner{
    position:relative; width:100%; height:100%;
    transform-style:preserve-3d;
    transition:transform .7s cubic-bezier(.4,0,.2,1);
  }
  .card.flipped .card-inner{transform:rotateY(180deg);}
  .card-face{
    position:absolute; inset:0; backface-visibility:hidden;
    border:1px solid var(--line);
    display:flex; flex-direction:column;
    padding:26px;
  }
  .card-front{background:var(--paper-deep);}
  .card-front .icon{flex:1; display:flex; align-items:center; justify-content:center;}
  .card-front svg{width:78%; height:78%; stroke:var(--ink); fill:none; stroke-width:2.4;}
  .card-front h3{font-size:24px;}
  .card-front .tap{margin-top:8px;}
  .card-back{
    background:var(--ink); color:var(--paper);
    transform:rotateY(180deg);
    justify-content:space-between;
  }
  .card-back h3{color:var(--gold-bright); font-size:22px;}
  .card-back p{margin-top:12px; font-size:14.5px; color:var(--paper-deep); line-height:1.55;}
  .card-back .wa-link{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; text-transform:uppercase;
    font-size:15px; color:var(--gold-bright); border-bottom:1px solid var(--gold-bright); padding-bottom:3px;
    width:fit-content;
  }
  .card-back .wa-link svg{width:15px; height:15px;}
  .flip-hint{
    display:flex; align-items:center; gap:7px; margin-top:auto;
  }
  .flip-hint svg{width:16px; height:16px; stroke:var(--gold-deep);}
  .flip-hint span{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--stone);}

  /* ---------- SERVICIOS (modalidades comparativas) ---------- */
  .modalities-grid{
    margin-top:50px; display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch;
  }
  .modality-card{
    position:relative; display:flex; flex-direction:column;
    background:var(--paper-deep); border:1px solid var(--line); padding:40px 34px;
  }
  .modality-card.featured{background:var(--paper); border:1px solid var(--gold);}
  .modality-badge{
    position:absolute; top:-13px; right:32px;
    background:var(--gold); color:var(--ink);
    font-family:'JetBrains Mono',monospace; font-weight:500; font-size:11px; letter-spacing:.05em;
    padding:5px 14px; border-radius:20px;
  }
  .modality-title{font-size:30px; letter-spacing:0.01em;}
  .modality-desc{color:var(--ink-soft); font-size:14.5px; margin-top:10px; max-width:42ch;}
  .modality-list{list-style:none; margin-top:30px; flex:1;}
  .modality-list li{
    display:flex; gap:12px; padding:16px 0; border-top:1px solid var(--line);
  }
  .modality-list li:last-child{border-bottom:1px solid var(--line);}
  .modality-list li svg{width:16px; height:16px; flex-shrink:0; margin-top:3px; stroke:var(--gold-deep); fill:none; stroke-width:2.2;}
  .modality-list li .txt strong{
    display:block; color:var(--ink); font-size:14.5px; letter-spacing:.01em; margin-bottom:2px;
  }
  .modality-list li .txt span{color:var(--ink-soft); font-size:13.5px; line-height:1.5;}
  .modality-note{
    margin-top:22px; font-size:12px; color:var(--stone); line-height:1.6; font-style:italic;
  }
  .modality-cta{
    margin-top:30px; display:flex; align-items:center; justify-content:center; gap:10px;
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:17px;
    text-transform:uppercase; letter-spacing:.02em; padding:16px; text-align:center;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .modality-cta.solid{background:var(--gold); color:var(--ink);}
  .modality-cta.solid:hover{background:var(--gold-bright);}
  .modality-cta.outline{background:none; color:var(--ink); border:1px solid var(--ink);}
  .modality-cta.outline:hover{background:var(--ink); color:var(--paper);}
  @media (max-width:860px){ .modalities-grid{grid-template-columns:1fr;} }

  /* ---------- PILARES (accordion) ---------- */
  .pilares-list{margin-top:50px; border-top:1px solid var(--line);}
  .pilar{border-bottom:1px solid var(--line);}
  .pilar-head{
    display:flex; align-items:center; gap:22px; width:100%;
    padding:26px 0; background:none; border:none; cursor:pointer; text-align:left; color:var(--ink);
  }
  .pilar-head .num{
    font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--gold-deep); width:26px; flex-shrink:0;
  }
  .pilar-head .heads{flex:1;}
  .pilar-head .sub{display:block; margin-bottom:4px;}
  .pilar-head h3{font-size:24px; text-transform:none; letter-spacing:0;}
  .pilar-head .chev{
    width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:50%; transition:transform .3s ease, border-color .2s ease;
  }
  .pilar-head .chev svg{width:11px; height:11px; stroke:var(--ink-soft);}
  .pilar.open .pilar-head .chev{transform:rotate(180deg); border-color:var(--gold);}
  .pilar-body{
    max-height:0; overflow:hidden; transition:max-height .45s ease;
  }
  .pilar.open .pilar-body{max-height:520px;}
  .pilar-body-inner{
    padding:0 0 34px 48px; display:grid; grid-template-columns:1.5fr 1fr; gap:40px;
  }
  .pilar-summary{
    font-size:14px; color:var(--gold-deep); border-left:2px solid var(--gold); padding-left:14px; margin-bottom:16px;
  }
  .pilar-body-inner p{color:var(--ink-soft); font-size:15px; max-width:56ch;}
  .pilar-body-inner ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
  .pilar-body-inner ul li{
    font-size:14px; color:var(--ink-soft); padding-left:18px; position:relative;
  }
  .pilar-body-inner ul li::before{
    content:""; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--gold); border-radius:50%;
  }
  @media (max-width:760px){
    .pilar-body-inner{grid-template-columns:1fr; padding-left:0; gap:18px;}
    .pilar-head .num{display:none;}
  }

  /* ---------- ALCANCE ---------- */
  .alcance-grid{
    margin-top:50px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .alcance-card{background:var(--paper); padding:32px 26px;}
  .alcance-card svg{width:34px; height:34px; stroke:var(--gold-deep); fill:none; stroke-width:1.6; margin-bottom:20px;}
  .alcance-card h3{font-size:19px; text-transform:none; letter-spacing:0; margin-bottom:10px;}
  .alcance-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.55;}
  @media (max-width:900px){ .alcance-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .alcance-grid{grid-template-columns:1fr;} }

  /* ---------- CONTACTO (bold dark section) ---------- */
  .contacto{
    background:var(--ink); color:var(--paper);
  }
  .contacto .grid-bg{opacity:0.25;
    background-image:
      linear-gradient(var(--line-on-ink) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-on-ink) 1px, transparent 1px);
  }
  .contacto h2.title{color:var(--paper);}
  .contacto-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:end;}
  .contacto p.lead{max-width:44ch; color:var(--paper-deep); font-size:17px; margin-top:18px;}

  .wa-button{
    margin-top:40px; display:inline-flex; align-items:center; gap:14px;
    background:var(--gold); color:var(--ink);
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:20px;
    text-transform:uppercase; letter-spacing:.02em;
    padding:18px 28px; border-radius:2px;
    transition:background .2s ease, transform .2s ease;
  }
  .wa-button:hover{background:var(--gold-bright); transform:translateY(-2px);}
  .wa-button svg{width:22px; height:22px;}

  .contact-list{display:flex; flex-direction:column; gap:22px;}
  .contact-list a{
    display:flex; align-items:center; gap:14px;
    padding-bottom:14px; border-bottom:1px solid var(--line-on-ink);
    font-size:16px;
  }
  .contact-list a .lbl{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--gold-bright); display:block;}
  .contact-list a .val{font-size:17px; margin-top:3px;}
  .contact-list a svg{width:20px; height:20px; flex-shrink:0; color:var(--gold-bright);}
  .contact-list a:hover .val{color:var(--gold-bright);}

  .coords{margin-top:60px; display:flex; gap:40px; flex-wrap:wrap;}
  .coords .mono{color:var(--stone);}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--ink); color:var(--paper-deep);
    border-top:1px solid var(--line-on-ink);
    padding:34px 0;
  }
  .footer-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .footer-inner img{height:30px; opacity:0.92;}
  .footer-social{display:flex; gap:14px;}
  .footer-social a{
    width:32px; height:32px; border:1px solid var(--line-on-ink); border-radius:50%;
    display:flex; align-items:center; justify-content:center; transition:.2s ease;
  }
  .footer-social a:hover{border-color:var(--gold-bright);}
  .footer-social svg{width:14px; height:14px;}
  .footer-inner .mono{color:var(--stone);}

  :focus-visible{outline:2px solid var(--gold); outline-offset:3px;}