/* =====================================================================
   home.css — portada y cabeceras de las páginas internas (.page-head). Lo usan index.html y pages/*.html.
   ===================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__inner { display: grid; gap: 2rem; align-items: end; padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.hero__content { display: grid; gap: 1.4rem; justify-items: start; padding-bottom: clamp(2rem, 5vw, 4.5rem); }
.hero h1 em { font-style: italic; font-weight: 600; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__media { justify-self: center; width: min(78%, 400px); align-self: end; }
.hero__media img { width: 100%; height: auto; }
.hero__tag { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; }
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.15fr .85fr; gap: 3rem; min-height: min(78vh, 720px); }
  .hero__media { width: 100%; max-width: 470px; justify-self: end; }
}

/* ---------- Sobre mí (bloque de la portada y de la página) ---------- */
.about { display: grid; gap: 2.5rem; align-items: center; }
.about__media { background: var(--teal); padding: 1.5rem 1.5rem 0; align-self: stretch; display: flex; align-items: end; justify-content: center; max-width: 420px; width: 100%; justify-self: center; }
.about__media img { width: 100%; max-width: 340px; }
.about__text { display: grid; gap: 1.1rem; justify-items: start; }
.about__text p { max-width: 62ch; }
@media (min-width: 900px) {
  .about { grid-template-columns: .8fr 1.2fr; gap: 4rem; }
  .about--rev { grid-template-columns: 1.2fr .8fr; }
}

/* ---------- Cabecera de páginas internas ---------- */
.page-head { background: var(--teal); color: var(--ink); padding-block: clamp(3rem, 7vw, 5.5rem); }
.page-head .container { display: grid; gap: 1.1rem; justify-items: start; }
.page-head h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); max-width: 18ch; }
.page-head .lead { color: #07302b; }
.page-head .eyebrow { color: var(--ink); }

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; display: grid; place-items: center; padding: 2rem var(--gutter); text-align: center; }
.notfound h1 { font-size: clamp(5rem, 18vw, 9rem); color: var(--teal-deep); }