/*======================================================================
  LAS TRAMPAS DEL GAS  ·  versión octubre 2026
  Cada bloque = <section class="section bloque-texto ..."> con fondo
  ilustrado. Las medidas siguen el lienzo de Figma de 1440px (vw) para
  que en desktop la composición sea idéntica; en móvil todo se apila.
======================================================================*/

body {
  background-color: #ffffff !important;
}
header.navbar {
  background-color: #ffffff !important;
}
.texto-main {
  overflow-x: hidden;
}
.texto-main p:not(.costra),
.texto-main li {
  font-family: "KievitOT" !important;
}

.bloque-texto {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
@media (min-width: 768px) {
  .bloque-texto {
    background-size: 100% 100%;
  }
}
.bloque-texto > .padding-global {
  position: relative;
  z-index: 3;
}
/* Capas ilustradas (ballenas) por encima del fondo, debajo del texto */
.bloque-texto::before,
.bloque-texto::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  pointer-events: none;
}

.tr-amarillo {
  color: #ffe49b;
}

/*====================================================================
  HEADER
====================================================================*/
.header-texto {
  background-color: #c4dfe0;
  background-image: url("../images/texto_web/header_fondo.webp");
  background-size: 100% 100%;
  min-height: calc(100vw * 260 / 1440);
}
.header-texto .padding-section {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-texto_component {
  width: 100%;
  display: flex;
  justify-content: center;
}
.header-texto_component h1 {
  max-width: 22ch;
  color: #14232e;
  font-size: var(--fs-10);
  line-height: 1.05;
  letter-spacing: 0.01em;
}

/*====================================================================
  INTRO  ·  "AMIGO GNL está detenido…" + ballena detective
====================================================================*/
.tr-intro {
  background-color: #83b9d7;
  background-image: url("../images/texto_web/bloque_1_fondo.webp");
  min-height: calc(100vw * 728 / 1440);
}
.tr-intro::after {
  background-image: url("../images/texto_web/tr_intro_ballena.webp");
  background-size: 100% 100%;
}
.tr-intro .padding-global {
  padding: 0;
}
.tr-intro .container-large {
  max-width: none;
}
.tr-intro_component {
  padding: calc(100vw * 200 / 1440) 0 0 calc(100vw * 147 / 1440);
  color: #000000;
}
.tr-titulo {
  font-family: "KievitOT";
  font-weight: bold;
  text-transform: none;
  font-size: clamp(1.9rem, 4.44vw, 5.2rem);
  line-height: 1.2;
}
.tr-subtitulo {
  margin-top: calc(100vw * 20 / 1440);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.22vw, 2.6rem);
  line-height: 1.2;
}

