/* ==========================================================================
   Páginas interiores B (team, instalaciones, contacto, legales, 404): piezas compartidas
   Cabecera interior (.ih), cierre de prueba (.icta), revelado por máscara (.mask) y 404 (.lost).
   Mismos tokens y primitivas que la home (base.css); prefijos propios para no pisar a las páginas A.
   ========================================================================== */

/* --- Revelado por máscara: una cortina del color del fondo se retira y la foto se asienta ---
   La foto nunca está oculta: la cortina es un pseudo-elemento y sin JS / con movimiento reducido no existe */
.mask { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .js .mask[data-reveal] { opacity: 1; transform: none; }
  .js .mask[data-reveal]::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: var(--mask, var(--bone)); transform-origin: right center;
    transition: transform 1.25s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
  .js .mask[data-reveal].is-in::after { transform: scaleX(0); }
  .js .mask[data-reveal] > :not(figcaption) { transform: scale(1.12); transition: transform 1.8s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 90ms); }
  .js .mask[data-reveal].is-in > :not(figcaption) { transform: none; }
}
.reveal-all .mask::after { transform: scaleX(0) !important; }
.reveal-all .mask > * { transform: none !important; }

/* --- Cabecera interior (negro neutro, sin tinte: el titular siempre sobre fondo liso) --- */
.ih { --mask: #0a0a0a; --ih-fs: clamp(2.5rem, 10.6vw, 8.25rem); --ih-over: 0px;
  position: relative; z-index: 2; background: #0a0a0a; color: var(--bone); padding: var(--s3) 0 0; }
.ih--long { --ih-fs: clamp(2.2rem, 9.4vw, 7rem); }
.ih--legal { --ih-fs: clamp(2.2rem, 9vw, 6.25rem); }
.ih__in { row-gap: var(--s3); }
.ih__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); }
.ih__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; color: var(--muted-dark); }
.ih__crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.ih__crumbs li + li::before { content: ""; width: 14px; height: 1px; background: var(--bronze); }
.ih__crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color .3s; }
.ih__crumbs a:hover { color: var(--bone); }
.ih__crumbs [aria-current] { color: var(--bone); }
.ih__meta { color: var(--muted-dark); letter-spacing: .14em; }
.ih__head .eyebrow { margin-bottom: var(--s2); }
.ih__title { font-size: var(--ih-fs); font-stretch: 112%; font-weight: 750; line-height: .9; letter-spacing: -.03em; color: var(--bone); }
.ih__bar { display: block; height: 6px; width: calc(100% + 2 * var(--gutter)); margin: .1em calc(-1 * var(--gutter)) .12em; background: var(--bronze); }
.ih__foot { display: grid; gap: var(--s3); }
.ih__lead { max-width: 44ch; font-size: var(--fs-lead); line-height: 1.5; color: rgba(245, 242, 236, .86); }
.ih__media { margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 3 / 2; background: var(--ink-2); }
.ih__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.86); }
.ih--plain { padding-bottom: var(--s6); }
@media (min-width: 900px) {
  .ih { --ih-over: clamp(48px, 6vw, 96px); padding-top: var(--s4); }
  .ih__in { row-gap: 0; }
  .ih__top { margin-bottom: clamp(48px, 7vw, 112px); }
  .ih__head { grid-column: 1 / -1; }
  .ih__bar { width: calc(100% + var(--edge)); max-width: 82vw; margin: .1em 0 .12em calc(-1 * var(--edge)); }
  .ih__foot { grid-column: 1 / span 5; grid-row: 3; align-self: start; padding: var(--s5) 0 var(--s10); }
  .ih__media { grid-column: 7 / -1; grid-row: 3; margin: var(--s5) calc(-1 * var(--edge)) calc(-1 * var(--ih-over)) 0;
    aspect-ratio: 16 / 10; clip-path: polygon(var(--cut-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-lg)); box-shadow: var(--shadow-deep); }
  .ih--plain .ih__foot { padding-bottom: 0; }
  .ih--plain { padding-bottom: var(--s10); }
}

