:root {
  --wine: #74212A;
  --wine-dark: #4A1219;
  --ink: #16171A;
  --text: #45464B;
  --muted: #5C5D62;
  --sand: #F6EEE7;
  --sand-2: #EFE4DA;
  --rule: #E6DDD4;
  --rule-2: #DCCFC4;
  --blush: #F3DDDD;
  --night: #1E1416;
  --logo: #4F7FAE;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: 56px;      /* margen lateral del contenido */
  --sec: 130px;     /* espacio vertical de las secciones */
  --radius: 28px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
img { display: block; max-width: 100%; }
a { color: var(--wine); }
a:hover { color: var(--wine-dark); }
h1, h2, h3, h4, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Layout ---------- */
.wrap  { max-width: 1280px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.wrap2 { max-width: 1240px; margin: 0 auto; padding-left: 36px; padding-right: 36px; }
.sec   { padding-top: var(--sec); padding-bottom: var(--sec); }
.inset { padding: 0 20px; }
.inset--bottom { padding-bottom: 20px; }
.panel { background: var(--sand); border-radius: var(--radius); }

.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 28px; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-12 { grid-column: 1 / -1; }
.col-8.start-4 { grid-column: 4 / span 8; }
.col-4.start-9 { grid-column: 9 / span 4; }
.align-end { align-items: end; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }

.stack-16, .stack-20, .stack-22, .stack-26, .stack-40, .stack-56, .stack-60, .stack-64 { display: flex; flex-direction: column; }
.stack-16 { gap: 16px; } .stack-20 { gap: 20px; } .stack-22 { gap: 22px; } .stack-26 { gap: 26px; }
.stack-40 { gap: 40px; } .stack-56 { gap: 56px; } .stack-60 { gap: 60px; } .stack-64 { gap: 64px; }

/* ---------- Tipografia ---------- */
.label { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--wine); font-weight: 600; padding-top: 14px; }
.stack-22 > .label, .stack-26 > .label, .principles__box .label { padding-top: 0; }
.label--light { color: var(--blush); }
.h1 { font-family: var(--serif); font-weight: 300; font-size: 84px; line-height: 1.02; letter-spacing: -1.6px; color: #fff; }
.h1 em { font-style: italic; color: #F4D9CF; }
.h2 { font-family: var(--serif); font-weight: 300; font-size: 56px; line-height: 1.07; letter-spacing: -0.9px; color: var(--ink); }
.h2--light { color: #fff; font-size: 60px; }
.h3 { font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.2; color: var(--ink); }
.lead { font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1.22; letter-spacing: -0.6px; }
.body, .body p { font-size: 16.5px; line-height: 1.75; color: var(--text); }
.measure { max-width: 720px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 12px; cursor: pointer;
  font: 600 13px/1 var(--sans); letter-spacing: 1.3px; text-transform: uppercase; text-decoration: none;
}
.btn--wine { background: var(--wine); color: #fff; }
.btn--wine:hover { background: var(--wine-dark); color: #fff; }
.btn--light { background: #fff; color: var(--ink); min-height: 54px; padding: 0 30px; }
.btn--light:hover { background: var(--sand); color: var(--ink); }
.btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn--sm { min-height: 46px; padding: 0 18px; font-size: 12.5px; flex-shrink: 0; }
.btn:disabled { opacity: .7; cursor: wait; }
.link-light {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #fff; text-decoration: none;
  font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.6);
}
.link-light:hover { color: #fff; border-bottom-color: #fff; }

/* ---------- Barra superior y navegación ---------- */
.topbar { background: #2E1519; color: #E2D6D1; font-size: 12.5px; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 6px; padding-bottom: 6px; }
.topbar__links { display: flex; flex-wrap: wrap; gap: 0 26px; }
.topbar__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: #E2D6D1; text-decoration: none; }
.topbar__links a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; }

.header { background: #fff; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand:hover { color: var(--ink); }
.brand__logo { height: 46px; width: auto; flex-shrink: 0; }
.brand--light .brand__logo { height: 42px; }
.brand__mark {
  width: 46px; height: 46px; border-radius: 12px; background: var(--logo); color: #fff; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; line-height: 1;
}
.brand__mark b { font-size: 15px; font-weight: 800; letter-spacing: -.4px; }
.brand__mark small { font-size: 9px; font-weight: 700; margin-top: 2px; }
.brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand__name { font-family: var(--serif); font-size: 24px; line-height: 1; }
.brand__tag { font-size: 10.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--muted); }
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__links a:not(.btn) { color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500; }
.nav__links a:not(.btn):hover { color: var(--wine); }
.nav__toggle {
  display: none; width: 46px; height: 46px; border: 1px solid #E4DCD4; border-radius: 12px; background: #fff;
  color: var(--ink); align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.nav__toggle svg { width: 22px; height: 22px; }
.mobile-menu { display: flex; flex-direction: column; padding: 4px 20px 22px; border-top: 1px solid #EFE8E1; }
.mobile-menu a:not(.btn) { padding: 15px 0; border-bottom: 1px solid #EFE8E1; color: var(--ink); text-decoration: none; font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500; }
.mobile-menu .btn { margin-top: 18px; min-height: 50px; }

/* ---------- Portada ---------- */
.hero { position: relative; min-height: 760px; overflow: hidden; border-radius: var(--radius); background: #1C1F1E; display: flex; }
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: rgba(24,14,15,.44); }
.hero__inner { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 68px; padding-top: 120px; padding-bottom: 60px; }
.hero__copy { display: flex; flex-direction: column; gap: 28px; max-width: 900px; }
.chip {
  align-self: flex-start; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: #fff; font-weight: 500;
}
.hero__sub { font-size: 19px; line-height: 1.6; color: #EDE9E3; max-width: 600px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 6px; }
.hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.35); }
.hero__facts > div { display: flex; flex-direction: column; gap: 4px; padding: 22px 32px 0; }
.hero__facts > div:first-child { padding-left: 0; }
.hero__facts > div + div { border-left: 1px solid rgba(255,255,255,.35); }
.hero__facts strong { font-family: var(--serif); font-weight: 400; font-size: 22px; color: #fff; }
.hero__facts span { font-size: 13.5px; color: #DAD5CE; }

/* ---------- El despacho ---------- */
.principles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 24px; align-items: end; margin-top: 52px; }
.photo-img { width: 100%; object-fit: cover; border-radius: 24px; }
.principles .photo-img { grid-column: span 8; height: 560px; }
.principles__box { grid-column: span 4; padding: 36px 32px; border-radius: 24px; background: var(--sand); display: flex; flex-direction: column; gap: 22px; }
.principles__list li { padding: 15px 0; border-top: 1px solid var(--rule-2); font-family: var(--serif); font-size: 22px; }
.principles__list li:last-child { padding-bottom: 0; }

/* ---------- Areas de practica ---------- */
.practice { background: #fff; border-radius: 22px; padding: 8px 40px; }
.practice__row {
  display: grid; grid-template-columns: 70px minmax(0, 5fr) minmax(0, 5fr) 48px; gap: 32px; align-items: center;
  padding: 30px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink);
}
.practice__row:last-child { border-bottom: 0; }
.practice__row:hover { color: var(--ink); }
.practice__row:hover .practice__go { background: var(--wine); color: #fff; }
.practice__num { font-family: var(--serif); font-size: 20px; color: var(--wine); }
.practice__title { font-family: var(--serif); font-size: 30px; letter-spacing: -.3px; line-height: 1.2; }
.practice__desc { font-size: 15.5px; line-height: 1.6; color: var(--text); }
.practice__go { width: 44px; height: 44px; border-radius: 50%; background: var(--sand); color: var(--wine); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }

/* ---------- Como trabajamos ---------- */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.service { display: flex; flex-direction: column; gap: 16px; padding: 36px 32px; border-radius: 22px; background: var(--sand); }
.service p { font-size: 15.5px; line-height: 1.7; color: var(--text); }

/* ---------- Cita ---------- */
.band { position: relative; min-height: 580px; overflow: hidden; border-radius: var(--radius); background: #2A2E2A; display: flex; }
.band__inner { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-top: 80px; padding-bottom: 80px; }
.quote { max-width: 940px; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 58px; line-height: 1.12; letter-spacing: -.8px; color: #fff; }
.band cite { font-style: normal; font-size: 13px; letter-spacing: 2.4px; text-transform: uppercase; color: #EDE9E3; }

/* ---------- Equipo ---------- */
.team { display: flex; flex-direction: column; gap: 32px; }
.member { background: var(--sand); border-radius: 24px; padding: 48px 52px; border-left: 3px solid var(--wine); }
.member__body { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 48px; row-gap: 22px; align-items: start; }
.member__body > .pill, .member__body > .member__name, .member__body > .body { grid-column: 1; }
.member__body > .member__lists, .member__body > .book { grid-column: 2; }
.member__body > .book { margin-top: 4px; background: #fff; }
.pill { align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: #fff; font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--wine); font-weight: 600; }
.member__name { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.1; letter-spacing: -.5px; }
.member__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.member__lists h4 { font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.member__lists li { font-size: 14.5px; line-height: 1.55; color: var(--text); padding: 10px 0; border-bottom: 1px solid var(--rule); }
.member__lists li:last-child { border-bottom: 0; }
.book { display: flex; gap: 18px; align-items: center; padding: 22px 26px; border-radius: 18px; background: var(--sand); }
.book svg { width: 30px; height: 30px; stroke: var(--wine); stroke-width: 1.4; }
.book div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.book em { font-family: var(--serif); font-size: 20px; }
.book span { font-size: 13.5px; color: var(--muted); }

/* ---------- Beneficios ---------- */
.benefits { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 36px; align-items: stretch; padding-top: 110px; padding-bottom: 110px; }
.benefits__img { grid-column: span 5; height: 100%; min-height: 600px; border-radius: 22px; }
.benefits > .stack-40 { grid-column: 7 / span 6; justify-content: center; }
.benefits__list > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--rule-2); }
.benefits__list dt { font-family: var(--serif); font-size: 24px; }
.benefits__list dd { font-size: 15.5px; line-height: 1.65; color: var(--text); }

/* ---------- Oficinas ---------- */
.offices { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; align-items: center; }
.offices > .stack-40 { grid-column: span 6; }
.offices__img { grid-column: 8 / span 5; height: 620px; }
.office { display: flex; justify-content: space-between; align-items: center; gap: 20px 24px; padding: 26px 28px; border-radius: 20px; background: var(--sand); }
.office > div { min-width: 0; }
.office__city { font-family: var(--serif); font-weight: 400; font-size: 26px; }
.office__city span { font-family: var(--sans); font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--wine); font-weight: 600; margin-left: 8px; }
.office p { font-size: 15px; line-height: 1.55; color: var(--text); margin-top: 6px; }

/* ---------- Contacto ---------- */
.contact { background: var(--wine); color: #fff; border-radius: var(--radius); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; padding-top: 120px; padding-bottom: 120px; }
.contact__grid > :first-child { grid-column: span 6; }
.contact__grid > :last-child { grid-column: 8 / span 5; align-self: end; }
.contact__intro { font-size: 17px; line-height: 1.7; color: var(--blush); max-width: 420px; }
.contact__quick { display: flex; flex-direction: column; gap: 14px; }
.quick { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; }
.quick:hover { background: rgba(255,255,255,.16); color: #fff; }
.quick > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quick small { font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--blush); font-weight: 400; }
.quick__icon { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--wine); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }


/* ---------- Pie ---------- */
.footer { background: var(--night); color: #C2B7B3; font-size: 14px; }
.footer__inner { padding-top: 80px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 64px; }
.footer__grid { display: grid; grid-template-columns: 4fr 2fr 3fr 3fr; gap: 40px 32px; }
.footer p { line-height: 1.7; max-width: 300px; }
.footer a { color: #C2B7B3; text-decoration: none; }
.footer a:hover { color: #fff; }
.brand--light .brand__name { color: #fff; font-size: 22px; }
.brand--light .brand__mark { width: 42px; height: 42px; border-radius: 11px; }
.footer__contact a { color: #fff; }
.footer__col { display: flex; flex-direction: column; gap: 8px; line-height: 1.6; }
.footer__col h4 { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: #fff; font-weight: 600; margin-bottom: 8px; }
.footer__map { color: #E8B8B8 !important; margin-top: 4px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid #3A3032; font-size: 12.5px; }

/* ============Responsivo============== */
@media (max-width: 1100px) {
  :root { --pad: 32px; --sec: 110px; }
  .wrap2 { padding-left: 28px; padding-right: 28px; }
  .nav__links { gap: 20px; }
  .h1 { font-size: 66px; }
  .h2 { font-size: 48px; }
  .quote { font-size: 48px; }
  .practice__row { grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 20px; }
  .practice__title { font-size: 26px; }
  .member__name { font-size: 38px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --pad: 20px; --sec: 72px; --radius: 20px; }
  .wrap2 { padding-left: 20px; padding-right: 20px; }
  .inset { padding-left: 10px; padding-right: 10px; }
  .inset--bottom { padding-bottom: 10px; }

  /* Navegacion */
  .topbar__loc { display: none; }
  .topbar__inner { justify-content: center; }
  .topbar__links { justify-content: center; gap: 0 18px; }
  .nav { padding-top: 12px; padding-bottom: 12px; }
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .header.is-open { border-bottom-color: #EFE8E1; }

  /* Todas las rejillas a una columna */
  .grid12, .principles, .member__body, .benefits, .offices, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .grid12 > *, .principles > *, .member__body > *, .benefits > *, .offices > *, .contact__grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .two-col, .services, .member__lists { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .label { padding-top: 0; }

  /* Tipografia fluida */
  .h1 { font-size: clamp(38px, 10vw, 60px); letter-spacing: -.6px; }
  .h2, .h2--light { font-size: clamp(32px, 8vw, 46px); letter-spacing: -.4px; }
  .lead { font-size: clamp(25px, 6vw, 36px); }
  .quote { font-size: clamp(27px, 7vw, 44px); }
  .member__name { font-size: clamp(28px, 7.5vw, 38px); }

  /* Portada y cita */
  .hero { min-height: 600px; }
  .hero__inner { padding-top: 110px; padding-bottom: 36px; gap: 44px; }
  .hero__facts { grid-template-columns: minmax(0, 1fr); }
  .hero__facts > div, .hero__facts > div:first-child { padding: 16px 0 0; }
  .hero__facts > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.3); margin-top: 16px; }
  .band { min-height: 400px; }
  .band__inner { padding-top: 64px; padding-bottom: 64px; }

  /* Imagenes */
  .principles { margin-top: 20px; }
  .principles .photo-img, .benefits__img, .offices__img { height: 320px; min-height: 0; border-radius: 18px; }
  .principles__box { padding: 28px 22px; }
  .member { padding: 28px 22px; }
  .team { gap: 20px; }

  /* Areas de practica */
  .practice { padding: 4px 18px; border-radius: 18px; }
  .practice__row { grid-template-columns: 34px minmax(0, 1fr) 44px; column-gap: 14px; row-gap: 6px; padding: 22px 0; }
  .practice__num { grid-row: 1; }
  .practice__title { font-size: 23px; grid-column: 2; }
  .practice__desc { grid-column: 2; grid-row: 2; }
  .practice__go { grid-column: 3; grid-row: 1 / 3; }

  /* Otros */
  .service { padding: 28px 22px; }
  .benefits { padding-top: 72px; padding-bottom: 72px; }
  .benefits__list > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .office { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .office__city span { display: block; margin: 6px 0 0; }
  .contact__grid { padding-top: 72px; padding-bottom: 72px; }
  .book { padding: 18px; align-items: flex-start; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__inner { padding-top: 56px; gap: 40px; }
  .footer__bottom { flex-direction: column; }
}

@media (max-width: 380px) {
  .brand__tag { display: none; }
  .brand__name { font-size: 21px; }
}
[id]{scroll-margin-top:90px}