:root{
    --paper:#ECEEEB; --sheet:#F4F6F3; --ink:#15181A; --muted:#565D62;
    --faint:#878E92; --line:#C7CCC7; --line-2:#D8DCD7;
    --accent:#2C5A7A; --accent-ink:#22485F; --accent-soft:#DCE6EC;
    --wa:#1F7A54;
    --sans:-apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --paper:#121618; --sheet:#181C1F; --ink:#E7EBE8; --muted:#9AA1A5;
      --faint:#6B7276; --line:#2A2F32; --line-2:#232829;
      --accent:#79ADD6; --accent-ink:#9AC4E6; --accent-soft:#1E2A33; --wa:#25B368;
    }
  }
  :root[data-theme="dark"]{
      --paper:#121618; --sheet:#181C1F; --ink:#E7EBE8; --muted:#9AA1A5;
      --faint:#6B7276; --line:#2A2F32; --line-2:#232829;
      --accent:#79ADD6; --accent-ink:#9AC4E6; --accent-soft:#1E2A33; --wa:#25B368;
  }
  :root[data-theme="light"]{
      --paper:#ECEEEB; --sheet:#F4F6F3; --ink:#15181A; --muted:#565D62;
      --faint:#878E92; --line:#C7CCC7; --line-2:#D8DCD7;
      --accent:#2C5A7A; --accent-ink:#22485F; --accent-soft:#DCE6EC; --wa:#1F7A54;
  }

  *{box-sizing:border-box}
  [hidden]{display:none !important}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px}

  .frame{position:fixed; inset:12px; border:1px solid var(--line); pointer-events:none; z-index:60}
  .frame::before,.frame::after{content:""; position:absolute; width:9px; height:9px; border:1px solid var(--faint)}
  .frame::before{top:-5px; left:-5px; border-right:0; border-bottom:0}
  .frame::after{bottom:-5px; right:-5px; border-left:0; border-top:0}
  @media (max-width:720px){ .frame{inset:6px} }

  .wrap{max-width:1120px; margin:0 auto; padding:0 34px}
  @media (max-width:720px){ .wrap{padding:0 20px} }

  .tag{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}

  header.top{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 86%, transparent);
    backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid var(--line)}
  .bar{display:flex; align-items:center; justify-content:space-between; height:64px}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
  .mono-mark{width:34px; height:34px; border:1.5px solid var(--ink); border-radius:50%; flex:none;
    display:grid; place-items:center; font-family:var(--mono); font-weight:600; font-size:.82rem; letter-spacing:.02em}
  .brand b{font-weight:600; font-size:.98rem; letter-spacing:.01em}
  nav.main{display:flex; align-items:center; gap:26px}
  nav.main a{color:var(--muted); text-decoration:none; font-size:.86rem; letter-spacing:.02em; position:relative}
  nav.main a::after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px; background:var(--accent); transition:right .28s ease}
  nav.main a:hover{color:var(--ink)} nav.main a:hover::after{right:0}
  .nav-links{display:flex; gap:26px}
  .call{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.8rem;
    color:var(--ink); text-decoration:none; border:1px solid var(--line); padding:8px 14px; letter-spacing:.02em; transition:border-color .2s,background .2s}
  .call:hover{border-color:var(--accent); background:var(--accent-soft)}
  .call .dot{width:6px;height:6px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:pulse 2.6s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent}}
  @media (prefers-reduced-motion:reduce){ .call .dot{animation:none} }

  /* --- MENÚ HAMBURGUESA (solo móvil/tablet ≤840px) --- */
  .nav-toggle{display:none; align-items:center; justify-content:center; width:42px; height:38px;
    padding:0; background:none; border:1px solid var(--line); color:var(--ink); cursor:pointer;
    transition:border-color .2s, background .2s}
  .nav-toggle:hover{border-color:var(--accent); background:var(--accent-soft)}
  .nt-bars{display:block; position:relative; width:18px; height:12px}
  .nt-bars i{position:absolute; left:0; width:100%; height:1.5px; background:currentColor;
    transition:transform .26s ease, opacity .18s ease, top .26s ease}
  .nt-bars i:nth-child(1){top:0}
  .nt-bars i:nth-child(2){top:5.25px}
  .nt-bars i:nth-child(3){top:10.5px}
  header.top.nav-open .nt-bars i:nth-child(1){top:5.25px; transform:rotate(45deg)}
  header.top.nav-open .nt-bars i:nth-child(2){opacity:0}
  header.top.nav-open .nt-bars i:nth-child(3){top:5.25px; transform:rotate(-45deg)}
  @media (prefers-reduced-motion:reduce){ .nt-bars i{transition:none} }

  @media (max-width:840px){
    .nav-toggle{display:inline-flex}
    nav.main{gap:12px}
    .nav-links{
      display:flex; flex-direction:column; gap:0;
      position:absolute; top:100%; left:0; right:0; z-index:55;
      background:var(--paper); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line);
      box-shadow:0 14px 28px -18px rgba(0,0,0,.45);
      max-height:calc(100vh - 64px); overflow-y:auto;
      opacity:0; visibility:hidden; transform:translateY(-8px);
      transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    }
    header.top.nav-open .nav-links{opacity:1; visibility:visible; transform:none; transition-delay:0s}
    nav.main .nav-links a{padding:15px 34px; font-size:.95rem; color:var(--ink); border-bottom:1px solid var(--line-2)}
    nav.main .nav-links a:last-child{border-bottom:0}
    nav.main .nav-links a::after{display:none}
    nav.main .nav-links a:hover,nav.main .nav-links a:active{background:var(--accent-soft); color:var(--accent-ink)}
  }
  @media (max-width:840px) and (prefers-reduced-motion:reduce){
    .nav-links{transition:none} header.top.nav-open .nav-links{transition:none}
  }
  @media (max-width:720px){ nav.main .nav-links a{padding:15px 20px} }
  /* Cabecera compacta: el botón del menú necesita sitio junto al teléfono */
  @media (max-width:560px){
    nav.main{gap:10px}
    nav.main .call{padding:7px 11px; font-size:.75rem; gap:6px}
    .brand{gap:9px}
  }
  /* Móvil estrecho: la marca se queda en el logo (el nombre lo lleva el titular) */
  @media (max-width:480px){
    .brand b{display:none}
    nav.main .call{font-size:.78rem}
  }

  /* HERO */
  .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
  .hero-grid{position:absolute; inset:0; z-index:0; opacity:.5;
    background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
    background-size:44px 44px; mask-image:radial-gradient(120% 80% at 20% 20%,#000 0%,transparent 74%);
    -webkit-mask-image:radial-gradient(120% 80% at 20% 20%,#000 0%,transparent 74%)}
  .hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding-top:72px; padding-bottom:72px}
  .kicker{margin:0 0 24px}
  h1{font-size:clamp(2.3rem,5.2vw,4.1rem); line-height:1.04; letter-spacing:-.025em; font-weight:600; margin:0 0 22px; text-wrap:balance}
  h1 em{font-style:normal; color:var(--accent-ink)}
  .lead{font-size:1.1rem; color:var(--muted); max-width:38ch; margin:0 0 30px}
  .lead strong{color:var(--ink); font-weight:600}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; font-size:.92rem; padding:13px 20px; letter-spacing:.01em; border:1px solid var(--ink); transition:.2s; cursor:pointer; font-family:inherit}
  .btn.primary{background:var(--ink); color:var(--paper)}
  .btn.primary:hover{background:var(--accent); border-color:var(--accent); color:#fff}
  .btn.ghost{color:var(--ink); border-color:var(--line); background:none}
  .btn.ghost:hover{border-color:var(--ink)}
  .btn.wa{background:var(--wa); border-color:var(--wa); color:#fff}
  .btn.wa:hover{filter:brightness(1.08)}
  .btn svg{width:16px;height:16px}

  .hero-fig{position:relative; margin:0}
  .hero-fig img{display:block; width:100%; height:auto; border:1px solid var(--line)}
  .hero-fig figcaption{position:absolute; left:0; bottom:-1px; transform:translateY(100%);
    font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding-top:8px}
  .hero-badge{position:absolute; top:14px; right:14px; border:1px solid var(--accent); color:var(--accent-ink);
    font-family:var(--mono); font-size:.72rem; padding:7px 10px; letter-spacing:.08em; background:var(--paper)}
  @media (max-width:860px){
    .hero .wrap{grid-template-columns:1fr; gap:34px; padding-top:50px; padding-bottom:60px}
  }

  /* stats strip */
  .stats-strip{border-bottom:1px solid var(--line); background:var(--sheet)}
  .stats-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
  .sstat{padding:22px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px}
  .sstat:first-child{border-left:1px solid var(--line)}
  .sstat .n{font-family:var(--mono); font-size:1.7rem; font-weight:500; letter-spacing:-.02em; color:var(--accent-ink); font-variant-numeric:tabular-nums}
  .sstat .l{font-size:.85rem; color:var(--muted); line-height:1.4}
  @media (max-width:860px){
    .stats-strip .wrap{grid-template-columns:repeat(2,1fr)}
    .sstat:nth-child(2n){border-right:1px solid var(--line)}
    .sstat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  }

  /* section scaffolding */
  .dim{display:flex; align-items:center; gap:16px; padding:40px 0 6px}
  .dim .l{height:1px; background:var(--line); flex:1; position:relative}
  .dim .l::before,.dim .l::after{content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--faint)}
  .dim .l::before{left:0} .dim .l::after{right:0}
  .dim .t{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); white-space:nowrap}
  section{padding:20px 0 10px}
  .sec-head{margin:8px 0 30px}
  .sec-head h2{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:600; letter-spacing:-.02em; margin:0; text-wrap:balance}
  .sec-head p{margin:8px 0 0; color:var(--muted); max-width:60ch}

  /* método */
  .metodo-claim{border:1px solid var(--ink); padding:26px 28px; margin:0 0 28px; background:var(--sheet)}
  .metodo-claim h3{margin:0 0 14px; font-size:1.05rem; font-weight:600; letter-spacing:-.01em; color:var(--accent-ink)}
  .metodo-claim p{margin:0; font-size:1.12rem; line-height:1.6; max-width:66ch}
  .metodo-claim p + p{margin-top:14px}
  .metodo-claim p strong{color:var(--accent-ink)}
  .metodo{display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line)}
  .met{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 24px 30px; position:relative; transition:background .2s}
  .met:hover{background:var(--sheet)}
  .met .idx{font-family:var(--mono); font-size:.72rem; color:var(--faint)}
  .met h3{font-size:1.12rem; font-weight:600; margin:14px 0 8px; letter-spacing:-.01em}
  .met p{margin:0; font-size:.95rem; color:var(--muted); line-height:1.6}
  @media (max-width:720px){ .metodo{grid-template-columns:1fr} }

  /* obras / galería */
  .obra-grupo{margin:0 0 40px}
  .obra-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px; margin:0 0 16px}
  .obra-head h3{font-size:1.2rem; font-weight:600; letter-spacing:-.01em; margin:0}
  .obra-head h3 .loc{color:var(--accent-ink); font-weight:500}
  .obra-head .tag{margin-left:auto}
  .obra-head p{flex-basis:100%; margin:2px 0 0; color:var(--muted); font-size:.94rem; max-width:70ch}
  .grid-fotos{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
  .grid-fotos a{display:block; position:relative; border:1px solid var(--line); overflow:hidden; background:var(--sheet)}
  .grid-fotos img{display:block; width:100%; height:200px; object-fit:cover; transition:transform .35s ease}
  .grid-fotos a:hover img{transform:scale(1.04)}
  .grid-fotos a::after{content:"⤢"; position:absolute; right:8px; bottom:6px; font-size:.85rem; color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.55); opacity:0; transition:opacity .2s}
  .grid-fotos a:hover::after{opacity:1}
  @media (max-width:860px){ .grid-fotos{grid-template-columns:repeat(2,1fr)} .grid-fotos img{height:170px} }
  @media (max-width:480px){ .grid-fotos img{height:140px} }
  @media (prefers-reduced-motion:reduce){ .grid-fotos img{transition:none} .grid-fotos a:hover img{transform:none} }
  .obras-nota{border-left:2px solid var(--accent); padding:10px 16px; margin:6px 0 0; color:var(--muted); font-size:.94rem; max-width:75ch}

  /* servicios */
  .svc{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line)}
  .svc .cell{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 24px 30px; position:relative; transition:background .2s}
  .svc .cell:hover{background:var(--sheet)}
  .svc .cell .idx{font-family:var(--mono); font-size:.72rem; color:var(--faint)}
  .svc .cell h3{font-size:1.04rem; font-weight:600; margin:16px 0 8px; letter-spacing:-.01em; max-width:20ch}
  .svc .cell p{margin:0; font-size:.92rem; color:var(--muted); line-height:1.55}
  .svc .cell .tick{position:absolute; top:0; right:0; width:0; height:0; border-top:12px solid transparent; border-right:12px solid transparent; transition:.2s}
  .svc .cell:hover .tick{border-top-color:var(--accent); border-right-color:var(--accent)}
  @media (max-width:860px){ .svc{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .svc{grid-template-columns:1fr} }

  /* proceso */
  .steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line)}
  .step{padding:24px 18px 26px; border-right:1px dashed var(--line)}
  .step:last-child{border-right:0}
  .step .n{font-family:var(--mono); font-size:1.4rem; color:var(--accent-ink); font-weight:500}
  .step .n small{font-size:.7rem; color:var(--faint); letter-spacing:.1em}
  .step h4{margin:12px 0 6px; font-size:1rem; font-weight:600}
  .step p{margin:0; font-size:.86rem; color:var(--muted); line-height:1.5}
  @media (max-width:860px){ .steps{grid-template-columns:repeat(2,1fr)} .step{border-bottom:1px dashed var(--line)} .step:nth-child(2n){border-right:0} }
  @media (max-width:460px){ .steps{grid-template-columns:1fr} .step{border-right:0} }

  /* quién soy */
  .about{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start; padding-top:6px}
  .about .bio p{color:var(--muted); max-width:52ch}
  .about .bio p strong{color:var(--ink); font-weight:600}
  .stats{display:flex; flex-direction:column; border-top:1px solid var(--line)}
  .stat{display:flex; align-items:baseline; gap:16px; padding:20px 4px; border-bottom:1px solid var(--line)}
  .stat .big{font-family:var(--mono); font-size:2rem; font-weight:500; letter-spacing:-.02em; min-width:3.6ch; font-variant-numeric:tabular-nums}
  .stat .lab{color:var(--muted); font-size:.92rem}
  @media (max-width:820px){ .about{grid-template-columns:1fr; gap:34px} }

  /* faq */
  .faq{border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:14px; padding:18px 4px; font-weight:600; font-size:1.02rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .q{font-family:var(--mono); font-size:.78rem; color:var(--accent-ink); flex:none}
  .faq summary::after{content:"+"; margin-left:auto; font-family:var(--mono); color:var(--faint); font-size:1.1rem}
  .faq details[open] summary::after{content:"−"}
  .faq .a{padding:0 4px 20px 0; color:var(--muted); max-width:75ch}
  .faq .a p{margin:0 0 0 34px}

  /* contacto */
  .contact{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; padding-bottom:10px}
  .contact .pitch h2{font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:600; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance}
  .contact .pitch p{color:var(--muted); max-width:42ch; margin:0 0 24px}
  .contact-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px}
  .contact-list a{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); padding:14px 2px; border-bottom:1px solid var(--line); transition:.2s}
  .contact-list a:hover{padding-left:10px; color:var(--accent-ink)}
  .contact-list .ico{width:20px; height:20px; flex:none; color:var(--faint)}
  .contact-list a:hover .ico{color:var(--accent)}
  .contact-list .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); display:block}
  .contact-list .v{font-size:1.02rem}
  .contact-list .arrow{color:var(--faint); margin-left:auto}

  /* formulario */
  .cform{border:1px solid var(--line); background:var(--sheet); padding:24px}
  .cform h3{margin:0 0 4px; font-size:1.1rem; font-weight:600}
  .cform .sub{margin:0 0 18px; color:var(--muted); font-size:.9rem}
  .cform .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .cform label{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:16px}
  .cform input,.cform textarea{display:block; width:100%; margin-top:7px; font-family:inherit; font-size:.98rem;
    color:var(--ink); background:var(--paper); border:1px solid var(--line); padding:11px 12px; border-radius:0; transition:border-color .2s}
  .cform input:focus,.cform textarea:focus{outline:none; border-color:var(--accent)}
  .cform textarea{resize:vertical; min-height:96px}
  .cform .btn{width:100%}
  .cform-nota{margin:12px 0 0; font-size:.8rem; color:var(--faint); text-align:center}
  @media (max-width:560px){ .cform .row{grid-template-columns:1fr} }

  footer{margin-top:44px; border-top:1px solid var(--line)}
  .foot{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding:22px 0 30px; color:var(--faint)}
  .foot span{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em}
  .foot a{color:var(--faint); text-decoration:none; border-bottom:1px solid transparent}
  .foot a:hover{color:var(--ink); border-color:var(--line)}

  /* WhatsApp flotante */
  .wa-float{position:fixed; right:20px; bottom:20px; z-index:70; display:inline-flex; align-items:center; gap:9px;
    background:var(--wa); color:#fff; text-decoration:none; padding:12px 16px; border-radius:40px;
    box-shadow:0 6px 22px rgba(0,0,0,.24); font-size:.9rem; font-weight:600; transition:transform .2s, filter .2s}
  .wa-float:hover{transform:translateY(-2px); filter:brightness(1.06)}
  .wa-float svg{width:22px; height:22px; flex:none}
  .wa-float .txt{white-space:nowrap}
  @media (max-width:560px){ .wa-float{right:14px; bottom:14px; padding:13px} .wa-float .txt{display:none} }

  /* logo cabecera */
  .brand-logo{width:38px; height:38px; object-fit:contain; flex:none}
  @media (prefers-color-scheme:dark){ .brand-logo{filter:invert(1) brightness(1.7)} }
  :root[data-theme="dark"] .brand-logo{filter:invert(1) brightness(1.7)}
  :root[data-theme="light"] .brand-logo{filter:none}

  /* obras: fases antes / durante / resultado */
  .fases{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px}
  .fases a{position:relative; display:block; border:1px solid var(--line); overflow:hidden; background:var(--sheet)}
  .fases img{display:block; width:100%; height:230px; object-fit:cover; transition:transform .35s ease}
  .fases a:hover img{transform:scale(1.04)}
  .fase-badge{position:absolute; top:0; left:0; z-index:2; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
    text-transform:uppercase; color:#fff; background:rgba(18,22,24,.82); padding:5px 9px}
  .fase-badge.info{background:var(--accent)}
  .fases a::after{content:"⤢"; position:absolute; right:8px; bottom:6px; font-size:.85rem; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.55); opacity:0; transition:opacity .2s}
  .fases a:hover::after{opacity:1}
  @media (prefers-reduced-motion:reduce){ .fases img{transition:none} .fases a:hover img{transform:none} }

  /* experiencia: buscador de obras */
  .exp-filtros{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin:0 0 20px}
  .exp-filtros label{display:flex; flex-direction:column; gap:7px; font-family:var(--mono); font-size:.66rem;
    letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
  .exp-filtros select{font-family:inherit; font-size:.95rem; color:var(--ink); background-color:var(--paper);
    border:1px solid var(--line); padding:10px 38px 10px 12px; border-radius:0; min-width:230px; cursor:pointer;
    appearance:none; -webkit-appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
    background-position:calc(100% - 19px) 55%,calc(100% - 14px) 55%; background-size:5px 5px; background-repeat:no-repeat}
  .exp-filtros select:focus{outline:none; border-color:var(--accent)}
  .exp-filtros .btn{padding:10px 16px; font-size:.85rem}
  .exp-contador{display:flex; flex-wrap:wrap; border:1px solid var(--line); background:var(--sheet); margin:0 0 18px}
  .exp-cifra{flex:1; min-width:150px; padding:16px 18px; border-right:1px solid var(--line); font-size:.88rem; color:var(--muted)}
  .exp-cifra:last-child{border-right:0}
  .exp-cifra b{display:block; font-family:var(--mono); font-size:1.65rem; font-weight:500; color:var(--accent-ink);
    font-variant-numeric:tabular-nums; letter-spacing:-.02em}
  @media (max-width:560px){ .exp-cifra{min-width:110px; padding:13px 14px} .exp-cifra b{font-size:1.3rem} }
  .exp-lista{list-style:none; margin:0; padding:0; border:1px solid var(--line); max-height:520px; overflow-y:auto; background:var(--paper)}
  .exp-lista li{display:grid; grid-template-columns:58px 1.45fr 1fr auto; gap:2px 16px; align-items:baseline;
    padding:12px 16px; border-bottom:1px solid var(--line-2)}
  .exp-lista li:last-child{border-bottom:0}
  .exp-lista .y{font-family:var(--mono); font-size:.82rem; color:var(--accent-ink)}
  .exp-lista .q{font-weight:600; font-size:.95rem}
  .exp-lista .q small{display:block; font-weight:400; color:var(--muted); font-size:.85rem; line-height:1.45}
  .exp-lista .w{color:var(--muted); font-size:.9rem}
  .exp-lista .m{font-family:var(--mono); font-size:.76rem; color:var(--faint); white-space:nowrap}
  @media (max-width:720px){
    .exp-lista li{grid-template-columns:52px 1fr auto}
    .exp-lista .w{grid-column:2}
    .exp-lista .m{grid-row:1; grid-column:3}
    .exp-filtros label{flex:1} .exp-filtros select{min-width:0; width:100%}
  }
  .exp-vacio{border:1px dashed var(--line); padding:18px; color:var(--muted); margin:0}
  .exp-nota{margin:14px 0 0; font-size:.8rem; color:var(--faint)}
  .tr-frase{margin:0 0 14px; font-size:1rem; color:var(--muted)}
  .tr-frase strong{color:var(--accent-ink)}
  .tr-desglose{border:1px solid var(--line); background:var(--paper); padding:18px 20px 14px}
  .tr-desglose h3{margin:0 0 12px; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--faint); font-weight:500}
  .tr-barra{display:grid; grid-template-columns:minmax(130px,230px) 1fr 64px; gap:12px; align-items:center; padding:5px 0}
  .tr-barra .e{font-size:.88rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .tr-barra .b{height:10px; background:var(--sheet); border:1px solid var(--line-2); position:relative}
  .tr-barra .b i{position:absolute; top:0; bottom:0; left:0; background:var(--accent); opacity:.78; transition:width .4s ease}
  .tr-barra .n{font-family:var(--mono); font-size:.78rem; color:var(--accent-ink); text-align:right; font-variant-numeric:tabular-nums}
  .tr-mas{margin:8px 0 0; font-size:.8rem; color:var(--faint)}
  @media (max-width:560px){ .tr-barra{grid-template-columns:minmax(92px,130px) 1fr 54px; gap:8px} }
  @media (prefers-reduced-motion:reduce){ .tr-barra .b i{transition:none} }

  /* lightbox */
  .lbx{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; background:rgba(10,12,13,.92); padding:30px}
  .lbx.open{display:flex}
  .lbx img{max-width:min(1600px,92vw); max-height:82vh; display:block; border:1px solid rgba(255,255,255,.18)}
  .lbx .cap{position:absolute; left:0; right:0; bottom:18px; text-align:center; color:#cfd6d3; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; padding:0 70px}
  .lbx button{position:absolute; background:none; border:1px solid rgba(255,255,255,.35); color:#fff; font-size:1.1rem; line-height:1; padding:10px 13px; cursor:pointer; font-family:var(--mono)}
  .lbx button:hover{background:rgba(255,255,255,.12)}
  .lbx .cls{top:18px; right:18px}
  .lbx .prv{left:14px; top:50%; transform:translateY(-50%)}
  .lbx .nxt{right:14px; top:50%; transform:translateY(-50%)}
  @media (max-width:600px){ .lbx{padding:12px} .lbx .cap{padding:0 14px; bottom:8px} }

  /* aviso legal (modal) */
  .legal-link{font-size:.58rem; letter-spacing:.08em; opacity:.55; text-transform:lowercase}
  .legal-link:hover{opacity:1}
  .legal{position:fixed; inset:0; z-index:110; display:none; align-items:center; justify-content:center; background:rgba(10,12,13,.74); padding:22px}
  .legal.open{display:flex}
  .legal-caja{position:relative; background:var(--paper); color:var(--ink); border:1px solid var(--line);
    max-width:660px; max-height:84vh; overflow-y:auto; padding:30px 34px}
  .legal-caja h2{margin:0 0 2px; font-size:1.25rem; letter-spacing:-.01em}
  .legal-caja .legal-sub{margin:0 0 16px; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
  .legal-caja h3{margin:16px 0 5px; font-size:.92rem; font-weight:600}
  .legal-caja p{margin:0 0 8px; font-size:.85rem; color:var(--muted); line-height:1.6}
  .legal-caja a{color:var(--accent-ink); text-decoration:none; border-bottom:1px solid var(--line)}
  .legal-caja a:hover{border-color:var(--accent)}
  .legal-cerrar{position:sticky; top:0; float:right; margin:-14px -18px 0 0; background:var(--paper);
    border:1px solid var(--line); color:var(--ink); font-size:1rem; line-height:1; padding:8px 11px; cursor:pointer; font-family:var(--mono)}
  .legal-cerrar:hover{border-color:var(--accent); background:var(--accent-soft)}
  @media (max-width:600px){ .legal{padding:10px} .legal-caja{padding:22px 20px} }

  .rv{opacity:0; transform:translateY(44px) scale(.97); transition:opacity .9s ease, transform 1s cubic-bezier(.16,.84,.3,1)}
  .rv.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} }
  /* ===== Efecto "construcción" al bajar — marcado y pieza a pieza; una sola vez (el observer marca .in y no re-anima) ===== */
  @media (prefers-reduced-motion:no-preference){
    /* Líneas divisorias de sección: se trazan de fuera hacia el título */
    .dim .l{transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.7,.2,1) .1s}
    .dim .l:first-child{transform-origin:left}
    .dim .l:last-child{transform-origin:right}
    .dim.in .l{transform:scaleX(1)}
    /* Rejillas (método, servicios, proceso): el marco aparece y las piezas se montan una a una */
    .metodo.rv, .svc.rv, .steps.rv{opacity:1; transform:none; transition:none}
    .metodo .met, .svc .cell, .steps .step{opacity:0; transform:translateY(40px) scale(.955);
      transition:opacity .7s ease, transform .85s cubic-bezier(.16,.84,.3,1)}
    .metodo.in .met, .svc.in .cell, .steps.in .step{opacity:1; transform:none}
    .metodo.in .met:nth-child(1), .svc.in .cell:nth-child(1), .steps.in .step:nth-child(1){transition-delay:0s}
    .metodo.in .met:nth-child(2), .svc.in .cell:nth-child(2), .steps.in .step:nth-child(2){transition-delay:.1s}
    .metodo.in .met:nth-child(3), .svc.in .cell:nth-child(3), .steps.in .step:nth-child(3){transition-delay:.2s}
    .metodo.in .met:nth-child(4), .svc.in .cell:nth-child(4), .steps.in .step:nth-child(4){transition-delay:.3s}
    .svc.in .cell:nth-child(5), .steps.in .step:nth-child(5){transition-delay:.4s}
    .svc.in .cell:nth-child(6){transition-delay:.5s}
    .svc.in .cell:nth-child(7){transition-delay:.6s}
    .svc.in .cell:nth-child(8){transition-delay:.7s}
    .svc.in .cell:nth-child(9){transition-delay:.8s}
  }

  /* ===== INICIO DINÁMICO — animación de portada (demo) ===== */
  .hero h1 .kicker{display:block; font-weight:400; line-height:1.35; text-wrap:normal}
  .hero h1 .hw{display:inline-block}
  .hero h1 .hw.em{color:var(--accent-ink)}
  @media (prefers-reduced-motion:no-preference){
    /* Titular: cada palabra sube, se enfoca y se asienta, escalonadas (lento) */
    .hero h1 .hw{opacity:0; transform:translateY(.6em); filter:blur(8px);
      animation:hwIn 1.15s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(.5s + var(--i,0)*.13s)}
    @keyframes hwIn{to{opacity:1; transform:none; filter:none}}
    /* Antetítulo, texto y botones: entran escalonados tras el titular */
    .hero .kicker{animation:heroUp 1s ease both; animation-delay:.25s}
    .hero .lead{animation:heroUp 1s ease both; animation-delay:1.7s}
    .hero .cta-row{animation:heroUp 1s ease both; animation-delay:1.95s}
    @keyframes heroUp{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
    /* Imagen: barrido que la desvela (izq.→der.) + zoom lento tipo Ken Burns */
    .hero-fig.hero-reveal{clip-path:inset(0 100% 0 0); animation:heroWipe 1.5s cubic-bezier(.6,.05,.1,1) both; animation-delay:.7s}
    @keyframes heroWipe{to{clip-path:inset(0 0 0 0)}}
    .hero-fig.hero-reveal img{transform:scale(1.16); animation:heroZoom 7s ease-out both; animation-delay:.7s}
    @keyframes heroZoom{to{transform:scale(1)}}
    .hero-fig.hero-reveal .hero-badge{animation:heroUp .8s ease both; animation-delay:2.1s}
    .hero-fig.hero-reveal figcaption{animation:heroUp .8s ease both; animation-delay:2.3s}
    /* Rejilla de fondo: aparición muy suave */
    .hero .hero-grid{opacity:0; animation:heroGrid 2.2s ease both}
    @keyframes heroGrid{to{opacity:.5}}
  }

  /* =========================================================
     BLOG — «Notas de obra»
     Tarjetas (portada e índice) + página de artículo.
     Hereda las mismas variables de color y tipografía del sitio.
     ========================================================= */

  /* --- Tarjetas de artículo --- */
  .posts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .post{display:flex; flex-direction:column; border:1px solid var(--line); background:var(--sheet);
    text-decoration:none; color:var(--ink); transition:border-color .25s, transform .3s}
  .post:hover{border-color:var(--accent); transform:translateY(-3px)}
  .post-img{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--paper)}
  .post-img img{display:block; width:100%; height:186px; object-fit:cover; transition:transform .45s ease}
  .post:hover .post-img img{transform:scale(1.045)}
  .post-cat{position:absolute; top:0; left:0; z-index:2; font-family:var(--mono); font-size:.62rem;
    letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(18,22,24,.82); padding:5px 9px}
  .post-cuerpo{padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; flex:1}
  .post-fecha{font-family:var(--mono); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
  .post h3{margin:0; font-size:1.06rem; font-weight:600; letter-spacing:-.01em; line-height:1.34; text-wrap:balance}
  .post p{margin:0; font-size:.92rem; color:var(--muted); line-height:1.55}
  .post .leer{margin-top:auto; padding-top:8px; font-size:.85rem; font-weight:600; color:var(--accent-ink)}
  .post .leer::after{content:" →"}
  @media (max-width:860px){ .posts{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .posts{grid-template-columns:1fr} .post-img img{height:200px} }
  @media (prefers-reduced-motion:reduce){
    .post,.post-img img{transition:none}
    .post:hover{transform:none} .post:hover .post-img img{transform:none}
  }
  .blog-vacio{border:1px dashed var(--line); padding:18px; color:var(--muted); margin:0}
  .blog-todos{margin:22px 0 0; text-align:right}

  /* --- Página de artículo --- */
  .art{max-width:760px; margin:0 auto; padding:0 0 10px}
  .art-volver{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.72rem;
    letter-spacing:.12em; text-transform:uppercase; color:var(--faint); text-decoration:none; margin:34px 0 0}
  .art-volver:hover{color:var(--accent-ink)}
  .art-cab{margin:16px 0 26px}
  .art-cab h1{font-size:clamp(1.85rem,4.2vw,2.75rem); line-height:1.12; letter-spacing:-.025em;
    font-weight:600; margin:10px 0 16px; text-wrap:balance}
  .art-datos{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-family:var(--mono);
    font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
  .art-datos .sep{width:14px; height:1px; background:var(--line)}
  .art-datos .cat{color:var(--accent-ink)}
  .art-entradilla{font-size:1.14rem; line-height:1.62; color:var(--muted); margin:0; max-width:60ch}
  .art-entradilla strong{color:var(--ink); font-weight:600}
  .art-portada{margin:0 0 34px}
  .art-portada img{display:block; width:100%; height:auto; border:1px solid var(--line)}
  .art-portada figcaption{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--faint); padding-top:9px}

  .art-cuerpo{font-size:1.06rem; line-height:1.78}
  .art-cuerpo > p{margin:0 0 1.3em}
  .art-cuerpo > p:first-child{margin-top:0}
  .art-cuerpo strong{font-weight:600; color:var(--ink)}
  .art-cuerpo h2{font-size:1.42rem; font-weight:600; letter-spacing:-.015em; margin:2.1em 0 .6em; text-wrap:balance}
  .art-cuerpo h2::before{content:""; display:block; width:38px; height:2px; background:var(--accent); margin-bottom:14px}
  .art-cuerpo h3{font-size:1.1rem; font-weight:600; margin:1.8em 0 .5em}
  .art-cuerpo ul,.art-cuerpo ol{margin:0 0 1.3em; padding-left:1.3em}
  .art-cuerpo li{margin:0 0 .55em}
  .art-cuerpo li::marker{color:var(--accent)}
  .art-cuerpo a{color:var(--accent-ink); text-decoration:none; border-bottom:1px solid var(--line-2)}
  .art-cuerpo a:hover{border-color:var(--accent)}
  .art-cuerpo blockquote{margin:1.6em 0; padding:4px 0 4px 22px; border-left:2px solid var(--accent);
    font-size:1.1rem; line-height:1.62; color:var(--ink)}
  .art-cuerpo blockquote p{margin:0}
  .art-cuerpo figure{margin:1.8em 0}
  .art-cuerpo figure img{display:block; width:100%; height:auto; border:1px solid var(--line)}
  .art-cuerpo figcaption{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--faint); padding-top:9px}
  .art-cuerpo hr{border:0; border-top:1px solid var(--line); margin:2.4em 0}
  .art-cuerpo .destacado{border:1px solid var(--ink); background:var(--sheet); padding:22px 24px; margin:1.9em 0}
  .art-cuerpo .destacado p{margin:0} .art-cuerpo .destacado p + p{margin-top:12px}

  /* Cierre del artículo: firma + llamada a contacto */
  .art-cierre{margin:44px 0 0; border-top:1px solid var(--line); padding-top:26px}
  .art-firma{display:flex; align-items:center; gap:14px; margin:0 0 22px}
  .art-firma .mono-mark{width:42px; height:42px; font-size:.9rem}
  .art-firma .quien{font-size:.94rem; color:var(--muted); line-height:1.5}
  .art-firma .quien b{display:block; color:var(--ink); font-size:1rem; font-weight:600}
  .art-cta{border:1px solid var(--line); background:var(--sheet); padding:24px 26px}
  .art-cta h2{margin:0 0 8px; font-size:1.16rem; font-weight:600; letter-spacing:-.01em}
  .art-cta h2::before{display:none}
  .art-cta p{margin:0 0 18px; color:var(--muted); font-size:.96rem; max-width:52ch}
  .art-cta .cta-row{display:flex; flex-wrap:wrap; gap:12px}

  /* Anterior / siguiente */
  .art-nav{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:34px 0 0}
  .art-nav a{border:1px solid var(--line); padding:16px 18px; text-decoration:none; color:var(--ink); transition:border-color .2s}
  .art-nav a:hover{border-color:var(--accent)}
  .art-nav .k{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--faint); margin-bottom:6px}
  .art-nav .t{font-size:.95rem; font-weight:600; line-height:1.4}
  .art-nav .sig{text-align:right}
  @media (max-width:560px){ .art-nav{grid-template-columns:1fr} .art-nav .sig{text-align:left} }