:root {
      --bg: #EDEFE9;
      --bg-soft: #E4E8DF;
      --ink: #14302A;
      --text: #1B1F1D;
      --muted: #4C5A55;
      --brass: #A8842F;
      --brass-ink: #6F5614;
      --line: #C9D0C5;
      --panel: #14302A;
      --panel-text: #EDEFE9;
      --field: #F6F7F3;
      --serif: "Young Serif", Georgia, "Times New Roman", serif;
      --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
          --bg: #0E1B18;
          --bg-soft: #12231F;
          --ink: #E4E8DF;
          --text: #E4E8DF;
          --muted: #A3B0A9;
          --brass: #C9A24A;
          --brass-ink: #D9B865;
          --line: #25382F;
          --panel: #1A3A32;
          --panel-text: #EDEFE9;
          --field: #0A1613;
      }
  }

  :root[data-theme="dark"] {
      --bg: #0E1B18;
      --bg-soft: #12231F;
      --ink: #E4E8DF;
      --text: #E4E8DF;
      --muted: #A3B0A9;
      --brass: #C9A24A;
      --brass-ink: #D9B865;
      --line: #25382F;
      --panel: #1A3A32;
      --panel-text: #EDEFE9;
      --field: #0A1613;
  }

  html {
      scroll-padding-top: calc(84px + env(safe-area-inset-top, 0px));
      scroll-behavior: smooth;
  }

  *,
  *::before,
  *::after {
      box-sizing: border-box;
  }

  body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.6;
  }

  a {
      color: inherit;
  }

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

  .wrap {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 24px;
  }

  /* Barra superior fija */
  .topbar {
      position: sticky;
      top: env(safe-area-inset-top, 0px);
      z-index: 50;
      background: var(--bg);
      border-bottom: 1px solid var(--line);
      transition: box-shadow .25s ease;
  }

  .topbar.scrolled {
      box-shadow: 0 6px 20px -12px rgba(20, 48, 42, .45);
  }

  .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      gap: 16px;
  }

  .mark {
      font-family: var(--serif);
      font-size: 20px;
      color: var(--ink);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .mark svg {
      width: 30px;
      height: 30px;
      color: var(--brass-ink);
  }

  .top nav {
      display: flex;
      align-items: center;
      gap: 28px;
      font-size: 15px;
      font-weight: 500;
  }

  .top nav a {
      text-decoration: none;
      color: var(--muted);
  }

  .top nav a:hover {
      color: var(--ink);
  }

  .top nav a.cta {
      color: var(--bg);
      background: var(--ink);
      padding: 10px 20px;
      border-radius: 2px;
      font-weight: 600;
  }

  .top nav a.cta:hover {
      background: var(--brass-ink);
      color: #fff;
  }

  /* Portada */
  .hero-bg {
      position: relative;
      overflow: hidden;
      background-image:
          repeating-linear-gradient(90deg, transparent 0, transparent 119px, var(--line) 119px, var(--line) 120px);
      background-position: center top;
  }

  .hero-bg::after {
      /* velo para que la trama sea apenas perceptible */
      content: "";
      position: absolute;
      inset: 0;
      background: var(--bg);
      opacity: .78;
      pointer-events: none;
  }

  .hero {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.55fr 1fr;
      gap: 56px;
      padding: 72px 0 80px;
      align-items: stretch;
  }

  .hero h1 {
      font-family: var(--serif);
      font-weight: 400;
      color: var(--ink);
      font-size: clamp(40px, 7vw, 90px);
      line-height: .94;
      letter-spacing: -.02em;
      margin: 0 0 28px;
  }

  .hero h1 .y {
      display: block;
      color: var(--brass);
      font-size: .55em;
      line-height: 1.1;
      margin: .08em 0;
  }

  .rule {
      width: 72px;
      height: 3px;
      background: var(--brass);
      margin: 0 0 28px;
      border: 0;
  }

  .hero p.lead {
      font-size: 20px;
      max-width: 34em;
      margin: 0 0 36px;
      color: var(--muted);
  }

  .btns {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
  }

  .btn {
      display: inline-block;
      padding: 15px 28px;
      font-weight: 600;
      font-size: 16px;
      text-decoration: none;
      border-radius: 2px;
      border: 2px solid var(--ink);
      cursor: pointer;
      font-family: var(--sans);
      transition: background .2s, color .2s, border-color .2s;
  }

  .btn.primary {
      background: var(--ink);
      color: var(--bg);
  }

  .btn.primary:hover {
      background: var(--brass-ink);
      border-color: var(--brass-ink);
      color: #fff;
  }

  .btn.ghost {
      color: var(--ink);
      background: transparent;
  }

  .btn.ghost:hover {
      background: var(--ink);
      color: var(--bg);
  }

  .panel {
      position: relative;
      overflow: hidden;
      background: var(--panel);
      color: var(--panel-text);
      padding: 40px 36px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 40px;
      min-height: 380px;
      border-top: 6px solid var(--brass);
  }

  /* Balanza grande y recortada como marca de agua */
  .panel .wm {
      position: absolute;
      right: -70px;
      top: -30px;
      width: 380px;
      height: 380px;
      color: var(--brass);
      opacity: .22;
      pointer-events: none;
  }

  .panel>div {
      position: relative;
  }

  .panel blockquote {
      margin: 0;
      font-family: var(--serif);
      font-size: 26px;
      line-height: 1.3;
  }

  .panel small {
      display: block;
      margin-top: 18px;
      font-family: var(--sans);
      font-size: 15px;
      opacity: .85;
  }

  /* Franja de confianza (sin cifras inventadas) */
  .trust {
      background: var(--bg-soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
  }

  .trust ul {
      list-style: none;
      margin: 0;
      padding: 26px 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
  }

  .trust li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 15px;
      line-height: 1.4;
      color: var(--muted);
  }

  .trust svg {
      flex: none;
      width: 22px;
      height: 22px;
      color: var(--brass-ink);
      margin-top: 1px;
  }

  .trust strong {
      display: block;
      color: var(--ink);
      font-weight: 600;
  }

  /* Secciones */
  section {
      padding: 80px 0;
      border-top: 1px solid var(--line);
  }

  .trust+section {
      border-top: 0;
  }

  h2 {
      font-family: var(--serif);
      font-weight: 400;
      color: var(--ink);
      font-size: clamp(30px, 4.5vw, 46px);
      line-height: 1.1;
      margin: 0 0 14px;
      letter-spacing: -.01em;
  }

  .sub {
      color: var(--muted);
      max-width: 36em;
      margin: 0 0 44px;
  }

  /* Áreas desplegables */
  .areas {
      margin: 0;
  }

  .area {
      border-bottom: 1px solid var(--line);
  }

  .area:first-child {
      border-top: 1px solid var(--line);
  }

  .area summary {
      list-style: none;
      cursor: pointer;
      display: grid;
      grid-template-columns: 1fr 1.4fr 28px;
      gap: 24px;
      padding: 26px 0;
      align-items: baseline;
      position: relative;
  }

  .area summary::-webkit-details-marker {
      display: none;
  }

  .area summary::after {
      /* línea de latón al pasar el cursor */
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 2px;
      width: 0;
      background: var(--brass);
      transition: width .35s ease;
  }

  .area summary:hover::after,
  .area[open] summary::after {
      width: 100%;
  }

  .area h3 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 26px;
      margin: 0;
      color: var(--ink);
      transition: transform .25s ease;
  }

  .area summary:hover h3 {
      transform: translateX(6px);
  }

  .area summary p {
      margin: 0;
      color: var(--muted);
      max-width: 34em;
  }

  .area .plus {
      width: 22px;
      height: 22px;
      color: var(--brass-ink);
      align-self: center;
      justify-self: end;
      transition: transform .25s ease;
  }

  .area[open] .plus {
      transform: rotate(45deg);
  }

  .area .more {
      padding: 20px 0 30px;
      display: grid;
      grid-template-columns: 1fr 1.4fr 28px;
      gap: 24px;
  }

  .area .more>div {
      grid-column: 2;
  }

  .area .more h4 {
      margin: 0 0 8px;
      font-size: 15px;
      color: var(--ink);
      font-weight: 600;
  }

  .area .more ul {
      margin: 0 0 18px;
      padding-left: 20px;
      color: var(--muted);
  }

  .area .more li {
      margin-bottom: 4px;
  }

  .area .more a {
      font-weight: 600;
      color: var(--brass-ink);
      text-underline-offset: 4px;
  }

  .area .more a:hover {
      color: var(--ink);
  }

  .area .more .links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 32px;
  }

  /* Proceso */
  .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      counter-reset: paso;
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .steps li {
      counter-increment: paso;
      padding-top: 18px;
      border-top: 3px solid var(--brass);
  }

  .steps li::before {
      content: counter(paso);
      font-family: var(--serif);
      font-size: 44px;
      color: var(--brass-ink);
      line-height: 1;
      display: block;
      margin-bottom: 10px;
  }

  .steps h3 {
      margin: 0 0 6px;
      font-size: 19px;
      color: var(--ink);
  }

  .steps p {
      margin: 0;
      color: var(--muted);
  }

  #nosotros {
      background: var(--bg-soft);
  }

  .about {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 56px;
      align-items: center;
  }

  .portrait {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4 / 5;
      background: var(--panel);
      border-top: 6px solid var(--brass);
      display: grid;
      place-items: center;
      color: var(--brass);
  }

  .portrait svg {
      width: 62%;
      height: auto;
      opacity: .55;
  }

  .portrait img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(1) contrast(1.05);
  }

  .about p {
      color: var(--muted);
      max-width: 34em;
  }

  .values {
      list-style: none;
      margin: 28px 0 0;
      padding: 0;
      display: grid;
      gap: 0;
  }

  .values li {
      padding: 16px 0;
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 16px;
  }

  .values li:last-child {
      border-bottom: 1px solid var(--line);
  }

  .values strong {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 20px;
      color: var(--ink);
  }

  .values span {
      color: var(--muted);
  }

  .faq {
      max-width: 780px;
  }

  .faq details {
      border-bottom: 1px solid var(--line);
  }

  .faq details:first-of-type {
      border-top: 1px solid var(--line);
  }

  .faq summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
      padding: 20px 0;
      font-weight: 600;
      color: var(--ink);
  }

  .faq summary::-webkit-details-marker {
      display: none;
  }

  .faq summary svg {
      flex: none;
      width: 20px;
      height: 20px;
      color: var(--brass-ink);
      transition: transform .25s ease;
  }

  .faq details[open] summary svg {
      transform: rotate(45deg);
  }

  .faq details p {
      margin: 0 0 22px;
      color: var(--muted);
      max-width: 40em;
  }

  #contacto {
      background: var(--panel);
      color: var(--panel-text);
      border-top: 6px solid var(--brass);
  }

  #contacto h2 {
      color: var(--panel-text);
  }

  #contacto .sub {
      color: var(--panel-text);
      opacity: .85;
      margin-bottom: 36px;
  }

  .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 56px;
      align-items: start;
  }

  .contact {
      margin: 0 0 32px;
      display: grid;
      gap: 22px;
  }

  .contact dt {
      font-size: 14px;
      opacity: .75;
      margin-bottom: 4px;
  }

  .contact dd {
      margin: 0;
      font-family: var(--serif);
      font-size: 22px;
      word-break: break-word;
  }

  .contact a {
      text-decoration: none;
      border-bottom: 1px solid var(--brass);
  }

  .contact a:hover {
      border-color: var(--panel-text);
  }

  .privacy {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 15px;
      opacity: .9;
      max-width: 28em;
  }

  .privacy svg {
      flex: none;
      width: 22px;
      height: 22px;
      color: var(--brass);
      margin-top: 2px;
  }

  #contacto .btn.primary {
      background: var(--brass);
      border-color: var(--brass);
      color: #14302A;
  }

  #contacto .btn.primary:hover {
      background: var(--panel-text);
      border-color: var(--panel-text);
      color: #14302A;
  }

  .form {
      display: grid;
      gap: 18px;
      background: rgba(255, 255, 255, .05);
      padding: 32px;
      border-top: 3px solid var(--brass);
  }

  .form label {
      display: grid;
      gap: 6px;
      font-size: 14px;
      font-weight: 500;
  }

  .form input,
  .form select {
      width: 100%;
      font: inherit;
      font-size: 16px;
      color: var(--text);
      background: #F6F7F3;
      border: 1px solid transparent;
      border-radius: 2px;
      padding: 13px 14px;
  }

  .form input::placeholder {
      color: #6a756f;
  }

  .form small {
      opacity: .8;
      font-size: 13px;
  }

  footer {
      padding: 36px 0 44px;
      color: var(--muted);
      font-size: 14px;
  }

  footer .wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px 32px;
  }

  footer a {
      text-underline-offset: 3px;
  }

  footer details {
      width: 100%;
      border-top: 1px solid var(--line);
      padding-top: 16px;
      margin-top: 8px;
  }

  footer summary {
      cursor: pointer;
      font-weight: 600;
      color: var(--ink);
  }

  footer details p {
      max-width: 52em;
      margin: 12px 0 0;
  }

  .wa {
      position: fixed;
      right: 20px;
      bottom: calc(20px + env(safe-area-inset-bottom, 0px));
      z-index: 60;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 20px 13px 16px;
      background: var(--ink);
      color: var(--bg);
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      border-radius: 999px;
      border: 2px solid var(--brass);
      box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
  }

  .wa:hover {
      background: var(--brass-ink);
      border-color: var(--brass-ink);
      color: #fff;
  }

  .wa svg {
      width: 22px;
      height: 22px;
  }

  @media (prefers-reduced-motion: no-preference) {
      .panel {
          animation: sube .9s ease-out both;
      }

      @keyframes sube {
          from {
              opacity: 0;
              transform: translateY(24px);
          }

          to {
              opacity: 1;
              transform: none;
          }
      }
  }

  @media (prefers-reduced-motion: reduce) {
      html {
          scroll-behavior: auto;
      }

      * {
          transition: none !important;
      }
  }

  @media (max-width: 860px) {
      .hero {
          grid-template-columns: 1fr;
          gap: 40px;
          padding: 48px 0 56px;
      }

      .panel {
          min-height: 300px;
      }

      .trust ul {
          grid-template-columns: 1fr 1fr;
      }

      section {
          padding: 60px 0;
      }

      .area summary {
          grid-template-columns: 1fr 28px;
          gap: 6px 16px;
      }

      .area summary p {
          grid-column: 1;
          grid-row: 2;
      }

      .area .plus {
          grid-column: 2;
          grid-row: 1;
      }

      .area .more {
          grid-template-columns: 1fr;
      }

      .area .more>div {
          grid-column: 1;
      }

      .steps,
      .contact-grid,
      .about {
          grid-template-columns: 1fr;
          gap: 32px;
      }

      .portrait {
          aspect-ratio: 16 / 10;
      }

      .top nav a:not(.cta) {
          display: none;
      }

      .values li {
          grid-template-columns: 1fr;
          gap: 2px;
      }

      .wa span {
          display: none;
      }

      .wa {
          padding: 14px;
      }
  }

  @media (max-width: 480px) {
      .trust ul {
          grid-template-columns: 1fr;
      }

      .mark {
          font-size: 18px;
      }

      .form {
          padding: 24px 20px;
      }
  }

  .theme-toggle {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 2px;
      cursor: pointer;
      transition: border-color .2s, color .2s;
  }

  .theme-toggle:hover {
      border-color: var(--brass);
      color: var(--brass-ink);
  }

  .theme-toggle svg {
      width: 20px;
      height: 20px;
  }

  .theme-toggle .sun {
      display: none;
  }

  :root[data-theme="dark"] .theme-toggle .sun {
      display: block;
  }

  :root[data-theme="dark"] .theme-toggle .moon {
      display: none;
  }




  /* Páginas de área */
  .page-head {
      padding: 56px 0 64px;
      border-bottom: 1px solid var(--line);
  }

  .page-head h1 {
      font-family: var(--serif);
      font-weight: 400;
      color: var(--ink);
      font-size: clamp(32px, 5vw, 56px);
      line-height: 1.05;
      letter-spacing: -.015em;
      margin: 0 0 24px;
      max-width: 18em;
  }

  .page-head .lead {
      font-size: 20px;
      max-width: 34em;
      margin: 0 0 32px;
      color: var(--muted);
  }

  .crumbs {
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 28px;
  }

  .crumbs a {
      text-underline-offset: 3px;
  }

  .cases {
      margin: 0;
  }

  .cases>div {
      padding: 24px 0;
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 24px;
  }

  .cases>div:last-child {
      border-bottom: 1px solid var(--line);
  }

  .cases dt {
      font-family: var(--serif);
      font-size: 22px;
      color: var(--ink);
  }

  .cases dd {
      margin: 0;
      color: var(--muted);
      max-width: 36em;
  }

  .note {
      margin: 40px 0 0;
      color: var(--muted);
      max-width: 40em;
  }

  .related {
      list-style: none;
      margin: 28px 0 0;
      padding: 0;
      display: grid;
      gap: 0;
      max-width: 780px;
  }

  .related li {
      padding: 16px 0;
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 16px;
  }

  .related li:last-child {
      border-bottom: 1px solid var(--line);
  }

  .related a {
      font-family: var(--serif);
      font-size: 20px;
      color: var(--ink);
      text-underline-offset: 4px;
  }

  .related span {
      color: var(--muted);
  }

  @media (max-width: 860px) {

      .cases>div,
      .related li {
          grid-template-columns: 1fr;
          gap: 6px;
      }
  }