/*======================================================================
  TEXTO WEB  ·  "Las trampas del gas contra las ballenas"
  Página tipo línea de tiempo, muy gráfica, ilustración a sangre.
  Cada bloque = una <section class="section bloque-texto ..."> con:
    - <img class="bg-imagen-secion">  fondo ilustrado (cover)
    - contenido dentro de .padding-global > .container-large > .padding-section
    - ilustraciones decorativas .deco (position:absolute en desktop,
      pasan a flujo normal en móvil para que nunca tapen el texto)
======================================================================*/

/*--- Config de página -------------------------------------------------*/
/* Fondo de página blanco: al hacer overscroll hacia arriba no se ve negro. */
body {
  background-color: #ffffff !important;
}
header.navbar {
  background-color: #ffffff !important;
}

/* Ninguna ilustración a sangre debe generar scroll horizontal. */
.texto-main {
  overflow-x: hidden;
}

/* El cuerpo va en KievitOT como en el resto del sitio; los títulos
   conservan su familia (KievitOT por defecto, o "Costra" si llevan .costra). */
.texto-main p:not(.costra),
.texto-main li {
  font-family: "KievitOT" !important;
}

/*--- Base de bloque -------------------------------------------------- */
/*
  Fondos ilustrados — misma lógica que un frame de autolayout en Figma:
  el bloque tiene como ALTURA MÍNIMA la altura natural de su ilustración
  a ese ancho  ->  min-height: calc(100vw * alto / ancho).

  · DESKTOP: el contenido cabe dentro de esa altura, así que el bloque
    mide exactamente la proporción de la imagen y `background-size:100% 100%`
    la muestra COMPLETA y sin deformar (se ven las olas de arriba, las
    gaviotas del header, etc.).

  · MÓVIL: el contenido es más alto que esa proporción, el bloque crece
    (igual que un frame de autolayout) y usamos `cover` anclado arriba
    para no deformar la ilustración y conservar los gráficos superiores.
*/
.bloque-texto {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.bloque-1 {
  min-height: calc(100vw * 728 / 1440);
}
.bloque-2 {
  min-height: calc(100vw * 728 / 1440);
}
.bloque-3 {
  min-height: calc(100vw * 960 / 1440);
}
.bloque-4 {
  min-height: calc(100vw * 812 / 1440);
}

@media (min-width: 768px) {
  .bloque-texto {
    background-size: 100% 100%;
  }
}

/* el contenido siempre por encima del fondo */
.bloque-texto > .padding-global {
  position: relative;
  z-index: 3;
}

/*--- Tipografía compartida ---------------------------------------------*/
.texto-main .fecha {
  font-family: "KievitOT";
  font-weight: bold;
  font-size: var(--fs-7);
  line-height: 1.15;
  margin-bottom: 0.75rem;
  text-transform: none;
}

.texto-main .cuerpo {
  font-size: var(--fs-6);
  line-height: 1.5;
}

.texto-main .cuerpo b {
  font-weight: bold;
}

.texto-main .interjeccion {
  font-family: "KievitOT";
  font-weight: bold;
  font-size: var(--fs-8);
  line-height: 1.1;
  text-transform: none;
}

/*--- Marca / círculo rojo dibujado a mano (reutilizable) --------------*/
/* El trazo va en un <span class="marca-trazo"> aparte (no en ::before)
   para poder animarlo con AOS sin tocar el texto: la elipse recortada
   como fondo escalable funciona con cualquier cantidad de texto. */
.marca-circulo {
  position: relative;
  padding: 2.6rem 3.4rem;
  max-width: 34rem;
}
.marca-circulo .marca-trazo {
  position: absolute;
  inset: -0.4rem -0.6rem;
  background: url("../images/texto_web/bloque_3_resaltado_trim.png") no-repeat
    center;
  background-size: 100% 100%;
  z-index: 0;
  pointer-events: none;
}
.marca-circulo > *:not(.marca-trazo) {
  position: relative;
  z-index: 1;
}

/*--- Anchos de párrafo (para que el texto "se rompa" distinto por bloque) */
.texto-main .ancho-m {
  max-width: 58rem;
}
.texto-main .ancho-l {
  max-width: 70rem;
}
.texto-main .ancho-xl {
  max-width: 70rem;
}

/*--- Fila con resaltos rojos a los lados, alineados al centro del texto */
.fila-enfasis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  width: 100%;
}
.fila-enfasis > .cuerpo,
.fila-enfasis > .cierre-frase {
  flex: 0 1 auto;
}
/* Las mitades izq/der tienen distinta proporción; las medimos por ALTO
   para que las dos marcas se vean del mismo tamaño. */
.fila-enfasis .enfasis-mark {
  flex: 0 0 auto;
  width: auto;
  height: 5.5rem;
  align-self: center;
  pointer-events: none;
  user-select: none;
}

