/* =========================================================================
   Seguridad Industrial Tijuana — hoja principal
   Paleta sacada del logotipo contando píxeles: la llama es un degradado
   vertical de #D30531 (arriba) a #DC6200 (abajo); la "SI" es cromo sobre
   extrusión negra y el lettering es blanco puro. Por eso el sitio es oscuro:
   el logotipo original está hecho para fondo oscuro.
   ========================================================================= */

:root {
  /* --- superficies --- */
  --carbon: #0B0D10;
  --acero: #141920;
  --acero-alto: #1C232C;
  --acero-borde: #29323D;
  --linea: rgba(255, 255, 255, .09);
  --papel: #F5F7F9;

  /* --- texto --- */
  --humo: #E8ECF0;          /* 16.4:1 sobre carbón */
  --niebla: #A7B0BA;        /* 7.97:1 sobre acero  */
  --niebla-tenue: #7E8892;
  --tinta: #0B0D10;

  /* --- marca --- */
  --fuego: #D51529;         /* rojo del logotipo. Relleno y botones */
  --fuego-alto: #D30531;    /* extremo superior de la llama */
  --fuego-vivo: #F0364C;    /* 4.95:1 — el único rojo válido para TEXTO en oscuro */
  --fuego-tinta: #A50E1E;   /* 7.83:1 — el único rojo válido para texto en claro */
  --ascua: #DC6200;         /* extremo inferior de la llama */
  --ascua-vivo: #F07A12;    /* 6.95:1 — naranja para texto en oscuro */

  /* --- cromo --- */
  --cromo-1: #FFFFFF;
  --cromo-2: #C8CDD4;
  --cromo-3: #8C93A0;

  --llama: linear-gradient(180deg, var(--fuego-alto) 0%, var(--fuego) 42%, var(--ascua) 100%);
  --llama-h: linear-gradient(100deg, var(--fuego-alto) 0%, var(--fuego) 45%, var(--ascua) 100%);
  --cromo: linear-gradient(180deg, #FFFFFF 0%, #E3E7EB 34%, #9AA2AC 52%, #F2F5F8 66%, #B7BEC7 100%);

  /* --- medidas --- */
  --ancho: 74rem;
  --ancho-texto: 42rem;
  --radio: 14px;
  --radio-s: 8px;
  --sombra: 0 24px 60px -24px rgba(0, 0, 0, .85);
  --sombra-alta: 0 40px 90px -30px rgba(0, 0, 0, .95);

  --display: 'Saira', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------- base -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* El panel del menú móvil está fuera de pantalla con position:fixed y
     translateX(100%). Un elemento fijo se mide contra la ventana, no contra el
     body, así que el overflow-x:hidden del body NO lo recorta: en un teléfono
     de 375 px el documento medía 682 px de ancho y la página se podía arrastrar
     113 px de lado, descubriendo una franja vacía. `clip` sí recorta a los
     descendientes fijos y, a diferencia de `hidden`, no crea un contenedor de
     desplazamiento. Comprobado en las 23 páginas: 682 px → 360 px. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--carbon);
  color: var(--humo);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;      /* respaldo para Safari anterior al 16, sin overflow:clip */
}

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

a { color: var(--fuego-vivo); text-decoration: none; }
a:hover { color: var(--ascua-vivo); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.018em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); letter-spacing: -.01em; }
h4 { font-size: 1.05rem; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }
li { margin-bottom: .45em; }

:focus-visible {
  outline: 3px solid var(--ascua-vivo);
  outline-offset: 3px;
  border-radius: 3px;
}

.si-salta {
  position: absolute; left: -9999px; top: 0;
  background: var(--fuego); color: #fff; padding: .8rem 1.2rem; z-index: 999;
}
.si-salta:focus { left: 1rem; top: 1rem; color: #fff; }

.si-oculto {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------ retícula -- */

.si-ancho { width: min(100% - 2.4rem, var(--ancho)); margin-inline: auto; }
.si-ancho-corto { width: min(100% - 2.4rem, 56rem); margin-inline: auto; }

.si-seccion { padding: clamp(4rem, 9vw, 7.5rem) 0; position: relative; }
.si-seccion--acero { background: var(--acero); }
.si-seccion--apretada { padding: clamp(3rem, 6vw, 5rem) 0; }

.si-encabezado { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.si-encabezado--centro { margin-inline: auto; text-align: center; }
.si-encabezado p { color: var(--niebla); font-size: 1.08rem; margin-bottom: 0; }

.si-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display);
  font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ascua-vivo);
  margin-bottom: 1rem;
}
.si-kicker::before {
  content: ''; width: 26px; height: 2px; background: var(--llama-h); border-radius: 2px;
}
.si-encabezado--centro .si-kicker::after {
  content: ''; width: 26px; height: 2px; background: var(--llama-h); border-radius: 2px;
}

/* --------------------------------------------------- texto «magnífico» -- */

/* El destello NO hereda background-clip de un ancestro cuando el ancestro
   tiene transform: el degradado va declarado en el propio <em>. */
