/* =========================================================
   BLOQUE 03 · ¿QUIEN TE VA A REVELAR EL CODIGO?

   Traducido desde legacy/imports/03-seccion/03-seccion.elementor.json.
   Igual que el 02: no hay widgets de Elementor, es un unico widget
   HTML con codigo escrito a mano (prefijo evtb4-, la numeracion
   interna del autor). El CSS de abajo es ese codigo, sin tocar valores.

   QUE SE QUITO
   · la regla `.elementor-widget-html:has(...) .elementor-widget-container`,
     que existia solo para anular el ancho del contenedor de Elementor.

   QUE SE AGREGO
   · `.evtb4-ground`, la traduccion del contenedor (ver abajo).
   · un bloque `prefers-reduced-motion` al final, igual al del hero.

   Quedan dos comentarios del autor que nombran a Elementor: son suyos
   y explican por que existe cada regla. Las reglas que describen valen
   igual fuera de Elementor, asi que se conservan tal cual.
========================================================= */


/* =========================================================
   FONDO DE LA SECCION  —  contenedor de Elementor

   El contenedor de 03 declara exactamente lo mismo que el de 02:

     background_background        classic  (sin color ni imagen desktop)
     background_image_mobile      BGs_seccion1.png   contain / center
     background_overlay_color     #000000
     background_overlay_opacity   0.5      (desktop)
     background_overlay_image_mobile  BGs_seccion1.png  cover / center
     background_overlay_opacity_mobile  1

   Se traduce igual, con el mismo PNG ya descargado para el 02.

   En la practica no se ve: `.evtb4-section` pinta su propio fondo
   opaco (los dos radial-gradient que terminan en #0b0b0b) y lo tapa
   por completo. El propio autor del widget dejo escrito arriba del
   marcado "Sacale el background-image al Container de Elementor". Se
   conserva igual porque es lo que declara el JSON y porque el color de
   base garantiza que nunca aparezca blanco debajo.

   #111111 es el unico valor que no sale del JSON, por el mismo motivo
   que en el 02: en WordPress debajo estaba el fondo del kit del tema,
   que aca no existe.
========================================================= */

.evtb4-ground {
	position: relative;
	isolation: isolate;

	width: 100%;

	background-color: #111111;
}

.evtb4-ground::before {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 0;
	pointer-events: none;

	background-color: #000000;
	opacity: 0.5;
}

