/* =================================================================
   JRI Core — página interna (Savi Safety)

   Réplica de savisafety.com, medido con `getComputedStyle` a 1502 px el
   11/09/2026: banda negra `rgb(24,24,24)` de 60 px arriba y abajo con el
   título a 68/81.6 en 600 y la ruta centrada debajo, en versalitas de 11 px;
   el cuerpo a 14/22.4 en `rgb(38,38,38)`, a todo el ancho del contenedor.

   Hereda de JRI el nombre de la sección y nada más: la hoja anterior solo
   fijaba una medida de 860 px y la tipografía la ponía `blog.css` a 16/1.8.
   Aquí no se declara `blog.css`, así que el texto largo de las legales se
   estila entero en esta hoja.

   ⚠️ Una diferencia a propósito: en savisafety.com la línea de texto legal
   pasa de 190 caracteres a 1502 px. El usuario dejó estas páginas a nuestro
   criterio (11/09/2026), así que la prosa va a **900 px** —unos 100
   caracteres, que es lo cómodo de leer— centrada en el contenedor. La banda,
   el tamaño y los colores siguen siendo los del sitio.
   ================================================================= */

/* ---------------- Banda del título ---------------- */
.jri-banda-pagina {
  padding-block: 60px;
  margin-bottom: 40px;
  background: rgb(24 24 24);
  color: var(--c-blanco, #fff);
  text-align: center;
}

.jri-banda-pagina__titulo {
  margin: 0 0 10px;
  font-size: 68px;
  line-height: 81.6px;
  font-weight: 600;
  color: inherit;
  text-wrap: balance;
}

.jri-banda-pagina__ruta ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.jri-banda-pagina__ruta a { color: inherit; text-decoration: none; }
.jri-banda-pagina__ruta a:hover { text-decoration: underline; }

/* El separador lo pinta el CSS y no el marcado: así la ruta se lee seguida
   en un lector de pantalla, sin barras sueltas entre elementos. */
.jri-banda-pagina__ruta li + li::before { content: '/'; margin-right: 6px; opacity: .7; }

/* ---------------- Cuerpo ---------------- */
.jri-page-content { padding-block: 0 60px; }

.jri-pagina-prosa {
  /* 900 px: el texto legal a todo el ancho del contenedor se pierde de renglón. Una página con
     maqueta de columnas (las que vienen de WPBakery) necesita el ancho entero, así que ahí se
     levanta el límite. */
  max-width: 900px;
  font-size: 14px;
  line-height: 22.4px;
  color: rgb(38 38 38);
}

/* Con filas de columnas, el contenedor manda: si no, el formulario de la derecha se quedaría
   fuera de los 900 px de lectura. */
.jri-pagina-prosa:has(.jri-fila) { max-width: none; }

/* Los acordeones que deja el conversor de WPBakery (`vc_toggle` → `<details>`), con el mismo
   aspecto que tienen en el sitio: título con un signo a la izquierda y filete debajo. */
.jri-pagina-prosa .jri-acordeon { border-bottom: 1px solid var(--c-hairline, #E5E5E5); }
.jri-pagina-prosa .jri-acordeon > summary {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.jri-pagina-prosa .jri-acordeon > summary::-webkit-details-marker { display: none; }
.jri-pagina-prosa .jri-acordeon > summary::before { content: '+'; font-size: 18px; line-height: 1; }
.jri-pagina-prosa .jri-acordeon[open] > summary::before { content: '–'; }
.jri-pagina-prosa .jri-acordeon > *:not(summary) { padding-bottom: 14px; }

.jri-pagina-prosa > *:first-child { margin-top: 0; }
.jri-pagina-prosa p { margin: 0 0 20px; }
.jri-pagina-prosa strong { font-weight: 600; color: inherit; }

.jri-pagina-prosa :is(h2, h3, h4) {
  margin: 32px 0 12px;
  font-weight: 600;
  color: var(--c-texto, rgb(38 38 38));
  line-height: 1.3;
}
.jri-pagina-prosa h2 { font-size: 24px; }
.jri-pagina-prosa h3 { font-size: 20px; }
.jri-pagina-prosa h4 { font-size: 16px; }

.jri-pagina-prosa :is(ul, ol) { margin: 0 0 20px; padding-left: 22px; }
.jri-pagina-prosa ul { list-style: disc; }
.jri-pagina-prosa ol { list-style: decimal; }
.jri-pagina-prosa li { margin-bottom: 4px; }

.jri-pagina-prosa a { color: inherit; text-decoration: underline; }
.jri-pagina-prosa a:hover { color: var(--c-texto-suave, #777); }

.jri-pagina-prosa img { height: auto; border-radius: var(--radius, 3px); }

/* Las legales traen tablas de plazos y costes; sin esto desbordan en móvil. */
.jri-pagina-prosa table { width: 100%; margin: 0 0 20px; border-collapse: collapse; }
.jri-pagina-prosa :is(th, td) { padding: 10px 12px; border: 1px solid var(--c-hairline, #E5E5E5); text-align: left; }
.jri-pagina-prosa th { font-weight: 600; background: var(--c-gris, #F1F3F5); }

.jri-pagina-prosa blockquote {
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 3px solid var(--c-amarillo, #F5EC08);
  color: var(--c-texto-suave, #777);
}

/* ---------------- Filas y columnas heredadas de WPBakery ----------------
   El conversor (`limpiar-wpbakery.php`) traduce `vc_row`/`vc_column` a estos dos elementos y
   deja el ancho original —«1/2», «2/3», «1/4»— en la variable `--jri-col`. La fracción se usa
   tal cual en `flex-basis`: `calc(1/2 * 100%)` es CSS válido y evita inventar una clase por
   cada reparto posible. Sin esto, las páginas quedaban apiladas: «Solicitar cotización» perdía
   sus dos columnas —texto a la izquierda, formulario a la derecha—. */
.jri-pagina-prosa .jri-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 24px;
}
.jri-pagina-prosa .jri-fila:last-child { margin-bottom: 0; }

.jri-pagina-prosa .jri-col {
  flex: 1 1 calc(var(--jri-col, 1) * 100% - 30px);
  min-width: 260px;
}
.jri-pagina-prosa .jri-col > *:first-child { margin-top: 0; }
.jri-pagina-prosa .jri-col > *:last-child { margin-bottom: 0; }

/* En una fila de una sola columna no hay reparto que respetar. */
.jri-pagina-prosa .jri-fila:has(> .jri-col:only-child) .jri-col { min-width: 0; }

/* El tamaño de estas imágenes lo ponía el CSS del tema (Woodmart), que ya no está: sin límite,
   el logo de la Cámara de Comercio salía a 1.000 px. 420 px es la medida a la que quedan en el
   sitio los logos y sellos de estas páginas; una imagen a ancho completo de columna sigue
   siéndolo porque `width` manda sobre `max-width` cuando el atributo viene del propio HTML. */
.jri-pagina-prosa .jri-col img {
  display: block;
  max-width: min(100%, 420px);
  height: auto;
  margin-inline: auto;
}

/* Las filas de logos quedan alineadas al centro vertical, como en el sitio. */
.jri-pagina-prosa .jri-fila { align-items: center; }

@media (max-width: 767px) {
  .jri-pagina-prosa .jri-fila { gap: 20px; }
  .jri-pagina-prosa .jri-col { flex-basis: 100%; min-width: 0; }
}

/* ---------------- Formularios de Gravity Forms ----------------
   «Solicitar cotización» y el «Libro de reclamaciones» son formularios de Gravity Forms
   metidos en el contenido de la página. Su aspecto lo ponía Woodmart, así que en el lab
   salían con la etiqueta en gris claro, los campos de 58 px y el botón sin mayúsculas ni
   relleno. Estas reglas son las medidas de savisafety.com (11/09/2026): etiqueta 16/700 en
   `rgb(38,38,38)`, campo de 42 px y botón negro de 13/600 en versalitas con 12×30 de relleno.
   ------------------------------------------------------------- */
.jri-page-content .gform_wrapper { font-size: 14px; }

/* El sitio no enseña el «"*" señala los campos obligatorios» que Gravity Forms pone arriba. */
.jri-page-content .gform_required_legend { display: none; }

.jri-page-content .gform_wrapper .gfield_label {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 25.6px;
  font-weight: 700;
  color: rgb(38 38 38);
}
.jri-page-content .gform_wrapper .gfield_required { color: #E02B27; }

.jri-page-content .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
  width: 100%;
  padding: 8px;
  font-size: 15px;
  line-height: 24px;
  color: rgb(38 38 38);
  background: var(--c-blanco, #fff);
  border: 1px solid var(--c-hairline-form, #D6D6D6);
  border-radius: var(--radius, 3px);
}
.jri-page-content .gform_wrapper textarea { line-height: 22px; }
.jri-page-content .gform_wrapper :is(input, select, textarea):focus { outline: 2px solid var(--c-amarillo, #F5EC08); outline-offset: -2px; }

.jri-page-content .gform_wrapper .gfield_radio label,
.jri-page-content .gform_wrapper .gfield_checkbox label { font-weight: 400; font-size: 14px; }

.jri-page-content .gform_footer :is(input[type="submit"], button) {
  padding: 12px 30px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--c-blanco, #fff);
  background: var(--c-negro, #111110);
  border: 0;
  border-radius: var(--radius, 3px);
  cursor: pointer;
}
.jri-page-content .gform_footer :is(input[type="submit"], button):hover { background: var(--c-texto, #262626); }

/* ---------------- Móvil ---------------- */
@media (max-width: 1024px) {
  .jri-banda-pagina { padding-block: 40px; margin-bottom: 30px; }
  .jri-banda-pagina__titulo { font-size: 40px; line-height: 48px; }
}

@media (max-width: 767px) {
  /* Medido a 390 px en savisafety.com: banda de 15 px arriba y abajo y título 36/43.2. */
  .jri-banda-pagina { padding-block: 15px; }
  .jri-banda-pagina__titulo { font-size: 36px; line-height: 43.2px; }
  .jri-page-content { padding-bottom: 40px; }
  .jri-pagina-prosa table { display: block; overflow-x: auto; }
}