/* ============================================================
   SECCIONES — composiciones específicas de cada página
   ============================================================ */

/* ---------- Intro / posicionamiento ---------- */

.intro__media { position: relative; }
.intro__media .media { aspect-ratio: 4 / 5; }

.intro__stamp {
  position: absolute;
  right: clamp(-1rem, -2vw, -2rem);
  bottom: clamp(-1.5rem, -3vw, -2.5rem);
  background: var(--c-paper);
  padding: var(--s-5) var(--s-6);
  max-width: 17rem;
  border-left: 2px solid var(--c-tide);
}
.intro__stamp p { font-size: 0.86rem; line-height: 1.55; color: var(--c-ink-2); }

@media (max-width: 859px) {
  .intro__stamp { position: static; max-width: none; margin-top: var(--s-5); padding: var(--s-5) 0 var(--s-5) var(--s-5); }
}

.signature {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--c-ink);
  margin-top: var(--s-6);
}

/* ---------- Servicios (resumen en portada) ---------- */

.services__head {
  display: grid;
  gap: var(--s-5);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 860px) {
  .services__head { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--s-8); }
}

/* Retícula de áreas de trabajo: todo visible de una vez, sin scroll largo */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem);
  border-top: var(--hairline);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
}

@media (min-width: 720px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}

.service-card { position: relative; padding-left: 0; }

.service-card__n {
  position: absolute;
  top: 0.15rem;
  right: 0;
  font-family: var(--f-display);
  font-size: 0.8rem;
  color: var(--c-ink-3);
  opacity: 0.5;
}

.service-card__icon {
  display: block;
  width: 34px;
  height: 34px;
  color: var(--c-tide);
  margin-bottom: var(--s-5);
}

.service-card__kicker {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-tide);
  margin: 0 0 var(--s-2);
}

.service-card__title {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  margin: 0 0 var(--s-4);
  max-width: 22ch;
}

/* filete corto bajo el título, como en la referencia */
.service-card__title::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 1px;
  background: var(--c-tide);
  margin-top: var(--s-4);
  opacity: 0.55;
}

.service-card__text {
  color: var(--c-ink-2);
  font-size: 0.97rem;
  max-width: 44ch;
  margin-bottom: var(--s-5);
}

.service-card__link { margin-top: auto; }

/* ---------- Experiencia / credibilidad ---------- */

.cred {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 860px) {
  .cred { grid-template-columns: repeat(3, 1fr); }
}

.cred__col { border-top: 2px solid var(--c-ink); padding-top: var(--s-5); }
.cred__col h3 { font-family: var(--f-sans); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.cred__col li { padding-block: var(--s-3); border-bottom: var(--hairline); font-size: 0.95rem; }
.cred__col li:last-child { border-bottom: 0; }

.logos { margin-top: clamp(2.5rem, 5vw, 4rem); }

.logos__label {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0 0 var(--s-4);
}

/* Banda blanca: los logotipos vienen con fondo blanco y así no “flotan”
   sobre el papel cálido del sitio. */
.logos__grid {
  /* flex en vez de grid: así la última fila incompleta queda centrada */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2.5vw, 2rem);
  background: #fff;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid rgba(20, 24, 26, 0.06);
}

.logos__grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(33.333% - 1.4rem);   /* tres por fila */
}

@media (min-width: 900px) {
  /* nueve logotipos: 5 + 4, con la segunda fila centrada */
  .logos__grid li { flex-basis: calc(20% - 1.6rem); }
}

.logos__img {
  width: auto;
  object-fit: contain;
  /* leve desaturación para que nueve marcas distintas convivan sin ruido */
  filter: saturate(0.92);
}

/* Equilibrio óptico: los logotipos horizontales necesitan menos alto
   que los que son un símbolo o un sello. */
.logos__img--word { max-height: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 11rem; }
.logos__img--mark { max-height: clamp(2.4rem, 4vw, 3.4rem); max-width: 7.5rem; }

@media (max-width: 380px) {
  .logos__grid li { flex-basis: calc(50% - 1rem); }
}

/* ---------- Organizaciones ---------- */

.orgs__list { columns: 1; }
@media (min-width: 620px) { .orgs__list { columns: 2; column-gap: var(--s-7); } }
.orgs__list li { break-inside: avoid; }

