/* =============================================================================== PODCAST.CSS - Estilos para la página del podcast =============================================================================== */ /* Sin @import: gracias.html ya carga /static/css/style.css directamente en su , y style.css ya importa theme.css, base.css, layout.css, buttons.css, forms.css y modals.css. Repetirlos aquí solo duplicaba la carga de CSS en cada visita a /gracias.html (EN-05, corregido 9 julio 2026 — mismo patrón que EN-10 en gracias.css). @import url('/static/css/theme.css'); @import url('/static/css/base.css'); @import url('/static/css/layout.css'); @import url('/static/css/buttons.css'); @import url('/static/css/forms.css'); @import url('/static/css/modals.css'); @import url('/static/css/style.css'); */ /* PodCasts Index */ .podcast-hero{ background: linear-gradient(180deg, rgba(248, 103, 255, 0.12) 0%, rgba(148, 133, 255, 0.12) 100%); border-radius: 24px; padding: 40px 36px; box-shadow: 0 20px 40px rgba(16, 8, 46, 0.08) } .podcast-hero h1{ font-size: clamp(2rem, 2.5vw, 3rem); line-height: 1.05; /*color: var(--color-purple-dark);*/ color: rgba(255, 255, 255, 0.55); margin: 16px 0; } .podcast-hero p{ color: var(--color-purple-dark); line-height: 1.8; font-size: 1.05rem; } .podcast-intro{ background: linear-gradient(180deg, rgba(248, 103, 255, 0.12) 0%, rgba(148, 133, 255, 0.12) 100%); border-radius: 24px; padding: 40px 36px; box-shadow: 0 20px 40px rgba(16, 8, 46, 0.08) } .episode-list-section{ border-radius: 24px; } .episode-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .episode-card { background: rgba(255, 255, 255, 0.95); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 45px rgba(16, 8, 46, 0.12); border: 1px solid rgba(148, 103, 255, 0.16); display: grid; gap: 0; } .episode-card-image { min-height: 220px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(148, 103, 255, 0.12), rgba(148, 103, 255, 0.02)); } .episode-card-image img { width: 100%; height: 100%; object-fit: cover; } .episode-card-image--placeholder { color: var(--color-purple-dark); font-weight: 700; padding: 32px; text-align: center; } .episode-card-body { padding: 28px 28px 24px; display: grid; gap: 18px; } .episode-card-meta{ color: var(--color-purple-medium); font-size: 0.95rem; font-weight: 700; } .episode-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .episode-card-tags { display: flex; gap: 10px; flex-wrap: wrap; } .episode-tag { color: var(--color-purple-medium); font-size: 0.95rem; font-weight: 700; } .episode-card h3 { font-size: 1.4rem; line-height: 1.2; color: var(--color-purple-dark); } .episode-card p { color: var(--color-purple-dark); line-height: 1.8; } .episode-tag { background: rgba(148, 103, 255, 0.1); border-radius: 999px; padding: 8px 12px; } /* PodCasts Detalle */ .episode-hero { background: linear-gradient(180deg, rgba(248, 103, 255, 0.12) 0%, rgba(148, 133, 255, 0.12) 100%); border-radius: 24px; padding: 40px 36px; box-shadow: 0 20px 40px rgba(16, 8, 46, 0.08) } .episode-hero h1 { font-size: clamp(2rem, 2.5vw, 3rem); line-height: 1.05; /*color: var(--color-purple-dark);*/ color: rgba(255, 255, 255, 0.55); margin: 16px 0; } .episode-hero p{ color: var(--color-purple-dark); line-height: 1.8; font-size: 1.05rem; } .episode-video { display: grid; gap: 24px; } .video-embed { border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(16, 8, 46, 0.18); } .video-embed iframe { width: 100%; height: 520px; min-height: 320px; } .episode-audio { display: grid; gap: 24px; } .episode-content { gap: 24px; } .episode-section ul{ padding-top: 24px; } /* Unificamos el estilo de todo lo que vive dentro del contenedor dinámico */ #dynamic-blocks { display: flex; flex-direction: column; gap: 32px; /* Controla aquí el espacio exacto entre todos los bloques */ } /* Si tu JS genera bloques (ej: divs o sections), aplícales el estilo base */ #dynamic-blocks > * { background: white; padding: 32px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .episode-intro{ background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(148, 103, 255, 0.16); border-radius: 24px; padding: 32px; box-shadow: 0 16px 35px rgba(16, 8, 46, 0.08); color: var(--color-purple-dark); } .episode-transcript{ background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(148, 103, 255, 0.16); border-radius: 24px; padding: 32px; box-shadow: 0 16px 35px rgba(16, 8, 46, 0.08); color: var(--color-purple-dark); } .episode-cta { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(148, 103, 255, 0.16); border-radius: 24px; padding: 32px; box-shadow: 0 16px 35px rgba(16, 8, 46, 0.08); color: var(--color-purple-dark); } .episode-summary h2, .episode-intro h2, .episode-article h2, .episode-cta h2 { color: var(--color-purple-dark); margin-bottom: 18px; } .episode-summary ul, .episode-article ul, .episode-article ol { margin: 0; padding-left: 1.2rem; color: var(--color-purple-dark); line-height: 1.9; } .episode-summary li, .episode-article li { margin-bottom: 12px; } .episode-article h3 { margin-top: 24px; color: var(--color-purple-dark); } .episode-article p { color: var(--color-purple-dark); line-height: 1.8; margin-top: 16px; } .episode-article blockquote { margin: 24px 0; padding: 22px 26px; border-left: 4px solid var(--color-pink-highlight); background: rgba(224, 64, 251, 0.08); color: var(--color-purple-dark); font-style: italic; } .episode-transcript details { border-radius: 20px; padding: 22px; background: rgba(148, 103, 255, 0.08); cursor: pointer; } .episode-transcript summary { font-weight: 700; color: var(--color-purple-dark); } .transcript-content { margin-top: 18px; color: var(--color-purple-dark); line-height: 1.8; } .episode-cta { display: grid; gap: 24px; } .cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } @media (max-width: 860px) { .video-embed iframe { height: 320px; } } @media (max-width: 640px) { .episode-card-actions { flex-direction: column; align-items: stretch; } .episode-card-body { padding: 22px; } }