/* =====================================================================
   A DIOS SEA TODA LA GLORIA — adaptación móvil y contraste

   Esta hoja se carga LA ÚLTIMA y sólo corrige. No cambia la estructura de
   la página, ni sus secciones, ni su identidad visual: arregla dos cosas
   que se veían mal en el teléfono.

     1. Que la web no se corte: nada puede sobresalir a los lados y las
        alturas se miden con la pantalla real del móvil, no con la teórica.
     2. Que ninguna letra quede del mismo color que su fondo.
   ===================================================================== */

/* =====================================================================
   1. LA WEB NO SE CORTA
   ===================================================================== */

/* Cierre lateral en los dos elementos raíz: en el iPhone hace falta en
   ambos para que ningún elemento fijo empuje la página a lo ancho. */
html{overflow-x:hidden;max-width:100%}
body{overflow-x:hidden;width:100%;max-width:100%;position:relative}

/* Ninguna imagen, video, lienzo o marco puede ser más ancho que su sitio. */
img,svg,video,canvas,iframe,table{max-width:100%}

/* Las cajas de una rejilla o de un flex se encogen cuando hace falta:
   sin esto una palabra larga o una imagen ensancha toda la fila. */
.hero-grid>*,.about-grid>*,.apps-grid>*,.contact-grid>*,.footer-grid>*,
.cards>*,.stats>*,.media-gallery>*,.envivo-grid>*,.form-grid>*,
.tst-grid>*,.alcance-grid>*{min-width:0}

/* Las manchas de luz del fondo son decorativas y están fijas a la
   pantalla: en el móvil se quedan dentro para que no arrastren la página
   a lo ancho, que era lo que cortaba la web. */
@media(max-width:1024px){
  .glow{width:min(58vw,340px);height:min(58vw,340px);filter:blur(70px)}
  .g1{left:0;top:6%}
  .g2{right:0;left:auto;top:36%}
  .g3{left:8%;right:auto;bottom:-140px}
}

/* Alturas con la pantalla REAL del teléfono. La medida antigua (100vh)
   cuenta la barra del navegador y por eso el final de la portada quedaba
   escondido; svh mide lo que de verdad se ve. */
@supports(height:100svh){
  .hero{min-height:100svh}
  @media(max-width:980px){
    nav{max-height:calc(100svh - 110px)}
  }
  .wa-panel{max-height:min(660px,calc(100svh - 120px))}
  .admin-panel{max-height:calc(100svh - 40px)}
}
@media(max-width:760px){
  /* En el teléfono la portada se mide por su contenido: así nunca queda
     un trozo cortado ni un hueco vacío debajo. */
  .hero{min-height:auto}
}

/* El menú desplegable arranca justo debajo de la barra, que en pantallas
   pequeñas mide 75px y no 88px: antes quedaba un salto y se solapaba. */
@media(max-width:650px){
  nav{top:75px;left:3%;right:3%;padding:20px}
}

/* Direcciones, correos y enlaces largos parten de línea en vez de
   ensanchar su columna. */
.footer-col a,.footer-brand p,.contact-item strong,.contact-item a,
.ev-body p,.ev-body h4,.pl-item b,.mc-text strong,.copyright,
.wa-bubble,.gl-name b,.adm-row b,.adm-row span{overflow-wrap:anywhere}

/* Todo lo que se desliza con el dedo lo hace suave y sin arrastrar la
   página entera. */
.tv-playlist,.promo-strip,.admin-tabs,.gl-list,.wa-body{
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

/* Zonas seguras del iPhone: la barra de arriba y el borde curvo de
   abajo nunca tapan contenido. */
@supports(padding:max(0px)){
  header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  footer{padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px))}
  @media all and (display-mode:standalone){
    header{padding-top:env(safe-area-inset-top)}
  }
}

/* Instalada como aplicación no hay barra de navegador, así que la
   portada recupera la altura completa de la pantalla. */
@media all and (display-mode:standalone){
  .hero{padding-top:110px}
}

/* El asistente en pantallas bajas: la conversación se queda con el espacio
   y el pie se aprieta, en vez de empujar el panel fuera de la pantalla. */
@media(max-height:720px){
  .wa-foot{padding:10px 14px}
  .wa-foot small{margin-top:6px}
  .wa-foot .wa-or{margin-bottom:7px}
  .wa-send{padding:11px}
}

/* Ningún campo provoca el zoom automático de iOS (hace falta 16px). */
@media(max-width:820px){
  input,select,textarea,.tst-field input,.tst-field textarea,.tst-field select,
  .wa-compose input{font-size:16px}
}

/* Cada botón tiene sitio para el dedo. */
@media(hover:none){
  .ev-nav,.ev-dots button,.pt-btn,.adg-btn,.wa-close,.it-no{min-width:38px;min-height:38px}
  .lang button{min-height:38px}
}

/* Móviles muy estrechos: el ancho útil sube y las piezas se aprietan
   sin salirse. */
