/* maskeline.com — hoja de estilo del sitio estático.
   Los valores de color, tamaño y tipografía salen de snapshot/design-tokens.json, que
   se leyó del sitio Wix con el navegador: no son estimaciones a ojo. */

:root {
  --negro: #000;
  --gris-oscuro: #1c1c1c;
  --gris-seccion: #2b2b2b;
  --blanco: #fff;
  --naranja: #ff5700;        /* acento: enlaces, titulares, menú de anclas */
  --naranja-boton: #fe602f;  /* fondo del botón de envío */
  /* El sitio original usa este segundo naranja en titulares de sección, selector de idioma,
     "más info" y la sede de Madrid. No es un descuido nuestro: está así en el Wix. */
  --naranja-2: #fe602f;

  /* El original NO usa una tipografía, usa seis. Leído del sitio con getComputedStyle,
     mirando el elemento que pinta cada texto:
       títulos de sección  -> orig_spartanmbblack   (Spartan MB Black, subida por Maskeline)
       topbar y menú abajo -> orig_spartanmbbold    (Spartan MB Bold)
       galería y formulario-> futura-lt-w01-book / avenir-lt-35-light
       home                -> madefor-text-extrabold / mediumbold
       contacto y pie      -> helvetica neue
       selector de idioma  -> questrial

     Spartan MB es un fork de League Spartan, que está en Google Fonts bajo OFL: se sirve esa.
     Questrial y Madefor son exactamente las mismas del original. Futura y Avenir son de pago
     y las sustituye Jost, geométrica del mismo corte. Helvetica Neue se usa del sistema. */
  --titular-seccion: "League Spartan", "Wix Madefor Text", Arial, sans-serif;
  --spartan: "League Spartan", "Wix Madefor Text", Arial, sans-serif;
  --titular: "Wix Madefor Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --texto: "Wix Madefor Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --galeria: "Futura", "Futura PT", "Century Gothic", "Jost", "Helvetica Neue", sans-serif;
  --formulario: "Avenir Next", "Avenir", "Futura", "Jost", "Helvetica Neue", sans-serif;
  --datos: "Helvetica Neue", Helvetica, "Wix Madefor Text", Arial, sans-serif;
  --idioma: "Questrial", "Helvetica Neue", Arial, sans-serif;
  --acento-tipo: "Fahkwang", Georgia, serif;
  --condensada: "Archivo Narrow", "Wix Madefor Text", sans-serif;

  --ancho: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }

/* Al pulsar un ancla, el original se desplaza; el salto seco delataba la copia. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--titular); font-weight: 800; margin: 0; }

.accent { color: var(--naranja-2); }

.visually-hidden, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem;
  z-index: 100; background: var(--naranja); color: var(--negro);
  padding: 0.5rem 1rem; border-radius: 2px;
}

/* ---------- barra superior ---------- */
.topbar {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  min-height: 60px;
  padding: 0 var(--gutter);
  background: var(--negro);
}
.topbar__home {
  font-family: var(--spartan); font-weight: 700; font-size: 0.8125rem; text-decoration: none;
}
.topbar__lang {
  position: absolute; inset-inline-end: var(--gutter);
  display: flex; gap: 0.5rem; font-size: 0.9375rem;
}
.topbar__lang a { font-family: var(--idioma); color: var(--naranja-2); text-decoration: none; opacity: 0.6; }
.topbar__lang a.is-active { opacity: 1; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--negro); }
.hero__video {
  width: 100%; height: clamp(320px, 46vw, 660px); object-fit: cover; opacity: 0.85;
}
.hero__logo {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: clamp(140px, 16vw, 230px); height: auto;
}
.anchors {
  /* `fixed`, no `absolute`: en el original el menú acompaña al scroll y sigue visible en toda
     la página (medido: el ancla se queda clavada a 481 px del borde superior del viewport a
     cualquier altura). Con `absolute` dentro del hero se quedaba atrás al bajar. */
  position: fixed; inset-block-start: 50%; inset-inline-end: var(--gutter);
  transform: translateY(-50%);
  z-index: 50;
}
.anchors ul { list-style: none; margin: 0; padding: 0; text-align: end; }
.anchors a {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem;
  font-family: var(--condensada); font-size: 1rem; color: var(--naranja);
  text-decoration: none; padding: 0.28rem 0;
}
.anchors a span {
  width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%;
}
.anchors a:hover span { background: currentColor; }

/* ---------- intro ---------- */
.intro {
  position: relative;
  background: var(--gris-seccion) url("../img/seccion-maskeline.webp") right center / cover no-repeat;
  min-height: clamp(420px, 48vw, 690px);
  display: flex; align-items: center;
}
/* Sin este velo el texto cae sobre la foto y deja de leerse (se ve sobre todo en móvil,
   donde la imagen ocupa el ancho completo). */
.intro::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 78%);
}
.intro__text {
  position: relative; padding: clamp(2rem, 5vw, 4.5rem) var(--gutter); max-width: 46rem;
}
.intro h1 {
  font-size: clamp(1.375rem, 2.4vw, 2rem); line-height: 1.4; margin-bottom: 1.2rem;
}
.intro__body p { margin: 0 0 0.2rem; font-size: 1.125rem; font-weight: 500; }
.intro__lead { margin-bottom: 0.6rem !important; }

/* ---------- tarjetas de trabajos ---------- */
.works__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  background: var(--negro);
}
.card { position: relative; display: block; text-decoration: none; overflow: hidden; }
.card img {
  width: 100%; height: clamp(160px, 20vw, 290px); object-fit: cover;
  transition: transform 0.6s ease, opacity 0.4s ease; opacity: 0.85;
}
.card:hover img { transform: scale(1.04); opacity: 1; }
.card__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--titular); font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 32px); letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

