/* identidad-v1.css — LA MARCA NUEVA SOBRE LAS PÁGINAS DE SIEMPRE (7 sep 2026)
   --------------------------------------------------------------------------
   Esta hoja NO reescribe ninguna regla de las páginas: solo cambia el valor de
   las variables de color que ellas ya usaban, y la letra. Por eso va SIEMPRE
   la última del <head>, DESPUÉS del <style> propio de cada página: si fuera
   antes, el `:root` de la página la pisaría y no cambiaría nada.

   No toca ni un id, ni un name, ni una clase de las que usa el JS. Cambiar el
   valor de una variable no cambia el árbol: lo que el guion busca, sigue donde
   estaba.

   La traducción es esta:
     el azul marino (--navy, --deep, --ink)   -> el negro de la marca
     el naranja (--orange, --amber, --amarillo) -> el amarillo de la marca
     el crema (--cream)                       -> blanco

   Y funciona bien porque estas páginas son de FONDO OSCURO: el amarillo sobre
   negro da 12:1 de contraste. Sobre un fondo claro habría que hacerlo al
   revés, y no es el caso de ninguna. */

:root{
  /* --- azules a negros --- */
  --navy:#121212;
  --navy-deep:#1B1B1B;   /* los bloques que iban un tono por dentro */
  --navy-soft:#2A2A2A;
  --deep:#1B1B1B;
  --ink:#121212;

  /* --- naranjas a amarillo --- */
  --orange:#FFC300;
  --orange-dark:#E0AC00;  /* solo se usa para el hover del botón */
  --amber:#FFC300;
  --amarillo:#FFC300;

  /* --- crema a blanco --- */
  --cream:#FFFFFF;

  /* --- neutros de apoyo: ni son marca ni se ven como color --- */
  --muted:rgba(255,255,255,.80);
  --line:rgba(255,255,255,.14);
  --pared:#2A2A2A;

  /* El verde de "va bien" y el rojo de "va mal" NO son decoración: dicen algo.
     Se dejan como estaban a propósito -pintarlos de la marca sería quitarles
     el significado-, salvo el rojo de error, que se acerca al de la marca. */
}

/* ---- LA LETRA --------------------------------------------------------- */
/* Georgia fuera. El peso 700 para lo que era titular; el cuerpo, 400. */
body{ font-family:var(--fuente) !important; font-weight:400 }
/* 800 y no 700: el sistema unico del encargo maestro tiene DOS pesos, 400 y
   800. El 700 era un tercero que a tamaño de titular no se distingue del 800
   y obligaba a decidir cual tocaba en cada sitio. */
h1,h2,h3,h4{ font-family:var(--fuente) !important; font-weight:800 }
button, input, select, textarea, .cta, .boton{ font-family:var(--fuente) !important }

/* El logotipo escrito sigue en la serif de la marca, que para eso está. */
.marca-web, .marca, .logo, .lk-logo{ font-family:var(--logo) }

/* ---- EL BOTÓN PRINCIPAL ----------------------------------------------- */
/* Amarillo con texto negro, esté donde esté. Las páginas ya lo pintaban con
   --orange de fondo; lo que hace falta es asegurar el texto negro, porque
   alguna lo llevaba en crema. */
.cta, .boton-principal, button.principal{
  background:var(--amarillo) !important;
  color:var(--negro) !important;
  font-weight:800;
}

/* ---- EL SELECTOR DE OFICIO (7 sep 2026) -------------------------------- */
/* El <select> del alta se pinta como los <input> que tiene al lado: la página
   nunca había tenido uno, así que sin esto saldría con el estilo del sistema
   -fondo blanco- en medio de un formulario oscuro. Las mismas medidas que
   `.form-email input`, copiadas de su hoja. */
.form-email select{
  display:block;
  width:100%;
  /* Espaciado de ocho en ocho y radio de los tres del sistema (16/12/8).
     Las mismas medidas que `.form-email input`, que es con quien tiene que
     casar: si uno lleva 16 de aire y el otro 14, se nota en la fila. */
  margin:0 0 16px;
  padding:16px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--navy-deep);
  color:var(--cream);
  font-size:17px;
  font-family:var(--fuente);
  box-sizing:border-box;
  appearance:none;
  /* La flechita, dibujada aquí para no depender de una imagen. */
  background-image:linear-gradient(45deg,transparent 50%,var(--orange) 50%),
                   linear-gradient(135deg,var(--orange) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.form-email select:focus{ outline:2px solid var(--orange); outline-offset:1px }
/* La lista desplegada la pinta el sistema, no la página: se le dice al menos
   que el fondo es oscuro para que no salga texto blanco sobre blanco. */
.form-email select option{ background:var(--navy-deep); color:var(--cream) }
