/* ==========================================================================
   TREU Abogados — Sistema de diseño
   Estudio jurídico penal · Estética minimalista, sobria y premium
   Paleta: Azul marino #0E2A3D · Celeste #5C8AA6 · Gris #8C9499
   Tipografías: Hanken Grotesk (títulos) · IBM Plex Sans (texto)
   ========================================================================== */

:root {
  /* Marca */
  --navy:        #0E2A3D;
  --navy-deep:   #0A2230;
  --navy-soft:   #11354c;
  --celeste:     #5C8AA6;
  --celeste-2:   #6f9bb5;
  --gray:        #8C9499;

  /* Texto */
  --ink:         #1c2b34;
  --ink-soft:    #4a5963;
  --ink-muted:   #6b7a83;
  --on-dark:     #c4d2db;
  --on-dark-2:   #8fa3ad;
  --on-dark-3:   #6b8088;

  /* Superficies */
  --bg:          #ffffff;
  --bg-alt:      #f4f6f7;
  --line:        #e6eaec;
  --line-2:      #e9edef;

  /* Tipografía */
  --font-head: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --container: 1240px;
  --gutter: 40px;
  --header-h: 84px;

  /* Sombras (sutiles, premium) */
  --shadow-sm: 0 1px 2px rgba(14, 42, 61, .04);
  --shadow:    0 10px 30px -12px rgba(14, 42, 61, .18);
  --shadow-lg: 0 24px 60px -20px rgba(14, 42, 61, .28);

  /* Transiciones */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .22s var(--ease);
  --t: .35s var(--ease);
}

/* ----- Reset acotado --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
svg { height: auto; }
a { color: inherit; text-decoration: none; }
input, textarea, button, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul { list-style: none; padding: 0; }
::selection { background: var(--celeste); color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* ----- Accesibilidad --------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--celeste);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -120px;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 16px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----- Layout utilidades ---------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--tight { padding: clamp(56px, 7vw, 96px) 0; }

.section--dark { background: var(--navy); color: #fff; }
.section--alt  { background: var(--bg-alt); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.measure { max-width: 680px; }
.measure-lg { max-width: 760px; }

/* ----- Tipografía de apoyo -------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--celeste);
  margin-bottom: 20px;
}

.lead {
  font-weight: 300;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
}
.section--dark .lead { color: var(--on-dark); }

.prose p {
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ink-soft);
}
.prose p + p { margin-top: 1em; }
.section--dark .prose p { color: var(--on-dark); }

.text-justify { text-align: justify; hyphens: auto; }

/* ----- Botones --------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .01em;
  line-height: 1;
  padding: 16px 28px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; transition: transform var(--t-fast); flex: 0 0 auto; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--primary { --btn-bg: var(--celeste); --btn-fg: var(--navy); border-color: var(--celeste); }
.btn--primary:hover { background: var(--celeste-2); border-color: var(--celeste-2); }

.btn--dark:hover { background: var(--celeste); color: var(--navy); border-color: var(--celeste); }

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.28);
}
.btn--ghost:hover { color: var(--celeste); border-color: var(--celeste); }

.btn--ghost-ink {
  background: transparent;
  color: var(--navy);
  border-color: var(--line);
}
.btn--ghost-ink:hover { border-color: var(--celeste); color: var(--celeste); }

.btn--sm { padding: 13px 22px; font-size: 13px; }

/* Enlace "Ver más" */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: var(--navy);
}
.link-more svg { width: 15px; height: 15px; transition: transform var(--t-fast); }
.link-more:hover svg { transform: translateX(3px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(14,42,61,.06), 0 8px 24px -16px rgba(14,42,61,.25);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 22px; height: 24px; color: var(--celeste); }
.brand__name { line-height: 1; }
.brand__name b {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: .31em;
  font-size: 16px;
  color: var(--navy);
}
.brand__name span {
  display: block;
  font-weight: 400;
  letter-spacing: .31em;
  font-size: 8px;
  color: var(--gray);
  margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: 34px; }
.nav__link {
  position: relative;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #3a4a55;
  padding: 4px 0;
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--celeste);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast);
}
.nav__link:hover { color: var(--celeste); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--celeste); font-weight: 600; }

.nav__divider { width: 1px; height: 18px; background: #dfe4e7; }

.lang-toggle {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--navy);
  padding: 6px 8px;
  transition: color var(--t-fast);
}
.lang-toggle:hover { color: var(--celeste); }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}
.nav-burger span {
  width: 24px; height: 2px;
  background: var(--navy);
  display: block;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 8px var(--gutter) 24px;
  border-top: 1px solid var(--line-2);
  background: #fff;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  padding: 14px 0;
  border-bottom: 1px solid #f0f3f4;
  font-size: 15px;
  color: var(--ink);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu .btn { margin-top: 18px; justify-content: center; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--navy);
  background-image:
    radial-gradient(120% 90% at 85% 0%, rgba(92,138,166,.16), transparent 55%),
    linear-gradient(180deg, #0E2A3D 0%, #0c2535 100%);
  color: #fff;
  overflow: hidden;
}
.hero__watermark {
  position: absolute;
  right: -90px; top: 50%;
  transform: translateY(-50%);
  width: min(600px, 60vw);
  color: rgba(92,138,166,.08);
  pointer-events: none;
}
.hero h1, .hero h2 { color: #fff; }
.hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 11vw, 128px) 0 clamp(72px, 9vw, 110px);
}
.hero--page .hero__inner { padding: clamp(64px, 8vw, 84px) 0 clamp(60px, 7vw, 78px); }

.hero h1 {
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1.03;
  letter-spacing: -.026em;
  max-width: 16ch;
}
.hero--page h1 { font-size: clamp(32px, 5vw, 56px); max-width: 18ch; }
.hero__sub {
  font-weight: 300;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--on-dark);
  margin-top: 32px;
  max-width: 60ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }

.hero__bar {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero__bar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  padding: 22px 0;
  font-size: 12.5px;
  letter-spacing: .03em;
}
.hero__bar li { color: var(--on-dark); }
.hero__bar .dot { color: #34505f; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--gray);
  margin-bottom: 26px;
}
.breadcrumb a { color: var(--gray); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--celeste); }
.breadcrumb [aria-current] { color: var(--on-dark); }

