/* ══════════════════════════════════════════════════════════════════════════════
   PLANTA DE BENEFICIO BEIJING · sitio público
   ──────────────────────────────────────────────────────────────────────────────
   El mundo visual no se inventó aquí: sale del logo que la empresa ya usa, un
   BEIJING en capitales romanas con degradado dorado. De ahí vienen las tres
   decisiones: fondo oscuro para que el oro sea oro y no mostaza, una romana
   azul #12283D del ERP y de la VAL impresa como color de confianza.

   La tipografía ya no es prestada: es la de la marca, y viaja con el sitio.
     · BIOTIF para todo lo que se lee —titulares y cuerpo—. Es la de la papelería.
     · FELIX TITLING, la del logotipo, SOLO en rótulos cortos en capitales. Es una
       titling: no tiene minúsculas, así que un titular de frase en esta cara es
       ilegible. Se usa donde el logo se usa: en una palabra, no en un párrafo.
   Se sirven desde assets/fuentes/ y no desde Google: tres peticiones menos a otro
   dominio, y la letra de la casa en vez de una que se le parece.
   ══════════════════════════════════════════════════════════════════════════════ */

/* La letra de la marca, servida desde el propio sitio */
@font-face { font-family: "Biotif"; src: url("fuentes/biotif-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Biotif"; src: url("fuentes/biotif-medium.ttf") format("truetype");
  font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Felix Titling"; src: url("fuentes/felix-titling.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* El oro, muestreado del propio logo: va de la sombra al brillo */
  --oro: #E4B444;
  --oro-claro: #FFEC73;
  --oro-tenue: rgba(228, 180, 68, .14);
  /* El oro del logotipo sobre el papel da 1,9:1: vale para un filete, no para un número que
     hay que leer. Esta versión oscurecida mide 5,0:1 sobre #FBFAF7 y se sigue viendo oro. */
  --oro-papel: #8A6620;

  /* El azul de la casa, el del ERP y el de la cabecera de la VAL */
  --azul: #12283D;
  --azul-hondo: #0A1826;

  /* Noche: no es negro puro, lleva el azul dentro. Un negro plano apaga el oro. */
  --noche: #0A1120;
  --noche-2: #101A2E;
  --noche-3: #18243C;

  /* Papel: tampoco es blanco puro; un blanco de pantalla junto al oro se ve azulado */
  --papel: #FBFAF7;
  --papel-2: #F3F1EC;

  --tinta: #141A2E;
  --tinta-2: #45506B;
  --tinta-3: #7B8398;
  --sobre-noche: #E7EBF2;
  --sobre-noche-2: #9AA6BC;

  --linea: #E2E0D9;
  --linea-noche: rgba(255, 255, 255, .11);

  --marca: "Biotif", "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  /* Solo capitales: no tiene minúsculas */
  --rotulo: "Felix Titling", "Marcellus", "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --ancho: 1180px;
  --radio: 14px;
  /* La misma curva del ERP */
  --suave: cubic-bezier(.2, .8, .2, 1);
}

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

/* La barra es sticky y mide 68 px: sin esto, cada enlace del menú deja el titular
   justo debajo de ella y parece que no pasó nada. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.65 var(--marca);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Las superficies que no dibujamos nosotros, pero que son nuestras igual */
::selection { background: var(--oro-tenue); color: var(--tinta); }
input { caret-color: var(--oro); }

/* Los titulares van en Biotif Medium, no en la titling del logo: una frase entera en capitales
   romanas no se lee, se descifra. El peso 500 le da la autoridad sin gritar. */
h1, h2, h3 { font-family: var(--marca); font-weight: 500; letter-spacing: -.02em; text-wrap: balance; margin: 0; }

a { color: inherit; }

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

.env { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }

/* Un ojal de 16px a cada lado en el celular, que es lo mínimo para que no se pegue al borde */
@media (max-width: 640px) { .env { width: calc(100% - 32px); } }

/* ─────────────────────────── Barra de arriba ─────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 50;
  /* Reserva primero: donde no hay color-mix, la cabecera se quedaba transparente y el menú se
     leía encima de la foto de la portada. */
  background: rgba(10, 17, 32, .93);
  background: color-mix(in srgb, var(--noche) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea-noche);
}
.barra .env { display: flex; align-items: center; gap: 28px; height: 68px; }
.barra img { height: 26px; width: auto; }
.barra nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.barra nav a {
  color: var(--sobre-noche-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: color .18s var(--suave);
}
@media (hover: hover) and (pointer: fine) { .barra nav a:hover { color: #fff; } }
.barra nav a:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; border-radius: 4px; }

/* El acceso al sistema: presente pero sin competir con lo que vino a hacer el visitante */
.btn-sistema {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border: 1px solid rgba(228, 180, 68, .45); border-radius: 999px;
  color: var(--oro-claro) !important; font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .18s var(--suave), border-color .18s var(--suave), transform .14s var(--suave);
}
@media (hover: hover) and (pointer: fine) {
  .btn-sistema:hover { background: var(--oro-tenue); border-color: var(--oro); }
}
.btn-sistema:active { transform: scale(.97); }

@media (max-width: 860px) { .barra nav a:not(.btn-sistema) { display: none; } }

/* ──────────────────────────────── Portada ──────────────────────────────── */

.portada {
  position: relative;
  /* El mineral, de fondo y muy apagado: atmósfera, no protagonista. Encima van dos capas —un
     degradado de arriba abajo y un halo dorado— que lo hunden hasta que el texto manda. La foto
     NO dice «esta es nuestra planta»: es mineral, que es lo que se compra aquí. */
  background:
    radial-gradient(1100px 520px at 72% -5%, rgba(228, 180, 68, .17), transparent 62%),
    linear-gradient(177deg, rgba(16, 26, 46, .93) 0%, rgba(10, 17, 32, .97) 62%),
    url("fotos/rocas.jpg") center 38% / cover no-repeat,
    var(--noche);
  color: var(--sobre-noche);
  /* La portada se mide por lo que lleva dentro, no por el alto de la pantalla. A 112px de aire
     arriba y abajo pasaba de 1000px y el verificador —que es la prueba de lo que promete el
     titular— caía por debajo del pliegue. Lo primero que se ve tiene que incluir la prueba. */
  padding: clamp(52px, 6vw, 76px) 0 clamp(56px, 6.5vw, 84px);
  overflow: hidden;
}
/* La veta: una diagonal finísima de oro, como la línea del logo bajo BEIJING */
.portada::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 180, 68, .55) 28%, rgba(255, 236, 115, .75) 50%, rgba(228, 180, 68, .55) 72%, transparent);
}
.portada .env { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 940px) { .portada .env { grid-template-columns: minmax(0, 1fr); } }