.si-destello {
  font-style: normal;
  background: var(--llama-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;      /* el destello viaja entero, no se parte */
}

.si-cromo {
  background: var(--cromo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.si-gigante {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.4rem, 15vw, 12rem);
  line-height: .86;
  letter-spacing: -.045em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .13);
  margin: 0;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------- botón -- */

.si-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--display);
  font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  padding: .95rem 1.6rem;
  border-radius: var(--radio-s);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform .25s var(--curva), box-shadow .25s var(--curva),
              background-color .25s var(--curva-suave), border-color .25s var(--curva-suave);
}
.si-boton:hover { transform: translateY(-2px); }
.si-boton:active { transform: translateY(0); }

.si-boton--fuego {
  background: var(--fuego); color: #fff;            /* 5.29:1 */
  box-shadow: 0 12px 30px -12px rgba(213, 21, 41, .8);
}
.si-boton--fuego:hover { background: #E01B31; color: #fff; box-shadow: 0 18px 38px -14px rgba(213, 21, 41, .9); }

.si-boton--linea {
  background: transparent; color: var(--humo);
  border-color: rgba(255, 255, 255, .26);
}
.si-boton--linea:hover { border-color: var(--ascua-vivo); color: var(--ascua-vivo); background: rgba(240, 122, 18, .07); }

.si-boton--claro { background: var(--humo); color: var(--tinta); }
.si-boton--claro:hover { background: #fff; color: var(--tinta); }

.si-boton--ancho { width: 100%; }

.si-enlace {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-weight: 700; font-size: .93rem;
  color: var(--ascua-vivo);
  padding-block: .3rem;          /* 34 → 40 px de alto para el dedo */
}
.si-enlace span { transition: transform .25s var(--curva); }
.si-enlace:hover span { transform: translateX(4px); }

/* ----------------------------------------------------------- cabecera -- */

.si-cinta {
  background: var(--acero);
  border-bottom: 1px solid var(--linea);
  font-size: .84rem;
  color: var(--niebla);
}
.si-cinta__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .4rem 1.4rem; padding: .5rem 0;
}
.si-cinta a { color: var(--niebla); display: inline-block; padding-block: .12rem; }
.si-cinta a:hover { color: var(--ascua-vivo); }
.si-cinta__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; }
.si-cinta__sello {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-weight: 700; letter-spacing: .06em;
  font-size: .74rem; text-transform: uppercase;
  color: var(--ascua-vivo);
}
/* Un <svg> en línea sin width/height se dibuja a 300x150. Los iconos que no
   viven dentro de .si-icono necesitan medida explícita. */
.si-cinta__sello svg {
  flex-shrink: 0; width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.si-cabecera {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 13, 16, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--linea);
  transition: background-color .3s var(--curva-suave), border-color .3s var(--curva-suave);
}
.si-cabecera.esta-fija { background: rgba(11, 13, 16, .96); }

.si-cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; min-height: 74px;
}

.si-marca { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.si-marca img { height: 46px; width: auto; }
.si-marca__texto { display: none; }

.si-nav { display: flex; align-items: center; gap: .15rem; }
.si-nav__item { position: relative; }
.si-nav__enlace {
  display: block; padding: .7rem .82rem;
  font-family: var(--display); font-weight: 600; font-size: .93rem;
  color: var(--humo); border-radius: var(--radio-s);
  transition: color .2s var(--curva-suave), background-color .2s var(--curva-suave);
}
.si-nav__enlace:hover, .si-nav__item.esta-abierto > .si-nav__enlace { color: var(--ascua-vivo); background: rgba(255, 255, 255, .05); }
.si-nav__enlace[aria-current="page"] { color: var(--ascua-vivo); }

.si-nav__sub {
  position: absolute; top: calc(100% + .4rem); left: 0;
  min-width: 20rem; padding: .5rem;
  background: var(--acero-alto);
  border: 1px solid var(--acero-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--curva), transform .22s var(--curva), visibility .22s;
}
.si-nav__item:hover > .si-nav__sub,
.si-nav__item.esta-abierto > .si-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.si-nav__sub li { margin: 0; }
.si-nav__sub a {
  display: block; padding: .6rem .8rem; border-radius: var(--radio-s);
  font-size: .92rem; color: var(--humo);
}
.si-nav__sub a:hover { background: rgba(255, 255, 255, .06); color: var(--ascua-vivo); }

.si-cabecera__acciones { display: flex; align-items: center; gap: .6rem; }

.si-hamburguesa {
  display: none;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--acero-borde);
  border-radius: var(--radio-s); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.si-hamburguesa span {
  display: block; width: 20px; height: 2px; background: var(--humo); border-radius: 2px;
  transition: transform .3s var(--curva), opacity .2s var(--curva-suave);
}
body.si-menu-abierto .si-hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.si-menu-abierto .si-hamburguesa span:nth-child(2) { opacity: 0; }
body.si-menu-abierto .si-hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .si-hamburguesa { display: flex; }
  .si-cabecera__acciones .si-boton { display: none; }

  .si-nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(86vw, 24rem);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6rem 1.4rem 2.5rem;
    background: var(--acero);
    border-left: 1px solid var(--acero-borde);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .38s var(--curva);
    z-index: 70;
  }
  body.si-menu-abierto .si-nav { transform: translateX(0); }
  body.si-menu-abierto::after {
    content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 65;
  }
  /* Dos cosas hay que hacerle a la cabecera mientras el panel está abierto:
     1. SUBIRLA DE Z-INDEX. Es sticky, así que crea contexto de apilamiento y
        el panel nunca superaría al velo que dibuja body::after.
     2. QUITARLE EL backdrop-filter. Un elemento con backdrop-filter (igual que
        con filter o transform) se vuelve el bloque contenedor de sus
        descendientes position:fixed. Con él puesto, el panel no se medía
        contra la ventana sino contra la cabecera: salía de 74 px de alto,
        recortado, mostrando solo el primer enlace. */
  body.si-menu-abierto .si-cabecera {
    z-index: 80;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--carbon);
  }

  .si-nav__enlace { padding: .85rem .4rem; font-size: 1.05rem; border-radius: 0; border-bottom: 1px solid var(--linea); }
  .si-nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none;
    /* el padding vertical hay que quitarlo también al cerrar: con max-height:0
       el relleno sigue ocupando alto y deja un hueco bajo «Servicios» */
    padding: 0 0 0 .8rem;
    max-height: 0; overflow: hidden;
    transition: max-height .35s var(--curva), padding .35s var(--curva);
  }
  .si-nav__item.esta-abierto > .si-nav__sub {
    max-height: 32rem; padding: .2rem 0 .6rem .8rem;
  }
  .si-nav__sub a { font-size: .95rem; color: var(--niebla); }
}

