/* JCastorena · componentes de referencia · v1.1 · 2026-09-25
   v1.1 (esa noche, hallazgo de la maqueta de Consultoría): los enlaces sobre fondo grafito y en el
   aviso de cookies conservan el blanco al pasar el cursor (antes la regla general los volvía grafito
   sobre grafito), y el botón secundario del aviso de cookies tiene el mismo hover que sobre fondo oscuro.
   Implementación mínima de los componentes del design system, solo con tokens.css. Es la
   referencia que muestra Visual/guia-visual-jccg.html y la que el constructor de la web porta a su
   marco de trabajo; no es todavía el CSS del sitio. Especificación y reglas:
   Projects/relanzamiento-jccg/design-system-jccg.md, sección «Componentes». */

.jc {
  font-family: var(--jc-font);
  font-size: var(--jc-t-base);
  line-height: var(--jc-body-leading);
  color: var(--jc-color-texto);
  background: var(--jc-color-fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.jc *, .jc *::before, .jc *::after { box-sizing: border-box; }

/* Tipografía */
.jc h1, .jc .jc-h1 { font-size: var(--jc-t-h1); font-weight: var(--jc-peso-medio); line-height: var(--jc-interlineado-titulo); letter-spacing: var(--jc-tracking-titulo); margin: 0 0 var(--jc-espacio-5); text-wrap: balance; }
.jc h2, .jc .jc-h2 { font-size: var(--jc-t-h2); font-weight: var(--jc-peso-medio); line-height: var(--jc-interlineado-subtitulo); letter-spacing: var(--jc-tracking-titulo); margin: 0 0 var(--jc-espacio-4); text-wrap: balance; }
.jc h3, .jc .jc-h3 { font-size: var(--jc-t-h3); font-weight: var(--jc-peso-medio); line-height: var(--jc-interlineado-subtitulo); letter-spacing: var(--jc-tracking-titulo); margin: 0 0 var(--jc-espacio-3); }
.jc h4, .jc .jc-h4 { font-size: var(--jc-t-h4); font-weight: var(--jc-peso-semibold); line-height: var(--jc-interlineado-subtitulo); margin: 0 0 var(--jc-espacio-2); }
.jc p { margin: 0 0 var(--jc-espacio-4); max-width: var(--jc-medida); }
.jc-entradilla { font-size: var(--jc-t-grande); color: var(--jc-color-texto-secundario); }
.jc-chico { font-size: var(--jc-t-chico); line-height: var(--jc-interlineado-chico); color: var(--jc-color-texto-secundario); }
.jc-rotulo {
  display: block;
  font-size: var(--jc-t-rotulo);
  font-weight: var(--jc-peso-medio);
  letter-spacing: var(--jc-tracking-rotulo);
  text-transform: uppercase;
  color: var(--jc-petroleo);
  margin: 0 0 var(--jc-espacio-3);
}
.jc-banda { display: block; width: 40px; height: 3px; background: var(--jc-color-acento); margin: 0 0 var(--jc-espacio-4); }
.jc-numero { font-variant-numeric: tabular-nums; }

/* Enlace */
.jc a { color: var(--jc-color-enlace); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--jc-duracion) var(--jc-curva); }
.jc a:hover { color: var(--jc-color-enlace-hover); }

/* Foco visible */
.jc :focus-visible, .jc .is-foco { outline: var(--jc-borde-foco) solid var(--jc-color-foco); outline-offset: var(--jc-desfase-foco); }
.jc-oscuro :focus-visible, .jc-oscuro .is-foco { outline-color: var(--jc-color-foco-sobre-oscuro); }

/* Botón */
.jc-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jc-espacio-2);
  min-height: var(--jc-alto-control);
  padding: 0 var(--jc-espacio-5);
  border: var(--jc-borde) solid transparent;
  border-radius: var(--jc-radio-s);
  font: var(--jc-peso-semibold) 1rem/1.2 var(--jc-font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--jc-duracion) var(--jc-curva), border-color var(--jc-duracion) var(--jc-curva), color var(--jc-duracion) var(--jc-curva);
}
.jc a.jc-boton { text-decoration: none; }
.jc-boton--principal { background: var(--jc-color-accion); color: var(--jc-blanco); }
.jc a.jc-boton--principal { color: var(--jc-blanco); }
.jc-boton--principal:hover, .jc-boton--principal.is-hover { background: var(--jc-color-accion-hover); color: var(--jc-blanco); }
.jc-boton--acento { background: var(--jc-color-acento); color: var(--jc-grafito); }
.jc a.jc-boton--acento { color: var(--jc-grafito); }
.jc-boton--acento:hover, .jc-boton--acento.is-hover { background: var(--jc-color-acento-hover); color: var(--jc-grafito); }
.jc-boton--secundario { background: transparent; color: var(--jc-petroleo); border-color: var(--jc-petroleo); }
.jc a.jc-boton--secundario { color: var(--jc-petroleo); }
.jc-boton--secundario:hover, .jc-boton--secundario.is-hover { background: var(--jc-petroleo-claro); }
.jc-boton--texto { background: transparent; color: var(--jc-petroleo); padding: 0; min-height: 44px; }
/* La flecha es un dibujo en el color del texto: no depende de que la fuente traiga el carácter */
.jc-boton--texto::after { content: ""; width: 0.875em; height: 0.875em; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--jc-duracion) var(--jc-curva); }
.jc-boton--texto:hover::after, .jc-boton--texto.is-hover::after { transform: translateX(3px); }
.jc-boton:disabled, .jc-boton[aria-disabled="true"] { background: var(--jc-mineral); color: var(--jc-texto-secundario); border-color: var(--jc-linea); cursor: not-allowed; }
.jc .jc-oscuro .jc-boton--secundario, .jc .jc-cookies .jc-boton--secundario { color: var(--jc-blanco); border-color: var(--jc-blanco); }
.jc .jc-oscuro .jc-boton--secundario:hover, .jc .jc-cookies .jc-boton--secundario:hover { background: rgb(248 248 245 / 0.08); }

