/* ============================================================================
   variante-d.css  —  TEMA D · "MEZCLA"
   Identidad Fresnillo 2024 (paleta de Elizabeth): CORAL + VIOLETA + AZUL.
   Hero = SLIDER de fotos administrable (lo NUESTRO, conservado).
   ============================================================================ */
:root {
  --azul-marino: #10173d;
  --azul-secundario: #123f91;
  --azul-claro: #6f55b8;
  --azul-tinte: #f1edf9;
  --acento: #ec3f5e;
  --acento-hover: #c93055;
  --acento-texto: #ffffff;
  --marca-violeta: #8f5fc0;
  --marca-azul: #073d95;
  --marca-coral: #ff3f57;
  --hero-min-h: 70vh;
}

/* HERO: SLIDER de fotos de edificios de Fresnillo (administrable) — CONSERVADO */
.tema-d .hero { background-color: var(--azul-marino); }
.tema-d .hero__slides { position: absolute; inset: 0; z-index: 0; }
.tema-d .hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease-in-out;
}
.tema-d .hero__slide.is-active { opacity: 1; animation: heroKenBurns 9s ease-out both; }
@keyframes heroKenBurns { from { transform: scale(1.06); } to { transform: scale(1); } }
/* Overlay para que el texto blanco siempre se lea sobre las fotos */
.tema-d .hero__slides::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,23,61,.55) 0%, rgba(12,17,78,.72) 62%, rgba(8,10,62,.86) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .tema-d .hero__slide { transition: none; animation: none; }
}
.tema-d .hero__title { letter-spacing: .5px; }
.tema-d .hero__badge { display: inline-block; background: var(--acento); color: var(--acento-texto); padding: 6px 18px; border-radius: var(--radio-full); font-weight: 700; letter-spacing: 1.5px; font-size: .78rem; margin-bottom: var(--sp-4); }

/* Accesos rápidos: 5 columnas en escritorio (SIAPASF) + marco/hover de marca */
@media (min-width: 768px) {
  .hero-accesos--cinco { grid-template-columns: repeat(5, 1fr); }
}
.tema-d .hero-accesos { border: 1px solid rgba(143,95,192,.2); box-shadow: 0 18px 38px rgba(16,23,61,.16); }
.tema-d .hero-accesos a:hover { background: linear-gradient(135deg, rgba(255,63,87,.1), rgba(111,85,184,.12)); }
.tema-d .hero-accesos--cinco img { width: 46px; height: 46px; }

/* CTA principal: botón píldora con degradado (mejora de Elizabeth) */
.tema-d .btn--primario.president-cta {
  background: linear-gradient(100deg, #ff3f72 0%, #db4bb8 52%, #1764c9 100%);
  border: 0; border-radius: 999px; padding: .9rem 2rem; font-weight: 800; color: #fff;
  box-shadow: 0 14px 28px rgba(17,45,117,.24);
}
.tema-d .btn--primario.president-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(17,45,117,.3); background: linear-gradient(100deg, #f5356a 0%, #cf42ac 52%, #1a5bc0 100%); }

/* Header / megamenú / footer con degradado institucional + línea violeta */
.tema-d .navbar { border-bottom: 3px solid var(--marca-violeta); border-image: none; }
.tema-d .topbar { background: #0a102d; }
.tema-d .site-header,
.tema-d #menuglobal-cont,
.tema-d .footer,
.tema-d .site-footer {
  background: linear-gradient(135deg, #0a102d 0%, #151b4a 48%, #073d95 100%);
}

/* Acentos de marca Fresnillo (coral / violeta / azul) */
.tema-d .seccion-titulo::after {
  background: linear-gradient(90deg, var(--marca-coral), var(--marca-violeta), var(--marca-azul));
}
.tema-d .card__author,
.tema-d .quick-access-link,
.tema-d .tramite-link,
.tema-d .dep-card__link,
.tema-d .servicio-item a.mas {
  color: var(--acento-hover);
}
.tema-d .dep-card__top { background: linear-gradient(135deg, #10173d, #6f55b8 55%, #073d95); }
.tema-d .dep-card__top::after { background: var(--acento); }

/* Botones con identidad de marca (violeta) */
.tema-d .btn--primario { background: var(--marca-violeta); color: #fff; border-color: transparent; font-weight: 800; }
.tema-d .btn--primario:hover { background: #7449ad; color: #fff; }

/* ===== MVV compacto en el Home (3 tarjetas) + íconos 3D (mejora de Elizabeth) ===== */
.mvv-home-compact { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.mvv-main-cards { max-width: 1080px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; margin-bottom: 0; }
.mvv-main-cards .flip-card { min-height: 235px; text-decoration: none; color: inherit; }
.mvv-main-cards .flip-card-inner { min-height: 235px; }
.mvv-main-cards .flip-icon { width: 84px; height: 84px; object-fit: contain; }
.mvv-values-link { cursor: pointer; }
.mvv-values-link .flip-card-front p { margin: var(--sp-2) 0 0; color: var(--texto-suave); font-size: .9rem; }
.mvv-values-link .flip-card-back .btn { margin-top: var(--sp-3); pointer-events: none; }

/* ===== Íconos 3D en accesos rápidos ===== */
.tema-d .hero-accesos--cinco img { width: 46px; height: 46px; object-fit: contain; }

/* ===== Íconos 3D más grandes (sin cajita) en trámites y quick-access del Home ===== */
.tema-d .tramites-section .tramite-icon { background: transparent; box-shadow: none; border-radius: 0; }
.tema-d .tramites-section .tramite-icon img { width: 82px; height: 82px; object-fit: contain; }
.tema-d .quick-access-icon { background: transparent; box-shadow: none; }
.tema-d .quick-access-icon img { width: 74px; height: 74px; object-fit: contain; }

/* ===== Página de Valores (valores-d.html) ===== */
.valores-page .bloque { background: transparent; border: 0; box-shadow: none; text-align: center; margin-bottom: var(--sp-6); padding: 0; }
.valores-page .bloque p { color: var(--texto); font-size: clamp(1rem, 2vw, 1.35rem); margin: 0 auto; max-width: 820px; }
.valores-grid-page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); padding-bottom: var(--sp-7); }
.valores-grid-page article { min-height: 270px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--sp-5); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.valores-grid-page img { width: 104px; height: 104px; object-fit: contain; margin-bottom: var(--sp-3); }
.valores-grid-page h2 { color: var(--azul-marino); font-size: 1.25rem; margin-bottom: var(--sp-2); }
.valores-grid-page p { color: var(--texto-suave); font-size: .96rem; line-height: 1.5; margin: 0; max-width: 31ch; }
@media (max-width: 900px) { .valores-grid-page { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .valores-grid-page, .mvv-main-cards { grid-template-columns: 1fr; } }