/* En móvil la cinta ocupaba tres renglones antes de que empezara el sitio.
   El sello y el horario ya están en el pie: arriba se quedan el teléfono y el
   correo, que es lo único accionable desde el celular. */
@media (max-width: 680px) {
  .si-cinta { font-size: .8rem; }
  .si-cinta__sello,
  .si-cinta__grupo > span { display: none; }
  .si-cinta__fila { justify-content: center; gap: .3rem 1rem; }
}

/* ------------------------------------------------- hero panorámico 3D -- */

.si-hero {
  position: relative;
  min-height: min(92vh, 54rem);
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--carbon);
}

.si-hero__escena {
  position: absolute; inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  z-index: 0;
}

.si-hero__capa {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* OJO: aquí NO va will-change: transform. Promueve la capa preserve-3d a
     una capa compuesta propia y el navegador deja de pintar la foto que vive
     dentro: el hero se ve negro aunque la imagen esté cargada, con opacidad 1
     y en su sitio. Se detectó apagando los velos uno por uno hasta descubrir
     que el problema no eran los velos. El paralaje va perfecto sin él. */
}

.si-hero__foto {
  position: absolute;
  top: 50%; left: 50%;
  width: 148%;
  max-width: none;          /* sin esto, img{max-width:100%} recorta la foto */
  height: 148%;
  object-fit: cover;
  transform: translate3d(-50%, -50%, -160px) scale(1.16);
  /* dos de las cinco diapositivas son nocturnas: sin este realce el velo se
     las come y el hero parece un rectángulo negro */
  filter: saturate(1.12) contrast(1.05) brightness(1.1);
  opacity: 0;
  transition: opacity 1.1s var(--curva-suave), transform 1.6s var(--curva);
}
.si-hero__foto.esta-activa { opacity: 1; }
.si-hero__foto.esta-saliendo { opacity: 0; }

/* Los velos NO pueden vivir dentro del contenedor preserve-3d: con un
   translateZ negativo el navegador los ordena por detrás de la foto. Van
   fuera de la escena y se apilan con z-index, que es determinista. */
.si-hero__velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.si-hero__velo--tinta {
  background:
    linear-gradient(90deg,
      rgba(11, 13, 16, .97) 0%,
      rgba(11, 13, 16, .93) 26%,
      rgba(11, 13, 16, .78) 44%,
      rgba(11, 13, 16, .34) 66%,
      rgba(11, 13, 16, .18) 82%,
      rgba(11, 13, 16, .5) 100%),
    linear-gradient(180deg, rgba(11, 13, 16, .7) 0%, transparent 22%);
}
.si-hero__velo--fuego {
  background: radial-gradient(ellipse 80% 60% at 78% 88%, rgba(220, 98, 0, .26), transparent 62%);
  mix-blend-mode: screen;
}
.si-hero__velo--rejilla {
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000 20%, transparent 75%);
}
.si-hero__velo--base {
  background: linear-gradient(180deg, transparent 55%, var(--carbon) 100%);
}

.si-hero__contenido {
  position: relative; z-index: 2;
  width: min(100% - 2.4rem, var(--ancho));
  margin-inline: auto;
  padding: clamp(6rem, 12vw, 8rem) 0 clamp(4rem, 8vw, 6rem);
}

.si-hero__paneles { position: relative; min-height: 22rem; }

.si-hero__panel {
  position: absolute; top: 0; left: 0;   /* sin top:0 el panel saliente cae abajo */
  width: min(100%, 40rem);
  opacity: 0; visibility: hidden;
  transform: translateY(18px);
  transition: opacity .6s var(--curva-suave), transform .7s var(--curva), visibility .6s;
}
.si-hero__panel.esta-activo {
  position: relative;
  opacity: 1; visibility: visible; transform: none;
}

.si-hero__titulo {
  /* Solo la primera diapositiva es <h1>; las otras cuatro son
     <p role="heading"> para no tener cinco h1 en la portada. La tipografía
     tiene que declararse aquí, en la clase: si se deja al selector h1, las
     diapositivas 2 a 5 heredan la del párrafo (Inter 400) y se ven delgadas. */
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 5.6vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: -.018em;
  text-wrap: balance;
  color: var(--humo);
  margin: 0 0 1.1rem;
}
.si-hero__texto {
  color: var(--niebla);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  max-width: 34rem;
  margin-bottom: 1.8rem;
}
.si-hero__botones { display: flex; flex-wrap: wrap; gap: .8rem; }