/* Cabecera */
.jc-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--jc-espacio-5); min-height: 64px; padding: var(--jc-espacio-3) 0; border-bottom: var(--jc-borde) solid var(--jc-color-separador); }
.jc-cabecera__logo img { display: block; width: 180px; height: auto; }
.jc-nav { display: none; align-items: center; gap: var(--jc-espacio-5); }
.jc-nav a { color: var(--jc-grafito); text-decoration: none; font-size: var(--jc-t-chico); font-weight: var(--jc-peso-medio); }
.jc-nav a:hover { color: var(--jc-petroleo); text-decoration: underline; }
.jc-menu { display: inline-flex; min-height: 48px; min-width: 48px; align-items: center; justify-content: center; padding: 0 var(--jc-espacio-4); border: var(--jc-borde) solid var(--jc-color-borde-control); border-radius: var(--jc-radio-s); background: transparent; color: var(--jc-grafito); font: var(--jc-peso-medio) var(--jc-t-chico) var(--jc-font); }
@media (min-width: 64rem) {
  .jc-cabecera__logo img { width: 220px; }
  .jc-nav { display: flex; }
  .jc-menu { display: none; }
}

/* Portada y secciones */
.jc-portada { padding: var(--jc-espacio-8) 0 var(--jc-espacio-8); display: grid; gap: var(--jc-espacio-7); align-items: center; }
.jc-portada__acciones { display: flex; flex-wrap: wrap; gap: var(--jc-espacio-3); margin-top: var(--jc-espacio-6); }
@media (min-width: 64rem) { .jc-portada { grid-template-columns: 7fr 5fr; padding: var(--jc-espacio-9) 0; } }
.jc-seccion { padding: var(--jc-espacio-8) 0; }
@media (min-width: 64rem) { .jc-seccion { padding: var(--jc-espacio-9) 0; } }
.jc-superficie { background: var(--jc-color-superficie); }
.jc-oscuro { background: var(--jc-color-fondo-oscuro); color: var(--jc-color-texto-sobre-oscuro); }
.jc-oscuro .jc-rotulo { color: var(--jc-cobre); }
.jc-oscuro .jc-chico, .jc-oscuro .jc-entradilla { color: var(--jc-texto-secundario-oscuro); }
.jc-oscuro a { color: var(--jc-blanco); }
.jc .jc-oscuro a:not(.jc-boton):hover, .jc .jc-cookies a:not(.jc-boton):hover { color: var(--jc-blanco); text-decoration-thickness: 2px; }