@media (max-width: 767px) {

	.evtb4-ground {
		background-image: url("/assets/images/BGs_seccion1.png");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.evtb4-ground::before {
		background-image: url("/assets/images/BGs_seccion1.png");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;

		opacity: 1;
	}

}


/* =========================================================
   BLOQUE 04 — QUIÉN ES TAMARA
   Todo scopeado bajo .evtb4-block
========================================================= */

.evtb4-block,
.evtb4-block * {
  box-sizing: border-box;
}

.evtb4-block {

  /* ---------- PALETA ---------- */

  --b4-surface: #202020;
  --b4-hairline: rgba(110, 103, 93, 0.14);

  --b4-rose-light: #e8b4b8;
  --b4-rose: #de9493;
  --b4-rose-mid: #c97878;
  --b4-rose-dark: #ae6161;

  --b4-ink-1: #1c1b1b;
  --b4-ink-2: rgba(28, 27, 27, 0.72);

  --b4-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Gradiente rose de títulos */
  --b4-grad-text:
    linear-gradient(115deg, #f2c7ca 0%, #e8b4b8 22%, #de9493 52%, #c97878 100%);

  /* Gradiente rose para lo que va sobre las tarjetas claras */
  --b4-grad-icon:
    linear-gradient(115deg, #e8b4b8 0%, #de9493 30%, #c97878 66%, #ae6161 100%);

  width: 100%;
  overflow: hidden;

  color: #ffffff;

  font-family: "Poppins", "Plus Jakarta Sans", sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.evtb4-block h2,
.evtb4-block h3,
.evtb4-block p {
  margin-top: 0;
}

.evtb4-block ::selection {
  background: rgba(222, 148, 147, 0.38);
}


/* =========================================================
   SECCIÓN — negro con grilla y gradiente
========================================================= */

.evtb4-block .evtb4-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 92px 0 100px;

  background:
    radial-gradient(
      ellipse 60% 44% at 50% 30%,
      rgba(222, 148, 147, 0.22),
      rgba(174, 97, 97, 0.08) 46%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 110% 80% at 50% 42%,
      #1a1818 0%,
      #121111 56%,
      #0b0b0b 100%
    );
}

/* Trama de grilla sutil */
.evtb4-block .evtb4-section::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;
  opacity: 0.34;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

  background-size: 46px 46px;

  /* La trama se retira del centro: deja limpia la zona
     de la foto y sólo texturiza los bordes */
  -webkit-mask-image:
    radial-gradient(ellipse 54% 44% at 50% 34%, transparent 22%, #000 76%);
          mask-image:
    radial-gradient(ellipse 54% 44% at 50% 34%, transparent 22%, #000 76%);
}

/* Viñeta: oscurece los bordes para que el ojo caiga al centro */
.evtb4-block .evtb4-section::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    radial-gradient(ellipse 76% 60% at 50% 44%, transparent 40%, rgba(6, 6, 6, 0.55) 100%);
}

.evtb4-block .evtb4-shell {
  position: relative;
  z-index: 2;

  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
}


/* =========================================================
   TÍTULO
========================================================= */

.evtb4-block .evtb4-title {
  max-width: 18ch;
  margin: 0 0 34px;

  color: rgba(255, 255, 255, 0.96);

  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.062em;

  text-align: center;
  text-wrap: balance;
}

.evtb4-block .evtb4-title span {
  display: inline-block;

  font-weight: 650;

  color: transparent;
  -webkit-text-fill-color: transparent;

  background: var(--b4-grad-text);

  -webkit-background-clip: text;
  background-clip: text;
}


/* =========================================================
   FOTO — entre el título y la bio
========================================================= */

.evtb4-block .evtb4-figure {
  position: relative;

  width: min(430px, 100%);
  margin: 0;
}

.evtb4-block .evtb4-photo {
  position: relative;

  aspect-ratio: 4 / 4.6;

  border-radius: 26px;
  border: 1px solid rgba(174, 97, 97, 0.16);

  overflow: hidden;

  background-color: var(--b4-surface);
  background-image: var(--b4-foto);
  background-size: cover;
  background-position: center;

  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}


/* =========================================================
   TARJETA CLARA CON BADGE FLOTANTE
   Anatomía de las tarjetas TAM: glass claro + brillo
   diagonal + pastilla Liquid Tam sobre el borde superior.
========================================================= */

.evtb4-block .evtb4-card {
  position: relative;
  isolation: isolate;

  /* visible: el badge sobresale del borde */
  overflow: visible;

  border-radius: 24px;
  border: 1px solid rgba(174, 97, 97, 0.16);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(248, 242, 242, 0.84) 35%,
      rgba(240, 227, 228, 0.82) 100%
    ),
    radial-gradient(
      circle at top right,
      rgba(222, 148, 147, 0.12),
      transparent 42%
    );

  box-shadow:
    0 16px 42px rgba(30, 18, 18, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Brillo diagonal superior — firma de las tarjetas TAM */
.evtb4-block .evtb4-card::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.50) 0%,
      rgba(255, 255, 255, 0.00) 32%
    );
}

.evtb4-block .evtb4-card > *:not(.evtb4-card__badge) {
  position: relative;
  z-index: 2;
}

/* La pastilla, flotando sobre el borde superior */
.evtb4-block .evtb4-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;

  transform: translateX(-50%);
  z-index: 3;
}

