@media (max-width: 900px){

  body.page--madrid{ overflow-x: hidden !important; }

  /* HERO: sin padding/alturas heredadas en móvil */
  body.page--madrid .hero.hero-madrid,
  body.page--madrid .hero--madrid{
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* CONTENEDOR: quitamos el “marco blanco” */
  body.page--madrid .hero.hero-madrid .hero-image,
  body.page--madrid .hero--madrid .hero-image{
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;      /* <- adiós tarjeta */
    background: transparent !important;
    overflow: visible !important;
  }

  /* Por si hay <figure>/<picture> metiendo márgenes */
  body.page--madrid .hero.hero-madrid .hero-image picture,
  body.page--madrid .hero.hero-madrid .hero-image figure{
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* IMAGEN COMPLETA (sin recorte) y a pantalla completa */
  body.page--madrid .hero.hero-madrid .hero-image img,
  body.page--madrid .hero--madrid .hero-image img{
       width: 100% !important;
 height: 72vh !important;
    display: block !important;

  object-fit: cover !important;
object-position: 50% 63% !important;
  }

  /* TARJETA debajo */
  body.page--madrid .hero.hero-madrid .hero-card,
  body.page--madrid .hero--madrid .hero-card{
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    width: calc(100% - 32px) !important;
    max-width: 760px !important;
    margin: 18px auto 0 !important;
    z-index: 2 !important;
  }
}
@media (max-width: 900px){

  /* Mata el “marco” del wrapper que envuelve el hero (solo Madrid) */
  body.page--madrid .hero.hero-madrid,
  body.page--madrid .hero--madrid,
  body.page--madrid .hero.hero-madrid *{
    background: transparent !important;
  }

  /* Wrapper típico que suele crear el recuadro */
  body.page--madrid main > section,
  body.page--madrid main .section,
  body.page--madrid main .block,
  body.page--madrid main .card,
  body.page--madrid main .panel,
  body.page--madrid main .container,
  body.page--madrid main .wrap{
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Hero a sangre como Home */
  body.page--madrid .hero.hero-madrid{
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  body.page--madrid .hero.hero-madrid .hero-image{
    border-radius: 0 !important;
    overflow: visible !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;

    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body.page--madrid .hero.hero-madrid .hero-image img{
    width: 100vw !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important; /* imagen completa */
  }

}
@media (max-width: 900px){

  /* 1) El wrapper inmediato del hero (section/article/div) NO puede tener fondo ni padding */
  body.page--madrid .hero.hero-madrid{
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 2) Si el hero está dentro de un “bloque” (lo que vemos en tu captura) lo neutralizamos SOLO si contiene el hero */
  body.page--madrid section:has(.hero.hero-madrid),
  body.page--madrid article:has(.hero.hero-madrid),
  body.page--madrid div:has(.hero.hero-madrid){
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 3) Imagen full width real (sin tarjeta) */
  body.page--madrid .hero.hero-madrid .hero-image{
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;

    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
  }

  body.page--madrid .hero.hero-madrid .hero-image img{
    width: 100vw !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important; /* completa */
  }

  /* 4) Tarjeta debajo con margen elegante */
  body.page--madrid .hero.hero-madrid .hero-card{
    width: calc(100% - 32px) !important;
    margin: 18px auto 0 !important;
  }


@media (max-width: 900px){

  /* A) Mata cualquier padding lateral que empuja SOLO en Madrid */
  body.page--madrid main,
  body.page--madrid .wrap,
  body.page--madrid .container,
  body.page--madrid .section,
  body.page--madrid .block{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* B) Hero wrapper sin desplazamientos */
  body.page--madrid .hero.hero-madrid{
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* C) FULL BLEED REAL: truco infalible con calc() */
  body.page--madrid .hero.hero-madrid .hero-image{
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    left: auto !important;
    transform: none !important;

    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body.page--madrid .hero.hero-madrid .hero-image img{
    width: 100vw !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* D) Tarjeta debajo con márgenes elegantes */
  body.page--madrid .hero.hero-madrid .hero-card{
    width: calc(100% - 32px) !important;
    margin: 18px auto 0 !important;
  }
}
@media (max-width: 900px){

  /* Margen lateral premium para el texto editorial */
  body.page--madrid main{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Ancho de lectura elegante (no texto a pantalla completa) */
  body.page--madrid .chapter,
  body.page--madrid .madrid-intro,
  body.page--madrid .intro,
  body.page--madrid .section-intro{
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}