/* ==========================================================================
   Sección 3 — ¿Qué implica la Ley de Movilidad? (PMST_ES, Figma 929:7428)
   2 columnas: card (foto + gradiente cyan + badge rojo con fecha límite) +
   contenido (H2 + 2 párrafos + 4 feat-row con icono check).
   .feat-row es reutilizable (se usa también en secciones siguientes).
   ========================================================================== */

.law__grid {
  display: flex;
  align-items: center;
  gap: 48px;
}

/* ---- Columna izquierda: card ---- */
.law__card {
  flex: 1 1 0;
  min-width: 0;
  order: -1; /* card antes en la vista (izq/desktop, arriba/mobile); en el DOM va después para outline h2→h3 */
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-section);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}
.law__card-body {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 498px;
  padding: 48px 48px 24px;
  color: #fff;
  background: linear-gradient(162.28deg, #9cd8e8 0%, #37b1d3 100%);
}
.law__card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.law__card-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(69, 182, 214, 0.5) 36.14%, rgb(55, 177, 211) 100%),
    linear-gradient(177.24deg, rgba(0, 0, 0, 0) 1.8%, rgba(0, 0, 0, 0.8) 95.9%);
}
.law__card-title {
  font-size: var(--fs-h3); /* 32px */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  color: #fff;
}
.law__card-text {
  font-size: var(--fs-p20); /* 20px */
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: #fff;
}

/* badge rojo con fecha límite */
.law__badge {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 17px 49px;
  background: var(--color-red-brand, #e2003b);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}
.law__badge-ic { flex-shrink: 0; width: 28px; height: 25px; margin-top: 2px; }
.law__badge-ic svg { width: 100%; height: 100%; }
.law__badge-text {
  font-size: var(--fs-p22); /* 22px */
  font-weight: var(--fw-bold);
  line-height: 1.25;
}
.law__badge-date {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 12px;
  background: #fff;
  color: var(--color-red-brand, #e2003b);
  font-weight: var(--fw-bold);
}

/* ---- Columna derecha: contenido ---- */
.law__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.law__head { display: flex; flex-direction: column; gap: 24px; }
.law__title {
  font-size: var(--fs-h2); /* 48px */
  font-weight: var(--fw-light);
  line-height: var(--lh-h2);
  color: var(--color-text);
}
.law__intro {
  font-size: var(--fs-p22); /* 22px */
  font-weight: var(--fw-regular);
  line-height: 1.3;
  color: var(--color-text);
}

/* ---- feat-row (reutilizable) ---- */
.law__feats { display: flex; flex-direction: column; }
.feat-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-block: 14px;
}
.feat-row__ic {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: linear-gradient(157.26deg, #9cd8e8 0%, #37b1d3 100%);
  color: #fff;
}
.feat-row__ic svg { width: 19px; height: 19px; }
.feat-row__text {
  font-size: var(--fs-p22); /* 22px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-text);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .law__grid { flex-direction: column; align-items: stretch; gap: 32px; }
  .law__card-body { min-height: 0; }
}

@media (max-width: 720px) {
  .law__card-body { padding: 32px 24px 20px; }
  .law__badge { padding: 16px 24px; }
  .law__title { font-size: 2rem; } /* ~32px */
  .law__card-title { font-size: 1.5rem; }
  .feat-row__text, .law__intro, .law__card-text { font-size: var(--fs-body); }
}