.sobretitulo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--rotulo); font-size: 13.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-claro); margin-bottom: 22px;
}
.sobretitulo::before { content: ""; width: 26px; height: 1px; background: var(--oro); }

/* A 66px el titular partía en CINCO líneas dentro de su columna de 620px, y cinco líneas de
   romana grande se leen como un muro. A 52 caben en tres y el remate dorado cae solo. */
.portada h1 {
  font-size: clamp(36px, 4.2vw, 53px); line-height: 1.08; color: #fff; margin-bottom: 20px;
}
.portada h1 em { font-style: normal; color: var(--oro-claro); }
.portada p.entrada { font-size: clamp(17px, 1.6vw, 19.5px); color: var(--sobre-noche-2); max-width: 54ch; margin: 0 0 32px; }

.acciones { display: flex; flex-wrap: wrap; gap: 13px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font-size: 15.5px; font-weight: 700; text-decoration: none; cursor: pointer;
  font-family: inherit;
  transition: transform .14s var(--suave), background .18s var(--suave), border-color .18s var(--suave), box-shadow .18s var(--suave);
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; }
.btn-oro {
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  color: #241A05; box-shadow: 0 10px 28px -12px rgba(228, 180, 68, .75);
}
@media (hover: hover) and (pointer: fine) { .btn-oro:hover { box-shadow: 0 14px 34px -12px rgba(228, 180, 68, .9); } }
.btn-linea { border-color: rgba(255, 255, 255, .22); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-linea:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .05); } }

