/* ==========================================================================
   Layout: contenedor, cabecera, hero, secciones, rejilla de experiencia,
   formación, pie de página y ajustes responsive.
   ========================================================================== */

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* --- Cabecera fija --- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.lg {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  text-decoration: none;
}
.lgd { color: var(--ac, #315BFF); }
.hnav { display: flex; gap: 26px; }
.nl {
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}
.hactions { display: flex; align-items: center; gap: 14px; }

/* --- Hero --- */
.hero { padding: 104px 0 0; }
.sub {
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.45;
  color: var(--mut);
  max-width: 840px;
  font-weight: 500;
  margin: 28px 0 0;
}
.cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 36px;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
}
.band {
  height: min(54vh, 500px);
  border-radius: 28px;
  overflow: hidden;
  margin-top: 64px;
}

/* --- Secciones --- */
.sec {
  padding: 100px 0 110px;
  scroll-margin-top: 70px;
}
.bord { border-bottom: 1px solid var(--line); }
.shead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 48px;
}
.shp {
  font-size: 16px;
  color: var(--mut);
  max-width: 380px;
  line-height: 1.55;
  margin: 0;
}

/* --- "Cómo trabajo" --- */
.statg {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.bigp {
  font-size: clamp(22px, 2.4vw, 33px);
  line-height: 1.3;
  letter-spacing: -.015em;
  font-weight: 500;
  margin: 0;
}

/* --- Experiencia --- */
.xrow {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr .7fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.xr {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.xc {
  font-size: 15px;
  color: var(--mut);
  margin-top: 5px;
}
.xd {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mut);
  margin: 0;
}
.xmeta {
  text-align: right;
  color: var(--mut);
  font-size: 14.5px;
  line-height: 1.55;
}

/* --- Formación --- */
.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.colh {
  font-size: 16px;
  font-weight: 650;
  margin: 0 0 10px;
}
.erow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
}
.ei { color: var(--mut); }
.ey {
  color: var(--mut);
  white-space: nowrap;
  font-size: 13.5px;
}

/* --- Pie de página --- */
.fbot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 110px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--mut);
}

/* --- Responsive --- */
@media (max-width: 920px) {
  .hnav { display: none; }
  .pgrid { grid-template-columns: 1fr; }
  .sp2 { grid-column: auto; }
  .sp3 { grid-column: auto; }
  .xrow { grid-template-columns: 1fr; gap: 10px; }
  .xmeta { text-align: left; }
  .statg { grid-template-columns: 1fr; gap: 28px; }
  .shead { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fgrid { grid-template-columns: 1fr; gap: 44px; }
  /* La portada trae el nombre incrustado; a ancho movil, object-fit:cover
     recortaba los lados. Mostrarla completa a su proporcion natural. */
  .band { height: auto; margin-top: 40px; }
  .band .cimg { height: auto; }
}

/* Ajuste fino de ritmo vertical en pantallas de telefono: el padding de
   escritorio (100/110px por seccion) dejaba huecos muertos muy grandes. */
@media (max-width: 640px) {
  .wrap { padding: 0 22px; }
  .hero { padding: 72px 0 0; }
  .sec { padding: 56px 0 60px; }
  .shead { margin-bottom: 32px; }
}