/* ============================================================
   MARCA — todo lo visual del cliente en un solo lugar.
   Cambie estos valores y la aplicación entera cambia con ellos.

   Esta version es la interfaz clara: fondo blanco, texto negro
   suave y rojo oscuro de acento en iconos y acciones.
   ============================================================ */

/* ---------- Tipografías ----------
   Una sola familia (Roboto) en tres pesos: 300 para textos
   largos, 400 para la interfaz y 700 para titulares. */
@font-face{font-family:'Roboto';src:url('../assets/fonts/Roboto-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Roboto';src:url('../assets/fonts/Roboto-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto';src:url('../assets/fonts/Roboto-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  /* ---------- Superficies ---------- */
  --fondo:#F2F4F7;        /* fondo general de la aplicación */
  --panel:#FFFFFF;        /* tarjetas y barras */
  --panel-2:#F8F9FB;      /* relleno suave dentro de una tarjeta */
  --oscuro:#15181D;       /* placas oscuras: logos de clientes, visores */
  --oscuro-2:#22262E;

  /* ---------- Líneas ---------- */
  --borde:#E5E8ED;
  --borde-2:#CFD5DE;

  /* ---------- Texto ---------- */
  --txt:#22262E;          /* negro suave, no absoluto */
  --txt-2:#59616F;
  --txt-3:#8D96A5;
  --txt-inv:#FFFFFF;

  /* ---------- Acento: rojo oscuro de Show Render ---------- */
  --acc:#8E1116;          /* iconos, subrayados, énfasis */
  --acc-hi:#B0151D;       /* hover y estados activos */
  --acc-suave:#FBEDEE;    /* fondo de pastillas y avisos */
  --rojo:#E31017;         /* rojo vivo del logotipo */
  --wa:#22B95A;           /* verde de WhatsApp */

  /* ---------- Escena 3D clara ----------
     Fondo del visor y de las vistas inmersivas. */
  --escena:#C3D3F7;

  /* ---------- Tipografía ---------- */
  --body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ttl:var(--body);
  --sub:var(--body);

  /* ---------- Formas ---------- */
  --r-s:12px;             /* radio pequeño: pastillas, miniaturas */
  --r:18px;               /* radio normal: tarjetas */
  --r-l:26px;             /* radio grande: héroe y visores */
  --sombra:0 1px 2px rgba(20,24,31,.05), 0 10px 28px rgba(20,24,31,.07);
  --sombra-alta:0 2px 6px rgba(20,24,31,.07), 0 20px 48px rgba(20,24,31,.13);

  /* ---------- Medidas ---------- */
  --maxw:1500px;
  --barra:66px;           /* alto de la barra superior */
  --tabs:64px;            /* alto de la barra inferior de pestañas */
  --st:env(safe-area-inset-top,0px);
  --sb:env(safe-area-inset-bottom,0px);
}