/* ---------- inversión ---------- */
.investment {
  background: var(--gris-oscuro) url("../img/seccion-inversion.webp") right center / cover no-repeat;
  min-height: clamp(420px, 50vw, 722px);
  display: flex; align-items: center;
}
.investment__text { padding: var(--gutter); max-width: 34rem; }
.investment h2 {
  font-size: clamp(1.375rem, 2.4vw, 2rem); line-height: 1.35; margin-bottom: 0.8rem;
}
.link-more {
  font-family: var(--acento-tipo); color: var(--naranja-2); text-decoration: none;
  font-size: 1.25rem;
}
.link-more:hover { text-decoration: underline; }

/* ---------- clientes ---------- */
.clients {
  background: var(--negro) url("../img/seccion-clientes.webp") center / cover no-repeat;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  min-height: clamp(380px, 42vw, 610px);
  display: flex; flex-direction: column; justify-content: center;
}
/* `width: 100%` no es decorativo: como flex item, la rejilla se encogía a su contenido y,
   con los logos aún sin cargar, quedaba en 0 px de ancho. Una imagen de tamaño 0 nunca entra
   en el viewport, así que `loading="lazy"` no la pedía jamás: la sección salía vacía. */
.clients h2 { color: var(--naranja); font-size: 2rem; margin-bottom: 2.5rem; }
.clients__grid {
  list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 60rem;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; justify-items: center;
}
.clients__grid img {
  max-height: 46px; width: auto; object-fit: contain;
  /* Sin filtro: las imágenes que sirve el original ya vienen tratadas. Aplanarlas con
     `brightness(0) invert(1)` convertía el escudo del Barça en una silueta blanca sin
     detalle, cuando en el original conserva sus grises. */
  opacity: 0.92;
}

/* ---------- contacto ---------- */
.contact { padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter); }
.contact h2 { color: var(--naranja-2); font-size: 2rem; margin-bottom: 2rem; }
.contact__grid {
  display: grid; grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem); align-items: start;
}
.contact__data { font-style: normal; font-family: var(--datos); }
.contact__offices { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.contact__offices li { margin-bottom: 0.9rem; }
/* En el original la primera sede va entera en naranja y la segunda en blanco. */
.contact__offices li:first-child { color: var(--naranja-2); }
.contact__offices strong { display: block; font-weight: 400; }
.contact__offices li:not(:first-child) strong { color: var(--blanco); }
.contact__data a { text-decoration: none; }
.contact__data a:hover { color: var(--naranja); }
.contact__social { display: flex; gap: 0.75rem; margin-top: 1rem; }
.contact__social img { width: 24px; height: 24px; }

.contact__form { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.field { margin: 0; display: grid; gap: 0.35rem; }
.field label { font-family: var(--formulario); font-size: 0.875rem; font-weight: 300; }
.field input, .field textarea {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--blanco); font: inherit; font-size: 0.95rem; padding: 0.6rem 0.7rem;
  border-radius: 2px;
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--naranja); outline-offset: 1px; border-color: transparent;
}
.field--textarea, .field--check, .legal, .field--submit, .form-status {
  grid-column: 1 / -1;
}
.field--check { display: flex; align-items: flex-start; gap: 0.6rem; }
.field--check label { font-family: var(--formulario); font-size: 0.875rem; font-weight: 300; }
.legal { font-family: var(--datos); font-size: 0.6875rem; line-height: 1.45; color: var(--blanco); }
.legal summary { cursor: pointer; letter-spacing: 0.04em; }
.legal p { margin: 0.5rem 0 0; }
.field--submit { justify-items: end; }
.contact__form button {
  background: var(--naranja-boton); color: var(--negro); border: 0;
  font-family: var(--formulario); font-size: 0.875rem; font-weight: 300;
  padding: 0.55rem 2.5rem; border-radius: 2px;
  cursor: pointer;
}
.contact__form button:hover { filter: brightness(1.08); }
.form-status { margin: 0; font-family: var(--acento-tipo); font-size: 0.875rem; min-height: 1.4em; }
.form-status.is-error { color: var(--naranja); }

/* ---------- páginas de sección ---------- */
.section-head { padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) clamp(1.5rem, 4vw, 3rem); text-align: center; }
.section-head h1 {
  font-family: var(--titular-seccion); font-weight: 900;
  font-size: clamp(1.75rem, 3.2vw, 38px); letter-spacing: normal;
}

.gallery { padding: 0 var(--gutter) clamp(2rem, 5vw, 4rem); }
.gallery__canal {
  max-width: var(--ancho); margin: 0 auto 1.2rem;
  font-family: var(--galeria); font-size: 1rem; font-weight: 400;
}
.gallery__grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho);
  display: grid; gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.video__play {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: #111; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden;
}
.video__play img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.video__play::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border: 2px solid var(--blanco); border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  background-image: linear-gradient(transparent, transparent);
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0);
}
.video__play::before {
  content: ""; position: absolute; z-index: 1; inset: 50% auto auto calc(50% + 3px);
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--blanco);
}
.video__play:hover img { opacity: 1; }
.video__time {
  position: absolute; inset-block-end: 0.5rem; inset-inline-end: 0.6rem; z-index: 2;
  font-family: var(--datos); font-size: 0.75rem; color: var(--blanco);
  background: rgba(0, 0, 0, 0.6); padding: 0.1rem 0.35rem;
}
.video__title { font-family: var(--galeria); font-size: 0.875rem; font-weight: 700; margin: 0.7rem 0 0.15rem; }
.video__kind { margin: 0; font-family: var(--galeria); font-size: 0.75rem; color: var(--blanco); }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

