/* =========================================================
   LANDING EIP · aticcolab.com (página 20614)
   Clases con prefijo eip-. Orden: base y utilidades, y luego
   las secciones en el orden en que aparecen en la página.
   Puntos de corte: tablet ≤ 1024 px · móvil ≤ 767 px
   ========================================================= */


/* ---------- Base de la página ---------- */

/* Contenido a ancho completo (anula el body flex del kit solo en esta página) */
body.page-id-20614 > .elementor[data-elementor-type="wp-page"] {
  width: 100%;
  max-width: none;
  align-self: stretch;
}


/* ---------- Utilidades reutilizables ---------- */

/* Tarjeta que sube al pasar el ratón (diferencial, a quién va dirigido) */
.e-con.eip-lift {
  transition: transform .25s ease, box-shadow .25s ease;
}
.e-con.eip-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(10,14,40,0.10);
}

/* Versión suave (ponentes) */
.e-con.eip-lift-sm {
  transition: transform .2s ease, box-shadow .2s ease;
}
.e-con.eip-lift-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(10,14,40,0.10);
}


/* ---------- 1. Hero ---------- */

/* Degradado + capa de puntos */
.eip-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #001D86 0%, #132470 45%, #02051A 100%);
}
.eip-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 1.1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 45%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 45%, #000 100%);
}
.eip-hero > * { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .eip-hero { background: linear-gradient(160deg, #001D86 0%, #132470 45%, #02051A 100%); }
  .eip-hero::before { display: none; }
}


/* ---------- 2. Fotos ---------- */

/* Escritorio: mosaico, la primera ocupa dos filas */
.e-con.eip-fotos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  padding: 12px 10px 0;
}
.eip-fotos > .elementor-element:first-child { grid-row: span 2; }

/* Las 4 pequeñas mantienen la proporción del diseño (3:2) */
.eip-fotos > .elementor-element:not(:first-child) { aspect-ratio: 3 / 2; }

/* La imagen rellena su celda y se recorta sin deformarse */
.eip-fotos .elementor-widget-image,
.eip-fotos .elementor-widget-image .elementor-widget-container { height: 100%; }
.eip-fotos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

@media (max-width: 1024px) {
  .e-con.eip-fotos { padding: 12px 20px 0; }
}

/* Móvil: carrusel horizontal (primera foto 270 × 180, resto 180 × 180) */
@media (max-width: 767px) {
  .e-con.eip-fotos {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 20px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    scrollbar-width: none;
  }
  .eip-fotos::-webkit-scrollbar { display: none; }
  .eip-fotos > .elementor-element {
    flex: 0 0 180px;
    height: 180px;
    aspect-ratio: auto;
    scroll-snap-align: start;
  }
  .eip-fotos > .elementor-element:first-child {
    flex-basis: 270px;
    grid-row: auto;
  }
  .eip-fotos img { border-radius: 16px; }
}


/* ---------- 4. El método ---------- */

/* Tramo de línea + punto (un contenedor vacío por paso) */
.e-con.eip-linea {
  position: relative;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 18px 0 24px;
}
.eip-linea::before {               /* la línea */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 2px;
  background: var(--eip-linea);
}
.eip-linea::after {                /* el punto, centrado bajo la barra */
  content: "";
  position: absolute;
  top: 1px;
  left: calc((100% - 12px) / 2 - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--eip-punto);
  border: 2px solid #000000;
  box-sizing: border-box;
  box-shadow: var(--eip-halo, none);
}
.eip-linea--1 { --eip-linea: linear-gradient(90deg, #3A3B48, #1F2E8F); --eip-punto: #4A5170; }
.eip-linea--2 { --eip-linea: linear-gradient(90deg, #1F2E8F, #2238CC); --eip-punto: #3A4FC0; }
.eip-linea--3 { --eip-linea: linear-gradient(90deg, #2238CC, #2746FF); --eip-punto: #2F4BE6; }
.eip-linea--4 {
  --eip-linea: linear-gradient(90deg, #2746FF, rgba(39,70,255,0.15));
  --eip-punto: #2746FF;
  --eip-halo: 0 0 0 6px rgba(39,70,255,0.25);
}

/* Solo editor: el contenedor vacío de la línea no crece ni muestra el "+" */
.elementor-editor-active .e-con.eip-linea { min-height: 0; }
.elementor-editor-active .eip-linea .elementor-empty-view { display: none; }

/* Móvil: línea vertical a la izquierda y pasos apilados */
@media (max-width: 767px) {

  /* Cada paso deja 32 px a la izquierda para la línea */
  .e-con.eip-paso {
    position: relative;
    padding: 0 0 36px 32px;
  }
  .e-con.eip-paso:last-child { padding-bottom: 0; }

  /* Barra: sin altura fija, bloques arriba */
  .e-con.eip-barra {
    height: auto;
    min-height: 0;
    padding: 0;
    justify-content: flex-start;
    margin-bottom: 14px;
  }
  .eip-bloque .elementor-heading-title {
    height: 36px;
    padding: 0 12px;
  }

  /* La línea pasa a ser una columna de 16 px a la izquierda */
  .e-con.eip-linea {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 16px;
    height: auto;
    margin: 0;
  }
  .eip-linea::before {             /* tramo vertical, bajo el punto */
    left: 7px;
    right: auto;
    top: 26px;
    bottom: 0;
    width: 2px;
    height: auto;
    background: var(--eip-linea-v);
  }
  .eip-linea::after {              /* punto, centrado con el primer bloque */
    top: 10px;
    left: 0;
    width: 16px;
    height: 16px;
  }
  .eip-linea--1 { --eip-linea-v: linear-gradient(#3A3B48, #1F2E8F); }
  .eip-linea--2 { --eip-linea-v: linear-gradient(#1F2E8F, #2238CC); }
  .eip-linea--3 { --eip-linea-v: linear-gradient(#2238CC, #2746FF); }
  .eip-linea--4 { --eip-halo: 0 0 0 5px rgba(39,70,255,0.25); }
  .eip-linea--4::before { display: none; }   /* el último paso no tiene tramo */
}


/* ---------- 5. Factor diferencial ---------- */

/* Las tres imágenes con la misma proporción */
.eip-dif-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
}

@media (max-width: 767px) {
  .eip-dif-img img {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
  }
}


/* ---------- 6. Quién te enseñará (ponentes) ---------- */

/* Sin hueco extra entre el icono de LinkedIn y el nombre */
.eip-ponente-nombre .elementor-icon-list-icon i,
.eip-ponente-nombre .elementor-icon-list-icon svg { width: auto; }

/* El nombre nunca se parte en dos líneas */
.eip-ponente-nombre,
.eip-ponente-nombre .elementor-icon-list-text {
  white-space: nowrap;
}

/* Bloque de texto tan ancho como el nombre: el cargo se parte a ese ancho */
.e-con.eip-ponente-texto {
  width: min-content;
  flex: 0 1 auto;
}


/* ---------- 7. Programa y agenda ---------- */

/* Acordeón */
.eip-agenda .e-n-accordion-item {
  border-top: 1px solid #DADCE3;
}
.eip-agenda .e-n-accordion-item-title {
  padding: 24px 0;
  border: 0;
  background: none;
  align-items: center;
}

/* Fecha + título en fila: la fecha ocupa 180 px */
.eip-agenda .e-n-accordion-item-title-text {
  display: flex;
  align-items: center;
  gap: 8px 32px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: #111114;
}
.eip-agenda .eip-dia {
  flex: 0 0 180px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: #2746FF;
}

/* Botón +/− : cuadrado azul de 32 px */
.eip-agenda .e-n-accordion-item-title-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 8px;
  background: #2746FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eip-agenda .e-n-accordion-item-title-icon i { font-size: 16px; color: #FFFFFF; }
.eip-agenda .e-n-accordion-item-title-icon svg { width: 16px; height: 16px; fill: #FFFFFF; }

/* Detalle: alineado con el título (180 + 32 = 212 px) */
.eip-agenda .e-n-accordion-item > .e-con {
  padding: 0 0 24px 212px;
  font-size: 15px;
  line-height: 24px;
  color: #4A4A55;
  border: 0;            /* quita el recuadro por defecto */
  min-height: 0;        /* quita la altura mínima del contenedor */
  background: none;
}
.eip-agenda .e-n-accordion-item > .e-con p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .eip-agenda .e-n-accordion-item-title { padding: 18px 0; }
  .eip-agenda .e-n-accordion-item-title-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 18px;
    line-height: 22px;
  }
  .eip-agenda .eip-dia {
    flex: none;
    font-size: 12px;
    line-height: 15px;
  }
  .eip-agenda .e-n-accordion-item > .e-con {
    padding: 0 0 18px 0;
    line-height: 23px;
  }
}

/* Banner de descarga: tamaño del icono del botón */
.eip-btn-descarga .elementor-button-icon svg { width: 16px; height: 16px; }


/* ---------- 8. Testimonios ---------- */

/* Escritorio: 4 tarjetas en fila */
.e-con.eip-testimonios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Círculo de iniciales */
.eip-iniciales .elementor-heading-title {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #26262E;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}

/* Tablet y móvil: carrusel horizontal alineado con el título */
@media (max-width: 1024px) {
  .e-con.eip-testimonios {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-left: 0;
    scrollbar-width: none;
  }
  .eip-testimonios::-webkit-scrollbar { display: none; }
  .eip-testimonios > .e-con {
    flex: 0 0 300px;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .eip-iniciales .elementor-heading-title {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}


/* ---------- 9. A quién va dirigido ---------- */

/* Caja de icono: sin margen del tema en el título ni espacio extra en el icono */
.eip-perfil .elementor-icon-box-title { margin-top: 0; }
.eip-perfil .elementor-icon-box-icon { line-height: 0; }

@media (max-width: 767px) {
  .eip-perfil .elementor-icon-box-icon { margin-top: 2px; }
}


/* ---------- 10. Precios ---------- */

/* Color de los checks (SVG de trazo) */
.eip-lista-online .elementor-icon-list-icon svg { stroke: #2746FF; fill: none; }
.eip-lista-presencial .elementor-icon-list-icon svg { stroke: #9FB0FF; fill: none; }


/* ---------- 11. FAQ ---------- */

/* Acordeón */
.eip-faq .e-n-accordion-item {
  border-top: 1px solid #DADCE3;
}
.eip-faq .e-n-accordion-item-title {
  padding: 20px 0;
  gap: 16px;
  border: 0;
  background: none;
  align-items: center;
}
.eip-faq .e-n-accordion-item-title-text {
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
  color: #111114;
}

/* Botón +/− : cuadrado gris de 30 px */
.eip-faq .e-n-accordion-item-title-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 8px;
  background: #F1F1F4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eip-faq .e-n-accordion-item-title-icon i { font-size: 14px; color: #111114; }
.eip-faq .e-n-accordion-item-title-icon svg { width: 14px; height: 14px; fill: #111114; }

/* Respuesta */
.eip-faq .e-n-accordion-item > .e-con {
  padding: 0 48px 22px 0;
  font-size: 15px;
  line-height: 24px;
  color: #4A4A55;
  border: 0;
  min-height: 0;
  background: none;
}
.eip-faq .e-n-accordion-item > .e-con p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .eip-faq .e-n-accordion-item-title { padding: 16px 0; gap: 14px; }
  .eip-faq .e-n-accordion-item-title-text { font-size: 17px; line-height: 22px; }
  .eip-faq .e-n-accordion-item > .e-con { padding: 0 0 18px 0; line-height: 23px; }
}


/* ---------- 12. Barra fija ---------- */

/* Pegada abajo; el script del widget HTML añade .eip-oculta mientras se ve el hero */
.e-con.eip-barra-fija {
  position: sticky;
  bottom: 16px;
  z-index: 50;
  transition: transform .3s ease, opacity .3s ease;
}
.e-con.eip-barra-fija.eip-oculta {
  transform: translateY(calc(100% + 16px));
  opacity: 0;
  pointer-events: none;
}

/* El botón se va a la derecha de la barra */
.eip-btn-apuntate { margin-left: auto; }

/* Botón de WhatsApp: el aspecto lo pone el contenedor en Elementor; aquí solo el hover */
.e-con.eip-whatsapp {
  transition: transform .2s ease, filter .2s ease;
}
.e-con.eip-whatsapp:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

@media (max-width: 767px) {
  .e-con.eip-barra-fija { bottom: 0; }
  .eip-btn-apuntate .elementor-button-icon { display: none; }
  .e-con.eip-whatsapp {
    flex: 0 0 56px;
    width: 56px;
    min-width: 0;
  }
}