/* ======================================================
   EJES DE COMPETITIVIDAD — TARJETAS 3D (FLIP AL CLICK)
   Estilos aislados bajo .eco-section para no chocar con
   el theme de WordPress. Paleta tomada de la línea gráfica
   institucional (azul marino / rojo / blanco).
====================================================== */

.eco-section {
  /* Paleta tomada directamente de mitur.gob.sv (sampleada en vivo):
     el sitio es prácticamente monocromático — un solo tono marino
     (#303845) repetido en header, menú y tarjetas, más blanco y
     grises. No usan rojo ni azul como color de acento. */
  --eco-navy: #303845;
  --eco-navy-light: #3c4457;
  --eco-navy-dark: #262d38;
  --eco-white: #ffffff;
  --eco-gray: #c1c4c8;
  --eco-ink: #2b3340;
  --eco-radius: 14px;

  /* Tipografía: mitur.gob.sv usa "Museo Sans" (fuente de pago,
     autohospedada por ellos en 3 pesos: 300 para texto, 500 y 700
     para botones/énfasis) con bastante letter-spacing en títulos.
     No podemos redistribuir esa fuente sin licencia, así que la
     referenciamos por nombre —si el WordPress real ya la tiene
     cargada (como pasa en mitur.gob.sv), estas tarjetas la usarán
     automáticamente— y dejamos "Poppins" (gratuita, Google Fonts)
     como respaldo visual más cercano. Ver README.md. */
  --eco-font-light: "MuseoSans-300", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --eco-font-medium: "MuseoSans-500", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --eco-font-bold: "MuseoSans-700", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  background: var(--eco-navy);
  background-image: radial-gradient(circle at 15% 15%, rgba(255,255,255,0.04), transparent 40%),
                     radial-gradient(circle at 85% 85%, rgba(255,255,255,0.03), transparent 45%);
  padding: 72px 24px;
  font-family: var(--eco-font-light);
  font-weight: 400;
  box-sizing: border-box;
}

.eco-section *,
.eco-section *::before,
.eco-section *::after {
  box-sizing: border-box;
}

.eco-container {
  max-width: 1140px;
  margin: 0 auto;
}

.eco-header {
  text-align: center;
  margin-bottom: 48px;
}

.eco-eyebrow {
  display: inline-block;
  color: var(--eco-gray);
  font-family: var(--eco-font-medium);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.eco-title {
  color: var(--eco-white);
  font-family: var(--eco-font-light);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
  line-height: 1.2;
}

.eco-subtitle {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--eco-font-light);
  font-size: 16px;
  font-weight: 400;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Grid de tarjetas ---------- */

.eco-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}


@media (max-width: 860px) {
  .eco-cards {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
}

.eco-card {
  position: relative;
  height: 340px;
  perspective: 1400px;
  cursor: pointer;
  border-radius: var(--eco-radius);
}

.eco-card:hover .eco-card__inner {
  transform: translateY(-4px);
}

.eco-card.is-flipped .eco-card__inner {
  transform: rotateY(180deg);
}

.eco-card.is-flipped:hover .eco-card__inner {
  transform: rotateY(180deg) translateY(-4px);
}

.eco-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.eco-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--eco-radius);
  overflow: hidden;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* Solo la cara visible debe recibir clics: al estar una encima de
   la otra en el espacio 3D, dejar ambas "clicables" provoca que a
   veces el clic no vuelva a girar la tarjeta. */
.eco-card__face--back {
  pointer-events: none;
}

.eco-card.is-flipped .eco-card__face--front {
  pointer-events: none;
}

.eco-card.is-flipped .eco-card__face--back {
  pointer-events: auto;
}

.eco-card__face--front {
  background-color: var(--eco-navy);
  background-repeat: no-repeat;
  background-position: center, center;
  color: var(--eco-white);
}

.eco-card__face--back {
  background: var(--eco-navy-dark);
  color: var(--eco-white);
  transform: rotateY(180deg);
  justify-content: flex-start;
}

.eco-card__badge {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--eco-white);
  font-family: var(--eco-font-medium);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.eco-card__title {
  font-family: var(--eco-font-light);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--eco-white);
  line-height: 1.3;
  margin: 0 0 8px;
}

.eco-card__tagline {
  font-family: var(--eco-font-light);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 4px;
  line-height: 1.5;
}

.eco-card__hint {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--eco-font-light);
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}

.eco-card__detail {
  font-family: var(--eco-font-light);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 18px;
}

.eco-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--eco-white);
  font-family: var(--eco-font-medium);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: gap 0.2s ease, color 0.2s ease;
}

.eco-card__link:hover {
  gap: 10px;
  color: var(--eco-gray);
}

.eco-card__back-btn {
  margin-top: auto;
  align-self: flex-start;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--eco-font-medium);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.eco-card__back-btn:hover {
  border-color: var(--eco-white);
  color: var(--eco-white);
}

/* Fallback de accesibilidad para foco por teclado */
.eco-card:focus-visible {
  outline: 3px solid var(--eco-white);
  outline-offset: 3px;
  border-radius: var(--eco-radius);
}

.eco-card__tagline,
.eco-card__detail,
.eco-card__title,
.eco-card__face {
	text-align: left;
	text-justify: auto;
	word-spacing: normal;
}

.eco-card__face--front{background-size:cover;background-position:center;}
.eco-card--comercio .eco-card__face--front{background-image:linear-gradient(180deg,rgba(14,20,38,.22) 0%,rgba(14,20,38,.70) 52%,rgba(14,20,38,.94) 100%),url("/wp-content/uploads/2026/08/comercioExterior.jpg") !important;background-size:cover !important;background-position:center !important;}
.eco-card--inversion .eco-card__face--front{background-image:linear-gradient(180deg,rgba(14,20,38,.22) 0%,rgba(14,20,38,.70) 52%,rgba(14,20,38,.94) 100%),url("/wp-content/uploads/2026/08/pilar-facilitacion-inversiones.jpg") !important;background-size:cover !important;background-position:center !important;}
.eco-card--innovacion .eco-card__face--front{background-image:linear-gradient(180deg,rgba(14,20,38,.22) 0%,rgba(14,20,38,.70) 52%,rgba(14,20,38,.94) 100%),url("/wp-content/uploads/2026/09/Pilar-de-innovacion.jpeg") !important;background-size:cover !important;background-position:67% center !important;}