/* ==========================================================================
   SECCIONES DE CONTENIDO
   ========================================================================== */
.grid-2 {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.grid-2--start { align-items: start; }
.grid-2--even { grid-template-columns: 1fr 1fr; }

.section-head { max-width: 700px; }
.section-head h2 { font-size: clamp(28px, 3.8vw, 46px); }
.section-head .lead { margin-top: 22px; }

/* Lista de checks */
.checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin-top: 32px;
}
.checklist--stack { flex-direction: column; gap: 14px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
}
.check svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--celeste); }
.check__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.check__text b { font-family: var(--font-head); font-weight: 700; color: var(--navy); }
/* Checklist sobre superficies oscuras (feature-card / secciones dark): contraste AA */
.feature-card .check__text, .section--dark .check__text { color: var(--on-dark); }
.feature-card .check__text b, .section--dark .check__text b { color: #fff; }
.feature-card .check svg, .section--dark .check svg { color: var(--celeste); }

/* Bloque destacado (cita / promesa) */
.feature-card {
  position: relative;
  background: var(--navy);
  color: #fff;
  padding: clamp(40px, 5vw, 54px) clamp(32px, 4vw, 48px);
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature-card__wm {
  position: absolute;
  right: -30px; bottom: -34px;
  width: 240px;
  color: rgba(92,138,166,.14);
  pointer-events: none;
}
.feature-card__icon { width: 34px; height: 34px; color: var(--celeste); position: relative; }
.feature-card__quote {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 26px);
  line-height: 1.32;
  letter-spacing: -.01em;
  margin-top: 24px;
  position: relative;
}
.feature-card__rule { width: 42px; height: 3px; background: var(--celeste); margin-top: 26px; position: relative; }

/* Nota / callout */
.callout {
  border-left: 3px solid var(--celeste);
  background: var(--bg-alt);
  padding: 20px 26px;
  margin-top: 30px;
}
.callout b { font-family: var(--font-head); font-weight: 700; color: var(--navy); display: block; margin-bottom: 6px; }
.callout span { font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.quote-side {
  border-left: 3px solid var(--celeste);
  padding-left: 20px;
  margin-top: 30px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--navy);
}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat { text-align: center; padding: 0 14px; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.12); }
.stat__num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(44px, 5vw, 60px);
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
}
.stat__num--accent { color: var(--celeste); }
.stat__num--sm { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.02em; padding-top: 8px; }
.stat__label { font-size: 13.5px; color: var(--gray); margin-top: 14px; letter-spacing: .02em; }

/* Stats verticales (páginas internas) */
.stats-stack { display: flex; flex-direction: column; }
.stats-stack__row { display: flex; }
.stat-box {
  flex: 1;
  border: 1px solid var(--line);
  padding: 24px 22px;
}
.stats-stack__row .stat-box + .stat-box { border-left: none; }
.stats-stack > .stat-box { border-top: none; }
.stats-stack__row + .stat-box,
.stat-box + .stat-box { border-top: none; }
.stat-box__num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -.04em;
  color: var(--navy);
  line-height: 1;
}
.stat-box__num--accent { color: var(--celeste); }
.stat-box__label { font-size: 12.5px; color: var(--gray); margin-top: 8px; }

.manage-list { display: flex; flex-direction: column; gap: 14px; }
.manage-item { display: flex; gap: 13px; align-items: center; }
.manage-item svg { width: 28px; height: 28px; flex: 0 0 28px; }
.manage-item__text { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.manage-item__text b { font-family: var(--font-head); font-weight: 700; color: var(--navy); }

/* ==========================================================================
   GRID DE TARJETAS (áreas / motivos)
   ========================================================================== */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 52px;
}
.tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tile-grid--2 { grid-template-columns: repeat(2, 1fr); }

