/* =========================================================
   BLOQUE 02 · LOS 5 SECRETOS  +  TE VA A SERVIR

   Traducido desde legacy/imports/02-seccion/02-seccion.elementor.json.
   El JSON no traia widgets de Elementor: son dos widgets HTML con
   codigo escrito a mano (prefijos evtb2- y evtb3-). El CSS de abajo
   es ese codigo, sin tocar valores.

   QUE SE QUITO
   · la regla `.elementor-widget-html:has(...) .elementor-widget-container`
     de cada widget: existia solo para anular el ancho que Elementor
     le pone a su contenedor.

   QUE SE AGREGO
   · `.evtb2-ground`, la traduccion del contenedor de Elementor que
     envolvia a los dos widgets y llevaba el fondo (ver abajo).
   · un bloque `prefers-reduced-motion` al final, igual al del hero.
========================================================= */


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

   El contenedor declaraba:

     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

   El PNG es el archivo original del sitio, sin tocar:
   public/assets/images/BGs_seccion1.png

   Las claves *_mobile de Elementor entran en max-width: 767px, que es
   su breakpoint mobile por defecto. No hay variante _tablet, asi que
   de 768px para arriba rige lo que declaraba desktop: sin imagen, solo
   el overlay negro al 50%.

   UNICO VALOR QUE NO VIENE DEL JSON: el color de base #111111.
   En WordPress el contenedor no declaraba fondo propio en desktop
   porque debajo estaba el fondo oscuro del kit del tema. Acá ese fondo
   no existe -- ninguna hoja le da color al body -- asi que sin esto el
   overlay negro al 50% apoyaria sobre blanco. #111111 es el negro con
   el que termina el hero, y hace que la transicion Hero -> 02 no
   muestre costura.
========================================================= */

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

	width: 100%;

	background-color: #111111;
}

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

	position: absolute;
	inset: 0;

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

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

@media (max-width: 767px) {

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

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

		opacity: 1;
	}

}


/* =========================================================
   BLOQUE 02 — LOS 5 SECRETOS
   Todo scopeado bajo .evtb2-block
========================================================= */

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

