:root{--bg:#0c0f1a;--bg2:#151a2b;--gold:#d4a73a;--txt:#f3f1ea;--mut:#a9adbd;--navy:#1d2a5c}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--txt);font-family:'Source Sans 3',system-ui,sans-serif;overflow-x:hidden}
h1,h2,.logo{font-family:'Playfair Display',Georgia,serif}
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:28px;padding:14px 4%;background:linear-gradient(#000c,#0000);transition:background .3s}
.top.solid{background:var(--bg)}
.logo{font-size:1.5rem;color:var(--gold);font-weight:700;text-decoration:none;white-space:nowrap}
.logo span{color:var(--txt);font-weight:400}
nav{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;flex:1}
nav a{color:var(--txt);text-decoration:none;font-size:.95rem;white-space:nowrap;opacity:.8}
nav a:hover,nav a.on{opacity:1;color:var(--gold)}
.volver{color:var(--mut);font-size:.85rem;text-decoration:none;white-space:nowrap}
.hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;padding:0 4% 7%;background:linear-gradient(135deg,var(--navy),#0c0f1a) center/cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0c0f1af0 0%,#0c0f1a66 55%,#0000),linear-gradient(0deg,var(--bg),#0000 35%)}
.hero>div{position:relative;z-index:1;max-width:560px}
.badge{display:inline-block;background:var(--gold);color:#1b1500;font-weight:700;font-size:.75rem;padding:3px 9px;border-radius:3px;margin-bottom:12px}
.hero{padding-top:110px}
.hero h1{font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.1;margin-bottom:12px}
.hero p{color:#e3e1da;margin-bottom:20px;line-height:1.45}
.btn{border:0;border-radius:4px;padding:10px 24px;font-size:1rem;font-weight:700;cursor:pointer;margin-right:10px}
.btn.play{background:#fff;color:#000}.btn.info{background:#6d6d6eb3;color:#fff}
.btn:hover{opacity:.85}
.fila{padding:0 4%;margin:0 0 1.6rem;position:relative;z-index:2}
.hero+.fila{margin-top:-3.5rem}
.fila h2{font-size:1.2rem;margin-bottom:8px}
.carril{position:relative}
.pista{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 0}
.pista::-webkit-scrollbar{display:none}
.tarjeta{flex:0 0 clamp(150px,19vw,250px);aspect-ratio:16/9;border-radius:4px;background:var(--bg2) center/cover;position:relative;cursor:pointer;scroll-snap-align:start;transition:transform .2s;overflow:hidden;border:0;color:inherit;text-align:left}
.tarjeta:hover,.tarjeta:focus-visible{transform:scale(1.07);z-index:3;outline:2px solid var(--gold)}
.tarjeta .t{position:absolute;inset:auto 0 0 0;padding:22px 8px 7px;font-size:.82rem;font-weight:600;background:linear-gradient(#0000,#000d)}
.tarjeta .tag{position:absolute;top:6px;left:6px;background:var(--gold);color:#1b1500;font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:2px}
.tarjeta .pl{position:absolute;top:6px;right:6px;font-size:.62rem;background:#000a;padding:2px 5px;border-radius:2px}
.flecha{position:absolute;top:0;bottom:0;width:4%;min-width:34px;border:0;background:#000a;color:#fff;font-size:1.6rem;cursor:pointer;z-index:4;opacity:0;transition:opacity .2s}
.carril:hover .flecha{opacity:1}.flecha.izq{left:-4%}.flecha.der{right:-4%}
@media(max-width:700px){.flecha{display:none}.top{gap:14px}.volver{display:none}
.hero{min-height:0;padding:96px 4% 40px}.hero+.fila{margin-top:0}
.hero p{font-size:.92rem;margin-bottom:14px}
.btn{padding:9px 16px;font-size:.92rem;margin:0 8px 0 0}
.tarjeta{flex-basis:44vw}.tarjeta .t{font-size:.74rem;padding:18px 6px 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta .pl{display:none}.tarjeta .t{line-height:1.2;max-height:calc(2.4em + 24px)}
.det{padding:10px 14px}.det p{font-size:.85rem}.cerrar{top:10px;right:10px}}
dialog{border:0;padding:0;background:#000;color:var(--txt);width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;overflow:hidden;flex-direction:column}
dialog[open]{display:flex}
dialog::backdrop{background:#000d}
.cerrar{position:absolute;top:8px;right:10px;z-index:2;background:#000a;color:#fff;border:0;border-radius:50%;width:36px;height:36px;font-size:1.2rem;cursor:pointer}
.video{flex:1 1 auto;min-height:0;background:#000;display:flex;align-items:center;justify-content:center}
.video iframe{border:0;background:#000;width:min(100vw,calc((100dvh - 150px)*16/9));aspect-ratio:16/9;max-height:calc(100dvh - 150px)}
.video.vert iframe{width:auto;height:calc(100dvh - 150px);max-height:calc(100dvh - 150px);aspect-ratio:9/16;max-width:100vw}
.det{flex:0 0 auto;max-height:150px;overflow:auto;padding:12px 20px;background:var(--bg2)}.det h3{font-family:'Playfair Display',serif;margin-bottom:6px}.det p{color:var(--mut);line-height:1.45}
.det a{color:var(--gold);font-size:.9rem}
footer{padding:30px 4% 50px;color:var(--mut);font-size:.85rem}

/* ---- Películas: slider semanal, último video, rejilla, botón Parroquia ---- */
nav a.par{background:var(--gold);color:#1b1500;opacity:1;font-weight:700;padding:5px 14px;border-radius:999px}
nav a.par.on,nav a.par:hover{background:#f0c354;color:#1b1500}
.slider{position:relative;height:72vh;min-height:420px;max-height:760px;overflow:hidden;background:#000}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide .fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0c0f1af2 0%,#0c0f1a80 50%,#0000),linear-gradient(0deg,var(--bg),#0000 38%)}
.slide .cont{position:absolute;z-index:2;left:4%;bottom:14%;max-width:560px}
.slide h1{font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.1;margin-bottom:10px}
.slide p{color:#e3e1da;margin-bottom:18px}
.sl{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:64px;border:0;background:#0007;color:#fff;font-size:2rem;cursor:pointer;opacity:0;transition:opacity .2s}
.slider:hover .sl{opacity:1}.sl.izq{left:0;border-radius:0 6px 6px 0}.sl.der{right:0;border-radius:6px 0 0 6px}
.dots{position:absolute;z-index:3;left:0;right:0;bottom:5%;display:flex;gap:8px;justify-content:center}
.dots button{width:34px;height:5px;border:0;border-radius:3px;background:#fff5;cursor:pointer;padding:0}
.dots button.on{background:var(--gold)}
.slider+.fila{margin-top:-1.5rem}
.ult h2{margin-bottom:10px}
.ultimo{display:block;width:100%;min-height:240px;border:0;border-radius:8px;background:var(--bg2) center/cover;position:relative;cursor:pointer;text-align:left;color:inherit;overflow:hidden}
.ultimo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0c0f1af5 0%,#0c0f1aa0 55%,#0000)}
.ultimo .txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;padding:28px;max-width:560px;align-items:flex-start}
.ultimo b{font-family:'Playfair Display',serif;font-size:clamp(1.2rem,2.4vw,1.8rem);line-height:1.15}
.ultimo small{color:#e3e1da;font-size:.95rem;line-height:1.4}
.ultimo i{font-style:normal;background:#fff;color:#000;font-weight:700;padding:8px 20px;border-radius:4px;margin-top:6px}
.vermas{color:var(--gold);font-size:.85rem;font-family:'Source Sans 3',sans-serif;margin-left:10px;text-decoration:none}
.sec{padding-top:100px}.sec h2 small{font-size:.8rem;color:var(--mut);font-family:'Source Sans 3',sans-serif;margin-left:8px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.rejilla .tarjeta{flex:none;width:100%}
@media(max-width:700px){
.slider{height:64vh;min-height:360px}.slide .cont{bottom:16%;right:4%}.slide p{margin-bottom:12px}.sl{display:none}
.ultimo{min-height:200px}.ultimo .txt{padding:18px}.ultimo small{display:none}
nav a.par{padding:4px 11px;font-size:.85rem}
.rejilla{grid-template-columns:repeat(2,1fr);gap:8px}.sec{padding-top:84px}}

/* ---- Modal v2: video a toda la pantalla con cinta de información arriba ---- */
.video{height:100%;flex:1 1 auto;background:#000;display:flex;align-items:center;justify-content:center}
.marco{position:relative;width:min(100vw,calc(100dvh*16/9));aspect-ratio:16/9;max-height:100dvh;background:#000}
.video.vert .marco{width:auto;height:100dvh;aspect-ratio:9/16;max-width:100vw}
.reproductor{position:absolute;inset:0}
.reproductor iframe,.reproductor .fb-video,.reproductor .fb-video span{width:100%!important;height:100%!important;border:0;aspect-ratio:auto;max-height:none;max-width:none}
.cinta{position:absolute;z-index:3;top:0;left:0;right:0;padding:22px 64px 90px 24px;pointer-events:none;transition:opacity .5s;opacity:1;
 background:linear-gradient(180deg,rgba(5,7,15,.94) 0%,rgba(5,7,15,.82) 40%,rgba(5,7,15,.35) 75%,transparent 100%)}
.cinta.off{opacity:0}
.cinta h3{font-family:'Playfair Display',serif;font-size:clamp(1.15rem,2.4vw,1.8rem);line-height:1.15;color:#fff;margin-bottom:4px}
.cinta .meta{color:var(--gold);font-weight:700;font-size:.9rem;margin-bottom:6px}
.cinta p{color:#e8e6df;font-size:.95rem;line-height:1.4;max-width:760px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cerrar{z-index:6;position:fixed}
.det{display:none}
@media(max-width:700px){.cinta{padding:14px 52px 64px 14px}.cinta p{font-size:.82rem;-webkit-line-clamp:2}.cinta .meta{font-size:.8rem}}

/* ---- Burbuja «¿pantalla completa?» ---- */
.burbuja{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);background:#0b0e1ae6;border:1px solid #d4a73a88;border-radius:14px;padding:22px 26px 18px;text-align:center;box-shadow:0 10px 40px #000a;width:min(88%,380px);backdrop-filter:blur(4px)}
.burbuja[hidden]{display:none}
.burbuja b{display:block;font-family:'Playfair Display',serif;font-size:1.15rem;margin:4px 8px 14px;color:#fff;line-height:1.25}
.burbuja div{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.burbuja button{border:0;border-radius:6px;padding:10px 18px;font-weight:700;font-size:.95rem;cursor:pointer}
.bsi{background:var(--gold);color:#1b1500}.bno{background:#ffffff26;color:#fff}
.burbuja .bx{position:absolute;top:6px;right:8px;background:none;color:#fff;font-size:1.1rem;padding:4px 8px;opacity:.8}
.video:fullscreen{background:#000}.video:-webkit-full-screen{background:#000}
@media(max-width:700px){.burbuja{padding:18px 16px 14px}.burbuja b{font-size:1rem}}