/* =========================================================
   EXPERIENCIA
========================================================= */

.experiencia {
  position: relative;

  min-height: 620px;

  display: flex;

  align-items: center;

  padding: 100px 7%;

  color: white;

  background-image: url(../img/fondos/fondo_trufa.png);

  background-size: cover;

  background-position: center;
}

.experiencia-overlay {
  position: absolute;

  inset: 0;

  background: rgba(35, 31, 31, 0.438);
}

.experiencia-contenido {
  position: relative;

  z-index: 2;

  max-width: 700px;
}

.experiencia .section-kicker {
  color: var(--beige);
}

.experiencia h2 {
  font-family: "DM Serif Display", serif;

  font-size: clamp(45px, 6vw, 75px);

  line-height: 1;

  font-weight: 400;
}

.experiencia h2 strong {
  display: block;

  color: var(--beige);

  font-style: italic;

  font-weight: 400;
}

.experiencia p {
  max-width: 570px;

  margin: 25px 0 30px;

  color: rgba(255, 255, 255, 0.78);

  font-size: 14px;

  line-height: 1.9;
}

/* =========================================================
   SECTION GENERAL
========================================================= */

.section-kicker {
  display: inline-block;

  margin-bottom: 14px;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2.5px;

  color: #8c806d;
}

.section-header {
  max-width: 700px;

  margin: 0 auto 60px;

  text-align: center;
}

.section-header h2 {
  font-family: "DM Serif Display", serif;

  font-size: clamp(38px, 5vw, 58px);

  line-height: 1.05;

  font-weight: 400;

  color: var(--dark);
}

.section-header h2 strong {
  color: #8d7c62;

  font-weight: 400;

  font-style: italic;
}

.section-header p {
  max-width: 570px;

  margin: 20px auto 0;

  color: var(--text-light);

  font-size: 14px;

  line-height: 1.8;
}

/* Estilo del campo de número dentro del control de cantidad */
.qty-control input.qty-input {
  width: 42px;
  height: 32px;
  text-align: center;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 6px;
  color: var(--forest, #173b2b);
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  outline: none;
  transition: border-color 0.2s ease;
}

.qty-control input.qty-input:focus {
  border-color: var(--gold-luxury, #d4af37);
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
}

/* Ocultar las flechas nativas del navegador en inputs de tipo number */
.qty-control input.qty-input::-webkit-outer-spin-button,
.qty-control input.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-control input.qty-input[type=number] {
  -moz-appearance: textfield;
}