/* ==========================================================================
   pages/home.css — index.html
   --------------------------------------------------------------------------
   Figma: frame 01-homepage (11:2). Medidas tomadas del contenido, no de los
   nombres de capa.

   Secciones: Hero (11:54) · About Me (11:161) · Featured work (11:173) ·
   What I bring (11:345). La sección Results (11:3468) está oculta en el
   Figma y no se construye.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */

.hero {
  padding-block: var(--gap-section) var(--pad-hero-bottom);
}

.hero__layout {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-hero-columns);
}

.hero__content {
  flex: 1 1 0;
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* 1.1 Metadatos sobre el titular                                      */
/* ------------------------------------------------------------------ */

.hero__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.hero__social {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-none);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-out-quint);
}

.hero__social:hover,
.hero__social:focus-visible {
  color: var(--color-text);
}

.hero__services {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero__services li {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-micro);
  color: var(--color-text-muted);
}

.hero__services li + li {
  padding-top: var(--space-3);
}

/* ------------------------------------------------------------------ */
/* 1.2 Titular y firma                                                 */
/* ------------------------------------------------------------------ */

.hero__title {
  margin-top: var(--gap-hero-meta);
}

.hero__tagline {
  margin-top: var(--gap-hero-tagline);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-micro);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ */
/* 1.3 Retrato                                                         */
/* ------------------------------------------------------------------ */

.hero__portrait {
  flex: none;
  width: var(--hero-portrait-w);
  /* Proporción en vez de alto fijo: al estrecharse, la foto encoge en vez
     de recortarse. Los assets están exportados a 2× exactos del frame. */
  aspect-ratio: var(--aspect-portrait);
  border-radius: var(--radius-media);
  overflow: hidden;
  /* Fondo del marco. La imagen lo cubre por completo; queda como respaldo
     mientras carga. */
  background-color: var(--accent-logo-dot);
}

.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   2. Declaración "About Me"
   --------------------------------------------------------------------------
   Vive dentro de .hero, no como sección aparte. En el Figma (11:171) el
   bloque cuelga a 150px del hero y son los 100px de padding inferior de la
   sección beige los que lo separan de la caja blanca de Featured work.
   ========================================================================== */

.statement {
  margin-top: var(--gap-hero-next);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.statement__text {
  margin-top: var(--space-5);
  max-width: var(--measure-statement);
  color: var(--color-text);
}

/* ==========================================================================
   3. Featured work
   --------------------------------------------------------------------------
   El encabezado de sección (.section-head) vive en components.css: lo
   comparten esta página y About.
   ========================================================================== */

.featured__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.featured__more {
  max-width: var(--measure-narrow);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-micro);
  color: var(--color-text-muted);
}

.featured__more a {
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

/* ==========================================================================
   Fase 6 — responsive
   ========================================================================== */

@media screen and (max-width: 991px) {
  /* El retrato deja de medir 493px fijos: con 927px de contenedor dejaría
     al titular menos de 400 y el h1 se rompería en demasiadas líneas. */
  .hero__portrait {
    width: 40%;
  }
}

@media screen and (max-width: 767px) {
  /* La lista de servicios pasa a una sola línea separada por punto medio.
     DECISIÓN DE DISEÑO MÓVIL: se aparta del Figma, que no tiene móvil.
     Tres renglones con «+» ocupan demasiado alto junto al titular.

     El marcado es el mismo que en escritorio: el «+» vive en el HTML —es
     copy del Figma— dentro de un <span> que aquí se oculta, y el separador
     lo pone ::after. Con `display: inline` la línea se parte sola si no
     cabe, en vez de cortar por ítems como haría un flex. */
  .hero__services li {
    display: inline;
  }

  .hero__services li + li {
    padding-top: 0;
  }

  .hero__services-mark {
    display: none;
  }

  /* Punto medio U+00B7, no un punto normal. El último ítem no lleva. */
  .hero__services li:not(:last-child)::after {
    content: " \00B7 ";
  }

  /* El original apila el hero aquí (`.hero-layout { flex-flow: column }`). */
  .hero__layout {
    flex-direction: column;
  }

  .hero__portrait {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  /* El original pasa la fila de metadatos a columna en este breakpoint. */
  .hero__meta {
    flex-direction: column;
    gap: var(--space-5);
  }
}