/* ============================================================
   CERTIFICACIONES RELACIONADAS — componente común
   El componente conserva los tokens cromáticos definidos por cada landing.
   ============================================================ */

.certs {
  --cert-font-display: var(--font-display, 'Cormorant Garamond', 'Times New Roman', serif);
  --cert-font-caps: var(--font-caps, 'Cormorant SC', 'Cormorant Garamond', serif);
  --cert-black: var(--black, #0A0706);
  --cert-black-2: var(--black-2, #050302);
  --cert-accent: var(--green-400, var(--lot-ox-200, var(--iso-red-400, #CBD1D8)));
  --cert-accent-soft: var(--green-400, var(--lot-ox-400, var(--iso-red-400, #9AA0A8)));
  --cert-ink: var(--ink, var(--iso-ink, #F1E1DB));
  --cert-ink-muted: var(--ink-muted, var(--iso-ink-muted, rgba(241, 225, 219, 0.62)));
  --cert-ink-faint: var(--ink-faint, var(--iso-ink-faint, rgba(241, 225, 219, 0.34)));
  --cert-bg: var(--cert-black);
  --cert-card-bg: var(--cert-black-2);
  --cert-border: color-mix(in srgb, var(--cert-accent) 42%, transparent);
  --cert-shadow: color-mix(in srgb, var(--cert-accent) 12%, transparent);
  background: linear-gradient(135deg, var(--cert-bg) 0%, var(--cert-black) 58%, color-mix(in srgb, var(--cert-accent) 8%, var(--cert-black)) 100%);
  padding: 100px 24px;
  font-family: var(--cert-font-display);
}


/* Las landings basadas en componentes no necesitan la retícula del hero. */
.lot-hero__grain { display: none !important; }

/* Retirar las retículas decorativas de propuesta de valor y contacto. */
.env-section::before,
.contact__bg-grid { display: none !important; }

/* Asegurar que las solapas del sobre conserven su transformación 3D. */
.env-wrap { transform-style: preserve-3d; }
.env-wrap .flap {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.certs-section { max-width: 1180px; margin: 0 auto; text-align: center; }
.certs .section-head { margin-bottom: 52px; }
.certs-eyebrow {
  position: relative;
  display: inline-block;
  margin: 0 0 14px;
  padding-bottom: 12px;
  color: var(--cert-accent);
  font-family: var(--cert-font-caps);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
}
.certs-eyebrow::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 1px;
  background: var(--cert-accent);
  transform: translateX(-50%);
}
.certs h2,
.certs-title {
  margin: 0;
  color: var(--cert-ink);
  font-family: var(--cert-font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.25;
}

.certs-carousel { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 12px; align-items: center; }
.certs-viewport { min-width: 0; overflow: hidden; }
.certs-grid {
  display: flex;
  gap: 18px;
  margin: 0;
  text-align: left;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.certs-grid.is-dragging { cursor: grabbing; transition: none; }

.certs .flip-card {
  flex: 0 0 calc((100% - 72px) / 5);
  height: 320px;
  min-width: 0;
  perspective: 1100px;
  cursor: pointer;
}
.certs .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
.certs .flip-card.flipped .flip-card-inner,
.certs .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.certs .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.certs .flip-front,
.certs .flip-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cert-accent) 30%, transparent);
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 34px var(--cert-shadow);
}
.certs .flip-front {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 20px;
  color: var(--cert-ink);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cert-accent-soft) 12%, var(--cert-black-2)) 0%, var(--cert-black-2) 100%);
}
.certs .flip-back {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 26px 22px;
  color: var(--cert-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cert-accent-soft) 10%, var(--cert-black-2)), var(--cert-black-2));
  transform: rotateY(180deg);
}
.certs .flip-card-link { color: inherit; text-decoration: none; }
.certs .cert-card-action { display: block; width: 100%; }
.certs .cert-img { width: 100%; height: 105px; margin-bottom: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--cert-accent) 30%, transparent); border-radius: 6px; background: rgba(255,255,255,.03); }
.certs .cert-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.certs .cert-icon { width: 46px; height: 46px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--cert-accent) 65%, transparent); border-radius: 50%; color: var(--cert-accent); display: flex; align-items: center; justify-content: center; }
.certs .cert-icon svg { width: 22px; height: 22px; }
.certs .cert-number { margin-bottom: 4px; color: var(--cert-ink); font-family: var(--cert-font-caps); font-size: 1.02rem; font-weight: 600; letter-spacing: .04em; }
.certs .cert-label { color: var(--cert-ink-muted); font-family: var(--cert-font-display); font-size: .88rem; font-style: italic; line-height: 1.35; }
.certs .cert-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--cert-ink-faint); font-family: var(--cert-font-caps); font-size: .62rem; letter-spacing: .06em; }
.certs .cert-badge { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border: 1px solid color-mix(in srgb, var(--cert-accent) 65%, transparent); border-radius: 100px; color: var(--cert-accent); font-family: var(--cert-font-caps); font-size: .68rem; font-weight: 600; letter-spacing: .06em; }
.certs .cert-back-text { margin: 0 0 16px; color: var(--cert-ink-muted); font-family: var(--cert-font-display); font-size: .86rem; line-height: 1.6; }
.certs .cert-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--cert-ink); font-family: var(--cert-font-caps); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; }
.certs .back-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 28px; height: 28px; border: 1px solid color-mix(in srgb, var(--cert-accent) 55%, transparent); border-radius: 50%; color: var(--cert-ink-faint); background: transparent; cursor: pointer; }
.certs-control { width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--cert-accent) 55%, transparent); border-radius: 50%; color: var(--cert-accent); background: transparent; cursor: pointer; font-size: 26px; line-height: 1; }
.certs-control:hover,
.certs-control:focus-visible,
.certs .flip-card:hover .flip-front,
.certs .flip-card:hover .flip-back { border-color: var(--cert-accent); box-shadow: 0 16px 38px color-mix(in srgb, var(--cert-accent) 22%, transparent); }
.certs-control:disabled { cursor: not-allowed; opacity: .3; }
.certs-pagination { min-height: 22px; margin-top: 24px; color: var(--cert-ink-faint); font-family: var(--cert-font-caps); font-size: .7rem; letter-spacing: .08em; }

@media (max-width: 1100px) { .certs .flip-card { flex-basis: calc((100% - 36px) / 3); } }
@media (max-width: 640px) {
  .certs { padding: 72px 20px; }
  .certs-carousel { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 8px; }
  .certs-grid { gap: 14px; }
  .certs .flip-card { flex-basis: 100%; height: 280px; }
  .certs-control { width: 32px; height: 32px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .certs-grid, .certs .flip-card-inner { transition-duration: .01ms; } }