junto a las demás secciones, se sale de ese contenedor con la técnica estándar de "full-bleed" (ancho 100vw + márgenes negativos) en vez de reestructurar

— así no se toca nada de las secciones vecinas. Mismo margen inferior (44px) que .card-group, para conservar la distancia que ya había entre "Accesos destacados" y "Noticias". Ronda 31, también a pedido explícito: ahora admite hasta 3 contenidos que rotan en carrusel (misma lógica de .hero-full: opacidad cruzada entre .fb-slide, con .active al frente, paso automático + flechas). Cada contenido trae su propia imagen (independiente de la imagen de fondo) a la izquierda y texto + botones a la derecha; sin imagen propia usa el mismo fondo de telar verde que el hero sin diapositivas, y con imagen de fondo el velo oscuro diagonal (idéntico al del hero) garantiza que el texto se lea bien sobre cualquier foto que suba el cliente. En pantallas angostas la imagen pasa arriba del texto y el carrusel deja de superponer diapositivas (se listan en flujo normal), igual que .card-wide se apila en móvil. */ .feature-band{ position:relative;overflow:hidden;isolation:isolate; min-height:440px; width:100vw;margin:0 0 44px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); } .feature-band .fb-slides{position:absolute;inset:0} .feature-band .fb-slide{ position:absolute;inset:0;display:flex;align-items:center; opacity:0;visibility:hidden;transition:opacity .6s var(--ease); background: var(--sym-rombo) 0 0/52px 52px repeat, linear-gradient(120deg,var(--pine-2),var(--pine) 55%,var(--green-2)); } .feature-band .fb-slide.active{opacity:1;visibility:visible;z-index:1} .feature-band .fb-slide.has-bg{background-image:var(--fb-bg);background-size:cover;background-position:center} .feature-band .fb-veil{position:absolute;inset:0;z-index:0;background: linear-gradient(100deg, rgba(9,26,6,.82) 0%, rgba(9,26,6,.55) 44%, rgba(9,26,6,.18) 75%, rgba(9,26,6,.05) 100%)} .feature-band .fb-inner{position:relative;z-index:1;display:flex;align-items:center;gap:42px;padding:56px 22px;width:100%} .feature-band.has-nav .fb-inner{padding-left:76px;padding-right:76px} .feature-band .fb-media{flex:0 0 300px;width:300px} .feature-band .fb-media img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px;box-shadow:0 26px 50px -20px rgba(0,0,0,.55)} .feature-band .fb-content{position:relative;flex:1;min-width:0} .feature-band .eyebrow{color:rgba(252,248,98,.85);margin:0 0 8px} .feature-band h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,40px);line-height:1.08;letter-spacing:-.01em;margin:0;color:#fff;max-width:24ch;text-shadow:0 2px 24px rgba(0,0,0,.35)} .feature-band p{color:#E9EFE4;font-size:17px;max-width:62ch;margin:16px 0 26px;text-shadow:0 1px 14px rgba(0,0,0,.4); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .feature-band .fb-actions{display:flex;gap:10px;flex-wrap:wrap} /* Efecto de entrada de cada contenido: al activarse un .fb-slide (incluida la primera carga), su imagen y su texto aparecen con un leve desvanecido + desplazamiento, en cascada (etiqueta, título, texto y botones uno después del otro) en vez de aparecer todos de golpe. Como la animación está atada a la clase .active, se repite cada vez que el carrusel pasa a un contenido nuevo. */ @keyframes fbRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes fbMediaIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}} .feature-band .fb-slide.active .fb-media img{animation:fbMediaIn .7s var(--ease) both} .feature-band .fb-slide.active .fb-content .eyebrow{animation:fbRise .6s var(--ease) both} .feature-band .fb-slide.active .fb-content h2{animation:fbRise .6s var(--ease) .08s both} .feature-band .fb-slide.active .fb-content p{animation:fbRise .6s var(--ease) .16s both} .feature-band .fb-slide.active .fb-content .fb-actions{animation:fbRise .6s var(--ease) .24s both} @media(prefers-reduced-motion:reduce){ .feature-band .fb-slide.active .fb-media img, .feature-band .fb-slide.active .fb-content .eyebrow, .feature-band .fb-slide.active .fb-content h2, .feature-band .fb-slide.active .fb-content p, .feature-band .fb-slide.active .fb-content .fb-actions{animation:none} } /* Flechas (izquierda/derecha) y puntos de navegación del carrusel; solo se imprimen en el HTML cuando hay más de un contenido. */ .feature-band .fb-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.45); background:rgba(9,26,6,.35);color:#fff;font-size:22px;line-height:1;cursor:pointer; backdrop-filter:blur(3px);transition:background .2s var(--ease),transform .2s var(--ease); } .feature-band .fb-arrow:hover{background:rgba(9,26,6,.6);transform:translateY(-50%) scale(1.08)} .feature-band .fb-arrow.prev{left:18px} .feature-band .fb-arrow.next{right:18px} .feature-band .fb-dots{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;gap:9px;justify-content:center} .feature-band .fb-dot{width:11px;height:11px;padding:0;border-radius:3px;transform:rotate(45deg);border:1px solid rgba(255,255,255,.7);background:transparent;cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease)} .feature-band .fb-dot:hover{background:rgba(252,248,98,.5)} .feature-band .fb-dot.active{background:var(--yellow);border-color:var(--yellow);transform:rotate(225deg)} @media(max-width:700px){ .feature-band{min-height:0} .feature-band .fb-slides{position:relative} .feature-band .fb-slide{position:static;inset:auto;display:none;opacity:1;visibility:visible;transition:none} .feature-band .fb-slide.active{display:flex} .feature-band .fb-inner, .feature-band.has-nav .fb-inner{flex-direction:column;text-align:center;padding:40px 18px;gap:22px} .feature-band .fb-media{flex:0 0 auto;width:100%;max-width:280px} .feature-band .fb-media img{aspect-ratio:4/3} .feature-band h2,.feature-band p{margin-inline:auto} .feature-band .fb-actions{justify-content:center} .feature-band .fb-arrow{display:none} } @media(max-width:480px){ .feature-band .fb-dots{bottom:12px} } /* ---------------- Barra de progreso de navegación PJAX ---------------- */ .pjax-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:var(--flag-h); transform:scaleX(0);transform-origin:left;opacity:0;transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .2s linear} .pjax-progress.active{opacity:1;transform:scaleX(.75);transition:transform 4s cubic-bezier(.1,.6,.2,1),opacity .15s linear} .pjax-progress.done{transform:scaleX(1);transition:transform .25s var(--ease),opacity .2s linear .1s;opacity:0} @media(prefers-reduced-motion:reduce){.pjax-progress{transition:none!important}} /* ---------------- Botón flotante Emisora ---------------- El aura/anillo dorado que respira está siempre presente (encendido o no), para que el botón nunca deje de notarse como el acceso permanente a la emisora; en reposo respira más tenue y el círculo interior se ve desaturado. En cuanto empieza a sonar (.playing, clase que ya alterna updateRadioUI()) el aura se intensifica, el círculo recupera el verde vivo, y se suman el ecualizador animado y la insignia "En vivo" — así el estado se distingue de un vistazo sin necesidad de leer texto. Se sube un poco del borde inferior para no sentirse "pegado" a la esquina. */ .radio-fab{position:fixed;right:26px;bottom:38px;z-index:55;width:84px;height:84px;border-radius:50%;border:3px solid rgba(252,248,98,.45);cursor:pointer; background:radial-gradient(circle at 30% 30%, color-mix(in srgb,var(--green-2) 45%, #6B6F63), color-mix(in srgb,var(--pine-2) 65%, #3A3D34)); color:#F6F8EE;font-size:28px;display:grid;place-items:center; box-shadow:0 14px 28px -14px rgba(14,47,11,.5),0 0 0 5px rgba(252,248,98,.1); transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .4s var(--ease),border-color .4s var(--ease); animation:radioFabGlowOff 3.2s ease-in-out infinite;} .radio-fab:hover{transform:scale(1.08)} .radio-fab.playing{ border-color:rgba(252,248,98,.55); background:radial-gradient(circle at 30% 30%, var(--green-2), var(--pine-2)); box-shadow:0 18px 38px -12px rgba(14,47,11,.65),0 0 0 6px rgba(252,248,98,.14); animation:radioFabGlow 3.2s ease-in-out infinite;} .radio-fab.playing:hover{box-shadow:0 18px 38px -12px rgba(14,47,11,.7),0 0 0 9px rgba(252,248,98,.2)} .radio-fab img.rlogo{width:68px;height:68px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.75);transition:filter .4s var(--ease);filter:grayscale(.55) brightness(.92)} .radio-fab.playing img.rlogo{filter:none} .radio-fab .fab-eq{position:absolute;top:-7px;right:-5px;width:26px;height:26px;border-radius:50%;background:var(--pine-2);border:2px solid rgba(252,248,98,.65); display:none;align-items:flex-end;justify-content:center;gap:2.5px;padding-bottom:5px;box-shadow:0 4px 10px rgba(0,0,0,.4)} .radio-fab.playing .fab-eq{display:flex} .radio-fab .fab-eq i{width:2.5px;background:var(--yellow);border-radius:1px;display:block;animation:eqBar .9s ease-in-out infinite} .radio-fab .fab-eq i:nth-child(1){height:5px;animation-delay:0s} .radio-fab .fab-eq i:nth-child(2){height:9px;animation-delay:.15s} .radio-fab .fab-eq i:nth-child(3){height:6px;animation-delay:.3s} .radio-fab .fab-live{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.05em;border-radius:5px;padding:2px 7px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.35);display:none} .radio-fab.playing .fab-live{display:block;animation:livepulse 1.6s ease-in-out infinite} @keyframes radioFabGlowOff{0%,100%{box-shadow:0 14px 28px -14px rgba(14,47,11,.5),0 0 0 5px rgba(252,248,98,.1)}50%{box-shadow:0 14px 28px -14px rgba(14,47,11,.5),0 0 0 9px rgba(252,248,98,.2)}} @keyframes radioFabGlow{0%,100%{box-shadow:0 18px 38px -12px rgba(14,47,11,.65),0 0 0 6px rgba(252,248,98,.14)}50%{box-shadow:0 18px 38px -12px rgba(14,47,11,.65),0 0 0 11px rgba(252,248,98,.24)}} @keyframes eqBar{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}} @media(max-width:560px){ .radio-fab{width:70px;height:70px;right:16px;bottom:26px;font-size:22px;border-width:2px} .radio-fab img.rlogo{width:56px;height:56px} .radio-fab .fab-eq{width:21px;height:21px;top:-5px;right:-4px} .radio-player{right:16px;bottom:106px} } /* ---------------- Botón "Volver arriba" ---------------- Aparece (clase .show, añadida por JS) al bajar en la página; sube el scroll suavemente al hacer clic. Va en la esquina opuesta a la emisora flotante para no encimarse (ronda 27, a pedido explícito del cliente). */ .back-to-top{ position:fixed;left:26px;bottom:38px;z-index:55; width:52px;height:52px;border-radius:50%;border:0;cursor:pointer; display:grid;place-items:center; background:radial-gradient(circle at 30% 30%, var(--green-2), var(--pine-2)); color:#F6F8EE;box-shadow:0 12px 26px -14px rgba(14,47,11,.5); opacity:0;transform:translateY(10px);pointer-events:none; transition:opacity .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease); } .back-to-top.show{opacity:1;transform:translateY(0);pointer-events:auto} .back-to-top:hover{box-shadow:0 16px 32px -12px rgba(14,47,11,.6)} .back-to-top.show:hover{transform:translateY(-3px)} .back-to-top svg{width:22px;height:22px} @media(max-width:560px){ .back-to-top{left:16px;bottom:26px;width:44px;height:44px} .back-to-top svg{width:18px;height:18px} } /* ---------------- Mini reproductor ---------------- Incluye un botón "–" para minimizar (oculta el panel sin detener el audio: el estado de reproducción vive en JS, no en el DOM del panel). */ .radio-player{position:fixed;right:26px;bottom:136px;z-index:56;width:min(320px,88vw);background:var(--paper-2);border:1px solid var(--rule);border-radius:14px; box-shadow:0 24px 50px -22px rgba(14,47,11,.55);padding:30px 16px 14px;display:none;gap:12px;align-items:center;overflow:hidden} .radio-player::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--flag-h)} .radio-player.show{display:flex} .radio-player .rp-min{position:absolute;top:7px;right:9px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(20,30,15,.06);color:var(--ink-3); font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s var(--ease),color .2s var(--ease)} .radio-player .rp-min:hover{background:rgba(20,30,15,.12);color:var(--ink)} .radio-player .rp-logo{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#fff;border:1px solid var(--rule)} .radio-player .rp-info{flex:1;min-width:0} .radio-player .rp-info b{display:block;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .radio-player .rp-info span{font-size:13px;color:var(--ink-3)} .radio-player .rp-toggle{width:44px;height:44px;border-radius:50%;border:none;background:var(--green);color:#fff;font-size:17px;cursor:pointer;flex:0 0 auto;transition:background .2s var(--ease)} .radio-player .rp-toggle:hover{background:var(--green-2)} /* ---------------- Utilidades / avisos ---------------- */ .note-box{border:1px solid var(--rule);border-left:4px solid var(--tone);background:rgba(255,255,255,.55);border-radius:10px;padding:14px 16px;color:var(--ink-2);font-size:14px;margin:18px 0} .note-box b{color:var(--ink)} .note-box p{margin:0} .placeholder-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--orange);border:1px dashed color-mix(in srgb,var(--orange) 50%,var(--rule));border-radius:5px;padding:2px 7px;display:inline-block} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:680px){.grid2{grid-template-columns:1fr}} .mapbox{aspect-ratio:16/7;border-radius:14px;border:1px solid var(--rule);background: var(--sym-rombo) 0 0/52px 52px repeat, var(--paper-3);display:grid;place-items:center;color:var(--ink-3);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-align:center;padding:16px} .mapbox p{margin:0} .mapbox iframe{width:100%;height:100%;border:0;border-radius:13px} /* ---------------- Listado de entradas (Novedades) ---------------- */ .post-list{display:grid;gap:14px} .post-item{position:relative;background:var(--paper-3);border:1px solid var(--rule);border-radius:14px;padding:18px 20px 18px 24px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)} .post-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--flag-v);opacity:.75;transition:opacity .25s var(--ease)} .post-item:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--green) 40%,var(--rule));box-shadow:0 20px 36px -26px rgba(14,47,11,.5)} .post-item:hover::before{opacity:1} .post-item h2{font-family:var(--serif);font-size:22.5px;margin:0 0 4px} .post-item h2 a{color:var(--ink)} .post-item .meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px} .post-item p{margin:0;color:var(--ink-2);font-size:15.5px} .pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px} .pagination .page-numbers{border:1px solid var(--rule);background:var(--paper-3);border-radius:8px;padding:7px 13px;font-size:14px;color:var(--ink-2)} .pagination .page-numbers.current{background:var(--green);color:#fff;border-color:var(--green-2)} /* ---------------- Pie ---------------- */ .site-footer{position:relative;border-top:none;margin-top:20px;color:#D8E6D2; background: var(--sym-espiral) 0 0/260px 260px repeat, linear-gradient(160deg,var(--pine),var(--pine-2))} /* Imagen de fondo opcional (Personalizar → Pie de página) con velo oscuro para que el texto se siga leyendo bien encima. */ .site-footer.has-bg{ background-image:linear-gradient(180deg, rgba(9,20,7,.62) 0%, rgba(9,20,7,.72) 55%, rgba(6,14,5,.9) 100%), var(--footer-bg); background-size:cover;background-position:center;background-repeat:no-repeat; } .site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--flag-h);z-index:2} .site-footer .inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:40px 22px 34px; display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;gap:26px 34px;font-size:14.5px} @media(max-width:900px){.site-footer .inner{grid-template-columns:1fr 1fr}} @media(max-width:560px){.site-footer .inner{grid-template-columns:1fr;text-align:center}} .footer-col{min-width:0} /* Título de columna: usado en las columnas fijas (marca, contacto) y, vía before_title del área de widgets, en las columnas de enlaces — así los 4 títulos del pie comparten exactamente el mismo estilo. */ .site-footer .footer-heading,.site-footer .footer-col b{display:block;color:var(--yellow);font-family:var(--mono);font-size:14.5px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 13px} .site-footer .footer-col > *:not(:last-child){margin-bottom:22px} .footer-col-brand{display:flex;flex-direction:column;align-items:flex-start;gap:0} @media(max-width:560px){.footer-col-brand{align-items:center}} .site-footer .footer-logo .custom-logo-link{display:inline-flex;align-items:center;justify-content:center} .site-footer .footer-logo img.custom-logo{width:172px;height:172px;border-radius:50%;object-fit:cover;background:#fff;padding:5px;border:2px solid rgba(252,248,98,.45);box-shadow:0 14px 30px -16px rgba(0,0,0,.5)} @media(max-width:560px){.site-footer .footer-logo img.custom-logo{width:132px;height:132px}} .site-footer .footer-desc{margin:14px 0 0;color:#CBDFC4;font-size:14.5px;max-width:32ch} @media(max-width:560px){.site-footer .footer-desc{margin-inline:auto}} .site-footer a{color:#CBDFC4;transition:color .18s var(--ease)} .site-footer a:hover{color:var(--yellow);text-decoration:none} .site-footer .footer-col a{display:block;margin:4px 0} .site-footer ul.footer-menu{list-style:none;margin:0;padding:0} .site-footer ul.footer-menu li{margin:0} /* Grupos de enlaces construidos con widgets (Apariencia → Widgets) */ .footer-widget ul{list-style:none;margin:0;padding:0} .footer-widget li{margin:4px 0} .footer-widget p{margin:4px 0} /* Columna de contacto */ .footer-contact{list-style:none;margin:0;padding:0} .footer-contact li{margin:0 0 8px;line-height:1.5} .site-footer .footer-contact li b{display:inline;color:var(--yellow);font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none;margin:0 5px 0 0} .footer-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px} @media(max-width:560px){.footer-social{justify-content:center}} .footer-social .soc{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;border-radius:50%; background:color-mix(in srgb,var(--green-2) 42%,transparent);border:1px solid rgba(255,255,255,.22); color:#F6F8EE;box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:background .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)} .footer-social .soc svg{width:22px;height:22px;display:block} .footer-social .soc img{width:22px;height:22px;display:block;object-fit:contain;border-radius:0} .footer-social .soc:hover{background:var(--green-2);border-color:var(--green-2);transform:translateY(-2px);color:#fff;box-shadow:0 10px 22px -8px rgba(0,0,0,.6)} .footnote{max-width:var(--wrap);margin:0 auto;padding:0 22px 26px;color:#9DB894;font-size:13px;position:relative;text-align:center} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}