/* FDA - About Widget (versión final afinada)
   Reemplazar /wp-content/plugins/fda-elementor-about/assets/css/about-widget.css
*/

/* Variables */
:root{
  --fda-accent: #1b1b2f;
  --fda-accent-2: #ffcb05;
  --fda-muted: #656d78;
  --fda-bg: transparent;
  --fda-max-width: 1180px;
  --fda-gap: 28px;
  --fda-radius: 12px;
  --fda-shadow: 0 12px 30px rgba(15,18,20,0.06);
  --fda-ease: cubic-bezier(.2,.9,.3,1);
  --fda-badge-padding: 6px 10px;
  --fda-media-height: 200px; /* ajuste para mejor proporción */
  --fda-card-top-default: 110px; /* distancia por defecto para sticky */
  --wp-admin-bar-height: 0px; /* será ajustada por JS cuando aplique */
}

/* Base */
.section-about-fda, .section-about-fda *{ box-sizing: border-box; }
.section-about-fda{
  background:var(--fda-bg);
  padding:18px 12px 48px; /* reducido top */
  color:var(--fda-accent);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.section-about-fda .fda-container{
  max-width:var(--fda-max-width);
  margin:0 auto;
  padding:0 12px;
  position:relative;
}

/* Layout: más espacio para texto */
.section-about-fda__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 2fr 360px;
  gap: var(--fda-gap);
  align-items:start;
  padding-top:6px;
}

/* Constrain left column for reading comfort */
.section-about-fda__content-wrapper{ max-width:820px; }
.section-about-fda__title{ font-size:32px; margin:0 0 10px; font-weight:800; letter-spacing:-0.02em; color:var(--fda-accent); }
.section-about-fda__lead{ font-size:16px; margin:0 0 14px; font-weight:700; color:var(--fda-accent); }

/* Content paragraphs */
.section-about-fda__content p{ margin:0 0 14px; color:var(--fda-muted); font-size:15px; line-height:1.65; }
.section-about-fda__content p strong{ color:var(--fda-accent); }

/* Quote */
.section-about-fda__quote{
  display:flex; gap:12px; align-items:flex-start;
  background:linear-gradient(180deg, rgba(255,203,5,0.06), rgba(255,203,5,0.02));
  padding:12px 14px; border-radius:10px; margin:12px 0; box-shadow:var(--fda-shadow);
}
.section-about-fda__quote svg{ width:28px; height:28px; color:var(--fda-accent-2); flex:0 0 28px; }
.section-about-fda__quote p{ margin:0; color:var(--fda-accent); font-weight:600; }

