/* Sección "¿Quién está detrás de Bloome?" — sustituye a los 3 montajes de Framer
   (Cards-Wrap desktop / Cards-Wrap 2 tablet / móvil), que estaban desactualizados. */

.framer-1op3jex-container,
.framer-1h028kf-container,
.framer-b5cjl6-container { display: none !important; }

#bloome-equipo {
  --be-azul: #0858e2;
  --be-fondo: #f1f0ef;
  --be-ease: cubic-bezier(.44, 0, .56, 1);
  width: 100%;
  font-family: "Suisse Int'l Medium", "Suisse Int'l Medium Placeholder", sans-serif;
  font-weight: 500;
  color: var(--be-fondo);
}
/* :where() deja estos resets con especificidad 0 para que las clases de abajo manden */
:where(#bloome-equipo) * { box-sizing: border-box; }
:where(#bloome-equipo) button { all: unset; box-sizing: border-box; cursor: pointer; display: block; }
:where(#bloome-equipo) button:focus-visible { outline: 3px solid var(--be-azul); outline-offset: -3px; }
:where(#bloome-equipo) img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ficha azul (común) */
.be-card { position: relative; overflow: hidden; background: var(--be-azul); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.be-flor { position: absolute; left: -62.3%; top: -21.7%; width: 333%; height: 256.6%; transform: rotate(-15deg); pointer-events: none; }
.be-flor img { object-fit: fill; }
.be-card > *:not(.be-flor) { position: relative; }
.be-nombre { margin: 0; font-weight: 500; font-size: 48px; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; }
.be-rol { display: inline-block; margin-top: 20px; padding: 4px 12px; border-radius: 100px; background: var(--be-fondo); color: var(--be-azul); font-size: 20px; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; }
.be-bio p { margin: 0; font-size: 24px; line-height: 1.2; }
.be-bio p + p { margin-top: 1.2em; }

/* ---------- Horizontal (≥ 900px): tarjetas que se expanden al hacer clic ---------- */
.be-fila { display: flex; width: 100%; height: clamp(480px, 44.45vw, 900px); }
.be-panel { position: relative; overflow: hidden; flex: 0 0 9.17vw; min-width: 72px; transition: flex-basis .7s var(--be-ease), flex-grow .7s var(--be-ease); }
.be-panel.is-activo { flex: 1 1 0; }
.be-panel .be-tira { position: absolute; inset: 0; transition: opacity .5s var(--be-ease); }
.be-panel.is-activo .be-tira { opacity: 0; pointer-events: none; }
.be-abierto { position: absolute; inset: 0; display: grid; grid-template-columns: 48.3% 1fr; grid-template-rows: 100%; opacity: 0; transition: opacity .5s var(--be-ease) .15s; pointer-events: none; }
.be-panel.is-activo .be-abierto { opacity: 1; pointer-events: auto; }
.be-abierto .be-card { padding: 24px; }
.be-abierto .be-foto { height: 100%; min-height: 0; overflow: hidden; }
.be-abierto .be-foto img { object-position: 50% 46%; }
.be-abierto .be-card { min-height: 0; }
.be-panel:not(.is-activo) .be-tira img { transition: transform .6s var(--be-ease); }
.be-panel:not(.is-activo):hover .be-tira img { transform: scale(1.04); }

/* Tablet horizontal: tipografía proporcional */
@media (max-width: 1439.98px) {
  .be-nombre { font-size: clamp(32px, 3.33vw, 48px); }
  .be-rol { font-size: clamp(14px, 1.39vw, 20px); margin-top: 14px; }
  .be-bio p { font-size: clamp(16px, 1.67vw, 24px); }
}

/* ---------- Vertical (< 900px): franjas apiladas que se despliegan ---------- */
.be-lista { display: none; }
@media (max-width: 899.98px) {
  .be-fila { display: none; }
  .be-lista { display: block; }
}
.be-item + .be-item { border-top: 1px solid rgba(241, 240, 239, .15); }
.be-cab { position: relative; width: 100%; height: 120px; overflow: hidden; }
.be-cab img { object-position: 50% 42%; }
.be-cab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 65%); }
.be-etiqueta { position: absolute; left: 16px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.be-etiqueta strong { font-weight: 500; font-size: 20px; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; }
.be-etiqueta span { font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; opacity: .85; }
.be-mas { position: absolute; right: 16px; bottom: 14px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--be-fondo); color: var(--be-azul); display: grid; place-items: center; font-size: 20px; line-height: 1; transition: transform .4s var(--be-ease); }
.be-item.is-activo .be-mas { transform: rotate(45deg); }
.be-item.is-activo .be-etiqueta, .be-item.is-activo .be-cab::after { opacity: 0; transition: opacity .3s; }
.be-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--be-ease); }
.be-item.is-activo .be-cuerpo { grid-template-rows: 1fr; }
.be-cuerpo > div { overflow: hidden; }
.be-cuerpo .be-foto { height: min(110vw, 480px); }
.be-cuerpo .be-foto img { object-position: 50% 46%; }
.be-item.is-activo .be-cab { height: 0; }
.be-cab { transition: height .5s var(--be-ease); }
.be-cuerpo .be-card { padding: 20px 16px 24px; gap: 28px; }
.be-cuerpo .be-card .be-flor { left: -120%; top: -40%; width: 600%; height: 330%; }
@media (max-width: 899.98px) {
  .be-nombre { font-size: 32px; }
  .be-rol { font-size: 16px; margin-top: 12px; }
  .be-bio p { font-size: 18px; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .be-cab { height: 180px; }
  .be-cuerpo .be-foto { height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  #bloome-equipo * { transition: none !important; }
}