/* ============================================================
   EfecIA — Adaptación de bloques de Gutenberg al diseño original
   Hace que wp:columns, wp:group, wp:buttons y wp:list se vean
   exactamente como las tarjetas y cuadrículas del diseño original,
   sin que el cliente tenga que tocar CSS.
   ============================================================ */

/* ---- Tarjetas en grid de 4 (problema / solución) ---- */
.cards-4-edit{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.cards-4-edit > .wp-block-column{ flex-basis:auto; width:auto; margin:0; }

/* ---- Estadísticas en grid de 4 (impacto) ---- */
.stats-edit{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  position:relative;
  z-index:2;
}
.stats-edit > .wp-block-column{ flex-basis:auto; width:auto; margin:0; }
.stat{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:28px 24px;backdrop-filter:blur(6px);
}
.stat .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;margin-bottom:16px}
.stat .ic .ico{width:22px;height:22px}
.stat-title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.18rem;color:#fff;margin:0 0 8px}
.stat-title .plus{color:var(--fucsia-soft)}
.stat p{color:rgba(226,233,247,.75);font-size:.92rem;margin:0}
.stats-note{position:relative;z-index:2}

/* ---- Tarjetas de LinkedIn (3 columnas, ancho flexible tipo carrusel) ---- */
.li-cards-edit{
  display:flex !important;
  gap:22px;
  overflow-x:auto;
  padding-bottom:8px;
}
.li-cards-edit > .wp-block-column{
  flex:0 0 360px !important; width:360px !important; margin:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-sm);
}
.li-cards-edit .pin{
  font-family:'Montserrat',sans-serif;font-weight:700;color:var(--azul-noche);
  font-size:1.02rem;margin-bottom:10px;display:block;
}

/* ---- Encabezados de sección reutilizados (eyebrow + h2 + parrafo) ---- */
.section-head .eyebrow{ display:inline-flex }
.section-head h2.wp-block-heading{ font-size:clamp(1.9rem,4vw,3rem); margin:18px 0 16px }
.section-head p{ color:var(--ink-soft); font-size:1.08rem; max-width:680px }

/* En hero/impacto/contacto (fondo oscuro) el eyebrow y textos van claros */
.hero .eyebrow, .impacto .eyebrow, .contacto .eyebrow{ color:var(--fucsia-soft) }
.impacto .section-head h2.wp-block-heading{ color:#fff }
.impacto .section-head p{ color:rgba(226,233,247,.8) }
.contacto h2.wp-block-heading{ color:#fff }
.contacto .lead{ color:rgba(226,233,247,.85); font-size:1.05rem; max-width:480px; margin:14px 0 26px }

/* ---- Botones (wp:buttons / wp:button) heredan el sistema .btn ---- */
.wp-block-button .wp-block-button__link{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:.96rem;
  border-radius:999px !important;padding:15px 26px !important;
}
.wp-block-buttons{ gap:14px !important; align-items:center; flex-wrap:nowrap }
.btn-fucsia .wp-block-button__link{ background:var(--fucsia);box-shadow:0 12px 26px -12px rgba(198,26,106,.6) }
.btn-glass .wp-block-button__link{ background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.22) }
.btn-lg .wp-block-button__link{ padding:18px 34px !important;font-size:1.02rem !important }

/* ---- Lista de beneficios (contacto) con check fucsia ---- */
.offer-list{ list-style:none !important; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:12px }
.offer-list li{ position:relative; padding-left:36px; color:rgba(255,255,255,.92); font-size:1rem; font-weight:500 }
.offer-list li::before{
  content:"✓"; position:absolute; left:0; top:0; width:24px; height:24px;
  border-radius:50%; background:var(--fucsia); color:#fff; font-size:.7rem;
  display:flex; align-items:center; justify-content:center;
}

/* ---- Datos de contacto inline (cinfo, generado por shortcodes) ---- */
.cinfo{ display:flex; gap:18px; flex-wrap:wrap; color:rgba(255,255,255,.85); margin-top:10px }
.cinfo a{ text-decoration:underline; text-decoration-color:rgba(255,255,255,.3) }
.cinfo a:hover{ color:var(--fucsia-soft) }

/* ---- Essence chips (nosotros) ---- */
.essence{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px }
.echip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  background:var(--azul-tint); color:var(--azul-noche); border-radius:999px;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:.86rem;
}

/* ---- Responsive: colapsar grids editables en mobile ---- */
@media (max-width:1000px){
  .cards-4-edit{ grid-template-columns:repeat(2,1fr) !important; }
  .stats-edit{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:680px){
  .cards-4-edit{ grid-template-columns:1fr !important; }
  .stats-edit{ grid-template-columns:1fr !important; }
  .li-cards-edit > .wp-block-column{ flex-basis:300px !important; width:300px !important; }
}

/* ---- Estilos también dentro del editor de bloques (vista previa) ---- */
.editor-styles-wrapper .cards-4-edit,
.editor-styles-wrapper .stats-edit{
  display:grid !important;
}
.editor-styles-wrapper .li-cards-edit{
  display:flex !important;
}