/* Identidad de marca de Juan Martitegui sobre la plantilla original (styles.css).
   Fuente: marketing/brand/DESIGN.md (Brand Lock aprobado) y el Brandbook.
   Paleta: negro cálido #1D1D1A (base), azul petróleo #29313D (tarjeta),
   champagne #C1A683 (acento), crema #EFEBDF (texto). Montserrat 400/600.
   Nunca naranja ni rojizo. */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-latin-var.woff2') format('woff2-variations'),
         url('../fonts/Montserrat-latin-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Fallback';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Fallback';
    src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

:root {
    --jm-black: #1D1D1A;
    --jm-petrol: #29313D;
    --jm-champagne: #C1A683;
    --jm-cream: #EFEBDF;
    --jm-cream-soft: rgba(239, 235, 223, 0.74);
    --jm-cream-line: rgba(239, 235, 223, 0.12);
    --jm-font: 'Montserrat', 'Montserrat Fallback', -apple-system, 'Segoe UI', sans-serif;
}

html,
body {
    background-color: var(--jm-black);
}

/* Fondo: la misma foto de escenario del sitio, bajo un velo negro cálido (luz dramática) */
body:before {
    background-image: linear-gradient(90deg, rgba(29, 29, 26, 0.94) 0%, rgba(29, 29, 26, 0.78) 55%, rgba(29, 29, 26, 0.9) 100%), url('../images/bg.jpg');
    background-size: cover, cover;
    background-position: center, top left;
    background-repeat: no-repeat, no-repeat;
    background-color: var(--jm-black);
    filter: grayscale(0.35);
}

body:after {
    background-color: var(--jm-black);
}

/* Tarjeta: petróleo liso, sin sombra ni radios, con la franja champagne del Brandbook */
#container01 {
    background-image: none;
    background-color: var(--jm-petrol);
    border-radius: 0;
    box-shadow: none;
    border-bottom: solid 0.5rem var(--jm-champagne);
}

#container01 > .wrapper > .inner {
    border-radius: 0;
}

/* Foto en círculo con borde champagne */
#image01 .frame {
    border-color: var(--jm-champagne);
    width: 6.5rem;
}

#image01 .frame img {
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}

/* Nombre: logo oficial */
#text02 {
    font-family: var(--jm-font);
    font-weight: 600;
    color: var(--jm-cream);
    font-size: 1em;
    line-height: 0;
}

#text02 .brand-logo {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: auto;
}

#text03 {
    color: var(--jm-champagne);
    font-family: var(--jm-font);
    font-weight: 600;
    font-size: 0.72em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#text01 {
    color: var(--jm-cream-soft);
    font-family: var(--jm-font);
    font-weight: 400;
    font-size: 0.95em;
}

#text01 strong {
    color: var(--jm-cream);
    font-weight: 600;
}

#text01 .big-idea {
    color: var(--jm-cream);
    font-weight: 600;
}

#text01 a {
    color: var(--jm-champagne);
}

#text01 a:hover {
    color: var(--jm-cream);
}

.current-work {
    border-bottom-color: var(--jm-cream-line);
    border-top-color: var(--jm-cream-line);
}

.work-row {
    border-top-color: var(--jm-cream-line);
}

.work-label {
    color: var(--jm-cream);
    font-family: var(--jm-font);
    font-weight: 600;
}

a.work-row .work-label {
    color: var(--jm-champagne);
}

.work-copy {
    color: var(--jm-cream-soft);
    font-family: var(--jm-font);
    font-weight: 400;
}

.discovery-links a {
    border-color: rgba(193, 166, 131, 0.45);
    border-radius: 0;
    color: var(--jm-champagne);
    font-family: var(--jm-font);
    font-weight: 600;
}

.discovery-links a:hover {
    background-color: rgba(193, 166, 131, 0.12);
    border-color: var(--jm-champagne);
    color: var(--jm-cream);
}

hr.style1:before {
    background-color: var(--jm-cream-line);
}

#icons01 a {
    border-color: var(--jm-cream);
}

#icons01 a svg {
    fill: var(--jm-cream);
}

#icons01 li a:hover {
    border-color: var(--jm-champagne);
}

#icons01 li a:hover svg {
    fill: var(--jm-champagne);
}

@media (max-width: 736px) {
    #text02 .brand-logo {
        margin: 0 auto;
        max-width: 17rem;
    }
}