.evtb2-block {

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

  /* Fondo transparente: lo pone el contenedor de Elementor.
     Tinta preparada para fondo OSCURO.
     Si el contenedor va claro, cambiar por:
       --b2-ink: #121212;  --b2-ink-soft: #4a4344;
     y en el h2 span usar var(--b2-grad-text). */
  --b2-ink: #ffffff;
  --b2-ink-soft: rgba(255, 255, 255, 0.66);

  --b2-surface: #1c1a1a;
  --b2-surface-2: #232020;
  --b2-hairline: rgba(174, 97, 97, 0.20);

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

  /* Gradiente rose SOBRE CLARO (encabezado) */
  --b2-grad-text:
    linear-gradient(125deg, #ae6161 0%, #8e4848 44%, #6b2f2f 100%);

  /* Gradiente rose SOBRE OSCURO (tarjetas) */
  --b2-grad-icon:
    linear-gradient(115deg, #f7d8dc 0%, #e8b4b8 26%, #de9493 60%, #c97878 100%);

  width: 100%;
  overflow: hidden;

  color: var(--b2-ink);

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

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

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

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


/* ---------- SECCIÓN ---------- */

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

  padding: 96px 0 104px;

  /* Transparente: el fondo lo pone el contenedor de Elementor */
  background: transparent;
}

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

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


/* ---------- ENCABEZADO ---------- */

.evtb2-block .evtb2-heading {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 20px;

  width: min(780px, 100%);
  margin: 0 auto 58px;

  text-align: center;
}

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

  width: fit-content;
  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;
}

.evtb2-block .evtb2-heading h2 {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;

  color: var(--b2-ink);

  font-size: clamp(30px, 3.5vw, 46px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.05em;

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

/* "Clase gratuita" — en línea, no en bloque:
   el copy del ADJUNTO1 la necesita dentro de la misma frase. */
.evtb2-block .evtb2-heading h2 span {
  display: inline;

  font-family: 'Pinyon', 'Pinyon Script', 'Poppins', cursive;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: capitalize;

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

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

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


/* =========================================================
   LISTA DE SECRETOS — alternados izquierda / derecha
========================================================= */

.evtb2-block .evtb2-list {
  display: flex;
  flex-direction: column;

  gap: 20px;
}


/* ---------- TARJETA (glass TAM) ---------- */

.evtb2-block .evtb2-secret {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-width: 0;
  width: 100%;

  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon description";

  align-items: start;
  column-gap: 20px;
  row-gap: 9px;

  padding: 30px 28px;

  border-radius: 24px;
  border: 1px solid var(--b2-hairline);

  background:
    radial-gradient(circle at top right, rgba(222, 148, 147, 0.14), transparent 44%),
    linear-gradient(145deg, var(--b2-surface-2) 0%, var(--b2-surface) 62%);

  box-shadow:
    0 24px 52px rgba(12, 8, 8, 0.22),
    0 8px 18px rgba(12, 8, 8, 0.13),
    0 6px 6px rgba(8, 5, 5, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  transition:
    transform 0.35s var(--b2-ease-out),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Brillo diagonal superior */
.evtb2-block .evtb2-secret::before {
  content: "";
  position: absolute;
  inset: 0;

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

  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 34%);
}

.evtb2-block .evtb2-secret > * {
  position: relative;
  z-index: 2;
}


/* ---------- ÍCONOS (máscara CSS, sin SVG inline) ---------- */

.evtb2-block .evtb2-secret__icon {
  grid-area: icon;

  display: block;
  width: 54px;
  height: 54px;

  margin: 2px 0 0;
  align-self: center;

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

  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Lupa — identificar */
.evtb2-block .evtb2-secret__icon--lupa {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710.5%27%20cy%3D%2710.5%27%20r%3D%276.5%27%2F%3E%3Cpath%20d%3D%27M15.3%2015.3%2020.5%2020.5%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710.5%27%20cy%3D%2710.5%27%20r%3D%276.5%27%2F%3E%3Cpath%20d%3D%27M15.3%2015.3%2020.5%2020.5%27%2F%3E%3C%2Fsvg%3E");
}

/* Varita — crear con IA */
.evtb2-block .evtb2-secret__icon--varita {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%2019.5%2015%209%27%2F%3E%3Cpath%20d%3D%27m17.5%203%20.7%201.8%201.8.7-1.8.7-.7%201.8-.7-1.8-1.8-.7%201.8-.7z%27%2F%3E%3Cpath%20d%3D%27m7%204%20.5%201.3L8.8%205.8%207.5%206.3%207%207.6%206.5%206.3%205.2%205.8%206.5%205.3z%27%2F%3E%3Cpath%20d%3D%27m19%2014%20.5%201.3%201.3.5-1.3.5-.5%201.3-.5-1.3-1.3-.5%201.3-.5z%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%2019.5%2015%209%27%2F%3E%3Cpath%20d%3D%27m17.5%203%20.7%201.8%201.8.7-1.8.7-.7%201.8-.7-1.8-1.8-.7%201.8-.7z%27%2F%3E%3Cpath%20d%3D%27m7%204%20.5%201.3L8.8%205.8%207.5%206.3%207%207.6%206.5%206.3%205.2%205.8%206.5%205.3z%27%2F%3E%3Cpath%20d%3D%27m19%2014%20.5%201.3%201.3.5-1.3.5-.5%201.3-.5-1.3-1.3-.5%201.3-.5z%27%2F%3E%3C%2Fsvg%3E");
}

/* Bolsa — tienda Shopify */
.evtb2-block .evtb2-secret__icon--tienda {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%208h15l-1.1%2011.2a2%202%200%200%201-2%201.8H7.6a2%202%200%200%201-2-1.8z%27%2F%3E%3Cpath%20d%3D%27M8.5%208V6.2a3.5%203.5%200%200%201%207%200V8%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%208h15l-1.1%2011.2a2%202%200%200%201-2%201.8H7.6a2%202%200%200%201-2-1.8z%27%2F%3E%3Cpath%20d%3D%27M8.5%208V6.2a3.5%203.5%200%200%201%207%200V8%27%2F%3E%3C%2Fsvg%3E");
}

/* Página — landing de ventas */
.evtb2-block .evtb2-secret__icon--pagina {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%274%27%20width%3D%2717%27%20height%3D%2716%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M3.5%208.5h17%27%2F%3E%3Cpath%20d%3D%27M7%2012h7%27%2F%3E%3Cpath%20d%3D%27M7%2015.5h4.5%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%274%27%20width%3D%2717%27%20height%3D%2716%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M3.5%208.5h17%27%2F%3E%3Cpath%20d%3D%27M7%2012h7%27%2F%3E%3Cpath%20d%3D%27M7%2015.5h4.5%27%2F%3E%3C%2Fsvg%3E");
}

/* Megáfono — publicidad */
.evtb2-block .evtb2-secret__icon--megafono {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2010v4a1.5%201.5%200%200%200%201.5%201.5H8l7%204.5V4L8%208.5H5.5A1.5%201.5%200%200%200%204%2010z%27%2F%3E%3Cpath%20d%3D%27M18.5%209.5a4%204%200%200%201%200%205%27%2F%3E%3Cpath%20d%3D%27M8%2015.5V20%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2010v4a1.5%201.5%200%200%200%201.5%201.5H8l7%204.5V4L8%208.5H5.5A1.5%201.5%200%200%200%204%2010z%27%2F%3E%3Cpath%20d%3D%27M18.5%209.5a4%204%200%200%201%200%205%27%2F%3E%3Cpath%20d%3D%27M8%2015.5V20%27%2F%3E%3C%2Fsvg%3E");
}


/* ---------- TEXTOS DE LA TARJETA ---------- */

.evtb2-block .evtb2-secret h3 {
  grid-area: title;

  width: 100%;
  margin: 0;
  align-self: end;

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

  font-size: clamp(19.5px, 1.7vw, 23px);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.05em;

  text-wrap: balance;
}

/* El verbo, en gradiente */
.evtb2-block .evtb2-secret h3 span {
  display: inline-block;

  font-weight: 650;

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

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

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

.evtb2-block .evtb2-secret p {
  grid-area: description;

  width: 100%;
  margin: 0;
  align-self: start;

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

  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.026em;

  text-wrap: pretty;
}


/* ---------- CIERRE ---------- */

.evtb2-block .evtb2-cierre {
  width: min(620px, 100%);
  margin: 44px auto 0;

  color: var(--b2-ink-soft);

  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.03em;

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


/* Sin soporte de background-clip el texto quedaría invisible */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {

  .evtb2-block .evtb2-heading h2 span {
    color: #e8b4b8;
    -webkit-text-fill-color: #e8b4b8;
    background: none;
  }

  .evtb2-block .evtb2-secret h3 span {
    color: #e8b4b8;
    -webkit-text-fill-color: #e8b4b8;
    background: none;
  }

}


/* ---------- HOVER ---------- */

@media (hover: hover) {

  .evtb2-block .evtb2-secret:hover {
    transform: translateY(-4px);

    border-color: rgba(222, 148, 147, 0.34);

    box-shadow:
      0 32px 60px rgba(12, 8, 8, 0.24),
      0 12px 22px rgba(12, 8, 8, 0.14),
      0 8px 8px rgba(8, 5, 5, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }

}


/* =========================================================
   ENTRADA WAAPI
========================================================= */

.js:not(.reveal-disabled) .evtb2-block [data-evtb2-waapi]:not(.evtb2-waapi-done) {
  opacity: 0;
  /* Era el unico bloque sin visibility: con solo opacity, si el primer
     fotograma de la animacion no alcanza a aplicarse el elemento puede
     pintarse una vez con su estilo base. Igual que 02b, 03 y 05. */
  visibility: hidden;
  transform: translate3d(0, 48px, 0) scale(0.97);
  filter: blur(5px);

  will-change: opacity, transform, filter;
}

.evtb2-block.evtb2-waapi-ready
[data-evtb2-waapi].evtb2-waapi-done {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;

  will-change: auto;
}


/* =========================================================
   DESKTOP — alternado izquierda / derecha
========================================================= */

@media (min-width: 1101px) {

  .evtb2-block .evtb2-list {
    gap: 22px;
  }

  .evtb2-block .evtb2-secret {
    width: 62%;
  }

  /* 1, 3, 5 → izquierda */
  .evtb2-block .evtb2-secret:nth-child(odd) {
    margin-right: auto;
  }

  /* 2, 4 → derecha */
  .evtb2-block .evtb2-secret:nth-child(even) {
    margin-left: auto;
  }

  /* La entrada acompaña el lado del que aparece cada tarjeta */
  .evtb2-block.evtb2-waapi-ready
  .evtb2-secret:nth-child(odd)[data-evtb2-waapi] {
    transform: translate3d(-38px, 48px, 0) scale(0.97);
  }

  .evtb2-block.evtb2-waapi-ready
  .evtb2-secret:nth-child(even)[data-evtb2-waapi] {
    transform: translate3d(38px, 48px, 0) scale(0.97);
  }

  .evtb2-block.evtb2-waapi-ready
  .evtb2-secret[data-evtb2-waapi].evtb2-waapi-done {
    transform: none;
  }

}


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

@media (max-width: 1100px) {

  .evtb2-block .evtb2-section {
    padding: 80px 0 86px;
  }

  .evtb2-block .evtb2-heading {
    width: min(720px, 100%);
    margin-bottom: 46px;
  }

  .evtb2-block .evtb2-list {
    gap: 18px;
  }

  .evtb2-block .evtb2-secret {
    width: 88%;

    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 8px;

    padding: 28px 24px;
  }

  .evtb2-block .evtb2-secret:nth-child(odd) {
    margin-right: auto;
  }

  .evtb2-block .evtb2-secret:nth-child(even) {
    margin-left: auto;
  }

  .evtb2-block .evtb2-secret__icon {
    width: 50px;
    height: 50px;
  }

  .evtb2-block .evtb2-cierre {
    margin-top: 38px;
  }

}


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

@media (max-width: 767px) {

  .evtb2-block .evtb2-section {
    /* 58 abajo en vez de 70: era el salto mas abierto de la pagina */
    /* El cierre quedaba flotando en un vacio antes de la tarjeta
       rosa: 58 abajo mas 62 arriba del 02b eran 120px de nada. */
    padding: 62px 0 48px;
  }

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

  .evtb2-block .evtb2-heading {
    width: 100%;
    gap: 16px;
    margin-bottom: 36px;
    padding-inline: 2px;
  }

  .evtb2-block .evtb2-heading h2 {
    max-width: 100%;
    font-size: 26px;
    line-height: 1.2;
  }

  .evtb2-block .evtb2-heading h2 span {
    font-size: 1.45em;
  }

  .evtb2-block .evtb2-list {
    gap: 16px;
  }

  /* En mobile no hay alternado: todo a ancho completo */
  .evtb2-block .evtb2-secret {
    width: 100%;
    margin-inline: 0;

    grid-template-columns: 50px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;

    padding: 24px 20px;
    border-radius: 20px;
  }

  .evtb2-block .evtb2-secret__icon {
    width: 46px;
    height: 46px;
    margin: 1px 0 0;
  }

  .evtb2-block .evtb2-secret h3 {
    font-size: 21px;
    line-height: 1.12;
  }

  .evtb2-block .evtb2-secret p {
    font-size: 15px;
    line-height: 1.25;
  }

  .evtb2-block .evtb2-cierre {
    width: min(390px, 100%);
    margin-top: 28px;

    font-size: 18px;
    line-height: 1.35;
  }

}


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

@media (max-width: 390px) {

  .evtb2-block .evtb2-secret {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;

    padding: 22px 17px;
  }

  .evtb2-block .evtb2-secret__icon {
    width: 42px;
    height: 42px;
  }

  .evtb2-block .evtb2-secret h3 {
    font-size: 19px;
  }

  .evtb2-block .evtb2-secret p {
    font-size: 14.5px;
  }

}
/* =========================================================
   BLOQUE 03 — REGISTRATE
   Todo scopeado bajo .evtb3-block
========================================================= */

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

.evtb3-block {

  --b3-vibrante-deep: #7f1a3a;
  --b3-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  width: 100%;
  overflow: hidden;

  color: #ffffff;

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

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

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

.evtb3-block ::selection {
  background: rgba(255, 255, 255, 0.30);
}


/* =========================================================
   SECCIÓN — transparente
========================================================= */

.evtb3-block .evtb3-section {
  position: relative;
  isolation: isolate;

  padding: 96px 0 104px;

  background: transparent;
}

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

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


/* =========================================================
   CONTENEDOR PRINCIPAL — gradiente rosa vibrante
========================================================= */

.evtb3-block .evtb3-card {
  position: relative;
  isolation: isolate;
  overflow: visible;

  width: min(760px, 100%);
  margin-inline: auto;

  padding: 62px 50px 54px;

  border-radius: 30px;

  background:
    linear-gradient(
      140deg,
      #c93568 0%,
      #b82d5c 35%,
      #a01245 65%,
      #7f1a3a 100%
    );

  box-shadow:
    0 26px 60px rgba(20, 4, 12, 0.34),
    0 8px 20px rgba(20, 4, 12, 0.18);
}

/* Viñeta: oscurece apenas los bordes para que el contenido
   central respire y el blanco se recorte mejor */
.evtb3-block .evtb3-card::before {
  content: "";

  position: absolute;
  inset: 0;

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

  background:
    radial-gradient(
      ellipse 80% 65% at 50% 42%,
      transparent 40%,
      rgba(20, 4, 12, 0.22) 100%
    );
}

/* Resplandor que respira detrás del contenido */
.evtb3-block .evtb3-glow {
  position: absolute;
  inset: 0;

  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.evtb3-block .evtb3-glow::before {
  content: "";

  position: absolute;
  inset: -20%;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.16),
      transparent 55%
    );

  animation: evtb3Brillo 4.4s ease-in-out infinite;
}

@keyframes evtb3Brillo {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

.evtb3-block .evtb3-content {
  position: relative;
  z-index: 3;

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

  gap: 30px;

  text-align: center;
}


/* =========================================================
   ETIQUETA FLOTANTE
   Sólida (no glass) porque pisa el borde del contenedor y
   media pastilla queda sobre el fondo de la página.
========================================================= */

.evtb3-block .evtb3-accent {
  position: absolute;

  top: -14px;
  left: 50%;
  transform: translateX(-50%);

  z-index: 20;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: max-content;
  min-height: 29px;

  padding: 0 16px;

  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;

  color: var(--b3-vibrante-deep);

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 246, 248, 0.94) 100%
    );

  box-shadow: 0 12px 26px rgba(20, 4, 12, 0.26);

  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}


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

.evtb3-block .evtb3-title {
  max-width: 20ch;
  margin: 0;

  color: #ffffff;

  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.055em;

  text-wrap: balance;
}

/* "REGISTRATE" — lo único en negrita, con su resplandor propio */
.evtb3-block .evtb3-title span {
  font-weight: 700;
  text-transform: uppercase;

  text-shadow: 0 2px 18px rgba(255, 255, 255, 0.45);
}


/* =========================================================
   LISTA DE SITUACIONES — contenedores blancos
========================================================= */

.evtb3-block .evtb3-list {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 10px;
}

.evtb3-block .evtb3-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);

  align-items: start;
  gap: 12px;

  padding: 17px 18px;

  border-radius: 16px;

  background: #ffffff;

  box-shadow: 0 14px 30px rgba(20, 4, 12, 0.16);

  text-align: left;

  transition:
    transform 0.3s var(--b3-ease-out),
    box-shadow 0.3s ease;
}

.evtb3-block .evtb3-item p {
  margin: 0;

  color: rgba(23, 23, 23, 0.78);

  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;

  text-wrap: pretty;
}

/* Check — máscara CSS, sin SVG inline */
.evtb3-block .evtb3-item__icon {
  position: relative;

  display: block;
  width: 26px;
  height: 26px;

  margin-top: 1px;

  border-radius: 50%;

  background: rgba(201, 53, 104, 0.09);
}

.evtb3-block .evtb3-item__icon::before {
  content: "";

  position: absolute;
  inset: 0;
  margin: auto;

  width: 15px;
  height: 15px;

  background:
    linear-gradient(125deg, #c93568 0%, #a01245 60%, #7f1a3a 100%);

  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2012.5%2010.5%2016%2017.5%208.5%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2012.5%2010.5%2016%2017.5%208.5%27%2F%3E%3C%2Fsvg%3E");
}


/* =========================================================
   BOTÓN — blanco/glass, máximo contraste
========================================================= */

.evtb3-block .evtb3-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  text-align: center;

  border: none;
  border-radius: 999px;

  margin-top: 4px;
  padding:
    clamp(18px, 2.4vw, 24px)
    clamp(24px, 6vw, 68px);

  color: var(--b3-vibrante-deep);
  text-decoration: none;

  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.4px;
  text-transform: uppercase;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 246, 248, 0.94) 100%
    );

  box-shadow:
    0 18px 40px rgba(20, 4, 12, 0.32),
    0 6px 16px rgba(20, 4, 12, 0.18);

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

/* Reflejo animado que recorre el botón */
.evtb3-block .evtb3-btn::before {
  content: "";

  position: absolute;
  top: -45%;
  left: -70%;

  width: 38%;
  height: 190%;

  border-radius: 999px;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      rgba(127, 26, 58, 0) 0%,
      rgba(127, 26, 58, 0) 26%,
      rgba(127, 26, 58, 0.10) 48%,
      rgba(127, 26, 58, 0.04) 58%,
      rgba(127, 26, 58, 0) 100%
    );

  transform: skewX(-18deg);
  filter: blur(2px);
  opacity: 0;

  animation: evtb3GlassSweep 5.2s ease-in-out infinite;
}

.evtb3-block .evtb3-btn > span {
  position: relative;
  z-index: 3;

  display: block;
  width: 100%;

  text-align: center;
  line-height: inherit;
}

@keyframes evtb3GlassSweep {
  0%   { left: -70%; opacity: 0; }
  8%   { opacity: 0; }
  16%  { opacity: 1; }
  34%  { left: 135%; opacity: 1; }
  42%  { left: 135%; opacity: 0; }
  100% { left: 135%; opacity: 0; }
}

.evtb3-block .evtb3-btn:active {
  transform: translateY(0) scale(0.99);

  box-shadow: 0 10px 24px rgba(20, 4, 12, 0.24);
}


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

@media (hover: hover) {

  .evtb3-block .evtb3-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.02);

    box-shadow:
      0 22px 48px rgba(20, 4, 12, 0.38),
      0 8px 20px rgba(20, 4, 12, 0.22);
  }

  .evtb3-block .evtb3-item:hover {
    transform: translateY(-2px);

    box-shadow: 0 18px 36px rgba(20, 4, 12, 0.20);
  }

}


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

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

  transform: translate3d(0, 44px, 0) scale(0.94);
  filter: blur(6px);

  will-change: opacity, transform, filter;
}

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

  transform: none;
  filter: none;

  will-change: auto;
}


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