.tile {
  background: #fff;
  padding: 30px 28px;
  min-height: 182px;
  display: flex;
  flex-direction: column;
  transition: background var(--t-fast);
}
.tile--sm { min-height: 150px; padding: 28px 26px; }
.tile--xs { min-height: 118px; padding: 26px 24px; gap: 14px; }
.tile:hover { background: #f7f9fa; }
.tile__icon { width: 28px; height: 28px; color: var(--navy); }
.tile--sm .tile__icon, .tile--xs .tile__icon { width: 26px; height: 26px; }
.tile__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin: 20px 0 7px;
}
.tile--sm .tile__title, .tile--xs .tile__title { font-size: 16px; margin: 0; }
.tile--xs .tile__title { font-size: 15px; }
.tile__desc { font-weight: 300; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

.tile--invert {
  background: var(--navy);
  justify-content: center;
}
.tile--invert:hover { background: var(--navy); }
.tile--invert .tile__title { color: #fff; margin: 0; font-weight: 800; line-height: 1.3; }
.tile--invert .tile__desc { color: var(--on-dark); margin-top: 8px; font-size: 12.5px; }

/* Tarjetas de servicio (enlazadas) */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.service-card:hover {
  border-color: var(--celeste);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.service-card__icon { width: 36px; height: 36px; color: var(--celeste); }
.service-card__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 26px 0 10px;
}
.service-card__desc {
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  flex: 1;
}
.service-card .link-more { margin-top: 28px; }

/* Feature row (alianzas) */
.feature-list { display: flex; flex-direction: column; }
.feature-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.feature-list .feature-row:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.feature-row svg { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 2px; color: var(--celeste); }
.feature-row b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 16.5px; color: #fff; margin-bottom: 5px; }
.feature-row span { font-weight: 300; font-size: 13.5px; line-height: 1.6; color: var(--on-dark-2); }

/* Tarjetas alianza (claras) */
.value-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 30px 26px;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.value-card:hover { border-color: var(--celeste); transform: translateY(-4px); box-shadow: var(--shadow); }
.value-card svg { width: 30px; height: 30px; color: var(--celeste); }
.value-card b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 16.5px; color: var(--navy); margin: 18px 0 6px; }
.value-card span { font-weight: 300; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

/* ==========================================================================
   PASOS (proceso)
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 50px;
}
.step { border-top: 2px solid var(--celeste); padding-top: 22px; }
.step__num { font-family: var(--font-head); font-weight: 800; font-size: 28px; color: var(--celeste); line-height: 1; }
.step__title { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy); margin: 14px 0 8px; }
.step__desc { font-weight: 300; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

.note-line { margin-top: 34px; font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--gray); }
.note-line b { color: var(--navy); font-weight: 500; }

.flag-line { margin-top: 34px; display: flex; align-items: center; gap: 16px; }
.flag-line svg { width: 26px; height: 26px; flex: 0 0 26px; color: var(--celeste); }
.flag-line p { font-weight: 300; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.flag-line b { color: var(--navy); font-weight: 600; }

/* Pills (motivos) */
.pill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pill {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  color: var(--navy);
  border: 1px solid var(--line);
  padding: 16px 18px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pill:hover { border-color: var(--celeste); background: var(--bg-alt); }
.pill svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--celeste); }

/* ==========================================================================
   CTA en banda
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.cta-band__wm { position: absolute; right: -50px; bottom: -44px; width: 360px; color: rgba(92,138,166,.08); pointer-events: none; }
.cta-band__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 { font-size: clamp(28px, 3.6vw, 40px); color: #fff; }
.cta-band p { font-weight: 300; font-size: 16.5px; line-height: 1.6; color: var(--on-dark); margin-top: 16px; max-width: 56ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); }

.contact-channels { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.channel { display: flex; align-items: center; gap: 16px; transition: opacity var(--t-fast); }
a.channel:hover { opacity: .82; }
.channel__icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
}
.channel__icon svg { width: 20px; height: 20px; color: var(--celeste); }
.channel__label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.channel__value { display: block; font-family: var(--font-head); font-weight: 600; font-size: 17px; margin-top: 3px; color: #fff; }

.contact-secure {
  display: flex; align-items: center; gap: 11px;
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.contact-secure svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--celeste); }
.contact-secure span { font-size: 13px; color: var(--gray); }

.contact-form-wrap { background: var(--navy-soft); padding: clamp(32px, 4vw, 44px) clamp(28px, 3.5vw, 40px); }
.field { display: flex; flex-direction: column; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-group { display: flex; flex-direction: column; gap: 18px; }
.field label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  padding: 13px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: #6f8593; }
.field input:focus, .field textarea:focus {
  border-color: var(--celeste);
  box-shadow: 0 0 0 3px rgba(92,138,166,.18);
}
.form-actions { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.form-actions .btn { flex: 1; min-width: 150px; padding: 16px; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.form-msg { font-size: 13.5px; text-align: center; margin-top: 2px; }
.form-msg--ok { color: var(--celeste); }
.form-msg--err { color: #e0a3a3; }
[hidden] { display: none !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--navy-deep);
  color: #fff;
  padding: 64px 0 36px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.footer-brand .brand__name b { color: #fff; }
.footer-about { font-weight: 300; font-size: 14px; line-height: 1.7; color: var(--on-dark-2); margin: 22px 0 0; max-width: 300px; }
.footer-motto { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--celeste); margin-top: 24px; }
.footer-col h3 { font-family: var(--font-body); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--celeste); font-weight: 600; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a, .footer-col span { font-size: 14px; color: var(--on-dark); transition: color var(--t-fast); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom span { font-size: 12px; color: var(--on-dark-3); letter-spacing: .02em; }

/* ==========================================================================
   ANIMACIONES sutiles (scroll reveal)
   ========================================================================== */
/* Sin JS (o si falla), el contenido es siempre visible: solo se oculta
   para animar cuando el documento tiene la clase .js */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

/* WhatsApp flotante */
.wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 70;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-lg); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1020px) {
  .nav { display: none; }
  .nav-burger { display: flex; }
}

