Preview de mixed.css
/* MIXED CSS PACK */
/* Template: radioeadtc.com/index.php */
/* Template mtime: 2025-11-26 11:06:08 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
:root{
--bg:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
--accent:#B62C8E; --accent-light:#fdf2f8; --accent-dark:#9c1c74;
--accent-glow:rgba(182,44,142,0.15);
--green:#10b981; --blue:#3b82f6; --orange:#f59e0b;
--radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:24px;
--shadow-sm:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--gradient:linear-gradient(135deg, #B62C8E 0%, #ec4899 100%);
--gradient-light:linear-gradient(135deg, rgba(182,44,142,0.1) 0%, rgba(236,72,153,0.1) 100%);
--gradient-dark:linear-gradient(135deg, #9c1c74 0%, #d61f69 100%);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:'Inter', system-ui, -apple-system, sans-serif; line-height:1.6; overflow-x:hidden}
a{color:inherit; text-decoration:none; transition:all 0.2s ease}
img{max-width:100%; height:auto; display:block}
.container{max-width:1280px; margin:0 auto; padding:0 24px}
.section{padding:100px 0}
.section-title{font-size:clamp(2rem, 4vw, 3rem); font-weight:800; line-height:1.2; margin-bottom:20px; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-align:center}
.section-sub{font-size:1.25rem; color:var(--muted); margin-bottom:60px; max-width:700px; margin-left:auto; margin-right:auto; text-align:center; line-height:1.6}
/* NAVBAR */
.navbar{position:sticky; top:0; z-index:1000; background:rgba(255,255,255,0.95); backdrop-filter:blur(16px); border-bottom:1px solid rgba(226,232,240,0.8); transition:all 0.3s ease}
.navbar.scrolled{box-shadow:var(--shadow); background:rgba(255,255,255,0.98)}
.navbar .inner{height:80px; display:flex; align-items:center; justify-content:space-between; gap:32px}
.brand{display:flex; align-items:center; gap:16px; font-weight:800; font-size:1.25rem}
.brand img{width:48px; height:48px; border-radius:var(--radius)}
.nav-links{display:flex; align-items:center; gap:8px}
.nav-links a{position:relative; padding:12px 20px; border-radius:var(--radius); font-weight:500; transition:all 0.2s ease}
.nav-links a:hover{color:var(--accent); background:var(--accent-light)}
.nav-links a.active{color:var(--accent); font-weight:600}
.nav-links a.active::after{content:''; position:absolute; bottom:0; left:20px; right:20px; height:2px; background:var(--accent); border-radius:2px}
.cta{display:flex; gap:12px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border:none; border-radius:var(--radius); font-weight:600; font-size:0.875rem; cursor:pointer; transition:all 0.2s ease; background:var(--gradient); color:white; box-shadow:var(--shadow); position:relative; overflow:hidden}
.btn::before{content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition:left 0.5s}
.btn:hover::before{left:100%}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn-outline{background:transparent; border:2px solid var(--accent); color:var(--accent)}
.btn-outline:hover{background:var(--accent-light); transform:translateY(-2px)}
.burger{display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:8px}
.burger span{width:24px; height:2px; background:var(--ink); transition:0.3s; border-radius:2px}
@media (max-width:1024px){
.nav-links{display:none; position:absolute; top:100%; left:0; right:0; background:white; padding:24px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg); flex-direction:column; align-items:stretch}
.nav-links.open{display:flex}
.burger{display:flex}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}
}
@media (max-width:768px){
.cta{display:none}
.navbar .inner{gap:16px}
}
/* HERO SLIDER */
.hero-slider{position:relative; height:clamp(500px, 85vh, 800px); overflow:hidden; background:#000}
.hs-track{position:relative; width:100%; height:100%}
.hs-slide{position:absolute; inset:0; opacity:0; transition:opacity 0.8s ease; transform:scale(1.02)}
.hs-slide.is-active{opacity:1; transform:scale(1)}
.hs-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 8s ease}
.hs-slide.is-active .hs-photo{transform:scale(1.1)}
.hs-overlay{position:absolute; inset:0; background:linear-gradient(135deg, rgba(182,44,142,0.3) 0%, rgba(0,0,0,0.7) 100%)}
.hs-caption{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:0 32px; z-index:2}
.hs-caption h1{font-size:clamp(2.5rem, 6vw, 4.5rem); font-weight:800; line-height:1.1; margin-bottom:24px; text-shadow:0 4px 12px rgba(0,0,0,0.3)}
.hs-caption p{font-size:clamp(1.125rem, 2.5vw, 1.5rem); margin-bottom:32px; opacity:0.95; max-width:600px; font-weight:300; line-height:1.6}
.hs-actions{display:flex; gap:16px; flex-wrap:wrap; justify-content:center}
.hs-btn{display:inline-flex; align-items:center; gap:8px; padding:16px 32px; border:none; border-radius:var(--radius); font-weight:600; font-size:1rem; cursor:pointer; transition:all 0.3s ease; background:var(--gradient); color:white; box-shadow:0 8px 25px rgba(182,44,142,0.3); position:relative; overflow:hidden}
.hs-btn::before{content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition:left 0.5s}
.hs-btn:hover::before{left:100%}
.hs-btn:hover{transform:translateY(-3px); box-shadow:0 12px 35px rgba(182,44,142,0.4)}
.hs-btn-outline{background:transparent; border:2px solid rgba(255,255,255,0.9); backdrop-filter:blur(8px)}
.hs-btn-outline:hover{background:rgba(255,255,255,0.1); transform:translateY(-3px)}
.hs-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:56px; height:56px; border-radius:50%; border:none; background:rgba(255,255,255,0.9); color:var(--ink); font-size:1.25rem; display:grid; place-items:center; cursor:pointer; transition:all 0.3s ease; box-shadow:var(--shadow)}
.hs-nav:hover{background:white; transform:translateY(-50%) scale(1.1); box-shadow:var(--shadow-lg)}
.hs-prev{left:32px} .hs-next{right:32px}
.hs-dots{position:absolute; left:0; right:0; bottom:32px; display:flex; gap:12px; justify-content:center; z-index:5}
.hs-dots button{width:12px; height:12px; border-radius:50%; border:none; background:rgba(255,255,255,0.5); cursor:pointer; transition:all 0.3s ease}
.hs-dots button:hover{background:rgba(255,255,255,0.8)}
.hs-dots button[aria-selected="true"]{background:white; transform:scale(1.2)}
@media (max-width:768px){
.hs-nav{width:48px; height:48px; font-size:1rem}
.hs-prev{left:16px} .hs-next{right:16px}
.hs-dots{bottom:24px}
}
/* PLAYER (más grande) */
.player-wrap{background:var(--accent-light); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative}
.player-wrap::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--gradient)}
/* PLAYER más grande y sin barras */
.player-inner{max-width:1100px; margin:0 auto; padding:72px 24px}
.player-iframe{
width:100%;
/* alto fluido: sube con el ancho de pantalla, sin pasarse */
height: clamp(170px, 28vw, 320px);
border:0;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
background:#fff;
display:block;
overflow:hidden;
}
/* escalas por breakpoints para afinar */
@media (max-width: 1024px){
.player-inner{max-width:920px; padding:60px 22px}
.player-iframe{height: clamp(160px, 32vw, 280px);}
}
@media (max-width: 640px){
.player-inner{padding:44px 20px}
.player-iframe{height: clamp(150px, 42vw, 220px);}
}
/* QUIÉNES SOMOS */
.qs-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
.qs-title{font-size:clamp(1.5rem, 3vw, 2rem); font-weight:700; margin-bottom:24px; color:var(--ink)}
.qs-text{color:var(--muted); margin-bottom:20px; line-height:1.7}
.qs-highlight{background:var(--accent-light); padding:24px; border-radius:var(--radius-lg); border-left:4px solid var(--accent); position:relative}
.qs-highlight::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--gradient-light); border-radius:var(--radius-lg); z-index:-1}
.qs-note{margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.qs-note:last-child{margin-bottom:0; padding-bottom:0; border-bottom:none}
.qs-note strong{color:var(--ink); display:block; margin-bottom:8px}
.qs-icons{margin-top:48px; display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:20px}
.qs-icon{text-align:center; padding:24px 16px; background:white; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:all 0.3s ease; border:1px solid transparent; position:relative; overflow:hidden}
.qs-icon::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--gradient-light); opacity:0; transition:opacity 0.3s ease; z-index:-1}
.qs-icon:hover::before{opacity:1}
.qs-icon:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent-light)}
.qs-icon i{font-size:2rem; margin-bottom:12px; color:var(--accent)}
.qs-icon span{font-weight:600; color:var(--ink); font-size:0.875rem}
@media (max-width:1024px){ .qs-grid{grid-template-columns:1fr; gap:48px} }
@media (max-width:640px){ .qs-icons{grid-template-columns:repeat(2, 1fr)} }
/* GALERÍA */
.gal-wrap{position:relative}
.gal-rail{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:20px 0; scrollbar-width:thin; scrollbar-color:var(--accent) transparent}
.gal-rail::-webkit-scrollbar{height:6px}
.gal-rail::-webkit-scrollbar-track{background:transparent}
.gal-rail::-webkit-scrollbar-thumb{background:var(--accent); border-radius:3px}
.gal-item{flex:0 0 auto; scroll-snap-align:start; width:300px}
.gal-img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-lg); cursor:pointer; transition:all 0.3s ease; box-shadow:var(--shadow)}
.gal-img:hover{transform:scale(1.05); box-shadow:var(--shadow-lg)}
.gal-ctrls{display:flex; gap:12px; justify-content:center; margin-top:24px}
.ctrl{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border:1px solid var(--line); background:white; border-radius:var(--radius); font-weight:600; cursor:pointer; transition:all 0.2s ease}
.ctrl:hover{background:var(--accent-light); border-color:var(--accent); color:var(--accent)}
/* MODAL */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0.9); display:none; align-items:center; justify-content:center; z-index:2000; padding:40px}
.modal-backdrop.open{display:flex}
.modal-box{background:white; border-radius:var(--radius-lg); max-width:min(900px, 95vw); width:100%; overflow:hidden; box-shadow:var(--shadow-lg)}
.modal-header{display:flex; justify-content:space-between; align-items:center; padding:24px; border-bottom:1px solid var(--line)}
.modal-title{font-weight:600; color:var(--ink)}
.modal-close{background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--muted); padding:4px; transition:color 0.2s ease}
.modal-close:hover{color:var(--ink)}
.modal-media{padding:0}
.modal-img{width:100%; max-height:70vh; object-fit:contain}
.modal-footer{display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-top:1px solid var(--line)}
.dots{display:flex; gap:8px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--line); transition:all 0.2s ease}
.dot.active{background:var(--accent); transform:scale(1.2)}
.modal-nav{display:flex; gap:8px}
.modal-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:1px solid var(--line); background:white; border-radius:var(--radius); font-weight:500; cursor:pointer; transition:all 0.2s ease}
.modal-btn:hover{background:var(--accent-light); border-color:var(--accent); color:var(--accent)}
@media (max-width:768px){
.modal-backdrop{padding:20px}
.modal-box{border-radius:var(--radius)}
.modal-header, .modal-footer{padding:16px}
}
/* NOTICIAS */
.nt-band{background:var(--gradient); padding:24px 0; color:white; position:relative; overflow:hidden}
.nt-band::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.1)"/></svg>'); background-size:cover}
.nt-band .inner{display:flex; align-items:center; gap:24px; position:relative; z-index:1}
.nt-band h2{font-size:1.5rem; font-weight:700; margin:0}
.nt-band .rule{flex:1; height:2px; background:rgba(255,255,255,0.3)}
.nt-wrap{padding:80px 0}
.nt-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:32px}
.nt-card{background:white; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:all 0.3s ease; border:1px solid var(--line); position:relative}
.nt-card::before{content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--gradient)}
.nt-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.nt-cover{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--accent-light)}
.nt-body{padding:24px}
.nt-title{font-size:1.25rem; font-weight:700; line-height:1.4; margin-bottom:12px; color:var(--ink)}
.nt-excerpt{color:var(--muted); margin-bottom:16px; line-height:1.6}
.nt-meta{display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-top:1px solid var(--line); background:var(--accent-light)}
.nt-date{font-size:0.875rem; color:var(--muted)}
.nt-more{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--accent); transition:all 0.2s ease}
.nt-more:hover{gap:8px; color:var(--accent-dark)}
@media (max-width:768px){
.nt-grid{grid-template-columns:1fr; gap:24px}
.nt-body{padding:20px}
}
/* CONTACTO */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px}
.contact-card{background:white; border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-sm); border:1px solid var(--line); position:relative}
.contact-card::before{content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--gradient); border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.contact-info{display:flex; flex-direction:column; gap:20px}
.contact-item{display:flex; align-items:flex-start; gap:12px}
.contact-item i{font-size:1.25rem; color:var(--accent); margin-top:2px}
.contact-social{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.input, textarea{width:100%; padding:16px; border:1px solid var(--line); border-radius:var(--radius); font:inherit; background:white; transition:all 0.2s ease; font-size:0.875rem}
.input:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(182,44,142,0.1)}
textarea{min-height:120px; resize:vertical}
.form-note{font-size:0.75rem; color:var(--muted); margin-top:12px}
@media (max-width:1024px){ .contact-grid{grid-template-columns:1fr; gap:32px} }
/* FOOTER */
footer{background:var(--ink); color:white; position:relative}
footer::before{content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--gradient)}
.footer-top{padding:60px 0; border-bottom:1px solid #334155}
.footer-grid{display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center}
.footer-brand{font-size:1.25rem; font-weight:800; letter-spacing:0.05em}
.footer-nav{display:flex; gap:24px}
.footer-nav a{color:#cbd5e1; transition:color 0.2s ease}
.footer-nav a:hover{color:white}
.footer-bottom{padding:40px 0}
.footer-content{display:grid; grid-template-columns:2fr 1fr; gap:48px}
.footer-info{display:flex; flex-direction:column; gap:12px; color:#cbd5e1; line-height:1.6}
.footer-links{display:flex; flex-direction:column; gap:12px}
.footer-links a{color:#cbd5e1; transition:color 0.2s ease}
.footer-links a:hover{color:white}
@media (max-width:1024px){
.footer-grid{grid-template-columns:1fr; gap:32px; text-align:center}
.footer-nav{justify-content:center; flex-wrap:wrap}
.footer-content{grid-template-columns:1fr; gap:32px; text-align:center}
}
@media (max-width:768px){
.footer-nav{flex-direction:column; gap:16px}
.footer-top{padding:48px 0}
.footer-bottom{padding:32px 0}
}
/* ANIMATIONS */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.6s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
/* LOADING STATES */
.loading { opacity: 0; }
.loaded { opacity: 1; transition: opacity 0.3s ease; }
/* Ensure gallery images have a minimal box while loading */
.gal-img{display:block; min-height:120px;}
.gal-img.broken{filter: grayscale(1); opacity:0.7;}
/* ===== INLINE <style> BLOCK #2 ===== */
/* Tamaños grandes sin tocar el DOM ni atributos */
#player iframe, #player embed, #player object{
display:block;
width:100% !important;
border:0;
border-radius:16px;
/* mejora interacción en mobile (gestos no bloquean taps) */
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
position:relative;
z-index:1;
}
/* Desktop XL */
@media (min-width: 1400px){
#player iframe, #player embed, #player object{ height: 640px !important; }
}
/* Desktop */
@media (min-width: 992px) and (max-width: 1399.98px){
#player iframe, #player embed, #player object{ height: 600px !important; }
}
/* Tablet */
@media (min-width: 577px) and (max-width: 991.98px){
#player iframe, #player embed, #player object{ height: 560px !important; }
}
/* Phone */
@media (max-width: 576px){
#player iframe, #player embed, #player object{ height: 620px !important; }
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* ==== Mobile overflow & layout hardening patch (GPT) ==== */
html, body { max-width:100%; overflow-x:hidden; }
img, video, iframe, .embed-responsive, .ratio, .responsive-embed { max-width:100%; height:auto; }
.container, .container-fluid { overflow-x:hidden; }
.row { --bs-gutter-x: 1.5rem; }
*[style*="width:100vw"] { width:100%; } /* avoid 100vw causing scrollbars with gutters */
.navbar { position: relative; z-index: 1000; } /* keep navbar above */
.offcanvas, .navbar-collapse { max-width: 100%; overflow-x: hidden; }
/* ===== INLINE <style> BLOCK #4 ===== */
/* ==== Desktop vertical-scroll fix for "Quiénes somos" (GPT) ==== */
@media (min-width: 992px){
/* Common section names */
#quienes, #quienessomos, section#quienes, .quienes, .quienes-somos, .about, .about-section, .section-soft, .section-about {
overflow: visible !important;
max-height: none !important;
height: auto !important;
}
/* neutralize 100vh patterns that trap content */
.h-100vh, .vh-100, [style*="height:100vh"], [style*="min-height:100vh"]{
height: auto !important;
min-height: unset !important;
}
/* avoid inner scroll containers */
.about-content, .quienes-content, .about__wrap, .scrollable, .overflow-auto{
overflow: visible !important;
max-height: none !important;
}
}
/* ===== INLINE <style> BLOCK #5 ===== */
/* ==== Strong fix for desktop inner-scroll in #quienes (GPT) ==== */
@media (min-width: 992px){
#quienes,
#quienes .container,
#quienes .row,
#quienes [class*="col-"],
#quienes .qs2-intro,
#quienes .qs2-intro > div {
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
}
#quienes [style*="vh"],
#quienes [style*="height:100vh"],
#quienes [style*="min-height:100vh"]{
height: auto !important;
min-height: auto !important;
}
/* Ensure the page scrolls, not the section */
html, body { overflow-y: auto !important; }
}
/* ===== INLINE <style> BLOCK #6 ===== */
/* PLAYER SIMPLE */
.player-section {
background: #f8f9fa;
padding: 40px 0;
border-top: 4px solid var(--accent);
}
.player-header {
text-align: center;
margin-bottom: 30px;
}
.player-header h2 {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, #B62C8E 0%, #16c6cc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.player-header p {
color: var(--muted);
margin-bottom: 5px;
}
/* CONTENEDOR DEL IFRAME */
.player-wrapper {
width: 100%;
max-width: 1000px;
margin: 0 auto 20px auto;
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
overflow: hidden;
}
/* IFRAME RESPONSIVE */
.radio-iframe {
width: 100%;
height: 400px;
border: none;
display: block;
}
/* BOTÓN */
.player-actions {
text-align: center;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.player-section {
padding: 30px 0;
}
.player-header h2 {
font-size: 2rem;
}
.radio-iframe {
height: 300px; /* Más grande en móvil */
}
.player-wrapper {
margin: 0 10px 20px 10px;
}
}
@media (max-width: 480px) {
.player-header h2 {
font-size: 1.8rem;
}
.radio-iframe {
height: 250px; /* Aún más grande en móviles pequeños */
}
}
/* ==== FIX: ensure overlays don't block clicks unless explicitly opened ==== */
.wa-overlay[hidden],
.wa-card[hidden] { display: none !important; }
/* Extra safety in case some class toggles visibility */
.wa-overlay:not(.is-open)[aria-hidden="true"] { display: none !important; }
/* Keep overlay only when explicitly opened */
/* ===== INLINE <style> BLOCK #7 ===== */
/* ----- QS v2 (scope) ----- */
.qs-v2{
--qs-ink:var(--ink, #0f172a);
--qs-muted:var(--muted,#64748b);
--qs-line:var(--line,#e2e8f0);
--qs-accent:var(--accent,#B62C8E);
--qs-ring:#16c6cc;
--qs-card-bg:#fff;
position: relative;
}
/* Aura sutil de fondo (no interfiere con otros bloques) */
.qs-v2::before{
content:"";
position:absolute; inset:-40px 0 auto 0; height:220px; z-index:0;
background:
radial-gradient(1200px 180px at 15% 40%, rgba(182,44,142,.08), transparent 60%),
radial-gradient(800px 160px at 85% 60%, rgba(22,198,204,.07), transparent 55%);
pointer-events:none;
}
.qs-v2 .container{ position:relative; z-index:1; }
/* Titulares */
.qs-v2 .section-title{
font-size:clamp(1.6rem,4vw,2.2rem);
letter-spacing:.02em; font-weight:900; color:var(--qs-ink);
margin:0 0 .35rem;
}
.qs-v2 .section-sub{
margin:0 0 38px; color:var(--qs-muted);
max-width:60ch; line-height:1.75;
}
/* Intro 2 columnas */
.qs-v2 .qs2-intro{
display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start;
margin-top:16px; margin-bottom:56px;
}
.qs-v2 .qs2-h3{
font-size:clamp(1.05rem,2.2vw,1.2rem);
letter-spacing:.1em; font-weight:800; color:var(--qs-ink);
margin:0 0 14px; text-transform:uppercase;
}
.qs-v2 .qs2-p{ color:var(--qs-muted); line-height:1.8; margin:0 0 14px; }
.qs-v2 .qs2-quote{
background:linear-gradient(0deg,#fdeaf6,#fdeaf6);
border:1px solid #f7c6e7; border-left:4px solid var(--qs-accent);
border-radius:16px; color:var(--qs-ink); padding:18px 20px; font-weight:600; margin-top:12px;
box-shadow:0 10px 24px rgba(182,44,142,.08);
}
/* Chips temáticos (sutiles) */
.qs-v2 .qs2-chips{
display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
}
.qs-v2 .qs2-chip{
display:inline-flex; align-items:center; gap:8px;
border:1px solid var(--qs-line); color:var(--qs-ink);
background:#fff; padding:8px 12px; border-radius:999px; font-weight:600; font-size:.92rem;
}
.qs-v2 .qs2-chip i{ color:var(--qs-accent); }
/* Aside */
.qs-v2 .qs2-aside .qs2-item{
padding:14px 0 18px; border-bottom:1px solid var(--qs-line)
}
.qs-v2 .qs2-aside .qs2-item:last-child{border-bottom:none}
.qs-v2 .qs2-aside strong{display:block; color:var(--qs-ink); margin-bottom:6px}
.qs-v2 .qs2-aside p{color:var(--qs-muted); margin:0}
.qs-v2 .qs2-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px }
.qs-v2 .btn{
appearance:none; border:0; border-radius:12px; padding:12px 16px; font-weight:800; cursor:pointer;
background:var(--qs-accent); color:#fff; display:inline-flex; align-items:center; gap:8px;
box-shadow:0 10px 24px rgba(182,44,142,.18); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.qs-v2 .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(182,44,142,.24); }
.qs-v2 .btn.secondary{
background:#0f172a; color:#fff; box-shadow:0 10px 24px rgba(15,23,42,.18);
}
@media (max-width: 1024px){
.qs-v2 .qs2-intro{ grid-template-columns:1fr; gap:32px }
}
/* Grid de temas */
.qs-v2 .qs2-grid{
display:grid; gap:28px;
grid-template-columns:repeat(4,minmax(220px,1fr));
}
@media (max-width:1200px){ .qs-v2 .qs2-grid{grid-template-columns:repeat(3,minmax(200px,1fr))} }
@media (max-width:768px){ .qs-v2 .qs2-grid{grid-template-columns:repeat(2,minmax(180px,1fr))} }
@media (max-width:480px){ .qs-v2 .qs2-grid{grid-template-columns:1fr} }
.qs-v2 .qs2-card{
background:var(--qs-card-bg); border:1px solid var(--qs-line); border-radius:18px;
padding:22px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.06);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
position:relative; isolation:isolate;
}
.qs-v2 .qs2-card::after{
content:""; position:absolute; inset:auto 12% -2px 12%; height:8px; border-radius:12px;
background:linear-gradient(90deg, rgba(22,198,204,.2), rgba(182,44,142,.22));
filter:blur(10px); opacity:0; transition:opacity .25s ease;
}
.qs-v2 .qs2-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 36px rgba(0,0,0,.08);
border-color:#d0f5f6;
}
.qs-v2 .qs2-card:hover::after{ opacity:1; }
.qs-v2 .qs2-badge{
width:88px; height:88px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
border:3px solid var(--qs-ring);
background:
radial-gradient(ellipse at 50% 40%, rgba(22,198,204,.14), transparent 70%),
radial-gradient(ellipse at 50% 70%, rgba(182,44,142,.12), transparent 72%);
box-shadow:inset 0 0 0 6px rgba(22,198,204,.06), 0 8px 20px rgba(15,23,42,.06);
}
.qs-v2 .qs2-badge i{font-size:34px; color:var(--qs-accent)}
.qs-v2 .qs2-title{
font-size:.92rem; letter-spacing:.12em; text-transform:uppercase; font-weight:900;
color:var(--qs-ink); margin:4px 0 6px;
}
.qs-v2 .qs2-desc{color:var(--qs-muted); font-size:.96rem; line-height:1.65; margin:0}
/* Focus visible accesible */
.qs-v2 a:focus-visible, .qs-v2 button:focus-visible{
outline:3px solid color-mix(in lab, var(--qs-accent) 60%, white);
outline-offset:2px; border-radius:12px;
}
/* Ensure gallery images have a minimal box while loading */
.gal-img{display:block; min-height:120px;}
.gal-img.broken{filter: grayscale(1); opacity:0.7;}
/* ===== INLINE <style> BLOCK #8 ===== */
:root {
/* Acento EADTC */
--accent: #B62C8E;
/* WhatsApp */
--wa: #25D366;
--wa-dark: #128C7E;
--wa-darker: #075E54;
/* Colores para modo claro */
--light-bg: #ffffff;
--light-card: #f8f9fa;
--light-border: #e9ecef;
--text-primary: #212529;
--text-secondary: #6c757d;
--shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
--shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.fd-root {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
font-family: system-ui, -apple-system, sans-serif;
}
.fd-dock {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.fd-btn {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
border: none;
box-shadow: var(--shadow);
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.3rem;
position: relative;
overflow: hidden;
}
.fd-btn:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.fd-play { background: var(--accent); }
.fd-ig { background: radial-gradient(circle at 30% 110%, #feda75, #d62976 45%, #962fbf 60%, #4f5bd5); }
.fd-yt { background: #ff0000; }
.fd-fb { background: #1877f2; }
.fd-tk { background: #000; }
.fd-wa { background: linear-gradient(135deg, var(--wa), var(--wa-dark)); }
/* OVERLAY PARA MÓVILES */
.wa-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
backdrop-filter: blur(4px);
display: none; }
/* VENTANA DE WHATSAPP - COMPLETAMENTE REDISEÑADA */
.wa-card {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
width: 90vw;
max-width: 400px;
max-height: 80vh;
background: var(--light-bg);
color: var(--text-primary);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
border: 1px solid var(--light-border);
opacity: 0;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 10001;
display: flex;
flex-direction: column;
}
.wa-card[aria-modal="true"] {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.wa-head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--light-card);
border-bottom: 1px solid var(--light-border);
flex-shrink: 0;
}
.wa-avatar {
width: 40px;
height: 40px;
border-radius: 10px;
background: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--light-border);
overflow: hidden;
}
.wa-title {
font-weight: 600;
font-size: 1.1rem;
}
.wa-status {
font-size: 0.8rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
}
.wa-status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--wa);
}
.wa-close {
margin-left: auto;
background: transparent;
color: var(--text-secondary);
border: 0;
font-size: 1.2rem;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.wa-close:hover {
background: rgba(0, 0, 0, 0.08);
color: var(--text-primary);
}
.wa-body {
padding: 16px;
overflow-y: auto;
background: var(--light-bg);
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
min-height: 0;
}
.wa-bubble {
max-width: 85%;
padding: 12px 14px;
border-radius: 16px;
line-height: 1.4;
box-shadow: var(--shadow);
animation: bubbleAppear 0.3s ease;
}
@keyframes bubbleAppear {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wa-bot {
background: var(--light-card);
border: 1px solid var(--light-border);
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.wa-user {
background: linear-gradient(135deg, var(--wa), var(--wa-dark));
color: white;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.wa-compose {
padding: 16px;
background: var(--light-bg);
border-top: 1px solid var(--light-border);
flex-shrink: 0;
}
.wa-to {
display: flex;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.wa-to-item {
display: flex;
align-items: center;
gap: 8px;
background: var(--light-card);
border: 1px solid var(--light-border);
padding: 8px 12px;
border-radius: 20px;
color: var(--text-primary);
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s ease;
white-space: nowrap;
}
.wa-to-item:hover {
background: #e9ecef;
}
.wa-to-item input {
accent-color: var(--wa);
}
.wa-input-wrapper {
display: flex;
gap: 10px;
align-items: flex-end;
}
.wa-compose textarea {
flex: 1;
resize: none;
border-radius: 20px;
padding: 12px 16px;
border: 1px solid var(--light-border);
background: var(--light-bg);
color: var(--text-primary);
outline: none;
min-height: 44px;
max-height: 120px;
font-family: inherit;
transition: all 0.2s ease;
line-height: 1.4;
font-size: 0.9rem;
}
.wa-compose textarea:focus {
border-color: var(--wa);
box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.15);
}
.wa-send {
background: linear-gradient(135deg, var(--wa), var(--wa-dark));
color: white;
border: 0;
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 1rem;
flex-shrink: 0;
}
.wa-send:hover {
transform: scale(1.05);
}
/* SCROLLBAR MEJORADO */
.wa-body::-webkit-scrollbar {
width: 6px;
}
.wa-body::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
}
.wa-body::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
.wa-body::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.25);
}
/* RESPONSIVE MEJORADO */
@media (max-width: 768px) {
.fd-root {
right: 15px;
bottom: 15px;
}
.fd-btn {
width: 46px;
height: 46px;
font-size: 1.2rem;
}
.fd-dock {
gap: 8px;
}
.wa-card {
width: 95vw;
max-height: 85vh;
}
.wa-head {
padding: 14px;
}
.wa-body {
padding: 14px;
}
.wa-compose {
padding: 14px;
}
}
@media (max-width: 480px) {
.fd-root {
right: 10px;
bottom: 10px;
}
.fd-btn {
width: 42px;
height: 42px;
font-size: 1.1rem;
}
.wa-card {
width: 98vw;
max-height: 90vh;
border-radius: 16px;
}
.wa-head {
padding: 12px;
}
.wa-body {
padding: 12px;
gap: 10px;
}
.wa-compose {
padding: 12px;
}
.wa-to-item {
font-size: 0.8rem;
padding: 6px 10px;
}
.wa-bubble {
max-width: 90%;
padding: 10px 12px;
font-size: 0.9rem;
}
}
/* Para pantallas muy pequeñas */
@media (max-width: 360px) {
.wa-card {
width: 100vw;
height: 100vh;
max-height: 100vh;
border-radius: 0;
}
.wa-head {
padding: 16px 12px;
}
.wa-body {
padding: 12px;
}
}