@media(max-width:400px){
  .container{width:min(1180px,95%)}
  h1{font-size:35px;letter-spacing:-1.2px}
  .apps h2{font-size:33px}
  .brand-text strong{font-size:12.5px}
  .phone{width:min(238px,100%);height:auto;min-height:0;padding:11px}
  .phone-screen{padding:26px 12px 18px}
  .phone-family img{height:124px}
  .phone h3{font-size:18px;margin-top:13px}
  .store{min-width:0;width:100%}
  .radio-onair{flex-wrap:wrap}
  .wa-fab{right:12px}
}

/* Teléfono tumbado: la pantalla es muy baja. */
@media(max-height:480px) and (orientation:landscape){
  .hero{min-height:auto;padding:96px 0 40px}
  nav{max-height:calc(100vh - 88px)}
}

/* El aviso «Activar sonido» ya no se pone encima del reproductor: cuando
   el teléfono bloquea el audio se ilumina la bocina de la barra de
   controles, que es donde la gente lo busca. */
.tv-unmute{display:none!important}

/* =====================================================================
   1 bis. EL REPRODUCTOR SE VE EN CUALQUIER APARATO

   Los teléfonos y los ordenadores nuevos entienden `aspect-ratio` y la
   propiedad `inset`, y con ellas el marco del player toma su forma 16:9.
   Muchas tabletas, televisores y navegadores algo más antiguos NO las
   entienden: allí el marco se quedaba con altura cero, así que el video
   se cargaba pero no se veía nada. De ahí que funcionara en el teléfono y
   no en la tableta.

   Aquí se le da la misma proporción con la medida de toda la vida (un
   relleno del 56,25%, que es 9/16). Donde `aspect-ratio` sí existe no
   cambia absolutamente nada: la web se ve igual.
   ===================================================================== */

/* La forma larga de `inset:0`, para quien todavía no conoce la corta. */
.tv-poster{top:0;right:0;bottom:0;left:0}
.ev-figure:after{top:0;right:0;bottom:0;left:0}
.ev-figure:before{top:-14%;right:-14%;bottom:-14%;left:-14%}

@supports not (aspect-ratio:16/9){
  /* Reproductor principal y reproductor de promociones. */
  .tv-player{height:0;padding-top:56.25%}
  .tv-player>video,.tv-player>iframe,.tv-player>.tv-poster{
    position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}
  /* Flyers del carrusel de anuncios: misma proporción 4:5. */
  .ev-figure{height:0;padding-top:125%}
  .ev-figure>img{position:absolute;top:0;right:0;bottom:0;left:0}
}

/* =====================================================================
   2. NINGUNA LETRA DEL COLOR DE SU FONDO

   La paleta clara de la web dejó el texto en verde oscuro. Donde el fondo
   también es oscuro —la sección de la aplicación, la tarjeta de la radio,
   el pie de página y el panel— ese texto quedaba invisible. Aquí se le
   devuelve el color claro que le corresponde.
   ===================================================================== */

/* --- «LA RADIO CONTIGO / Escúchanos desde cualquier lugar» ---
   Va sobre el verde profundo de la sección de la aplicación. */
.apps{color:#f2f7f4}
.apps h2{color:#fffdf7;text-shadow:0 2px 20px rgba(4,20,14,.35)}
.apps p{color:#d5e6dd}
.apps .tag{color:var(--adg-gold-soft,#d8bf84)}
.apps .store{color:#14100a}
.apps .store small{color:#6b6350}
.apps .store strong{color:#14100a}

/* El teléfono de muestra: su pantalla es una foto oscura. */
.phone-screen{color:#fffdf7}
.phone h3{color:#fffdf7}
.phone p{color:#e0e9e4}
.phone-family span{color:#fff}
.phone .mini-play{color:#14332a;background:#fff}

/* --- Tarjeta de la radio --- */
.radio-home h3{color:#fffdf7}
.radio-home>p{color:rgba(255,255,255,.78)}
.radio-home .radio-note{color:rgba(255,255,255,.66)}

/* --- Pie de página --- */
footer{color:#e4efe9}
footer .brand-text strong{color:#fffdf7}
footer .brand-text span{color:var(--adg-gold-soft,#d8bf84)}
.footer-brand p{color:#c3d7cd}
.footer-col h4{color:var(--adg-gold-soft,#d8bf84)}
.footer-col a{color:#c3d7cd}
.footer-col a:hover,.footer-col a:focus-visible{color:#fffdf7}
.copyright{color:#a8c1b6;border-top-color:rgba(216,191,132,.20)}

/* --- Panel administrativo ---
   El panel es oscuro pero la paleta clara le dejaba las letras en verde
   oscuro: los títulos y las etiquetas de los campos no se leían. */
.admin-panel,.admin-card{color:#eef3f0}
.admin-head h2,.admin-card h3,.admin-panel h2,.admin-panel h3,.admin-panel h4{color:#fffdf7}
.admin-panel label,.admin-field label{color:#c8d3e4}
.admin-panel small,.admin-panel p,.admin-note{color:#aab6c9}
.admin-panel .adm-row b{color:#fffdf7}
.admin-panel .adm-row span,.admin-panel .adm-row small{color:#aab6c9}

/* --- Cinta de titulares --- */
.ticker-wrap{color:#fffdf7}

/* Al enfocar con el teclado siempre se ve dónde está el foco. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(184,149,82,.85);outline-offset:2px;border-radius:6px}