/* =================================================================
   Destinos — CTT (ets2)  v2.9.4
   Layout Bento: 2 hero | 1 wide | 4 grid
   NOTA: !important en todo para ganarle a Elementor.
   ================================================================= */

.ets2-section,
.ets2-section *,
.ets2-section *::before,
.ets2-section *::after {
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.ets2-section {
  position: relative !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 18px 20px 30px !important;
  color: #101010 !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* ── Header ── */
.ets2-section .ets2-header {
  text-align: center !important;
  margin: 0 auto 26px !important;
  padding: 0 12px !important;
  max-width: 820px !important;
}

.ets2-section .ets2-header-title {
  margin: 0 0 8px !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #090909 !important;
  letter-spacing: 0 !important;
}

.ets2-section .ets2-header-subtitle {
  margin: 0 !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: #AFAFAF !important;
  font-weight: 400 !important;
}

/* ── Bento Grid ── */
.ets2-section .ets2-bento {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hero: spans 2 cols */
.ets2-section .ets2-card--hero {
  grid-column: span 2 !important;
  min-height: 200px !important;
  border-radius: 14px !important;
}

/* Wide: spans all 4 cols */
.ets2-section .ets2-card--wide {
  grid-column: span 4 !important;
  min-height: 200px !important;
  border-radius: 14px !important;
}

/* Small: 1 col each */
.ets2-section .ets2-card--sm {
  min-height: 200px !important;
  border-radius: 14px !important;
}

/* ── Card base ── */
.ets2-section a.ets2-card,
.ets2-section .ets2-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  text-decoration: none !important;
  isolation: isolate !important;
  background: #111111 !important;
  transform: translateZ(0) !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  transition: transform 300ms ease, box-shadow 300ms ease !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.10) !important;
}

.ets2-section .ets2-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.18) !important;
}

.ets2-section .ets2-card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  border-radius: 0 !important;
  border: 0 !important;
  transition: transform 520ms ease !important;
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ets2-section .ets2-card:hover img {
  transform: scale(1.06) !important;
}

/* Gradient overlay */
.ets2-section .ets2-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 45%, transparent 100%) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

.ets2-section .ets2-card.is-muted img {
  filter: grayscale(1) !important;
}

/* ── Card content (bottom-left) ── */
.ets2-section .ets2-card-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 60px !important;
  z-index: 3 !important;
  padding: 20px 22px !important;
  pointer-events: none !important;
}

.ets2-section .ets2-title {
  margin: 0 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.3) !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0 !important;
}

.ets2-section .ets2-card--hero .ets2-title { font-size: 16px !important; }
.ets2-section .ets2-card--wide .ets2-title { font-size: 16px !important; }
.ets2-section .ets2-card--sm   .ets2-title { font-size: 16px !important; }

/* ── Arrow button (bottom-right) ── */
.ets2-section .ets2-arrow {
  position: absolute !important;
  bottom: 18px !important;
  right: 18px !important;
  z-index: 3 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.95) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1e1e1e !important;
  font-size: 14px !important;
  opacity: 0 !important;
  transform: translateX(-6px) !important;
  transition: opacity 250ms ease, transform 250ms ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

.ets2-section .ets2-card:hover .ets2-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .ets2-section { max-width: 760px !important; }
  .ets2-section .ets2-bento { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ets2-section .ets2-card--hero { grid-column: span 1 !important; min-height: 180px !important; }
  .ets2-section .ets2-card--wide { grid-column: span 2 !important; min-height: 180px !important; }
  .ets2-section .ets2-card--sm   { min-height: 180px !important; }
}

@media (max-width: 620px) {
  .ets2-section { padding-left: 16px !important; padding-right: 16px !important; }
  .ets2-section .ets2-bento { grid-template-columns: 1fr !important; gap: 12px !important; }
  .ets2-section .ets2-card--hero { grid-column: span 1 !important; min-height: 160px !important; border-radius: 12px !important; }
  .ets2-section .ets2-card--wide { grid-column: span 1 !important; min-height: 160px !important; border-radius: 12px !important; }
  .ets2-section .ets2-card--sm   { min-height: 160px !important; border-radius: 12px !important; }
  .ets2-section .ets2-title { font-size: 16px !important; }
  .ets2-section .ets2-header-title { font-size: 22px !important; }
  .ets2-section .ets2-header-subtitle { font-size: 15px !important; }
  .ets2-section .ets2-arrow { opacity: 1 !important; transform: translateX(0) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ets2-section .ets2-card,
  .ets2-section .ets2-card img,
  .ets2-section .ets2-arrow { transition: none !important; }
}