/* --- Cierre: semana de prueba gratis (negro, mismo lenguaje que el cierre de la home) --- */
.icta { position: relative; isolation: isolate; overflow: hidden; background: #0a0a0a; color: var(--bone); padding: var(--section-y) 0; }
.icta__bg { position: absolute; inset: 0; z-index: -2; opacity: .28; }
.icta__bg img { filter: grayscale(1); }
.icta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0a0a0a 0%, rgba(10, 10, 10, .6) 40%, rgba(10, 10, 10, .88) 100%); }
.icta__in { position: relative; row-gap: var(--s3); }
.icta__title { font-size: clamp(2.5rem, 11.4vw, 9rem); font-stretch: 115%; line-height: .9; letter-spacing: -.035em; }
.icta__bar { display: block; height: 6px; width: calc(100% + 2 * var(--gutter)); margin: .1em calc(-1 * var(--gutter)) .12em; background: var(--bronze); }
.icta__text { max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; color: rgba(245, 242, 236, .84); }
.icta__actions { display: flex; flex-wrap: wrap; gap: var(--s1); }
.icta__actions .btn:first-child { flex: 1 1 100%; }
.icta__actions .btn--ghost { flex: 1 1 0; padding: 0 12px; }
@media (min-width: 900px) {
  .icta__title { grid-column: 1 / span 11; }
  .icta__bar { width: calc(100% + 2 * var(--edge)); margin-inline: calc(-1 * var(--edge)); }
  .icta__text { grid-column: 1 / span 5; margin-top: var(--s3); }
  .icta__actions { grid-column: 6 / span 7; align-self: end; justify-content: flex-end; flex-wrap: nowrap; }
  .icta__actions .btn:first-child, .icta__actions .btn--ghost { flex: 0 0 auto; padding: 0 24px; }
}

/* --- 404: pieza de marca. «404» monumental cruzado por la barra --- */
.lost { position: relative; overflow: hidden; background: #0a0a0a; color: var(--bone);
  min-height: calc(100svh - var(--header-h) - var(--abar-h)); display: flex; align-items: center; padding: var(--s6) 0; }
.lost__in { row-gap: var(--s4); align-items: end; }
.lost__code { position: relative; display: flex; justify-content: space-between; max-width: 9em; margin-inline: -.04em;
  font: 750 clamp(7rem, 40vw, 24rem)/.8 var(--display); font-stretch: 140%; letter-spacing: -.06em; color: var(--bone); }
.lost__code span:nth-child(2) { color: var(--bronze); }
.lost__bar { position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 50%; height: 6px; margin-top: -3px;
  background: var(--bronze); }
.lost__title { font-size: clamp(1.9rem, 7.4vw, 4rem); font-stretch: 115%; line-height: .94; letter-spacing: -.025em; }
.lost__text { margin-top: var(--s2); max-width: 44ch; color: rgba(245, 242, 236, .84); }
.lost__actions { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }
.lost__actions .btn { flex: 1 1 auto; }
.lost__nav .micro { color: var(--muted-dark); margin-bottom: var(--s1); }
.lost__nav ol { border-top: var(--rule-dark); }
.lost__nav a { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; min-height: 48px; border-bottom: var(--rule-dark);
  text-decoration: none; font: 650 1rem/1.1 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .01em; transition: color .3s, padding .45s var(--ease-out); }
.lost__nav a .num { font: 500 .75rem/1 var(--text); color: var(--bronze-hi); }
.lost__nav a .ico { width: 16px; height: 16px; color: var(--bronze-hi); }
.lost__nav a:hover { color: var(--bronze-hi); padding-left: 6px; }
@media (min-width: 900px) {
  .lost__code { grid-column: 1 / -1; max-width: none; justify-content: flex-start; gap: .02em; font-size: clamp(12rem, 26vw, 24rem); }
  .lost__bar { left: calc(-1 * var(--edge)); right: calc(-1 * var(--edge)); }
  .lost__copy { grid-column: 1 / span 6; }
  .lost__nav { grid-column: 8 / span 5; }
}

/* Máscara de líneas con aire arriba: las tildes de las mayúsculas (Á, É, Ó) no se recortan */
.ln { padding-top: .14em; margin-top: -.14em; }
