/* tipografies pròpies · SIL Open Font License 1.1 */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300;font-display:swap;src:url('/fonts/fraunces-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300;font-display:swap;src:url('/fonts/fraunces-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/fraunces-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/fraunces-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/fraunces-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/fraunces-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/fraunces-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/fraunces-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

  :root {
    --ink: #1A1816;
    --terracotta: #B8502A;
    --ember: #8A3818;
    --cream: #F5EFE6;
    --sand: #E8DFD0;
    --olive: #3F3E2C;
    --paper: #FAF6EE;
    --muted: #6B6560;
    --hairline: rgba(26, 24, 22, 0.10);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  a { color: inherit; text-decoration: none; }

  .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ========== NAV ========== */
  nav.top {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 246, 238, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hairline);
  }
  nav.top .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 60px;
    max-width: 1240px;
    margin: 0 auto;
  }
  nav.top .brand {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: 22px;
    letter-spacing: -0.03em;
  }
  nav.top .brand .accent {
    color: var(--terracotta);
    font-style: italic;
    font-weight: 400;
  }
  nav.top ul {
    list-style: none;
    display: flex;
    gap: 32px;
    align-items: center;
  }
  nav.top ul a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    transition: color .2s;
  }
  nav.top ul a:hover { color: var(--terracotta); }
  nav.top .cta-mini {
    border: 1px solid var(--ink);
    padding: 10px 18px;
    border-radius: 999px;
    transition: background .2s, color .2s;
  }
  nav.top .cta-mini:hover { background: var(--ink); color: var(--cream); }

  /* Hamburger toggle (mobile only) */
  .nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform .25s, opacity .2s;
    transform-origin: center;
  }
  nav.top.is-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  nav.top.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.top.is-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Dropdown menus */
  nav.top ul li.has-dropdown { position: relative; }
  nav.top ul .dropdown-trigger {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .2s;
  }
  nav.top ul .dropdown-trigger .caret {
    font-size: 9px;
    color: var(--muted);
    transition: transform .2s, color .2s;
    display: inline-block;
  }
  nav.top ul .has-dropdown:hover .dropdown-trigger,
  nav.top ul .has-dropdown:focus-within .dropdown-trigger { color: var(--terracotta); }
  nav.top ul .has-dropdown:hover .caret,
  nav.top ul .has-dropdown:focus-within .caret { transform: rotate(180deg); color: var(--terracotta); }
  nav.top ul .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: -16px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 10px 0;
    min-width: 280px;
    display: block;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s, visibility .18s, transform .18s;
    box-shadow: 0 12px 28px rgba(26, 24, 22, 0.10);
    z-index: 60;
  }
  nav.top ul .has-dropdown:hover .dropdown-menu,
  nav.top ul .has-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  nav.top ul .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
  }
  nav.top ul .dropdown-menu li { display: block; margin: 0; }
  nav.top ul .dropdown-menu a {
    display: block;
    padding: 10px 22px;
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
  }
  nav.top ul .dropdown-menu a:hover {
    background: var(--sand);
    color: var(--ember);
  }
  nav.top ul .dropdown-menu a small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    font-weight: 400;
  }

  /* ========== HERO ========== */
  .hero {
    padding: 120px 60px 100px;
    position: relative;
    overflow: hidden;
    background: var(--cream);
  }
  .hero::before {
    content: '';
    position: absolute;
    top: 30%;
    right: -260px;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 80, 42, 0.08) 0%, transparent 70%);
  }
  .hero-inner {
    max-width: 1120px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .hero .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--terracotta);
  }
  .hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: clamp(44px, 7.5vw, 104px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 24px 0 32px;
    max-width: 16ch;
  }
  .hero h1 em {
    color: var(--terracotta);
    font-style: italic;
    font-weight: 400;
  }
  .hero .sub {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.45;
    color: var(--ink);
    max-width: 58ch;
    margin-bottom: 44px;
  }
  .cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
  }
  .btn {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 18px 28px;
    border-radius: 999px;
    transition: transform .2s, background .2s, color .2s;
    border: 1px solid var(--ink);
  }
  .btn-primary {
    background: var(--ink);
    color: var(--cream);
  }
  .btn-primary:hover { background: var(--terracotta); border-color: var(--terracotta); }
  .btn-ghost { background: transparent; color: var(--ink); }
  .btn-ghost:hover { background: var(--ink); color: var(--cream); }

  .hero-meta {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    margin-top: 80px;
    padding-top: 32px;
    border-top: 1px solid var(--hairline);
  }
  .hero-meta .item { max-width: 300px; }
  .hero-meta .item p {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.5;
    margin-top: 8px;
  }

  /* ========== SECTION HEADER ========== */
  section.block {
    padding: 110px 60px;
    border-top: 1px solid var(--hairline);
  }
  section.block.alt { background: var(--cream); }
  section.block.dark {
    background: var(--ink);
    color: var(--cream);
    border-color: rgba(245, 239, 230, 0.10);
  }
  section.block.dark .label,
  section.block.dark .mono { color: rgba(245, 239, 230, 0.55); }

  .block-inner {
    max-width: 1120px;
    margin: 0 auto;
  }
  .block-head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 64px;
  }
  .block-head h2 {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    max-width: 18ch;
  }
  .block-head h2 em {
    color: var(--terracotta);
    font-style: italic;
    font-weight: 400;
  }
  .block-head .lead {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 52ch;
  }
  section.block.dark .block-head .lead { color: rgba(245, 239, 230, 0.75); }

  /* ========== PRODUCTES HEAD (used by AUDITORIA) ========== */
  .products-head {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 56px;
  }
  .products-head h2 {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    max-width: 18ch;
  }
  .products-head h2 em { color: var(--terracotta); font-style: italic; font-weight: 400; }
  .products-head .right .lead {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 46ch;
  }

  /* ========== DOS FRONTS (PILARS) ========== */
  .fronts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .front {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--terracotta);
    border-radius: 10px;
    padding: 40px 38px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .front.endins { border-top-color: var(--ink); }
  .front .step {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--terracotta);
  }
  .front.endins .step { color: var(--ink); }
  .front h3 {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: 34px;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  .front h3 em { color: var(--terracotta); font-style: italic; font-weight: 400; }
  .front .desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
  }
  .front ul.svc {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 4px;
  }
  .front ul.svc li {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink);
    padding-left: 20px;
    position: relative;
  }
  .front ul.svc li::before {
    content: '·';
    position: absolute;
    left: 2px;
    top: -2px;
    color: var(--terracotta);
    font-size: 22px;
    line-height: 1;
  }
  .front ul.svc li small {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 1px;
  }
  .front .front-foot {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--hairline);
  }
  .front .front-foot a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--terracotta);
    padding-bottom: 4px;
    transition: color .2s;
  }
  .front .front-foot a:hover { color: var(--terracotta); }
  .fronts-arrow {
    text-align: center;
    margin: 32px 0 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .fronts-arrow strong { color: var(--terracotta); font-weight: 600; }

  /* ========== SEGIMON CALLOUT ========== */
  .segimon-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .segimon-grid h2 {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
  }
  .segimon-grid h2 em { color: var(--terracotta); font-style: italic; font-weight: 400; }
  .segimon-grid .lead {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(245, 239, 230, 0.78);
    max-width: 50ch;
    margin-bottom: 28px;
  }
  .segimon-card {
    background: rgba(245, 239, 230, 0.04);
    border: 1px solid rgba(245, 239, 230, 0.10);
    border-radius: 12px;
    padding: 36px;
  }
  .segimon-card .sc-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 8px;
  }
  .segimon-card .sc-name {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: 30px;
    color: var(--cream);
    letter-spacing: -0.02em;
    margin-bottom: 18px;
  }
  .segimon-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .segimon-card ul li {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(245, 239, 230, 0.82);
    padding-left: 20px;
    position: relative;
  }
  .segimon-card ul li::before {
    content: '·';
    position: absolute;
    left: 2px;
    top: -3px;
    color: var(--terracotta);
    font-size: 22px;
    line-height: 1;
  }

  /* ========== RATIONALE / COM FUNCIONA ========== */
  .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
  }
  .why-item .num {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 64px;
    line-height: 1;
    color: var(--terracotta);
  }
  .why-item h4 {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.01em;
    margin: 18px 0 12px;
  }
  .why-item p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
  }

  /* ========== DARK OVERRIDES ========== */
  section.block.dark .why-item h4 { color: var(--cream); }
  section.block.dark .why-item p { color: rgba(245,239,230,0.7); }
  section.block.dark .faq-item h4 { color: var(--cream); }
  section.block.dark .faq-item p { color: rgba(245,239,230,0.7); }
  section.block.dark .faq-list { border-top-color: rgba(245,239,230,0.15); }
  section.block.dark .faq-item { border-bottom-color: rgba(245,239,230,0.15); }

  /* ========== FAQ ========== */
  .faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hairline);
  }
  .faq-item {
    padding: 40px 0;
    border-bottom: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 56px;
    align-items: start;
  }
  .faq-item h4 {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: 21px;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .faq-item p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
  }

  /* ========== CONTACT ========== */
  .contact-block {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .contact-block h2 {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
  }
  .contact-block h2 em { color: var(--terracotta); font-style: italic; font-weight: 400; }
  .contact-block p.lead {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: 19px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 48ch;
    margin-bottom: 28px;
  }
  .contact-card {
    background: var(--paper);
    border: 1px solid var(--hairline);
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .contact-card .row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .contact-card .row .label { font-size: 9px; }
  .contact-card .row .val {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .contact-card .row .val a {
    border-bottom: 1px solid var(--terracotta);
    padding-bottom: 2px;
    transition: color .2s;
  }
  .contact-card .row .val a:hover { color: var(--terracotta); }

  .contact-form { display: flex; flex-direction: column; gap: 18px; max-width: 480px; }
  .contact-form .row { display: flex; flex-direction: column; gap: 6px; }
  .contact-form label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .contact-form input,
  .contact-form textarea {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--hairline);
    padding: 12px 14px;
    border-radius: 0;
    outline: none;
    width: 100%;
    transition: border-color 0.15s ease;
  }
  .contact-form input:focus,
  .contact-form textarea:focus { border-color: var(--terracotta); }
  .contact-form textarea { resize: vertical; min-height: 120px; }
  .contact-form button {
    align-self: flex-start;
    cursor: pointer;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--cream);
    padding: 14px 28px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    transition: background 0.15s ease;
    margin-top: 4px;
  }
  .contact-form button:hover { background: var(--terracotta); border-color: var(--terracotta); }
  .contact-form .form-alt {
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.5;
  }
  .contact-form .form-alt a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--hairline); }
  .contact-form .form-alt a:hover { color: var(--terracotta); }
  .hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

  /* ========== FOOTER ========== */
  footer.bottom {
    padding: 48px 60px;
    background: var(--ink);
    color: rgba(245, 239, 230, 0.7);
    border-top: 1px solid rgba(245, 239, 230, 0.10);
  }
  footer.bottom .inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  footer.bottom .brand {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: 20px;
    color: var(--cream);
  }
  footer.bottom .brand .accent { color: var(--terracotta); font-style: italic; }
  footer.bottom .legal {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 239, 230, 0.45);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }
  footer.bottom .legal a { color: rgba(245, 239, 230, 0.7); }
  footer.bottom .legal a:hover { color: var(--terracotta); }
  footer.bottom .legal .sep { color: rgba(245, 239, 230, 0.25); }

  /* ========== AUDITORIA BLOCK ========== */
  #auditoria .products-head h2 { margin-top: 14px; }

  .auditoria-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2px;
    background: rgba(245,239,230,0.08);
    border: 1px solid rgba(245,239,230,0.08);
  }
  .auditoria-col {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .auditoria-col.includes { background: rgba(245,239,230,0.03); }
  .auditoria-col.derives { background: rgba(245,239,230,0.025); }

  .auditoria-sublabel {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245,239,230,0.5);
  }

  .auditoria-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .auditoria-list li {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(245,239,230,0.85);
    padding-left: 18px;
    position: relative;
  }
  .auditoria-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: var(--terracotta);
    font-size: 20px;
    line-height: 1;
    top: -1px;
  }

  .auditoria-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .auditoria-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: rgba(245,239,230,0.85);
    background: rgba(245,239,230,0.07);
    padding: 6px 12px;
    border-radius: 999px;
    transition: background .2s, color .2s;
  }
  a.auditoria-pill:hover {
    background: rgba(184,80,42,0.25);
    color: var(--cream);
  }
  .auditoria-pill.muted {
    color: rgba(245,239,230,0.55);
    background: rgba(245,239,230,0.04);
  }

  .auditoria-foot {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(245,239,230,0.1);
  }
  .auditoria-foot a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cream);
    border-bottom: 1px solid var(--terracotta);
    padding-bottom: 4px;
    transition: color .2s;
  }
  .auditoria-foot a:hover { color: var(--terracotta); }

  /* ========== RESPONSIVE ========== */
  @media (max-width: 1000px) {
    .fronts { grid-template-columns: 1fr; }
    .segimon-grid { grid-template-columns: 1fr; gap: 40px; }
  }

  @media (max-width: 720px) {
    nav.top .inner { padding: 14px 24px; }
    .nav-toggle { display: flex; }

    /* Drawer vertical */
    nav.top ul.nav-menu {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--hairline);
      padding: 8px 24px 24px;
      max-height: calc(100vh - 64px);
      overflow-y: auto;
      box-shadow: 0 16px 32px rgba(26, 24, 22, 0.08);
      display: none;
    }
    nav.top.is-open ul.nav-menu { display: flex; }
    nav.top ul.nav-menu > li {
      padding: 4px 0;
      border-bottom: 1px solid var(--hairline);
    }
    nav.top ul.nav-menu > li:last-child { border-bottom: 0; padding-top: 16px; }
    nav.top ul.nav-menu > li > a {
      display: block;
      padding: 14px 0;
      font-size: 13px;
    }

    /* Dropdowns aplanats */
    nav.top ul.nav-menu .dropdown-trigger {
      display: block;
      padding: 14px 0 4px;
      font-size: 9px;
      color: var(--muted);
      cursor: default;
    }
    nav.top ul.nav-menu .dropdown-trigger .caret { display: none; }
    nav.top ul.nav-menu .dropdown-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      background: transparent;
      border: 0;
      box-shadow: none;
      padding: 0 0 10px 0;
      min-width: 0;
    }
    nav.top ul.nav-menu .dropdown-menu::before { display: none; }
    nav.top ul.nav-menu .dropdown-menu a {
      padding: 10px 0;
      font-size: 15px;
    }
    nav.top ul.nav-menu .dropdown-menu a:hover {
      background: transparent;
      color: var(--terracotta);
    }
    nav.top ul.nav-menu .cta-mini {
      display: inline-block;
      align-self: flex-start;
    }

    .hero { padding: 80px 24px 60px; }
    section.block { padding: 72px 24px; }
    footer.bottom { padding: 32px 24px; }

    .block-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
    .products-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
    .why-grid { grid-template-columns: 1fr; gap: 40px; }
    .faq-item { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
    .contact-block { grid-template-columns: 1fr; gap: 40px; }
    .hero-meta { flex-direction: column; gap: 20px; }
    .auditoria-grid { grid-template-columns: 1fr; }
    .auditoria-col { padding: 32px 24px; }
    .front { padding: 32px 26px; }
  }


