/* =========================================================
   SOBRE JUNIOR RV
   Mantiene la identidad de Farova y organiza una biografía profesional sin
   convertirla en un currículum ni repetir el catálogo de la portada.
   ========================================================= */

.about-page { background: var(--farova-negro); }

.about-kicker {
  margin-bottom: 1.1rem;
  color: var(--farova-naranja);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

/* Portada dividida entre la presentación y la imagen oficial. */
.about-hero { padding-block: clamp(5rem, 9vw, 9rem); }
.about-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.7fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
}
.about-hero h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(5rem, 12vw, 11rem);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.78;
}
.about-lead {
  max-width: 650px;
  margin-top: 2.5rem;
  color: var(--farova-marfil-suave);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.75;
}
.about-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--farova-naranja);
  background: var(--farova-naranja);
  color: var(--farova-negro);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}
.about-button:hover,.about-button:focus-visible { background: var(--farova-marfil); border-color: var(--farova-marfil); outline: none; }
/*
  El marco establece el tamaño cuadrado. La imagen llena ese marco y ya no toma
  como altura los 3000 píxeles escritos en el archivo HTML.
*/
.about-portrait { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--farova-linea); }
/* El recorte conserva el retrato de Junior RV cuando la portada horizontal ocupa una tarjeta cuadrada. */
.about-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.about-portrait figcaption { position: absolute; right: 1rem; bottom: 1rem; padding: 0.7rem; background: rgb(15 15 13 / 82%); font-size: 0.53rem; letter-spacing: 0.13em; text-transform: uppercase; }

/* Biografía editorial con un número grande que funciona como guía visual. */
.about-story { padding-block: clamp(6rem, 10vw, 10rem); background: var(--farova-arena); color: var(--farova-negro); }
.about-story__layout { display: grid; grid-template-columns: minmax(120px, 0.3fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); }
.about-number { color: rgb(21 20 17 / 18%); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(5rem, 12vw, 11rem); line-height: 0.8; }
.about-story h2,.about-heading h2,.about-closing h2 { max-width: 900px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.about-story div > p:not(.about-kicker) { max-width: 760px; margin-top: 1.7rem; color: #514b42; line-height: 1.8; }

/* Cuatro tarjetas para explicar las áreas sin usar frases genéricas. */
.about-fields { padding-block: clamp(6rem, 10vw, 10rem); background: var(--farova-negro-suave); }
.about-heading { padding-bottom: 3rem; border-bottom: 1px solid var(--farova-linea); }
.about-fields__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin-top: 1px; background: var(--farova-linea); }
.about-fields article { min-height: 285px; padding: clamp(1.5rem,2.5vw,2.4rem); background: var(--farova-negro-suave); }
.about-fields article > span { color: var(--farova-azul); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.16em; }
.about-fields h3 { margin-top: 5rem; font-family: Georgia, 'Times New Roman', serif; font-size: 1.65rem; font-weight: 400; }
.about-fields article p { margin-top: 0.9rem; color: var(--farova-marfil-suave); font-size: 0.82rem; line-height: 1.65; }

/* Cierre con dos rutas claras: catálogo creativo o servicios profesionales. */
.about-closing { padding-block: clamp(6rem, 10vw, 10rem); }
.about-closing__layout { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3rem; }
.about-closing__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.about-button--light { border-color: var(--farova-linea); background: transparent; color: var(--farova-marfil); }

@media (max-width: 980px) {
  .about-hero__layout,.about-closing__layout { grid-template-columns: 1fr; }
  .about-portrait { width: min(100%,620px); }
  .about-fields__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 600px) {
  .about-story__layout,.about-fields__grid { grid-template-columns: 1fr; }
  .about-number { font-size: 5rem; }
  .about-closing__actions { display: grid; width: 100%; }
  .about-button { width: 100%; }
}