.si-hero__controles {
  position: relative; z-index: 2;
  width: min(100% - 2.4rem, var(--ancho));
  margin: 0 auto;
  padding-bottom: clamp(1.6rem, 3vw, 2.6rem);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.4rem 2rem; flex-wrap: wrap;
}
/* el botón flotante de WhatsApp vive en la esquina inferior derecha y tapaba
   la última insignia mientras el contenedor no alcanza su ancho máximo */
@media (min-width: 761px) and (max-width: 1240px) {
  .si-hero__controles { padding-right: 4.2rem; }
}

.si-hero__puntos { display: flex; gap: .6rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.si-hero__puntos li { margin: 0; }
/* La barra mide 4 px de alto, pero un objetivo táctil de 4 px no se puede
   tocar. El botón mide 44 px y se compensa con un margen negativo, así el
   área táctil crece sin mover ni un píxel el diseño: lo que se ve sigue
   siendo la barra, dibujada en ::before. */
.si-hero__punto {
  position: relative;
  width: 46px; height: 44px;
  margin-block: -20px;
  padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
}
.si-hero__punto::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 4px; margin-top: -2px; border-radius: 3px;
  background: rgba(255, 255, 255, .2);
  transition: background-color .25s var(--curva-suave);
}
.si-hero__punto::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 4px; margin-top: -2px; border-radius: 3px;
  background: var(--llama-h);
  transform: scaleX(0); transform-origin: left;
}
.si-hero__punto.esta-activo::after { animation: si-avance var(--hero-pausa, 7s) linear forwards; }
.si-hero__punto:hover::before { background: rgba(255, 255, 255, .34); }

@keyframes si-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.si-hero__cuenta {
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--niebla-tenue);
}

.si-hero__insignias {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  /* flex-basis en fila; en columna se convertiría en ALTURA y atravesaría
     los botones del hero, por eso aquí no se usa flex:1 1 20rem */
}
.si-hero__insignia {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem;
  border: 1px solid var(--acero-borde); border-radius: 999px;
  background: rgba(20, 25, 32, .7);
  font-size: .78rem; color: var(--niebla);
  font-family: var(--display); font-weight: 600; letter-spacing: .04em;
}
.si-hero__insignia b { color: var(--humo); font-weight: 700; }

@media (max-width: 760px) {
  .si-hero { min-height: auto; }
  .si-hero__paneles { min-height: 24rem; }
  .si-hero__controles { flex-direction: column; align-items: flex-start; }
  .si-hero__velo--tinta {
    background: linear-gradient(180deg, rgba(11, 13, 16, .92) 0%, rgba(11, 13, 16, .8) 55%, rgba(11, 13, 16, .95) 100%);
  }
}

/* ------------------------------------------- palabras del titular 3D --- */

.si-palabra {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotateX(-38deg);
  transform-origin: 50% 100%;
  transition: opacity .55s var(--curva-suave), transform .75s var(--curva);
}
.esta-activo .si-palabra, .esta-visible .si-palabra { opacity: 1; transform: none; }

/* ------------------------------------------------------------- motion -- */

.si-revela {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--curva-suave), transform .9s var(--curva);
}
.si-revela.esta-visible { opacity: 1; transform: none; }

.si-revela--izq { transform: translateX(-30px); }
.si-revela--der { transform: translateX(30px); }
.si-revela--escala { transform: scale(.94); }
.si-revela.esta-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .si-revela, .si-palabra { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------ tarjetas -- */

.si-rejilla { display: grid; gap: 1.4rem; }
.si-rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.si-rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.si-rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.si-tarjeta {
  position: relative;
  background: var(--acero-alto);
  border: 1px solid var(--acero-borde);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .4s var(--curva), border-color .3s var(--curva-suave), box-shadow .4s var(--curva);
}
.si-tarjeta:hover { transform: translateY(-6px); border-color: rgba(240, 122, 18, .5); box-shadow: var(--sombra); }

.si-tarjeta__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--carbon); }
.si-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.si-tarjeta:hover .si-tarjeta__foto img { transform: scale(1.06); }
.si-tarjeta__foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 16, .1) 0%, rgba(11, 13, 16, .82) 100%);
  /* el velo es decorativo: sin esto se queda encima del enlace que envuelve la
     foto y el toque sobre la imagen del artículo no llega a ninguna parte */
  pointer-events: none;
}

.si-tarjeta__cuerpo { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.si-tarjeta__cuerpo h3 { margin-bottom: .6rem; }
.si-tarjeta__cuerpo p { color: var(--niebla); font-size: .97rem; }
.si-tarjeta__cuerpo .si-enlace { margin-top: auto; padding-top: .6rem; }

.si-tarjeta__marca {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 999px;
  background: rgba(11, 13, 16, .75);
  border: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--display); font-weight: 700; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--humo);
}

.si-tarjeta--plana { background: var(--acero-alto); padding: 1.6rem; }
.si-tarjeta--plana h3 { font-size: 1.15rem; }
.si-tarjeta--plana p { color: var(--niebla); font-size: .96rem; margin-bottom: 0; }

