:root{
  --radius: 16px;
  --card-bg: #141417;
  --card-bd: #26262b;
  --surface: #0b0b0c;
  --ink: #fff;
  --muted: #b3b4ba;
  --accent: #6aa6ff;
  --inner-pad: clamp(12px, 2vw, 18px);
}

* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

/* Scope a #objetivos */

#objetivos * { color: inherit; }

section#objetivos { padding: clamp(24px, 4vw, 56px) 16px; max-width: 1200px; margin: 0 auto; }
section#objetivos h2 { margin:0 0 8px; font-size: clamp(22px, 2.6vw, 32px); line-height:1.2; }
section#objetivos p.lead { margin:0 0 20px; color: var(--muted); font-size: clamp(14px, 1.6vw, 18px); }

/* Carrusel .diapo */
#objetivos .diapo { position: relative; overflow: hidden; border-radius: calc(var(--radius) + 2px); }
#objetivos .diapo__track {
  display: flex;
  gap: 0;
  /* Evitar scroll horizontal del usuario */
  overflow-x: hidden;
  touch-action: pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#objetivos .diapo__track::-webkit-scrollbar { display: none; }

/* Un slide por vista */
#objetivos .slide {
  flex: 0 0 100%;
  max-width: 100%;
  border-radius: var(--radius);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "media"
    "content";
  align-items: start;
}

#objetivos .slide__inner { display: contents; }
#objetivos .slide__media-wrap,
#objetivos .slide__content-wrap { padding: var(--inner-pad); }

@media (min-width: 900px) {
  #objetivos .slide {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "media content";
  }
}

/* Media (izquierda) */
#objetivos .slide__media-wrap { grid-area: media; }
#objetivos .slide__media {
  width: 100%;
  border-radius: 12px;
  background:#1f1f24;
  border:1px solid #2a2a2e;
  overflow: hidden;
  display: grid;
  place-items: center;
  color:#7b7b85;
  font-weight: 600;
  aspect-ratio: 1/1; /* cambia a 1/1 + object-fit:contain si tus imágenes son cuadradas */
}
#objetivos .slide__media img{ width:100%; height:100%; object-fit: contain; display:block; }

/* Content (derecha) */
#objetivos .slide__content-wrap { grid-area: content; }
#objetivos .kicker { color: var(--accent); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; border: 1px solid; width:fit-content; padding: 10px; border-radius:10px; background-color: var(--accent); color: #ffffff;}
#objetivos .slide__title { margin: 0 0 8px; font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; line-height: 1.25; }
#objetivos .slide__text { margin: 0; color: #000000; font-size: clamp(14px, 1.8vw, 16px); }
#objetivos .badges { margin-top: 10px; display:flex; gap:8px; flex-wrap: wrap; }
#objetivos .badge { padding: 4px 8px; background: #1a1a1f; border: 1px solid #2a2a2e; border-radius: 999px; font-size: 12px; color: #e7e7ea; }

/* Controles */
#objetivos .diapo__controls { display:flex; align-items:center; justify-content: space-between; margin-top: 12px; gap: 12px; }
#objetivos .btn {
  background:#1a1a1f; color:#fff; border:1px solid #2a2a2e;
  padding: 10px 14px; border-radius: 10px; cursor: pointer; min-width:44px; min-height:36px;
  display:inline-flex; align-items:center; justify-content:center;
}
#objetivos .btn:hover { background:#1c1c22; }
#objetivos .btn:disabled { opacity:.45; cursor:not-allowed; }

/* Dots */
#objetivos .sld-dots { 
  display:flex !important; gap:8px !important; align-items:center !important; 
  flex:1 !important; justify-content:center !important; 
  opacity:1 !important; visibility: visible !important;
}
#objetivos .sld-dot { 
  display:inline-block !important; width:10px !important; height:10px !important; 
  border-radius:999px !important; 
  background:#2d2d33 !important; border:1px solid #3a3a42 !important; 
}
#objetivos .sld-dot.is-active { background: var(--accent) !important; border-color: var(--accent) !important; }