/* --- Estilo Liquid Tam --- */
.evtb4-block .evtb4-tam {
  display: inline-flex;
  align-items: center;

  min-width: max-content;

  padding: 7px 12px;
  border-radius: 999px;

  background: linear-gradient(115deg, #f7d8dc 0%, #de9493 45%, #ae6161 100%);

  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.42);

  box-shadow: 0 10px 22px rgba(126, 58, 58, 0.18);

  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ---------- BIO ---------- */

.evtb4-block .evtb4-bio {
  width: min(620px, 100%);

  display: flex;
  flex-direction: column;
  gap: 14px;

  margin: 34px 0 0;
  padding: 36px 34px 30px;

  text-align: center;
}

.evtb4-block .evtb4-bio__mark {
  display: block;

  margin-bottom: -22px;

  font-size: 56px;
  font-weight: 600;
  line-height: 1;

  color: transparent;
  -webkit-text-fill-color: transparent;

  background: var(--b4-grad-icon);

  -webkit-background-clip: text;
  background-clip: text;

  user-select: none;
}

.evtb4-block .evtb4-bio p {
  margin: 0;

  color: #151515;

  font-size: clamp(15.5px, 1.25vw, 17px);
  font-weight: 350;
  line-height: 1.6;
  letter-spacing: -0.026em;

  text-wrap: pretty;
}

/* El nombre, con el gradiente de títulos */
.evtb4-block .evtb4-bio__name {
  display: block;

  margin-bottom: 3px;

  font-size: 1.42em;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.04em;

  color: transparent;
  -webkit-text-fill-color: transparent;

  background: var(--b4-grad-text);

  -webkit-background-clip: text;
  background-clip: text;

  /* Sobre el glass claro, el gradiente de títulos es muy
     luminoso: esta sombra le devuelve el filo */
  text-shadow: 0 1px 10px rgba(126, 58, 58, 0.28);
}


/* =========================================================
   SLIDER DE DATOS — tarjetas estilo edsb25
========================================================= */

.evtb4-block .evtb4-stats {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;

  margin-top: 44px;
}

.evtb4-block .evtb4-stat {
  position: relative;
  isolation: isolate;

  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 34px 28px 30px;

  border-radius: 16px;
  border: none;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.90) 0%,
      rgba(248, 242, 242, 0.86) 35%,
      rgba(240, 227, 228, 0.84) 100%
    ),
    radial-gradient(
      circle at top right,
      rgba(222, 148, 147, 0.12),
      transparent 42%
    );

  /* Sombra en 6 capas + iluminación superior interna */
  box-shadow:
    0px 0.706px 0.706px -0.667px rgba(0, 0, 0, 0.08),
    0px 1.807px 1.807px -1.333px rgba(0, 0, 0, 0.08),
    0px 3.622px 3.622px -2px rgba(0, 0, 0, 0.07),
    0px 6.866px 6.866px -2.667px rgba(0, 0, 0, 0.07),
    0px 13.647px 13.647px -3.333px rgba(0, 0, 0, 0.05),
    0px 30px 30px -4px rgba(0, 0, 0, 0.02),
    inset 0px 3px 1px 0px rgb(255, 255, 255);

  transition:
    transform 0.4s var(--b4-ease-out),
    box-shadow 0.4s var(--b4-ease-out);
}

/* Brillo diagonal superior */
.evtb4-block .evtb4-stat::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.00) 32%
    );
}

.evtb4-block .evtb4-stat > * {
  position: relative;
  z-index: 2;
}

/* ---------- Número ---------- */

.evtb4-block .evtb4-stat__num {
  margin: 0 0 8px;

  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.045em;

  color: transparent;
  -webkit-text-fill-color: transparent;

  background: var(--b4-grad-icon);

  -webkit-background-clip: text;
  background-clip: text;
}

/* "+200": el número más grande que el símbolo */
.evtb4-block .evtb4-stat__num--plus {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;

  gap: 2px;
}

.evtb4-block .evtb4-stat__sym {
  font-size: 0.72em;
  line-height: 1;
  margin-top: 0.12em;
}

.evtb4-block .evtb4-stat__big {
  font-size: 1.18em;
  line-height: 0.9;
}

.evtb4-block .evtb4-stat p {
  max-width: 26ch;
  margin: 0 auto;

  color: var(--b4-ink-2);

  font-size: 15px;
  font-weight: 350;
  line-height: 1.52;
  letter-spacing: -0.022em;

  text-wrap: pretty;
}


/* ---------- Puntos: solo en mobile ---------- */

.evtb4-block .evtb4-dots {
  display: none;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

  .evtb4-block .evtb4-stat:hover {
    transform: translateY(-5px);
  }

}


/* =========================================================
   REVEAL WAAPI
========================================================= */

.js:not(.reveal-disabled) .evtb4-block [data-evtb4-reveal]:not(.evtb4-waapi-visible) {
  opacity: 0;
  visibility: hidden;

  transform: translate3d(0, 40px, 0) scale(0.985);
  filter: blur(6px);

  will-change: opacity, transform, filter;
}

.evtb4-block.evtb4-waapi-armed
[data-evtb4-reveal].evtb4-waapi-visible {
  opacity: 1;
  visibility: visible;

  transform: none;
  filter: none;

  will-change: auto;
}


/* =========================================================
   DESKTOP — foto y bio en la misma línea
   El corte va en 1025px para coincidir con el breakpoint
   de tablet de Elementor (≤1024px).
========================================================= */