/* ========== BREADCRUMB ========== */
.crumbs { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; color:var(--muted); padding:22px 60px 0; max-width:1120px; margin:0 auto; }
.crumbs a { color:var(--muted); border-bottom:1px solid transparent; }
.crumbs a:hover { color:var(--terracotta); border-bottom-color:var(--terracotta); }
.crumbs .sep { margin:0 8px; color:var(--hairline); }

/* ========== PAGE HERO (interiors) ========== */
.page-hero { padding:56px 60px 72px; background:var(--cream); border-top:1px solid var(--hairline); }
.page-hero-inner { max-width:1120px; margin:0 auto; }
.page-hero .eyebrow { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--terracotta); margin-bottom:18px; }
.page-hero h1 { font-family:'Fraunces',serif; font-weight:300; font-size:clamp(34px,5.5vw,64px); line-height:1.05; letter-spacing:-0.03em; max-width:20ch; }
.page-hero .lead { font-family:'Fraunces',serif; font-weight:300; font-size:19px; line-height:1.55; color:var(--muted); max-width:62ch; margin-top:22px; }

/* ========== CARDS GRID (3 columnes) ========== */
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card-box { background:var(--paper); border:1px solid var(--hairline); border-top:3px solid var(--terracotta); border-radius:10px; padding:32px 28px; display:flex; flex-direction:column; gap:12px; }
.card-box h3 { font-family:'Fraunces',serif; font-weight:400; font-size:23px; letter-spacing:-0.01em; }
.card-box p { font-size:14.5px; line-height:1.6; color:var(--muted); flex:1; }
.card-box a.card-link { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--terracotta); padding-bottom:3px; align-self:flex-start; }
.card-box a.card-link:hover { color:var(--terracotta); }

