/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Apr 23 2026 | 16:56:21 */
/* ============================================================================
   PATECO — BANNER CARRUSEL — Estilos
   ----------------------------------------------------------------------------
   Woody: Tipo CSS · Cabecera · Automatic Insertion ON
          Display Conditions: global O Page ID = [ID de la home]
   ========================================================================== */

/* ============ SECTION BASE ============ */
.pateco-slide-section {
  position: relative;
  overflow: hidden;
  min-height: 500px !important;
}

/* Overlay oscuro sobre la imagen de fondo.
   La opacidad se controla por CSS variable que inyectamos desde el tag HTML
   de cada slide en el paso manual (ver guía). */
.pateco-slide-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--slide-overlay, 0.2);
  z-index: 1;
  pointer-events: none;
}

/* Asegurar que las columnas quedan encima del overlay */
.pateco-slide-section > .elementor-container,
.pateco-slide-section > .elementor-container > .elementor-row,
.pateco-slide-section .elementor-column {
  position: relative;
  z-index: 2;
}

/* ============ COLUMNA DE CONTENIDO ============ */
.pateco-slide-content-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============ PRETÍTULO (badge) ============ */
.pateco-slide-pretitle span,
.pateco-slide-pretitle {
  display: inline-block !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
}

/* ============ TÍTULO ============ */
.pateco-slide-title h1 {
  font-size: clamp(32px, 4.2vw, 52px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 22px !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
  max-width: 640px;
}

/* ============ DESCRIPCIÓN ============ */
.pateco-slide-description p {
  font-size: 17px !important;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1.55 !important;
  margin: 0 0 28px !important;
  max-width: 560px;
}

/* Ocultar descripción si está vacía (placeholder "CAMBIAR...") */
.pateco-slide-description:empty,
.pateco-slide-description p:empty { display: none; }

/* ============ BOTÓN ============ */
.pateco-slide-button .elementor-button {
  background: #E74C3C !important;
  color: #fff !important;
  padding: 16px 36px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 16px rgba(231,76,60,0.35);
  transition: transform .2s, box-shadow .2s, background .2s !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}
.pateco-slide-button .elementor-button::after {
  content: '→';
  font-size: 18px;
  line-height: 1;
  transition: transform .2s;
}
.pateco-slide-button .elementor-button:hover {
  background: #C0392B !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(231,76,60,0.5);
}
.pateco-slide-button .elementor-button:hover::after { transform: translateX(4px); }

/* ============ ESQUEMA DE COLOR CLARO (cuando slide_color_scheme = 'claro') ============
   Aplicamos clase .pateco-slide--light desde el paso manual (ver guía).
   Si no la añades, todos los slides van con el esquema oscuro (default). */
.pateco-slide--light .pateco-slide-pretitle,
.pateco-slide--light .pateco-slide-pretitle span {
  color: #1B3A5C !important;
}
.pateco-slide--light .pateco-slide-title h1 {
  color: #1B3A5C !important;
  text-shadow: none;
}
.pateco-slide--light .pateco-slide-description p {
  color: #5B6B7D !important;
}

/* ============ ALINEACIONES ALTERNATIVAS ============
   Aplicar con clases .pateco-slide--center o .pateco-slide--right */
.pateco-slide--center .pateco-slide-content-col { text-align: center; align-items: center; }
.pateco-slide--center .pateco-slide-title h1,
.pateco-slide--center .pateco-slide-description p { max-width: none; }

.pateco-slide--right .pateco-slide-content-col { text-align: right; align-items: flex-end; }

/* ============ LOGOS (columna derecha) ============ */
.pateco-slide-logos-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pateco-slide-logos {
  background: rgba(255,255,255,0.95);
  padding: 22px 26px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  max-width: 100%;
}

/* Ocultar la columna de logos si el slide tiene slide_show_logos = false
   (aplicar clase .pateco-slide--no-logos al section — ver guía) */
.pateco-slide--no-logos .pateco-slide-logos-col { display: none !important; }
.pateco-slide--no-logos .pateco-slide-content-col { width: 100% !important; flex: 0 0 100% !important; }

/* ============ CARRUSEL (Loop Carousel) ============ */
/* Contenedor del carrusel */
.pateco-banner-carousel .swiper,
.pateco-banner-carousel .swiper-container {
  overflow: hidden;
}

/* Puntos de paginación */
.pateco-banner-carousel .swiper-pagination {
  bottom: 24px !important;
  left: 60px !important;
  width: auto !important;
  text-align: left !important;
}
.pateco-banner-carousel .swiper-pagination-bullet {
  width: 28px !important;
  height: 3px !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.4) !important;
  opacity: 1 !important;
  transition: background .25s, width .25s;
  margin: 0 4px !important;
}
.pateco-banner-carousel .swiper-pagination-bullet-active {
  background: #E74C3C !important;
  width: 40px !important;
}

/* Ocultar flechas laterales si las muestra por defecto */
.pateco-banner-carousel .swiper-button-prev,
.pateco-banner-carousel .swiper-button-next,
.pateco-banner-carousel .elementor-swiper-button {
  display: none !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .pateco-slide-section {
    min-height: 420px !important;
  }
  .pateco-slide-content-col,
  .pateco-slide-logos-col {
    padding: 40px 30px !important;
  }
  .pateco-slide-logos-col { display: none; }
  .pateco-slide-content-col { width: 100% !important; flex-basis: 100% !important; }
}

@media (max-width: 640px) {
  .pateco-slide-section { min-height: 380px !important; }
  .pateco-slide-title h1 { font-size: 28px !important; }
  .pateco-slide-description p { font-size: 15px !important; }
  .pateco-slide-button .elementor-button {
    padding: 14px 24px !important;
    font-size: 12px !important;
  }
  .pateco-banner-carousel .swiper-pagination {
    bottom: 16px !important;
    left: 20px !important;
  }
}