/* FisioBioAcu.3 · sistema Mensajes/Ideas.
 * Preserva los PNG originales, patrones y clases de bloques ya publicados.
 * Las reglas solo afectan a las dos familias 08/09, NO al resto del tema.
 * Entera y Media usan un único árbol Gutenberg; al pasar a móvil cambia
 * exclusivamente la composición mediante CSS, sin duplicar el contenido.
 */

/* Ancho completo y proporción de las versiones insertables independientes. */
.fba-hi-banner--entera,
.fba-hi-new--entera,
.fba-msg-v3--entera {
  box-sizing:border-box;
  width:100%; max-width:100%;
}
.fba-hi-banner--media,
.fba-hi-new--media,
.fba-msg-v3--media,
.fba-idea-media-art {box-sizing:border-box; width:100%; max-width:580px;}

/* Entrada en las zonas editables: el foco no puede depender del hover. */
.fba-hi-banner :is(a,button):focus-visible,
.fba-hi-new :is(a,button):focus-visible,
.fba-msg-v3 :is(a,button):focus-visible {outline:3px solid var(--fba-marfil,#FFFAF3);outline-offset:2px;box-shadow:0 0 0 6px var(--fba-berenjena,#7E2C7F);}

/* ALTA 1–2: los dos Mensajes de anchura entera pasan a su fondo vertical
 * aprobado, no a un recorte de la imagen de escritorio. Su copy editable
 * pasa al flujo de la composición media (sin crear una segunda copia). */
@media (max-width:700px) {
  .fba-hi-banner--alta-1-entera {
    background-image:url('../../media/high-intensity/alta-1-media.png');
    background-position:center; background-size:cover;
  }
  .fba-hi-banner--alta-2-entera {
    background-image:url('../../media/high-intensity/alta-2-media.png');
    background-position:center; background-size:cover;
  }
  .fba-hi-banner--entera:is(.fba-hi-banner--alta-1-entera,.fba-hi-banner--alta-2-entera) {
    min-height:660px;
    padding:clamp(24px,6vw,36px) clamp(18px,5vw,28px);
    display:flex; flex-direction:column; align-items:stretch;
  }
  .fba-hi-banner--entera:is(.fba-hi-banner--alta-1-entera,.fba-hi-banner--alta-2-entera) .fba-hi-banner__copy {
    width:100%; min-height:580px;
    display:flex; flex-direction:column; align-items:flex-start;
  }
  .fba-hi-banner--entera:is(.fba-hi-banner--alta-1-entera,.fba-hi-banner--alta-2-entera) .fba-hi-banner__title {
    max-width:9.5ch; font-size:clamp(32px,8vw,44px);
  }
  .fba-hi-banner--entera:is(.fba-hi-banner--alta-1-entera,.fba-hi-banner--alta-2-entera) .fba-hi-banner__body {
    max-width:23ch; font-size:clamp(17px,3.7vw,19px);
  }
  .fba-hi-banner--alta-1-entera .fba-hi-banner__buttons {margin-top:auto;padding-top:24px;}
  /* ALTA 2: el texto lateral deja de ocultarse; participa en el flujo como en Media. */
  .fba-hi-banner--alta-2-entera .fba-hi-banner__copy {display:contents;}
  .fba-hi-banner--alta-2-entera .fba-hi-banner__aside {
    display:block; position:static; order:1; align-self:flex-end;
    width:min(44%,14ch); margin:auto 0 16px;
    color:#20CEC7; font-size:clamp(17px,4.1vw,25px);
    text-align:right;
  }
  .fba-hi-banner--alta-2-entera .fba-hi-banner__buttons {
    order:2; width:100%; margin:0; padding-top:0;
  }
  /* Los botones permanecen en el mismo árbol de bloques en ambas versiones. */
  .fba-hi-banner--entera .fba-hi-banner__buttons {flex-wrap:wrap;gap:10px;}

  /* ALTA 3: reproduce la columna centrada de la Idea a destacar, no solo su PNG. */
  .fba-hi-new--cta-d.fba-hi-new--entera {
    min-height:550px; padding:clamp(28px,5vw,40px) clamp(22px,5vw,36px);
    background-position:center;
  }
  .fba-hi-new--cta-d.fba-hi-new--entera .fba-hi-new__copy {
    width:100%;max-width:100%;min-width:0;
  }
  .fba-hi-new--cta-d.fba-hi-new--entera .fba-hi-new__title {
    max-width:11ch; font-size:clamp(32px,8vw,44px);
  }
  .fba-hi-new--cta-d.fba-hi-new--entera .fba-hi-new__body {max-width:25ch;}

  /* ALTA 4: mismo fondo Media original y misma ubicación del texto sobre el
   * post-it berenjena. Nunca se cambia por el diseño Post-it claro. */
  .fba-hi-new--postit-berenjena.fba-hi-new--entera {
    aspect-ratio:422 / 384;
    background-size:100% 100%;background-position:center;
  }
  .fba-hi-new--postit-berenjena.fba-hi-new--entera .fba-hi-new__copy {
    top:25%;bottom:27%;left:30%;width:42%;
  }
  .fba-hi-new--postit-berenjena.fba-hi-new--entera .fba-hi-new__title {
    font-size:clamp(26px,8.4vw,43px);
  }

  /* La Idea independiente ocupa una columna en escritorio y el ancho móvil. */
  .fba-hi-banner--media,
  .fba-hi-new--media,
  .fba-msg-v3--media,
  .fba-idea-media-art {max-width:100%;}
}

/* Ideas a destacar M2 y M4. Solo formato media página.
   Los dos artes conservan la imagen original sin textos superpuestos ni recortes CSS.
   En un contenedor de dos columnas ocupan una columna; en móvil, el ancho disponible. */
.fba-idea-media-art {
  margin:0;
  padding:0; background:transparent;
}
.fba-idea-media-art .fba-idea-media-art__image {
  display:block; width:100%; max-width:100%; margin:0;
}
.fba-idea-media-art .fba-idea-media-art__image img {
  display:block; width:100%; max-width:100%; height:auto;
  object-fit:contain; border:0;
}

/* Contenedor editable y dos ideas independientes, integrados sin plugin. */
/* Mensajes destacados / Ideas a destacar: fondos separados, texto nativo Gutenberg. */
.fba-highlight-shell { box-sizing:border-box; max-width:100%; margin-block:0; }
.fba-highlight-shell--full { width:100%; max-width:none; }
.fba-highlight-shell--half { width:100%; max-width:580px; }
.fba-highlight-shell > .wp-block-group { max-width:100%; }
.fba-highlight-shell--half > .wp-block-group { width:100%; }
/* El CSS global solo aplica fondos personalizados cuando la usuaria los selecciona en Medios. */
@media (min-width:701px) {
  .fba-highlight-shell[data-has-desktop="1"] > .wp-block-group {
    background-image:var(--fba-user-bg-desktop) !important;
  }
}
@media (max-width:700px) {
  .fba-highlight-shell--full,
  .fba-highlight-shell--half { width:100%; max-width:100%; }
  .fba-highlight-shell[data-has-mobile="1"] > .wp-block-group {
    background-image:var(--fba-user-bg-mobile) !important;
  }
  /* When only the desktop image is custom, don't leave a blank mobile background.
     The original mobile image continues to apply until a mobile replacement is selected. */
}
/* Optional half-page independent ideas: clean artwork and native editable text. */
.fba-idea-media-editable {
  position:relative; isolation:isolate; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  width:100%; max-width:580px; min-height:0; aspect-ratio:719/541;
  margin:0; padding:16% 13%; color:var(--fba-berenjena-intenso,#9A2FA0);
  background-color:#fff; background-repeat:no-repeat;
  background-size:100% 100%; background-position:center;
}
.fba-idea-media-editable--m2 {
  background-image:url('../../media/ideas-media/m2-cuadro-doble-fondo-editable.png');
}
.fba-idea-media-editable--m4 {
  aspect-ratio:719/498; padding:12% 9% 20%;
  background-image:url('../../media/ideas-media/m4-impacto-tipografico-fondo-editable.png');
}
.fba-idea-media-editable .fba-idea-media-editable__eyebrow {
  margin:0 0 .15em; font:700 clamp(14px,1.35vw,18px)/1.3 "Atkinson Hyperlegible Next",system-ui,sans-serif;
  letter-spacing:.15em; color:var(--fba-berenjena-intenso,#9A2FA0);
}
.fba-idea-media-editable .fba-idea-media-editable__title {
  margin:0; max-width:100%; color:var(--fba-berenjena-intenso,#9A2FA0);
  font:700 clamp(32px,3.2vw,44px)/1.15 Cardo,Georgia,serif;
  text-wrap:balance; overflow-wrap:anywhere;
}
.fba-idea-media-editable .fba-idea-media-editable__accent {color:#B80069;}
.fba-idea-media-editable--m4 .fba-idea-media-editable__title {
  font-size:clamp(32px,3.2vw,44px); font-style:italic;
}
.fba-idea-media-editable--m4 .fba-idea-media-editable__accent {color:#168F8B;}

/* Contraste canónico de componentes sobre fondos oscuros.
   La jerarquía global de encabezados no debe recolorear estos títulos. */
:is(body .fba-main .wp-block-post-content,.editor-styles-wrapper .is-root-container) .fba-hi-banner .fba-hi-banner__title,
:is(body .fba-main .wp-block-post-content,.editor-styles-wrapper .is-root-container) .fba-hi-new--cta-d .fba-hi-new__title,
:is(body .fba-main .wp-block-post-content,.editor-styles-wrapper .is-root-container) .fba-hi-new--postit-berenjena .fba-hi-new__title {
  color:#FFFAF3!important;
  -webkit-text-fill-color:#FFFAF3!important;
}
@media (max-width:700px) {
  .fba-idea-media-editable {padding:16% 12%;}
  .fba-idea-media-editable--m4 {padding:12% 9% 20%;}
  .fba-idea-media-editable .fba-idea-media-editable__title {font-size:clamp(30px,8.5vw,44px);}
  .fba-idea-media-editable--m4 .fba-idea-media-editable__title {font-size:clamp(30px,9vw,44px);}
  .fba-idea-media-editable .fba-idea-media-editable__eyebrow {font-size:clamp(14px,2.8vw,16px);}
}