@media (max-width: 880px) {
  :root { --gutter: 24px; }
  .grid-2, .grid-2--even { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .tile-grid--3 { grid-template-columns: 1fr 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .stat + .stat { border-left: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { grid-column: auto; }
  .feature-card { min-height: 300px; }
}

@media (max-width: 560px) {
  .tile-grid, .tile-grid--3, .tile-grid--2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .pill-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero__actions .btn, .cta-band__actions .btn { width: 100%; justify-content: center; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   PREFERENCIAS DEL USUARIO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .site-header, .wa-float, .cta-band, .nav-burger { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   Áreas de práctica — catálogos de delitos
   ========================================================================== */

/* Lista de delitos (SEO + lectura) */
.pill-grid { list-style: none; margin: 0; padding: 0; }
.pill-grid .pill { background: #fff; }
.pill-grid .pill::before {
  content: "";
  width: 6px; height: 6px;
  flex: 0 0 6px;
  background: var(--celeste);
  border-radius: 50%;
}
@media (min-width: 900px) {
  .pill-grid--delitos { grid-template-columns: repeat(3, 1fr); }
}

/* Tiles que son enlaces (teaser del home) */
a.tile { text-decoration: none; color: inherit; display: flex; }
a.tile:hover { background: #f7f9fa; }
a.tile:hover .tile__title { color: var(--celeste); }
a.tile .tile__title { transition: color var(--t-fast); }

/* Tarjeta de posición en páginas de catálogo */
.feature-card__quote { font-size: 16.5px; line-height: 1.62; }

/* Índice de áreas: numeración discreta */
.service-card .eyebrow { color: var(--gray); letter-spacing: .14em; }

/* ==========================================================================
   BARRA DE PROGRESO DE LECTURA (columnas / artículos)
   ========================================================================== */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--celeste);
  z-index: 100;
  transition: width .08s linear;
  will-change: width;
}
@media (prefers-reduced-motion: reduce) { .reading-progress { transition: none; } }

/* ==========================================================================
   COLUMNAS DE OPINIÓN (editorial)
   ========================================================================== */
:root { --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; }

.op-tag { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:600; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--celeste); }
.op-tag::before { content:""; width:26px; height:2px; background:var(--celeste); display:inline-block; }

.op-divider { display:flex; align-items:center; gap:16px; margin:0 0 34px; }
.op-divider .line { flex:1; height:1px; background:var(--line); }
.op-divider .lbl { font-family:var(--font-head); font-weight:600; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--celeste); }
.op-divider .lbl--muted { color:var(--gray); }

/* Columna destacada */
.op-feature { display:grid; grid-template-columns:1.05fr 1fr; border:1px solid var(--line); background:#fff; transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast); }
.op-feature:hover { border-color:var(--celeste); box-shadow:var(--shadow); transform:translateY(-3px); }
.op-feature__panel { background:var(--navy); color:#fff; padding:clamp(36px,4vw,52px); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:340px; }
.op-feature__wm { position:absolute; right:-40px; bottom:-40px; width:260px; color:rgba(92,138,166,.10); pointer-events:none; }
.op-feature__title { font-family:var(--serif); font-weight:700; font-size:clamp(28px,3.4vw,40px); line-height:1.08; letter-spacing:-.01em; margin:22px 0 0; color:#fff; position:relative; }
.op-feature__meta { display:flex; align-items:center; gap:12px; margin-top:26px; font-size:12.5px; color:#9fb2bd; position:relative; }
.op-feature__meta b { color:var(--on-dark); font-weight:500; }
.op-feature__meta .d { width:3px; height:3px; border-radius:50%; background:var(--celeste); }
.op-feature__body { padding:clamp(36px,4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.op-feature__excerpt { font-family:var(--serif); font-size:16.5px; line-height:1.7; color:var(--ink-soft); margin:0; }

/* Estado vacío / próximamente */
.op-soon { border:1px dashed #cfd8dc; background:var(--bg-alt); padding:36px 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.op-soon__l { display:flex; align-items:center; gap:20px; }
.op-soon>svg, .op-soon__l>svg { width:34px; height:34px; flex:0 0 34px; color:var(--celeste); }
.op-soon b { font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--navy); display:block; }
.op-soon span { font-weight:300; font-size:14px; line-height:1.55; color:var(--ink-soft); }

/* Rejilla de columnas */
.op-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.op-card { display:flex; flex-direction:column; border:1px solid var(--line); background:#fff; padding:34px 32px; transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast); }
.op-card:hover { border-color:var(--celeste); box-shadow:var(--shadow); transform:translateY(-3px); }
.op-card__title { font-family:var(--serif); font-weight:700; font-size:22px; line-height:1.15; color:var(--navy); margin:16px 0 0; }
.op-card__meta { font-size:12px; color:var(--gray); margin-top:12px; }
.op-card__excerpt { font-family:var(--serif); font-size:15px; line-height:1.65; color:var(--ink-soft); margin:14px 0 0; flex:1; }
.op-card .link-more { margin-top:22px; }
.op-card time { font-size:12px; color:var(--gray); }

/* Artículo (lectura larga) */
.article-hero .container { max-width:900px; }
.article { max-width:820px; margin:0 auto; padding:clamp(48px,7vw,70px) var(--gutter) 40px; }
.article__body { font-family:var(--serif); font-size:19px; line-height:1.75; color:#26333c; text-align:justify; hyphens:auto; }
.article__body p { margin:0 0 20px; }
.article__body h2 { font-size:clamp(24px,3vw,32px); margin:40px 0 16px; }
.article__body h3 { font-size:20px; margin:32px 0 12px; }
.article__body em { font-style:italic; }
.article__body .dropcap::first-letter { float:left; font-family:var(--serif); font-weight:700; font-size:78px; line-height:.78; color:var(--navy); padding:6px 14px 0 0; }
.step-lead { font-family:var(--font-head); font-weight:700; font-size:16px; letter-spacing:.01em; color:var(--navy); }

.law-quote { margin:34px 0; padding:26px 32px; background:var(--bg-alt); border-left:4px solid var(--celeste); }
.law-quote__k { font-family:var(--font-head); font-weight:700; font-size:10px; letter-spacing:.24em; color:var(--celeste); margin-bottom:12px; }
.law-quote p { margin:0; font-family:var(--serif); font-style:italic; font-size:17.5px; line-height:1.6; color:#22323c; }
.law-quote strong { font-style:normal; color:var(--navy); }

.pull { margin:36px 0; padding:30px 34px; background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.pull__wm { position:absolute; right:-24px; bottom:-24px; width:150px; color:rgba(92,138,166,.12); pointer-events:none; }
.pull p { margin:0; position:relative; z-index:2; font-family:var(--serif); font-size:20px; line-height:1.6; color:#eaf1f5; }

.author-bio { display:flex; align-items:center; gap:18px; margin-top:48px; padding:26px 30px; border:1px solid var(--line); background:#fff; }
.author-bio__av { width:56px; height:56px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; flex:none; }
.author-bio__av svg { width:24px; color:var(--celeste); }
.author-bio b { font-family:var(--font-head); font-weight:700; font-size:16px; color:var(--navy); }
.author-bio small { display:block; font-weight:300; font-size:13px; color:#5b6b75; margin-top:3px; font-family:var(--font-body); }
.author-bio a { font-family:var(--font-head); font-weight:600; font-size:12.5px; color:var(--celeste); margin-top:5px; display:inline-block; }

.article__foot { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; margin-top:40px; padding-top:32px; border-top:1px solid var(--line-2); }
.link-back { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--navy); }
.link-back svg { width:16px; height:16px; transition:transform var(--t-fast); }
.link-back:hover { color:var(--celeste); }
.link-back:hover svg { transform:translateX(-3px); }

@media (max-width:880px) { .op-feature { grid-template-columns:1fr; } }
@media (max-width:720px) { .op-grid { grid-template-columns:1fr; } }

/* ==========================================================================
   PÁGINAS DE ÁREA — rediseño (hero, índice lateral, lista de delitos)
   ========================================================================== */

/* Hero de área con más presencia */
.hero--area .hero__inner { padding: clamp(84px,11vw,140px) 0 clamp(64px,8vw,100px); }
.hero__bignum {
  position:absolute; right:2.5%; top:50%; transform:translateY(-50%);
  font-family:var(--font-head); font-weight:900;
  font-size:min(40vw,540px); line-height:.74; letter-spacing:-.05em;
  color:rgba(92,138,166,.07); pointer-events:none; user-select:none; z-index:1;
}
.hero--area .hero__inner > * { position:relative; z-index:2; }
.hero__meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero__meta .chip {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-head); font-weight:600; font-size:12.5px; letter-spacing:.02em;
  color:var(--on-dark); border:1px solid rgba(255,255,255,.18); padding:9px 16px;
}
.hero__meta .chip b { color:var(--celeste); font-weight:800; }
.hero__meta .chip svg { width:15px; height:15px; color:var(--celeste); }

/* Índice lateral pegajoso (escritorio) — puntos a la derecha, etiqueta al hover/activo */
.section-rail {
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  z-index:40; display:none; flex-direction:column; align-items:flex-end; gap:18px;
}
@media (min-width:1120px) { .section-rail { display:flex; } }
.section-rail a { display:flex; align-items:center; gap:11px; color:var(--gray); transition:color var(--t-fast); }
.section-rail a .dot {
  width:9px; height:9px; border:2px solid currentColor; border-radius:50%;
  transition:background var(--t-fast), transform var(--t-fast);
  flex:0 0 9px;
}
.section-rail a .rlbl {
  font-family:var(--font-head); font-weight:600; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  opacity:0; transform:translateX(6px); pointer-events:none;
  transition:opacity var(--t-fast), transform var(--t-fast);
}
.section-rail a:hover, .section-rail a.is-active { color:var(--celeste); }
.section-rail a:hover .rlbl, .section-rail a.is-active .rlbl { opacity:1; transform:none; }
.section-rail a.is-active .dot { background:var(--celeste); transform:scale(1.05); }
@media (prefers-reduced-motion: reduce) { .section-rail a .rlbl { transition:none; } }

/* Lista de delitos rediseñada */
.delitos-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin-top:14px; }
.delitos-head .count {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--celeste);
  letter-spacing:.02em;
}
.delitos-head .count::before { content:""; width:22px; height:2px; background:var(--celeste); }

.delitos-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr));
  gap:14px; margin-top:30px;
}
.delito {
  display:flex; align-items:flex-start; gap:15px;
  padding:19px 22px; background:#fff;
  border:1px solid var(--line); border-left:3px solid var(--line-2);
  transition:border-color var(--t-fast), border-left-color var(--t-fast),
             box-shadow var(--t-fast), transform var(--t-fast);
}
.delito:hover {
  border-color:var(--line); border-left-color:var(--celeste);
  box-shadow:var(--shadow); transform:translateY(-2px);
}
.delito__num {
  font-family:var(--font-head); font-weight:800; font-size:12.5px;
  color:var(--celeste); line-height:1.55; min-width:20px; letter-spacing:.01em;
}
.delito__name {
  font-family:var(--font-head); font-weight:600; font-size:15px; line-height:1.35;
  color:var(--navy); letter-spacing:-.005em;
}
.delitos-note { margin-top:26px; font-weight:300; font-size:14px; line-height:1.6; color:var(--gray); }
.delitos-note b { color:var(--navy); font-weight:500; }

/* Lista de delitos "en bruto" (páginas de catálogo pendientes de diseño) —
   markup simple y semántico, motor SEO. Rediseñable libremente. */
.area-delitos { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:2px 28px; margin-top:8px; }
.area-delitos li { font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--navy); padding:12px 0; border-bottom:1px solid var(--line); }

@media (max-width:560px) {
  .delitos-grid { grid-template-columns:1fr; }
  .hero__bignum { font-size:52vw; opacity:.7; }
}

/* ==========================================================================
   IMPRESIÓN / GUARDAR COMO PDF (columnas y artículos)
   ========================================================================== */
@media print {
  .site-header, .wa-float, .article__foot, .skip-link, #mobile-menu,
  .site-footer, .breadcrumb, .section-rail, .reading-progress { display: none !important; }
  body { background: #fff !important; }
  .hero, .article-hero { background: #fff !important; }
  .hero__watermark, .hero__bignum { display: none !important; }
  .article-hero h1, .article-hero .op-tag, .article-hero .hero__inner div { color: #0E2A3D !important; }
  .hero__inner { padding: 0 0 10pt !important; }
  .article { padding: 10pt 0 0 !important; max-width: 100% !important; }
  .article__body { font-size: 11.5pt; line-height: 1.5; color: #111; }
  .article__body .dropcap::first-letter { color: #0E2A3D; }
  .law-quote { background: #f4f6f7 !important; }
  .pull { background: #fff !important; border-left: 3px solid #5C8AA6; }
  .pull p { color: #111 !important; }
  .pull__wm { display: none !important; }
  .author-bio { border: 1px solid #ccc; }
  a { color: #000 !important; }
  @page { margin: 16mm 14mm; }
}

/* ==========================================================================
   HOME — directorio de áreas por grupos
   ========================================================================== */
.area-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 52px;
}
.area-col { background: #fff; padding: 36px 32px; }
.area-col__idx {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--celeste);
}
.area-col__title {
  font-family: var(--font-head);
  font-weight: 800; font-size: 19px;
  letter-spacing: -.01em; color: var(--navy);
  margin: 12px 0 8px;
}
.area-col ul { margin-top: 14px; }
.area-col li a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line-2);
  font-family: var(--font-head);
  font-weight: 600; font-size: 14.5px;
  color: var(--ink-soft);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.area-col li:first-child a { border-top: none; }
.area-col li a svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--celeste); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast), transform var(--t-fast); }
.area-col li a:hover { color: var(--celeste); padding-left: 6px; }
.area-col li a:hover svg { opacity: 1; transform: none; }

/* ==========================================================================
   ÁREAS — listado agrupado (tiles solo con nombre)
   ========================================================================== */
.tile--name { min-height: 150px; justify-content: flex-start; gap: 18px; }
.tile--name .tile__title { margin: 0; }

/* Proceso de 3 pasos */
.steps--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .steps--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps--3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAQ (acordeón sobrio)
   ========================================================================== */
.faq { border-top: 1px solid var(--line); margin-top: 8px; max-width: 860px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0;
  font-family: var(--font-head);
  font-weight: 700; font-size: 18px;
  color: var(--navy);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 24px; font-weight: 300;
  color: var(--celeste);
  transition: transform var(--t-fast);
  flex: 0 0 auto;
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__item p {
  font-weight: 300; font-size: 15.5px; line-height: 1.72;
  color: var(--ink-soft);
  margin: 0 0 24px; max-width: 72ch;
}

/* Áreas relacionadas / grupos: responsive */
@media (max-width: 880px) { .area-cols { grid-template-columns: 1fr; } }

/* Retrato La Firma en móvil */
@media (max-width: 880px) {
  .firma-portrait { max-width: 460px; }
}


/* Texto justificado global */
.prose p, .lead, .hero__sub, .service-card__desc, .value-card span,
.step__desc, .faq__item p, .feature-row span, .callout span,
.op-feature__excerpt, .op-card__excerpt, .article__body,
.feature-card__quote, .check__text { text-align: justify; hyphens: auto; }


/* ==========================================================================
   PRÁCTICA — módulo unificado (áreas + servicios)
   ========================================================================== */
.practice { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 52px; }
.practice__col { background: #fff; padding: clamp(28px, 3vw, 42px); }
.practice__col--alt { background: var(--bg-alt); }
.practice__kicker { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--celeste); }
.practice__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(21px, 2.2vw, 25px); letter-spacing: -.015em; color: var(--navy); margin: 12px 0 10px; }
.practice__intro { font-size: 15px; line-height: 1.68; color: var(--gray); margin: 0 0 22px; max-width: 46ch; }

/* filas de servicio dentro del módulo */
.prow { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line-2); color: inherit; transition: padding-left var(--t-fast); }
.prow:first-of-type { border-top: none; }
.prow:hover { padding-left: 6px; }
.prow > svg { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; color: var(--celeste); }
.prow__b { font-family: var(--font-head); font-weight: 700; font-size: 16.5px; letter-spacing: -.01em; color: var(--navy); display: block; }
.prow:hover .prow__b { color: var(--celeste); }
.prow__s { font-size: 14px; line-height: 1.6; color: var(--gray); display: block; margin-top: 5px; }
.prow__go { margin-left: auto; align-self: center; color: var(--celeste); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast), transform var(--t-fast); }
.prow__go svg { width: 17px; height: 17px; display: block; }
.prow:hover .prow__go { opacity: 1; transform: none; }

/* grupos de áreas: chips-enlace */
.acols { display: flex; flex-direction: column; gap: 26px; }
.agroup__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.agroup__n { font-family: var(--font-head); font-weight: 800; font-size: 13px; color: var(--celeste); letter-spacing: .04em; }
.agroup__t { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; color: var(--navy); letter-spacing: -.01em; }
.achips { display: flex; flex-wrap: wrap; gap: 8px; }
.achip { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; transition: var(--t-fast); }
.achip:hover { color: #fff; background: var(--navy); border-color: var(--navy); }
.practice__col--alt .achip { background: #fff; }

@media (max-width: 900px) { .practice { grid-template-columns: 1fr; } }

/* ==========================================================================
   NUESTRO EQUIPO
   ========================================================================== */
.team-hero { position: relative; overflow: hidden; border-radius: 10px; background: var(--navy); box-shadow: var(--shadow-lg); }
.team-hero img { width: 100%; height: auto; display: block; aspect-ratio: 1260 / 640; object-fit: cover; }
.team-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,42,61,.10) 0%, rgba(14,42,61,0) 34%, rgba(14,42,61,.62) 100%); }
.team-hero__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 38px); }
.team-hero__cap > div { border-top: 1px solid rgba(255,255,255,.32); padding-top: 12px; }
.team-hero__cap b { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(14px, 1.35vw, 17px); color: #fff; letter-spacing: -.01em; }
.team-hero__cap span { display: block; font-size: clamp(11.5px, 1.1vw, 13px); color: var(--on-dark); margin-top: 3px; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.member { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--t); }
.member:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--on-dark); }
.member__ph { position: relative; background: var(--navy); }
.member__ph img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 50%; }
.member__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.member__role { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--celeste); }
.member__name { font-family: var(--font-head); font-weight: 800; font-size: 19.5px; letter-spacing: -.015em; color: var(--navy); margin: 10px 0 0; }
.member__rule { display: block; width: 34px; height: 2px; background: var(--celeste); margin: 14px 0 16px; }
.member__focus { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); font-weight: 500; margin: 0; }
.member__bio { font-size: 14.5px; line-height: 1.7; color: var(--gray); margin: 14px 0 0; text-align: justify; }
.member__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; }
.member__tags span { font-size: 12px; color: var(--ink-soft); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; }
.member__mail { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--celeste); margin-top: 20px; word-break: break-all; }
.member__mail svg { width: 16px; height: 16px; flex: 0 0 16px; }
.member__mail:hover { color: var(--celeste-2); }
@media (max-width: 980px) { .team-grid { grid-template-columns: 1fr 1fr; } .team-hero__cap { gap: 12px; } }
@media (max-width: 660px) { .team-grid { grid-template-columns: 1fr; } .team-hero__cap { grid-template-columns: 1fr; gap: 8px; padding: 18px; } .team-hero__cap > div:not(:first-child) { display: none; } }

/* ==========================================================================
   CASOS DE RELEVANCIA
   ========================================================================== */
.cases { border-top: 1px solid rgba(255,255,255,.14); margin-top: 46px; }
.case { border-bottom: 1px solid rgba(255,255,255,.14); }
.case > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 20px; padding: 26px 0; }
.case > summary::-webkit-details-marker { display: none; }
.case__n { font-family: var(--font-head); font-weight: 800; font-size: 13px; color: var(--celeste); letter-spacing: .06em; }
.case__t { font-family: var(--font-head); font-weight: 700; font-size: clamp(18px, 2vw, 22px); color: #fff; letter-spacing: -.015em; }
.case__tag { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 13px; white-space: nowrap; }
.case__plus { width: 30px; height: 30px; flex: none; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; display: grid; place-items: center; color: var(--celeste); font-size: 17px; font-weight: 300; line-height: 1; transition: var(--t-fast); }
.case:hover .case__plus { background: var(--celeste); color: var(--navy); border-color: var(--celeste); }
.case[open] .case__plus { background: var(--celeste); color: var(--navy); border-color: var(--celeste); }
.case[open] .case__plus::after { content: "\2013"; }
.case:not([open]) .case__plus::after { content: "+"; }
.case__panel { display: grid; grid-template-columns: 250px 1fr; gap: clamp(22px, 3vw, 40px); padding: 4px 0 38px; align-items: start; }
.case__panel--solo { grid-template-columns: 1fr; max-width: 92ch; }
.case__ph { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid rgba(92,138,166,.3); }
.case__ph img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 50%; }
.case__ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 13px; background: linear-gradient(180deg, rgba(8,26,38,0), rgba(8,26,38,.92)); }
.case__ph b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: #fff; }
.case__ph span { display: block; font-size: 11.5px; color: var(--on-dark); margin-top: 2px; }
.case__body p { font-size: 15.5px; line-height: 1.74; color: var(--on-dark); margin: 0 0 14px; text-align: justify; }
.case__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.case__meta div { min-width: 130px; }
.case__meta dt { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(185,206,220,.6); }
.case__meta dd { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: #fff; margin: 5px 0 0; }
.case__src { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--celeste); margin-top: 18px; }
.case__src svg { width: 14px; height: 14px; }
.case__src:hover { color: #fff; }
.case__note { font-size: 12.5px; line-height: 1.6; color: rgba(185,206,220,.55); margin: 34px 0 0; max-width: 86ch; }
@media (max-width: 760px) {
  .case > summary { grid-template-columns: auto 1fr auto; gap: 12px; }
  .case__tag { display: none; }
  .case__panel { grid-template-columns: 1fr; }
  .case__ph { max-width: 260px; }
}

/* ==========================================================================
   ALIANZAS — página
   ========================================================================== */
.path-list { display: flex; flex-direction: column; }
.path { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 24px 0; border-top: 1px solid var(--line); }
.path:last-child { border-bottom: 1px solid var(--line); }
.path--on { border-top-width: 2px; border-top-color: var(--celeste); }
.path__n { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--line-2); letter-spacing: .02em; }
.path--on .path__n { color: var(--celeste); }
.path b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--gray); }
.path--on b { color: var(--navy); }
.path span { display: block; font-size: 14.5px; line-height: 1.66; color: var(--gray); margin-top: 6px; max-width: 52ch; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); margin-top: 48px; }
.principle { background: var(--navy); padding: 30px 26px; }
.principle__n { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .22em; color: rgba(185,206,220,.55); }
.principle b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 17.5px; color: #fff; letter-spacing: -.01em; margin: 14px 0 9px; }
.principle span { display: block; font-size: 14px; line-height: 1.66; color: var(--on-dark); text-align: justify; }
@media (max-width: 900px) { .principles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .principles { grid-template-columns: 1fr; } }

