/* 3A Quienes Somos */
.threea-quienes__inner{margin:0 auto;padding:0 20px}
.threea-quienes__cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.threea-quienes__cols--rev{grid-template-columns:1fr 1fr}
.threea-quienes__cols--rev .threea-quienes__col--media{order:2}
.threea-quienes__cols--rev .threea-quienes__col--text{order:1}
.threea-quienes__circle{position:relative;width:var(--size,420px);height:var(--size,420px);border-radius:9999px;overflow:hidden;margin:0 auto}
.threea-quienes__img{width:100%;height:100%;object-fit:cover;display:block}
.threea-quienes__play{position:absolute;inset:0;margin:auto;width:88px;height:88px;border-radius:9999px;border:none;cursor:pointer;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.2);transition:transform .2s ease, background .2s ease}
.threea-quienes__play:hover{transform:scale(1.06);background:#fff}
.threea-quienes__play-icon{display:block;width:0;height:0;border-left:26px solid #1f2937;border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:6px}
.threea-quienes__title{line-height:1.1;margin:0 0 8px}
.threea-quienes__subtitle{line-height:1.15;margin:0 0 14px}
.threea-quienes__desc{color:#243b53}

/* Modal */
.threea-modal{position:fixed;inset:0;z-index:9999;display:none}
.threea-modal[hidden]{display:none}
.threea-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.threea-modal__dialog{position:relative;width:min(960px,90vw);height:min(60vh,56.25vw);margin:10vh auto 0;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.threea-modal__close{position:absolute;top:8px;right:12px;color:#fff;background:transparent;border:none;font-size:36px;line-height:1;cursor:pointer;z-index:2}
.threea-modal__content, .threea-modal__content iframe, .threea-modal__content video{position:absolute;inset:0;width:100%;height:100%}

@media (max-width: 900px){
  .threea-quienes__cols{grid-template-columns:1fr;gap:28px}
  .threea-quienes__circle{--size:320px}
}

/* --- Enhancements for responsive behavior --- */

/* Between 1200px and 990px: add a gentle left padding so two WPBakery columns don't crash into the edge */
@media (max-width: 1200px) and (min-width: 990px){
  .threea-quienes .threea-quienes__inner{padding-left: 28px}
}

/* Up to 768px: stack safely and cap sizes */
@media (max-width: 768px){
  .threea-quienes__cols{grid-template-columns: 1fr; gap: 24px}
  .threea-quienes__col--media,
  .threea-quienes__col--text{width: 100%}
  .threea-quienes__circle{--size: 300px}
  .threea-quienes__title{font-size: clamp(20px, 5vw, 28px)}
  .threea-quienes__subtitle{font-size: clamp(16px, 4.2vw, 20px)}
}

/* Up to 480px: force full-width and fluid media; fix older mobile layouts */
@media (max-width: 480px){
  .threea-quienes,
  .threea-quienes * {box-sizing: border-box}
  .threea-quienes .threea-quienes__inner{padding-left: 16px; padding-right: 16px}
  .threea-quienes__cols{display:block}
  .threea-quienes__col--media,
  .threea-quienes__col--text{display:block;width:100%;max-width:100%}
  .threea-quienes__circle{--size: 260px; width: var(--size); height: var(--size)}
  .threea-quienes img,
  .threea-quienes video{max-width:100%;height:auto}
  .threea-quienes .wpb_content_element{margin-bottom: 16px}
}

/* Up to 360px: reduce circle a bit more to avoid overflow on very small/old phones */
@media (max-width: 360px){
  .threea-quienes__circle{--size: 220px}
}