/* icono de trazo */
.si-icono {
  width: 44px; height: 44px; margin-bottom: 1rem;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(213, 21, 41, .12);
  border: 1px solid rgba(240, 54, 76, .32);
  color: var(--fuego-vivo);
}
.si-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------- cifras -- */

.si-cifras {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  background: var(--acero-borde);
  border: 1px solid var(--acero-borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.si-cifra { background: var(--acero); padding: 1.8rem 1.5rem; }
.si-cifra__valor {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1;
  background: var(--llama-h); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: .4rem;
}
.si-cifra__etiqueta { font-family: var(--display); font-weight: 700; font-size: .98rem; margin-bottom: .2rem; }
.si-cifra__nota { color: var(--niebla-tenue); font-size: .86rem; line-height: 1.45; }

/* ------------------------------------------------------------- listas -- */

.si-lista { list-style: none; padding: 0; margin: 0; }
.si-lista li {
  position: relative; padding-left: 1.9rem; margin-bottom: .8rem;
  color: var(--niebla); font-size: .99rem;
}
.si-lista li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--llama); transform: rotate(45deg);
}
.si-lista--claro li { color: #3B444E; }

.si-normas { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.si-normas li { margin: 0; }
.si-norma {
  display: inline-block; padding: .34rem .7rem;
  border: 1px solid var(--acero-borde); border-radius: var(--radio-s);
  background: rgba(255, 255, 255, .03);
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  letter-spacing: .05em; color: var(--niebla);
}

/* ------------------------------------------------------------ proceso -- */

.si-proceso { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: paso; }
.si-paso { position: relative; padding-top: 2.4rem; border-top: 1px solid var(--acero-borde); }
.si-paso__num {
  position: absolute; top: -.6rem; left: 0;
  font-family: var(--display); font-weight: 900; font-size: 3.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(240, 122, 18, .5);
}
.si-paso h3 { margin-top: 1.6rem; font-size: 1.15rem; }
.si-paso p { color: var(--niebla); font-size: .96rem; margin: 0; }

/* -------------------------------------------------------- franja / cta -- */

.si-franja {
  position: relative; overflow: hidden;
  background: var(--acero);
  border-block: 1px solid var(--acero-borde);
}
.si-franja__fondo { position: absolute; inset: 0; z-index: 0; }
.si-franja__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.si-franja__fondo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 13, 16, .97) 12%, rgba(11, 13, 16, .72) 100%);
}
.si-franja__contenido { position: relative; z-index: 1; padding: clamp(3.4rem, 7vw, 5.6rem) 0; }
.si-franja__caja { max-width: 44rem; }
.si-franja__caja p { color: var(--niebla); font-size: 1.06rem; }
.si-franja__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* --------------------------------------------------------- acordeones -- */

.si-acordeon { border-top: 1px solid var(--acero-borde); }
.si-acordeon__item { border-bottom: 1px solid var(--acero-borde); }
.si-acordeon__boton {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem;
  padding: 1.3rem 0; background: transparent; border: 0; cursor: pointer;
  text-align: left; color: var(--humo);
  font-family: var(--display); font-weight: 700; font-size: 1.06rem; line-height: 1.35;
}
.si-acordeon__boton:hover { color: var(--ascua-vivo); }
.si-acordeon__mas {
  flex-shrink: 0; width: 26px; height: 26px; position: relative; margin-top: .1rem;
}
.si-acordeon__mas::before, .si-acordeon__mas::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px; background: var(--ascua-vivo); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--curva);
}
.si-acordeon__mas::after { transform: translate(-50%, -50%) rotate(90deg); }
.si-acordeon__item.esta-abierto .si-acordeon__mas::after { transform: translate(-50%, -50%) rotate(0deg); }

.si-acordeon__panel { overflow: hidden; max-height: 0; transition: max-height .4s var(--curva); }
.si-acordeon__panel p { color: var(--niebla); padding-bottom: 1.3rem; margin: 0; font-size: .99rem; }

/* --------------------------------------------------------- formulario -- */

.si-formulario { display: grid; gap: 1rem; }
.si-campo { display: grid; gap: .4rem; }
.si-campo--doble { grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .si-campo--doble { grid-template-columns: 1fr; } }

.si-campo label {
  font-family: var(--display); font-weight: 600; font-size: .87rem;
  letter-spacing: .04em; color: var(--niebla);
}
.si-campo label .req { color: var(--fuego-vivo); }

.si-campo input, .si-campo select, .si-campo textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--carbon);
  border: 1px solid var(--acero-borde);
  border-radius: var(--radio-s);
  color: var(--humo);
  font-family: var(--texto); font-size: 1rem;
  transition: border-color .2s var(--curva-suave), box-shadow .2s var(--curva-suave);
}
.si-campo textarea { min-height: 8rem; resize: vertical; }
.si-campo input:focus, .si-campo select:focus, .si-campo textarea:focus {
  outline: none; border-color: var(--ascua-vivo);
  box-shadow: 0 0 0 3px rgba(240, 122, 18, .18);
}
.si-campo input::placeholder, .si-campo textarea::placeholder { color: var(--niebla-tenue); }

