/* Páginas interiores: cabecera de página, servicios, ficha de servicio, filosofía, proceso, marcas, legales, 404. */

/* Cabecera de página */
.phead {
  padding-top: calc(var(--header-h) + clamp(4rem, 12vw, 10rem)); padding-bottom: clamp(3rem, 7vw, 6rem);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.6rem var(--gutter);
}
.phead__kicker { grid-column: 1 / -1; }
.phead__title { grid-column: 1 / 11; }
.phead__lead { grid-column: 7 / 13; }
@media (max-width: 800px) { .phead__title, .phead__lead { grid-column: 1 / -1; } }

/* Índice de servicios */
.srows { display: grid; gap: clamp(5rem, 11vw, 10rem); }
.srow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gutter); align-items: center; }
.srow__fig { grid-column: 1 / 8; aspect-ratio: 4 / 3; display: block; }
.srow__body { grid-column: 9 / 13; display: grid; gap: 1.2rem; justify-items: start; }
.srow--alt .srow__fig { grid-column: 6 / 13; grid-row: 1; }
.srow--alt .srow__body { grid-column: 1 / 5; grid-row: 1; }
.srow__n { color: var(--ink-3); }
.srow__name a { transition: color 0.4s; }
.srow__name a:hover { color: var(--accent); }
.srow__short { color: var(--ink-2); }
.srow__points { display: grid; gap: 0.4rem; color: var(--ink-3); margin-bottom: 0.6rem; }
.srow__points li::before { content: "— "; color: var(--accent); }
@media (max-width: 900px) {
  .srow__fig, .srow__body, .srow--alt .srow__fig, .srow--alt .srow__body { grid-column: 1 / -1; grid-row: auto; }
}

/* Ficha de servicio */
.shero { padding-top: calc(var(--header-h) + clamp(3rem, 9vw, 8rem)); }
.shero__head { display: grid; gap: 1.2rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.shero__head .kicker a:hover { color: var(--accent); }
.shero__title { font-size: var(--fs-mega); line-height: 0.84; }
.shero__fig { height: min(82vh, 56vw); min-height: 340px; }
.sintro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.4rem var(--gutter); }
.sintro__short { grid-column: 1 / 4; color: var(--ink-3); }
.sintro__lead { grid-column: 4 / 12; font-weight: 450; }
.sintro__points { grid-column: 4 / 13; display: grid; gap: 1.4rem; margin-top: 2rem; }
.spoints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.spoint { display: flex; gap: 1.2rem; align-items: baseline; padding: 1.3rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-lead); letter-spacing: -0.015em; }
.spoint:nth-child(odd) { padding-right: var(--gutter); }
.spoint .mono { color: var(--accent); }
@media (max-width: 800px) {
  .sintro__short, .sintro__lead, .sintro__points { grid-column: 1 / -1; }
  .spoints { grid-template-columns: 1fr; }
}
.sgal__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); margin-top: 2rem; }
.sgal__item--0 { grid-column: 1 / 8; }
.sgal__item--1 { grid-column: 9 / 13; margin-top: 30%; }
.sgal__item--2 { grid-column: 3 / 10; }
.sgal__item .fig { aspect-ratio: 4 / 3; }
.sgal__item--1 .fig { aspect-ratio: 1; }
@media (max-width: 800px) { .sgal__item--0, .sgal__item--1, .sgal__item--2 { grid-column: 1 / -1; margin-top: 0; } }

.sbrands { display: grid; gap: 1.4rem; justify-items: start; }
.sbrands__list { display: flex; flex-wrap: wrap; gap: 0.6rem 2.6rem; margin: 1rem 0; }
.sbrands__list li { display: inline-flex; align-items: center; gap: 0.8rem; font-size: var(--fs-h3); font-weight: 500;
  letter-spacing: -0.03em; }
.sbrands__tick { width: 1.6rem; fill: var(--accent); }
.sprocess { display: grid; gap: 2rem; justify-items: start; border-top: 1px solid var(--line); }
.sprocess__text { max-width: 22ch; }

.snext { background: var(--paper-2); }
.snext__link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem 2rem;
  padding-block: clamp(4rem, 9vw, 8rem); }
.snext__link .kicker { grid-column: 1 / -1; }
.snext__name { transition: color 0.5s; }
.snext__link:hover .snext__name { color: var(--accent); }
.snext__fig { width: clamp(140px, 22vw, 360px); aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.7s var(--ease-set); }
.snext__link:hover .snext__fig { clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 75%); }

