/**
 * cards.css — bloques de contenido: principios, checklists, stepper y
 * metodología, tarjetas de servicio/sector, hero de servicio y las tarjetas
 * de la página de contacto/nosotros.
 */

/* ---------- Principios / listas con ícono ---------- */

.principles-list {
  display: grid;
  gap: var(--space-4);
}

.principles-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  padding: var(--space-4);
  background: var(--paper);
  border-radius: var(--radius-sm);
}

.principles-list .icon {
  color: var(--red);
  width: 1.4em;
  height: 1.4em;
}

.principles-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 700px) {
  .principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .principles-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.principles-grid__item {
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
}

.principles-grid__icon {
  width: 2rem;
  height: 2rem;
  color: var(--yellow);
  margin-bottom: var(--space-4);
}

.principles-grid__item h3 {
  color: var(--white);
  font-size: 1.15rem;
  margin-bottom: var(--space-2);
}

.principles-grid__item p {
  color: var(--on-navy-soft);
  margin: 0;
  font-size: 0.94rem;
}

/* ---------- Checklists ---------- */

.checklist,
.credential-list {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.checklist li,
.credential-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-weight: 600;
}

.checklist__check,
.credential-list__check {
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--yellow);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  padding: 3px;
  width: 1.3em;
  height: 1.3em;
}

.credential-list__check {
  color: var(--white);
  background: var(--navy);
}

.why-grid__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.why-grid__number {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 12vw, 8rem);
  color: var(--white);
  line-height: 0.9;
}

.why-grid__number-label {
  font-weight: 700;
  max-width: 20ch;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Metodología ---------- */

.methodology-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
}

@media (min-width: 700px) {
  .methodology-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .methodology-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.methodology-grid__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--red);
  margin-bottom: var(--space-2);
}

.methodology-grid li p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  margin: 0;
}

/* ---------- Tarjetas de servicio ---------- */

.services-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 700px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Bento asimétrico en vez de 3 columnas iguales: la 01 (Estrategia) y la 06
   (Reputación y Crisis, ahora la 06) ocupan doble ancho como piezas destacadas; el resto
   respeta el flujo natural con "dense" para no dejar huecos. */
@media (min-width: 1100px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }

  .services-grid > a:nth-child(1) {
    grid-column: span 2;
    min-height: 320px;
  }

  .services-grid > a:nth-child(6) {
    grid-column: span 2;
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  min-height: 260px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* Spotlight que sigue el cursor (posición inyectada por main.js vía
   --spot-x/--spot-y). Solo pinta opacidad/gradiente: no afecta layout. */
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    360px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(255, 255, 255, 0.16),
    transparent 60%
  );
  transition: opacity 0.3s var(--ease);
}

.service-card:hover::after {
  opacity: 1;
}

/* Sobre fondo blanco un halo blanco no se ve: se oscurece el tinte. */
.service-card.theme-paper::after {
  background: radial-gradient(
    360px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(20, 25, 43, 0.06),
    transparent 60%
  );
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.service-card:active {
  transform: translateY(-2px) scale(0.98);
}

.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.service-card__num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  opacity: 0.55;
}

.service-card__icon {
  width: 1.8rem;
  height: 1.8rem;
}

.service-card__title {
  font-size: 1.3rem;
  margin-bottom: var(--space-2);
}

.service-card__text {
  font-size: 0.92rem;
  opacity: 0.85;
  flex-grow: 1;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: var(--space-4);
}

.service-card.theme-navy,
.related-card.theme-navy { background: var(--navy); color: var(--white); }
.service-card.theme-yellow,
.related-card.theme-yellow { background: var(--yellow); color: var(--ink); }
.service-card.theme-red,
.related-card.theme-red { background: var(--red); color: var(--white); }
.service-card.theme-paper,
.related-card.theme-paper { background: var(--white); color: var(--ink); border: 1px solid var(--paper-line); }

.related-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 700px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.related-card {
  display: block;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  transition: transform 0.25s var(--ease);
}

.related-card:hover {
  transform: translateY(-4px);
}

.related-card:active {
  transform: translateY(-1px) scale(0.98);
}

.related-card__icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: var(--space-4);
}

.related-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: var(--space-3);
}

/* ---------- Servicio: hero + alcance ---------- */

.service-hero {
  position: relative;
  padding-block: var(--space-8);
  overflow: hidden;
}

.service-hero__inner {
  max-width: 760px;
  position: relative;
}

.service-hero__title {
  margin-bottom: var(--space-5);
}

.service-hero.theme-navy .service-hero__title,
.service-hero.theme-red .service-hero__title { color: var(--white); }

.service-hero__intro {
  font-size: 1.08rem;
  max-width: 58ch;
  margin-bottom: var(--space-6);
  opacity: 0.92;
}

.service-hero__icon {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: 34vw;
  max-width: 380px;
  opacity: 0.12;
  pointer-events: none;
}

.service-hero__icon-svg {
  width: 100%;
  height: 100%;
}

.service-hero.theme-paper .service-hero__icon,
.service-hero.theme-yellow .service-hero__icon {
  color: var(--navy);
}

.service-scope {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 860px) {
  .service-scope {
    grid-template-columns: 0.7fr 1.3fr;
  }
}

.service-scope__list {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .service-scope__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.service-scope__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--paper);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.94rem;
}

.service-scope__check {
  color: var(--red);
  flex-shrink: 0;
  margin-top: 0.15em;
}

/* ---------- Sectores ---------- */

.sector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.sector-chips li {
  padding: var(--space-3) var(--space-5);
  background: var(--white);
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
}

.sector-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 700px) {
  .sector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mismo criterio que .services-grid: se rompe la cuadrícula pareja con dos
   piezas anchas (Turismo y la 7ª, "Organizaciones sin fines de lucro") para
   que 11 tarjetas no lean como una tabla. */
@media (min-width: 1100px) {
  .sector-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }

  .sector-grid > div:nth-child(1),
  .sector-grid > div:nth-child(8) {
    grid-column: span 2;
  }
}

.sector-card {
  padding: var(--space-6);
  border-radius: var(--radius-card);
}

.sector-card p {
  font-size: 0.92rem;
  opacity: 0.85;
  margin: 0;
}

/* ---------- Nosotros: retrato + contacto ---------- */

.founder-grid__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  background: linear-gradient(155deg, var(--navy), var(--navy-deep));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  overflow: hidden;
}

.founder-grid__photo svg {
  width: 34%;
  color: var(--yellow);
  opacity: 0.9;
}

.founder-grid__photo-caption {
  color: var(--on-navy-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.founder-grid__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.contact-info-card {
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--paper);
  margin-bottom: var(--space-5);
}

.contact-info-card--dark {
  background: var(--navy);
  color: var(--white);
}

.contact-info-card__list {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.contact-info-card__list li,
.contact-info-card__list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  font-size: 0.95rem;
}