/* Las dos sedes, como dato de portada: son el hecho más concreto que tenemos */
.sedes { display: flex; gap: 30px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linea-noche); }
.sedes div b { display: block; font-family: var(--marca); font-weight: 500; font-size: 22px; color: #fff; }
.sedes div span { font-size: 13px; color: var(--sobre-noche-2); }

/* El recuadro de verificación, que es la prueba de lo que dice el titular */
.verificador {
  background: linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid var(--linea-noche); border-radius: 20px; padding: 28px;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .8);
}
.verificador h2 { font-size: 21px; color: #fff; margin-bottom: 7px; }
/* Estos dos iban en --sobre-noche-2 y daban 3,66:1 sobre el fondo compuesto de la portada: por
   debajo del mínimo legible. Con --sobre-noche pasan de 10:1 y la jerarquía se mantiene por
   tamaño, que es como debe mantenerse. */
.verificador p { font-size: 14.5px; color: var(--sobre-noche); margin: 0 0 20px; }
.verificador label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-claro); margin-bottom: 9px; }
.verificador input {
  width: 100%; padding: 15px 17px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px;
  background: rgba(0, 0, 0, .28); color: #fff;
  font: 600 17px/1.2 var(--mono); letter-spacing: .1em;
  text-transform: uppercase;
}
.verificador input::placeholder { color: rgba(255, 255, 255, .3); letter-spacing: .08em; }
.verificador input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px var(--oro-tenue); }
.verificador .btn { width: 100%; margin-top: 13px; }
.verificador small { display: block; margin-top: 15px; font-size: 12.5px; color: var(--sobre-noche); line-height: 1.5; }

/* ──────────────────────────── Secciones claras ──────────────────────────── */

section.bloque { padding: clamp(66px, 8vw, 104px) 0; }
section.bloque.alterna { background: var(--papel-2); }

.cabecera-bloque { max-width: 62ch; margin-bottom: clamp(36px, 4vw, 54px); }
.cabecera-bloque h2 { font-size: clamp(29px, 3.6vw, 42px); line-height: 1.12; color: var(--azul); margin-bottom: 14px; }
.cabecera-bloque p { font-size: 17.5px; color: var(--tinta-2); margin: 0; }

/* El proceso: siete pasos, los de verdad, los que hace el sistema.
   NO es una rejilla de tarjetas. Siete no llena cuatro columnas y quedaba un hueco muerto al
   final; y, sobre todo, esto es una SECUENCIA: el mineral pasa por los pasos en ese orden y el
   orden es el dato. Va como lista numerada en dos columnas, que fluye sin dejar agujeros. */
.proceso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 64px); }
@media (max-width: 760px) { .proceso { grid-template-columns: minmax(0, 1fr); } }

.paso { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; padding: 20px 0; border-top: 1px solid var(--linea); }
/* La rejilla llena por filas (01 02 / 03 04 / …), así que la primera FILA son los dos primeros:
   esos dos no llevan línea arriba. En una sola columna, solo el primero. */
.proceso .paso:nth-child(-n+2) { border-top: 0; padding-top: 0; }
@media (max-width: 760px) {
  .proceso .paso:nth-child(2) { border-top: 1px solid var(--linea); padding-top: 20px; }
}

.paso b.n {
  grid-row: span 2; align-self: start;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--oro); border-radius: 50%;
  font-family: var(--rotulo); font-size: 14px; color: var(--oro-papel);
  font-variant-numeric: tabular-nums;
}
.paso h3 { font-size: 18.5px; color: var(--azul); margin-bottom: 5px; align-self: center; }
.paso p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tinta-2); }

/* Lo que el proveedor tiene que traer */
.requisitos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.requisito { display: flex; gap: 14px; padding: 22px 22px 24px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
section.alterna .requisito { background: var(--papel-2); }
.requisito svg { flex: none; width: 22px; height: 22px; stroke: var(--oro); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.requisito h3 { font-size: 17px; color: var(--azul); margin-bottom: 5px; }
.requisito p { margin: 0; font-size: 14.5px; color: var(--tinta-2); line-height: 1.55; }

/* La franja oscura de cierre, con los datos de la empresa */
.cierre { background: linear-gradient(170deg, var(--azul-hondo), var(--noche)); color: var(--sobre-noche); padding: clamp(60px, 7vw, 92px) 0; }
.cierre h2 { color: #fff; font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 16px; }
.cierre p { color: var(--sobre-noche-2); font-size: 17.5px; max-width: 58ch; margin: 0 0 30px; }
.cierre .acciones { margin-bottom: 44px; }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; padding-top: 32px; border-top: 1px solid var(--linea-noche); }
/* HIJO DIRECTO, y hace falta el «>». Sin él, este selector alcanzaba también a cualquier
   <span> metido DENTRO del <b> y lo pintaba como un rótulo más: un valor con un matiz dentro se
   leía como dos etiquetas seguidas en vez de como un dato. */
.datos div > span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); margin-bottom: 7px; }
.datos div b { font-weight: 500; font-size: 15.5px; color: #fff; font-variant-numeric: tabular-nums; }
.datos div b a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); }

