/* ═══════════════════════════════════════════════════════════════════════════
   HOME — Despacho Tirzo & Bautista Abogados
   Estilos específicos del index: hero split, división de servicios, beneficios,
   cifras (contadores) y CTA final. Consume tokens. Colores sólidos, esquinas rectas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── HERO (foto de Puebla + overlay oscuro) ─────── */
.hero--bg {
  position: relative;
  padding-block: calc(var(--sp-16) + var(--sp-8));   /* hero un poco más alto en escritorio */
  background-image: image-set(
    url("../images/hero/hero-puebla.webp") type("image/webp"),
    url("../images/hero/hero-puebla.jpg") type("image/jpeg")
  );
  background-color: var(--c-navy);          /* fallback mientras carga */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Overlay OSCURO sólido semitransparente (sin degradado, regla de la casa) */
.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(16, 28, 44, 0.62);  /* marino muy oscuro translúcido */
}
.hero__inner {
  position: relative;                        /* por encima del overlay */
  z-index: 1;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}
.hero__content { display: block; }
.hero__title {
  font-size: var(--fs-5xl);
  line-height: 1.1;
  color: var(--c-white);
}
.hero__subtitle {
  margin-top: var(--sp-4);
  font-size: var(--fs-xl);
  color: var(--c-white);
  font-weight: var(--fw-medium);
}
.hero__actions {
  margin-top: var(--sp-6);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
}
/* Los dos botones del hero, mismo ancho e intercambio de color en cortina */
.hero__actions .btn {
  min-width: 240px;
}
.hero__actions .btn--primary {
  background-color: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}
.hero__actions .btn--primary:hover,
.hero__actions .btn--primary:focus-visible {
  background-color: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}
.hero__actions .btn--ghost-light {
  background-color: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-text);
}
.hero__actions .btn--ghost-light:hover,
.hero__actions .btn--ghost-light:focus-visible {
  background-color: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-navy);
}

.hero__actions .btn--primary::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  align-self: center;
  width: var(--hero-arrow-width, 1.85rem);
  height: var(--hero-arrow-height, 1.1rem);
  margin-left: var(--sp-2);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 18'%3E%3Cpath d='M2 9h29M24 2.5 31 9l-7 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 18'%3E%3Cpath d='M2 9h29M24 2.5 31 9l-7 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: width var(--t-fast);
}
.hero__actions .btn--primary:hover::after,
.hero__actions .btn--primary:focus-visible::after {
  width: var(--hero-arrow-hover-width, 2.15rem);
}

/* ───────────────────────────── INTRO / COMPROMISO ─────────────────────────── */
.intro { text-align: center; }
.intro__text { max-width: 68ch; margin-inline: auto; font-size: var(--fs-lg); }

/* ───────────────────────────── DIVISIÓN DE SERVICIOS ─────────────────────── */
.division { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); align-items: stretch; grid-auto-rows: 1fr; }
.division--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.division__card {
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: var(--sp-8);
  box-shadow: var(--sh-sm);         /* solo la sombra base, sin franja ni hover */
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.division__card--link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 4px solid var(--c-navy);
  color: var(--c-text-soft);
  text-decoration: none;
}
.division__card--link::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  background-color: var(--c-navy);
  transform: translateY(-101%);
  transition: transform 0.42s ease;
}
.division__card--link > * {
  position: relative;
  z-index: 1;
}
.division__card--link .division__title,
.division__card--link p,
.division__card--link .division__icon {
  transition: color var(--t-base);
}
.division__card--link:hover::before,
.division__card--link:focus-visible::before {
  transform: translateY(0);
}
.division__card--link:hover,
.division__card--link:focus-visible,
.division__card--link:hover .division__title,
.division__card--link:focus-visible .division__title,
.division__card--link:hover p,
.division__card--link:focus-visible p,
.division__card--link:hover .division__icon,
.division__card--link:focus-visible .division__icon {
  color: var(--c-white);
}
.division__card--link:hover .division__svg,
.division__card--link:focus-visible .division__svg {
  filter: brightness(0) invert(1);
}
.division__icon { color: var(--c-navy); margin-bottom: var(--sp-4); display: flex; justify-content: center; }
.division__icon svg { width: 52px; height: 52px; }
.division__icon img { width: 52px; height: 52px; }
/* SVG de línea (jurado / personas) coloreados en MARINO con filtro. */
.division__svg {
  filter: invert(21%) sepia(38%) saturate(1500%) hue-rotate(178deg) brightness(94%) contrast(90%);
}
.division__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.division__quote {
  margin-top: var(--sp-5);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--c-navy);
  color: var(--c-navy);
  font-weight: var(--fw-medium);
  font-style: normal;                /* nada de itálicas */
}

