/* fix-phrases-breaks.css
   Ajuste para evitar solapamiento con iconos laterales
   ✅ FIX DEFINITIVO:
   - Los iconos ahora son flotantes (absolute), por tanto NO debemos reservar columna a la derecha.
   - Eliminamos padding-right dependiente de --icon-column-width.
   - Mantenemos reglas anti-hyphen/anti-break agresivas solo para el contenedor marcado.
*/

:root{
  --frase-max-width: 44ch;
  --frase-color: #072b2a;
  --frase-font-weight: 800;
  --frase-line-height: 1.06;
  --icon-column-width: 72px; /* legacy: ya NO se usa para padding-right */
}

/* Caja de frase: reglas de protección pero NO tocar .frase-text directamente.
   Aplicamos solo a elementos que usan explícitamente .frc-fix-no-hyphen */
.frc-fix-no-hyphen{
  word-break: normal !important;
  overflow-wrap: anywhere !important; /* ✅ evita palabras largas rompiendo layout */
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;

  /* ✅ importante: el texto NO debe forzar columna vertical */
  white-space: normal !important;
  display: block !important;

  margin-left: auto !important;
  margin-right: auto !important;

  /* ✅ no reservar espacio para iconos flotantes */
  max-width: min(var(--frase-max-width), calc(100% - 32px)) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;

  text-align: center !important;

  font-weight: var(--frase-font-weight) !important;
  line-height: var(--frase-line-height) !important;
  font-size: clamp(22px, 4.8vw, 56px) !important;
  color: var(--frase-color) !important;

  transition: color 240ms ease, text-shadow 240ms ease;
  text-shadow: 0 2px 0 rgba(0,0,0,0.06);
}

/* ajustes móviles */
@media (max-width: 520px){
  .frc-fix-no-hyphen{
    max-width: min(36ch, calc(100% - 24px)) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: clamp(18px, 6.5vw, 36px) !important;
    line-height: 1.08 !important;
  }
}

/* ✅ Protección extra SOLO para el elemento real (por si otro archivo vuelve a setearlo) */
#frase-text.frc-fix-no-hyphen{
  white-space: normal !important;
  width: auto !important;
}