/*=====================================
    MARCA JOYERÍA LAS AMÉRICAS
    Paleta compartida por todas las páginas del sitio de la joyería
    (joyeria.html, articulos-en-venta.html, contacto-joyeria.html).
    Se carga después de styles.css y layout.css.
======================================*/


/*=====================================
    PALETA DE JOYERÍA LAS AMÉRICAS
    Tomada del logo: gris carbón, dorado, marfil y el turquesa del
    diamante. Reemplaza el azul y el rojo de Compraventa Antonio en
    toda la página (header, footer y componentes compartidos).
======================================*/

body[data-marca="joyeria"] {
    --color-primary: #2E2E30;          /* carbón: letras del logo */
    --color-primary-dark: #1F1F21;
    --color-primary-darker: #141416;
    --color-primary-light: #48484B;
    --color-primary-soft: #F4F1EA;

    --color-secondary: #9A7322;        /* dorado del anillo (legible sobre blanco) */
    --color-secondary-dark: #7E5E1B;
    --color-secondary-soft: #F6EEDC;
    --color-secondary-on-dark: #F0C078; /* dorado claro sobre fondos oscuros */

    --color-acento: #18A8C0;           /* turquesa del diamante */

    --color-text: #222224;
    --color-text-muted: #66615A;
    --color-bg-alt: #F8F5EE;           /* marfil */
    --color-border: #ECE5D8;

    --shadow-sm: 0 4px 14px rgba(20, 20, 22, 0.07);
    --shadow-md: 0 12px 30px rgba(20, 20, 22, 0.12);
    --shadow-lg: 0 22px 50px rgba(20, 20, 22, 0.2);

    /* Franjas del logo en dorado (en :root se calculan con el rojo) */
    --stripes-light: repeating-linear-gradient(
        to bottom,
        var(--color-secondary) 0 4px,
        var(--color-white) 4px 7px
    );

    /* Color del metal Plata */
    --color-plata: #6E737B;

    /* Oro de "Nueva selección" */
    --color-nuevo: #9A7322;
    --color-nuevo-brillo: linear-gradient(135deg, #C9982F 0%, #9A7322 55%, #7E5E1B 100%);

    /* Beige de los botones "Consultar" */
    --color-beige: #eadbc0;
    --color-beige-hover: #ddc7a0;
    --color-beige-borde: #d6c19b;
}

/* Brillos que en los estilos compartidos son rojos o azules */
body[data-marca="joyeria"] .btn-brand--secondary {
    box-shadow: 0 8px 20px rgba(154, 115, 34, 0.3);
}

body[data-marca="joyeria"] .btn-brand--secondary:hover {
    box-shadow: 0 12px 26px rgba(154, 115, 34, 0.4);
}

body[data-marca="joyeria"] .page-hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(240, 192, 120, 0.25), transparent 42%),
        radial-gradient(circle at 10% 90%, rgba(72, 72, 75, 0.8), transparent 50%),
        linear-gradient(125deg, var(--color-primary-darker) 0%, var(--color-primary) 55%, var(--color-primary-light) 100%);
}