@media (min-width: 1025px) {

  .evtb4-block .evtb4-shell {
    display: grid;

    grid-template-columns:
      minmax(0, 0.86fr)
      minmax(0, 1.14fr);

    align-items: center;
    column-gap: 46px;
  }

  .evtb4-block .evtb4-title {
    grid-column: 1 / -1;
    max-width: none;
    margin-bottom: 44px;
  }

  .evtb4-block .evtb4-figure {
    grid-column: 1;
    width: 100%;
  }

  .evtb4-block .evtb4-bio {
    grid-column: 2;
    width: 100%;
    margin: 0;
  }

  .evtb4-block .evtb4-stats {
    grid-column: 1 / -1;
    margin-top: 52px;
  }

  .evtb4-block .evtb4-dots {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  .evtb4-block .evtb4-section {
    padding: 78px 0 86px;
  }

  .evtb4-block .evtb4-title {
    max-width: none;
    font-size: clamp(28px, 4vw, 38px);
    margin-bottom: 28px;
  }

  .evtb4-block .evtb4-figure {
    width: min(360px, 100%);
  }

  .evtb4-block .evtb4-photo {
    aspect-ratio: 4 / 5;
  }

  .evtb4-block .evtb4-bio {
    margin-top: 30px;
    padding: 32px 26px 26px;
  }

  .evtb4-block .evtb4-stats {
    gap: 14px;
    margin-top: 36px;
  }

  .evtb4-block .evtb4-stat {
    padding: 30px 22px 26px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .evtb4-block .evtb4-section {
    padding: 54px 0 60px;

    background:
      radial-gradient(
        ellipse 92% 26% at 50% 34%,
        rgba(222, 148, 147, 0.24),
        rgba(174, 97, 97, 0.09) 48%,
        transparent 76%
      ),
      radial-gradient(
        ellipse 140% 80% at 50% 36%,
        #1a1818 0%,
        #121111 56%,
        #0b0b0b 100%
      );
  }

  .evtb4-block .evtb4-shell {
    /* 32 = 16px por lado, el respiro lateral comun */
    width: min(1200px, calc(100% - 32px));
  }

  .evtb4-block .evtb4-title {
    font-size: 25px;
    margin-bottom: 22px;
  }

  /* Dimensiones propias para que Elementor no colapse la foto */
  .evtb4-block .evtb4-figure {
    display: block;
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }

  .evtb4-block .evtb4-photo {
    display: block;
    width: 100%;
    min-height: 340px;
    aspect-ratio: 4 / 4.2;
    border-radius: 22px;
  }

  /* La tarjeta del bio medía 508px de alto, mas que la propia foto, y
     era la principal razón de que la seccion se sintiera larga. Se le
     baja el padding y se la acerca a la foto. */
  .evtb4-block .evtb4-bio {
    width: 100%;
    margin-top: 28px;
    padding: 30px 20px 24px;
    border-radius: 22px;
  }

  .evtb4-block .evtb4-bio__mark {
    font-size: 46px;
    margin-bottom: -18px;
  }

  .evtb4-block .evtb4-bio p {
    font-size: 16px;
    line-height: 1.55;
  }


  /* ---------- SLIDER: scroll horizontal con anclaje ----------
     Gesto táctil nativo, sin librerías. */

  .evtb4-block .evtb4-stats {
    display: grid;

    /* Clave: anular la plantilla de 3 columnas del desktop.
       Si queda, las tarjetas se reparten el ancho de pantalla
       y nunca se produce el desborde que habilita el scroll. */
    grid-template-columns: none;

    grid-auto-flow: column;
    grid-auto-columns: 86%;

    gap: 12px;

    margin: 26px -14px 0;
    padding: 4px 14px 10px;

    overflow-x: auto;
    overscroll-behavior-x: contain;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;
    scroll-behavior: smooth;

    scrollbar-width: none;
  }

  .evtb4-block .evtb4-stats::-webkit-scrollbar {
    display: none;
  }

  .evtb4-block .evtb4-stat {
    scroll-snap-align: start;

    padding: 24px 20px 22px;
  }

  .evtb4-block .evtb4-stat__num {
    font-size: 34px;
  }

  .evtb4-block .evtb4-stat p {
    font-size: 15px;
    max-width: 100%;
  }


  /* ---------- PUNTOS ---------- */

  .evtb4-block .evtb4-dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 4px;
  }

  .evtb4-block .evtb4-dots span {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: rgba(232, 180, 184, 0.26);

    transition:
      width 0.3s var(--b4-ease-out),
      background 0.3s ease;
  }

  .evtb4-block .evtb4-dots span.is-on {
    width: 22px;

    background: linear-gradient(115deg, #f2c7ca, #de9493 55%, #ae6161);
  }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 450px) {

  .evtb4-block .evtb4-stat {
    padding: 22px 18px 20px;
  }

  .evtb4-block .evtb4-stat__num {
    font-size: 31px;
  }

  .evtb4-block .evtb4-stat p {
    font-size: 14.5px;
    line-height: 1.45;
  }

}


/* =========================================================
   MOVIMIENTO REDUCIDO

   No venia en el widget. Se agrega por el mismo criterio que en el
   hero y en el 02: quien pide menos movimiento ve la seccion entera,
   sin entradas.
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.evtb4-block .evtb4-stat,
	.evtb4-block .evtb4-dots span {
		transition: none;
	}

	.evtb4-block .evtb4-stats {
		scroll-behavior: auto;
	}

	.js:not(.reveal-disabled) .evtb4-block [data-evtb4-reveal]:not(.evtb4-waapi-visible) {
		opacity: 1;
		visibility: visible;

		transform: none;
		filter: none;
	}

}


/* =========================================================
   TEMP - reveals disabled during visual/desktop development

   Mientras `reveal-disabled` este en <html>, los elementos que
   participan de una entrada quedan en su estado final desde el
   primer frame. La arquitectura WAAPI + IntersectionObserver sigue
   entera: solo deja de dispararse.

   Para restaurar: quitar "reveal-disabled" del script del <head>.
========================================================= */

.reveal-disabled [data-evtb4-reveal] {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	filter: none !important;
	will-change: auto !important;
}


/* =========================================================
   DESKTOP · COMPOSICION EDITORIAL

   Primera version de esta seccion la resolvi como un grid de dos
   columnas, igual que el 02: [ texto ] [ Tamara ]. Repetido cuatro
   veces seguidos, ese patron mata el ritmo de la pagina.

   Ahora la seccion arranca en VERTICAL y solo despues se abre:

       ¿QUIEN TE VA A REVELAR EL CODIGO?      <- zona propia, ancho completo

       BIO / HISTORIA              TAMARA     <- recien aca convive lateral
       BIO / HISTORIA

       [ +200 ] [ MILLONES ] [ 2020 ]         <- cierran la columna de texto

   El titulo manda solo, sin competir con la foto. Tamara acompaña al
   bloque editorial y lo desborda en alto, no lo enfrenta. Las stats
   siguen dentro de la columna de texto, cerrando su narrativa.
========================================================= */

@media (min-width: 845px) {

	.evtb4-block .evtb4-shell {
		display: grid;
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		grid-template-rows: auto auto auto;
		column-gap: 64px;
		row-gap: 0;
		align-items: start;
	}

	/* Zona superior propia: el titulo ocupa el ancho completo. */
	.evtb4-block .evtb4-title {
		grid-column: 1 / -1;
		grid-row: 1;

		max-width: 22ch;
		margin: 0 0 44px;
		text-align: left;
	}

	.evtb4-block .evtb4-bio {
		grid-column: 1;
		grid-row: 2;

		width: 100%;
		margin: 0;
	}

	.evtb4-block .evtb4-stats {
		grid-column: 1;
		grid-row: 3;

		margin: 24px 0 0;
		gap: 14px;
	}

	/* Tamara acompaña el bloque editorial y lo desborda en alto: un
	   desplazamiento vertical sutil, no una columna enfrentada. */
	.evtb4-block .evtb4-figure {
		grid-column: 2;
		grid-row: 2 / -1;

		width: 100%;
		align-self: stretch;
		margin-top: -18px;
	}

	.evtb4-block .evtb4-photo {
		height: 100%;
		min-height: 460px;
		aspect-ratio: auto;
	}

	.evtb4-block .evtb4-stat {
		padding: 26px 18px 22px;
	}

	.evtb4-block .evtb4-stat__num {
		font-size: clamp(26px, 2.2vw, 34px);
	}

	.evtb4-block .evtb4-stat p {
		font-size: 14px;
		max-width: 22ch;
	}

	.evtb4-block .evtb4-dots {
		display: none;
	}

}

@media (min-width: 845px) and (max-width: 1099px) {

	.evtb4-block .evtb4-shell {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
		column-gap: 40px;
	}

	.evtb4-block .evtb4-title {
		margin-bottom: 34px;
	}

	.evtb4-block .evtb4-stats {
		gap: 10px;
	}

	.evtb4-block .evtb4-stat {
		padding: 22px 14px 18px;
	}

	.evtb4-block .evtb4-stat p {
		font-size: 13px;
	}

}