/* ---------- Banda de enfoque ---------- */

.band--approach { padding-block: clamp(6rem, 16vh, 12rem); }

.band__statement {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: var(--ls-display);
  max-width: 20ch;
  margin-bottom: var(--s-6);
}
.band__statement em { font-style: italic; color: var(--c-foam); }

.band__text { max-width: 44ch; color: rgba(246, 243, 238, 0.82); font-size: var(--t-lead); line-height: 1.6; }

/* ---------- CTA final ---------- */

.cta__title {
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.98;
  margin-bottom: var(--s-6);
}

.cta__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--hairline-dark);
}
.cta__contacts a, .cta__contacts span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.95rem;
  color: var(--c-foam);
}
.cta__contacts svg { width: 17px; height: 17px; opacity: 0.6; flex: none; }
.cta__contacts a:hover { color: var(--c-paper); }

/* ---------- Sobre mí: línea de tiempo ---------- */

.timeline { display: grid; gap: 0; }

.timeline__item {
  display: grid;
  gap: var(--s-3);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: var(--hairline);
}
.timeline__item:last-child { border-bottom: var(--hairline); }

@media (min-width: 760px) {
  .timeline__item { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-6); align-items: start; }
}

.timeline__when {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-tide);
  padding-top: 0.3rem;
}
.timeline__item h3 { margin-bottom: var(--s-3); }

.quote {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.25;
  font-style: italic;
  color: var(--c-ink);
  max-width: 24ch;
}

/* ---------- Servicios: detalle ---------- */

.service-detail { scroll-margin-top: calc(var(--header-h) + 2rem); }

.service-detail__head {
  display: grid;
  gap: var(--s-5);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 860px) {
  .service-detail__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: end; }
}

.service-detail__title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 0; }
.service-detail__title em { font-style: italic; }

.service-detail__body {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .service-detail__body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
}

.detail-block + .detail-block { margin-top: var(--s-7); }
.detail-block h3 {
  font-family: var(--f-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: var(--s-4);
}
.section--dark .detail-block h3 { color: var(--c-foam-2); }

.steps { counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: var(--s-4) 0 var(--s-4) 3rem;
  border-top: var(--hairline);
  font-size: 0.98rem;
}
.steps li:last-child { border-bottom: var(--hairline); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: var(--s-4);
  font-family: var(--f-display);
  font-size: 0.85rem;
  color: var(--c-tide);
}
.section--dark .steps li { border-color: rgba(207, 224, 220, 0.16); }
.section--dark .steps li::before { color: var(--c-foam-2); }

/* sin position:sticky — la imagen se quedaba fija y tapaba las etiquetas y el botón */

/* ---------- Contacto ---------- */

.contact-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

.contact-list li { padding-block: var(--s-4); border-top: var(--hairline); }
.contact-list--lg li { padding-block: var(--s-5); }
.contact-list--lg .v { font-size: 1.15rem; }
.contact-list li:last-child { border-bottom: var(--hairline); }
.contact-list a, .contact-list p { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-list svg { width: 18px; height: 18px; color: var(--c-tide); margin-top: 0.2rem; flex: none; }
.contact-list .k {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 0.2rem;
}
.contact-list .v { color: var(--c-ink); font-size: 1rem; }
.contact-list a:hover .v { color: var(--c-tide); }

/* ---------- 404 ---------- */

.error-page {
  min-height: 78svh;
  display: flex;
  align-items: center;
  text-align: left;
}

/* ---------- Galería editorial (sección "El agua") ---------- */

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(3, 1fr); align-items: start; }
  /* desfase vertical: evita la fila perfectamente alineada, que se ve a catálogo */
  .gallery figure:nth-child(2) { margin-top: clamp(2rem, 5vw, 4.5rem); }
  .gallery figure:nth-child(3) { margin-top: clamp(1rem, 2vw, 1.75rem); }
}

.gallery figure { margin: 0; }

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--c-deep);
  transition: transform 1.4s var(--ease-out);
}
.gallery figure:hover img { transform: scale(1.03); }

.gallery figcaption {
  margin-top: var(--s-3);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--c-ink-3);
  max-width: 28ch;
}