{% scope_css %}

/* ===== GRID RESPONSIVO ===== */
.fg4-wrap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  margin:0 auto;
  align-items:stretch;
}
@media (max-width:1024px){
  .fg4-wrap{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .fg4-wrap{ grid-template-columns:1fr; gap:1.25rem; }
}

/* ===== CARD (ALTO FIJO, SIN BORDER RADIUS) ===== */
.fg4-card{
  position:relative;
  width:100%;
  height:350px;
  min-height:350px;
  perspective:1000px;
  cursor:pointer;
  outline:none;
  border-radius:0;            /* <-- sin radios */
}

.fg4-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 600ms ease-in-out;
  border-radius:0;            /* <-- sin radios */
}

/* Flip hover desktop */
.fg4-card:hover .fg4-card-inner{ transform:rotateY(180deg); }
.fg4-card:nth-child(even):hover .fg4-card-inner{ transform:rotateY(-180deg); }

/* Flip tap/click (JS) */
.fg4-card.is-flipped .fg4-card-inner{ transform:rotateY(180deg); }
.fg4-card:nth-child(even).is-flipped .fg4-card-inner{ transform:rotateY(-180deg); }

/* ===== FACES ===== */
.fg4-face{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  width:100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  border-radius:0;            /* <-- sin radios */
  overflow:hidden;
}

/* ===== FRONT ===== */
.fg4-face-front{
  color:#fff;
  text-align:center;
  font-family:Poppins,sans-serif;
  position:relative;
}

.fg4-media{
  position:relative;
  width:100%;
  height:100%;
}

/* Imagen full cover FORZADO (para ganarle a inline styles/attrs) */
img.fg4-bg-img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:0 !important;  /* por si acaso */
}

/* Overlay azul MULTIPLY (con fallback) */
.fg4-filter{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;

  background-color: #004876 !important;
  mix-blend-mode: multiply !important;
  opacity: 0.8 !important;
  pointer-events: none;
}

@supports not (mix-blend-mode: multiply){
  .fg4-filter{
    background-color: rgba(0, 72, 118, 0.8) !important;
  }
}

/* Headline centrado en todo el frente (rich text con important) */
.fg4-rt-title,
.fg4-rt-title *{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;

  font-size:1.6rem !important;
  font-weight:700 !important;
  color:#fff !important;
  margin:0 !important;
  line-height:1.2 !important;
  padding:2rem !important;
}

/* ===== BACK ===== */
.fg4-face-back{
  background:#ff844f;
  padding:1rem;
  transform:rotateY(180deg);
  text-align:center;

}

.fg4-back-content{
  max-width:90%;
  margin:0 auto;
}

/* Description rich text con important */
.fg4-rt-body,
.fg4-rt-body *{
  margin:0 0 1rem 0 !important;
  line-height:1.4 !important;
  font-size:1rem !important;
}
.fg4-rt-body *:last-child{ margin-bottom:0 !important; }

/* CTA */
.fg4-cta{
  display:inline-block;
  padding:.75rem 1.25rem;
  border-radius: 50px !important;                 /* <-- sin radios */
  text-decoration:none;
  background-color: rgba(0, 72, 118, 1.0) !important;  /* <-- azul */
  color:#fff !important;
  font-weight:600;
  transition:background-color 200ms ease, color 200ms ease, transform 200ms ease, opacity 200ms ease;
  margin-top:.75rem;
}

.fg4-cta:hover{
  background-color:#fff !important;          /* <-- fondo blanco */
  color: rgba(0, 72, 118, 1.0) !important;   /* <-- texto azul */
  transform:translateY(-2px);
  opacity:.95;
}


{% end_scope_css %}