.si-campo--casilla { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
/* La etiqueta completa es clicable, así que WCAG ya se cumple por ahí, pero
   una casilla de 18 px se falla con el pulgar. A 22 px se acierta. */
.si-campo--casilla input { width: 22px; height: 22px; margin-top: .18rem; padding: 0; flex-shrink: 0; }
.si-campo--casilla label { font-family: var(--texto); font-weight: 400; font-size: .88rem; line-height: 1.5; }

.si-trampa { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.si-aviso {
  padding: 1rem 1.2rem; border-radius: var(--radio-s);
  border: 1px solid var(--acero-borde); background: var(--acero-alto);
  font-size: .95rem; margin-bottom: 1.2rem;
}
.si-aviso--error { border-color: rgba(240, 54, 76, .55); color: #FFC7CE; background: rgba(213, 21, 41, .1); }
.si-aviso--bien { border-color: rgba(60, 190, 120, .5); color: #BDF3D4; background: rgba(40, 160, 100, .1); }
.si-aviso ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* ------------------------------------------------------------ contacto -- */

.si-contacto { display: grid; gap: 2.4rem; grid-template-columns: 1.15fr .85fr; align-items: start; }
@media (max-width: 940px) { .si-contacto { grid-template-columns: 1fr; } }

.si-datos { display: grid; gap: 1.2rem; }
.si-dato {
  padding: 1.2rem 1.3rem;
  background: var(--acero-alto); border: 1px solid var(--acero-borde); border-radius: var(--radio);
}
.si-dato h3 { font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ascua-vivo); margin-bottom: .6rem; }
.si-dato p, .si-dato a { color: var(--humo); font-size: 1rem; margin: 0 0 .25rem; display: block; }
.si-dato a:hover { color: var(--ascua-vivo); }
.si-dato small { color: var(--niebla-tenue); font-size: .84rem; }

.si-mapa { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--acero-borde); background: var(--acero-alto); }
.si-mapa iframe { display: block; width: 100%; height: 380px; border: 0; filter: grayscale(.35) contrast(1.05); }

/* ------------------------------------------------------------- galería -- */

.si-galeria { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.si-galeria__pieza {
  position: relative; overflow: hidden; border-radius: var(--radio);
  aspect-ratio: 4 / 3; background: var(--acero-alto);
  border: 1px solid var(--acero-borde);
}
.si-galeria__pieza:nth-child(6n + 1) { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .si-galeria__pieza:nth-child(6n + 1) { grid-column: span 1; aspect-ratio: 4 / 3; } }
.si-galeria__pieza img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--curva); }
.si-galeria__pieza:hover img { transform: scale(1.05); }
.si-galeria__pie {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem 1rem .9rem;
  background: linear-gradient(180deg, transparent, rgba(11, 13, 16, .9));
  font-family: var(--display); font-weight: 600; font-size: .9rem;
}

/* --------------------------------------------------------------- blog -- */

.si-entradas { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

.si-entrada__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  font-size: .82rem; color: var(--niebla-tenue);
  font-family: var(--display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: .7rem;
}
.si-entrada__meta .si-cat { color: var(--ascua-vivo); }

.si-articulo { max-width: 42rem; }         /* en rem: 'ch' es relativo a la
                                              fuente del propio elemento y los
                                              h2 se salían del contenedor */
.si-articulo > * { max-width: 42rem; }
.si-articulo h2 { margin-top: 2.4rem; font-size: clamp(1.5rem, 3vw, 2.05rem); }
.si-articulo h3 { margin-top: 1.8rem; }
.si-articulo p, .si-articulo li { color: #CBD3DA; font-size: 1.06rem; line-height: 1.75; }
.si-articulo strong { color: var(--humo); }
.si-articulo blockquote {
  margin: 2rem 0; padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--fuego); background: var(--acero-alto);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
}
.si-articulo blockquote p { margin: 0; color: var(--humo); font-size: 1.08rem; }
.si-articulo table {
  width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .96rem;
  display: block; overflow-x: auto;
}
.si-articulo th, .si-articulo td { padding: .7rem .9rem; border: 1px solid var(--acero-borde); text-align: left; }
.si-articulo th { background: var(--acero-alto); font-family: var(--display); font-weight: 700; }
.si-articulo td { color: var(--niebla); }

.si-portada-articulo { border-radius: var(--radio); overflow: hidden; margin-bottom: 2.4rem; border: 1px solid var(--acero-borde); }
.si-portada-articulo img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

.si-migas {
  font-size: .85rem; color: var(--niebla-tenue); margin-bottom: 1.2rem;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.si-migas a {
  color: var(--niebla);
  display: inline-block; padding-block: .1rem;   /* 22 → 25 px, el mínimo de WCAG 2.5.8 */
}
.si-migas span { color: var(--niebla-tenue); }

.si-encabezado-pagina {
  position: relative; overflow: hidden;
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(2.6rem, 5vw, 4rem);
  border-bottom: 1px solid var(--acero-borde);
  background: var(--acero);
}
.si-encabezado-pagina::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 90% at 88% 0%, rgba(220, 98, 0, .16), transparent 60%);
}
.si-encabezado-pagina__contenido { position: relative; z-index: 1; }
.si-encabezado-pagina p { color: var(--niebla); font-size: 1.1rem; max-width: 42rem; margin-bottom: 0; }

/* --------------------------------------------------------------- pie -- */

.si-pie { background: var(--acero); border-top: 1px solid var(--acero-borde); position: relative; overflow: hidden; }
.si-pie__llama {
  position: absolute; right: -4rem; bottom: -6rem; width: 26rem; opacity: .05;
  pointer-events: none; user-select: none;
}
.si-pie__rejilla {
  position: relative; z-index: 1;
  display: grid; gap: 2.4rem;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.4rem;
}
@media (max-width: 900px) { .si-pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .si-pie__rejilla { grid-template-columns: 1fr; } }

.si-pie h4 {
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--niebla-tenue); margin-bottom: 1rem;
}
.si-pie ul { list-style: none; padding: 0; margin: 0; }
.si-pie li { margin-bottom: .5rem; }
.si-pie a {
  color: var(--niebla); font-size: .95rem;
  display: inline-block; padding-block: .2rem;   /* 18 → 25 px */
}
.si-pie a:hover { color: var(--ascua-vivo); }
.si-pie__marca img { height: 82px; width: auto; margin-bottom: 1rem; }
.si-pie__marca p { color: var(--niebla); font-size: .95rem; max-width: 22rem; }