/*====================================================================
  HEADER
====================================================================*/
/* El header lleva las gaviotas en las esquinas: con `cover` se recortarían,
   así que aquí SIEMPRE llenamos el bloque con `100% 100%` (en móvil,
   donde el título necesita más alto, la franja de cielo se estira). */
.header-texto {
  background-color: #c4dfe0;
  background-image: url("../images/texto_web/header_fondo.png");
  background-size: 100% 100%;
  min-height: calc(100vw * 240 / 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;
}

/*====================================================================
  BLOQUE 1  ·  fondo claro, texto oscuro, ballena detective
====================================================================*/
.bloque-1 {
  background-color: #83b9d7;
  background-image: url("../images/texto_web/bloque_1_fondo.png");
}
.bloque-1_component {
  position: relative;
}
.bloque-1_component .texto-col {
  max-width: 40rem;
  color: #10202b;
}
/* En pantallas anchas la columna arranca más a la derecha para
   ocupar mejor el espacio entre el borde y la ballena. */
@media (min-width: 1200px) {
  .bloque-1_component .texto-col {
    margin-left: clamp(0rem, calc((100vw - 1180px) / 4), 10rem);
  }
}
.bloque-1_component .fecha {
  color: #0b1a24;
}
.bloque-1_component .tl-item + .tl-item {
  margin-top: 3rem;
}
/* El 2º bloque arranca más a la derecha y es más angosto, como en el diseño. */
.bloque-1_component .tl-sangria {
  margin-left: 3.5rem;
  max-width: 34rem;
}
/* Se ancla al borde real de la página (no al de la columna de contenido)
   para que sangre a la derecha como en el diseño. */
.deco-ballena-1 {
  position: absolute;
  right: calc(-3rem - max(0px, (100vw - 1376px) / 2));
  bottom: 0;
  width: 26rem;
  max-width: 42vw;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .bloque-1_component .texto-col {
    max-width: none;
  }
  .bloque-1_component .tl-sangria {
    margin-left: 0;
    max-width: none;
  }
  .deco-ballena-1 {
    position: relative;
    display: block;
    right: auto;
    bottom: auto;
    width: 15rem;
    max-width: 60%;
    /* pegada al borde real de la pantalla; el margen negativo cancela el
       padding lateral y lo que sobre lo recorta el overflow:hidden del bloque */
    margin: 2rem -2rem 0 auto;
  }
}

/*====================================================================
  BLOQUE 2  ·  azul, texto blanco, ballena con documento + círculo
====================================================================*/
.bloque-2 {
  background-color: #306090;
  background-image: url("../images/texto_web/bloque_2_fondo.png");
}
.bloque-2_component {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  color: #ffffff;
}
.bloque-2_component .fecha {
  color: #ffffff;
}
/* Fila 1 · dos columnas: fecha/relato a la izquierda, círculo a la derecha */
.bloque-2_component .fila-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6%;
}
.bloque-2_component .fila-top .item-izq {
  width: 44%;
}
.bloque-2_component .fila-top .callout-2 {
  width: 48%;
  max-width: none;
  margin-top: 2rem;
  text-align: center;
}
/* Círculo propio de esta sección (óvalo aplastado con trazo de entrada). */
.bloque-2_component .callout-2 {
  padding: 3rem 4.5rem 3rem 8rem;
}
.bloque-2_component .callout-2 .marca-trazo {
  /* El óvalo pesa hacia la derecha (por la colita de entrada), así que
     corremos la caja ~2rem a la izquierda para centrar el texto dentro. */
  inset: -1.6rem 0.6rem -2rem -3.4rem;
  background-image: url("../images/texto_web/bloque_2_resaltado_trim.png");
}
/* Fila 2 · Julio, alineada a la derecha */
.bloque-2_component .item-der {
  align-self: flex-end;
  max-width: 34rem;
  text-align: right;
}
.deco-ballena-2 {
  position: absolute;
  left: calc(-3rem - max(0px, (100vw - 1376px) / 2));
  bottom: -3rem;
  width: 30rem;
  max-width: 42vw;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .bloque-2_component {
    gap: 3rem;
  }
  .bloque-2_component .fila-top {
    flex-direction: column;
    gap: 3rem;
  }
  .bloque-2_component .fila-top .item-izq,
  .bloque-2_component .fila-top .callout-2 {
    width: auto;
    margin-top: 0;
  }
  /* En móvil el círculo va ANCHO (óvalo horizontal), no cuadrado:
     texto a todo el ancho -> pocas líneas largas. */
  .bloque-2_component .fila-top .callout-2 {
    align-self: stretch;
    max-width: none;
    padding: 2.2rem 1.2rem 2.6rem 5rem;
  }
  .bloque-2_component .callout-2 .cuerpo {
    font-size: var(--fs-4);
  }
  .bloque-2_component .callout-2 .marca-trazo {
    inset: -1rem -0.4rem -1.6rem -1.1rem;
  }
  .bloque-2_component .item-der {
    align-self: stretch;
    max-width: none;
    text-align: left;
  }
  /* Ballena del documento: pegada al borde izquierdo real de la pantalla. */
  .deco-ballena-2 {
    position: relative;
    display: block;
    left: auto;
    bottom: auto;
    width: 20rem;
    max-width: 80%;
    margin: 1.5rem auto 0 -2rem;
  }
}

