/* ===================================================================
   Todo Rioja — hoja de estilos
   Paleta: crema / borgoña / negro suave. Editorial, catálogo curado.
   =================================================================== */

/* --- Tipografías auto-alojadas (Montserrat + Playfair Display) --- */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/css/fonts/montserrat-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/css/fonts/montserrat-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/css/fonts/playfair-display-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/css/fonts/playfair-display-italic.woff2') format('woff2');
}

/* --- Variables --- */
:root {
    --color-crema: #F7F1E6;
    --color-crema-suave: #FBF8F2;
    --color-vino: #6E1E2C;
    --color-vino-oscuro: #4A1420;
    --color-negro-suave: #211C18;
    --color-texto: #2B2622;
    --color-texto-suave: #5B5347;
    --color-borde: #E3D9C6;

    --font-titulo: 'Playfair Display', Georgia, serif;
    --font-texto: 'Montserrat', -apple-system, sans-serif;

    --radio: 4px;
    --sombra: 0 2px 12px rgba(33, 28, 24, 0.08);
    --ancho-maximo: 1180px;
}

/* --- Reset base --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-texto);
    color: var(--color-texto);
    background-color: var(--color-crema);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-titulo); font-weight: 600; color: var(--color-negro-suave); margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

/* --- Cabecera --- */
.site-header {
    background-color: var(--color-crema-suave);
    border-bottom: 1px solid var(--color-borde);
}
.site-header__inner {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 1.5rem 1.5rem;
}
.site-header__logo {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
}
.site-header__logo-main {
    font-family: var(--font-titulo);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-vino);
}
.site-header__logo-sub {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
}

/* --- Intro (home) --- */
.intro {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 3.5rem 1.5rem 2rem;
    text-align: center;
}
.intro__titulo {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    margin-bottom: 0.6em;
}
.intro__texto {
    max-width: 640px;
    margin: 0 auto;
    color: var(--color-texto-suave);
    font-size: 1.05rem;
}

/* --- Grid de vinos --- */
.grid-vinos {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 1rem 1.5rem 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2rem;
}

.tarjeta-vino {
    display: flex;
    flex-direction: column;
    background-color: var(--color-crema-suave);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tarjeta-vino:hover,
.tarjeta-vino:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--sombra);
}
.tarjeta-vino__foto {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: #fff;
}
.tarjeta-vino__foto img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}
.tarjeta-vino__info {
    padding: 1rem 1.25rem 1.5rem;
    text-align: center;
}
.tarjeta-vino__nombre {
    font-size: 1.05rem;
    margin-bottom: 0.15em;
}
.tarjeta-vino__bodega {
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    margin-bottom: 0.5em;
}
.tarjeta-vino__gancho {
    font-family: var(--font-titulo);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--color-vino-oscuro);
    margin-bottom: 0.7em;
}
.tarjeta-vino__precio {
    font-weight: 600;
    color: var(--color-vino);
    margin-bottom: 0;
}

/* --- Ficha individual de vino --- */
.ficha-vino {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: 3.5rem;
    align-items: start;
}
.ficha-vino--404 {
    display: block;
    text-align: center;
    padding-top: 5rem;
}
.ficha-vino__foto {
    background-color: #fff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 2.5rem;
    position: sticky;
    top: 2rem;
}
.ficha-vino__bodega {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: var(--color-texto-suave);
    margin-bottom: 0.3em;
}
.ficha-vino__nombre {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 0.3em;
}
.ficha-vino__precio {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-vino);
    margin-bottom: 1.2em;
}

.ficha-vino__accion {
    margin-bottom: 2.5em;
}
.boton-comprar {
    display: inline-block;
    background-color: var(--color-vino);
    color: var(--color-crema-suave);
    font-weight: 600;
    padding: 0.9rem 2.2rem;
    border-radius: var(--radio);
    transition: background-color 0.2s ease;
}
.boton-comprar:hover,
.boton-comprar:focus-visible {
    background-color: var(--color-vino-oscuro);
}

.ficha-vino__datos {
    display: flex;
    gap: 2.5rem;
    margin: 0 0 2.5em;
    padding-bottom: 2em;
    border-bottom: 1px solid var(--color-borde);
}
.ficha-vino__datos dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-texto-suave);
    margin-bottom: 0.3em;
}
.ficha-vino__datos dd {
    margin: 0;
    font-weight: 500;
}

.notas-cata, .ficha-vino__seccion, .puntuaciones {
    margin-bottom: 2.5em;
}
.notas-cata h2, .ficha-vino__seccion h2, .puntuaciones h2 {
    font-size: 1.3rem;
    margin-bottom: 0.7em;
}
.notas-cata__concepto {
    font-family: var(--font-titulo);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--color-vino-oscuro);
    border-left: 3px solid var(--color-vino);
    padding-left: 1rem;
    margin-bottom: 1.5em;
}
.notas-cata__bloque {
    margin-bottom: 1em;
}
.notas-cata__bloque h3 {
    font-family: var(--font-texto);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-vino);
    font-weight: 600;
    margin-bottom: 0.2em;
}
.notas-cata__bloque p {
    margin-bottom: 0;
    color: var(--color-texto);
}

.puntuaciones__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.puntuaciones__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-crema-suave);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 0.75rem 1.25rem;
    min-width: 84px;
}
.puntuaciones__critico {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-texto-suave);
}
.puntuaciones__puntos {
    font-family: var(--font-titulo);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-vino);
}

/* --- Pie de página --- */
.site-footer {
    background-color: var(--color-negro-suave);
    color: var(--color-crema);
    margin-top: 2rem;
}
.site-footer__inner {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 2rem 1.5rem;
    text-align: center;
}
.site-footer__inner p {
    margin-bottom: 0.4em;
    font-size: 0.9rem;
    color: #D8CFC0;
}
.site-footer__inner a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.site-footer__inner a:hover,
.site-footer__inner a:focus-visible {
    color: #fff;
}
.site-footer__legal {
    font-size: 0.78rem;
    color: #94897A;
}
.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1rem;
}
.site-footer__nav a {
    font-size: 0.82rem;
}
.site-footer__edad {
    font-size: 0.72rem;
    color: #7A7062;
    margin-top: 0.6em;
    margin-bottom: 0;
}

/* --- Páginas legales --- */
.pagina-legal {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}
.pagina-legal h1 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin-bottom: 0.8em;
}
.pagina-legal h2 {
    font-size: 1.15rem;
    margin-top: 1.8em;
}
.pagina-legal p {
    color: var(--color-texto);
}
.pagina-legal__lista {
    margin-bottom: 1em;
}
.pagina-legal__lista li {
    margin-bottom: 0.3em;
}

/* --- Nota de afiliación en ficha de vino --- */
.ficha-vino__nota-afiliado {
    font-size: 0.78rem;
    color: var(--color-texto-suave);
    margin: 0.6em 0 0;
}
.ficha-vino__nota-afiliado a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Responsive --- */
@media (max-width: 800px) {
    .ficha-vino {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-top: 2rem;
    }
    .ficha-vino__foto {
        position: static;
        max-width: 320px;
        margin: 0 auto;
    }
    .ficha-vino__datos {
        gap: 1.5rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .grid-vinos {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1.2rem;
    }
    .tarjeta-vino__foto { padding: 1rem; }
}