.si-pie__base {
  position: relative; z-index: 1;
  border-top: 1px solid var(--acero-borde);
  padding: 1.4rem 0;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  align-items: center; justify-content: space-between;
  font-size: .85rem; color: var(--niebla-tenue);
}
.si-pie__base a { color: var(--niebla-tenue); font-size: .85rem; }

.si-redes { display: flex; gap: .6rem; }
.si-redes a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--acero-borde); border-radius: var(--radio-s);
  color: var(--niebla);
  transition: border-color .25s var(--curva-suave), color .25s var(--curva-suave), transform .25s var(--curva);
}
.si-redes a:hover { border-color: var(--ascua-vivo); color: var(--ascua-vivo); transform: translateY(-2px); }
.si-redes svg { width: 18px; height: 18px; fill: currentColor; }

/* -------------------------------------------------------- flotante wa -- */

.si-wa {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 55;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #0B0D10;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8);
  transition: transform .3s var(--curva);
}
.si-wa:hover { transform: scale(1.08); color: #0B0D10; }
.si-wa svg { width: 30px; height: 30px; fill: currentColor; }

/* ------------------------------------------- catálogo deslizable (2026) --
   Carrusel horizontal de páginas del catálogo. El deslizamiento real lo hace
   el navegador con scroll-snap: en móvil y en trackpad ya funciona solo. El
   JS únicamente añade arrastre con el ratón, flechas y teclado.
   ------------------------------------------------------------------------ */

.si-catalogo { overflow: hidden; }

.si-catalogo__cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.4rem 2rem; flex-wrap: wrap;
  margin-bottom: clamp(1.8rem, 3.4vw, 2.6rem);
}
.si-catalogo__cabeza .si-encabezado { margin-bottom: 0; }

.si-catalogo__mandos { display: flex; gap: .6rem; }

.si-catalogo__mando {
  width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center;
  background: transparent; cursor: pointer;
  border: 1px solid var(--acero-borde); border-radius: var(--radio-s);
  color: var(--humo);
  transition: border-color .25s var(--curva-suave), color .25s var(--curva-suave),
              background-color .25s var(--curva-suave), opacity .25s var(--curva-suave);
}
.si-catalogo__mando:hover:not(:disabled) {
  border-color: var(--ascua-vivo); color: var(--ascua-vivo);
  background: rgba(240, 122, 18, .08);
}
.si-catalogo__mando:disabled { opacity: .3; cursor: default; }
.si-catalogo__mando svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* La pista sangra a todo el ancho de la ventana, pero la primera hoja se
   alinea con el contenedor: así se ve que hay más catálogo a la derecha. */
.si-catalogo__pista {
  display: flex; gap: 1.1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-inline: max(1.2rem, calc((100vw - var(--ancho)) / 2));
  /* El imán de scroll-snap ignora el relleno de arranque: sin este
     scroll-padding la tira se posiciona sola en scrollLeft = 80 px al cargar
     y el botón «atrás» nace habilitado apuntando a ninguna parte. */
  scroll-padding-inline: max(1.2rem, calc((100vw - var(--ancho)) / 2));
  padding-block: .4rem 1.6rem;
  cursor: grab;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;
}
.si-catalogo__pista::-webkit-scrollbar { display: none; }
.si-catalogo__pista.esta-arrastrando {
  cursor: grabbing;
  scroll-snap-type: none;            /* si no, el arrastre pelea con el imán */
  scroll-behavior: auto;
}
.si-catalogo__pista:focus-visible { outline: 3px solid var(--ascua-vivo); outline-offset: 4px; }

.si-catalogo__hoja {
  flex: 0 0 auto;
  width: clamp(13rem, 24vw, 17.5rem);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}

.si-catalogo__lupa {
  display: block; width: 100%; padding: 0;
  position: relative;
  background: var(--acero-alto);
  border: 1px solid var(--acero-borde);
  border-radius: var(--radio);
  overflow: hidden; cursor: zoom-in;
  transition: transform .4s var(--curva), border-color .3s var(--curva-suave),
              box-shadow .4s var(--curva);
}
.si-catalogo__lupa img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 612 / 792;           /* carta vertical, evita el salto de layout */
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
.si-catalogo__hoja:hover .si-catalogo__lupa {
  transform: translateY(-5px);
  border-color: rgba(240, 122, 18, .55);
  box-shadow: var(--sombra);
}
.si-catalogo__lupa::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(11, 13, 16, .72) 100%);
  opacity: 0; transition: opacity .3s var(--curva-suave);
}
.si-catalogo__hoja:hover .si-catalogo__lupa::after { opacity: 1; }

