/* ==========================================================================
   Sobre Henry  (/sobre-henry)  — `molina.sobre-henry`
   --------------------------------------------------------------------------
   La semblanza, en el aire editorial de los mockups: fondo crema, títulos en
   serif azul marino y un oro apagado de acento. Un hero con el retrato y la
   cita, y debajo tres columnas (Mi historia · Trayectoria en hitos · Mis
   valores). Los tokens van con prefijo --sh- para no tocar el resto del sitio.
   ========================================================================== */

:root {
  --sh-crema:   #F4EFE4;   /* fondo de la página */
  --sh-crema-2: #ECE4D2;   /* recuadro de la cita */
  --sh-tinta:   #1E325C;   /* azul marino (= --azul): títulos */
  --sh-oro:     #B0893C;   /* oro apagado: antetítulo, cita, botón, iconos */
  --sh-texto:   #4E4A42;   /* gris cálido del cuerpo */
  --sh-borde:   #DCD2BE;   /* líneas finas sobre crema */
}

/* El fondo crema cubre hero y cuerpo; la banda-cta y el pie siguen debajo. */
.sh-hero,
.sh-cuerpo { background: var(--sh-crema); }

/* --- Hero ------------------------------------------------------------------ */
.sh-hero {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 104px) 24px clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.sh-antetitulo {
  margin: 0 0 18px;
  font-family: var(--texto);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sh-oro);
}

.sh-titulo {
  font-family: var(--display);
  font-weight: 400;
  color: var(--sh-tinta);
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: 0;
}

.sh-intro {
  margin: 26px 0 0;
  max-width: 34em;
  font-family: var(--texto);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--sh-texto);
}

/* Lado derecho del hero: retrato + cita, uno junto a otro. */
.sh-hero-lado {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
}

.sh-retrato {
  margin: 0;
  flex: 0 0 clamp(150px, 15vw, 210px);
}

.sh-retrato img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 24px 48px -28px rgba(30, 50, 92, .55);
}

.sh-cita {
  margin: 0;
  position: relative;
  padding-left: 22px;
  border-left: 2px solid var(--sh-oro);
}

.sh-cita-marca {
  position: absolute;
  top: -22px;
  left: 14px;
  font-family: var(--display);
  font-size: 68px;
  line-height: 1;
  color: var(--sh-oro);
  opacity: .9;
}

.sh-cita p {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.4;
  color: var(--sh-tinta);
}

/* --- Cuerpo: tres columnas ------------------------------------------------- */
.sh-cuerpo {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(8px, 2vw, 24px) 24px clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.sh-col { position: relative; }

.sh-col-titulo {
  font-family: var(--display);
  font-weight: 400;
  color: var(--sh-tinta);
  font-size: clamp(24px, 2vw, 29px);
  line-height: 1.1;
  padding-top: 20px;
  margin: 0 0 24px;
}

/* Una raya corta de oro encima de cada título de columna. */
.sh-col-titulo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--sh-oro);
  border-radius: 2px;
}

/* Mi historia */
.sh-parrafo {
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.75;
  color: var(--sh-texto);
}
.sh-parrafo + .sh-parrafo { margin-top: 18px; }

/* Trayectoria en hitos: línea vertical con puntos */
.sh-hitos {
  position: relative;
  margin: 0;
  padding: 2px 0 0 0;
}
.sh-hitos::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--sh-borde);
}
.sh-hito {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 18px;
  align-items: start;
}
.sh-hito + .sh-hito { margin-top: 26px; }

.sh-hito-punto {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--sh-oro);
  box-shadow: 0 0 0 4px var(--sh-crema);
}

.sh-hito-texto h3 {
  font-family: var(--texto);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--sh-tinta);
  line-height: 1.2;
}
.sh-hito-texto p {
  margin-top: 6px;
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.6;
  color: var(--sh-texto);
}

.sh-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 13px 24px;
  border-radius: 6px;
  background: var(--sh-oro);
  color: #fff;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  transition: background .25s, transform .25s;
}
.sh-boton:hover { background: #967426; transform: translateY(-1px); }
.sh-boton svg { width: 18px; height: 18px; }

/* Mis valores: icono de oro + título + texto */
.sh-valores { margin: 0; }
.sh-valor {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
}
.sh-valor + .sh-valor { margin-top: 24px; }

.sh-valor-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(176, 137, 60, .12);
  color: var(--sh-oro);
}
.sh-valor-icono svg { width: 21px; height: 21px; }

.sh-valor-texto h3 {
  font-family: var(--texto);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--sh-tinta);
  line-height: 1.2;
}
.sh-valor-texto p {
  margin-top: 5px;
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.6;
  color: var(--sh-texto);
}

/* --- Adaptación ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .sh-hero { grid-template-columns: 1fr; }
  .sh-cuerpo { grid-template-columns: 1fr; gap: 44px; }
  .sh-col-titulo { padding-top: 18px; }
}

@media (max-width: 560px) {
  .sh-hero-lado { flex-direction: column; align-items: flex-start; }
  .sh-retrato { flex: 0 0 auto; width: 180px; max-width: 60%; }
  .sh-cita { padding-left: 18px; }
  .sh-cita-marca { top: -18px; font-size: 54px; }
}