/* Cabecera, pie, cierre y botón flotante. Comportamiento y medidas de SatcontrolWeb (493548b). */

.salta-al-contenido { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--blanco); color: var(--tinta); padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 600; }
.salta-al-contenido:focus { left: 0; }

/* ---------- Cabecera ---------- */

.cabecera { background: var(--blanco); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 40; min-height: var(--alto-cabecera); }
.cabecera-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; position: relative; padding-block: 16px; }
.cabecera-logo { display: flex; align-items: center; flex-shrink: 0; }
.cabecera-logo img { height: 40px; width: auto; }
.cabecera-conmutador { display: none; cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--tinta); background: transparent; padding: 8px 16px; border: 1px solid var(--linea); border-radius: 999px; }
.js .cabecera-conmutador { display: inline-flex; align-items: center; }
.cabecera-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.cabecera-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.cabecera-enlaces a { position: relative; display: inline-block; padding-block: 4px; color: var(--tinta); font-weight: 500; text-decoration: none; }
.cabecera-enlaces a:hover, .cabecera-enlaces a:focus-visible, .cabecera-enlaces a[aria-current] { color: var(--azul); }
/* Dónde estás (petición del titular, 2026-10-09: «no se nota que está resaltado»): en negrita y con una
   raya naranja debajo. Al pasar el ratón por los demás asoma la misma raya, más suave. aria-current es
   "page" en la propia página y "true" en su apartado (la de un servicio, en Servicios). */
