/* ============================================================
   Webinars — sobre brand.css
   ============================================================ */

/* Estados: se oculta lo que no corresponde al estado. Con !important para que
   ningún componente (.w-live, .w-badge, .btn…) lo vuelva a mostrar.
   En vivo sigue mostrando lo de "próximo" (el registro sigue abierto). */
[data-estado="proximo"] .only-en-vivo,
[data-estado="proximo"] .only-grabado,
[data-estado="en-vivo"] .only-grabado,
[data-estado="grabado"] .only-proximo,
[data-estado="grabado"] .only-en-vivo { display: none !important; }

/* Barra en vivo */
.w-live { display: block; background: var(--ink); color: var(--white); text-align: center; padding: 10px 16px; font-size: 14px; text-decoration: none; }
.w-live b { color: #FCA5A5; }

/* Hero enmarcado (sin expansión) */
.w-hero { padding: 0 20px; }
.w-hero__card { position: relative; min-height: 460px; border-radius: 24px; overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-end; background: #E9D9C8; } /* las personas de las fotos están a la izquierda: la tarjeta de texto va a la derecha */
.w-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.w-hero__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(247, 246, 242, .5) 0%, rgba(247, 246, 242, 0) 60%); }
/* El texto va en una tarjeta de vidrio claro: contraste AA con cualquier foto y cualquier largo de título */
.w-hero__copy { position: relative; z-index: 2; margin: 28px; padding: 32px 36px; max-width: 640px; border-radius: var(--radius-lg); background: rgba(247, 246, 242, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (max-width: 600px) { .w-hero__copy { margin: 12px; padding: 24px 20px; } .w-hero__card { min-height: 420px; } }
.w-hero__copy h1 { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.05; color: var(--blue); margin: 10px 0 14px; }
.w-hero__copy p { font-size: 18px; color: var(--ink); max-width: 640px; }
.w-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.w-meta__item { font-size: 13px; font-weight: 500; background: rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; }
.w-badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); }
.w-badge--live { background: #FEE2E2; color: #B91C1C; }

/* Bloque principal */
.w-main { padding: 64px 0; }
.w-main__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 960px) { .w-main__grid { grid-template-columns: 1fr; } }
.w-player { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); color: var(--white); display: grid; place-items: center; text-align: center; }
.w-player iframe { width: 100%; height: 100%; border: 0; }
.w-player__fallback { padding: 32px; max-width: 460px; }
.w-player__fallback h3 { font-size: 22px; margin-bottom: 8px; }
.w-player__fallback p { opacity: .8; }
.w-yt { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--blue); }
.w-player__fallback .w-yt { color: #9DB8E8; }
.w-demo-card { display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: flex-start; aspect-ratio: 16 / 9; padding: 40px; border-radius: var(--radius-lg); background: var(--blue-soft); }
.w-demo-card h2, .w-demo-card h3 { font-size: 26px; }
@media (max-width: 600px) { .w-demo-card { aspect-ratio: auto; padding: 28px; } }

/* Formulario */
.w-form { display: grid; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.w-form h2 { font-size: 24px; }
.w-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.w-form input { border: 1px solid #CBD2DE; border-radius: var(--radius); padding: 12px 14px; background: var(--white); }
.w-form input.is-error { border-color: #B91C1C; }
.w-form__error { color: #B91C1C; font-size: 13px; }
.w-form__note { font-size: 13px; color: var(--muted); }
.w-success { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 12px; }
.w-success h2 { font-size: 24px; }

/* Calendario (menú) */
.w-cal { position: relative; }
.w-cal__menu { position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-ui); padding: 6px; display: grid; }
.w-cal__menu[hidden] { display: none; }
.w-cal__menu a { padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.w-cal__menu a:hover { background: var(--paper); }

/* Qué vimos / qué vas a ver */
.w-seen { padding: 72px 0; border-top: 1px solid var(--line); }
.w-seen h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 10px 0 28px; }
.w-seen__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.w-seen__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.w-seen__item h3 { font-size: 19px; margin-bottom: 8px; }
.w-seen__item p { color: var(--muted); }
@media (max-width: 860px) { .w-seen__grid { grid-template-columns: 1fr; } }

/* CTA de producto */
.w-product { margin: 0 0 96px; }
.w-product__box { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--blue-soft); border-radius: var(--radius-lg); padding: 32px; }
.w-product__box h2 { font-size: 26px; margin: 6px 0 6px; }
.w-product__price { font-weight: 500; }
.w-product__price s { color: var(--muted); font-weight: 400; margin-right: 4px; }

/* Página de calendario */
.w-cal-page { min-height: calc(100vh - var(--nav-h)); display: grid; place-items: center; padding: 48px 20px; }
.w-cal-page__card { width: min(480px, 100%); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; text-align: center; box-shadow: var(--shadow-ui); }
.w-cal-page__card h1 { font-size: 26px; color: var(--blue); }
.w-cal-page__options { display: grid; gap: 10px; margin: 24px 0 16px; }
.w-cal-page__options .btn { width: 100%; }