.si-catalogo__folio {
  position: absolute; left: .7rem; top: .7rem; z-index: 2;
  padding: .28rem .6rem; border-radius: 999px;
  background: rgba(11, 13, 16, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--display); font-weight: 700; font-size: .7rem;
  letter-spacing: .1em; color: var(--humo);
}

.si-catalogo__ver {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .7rem; border-radius: 999px;
  background: var(--fuego); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: .72rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--curva-suave), transform .3s var(--curva);
}
.si-catalogo__hoja:hover .si-catalogo__ver { opacity: 1; transform: none; }

.si-catalogo__pie { padding: .85rem .2rem 0; }
.si-catalogo__pie b {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ascua-vivo);
  margin-bottom: .2rem;
}
.si-catalogo__pie span { color: var(--niebla); font-size: .92rem; line-height: 1.4; }

.si-catalogo__base {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  margin-top: .6rem;
}
.si-catalogo__barra {
  position: relative; flex: 1 1 14rem; height: 3px;
  background: var(--acero-borde); border-radius: 3px; overflow: hidden;
}
.si-catalogo__barra i {
  position: absolute; inset: 0 auto 0 0;
  width: 18%; background: var(--llama-h); border-radius: 3px;
  transition: width .18s linear, transform .18s linear;
}
.si-catalogo__cuenta {
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--niebla-tenue);
  flex: 0 0 auto;
}
.si-catalogo__acciones { display: flex; gap: .7rem; flex-wrap: wrap; }

.si-catalogo__pista.esta-arrastrando .si-catalogo__lupa { pointer-events: none; }

@media (max-width: 760px) {
  .si-catalogo__mandos { display: none; }   /* en táctil se desliza con el dedo */
  .si-catalogo__hoja { width: min(68vw, 15rem); }
}

/* ------------------------------------------------------------------ lupa -- */

/* OJO CON EL ORDEN: `display: grid` de una hoja de autor GANA al
   `[hidden]{display:none}` de la hoja del navegador. Sin la regla de abajo la
   lupa se queda montada a pantalla completa con z-index 120 y opacidad 0: no
   se ve, pero se come todos los toques y los clics de la página entera. En la
   portada y en /catalogo/ dejaba de funcionar TODO —hero, menú, botones— y no
   se nota en pruebas que llaman a .click(), porque ese método salta la prueba
   de impacto. Se detectó con document.elementFromPoint(). */
.si-lupa[hidden] { display: none; }

.si-lupa {
  position: fixed; inset: 0; z-index: 120;
  display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(6, 7, 9, .95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1rem;
  opacity: 0;
  transition: opacity .28s var(--curva-suave);
}
.si-lupa.esta-abierta { opacity: 1; }

.si-lupa__cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .2rem .2rem .8rem;
}
.si-lupa__titulo {
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  color: var(--humo); margin: 0;
}
.si-lupa__titulo b { color: var(--ascua-vivo); font-weight: 700; }

.si-lupa__marco {
  position: relative;
  display: grid; place-items: center;
  min-height: 0;                    /* sin esto la imagen desborda la rejilla */
}
.si-lupa__marco img {
  max-width: min(100%, 46rem);
  max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--radio-s);
  box-shadow: var(--sombra-alta);
  background: #fff;
}

.si-lupa__base {
  display: flex; align-items: center; justify-content: center;
  gap: .8rem; padding-top: .9rem; flex-wrap: wrap;
}

.si-lupa__mando {
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%; color: var(--humo);
  transition: background-color .25s var(--curva-suave), border-color .25s var(--curva-suave),
              color .25s var(--curva-suave);
}
.si-lupa__mando:hover { background: var(--fuego); border-color: var(--fuego); color: #fff; }
.si-lupa__mando svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.si-lupa__cuenta {
  font-family: var(--display); font-weight: 700; font-size: .85rem;
  letter-spacing: .14em; color: var(--niebla); min-width: 6rem; text-align: center;
}

body.si-lupa-abierta { overflow: hidden; }

/* ---------------------------------------------------------- utilidades -- */

.si-dos { display: grid; gap: clamp(2rem, 5vw, 3.6rem); grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 880px) { .si-dos { grid-template-columns: 1fr; } }
.si-dos--invertido > *:first-child { order: 2; }
@media (max-width: 880px) { .si-dos--invertido > *:first-child { order: 0; } }

.si-marco {
  position: relative; border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--acero-borde); background: var(--acero-alto);
}
.si-marco img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.si-marco--alto img { aspect-ratio: 3 / 4; }

.si-mosaico { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
.si-mosaico .si-marco:first-child { grid-column: span 2; }
.si-mosaico .si-marco:first-child img { aspect-ratio: 16 / 9; }

.si-cita {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.35;
  letter-spacing: -.01em;
}

.si-texto-niebla { color: var(--niebla); }
.si-centro { text-align: center; }
.si-mt { margin-top: 2rem; }
.si-mt-s { margin-top: 1rem; }