.cabecera-enlaces a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: 3px; background: var(--naranja); scale: 0 1; transition: scale .25s ease; }
.cabecera-enlaces a:hover::after, .cabecera-enlaces a:focus-visible::after { scale: 1; opacity: .45; }
.cabecera-enlaces a[aria-current] { font-weight: 600; }
.cabecera-enlaces a[aria-current]::after { scale: 1; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cabecera-enlaces a::after { transition: none; } }
.cabecera-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cabecera-contacto { display: grid; gap: 3px; justify-items: start; line-height: 1.25; }
.cabecera-telefono { font-size: .88rem; font-weight: 600; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.cabecera-telefono:hover, .cabecera-telefono:focus-visible { color: var(--azul); }
/* La ayuda remota, un botón aparte, del mismo alto que «Hablemos» pero de segundo nivel: fondo azul muy
   claro, borde azul y el icono de una pantalla conectada (petición del titular, 2026-10-08). */
.cabecera-ayuda { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9.5px 16px; border: 1.5px solid rgba(42, 68, 126, .28); border-radius: 10px; background: var(--halo); color: var(--azul); font-size: .9rem; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.cabecera-ayuda svg { flex: none; }
.cabecera-ayuda:hover, .cabecera-ayuda:focus-visible { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
@media (prefers-reduced-motion: reduce) { .cabecera-ayuda { transition: none; } }
/* En los ordenadores estrechos se aprietan los huecos para que menú, teléfono, ayuda y «Hablemos» sigan en
   una sola fila (con el botón de ayuda, a 880 px la cabecera pasaba a tres filas). */
@media (min-width: 861px) and (max-width: 1060px) {
  .cabecera-nav { gap: 14px 18px; }
  .cabecera-enlaces { gap: 10px 16px; }
  .cabecera-acciones { gap: 10px 12px; }
  .cabecera-ayuda { gap: 6px; padding-inline: 12px; }
}

@media (min-width: 861px) {
  .cabecera-conmutador { display: none !important; }
  .cabecera-nav { flex: 1 1 auto; }
  .cabecera-enlaces { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 860px) {
  html:not(.js) .cabecera-nav { width: 100%; }
  .js .cabecera-nav { display: none; flex-direction: column; align-items: stretch; gap: 18px; position: absolute; left: 0; right: 0; top: 100%; margin-top: 10px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: 20px 22px; box-shadow: var(--sombra); max-height: calc(100dvh - var(--alto-cabecera) - 20px); overflow-y: auto; }
  .js .cabecera-nav:not(.cabecera-nav--cerrado) { display: flex; }
  .js .cabecera-enlaces { flex-direction: column; align-items: flex-start; gap: 14px; }
  .js .cabecera-acciones { flex-direction: column; align-items: stretch; }
}

/* ---------- La cinta en diagonal bajo la parte de arriba de cada página (macro `cinta`) ---------- */
/* Para que no quede ninguna raya recta, el fondo de arriba (y su marca de agua) se funde en blanco por
   abajo, y la cinta hace de corte. La banda es más ancha que la ventana para que, girada, no se le vean
   las puntas (body recorta lo que sobra). Sin movimiento, la lista se queda quieta y en varias líneas;
   el desfile, la entrada y el brillo van en movimiento.css. */
.seccion-hero:has(+ .cinta) { padding-bottom: 112px; }
.seccion-hero:has(+ .cinta)::before { background: linear-gradient(transparent 55%, var(--blanco)), var(--fondo) url("/assets/img/marca/clara.svg") center / cover no-repeat; }
/* overflow-x: clip y no hidden: corta lo que sobra a los lados (si no, en el móvil la página se ensancha y se
   ve más pequeña) sin cortar arriba y abajo las puntas giradas ni la sombra. */
/* Fondo blanco: entre el final de la parte de arriba y el principio de «Nuestros productos» asomaba el gris de
   la página, una raya que se veía antes de que la cinta se desplegara. */
.cinta { position: relative; z-index: 2; margin-block: -56px 0; overflow-x: clip; background: var(--blanco); }
.cinta + .seccion { padding-top: 76px; }
/* La sección de después empieza con su marca de agua fundida en blanco: si no, sus líneas empezarían de
   golpe junto a las puntas de la cinta. */
main > .cinta + .seccion:not(.seccion--sin-marca)::before { background: linear-gradient(var(--blanco), transparent 180px), var(--blanco) url("/assets/img/marca/blanca.svg") center / cover no-repeat; }
.cinta-banda { position: relative; width: 116vw; margin-left: calc(50% - 58vw); padding: 22px 0; overflow: hidden; background: linear-gradient(100deg, var(--azul-hondo) 0%, var(--azul) 38%, var(--azul) 70%, var(--azul-hondo) 100%); transform: rotate(-2.6deg); box-shadow: 0 26px 48px -26px rgba(20, 35, 80, .6); }
/* Las dos rayas naranjas del borde: gruesa arriba, fina abajo. */
.cinta-banda::before, .cinta-banda::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; background: var(--naranja); }
.cinta-banda::before { top: 0; height: 4px; }
.cinta-banda::after { bottom: 0; height: 2px; opacity: .6; }
.cinta-pista { display: flex; justify-content: center; }
.cinta-lista { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 0; max-width: 1100px; margin: 0; padding: 0 16px; list-style: none; }
.cinta-lista[aria-hidden="true"] { display: none; }
.cinta-lista li { display: flex; align-items: center; }
/* Un rombo naranja entre servicio y servicio, como un remache de la cinta. */
.cinta-lista li::before { content: ""; flex: none; width: 9px; height: 9px; margin: 0 18px; background: var(--naranja); transform: rotate(45deg); }
.cinta-lista a { font-family: var(--display); font-size: clamp(.98rem, 1.3vw, 1.12rem); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; color: var(--sobre-azul); text-decoration: none; transition: color .2s ease; }
.cinta-lista a:hover, .cinta-lista a:focus-visible { color: var(--naranja-sobre-azul); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cinta-lista a:focus-visible { outline-color: var(--naranja-sobre-azul); }
/* En la página de un servicio, el suyo, marcado en naranja. */
.cinta-lista a[aria-current="page"], .cinta-lista a.cinta-actual { color: var(--naranja-sobre-azul); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cinta-brillo { display: none; }
@media (max-width: 600px) {
  .seccion-hero:has(+ .cinta) { padding-bottom: 92px; }
  .cinta { margin-top: -46px; }
  .cinta-banda { padding: 16px 0; transform: rotate(-3.5deg); }
  .cinta-lista li::before { margin: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .cinta-lista a { transition: none; } }

/* ---------- Letras gigantes en el segundo corte de cada página (macro `letrero`) ---------- */
/* Petición del titular (2026-10-08 en la portada, 2026-10-09 en todas): un corte distinto del de la cinta. De los cuatro diseños que vio
   eligió el «fantasma gigante»: la palabra enorme en el azul de marca casi transparente, sin contorno,
   cruzando la raya entre las dos secciones y con el título de «Qué hacemos» encima. Solo de adorno
   (aria-hidden). El letrero no ocupa alto: queda en la raya, y las letras caen sobre todo hacia el gris.
   overflow-x: clip corta lo que sobra a los lados sin ensanchar la página en el móvil. Al bajar,
   movimiento.js le pone --avance y movimiento.css las desliza; sin movimiento se quedan quietas. */
.seccion:has(+ .letrero) { padding-bottom: 110px; }
.letrero + .seccion { padding-top: 96px; }
.letrero + .seccion > * { position: relative; z-index: 2; }
.letrero { position: relative; z-index: 1; height: 0; overflow-x: clip; pointer-events: none; }
.letrero-texto { position: absolute; left: 50%; top: 0; transform: translate(-50%, -30%); font-family: var(--display); font-size: clamp(5rem, 19vw, 17rem); font-weight: 800; line-height: .8; letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; color: rgba(42, 68, 126, .07); }
/* El punto final, en el naranja del logo, igual de suave (es fondo, no texto: piel.test.js). */
.letrero-punto { display: inline-block; width: .15em; height: .15em; margin-left: .04em; background: rgba(245, 134, 52, .22); }
@media (max-width: 600px) {
  .seccion:has(+ .letrero) { padding-bottom: 80px; }
  .letrero + .seccion { padding-top: 64px; }
}

/* ---------- La captura de una web en una tarjeta (/productos/, /ayuda-online/ y /nosotros/) ---------- */
/* Enseña la parte de arriba; al pasar el ratón por la tarjeta la recorre hasta abajo (movimiento.css). */
.panel-captura { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; border: 1px solid var(--linea); background: var(--fondo); container-type: size; }
.panel-captura img { display: block; width: 100%; height: auto; }

/* ---------- Pie ---------- */

.pie { background: var(--pie-fondo); border-top: 1px solid var(--linea); }
.pie-cuerpo { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-block: 56px 40px; }
@media (max-width: 860px) { .pie-cuerpo { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pie-cuerpo { grid-template-columns: 1fr; } }
.pie-logo img { height: 34px; width: auto; }
.pie-eslogan { color: var(--tinta-2); font-size: .92rem; margin-top: 10px; max-width: 32ch; }
.pie-direccion { color: var(--tinta-2); font-size: .88rem; font-style: normal; margin-top: 12px; }
.pie-titulo { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin: 0 0 14px; }
.pie-columna ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .9rem; }
.pie-columna a, .pie-direccion a { color: var(--tinta-2); text-decoration: none; }
.pie-columna a:hover, .pie-columna a:focus-visible, .pie-direccion a:hover, .pie-direccion a:focus-visible { color: var(--azul); }
.pie-legal { border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 20px 28px; }
.pie-legal-enlaces { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; font-size: .8rem; }
.pie-legal-enlaces a { color: var(--tinta-2); text-decoration: none; }
.pie-legal-enlaces a:hover, .pie-legal-enlaces a:focus-visible { color: var(--azul); text-decoration: underline; }

/* ---------- Cierre azul ---------- */

.cierre { position: relative; isolation: isolate; overflow: clip; color: var(--sobre-azul); background: linear-gradient(135deg, var(--azul), var(--azul-hondo)); }
.cierre::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("/assets/img/marca/translucida.svg") center / cover no-repeat; }
.cierre-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding-block: 64px; }
@media (max-width: 760px) { .cierre-cuerpo { grid-template-columns: 1fr; } }
.cierre h2 { color: inherit; margin-bottom: 12px; }
.cierre p { color: var(--sobre-azul-2); font-size: 1.08rem; max-width: 52ch; }
.cierre .btn:focus-visible { outline-color: var(--sobre-azul); }
.cierre-sellos { display: flex; align-items: center; gap: 28px; }
.cierre-sellos img { height: 100px; width: auto; }

/* ---------- Botón flotante ---------- */

.contacto-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 34; display: grid; justify-items: end; gap: 10px; }
.contacto-flotante-lanzador { display: inline-block; padding: 12px 22px; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--azul), var(--azul-hondo)); color: var(--sobre-azul); font-family: var(--display); font-size: .95rem; font-weight: 700; line-height: 1.2; text-decoration: none; box-shadow: var(--sombra); cursor: pointer; }
.contacto-flotante-lanzador:hover, .contacto-flotante-lanzador:focus-visible { background: var(--azul-hondo); }
.contacto-flotante-lista { list-style: none; margin: 0; padding: 0; display: grid; justify-items: end; gap: 8px; }
.contacto-flotante-accion { display: inline-block; padding: 10px 18px; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); color: var(--tinta); font-size: .9rem; text-decoration: none; box-shadow: var(--sombra-suave); white-space: nowrap; }
.contacto-flotante-accion:hover, .contacto-flotante-accion:focus-visible { border-color: var(--azul); color: var(--azul); }

