/* ==========================================================
   Firichi — hoja de estilos común (HTML5 + CSS, sin JavaScript)
   Diseño "mobile first": primero móvil, luego pantallas grandes.
   ========================================================== */

:root {
  /* Colores tomados del diseño original de iWeb */
  --tinta: #424242;          /* texto original rgb(66,66,66) */
  --tinta-suave: #6b6b6b;
  --fondo: #ffffff;
  --fondo-suave: #ebebeb;   /* franja gris claro original rgb(235,235,235) */
  --borde: #dcdcdc;
  --barra: #6e6e6e;         /* barra original rgb(121,121,121), algo más oscura para mejor contraste */
  --barra-texto: #ffffff;
  --acento: #1284ba;        /* azul original de los títulos de producto rgb(18,132,186) */
  --acento-oscuro: #0e6a96;
  --tinta-amarilla: #facc15;
  --radio: 12px;
  --ancho: 1080px;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--acento-oscuro); text-underline-offset: .15em; }
a:hover { color: var(--tinta); }
a:focus-visible,
label:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 300; letter-spacing: .03em; }
h1 { font-weight: 200; }
strong, b { font-weight: 600; }
h1 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.8rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 16px;
}

/* Enlace "saltar al contenido" (accesibilidad) */
.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--acento); color: #fff; padding: .5em 1em; z-index: 100;
}
.saltar:focus { left: 8px; top: 8px; }

/* ---------- Cabecera y menú ---------- */
.cabecera {
  background: var(--barra);
  color: var(--barra-texto);
  position: sticky; top: 0; z-index: 50;
}
.cabecera__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  min-height: 56px;
}
.marca {
  color: var(--barra-texto); text-decoration: none;
  font-weight: 300; font-size: 1.25rem; letter-spacing: .06em;
  padding: .5rem 0;
  display: inline-flex; align-items: center; gap: .6rem;
}
.marca img { width: 40px; height: 40px; border-radius: 50%; background: transparent; }
.marca:hover { color: #fff; }

/* Menú hamburguesa sin JavaScript: checkbox oculto + label */
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; cursor: pointer; border-radius: 8px;
}
.menu-boton span,
.menu-boton span::before,
.menu-boton span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--barra-texto);
  position: relative; transition: transform .25s ease, background .25s ease;
}
.menu-boton span::before { position: absolute; top: -7px; }
.menu-boton span::after  { position: absolute; top:  7px; }
.menu-toggle:focus-visible + .menu-boton { outline: 3px solid #7fb6ee; }
.menu-toggle:checked + .menu-boton span { background: transparent; }
.menu-toggle:checked + .menu-boton span::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle:checked + .menu-boton span::after  { transform: translateY(-7px) rotate(-45deg); }

.menu {
  flex-basis: 100%;
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
}
.menu-toggle:checked ~ .menu { max-height: 30rem; }

.menu ul { list-style: none; margin: 0; padding: 0; }
.menu__enlaces a {
  display: block; padding: .8rem .25rem;
  color: var(--barra-texto); text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.08);
}
.menu__enlaces a:hover,
.menu__enlaces a[aria-current="page"] { color: #fff; }
.menu__enlaces a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 #7fb6ee; padding-left: .75rem; }

.idiomas { display: flex; gap: .75rem; padding: .75rem 0 1rem !important; }
.idiomas a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--barra-texto); text-decoration: none; font-size: .85rem;
  opacity: .85;
}
.idiomas a:hover { opacity: 1; }
.idiomas img { width: 20px; height: 20px; border-radius: 3px; }