/* ───────────────────────────── VALORES / PILARES (grid iconos) ────────────── */
.pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); }
.pillar { min-width: 0; text-align: center; padding: var(--sp-5); }
.pillar__icon { color: var(--c-navy); display: flex; justify-content: center; margin-bottom: var(--sp-3); }
.pillar__icon svg { width: 56px; height: 56px; }
.pillar__title {
  font-size: var(--fs-lg);
  color: var(--c-navy);
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

/* Sección Valores como franja azul: fondo marino, texto e iconos en blanco. */
.section--band { background-color: var(--c-navy); }
.section--band .section__title,
.section--band .pillar__title { color: var(--c-white); }
.section--band .pillar__icon { color: var(--c-white); }
.section--band .pillar__icon img { filter: brightness(0) invert(1); }  /* icono monocromo → blanco */

/* En escritorio, los cinco valores disponen del ancho necesario para que los
   nombres largos permanezcan en una sola línea sin afectar el flujo móvil. */
@media (min-width: 981px) {
  .pillars {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(var(--sp-2), 1.4vw, var(--sp-5));
  }

  .pillar {
    padding-inline: clamp(var(--sp-1), 1vw, var(--sp-4));
  }

  .pillar__title {
    font-size: clamp(0.82rem, 1.2vw, var(--fs-lg));
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/* ───────────────────────────── BENEFICIOS (tarjetas) ──────────────────────── */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.benefit {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 112px;
  padding: var(--sp-5);
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-navy);
  box-shadow: var(--sh-sm);
  color: var(--c-navy);              /* texto de beneficios en azul */
  font-weight: var(--fw-bold);       /* y en negritas */
}
.benefit__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: invert(21%) sepia(38%) saturate(1500%) hue-rotate(178deg) brightness(94%) contrast(90%);
}

/* ───────────────────────────── CIFRAS (contadores) ────────────────────────── */
/* Banda marina sólida con números grandes en blanco. */
.stats { background-color: var(--c-navy); color: var(--c-white); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  padding-block: var(--sp-10);
  text-align: center;
}
.stat__value {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  line-height: 1;
}
.stat__value .plus { color: var(--c-white); }
.stat__label {
  margin-top: var(--sp-2);
  color: rgba(255, 255, 255, 0.8);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

/* ───────────────────────────── EQUIPO (8 abogados) ────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.team-member {
  text-align: center;
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
}
.team-member__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  height: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.team-member__link::before {
  content: "";
  grid-column: 1;
  grid-row: 2 / 4;
  z-index: 0;
  background-color: var(--c-navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s ease;
}
.team-member__photo {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  background-color: var(--c-surface);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: block;
}
.team-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  transition: none;
}
.team-member__name {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-1);
  font-size: var(--fs-lg);
  color: var(--c-navy);
  text-align: left;
}
.team-member__role {
  grid-column: 1;
  grid-row: 3;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--sp-1) var(--sp-4) var(--sp-5);
  color: var(--c-text);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  text-align: left;
}
.team-member__name,
.team-member__role {
  transition: color var(--t-base);
}
.team-member__link:hover,
.team-member__link:focus-visible {
  outline-offset: 2px;
}
.team-member__link:hover::before,
.team-member__link:focus-visible::before {
  transform: scaleX(1);
}
.team-member__link:hover .team-member__name,
.team-member__link:hover .team-member__role,
.team-member__link:focus-visible .team-member__name,
.team-member__link:focus-visible .team-member__role {
  color: var(--c-white);
}
.team-directory__cta { margin-top: var(--sp-8); text-align: center; }

/* ───────────────────────────── ESTRATEGIA JURÍDICA ────────────────────────── */
.strategy__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--sp-8);
  align-items: center;
}
.strategy__title { font-size: var(--fs-3xl); color: var(--c-navy); margin-bottom: var(--sp-4); }
.strategy__text { font-size: var(--fs-lg); color: var(--c-text-soft); }
/* Quote del Director General: bloque azul con comillas */
.strategy__quote {
  background-color: var(--c-navy);
  color: var(--c-white);
  padding: var(--sp-8);
}
.strategy__quote-mark { display: block; margin-bottom: var(--sp-3); }
.strategy__quote-mark img { width: 40px; height: 40px; filter: brightness(0) invert(1); opacity: 0.85; }
.strategy__quote-text { color: var(--c-white); font-weight: var(--fw-medium); font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.strategy__quote-role { color: var(--c-white); font-weight: var(--fw-bold); margin: 0; }

/* ───────────────────────────── CTA FINAL ──────────────────────────────────── */
/* Fondo BLANCO (regla de la casa: mismo fondo en todas las secciones). */
.cta-final { background-color: var(--c-bg); text-align: center; }
.cta-final__title { font-size: var(--fs-4xl); }
.cta-final__text { max-width: 60ch; margin: var(--sp-4) auto var(--sp-6); font-size: var(--fs-lg); }

/* ───────────────────────────── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1080px) {
  .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .hero__title { font-size: var(--fs-4xl); }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .strategy__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero__actions {
    display: flex;
    width: min(100%, 13rem);
    margin-inline: auto;
  }
  .hero__actions .btn {
    --hero-arrow-width: 1.45rem;
    --hero-arrow-hover-width: 1.65rem;
    --hero-arrow-height: 0.9rem;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0.5rem 0.35rem;
    font-size: var(--fs-sm);
    line-height: 1.15;
  }
  .division { grid-template-columns: 1fr; }         /* 1 por fila */
  .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-3);
  }  /* 5 valores → 2+2+1 */
  .pillar {
    padding: var(--sp-4) 0;
  }
  .pillar__title {
    font-size: clamp(0.8125rem, 3.75vw, var(--fs-sm));
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }
  .benefit {
    min-height: 142px;
    padding: var(--sp-4);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .benefit__icon {
    width: 38px;
    height: 38px;
  }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } /* 4 filas de 2 */
  .team-member__link .team-member__name { font-size: var(--fs-base); line-height: 1.25; }
  .strategy__inner { grid-template-columns: 1fr; }  /* estrategia en 1 columna */
  /* Título del hero más pequeño en móvil para que no se desborde */
  .hero__title { font-size: var(--fs-2xl); }
  .hero__subtitle { font-size: var(--fs-lg); }
  .hero--bg { padding-block: calc(var(--sp-12) + 0.75rem); }
  .stat__value { font-size: var(--fs-4xl); }
  .section__title, .page-hero__title, .cta-final__title { font-size: var(--fs-2xl); }
}
/* Evitar desbordes de palabras largas en títulos en cualquier ancho estrecho */
.hero__title, .section__title, .page-hero__title, h1, h2, h3 {
  overflow-wrap: break-word;
}