/* Meta items */
.section-about-fda__meta{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; align-items:center; }
.section-about-fda__meta .meta-item{ background:#fff; padding:10px 12px; border-radius:10px; box-shadow:var(--fda-shadow); min-width:120px; text-align:center; }
.section-about-fda__meta .meta-item strong{ display:block; font-size:18px; color:var(--fda-accent); }
.section-about-fda__meta .meta-item span{ display:block; color:var(--fda-muted); font-size:13px; }

/* Actions */
.section-about-fda__actions{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }
.fda-btn{ border-radius:10px; padding:10px 16px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition: transform .18s var(--fda-ease), box-shadow .18s var(--fda-ease); }
.fda-btn--primary{ background: linear-gradient(90deg,var(--fda-accent), #2b2b4a); color:#fff; box-shadow:0 10px 30px rgba(43,43,74,0.12); }
.fda-btn--primary:hover{ transform:translateY(-3px); }
.fda-btn--outline{ background:transparent; border:1px solid rgba(27,27,47,0.06); color:var(--fda-accent); }

/* Right column: media + card */
.section-about-fda__aside{ display:flex; flex-direction:column; gap:16px; align-items:stretch; position:relative; }

/* Media */
.section-about-fda__media{ position:relative; overflow:hidden; border-radius: var(--fda-radius); box-shadow:var(--fda-shadow); background:#fff; }
.section-about-fda__media img{ width:100%; height:var(--fda-media-height); object-fit:cover; display:block; transform:scale(1.02); transition:transform .7s var(--fda-ease); border-radius: var(--fda-radius) var(--fda-radius) 0 0; }
.section-about-fda__media:hover img{ transform:scale(1.05); }

/* Badge */
.media-badge{ position:absolute; left:14px; top:14px; background:var(--fda-accent-2); padding:var(--fda-badge-padding); border-radius:999px; color:#111; font-weight:800; font-size:12px; box-shadow:0 6px 18px rgba(255,203,5,0.12); }

/* Card - sticky only cuando wrapper tenga .is-sticky (controlable desde Elementor/PHP) */
.section-about-fda__card{
  background:#fff; padding:16px; border-radius:12px; box-shadow:var(--fda-shadow); display:flex; flex-direction:column; gap:12px;
  position:static; top:auto;
}
/* compute top as default + admin bar height */
.section-about-fda.is-sticky .section-about-fda__card{
  position: sticky;
  top: calc(var(--fda-card-top-default) + var(--wp-admin-bar-height));
  z-index:5;
}

/* Card content */
.section-about-fda__card h3{ margin:0; font-size:20px; color:var(--fda-accent); }
.section-about-fda__card p{ margin:0; color:var(--fda-muted); font-size:14px; line-height:1.5; }
.section-about-fda__card ul{ margin:8px 0 12px; padding-left:18px; color:var(--fda-muted); }
.section-about-fda__card li{ margin:6px 0; }

/* Card width cap on large screens */
@media (min-width:1280px){
  .section-about-fda__card{ max-width:360px; }
}

/* Responsive */
@media (max-width:980px){
  .section-about-fda{ padding:18px 12px 36px; }
  .section-about-fda .fda-container{ padding:0 8px; }
  .section-about-fda__inner{ grid-template-columns: 1fr; gap:18px; }
  .section-about-fda__aside{ order:-1; } /* show media/card first on mobile */
  .section-about-fda__card{ position:relative; top:auto; width:100%; }
  .section-about-fda__media img{ height:180px; }
  .section-about-fda__title{ font-size:26px; text-align:center; }
  .section-about-fda__lead{ text-align:center; }
  .section-about-fda__meta{ justify-content:center; }
  .section-about-fda__actions{ justify-content:center; }
}

/* Very small screens */
@media (max-width:420px){
  .section-about-fda__media img{ height:140px; }
  .section-about-fda__title{ font-size:22px; }
  .section-about-fda__lead{ font-size:15px; }
  .section-about-fda__content p{ font-size:14px; }
}

/* subtle hover */
.section-about-fda__card:hover{ transform:translateY(-3px); box-shadow:0 20px 48px rgba(15,18,20,0.09); }

/* ========== Hide common placeholder blacks ========== */
/* 1) elementos con clase placeholder o no-image */
.section-about-fda .placeholder-box,
.section-about-fda .placeholder,
.section-about-fda .no-image,
.section-about-fda .logo-placeholder{ display:none !important; }

/* 2) imágenes con src vacío o que incluyan /placeholder/ en la URL */
.section-about-fda img[src=""],
.section-about-fda img[src*="placeholder"],
.section-about-fda img[src*="placeholder.svg"],
.section-about-fda img[src*="placehold.it"],
.section-about-fda img[src*="data:image/svg+xml;utf8,<svg"]{ display:none !important; }

/* 3) cajas vacías (común cuando el widget deja contenedores sin contenido) */
.section-about-fda .logos-grid > *:empty,
.section-about-fda .team-logos > *:empty,
.section-about-fda .widget--empty{ display:none !important; }

/* fallback: elementos con background negro dentro de la sección (precaución) */
.section-about-fda *[style*="background-color: rgb(0, 0, 0)"],
.section-about-fda *[style*="background:#000"],
.section-about-fda *[style*="background:#000000"]{ display:none !important; }

/* Accessibility focus */
.fda-btn:focus{ outline: 3px solid rgba(27,27,47,0.12); outline-offset: 3px; }

/* print adjustments */
@media print{
  .section-about-fda__media, .section-about-fda__card{ box-shadow:none; }
  .section-about-fda__meta, .section-about-fda__actions{ display:none; }
}