/* 82-acento-terracota · Acento «Terracota». Se carga el último en las 16 páginas y solo toca color:
   no cambia tamaños, posiciones ni maquetación. Regla: terracota en líneas, texto pequeño, botones y bandas lavadas;
   nunca grandes fondos saturados.
   Contrastes (WCAG): --signal sobre blanco 5,36:1 · sobre --mesa 4,22:1 (NO vale para texto pequeño; allí --terra-oscuro)
   · sobre --terra-claro 4,33:1 (idem) · --terra-oscuro sobre --terra-claro 7,02:1 · sobre --mesa 6,84:1 · blanco sobre --signal 5,36:1. */
:root {
  --signal: #9a5a43;
  --terra-claro: #efe5df;   /* terracota muy lavado: bandas claras */
  --terra-oscuro: #6e3f2f;  /* texto sobre --mesa / --terra-claro y detalles oscuros */
  --piedra: #d9d4cb;        /* separadores finos (el pie ya lo definía en .pie77; aquí disponible en toda la web) */
  --mesa: #e6e4df;
  --grafito: #3a3835;
}

/* Botón principal (.btn): relleno terracota, texto blanco (5,36:1). El hover a grafito lo define estilos.css. */
.btn { color: #ffffff; }

/* Botón secundario .btn-linea (servicios, sectores, fichas; no la cabecera, que conserva su relleno): borde y texto
   terracota en reposo, relleno terracota al hover. */
main .btn-linea { background: transparent; color: var(--signal); border-color: var(--signal); }
main .btn-linea:hover { background: var(--signal); border-color: var(--signal); color: #fff; }

/* Rótulos mono de sección / eyebrows. Sobre blanco: terracota; sobre --mesa (proceso): --terra-oscuro por contraste. */
.rotulo { color: var(--signal); }                                   /* «Antes de empezar», «Cómo trabajamos», «Qué recibes» en servicios y sectores */
.pv-tf, .p61-r { color: var(--terra-oscuro); }                      /* fecha y rótulo de cada paso en el proceso (sobre --mesa) */
.escena-fecha { color: var(--terra-oscuro); }                       /* fecha de cada escena del proceso completo (sobre --mesa) */
.escena-fecha span { color: var(--terra-oscuro); }
.desfile-cap { color: var(--signal); }                              /* pies mono del desfile de la home (sobre blanco) */

/* Números de paso y marcas del hilo */
.ruta .paso { color: var(--signal); }                               /* nombre/número de cada paso en la ruta de servicios */
.ruta li { background-image: linear-gradient(var(--signal), var(--signal)); } /* hilo vertical */
.ruta li::before { background: var(--signal); }                     /* nudos del hilo */
.pasos { border-left-color: var(--signal); }                        /* hilo vertical móvil de los pasos */
.pasos::before { background: var(--signal); }                       /* hilo horizontal escritorio */
.pasos li::before { background: var(--signal); }                    /* nudos */
.mesa-barra a.pasada::before { background: var(--terra-oscuro); }   /* barra del proceso: tramos ya recorridos (el activo ya es --signal) */
.mesa-barra a.activa { color: var(--terra-oscuro); }                /* texto del paso activo (sobre --mesa) */

/* Marcas activas */
.filtro button[aria-pressed="true"] { border-bottom-color: var(--signal); } /* línea bajo el filtro */
.filtro button:hover { border-bottom-color: var(--terra-oscuro); }
[role="tab"][aria-selected="true"] { border-bottom-color: var(--signal); box-shadow: inset 0 -3px 0 var(--signal); } /* pestañas, si las hubiera */
.cab .nav a[aria-current]:not(.btn) { text-decoration-color: var(--signal); } /* página actual en la nav (subrayado, ya existía) */
.pie77-base .idiomas [aria-current="true"] { border-bottom-color: var(--signal); }  /* idioma activo del pie */
.cj .s57-col.on .s57-card::before {                                  /* servicios (home): columna activa del abanico */
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 4px; background: var(--signal); pointer-events: none;
}
/* ya en var(--signal) y sin tocar: miniatura activa del proceso (.pv-mini.on::after), línea de scroll (.p61-lin i),
   mosaico (.tile[aria-current]), barra del desfile. */

/* Subrayado terracota de 2 px en los enlaces de texto al hover (contenido principal; no la nav, no los que van sobre imagen) */
main a:not(.btn):not(.btn-linea):hover { text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
main .pc a:hover, main .tile:hover, main .cel:hover, main .mv-mas a:hover { text-decoration-color: currentColor; }
main .tile:hover .tile-nombre { text-decoration-color: #fff; }

/* Foco por teclado en terracota (el fondo claro por defecto; sobre imagen/oscuro se mantienen los anillos blancos propios) */
:focus-visible { outline-color: var(--signal); }
.s57-mas:focus-visible,
.desfile-todos:focus-visible, .desfile-item > a:focus-visible, .pv-mini:focus-visible { outline-color: var(--signal); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline-color: var(--signal); }
.check input { accent-color: var(--signal); }                       /* casilla de privacidad */

/* Formularios: asterisco de obligatorio */
.campo .req { color: var(--terra-oscuro); }

/* Pie (sobre --mesa) */
.pie77-cols h2 { color: var(--terra-oscuro); }                      /* cabeceras mono del pie: 6,84:1 sobre --mesa */
.pie77-cols a:hover { text-decoration-color: var(--signal); }       /* enlaces del pie (antes oliva) */
.pie77-cols a:focus-visible, .pie77-base button:focus-visible { outline-color: var(--signal); }
.pie77-base { border-top-color: var(--piedra); }                    /* separador fino superior de la base */
.pie77-banda::after { background: rgba(110, 63, 47, 0.45); }        /* velo de la banda del pie: grafito + terracota sobre el render */
.pie77-banda a:focus-visible { outline-color: #fff; }               /* sobre el render el foco sigue blanco */

/* Banda de llamada a la acción de interiores: clara, texto oscuro. (Hoy ninguna página usa .cta; queda lista.) */
.cta { background: var(--terra-claro); color: var(--terra-oscuro); border-top-color: var(--piedra); }
.cta h2, .cta p { color: var(--terra-oscuro); }
.cta a:not(.btn) { color: var(--terra-oscuro); }

/* Separadores finos en piedra (solo los de 1 px suaves; los filetes negros de la firma no se tocan) */
.bloque + .bloque, .faq, .faq > div, .bloque .ent > div { border-color: var(--piedra); }

/* ---------- página actual en la barra: tramo grueso terracota sobre la línea fina de la barra (04-11 noche) ----------
   El enlace activo deja de subrayarse; en escritorio, su <li> ocupa toda la altura de la barra y pinta un tramo
   de 3 px pegado al borde inferior, justo encima del filete de .cab::before. */
.cab .nav a[aria-current]:not(.btn) { text-decoration: none; }
@media (min-width: 1180px) {
  .cab .nav { align-self: stretch; display: flex; }
  .cab .nav ul { height: 100%; align-items: stretch; }
  .cab .nav li { position: relative; display: flex; align-items: center; }
  .cab .nav li:has(> a[aria-current]:not(.btn))::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--signal);
  }
}

/* hover en la barra: sin subrayado del texto; el mismo tramo grueso sobre la línea fina, en piedra (la página actual sigue en terracota) */
@media (min-width: 1180px) {
  .cab .nav a:not(.btn):hover { text-decoration: none; }
  .cab .nav li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; transition: background-color 160ms ease; }
  .cab .nav li:has(> a:not(.btn):hover)::after { background: var(--piedra, #d9d4cb); }
  .cab .nav li:has(> a[aria-current]:not(.btn))::after,
  .cab .nav li:has(> a[aria-current]:not(.btn):hover)::after { background: var(--signal); }
  .cab .nav li:has(> a.btn)::after { content: none; }
}