/* css/header.css
   Paleta, tipografias, base del documento y la barra de navegacion.

   LA PALETA VIVE ACA Y EN UN SOLO LUGAR: header.css lo carga toda pagina, asi que las
   variables quedan disponibles para los demas css sin repetirlas. El dia que cambie un
   color se cambia una linea y no nueve archivos.

   LOS VALORES SALEN DEL BRIEF y no se eligieron aca: son los de una obra de Xul Solar. */
:root { --papel:#EFE3C2; --cab:#E6D3A3; --ocre:#E4C67F; --tarjeta:#F6EDD3; --tinta:#26322C; --tinta2:#4A5148; --boton:#D09E38; --borde:#B67937; --bermellon:#D2602E; --oxido:#94401F; --oxido2:#6E2E17; --ladrillo:#A64C29; --celeste:#87AEC1; --petroleo:#35697F; --petroleo2:#2E5A6D; --lila:#B48AC0; --lima:#9AA83E; --serif:'Cormorant Garamond',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--papel); color:var(--tinta); font-family:var(--sans); font-size:17px; line-height:1.6; }
a { color:var(--oxido); }
a:hover { color:var(--oxido2); }
img { max-width:100%; }
h1,h2,h3 { font-family:var(--serif); font-weight:700; line-height:1.1; margin:0; }
/* EL AREA TACTIL MINIMA ES 44px Y LA PIDE EL BRIEF: en un telefono, un enlace de 30px de
   alto se falla y el que lo falla no vuelve a intentar, se va. */
.cc-cab a, .cc-nav a, .cc-boton-nav { min-height:44px; display:inline-flex; align-items:center; }
.cc-cab { background:var(--cab); color:var(--tinta); border-bottom:4px solid var(--boton); }
.cc-cab-caja { max-width:1200px; margin:0 auto; padding:18px 32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.cc-marca { display:flex; align-items:center; gap:12px; color:var(--tinta); text-decoration:none; }
.cc-marca img { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--boton); }
.cc-marca span { font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:0.02em; }
.cc-nav { display:flex; flex-wrap:wrap; gap:8px 24px; font-size:15px; font-weight:500; }
.cc-nav a { color:var(--tinta); text-decoration:none; padding:10px 0; }
.cc-nav a:hover { color:var(--oxido); }
.cc-nav a.cc-nav-activa { color:var(--oxido); font-weight:700; }
.cc-boton-nav { color:var(--tinta); background:var(--boton); text-decoration:none; padding:10px 18px; border-radius:999px; font-weight:700; }
.cc-boton-nav:hover { color:var(--tinta); background:var(--borde); }
/* Las piezas que repiten todas las paginas y por eso no viven en el css de ninguna. */
.cc-ancho { max-width:1200px; margin:0 auto; padding:0 32px; }
.cc-rotulo { margin:0 0 12px; font-size:14px; letter-spacing:0.18em; text-transform:uppercase; color:var(--oxido); font-weight:700; }
.cc-boton { background:var(--boton); color:var(--tinta); text-decoration:none; padding:14px 26px; border-radius:999px; font-weight:700; display:inline-flex; align-items:center; min-height:44px; border:none; font-size:16px; font-family:var(--sans); cursor:pointer; }
.cc-boton:hover { background:var(--borde); color:var(--tinta); }
.cc-boton-linea { border:2px solid var(--tinta); color:var(--tinta); text-decoration:none; padding:12px 24px; border-radius:999px; font-weight:700; display:inline-flex; align-items:center; min-height:44px; background:none; }
.cc-boton-linea:hover { background:var(--tinta); color:var(--papel); }
.cc-tarjeta { background:var(--tarjeta); border:1.5px solid var(--borde); border-radius:16px; padding:28px; }
@media (max-width:640px) {
  .cc-cab-caja { padding:14px 18px; }
  .cc-ancho { padding:0 18px; }
  .cc-nav { width:100%; gap:4px 16px; }
}