/* =====================================================================
   ACROS — HOJA DE MARCA COMPARTIDA (05/10)
   La enlazan todas las páginas ANTES de su propio <style>. Aquí viven las
   fuentes, la paleta (claro y oscuro), formas, sombras, botones, el logo y
   la barra de la cabecera. Cambiar la marca = editar este archivo; ninguna
   página redefine estos valores.

   Paleta de las tarjetas de visita. Regla de marca: fondo blanco roto +
   verde para marca y titulares + un solo naranja de acento (tostado
   profundo en texto; naranja tostado solo en el logo y la barra).
   Ajustes de Vikn (05/10): el verde Acros #032617 se leía como negro en
   claro → verde bosque #335C47 en botones/burbujas/texto fuerte y
   #23402F en titulares, subtítulos y nombre ACROS; en oscuro, acento
   «arena tostada» #D9A066 (el #E8925A tiraba a salmón sobre el verde).
   ===================================================================== */

/* ---------- Fuentes (autoalojadas en fuentes/; ningún tercero recibe la
   IP del visitante). Spectral: el archivo 600 atiende también 700–800,
   para que los titulares en «negrita» salgan en seminegrita. ---------- */
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/spectral-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url('fuentes/spectral-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/spectral-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('fuentes/spectral-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fuentes/manrope-latin-wght-normal.woff2') format('woff2'); }

/* ---------- Modo claro ---------- */
:root {
  color-scheme: light;
  /* Colores */
  --fondo:  #FBF8F2;   /* blanco roto (fondo de las tarjetas) */
  --panel:  #FFFFFF;   /* tarjetas y superficies */
  --tinta:  #335C47;   /* verde bosque: texto fuerte, botones, burbujas */
  --suave:  #423F3A;   /* gris cálido: texto corriente */
  --acento: #A84C18;   /* tostado profundo: enlaces, iconos, palabra destacada */
  --verde:  #2E7A4E;   /* verde de datos: precios */
  --linea:  #E6DCCD;   /* bordes y separadores */
  --circulo: #F1E6D8;  /* círculos de iconos */
  --logo:   #D2601F;   /* naranja tostado: solo logo */
  --barra:  linear-gradient(90deg, #D2601F, #BD561B 50%, #A84C18);
  --titular:    #23402F; /* titulares de sección y nombre ACROS */
  --subtitular: #23402F; /* subtítulos de sección */
  --burbuja-asesor: #F1E6D8;
  --burbuja-asesor-texto: #23402F;
  --burbuja-cliente: #335C47;
  --burbuja-cliente-texto: #FBF8F2;
  --acento-solido: #335C47; /* fondos sólidos con texto claro encima */

  /* Tipografía */
  --f-display: 'Spectral', Georgia, 'Times New Roman', serif;            /* titulares y marca */
  --f-cuerpo:  'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif; /* texto */
  --f-dato:    ui-monospace, 'SF Mono', Consolas, monospace;             /* precios y datos */

  /* Formas y sombras */
  --radio:         14px;
  --radio-tarjeta: 18px;
  --sombra:        0 6px 18px rgba(66,52,36,.08);
  --sombra-alta:   0 14px 34px rgba(66,52,36,.16);

  /* Botones */
  --boton-primario-fondo:   #335C47;
  --boton-primario-texto:   #FBF8F2;
  --boton-primario-hover:   #2A4D3B;
  --boton-secundario-borde: var(--linea);
  --boton-radio:            var(--radio);
  --boton-peso:             700;
}

/* ---------- Modo oscuro: fondo verde casi negro, superficies verde
   bosque, texto blanco roto, acento arena tostada; botón principal en
   crema con letra verde (el verde no se vería sobre este fondo). ---------- */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo:  #0A1610; --panel:  #1F3428; --tinta:  #F2ECE1; --suave:  #CFC6B8;
  --acento: #D9A066; --verde:  #6CCB94; --linea:  #3A5245;
  --circulo: #2C4436; --logo: #E07434;
  --titular: #F2ECE1; --subtitular: #CFC6B8;
  --burbuja-asesor: #F1E6D8; --burbuja-asesor-texto: #032617;
  --burbuja-cliente: #B5561E; --burbuja-cliente-texto: #FFFFFF;
  --acento-solido: #B5561E;
  --boton-primario-fondo: #F1E6D8; --boton-primario-texto: #032617;
  --boton-primario-hover: #FBF8F2;
}

/* ---------- Barra de las tarjetas como remate de la cabecera ---------- */
.cabecera::before { content: ''; display: block; height: 3px; background: var(--barra); }

/* ---------- Logo: montaña en naranja tostado + «ACROS» en Spectral. La
   montaña sale de marca/logo.svg (acros_marca.js); si no está, se ve la
   provisional dibujada en cada página. ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); text-decoration: none; color: inherit; }
.logo-marca { width: 34px; height: 30px; flex: none; display: grid; place-items: center; color: var(--logo); }
.logo-marca svg, .logo-marca img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-marca svg { fill: currentColor; }
.logo-nombre { font-size: 22px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--titular); }
@media (max-width: 360px) { .logo-nombre { font-size: 20px; letter-spacing: .1em; } }