/* Logo institucional. */
.brand-logo {
  display: block;
  width: 285px;
  height: auto;
}

.independence-note {
  max-width: 660px;
  margin: 28px 0 0;
  padding: 15px 17px;
  border-left: 4px solid #174b78;
  background: #ececea;
  color: #505050;
  font-size: .86rem;
}

.independence-note strong {
  display: block;
  color: #171717;
  margin-bottom: 2px;
}

.scope-notice {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-left: 4px solid #6fa5cf;
  padding: 18px;
  margin-top: 28px;
  max-width: 500px;
}

.scope-notice span {
  color: #d2dce4;
  font-size: .88rem;
}

#penal-field[hidden] {
  display: none;
}

.brand strong,
.brand small,
nav a,
.hero h1,
.section h2 {
  color: #171717;
}

nav a {
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -.025em;
}

.consult-section {
  background: #1a1a1a;
}

.consult-copy > p {
  color: #dedede;
}

.contact-placeholder span,
.contact-placeholder small {
  color: #e7e7e7;
}

.contact-placeholder a {
  color: #fff;
  text-decoration-color: #6fa5cf;
  text-underline-offset: 5px;
}

.quick-consult {
  background: #174b78;
  box-shadow: 18px 18px 0 #bdbdb8;
}

/* Dirección visual: campaña tipográfica de alto impacto */
.hero {
  min-height: calc(100vh - 88px);
  align-items: center;
  padding-top: 64px;
  padding-bottom: 74px;
}

.hero h1,
.section h2,
.method h2,
.consult-section h2,
.criminal-impact h2 {
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.065em;
}

.hero h1 {
  font-size: clamp(3.6rem, 7vw, 7.2rem);
  line-height: .84;
  max-width: 850px;
}

.hero-lead {
  max-width: 680px;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.35;
  font-weight: 700;
}

.independence-note {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) 1.2fr;
  gap: 22px;
  align-items: center;
  max-width: 760px;
  margin-top: 34px;
  padding: 22px 24px;
  border: 0;
  border-top: 5px solid #174b78;
  background: #fff;
  box-shadow: 10px 10px 0 #d8d8d4;
}

.independence-note strong {
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: -.045em;
}

.independence-note span {
  font-size: .96rem;
  line-height: 1.45;
}

.quick-consult {
  padding: 48px 40px 42px;
}

.quick-consult h2 {
  max-width: 390px;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: clamp(2.2rem, 3.3vw, 3.5rem);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.055em;
}

.problem-links a {
  padding: 17px 0;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 1.02rem;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: -.025em;
  transition: padding-left .18s ease, color .18s ease, background-color .18s ease;
}

.problem-links a:hover,
.problem-links a:focus-visible {
  padding-left: 12px;
  color: #fff;
  background: rgba(255,255,255,.08);
}

.section-heading {
  align-items: center;
}

.section h2 {
  font-size: clamp(3rem, 5.8vw, 6rem);
  line-height: .85;
}

.section-punch {
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  line-height: 1.22;
}

.section-punch strong {
  color: #174b78;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
}

.practice-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  border: 0;
}

