/* ───────── El logotipo de la cabecera ─────────
   Los pistones quietos mientras se lee la página: una marca moviéndose sin
   parar en todas las pantallas cansa. Se animan al pasar por encima, que es
   cuando alguien está mirando el logotipo. */
[data-marca-viva] [data-piston] { animation-play-state: paused; }
[data-marca-viva]:hover [data-piston] { animation-play-state: running; }
@media (hover: none) {
  /* En el teléfono no hay «pasar por encima»: se anima al tocar. */
  [data-marca-viva]:active [data-piston] { animation-play-state: running; }
}

/* Atlantic Jazz Lab · encaje para pantallas más estrechas que el diseño
   El escritorio son 1440 px con las medidas escritas en cada elemento.
   Aquí hay dos bandas, no una:

   · 768–1439 px (tableta —también en vertical— y portátil): el lienzo se vuelve fluido
     y nada se sale, pero se mantiene la composición a dos columnas, los
     titulares grandes y los márgenes anchos. Un portátil no es un teléfono.
   · hasta 767 px (solo teléfono): todo a una columna, márgenes
     estrechos, tipografía reducida (movil-tipos.css) y cabecera compacta.

   Los selectores buscan los patrones que la web ya usa, en las dos formas en
   que se pintan («width:1440px» y «width: 1440px»). */

/* ───────── El lienzo siempre ocupa la ventana ─────────
   El diseño se dibujó a 1440 px fijos. Aquí deja de serlo en las dos
   direcciones: en una pantalla ancha se estira hasta llenarla, y en una
   estrecha se encoge. Los textos largos ya llevan su propio máximo en em,
   así que estirar no da líneas ilegibles. */
[style*="1440px"] { width: 100% !important; max-width: 100% !important; }

/* ───────── Pantallas más anchas que el diseño ─────────
   Nada se encierra en una columna centrada: el contenido usa toda la ventana
   y el margen izquierdo es siempre el mismo, pequeño, como en las webs de las
   grandes salas. Lo que crece con la pantalla son las fotos y las columnas,
   no un vacío en el medio. */
@media (min-width: 1600px) {
  [style*="padding"][style*="48px"] {
    padding-left: max(48px, 3.2vw) !important;
    padding-right: max(48px, 3.2vw) !important;
  }
  [style*="left:48px"], [style*="left: 48px"] { left: max(48px, 3.2vw) !important; }
  [style*="right:48px"], [style*="right: 48px"] { right: max(48px, 3.2vw) !important; }

  /* La fila de conciertos: la miniatura crece y la sala se acerca al botón,
     de modo que el ancho de sobra no se queda en un hueco central. */
  [style*="grid-template-columns:190px 128px"],
  [style*="grid-template-columns: 190px 128px"] {
    grid-template-columns: 220px 210px minmax(0, 1fr) minmax(262px, .58fr) 176px !important;
    gap: 30px !important;
  }
  [style*="grid-template-columns:190px 128px"] [style*="width:128px"],
  [style*="grid-template-columns: 190px 128px"] [style*="width: 128px"] {
    width: 210px !important; height: 105px !important;
  }

  /* Los retratos de la plantilla y del equipo crecen a lo alto igual que a lo
     ancho: mantienen su proporción en vez de quedarse en 300 px y recortar las
     caras cuando la columna se estira. */
  [style*="height:300px"][style*="object-fit"],
  [style*="height: 300px"][style*="object-fit"],
  [style*="height:300px"][style*="background-image"],
  [style*="height: 300px"][style*="background-image"] { height: auto !important; aspect-ratio: 428 / 300 !important; }
  [style*="height:330px"][style*="object-fit"],
  [style*="height: 330px"][style*="object-fit"],
  [style*="height:330px"][style*="background-image"],
  [style*="height: 330px"][style*="background-image"] { height: auto !important; aspect-ratio: 428 / 330 !important; }
  [style*="height:320px"][style*="object-fit"],
  [style*="height: 320px"][style*="object-fit"] { height: auto !important; aspect-ratio: 560 / 320 !important; }

  /* Las cabeceras con foto crecen a lo alto con la pantalla: si no, a 2400 px
     la imagen queda en una franja y de una orquesta entera solo se ve al
     público. El tope evita que en un monitor enorme se coma la pantalla. */
  
  
  
  
  

  /* Las fotos que llenan media pantalla en los bloques partidos: su alto lo
     marcaba el texto de al lado, así que al ensanchar crecían solo a lo ancho.
     Ahora tienen un alto mínimo que crece con la ventana. */
  [style*="min-height:440px"], [style*="min-height: 440px"] { min-height: max(440px, 32vw) !important; }
  [style*="min-height:470px"], [style*="min-height: 470px"] { min-height: max(470px, 32vw) !important; }
  [style*="min-height:480px"], [style*="min-height: 480px"] { min-height: max(480px, 32vw) !important; }
  [style*="min-height:520px"], [style*="min-height: 520px"] { min-height: max(520px, 32vw) !important; }
  [style*="min-height:560px"], [style*="min-height: 560px"] { min-height: max(560px, 33vw) !important; }
  [style*="min-height:620px"], [style*="min-height: 620px"] { min-height: max(620px, 34vw) !important; }

  /* Las miniaturas de vídeo mantienen el 16:9 del vídeo en vez de achatarse. */
  [style*="height:230px"][style*="background-image"],
  [style*="height: 230px"][style*="background-image"] { height: auto !important; aspect-ratio: 16 / 9 !important; }

  /* La galería: la foto grande fija la proporción y las dos pequeñas se
     reparten su alto, así que el trío crece a la vez. */
  /* La galería crece a lo alto manteniendo su composición: la foto grande vale
     por las dos pequeñas más el hueco entre ellas, igual que a 1440 px. */
  [style*="grid-template-columns:2fr 1fr"] > img,
  [style*="grid-template-columns: 2fr 1fr"] > img { height: clamp(420px, 24vw, 600px) !important; }
  [style*="grid-template-columns:2fr 1fr"] > div > img,
  [style*="grid-template-columns: 2fr 1fr"] > div > img {
    height: clamp(200px, calc((24vw - 20px) / 2), 290px) !important;
  }
}

