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&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&tabs=timeline&width=360&height=520&small_header=false&adapt_container_width=true&hide_cover=false&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.