.section-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
  font-family: var(--spartan); font-weight: 700; font-size: 1.25rem;
}
.section-nav a { color: var(--naranja); text-decoration: none; }
.section-nav a.is-active { color: var(--blanco); }
.section-nav a:hover { text-decoration: underline; }

/* ---------- páginas legales ---------- */
.legal-page {
  /* 780 px de texto, como el original, más el margen lateral. */
  max-width: calc(780px + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
}

/* El original da a cada una de las tres legales un título distinto: Fahkwang de 60 px a la
   izquierda en cookies, la misma Fahkwang centrada en privacidad, y Helvetica de 30 px en
   mayúsculas y centrada en el compromiso. Se unifican en el primero —la que mejor está de las
   tres, y la única alineada con el cuerpo del texto que hay debajo. */
.legal-page h1 {
  font-family: var(--acento-tipo);
  font-weight: 400;
  color: var(--blanco);
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.2;
  margin-bottom: 2rem;
}
.legal-page h1.es-largo { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.legal-page p { margin: 0 0 1rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }

.investment-body {
  display: grid; gap: 1rem; max-width: var(--ancho); margin: 0 auto;
  padding: 0 var(--gutter) clamp(2rem, 5vw, 4rem);
}
.pending-note { color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; }


/* ---------- pie ---------- */
.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.5rem var(--gutter) 2.5rem; text-align: center;
}
.footer__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.5rem;
  font-family: var(--datos); font-size: 0.875rem;
}
.footer__links a { text-decoration: underline; text-underline-offset: 3px; }
.footer__copy { margin: 0.8rem 0 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }

/* ---------- móvil ---------- */
/* Entre 861 y 1180 px el menú flotante se comería el contenido, así que se retira; por
   debajo vuelve, pero dentro del hero y en horizontal, no flotando. Ocultarlo del todo
   dejaba la home sin navegación, y el original sí la ofrece a 390 px. */
@media (max-width: 1180px) {
  .anchors { display: none; }
}

@media (max-width: 860px) {
  .anchors {
    display: block; position: static; transform: none;
    padding: 0.75rem var(--gutter) 0;
    background: var(--negro);
  }
  .anchors ul {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 1.1rem;
    text-align: center;
  }
  .anchors a { justify-content: center; font-size: 0.9375rem; }
  .anchors a span { display: none; }
}

@media (max-width: 860px) {
  .works__grid { grid-template-columns: 1fr; }
  .intro, .investment { background-position: center; }
  .intro::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.88) 35%);
  }
  .contact__grid, .contact__form { grid-template-columns: 1fr; }
  .clients__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card img { transition: none; }
  .hero__video { display: none; }
}

/* ---------- mapa de contacto ----------
   El iframe de Google no se inserta hasta que el visitante lo pide: mientras tanto se ve una
   imagen de OpenStreetMap servida desde nuestro dominio. Es lo que permite que el sitio no
   cargue ni un tercero —y por tanto no necesite banner de cookies— sin perder el mapa. */
.mapa { margin-top: clamp(2rem, 4vw, 3rem); }
.mapa__abrir {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: #111; cursor: pointer; overflow: hidden;
  height: clamp(220px, 26vw, 380px);
}
.mapa__abrir img {
  width: 100%; height: 100%; object-fit: cover;
  /* Apagado LEVE: el Google Maps del original también es claro, así que oscurecerlo mucho
     alejaría del sitio que estamos replicando. Solo se baja el brillo lo justo para que el
     recuadro no deslumbre sobre el fondo negro. */
  filter: grayscale(0.2) brightness(0.88);
}
.mapa__abrir:hover img { filter: grayscale(0) brightness(1); }
.mapa__cta {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  background: var(--naranja-boton); color: var(--negro);
  font-family: var(--texto); font-weight: 600; font-size: 0.95rem;
  padding: 0.6rem 1.4rem; border-radius: 2px; white-space: nowrap;
}
.mapa iframe { width: 100%; height: clamp(220px, 26vw, 380px); border: 0; display: block; }
.mapa__nota {
  margin: 0.5rem 0 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.55);
}

/* ---------- inversión e incentivos fiscales ---------- */
.inversion__intro { margin: 0 0 0.6rem; font-size: 1.125rem; font-weight: 500; }
.opciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: var(--ancho); margin: 0 auto;
  padding: 0 var(--gutter) clamp(2rem, 5vw, 3.5rem);
}
.opcion h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; margin-bottom: 0.9rem; }
.opcion__gancho { font-weight: 500; margin: 0 0 0.6rem; }
.opcion p { margin: 0 0 0.9rem; }

.rebate {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.rebate h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; margin-bottom: 1.2rem; }
.rebate__encabezado { font-weight: 700; margin: 0 0 0.4rem; }
.rebate__gancho { margin: 0 0 1.4rem; }
.rebate__subtitulo { font-weight: 500; margin: 0 0 0.6rem; }
.rebate__puntos { margin: 0 0 1.4rem; padding-inline-start: 1.2rem; }
.rebate__puntos li { margin-bottom: 0.3rem; }
.rebate__nota { margin: 0 0 0.8rem; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }

.cierre {
  max-width: var(--ancho); margin: 0 auto; text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(3rem, 6vw, 4.5rem);
}
.cierre h2 { color: var(--naranja-2); font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 0.6rem; }
.cierre p { margin: 0 0 1rem; }

/* Tamaños propios de /inversion: el original usa 25 px en todos sus titulares y 15 en el
   texto, más pequeños que en el resto del sitio. Medidos uno a uno contra el Wix. */
