/* ==========================================================================
   Sección "Banner destacado" — se dibuja con js/banner-section.js
   Medidas del original: 600px de alto, panel blanco de 500px con una cuña
   diagonal de 115px, sello rojo de 191px girado 20° y botón morado de 165×50.
   ========================================================================== */

.feature-banner {
  --fb-h: 600px;
  --fb-panel-w: 500px;
  --fb-wedge: 115px;
  --fb-panel-bg: #fff;
  --fb-title: #d72d2d;
  --fb-text: #000;
  --fb-highlight: #751fff;
  --fb-kicker-bg: #d72d2d;
  --fb-kicker-text: #fff;
  --fb-badge-bg: #d72d2d;
  --fb-badge-color: #fff;
  --fb-badge-rotate: 20deg;
  --fb-badge-size: 191px;

  padding: 0 40px 48px;
}

.feature-banner[hidden] { display: none; }

.feature-banner__box {
  position: relative;
  display: flex;
  justify-content: flex-end;
  min-height: var(--fb-h);
  overflow: hidden;
  background: #949494; /* color de fondo mientras carga la imagen (color_13) */
}
.feature-banner--panel-left .feature-banner__box { justify-content: flex-start; }

.feature-banner__media { position: absolute; inset: 0; }
.feature-banner__media picture { display: contents; }

.feature-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}

/* ---------- Panel con borde diagonal ---------- */

.feature-banner__panel {
  position: relative;
  display: flex;
  width: calc(var(--fb-panel-w) + var(--fb-wedge));
  max-width: 60%;
  min-height: var(--fb-h);
}

/* Fondo blanco recortado: arriba ocupa la cuña entera, abajo casi nada (como el vector del original) */
.feature-banner__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--fb-panel-bg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--fb-wedge) - 5px) 100%);
}
/* Panel a la izquierda: la cuña va invertida (estrecha arriba, ancha abajo), como el vector girado del original */
.feature-banner--panel-left .feature-banner__panel::before {
  clip-path: polygon(0 0, calc(100% - var(--fb-wedge) + 5px) 0, 100% 100%, 0 100%);
}

.feature-banner__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 130px 48px 64px calc(var(--fb-wedge) + 64px);
  color: var(--fb-text);
}
.feature-banner--panel-left .feature-banner__content {
  padding: 104px calc(var(--fb-wedge) + 32px) 64px 56px;
}

/* Etiqueta resaltada (como "Mejores precios" del slider) */
.feature-banner__kicker {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.4;
}
.feature-banner__kicker span {
  padding: 0 .3em;
  background: var(--fb-kicker-bg);
  color: var(--fb-kicker-text);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* font_5 del original: Avenir Heavy */
.feature-banner__title {
  margin: 0 0 48px;
  color: var(--fb-title);
  font-size: 48px;
  font-weight: 700;
  line-height: normal;
}
.feature-banner__title--md {
  margin-bottom: 14px;
  font-size: 30px;
}

/* font_0 del original: Avenir Heavy 90px */
.feature-banner__highlight {
  margin: 0 0 8px;
  color: var(--fb-highlight);
  font-size: 90px;
  font-weight: 800;
  line-height: 1;
}

.feature-banner__subtitle {
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
}

.feature-banner__text {
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.4;
  white-space: pre-line;
}

.feature-banner__list {
  margin: 0;
  padding: 0 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
}
.feature-banner__list a { transition: color .3s ease; }
.feature-banner__list a:hover { color: #751fff; }

.feature-banner__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding: 40px 0 0 26px;
}
.feature-banner__buttons .cms-btn { min-width: 165px; }

/* ---------- Sello circular ---------- */

.feature-banner__badge {
  position: absolute;
  top: 61px;
  left: calc(var(--fb-badge-size) * -0.44);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--fb-badge-size);
  height: var(--fb-badge-size);
  margin: 0;
  border-radius: 50%;
  background: var(--fb-badge-bg);
  color: var(--fb-badge-color);
  box-shadow: 0 7px 15px rgba(0, 0, 0, .28);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}
.feature-banner__badge span {
  display: block;
  max-width: 80%;
  white-space: pre-line;
  transform: rotate(var(--fb-badge-rotate));
}
.feature-banner--panel-left .feature-banner__badge {
  left: auto;
  right: calc(var(--fb-badge-size) * -0.44);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .feature-banner { --fb-panel-w: 380px; --fb-wedge: 80px; --fb-badge-size: 150px; padding: 0 24px 32px; }
  .feature-banner__content { padding-top: 100px; padding-right: 32px; padding-left: calc(var(--fb-wedge) + 40px); }
  .feature-banner--panel-left .feature-banner__content { padding: 72px calc(var(--fb-wedge) + 24px) 48px 40px; }
  .feature-banner__title { font-size: 40px; margin-bottom: 32px; }
  .feature-banner__title--md { font-size: 26px; margin-bottom: 12px; }
  .feature-banner__highlight { font-size: 68px; }
  .feature-banner__subtitle { font-size: 24px; }
  .feature-banner__list { font-size: 24px; }
  .feature-banner__badge { font-size: 24px; }
}

/* Móvil: foto arriba, sello entre la foto y el panel, panel debajo sin diagonal */
@media (max-width: 700px) {
  .feature-banner { --fb-badge-size: 128px; padding: 0 0 16px; }

  .feature-banner__box {
    flex-direction: column;
    min-height: 0;
    background: var(--fb-panel-bg);
  }

  .feature-banner__media {
    position: relative;
    aspect-ratio: 4 / 3;
  }
  .feature-banner__img { object-position: var(--focal-mobile, var(--focal, 50% 50%)); }

  .feature-banner__panel {
    width: 100%;
    max-width: none;
    min-height: 0;
  }
  .feature-banner__panel::before,
  .feature-banner--panel-left .feature-banner__panel::before { clip-path: none; }

  .feature-banner__content,
  .feature-banner--panel-left .feature-banner__content { padding: 40px 24px 40px; }

  .feature-banner__badge,
  .feature-banner--panel-left .feature-banner__badge {
    top: calc(var(--fb-badge-size) * -0.6);
    right: 20px;
    left: auto;
    font-size: 21px;
  }

  .feature-banner__title { font-size: 34px; margin-bottom: 20px; }
  .feature-banner__title--md { font-size: 24px; margin-bottom: 10px; }
  .feature-banner__highlight { font-size: 60px; }
  .feature-banner__subtitle { font-size: 22px; margin-bottom: 16px; }
  .feature-banner__list { padding-left: 0; font-size: 22px; }
  .feature-banner__buttons { padding: 28px 0 0; }
}