/*====================================================================
  PROCESOS  ·  3 tarjetas + ballena con documento
====================================================================*/
.tr-procesos {
  background-color: #3d8ac9;
  background-image: none;
  min-height: calc(100vw * 1184 / 1440);
  color: #ffffff;
}
.tr-procesos::before {
  background-image: url("../images/texto_web/tr_b2_fondo.webp");
  background-size: 154.6% 127.47%;
  background-position: 66.9% 0;
}
.tr-procesos::after {
  background-image: url("../images/texto_web/tr_b2_ballena.webp");
  background-size: 100% 74.58%;
  background-position: 0 73.1%;
}
.tr-procesos .padding-global {
  padding: 0;
}
.tr-procesos .container-large {
  max-width: none;
}
.tr-procesos_component {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 2rem;
  padding: calc(100vw * 112 / 1440) calc(100vw * 95 / 1440) 4rem
    calc(100vw * 150 / 1440);
}
.tr-card {
  font-size: clamp(1rem, 1.94vw, 2.2rem);
  line-height: 1.2;
}
.tr-card--1 {
  grid-column: 1;
  grid-row: 1 / span 2;
  max-width: calc(100vw * 600 / 1440);
}
.tr-card--2,
.tr-card--3 {
  grid-column: 2;
  text-align: right;
  justify-self: end;
  max-width: calc(100vw * 650 / 1440);
}
.tr-card--2 {
  grid-row: 1;
  margin-top: calc(100vw * 225 / 1440);
}
.tr-card--3 {
  grid-row: 2;
  margin-top: calc(100vw * 106 / 1440);
}
.tr-card__titulo {
  font-family: "KievitOT";
  font-weight: bold;
  text-transform: uppercase;
  color: #ffe49b;
  font-size: clamp(1.1rem, 2.22vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.tr-card__fecha {
  font-weight: bold;
  font-size: inherit;
  line-height: 1.2;
}
.tr-card__texto {
  font-size: inherit;
  line-height: 1.2;
}
.tr-card__link {
  display: inline-block;
  margin-top: 1.2em;
  font-family: "KievitOT";
  font-weight: bold;
  font-style: italic;
  color: #d8eae8;
  text-decoration: underline;
  font-size: inherit;
}
.tr-card__link:hover {
  color: #ffe49b;
}

/*====================================================================
  GOBIERNOS  ·  texto centrado sobre cañón submarino
====================================================================*/
.tr-gobiernos {
  background-color: #1e3a4e;
  background-image: url("../images/texto_web/bloque_3_fondo.webp");
  min-height: calc(100vw * 960 / 1440);
  color: #ffffff;
}
.tr-gobiernos_component {
  padding-top: calc(100vw * 155 / 1440);
  text-align: center;
  font-size: clamp(1rem, 1.94vw, 2.2rem);
  line-height: 1.2;
}
.tr-gob__intro {
  max-width: calc(100vw * 972 / 1440);
  margin: 0 auto;
  font-weight: 500;
  font-size: inherit;
  line-height: 1.2;
}
.tr-gob__intro a {
  color: #ffffff;
  font-family: "KievitOT";
}
.tr-gob__intro a:hover {
  text-decoration: underline;
}
.tr-gob__fecha-bloque {
  max-width: calc(100vw * 654 / 1440);
  margin: calc(100vw * 60 / 1440) auto 0;
}
.tr-gob__fecha,
.tr-gob__texto {
  font-size: inherit;
  line-height: 1.2;
}
.tr-gob__fecha {
  font-weight: bold;
}
.tr-gob__texto a {
  color: #ffffff;
  text-decoration: underline;
  font-family: "KievitOT";
}
.tr-gob__texto a:hover {
  color: #ffe49b;
}

/*====================================================================
  CIERRE  ·  sin financiamiento + flechas y resaltos rojos
====================================================================*/
.tr-cierre {
  background-color: #0c1718;
  background-image: url("../images/texto_web/bloque_4_fondo.webp");
  min-height: calc(100vw * 812 / 1440);
  color: #ffffff;
}
.tr-cierre__flecha,
.tr-cierre__resalto {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  max-width: none;
}
.tr-cierre__flecha {
  left: 1.8%;
  top: -36.7%;
  width: 100%;
  height: 100%;
}
.tr-cierre__resalto {
  left: 1.04%;
  top: -6.8%;
  width: 99.86%;
  height: 99.9%;
}
.tr-cierre .padding-global {
  padding: 0;
}
.tr-cierre_component {
  padding-top: calc(100vw * 117 / 1440);
  text-align: center;
}
.tr-cierre__frase {
  max-width: calc(100vw * 1155 / 1440);
  margin: 0 auto;
  font-family: "KievitOT";
  font-weight: bold;
  font-size: clamp(1.4rem, 3.33vw, 3.8rem);
  line-height: 1.2;
}
.tr-cierre__texto {
  max-width: calc(100vw * 857 / 1440);
  margin: calc(100vw * 116 / 1440) auto 0;
  font-weight: 500;
  font-size: clamp(1rem, 1.94vw, 2.2rem);
  line-height: 1.2;
}

/*====================================================================
  FOOTER (oculto por ahora)
====================================================================*/
.footer-texto {
  display: none;
  background-color: #0c1718;
  margin-top: -1px;
}

/*====================================================================
  MÓVIL / TABLET  (< 768px)  ·  todo se apila
====================================================================*/
@media (max-width: 767px) {
  /* en esta página el token de párrafo (fs-5) vale 18px en móvil */
  .texto-main {
    --fs-5: 18px;
  }
  .tr-intro,
  .tr-procesos,
  .tr-gobiernos,
  .tr-cierre {
    min-height: 0;
  }
  .tr-intro .padding-global,
  .tr-procesos .padding-global,
  .tr-cierre .padding-global {
    padding: 0 1.2rem;
  }
  .tr-gobiernos .padding-global {
    padding: 0 1.2rem;
  }

  .tr-intro_component {
    padding: 3rem 0 calc(82vw + 3rem);
  }
  .tr-titulo {
    font-size: var(--fs-9);
  }
  .tr-subtitulo {
    margin-top: 1rem;
    font-size: var(--fs-5);
  }
  .tr-intro::after {
    background-size: 208vw auto;
    background-position: right bottom;
    top: auto;
    height: 82vw;
  }

  .tr-procesos {
    background-image: url("../images/texto_web/tr_b2_fondo.webp");
  }
  .tr-procesos::before {
    display: none;
  }
  .tr-procesos::after {
    background-size: 179vw auto;
    background-position: left bottom;
    top: auto;
    height: 50vw;
  }
  .tr-procesos_component {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    padding: 3rem 0 calc(50vw + 3.5rem);
  }
  .tr-card--1,
  .tr-card--2,
  .tr-card--3 {
    max-width: none;
    margin-top: 0;
    text-align: left;
    justify-self: auto;
  }
  .tr-card {
    font-size: var(--fs-5);
  }
  .tr-card__titulo {
    font-size: var(--fs-7);
  }

  .tr-gobiernos_component {
    padding: 3rem 0 4rem;
    font-size: var(--fs-5);
  }
  .tr-gob__intro,
  .tr-gob__fecha-bloque {
    max-width: none;
  }
  .tr-gob__fecha-bloque {
    margin-top: 2rem;
  }

  .tr-cierre__flecha,
  .tr-cierre__resalto,
  .tr-br {
    display: none;
  }
  .tr-cierre_component {
    padding: 3rem 0 4rem;
  }
  .tr-cierre__frase {
    max-width: none;
    font-size: var(--fs-8);
  }
  .tr-cierre__texto {
    max-width: none;
    margin-top: 2rem;
    font-size: var(--fs-5);
  }
}