.page-investment .section-head h1,
.page-investment .opcion h2,
.page-investment .rebate h2 { font-size: clamp(1.25rem, 2vw, 25px); }
.page-investment .inversion__intro {
  font-size: clamp(1.125rem, 1.9vw, 25px); color: var(--naranja-2); font-weight: 400;
}
.page-investment .opcion p,
.page-investment .opcion__gancho,
.page-investment .rebate p,
.page-investment .rebate__puntos li { font-size: 0.9375rem; }
.page-investment .opcion__gancho,
.page-investment .rebate__subtitulo { font-weight: 400; }

/* El título de Ficción es 35 px en el original, no 38 como en Documental: en Wix cada
   página lleva su tamaño puesto a mano. */
.page-section.seccion-ficcion .section-head h1 { font-size: clamp(1.75rem, 3vw, 35px); }

/* Detalles medidos en /inversion que se apartan del resto del sitio:
   el "+ info" es texto blanco de 14 px (no el enlace naranja grande de la home), el
   encabezado del bloque no va en negrita, y en el cierre los colores van al revés de lo
   que parecería: título en blanco y la frase de abajo en naranja y en negrita. */
.page-investment .link-more { font-size: 0.875rem; color: var(--blanco); }
.page-investment .rebate__encabezado { font-weight: 400; }
.page-investment .rebate__nota { color: var(--blanco); }
.page-investment .cierre h2 {
  font-size: clamp(1.25rem, 2vw, 25px); font-weight: 700; color: var(--blanco);
}
.page-investment .cierre p {
  font-size: 0.9375rem; font-weight: 700; color: var(--naranja);
}

/* /inversion usa la misma Spartan de los títulos de sección */
.page-investment .opcion h2,
.page-investment .rebate h2,
.page-investment .cierre h2 { font-family: var(--titular-seccion); }

/* Calibración de Spartan: a igual font-size, League Spartan pinta más pequeño que la
   Spartan MB del original (medido: 249 px de ancho de texto frente a 278 en el título de
   sección). Se compensa con un factor de 1.115 en los elementos que la usan, para que el
   texto ocupe lo mismo que en el sitio que replicamos. */
.section-head h1 { font-size: clamp(1.95rem, 3.6vw, 42.4px); }
.page-investment .section-head h1,
.page-investment .opcion h2,
.page-investment .rebate h2,
.page-investment .cierre h2 { font-size: clamp(1.4rem, 2.2vw, 27.9px); }
.page-section.seccion-ficcion .section-head h1 { font-size: clamp(1.95rem, 3.35vw, 39px); }
.topbar__home { font-size: 0.905rem; }
.section-nav { font-size: 1.394rem; }

/* ---------- menú del canal y panel de compartir ----------
   Réplica del "⋮ > Compartir" que el canal de vídeo tiene en el original. Los botones de red
   son enlaces normales a los "sharer" de cada plataforma: no cargan scripts ni cookies de
   terceros, solo abren una ventana cuando el visitante los pulsa. */
.canal {
  position: relative; display: flex; align-items: center; gap: 0.5rem;
  max-width: var(--ancho); margin: 0 auto 1.2rem;
}
.canal .gallery__canal { margin: 0; }
.canal__menu {
  background: none; border: 0; color: var(--blanco); cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: 0.2rem 0.35rem; border-radius: 2px;
}
.canal__menu:hover { color: var(--naranja); }
.canal__desplegable {
  position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 20;
  background: #111; border: 1px solid rgba(255, 255, 255, 0.18); padding: 0.25rem;
}
.canal__desplegable button {
  background: none; border: 0; color: var(--blanco); cursor: pointer;
  font-family: var(--galeria); font-size: 0.9375rem; padding: 0.5rem 1.5rem 0.5rem 0.75rem;
  white-space: nowrap;
}
.canal__desplegable button:hover { color: var(--naranja); }