@media (max-width: 1024px) {

  .evtb3-block .evtb3-section {
    padding: 82px 0 88px;
  }

  .evtb3-block .evtb3-card {
    padding: 56px 38px 46px;
  }

  .evtb3-block .evtb3-content {
    gap: 26px;
  }

}


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

@media (max-width: 767px) {

  .evtb3-block .evtb3-section {
    /* 52 arriba: la tarjeta rosa ya trae 46px de padding propio para
       el badge, asi que 62 sumaban demasiado aire muerto. */
    padding: 52px 0 68px;
  }

  .evtb3-block .evtb3-shell {
    width: min(520px, calc(100% - 32px));
  }

  .evtb3-block .evtb3-card {
    padding: 46px 16px 38px;
    border-radius: 22px;
  }

  .evtb3-block .evtb3-content {
    gap: 24px;
  }

  .evtb3-block .evtb3-accent {
    min-height: 27px;
    padding-inline: 13px;

    font-size: 9px;
  }

  .evtb3-block .evtb3-title {
    max-width: 100%;
    font-size: clamp(28px, 8.4vw, 36px);
  }

  .evtb3-block .evtb3-list {
    gap: 11px;
  }

  .evtb3-block .evtb3-item {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;

    padding: 15px 14px;
  }

  .evtb3-block .evtb3-item__icon {
    width: 24px;
    height: 24px;
  }

  .evtb3-block .evtb3-btn {
    width: 100%;
    font-size: 15px;
  }

}


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