.pie { background: var(--noche); color: var(--sobre-noche-2); padding: 26px 0; border-top: 1px solid var(--linea-noche); font-size: 13.5px; }
.pie .env { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; }
.pie a { color: var(--sobre-noche-2); }

/* Aquí vivía «.por-llenar», el estilo del dato pendiente. Se fue con el último hueco de la
   rejilla del cierre: el sitio ya no publica teléfono, correo ni dirección, y eso es una decisión
   tomada, no un dato que falte. Si algún día vuelve a hacer falta, está en el historial. */

/* ═══════════════════════ La veta: la franja que corta la página ═══════════════════════
   Una banda a sangre con la textura del oro, hundida casi a negro. Sirve de respiro entre dos
   secciones claras y de sitio para la única frase que la página dice en voz alta. */
.veta {
  position: relative;
  background: linear-gradient(90deg, rgba(10, 17, 32, .94), rgba(10, 17, 32, .80) 48%, rgba(10, 17, 32, .94)),
              url("fotos/oro.jpg") center / cover no-repeat;
  padding: clamp(64px, 8vw, 104px) 0;
  text-align: center;
  color: #fff;
}
.veta::before, .veta::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 115, .6), transparent);
}
.veta::before { top: 0; }
.veta::after { bottom: 0; }
.veta p {
  font-family: var(--marca); font-weight: 500; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.26; letter-spacing: -.02em;
  max-width: 20ch; margin: 0 auto; text-wrap: balance;
}
.veta p em { font-style: normal; color: var(--oro-claro); }
.veta small { display: block; margin-top: 20px; font-size: 14px; color: var(--sobre-noche-2); letter-spacing: .02em; }

/* ═══════════════════════ Las plantas, con su sitio para la foto ═══════════════════════ */
.plantas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
/* La tarjeta va siempre un escalón por encima de su sección, no al mismo nivel: con el mismo
   fondo, lo único que la separaba era el borde y se leía como un rectángulo dibujado. */
