/*
 * JP Restaurant Consulting
 * Refinamientos visuales para la visión de marca y la presentación del fundador.
 */

.vision-panel .panel-shade {
  background: linear-gradient(
    90deg,
    rgba(5, 5, 5, 0.74) 0%,
    rgba(5, 5, 5, 0.56) 62%,
    rgba(5, 5, 5, 0.42) 100%
  );
}

.vision-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: min(94%, 820px);
  pointer-events: none;
  border-right: 1px solid rgba(252, 190, 43, 0.13);
  background: linear-gradient(
    90deg,
    rgba(5, 5, 5, 0.94) 0%,
    rgba(5, 5, 5, 0.91) 68%,
    rgba(5, 5, 5, 0.72) 86%,
    transparent 100%
  );
}

.vision-panel > div {
  width: min(100%, 650px);
}

.vision-panel h2 {
  max-width: 630px;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.72);
}

.vision-panel > div > p:last-child {
  max-width: 570px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.65);
}

.founder-grid {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(330px, 0.67fr)
    minmax(240px, 0.52fr);
  align-items: center;
  gap: clamp(28px, 3.3vw, 55px);
}

.founder-statement blockquote {
  max-width: 760px;
  font-size: clamp(54px, 5.25vw, 86px);
  line-height: 0.95;
}

.founder-portrait {
  align-self: stretch;
  min-height: 590px;
  box-shadow: 0 24px 60px rgba(5, 5, 5, 0.16);
}

.founder-portrait img {
  min-height: 590px;
}

.founder-detail {
  padding-bottom: 0;
}

@media (width <= 900px) {
  .vision-panel::before {
    width: 100%;
    background: linear-gradient(
      90deg,
      rgba(5, 5, 5, 0.94),
      rgba(5, 5, 5, 0.82) 78%,
      rgba(5, 5, 5, 0.68)
    );
  }

  .vision-panel > div {
    width: min(100%, 720px);
  }

  .founder-grid {
    gap: 42px;
  }

  .founder-statement blockquote {
    max-width: 820px;
    font-size: clamp(58px, 9.6vw, 86px);
  }

  .founder-portrait {
    width: min(100%, 540px);
    min-height: 675px;
  }

  .founder-portrait img {
    min-height: 675px;
  }

  .founder-detail {
    max-width: 680px;
  }
}

@media (width <= 680px) {
  .vision-panel .panel-shade {
    background: rgba(5, 5, 5, 0.62);
  }

  .vision-panel::before {
    background: linear-gradient(
      90deg,
      rgba(5, 5, 5, 0.95),
      rgba(5, 5, 5, 0.88) 86%,
      rgba(5, 5, 5, 0.76)
    );
  }

  .vision-panel h2 {
    font-size: 54px;
    line-height: 0.94;
  }

  .vision-panel > div > p:last-child {
    font-size: 16px;
    line-height: 1.62;
  }

  .founder-statement blockquote {
    max-width: 100%;
    font-size: clamp(48px, 15vw, 62px);
  }

  .founder-portrait {
    width: 100%;
    min-height: 520px;
  }

  .founder-portrait img {
    min-height: 520px;
  }
}

/*
 * Corrección responsive del bloque del fundador.
 * La versión anterior redefinía la grilla de escritorio después del CSS base
 * y, en pantallas pequeñas, anulaba accidentalmente el layout de una columna.
 */
@media (width <= 900px) {
  .founder-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

@media (width <= 680px) {
  .founder-section {
    overflow: hidden;
  }

  .founder-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .founder-statement,
  .founder-portrait,
  .founder-detail {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .founder-statement blockquote {
    max-width: 100%;
    font-size: clamp(46px, 14.5vw, 60px);
    line-height: 0.96;
    overflow-wrap: normal;
  }

  .founder-name {
    margin-top: 30px;
    padding-left: 18px;
  }

  .founder-portrait {
    min-height: 0;
    aspect-ratio: 4 / 5;
    margin: 0;
  }

  .founder-portrait img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center 20%;
  }

  .founder-detail {
    padding-bottom: 0;
  }

  .founder-detail p {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 1.7;
  }
}