/* --- CSS mínimo, Bootstrap tiene prioridad --- */
:root {
  --card-radius: .5rem;
  --overlay-bg: transparent;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
}

body {
  background-color: #f8f9fa;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 0;
  padding: 0;
}

.certificate-wrap {
  padding: 3rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.certificate-card {
  width: 100%;
  max-width: 920px;
  border-radius: var(--card-radius);
  overflow: hidden;            /* importante: recorta el logo grande */
  position: relative;
  background-color: #000;      /* color base detrás del video */
  box-shadow: var(--shadow);
  min-height: 520px;

  /* Por defecto el GIF como respaldo (ruta relativa desde css/) */
  background-image: url('../assets/truenos.gif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* VIDEO BACKGROUND: ocupa todo y queda detrás del contenido */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  display: block;
}

/* Si el video no carga, se aplicará via JS la clase fallback-gif o fallback-still */
.certificate-card.fallback-gif { background-image: url('../assets/truenos.gif'); }
.certificate-card.fallback-still { background-image: url('../assets/truenos-still.png'); }

/* -------- Aquí quitamos la "capa" que atenúa el fondo -------- */
.certificate-overlay {
  position: relative;
  z-index: 2;
  background: transparent; /* permitimos ver el gif/video sin capa */
  padding: 2.25rem;        /* mantenemos el margen/padding que pediste */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 520px;
  align-items: center;
}

/* ====================== LOGO: centrado fiable incluso si su ancho > 100% ======================
   Uso de variables:
     --logo-w: ancho del logo (porcentual)
     --logo-offset: desplazamiento adicional hacia la derecha (positivo -> derecha)
   He aumentado el offset otra vez (aprox. el mismo incremento que la vez anterior).
============================================================================== */
.cert-logo {
  display: block;
  /* valores por defecto; media queries los sobrescriben según tamaño */
  --logo-w: 150%;
  --logo-offset: 24%; /* <-- desplazamiento extra a la derecha (incrementado nuevamente) */
  width: var(--logo-w);
  /* centrar aun cuando el ancho sea mayor que el padre:
     margin-left = (contenedor - logoWidth) / 2  + offset */
  margin-left: calc((100% - var(--logo-w)) / 2 + var(--logo-offset));
  /* asegurar que al menos respete límites extremos */
  max-width: 1400px;
  min-width: 320px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,0.6));
  margin-top: 6px;
  margin-bottom: 6px;
  transform-origin: center center;
}

/* Ajustes del header para que no se pierda con el logo gigante */
.cert-header {
  width: 100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  padding: 0 .25rem;
}
.cert-header .muted-small,
.cert-header .text-uppercase {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  font-weight: 600;
}

/* Texto principal */
.cert-hero {
  text-align: center;
  margin-top: 0.9rem; /* un poco más de espacio debajo del logo grande */
}
.cert-hero .display-4 {
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 6px 22px rgba(0,0,0,0.5);
}

/* subtítulo */
.cert-subtitle {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 3px 12px rgba(0,0,0,0.45);
}

/* párrafos descriptivos: texto claro con sombra ligera */
.cert-desc { max-width: 820px; margin: 0 auto; }
.cert-desc p {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 4px 14px rgba(0,0,0,0.45);
  line-height: 1.5;
  margin-top: .75rem;
}
.reg-mark {
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 0.1em;
}
.urbanist {
    font-family: "Urbanist", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100; /* Puedes usar 100–900 */
    font-style: normal;
  }
/* Footer / sello también en claro */
.cert-footer { text-align:center; margin-top: 1.75rem; color: #fff; }
.cert-footer strong { text-shadow: 0 4px 14px rgba(0,0,0,0.45); }
.muted-small { font-size:.82rem; color: rgba(255,255,255,0.88); text-shadow: 0 2px 8px rgba(0,0,0,0.35); }

/* --- Reveal animations (scroll & load) --- */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(.995);
  transition: opacity .6s cubic-bezier(.2,.9,.2,1), transform .6s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* logo animation tweak para entrada
   Mantener animación pero sin interferir con el margin-left centrado. */
.reveal.logo { transform: translateY(-6px) scale(.85); }
.reveal.logo.is-visible { transform: translateY(0) scale(1); }

/* ===================== Media queries: controlar tamaño en pantallas menores ===================== */
/* Pantallas grandes (por encima de 1200px) */
@media (max-width: 1200px) {
  /* ajustado: ancho y offset mayor para mantener el incremento pedido */
  .cert-logo { --logo-w: 140%; --logo-offset: 24%; width: var(--logo-w); margin-left: calc((100% - var(--logo-w)) / 2 + var(--logo-offset)); max-width: 1200px; min-width: 300px; filter: drop-shadow(0 24px 56px rgba(0,0,0,0.57)); }
}

@media (max-width: 992px) {
  /* Tablet / laptops */
  .cert-logo { --logo-w: 120%; --logo-offset: 18%; width: var(--logo-w); margin-left: calc((100% - var(--logo-w)) / 2 + var(--logo-offset)); max-width: 1000px; min-width: 260px; filter: drop-shadow(0 20px 48px rgba(0,0,0,0.55)); }
}

@media (max-width: 768px) {
  /* Móviles */
  .cert-logo { --logo-w: 110%; --logo-offset: 12%; width: var(--logo-w); margin-left: calc((100% - var(--logo-w)) / 2 + var(--logo-offset)); max-width: 720px; min-width: 140px; margin-top: 4px; margin-bottom: 4px; filter: drop-shadow(0 14px 36px rgba(0,0,0,0.55)); }
  .certificate-overlay { padding: 1.25rem; }
  .cert-hero .display-4 { font-size: 1.65rem; margin-top: .6rem; }
}

@media (max-width: 576px) {
  .cert-logo { --logo-w: 105%; --logo-offset: 8%; width: var(--logo-w); margin-left: calc((100% - var(--logo-w)) / 2 + var(--logo-offset)); max-width: 520px; min-width: 96px; }
  .cert-hero .display-4 { font-size: 1.45rem; }
}

/* Si prefieres reducir movimiento: ocultamos el video y mostramos la imagen still */
@media (prefers-reduced-motion: reduce) {
  .bg-video { display: none; }
  .certificate-card { background-image: url('../assets/truenos-still.png'); }
}