@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2"); }
  @font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2"); }
  @font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2"); }
  @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
  @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/public-sans-latin-500-normal.woff2") format("woff2"); }
  @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/public-sans-latin-600-normal.woff2") format("woff2"); }

  :root {
    --navy: #051931;
    --navy-2: #0b2447;
    --navy-3: #12315d;
    --brass: #c9a24d;
    --brass-hi: #d9b766;
    --brass-ink: #866720;
    --stone: #eef0f3;
    --paper: #f7f8fa;
    --white: #ffffff;
    --ink: #101b2d;
    --ink-soft: #4c5668;
    --on-navy: #eef1f6;
    --on-navy-soft: rgba(238, 241, 246, 0.72);
    --rule: rgba(5, 25, 49, 0.13);
    --rule-navy: rgba(238, 241, 246, 0.15);
    --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
    --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wrap: 1180px;
    --gutter: clamp(20px, 4vw, 40px);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 76px; }
  body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, p, figure, blockquote, dl, dd, ul { margin: 0; }
  ul { padding: 0; list-style: none; }
  :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
  .eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
  .eyebrow--ink { color: var(--brass-ink); }
  .h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.5vw, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--navy); }
  .h2 em { font-style: italic; color: var(--brass-ink); }
  .on-navy .h2 { color: var(--on-navy); }
  .on-navy .h2 em { color: var(--brass); }
  .head { max-width: 44em; }
  .head .h2 { margin-top: 16px; }
  .head p.sub { margin-top: 18px; color: var(--ink-soft); font-size: 1.05rem; }
  .on-navy .head p.sub { color: var(--on-navy-soft); }
  .head--center { margin: 0 auto; text-align: center; }

  .section { padding: 112px 0; }
  .on-navy { background: var(--navy); color: var(--on-navy); }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; font: 600 0.95rem/1 var(--sans); letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
  .btn svg { width: 18px; height: 18px; flex: none; }
  .btn--brass { background: var(--brass); color: var(--navy); }
  .btn--brass:hover { background: var(--brass-hi); transform: translateY(-1px); }
  .btn--line { border-color: rgba(238,241,246,.4); color: var(--on-navy); }
  .btn--line:hover { border-color: var(--brass); color: var(--brass); }
  .btn--navy { background: var(--navy); color: var(--on-navy); }
  .btn--navy:hover { background: var(--navy-3); }

  /* Header */
  .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; background: rgba(5, 25, 49, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-navy); }
  .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
  .brand { display: flex; align-items: center; gap: 12px; }
  .brand img { width: 36px; height: 36px; }
  .brand-name { font-family: var(--serif); font-size: 1.1rem; color: var(--on-navy); }
  .nav { display: flex; align-items: center; gap: 28px; }
  .nav a:not(.btn) { font-size: 0.9rem; font-weight: 500; color: var(--on-navy-soft); transition: color .2s; }
  .nav a:not(.btn):hover { color: var(--on-navy); }
  .nav .btn { min-height: 40px; padding: 0 18px; font-size: 0.85rem; }

  /* ---------- Hero (imagen completa) ---------- */
  .hero { position: relative; min-height: min(100vh, 860px); display: flex; align-items: center; background: var(--navy); color: var(--on-navy); overflow: hidden; padding: 120px 0 88px; }
  .hero-media { position: absolute; inset: 0 0 0 auto; width: 52%; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--brass); }
  .duo-panel { position: relative; overflow: hidden; background: var(--navy-2); }
  .duo-panel img { width: 100%; height: 100%; object-fit: cover; }
  .duo-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,25,49,.92) 0%, rgba(5,25,49,.25) 26%, rgba(5,25,49,0) 45%); pointer-events: none; }
  .hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--navy) 0%, rgba(5,25,49,.6) 8%, rgba(5,25,49,0) 22%); }
  .duo-name { position: absolute; z-index: 1; left: 22px; right: 18px; bottom: 26px; }
  .duo-name strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.12rem; line-height: 1.25; color: var(--on-navy); }
  .duo-name span { display: block; margin-top: 4px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
  .hero .wrap { position: relative; z-index: 1; width: 100%; }
  .hero-copy { max-width: 560px; }
  @media (min-width: 901px) and (max-width: 1240px) { .hero-copy { max-width: 46%; } }
  .tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid rgba(201,162,77,.55); border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); background: rgba(5,25,49,.5); }
  .hero h1 { margin-top: 26px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 4.4vw, 3.9rem); line-height: 1.07; letter-spacing: -0.02em; }
  .hero h1 em { font-style: italic; color: var(--brass); }
  .hero .lead { margin-top: 26px; max-width: 32em; font-size: 1.15rem; color: var(--on-navy-soft); }
  .hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }
  .trust { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 0.88rem; color: var(--on-navy-soft); }
  .trust li { display: inline-flex; align-items: center; gap: 8px; }
  .trust svg { width: 15px; height: 15px; color: var(--brass); }
  .trust .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ccf7a; box-shadow: 0 0 0 4px rgba(60,207,122,.18); }

  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero-copy > * { animation: rise .8s ease both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .hero-copy > :nth-child(5) { animation-delay: .32s; }
  @keyframes slowzoom { from { transform: scale(1.06); } to { transform: scale(1); } }
  .duo-panel img { animation: slowzoom 2.4s ease-out both; }
  @media (prefers-reduced-motion: reduce) { .hero-copy > *, .duo-panel img { animation: none; } html { scroll-behavior: auto; } }

  /* ---------- Situaciones ---------- */
  .situations { background: var(--paper); }
  .sit-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .sit { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 28px 26px; background: var(--white); border: 1px solid var(--rule); transition: border-color .2s, box-shadow .2s, transform .2s; }
  .sit:hover { border-color: rgba(201,162,77,.7); box-shadow: 0 14px 30px -18px rgba(5,25,49,.35); transform: translateY(-2px); }
  .sit svg { width: 28px; height: 28px; color: var(--brass-ink); }
  .sit h3 { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 1.22rem; line-height: 1.3; color: var(--navy); }
  .sit p { font-size: 0.93rem; color: var(--ink-soft); }
  .sit .go { margin-top: auto; padding-top: 8px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-ink); }
  .sit .go::after { content: " →"; }
  .sit--state { background: var(--navy); border-color: var(--navy); }
  .sit--state h3 { color: var(--on-navy); }
  .sit--state p { color: var(--on-navy-soft); }
  .sit--state svg, .sit--state .go { color: var(--brass); }

  /* ---------- Empatía ---------- */
  .feel .wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 104px); align-items: start; }
  .feel-list { display: grid; gap: 18px; }
  .feel-item { padding: 22px 26px; background: var(--stone); border-left: 3px solid var(--brass); }
  .feel-item strong { color: var(--navy); }
  .feel-item p { color: var(--ink-soft); }
  .feel-close { margin-top: 26px; font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--navy); }
  .feel-close em { color: var(--brass-ink); }

  /* ---------- Alcance ---------- */
  .reach-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-navy); }
  .reach { padding: 34px 32px 36px 0; border-right: 1px solid var(--rule-navy); }
  .reach + .reach { padding-left: 32px; }
  .reach:last-child { border-right: 0; }
  .reach .where { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
  .reach h3 { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.25; color: var(--on-navy); }
  .reach p { margin-top: 12px; color: var(--on-navy-soft); font-size: 0.97rem; }
  /* Áreas de práctica */
  .practice-list { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); border-top: 1px solid var(--rule); }
  .practice-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 18px; align-items: start; align-content: start; padding: 26px 6px 26px 0; border-bottom: 1px solid var(--rule); transition: background-color .2s, padding-left .2s; }
  .practice-row:hover { background: var(--paper); padding-left: 10px; }
  .practice-row .num { grid-column: 1; grid-row: 1; font-family: var(--serif); font-size: 1rem; color: var(--brass-ink); padding-top: 4px; }
  .practice-row h3 { grid-column: 2; grid-row: 1; font-family: var(--serif); font-weight: 400; font-size: 1.32rem; line-height: 1.25; color: var(--navy); }
  .practice-row p { grid-column: 2; grid-row: 2; font-size: 0.94rem; color: var(--ink-soft); }
  .practice-row .go { grid-column: 3; grid-row: 1; padding-top: 6px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-ink); white-space: nowrap; }

  /* ---------- Equipo ---------- */
  .team { background: var(--stone); }
  .team-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 44px); align-items: start; }
  .lawyer { background: var(--white); border: 1px solid var(--rule); }
  .lawyer-photo { position: relative; aspect-ratio: 5 / 5.4; background: var(--navy-2); overflow: hidden; }
  .lawyer-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
  .lawyer-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--brass); }
  .lawyer-body { padding: 30px 32px 34px; }
  .role { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-ink); }
  .lawyer h3 { margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: 1.65rem; line-height: 1.2; color: var(--navy); }
  .lawyer .bio { margin-top: 14px; color: var(--ink-soft); }
  .creds { margin-top: 22px; border-top: 1px solid var(--rule); }
  .creds li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .creds svg { width: 22px; height: 22px; color: var(--brass-ink); margin-top: 2px; }
  .creds strong { display: block; font-weight: 600; font-size: 0.95rem; color: var(--navy); }
  .creds span { font-size: 0.9rem; color: var(--ink-soft); }
  .creds span + span { margin-top: 2px; }
  .stat-line { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
  .stat-line span { padding: 6px 12px; background: var(--stone); font-size: 0.8rem; font-weight: 600; color: var(--navy); }

  /* ---------- Por qué ---------- */
  .why-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; }
  .why { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 18px; align-items: start; }
  .why .ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: rgba(201,162,77,.14); color: var(--brass-ink); }
  .why .ic svg { width: 24px; height: 24px; }
  .why h3 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.3; color: var(--navy); }
  .why p { margin-top: 6px; font-size: 0.94rem; color: var(--ink-soft); }

  /* ---------- Consulta ---------- */
  .consult { background: var(--paper); }
  .consult .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
  .consult .btn { margin-top: 32px; }
  .checks { background: var(--white); border: 1px solid var(--rule); padding: 10px 32px; }
  .checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .checks li:last-child { border-bottom: 0; }
  .checks svg { width: 21px; height: 21px; margin-top: 2px; color: var(--brass-ink); }

  /* ---------- Confianza ---------- */
  .trust-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .pledge { padding: 30px 24px; text-align: center; border: 1px solid var(--rule); }
  .pledge .ic { width: 54px; height: 54px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--brass); }
  .pledge .ic svg { width: 24px; height: 24px; }
  .pledge h3 { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--navy); }
  .pledge p { margin-top: 8px; font-size: 0.9rem; color: var(--ink-soft); }

  /* ---------- CTA + contacto ---------- */
  .final { text-align: center; padding-top: 104px; padding-bottom: 72px; }
  .final h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.12; max-width: 17em; margin: 0 auto; }
  .final h2 em { color: var(--brass); }
  .final p { margin: 20px auto 0; max-width: 36em; color: var(--on-navy-soft); font-size: 1.08rem; }
  .final .hero-actions { justify-content: center; }

  .contact { padding: 0 0 104px; }
  .contact .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: start; padding-top: 64px; border-top: 1px solid var(--rule-navy); }
  .contact h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--on-navy); }
  .details { margin-top: 26px; border-top: 1px solid var(--rule-navy); }
  .details div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule-navy); }
  .details dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); padding-top: 4px; }
  .details dd { color: var(--on-navy); font-size: 0.98rem; line-height: 1.55; }
  .details a:hover { color: var(--brass); }

  .form-card { background: var(--white); color: var(--ink); padding: clamp(28px, 4vw, 44px); }
  .form-card h3 { color: var(--navy); }
  .form-card .hint { margin-top: 8px; font-size: 0.92rem; color: var(--ink-soft); }
  .field { margin-top: 24px; }
  .field label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--navy); margin-bottom: 6px; }
  .field input, .field select, .field textarea { width: 100%; padding: 11px 0; font: 400 1rem/1.5 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #b6bdc9; border-radius: 0; }
  .field textarea { min-height: 110px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--navy); box-shadow: 0 1px 0 var(--navy); }
  .form-card .btn { width: 100%; margin-top: 30px; }
  .form-note { margin-top: 14px; font-size: 0.82rem; color: var(--ink-soft); text-align: center; }

  .site-footer { background: #030f1f; color: var(--on-navy-soft); padding: 48px 0; font-size: 0.85rem; }
  .site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
  .footer-logo { width: 112px; height: auto; }

  .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; display: grid; place-items: center; background: #25d366; border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: transform .2s; }
  .wa-float:hover { transform: scale(1.07); }
  .wa-float svg { width: 28px; height: 28px; fill: #fff; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1040px) {
    .nav a:not(.btn) { display: none; }
    .sit-grid, .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .section { padding: 80px 0; }
    .hero { min-height: 0; padding: 0 0 64px; flex-direction: column; align-items: stretch; }
    .hero-media { position: relative; inset: auto; width: 100%; height: 64vh; max-height: 560px; padding-top: 68px; background: var(--navy); }
    .hero-media::after { display: none; }
    .duo-name { left: 14px; right: 10px; bottom: 16px; }
    .duo-name strong { font-size: 0.98rem; }
    .duo-name span { font-size: 0.6rem; letter-spacing: 0.12em; }
    .hero .wrap { margin-top: 36px; }
    .feel .wrap, .consult .wrap, .contact .wrap { grid-template-columns: minmax(0, 1fr); }
    .reach-grid { grid-template-columns: minmax(0, 1fr); }
    .reach, .reach + .reach { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--rule-navy); }
    .practice-list { grid-template-columns: minmax(0, 1fr); }
    .team-grid { grid-template-columns: minmax(0, 1fr); max-width: 540px; }
  }
  @media (max-width: 560px) {
    .sit-grid, .why-grid, .trust-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-actions .btn { width: 100%; }
    .trust { gap: 8px 18px; font-size: 0.84rem; }
    .details div { grid-template-columns: 1fr; gap: 2px; }
    .checks { padding: 6px 20px; }
    .lawyer-body { padding: 26px 22px 28px; }
    .brand-name { font-size: 1rem; }
  }
  .pos-top { object-position: 50% 16%; }

  .practice-sub { margin-top: 48px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-ink); }
  .practice-list--extra { margin-top: 14px; }