/* =========================================================
   BLOQUE 04 · ELLAS YA TIENEN EL CODIGO

   Traducido desde legacy/imports/04-seccion/04-seccion.elementor.json.

   Este import es distinto a los anteriores: no es un unico widget
   HTML. Son dos piezas dentro de un container:

     · un widget heading NATIVO de Elementor (el titulo), cuyo estilo
       vive en `settings` + un `custom_css` de 365 bytes;
     · un widget HTML con el carrusel escrito a mano (prefijo ch-).

   El carrusel de abajo es ese codigo, sin tocar valores: mismo scroll
   nativo con snap, mismas medidas, mismos timings, mismas flechas.

   QUE SE AGREGO
   · `.ch-ground` y `.ch-boxed`, la traduccion del container.
   · las reglas del titulo, derivadas de los settings del widget.
   · un bloque `prefers-reduced-motion` al final, igual que 01/02/03.

   El widget del carrusel no traia nada de Elementor que limpiar: ni
   clases elementor-*, ni jQuery, ni observers del editor.
========================================================= */


/* =========================================================
   CONTAINER

   Lo que declara el JSON:

     background_background   classic
     background_color        #161616
     content_width           boxed
     padding                 50 / 0 / 0 / 0
     padding_mobile          20 / 16 / 30 / 16

   Sin imagen de fondo y sin overlay: a diferencia del 02 y el 03,
   este container es un color plano.

   El ancho de `boxed` lo pone el kit del tema, no el export. Se leyo
   del sitio en vivo: `min(100%, 1140px)`. No es un valor inventado.
========================================================= */

.ch-ground {
	width: 100%;

	background-color: #161616;

	padding: 50px 0 0;
}

.ch-boxed {
	width: min(100%, 1140px);
	margin-inline: auto;
}

@media (max-width: 767px) {

	.ch-ground {
		/* El container de Elementor traia 20/30 arriba y abajo, muy por
		   debajo de los 54-72 del resto: la seccion se pegaba a sus
		   vecinas. 44/48 la devuelve al ritmo de la pagina. */
		padding: 44px 16px 48px;
	}

}


/* =========================================================
   TITULO  —  widget heading de Elementor

   De `settings`:
     header_size                  h3
     typography_font_family       Poppins
     typography_font_size         36px
     typography_font_weight       200
     typography_text_transform    none
     typography_font_size_mobile  25px
     typography_line_height_mobile 32px
     title_color                  #FFFFFF
     align / align_mobile         center
     _css_classes                 titEllas

   Los flags de sombra, motion effects, sticky, mascara y los efectos
   del plugin EAEL estan todos vacios en el JSON: no se aplican. Solo
   quedan tipografia, color y alineacion.

   `margin: 0` reproduce lo que hace la hoja de Elementor sobre sus
   headings; sin eso el margen por defecto del navegador para h3
   aparece de la nada.

   El line-height de desktop no esta declarado en el origen, asi que
   tampoco se declara aca.
========================================================= */

.ch-ground .titEllas {
	margin: 0;

	color: #ffffff;

	font-family: "Poppins", sans-serif;
	font-size: 36px;
	font-weight: 200;
	text-transform: none;

	text-align: center;
}

@media (max-width: 767px) {

	.ch-ground .titEllas {
		font-size: 25px;
		line-height: 32px;

		/* El carrusel arrancaba pegado al titulo: 0px entre uno y otro,
		   el unico salto de la pagina sin aire ninguno. */
		margin-bottom: 22px;
	}

}


/* ---------------------------------------------------------
   custom_css del widget, tal cual venia.

   Dos cosas del original:

   1. cerraba una llave de mas al final del media query. El navegador
      la descarta, pero aca sobra: se quito.

   2. pedia `font-family: pinyon`. En el sitio en vivo eso resuelve:
      el kit de WordPress tiene registrada una fuente propia llamada
      `Pinyon`, distinta de la `Pinyon Script` de Google. Se verifico
      midiendo el mismo texto a 68px en el sitio real: pinyon 244px,
      Pinyon Script 238px, Poppins 318px.

      Ese archivo no lo tenemos. Se conserva `Pinyon` primero y se
      agrega `Pinyon Script` detras, que es la misma cadena que el
      autor escribe en los bloques 02 y 03 para este mismo caso. La
      diferencia entre una y otra es del 2,5% de ancho.
--------------------------------------------------------- */

.titEllas {
	font-weight: 100 !important;
}

.titEllas span {
	font-family: "Pinyon", "Pinyon Script", cursive !important;
	font-size: 42px;
	color: #e8b4b8;
}

@media (min-width: 1025px) {

	.titEllas {
		font-weight: 100 !important;
	}

	.titEllas span {
		font-family: "Pinyon", "Pinyon Script", cursive !important;
		font-size: 68px;
		color: #e8b4b8;
	}

}


/* =========================================================
   CARRUSEL  —  widget HTML, codigo del autor
========================================================= */

.ch-carousel-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 10px !important;
  box-sizing: border-box;
}

.ch-carousel {
  width: 100%;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scrollbar-width: none;
}

.ch-carousel::-webkit-scrollbar {
  display: none;
}

/* =========================
   CARD SIN BORDE ROSADO
   Imagen hasta el borde
========================= */