.practice-card,
.practice-card.featured {
  position: relative;
  min-height: 370px;
  overflow: hidden;
  padding: 30px 28px;
  border: 1px solid var(--line);
  background: #fff;
  isolation: isolate;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.practice-card > span:first-child {
  position: absolute;
  right: -3px;
  top: -13px;
  z-index: -1;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 5.5rem;
  line-height: 1;
  color: #eeeeec;
}

.practice-card h3,
.practice-card.featured h3 {
  max-width: 240px;
  margin: 48px 0 18px;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: clamp(1.65rem, 2.3vw, 2.35rem);
  line-height: .94;
  text-transform: uppercase;
  letter-spacing: -.05em;
}

.practice-card.fraud-card h3 {
  max-width: none;
  font-size: clamp(1.18rem, 1.55vw, 1.55rem);
  letter-spacing: -.06em;
}

.practice-card.family-card h3 {
  max-width: none;
  font-size: clamp(1.4rem, 1.85vw, 1.85rem);
}

.practice-card p,
.practice-card.featured p {
  font-size: 1.12rem;
  line-height: 1.48;
}

.card-cta {
  position: static;
  z-index: auto;
  margin-top: auto;
  font-family: inherit;
  font-size: 1.12rem;
  line-height: 1.48;
  text-transform: none;
  text-decoration: none;
  letter-spacing: normal;
  color: var(--ink);
}

.card-cta::after {
  content: "  →";
  color: #174b78;
}

.practice-card:hover > span:first-child,
.practice-card:focus-visible > span:first-child {
  color: rgba(255,255,255,.12);
}

.practice-card:hover .card-cta,
.practice-card:focus-visible .card-cta,
.practice-card:hover .card-cta::after,
.practice-card:focus-visible .card-cta::after {
  color: #fff;
}

.practice-card:focus-visible {
  outline: 4px solid #174b78;
  outline-offset: 4px;
}

.criminal-impact {
  position: relative;
  overflow: hidden;
  background: #174b78;
  color: #fff;
  padding: 105px max(24px,calc((100vw - var(--max))/2 + 24px));
}

.criminal-impact::after {
  content: "PENAL";
  position: absolute;
  right: -2vw;
  bottom: -6vw;
  color: rgba(255,255,255,.055);
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: clamp(8rem, 22vw, 22rem);
  line-height: .8;
  letter-spacing: -.09em;
  pointer-events: none;
}

.criminal-kicker {
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.criminal-impact h2 {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0;
  color: #fff;
  font-size: clamp(4rem, 9vw, 9.5rem);
  line-height: .78;
}

.criminal-impact > p {
  position: relative;
  z-index: 1;
  max-width: 810px;
  margin: 38px 0 0;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.48;
  font-weight: 700;
}

.criminal-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.criminal-actions a {
  padding: 13px 17px;
  border: 2px solid #fff;
  color: #fff;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: .82rem;
  text-transform: uppercase;
  text-decoration: none;
}

.criminal-actions a:hover,
.criminal-actions a:focus-visible {
  background: #fff;
  color: #174b78;
}

.method h2,
.consult-section h2 {
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  line-height: .83;
}

.method-steps h3 {
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 1.55rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.035em;
}

.team-statement h2 {
  font-size: clamp(3rem, 5vw, 5.2rem);
  line-height: .85;
}

.scope-notice strong {
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 1050px) {
  .practice-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .hero { min-height: auto; }
  .hero h1 { font-size: clamp(3.2rem, 15vw, 4.8rem); }
  .independence-note { grid-template-columns: 1fr; }
  .quick-consult h2 { font-size: 2.55rem; }
  .problem-links a { font-size: .96rem; }
  .practice-grid { grid-template-columns: 1fr; gap: 10px; }
  .practice-card,.practice-card.featured { min-height: 330px; }
  .practice-card h3,.practice-card.featured h3 { font-size: 2.15rem; }
  .practice-card.fraud-card h3 { font-size: 1.55rem; }
  .practice-card.family-card h3 { font-size: 1.9rem; }
  .criminal-impact { padding-top: 78px; padding-bottom: 82px; }
  .criminal-impact h2 { font-size: clamp(3.6rem, 17vw, 5.5rem); }
  .criminal-actions { display: grid; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .quick-consult { animation: rise-in .55s ease both; }
  .quick-consult { animation-delay: .12s; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}

.practice-card,
.practice-card.featured {
  background: rgba(255, 255, 255, .32);
  color: var(--ink);
  border-bottom-color: var(--line);
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}

.practice-card.featured h3,
.practice-card h3 {
  color: var(--navy);
}

.practice-card.featured p,
.practice-card p {
  color: var(--muted);
}

.practice-card:hover,
.practice-card:focus-within,
.practice-card:active {
  background: #174b78;
  color: #fff;
  transform: translateY(-3px);
}

.practice-card:hover h3,
.practice-card:focus-within h3,
.practice-card:active h3,
.practice-card:hover p,
.practice-card:focus-within p,
.practice-card:active p {
  color: #fff;
}

.practice-card:hover > span:first-child,
.practice-card:focus-within > span:first-child,
.practice-card:active > span:first-child {
  color: #d5e6f2;
}

.consult-form .button.primary {
  background: #123b2f;
  border-color: #123b2f;
}

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: #1ebe5d;
  transform: translateY(-2px);
}

.whatsapp-float:focus-visible {
  outline: 3px solid #6fa5cf;
  outline-offset: 3px;
}

.whatsapp-float svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 600px) {
  .brand-logo {
    width: 215px;
  }

  .footer-brand .brand-logo {
    width: 270px;
    max-width: 100%;
  }

  .quick-consult {
    box-shadow: 10px 10px 0 #bdbdb8;
  }

  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
  }

  .whatsapp-float span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}