/* Mazca 3 — ritmo y responsive común para heroes interiores. */

/* La tarjeta de contacto queda limpia, sin la línea decorativa superior. */
body .cnth-form-card::before {
  content: none !important;
  display: none !important;
}

/* Laptop: altura contenida y homogénea, sin sobredimensionar la composición. */
@media (min-width: 981px) and (max-width: 1599px) {
  body .at-hero,
  body :is(.cal-hero,.ene-hero,.gov-hero,.idi-hero,.ma-hero,.seg-hero,.ii-hero,.ip-hero) {
    min-height: clamp(620px, calc(100svh - 108px), 760px) !important;
    padding-top: clamp(124px, 10vw, 154px) !important;
    padding-bottom: clamp(64px, 6vw, 88px) !important;
  }

  body .fph-main,
  body .m3-shero {
    min-height: clamp(620px, calc(100svh - 108px), 760px) !important;
  }

  body .fph-main {
    padding-top: clamp(124px, 10vw, 154px) !important;
    padding-bottom: clamp(64px, 6vw, 88px) !important;
  }

  body .fph-left,
  body .fph-right {
    padding-bottom: 0 !important;
  }
}

/* iMac y monitores grandes: más presencia, ancho útil y escala como en la home. */
@media (min-width: 1600px) {
  body .at-hero,
  body :is(.cal-hero,.ene-hero,.gov-hero,.idi-hero,.ma-hero,.seg-hero,.ii-hero,.ip-hero) {
    min-height: clamp(720px, calc(100svh - 108px), 920px) !important;
    padding: clamp(170px, 8.5vw, 210px) clamp(72px, 4.5vw, 112px) clamp(82px, 5vw, 112px) !important;
    grid-template-columns: minmax(560px, .9fr) minmax(680px, 1.1fr) !important;
    gap: clamp(72px, 5vw, 120px) !important;
  }

  body :is(.at-hero__grid,.dhero-inner,.m3-shero__grid,.fph-main) {
    width: 100% !important;
    max-width: min(1900px, calc(100vw - 144px)) !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(560px, .9fr) minmax(680px, 1.1fr) !important;
    gap: clamp(72px, 5vw, 120px) !important;
  }

  body .fph-main {
    min-height: clamp(720px, calc(100svh - 108px), 920px) !important;
    padding: clamp(170px, 8.5vw, 210px) 0 clamp(82px, 5vw, 112px) !important;
  }

  body .fph-left,
  body .fph-right {
    padding-bottom: 0 !important;
  }

  body .m3-shero {
    min-height: clamp(720px, calc(100svh - 108px), 920px) !important;
    padding-top: clamp(170px, 8.5vw, 210px) !important;
    padding-bottom: clamp(82px, 5vw, 112px) !important;
  }

  body :is(.cal-hero,.ene-hero,.gov-hero,.idi-hero,.ma-hero,.seg-hero,.ii-hero,.ip-hero,.fph-wrap,.m3-shero) h1 {
    font-size: clamp(62px, 3.45vw, 80px) !important;
    line-height: 1.02 !important;
  }

  body :is(.cal-hero-sub,.ene-hero-sub,.gov-hero-sub,.idi-hero-sub,.ma-hero-sub,.seg-hero-sub,.ii-sub,.ip-sub,.fph-sub,.m3-shero__sub) {
    max-width: 620px !important;
    font-size: clamp(18px, 1vw, 21px) !important;
  }

  body :is(.cal-hero-right,.ene-hero-right,.gov-hero-right,.idi-hero-right,.ma-hero-right,.seg-hero-right,.ii-right,.ip-right,.fph-right,.m3-shero__right) {
    width: 100% !important;
  }

  /* Los paneles ganan altura real, no solo anchura, para llenar mejor el hero. */
  body :is(.at-panel,.dhero-right,.cal-hero-right,.ene-hero-right,.gov-hero-right,.idi-hero-right,.ma-hero-right,.seg-hero-right,.ii-right,.ip-right,.fph-right,.m3-shero__panel) {
    min-height: clamp(500px, 27vw, 580px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  body .at-panel__kpis {
    margin-top: clamp(10px, 1vw, 20px) !important;
  }

  body .cal-thermo-wrap {
    max-width: 440px !important;
  }

  body .cal-thermo-bar-outer,
  body .cal-thermo-levels {
    height: clamp(320px, 18vw, 360px) !important;
  }

  body .ene-gauge-svg,
  body .idi-gfx-svg {
    width: min(460px, 100%) !important;
  }

  body .ma-gfx {
    width: clamp(400px, 22vw, 480px) !important;
    height: clamp(400px, 22vw, 480px) !important;
  }

  body .seg-gfx-svg {
    width: min(390px, 100%) !important;
  }

  body :is(.ene-gfx,.gov-gfx,.idi-gfx,.seg-gfx-wrap,.ii-svg-wrap,.ip-canvas-wrap) {
    max-width: 680px !important;
  }

  body :is(.cal-hero,.ene-hero,.gov-hero,.idi-hero,.ma-hero,.seg-hero,.ii-hero,.ip-hero,.fph-wrap,.m3-shero) a[class*="cta"],
  body .m3-shero .m3-btn {
    min-height: 50px !important;
    padding-inline: 24px !important;
    font-size: 13px !important;
  }
}

/* Tablet: una sola columna, aire bajo el header y gráfico centrado. */
@media (min-width: 769px) and (max-width: 980px) {
  body :is(.cal-hero,.ene-hero,.gov-hero,.idi-hero,.ma-hero,.seg-hero,.ii-hero,.ip-hero) {
    min-height: auto !important;
    padding: 136px 40px 72px !important;
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  body .fph-main,
  body .m3-shero {
    min-height: auto !important;
  }

  body .fph-main {
    padding: 136px 40px 72px !important;
    gap: 48px !important;
  }

  body :is(.cal-hero-right,.ene-hero-right,.gov-hero-right,.idi-hero-right,.ma-hero-right,.seg-hero-right,.ii-right,.ip-right,.fph-right,.m3-shero__right) {
    width: 100% !important;
    max-width: 720px !important;
    margin-inline: auto !important;
  }
}

/* Móvil: conserva las composiciones específicas, igualando el arranque y el ancho. */
@media (max-width: 768px) {
  body :is(.cal-hero,.ene-hero,.gov-hero,.idi-hero,.ma-hero,.seg-hero) {
    min-height: auto !important;
    padding: 122px 22px 56px !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  body .fph-main,
  body .m3-shero {
    min-height: auto !important;
  }

  body .fph-main {
    padding: 122px 22px 56px !important;
  }

  body :is(.cal-hero,.ene-hero,.gov-hero,.idi-hero,.ma-hero,.seg-hero,.fph-wrap,.m3-shero) h1 {
    font-size: clamp(40px, 12vw, 52px) !important;
    line-height: 1.04 !important;
  }
}

/*
 * Móvil definitivo · v5.27
 * Un único lenguaje para todos los heroes interiores. La referencia visual
 * es Eficiencia Energética: composición centrada, H1 contenido, texto con una
 * medida cómoda y CTA petróleo de ancho natural. El prefijo html body aporta
 * la especificidad necesaria para ganar a los <style> de cada plantilla sin
 * alterar sus versiones de tablet o escritorio.
 */
@media (max-width: 768px),
       (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {
  html body {
    --m3-mobile-hero-x: clamp(20px, 5.75vw, 24px);
    --m3-mobile-hero-top: 108px;
    --m3-mobile-hero-bottom: 56px;
    --m3-mobile-hero-copy: 680px;
  }

  /* Secciones y contenedores: mismo arranque y ancho útil. */
  html body :is(
    .cal-hero,
    .ene-hero,
    .gov-hero,
    .idi-hero,
    .ma-hero,
    .seg-hero,
    .at-hero,
    .dhero-wrap
  ) {
    display: block !important;
    min-height: auto !important;
    padding: var(--m3-mobile-hero-top) var(--m3-mobile-hero-x) var(--m3-mobile-hero-bottom) !important;
    text-align: center !important;
    overflow-x: clip !important;
  }

  html body :is(.dhero-inner,.at-hero__grid,.fph-main,.m3-shero__grid) {
    display: block !important;
    width: 100% !important;
    max-width: var(--m3-mobile-hero-copy) !important;
    margin-inline: auto !important;
  }

  html body .fph-main {
    min-height: auto !important;
    padding: var(--m3-mobile-hero-top) var(--m3-mobile-hero-x) var(--m3-mobile-hero-bottom) !important;
  }

  html body .m3-shero {
    min-height: auto !important;
    padding: var(--m3-mobile-hero-top) 0 var(--m3-mobile-hero-bottom) !important;
    text-align: center !important;
  }

  html body .m3-shero__container {
    width: 100% !important;
    padding-inline: var(--m3-mobile-hero-x) !important;
  }

  /* Bloques de copy centrados. */
  html body :is(
    .cal-hero-left,
    .ene-hero-left,
    .gov-hero-left,
    .idi-hero-left,
    .ma-hero-left,
    .seg-hero-left,
    .dhero-left,
    .at-left,
    .fph-left,
    .m3-shero__left
  ) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: var(--m3-mobile-hero-copy) !important;
    margin-inline: auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* En móvil el hero arranca directamente en el eyebrow: sin breadcrumbs. */
  html body :is(
    .cal-breadcrumb,
    .ene-breadcrumb,
    .gov-breadcrumb,
    .idi-breadcrumb,
    .ma-breadcrumb,
    .seg-breadcrumb,
    .at-breadcrumb,
    .ii-breadcrumb,
    .ip-breadcrumb,
    .m3-shero__crumb
  ) {
    display: none !important;
  }

  /* Eyebrow/tag: exactamente la escala de Eficiencia Energética. */
  html body :is(
    .cal-tag,
    .ene-tag,
    .gov-tag,
    .idi-tag,
    .ma-tag,
    .seg-tag,
    .dhero-tag,
    .at-eyebrow,
    .ii-tag,
    .ip-tag,
    .fph-eyebrow,
    .m3-shero__tag,
    .cnth-eyebrow
  ) {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--m3-oliva,#7E9B3B) !important;
    font-family: 'Schibsted Grotesk',sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: .16em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  html body .fph-eyebrow > span {
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
  }

  /* Títulos: misma escala protagonista de la Home en todos los heroes interiores · v0.9.235. */
  html body :is(
    .cal-hero,
    .ene-hero,
    .gov-hero,
    .idi-hero,
    .ma-hero,
    .seg-hero,
    .dhero-wrap,
    .at-hero,
    .ii-hero-top,
    .ip-hero-top,
    .fph-wrap,
    .m3-shero,
    .cnth-wrap
  ) h1 {
    width: 100% !important;
    max-width: var(--m3-mobile-hero-copy) !important;
    margin: 0 auto 22px !important;
    color: var(--m3-tinta,#15201D) !important;
    font-family: 'Schibsted Grotesk',sans-serif !important;
    font-size: clamp(36px, 10.5vw, 48px) !important;
    font-weight: 800 !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
    text-align: center !important;
    text-wrap: balance;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html body :is(.ii-hero-top,.ip-hero-top) h1 em {
    color: var(--m3-oliva,#7E9B3B) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* Descripciones: legibles, centradas y con la misma densidad. */
  html body :is(
    .cal-hero-sub,
    .ene-hero-sub,
    .gov-hero-sub,
    .idi-hero-sub,
    .ma-hero-sub,
    .seg-hero-sub,
    .dhero-sub,
    .at-sub,
    .ii-sub,
    .ip-sub,
    .fph-sub,
    .m3-shero__sub,
    .cnth-sub
  ) {
    width: 100% !important;
    max-width: 42rem !important;
    margin: 0 auto 30px !important;
    color: var(--m3-tinta-soft,#56635E) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    text-align: center !important;
  }

  /* La regla secundaria de Formaciones deja de tirar la composición a un lado. */
  html body .fph-rule {
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto 26px !important;
    text-align: center !important;
  }

  html body .fph-rule-line {
    display: none !important;
  }

  html body .fph-rule-label {
    font-size: 8.5px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  html body .at-pills {
    justify-content: center !important;
    margin: -4px auto 28px !important;
  }

  html body .m3-shero__stats {
    justify-content: center !important;
    margin-top: 38px !important;
  }

  /* CTA común. También neutraliza el lima y el ancho completo de Digital. */
  html body :is(
    .cal-hero,
    .ene-hero,
    .gov-hero,
    .idi-hero,
    .ma-hero,
    .seg-hero,
    .dhero-wrap,
    .at-hero,
    .ii-hero-top,
    .ip-hero-top,
    .fph-wrap,
    .m3-shero
  ) a:is([class*="-cta"],.m3-btn) {
    align-self: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin-inline: auto !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--m3-petroleo,#0C2421) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* Panels y elementos visuales: la misma tarjeta y el mismo aire inferior. */
  html body :is(
    .cal-hero-right,
    .ene-hero-right,
    .gov-hero-right,
    .idi-hero-right,
    .ma-hero-right,
    .seg-hero-right,
    .dhero-right,
    .fph-right,
    .m3-shero__right,
    .at-panel-wrap
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: var(--m3-mobile-hero-copy) !important;
    margin: 48px auto 0 !important;
  }

  html body :is(
    .cal-hero-right,
    .ene-hero-right,
    .gov-hero-right,
    .idi-hero-right,
    .ma-hero-right,
    .seg-hero-right,
    .dhero-right,
    .fph-right,
    .m3-shero__panel,
    .at-panel
  ) {
    border-radius: 14px !important;
  }

  html body .at-panel-wrap {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
  }

  /* Ingeniería: elimina el sticky y convierte el bloque oscuro en una card
     como el resto, preservando el diagrama y sus datos. */
  html body :is(.ii-hero,.ip-hero) {
    display: block !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--m3-bg,#F4F6F8) !important;
  }

  html body :is(.ii-hero-top,.ip-hero-top) {
    position: relative !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    padding: var(--m3-mobile-hero-top) var(--m3-mobile-hero-x) 0 !important;
    text-align: center !important;
    transform: none !important;
  }

  html body :is(.ii-hero-bottom,.ip-hero-bottom) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: calc(100% - 44px) !important;
    max-width: var(--m3-mobile-hero-copy) !important;
    min-height: auto !important;
    margin: 48px auto var(--m3-mobile-hero-bottom) !important;
    padding: 32px var(--m3-mobile-hero-x) 36px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* Ingeniería: dibujos algo más presentes, centrados dentro de la misma card.
     Solo crece el recurso gráfico; el panel petróleo no cambia de tamaño. */
  html body .ii-hero-bottom .ii-svg-wrap {
    flex: 0 0 auto !important;
    position: relative !important;
    left: auto !important;
    width: min(100%, 500px) !important;
    max-width: none !important;
    margin: 0 auto 34px !important;
    transform: scale(1.08) !important;
    transform-origin: center center !important;
  }

  html body .ii-hero-bottom .ii-svg-wrap svg {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin-inline: auto !important;
    transform-origin: center center !important;
  }

  html body .ip-hero-bottom .ip-canvas-wrap {
    flex: 0 0 auto !important;
    position: relative !important;
    left: auto !important;
    width: min(100%, 519px) !important;
    max-width: none !important;
    margin: 0 auto 20px !important;
    transform: scale(1.08) !important;
    transform-origin: center center !important;
  }

  html body .ip-hero-bottom .ip-canvas-wrap canvas {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  /* Contacto comparte jerarquía tipográfica, manteniendo el formulario antes
     de las tarjetas de contacto tal y como prevé su orden móvil. */
  html body .cnth-wrap {
    --cnth-pad-y: var(--m3-mobile-hero-top) !important;
    --cnth-pad-x: var(--m3-mobile-hero-x) !important;
    padding: var(--m3-mobile-hero-top) var(--m3-mobile-hero-x) var(--m3-mobile-hero-bottom) !important;
  }

  html body .cnth-inner {
    width: 100% !important;
    max-width: var(--m3-mobile-hero-copy) !important;
    margin-inline: auto !important;
  }

  html body :is(.cnth-eyebrow,.cnth-h1,.cnth-sub) {
    margin-inline: auto !important;
    text-align: center !important;
  }
}

@media (min-width: 769px) and (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {
  html body {
    --m3-mobile-hero-top: 92px;
    --m3-mobile-hero-bottom: 44px;
    --m3-mobile-hero-copy: 720px;
  }

  html body :is(
    .cal-hero,
    .ene-hero,
    .gov-hero,
    .idi-hero,
    .ma-hero,
    .seg-hero,
    .dhero-wrap,
    .at-hero,
    .ii-hero-top,
    .ip-hero-top,
    .fph-wrap,
    .m3-shero,
    .cnth-wrap
  ) h1 {
    font-size: clamp(38px, 5.2vw, 44px) !important;
  }
}

@media (max-width: 380px) {
  html body {
    --m3-mobile-hero-x: 18px;
  }

  html body :is(
    .cal-hero,
    .ene-hero,
    .gov-hero,
    .idi-hero,
    .ma-hero,
    .seg-hero,
    .dhero-wrap,
    .at-hero,
    .ii-hero-top,
    .ip-hero-top,
    .fph-wrap,
    .m3-shero,
    .cnth-wrap
  ) h1 {
    font-size: clamp(39px, 11.8vw, 45px) !important;
  }
}