/* ───────── Banda fluida · más estrecho que el diseño ───────── */
@media (max-width: 1439px) {

  /* 1 · el lienzo deja de ser fijo */
  html, body { overflow-x: hidden !important; }
  img, iframe, video { max-width: 100% !important; }

  /* 6 · nada se sale de la pantalla */
  [style*="max-width:44em"], [style*="max-width: 44em"],
  [style*="max-width:46em"], [style*="max-width: 46em"],
  [style*="max-width:34em"], [style*="max-width: 34em"],
  [style*="max-width:32em"], [style*="max-width: 32em"],
  [style*="max-width:30em"], [style*="max-width: 30em"],
  [style*="max-width:28em"], [style*="max-width: 28em"],
  [style*="max-width:26em"], [style*="max-width: 26em"],
  [style*="max-width:24em"], [style*="max-width: 24em"] { max-width: 100% !important; }

  /* márgenes algo más justos, pero sin bajar a medidas de móvil */
  [style*="padding"][style*="48px"] { padding-left: 32px !important; padding-right: 32px !important; }
  [style*="left:48px"] { left: 32px !important; }
  [style*="right:48px"] { right: 32px !important; }

  /* los titulares enormes bajan lo justo para caber */
  [style*="font-size:120px"], [style*="font-size: 120px"],
  [style*="font-size:118px"], [style*="font-size: 118px"],
  [style*="font-size:112px"], [style*="font-size: 112px"],
  [style*="font-size:108px"], [style*="font-size: 108px"],
  [style*="font-size:104px"], [style*="font-size: 104px"] { font-size: 84px !important; }
  [style*="font-size:96px"], [style*="font-size: 96px"] { font-size: 76px !important; }
}

/* El día desplegado y el punto de aviso son cosa del teléfono: en el
   escritorio la rejilla ya muestra los conciertos dentro de cada casilla. */
[data-solo-movil] { display: none !important; }
[data-punto] { display: none !important; }