/*====================================================================
  BLOQUE 3  ·  cañón submarino, todo centrado, texto blanco
====================================================================*/
.bloque-3 {
  background-color: #1e3a4e;
  background-image: url("../images/texto_web/bloque_3_fondo.png");
}
.bloque-3_component {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.75rem;
  color: #ffffff;
  max-width: 82rem;
  margin: 0 auto;
}
.bloque-3_component .fecha {
  color: #ffffff;
}
.bloque-3_component .preguntas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.callout-3 {
  max-width: 46rem;
}
.callout-3 .interjeccion {
  display: block;
  margin-bottom: 1rem;
}
.deco-lupa {
  position: absolute;
  right: -5.5rem;
  top: -2rem;
  width: 8.5rem;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .bloque-3_component {
    gap: 2.25rem;
  }
  .deco-lupa {
    display: none;
  }
}

/*====================================================================
  BLOQUE 4  ·  fondo casi negro, dos opciones, frase de cierre
====================================================================*/
.bloque-4 {
  background-color: #0c1718;
  background-image: url("../images/texto_web/bloque_4_fondo.png");
}
.bloque-4_component {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  color: #ffffff;
  max-width: 62rem;
  margin: 0 auto;
}
.bloque-4_component .destacado {
  max-width: 48rem;
}
.dos-opciones {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
}
.dos-opciones .cuerpo {
  flex: 1;
}
.dos-opciones .interjeccion {
  flex: 0 0 auto;
  text-align: center;
}
.cierre {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.cierre .cierre-flechas {
  width: 100%;
  max-width: 44rem;
  pointer-events: none;
  user-select: none;
}
.cierre .fila-enfasis {
  gap: 2.25rem;
}
/* Marcas de esta sección: altas y angostas -> las mido por alto. */
.cierre .fila-enfasis .enfasis-mark {
  width: auto;
  height: 7.5rem;
}
.cierre .cierre-frase {
  max-width: 44rem;
}
.cierre-frase {
  font-family: "KievitOT";
  font-weight: bold;
  font-size: var(--fs-7);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .dos-opciones {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
  .cierre .cierre-flechas {
    max-width: 30rem;
  }
  .cierre .fila-enfasis {
    gap: 1.25rem;
  }
  .cierre .fila-enfasis .enfasis-mark {
    height: 5.5rem;
  }
}

/*====================================================================
  FOOTER  ·  mismo oscuro que el bloque 4, se funde con él
  (oculto por ahora a pedido — se re-activa quitando el display:none)
====================================================================*/
.footer-texto {
  display: none;
  background-color: #0c1718;
  margin-top: -1px;
}
.footer-texto .padding-section {
  padding-top: 2rem !important;
}
.footer-texto .footer-component p,
.footer-texto .footer-component a {
  color: #ffffff;
}
.footer-texto .back-to-top img {
  height: 48px;
  width: auto;
}

/*====================================================================
  AJUSTES MÓVIL FINO (<= 600px)
====================================================================*/
@media (max-width: 600px) {
  .marca-circulo {
    padding: 2rem 2.4rem;
    max-width: 26rem;
  }
  .callout-3 {
    max-width: none;
  }
  .cierre .cierre-flechas {
    max-width: 22rem;
  }
  /* Los resaltos rojos SÍ se mantienen en móvil (como los graficos del
     index): pasan a los bordes en position:absolute para no comerle
     ancho al texto (el texto queda a todo lo ancho). */
  .fila-enfasis {
    position: relative;
    gap: 0;
  }
  /* el texto se angosta un poco para dejar los bordes libres a las marcas */
  .fila-enfasis > .cuerpo,
  .fila-enfasis > .cierre-frase {
    flex: 0 1 auto;
    max-width: 78%;
  }
  .fila-enfasis .enfasis-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: 3rem;
  }
  .fila-enfasis .enfasis-mark:first-child {
    left: -0.2rem;
  }
  .fila-enfasis .enfasis-mark:last-child {
    right: -0.2rem;
  }
  .cierre .fila-enfasis .enfasis-mark {
    height: 4.25rem;
  }
}