/* Tarjeta de servicio: toda la tarjeta es un solo enlace */
.jc-tarjetas { display: grid; gap: var(--jc-espacio-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.jc-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--jc-espacio-3);
  padding: var(--jc-espacio-6);
  background: var(--jc-color-fondo);
  border: var(--jc-borde) solid var(--jc-color-separador);
  border-radius: var(--jc-radio-m);
  transition: border-color var(--jc-duracion) var(--jc-curva);
}
.jc-tarjeta:hover, .jc-tarjeta:focus-within, .jc-tarjeta.is-hover { border-color: var(--jc-petroleo); }
.jc-tarjeta h3 { margin: 0; }
.jc-tarjeta dl { margin: 0; display: grid; gap: var(--jc-espacio-2); }
.jc-tarjeta dt { font-size: var(--jc-t-rotulo); font-weight: var(--jc-peso-medio); letter-spacing: var(--jc-tracking-rotulo); text-transform: uppercase; color: var(--jc-texto-secundario); }
.jc-tarjeta dd { margin: 0 0 var(--jc-espacio-2); font-size: var(--jc-t-chico); }
.jc-tarjeta a::after { content: ""; position: absolute; inset: 0; }
.jc-tarjeta a { margin-top: auto; font-weight: var(--jc-peso-semibold); }

/* Pasos del método */
.jc-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jc-espacio-5); counter-reset: paso; }
@media (min-width: 48rem) { .jc-pasos { grid-template-columns: repeat(4, 1fr); } }
.jc-pasos li { counter-increment: paso; padding-top: var(--jc-espacio-4); border-top: var(--jc-borde) solid var(--jc-acero-oscuro); }
.jc-pasos li::before { content: counter(paso, decimal-leading-zero); display: block; font-variant-numeric: tabular-nums; font-weight: var(--jc-peso-medio); color: var(--jc-petroleo); margin-bottom: var(--jc-espacio-2); }
.jc-pasos strong { display: block; font-weight: var(--jc-peso-semibold); margin-bottom: var(--jc-espacio-1); }

/* Dato con condiciones: sin la línea de condiciones no se usa */
.jc-dato { display: grid; gap: var(--jc-espacio-2); padding: var(--jc-espacio-5) 0; border-top: 3px solid var(--jc-color-acento); max-width: 22rem; }
.jc-dato__cifra { font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); font-weight: var(--jc-peso-medio); line-height: 1; color: var(--jc-petroleo); font-variant-numeric: tabular-nums; letter-spacing: var(--jc-tracking-titulo); }
.jc-dato__que { font-weight: var(--jc-peso-semibold); }
.jc-dato__condiciones { font-size: var(--jc-t-chico); line-height: var(--jc-interlineado-chico); color: var(--jc-color-texto-secundario); margin: 0; }
.jc-dato__tipo { justify-self: start; }

/* Etiqueta */
.jc-etiqueta { display: inline-block; padding: 2px var(--jc-espacio-2); border-radius: var(--jc-radio-s); background: var(--jc-mineral); color: var(--jc-grafito); font-size: var(--jc-t-rotulo); font-weight: var(--jc-peso-medio); line-height: 1.5; }
.jc-etiqueta--muestra { background: var(--jc-cobre-tenue); }

/* Avisos y nota de transparencia */
.jc-aviso { display: grid; grid-template-columns: auto 1fr; gap: var(--jc-espacio-3); padding: var(--jc-espacio-4) var(--jc-espacio-5); border-radius: var(--jc-radio-m); border: var(--jc-borde) solid; color: var(--jc-grafito); font-size: var(--jc-t-chico); line-height: var(--jc-interlineado-chico); }
.jc-aviso p { margin: 0; }
.jc-aviso__icono { font-weight: var(--jc-peso-semibold); line-height: 1.45; }
.jc-aviso--info, .jc-aviso--exito { background: var(--jc-color-info-fondo); border-color: var(--jc-petroleo); }
.jc-aviso--advertencia { background: var(--jc-color-advertencia-fondo); border-color: var(--jc-cobre); }
.jc-aviso--error { background: var(--jc-color-error-fondo); border-color: var(--jc-color-error); }
.jc-aviso--error .jc-aviso__icono { color: var(--jc-color-error); }

/* Cita */
.jc-cita { margin: 0; max-width: 40rem; }
.jc-cita::before { content: ""; display: block; width: 40px; height: 3px; background: var(--jc-acero); margin-bottom: var(--jc-espacio-4); }
.jc-cita p { font-size: var(--jc-t-h3); font-weight: var(--jc-peso-medio); line-height: 1.35; letter-spacing: var(--jc-tracking-titulo); margin: 0 0 var(--jc-espacio-3); }
.jc-cita footer { font-size: var(--jc-t-chico); color: var(--jc-color-texto-secundario); }