/* ---------- Aviso de cookies: dos botones iguales, ninguno más visible que el otro ---------- */

.consentimiento { position: fixed; left: 20px; bottom: 20px; z-index: 38; width: min(380px, calc(100vw - 40px)); padding: 20px 22px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra); }
.consentimiento-titulo { margin: 0 0 8px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--tinta); }
.consentimiento-texto { margin: 0 0 10px; font-size: .88rem; line-height: 1.5; color: var(--tinta-2); }
.consentimiento-enlace { display: inline-block; margin-bottom: 16px; font-size: .85rem; color: var(--tinta-2); }
.consentimiento-enlace:hover, .consentimiento-enlace:focus-visible { color: var(--azul); }
.consentimiento-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consentimiento-boton { width: 100%; padding-inline: 12px; }

/* ---------- «Pausar movimiento» (pie y héroe de la portada): solo con movimiento, lo enseña movimiento.js ---------- */

.pausa-movimiento { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: .8rem; color: var(--tinta-2); cursor: pointer; }
.pausa-movimiento::before { content: ""; flex: none; width: 8px; height: 10px; border-inline: 3px solid currentColor; }
.mov-pausa .pausa-movimiento::before { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pausa-movimiento:hover, .pausa-movimiento:focus-visible { color: var(--azul); }

/* ---------- Franja de clientes: la de satcontrol.es, en los colores del logo de JM2 ---------- */
/* Banda azul a todo lo ancho con los bordes en diagonal (un clip-path sobre el ::before), titular en
   blanco que remata en naranja y los nombres desfilando en blanco. Los triángulos que recorta la
   diagonal dejan ver el ::after: blanco arriba y gris abajo, que es lo que tiene alrededor en la portada
   (entre «Algunos de nuestros trabajos» y «Por qué JM2») y en /casos/ (entre «Proyectos» y el cierre). El relleno vertical es mayor que la diagonal (--franja-sesgo, con tope) para que el
   titular no se meta en la esquina recortada; abajo hay más porque ahí va el botón de pausa. */
.franja-clientes { position: relative; padding: 92px 0 118px; text-align: center; }
.franja-clientes::before, .franja-clientes::after { content: ""; position: absolute; inset: -1px calc(50% - 50vw); pointer-events: none; }
.franja-clientes::before { z-index: -1; background: var(--azul); clip-path: polygon(0 var(--franja-sesgo), 100% 0, 100% calc(100% - var(--franja-sesgo)), 0 100%); }
.franja-clientes::after { z-index: -2; background: linear-gradient(var(--blanco) 50%, var(--fondo) 50%); }
.franja-clientes-titulo { margin: 0 auto; padding-inline: 16px; max-width: 30ch; font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 700; line-height: 1.22; letter-spacing: -.015em; color: var(--sobre-azul); }
.franja-clientes-titulo em { display: block; font-style: normal; color: var(--naranja-sobre-azul); }
.franja-clientes-sub { margin: 14px auto 30px; padding-inline: 16px; max-width: 62ch; font-size: 1rem; line-height: 1.5; color: var(--sobre-azul); }
.franja-clientes .desfile { margin-top: 0; }
.franja-clientes .desfile-lista li { font-size: 1.15rem; color: var(--sobre-azul); }
/* «Pausar movimiento», discreto en la esquina de abajo a la derecha, como el «Pausar» de satcontrol.es.
   Se mide desde la diagonal: pegado al borde caería fuera del azul, blanco sobre blanco. */
.pausa-movimiento--franja { position: absolute; right: 28px; bottom: calc(var(--franja-sesgo) + 24px); color: var(--sobre-azul); text-decoration: underline; text-underline-offset: 3px; }
.pausa-movimiento--franja:hover, .pausa-movimiento--franja:focus-visible { color: var(--sobre-azul-2); }
@media (max-width: 600px) {
  .franja-clientes { padding: 58px 0 62px; }
  .franja-clientes .desfile-lista li { font-size: 1rem; }
  /* En el móvil los nombres ocupan todo el ancho: el botón baja debajo de ellos, centrado. */
  .pausa-movimiento--franja { position: static; margin-top: 24px; }
}
/* En /casos/ la franja va justo antes del cierre, que también es azul: sin aire entre los dos, por la
   izquierda (donde la diagonal no corta) se juntarían en un solo bloque. */
.franja-clientes + .cierre { margin-top: 56px; }