/** ==========================================================================
 * Bloque «Precio y financiación» — inc/cei-bloques.php, cei_bloque_precio()
 *
 * Una hoja por bloque (Eduardo, 07/09/2026). La pide functions.php en la
 * cabecera de las plantillas que lo pintan (cei_enqueue_template_styles),
 * antes de la hoja de la plantilla, y el propio bloque al pintarse
 * (cei_bloque_css), por si aparece donde no se esperaba. Antes vivia en css/cei-componentes.css.
 * ========================================================================== */
/* --------------------------------------------------------------------------
 * BLOQUE «PRECIO Y FINANCIACIÓN» — inc/cei-bloques.php, cei_bloque_precio()
 *
 * Foto a la izquierda y lamina negra a la derecha: titulo con su
 * filete corto, parrafo de entrada, las filas de datos separadas por filetes y
 * al pie el descuento con los botones invertidos. En la ficha de curso
 * sustituye a la seccion de texto de precio.
 * -------------------------------------------------------------------------- */
.Precio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--Global-Radio-Panel);
  background-color: var(--Global-Color-Black);
  color: var(--Global-Color-White);
}

.Precio-foto {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

.Precio-texto {
  display: flex;
  flex-direction: column;
  gap: var(--Global-Espacio-TituloContenido);
  box-sizing: border-box;
  padding: var(--Global-Espacio-Superior);
}

/* Titulo de bloque (Size-32, como el de Fundae) con un filete corto debajo. */
.Precio-titulo {
  margin: 0;
  padding-bottom: var(--Global-Espacio-TituloContenido);
  position: relative;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-32);
  font-weight: var(--Font-Weight-400);
  line-height: var(--Font-Line-height-110);
  letter-spacing: var(--Font-Letter-spacing-2);
  /* El blanco, nombrado y no heredado: en la ficha, style.css pinta los
     titulos de seccion de su propio color con mas especificidad que la lamina,
     y el titulo se quedaba negro sobre negro (Eduardo, 08/09/2026). */
  color: var(--Global-Color-White);
}

.Precio-titulo::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  border-top: 1px solid currentColor;
}

.Precio-intro {
  margin: 0;
  color: inherit; /* style.css pone `p { color: var(--Global-Color-Black) }`: sobre negro seria invisible */
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
}

/* Las filas: nombre a la izquierda, valor a la derecha, filete entre ellas. */
.Precio-filas {
  margin: 0;
  border-top: 1px solid var(--Global-Velo-Blanco-60);
}

.Precio-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--Global-Espacio-TituloContenido);
  padding: calc(var(--Global-Espacio-TituloContenido) / 2) 0;
  border-bottom: 1px solid var(--Global-Velo-Blanco-60);
}

.Precio-fila dt,
.Precio-fila dd {
  margin: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-20);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
}

.Precio-fila dd {
  text-align: right;
}

/* style.css pone `b, strong, dt` en semibold CON !important; contra eso solo
   vale otro. Es el unico !important del bloque. */
/*
 * La frase de la ficha bajo el precio (un codigo de descuento, una oferta por
 * tiempo limitado): en su propia linea y en la letra pequena del sistema, para
 * que no compita con el importe.
 */
.Precio-claim {
  display: block;
  margin-top: calc(var(--Global-Espacio-TituloContenido) / 3);
  font-size: var(--Font-Size-14);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Precio-fila dt {
  font-weight: var(--Font-Weight-400) !important;
}

.Precio-fila dd a,
.Precio-descuento a {
  color: inherit;
  text-decoration: underline;
}

.Precio-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--Global-Espacio-TituloContenido);
  margin-top: auto;
}

.Precio-descuento {
  margin: 0;
  color: inherit; /* style.css pone `p { color: var(--Global-Color-Black) }`: sobre negro seria invisible */
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-20);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
}

.Precio-botones {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
}

.Precio-botones .Global-boton {
  display: inline-flex;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  /* Una sola columna: la foto arriba, apaisada, y la lamina debajo. */
  .Precio {
    grid-template-columns: minmax(0, 1fr);
  }

  .Precio-foto {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .Precio-fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .Precio-fila dd {
    text-align: left;
  }
}