.ch-card {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  flex: 0 0 348px;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;

  border-radius: 24px !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;

  box-shadow:
    0 10px 24px rgba(23, 23, 23, 0.12) !important;

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

/* Brillo superior sutil tipo Tam Glass, pegado al borde */
.ch-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 4;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 245, 246, 0.18) 0px,
      rgba(255, 245, 246, 0.07) 1px,
      rgba(255, 245, 246, 0.00) 6px,
      rgba(255, 245, 246, 0.00) 100%
    );
}

/* Relieve Tam Glass directo sobre el borde de la imagen */
.ch-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;

  box-shadow:
    inset 0 1px 0 0 rgba(255, 245, 246, 0.20),
    inset 0 -1px 0 0 rgba(23, 23, 23, 0.22),
    inset 1px 0 0 0 rgba(255, 230, 233, 0.08),
    inset -1px 0 0 0 rgba(23, 23, 23, 0.10);
}

.ch-card:hover {
  transform: translateY(-3px);
  filter: brightness(1.015) saturate(1.02);

  box-shadow:
    0 14px 32px rgba(23, 23, 23, 0.16) !important;
}

.ch-card:hover::before {
  background:
    linear-gradient(
      180deg,
      rgba(255, 245, 246, 0.22) 0px,
      rgba(255, 245, 246, 0.08) 1px,
      rgba(255, 245, 246, 0.00) 6px,
      rgba(255, 245, 246, 0.00) 100%
    );
}

/* =========================
   IMAGEN
========================= */

.ch-card-image {
  position: relative;
  z-index: 2;

  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: inherit;
  overflow: hidden;
  background: #808080;
}

.ch-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  border-radius: inherit;
}

/* =========================
   FLECHAS
========================= */

.ch-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ch-arrow:hover {
  background: rgba(0, 0, 0, 0.32);
  transform: translateY(-50%) scale(1.04);
}

.ch-arrow svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ch-prev {
  left: 20px;
}

.ch-next {
  right: 20px;
}

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

@media (max-width: 1024px) {
  .ch-card {
    flex-basis: 330px;
  }
}

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

@media (max-width: 767px) {
  .ch-carousel-wrap {
    padding: 10px 0 !important;
  }

  .ch-carousel {
    gap: 10px;
    padding: 0 18px;
    scroll-padding-left: 18px;
    scroll-padding-right: 18px;
  }

  .ch-card {
    flex: 0 0 86vw;
    max-width: 348px;
    border-radius: 22px !important;
  }

  .ch-card:hover {
    transform: none;
  }

  .ch-arrow {
    display: none;
  }
}

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

@media (max-width: 390px) {
  .ch-card {
    flex-basis: 88vw;
  }
}


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

   No venia en el widget. El carrusel no tiene autoplay ni entradas,
   asi que aca solo se apaga el desplazamiento suave de las flechas y
   el hover de las tarjetas.
========================================================= */

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

	.ch-carousel {
		scroll-behavior: auto;
	}

	.ch-card,
	.ch-arrow {
		transition: none;
	}

}


/* =========================================================
   DESKTOP · TITULO ARRIBA, RAIL HORIZONTAL DEBAJO

   La primera version puso el titulo en una columna al lado del
   carrusel. Era el cuarto grid lateral seguido de la pagina y repetia
   el patron en vez de romperlo.

   Ahora la seccion es VERTICAL:

       ELLAS YA TIENEN EL CODIGO        <- arriba, a la izquierda

       ============================     <- gran banda horizontal
              CARRUSEL -> -> ->
       ============================

   El movimiento lateral lo aporta el propio carrusel, que ocupa todo
   el ancho y sangra por la derecha. Es el cambio de ritmo despues del
   bloque editorial del 03: ahi la lectura era vertical y densa, aca es
   una sola banda de evidencia que se recorre con la mano.
========================================================= */

@media (min-width: 845px) {

	.ch-ground {
		padding: 104px 0 112px;
	}

	.ch-boxed {
		display: block;
		width: 100%;
		max-width: none;

		/* El carrusel sangra por la derecha; el titulo respeta el eje
		   comun de la pagina. */
		padding-left: max(40px, calc((100% - 1320px) / 2));
		padding-right: 0;
	}

	/* Arriba, alineado a izquierda y con aire propio alrededor. */
	.ch-ground .titEllas {
		margin: 0 0 52px;
		text-align: left;

		font-size: clamp(34px, 3.1vw, 44px);
		line-height: 1.06;
		max-width: 16ch;
	}

	.ch-carousel-wrap {
		padding: 10px 0 !important;
	}

	.ch-carousel {
		padding-right: 12vw;
		scroll-padding-left: 0;
	}

	/* Tarjetas mas grandes: son el contenido de la banda. */
	.ch-card {
		flex: 0 0 320px;
	}

	/* La flecha izquierda solo desaparece cuando no hay nada a la
	   izquierda. El atributo lo mantiene js/section-b4.js. */
	.ch-carousel-wrap[data-ch-inicio="true"] .ch-prev {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.ch-prev {
		left: auto;
		right: calc(13vw + 52px);
		transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease;
	}

	.ch-next {
		right: 13vw;
	}

}

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

	.ch-boxed {
		padding-left: 40px;
	}

	.ch-ground .titEllas {
		margin-bottom: 40px;
	}

	.ch-card {
		flex-basis: 282px;
	}

}