.compartir {
  position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.94);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter) clamp(2rem, 12vw, 14rem);
}
.compartir[hidden] { display: none; }
.compartir h2 {
  font-family: var(--galeria); font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin-bottom: 2rem;
}
.compartir__cerrar {
  position: absolute; inset-block-start: clamp(1rem, 3vw, 2.5rem);
  inset-inline-end: clamp(1rem, 6vw, 6rem);
  background: none; border: 0; color: var(--blanco); font-size: 2.5rem; line-height: 1;
  cursor: pointer;
}
.compartir__redes { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.compartir__redes a, .compartir__redes button {
  color: var(--blanco); background: none; border: 0; padding: 0; cursor: pointer;
}
.compartir__redes a:hover, .compartir__redes button:hover { color: var(--naranja); }
.compartir__aviso { margin: 1rem 0 0; font-family: var(--galeria); font-size: 0.875rem; color: var(--naranja); }

/* Las páginas legales conservan las listas y la numeración del original: son documentos
   jurídicos y aplanarlos a párrafos cambia cómo se leen. */
.legal-page ul, .legal-page ol { margin: 0 0 1rem; padding-inline-start: 1.4rem; }
.legal-page li { margin-bottom: 0.4rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }
.legal-page li p { margin: 0; }
.legal-page h2, .legal-page h3 { font-size: 1.125rem; margin: 1.6rem 0 0.6rem; }
.legal-page a { color: var(--naranja); }
.legal-page__figura {
  width: 100%; max-width: 900px; height: auto; margin: 1.5rem 0; border-radius: 2px;
}

/* ---------- ancho del contenido ----------
   En el original el contenido no ocupa todo el ancho: va en una caja de ~980 px centrada, así
   que a 1440 px arranca sobre x=270 y no pegado al borde. Medido en el Wix: "VISIONAMOS
   SUEÑOS," empieza en 275, "CLIENTES" en 291 y "CONTACTA" en 253; aquí empezaban todos en 58.
   Eso es lo que se percibía como "en Prod está centrado y en Stage a la izquierda". */
:root { --caja: 980px; }
.intro__text, .investment__text { max-width: var(--caja); }
.intro, .investment { padding-inline: max(var(--gutter), calc((100% - var(--caja)) / 2)); }
.intro__text, .investment__text { padding-inline: 0; }
.clients, .contact {
  padding-inline: max(var(--gutter), calc((100% - var(--caja)) / 2));
}
.clients__grid { margin-inline: 0; max-width: var(--caja); }
.contact__grid { max-width: var(--caja); }

/* ---------- logos de cliente ----------
   Cada logo tenía su tamaño en el original (de 22 a 75 px de alto); forzarlos todos a 46
   agrandaba unos y achicaba otros. Se respeta el alto real de cada uno. */
.clients__grid img { max-height: none; height: auto; }
.clients__grid li { display: flex; align-items: center; justify-content: center; min-height: 80px; }

/* Iconos del bloque de contacto: el original los tiene junto a la dirección, el teléfono,
   el correo y las redes. */
.contact__offices li { display: flex; align-items: flex-start; gap: 0.7rem; }
.contact__linea { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.6rem; }
.contact__icono { display: inline-flex; color: var(--naranja-2); flex: 0 0 auto; }
.contact__social { align-items: center; }

/* La celda del Barça lleva escudo y texto juntos, como en el original. */
.clients__grid li { gap: 0.4rem; }

/* ---------- ajustes medidos contra el original en las páginas de sección ----------
   Todos salen de comparar capturas del Wix con las nuestras, no de criterio propio. */

/* El menú inferior va en peso normal y a 20 px; estaba en negrita y a 22,3 */
.section-nav { font-size: 1.25rem; }
.section-nav a { font-weight: 400; }

/* Los títulos de las fichas de vídeo: el original usa Futura Book, que pesa mucho menos
   que un 700 de Jost */
.video__title { font-weight: 500; }

/* El botón de reproducir mide 40 px en el original, no 52 */
.video__play::after { width: 40px; height: 40px; }
.video__play::before { border-width: 6px 0 6px 10px; }

/* La duración va suelta sobre la miniatura, sin pastilla oscura detrás */
.video__time { background: none; padding: 0; }

/* El pie de cada ficha lleva una sangría respecto al borde de la miniatura */
.video__title, .video__kind { padding-inline-start: 20px; }
.video__title { margin-top: 1.6rem; }

/* Aire entre el título de sección y la galería, como en el original */
.section-head { padding-bottom: clamp(2rem, 5vw, 4rem); }

/* ---------- panel de compartir ----------
   Estaba alineado a la izquierda y con el título un tercio más grande de la cuenta. */
.compartir { align-items: center; text-align: center; padding-inline: var(--gutter); }
.compartir h2 { font-size: clamp(1.3rem, 2.6vw, 2rem); }
.compartir__redes { justify-content: center; }
.compartir__cerrar { inset-block-start: clamp(2rem, 8vw, 6rem); inset-inline-end: clamp(2rem, 14vw, 16rem); }

/* El desplegable del "⋮": en el original es negro puro y sin borde, y los puntos no
   cambian de color al abrirlo */
.canal__desplegable { background: #000; border: 0; min-width: 195px; }
.canal__menu[aria-expanded="true"] { color: var(--blanco); }

/* ---------- /inversion, estructura medida en el original ----------
   Dos bandas con foto (el hombre con los billetes arriba, y otra tras el bloque de Tax
   Rebate), y entre medias dos columnas centradas. Al rehacer esta página con el contenido
   recuperado se habían quedado fuera las dos imágenes. */
.inversion-hero { position: relative; }
.inversion-hero img { width: 100%; height: clamp(340px, 54vw, 773px); object-fit: cover; }
.inversion-hero__texto {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: var(--gutter);
}
.page-investment .opciones { text-align: center; }
.page-investment .opcion h2 { line-height: 1.15; }
.page-investment .opcion { max-width: 34rem; margin-inline: auto; }

.rebate { position: relative; padding: 0; border: 0; max-width: none; }
.rebate__fondo { width: 100%; height: clamp(320px, 48vw, 699px); object-fit: cover; }
.rebate__texto {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: var(--gutter);
}
.boton-info {
  display: inline-block; margin-top: 1rem; background: var(--naranja-boton);
  color: var(--negro); text-decoration: none; font-size: 0.875rem;
  padding: 0.5rem 1.6rem; border-radius: 2px;
}
.boton-info:hover { filter: brightness(1.08); }

.rebate-detalle {
  max-width: var(--caja); margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter); text-align: center;
}
.rebate-detalle .rebate__subtitulo {
  font-family: var(--titular-seccion); font-weight: 900;
  font-size: clamp(1.4rem, 2.2vw, 27.9px); margin-bottom: 1.2rem;
}
.rebate__cifra { margin: 0 0 0.3rem; font-size: 0.9375rem; }
.page-investment .cierre { text-align: center; }

/* ---------- ajustes de la home medidos contra el original ----------

   9. El menú lateral: el círculo va a la DERECHA de cada etiqueta, no a la izquierda, y es
      más grande. El interlineado era un 50% mayor de la cuenta. */
.anchors a { flex-direction: row; justify-content: flex-end; padding: 0.12rem 0; }
.anchors a span { order: 2; width: 9px; height: 9px; border-width: 2px; }

/* 12. "INVERSIÓN E INCENTIVOS FISCALES" va en dos líneas y centrado, con "más info" debajo */
.investment { justify-content: center; }
.investment__text { text-align: center; max-width: 40rem; margin-inline: auto; }

/* 13. La sección de clientes está más oscurecida en el original */
.clients { position: relative; }
.clients::before {
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35);
}
.clients h2, .clients__grid, .clients .filtros-svg { position: relative; }

