/* Ajustes de legibilidad. Se carga después del CSS compilado de la landing. */
@media (min-width: 801px) {
  body.freno-sale #root p {
    font-size: 1.24rem !important;
    line-height: 1.82 !important;
  }

  body.freno-sale #root p[style*="font-size: 0.78rem"],
  body.freno-sale #root p[style*="font-size: 0.875rem"],
  body.freno-sale #root p[style*="font-size: 0.9rem"] {
    font-size: 1.08rem !important;
    line-height: 1.75 !important;
  }

  body.freno-sale #root span[style*="font-size: 0.78rem"],
  body.freno-sale #root span[style*="font-size: 0.875rem"] {
    font-size: 1.08rem !important;
    line-height: 1.6 !important;
  }

  body.freno-sale #root button span {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
  }

  body.freno-sale #root .text-xs { font-size: 1rem !important; }
  body.freno-sale #root .text-sm { font-size: 1.08rem !important; }
  body.freno-sale #root .quote-block { font-size: 1.18rem !important; line-height: 1.8 !important; }
  body.freno-sale #root .btn-amber { font-size: 1.1rem !important; }
  body.freno-sale #root small { font-size: 1rem !important; }

  body.freno-sale #root h2 { font-size: clamp(2rem, 3.5vw, 2.9rem) !important; }
  body.freno-sale #root h3 { font-size: clamp(1.6rem, 2.6vw, 2.05rem) !important; }
}

@media (max-width: 800px) {
  body.freno-sale #root p { font-size: 1.08rem !important; line-height: 1.75 !important; }
  body.freno-sale #root .quote-block { font-size: 1.08rem !important; }
}

/* Selector de idioma compartido por la venta, los recursos y la app. */
.freno-language-picker {
  align-items: center;
  backdrop-filter: blur(14px);
  background: rgba(13, 13, 13, .88);
  border: 1px solid rgba(255, 138, 0, .28);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
  display: flex;
  gap: 3px;
  padding: 4px;
  position: fixed;
  right: 18px;
  top: 16px;
  z-index: 9999;
}

.freno-language-picker-label {
  color: rgba(255, 255, 255, .72);
  font: 600 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  margin: 0 4px 0 7px;
  text-transform: uppercase;
}

.freno-language-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, .84);
  cursor: pointer;
  display: inline-flex;
  font: 700 11px/1 Inter, system-ui, sans-serif;
  gap: 4px;
  min-height: 30px;
  padding: 5px 7px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.freno-language-button:hover,
.freno-language-button:focus-visible {
  background: rgba(255, 138, 0, .16);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.freno-language-button[aria-pressed="true"] {
  background: #ff8a00;
  color: #111;
}

.freno-language-flag {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .35);
  display: inline-block;
  flex: 0 0 auto;
  height: 12px;
  overflow: hidden;
  position: relative;
  width: 18px;
}

/* Banderas CSS: se ven igual aunque el sistema no tenga emojis de países. */
.freno-language-flag.flag-es {
  background: linear-gradient(to bottom, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}

.freno-language-flag.flag-it {
  background: linear-gradient(to right, #009246 0 33.333%, #fff 33.333% 66.666%, #ce2b37 66.666% 100%);
}

.freno-language-flag.flag-fr {
  background: linear-gradient(to right, #0055a4 0 33.333%, #fff 33.333% 66.666%, #ef4135 66.666% 100%);
}

.freno-language-flag.flag-de {
  background: linear-gradient(to bottom, #000 0 33.333%, #dd0000 33.333% 66.666%, #ffce00 66.666% 100%);
}

.freno-language-flag.flag-en {
  background:
    linear-gradient(90deg, transparent 41%, #fff 41% 59%, transparent 59%),
    linear-gradient(0deg, transparent 34%, #fff 34% 66%, transparent 66%),
    linear-gradient(32deg, transparent 43%, #c8102e 43% 49%, transparent 49% 51%, #c8102e 51% 57%, transparent 57%),
    linear-gradient(-32deg, transparent 43%, #c8102e 43% 49%, transparent 49% 51%, #c8102e 51% 57%, transparent 57%),
    linear-gradient(90deg, transparent 45%, #c8102e 45% 55%, transparent 55%),
    linear-gradient(0deg, transparent 35%, #c8102e 35% 65%, transparent 65%),
    #012169;
}

@media (max-width: 800px) {
  .freno-language-picker { right: 10px; top: 10px; }
  .freno-language-picker-label { display: none; }
  .freno-language-button { min-height: 28px; padding: 4px 6px; }
}