/* Formulario */
.jc-form { display: grid; gap: var(--jc-espacio-5); max-width: 36rem; }
.jc-campo { display: grid; gap: var(--jc-espacio-2); }
.jc-campo label, .jc-campo legend { font-size: var(--jc-t-chico); font-weight: var(--jc-peso-medio); }
.jc-campo .jc-opcional { font-weight: var(--jc-peso-regular); color: var(--jc-color-texto-secundario); }
.jc-campo input, .jc-campo select, .jc-campo textarea {
  width: 100%;
  min-height: var(--jc-alto-control);
  padding: var(--jc-espacio-3) var(--jc-espacio-4);
  border: var(--jc-borde) solid var(--jc-color-borde-control);
  border-radius: var(--jc-radio-s);
  background: #FFFFFF;
  color: var(--jc-grafito);
  font: var(--jc-peso-regular) 1rem/1.4 var(--jc-font);
}
.jc-campo textarea { min-height: 8rem; resize: vertical; }
.jc-campo input:focus-visible, .jc-campo select:focus-visible, .jc-campo textarea:focus-visible { outline: var(--jc-borde-foco) solid var(--jc-color-foco); outline-offset: 1px; border-color: var(--jc-petroleo); }
.jc-campo--error input, .jc-campo--error textarea, .jc-campo--error select { border-color: var(--jc-color-error); border-width: 2px; }
.jc-campo__error { display: flex; gap: var(--jc-espacio-2); font-size: var(--jc-t-chico); color: var(--jc-color-error); margin: 0; }
.jc-campo__ayuda { font-size: var(--jc-t-chico); color: var(--jc-color-texto-secundario); margin: 0; }
.jc-casilla { display: grid; grid-template-columns: auto 1fr; gap: var(--jc-espacio-3); align-items: start; font-size: var(--jc-t-chico); }
.jc-casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--jc-petroleo); }
.jc-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--jc-espacio-2); }
.jc-radios { display: flex; flex-wrap: wrap; gap: var(--jc-espacio-2) var(--jc-espacio-5); }
.jc-radios label { display: inline-flex; gap: var(--jc-espacio-2); align-items: center; font-weight: var(--jc-peso-regular); min-height: 44px; }
.jc-radios input { width: 20px; height: 20px; accent-color: var(--jc-petroleo); }

/* Tabla técnica */
/* El contenedor se desplaza; su padre en una retícula necesita min-width: 0 para no desbordar la página */
.jc-tabla-contenedor { overflow-x: auto; max-width: 100%; }
.jc-tabla { width: 100%; border-collapse: collapse; font-size: var(--jc-t-chico); }
.jc-tabla th { text-align: left; font-weight: var(--jc-peso-semibold); background: var(--jc-color-superficie); padding: var(--jc-espacio-3) var(--jc-espacio-4); border-bottom: var(--jc-borde) solid var(--jc-acero-oscuro); }
.jc-tabla td { padding: var(--jc-espacio-3) var(--jc-espacio-4); border-bottom: var(--jc-borde) solid var(--jc-color-separador); vertical-align: top; }
.jc-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Bloque «Juan Carlos» */
.jc-persona { display: grid; gap: var(--jc-espacio-6); align-items: start; }
.jc-persona img { width: 100%; max-width: 220px; height: auto; border-radius: var(--jc-radio-l); display: block; }
@media (min-width: 48rem) { .jc-persona { grid-template-columns: 220px 1fr; } }

/* Pie de página */
.jc-pie { padding: var(--jc-espacio-8) 0 var(--jc-espacio-6); border-top: var(--jc-borde) solid var(--jc-color-separador); font-size: var(--jc-t-chico); }
.jc-pie__marca img { width: 180px; height: auto; display: block; margin-bottom: var(--jc-espacio-2); }
.jc-pie__rejilla { display: grid; gap: var(--jc-espacio-6); }
@media (min-width: 48rem) { .jc-pie__rejilla { grid-template-columns: 2fr 1fr 1fr; } }
.jc-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jc-espacio-2); }
.jc-pie__legal { margin-top: var(--jc-espacio-7); padding-top: var(--jc-espacio-4); border-top: var(--jc-borde) solid var(--jc-color-separador); color: var(--jc-color-texto-secundario); }

/* Aviso de cookies: no bloquea la lectura */
.jc-cookies { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jc-espacio-4); padding: var(--jc-espacio-4) var(--jc-espacio-5); background: var(--jc-grafito); color: var(--jc-blanco); border-radius: var(--jc-radio-m); font-size: var(--jc-t-chico); line-height: var(--jc-interlineado-chico); box-shadow: var(--jc-sombra-2); }
.jc-cookies p { margin: 0; max-width: 46rem; }
.jc-cookies a { color: var(--jc-blanco); }

@media (prefers-reduced-motion: reduce) {
  .jc *, .jc *::before, .jc *::after { transition: none !important; }
}