/* ============================================================
   Inscripciones · estilo de cashofgrapplers.com
   (se carga después de styles.css, que es el original aislado)
   ============================================================ */
#cog-app {
  --bg: #0D0A12; --bg-card: #1A1226; --bg-input: #120D1A; --line: #33264A;
  --text: #F5F2FA; --muted: #BDB3CC; --accent: #7B3FE4; --accent-deep: #3A0073; --accent-2: #B9A6E0; --ok: #2FD15B;
  --radius: 12px;
  position: relative; font-size: 16px; line-height: 1.6; text-align: left; overflow-x: clip;
}
#cog-app h1, #cog-app h2, #cog-app h3, #cog-app h4, #cog-app legend { color: inherit; }
#cog-app button { font-family: inherit; text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0; line-height: inherit; }

/* Portada */
#cog-app .hero {
  min-height: 0; padding: 72px 20px 120px; animation: none; background-size: auto;
  background:
    radial-gradient(circle at 22% 18%, rgba(58, 0, 115, 0.7), transparent 52%),
    radial-gradient(circle at 82% 78%, rgba(123, 63, 228, 0.16), transparent 48%),
    linear-gradient(160deg, #0D0A12, #1A1226 55%, #0D0A12);
}
#cog-app .hero__logo { width: clamp(130px, 26vw, 210px); filter: brightness(1.2) saturate(1.1) drop-shadow(0 12px 32px rgba(58, 0, 115, 0.65)); }
#cog-app .hero__badge { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent-2); margin-bottom: 10px; }
#cog-app .hero__title {
  font-family: "Syncopate", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 52px; line-height: 1.15; letter-spacing: 1px;
  margin: 6px 0 12px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); animation: rise 0.7s ease both;
}
#cog-app .hero__subtitle { font-size: 18px; font-weight: 600; color: var(--text); }
#cog-app .hero__location { font-size: 16px; }
#cog-app .hero__cta { margin-top: 4px; }
#cog-app .section-title { font-family: "Syncopate", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 34px; line-height: 1.2; letter-spacing: 1px; }
#cog-app legend { font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-2); padding: 0 8px; }
#cog-app .info { margin-top: -48px; }
#cog-app .info__text h3 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
#cog-app .info__text p { font-size: 14px; }

/* Botones como los del sitio */
#cog-app .btn {
  border-radius: 8px; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 1px;
  text-transform: uppercase; line-height: 1.2; padding: 16px 28px; box-shadow: none;
}
#cog-app .btn--primary { background: #2FD15B; color: #0D0A12; }
#cog-app .btn--primary:hover { background: #5BE07E; color: #0D0A12; filter: none; box-shadow: 0 12px 28px rgba(47, 209, 91, 0.22); }
#cog-app .btn--secondary { background: transparent; color: var(--text); border: 2px solid var(--text); }
#cog-app .btn--secondary:hover { background: var(--text); color: #0D0A12; }
#cog-app .btn--block { padding: 18px 20px; font-size: 16px; }
#cog-app .btn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }

/* Campos */
#cog-app input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), #cog-app select, #cog-app textarea {
  font-family: "Montserrat", sans-serif; font-size: 16px; border-radius: 8px; box-shadow: none; height: auto; min-height: 0; max-width: 100%;
}
#cog-app input:focus, #cog-app select:focus, #cog-app textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(185, 166, 224, 0.22); outline: none; }

#cog-app .footer { background: var(--bg); }
#cog-app .modal { z-index: 100000; }

@media (max-width: 1024px) {
  #cog-app .hero { padding: 64px 20px 110px; }
  #cog-app .hero__title { font-size: 40px; }
  #cog-app .section-title { font-size: 26px; }
}
@media (max-width: 767px) {
  #cog-app .hero { padding: 48px 16px 96px; }
  #cog-app .hero__title { font-size: 26px; }
  #cog-app .hero__subtitle { font-size: 16px; }
  #cog-app .section-title { font-size: 20px; }
  #cog-app .btn { padding: 15px 22px; font-size: 14px; }
}

/* La página de WordPress no agrega márgenes alrededor de la app */
body.cogi-page .site-content > .ast-container { max-width: 100%; padding: 0 !important; }
body.cogi-page #primary { margin: 0; padding: 0; }
body.cogi-page .entry-content > * { margin-bottom: 0; }
/* Astra limita el ancho de los hijos del contenido: la app maneja sus propios anchos */
#cog-app > * { max-width: none; }
#cog-app > .modal { margin: 0; }

/* Casilla «Ya hice el SINPE»: en el original no se veía la marca (appearance: none) */
#cog-app input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; padding: 0; background: none; border: 0; accent-color: #2FD15B; cursor: pointer; }

/* Volver al inicio */
#cog-app .hero__back { position: absolute; top: 20px; left: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; transition: color 0.2s ease; }
#cog-app .hero__back:hover, #cog-app .hero__back:focus-visible { color: var(--text); }
#cog-app .hero__next strong { color: #2FD15B; }
@media (max-width: 767px) { #cog-app .hero__back { top: 10px; left: 16px; font-size: 13px; } #cog-app .hero { padding-top: 56px; } }

/* ===== Pre-inscripción: portada con video de fondo (sin logo de edición) ===== */
#cog-app .hero--video { min-height: min(82vh, 740px); overflow: hidden; isolation: isolate; background: #0D0A12; }
#cog-app .hero__media { position: absolute; inset: 0; z-index: 0; background: #0D0A12 var(--bg-d) center / cover no-repeat; }
#cog-app .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
#cog-app .hero--video.is-playing .hero__video { opacity: 1; }
#cog-app .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 10, 18, 0.74) 0%, rgba(13, 10, 18, 0.52) 38%, rgba(13, 10, 18, 0.62) 72%, #0D0A12 100%),
    radial-gradient(ellipse at 50% 45%, rgba(58, 0, 115, 0.38), transparent 70%);
}
#cog-app .hero--video .hero__title { text-shadow: 0 4px 28px rgba(0, 0, 0, 0.65); }
#cog-app .hero--video .hero__badge,
#cog-app .hero--video .hero__subtitle,
#cog-app .hero--video .hero__location,
#cog-app .hero--video .hero__status,
#cog-app .hero--video .hero__back { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75); }
#cog-app .hero--video .hero__location { color: #E6DFF2; }
@media (max-aspect-ratio: 1/1) { #cog-app .hero__media { background-image: var(--bg-m); } }
@media (max-width: 767px) { #cog-app .hero--video { min-height: 78vh; } }
@media (prefers-reduced-motion: reduce) { #cog-app .hero__video { display: none; } }