.planta { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: #fff; }
section.alterna .planta { background: var(--papel); }
/* El hueco de la foto: proporción fija para que la página no salte cuando llegue la imagen de verdad */
.planta .foto {
  aspect-ratio: 16 / 10; display: grid; place-items: center; gap: 8px;
  background: linear-gradient(140deg, var(--azul-hondo), var(--noche));
  color: var(--sobre-noche-2); text-align: center; padding: 20px;
}
.planta .foto svg { width: 30px; height: 30px; stroke: var(--oro); fill: none; stroke-width: 1.3; opacity: .85; }
.planta .foto span { font-size: 12.5px; letter-spacing: .04em; }
.planta .pie-foto { padding: 20px 22px 24px; }
.planta h3 { font-size: 21px; color: var(--azul); margin-bottom: 5px; }
.planta p { margin: 0; font-size: 15px; color: var(--tinta-2); }

/* ═══════════════════════ Que aparezca al llegar, no antes ═══════════════════════
   Cada bloque entra una vez, al entrar en pantalla. Desde un estado YA VISIBLE —nada parte de
   opacidad cero esperando a un observador— para que si el JavaScript no corre la página se lea
   igual. Y con prefers-reduced-motion no se mueve nada. */
@media (prefers-reduced-motion: no-preference) {
  /* Ojo al «.js»: la clase la pone el propio guion en cuanto arranca. Sin él —o si el guion
     revienta antes de llegar aquí— esta regla no aplica y la página se ve ENTERA, que es como
     tiene que verse. Nada se queda en opacidad cero esperando a que algo lo rescate. */
  .js .revelar { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--suave), transform .55s var(--suave); }
  .js .revelar.visible { opacity: 1; transform: none; }
  /* Dentro de una lista, cada hijo entra un pelo después que el anterior */
  .revelar.visible > * { animation: entrar-suave .5s var(--suave) both; }
  .revelar.visible > *:nth-child(2) { animation-delay: .05s; }
  .revelar.visible > *:nth-child(3) { animation-delay: .1s; }
  .revelar.visible > *:nth-child(4) { animation-delay: .15s; }
  .revelar.visible > *:nth-child(n+5) { animation-delay: .2s; }
}
@keyframes entrar-suave { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Los bloques que se pueden tocar acusan el roce, solo donde hay ratón de verdad */
@media (hover: hover) and (pointer: fine) {
  .requisito, .planta { transition: transform .22s var(--suave), border-color .22s var(--suave), box-shadow .22s var(--suave); }
  .requisito:hover, .planta:hover {
    transform: translateY(-3px); border-color: rgba(228, 180, 68, .45);
    box-shadow: 0 16px 34px -22px rgba(20, 26, 46, .5);
  }
  .paso { transition: background .22s var(--suave); }
  .paso:hover { background: color-mix(in srgb, var(--oro) 5%, transparent); }
}

/* Por dónde seguir desde el cierre. El sitio NO publica teléfono ni correo —es la decisión
   de la empresa, no un hueco pendiente—, así que esto no es un botón apagado esperando un dato:
   es la ruta que de verdad hay. Un proveedor que pulsa «Escribir por WhatsApp» y cae en un
   número inventado no piensa «falta un dato», piensa que la empresa no existe. */
.cierre-ruta {
  max-width: 54ch; margin: 26px auto 0; padding: 18px 22px;
  border: 1px solid var(--linea-noche); border-radius: var(--radio);
  background: rgba(255, 255, 255, .04);
  font-size: 15px; line-height: 1.6; color: var(--sobre-noche);
}
.cierre-ruta a { color: var(--oro-claro); text-underline-offset: 3px; }
.cierre-ruta a:hover { color: #fff; }

/* ───────────────────────────────────────────────────────────────────────────────────────────
   LOS RECURSOS DE LA PAPELERÍA, TAMBIÉN AQUÍ
   La empresa tiene hoja membretada hecha, y el ERP ya emite sus papeles con sus cuatro señas:
   el arco azul en la esquina, los tres filetes de oro del margen, la filigrana del monograma y
   la barra al pie. Que el sitio comparta dos de ellas es lo que hace que la web, la VAL y el
   ticket de balanza se reconozcan como de la misma casa.
   ─────────────────────────────────────────────────────────────────────────────────────────── */

/* La filigrana: el monograma, enorme y apenas visible, en el cierre. Sobre fondo oscuro el oro
   al 6 % da una veladura; con el azul no se vería nada. */
.cierre { position: relative; overflow: hidden; }
.cierre::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -4%; top: 50%; translate: 0 -50%;
  width: min(460px, 46%); aspect-ratio: 480 / 335;
  background: url("monograma-dorado.png") no-repeat center / contain;
  opacity: .06;
}
.cierre .env { position: relative; z-index: 1; }

/* El arco de la hoja membretada, comiéndose la esquina superior derecha del cierre. */
.cierre::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 0; right: 0; width: min(340px, 34%); aspect-ratio: 340 / 215;
  border-bottom-left-radius: 100% 100%;
  background: radial-gradient(130% 150% at 100% 0%, rgba(255, 236, 115, .10), transparent 64%);
}

/* Los tres filetes de oro del margen, en la banda alterna. Se esconden en pantallas estrechas:
   ahí el contenido llega hasta el borde y el filete quedaría debajo del texto. */
.bloque.alterna { position: relative; }
.bloque.alterna::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 18px; top: 22%; bottom: 22%; width: 7px;
  background:
    linear-gradient(180deg, var(--oro), #FFD65B 50%, var(--oro-claro)) 0 0 / 1.4px 100% no-repeat,
    linear-gradient(180deg, var(--oro), #FFD65B 50%, var(--oro-claro)) 2.6px 0 / 2.2px 100% no-repeat,
    linear-gradient(180deg, var(--oro), #FFD65B 50%, var(--oro-claro)) 6px 0 / 1.4px 100% no-repeat;
  opacity: .75;
}
@media (max-width: 1180px) { .bloque.alterna::before { display: none; } }