/* =====================================================================
   MARCA: COLORES, TIPOGRAFÍA Y LOGO
   ---------------------------------------------------------------------
   Este es el ÚNICO archivo donde se cambian los colores de la marca.
   La tienda (index.html) y el panel (admin.html) lo usan los dos.
   Cambia solo los valores de la derecha (por ejemplo #D7A244).
   Los números "-rgb" son el mismo color escrito como R,G,B (sin #).
   El logo se cambia reemplazando logo.png y favicon.png en esta carpeta.
   ===================================================================== */
/* Tipografías (archivos en la carpeta fonts) */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/jost-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/jost-latin-500-normal.woff2') format('woff2'); }

:root {
  /* ----- Color de acento: botones, líneas y detalles ----- */
  --accent: #D7A244;
  --accent-rgb: 215,162,68;
  --accent-light: #E8C27A;       /* acento más claro (títulos pequeños, enlaces) */
  --accent-hover: #E6B85F;       /* acento al pasar el mouse */
  --accent-dark-rgb: 139,103,77; /* resplandor suave del fondo */
  --accent-deep: #7A5718;         /* acento oscuro (texto sobre fondo claro) */
  --on-accent: #0A0805;             /* color del texto encima de botones de acento */

  /* ----- Fondos ----- */
  --black: #050505;                     /* fondo principal */
  --black-rgb: 5,5,5;
  --dark: #080E1E;                       /* fondo de secciones y tarjetas */
  --dark-rgb: 8,14,30;
  --dark2: #0F1A33;                     /* fondo de campos y elementos elevados */
  --panel-hover: #17254A;

  /* ----- Textos ----- */
  --white: #F5ECE7;                     /* texto principal */
  --white-rgb: 245,236,231;
  --silver: #E3D3C4;                   /* precios y texto secundario */

  /* ----- Estados (normalmente no se tocan) ----- */
  --ok: #1f8f63;
  --bien: #3fb98a;
  --alerta: #e0a93b;
  --mal: #e8786f;

  /* ----- Tipografía ----- */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', Arial, Helvetica, sans-serif;

  /* ----- Logo y fotos ----- */
  --logo-radius: 0;         /* 50% = logo redondo, 0 = logo sin recorte */
  --logo-shadow: none;         /* resplandor del logo en la portada */
  --logo-filter: drop-shadow(0 0 26px rgba(var(--accent-rgb), .22));
  --hero-logo-w: 300px;         /* ancho máximo del logo en la portada */
  --ratio-foto: 1/1;           /* forma de las fotos: 1/1 cuadrada, 4/5 vertical */

  /* ----- Derivados para el panel de administración (no tocar) ----- */
  --bg: var(--black);
  --panel: var(--dark);
  --panel2: var(--dark2);
  --hair: rgba(var(--accent-rgb), .18);
  --ink: var(--white);
  --ink-strong: var(--white);
  --ink2: rgba(var(--white-rgb), .74);
  --muted: rgba(var(--white-rgb), .54);
  --serie: var(--accent);
  --tip-bg: var(--panel-hover);
  --toggle-off: rgba(var(--white-rgb), .22);
  --r-card: 12px;
  --r-ctl: 7px;
}