@media (min-width: 760px) {
  .menu-boton { display: none; }
  .menu {
    flex-basis: auto; max-height: none; overflow: visible;
    display: flex; align-items: center; gap: 1.5rem;
  }
  .menu__enlaces { display: flex; gap: .25rem; }
  .menu__enlaces a { border: 0; padding: .5rem .8rem; border-radius: 8px; }
  .menu__enlaces a:hover { background: rgba(255,255,255,.08); }
  .menu__enlaces a[aria-current="page"] { box-shadow: inset 0 -2px 0 #7fb6ee; border-radius: 8px 8px 0 0; padding-left: .8rem; }
  .idiomas { padding: 0 !important; }
}

/* ---------- Título de página ---------- */
.titulo-pagina {
  background: var(--fondo-suave);
  border-bottom: 1px solid var(--borde);
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.titulo-pagina h1 { margin: 0; }
.titulo-pagina p { margin: .5rem 0 0; color: var(--tinta-suave); }

main { display: block; }
.seccion { padding-block: clamp(2rem, 5vw, 3.5rem); }
.seccion + .seccion { border-top: 1px solid var(--borde); }

/* ---------- Portada ---------- */
.portada {
  display: grid; gap: 2rem; align-items: center;
}
.portada__logo { justify-self: center; width: min(250px, 70%); border-radius: var(--radio); }
.portada__lista { list-style: none; padding: 0; margin: 0; font-size: 1.35rem; font-weight: 600; }
.portada__lista li { padding: .35rem 0 .35rem 1.4rem; position: relative; }
.portada__lista li::before { content: "—"; position: absolute; left: 0; color: var(--acento); }
.destacado { font-size: 1.15rem; color: var(--tinta-suave); max-width: 46rem; }

@media (min-width: 760px) {
  .portada { grid-template-columns: 1fr auto; }
}

/* ---------- Tarjetas (equipo, contacto, productos) ---------- */
.rejilla { display: grid; gap: 1.25rem; }
@media (min-width: 760px) {
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
}

.tarjeta {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
  box-shadow: var(--sombra);
}
.tarjeta h2, .tarjeta h3 { margin-bottom: .35em; }

.contacto { display: flex; align-items: center; gap: 1rem; }
.contacto img { width: 44px; height: 44px; flex: none; }
.contacto p { margin: 0; }

/* ---------- Catálogo de productos ---------- */
.categoria h2 {
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-suave); margin: 0 0 1rem;
}
.categoria + .categoria { margin-top: 2.5rem; }
.productos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.producto {
  display: grid; grid-template-columns: 75px 1fr; gap: 1rem; align-items: start;
  padding: 1rem; border: 1px solid var(--borde); border-radius: var(--radio);
  transition: box-shadow .2s ease, transform .2s ease;
}
.producto:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.producto img { width: 75px; border-radius: 8px; }
.producto h3 { margin: 0 0 .15em; }
.producto h3 a { text-decoration: none; }
.producto h3 a:hover { text-decoration: underline; }
.producto__lema { font-weight: 600; margin: 0 0 .35em; }
.producto__texto { margin: 0; color: var(--tinta-suave); font-size: .95rem; }

@media (min-width: 900px) {
  .catalogo { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
  .catalogo .categoria + .categoria { margin-top: 2.5rem; }
}

/* ---------- Página de producto ---------- */
.hero { padding: 1rem 16px 0; }  /* la imagen ya trae su marco blanco y sombra */
.hero__marco { position: relative; max-width: 980px; margin-inline: auto; }
/* Adorno decorativo que sobresale de la cabecera (p. ej. la argolla del candado) */
.hero .hero__adorno { position: absolute; right: .3%; top: -18%; width: 9.8%; min-width: 48px; aspect-ratio: auto; margin: 0; pointer-events: none; }
.hero img {
  width: 100%; max-width: 980px; margin-inline: auto;
  aspect-ratio: 980 / 150; object-fit: cover;
}

.ficha { display: grid; gap: 1.5rem; }
.ficha__icono { width: 135px; }  /* el icono ya incluye su reflejo */
.ficha h1 { color: var(--acento); font-weight: 300; }
.ficha__lema { font-size: 1.35rem; font-weight: 300; color: #000; }
.ficha__jo { font-size: 1.35rem; font-weight: 400; color: #000; }

@media (min-width: 760px) {
  .ficha { grid-template-columns: 135px 1fr; gap: 2.5rem; }
}

.lista {
  margin: 0; padding: 0; list-style: none;
}
.lista li { padding: .35rem 0 .35rem 1.5rem; position: relative; }
.lista li::before {
  content: ""; position: absolute; left: .2rem; top: .95em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--acento);
}
.lista--columnas { columns: 2 12rem; column-gap: 2rem; }
.lista--columnas li { break-inside: avoid; }

.bloques { display: grid; gap: 2rem; }
@media (min-width: 760px) {
  .bloques { grid-template-columns: repeat(2, 1fr); }
}

.creditos { text-align: center; color: var(--tinta-suave); font-size: .95rem; }
.creditos__grupo { display: grid; gap: 2rem; justify-content: center; }
@media (min-width: 760px) {
  .creditos__grupo { grid-template-columns: repeat(2, minmax(0, 20rem)); }
}
.creditos__camara { width: 70px; margin: 0 auto .75rem; }
.creditos h3 { color: var(--tinta); }

.aviso { font-size: .9rem; color: var(--tinta-suave); }

/* Botones (enlaces con aspecto de botón) */
.boton {
  display: inline-block; padding: .7rem 1.2rem; border-radius: 999px;
  background: var(--acento); color: #fff; text-decoration: none; font-weight: 600;
  transition: background .2s ease;
}
.boton:hover { background: var(--acento-oscuro); color: #fff; }

/* ---------- Pie ---------- */
.pie {
  background: var(--fondo-suave); color: var(--tinta-suave); font-size: .85rem;
  padding-block: 2rem; margin-top: 2rem;
}
.pie a { color: var(--tinta); }
.pie__fila { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.pie__contacto { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.pie__contacto img { width: 32px; height: 32px; }
.pie__marcas { margin-top: 1.25rem; opacity: .8; }
.pie__marcas p { margin: 0 0 .25rem; }

/* ---------- Galería de capturas (sustituye al carrusel jQuery) ----------
   Desliza con el dedo o con la rueda/trackpad; se "engancha" a cada imagen. */
.galeria {
  display: flex; gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  padding-bottom: 1rem;
  scrollbar-width: thin; scrollbar-color: var(--acento) var(--fondo-suave);
}
.galeria figure {
  flex: 0 0 auto; margin: 0; scroll-snap-align: center;
  text-align: center; color: var(--tinta-suave); font-size: .9rem;
}
.galeria img {
  border-radius: var(--radio); box-shadow: var(--sombra); background: var(--fondo-suave);
  margin-bottom: .5rem;
}
.galeria--movil figure { width: min(75vw, 280px); }
.galeria img { width: 100%; height: auto; }  /* proporción según width/height del HTML */
.galeria--tableta figure { width: min(88vw, 650px); }
.galeria:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; border-radius: var(--radio); }


/* ---------- Carrusel automático SOLO CSS ----------
   Muestra una imagen cada vez y avanza sola cada 5 s.
   Truco: una "pista" horizontal con todas las imágenes (la primera repetida al final)
   que se desplaza con @keyframes. Se pausa al pasar el ratón o al enfocarlo con el teclado.
   Para cambiar el tiempo: regenerar los @keyframes (5 s por imagen). */
.carrusel {
  position: relative; overflow: hidden; margin-inline: auto;
  max-width: var(--cw, 650px);
}
.carrusel--movil   { --cw: 320px; }
.carrusel--tableta { --cw: 650px; }
.carrusel__pista {
  display: flex;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.carrusel figure {
  flex: 0 0 100%; margin: 0; text-align: center;
  color: var(--tinta-suave); font-size: .9rem;
}
.carrusel img {
  width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: contain;
  margin-bottom: .5rem;
}
.carrusel:hover .carrusel__pista,
.carrusel:focus-within .carrusel__pista,
.carrusel:hover .carrusel__puntos span,
.carrusel:focus-within .carrusel__puntos span { animation-play-state: paused; }
.carrusel:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; border-radius: var(--radio); }

.carrusel__puntos { display: flex; justify-content: center; gap: .5rem; padding-top: .5rem; }
.carrusel__puntos span {
  width: .6rem; height: .6rem; border-radius: 50%; background: var(--borde);
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i) * 5s);
}

/* Quien tenga activado "reducir movimiento": sin animación, se desliza a mano */
@media (prefers-reduced-motion: reduce) {
  .carrusel { overflow-x: auto; scroll-snap-type: x mandatory; }
  .carrusel__pista, .carrusel__puntos span { animation: none !important; }
  .carrusel figure { scroll-snap-align: center; }
  .carrusel figure[aria-hidden="true"], .carrusel__puntos { display: none; }
}

.carrusel--n2 .carrusel__pista { animation-name: carrusel-2; animation-duration: 10s; }
.carrusel--n2 .carrusel__puntos span { animation-name: punto-2; animation-duration: 10s; }
@keyframes carrusel-2 {
  0.000%, 43.000% { transform: translateX(-0%); }
  50.000%, 93.000% { transform: translateX(-100%); }
  100% { transform: translateX(-200%); }
}
@keyframes punto-2 {
  0%, 49.990% { background: var(--acento); transform: scale(1.25); }
  50.000%, 100% { background: var(--borde); transform: none; }
}

.carrusel--n3 .carrusel__pista { animation-name: carrusel-3; animation-duration: 15s; }
.carrusel--n3 .carrusel__puntos span { animation-name: punto-3; animation-duration: 15s; }
@keyframes carrusel-3 {
  0.000%, 28.667% { transform: translateX(-0%); }
  33.333%, 62.000% { transform: translateX(-100%); }
  66.667%, 95.333% { transform: translateX(-200%); }
  100% { transform: translateX(-300%); }
}
@keyframes punto-3 {
  0%, 33.323% { background: var(--acento); transform: scale(1.25); }
  33.333%, 100% { background: var(--borde); transform: none; }
}

.carrusel--n4 .carrusel__pista { animation-name: carrusel-4; animation-duration: 20s; }
.carrusel--n4 .carrusel__puntos span { animation-name: punto-4; animation-duration: 20s; }
@keyframes carrusel-4 {
  0.000%, 21.500% { transform: translateX(-0%); }
  25.000%, 46.500% { transform: translateX(-100%); }
  50.000%, 71.500% { transform: translateX(-200%); }
  75.000%, 96.500% { transform: translateX(-300%); }
  100% { transform: translateX(-400%); }
}
@keyframes punto-4 {
  0%, 24.990% { background: var(--acento); transform: scale(1.25); }
  25.000%, 100% { background: var(--borde); transform: none; }
}

.carrusel--n5 .carrusel__pista { animation-name: carrusel-5; animation-duration: 25s; }
.carrusel--n5 .carrusel__puntos span { animation-name: punto-5; animation-duration: 25s; }
@keyframes carrusel-5 {
  0.000%, 17.200% { transform: translateX(-0%); }
  20.000%, 37.200% { transform: translateX(-100%); }
  40.000%, 57.200% { transform: translateX(-200%); }
  60.000%, 77.200% { transform: translateX(-300%); }
  80.000%, 97.200% { transform: translateX(-400%); }
  100% { transform: translateX(-500%); }
}
@keyframes punto-5 {
  0%, 19.990% { background: var(--acento); transform: scale(1.25); }
  20.000%, 100% { background: var(--borde); transform: none; }
}

.carrusel--n6 .carrusel__pista { animation-name: carrusel-6; animation-duration: 30s; }
.carrusel--n6 .carrusel__puntos span { animation-name: punto-6; animation-duration: 30s; }
@keyframes carrusel-6 {
  0.000%, 14.333% { transform: translateX(-0%); }
  16.667%, 31.000% { transform: translateX(-100%); }
  33.333%, 47.667% { transform: translateX(-200%); }
  50.000%, 64.333% { transform: translateX(-300%); }
  66.667%, 81.000% { transform: translateX(-400%); }
  83.333%, 97.667% { transform: translateX(-500%); }
  100% { transform: translateX(-600%); }
}
@keyframes punto-6 {
  0%, 16.657% { background: var(--acento); transform: scale(1.25); }
  16.667%, 100% { background: var(--borde); transform: none; }
}

.carrusel--n7 .carrusel__pista { animation-name: carrusel-7; animation-duration: 35s; }
.carrusel--n7 .carrusel__puntos span { animation-name: punto-7; animation-duration: 35s; }
@keyframes carrusel-7 {
  0.000%, 12.286% { transform: translateX(-0%); }
  14.286%, 26.571% { transform: translateX(-100%); }
  28.571%, 40.857% { transform: translateX(-200%); }
  42.857%, 55.143% { transform: translateX(-300%); }
  57.143%, 69.429% { transform: translateX(-400%); }
  71.429%, 83.714% { transform: translateX(-500%); }
  85.714%, 98.000% { transform: translateX(-600%); }
  100% { transform: translateX(-700%); }
}
@keyframes punto-7 {
  0%, 14.276% { background: var(--acento); transform: scale(1.25); }
  14.286%, 100% { background: var(--borde); transform: none; }
}

.carrusel--n8 .carrusel__pista { animation-name: carrusel-8; animation-duration: 40s; }
.carrusel--n8 .carrusel__puntos span { animation-name: punto-8; animation-duration: 40s; }
@keyframes carrusel-8 {
  0.000%, 10.750% { transform: translateX(-0%); }
  12.500%, 23.250% { transform: translateX(-100%); }
  25.000%, 35.750% { transform: translateX(-200%); }
  37.500%, 48.250% { transform: translateX(-300%); }
  50.000%, 60.750% { transform: translateX(-400%); }
  62.500%, 73.250% { transform: translateX(-500%); }
  75.000%, 85.750% { transform: translateX(-600%); }
  87.500%, 98.250% { transform: translateX(-700%); }
  100% { transform: translateX(-800%); }
}
@keyframes punto-8 {
  0%, 12.490% { background: var(--acento); transform: scale(1.25); }
  12.500%, 100% { background: var(--borde); transform: none; }
}

.carrusel--n9 .carrusel__pista { animation-name: carrusel-9; animation-duration: 45s; }
.carrusel--n9 .carrusel__puntos span { animation-name: punto-9; animation-duration: 45s; }
@keyframes carrusel-9 {
  0.000%, 9.556% { transform: translateX(-0%); }
  11.111%, 20.667% { transform: translateX(-100%); }
  22.222%, 31.778% { transform: translateX(-200%); }
  33.333%, 42.889% { transform: translateX(-300%); }
  44.444%, 54.000% { transform: translateX(-400%); }
  55.556%, 65.111% { transform: translateX(-500%); }
  66.667%, 76.222% { transform: translateX(-600%); }
  77.778%, 87.333% { transform: translateX(-700%); }
  88.889%, 98.444% { transform: translateX(-800%); }
  100% { transform: translateX(-900%); }
}
@keyframes punto-9 {
  0%, 11.101% { background: var(--acento); transform: scale(1.25); }
  11.111%, 100% { background: var(--borde); transform: none; }
}

.carrusel--n10 .carrusel__pista { animation-name: carrusel-10; animation-duration: 50s; }
.carrusel--n10 .carrusel__puntos span { animation-name: punto-10; animation-duration: 50s; }
@keyframes carrusel-10 {
  0.000%, 8.600% { transform: translateX(-0%); }
  10.000%, 18.600% { transform: translateX(-100%); }
  20.000%, 28.600% { transform: translateX(-200%); }
  30.000%, 38.600% { transform: translateX(-300%); }
  40.000%, 48.600% { transform: translateX(-400%); }
  50.000%, 58.600% { transform: translateX(-500%); }
  60.000%, 68.600% { transform: translateX(-600%); }
  70.000%, 78.600% { transform: translateX(-700%); }
  80.000%, 88.600% { transform: translateX(-800%); }
  90.000%, 98.600% { transform: translateX(-900%); }
  100% { transform: translateX(-1000%); }
}
@keyframes punto-10 {
  0%, 9.990% { background: var(--acento); transform: scale(1.25); }
  10.000%, 100% { background: var(--borde); transform: none; }
}

.carrusel--n11 .carrusel__pista { animation-name: carrusel-11; animation-duration: 55s; }
.carrusel--n11 .carrusel__puntos span { animation-name: punto-11; animation-duration: 55s; }
@keyframes carrusel-11 {
  0.000%, 7.818% { transform: translateX(-0%); }
  9.091%, 16.909% { transform: translateX(-100%); }
  18.182%, 26.000% { transform: translateX(-200%); }
  27.273%, 35.091% { transform: translateX(-300%); }
  36.364%, 44.182% { transform: translateX(-400%); }
  45.455%, 53.273% { transform: translateX(-500%); }
  54.545%, 62.364% { transform: translateX(-600%); }
  63.636%, 71.455% { transform: translateX(-700%); }
  72.727%, 80.545% { transform: translateX(-800%); }
  81.818%, 89.636% { transform: translateX(-900%); }
  90.909%, 98.727% { transform: translateX(-1000%); }
  100% { transform: translateX(-1100%); }
}
@keyframes punto-11 {
  0%, 9.081% { background: var(--acento); transform: scale(1.25); }
  9.091%, 100% { background: var(--borde); transform: none; }
}

.carrusel--n12 .carrusel__pista { animation-name: carrusel-12; animation-duration: 60s; }
.carrusel--n12 .carrusel__puntos span { animation-name: punto-12; animation-duration: 60s; }
@keyframes carrusel-12 {
  0.000%, 7.167% { transform: translateX(-0%); }
  8.333%, 15.500% { transform: translateX(-100%); }
  16.667%, 23.833% { transform: translateX(-200%); }
  25.000%, 32.167% { transform: translateX(-300%); }
  33.333%, 40.500% { transform: translateX(-400%); }
  41.667%, 48.833% { transform: translateX(-500%); }
  50.000%, 57.167% { transform: translateX(-600%); }
  58.333%, 65.500% { transform: translateX(-700%); }
  66.667%, 73.833% { transform: translateX(-800%); }
  75.000%, 82.167% { transform: translateX(-900%); }
  83.333%, 90.500% { transform: translateX(-1000%); }
  91.667%, 98.833% { transform: translateX(-1100%); }
  100% { transform: translateX(-1200%); }
}
@keyframes punto-12 {
  0%, 8.323% { background: var(--acento); transform: scale(1.25); }
  8.333%, 100% { background: var(--borde); transform: none; }
}

@media print {
  .cabecera, .pie { position: static; background: none; color: #000; }
  .menu-boton { display: none; }
}

/* -------- Señal 404 ------- */
.caja {
  width: 90px;
  height: 90px;
  margin: 0 auto;
  background: #facc15;
  transform: rotate(45deg);
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 4px solid #111;
}

.texto__caja {
  transform: rotate(-45deg);
  font-weight: var(--ancho);
  font-size: 22px;
}