/* 14. Los iconos de contacto son blancos y de mayor tamaño, no naranjas y pequeños */
.contact__icono { color: var(--blanco); }
.contact__icono svg { width: 22px; height: 22px; }

/* 15. El campo Email ocupa el ancho completo, como el de Mensaje */
.contact__form .field:nth-of-type(3) { grid-column: 1 / -1; }

/* El aspa del panel de compartir va en la esquina del bloque, no pegada al borde de la
   ventana como estaba. */
.compartir__cerrar {
  inset-block-start: clamp(2.5rem, 22vh, 14rem);
  inset-inline-end: clamp(2rem, 18vw, 20rem);
}

/* El mapa va casi a sangre, como en el original (1280 px frente a los 980 de la caja de
   contenido), y la línea separadora queda ENTRE el formulario y el mapa. */
.contact { padding-bottom: 0; }
.mapa {
  max-width: 1280px; margin-inline: auto; margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.mapa__abrir, .mapa iframe { height: clamp(240px, 24vw, 350px); }
.footer { border-top: 0; padding-top: 2.5rem; }

/* El honeypot: un campo que solo rellenan los bots. Fuera de la vista pero no con
   display:none, que algunos bots detectan. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Foco visible en todo lo que se maneja con teclado. Sin esto, quien navega con tabulador
   no sabe dónde está. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 3px;
}

/* ---------- área táctil en móvil ----------
   Los enlaces del pie, los iconos sociales y los del panel de compartir miden menos de
   24 px de alto: se pueden ver bien y ser incómodos de acertar con el dedo. Se les da
   holgura con padding, sin cambiar su aspecto: el hueco crece, el dibujo no.

   Los enlaces sueltos DENTRO de los párrafos legales se quedan como están a propósito:
   agrandarlos rompería el interlineado del texto, y la propia norma los exime por ir
   embebidos en una línea de texto. */
@media (pointer: coarse) {
  .footer__links a,
  .section-nav a,
  .topbar__home,
  .topbar__lang a { padding: 0.65rem 0.35rem; }
  .contact__social a,
  .compartir__redes a,
  .compartir__redes button { padding: 0.6rem; }
  .contact__data a { display: inline-block; padding-block: 0.35rem; }
  .legal summary { padding-block: 0.5rem; }
}

/* ---------- correcciones medidas en el original (segunda revisión) ----------

   El formulario: Nombre y Apellido van en la misma fila (202 px cada uno) y Email y Mensaje
   ocupan las dos columnas. La regla anterior usaba :nth-of-type y cogía el campo equivocado
   porque antes hay campos ocultos y el honeypot; ahora el email lleva su propia clase. */
.contact__form .field:nth-of-type(3) { grid-column: auto; }
.field--ancho { grid-column: 1 / -1; }

/* "INVERSIÓN E INCENTIVOS FISCALES" va a la IZQUIERDA sobre la zona oscura de la foto, en
   dos líneas. Centrado caía encima del hombre y los billetes y no se leía. (Medido: x=190
   en el original, no centrado como se había supuesto.) */
.investment { justify-content: flex-start; padding-inline-start: max(var(--gutter), 190px); }
.investment__text { text-align: start; max-width: 26rem; margin-inline: 0; }
.investment h2 { max-width: 26rem; }

/* La sangría de las sedes se mantiene aunque la segunda no lleve pin */
.contact__offices li { padding-inline-start: 0; }
.contact__offices li:not(:first-child) .contact__icono { width: 22px; }

/* El botón "+ info" del original es blanco y de esquinas rectas */
.boton-info {
  background: transparent; color: var(--blanco); border: 1px solid var(--blanco);
  border-radius: 0; font-family: var(--texto);
}
.boton-info:hover { background: var(--blanco); color: var(--negro); filter: none; }

/* La franja de clientes está más apagada en el original (luma media 22 frente a 29) */
.clients::before { background: rgba(0, 0, 0, 0.5); }

/* Detalles finos medidos en el original (segunda revisión) */

/* El logo del hero no está centrado: va 39 px por encima del centro */
.hero__logo { inset-block-start: calc(50% - 39px); }

/* El menú lateral va más apretado y con el círculo mayor */
.anchors a { padding: 0.05rem 0; }
.anchors a span { width: 10px; height: 10px; }

/* El original coloca las etiquetas de las tarjetas a la izquierda del centro, no centradas */
.card__label { place-items: center start; padding-inline-start: 12%; }

/* Los campos del formulario son más bajos y de borde más marcado, y el textarea no se
   redimensiona a mano */
.field input, .field textarea { padding: 0.35rem 0.6rem; border-color: rgba(255, 255, 255, 0.8); }
.field textarea { resize: none; }

/* La flecha de scroll al pie del hero de /inversion, que el original sí tiene */
.inversion-hero__chevron {
  position: absolute; inset-block-end: 1.5rem; inset-inline-start: 50%;
  transform: translateX(-50%); color: var(--naranja-2);
}
.inversion-hero__chevron:hover { color: var(--blanco); }

/* ---------- tercera revisión: ajustes medidos con el navegador contra el original ----------
   Todos los valores de este bloque salen de getBoundingClientRect/getComputedStyle sobre
   https://www.maskeline.com/ a 1440x1000, no de criterio propio. */

/* 1. Intro de la home ("¡Somos Maskeline!").
      En el original el texto va en una columna estrecha: el <p> arranca en x=275 y su caja
      de contenido mide 561 px (la línea más larga, 545). Aquí heredaba los 980 px de la caja
      general, así que el párrafo entraba en 4 líneas y en el original son 6.
      Y es UN bloque compacto: el Wix lo pinta como un solo <p> con <br>, de modo que las
      siete líneas (titulillo incluido) van a un paso constante de 25,2 px, sin el aire que
      la réplica metía entre párrafos. */
.intro__text { max-width: 561px; }
.intro__body p { margin: 0; line-height: 1.4; }
.intro__lead { margin-bottom: 0 !important; }
/* Hueco entre el claim y el texto: 60,8 px de línea a línea en el original (eran 64) */
.intro h1 { margin-bottom: 16px; }

/* El bloque NO va centrado en la foto: en el original arranca a 312 px del borde superior
   de la sección (que mide 690), no a los 204 que daba el centrado, así que la réplica lo
   pintaba 108 px demasiado arriba. Se ancla arriba y se deja que el valor baje con el
   ancho para que en pantallas pequeñas no se despegue del todo. */
.intro { align-items: flex-start; }
.intro__text { padding-block-start: clamp(2rem, 21.7vw, 312px); }

/* 2. Menú lateral de anclas: en el original las etiquetas van a 22,4 px de paso
      (font-size 16, line-height 22,4). Aquí el paso era de 27,2 (line-height 25,6 heredado
      del body más 1,6 de padding). */
.anchors a { line-height: 22.4px; padding: 0; }

/* 3. Parrilla de clientes: en el original los logos NO están repartidos por igual. Cada uno
      va colocado a mano dentro de la sección, y los centros de las cuatro columnas caen en
      x=380,3 / 618,7 / 835,5 / 1035,2 (separaciones de 238,4 / 216,8 / 199,7: se van
      cerrando hacia la derecha). La réplica los repartía a partes iguales cada 259 px, y la
      fila más ancha medía 900 px frente a los 779 del original.
      Se reproduce con columnas explícitas, cuyos bordes son los puntos medios entre centros
      —de ahí los anchos decrecientes— y sin hueco entre ellas. Los tamaños de logo no se
      tocan: ya coincidían. Por debajo de 1000 px no cabe la suma (905 px) y se deja la
      repartición uniforme de antes. */
@media (min-width: 1000px) {
  .clients__grid {
    grid-template-columns: 238.4px 238.4px 195.2px 204.2px;
    column-gap: 0;
    padding-inline-start: 31.1px;
  }
}

/* 4. Iconos del bloque de contacto. Medidos en el original: teléfono 25x25, sobre 25x17,
      pin 21x29 y el "me gusta" 24x25; aquí estaban todos a 22x22. Como nuestros iconos son
      cuadrados (viewBox 24x24) se unifican en 25, que es el ancho real de los del original.
      Y sobre todo iban apretados en vertical: de icono a icono había 35 y 41 px donde el
      original deja 66 (teléfono→sobre) y 49 (sobre→redes). Los cuatro iconos sociales van a
      31 px de paso (24 de dibujo + 7 de hueco), no a 36. */
.contact__icono svg { width: 25px; height: 25px; }
.contact__offices li:not(:first-child) .contact__icono { width: 25px; }
.contact__linea { margin-block-end: 40.4px; }
.contact__linea + .contact__linea { margin-block-end: 23.7px; }
.contact__social { margin-top: 0; gap: 7px; }

/* 5. Pie. La regla separadora que va sobre el mapa mide 1280 px en el original (un
      div "horizontal-line" en x=80, con el mapa justo debajo, también de 1280), mientras
      que aquí quedaba encajonada en los 980 de la caja de contenido.
      En vez de sacarla con márgenes negativos, se quita el sangrado grande de .contact y se
      le pasa a sus hijos: así el h2 y el formulario siguen empezando en x=230 y el mapa
      —con su línea— puede llegar a los 1280. */
.contact { padding-inline: var(--gutter); }
.contact > h2, .contact__grid { max-width: var(--caja); margin-inline: auto; }

/* 6. /inversion. El "España tiene incentivos fiscales para rodajes internacionales:" no es
      un titular Spartan en negrita: en el original es el mismo texto Madefor del cuerpo, a
      25 px con interlineado 35 y en peso normal, dentro de una columna de 383 px, de modo
      que cae en dos líneas y la segunda va entera en naranja. Aquí salía a 27,9 px en
      Spartan 900 y en una sola línea. */
.page-investment .rebate-detalle .rebate__subtitulo {
  font-family: var(--texto); font-weight: 500;
  font-size: 25px; line-height: 35px;
  max-width: 383px; margin-inline: auto;
}

/* En el original el naranja empieza en "rodajes", no en "para": la línea que corta el texto
   ("España tiene incentivos fiscales" / "para rodajes internacionales:") cae en el mismo
   sitio en los dos, pero el "para" del original va en blanco. El corte del titular se hace
   en la plantilla, así que ahí se cambia el punto de partición del <span class="accent">. */

/* Aire antes de "¿QUIERES SABER MÁS?": del final de la última nota al titular hay 25,4 px
   en el original y aquí había 124,8 (56 de padding inferior del detalle + 56 del superior
   del cierre + el margen de la nota). */
.page-investment .rebate-detalle { padding-block-end: 0; }
.page-investment .cierre { padding-block-start: 12.6px; }

/* Las páginas de 404 y gracias usaban Fahkwang en su enlace, una tipografía que no aparece
   en ninguna otra parte, y el contenido quedaba pegado arriba con un vacío enorme debajo. */
.page-legal .legal-page { min-height: 46vh; }
.page-legal .link-more { font-family: var(--texto); }

/* La caja de "INVERSIÓN E INCENTIVOS FISCALES" va a la izquierda (x=168, 412 px de ancho)
   pero su texto está CENTRADO dentro de ella, así que la primera línea queda desplazada
   respecto a la segunda. Es raro y es del original: se replica tal cual, porque no es una
   errata sino maquetación del diseñador. Para alinearlo a la izquierda basta con quitar el
   text-align de aquí. */
.investment { padding-inline-start: max(var(--gutter), 168px); }
.investment__text { text-align: center; max-width: 412px; }
.investment h2 { max-width: none; }

/* ---------- /inversion, estructura real medida en el original ----------
   Tres columnas sobre negro con el texto centrado, y después una banda con foto que lleva
   TODO el detalle del Tax Rebate y el cierre superpuestos a la derecha. */
.page-investment .opciones {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1280px; margin: 0 auto; text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
}
.page-investment .opcion { max-width: 26rem; margin-inline: auto; }
.page-investment .opcion h2 { line-height: 1.15; margin-bottom: 1.4rem; }
.page-investment .opcion__gancho { font-weight: 400; margin-bottom: 0.9rem; }

/* El "+ info" es un botón sólido naranja con el texto en blanco */
.page-investment .boton-info {
  display: inline-block; margin-top: 0.8rem;
  background: var(--naranja-boton); color: var(--blanco); border: 0; border-radius: 0;
  font-family: var(--texto); font-size: 0.875rem; padding: 0.5rem 1.5rem; text-decoration: none;
}
.page-investment .boton-info:hover { filter: brightness(1.1); }

/* La banda de la segunda foto: el texto va superpuesto en una columna a la derecha */
.page-investment .rebate { position: relative; padding: 0; border: 0; max-width: none; }
.page-investment .rebate__fondo {
  width: 100%; height: clamp(420px, 48vw, 699px); object-fit: cover;
}
.page-investment .rebate__texto {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; text-align: start;
  width: min(383px, 42vw); margin-inline-start: min(789px, 55vw);
  padding-block: clamp(1rem, 3vw, 2rem);
}
.page-investment .rebate__subtitulo {
  font-family: var(--titular-seccion); font-weight: 900;
  font-size: clamp(1.25rem, 2vw, 25px); line-height: 1.2; margin-bottom: 1rem;
}
.page-investment .rebate__cierre {
  font-family: var(--titular-seccion); font-weight: 900;
  font-size: clamp(1.25rem, 2vw, 25px); margin-top: 1.4rem; margin-bottom: 0.4rem;
}
.page-investment .rebate__cifra,
.page-investment .rebate__nota,
.page-investment .rebate__texto p { font-size: 0.9375rem; margin: 0 0 0.5rem; color: var(--blanco); }

/* En móvil no cabe superpuesto: el texto pasa debajo de la foto */
@media (max-width: 860px) {
  .page-investment .opciones { grid-template-columns: 1fr; }
  .page-investment .rebate__texto {
    position: static; width: auto; margin-inline-start: 0;
    padding: clamp(1.5rem, 5vw, 2.5rem) var(--gutter);
  }
  .page-investment .rebate__fondo { height: clamp(220px, 46vw, 340px); }
}

/* ---------- ajustes pedidos ----------

   Los rótulos de las tarjetas van CENTRADOS en su tarjeta. En el original están centrados
   dentro de una caja desplazada (su centro cae en el 45% de la tarjeta, no en el 50%), pero
   se ha decidido centrarlos de verdad: queda mejor y la diferencia es nuestra a propósito. */
.card__label { place-items: center; padding-inline-start: 0; }

/* El velo sobre la foto de "VISIONAMOS SUEÑOS" seguía oscureciéndola más que el original. */
.intro::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0) 72%);
}