/* Filosofía */
.pquote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gutter); padding-top: 0; }
.pquote .welcome__quote { grid-column: 1 / 11; }
.pquote__text { grid-column: 6 / 13; color: var(--ink-2); }
.prows-wrap { display: grid; gap: 3rem; }
.prows { display: grid; gap: clamp(5rem, 10vw, 9rem); }
.prow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gutter); align-items: end; }
.prow__fig { grid-column: 1 / 6; aspect-ratio: 4 / 5; }
.prow__body { grid-column: 7 / 13; display: grid; gap: 1.2rem; justify-items: start; }
.prow--alt .prow__fig { grid-column: 8 / 13; grid-row: 1; }
.prow--alt .prow__body { grid-column: 1 / 7; grid-row: 1; }
.prow__n { color: var(--ink-3); }
.prow__tick { width: 3rem; fill: var(--accent); }
.prow__title { font-size: var(--fs-display); }
.team { display: grid; gap: 1.6rem; justify-items: start; border-top: 1px solid var(--line); }
.team__text { max-width: 40ch; }
@media (max-width: 900px) {
  .pquote .welcome__quote, .pquote__text, .prow__fig, .prow__body, .prow--alt .prow__fig, .prow--alt .prow__body {
    grid-column: 1 / -1; grid-row: auto;
  }
}

/* Proceso (detalle) */
.psteps { display: grid; gap: 2.4rem; }
.psteps__list { display: grid; border-top: 1px solid var(--line); }
.pstep { display: grid; grid-template-columns: minmax(5rem, 3fr) 9fr; gap: var(--gutter); padding-block: clamp(2rem, 4vw, 3.4rem);
  border-bottom: 1px solid var(--line); align-items: start; }
.pstep__n { font-family: var(--mono); font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.9; letter-spacing: -0.06em; color: var(--paper-3);
  transition: color 0.5s; }
.pstep:hover .pstep__n { color: var(--accent); }
.pstep .lead { color: var(--ink-2); margin-top: 1rem; max-width: 46ch; }

/* Marcas */
.brows__head { display: grid; grid-template-columns: 4rem 1.4fr 1fr 3rem; gap: 1rem; color: var(--ink-3);
  padding-bottom: 1rem; border-bottom: 1px solid var(--ink); }
.brows__head span:last-child { grid-column: 3 / 5; }
.brow { position: relative; display: grid; grid-template-columns: 4rem 1.4fr 1fr 3rem; gap: 1rem; align-items: center;
  padding-block: clamp(1.2rem, 2.4vw, 2rem); border-bottom: 1px solid var(--line); overflow: hidden; }
.brow__n { color: var(--ink-3); }
.brow__name { font-size: var(--fs-h2); font-weight: 500; letter-spacing: var(--track-tight); line-height: 1;
  transition: transform 0.6s var(--ease-set), color 0.4s; }
.brow__use { color: var(--ink-2); font-size: 0.95rem; }
.brow__tick { width: 2.4rem; fill: var(--accent); justify-self: end; transform: translateX(160%) rotate(0deg);
  transition: transform 0.6s var(--ease-set); }
.brow:hover .brow__name { transform: translateX(0.4em); color: var(--accent); }
.brow:hover .brow__tick { transform: none; }
.brows__note { margin-top: 2rem; }
@media (max-width: 700px) {
  .brows__head { display: none; }
  .brow { grid-template-columns: 2.6rem 1fr; }
  .brow__use { grid-column: 2; }
  .brow__tick { display: none; }
}

/* Legales */
.legal { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 7rem)); display: grid; gap: 1.6rem; max-width: 980px; }
.legal__body h2 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 2.2rem 0 0.6rem; }
.legal__body p { margin-top: 0.6rem; }

/* 404 */
.nf { min-height: 92vh; display: grid; align-content: center; justify-items: start; gap: 1.6rem;
  padding-top: var(--header-h); }
.nf__code { font-size: clamp(7rem, 26vw, 22rem); font-weight: 600; letter-spacing: -0.08em; line-height: 0.8; position: relative; }
.nf__accent { display: inline-block; width: 0.42em; height: 0.08em; background: var(--accent); transform: rotate(calc(var(--slant) + 30deg));
  vertical-align: middle; margin-inline: 0.04em; }
.shero__note { margin-top: 0.9rem; }