/* ───────── Banda de teléfono ───────── */
@media (max-width: 767px) {

  /* 0 · el calendario del mes, como una agenda de teléfono: solo el número del
     día y un punto debajo si hay algo. Sin cajas ni bordes. */
  [data-solo-movil] { display: grid !important; }
  [data-punto] { display: block !important; }
  [data-celda][style*="min-height"] {
    min-height: 0 !important; aspect-ratio: 1 !important;
    padding: 0 !important; gap: 3px !important;
    background: transparent !important; border: 0 !important;
    justify-items: center !important; align-content: center !important; cursor: pointer;
  }
  [data-celda] > span:first-child { font-size: 14px !important; transform: none !important; }
  [data-celda] > a { display: none !important; }

  /* 2 · cualquier rejilla pasa a una columna… */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* …menos la del mes, que es un calendario de siete días */
  [style*="repeat(7"] { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 2px !important; }

  /* 3 · márgenes de sección: donde había 48 px de aire, 20 */
  [style*="padding"][style*="48px"] { padding: 30px 20px !important; }
  [style*="left:48px"],
  [style*="left: 48px"] { left: 20px !important; }
  [style*="right:48px"],
  [style*="right: 48px"] { right: 20px !important; }

  /* 5 · alturas y fotos */
  [style*="height:740px"],
  [style*="height: 740px"] { height: 420px !important; }
  [style*="height:620px"],
  [style*="height: 620px"] { height: 420px !important; }
  [style*="height:600px"],
  [style*="height: 600px"] { height: 400px !important; }
  [style*="height:420px"],
  [style*="height: 420px"] { height: 240px !important; }
  [style*="height:320px"],
  [style*="height: 320px"] { height: 220px !important; }
  [style*="height:300px"],
  [style*="height: 300px"] { height: 210px !important; }
  [style*="min-height:620px"],
  [style*="min-height: 620px"] { min-height: 260px !important; }
  [style*="min-height:600px"],
  [style*="min-height: 600px"] { min-height: 260px !important; }
  [style*="min-height:560px"],
  [style*="min-height: 560px"] { min-height: 250px !important; }
  [style*="min-height:520px"],
  [style*="min-height: 520px"] { min-height: 240px !important; }
  [style*="min-height:470px"],
  [style*="min-height: 470px"] { min-height: 230px !important; }
  [style*="min-height:440px"],
  [style*="min-height: 440px"] { min-height: 230px !important; }
  [style*="min-height:128px"],
  [style*="min-height: 128px"] { min-height: 110px !important; }
  [style*="width:330px"] { width: 200px !important; }

  /* 7 · las filas horizontales se doblan en vez de salirse */
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap !important; }
  /* la cabecera: menos aire y el botón de entradas más justo */
  [style*="height:90px"], [style*="height: 90px"] { height: auto !important; min-height: 64px !important; }
  [style*="gap:26px"] > [style*="letter-spacing"] { font-size: 10px !important; }

  /* 7b · el carrusel: el texto va suelto sobre la foto, así que la diapositiva
     necesita alto o el titular se monta sobre las flechas. */
  [data-screen-label="Destacados"] { height: 480px !important; }
  /* el párrafo sobra en el carrusel: en pantalla pequeña manda el titular */
  [data-screen-label="Destacados"] [style*="max-width:32em"],
  [data-screen-label="Destacados"] [style*="max-width: 32em"] { display: none !important; }
  [data-screen-label="Destacados"] [style*="bottom:104px"],
  [data-screen-label="Destacados"] [style*="bottom: 104px"] {
    left: 20px !important; right: 20px !important; bottom: 118px !important;
    gap: 18px !important; max-width: 100% !important;
  }
  [data-screen-label="Destacados"] [style*="margin-bottom:49px"],
  [data-screen-label="Destacados"] [style*="margin-bottom: 49px"] { margin-bottom: 4px !important; }
  [data-screen-label="Destacados"] [style*="width:320px"],
  [data-screen-label="Destacados"] [style*="width: 320px"] { width: 88px !important; }
  /* la fila de flechas y contador es de una sola línea: el doblado general la
     engordaba al doble de alto y se comía el botón del carrusel */
  [data-screen-label="Destacados"] > [style*="bottom:40px"],
  [data-screen-label="Destacados"] > [style*="bottom: 40px"] {
    left: 20px !important; right: 20px !important;
    flex-wrap: nowrap !important; gap: 14px !important;
  }
  [data-screen-label="Destacados"] > [style*="bottom:40px"] > div,
  [data-screen-label="Destacados"] > [style*="bottom: 40px"] > div {
    flex-wrap: nowrap !important; gap: 12px !important;
  }

  /* 7b-bis · la cabecera: una franja baja, no un bloque de 165 px */
  [data-barra][style*="padding"] { padding: 10px 20px !important; gap: 14px !important; }
  [data-barra-izq] { gap: 11px !important; flex-wrap: nowrap !important; min-width: 0 !important; }
  [data-barra-der] { gap: 14px !important; flex-wrap: nowrap !important; }
  [data-barra] *, [data-barra] { flex-wrap: nowrap !important; }
  [data-barra] img { height: 22px !important; width: auto !important; }
  [data-barra-idiomas] { display: none !important; }
  /* en un teléfono el icono de tres rayas se reconoce solo: la palabra "Menú"
     sobra y ese hueco lo ocupa el logotipo completo */
  [data-barra-menu] { display: none !important; }
  [data-barra] img { height: 19px !important; width: auto !important; }
  [data-marca-viva] { width: 158px !important; }
  [data-barra-marca] { font-size: 15px !important; }
  [data-barra-der] > a { padding: 11px 16px !important; font-size: 15px !important; }
  [data-barra-izq] > [style*="width:1px"] { display: none !important; }

  /* 7c · nada mide más que la pantalla, aunque lo pida su estilo */
  [style*="width:max-content"], [style*="width: max-content"] { max-width: 100% !important; }
  /* si además está anclado con left y right, el ancho lo mandan los anclajes:
     con width:max-content el right se ignora y el bloque se sale */
  [style*="width:max-content"][style*="position:absolute"],
  [style*="width: max-content"][style*="position: absolute"] { width: auto !important; }
  [style*="white-space:nowrap"], [style*="white-space: nowrap"] { white-space: normal !important; }
  [data-screen-label] * { min-width: 0 !important; }
  /* los rótulos AJL de las páginas de formación */
  [style*="width:92px"], [style*="width: 92px"] { width: 54px !important; }
  [style*="height:92px"], [style*="height: 92px"] { height: 54px !important; }
  [style*="height:89.3px"], [style*="height: 89.3px"] { height: 54px !important; }
  [style*="width:53.4px"], [style*="width: 53.4px"] { width: 32px !important; }

  /* 7d · los rótulos Anton llevan interlineado corto porque en el escritorio
     van en una sola línea. Al partirse en móvil las líneas se tocan. */
  [style*="line-height:.86"], [style*="line-height: 0.86"],
  [style*="line-height:.88"], [style*="line-height: 0.88"],
  [style*="line-height:.9"], [style*="line-height: 0.9"],
  [style*="line-height:.92"], [style*="line-height: 0.92"],
  [style*="line-height:.95"], [style*="line-height: 0.95"] { line-height: 1.12 !important; }
  [style*="line-height:1.04"], [style*="line-height: 1.04"] { line-height: 1.14 !important; }

  /* 8 · la franja de los diez años: el número y la frase van del brazo */
  [data-screen-label="Franja 10 años"] > div,
  [data-screen-label="Franja 10 años"] {
    flex-wrap: nowrap !important; gap: 14px !important; align-items: baseline !important;
  }

  /* 9 · las filas de concierto, al estilo de una ficha: fecha y hora en una
     línea, el nombre grande debajo, la sala y el botón al final. */
  [style*="grid-template-columns:190px 128px"],
  [style*="grid-template-columns: 190px 128px"] { gap: 12px !important; padding: 24px 0 !important; }
  /* fecha y hora comparten línea */
  [style*="grid-template-columns:190px 128px"] > a > span:first-child,
  [style*="grid-template-columns: 190px 128px"] > a > span:first-child,
  [style*="grid-template-columns:190px 128px"] > div:first-child,
  [style*="grid-template-columns: 190px 128px"] > div:first-child {
    grid-auto-flow: column !important; justify-content: start !important;
    align-items: baseline !important; gap: 12px !important;
  }
  /* la miniatura pasa a banda ancha */
  [style*="grid-template-columns:190px 128px"] [role="img"],
  [style*="grid-template-columns: 190px 128px"] [role="img"] {
    width: 100% !important; height: 160px !important;
  }
  /* sin sangría: al apilarse ya no hay columna que la justifique */
  [style*="grid-template-columns:190px 128px"] [style*="padding-left:16px"],
  [style*="grid-template-columns: 190px 128px"] [style*="padding-left: 16px"] { padding-left: 0 !important; }
  /* el botón no necesita todo el ancho */
  [style*="grid-template-columns:190px 128px"] > a:last-child,
  [style*="grid-template-columns: 190px 128px"] > a:last-child {
    width: auto !important; justify-self: start !important;
    height: 50px !important; padding: 2px 26px 0 !important; margin-top: 4px !important;
  }

  /* 9b · las fotos de sección se recortan: el scroll no puede ser un museo */
  [data-screen-label]:not([data-screen-label="Destacados"]) > div > [role="img"],
  [data-screen-label]:not([data-screen-label="Destacados"]) [role="img"]:not([style*="height: 160px"]):not([style*="inset"]) {
    max-height: 260px !important;
  }
  [data-screen-label]:not([data-screen-label="Destacados"]) img { max-height: 300px !important; object-fit: cover !important; }
  /* las fotos de fondo van ancladas al bloque: ahí el tope no aplica */
  [data-screen-label] img[style*="position:absolute"],
  [data-screen-label] img[style*="position: absolute"] { max-height: none !important; height: 100% !important; }

  /* 9c · el cuerpo de texto: en una columna estrecha 1,7 de interlineado abre
     demasiado y el justificado deja calles blancas. */
  [style*="line-height:1.7"], [style*="line-height: 1.7"],
  [style*="line-height:1.75"], [style*="line-height: 1.75"],
  [style*="line-height:1.8"], [style*="line-height: 1.8"] { line-height: 1.5 !important; }
  [style*="line-height:1.6"], [style*="line-height: 1.6"],
  [style*="line-height:1.65"], [style*="line-height: 1.65"] { line-height: 1.48 !important; }
  /* el cuerpo va justificado en toda la web; con la columna estrecha se guiona
     para que no queden calles blancas */
  [style*="hyphens:auto"], [style*="hyphens: auto"] { hyphens: auto !important; }

  /* 9d · el pie: las listas de enlaces son cortas y en una sola columna
     desperdician medio ancho. Agenda y Formaciones van a la par; el
     Laboratorio cruza abajo con sus enlaces también en dos columnas. */
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 20px !important;
    align-items: start !important;
  }
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"] > div:first-child,
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] > div:first-child,
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"] > div:last-child,
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] > div:last-child {
    grid-column: 1 / -1 !important;
  }
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"] > div:last-child,
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] > div:last-child {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"] > div:last-child > span,
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] > div:last-child > span {
    grid-column: 1 / -1 !important;
  }
  /* los enlaces del pie, más apretados */
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"] > div,
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] > div { gap: 7px 20px !important; line-height: 1.3 !important; }
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"] > div:first-child,
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] > div:first-child { gap: 11px !important; }
  /* correo y teléfono, uno al lado del otro: caben en una línea y ahorran alto */
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"] > div:first-child a[href^="mailto:"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] > div:first-child a[href^="mailto:"] { grid-area: 1 / 1; }
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"] > div:first-child > div:has(a[href^="tel:"]),
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] > div:first-child > div:has(a[href^="tel:"]) {
    display: flex !important; flex-wrap: wrap !important; gap: 6px 16px !important;
  }

  /* la marca y los datos fiscales, a bandera izquierda como los enlaces */
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"] > div:first-child,
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] > div:first-child {
    justify-items: start !important; text-align: left !important;
  }

  /* 9e · los botones de acción, centrados: en el teléfono el pulgar va al
     centro de la pantalla, no a la esquina izquierda. */
  [data-screen-label] > div > a[style*="padding:17px 32px"],
  [data-screen-label] > div > a[style*="padding: 17px 32px"],
  [data-screen-label] a[style*="padding:16px 30px"],
  [data-screen-label] a[style*="padding: 16px 30px"],
  [data-screen-label] a[style*="padding:15px 30px"],
  [data-screen-label] a[style*="padding: 15px 30px"],
  [data-screen-label] span[style*="padding:16px 30px"],
  [data-screen-label] span[style*="padding: 16px 30px"] {
    justify-self: center !important; text-align: center !important;
  }
  /* la fila que agrupa dos botones también se centra */
  [data-screen-label] [style*="display:flex"][style*="gap:14px"],
  [data-screen-label] [style*="display: flex"][style*="gap: 14px"] {
    justify-content: center !important;
    justify-self: stretch !important; width: 100% !important;
  }
  /* la fila de redes del pie: a la derecha queda descolgada */
  [style*="justify-content:flex-end"], [style*="justify-content: flex-end"] { justify-content: center !important; }

  /* los filtros de la agenda y el botón de acción de cada fecha, centrados */
  [style*="display:flex"][style*="gap:9px"],
  [style*="display: flex"][style*="gap: 9px"] { justify-content: center !important; }
  /* el botón de la fila, centrado y del ancho de su texto — la ficha del
     calendario y la de la portada se ven igual */
  [style*="grid-template-columns:190px 128px"] > a:last-child,
  [style*="grid-template-columns: 190px 128px"] > a:last-child,
  [style*="grid-template-columns:190px 128px"] > span:last-child,
  [style*="grid-template-columns: 190px 128px"] > span:last-child {
    justify-self: center !important; width: auto !important;
    height: 50px !important; padding: 2px 26px 0 !important; margin-top: 4px !important;
  }

  /* 9f · el bloque de cifras: cuatro datos apilados son cuatro pantallas de
     scroll. Van en dos por dos y más apretados. */
  [data-screen-label="Cifras"] { grid-template-columns: 1fr 1fr !important; }
  [data-screen-label="Cifras"] > div { padding: 20px 16px !important; gap: 4px !important; }
  [data-screen-label="Cifras"] > div > span:first-child { margin-bottom: 2px !important; }

  /* 9g · el calendario, más compacto: la cabecera y los filtros ocupaban media
     pantalla antes de llegar a los conciertos. */
  [data-screen-label="Cabecera calendario"] { padding: 22px 20px 16px !important; gap: 10px !important; }
  [data-screen-label="Filtros"] { padding: 12px 20px !important; gap: 12px !important; }
  [data-screen-label="Filtros"] [style*="padding:9px 15px"],
  [data-screen-label="Filtros"] [style*="padding: 9px 15px"] { padding: 6px 10px !important; font-size: 10px !important; }
  [data-screen-label="Filtros"] [style*="padding:10px 20px"],
  [data-screen-label="Filtros"] [style*="padding: 10px 20px"] { padding: 7px 13px !important; font-size: 10px !important; }
  [data-screen-label="Filtros"] [style*="display:flex"][style*="gap:9px"],
  [data-screen-label="Filtros"] [style*="display: flex"][style*="gap: 9px"] { gap: 5px !important; }
  [data-screen-label="Vista calendario"] { padding: 14px 20px 30px !important; gap: 10px !important; }
  [data-screen-label="Vista calendario"] > div > div:first-child { padding-bottom: 6px !important; }
  /* la agenda de la portada, con el mismo criterio */
  [data-screen-label] [style*="display:flex"][style*="gap:9px"],
  [data-screen-label] [style*="display: flex"][style*="gap: 9px"] { gap: 6px !important; }
  [data-screen-label] [style*="padding:8px 15px"],
  [data-screen-label] [style*="padding: 8px 15px"] { padding: 6px 10px !important; font-size: 10px !important; }

  /* 9h · las categorías de producción propia y las tarjetas hermanas: 34 px de
     relleno por celda son cuatro pantallas de scroll. */
  [data-screen-label="Producción propia"] [style*="padding:34px 30px"],
  [data-screen-label="Producción propia"] [style*="padding: 34px 30px"],
  [data-screen-label="Cifras"] [style*="padding:34px 32px"],
  [data-screen-label="Cifras"] [style*="padding: 34px 32px"] { padding: 18px 16px !important; gap: 5px !important; }
  [data-screen-label="Producción propia"] [style*="grid-template-columns:1fr 1fr"],
  [data-screen-label="Producción propia"] [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  [data-screen-label="Producción propia"] [style*="margin-bottom:5px"],
  [data-screen-label="Producción propia"] [style*="margin-bottom: 5px"] { margin-bottom: 1px !important; }

  /* 9i · los pasos de «cómo funciona»: el número tiene que ir al lado del
     título, no en su propia línea, y con menos aire entre pasos. */
  [style*="grid-template-columns:64px minmax(0,1fr)"],
  [style*="grid-template-columns: 64px minmax(0, 1fr)"] {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 12px !important; padding: 11px 0 !important;
  }
  [style*="grid-template-columns:64px minmax(0,1fr)"] > span:first-child,
  [style*="grid-template-columns: 64px minmax(0, 1fr)"] > span:first-child { margin-bottom: 2px !important; }
  [style*="grid-template-columns:64px minmax(0,1fr)"] > div,
  [style*="grid-template-columns: 64px minmax(0, 1fr)"] > div { gap: 3px !important; }
  [style*="grid-template-columns:64px minmax(0,1fr)"] > div > span:first-child,
  [style*="grid-template-columns: 64px minmax(0, 1fr)"] > div > span:first-child { margin-bottom: 1px !important; }

  /* 9j · el formulario de contratación cabe en una pantalla: los campos que van
     de dos en dos se quedan así y todo se aprieta. */
  [data-screen-label="Petición"] > div { padding: 26px 20px !important; gap: 12px !important; }
  [data-screen-label="Petición"] [style*="grid-template-columns:1fr 1fr"],
  [data-screen-label="Petición"] [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important; gap: 10px !important;
  }
  [data-screen-label="Petición"] label { gap: 4px !important; }
  [data-screen-label="Petición"] label > span { font-size: 10.5px !important; letter-spacing: .14em !important; }
  [data-screen-label="Petición"] input,
  [data-screen-label="Petición"] select,
  [data-screen-label="Petición"] textarea {
    padding: 9px 10px !important; font-size: 15px !important;
    min-height: 44px !important; box-sizing: border-box !important;
  }
  [data-screen-label="Petición"] textarea { min-height: 64px !important; }
  [data-screen-label="Petición"] [style*="display:grid"][style*="gap:18px"],
  [data-screen-label="Petición"] [style*="display: grid"][style*="gap: 18px"] { gap: 11px !important; }

  /* 9k · la ficha de concierto: la cabecera media pantalla y la tabla de datos
     con celdas de 86 px obligaban a un scroll largo antes de la entrada. */
  [data-screen-label="Portada del evento"] { height: 400px !important; }
  [data-screen-label="Portada del evento"] > div:last-child {
    bottom: 24px !important; gap: 8px !important;
  }
  [data-screen-label="Portada del evento"] [style*="margin-bottom:40px"],
  [data-screen-label="Portada del evento"] [style*="margin-bottom: 40px"] { margin-bottom: 4px !important; }
  [data-screen-label="Datos y acción"] { padding: 24px 20px !important; gap: 20px !important; }
  [data-screen-label="Datos y acción"] > div { gap: 14px !important; }
  [data-screen-label="Datos y acción"] [style*="min-height:86px"],
  [data-screen-label="Datos y acción"] [style*="min-height: 86px"] {
    min-height: 0 !important; padding: 11px 13px 12px !important; gap: 3px !important;
  }
  [data-screen-label="Datos y acción"] iframe { height: 180px !important; }
  [data-screen-label="Datos y acción"] [style*="padding:32px"],
  [data-screen-label="Datos y acción"] [style*="padding: 32px"] { padding: 22px 20px !important; gap: 12px !important; }
  [data-screen-label="Más fechas"] { padding: 26px 20px 34px !important; gap: 14px !important; }

  /* 9l · la portada de contrataciones, con el mismo trato que las demás
     cabeceras: foto a 400 px, texto anclado abajo y un solo botón. */
  [data-screen-label="Portada"] { height: 400px !important; }
  [data-screen-label="Portada"] > div:last-child {
    bottom: 24px !important; gap: 8px !important;
  }
  [data-screen-label="Portada"] [style*="max-width:34em"],
  [data-screen-label="Portada"] [style*="max-width: 34em"] { display: none !important; }
  [data-screen-label="Portada"] [style*="margin-bottom:44px"],
  [data-screen-label="Portada"] [style*="margin-bottom: 44px"] { margin-bottom: 4px !important; }
  [data-screen-label*="Portada"] a[href^="mailto"] { display: none !important; }
  /* las tarjetas de los espacios del estudio, de dos en dos y más cortas */
  [data-screen-label="Los espacios"] { padding: 26px 20px !important; gap: 16px !important; }
  [data-screen-label="Los espacios"] [style*="repeat(4"] {
    grid-template-columns: 1fr 1fr !important; gap: 10px !important;
  }
  [data-screen-label="Los espacios"] [style*="padding:28px 26px"],
  [data-screen-label="Los espacios"] [style*="padding: 28px 26px"] { padding: 14px !important; gap: 5px !important; }
  [data-screen-label="Los espacios"] [style*="margin-bottom:6px"],
  [data-screen-label="Los espacios"] [style*="margin-bottom: 6px"],
  [data-screen-label="Los espacios"] [style*="margin-bottom:5px"],
  [data-screen-label="Los espacios"] [style*="margin-bottom: 5px"] { margin-bottom: 1px !important; }

  /* 9m · el rótulo AJL de las páginas de formación: es una fila de tres piezas
     (marca · filete · nombre) y el doblado general la partía. */
  [data-screen-label*="Portada"] [style*="width:max-content"] { flex-wrap: nowrap !important; }
  [data-screen-label*="Portada"] [style*="height:109.6px"],
  [data-screen-label*="Portada"] [style*="height: 109.6px"] { height: 82px !important; gap: 8px !important; }
  [data-screen-label*="Portada"] [style*="width:112.9px"],
  [data-screen-label*="Portada"] [style*="width: 112.9px"] { width: 84px !important; height: 84px !important; }
  [data-screen-label*="Portada"] [style*="width:65.5px"],
  [data-screen-label*="Portada"] [style*="width: 65.5px"] { width: 48px !important; }
  [data-screen-label*="Portada"] [style*="letter-spacing:.22em"][style*="white-space"],
  [data-screen-label*="Portada"] [style*="letter-spacing: 0.22em"][style*="white-space"] {
    font-size: 14px !important; letter-spacing: .14em !important;
  }
  [data-screen-label*="Portada"] [style*="align-items:center"][style*="gap:40px"],
  [data-screen-label*="Portada"] [style*="align-items: center"][style*="gap: 40px"] { gap: 16px !important; }

  /* todas las cabeceras CON FOTO miden lo mismo en el teléfono. Las que son
     solo un rótulo (Mira y escucha) no llevan alto fijo: las mide su texto. */
  [data-screen-label*="Portada"][style*="position:relative"],
  [data-screen-label*="Portada"][style*="position: relative"] { height: 400px !important; }
  [data-screen-label*="Portada"][style*="position:relative"] > div:last-child,
  [data-screen-label*="Portada"][style*="position: relative"] > div:last-child { bottom: 24px !important; }

  /* 9n · la plantilla: quince músicos en una columna con 44 px entre cada uno
     es un scroll interminable. Van de dos en dos y más juntos. */
  [data-screen-label="La plantilla"] [style*="repeat(3"],
  [data-screen-label="La plantilla"] [style*="repeat(3, minmax(0, 1fr))"] {
    grid-template-columns: 1fr !important; gap: 20px !important;
  }
  [data-screen-label="La plantilla"] [style*="height:300px"],
  [data-screen-label="La plantilla"] [style*="height: 300px"] { height: 260px !important; }
  [data-screen-label="La plantilla"] [style*="gap:12px"] { gap: 6px !important; }
  [data-screen-label="La plantilla"] [style*="margin-bottom:5px"],
  [data-screen-label="La plantilla"] [style*="margin-bottom: 5px"] { margin-bottom: 1px !important; }
  [data-screen-label="La plantilla"] { padding: 26px 20px !important; gap: 16px !important; }

  /* los músicos colaboradores, en dos columnas */
  [data-screen-label="Colaboradores"] { padding: 26px 20px !important; gap: 16px !important; }
  [data-screen-label="Colaboradores"] [style*="repeat(4"] {
    grid-template-columns: 1fr 1fr !important; gap: 0 18px !important;
  }

  /* los dos pases del Muxacho, en dos columnas y sin tanto relleno */
  [data-screen-label="Los pases"] { grid-template-columns: 1fr 1fr !important; }
  [data-screen-label="Los pases"] > div { padding: 20px 16px !important; gap: 8px !important; }

  /* 9o · las filas de dato (Cuándo, Dónde, Entrada…): etiqueta a la izquierda y
     valor a la derecha funciona en 500 px, no en 353. Se apilan. */
  [style*="justify-content:space-between"][style*="align-items:baseline"][style*="padding:16px 0"],
  [style*="justify-content: space-between"][style*="align-items: baseline"][style*="padding: 16px 0"] {
    display: grid !important; gap: 3px !important; padding: 11px 0 !important;
    justify-items: start !important;
  }
  [style*="justify-content:space-between"][style*="align-items:baseline"][style*="padding:16px 0"] > span,
  [style*="justify-content: space-between"][style*="align-items: baseline"][style*="padding: 16px 0"] > span {
    text-align: left !important;
  }

  /* ── Criterio general de tarjetas ────────────────────────────────────
     En vez de una regla por página: cualquier rejilla de tres o cuatro
     tarjetas pasa a dos columnas, y los rellenos gordos de tarjeta se
     recortan. Así una página nueva hereda el formato sin tocar nada. */
  [style*="repeat(3"], [style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* excepciones: las tarjetas de formato y de programa son largas y llevan su
     propia tabla de datos dentro, así que en el teléfono van de una en una */
  [data-screen-label="Formatos"] [style*="repeat(3"],
  [data-screen-label="Programas"] [style*="repeat(3"],
  [data-screen-label="Formatos"] [style*="repeat(4"],
  [data-screen-label="Programas"] [style*="repeat(4"] {
    grid-template-columns: 1fr !important; gap: 14px !important;
  }
  /* y el bloque de cifras usa un hueco de 1 px como línea divisoria: si se
     ensancha a 10 px aparece una franja clara en medio */
  [data-screen-label="Cifras"] { gap: 1px !important; }
  [style*="padding:44px 40px"], [style*="padding: 44px 40px"],
  [style*="padding:36px 32px"], [style*="padding: 36px 32px"],
  [style*="padding:34px 32px"], [style*="padding: 34px 32px"],
  [style*="padding:34px 30px"], [style*="padding: 34px 30px"],
  [style*="padding:28px 26px"], [style*="padding: 28px 26px"] {
    padding: 16px 14px !important; gap: 6px !important;
  }
  /* los subtítulos de sección alineados a la derecha, a la izquierda */
  [style*="text-align:right"], [style*="text-align: right"] { text-align: left !important; }
  /* la cabecera de sección con título y nota a los lados, apilada */
  [style*="align-items:flex-end"][style*="justify-content:space-between"],
  [style*="align-items: flex-end"][style*="justify-content: space-between"] {
    display: grid !important; gap: 8px !important;
  }

  /* excepciones al criterio de dos columnas: la plantilla artística luce en
     una sola, y los colaboradores son una lista, no tarjetas */
  [data-screen-label="La plantilla"] [style*="repeat(3"] {
    grid-template-columns: 1fr !important; gap: 20px !important;
  }
  [data-screen-label="Colaboradores"] [style*="repeat(4"] { gap: 0 18px !important; }

  /* en Nosotros, «Nos escuchas en» es una fila de enlaces: cruza el ancho
     entero debajo de Dónde estamos y Escríbenos */
  [data-screen-label="Contacto"] > div:last-child { grid-column: 1 / -1 !important; }

  /* las tarjetas de texto largo (Otras actividades) se leen mejor en una
     columna: en cuadrícula quedan estrechas y de mucho alto */
  [data-screen-label="Otras actividades"] [style*="repeat(3"] {
    grid-template-columns: 1fr !important; gap: 1px !important;
  }

  /* los vídeos, a una columna: la miniatura se ve grande y el título entero */
  [data-screen-label="Vídeos"] [style*="repeat(3"] {
    grid-template-columns: 1fr !important; gap: 18px !important;
  }

  /* el carril de fotos es horizontal: la regla general de doblado lo convertía
     en una pila vertical de scroll infinito */
  [data-carril] { flex-wrap: nowrap !important; padding: 0 20px 10px !important; }
  [data-carril] img { height: 240px !important; max-height: 240px !important; }
  /* la sección de fotos, sin el aire de escritorio arriba y abajo */
  [data-screen-label="Fotos"] { padding: 20px 0 24px !important; gap: 12px !important; }
  [data-screen-label="Fotos"] > div:first-child { padding: 0 20px !important; }
  [data-screen-label="Vídeos"] { padding: 24px 20px !important; gap: 14px !important; }

  /* el menú desplegable: nombres a la izquierda y a casi toda la pantalla */
  [data-cajon] { width: 88vw !important; max-width: 340px !important; padding: 22px 0 !important; }
  [data-cajon-idiomas] { flex-wrap: nowrap !important; }
  /* solo los enlaces de sección: los del idioma van en su propia fila */
  [data-cajon] a:not([hreflang]) {
    justify-content: flex-start !important; text-align: left !important;
    justify-self: stretch !important; width: auto !important;
    padding: 11px 22px !important; gap: 10px !important;
  }
  [data-cajon] > div { justify-content: flex-start !important; text-align: left !important; }
  [data-cajon] > div > span { justify-self: start !important; }

  /* el carrusel a lo alto abre demasiado el plano: se acerca un poco para que
     se parezca al recorte del escritorio */
  [data-screen-label="Destacados"] [role="img"] {
    background-size: auto 185% !important;
    background-position: center 62% !important;
  }

  /* 10 · el gran hueco entre columnas ya no hace falta */
  [style*="gap:56px"], [style*="gap: 56px"],
  [style*="gap:60px"], [style*="gap: 60px"],
  [style*="gap:40px"], [style*="gap: 40px"],
  [style*="gap:38px"], [style*="gap: 38px"],
  [style*="gap:36px"], [style*="gap: 36px"],
  [style*="gap:26px"], [style*="gap: 26px"],
  [style*="gap:24px"], [style*="gap: 24px"] { gap: 18px !important; }
}

/* ───────── La fila de conciertos necesita 1100 px para sus cinco columnas ─────────
   Son 712 px fijos más 96 de separación: por debajo de 1100 la columna del
   artista se queda sin sitio y el texto se monta encima de la sala. Ahí la
   fila pasa a una sola columna, antes que el resto de la web. */
@media (max-width: 1100px) and (min-width: 768px) {
  /* la miniatura se retira y quedan cuatro columnas que sí caben */
  [style*="grid-template-columns:190px 128px"],
  [style*="grid-template-columns: 190px 128px"] {
    grid-template-columns: 150px minmax(150px, 1fr) minmax(110px, 150px) 130px !important;
    gap: 16px !important;
  }
  /* descendiente, no hijo: en la portada las celdas van dentro de un
     envoltorio con display:contents y el combinador hijo no lo atraviesa */
  [style*="grid-template-columns:190px 128px"] [role="img"],
  [style*="grid-template-columns: 190px 128px"] [role="img"] { display: none !important; }
}

/* Por debajo de 768 la fila entera se apila, como el resto de la web */
@media (max-width: 767px) {
  [style*="grid-template-columns:190px 128px"],
  [style*="grid-template-columns: 190px 128px"] { grid-template-columns: 1fr !important; }
}

/* La franja que ofrece la web en tu idioma: su relleno no lo decide la regla
   general de los 48 px, y el aspa se queda junto al texto. */
@media (max-width: 900px) {
  [data-sugerencia] { padding: 11px 16px 11px 20px !important; flex-wrap: nowrap !important; gap: 12px !important; }
  [data-sugerencia] > a { flex-wrap: wrap !important; row-gap: 2px !important; }
}

/* ───────── Un solo cuerpo para todo el texto corrido ─────────
   En escritorio hay párrafos de entrada más grandes que el resto (21 px frente
   a 17,5). En una pantalla de teléfono esa diferencia se lee como un error de
   maquetación, así que todo el texto corrido —el que va justificado— comparte
   cuerpo e interlineado. */
@media (max-width: 767px) {
  /* El selector va doblado a propósito: así pesa más que la tabla de cuerpos
     de movil-tipos.css, que se carga después y si no ganaría ella. */
  [style*="text-align:justify"][style],
  [style*="text-align: justify"][style] {
    font-size: 17px !important;
    line-height: 1.62 !important;
  }
}

/* ───────── La ficha de concierto: comprar primero ─────────
   En escritorio la tabla de datos va en una columna y la caja de compra en la
   otra, así que se ven juntas. Al apilarse en el teléfono, esos 635 px de tabla
   empujaban el botón a 1,4 pantallas de distancia. Se invierte el orden: foto,
   caja de compra, y los detalles después para quien los quiera. */
@media (max-width: 900px) {
  [data-screen-label="Datos y acción"] { display: flex !important; flex-direction: column !important; }
  [data-screen-label="Datos y acción"] > div:nth-child(1) { order: 2; }
  [data-screen-label="Datos y acción"] > div:nth-child(2) { order: 1; }
}

/* Móvil estrecho */
@media (max-width: 480px) {
  [style*="letter-spacing:.24em"], [style*="letter-spacing: 0.24em"],
  [style*="letter-spacing:.22em"], [style*="letter-spacing: 0.22em"] { letter-spacing: .16em !important; }
  [style*="repeat(7"] { font-size: 9px !important; }
}


/* ───────── La portada de cada página ocupa la pantalla ─────────
   Como en las webs de las grandes salas: al entrar solo se ve la imagen de
   apertura y hay que desplazarse para seguir. En la home cuentan las dos
   piezas juntas, la portada y la franja de los diez años, porque forman una
   sola apertura. Se descuenta la barra superior, que va fija.
   Primero en vh para navegadores viejos y luego en svh, que en el móvil no
   salta cuando aparece o desaparece la barra del navegador. */
[data-screen-label^="Portada"][style*="position:relative"]:not([data-screen-label="Portada del evento"]),
[data-screen-label^="Portada"][style*="position: relative"]:not([data-screen-label="Portada del evento"]) {
  height: calc(100vh - 66px) !important;
  height: calc(100svh - 66px) !important;
  min-height: 560px !important;
}
[data-screen-label="Destacados"] {
  height: calc(100vh - 187px) !important;
  height: calc(100svh - 187px) !important;
  min-height: 620px !important;
}

@media (max-width: 900px) {
  /* en el teléfono la barra mide menos y la franja también */
  [data-screen-label^="Portada"][style*="position:relative"]:not([data-screen-label="Portada del evento"]),
  [data-screen-label^="Portada"][style*="position: relative"]:not([data-screen-label="Portada del evento"]) {
    height: calc(100vh - 64px) !important;
    height: calc(100svh - 64px) !important;
    min-height: 420px !important;
  }
  [data-screen-label="Destacados"] {
    height: calc(100vh - 185px) !important;
    height: calc(100svh - 185px) !important;
    min-height: 400px !important;
  }
}


/* ───────── El rótulo AJL de las páginas de formación ─────────
   Es un logotipo, no un titular: la guía de estilo lo fija como una sola fila
   —AJL, la corneta, el filete y el nombre al lado— y no puede partirse nunca.
   Así que se reduce como una pieza única, con todas sus medidas en proporción,
   en vez de dejar que la tabla general de cuerpos lo descuadre. */
@media (max-width: 900px) {
  /* la fila no se dobla: el nombre va al lado, jamás debajo */
  [data-screen-label*="Portada"] [style*="width:max-content"],
  [data-screen-label*="Portada"] [style*="width: max-content"] {
    flex-wrap: nowrap !important;
    gap: 18px !important;
    align-items: center !important;
  }
  /* las tres piezas, a escala */
  [data-screen-label*="Portada"] div[style*="font-size:108px"],
  [data-screen-label*="Portada"] div[style*="font-size: 108px"] { font-size: 62px !important; }
  [data-screen-label*="Portada"] [style*="height:109.6px"],
  [data-screen-label*="Portada"] [style*="height: 109.6px"] { height: 66px !important; gap: 5px !important; }
  [data-screen-label*="Portada"] [style*="width:112.9px"],
  [data-screen-label*="Portada"] [style*="width: 112.9px"] { width: 66px !important; height: 66px !important; }
  [data-screen-label*="Portada"] img[style*="width:65.5px"],
  [data-screen-label*="Portada"] img[style*="width: 65.5px"] { width: 38px !important; }
  /* el nombre, en dos líneas y sin partir palabras */
  [data-screen-label*="Portada"] div[style*="letter-spacing:.22em"][style*="font-size:30px"],
  [data-screen-label*="Portada"] div[style*="letter-spacing: 0.22em"][style*="font-size: 30px"] {
    font-size: 14px !important;
    letter-spacing: .13em !important;
    white-space: nowrap !important;
  }
  [data-screen-label*="Portada"] [style*="width:2px"],
  [data-screen-label*="Portada"] [style*="width: 2px"] { width: 1px !important; }
  /* las dos líneas del nombre, más juntas en proporción */
  [data-screen-label*="Portada"] [style*="gap:14px"],
  [data-screen-label*="Portada"] [style*="gap: 14px"] { gap: 6px !important; }
}

/* ───────── Cabeceras con foto de fondo en el teléfono ─────────
   Algunas usan un zoom fijo en tanto por ciento para clavar el encuadre. Eso
   cubría una caja ancha de 660 px, pero no una pantalla de teléfono alta: el
   fondo se quedaba corto y asomaba el color de debajo. En vertical manda
   cubrir; el punto de encuadre se mantiene. */
@media (max-width: 900px) {
  [data-screen-label*="Portada"] [role="img"][style*="background-size"] { background-size: cover !important; }
}


/* ───────── Las dos cabeceras de formación en el teléfono ─────────
   1 · su degradado se volvía noche opaca en el 27 % inferior. En una caja de
       660 px eran 180 px; en una pantalla de teléfono son más de 200 y parece
       que la foto no llega abajo. Aquí se aclara.
   2 · el rótulo es una pieza baja (82 px) frente al bloque de rótulo + titular
       de las demás páginas, así que apoyado a 50 px del borde quedaba mucho
       más abajo que en el resto. Se levanta para que case con ellas. */
@media (max-width: 900px) {
  [data-screen-label="Portada orquesta"] [style*="#0E1620 27%"],
  [data-screen-label="Portada ensemble"] [style*="#0E1620 27%"],
  [data-screen-label="Portada orquesta"] [style*="rgb(14, 22, 32) 27%"],
  [data-screen-label="Portada ensemble"] [style*="rgb(14, 22, 32) 27%"] {
    background: linear-gradient(to top, rgba(14,22,32,.94) 0%, rgba(14,22,32,.6) 46%, rgba(14,22,32,.06) 86%) !important;
  }
}


/* ───────── El rótulo de orquesta y ensemble, a la altura de las demás ─────────
   Su bloque es una pieza baja (el logotipo) frente al rótulo + titular de las
   otras cabeceras, así que apoyado a 50 px del borde quedaba bastante más
   abajo. Se levanta en todas las anchuras, no solo en el teléfono. */
[data-screen-label="Portada orquesta"][style*="position: relative"] > div:last-child,
[data-screen-label="Portada ensemble"][style*="position: relative"] > div:last-child,
[data-screen-label="Portada orquesta"][style*="position:relative"] > div:last-child,
[data-screen-label="Portada ensemble"][style*="position:relative"] > div:last-child { bottom: 104px !important; }

/* En escritorio los bloques de las otras cabeceras son más altos todavía
   (rótulo + titular de 118 px), así que el logotipo necesita levantarse más
   para que su borde superior caiga en la misma línea. */
@media (min-width: 901px) {
  [data-screen-label="Portada orquesta"][style*="position: relative"] > div:last-child,
  [data-screen-label="Portada ensemble"][style*="position: relative"] > div:last-child,
  [data-screen-label="Portada orquesta"][style*="position:relative"] > div:last-child,
  [data-screen-label="Portada ensemble"][style*="position:relative"] > div:last-child { bottom: 200px !important; }
}


/* ───────── El aviso de cookies en el teléfono ─────────
   En escritorio es una barra con el texto a un lado y los botones al otro. En
   una pantalla estrecha eso no cabe: se apila, el texto se acorta de cuerpo y
   los dos botones ocupan el ancho con área táctil de 44 px. */
@media (max-width: 900px) {
  [data-aviso-cookies] {
    padding: 18px 20px 20px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    max-height: 62svh !important;
    overflow-y: auto !important;
  }
  [data-aviso-cookies] > div:first-child { gap: 6px !important; }
  [data-aviso-cookies] > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  [data-aviso-cookies] > div:last-child > span {
    text-align: center !important; padding: 14px 10px !important;
    min-height: 44px !important; display: grid !important; place-items: center !important;
  }
}


/* ───────── El boletín en el teléfono: hoja inferior ─────────
   Una ventana centrada que tapa la pantalla es justo lo que Google considera
   intrusivo en móvil. Aquí la misma ventana se apoya en el borde inferior,
   ocupa como mucho tres cuartos de alto, deja ver la página por encima y se
   desplaza por dentro si el teclado del teléfono le come sitio. */
@media (max-width: 900px) {
  [data-hoja-boletin] {
    place-items: end stretch !important;
    padding: 0 !important;
    background: rgba(10, 18, 25, .72) !important;
  }
  [data-hoja-boletin] > div {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 78svh !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-top: 3px solid #B4823A !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 26px 20px 24px !important;
    gap: 16px !important;
  }
  /* el aspa, más grande y con área táctil de dedo */
  [data-hoja-boletin] > div > span:first-child {
    top: 10px !important; right: 10px !important;
    width: 44px !important; height: 44px !important;
    display: grid !important; place-items: center !important;
  }
  /* nombre y correo, uno debajo del otro: en 353 px no caben al lado */
  [data-hoja-boletin] [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important; gap: 12px !important;
  }
  [data-hoja-boletin] input:not([type="checkbox"]) { box-sizing: border-box !important; height: 46px !important; font-size: 16px !important; }
  /* la casilla de consentimiento es cuadrada y no se estira; su texto va al
     lado, no debajo, así que esta fila no dobla */
  [data-hoja-boletin] input[type="checkbox"] { width: 20px !important; height: 20px !important; flex: none !important; }
  [data-hoja-boletin] label { flex-wrap: nowrap !important; }
  [data-hoja-boletin] label > span { flex: 1 1 auto !important; min-width: 0 !important; }
  [data-hoja-boletin] [style*="font-family: Anton"] { line-height: 1.04 !important; }
}