@media (max-width: 390px) {

  .evtb3-block .evtb3-shell {
    /* 32 = 16px por lado; con 16 la tarjeta rosa quedaba a 8px del borde */
    width: calc(100% - 32px);
  }

  /* 12px dejaba el texto pegado al borde rosa; 18 le da el mismo aire
     que las tarjetas del 02a (17) y el bio del 03 (20). */
  .evtb3-block .evtb3-card {
    padding-inline: 18px;
  }

  .evtb3-block .evtb3-item {
    padding-inline: 15px;
  }

}


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

   Los dos widgets no traian este bloque. Se agrega por el mismo
   criterio que en el hero: quien pide menos movimiento ve la
   seccion completa, sin entradas ni brillos en bucle.
========================================================= */

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

	.evtb2-block .evtb2-secret,
	.evtb3-block .evtb3-item,
	.evtb3-block .evtb3-btn {
		transition: none;
	}

	.evtb3-block .evtb3-glow::before,
	.evtb3-block .evtb3-btn::before {
		animation: none;
	}

	.evtb3-block .evtb3-btn::before {
		opacity: 0;
	}

	.js:not(.reveal-disabled) .evtb2-block [data-evtb2-waapi]:not(.evtb2-waapi-done),
	.js:not(.reveal-disabled) .evtb3-block [data-evtb3-waapi-reveal]:not(.evtb3-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-evtb2-waapi],
