/* =========================================================
   OIC - DECLARA IEM (CONSOLIDADO PRO)
   Archivo: public/css/oic.declara-iem.css
   Scope: .oic-di
   - Backdrop fijo detrás del nav
   - Hero robusto y centrado
   - Secciones Intro/Tipos con alineación asimétrica
   - Cards y Botones interactivos
========================================================= */

/* --- 1. FONDO GLOBAL / FULL BLEED --- */
@supports selector(body:has(.oic-di)) {
  body.oic-skin#top:has(.oic-di) {
    position: relative;
    isolation: isolate;
    background-color: #b01271 !important;
  }

  body.oic-skin#top:has(.oic-di)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(1100px 520px at 50% 10%, rgba(255,255,255,.18) 0%, transparent 72%),
      linear-gradient(180deg, rgba(235, 88, 162, .82) 0%, rgba(206, 61, 143, .90) 100%),
      url("/public/images/declaraIEM.png");
    background-size: cover;
    background-position: center 18%;
    background-repeat: no-repeat;
    background-blend-mode: screen, normal, normal;
  }

  body.oic-skin#top:has(.oic-di) .oic-shell > .main-content {
    position: relative;
    z-index: 1;
    padding: 0 !important;
    background: transparent !important;
  }

  body.oic-skin#top:has(.oic-di) .oic-footer.mt-5 {
    margin-top: 0 !important;
    border-top: 5px solid #8e0e5a;
  }
}

/* --- 2. TOKENS / BASE --- */
.oic-di {
  --di-magenta: #b01271;
  --di-magenta-deep: #8e0e5a;
  --di-dark: #111827;
  --di-white: #ffffff;
  --di-border-soft: rgba(176, 18, 113, 0.10);
  --di-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.08);
  --di-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.18);
  --di-radius-xl: 34px;
  --di-radius-pill: 999px;

  color: var(--di-white);
  background: transparent;
  display: flow-root;
  overflow-x: hidden;
}

.oic-di .oic-di-wrap {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding-inline: clamp(16px, 3vw, 40px);
}

/* --- 3. HERO (CORREGIDO PARA .oic-di) --- */
.oic-di-hero {
  padding-block: clamp(60px, 10vw, 120px);
  text-align: center;
}

.oic-di-brand {
  margin-bottom: 40px;
}

.oic-di-logo {
  width: clamp(100px, 12vw, 140px);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.24));
}

.oic-di-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: 40px;
}

.oic-di-title-icon {
  width: clamp(80px, 8vw, 110px);
  height: clamp(80px, 8vw, 110px);
  background: var(--di-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid rgba(255,255,255,0.9);
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.oic-di-title-icon img { width: 62%; }

.oic-di-divider {
  width: 2px;
  height: clamp(70px, 8vw, 100px);
  background: rgba(255,255,255,0.7);
}

.oic-di-title-copy {
  text-align: left;
}

.oic-di-title {
  font-size: clamp(38px, 6vw, 76px);
  font-weight: 950;
  line-height: 0.9;
  color: #ffffff !important;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.oic-di-subtitle {
  color: #ffffff !important;
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 600;
  margin-top: 5px;
  opacity: 1;
}

/* --- 4. BOTONES / ACCIONES --- */
.oic-di-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 38px;
}

.oic-di-btn {
  min-height: 60px;
  padding: 14px 35px;
  border-radius: var(--di-radius-pill);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-weight: 900;
  transition: transform .22s ease, box-shadow .22s ease;
}

.oic-di-btn:hover { transform: translateY(-3px); }

.oic-di-btn-primary {
  background: var(--di-white) !important;
  color: var(--di-magenta) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.18);
}

.oic-di-btn-secondary {
  background: linear-gradient(135deg, #8a38f5, #5c79ff) !important;
  border: 3px solid var(--di-white) !important;
  color: var(--di-white) !important;
}

.oic-di-btn-ic img { width: 34px; height: auto; }

.oic-di-btn-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.1;
}

.oic-di-btn-copy strong { font-size: 1.1rem; font-weight: 950; }
.oic-di-btn-copy small { font-size: .75rem; font-weight: 600; opacity: .9; }

/* --- 5. SECCIONES --- */
.oic-di-section { padding-block: clamp(50px, 8vw, 100px); }

.oic-di-heading {
  margin-bottom: 24px;
  color: #ffffff !important;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  text-align: center;
}

.oic-di-lead {
  color: #ffffff !important;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.5;
  margin-bottom: 20px;
}

.oic-di-narrow { width: min(100%, 850px); margin-inline: auto; }

/* Intro (Centrada) */
.oic-di-section-intro { text-align: center; }

/* Tipos (A la derecha) */
.oic-di-section-types .oic-di-narrow { 
    margin-right: 0; 
    text-align: right; 
}
.oic-di-section-types .oic-di-heading,
.oic-di-section-types .oic-di-lead { text-align: right; }

/* --- 6. CARDS (RE-CUADRADAS) --- */
.oic-di-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 72px;
}

.oic-di-card {
  position: relative;
  background: var(--di-white) !important;
  border-radius: var(--di-radius-xl);
  padding: 95px 32px 48px;
  color: var(--di-dark);
  text-align: center;
  box-shadow: var(--di-shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}

.oic-di-card:hover { transform: translateY(-10px); box-shadow: var(--di-shadow-lg); }

.oic-di-card-icon {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  width: 105px;
  height: 105px;
  background: var(--di-white);
  border: 5px solid var(--di-magenta) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(176,18,113,.15);
  z-index: 2;
}

.oic-di-card-icon img { width: 55%; }

.oic-di-card-title {
  color: var(--di-dark) !important;
  font-size: 1.6rem;
  font-weight: 950;
  margin-bottom: 15px;
}

.oic-di-card-text {
  color: var(--di-magenta) !important;
  font-weight: 600;
}

/* --- 7. LISTA --- */
.oic-di-list {
  list-style: none;
  padding: 0;
}

.oic-di-list li {
  position: relative;
  padding-left: 45px;
  margin-bottom: 20px;
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.4;
  text-align: left;
}

.oic-di-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: -6px;
  font-size: 2.5em;
  color: #ffffff;
}

/* --- 8. RESPONSIVE --- */
@media (max-width: 991px) {
  .oic-di-title-row { flex-direction: column; }
  .oic-di-title-copy { text-align: center; }
  .oic-di-divider { width: 100px; height: 2px; }
}

@media (max-width: 640px) {
  .oic-di-actions { flex-direction: column; align-items: stretch; }
  .oic-di-btn { width: 100%; text-align: center; }
  .oic-di-btn-copy { align-items: center; text-align: center; }
}