.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 46px; }
.mode { border-top: 2px solid var(--celeste); padding-top: 20px; }
.mode__n { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--celeste); letter-spacing: -.02em; line-height: 1; }
.mode b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy); letter-spacing: -.01em; margin: 14px 0 9px; }
.mode span { display: block; font-size: 14px; line-height: 1.66; color: var(--gray); text-align: justify; }
@media (max-width: 940px) { .modes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .modes { grid-template-columns: 1fr; } }

.profile-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.profile-row { border-top: 1px solid var(--line); padding-top: 20px; }
.profile-row .k { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--celeste); }
.profile-row b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--navy); letter-spacing: -.01em; margin: 10px 0 10px; }
.profile-row p { font-size: 14.5px; line-height: 1.7; color: var(--gray); margin: 0; }
@media (max-width: 900px) { .profile-rows { grid-template-columns: 1fr; } }

.ally-cta { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.ally-card { border: 1px solid rgba(255,255,255,.16); border-radius: 10px; overflow: hidden; }
.ally-card__row { display: flex; flex-direction: column; gap: 4px; padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ally-card__row:last-child { border-bottom: none; }
.ally-card__row .k { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(185,206,220,.6); }
.ally-card__row .v { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: #fff; word-break: break-word; }
.ally-card__row a.v:hover { color: var(--celeste); }
@media (max-width: 900px) { .ally-cta { grid-template-columns: 1fr; } }


/* Gutter del hero */
.hero__inner,
.hero--page .hero__inner,
.hero--area .hero__inner { padding-left: var(--gutter); padding-right: var(--gutter); }


/* Iconos de callout */
.callout > svg { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; }


/* Equipo: enlace y perfil */
.team-hero--link { display: block; position: relative; }
.team-hero--link .team-hero__over {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 2.4vw, 30px) clamp(20px, 3vw, 36px);
}
.team-hero__lbl { font-family: var(--font-head); font-weight: 700; font-size: clamp(15px, 1.7vw, 19px); color: #fff; letter-spacing: -.01em; }
.team-hero__go { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--celeste); color: var(--navy); transition: var(--t-fast); }
.team-hero__go svg { width: 20px; height: 20px; }
.team-hero--link:hover .team-hero__go { background: #fff; transform: translateX(3px); }

.member { color: inherit; }
.member .link-more { margin-top: auto; }

.prof-photo { margin: 0 0 28px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--navy); box-shadow: var(--shadow); }
.prof-photo img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.prof-side { border-top: 2px solid var(--celeste); padding-top: 24px; }
.prof-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; }
.prof-list li { font-size: 14px; line-height: 1.6; color: var(--ink-soft); padding: 12px 0; border-bottom: 1px solid var(--line); }
.prof-list li:last-child { border-bottom: none; }


/* Sin desbordamiento horizontal */
.hero, main > section { overflow-x: clip; }

.achip--static { cursor: default; }
.achip--static:hover { color: var(--ink-soft); background: #fff; border-color: var(--line); }

/* feature-row sobre fondo claro */
.section--alt .feature-row, .section:not(.section--dark) .feature-row { border-top-color: var(--line); }
.section--alt .feature-list .feature-row:last-child,
.section:not(.section--dark) .feature-list .feature-row:last-child { border-bottom-color: var(--line); }
.section--alt .feature-row b, .section:not(.section--dark) .feature-row b { color: var(--navy); }
.section--alt .feature-row span, .section:not(.section--dark) .feature-row span { color: var(--ink-soft); }

/* Redes sociales y medios de pago */
.social { display: flex; gap: 10px; margin-top: 22px; }
.social a {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: var(--on-dark);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.social a svg { width: 18px; height: 18px; display: block; }
.social a:hover { color: var(--navy); background: var(--celeste); border-color: var(--celeste); transform: translateY(-2px); }

.footer-pay {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 44px; padding-top: 26px;
}
.footer-pay__t {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--celeste);
}
.paylist { display: flex; flex-wrap: wrap; gap: 10px; }
.paylist li {
  display: grid; place-items: center;
  width: 52px; height: 33px; flex: 0 0 52px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  color: var(--on-dark);
}
.paylist svg { width: 40px; height: 24px; display: block; }
.footer-pay + .footer-bottom { border-top: none; margin-top: 22px; padding-top: 0; }
@media (max-width: 560px) {
  .footer-pay { gap: 12px; }
  .paylist li { width: 46px; height: 30px; flex: 0 0 46px; }
  .paylist svg { width: 35px; height: 21px; }
}

/* Tarjetas de crédito junto al formulario */
.contact-pay { border-top: 1px solid rgba(255,255,255,.12); margin-top: 38px; padding-top: 26px; }
.contact-pay__t {
  display: block; font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--celeste); margin-bottom: 16px;
}

/* Casos — más aire y jerarquía */
.case > summary { grid-template-columns: auto 1fr auto auto; padding: 24px 4px; transition: background var(--t-fast); }
.case > summary:hover { background: rgba(255,255,255,.03); }
.case__n { font-size: 12px; opacity: .8; }
.case__tag {
  border: none; background: none; padding: 0;
  font-size: 10.5px; letter-spacing: .16em; color: rgba(185,206,220,.7);
}
.case[open] > summary { background: rgba(255,255,255,.03); }
.case[open] .case__t { color: var(--celeste-2); }
.case__panel { padding: 2px 4px 34px; }

/* Equipo — foto completa + banda */
.team-split { margin-top: clamp(34px, 4vw, 50px); }
.team-split__photo { margin: 0; background: var(--navy); }
.team-split__photo img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1400 / 620; object-fit: cover; object-position: 50% 50%;
}
.team-split__panel {
  background: var(--navy); color: #fff;
  border-top: 3px solid var(--celeste);
  padding: clamp(28px, 3vw, 42px) clamp(24px, 3vw, 44px);
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(26px, 4vw, 56px); align-items: start;
}
.team-split__quote {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(19px, 1.85vw, 25px); line-height: 1.36;
  letter-spacing: -.015em; color: #fff; margin: 0; text-wrap: pretty;
}
.team-roster { margin: 0; border-top: 1px solid rgba(255,255,255,.14); }
.team-roster li { border-bottom: 1px solid rgba(255,255,255,.14); }
.team-roster a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 12px 0; transition: padding-left var(--t-fast);
}
.team-roster b { font-family: var(--font-head); font-weight: 700; font-size: 14.6px; color: #fff; letter-spacing: -.01em; }
.team-roster i { font-style: normal; font-size: 12.5px; color: rgba(185,206,220,.75); flex: none; text-align: right; max-width: 42%; }
.team-roster a:hover { padding-left: 6px; }
.team-roster a:hover b { color: var(--celeste-2); }
.link-more--dark { color: var(--celeste); margin-top: clamp(20px, 2vw, 28px); white-space: nowrap; }
.link-more--dark:hover { color: #fff; }
@media (max-width: 1040px) {
  .team-roster a { flex-direction: column; gap: 2px; }
  .team-roster i { flex: initial; text-align: left; max-width: none; }
}
@media (max-width: 820px) {
  .team-split__panel { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 520px) {
  .team-roster a { flex-direction: column; gap: 2px; }
  .team-roster i { flex: initial; }
}

/* Equipo — fichas con panel */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(40px, 4vw, 58px); }
.pcard { display: flex; flex-direction: column; color: inherit; }
.pcard__ph { display: block; overflow: hidden; background: var(--navy); }
.pcard__ph img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%;
  transition: transform 1.1s var(--ease);
}
.pcard:hover .pcard__ph img { transform: scale(1.045); }
.pcard__panel {
  display: flex; flex-direction: column; flex: 1;
  position: relative; z-index: 2;
  margin: -56px 18px 0; padding: clamp(22px, 1.9vw, 28px);
  background: var(--navy); color: #fff;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t), margin var(--t);
}
.pcard__panel::before { content: ""; position: absolute; left: 0; top: 0; width: 52px; height: 3px; background: var(--celeste); }
.pcard:hover .pcard__panel { transform: translateY(-6px); }
.pcard__role { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--celeste); }
.pcard__name { font-family: var(--font-head); font-weight: 800; font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -.018em; color: #fff; margin-top: 9px; }
.pcard__rule { display: block; width: 34px; height: 2px; background: rgba(255,255,255,.25); margin: 14px 0; }
.pcard__focus { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--celeste-2); }
.pcard__bio { font-size: 13.5px; line-height: 1.68; color: rgba(185,206,220,.82); margin-top: 10px; text-align: justify; }
.pcard__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--celeste);
  transition: gap var(--t-fast), color var(--t-fast);
}
.pcard__go svg { width: 16px; height: 16px; }
.pcard:hover .pcard__go { gap: 13px; color: #fff; }
@media (max-width: 900px) { .pgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .pgrid { grid-template-columns: 1fr; gap: 34px; }
  .pcard__ph img { aspect-ratio: 3 / 2; object-position: 50% 16%; }
  .pcard__panel { margin: -46px 14px 0; }
}