/* ========== BULLET LIST genèrica ========== */
ul.bullets { list-style:none; display:flex; flex-direction:column; gap:14px; }
ul.bullets li { font-size:15px; line-height:1.6; color:var(--ink); padding-left:22px; position:relative; }
ul.bullets li::before { content:'·'; position:absolute; left:2px; top:-4px; color:var(--terracotta); font-size:24px; line-height:1; }
section.block.dark ul.bullets li { color:rgba(245,239,230,0.88); }

/* ========== SECTOR GRID (13 sectors) ========== */
.sector-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
a.sector-card { display:block; background:var(--paper); border:1px solid var(--hairline); border-radius:8px; padding:20px 18px; font-family:'Fraunces',serif; font-size:16px; letter-spacing:-0.01em; color:var(--ink); transition:border-color .2s, background .2s; }
a.sector-card:hover { border-color:var(--terracotta); background:var(--cream); }
section.block.dark a.sector-card { background:rgba(245,239,230,0.04); border-color:rgba(245,239,230,0.12); color:var(--cream); }
section.block.dark a.sector-card:hover { border-color:var(--terracotta); background:rgba(184,80,42,0.12); }

/* ========== SECTOR COLLS (pàgines /sectors/{id}/) ========== */
.colls-list { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--hairline); }
.coll-item { padding:28px 0; border-bottom:1px solid var(--hairline); display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.coll-item .t { font-family:'Fraunces',serif; font-weight:400; font-size:18px; line-height:1.35; }
.coll-item .s { font-size:14.5px; line-height:1.6; color:var(--muted); }
.coll-item .s::before { content:'→ '; color:var(--terracotta); }

/* ========== DIAGNÒSTIC (embut) ========== */
.diag-progress { display:flex; gap:10px; align-items:center; margin-bottom:36px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.diag-progress .dot { width:8px; height:8px; border-radius:50%; background:var(--hairline); }
.diag-progress .dot.on { background:var(--terracotta); }
.diag-panel[hidden] { display:none; }
.diag-sectors { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.diag-sector-opt { position:relative; }
.diag-sector-opt input { position:absolute; opacity:0; width:1px; height:1px; }
.diag-sector-opt label { display:block; cursor:pointer; background:var(--paper); border:2px solid var(--hairline); border-radius:8px; padding:18px 16px; font-family:'Fraunces',serif; font-size:15px; line-height:1.3; color:var(--ink); transition:border-color .15s, background .15s; }
.diag-sector-opt input:checked + label { border-color:var(--terracotta); background:var(--cream); }
.diag-sector-opt input:focus-visible + label { outline:2px solid var(--terracotta); outline-offset:2px; }
.diag-checks { display:flex; flex-direction:column; gap:10px; }
.diag-check { position:relative; }
.diag-check input { position:absolute; left:18px; top:22px; width:18px; height:18px; accent-color:var(--terracotta); }
.diag-check label { display:block; cursor:pointer; background:var(--paper); border:1px solid var(--hairline); border-radius:8px; padding:16px 20px 16px 52px; transition:border-color .15s; }
.diag-check input:checked + label { border-color:var(--terracotta); }
.diag-check label .t { font-size:15px; color:var(--ink); }
.diag-check-other { margin-top:6px; }
.diag-check-other textarea { width:100%; font-family:'Manrope',sans-serif; font-size:14.5px; line-height:1.5; padding:14px 16px; border:1px solid var(--hairline); border-radius:8px; background:var(--paper); resize:vertical; min-height:80px; }
.diag-summary-list { display:flex; flex-direction:column; gap:12px; margin:24px 0 32px; }
.diag-summary-list li { font-size:15.5px; line-height:1.55; padding-left:22px; position:relative; }
.diag-summary-list li::before { content:'✓'; position:absolute; left:0; color:var(--terracotta); font-weight:700; }
.diag-nav { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.diag-nav button.btn-ghost { cursor:pointer; font-family:'JetBrains Mono',monospace; }
.diag-empty-msg { font-size:14px; color:var(--muted); font-style:italic; }

/* ========== BÀNER DE COOKIES vs. BOTÓ FLOTANT DE LA GLADIS ========== */
/* chatbot.js crea .onf-cb-btn (position:fixed, bottom:22px, right:22px) amb
   el seu propi <style> injectat DESPRÉS d'aquest full (es carrega amb defer,
   per tant el seu <style> arriba més tard i guanyaria l'empat d'especificitat
   sense !important). Mentre el bàner de galetes és visible (nav.js hi afegeix
   la classe has-cookie-banner al <body>), amaguem el botó perquè mai tapi
   Refusar/Acceptar, ni a 1280px ni a 375px. */
.has-cookie-banner .onf-cb-btn { display: none !important; }

/* ========== THANK YOU ========== */
.thanks-box { max-width:640px; margin:0 auto; text-align:center; padding:120px 24px; }
.thanks-box h1 { font-family:'Fraunces',serif; font-weight:300; font-size:clamp(32px,5vw,52px); margin-bottom:18px; }
.thanks-box p { font-size:17px; color:var(--muted); margin-bottom:32px; }

/* ========== RESPONSIVE nous components ========== */
@media (max-width:1000px) {
  .cards-grid { grid-template-columns:1fr; }
  .sector-grid { grid-template-columns:repeat(2,1fr); }
  .diag-sectors { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px) {
  .crumbs { padding:16px 24px 0; }
  .page-hero { padding:40px 24px 48px; }
  .coll-item { grid-template-columns:1fr; gap:8px; padding:20px 0; }
  .sector-grid { grid-template-columns:1fr; }
  .diag-sectors { grid-template-columns:1fr; }
}

/* ========== TEXTOS LEGALS (01-10-2026) ========== */
.legal-text h2 { font-family:'Fraunces',serif; font-weight:400; font-size:24px; margin:36px 0 12px; }
.legal-text h2:first-child { margin-top:0; }
.legal-text p, .legal-text li { line-height:1.7; margin-bottom:12px; }
.legal-text a { text-decoration:underline; }

/* ========== NOTA RGPD SOTA ELS FORMULARIS (01-10-2026) ========== */
.rgpd-nota { font-size:12.5px; line-height:1.55; color:var(--muted); margin-top:14px; }
.rgpd-nota a { color:var(--muted); text-decoration:underline; }

/* ========== DIAGNÒSTIC DE 5 PANTALLES (30-09-2026) ========== */
.diag-comptador { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin:0 0 20px; }
.diag-q { display:block; font-family:'Fraunces',serif; font-weight:300; font-size:clamp(28px,4vw,44px); line-height:1.15; margin:0 0 24px; }
.diag-form input:not([type=hidden]) { width:100%; max-width:640px; box-sizing:border-box; font-family:'Manrope',sans-serif; font-size:18px; padding:16px 18px; border:1px solid var(--hairline); border-radius:8px; background:var(--paper); }
.diag-form input:focus { outline:2px solid var(--terracotta); outline-offset:2px; }
.diag-hint { font-size:14px; color:var(--muted); margin:10px 0 0; }
.diag-err { font-size:14px; color:var(--terracotta); margin:10px 0 0; }
.diag-err[hidden], .diag-form[hidden] { display:none; }

/* ========== TOTA L'AMPLADA (Ferran, 30-09-2026) ==========
   El contingut ocupa l'amplada del menú (1240 px) i els textos no es tallen a la
   meitat esquerra: fora els max-width en caràcters dels títols i paràgrafs. */
.hero-inner, .block-inner, .page-hero-inner, footer.bottom .inner { max-width:1240px; }
/* el menú i les molles porten 60 px de marge a dins: 1240 + 120 perquè el logo quedi alineat amb el text */
nav.top .inner, .crumbs { max-width:1360px; }
.hero h1, .hero .sub, .page-hero h1, .page-hero .lead,
.block-head h2, .block-head .lead, .feat p, .taula-etapa .taula-intro { max-width:none; }

/* ========== TAULES D'AGENTS PER ETAPA (30-09-2026) ========== */
.taula-etapa { margin:0 0 48px; }
.taula-etapa h3 { font-family:'Fraunces',serif; font-weight:400; font-size:26px; margin:0 0 6px; }
.taula-etapa .taula-intro { color:var(--muted); margin:0 0 16px; }
.agents-table { width:100%; border-collapse:collapse; font-size:15px; }
.agents-table th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:500; padding:10px 12px; border-bottom:1px solid var(--hairline); }
.agents-table td { padding:14px 12px; border-bottom:1px solid var(--hairline); vertical-align:top; line-height:1.55; }
.agents-table td:first-child { font-weight:600; width:24%; }
.agents-table td:nth-child(3) { white-space:nowrap; color:var(--terracotta); font-weight:600; width:22%; }
@media (max-width: 760px) {
  .agents-table thead { display:none; }
  .agents-table tr { display:block; padding:14px 0; border-bottom:1px solid var(--hairline); }
  .agents-table td { display:block; border:0; padding:3px 0; width:auto !important; }
  .agents-table td:nth-child(3) { white-space:normal; }
}

/* ========== TÍTOLS DE SECCIÓ A TOTA L'AMPLADA (Ferran, 30-09-2026) ========== */
.block-head { grid-template-columns:1fr; margin-bottom:40px; }
.block-head h2 { max-width:none; }

/* ========== TARGETES DE CONTINGUT (patró BigSEO, 29-09-2026) ========== */
.feat-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:40px 56px; margin:8px 0 8px; }
.feat h3 { font-family:'Fraunces',serif; font-weight:400; font-size:24px; line-height:1.25; margin:0 0 12px; }
.feat p { line-height:1.7; margin:0 0 14px; max-width:60ch; }
.feat ul { margin:0 0 14px; padding-left:18px; line-height:1.65; }
.feat ul li { margin-bottom:6px; }
.feat-grid + p, .feat-grid + .cta-row { margin-top:40px; }
@media (max-width: 760px) { .feat-grid { grid-template-columns:1fr; gap:32px; } }

/* ========== NIVELLS DE DELEGACIO (29-09-2026) ========== */
.why-grid.four { grid-template-columns:repeat(4, 1fr); gap:40px; }
.why-grid + p, .why-grid + .cta-row { margin-top:48px; }
@media (max-width: 1000px) { .why-grid.four { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px) { .why-grid.four { grid-template-columns:1fr; } }