PageSourceSearch

https://elhuatekeradio.com/

html elhuatekeradio.com collected 2026-10-07 04:42:26 UTC 58,695 bytes, 2,314 lines download raw bytes

1<!DOCTYPE html>
2<html lang="es">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Inicio | El Huateke Radio</title>
7
8<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
9
10<style>
11:root{
12  --blue:#0f2a6b;
13  --blueDark:#081a3a;
14  --blueSoft:#1d4ed8;
15
16  --gold:#d4a93c;
17  --dark:#0b0b0b;
18  --dark2:#141414;
19
20  --white:#ffffff;
21  --muted:rgba(255,255,255,.78);
22  --stroke:rgba(255,255,255,.10);
23  --light:#f4f4f4;
24
25  --shadow:0 18px 45px rgba(0,0,0,.45);
26  --radius:16px;
27}
28
29/*** GLOBAL ***/
30*{ box-sizing:border-box; }
31body{ margin:0; font-family:'Segoe UI',sans-serif; background:var(--light); color:#111; }
32a{ color:inherit; }
33.section-box{ width:92%; max-width:1200px; margin:40px auto; }
34
35/*** HEADER (Azul premium) ***/
36header{
37  width:100%;
38  background:linear-gradient(90deg, var(--blue), var(--blueDark));
39  border-bottom:2px solid var(--gold);
40  position:sticky;
41  top:0;
42  z-index:999;
43}
44.nav-container{
45  width:92%;
46  max-width:1500px;
47  margin:auto;
48  display:flex;
49  align-items:center;
50  justify-content:space-between;
51  padding:12px 0;
52  gap:14px;
53}
54
55/*** BRAND ***/
56.brand{ display:flex; align-items:center; gap:12px; min-width:220px; }
57.brand img{ height:48px; width:auto; display:block; }
58.brand .brand-text{
59  font-size:24px;
60  font-weight:900;
61  color:var(--gold);
62  letter-spacing:1px;
63  line-height:1;
64  text-shadow:0 0 10px rgba(212,169,60,.35);
65}
66
67/*** NAV DESKTOP ***/
68.nav{
69  display:flex;
70  align-items:center;
71  gap:18px;
72  position:relative;
73}
74
75/* ✅ SOLO el UL principal (no afecta submenu) */
76.nav > ul{
77  list-style:none;
78  display:flex;
79  gap:10px;
80  padding:0;
81  margin:0;
82}
83
84.nav a{
85  color:rgba(255,255,255,.92);
86  text-decoration:none;
87  font-size:15px;
88  font-weight:900;
89  padding:10px 12px;
90  border-radius:12px;
91  transition:.2s ease;
92  letter-spacing:.2px;
93}
94.nav a:hover{
95  background:rgba(29,78,216,.22);
96  color:#fff;
97}
98
99/* Indicador "activo" */
100.nav a.active{
101  color:#111;
102  background:linear-gradient(180deg, var(--gold), #c7921f);
103  box-shadow:0 10px 22px rgba(212,169,60,.22);
104}
105
106/*** HAMBURGER BUTTON ***/
107.burger{
108  display:none;
109  width:46px;
110  height:46px;
111  border:1px solid rgba(255,255,255,.18);
112  background:rgba(0,0,0,.25);
113  border-radius:14px;
114  box-shadow:0 10px 26px rgba(0,0,0,.35);
115  cursor:pointer;
116  align-items:center;
117  justify-content:center;
118  position:relative;
119  -webkit-tap-highlight-color: transparent;
120}
121.burger span{
122  position:absolute;
123  width:20px;
124  height:2px;
125  background:var(--gold);
126  border-radius:2px;
127  transition:.25s ease;
128}
129.burger span:nth-child(1){ transform:translateY(-6px); }
130.burger span:nth-child(2){ transform:translateY(0); }
131.burger span:nth-child(3){ transform:translateY(6px); }
132
133/* burger anim when open */
134.burger[aria-expanded="true"]{
135  border-color:rgba(212,169,60,.45);
136  box-shadow:0 0 0 4px rgba(212,169,60,.12), 0 12px 30px rgba(0,0,0,.45);
137}
138.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(0) rotate(45deg); }
139.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
140.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(0) rotate(-45deg); }
141
142/*** MOBILE PANEL ***/
143@media(max-width:900px){
144  .brand{ min-width:auto; }
145  .burger{ display:flex; }
146
147  /* ✅ SOLO el UL principal (no submenu) */
148  .nav > ul{
149    display:none;
150    position:fixed;
151    top:70px;
152    left:0;
153    right:0;
154    width:100%;
155    max-width:100%;
156    background:linear-gradient(180deg, #0f0f0f, #151515);
157    border-top:1px solid rgba(255,255,255,.08);
158    box-shadow:var(--shadow);
159    padding:12px 16px;
160    margin:0;
161    flex-direction:column;
162    gap:6px;
163    z-index:9999;
164  }
165
166  .nav > ul.open{ display:flex; }
167
168  .nav li > a{
169    display:block;
170    width:100%;
171    padding:14px 16px;
172    border-radius:14px;
173    font-size:16px;
174    color:rgba(255,255,255,.92);
175    border:1px solid transparent;
176  }
177
178  .nav li > a:hover{
179    background:rgba(212,169,60,.12);
180    color:var(--gold);
181    border-color:rgba(212,169,60,.18);
182  }
183
184  /* ✅ SUBMENU EN MÓVIL: CERRADO por defecto (acordeón) */
185  .submenu{
186    position:static !important;
187    display:none !important;         /* 👈 cerrado */
188    background:transparent !important;
189    border-radius:0 !important;
190    min-width:0 !important;
191    overflow:hidden !important;
192    padding:6px 0 0 0 !important;
193    margin:0 !important;
194  }
195
196  /* abrir cuando el LI tenga .sub-open */
197  .has-sub.sub-open > .submenu{
198    display:block !important;
199  }
200
201  .submenu li a{
202    padding:12px 16px !important;
203    border-radius:14px !important;
204    opacity:.95;
205  }
206
207  /* “DJ Polly…” como toggle bonito */
208  .has-sub >
208 a.no-link{
209    display:flex;
210    align-items:center;
211    justify-content:space-between;
212  }
213
214  /* flecha rota cuando abre */
215  .has-sub > a.no-link span{
216    display:inline-block;
217    transition:.2s ease;
218  }
219  .has-sub.sub-open > a.no-link span{
220    transform:rotate(180deg);
221  }
222}
223
224/*** SLIDER (Swiper) - FIX COMPLETO (lo dejo igual como lo tenías) ***/
225.slider-full{
226  width:100%;
227  position:relative;
228  overflow:hidden;
229}
230
231/* Desktop: bonito y grande */
232.slider-full .swiper-slide{
233  width:100%;
234  height:70vh;
235  min-height:420px;
236  background-size:cover;
237  background-position:center;
238  background-repeat:no-repeat;
239  position:relative;
240  display:flex;
241  align-items:flex-end;
242}
243
244/* Overlay */
245.slider-full .slide-overlay{
246  width:100%;
247  padding:40px;
248  background:linear-gradient(to top,rgba(0,0,0,.70),transparent);
249  color:var(--white);
250}
251.slide-title{ font-size:32px; font-weight:900; margin:0 0 6px 0; }
252.slide-sub{ margin:0 0 14px 0; opacity:.95; max-width:900px; line-height:1.35; }
253
254/* Botón */
255.slide-btn{
256  display:inline-block;
257  padding:10px 14px;
258  border-radius:12px;
259  background:linear-gradient(180deg, var(--gold), #c7921f);
260  color:#111;
261  font-weight:900;
262  text-decoration:none;
263  box-shadow:0 12px 28px rgba(212,169,60,.25);
264}
265.slide-btn:hover{ filter:brightness(1.04); }
266
267/* ✅ MOBILE: se ve COMPLETO, sin franjas */
268@media (max-width: 768px){
269  .slider-full .swiper-slide{
270    height:auto;
271    min-height:0;
272    aspect-ratio: 1920 / 700;
273    background-size:contain;
274    background-color:transparent;
275  }
276
277  .slider-full .slide-overlay{
278    padding:18px 14px;
279    background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.15), transparent);
280  }
281}
282@media (min-width: 901px){
283  .slider-full .swiper-slide{
284    min-height: unset;
285    aspect-ratio: 1920 / 700;
286    background-size: contain;
287  }
288}
289
290/* ===== SLIDER: PC con ratio 1920x700 (sin orillas), móvil intacto ===== */
291.slider-full{ width:100%; }
292
293/* PC / laptop */
294@media (min-width: 901px){
295  .slider-full{
296    height: clamp(380px, 36.458vw, 700px);
297    background:#000;
298  }
299
300  .slider-full .swiper-slide{
301    height: 100% !important;
302    background-position: center center;
303    background-repeat: no-repeat;
304    background-size: cover;
305  }
306}
307
308/* Móvil: NO lo tocamos */
309@media (max-width: 900px){
310  .slider-full{ height: auto; }
311}
312
313#navMenu li{ position:relative; }
314
315/* SUBMENU oculto (desktop) */
316.submenu{
317  position:absolute;
318  top:100%;
319  left:0;
320  background:#0c1f36;
321  list-style:none;
322  padding:0;
323  margin:0;
324  min-width:220px;
325  display:none;
326  border-radius:10px;
327  overflow:hidden;
328  z-index:999;
329  flex-direction:column;
330}
331.submenu li a{
332  display:block;
333  padding:12px;
334  color:#fff;
335  text-decoration:none;
336  font-weight:700;
337  white-space:nowrap;
338}
339.submenu li a:hover{
340  background:#d4a93c;
341  color:#111;
342}
343
344/* mostrar al pasar mouse */
345@media(min-width:901px){
346  .has-sub:hover .submenu{
347    display:flex;
348  }
349}
350
351/* ✅ DJ principal sin navegación (solo despliega) */
352.no-link{ cursor: pointer; }
353</style>
354</head>
355<body>
356
357<header>
358  <div class="nav-container">
359    <div class="brand">
360              <img src="/assets/uploads/logos/logo_1771998535.png" alt="El Huateke Radio">
361          </div>
362
363    <nav class="nav">
364      <button class="burger" id="burgerBtn" aria-label="Abrir menú" aria-expanded="false" aria-controls="navMenu">
365        <span></span><span></span><span></span>
366      </button>
367
368      <ul id="navMenu">
369        <li><a href="/index.php">Inicio</a></li>
370
371        <!-- MENU DJ CON SUBMENU (toggle en móvil, hover en desktop) -->
372        <li class="has-sub">
373          <a href="#" class="no-link js-subToggle" aria-expanded="false">DJ Polly Marks <span>▾</span></a>
374          <ul class="submenu">
375            <li><a href="/dj-biografia.php">Biografía</a></li>
376            <li><a href="/dj-servicios.php">Nuestros Servicios</a></li>
377            <li><a href="/dj-polly-marks.php">DJ Polly Marks</a></li>
378          </ul>
379        </li>
380
381        <li><a href="/programacion.php">Programación</a></li>
382        <li><a href="/eventos.php">Eventos</a></li>
383        <li><a href="/videos.php">Videos</a></li>
384        <li><a href="/contacto.php">Contacto</a></li>
385      </ul>
386    </nav>
387  </div>
388</header>
389
390<script>
391(function(){
392  const btn  = document.getElementById('burgerBtn');
393  const menu = document.getElementById('navMenu');
394  if(!btn || !menu) return;
395
396  const isMobile = () => window.matchMedia("(max-width: 900px)").matches;
397
398  const closeMenu = () => {
399    menu.classList.remove('open');
400    btn.setAttribute('aria-expanded','false');
401    btn.setAttribute('aria-label','Abrir menú');
402
403    // cerrar submenus al cerrar el menú
404    menu.querySelectorAll('.has-sub.sub-open').forEach(li=>{
405      li.classList.remove('sub-open');
406      const a = li.querySelector('a.js-subToggle');
407      if(a) a.setAttribute('aria-expanded','false');
408    });
409  };
410
411  // ✅ Burger toggle
412  btn.addEventListener('click', function(e){
413    e.stopPropagation();
414    const open = btn.getAttribute('aria-expanded') === 'true';
415    if(open) closeMenu();
416    else{
417      menu.classList.add('open');
418      btn.setAttribute('aria-expanded','true');
419      btn.setAttribute('aria-label','Cerrar menú');
420    }
421  });
422
423  // ✅ Click dentro del menú
424  menu.addEventListener('click', function(e){
425    e.stopPropagation();
426
427    const a = e.target.closest('a');
428    if(!a) return;
429
430    // ✅ Toggle del submenu (DJ Polly)
431    if(a.classList.contains('js-subToggle')){
432      e.preventDefault();
433      if(!isMobile()) return; // en desktop funciona por hover
434
435      const li = a.closest('.has-sub');
436      if(!li) return;
437
438      // (opcional) cerrar otros submenus
439      menu.querySelectorAll('.has-sub.sub-open').forEach(other=>{
440        if(other !== li){
441          other.classList.remove('sub-open');
442          const oa = other.querySelector('a.js-subToggle');
443          if(oa) oa.setAttribute('aria-expanded','false');
444        }
445      });
446
447      const willOpen = !li.classList.contains('sub-open');
448      li.classList.toggle('sub-open', willOpen);
449      a.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
450      return;
451    }
452
453    // ✅ Cualquier link normal: cierra el menú
454    closeMenu();
455  });
456
457  // ✅ Click fuera: cierra
458  document.addEventListener('click', function(){
459    const open = btn.getAttribute('aria-expanded') === 'true';
460    if(open) closeMenu();
461  });
462
463  // ✅ ESC: cierra
464  document.addEventListener('keydown', function(e){
465    if(e.key === 'Escape') closeMenu();
466  });
467
468  // ✅ Si cambias a desktop, limpia estado del acordeón
469  window.addEventListener('resize', function(){
470    if(!isMobile()){
471      menu.querySelectorAll('.has-sub.sub-open').forEach(li=>{
472        li.classList.remove('sub-open');
473        const a = li.querySelector('a.js-subToggle');
474        if(a) a.setAttribute('aria-expanded','false');
475      });
476    }
477  });
478})();
479</script>
479
480<div class="swiper slider-full">
481  <div class="swiper-wrapper">
482
483                  <div class="swiper-slide" style="background-image:url('/assets/uploads/sliders/slide_1771998913_2855.png');">
484          <div class="slide-overlay">
485            
486            
487                      </div>
488        </div>
489              <div class="swiper-slide" style="background-image:url('/assets/uploads/sliders/slide_1771997119_8617.jpg');">
490          <div class="slide-overlay">
491            
492            
493                      </div>
494        </div>
495              <div class="swiper-slide" style="background-image:url('/assets/uploads/sliders/slide_1771994166_4400.jpg');">
496          <div class="slide-overlay">
497            
498            
499                      </div>
500        </div>
501      
502    
503  </div>
504</div>
505
506<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
vendor: 2 bytes, line 506
506
507<script>
508  new Swiper(".slider-full",{
509    loop:true,
510    autoplay:{delay:3800, disableOnInteraction:false},
511    speed:800
512  });
513</script>
513
514
515
516
517<style>
518/* ===== FIX MOBILE: evitar scroll lateral ===== */
519html, body{
520  width:100%;
521  max-width:100%;
522  overflow-x:hidden;
523}
524
525*, *::before, *::after{
526  box-sizing:border-box;
527}
528
529/* medios nunca deben romper el ancho */
530img, video, iframe{
531  max-width:100%;
532}
533
534/* contenedores principales sin “sumas raras” */
535.section-box,
536.peg-section{
537  width:min(92%, 1200px);
538  margin-left:auto;
539  margin-right:auto;
540}
541
542/* ====== SOLO estilos propios del index ====== */
543
544/*** CONTENT BOX ***/
545.section-box{ width:92%; max-width:1200px; margin:40px auto; }
546
547/* Layout TV + FB */
548.tv-grid{
549  display:flex;
550  gap:25px;
551  flex-wrap:wrap;
552  align-items:stretch;
553}
554
555/* Player */
556.tv-player{
557  flex:2 1 60%;
558  min-width:300px;
559  max-width:700px;
560  background:#000;
561  border-radius:12px;
562  overflow:hidden;
563  box-shadow:0 6px 22px rgba(0,0,0,.16);
564}
565.tv-player video{
566  width:100%;
567  height:100%;
568  min-height:380px;
569  object-fit:cover;
570  display:block;
571}
572
573/* Facebook */
574.fb-box{
575  flex:1 1 35%;
576  min-width:280px;
577  background:var(--white);
578  border-radius:12px;
579  box-shadow:0 6px 22px rgba(0,0,0,.12);
580  overflow:hidden;
581  min-width:0;
582}
583.fb-box iframe{
584  display:block;
585  width:100% !important;
586  height:100%;
587  min-height:380px;
588  border:0;
589}
590
591/*** NUESTROS MINISTERIOS ***/
592.min-header{
593  display:flex;
594  align-items:flex-end;
595  justify-content:space-between;
596  gap:16px;
597  margin-bottom:16px;
598}
599.min-header h2{
600  margin:0;
601  font-size:26px;
602  font-weight:900;
603}
604.min-header p{ margin:0; color:rgba(0,0,0,.65); max-width:560px; }
605
606.ministries{ position:relative; }
607.ministries::after{
608  content:"";
609  position:absolute;
610  right:0;
611  top:74px;
612  width:40px;
613  height:140px;
614  background:linear-gradient(to left, var(--light), transparent);
615  pointer-events:none;
616}
617
618.min-grid{
619  display:flex;
620  gap:14px;
621  overflow-x:auto;
622  padding-bottom:10px;
623  scroll-behavior:smooth;
624}
625.min-grid::-webkit-scrollbar{ height:6px; }
626.min-grid::-webkit-scrollbar-thumb{
627  background:rgba(212,169,60,.4);
628  border-radius:10px;
629}
630
631.min-card{
632  flex:0 0 160px;
633  background: var(--white);
634  border-radius:14px;
635  border:1px solid rgba(0,0,0,.06);
636  box-shadow:0 10px 26px rgba(0,0,0,.06);
637  padding:14px;
638  text-decoration:none;
639  display:flex;
640  align-items:center;
641  justify-content:center;
642  min-height:110px;
643  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
644  position:relative;
645  overflow:hidden;
646}
647.min-card:hover{
648  transform: translateY(-3px);
649  border-color: rgba(212,169,60,.35);
650  box-shadow:0 16px 34px rgba(0,0,0,.10);
651}
652.min-card img{
653  max-width:100%;
654  max-height:90px;
655  width:auto;
656  height:auto;
657  object-fit:contain;
658  display:block;
659  margin:auto;
660}
661
662/*** VIDEOS HOME ***/
663.videos-head{
664  display:flex;
665  align-items:flex-end;
666  justify-content:space-between;
667  gap:16px;
668  margin-bottom:16px;
669}
670.videos-head h2{
671  margin:0;
672  font-size:26px;
673  font-weight:900;
674}
675.videos-more{
676  color:var(--black);
677  text-decoration:none;
678  font-weight:900;
679  border-bottom:2px solid rgba(212,169,60,.6);
680}
681.videos-more:hover{ color:var(--gold); border-color:var(--gold); }
682
683.videos-grid{
684  display:grid;
685  grid-template-columns:repeat(3, 1fr);
686  gap:16px;
687}
688.video-card{
689  background:var(--white);
690  border-radius:14px;
691  box-shadow:0 10px 26px rgba(0,0,0,.06);
692  overflow:hidden;
693  border:1px solid rgba(0,0,0,.06);
694}
695.video-frame{
696  position:relative;
697  padding-top:56.25%;
698  background:#000;
699}
700.video-frame iframe{
701  position:absolute;
702  inset:0;
703  width:100%;
704  height:100%;
705  border:0;
706}
707.video-title{
708  padding:12px 14px;
709  font-weight:900;
710  font-size:14px;
711}
712
713/*** Responsive ***/
714@media(max-width:900px){
715  .tv-player video{ min-height:260px; }
716  .fb-box iframe{ min-height:260px; }
717  .videos-grid{ grid-template-columns:repeat(2, 1fr); }
718}
719@media(max-width:600px){
720  .tv-grid{ flex-direction:column; }
721  .fb-box iframe{ min-height:600px; }
722  .videos-grid{ grid-template-columns:1fr; }
723}
724
725.events-head{
726  display:flex;
727  align-items:flex-end;
728  justify-content:space-between;
729  gap:16px;
730  margin-bottom:16px;
731}
732.events-head h2{
733  margin:0;
734  font-size:26px;
735  font-weight:900;
736  color:var(--black);
737}
738.events-more{
739  color:var(--black);
740  text-decoration:none;
741  font-weight:800;
742  border-bottom:2px solid rgba(212,169,60,.6);
743}
744.events-more:hover{ color:var(--gold); border-color:var(--gold); }
745
746.events-grid{
747  display:grid;
748  grid-template-columns:repeat(3, 1fr);
749  gap:16px;
750}
751.event-card{
752  background:var(--white);
753  border-radius:14px;
754  box-shadow:0 10px 26px rgba(0,0,0,.06);
755  overflow:hidden;
756  border:1px solid rgba(0,0,0,.06);
757}
758.event-img{ height:190px; background:#eee; }
759.event-img img{ width:100%; height:100%; object-fit:cover; display:block; }
760.event-body{ padding:14px; }
761.event-body h3{ margin:0 0 6px 0; font-size:16px; font-weight:900; }
762.event-meta{ color:rgba(0,0,0,.65); font-weight:800; font-size:13px; margin-bottom:10px; }
763.event-body p{ margin:0; color:rgba(0,0,0,.75); line-height:1.4; }
764
765@media(max-width:900px){ .events-grid{ grid-template-columns:repeat(2,1fr);} }
766@media(max-width:600px){ .events-grid{ grid-template-columns:1fr;} }
767
768/*** TV SLIDER ***/
769.tv-player{
770  background:#000;
771  border-radius:18px;
772  overflow:hidden;
773  aspect-ratio: 16/9;
774  width:100%;
775  position:relative;
776}
777.tv-slider{ position:absolute; inset:0; }
778.tv-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
779.tv-slide.active{ opacity:1; }
780.tv-slide img{
781  width:100%;
782  height:100%;
783  object-fit:cover;
784  object-position:center;
785  display:block;
786  transform:none !important;
787}
788
789/*** SPONSORS ***/
790.sponsor-marquee{
791  margin-top:20px;
792  overflow:hidden;
793  border-radius:20px;
794  background:#fff;
795  padding:25px 0;
796}
797.sponsor-track{
798  display:flex;
799  align-items:center;
800  gap:30px;
801  width:max-content;
802  animation: scrollSponsors 90s linear infinite;
803}
804.sponsor-marquee:hover .sponsor-track{
805  animation-play-state: paused;
806}
807.sponsor-card{
808  flex:0 0 auto;
809  width:320px;
810  height:160px;
811  background:#fff;
812  border-radius:20px;
813  padding:15px;
814  box-shadow:0 8px 25px rgba(0,0,0,.08);
815  display:flex;
816  align-items:center;
817  justify-content:center;
818}
819.sponsor-card img{
820  width:100%;
821  height:100%;
822  object-fit:contain;
823}
824@keyframes scrollSponsors{
825  from{ transform:translateX(0); }
826  to{ transform:translateX(-50%); }
827}
828
829/*** PLATFORMS ***/
830.platforms-section{
831  padding:60px 20px;
832  background:#fff;
833}
834.platforms-wrap{
835  max-width:1100px;
836  margin:auto;
837  text-align:center;
838}
839.platforms-title{
840  font-size:32px;
841  font-weight:900;
842  margin-bottom:40px;
843}
844.platforms-logos{
845  display:grid;
846  grid-template-columns:repeat(3, 1fr);
847  gap:30px;
848}
849.platforms-logos a{
850  background:#fff;
851  padding:30px;
852  border-radius:26px;
853  display:flex;
854  justify-content:center;
855  align-items:center;
856  box-shadow:0 15px 40px rgba(0,0,0,.08);
857  transition:transform .3s ease, box-shadow .3s ease;
858}
859.platforms-logos a:hover{
860  transform:translateY(-6px);
861  box-shadow:0 25px 60px rgba(0,0,0,.12);
862}
863.platforms-logos img{
864  width:100%;
865  max-width:300px;
866  height:160px;
867  object-fit:contain;
868}
869@media(max-width:900px){
870  .platforms-logos{ grid-template-columns:1fr 1fr; }
871}
872@media(max-width:520px){
873  .platforms-logos{ grid-template-columns:1fr; }
874}
875
876/* ===== PERFIL DUEÑO ===== */
877.owner-box{
878  flex:1 1 35%;
879  min-width:280px;
880  display:flex;
881  align-items:center;
882}
883.owner-card{
884  background:#0b0b0b;
885  border-radius:14px;
886  padding:26px;
887  box-shadow:0 10px 30px rgba(0,0,0,.35);
888  text-align:center;
889  border:1px solid rgba(255,255,255,.08);
890}
891.owner-photo img{
892  width:120px;
893  height:120px;
894  object-fit:cover;
895  border-radius:50%;
896  border:3px solid #f5c400;
897  margin-bottom:14px;
898}
899.owner-name{
900  margin:6px 0 10px;
901  font-size:18px;
902  font-weight:900;
903  color:#f5c400;
904  letter-spacing:.6px;
905}
906.owner-text{
907  color:rgba(255,255,255,.78);
908  line-height:1.7;
909  font-size:14px;
910}
911
912/* ====== PEG SECTION (LA PARTE RADIO/CHAT/FACEBOOK) ====== */
913.peg-section{
914  width:92%;
915  max-width:1200px;
916  margin:40px auto;
917}
918.peg-grid{
919  display:grid;
920  grid-template-columns: repeat(3, minmax(0, 1fr));
921  gap:18px;
922  align-items:stretch;
923}
924@media(max-width:1100px){
925  .peg-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
926}
927@media(max-width:720px){
928  .peg-grid{ grid-template-columns: 1fr; }
929}
930.peg-card{
931  background:#ffffff;
932  border-radius:14px;
933  box-shadow:0 10px 30px rgba(0,0,0,.12);
934  overflow:hidden;
935  display:flex;
936  flex-direction:column;
937  padding:18px;
938}
939.peg-cardTop{
940  display:flex;
941  align-items:center;
942  justify-content:space-between;
943  gap:10px;
944  margin-bottom:12px;
945  flex-wrap:wrap;
946}
947.peg-cardTop h3{ margin:0; font-weight:900; color:#111; }
948.peg-miniBtn{
949  padding:10px 14px;
950  border-radius:12px;
951  text-decoration:none;
952  font-weight:900;
953  background:#f5c400;
954  color:#111;
955}
956.peg-chip{
957  background:#eef2ff;
958  color:#1a3a8a;
959  font-weight:800;
960  border-radius:999px;
961  padding:6px 10px;
962  font-size:12px;
963}
964.peg-embed{
965  border-radius:14px;
966  overflow:hidden;
967  border:1px solid rgba(0,0,0,.10);
968  background:#000;
969  aspect-ratio:16/9;
970}
971.peg-embedTall{
972  border-radius:14px;
973  overflow:hidden;
974  border:1px solid rgba(0,0,0,.10);
975  background:#000;
976  aspect-ratio: 10/12;
977}
978.peg-embed iframe{
979  width:100%;
980  height:100%;
981  border:0;
982}
983.peg-note{
984  margin-top:10px;
985  font-size:13px;
986  font-weight:700;
987  color:rgba(0,0,0,.6);
988}
989
990/* ===== CAJITA FACEBOOK MINI ===== */
991.fb-mini{
992  background:#fff;
993  border:1px solid rgba(0,0,0,.12);
994  border-radius:16px;
995  padding:14px;
996  box-shadow:0 10px 22px rgba(0,0,0,.06);
997}
998.fb-miniHead{
999  display:flex;
1000  align-items:center;
1001  gap:12px;
1002  padding-bottom:12px;
1003  border-bottom:1px solid rgba(0,0,0,.08);
1004  margin-bottom:12px;
1005}
1006.fb-miniAvatar{
1007  width:44px;
1008  height:44px;
1009  border-radius:50%;
1010  object-fit:cover;
1011  border:1px solid rgba(0,0,0,.12);
1012}
1013.fb-miniName{
1014  font-weight:900;
1015  font-size:15px;
1016  color:#111;
1017  line-height:1.1;
1018}
1019.fb-miniMeta{
1020  font-size:12px;
1021  color:rgba(0,0,0,.55);
1022  font-weight:700;
1023  margin-top:2px;
1024}
1025.fb-miniPost{
1026  background:#f6f7f9;
1027  border:1px solid rgba(0,0,0,.08);
1028  border-radius:14px;
1029  padding:12px;
1030  margin-bottom:12px;
1031}
1032.fb-miniText{
1033  font-size:13px;
1034  line-height:1.45;
1035  color:rgba(0,0,0,.78);
1036  font-weight:700;
1037}
1038.fb-miniActions{
1039  display:flex;
1040  gap:10px;
1041}
1042.fb-miniBtn{
1043  flex:1;
1044  text-align:center;
1045  padding:10px 12px;
1046  border-radius:12px;
1047  text-decoration:none;
1048  font-weight:900;
1049  background:#1877f2;
1050  color:#fff;
1051  border:1px solid rgba(0,0,0,.06);
1052}
1053.fb-miniBtnGhost{
1054  background:#fff;
1055  color:#1877f2;
1056  border:1px solid rgba(24,119,242,.35);
1057}
1058/* ===== PEG SECTION (3 TARJETAS COMO ROHI) ===== */
1059.peg-grid.peg-grid3{
1060  display:grid !important;
1061  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
1062  gap:18px !important;
1063  align-items:stretch !important;
1064}
1065
1066@media(max-width:1100px){
1067  .peg-grid.peg-grid3{
1068    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
1069  }
1070}
1071@media(max-width:720px){
1072  .peg-grid.peg-grid3{
1073    grid-template-columns: 1fr !important;
1074  }
1075}
1076
1077/* TARJETAS MISMA ALTURA */
1078.peg-card{
1079  display:flex !important;
1080  flex-direction:column !important;
1081}
1082
1083/* EL EMBED CRECE (para que FB se vea bien) */
1084.peg-embed,
1085.peg-embedTall{
1086  flex:1 !important;
1087  min-height:450px;  /* <<< clave para que FB tenga espacio */
1088}
1089
1090/* EL IFRAME LLENA COMPLETO */
1091.peg-embed iframe,
1092.peg-embedTall iframe{
1093  width:100% !important;
1094  height:100% !important;
1095  border:0 !important;
1096}
1097/* ===== PLATAFORMAS PRO ===== */
1098.platforms-section{
1099  padding:60px 18px;
1100  background:#fff;
1101}
1102
1103.platforms-wrap{
1104  max-width:1200px;
1105  margin:0 auto;
1106  text-align:center;
1107}
1108
1109/* botones grandes arriba */
1110.platforms-storeTop{
1111  display:flex;
1112  justify-content:center;
1113  gap:18px;
1114  flex-wrap:wrap;
1115  margin-bottom:18px;
1116}
1117
1118.store-btn{
1119  display:inline-flex;
1120  transition:transform .25s ease, filter .25s ease;
1121}
1122
1123.store-btn img{
1124  height:54px;
1125  width:auto;
1126  display:block;
1127  filter: drop-shadow(0 12px 24px rgba(0,0,0,.18));
1128}
1129
1130.store-btn:hover{ transform: translateY(-3px); }
1131
1132/* titulo */
1133.platforms-title{
1134  font-size:34px;
1135  font-weight:1000;
1136  margin:10px 0 34px;
1137  color:#1240ff;
1138  letter-spacing:.2px;
1139}
1140
1141/* tarjetas */
1142.platforms-cards{
1143  display:grid;
1144  grid-template-columns:repeat(3, minmax(0,1fr));
1145  gap:22px;
1146}
1147
1148.p-card{
1149  background:#fff;
1150  border-radius:22px;
1151  padding:26px 18px;
1152  text-decoration:none;
1153  box-shadow:0 18px 55px rgba(0,0,0,.10);
1154  border:1px solid rgba(0,0,0,.06);
1155  transition:transform .25s ease, box-shadow .25s ease;
1156  display:flex;
1157  flex-direction:column;
1158  align-items:center;
1159}
1160
1161.p-card:hover{
1162  transform: translateY(-6px);
1163  box-shadow:0 28px 70px rgba(0,0,0,.14);
1164}
1165
1166.p-logo{
1167  width:100%;
1168  height:150px;
1169  display:flex;
1170  align-items:center;
1171  justify-content:center;
1172}
1173
1174.p-logo img{
1175  max-width:320px;
1176  width:100%;
1177  height:150px;
1178  object-fit:contain;
1179}
1180
1181/* subtitulo */
1182.p-sub{
1183  margin-top:10px;
1184  font-weight:900;
1185  font-size:12px;
1186  letter-spacing:1px;
1187  color:rgba(0,0,0,.35);
1188}
1189
1190/* botones pequeños dentro */
1191.p-stores{
1192  display:flex;
1193  gap:10px;
1194  margin-top:10px;
1195  justify-content:center;
1196  flex-wrap:wrap;
1197}
1198
1199.p-stores img{
1200  height:30px;
1201  width:auto;
1202  display:block;
1203  filter: drop-shadow(0 8px 16px rgba(0,0,0,.12));
1204}
1205
1206/* responsive */
1207@media(max-width:980px){
1208  .platforms-cards{ grid-template-columns:1fr 1fr; }
1209  .platforms-title{ font-size:28px; }
1210}
1211@media(max-width:560px){
1212  .platforms-cards{ grid-template-columns:1fr; }
1213  .platforms-title{ font-size:24px; }
1214  .store-btn img{ height:48px; }
1215}
1216.platforms-title{
1217  font-size:34px;
1218  font-weight:1000;
1219  margin:10px 0 34px;
1220  color:#f5c400; /* dorado RG 88 */
1221  letter-spacing:.3px;
1222  text-align:center;
1223  text-shadow:0 2px 6px rgba(0,0,0,.25);
1224}
1225@media(max-width:600px){
1226  .platforms-title{
1227    font-size:26px;
1228  }
1229}
1230/* EVENTOS – mostrar banner COMPLETO */
1231.event-img{
1232  background:#000;          /* fondo negro elegante */
1233  overflow:hidden;
1234  padding:10px;             /* espacio para que no se pegue */
1235}
1236
1237.event-img img{
1238  width:100%;
1239  height:auto;              /* 👈 clave */
1240  object-fit:contain;       /* 👈 NO recorta */
1241  display:block;
1242}
1243.event-img{
1244  background:#000;
1245  display:flex;
1246  align-items:center;
1247  justify-content:center;
1248  min-height:320px;
1249}
1250
1251.event-img img{
1252  max-height:320px;
1253  width:auto;
1254}
1255.video-fallback{position:relative;background:#000}
1256.vf-thumb{
1257  position:absolute; inset:0;
1258  width:100%; height:100%;
1259  object-fit:cover;
1260  filter:contrast(1.05) saturate(1.05);
1261}
1262.video-fallback::after{
1263  content:"";
1264  position:absolute; inset:0;
1265  background:linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
1266}
1267.vf-btn{
1268  position:absolute;
1269  left:14px; right:14px; bottom:14px;
1270  z-index:2;
1271  display:flex;
1272  align-items:center;
1273  justify-content:center;
1274  gap:10px;
1275  padding:12px 14px;
1276  border-radius:14px;
1277  text-decoration:none;
1278  font-weight:900;
1279  background:linear-gradient(135deg,#f1c94b,#ffd86b);
1280  color:#111;
1281  box-shadow:0 12px 28px rgba(0,0,0,.25);
1282}
1283.vf-btn:hover{transform:translateY(-1px)}
1284
1285/* ===== HOME PROGRAMS RG88 (NO CHOCA CON OTRAS SECCIONES) ===== */
1286.rg88-prog{ width:92%; max-width:1200px; margin:28px auto 44px; }
1287
1288.rg88-progHead{
1289  background:var(--white);
1290  border:1px solid rgba(0,0,0,.08);
1291  border-radius:18px;
1292  box-shadow:0 12px 30px rgba(0,0,0,.06);
1293  padding:18px;
1294}
1295
1296.rg88-progHeadTop{
1297  display:flex;
1298  justify-content:space-between;
1299  align-items:flex-end;
1300  gap:14px;
1301  flex-wrap:wrap;
1302}
1303
1304.rg88-progTitle{
1305  margin:0;
1306  font-size:28px;
1307  font-weight:900;
1308  color:var(--black);
1309  letter-spacing:.2px;
1310}
1311
1312.rg88-progSub{
1313  margin-top:6px;
1314  color:rgba(0,0,0,.62);
1315  font-weight:600;
1316}
1317
1318.rg88-progBtn{
1319  display:inline-flex;
1320  align-items:center;
1321  padding:10px 14px;
1322  border-radius:999px;
1323  border:1px solid rgba(212,169,60,.35);
1324  background:rgba(212,169,60,.10);
1325  font-weight:900;
1326  color:#111;
1327  text-decoration:none;
1328  transition:.15s;
1329}
1330.rg88-progBtn:hover{ transform:translateY(-1px); border-color:rgba(212,169,60,.55); }
1331
1332.rg88-progGrid{
1333  display:grid;
1334  grid-template-columns:repeat(3, 1fr);
1335  gap:16px;
1336  margin-top:16px;
1337}
1338
1339.rg88-progCard{
1340  background:var(--white);
1341  border-radius:18px;
1342  box-shadow:0 12px 30px rgba(0,0,0,.06);
1343  border:1px solid rgba(0,0,0,.08);
1344  overflow:hidden;
1345  display:flex;
1346  flex-direction:column;
1347  width:100%;
1348}
1349
1350/* FOTO controlada (NO grandota) */
1351.rg88-progImg{
1352  height:170px;                 /* <-- ajusta aquí si la quieres más alta: 200px */
1353  background:linear-gradient(135deg, rgba(12,31,54,.08), rgba(212,169,60,.12));
1354  position:relative;
1355  overflow:hidden;
1356}
1357
1358.rg88-progImg img{
1359  width:100% !important;
1360  height:100% !important;
1361  object-fit:cover;              /* <-- recorta bonito */
1362  object-position:center;        /* <-- centra la cara */
1363  display:block;
1364}
1365
1366.rg88-progNoimg{
1367  position:absolute;
1368  inset:0;
1369  display:flex;
1370  align-items:center;
1371  justify-content:center;
1372  font-weight:900;
1373  color:rgba(0,0,0,.55);
1374}
1375
1376.rg88-progBody{
1377  padding:14px 14px 16px;
1378  display:flex;
1379  flex-direction:column;
1380  gap:8px;
1381  flex:1;
1382}
1383
1384.rg88-progBody h3{
1385  margin:0;
1386  font-size:16px;
1387  font-weight:900;
1388  color:var(--black);
1389}
1390
1391.rg88-progBody p{
1392  margin:0;
1393  color:rgba(0,0,0,.68);
1394  line-height:1.35;
1395  min-height:44px;
1396  font-weight:600;
1397}
1398
1399.rg88-progMeta{
1400  margin-top:auto;
1401  display:flex;
1402  justify-content:space-between;
1403  align-items:center;
1404  gap:10px;
1405}
1406
1407.rg88-progRange{
1408  display:inline-flex;
1409  align-items:center;
1410  gap:8px;
1411  padding:10px 12px;
1412  border-radius:14px;
1413  background:rgba(212,169,60,.14);
1414  border:1px solid rgba(212,169,60,.26);
1415  font-weight:900;
1416  color:#111;
1417  white-space:nowrap;
1418}
1419
1420.rg88-progTag{
1421  font-weight:900;
1422  color:rgba(0,0,0,.55);
1423  font-size:12px;
1424  white-space:nowrap;
1425}
1426
1427.rg88-progEmpty{
1428  margin-top:14px;
1429  background:var(--white);
1430  border:1px dashed rgba(0,0,0,.18);
1431  border-radius:18px;
1432  padding:16px;
1433  color:rgba(0,0,0,.62);
1434  font-weight:700;
1435}
1436
1437@media(max-width:900px){ .rg88-progGrid{ grid-template-columns:repeat(2,1fr);} }
1438@media(max-width:600px){ .rg88-progGrid{ grid-template-columns:1fr; } .rg88-progTitle{ font-size:22px; } }
1439.rg88-progImg img{
1440  object-fit: cover !important;
1441  object-position: center 25% !important; /* 👈 sube el encuadre */
1442}
1443.rg88-progTag{
1444  display:flex;
1445  align-items:center;
1446  gap:10px;
1447}
1448
1449.rg88-live{
1450  padding:6px 10px;
1451  border-radius:999px;
1452  font-weight:900;
1453  font-size:11px;
1454  border:1px solid rgba(0,0,0,.10);
1455  white-space:nowrap;
1456}
1457
1458.rg88-live.on{
1459  background:rgba(220,38,38,.12);
1460  color:#b91c1c;
1461  border-color:rgba(220,38,38,.25);
1462  animation:pulseLive 1.4s infinite;
1463}
1464
1465.rg88-live.off{
1466  background:rgba(2,132,199,.10);
1467  color:#075985;
1468  border-color:rgba(2,132,199,.22);
1469}
1470
1471@keyframes pulseLive{
1472  0%{ transform:scale(1); }
1473  50%{ transform:scale(1.05); }
1474  100%{ transform:scale(1); }
1475}
1476/* ===== IGUALAR ANCHOS EN LA FILA (BANNER IZQ + DIRECTOR DER) ===== */
1477
1478/* 1) Asegura que el contenedor de esas 2 cajas sea grid de 2 columnas */
1479.home-two{
1480  display:grid;
1481  grid-template-columns: 1fr 1fr; /* iguales */
1482  gap:24px;
1483  align-items:stretch; /* misma altura */
1484}
1485
1486/* 2) Que el banner y el director llenen su columna */
1487.home-two > *{
1488  width:100%;
1489}
1490
1491/* 3) Tu card del director que NO se quede pequeña */
1492.owner-box{
1493  width:100%;
1494}
1495.owner-card{
1496  width:100% !important;
1497  max-width:none !important;  /* quita el límite */
1498  height:100%;
1499  min-height: 320px;          /* opcional, para que no quede bajita */
1500  display:flex;
1501  flex-direction:column;
1502  justify-content:center;
1503}
1504/* ===== FIX FINAL: QUITAR NEGRO DEL PERFIL DIRECTOR ===== */
1505.owner-card{
1506  background:linear-gradient(180deg, #0f2a6b, #081a3a) !important;
1507  border:1px solid rgba(212,169,60,.30) !important;
1508  box-shadow:0 18px 45px rgba(0,0,0,.28) !important;
1509}
1510
1511/* Texto claro */
1512.owner-card,
1513.owner-card p,
1514.owner-card .owner-text{
1515  color:rgba(255,255,255,.88) !important;
1516}
1517
1518/* Título */
1519.owner-card .owner-name{
1520  color:#ffffff !important;
1521}
1522
1523/* Resaltado */
1524.owner-card strong{
1525  background:rgba(212,169,60,.18) !important;
1526  color:#fff !important;
1527}
1528
1529/* Foto con borde dorado */
1530.owner-photo{
1531  background:linear-gradient(180deg, #d4a93c, #1d4ed8) !important;
1532}
1533/* ===== FIX: QUITAR DEGRADADO DETRÁS DE LA FOTO ===== */
1534
1535/* Elimina cualquier fondo extra detrás */
1536.owner-card::after,
1537.owner-card::before{
1538  display:none !important;
1539}
1540
1541/* Foto limpia, flotante */
1542.owner-photo{
1543  background:none !important;
1544  padding:0 !important;
1545  box-shadow:none !important;
1546}
1547
1548/* Solo aro dorado alrededor de la foto */
1549.owner-photo img{
1550  border-radius:50%;
1551  border:3px solid #d4a93c;
1552  box-shadow:0 10px 25px rgba(0,0,0,.35);
1553  background:#000;
1554}
1555/* ===== PLATAFORMAS PRO ===== */
1556:root{
1557  --blue:#0f2a6b;
1558  --blueDark:#081a3a;
1559  --gold:#d4a93c;
1560}
1561
1562.platforms-section{
1563  margin:70px 0;
1564}
1565
1566.platforms-wrap{
1567  width:92%;
1568  max-width:1200px;
1569  margin:auto;
1570  text-align:center;
1571}
1572
1573.platforms-title{
1574  font-size:28px;
1575  font-weight:900;
1576  color:var(--blueDark);
1577  margin-bottom:6px;
1578}
1579
1580.platforms-sub{
1581  font-size:15px;
1582  color:#444;
1583  margin-bottom:34px;
1584}
1585
1586/* APPS */
1587.platforms-apps{
1588  display:grid;
1589  grid-template-columns:repeat(2,1fr);
1590  gap:26px;
1591  justify-content:center;
1592  margin-bottom:45px;
1593}
1594
1595.app-card{
1596  background:linear-gradient(180deg, var(--blue), var(--blueDark));
1597  border-radius:22px;
1598  padding:22px;
1599  box-shadow:0 18px 40px rgba(0,0,0,.25);
1600  border:1px solid rgba(212,169,60,.35);
1601}
1602
1603.app-qr{
1604  width:180px;
1605  height:auto;
1606  margin-bottom:14px;
1607  border-radius:14px;
1608  background:#fff;
1609  padding:8px;
1610}
1611
1612.store-btn img{
1613  height:52px;
1614}
1615
1616/* PLATAFORMAS */
1617.platforms-cards{
1618  display:grid;
1619  grid-template-columns:repeat(3,1fr);
1620  gap:24px;
1621}
1622
1623.p-card{
1624  background:#fff;
1625  border-radius:18px;
1626  padding:18px;
1627  display:flex;
1628  align-items:center;
1629  justify-content:center;
1630  box-shadow:0 10px 25px rgba(0,0,0,.12);
1631  transition:.25s ease;
1632}
1633
1634.p-card img{
1635  max-height:60px;
1636  width:auto;
1637}
1638
1639.p-card:hover{
1640  transform:translateY(-4px);
1641  box-shadow:0 16px 34px rgba(0,0,0,.18);
1642}
1643
1644/* RESPONSIVE */
1645@media(max-width:900px){
1646  .platforms-apps{
1647    grid-template-columns:1fr;
1648  }
1649  .platforms-cards{
1650    grid-template-columns:1fr 1fr;
1651  }
1652}
1653@media(max-width:520px){
1654  .platforms-cards{
1655    grid-template-columns:1fr;
1656  }
1657}
1658/* ===== FIX: ICONOS DE PLATAFORMAS MUY PEQUEÑOS ===== */
1659
1660/* Tarjetas un poco más altas */
1661.platforms-cards .p-card{
1662  min-height:120px;
1663  padding:22px;
1664}
1665
1666/* Logos más grandes */
1667.platforms-cards .p-card img{
1668  max-height:85px !important;
1669  width:auto;
1670  object-fit:contain;
1671}
1672
1673/* En pantallas grandes aún más presencia */
1674@media(min-width:1100px){
1675  .platforms-cards .p-card img{
1676    max-height:95px !important;
1677  }
1678}
1679/* ===== PLATAFORMAS (limpio, sin overflow) ===== */
1680.platforms-cards{
1681  display:grid;
1682  grid-template-columns:repeat(3, minmax(0,1fr));
1683  gap:24px;
1684}
1685
1686.p-card{
1687  background:#fff;
1688  border-radius:18px;
1689  padding:22px;          /* 👈 NO 100px */
1690  min-height:140px;
1691  display:flex;
1692  align-items:center;
1693  justify-content:center;
1694  box-shadow:0 10px 25px rgba(0,0,0,.12);
1695  transition:.25s ease;
1696  overflow:hidden;       /* extra seguridad */
1697}
1698
1699.p-card img{
1700  max-height:90px;
1701  width:auto;
1702  object-fit:contain;
1703}
1704
1705@media(max-width:900px){
1706  .platforms-cards{ grid-template-columns:1fr 1fr; }
1707}
1708@media(max-width:520px){
1709  .platforms-cards{ grid-template-columns:1fr; }
1710  .p-card{ min-height:120px; }
1711  .p-card img{ max-height:80px; }
1712}
1713/* ===== FIX iOS PLAYER: NO aspect-ratio / NO height:100% ===== */
1714.peg-embed,
1715.peg-embedTall{
1716  padding:14px 16px !important;
1717  background:transparent !important;
1718  border-radius:0 !important;
1719  overflow:visible !important;
1720  border:0 !important;
1721  aspect-ratio: auto !important;   /* mata el 16/9 */
1722  flex: initial !important;        /* mata el flex:1 */
1723  min-height: 0 !important;        /* mata min-height raro */
1724}
1725
1726/* el iframe con altura fija como Luz y Vida */
1727.peg-embed iframe{
1728  width:100% !important;
1729  height:380px !important;
1730  border:0 !important;
1731  border-radius:18px !important;
1732  background:#0b1220 !important;
1733  display:block !important;
1734}
1735
1736.peg-embedTall iframe{
1737  width:100% !important;
1738  height:380px !important;
1739  border:0 !important;
1740  border-radius:18px !important;
1741  background:#0b1220 !important;
1742  display:block !important;
1743}
1744
1745@media(max-width:680px){
1746  .peg-embed iframe,
1747  .peg-embedTall iframe{
1748    height:340px !important;
1749  }
1750}
1751/* ===== FORZAR LOGOS GRANDES (INCLUSO CON IMÁGENES MAL RECORTADAS) ===== */
1752
1753.platforms-cards{
1754  display:grid;
1755  grid-template-columns:repeat(3,1fr);
1756  gap:30px;
1757  margin-top:40px;
1758}
1759
1760@media(max-width:900px){
1761  .platforms-cards{
1762    grid-template-columns:1fr;
1763  }
1764}
1765
1766.platforms-cards .p-card{
1767  background:#fff;
1768  border-radius:22px;
1769  padding:20px;
1770  min-height:200px;
1771  display:flex;
1772  align-items:center;
1773  justify-content:center;
1774  overflow:hidden; /* CLAVE */
1775  box-shadow:0 20px 45px rgba(0,0,0,.12);
1776}
1777
1778.platforms-cards .p-card img{
1779  width:auto;
1780  height:200px;              /* FUERZA ALTURA */
1781  object-fit:cover;          /* RECORTE AGRESIVO */
1782  transform:scale(1.8);      /* ZOOM */
1783}
1784
1785/* Hover */
1786.platforms-cards .p-card:hover img{
1787  transform:scale(2);
1788}
1789
1790/* Mobile */
1791@media(max-width:520px){
1792  .platforms-cards .p-card{
1793    min-height:160px;
1794  }
1795  .platforms-cards .p-card img{
1796    height:160px;
1797    transform:scale(1.6);
1798  }
1799}
1800
1801</style>
1802
1803<!-- TV + DUEÑO DE LA RADIO -->
1804<section class="section-box">
1805  <div class="tv-grid">
1806
1807    <!-- TV / SLIDER -->
1808    <div class="tv-player" id="tvPlayer">
1809      <div class="tv-slider" id="tvSlider">
1810        <div class="tv-slide">
1811                    <img src="/uploads/tv/tv_1772043348_5752.jpg" alt="Alcantara Radio">
1812                  </div><div class="tv-slide">
1813                    <img src="/uploads/tv/tv_1772043252_9372.png" alt="Alcantara Radio">
1814                  </div><div class="tv-slide">
1815                    <img src="/uploads/tv/tv_1772043237_7359.jpg" alt="Alcantara Radio">
1816                  </div><div class="tv-slide">
1817                    <img src="/uploads/tv/tv_1772002253_2487.png" alt="Alcantara Radio">
1818                  </div><div class="tv-slide">
1819                    <img src="/uploads/tv/tv_1771999313_4197.png" alt="Alcantara Radio">
1820                  </div><div class="tv-slide">
1821                    <img src="/uploads/tv/tv_1771999092_2577.png" alt="Alcantara Radio">
1822                  </div><div class="tv-slide">
1823                    <img src="/uploads/tv/tv_1771998096_4357.png" alt="Alcantara Radio">
1824                  </div><div class="tv-slide">
1825                    <img src="/uploads/tv/tv_1771994438_1465.png" alt="Alcantara Radio">
1826                  </div>      </div>
1827    </div>
1828
1829
1830<div class="owner-box">
1831  <div class="owner-card">
1832
1833    <div class="owner-photo">
1834      <img src="/uploads/owner/owner_20260225_051108_a6685f0c.jpg"
1835           alt="Alex Herrera - Dueño de la radio">
1836    </div>
1837
1838    <h3 class="owner-name">Director General Alex Herrera</h3>
1839
1840    <p class="owner-text">
1841      Proyecto radial impulsado por <strong>Alex Herrera</strong>, creado con la visión
1842de llevar la auténtica <strong>música Variada para todos los gustos</strong> a cada rincón
1843del mundo. Una emisora nacida desde el corazón, pensada para la comunidad y para
1844mantener vivas nuestras raíces musicales.    </p>
1845
1846  </div>
1847</div>
1848
1849</section>
1850
1851
1852<!-- RADIO / CHAT / FACEBOOK -->
1853<section class="peg-section">
1854  <div class="peg-grid peg-grid3">
1855
1856    <!-- RADIO -->
1857    <div class="peg-card">
1858      <div class="peg-cardTop">
1859        <h3>El Huateke Radio</h3>
1860                  <a class="peg-miniBtn" href="https://tunein.com/radio/El-Huateke-Radio-s303769" target="_blank" rel="noopener">Abrir en TuneIn</a>
1861              </div>
1862
1863      <div class="peg-embed">
1864        <iframe
1865          src="/players-embed.php"
1866          title="Radio"
1867          loading="lazy"
1868          allow="autoplay; encrypted-media; fullscreen"
1869          style="display:block;width:100%;height:100%;border:0;"></iframe>
1870      </div>
1871
1872              <div class="peg-note">Si no carga, refresca la página o prueba desde TuneIn.</div>
1873          </div>
1874
1875    <!-- CHAT -->
1876    <div class="peg-card">
1877      <div class="peg-cardTop">
1878        <h3>Chat en Vivo</h3>
1879                  <span class="peg-chip">Saluda al Chat</span>
1880              </div>
1881
1882      <div class="peg-embed peg-embedTall">
1883                  <iframe src="https://www7.cbox.ws/box/?boxid=838299&amp;boxtag=eLB2lB" title="Chat en vivo" loading="lazy"></iframe>
1884              </div>
1885
1886              <div class="peg-note">Mantén el respeto  Mensajes ofensivos serán bloqueados.</div>
1887          </div>
1888
1889    <!-- FACEBOOK -->
1890<div class="peg-card">
1891  <div class="peg-cardTop">
1892    <h3>Facebook</h3>
1893          <a class="peg-miniBtn" href="https://www.facebook.com/ElHuatekeRadioCom" target="_blank" rel="noopener">Ir a la página</a>
1894      </div>
1895
1896<div class="peg-embed peg-embedTall" id="fbWrap" data-page="https://www.facebook.com/ElHuatekeRadioCom">
1897      <iframe
1898  id="fbIframe"
1899  src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FElHuatekeRadioCom&amp;tabs=timeline&amp;width=360&amp;height=520&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=true"
1900  title="Facebook"
1901  loading="lazy"
1902  allow="encrypted-media"
1903  style="display:block;width:100%;height:100%;border:0;">
1904</iframe>
1905  </div>
1906
1907      <div class="peg-note">Dale “Me gusta”  y activa notificaciones</div>
1908  </div>
1909
1910  </div>
1911</section>
1912
1913<section class="rg88-prog">
1914  <div class="rg88-progHead">
1915    <div class="rg88-progHeadTop">
1916      <div>
1917        <h2 class="rg88-progTitle">NUESTRA PROGRAMACIÓN</h2>
1918        <div class="rg88-progSub">Disfruta de Nuestra Programcion</div>
1919      </div>
1920      <a class="rg88-progBtn" href="/programacion.php">Ver toda la programación</a>
1921    </div>
1922  </div>
1923
1924      <div class="rg88-progGrid">
1925              <article class="rg88-progCard">
1926
1927          <div class="rg88-progImg">
1928                          <img src="/assets/uploads/programs/program_1772040121_8557.png" alt="Solo éxitos inolvidables">
1929                      </div>
1930
1931          <div class="rg88-progBody">
1932            <h3>Solo éxitos inolvidables</h3>
1933            <p>Programación De Nuestra Radio</p>
1934
1935            <div class="rg88-progMeta">
1936              <div class="rg88-progRange">
1937                23:00 - 07:00              </div>
1938
1939              <div class="rg88-progTag">
1940  Lun a Vie
1941  <span class="rg88-live on">
1942    🔴 EN VIVO  </span>
1943</div>
1944
1945            </div>
1946
1947          </div>
1948        </article>
1949              <article class="rg88-progCard">
1950
1951          <div class="rg88-progImg">
1952                          <img src="/assets/uploads/programs/program_1772039550_8748.png" alt="La Hora de los Corridos">
1953                      </div>
1954
1955          <div class="rg88-progBody">
1956            <h3>La Hora de los Corridos</h3>
1957            <p>Programación De Nuestra Radio</p>
1958
1959            <div class="rg88-progMeta">
1960              <div class="rg88-progRange">
1961                11:00 - 12:00              </div>
1962
1963              <div class="rg88-progTag">
1964  Lun a Vie
1965  <span class="rg88-live off">
1966    ⏱️ Próximo  </span>
1967</div>
1968
1969            </div>
1970
1971          </div>
1972        </article>
1973              <article class="rg88-progCard">
1974
1975          <div class="rg88-progImg">
1976                          <img src="/assets/uploads/programs/program_1772039170_3188.png" alt="Toda la variedad musical">
1977                      </div>
1978
1979          <div class="rg88-progBody">
1980            <h3>Toda la variedad musical</h3>
1981            <p>Programación De Nuestra Radio</p>
1982
1983            <div class="rg88-progMeta">
1984              <div class="rg88-progRange">
1985                07:00 - 11:00              </div>
1986
1987              <div class="rg88-progTag">
1988  Lun a Vie
1989  <span class="rg88-live off">
1990    ⏱️ Próximo  </span>
1991</div>
1992
1993            </div>
1994
1995          </div>
1996        </article>
1997          </div>
1998  </section>
1999
2000<!-- NUESTROS PATROCINADORES -->
2001<section class="section-box ministries">
2002  <div class="min-header">
2003    <h2>Nuestros Patrocinadores</h2>
2004    <p>AQUÍ HAY UN ESPACIO PARA TU NEGOCIO</p>
2005  </div>
2006
2007  
2008  <div class="sponsor-marquee" aria-label="Patrocinadores">
2009    <div class="sponsor-track">
2010              <a class="sponsor-card" href="#" target="_blank" rel="noopener"
2011           title="Patrocinador">
2012          <img src="/uploads/sponsors/sp_1771998783_8086.png" alt="Patrocinador">
2013        </a>
2014              <a class="sponsor-card" href="#" target="_blank" rel="noopener"
2015           title="Patrocinador">
2016          <img src="/uploads/sponsors/sp_1771995247_1897.jpg" alt="Patrocinador">
2017        </a>
2018              <a class="sponsor-card" href="#" target="_blank" rel="noopener"
2019           title="Patrocinador">
2020          <img src="/uploads/sponsors/sp_1771995238_7293.jpg" alt="Patrocinador">
2021        </a>
2022              <a class="sponsor-card" href="#" target="_blank" rel="noopener"
2023           title="Patrocinador">
2024          <img src="/uploads/sponsors/sp_1771995222_1900.png" alt="Patrocinador">
2025        </a>
2026      
2027      <!-- DUPLICADO para que el movimiento sea infinito sin cortes -->
2028              <a class="sponsor-card" href="#" target="_blank" rel="noopener"
2029           title="Patrocinador">
2030          <img src="/uploads/sponsors/sp_1771998783_8086.png" alt="Patrocinador">
2031        </a>
2032              <a class="sponsor-card" href="#" target="_blank" rel="noopener"
2033           title="Patrocinador">
2034          <img src="/uploads/sponsors/sp_1771995247_1897.jpg" alt="Patrocinador">
2035        </a>
2036              <a class="sponsor-card" href="#" target="_blank" rel="noopener"
2037           title="Patrocinador">
2038          <img src="/uploads/sponsors/sp_1771995238_7293.jpg" alt="Patrocinador">
2039        </a>
2040              <a class="sponsor-card" href="#" target="_blank" rel="noopener"
2041           title="Patrocinador">
2042          <img src="/uploads/sponsors/sp_1771995222_1900.png" alt="Patrocinador">
2043        </a>
2044          </div>
2045  </div>
2046</section>
2047
2048<!-- EVENTOS -->
2049<section class="section-box">
2050  <div class="events-head">
2051    <h2>Eventos</h2>
2052    <a class="events-more" href="/eventos.php">Ver más</a>
2053  </div>
2054
2055      <div class="events-grid">
2056              <article class="event-card">
2057          <div class="event-img">
2058                          <img src="/assets/uploads/events/event_1772046167_1628.jpg" alt="Llega otro bailazo Norteño Sax">
2059                      </div>
2060          <div class="event-body">
2061            <h3>Llega otro bailazo Norteño Sax</h3>
2062            <div class="event-meta">
2063              28/02/2026                             · Premier Event Center            </div>
2064            <p>Evento de la Radio.</p>
2065          </div>
2066        </article>
2067          </div>
2068  </section>
2069
2070<!-- VIDEOS HOME -->
2071<section class="section-box videos">
2072  <div class="videos-head">
2073    <h2>ULTIMOS VIDEOS DE NUESTRO CANAL</h2>
2074    <a class="videos-more" href="/videos.php">Ver más</a>
2075  </div>
2076
2077  <div class="videos-grid">
2078                  <article class="video-card">
2079          <div class="video-frame">
2080            <iframe
2081              src="https://www.youtube.com/embed/FxKcw6FvO3k"
2082              title="PODCAST CON POLLYMARKS!!!"
2083              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
2084              allowfullscreen></iframe>
2085          </div>
2086          <div class="video-title">PODCAST CON POLLYMARKS!!!</div>
2087        </article>
2088              <article class="video-card">
2089          <div class="video-frame">
2090            <iframe
2091              src="https://www.youtube.com/embed/XzU9pwxiKL8"
2092              title="Dj PollyMarks En Accion... Puros exitos norteñas sax..."
2093              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
2094              allowfullscreen></iframe>
2095          </div>
2096          <div class="video-title">Dj PollyMarks En Accion... Puros exitos norteñas sax...</div>
2097        </article>
2098              <article class="video-card">
2099          <div class="video-frame">
2100            <iframe
2101              src="https://www.youtube.com/embed/SYsV8_sUrWY"
2102              title="Entrevista Del Grupo EXCELENZIA DTG En El Huateke Radio 10-10-2020"
2103              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
2104              allowfullscreen></iframe>
2105          </div>
2106          <div class="video-title">Entrevista Del Grupo EXCELENZIA DTG En El Huateke Radio 10-10-2020</div>
2107        </article>
2108              <article class="video-card">
2109          <div class="video-frame">
2110            <iframe
2111              src="https://www.youtube.com/embed/6azFrSh7d_Q"
2112              title="Entrevista Con Mister Cumbia En El PollyGramma 11-30-2023"
2113              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
2114              allowfullscreen></iframe>
2115          </div>
2116          <div class="video-title">Entrevista Con Mister Cumbia En El PollyGramma 11-30-2023</div>
2117        </article>
2118              <article class="video-card">
2119          <div class="video-frame">
2120            <iframe
2121              src="https://www.youtube.com/embed/0ZigYuaYOAw"
2122              title="Entrevista Telefónica Grupo Halley En El Huateke Radio (Abril 2 2020)"
2123              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
2124              allowfullscreen></iframe>
2125          </div>
2126          <div class="video-title">Entrevista Telefónica Grupo Halley En El Huateke Radio (Abril 2 2020)</div>
2127        </article>
2128              <article class="video-card">
2129          <div class="video-frame">
2130            <iframe
2131              src="https://www.youtube.com/embed/FiXuJvGj0Rc"
2132              title="Entrevista Telefónica Grupo Macao En El Huateke Radio (Tema Padre Nuestro)"
2133              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
2134              allowfullscreen></iframe>
2135          </div>
2136          <div class="video-title">Entrevista Telefónica Grupo Macao En El Huateke Radio (Tema Padre Nuestro)</div>
2137        </article>
2138            </div>
2139</section>
2140
2141
2142<section class="platforms-section">
2143  <div class="platforms-wrap">
2144
2145    <h2 class="platforms-title">Escúchanos donde tú quieras</h2>
2146    <p class="platforms-sub">Descarga nuestra app oficial o síguenos desde tus plataformas favoritas</p>
2147
2148    <div class="platforms-apps">
2149
2150      <div class="app-card">
2151        <img class="app-qr"
2152          src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=https%3A%2F%2Ftunein.com%2Fradio%2FEl-Huateke-Radio-s303769"
2153          alt="QR Google Play">
2154                  <a class="store-btn" href="https://tunein.com/radio/El-Huateke-Radio-s303769" target="_blank" rel="noopener">
2155            <img src="/logos/android-btn.png" alt="Disponible en Google Play">
2156          </a>
2157              </div>
2158
2159      <div class="app-card">
2160        <img class="app-qr"
2161          src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=https%3A%2F%2Ftunein.com%2Fradio%2FEl-Huateke-Radio-s303769"
2162          alt="QR App Store">
2163                  <a class="store-btn" href="https://tunein.com/radio/El-Huateke-Radio-s303769" target="_blank" rel="noopener">
2164            <img src="/logos/ios-btn.png" alt="Disponible en App Store">
2165          </a>
2166              </div>
2167
2168    </div>
2169
2170    <div class="platforms-cards">
2171              <a class="p-card" href="https://mytuner-radio.com/es/emisora/el-huateke-radio-474651" target="_blank" rel="noopener" title="MyTuner Radio">
2172          <img src="/logos/mytunner.jpg" alt="MyTuner Radio">
2173        </a>
2174              <a class="p-card" href="https://tunein.com/radio/El-Huateke-Radio-s303769" target="_blank" rel="noopener" title="TuneIn Radio">
2175          <img src="/logos/tunein.jpg" alt="TuneIn Radio">
2176        </a>
2177              <a class="p-card" href="#" target="_blank" rel="noopener" title="Simple Radio">
2178          <img src="/logos/simpleradio.jpg" alt="Simple Radio">
2179        </a>
2180          </div>
2181
2182  </div>
2183</section>
2184
2185    </div>
2186
2187  </div>
2188</section>
2189
2190
2191<script>
2192(function(){
2193  const slides = document.querySelectorAll("#tvSlider .tv-slide");
2194  if(!slides.length) return;
2195
2196  let i=0;
2197  function show(){
2198    slides.forEach(s=>s.classList.remove("active"));
2199    slides[i].classList.add("active");
2200    i=(i+1)%slides.length;
2201  }
2202  show();
2203  setInterval(show, 5000);
2204})();
2205</script>
2205
2206
2207
2208<style>
2209:root{
2210  --blue:#0f2a6b;
2211  --blueDark:#081a3a;
2212  --gold:#d4a93c;
2213  --white:#ffffff;
2214  --muted:rgba(255,255,255,.78);
2215}
2216footer{
2217  background:linear-gradient(180deg, var(--blueDark), var(--blue));
2218  color:var(--white);
2219  margin-top:60px;
2220  border-top:3px solid var(--gold);
2221}
2222.footer-wrap{
2223  width:92%;
2224  max-width:1200px;
2225  margin:auto;
2226  padding:40px 0;
2227  display:grid;
2228  grid-template-columns:1.5fr 1fr 1fr;
2229  gap:22px;
2230}
2231.footer-brand{display:flex;align-items:center;gap:14px}
2232.footer-brand img{height:46px;width:auto}
2233.footer-title{font-weight:900;font-size:20px;letter-spacing:1px;color:var(--gold)}
2234.footer-text{margin-top:12px;color:var(--muted);line-height:1.7;max-width:440px;font-size:14px}
2235.footer-box h4{margin:0 0 12px 0;color:var(--gold);font-weight:900;letter-spacing:.5px}
2236.footer-links a{
2237  display:block;color:rgba(255,255,255,.88);text-decoration:none;
2238  margin:9px 0;font-weight:700;transition:.25s ease;
2239}
2240.footer-links a:hover{color:var(--gold);transform:translateX(4px)}
2241.footer-bottom{
2242  border-top:1px solid rgba(255,255,255,.15);
2243  padding:16px 0;
2244  text-align:center;
2245  color:rgba(255,255,255,.7);
2246  font-weight:700;
2247  font-size:13px;
2248  background:var(--blueDark);
2249}
2250@media(max-width:900px){
2251  .footer-wrap{grid-template-columns:1fr;text-align:center}
2252  .footer-brand{justify-content:center}
2253}
2254
2255/* Contador */
2256.footer-counter{
2257  margin-top:10px;
2258  display:flex;
2259  justify-content:center;
2260}
2261.footer-counter iframe{
2262  width:100% !important;
2263  max-width:360px;
2264  height:120px;
2265  border:0 !important;
2266  border-radius:10px;
2267}
2268</style>
2269
2270<footer>
2271  <div class="footer-wrap">
2272
2273    <!-- BRAND -->
2274    <div>
2275      <div class="footer-brand">
2276                  <img src="/assets/uploads/logos/logo_1771998535.png" alt="El Huateke Radio">
2277                <div class="footer-title">El Huateke Radio</div>
2278      </div>
2279
2280              <div class="footer-text">El Huateke Radio es una emisora digital creada con la visión de llevar la auténtica música Variada para todos los gustos a cada rincón del mundo. Un proyecto nacido desde el corazón, pensado para la comunidad y para mantener vivas nuestras raíces musicales, transmitiendo las 24 horas del día.</div>
2281          </div>
2282
2283    <!-- LINKS -->
2284    <div class="footer-box">
2285      <h4>Navegación</h4>
2286      <div class="footer-links">
2287                                          <a href="/index.php">Inicio</a>
2288                                  <a href="/programacion.php">Programación</a>
2289                                  <a href="/eventos.php">Eventos</a>
2290                                  <a href="/videos.php">Videos</a>
2291                                  <a href="/contacto.php">Contacto</a>
2292                        </div>
2293    </div>
2294
2295    <!-- CONTADOR -->
2296    <div class="footer-box">
2297      <h4>Contador De Visitas</h4>
2298
2299      <div class="footer-counter">
2300        
2301                  <div style="max-width:100%;overflow:hidden">
2302            <a href="https://info.flagcounter.com/v6Yw"><img src="https://s01.flagcounter.com/countxl/v6Yw/bg_FFFFFF/txt_000000/border_CCCCCC/columns_3/maxflags_12/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>          </div>
2303              </div>
2304    </div>
2305
2306  </div>
2307
2308  <div class="footer-bottom">
2309    © 2026 El Huateke Radio · Todos los derechos reservados
2310  </div>
2311</footer>
2312
2313</body>
2314</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.