/* /inversion: las tres columnas ocupan el ancho completo, sin caja ni padding lateral. Sus
   centros caen entonces en 240/721/1202, que es donde están en el original (238/719/1200). */
.page-investment .opciones {
  max-width: none; padding-inline: 0; gap: 0;
}
.page-investment .opcion { max-width: 22rem; }

/* El bloque de detalle arranca en x=789 en el original */
.page-investment .rebate__texto { margin-inline-start: min(789px, 55vw); width: min(400px, 42vw); }

.video__title { font-weight: 400; }

/* El bloque de Tax Rebate se salía de la banda por arriba y por abajo: ocupaba 744 px en un
   hueco de 691, cuando en el original mide 476. Tres causas, todas medidas: el titular iba a
   27,9 px en vez de 25 y se partía en cinco líneas, el interlineado era de 24 px en vez de 21,
   y la columna era de 400 px en vez de 383, lo que cambiaba dónde rompen las líneas. */
.page-investment .rebate__texto { width: min(440px, 44vw); }
.page-investment .rebate h2.rebate__subtitulo,
.page-investment .rebate h2.rebate__cierre { font-size: clamp(1.1rem, 1.8vw, 25px); line-height: 1.2; }
.page-investment .rebate__subtitulo { margin-bottom: 0.7rem; }
.page-investment .rebate__cierre { margin-top: 1rem; margin-bottom: 0.2rem; }
.page-investment .rebate__cifra,
.page-investment .rebate__nota,
.page-investment .rebate__texto p { line-height: 21px; margin-bottom: 0.45rem; }