.reveal-disabled [data-evtb3-waapi-reveal] {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	filter: none !important;
	will-change: auto !important;
}


/* =========================================================
   DESKTOP · COMPOSICION EN ROW

   En mobile los dos bloques del 02 se leen apilados: primero las cinco
   tarjetas negras, despues la tarjeta rosa de "Registrate". En desktop
   eso desperdiciaba todo el ancho y estiraba la seccion a mas de 2000px
   de alto.

   Aca pasan a ser DOS MASAS ENFRENTADAS:

     [ TARJETAS NEGRAS ]        [ REGISTRATE ]

   El .evtb2-ground, que ya envolvia a los dos y lleva el fondo, se
   convierte en el grid. No se toco ni un componente: las tarjetas, la
   pastilla, los iconos, la tarjeta rosa, sus items y su CTA son los
   mismos. Solo cambia como se reparten en el ancho.

   Reparto 55/45 a favor de las tarjetas: son cinco piezas de lectura
   secuencial y necesitan mas medida; el bloque rosa es una unidad
   compacta que funciona bien mas angosta y gana peso por color.
========================================================= */

@media (min-width: 845px) {

	.evtb2-ground {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: center;
		column-gap: 56px;

		/* El fondo sigue a sangre; solo se centra el contenido. */
		padding-inline: max(40px, calc((100% - 1320px) / 2));
	}

	/* Las secciones internas dejan de imponer su propio ancho y su
	   padding lateral: ahora el ancho lo da la columna. */
	.evtb2-block .evtb2-section,
	.evtb3-block .evtb3-section {
		padding-inline: 0;
	}

	.evtb2-block .evtb2-shell,
	.evtb3-block .evtb3-shell {
		width: 100%;
		max-width: none;
	}

	/* El encabezado deja de estar centrado: comparte eje con las
	   tarjetas, como el hero. */
	.evtb2-block .evtb2-heading {
		width: 100%;
		align-items: flex-start;
		margin-inline: 0;
		margin-bottom: 34px;
		text-align: left;
	}

	.evtb2-block .evtb2-heading h2 {
		margin-inline: 0;
		text-align: left;
	}

	/* Se apaga el alternado izquierda/derecha del original: dentro de
	   una columna angosta partia la lectura de la lista. */
	.evtb2-block .evtb2-secret,
	.evtb2-block .evtb2-secret:nth-child(odd),
	.evtb2-block .evtb2-secret:nth-child(even) {
		width: 100%;
		margin-inline: 0;
	}

	.evtb2-block .evtb2-cierre {
		width: 100%;
		margin-inline: 0;
		text-align: left;
	}

	/* La tarjeta rosa llena su columna. */
	.evtb3-block .evtb3-card {
		width: 100%;
		max-width: none;
	}

}

/* De 1200 para arriba hay ancho para separar mas las dos masas. */
@media (min-width: 1200px) {

	.evtb2-ground {
		column-gap: 72px;
	}

}