/* =========================================================
   Joan de la Casa — Sistema de diseño
   Piedra caliza · Granate · Verde viña · Azul mediterráneo
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
    --piedra: #EDE8DE;
    --piedra-clara: #F7F4EC;
    --tinta: #2B2A26;
    --tinta-suave: #56534B;
    --vino: #6E1423;
    --vino-oscuro: #4B0D18;
    --verde-vina: #5B6B4F;
    --mar: #2E4756;
    --borde: #DBD4C4;
    --blanco: #FFFDF9;

    --fuente-display: 'Fraunces', serif;
    --fuente-cuerpo: 'Inter', sans-serif;
    --fuente-dato: 'Space Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--piedra);
    color: var(--tinta);
    font-family: var(--fuente-cuerpo);
    font-size: 16px;
    line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--fuente-display);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 400; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3 { font-size: 1.3rem; }

.eyebrow {
    font-family: var(--fuente-dato);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    color: var(--vino);
    display: inline-block;
    margin-bottom: 0.8em;
}

.contenedor {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.seccion { padding: 80px 0; }
.seccion--estrecha { padding: 56px 0; }

@media (max-width: 640px) {
    .seccion { padding: 56px 0; }
}

/* ---------- Botones ---------- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 2px;
    text-decoration: none;
    font-family: var(--fuente-dato);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: normal;
    text-align: center;
    max-width: 100%;
}

.boton--vino { background: var(--vino); color: var(--blanco); }
.boton--vino:hover { background: var(--vino-oscuro); }

.boton--linea {
    border-color: var(--tinta);
    color: var(--tinta);
    background: transparent;
}
.boton--linea:hover { background: var(--tinta); color: var(--blanco); }

.boton--linea-clara {
    border-color: rgba(255,255,255,0.7);
    color: var(--blanco);
    background: transparent;
}
.boton--linea-clara:hover { background: var(--blanco); color: var(--tinta); }

/* ---------- Cabecera ---------- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(237, 232, 222, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--borde);
}

.barra-superior {
    background: var(--tinta);
    color: var(--piedra-clara);
    font-family: var(--fuente-dato);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

.barra-superior .contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.idiomas { display: flex; gap: 10px; }
.idiomas a { text-decoration: none; opacity: 0.65; }
.idiomas a.activo, .idiomas a:hover { opacity: 1; }

.nav-principal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo__imagen {
    height: 86px;
    width: auto;
    /* Funde el fondo blanco del PNG con el fondo de la cabecera,
       dejando visible solo el trazo del logo */
    mix-blend-mode: multiply;
}

@media (max-width: 640px) {
    .logo__imagen { height: 62px; }
}

.menu {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
    font-size: 0.92rem;
}

.menu a {
    text-decoration: none;
    color: var(--tinta);
    position: relative;
    padding-bottom: 4px;
}

.menu a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--vino);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s ease;
}
.menu a:hover::after, .menu a.activo::after { transform: scaleX(1); transform-origin: left; }
.menu a.activo { color: var(--vino); }

.boton-menu-movil {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}
.boton-menu-movil span { width: 24px; height: 2px; background: var(--tinta); display: block; }

@media (max-width: 860px) {
    .menu {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--piedra-clara);
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid var(--borde);
    }
    .menu.abierto { display: flex; }
    .menu a { display: block; padding: 14px 24px; border-bottom: 1px solid var(--borde); }
    .boton-menu-movil { display: flex; }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 8;
    min-height: 260px;
    max-height: 560px;
    display: flex;
    align-items: center;
    color: var(--blanco);
    overflow: hidden;
}

@media (max-width: 640px) {
    .hero { aspect-ratio: 4 / 3; min-height: 300px; max-height: 420px; }
}

.hero__fondo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: crucesHero 18s infinite;
}
.hero__fondo:nth-child(1) { animation-delay: 0s; background-position: center 30%; }   /* viña/montañas */
.hero__fondo:nth-child(2) { animation-delay: 6s; background-position: center top; }   /* corcho/botella */
.hero__fondo:nth-child(3) { animation-delay: 12s; background-position: center 65%; }  /* hojas de viña */

@keyframes crucesHero {
    0%   { opacity: 0; }
    3%   { opacity: 1; }
    30%  { opacity: 1; }
    36%  { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__fondo { animation: none; opacity: 0; }
    .hero__fondo:first-child { opacity: 1; }
}

.hero__sello {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 84px;
    opacity: 0.92;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
@media (max-width: 640px) { .hero__sello { width: 60px; bottom: 16px; right: 16px; } }

.hero__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(43,42,38,0.78) 0%, rgba(43,42,38,0.38) 55%, rgba(43,42,38,0.15) 100%);
}

.hero__contenido { position: relative; max-width: 640px; }
.hero__contenido .eyebrow { color: #E8C9A0; }

/* Franja de contenido bajo la foto: aquí vive el texto largo y los botones,
   para que la foto no tenga que estirarse para hacerles sitio */
.hero-barra {
    background: var(--tinta);
    color: var(--piedra-clara);
    padding: 28px 0;
}

.hero-barra__interior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.hero-barra p {
    margin: 0;
    max-width: 560px;
    color: rgba(247,244,236,0.85);
    font-size: 1rem;
}

.hero-barra__acciones { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 640px) {
    .hero-barra__interior { flex-direction: column; align-items: stretch; text-align: left; }
    .hero-barra__acciones { flex-direction: column; align-items: stretch; }
}

/* Franja de contorno tipo curva de nivel, referencia a los suelos calizos */
.hero__contorno {
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 60px;
    background: var(--piedra);
    clip-path: polygon(0 100%, 0 40%, 8% 55%, 18% 30%, 30% 50%, 42% 20%, 55% 45%, 68% 15%, 80% 40%, 92% 10%, 100% 35%, 100% 100%);
}

/* ---------- Proceso (Campo / Recolección / Elaboración) ---------- */
.proceso {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 48px;
}
@media (max-width: 760px) { .proceso { grid-template-columns: 1fr; gap: 32px; } }

.proceso__item { border-top: 1px solid var(--tinta); padding-top: 18px; }
.proceso__numero {
    font-family: var(--fuente-dato);
    font-size: 0.8rem;
    color: var(--vino);
    display: block;
    margin-bottom: 10px;
}
.proceso__item h3 { margin-bottom: 8px; }
.proceso__item p { color: var(--tinta-suave); font-size: 0.95rem; margin: 0; }

/* ---------- Tarjeta de vino tipo "ficha técnica" ---------- */
.rejilla-vinos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 40px;
}
@media (max-width: 940px) { .rejilla-vinos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rejilla-vinos { grid-template-columns: 1fr; } }

.tarjeta-vino {
    background: var(--piedra-clara);
    border: 1px solid var(--borde);
    text-decoration: none;
    color: var(--tinta);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tarjeta-vino:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(43,42,38,0.14); }

.tarjeta-vino__imagen {
    aspect-ratio: 3/4;
    background: var(--tinta);
    overflow: hidden;
}
.tarjeta-vino__imagen img { width: 100%; height: 100%; object-fit: cover; }

.tarjeta-vino__cuerpo { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.tarjeta-vino__etiqueta {
    font-family: var(--fuente-dato);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--verde-vina);
}

.tarjeta-vino__cuerpo h3 { margin: 0; }
.tarjeta-vino__cuerpo p { margin: 0; font-size: 0.88rem; color: var(--tinta-suave); flex: 1; }

.tarjeta-vino__ficha {
    display: flex;
    justify-content: space-between;
    font-family: var(--fuente-dato);
    font-size: 0.72rem;
    color: var(--tinta-suave);
    border-top: 1px dashed var(--borde);
    padding-top: 10px;
    margin-top: 6px;
}

/* Filtros de la página de vinos */
.filtros-vinos {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
}
.filtro {
    font-family: var(--fuente-dato);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 16px;
    border: 1px solid var(--vino);
    background: transparent;
    cursor: pointer;
    color: var(--vino);
}
.filtro.activo, .filtro:hover { background: var(--vino); color: var(--blanco); border-color: var(--vino); }

/* ---------- Sección oscura (reconocimientos / cita) ---------- */
.seccion-oscura {
    background: var(--tinta);
    color: var(--piedra-clara);
}
.seccion-oscura .eyebrow { color: #E8C9A0; }

.cita {
    font-family: var(--fuente-display);
    font-style: italic;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    max-width: 760px;
    line-height: 1.4;
}

/* ---------- Ficha de vino individual ---------- */
.ficha-vino {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: start;
}
@media (max-width: 860px) { .ficha-vino { grid-template-columns: 1fr; gap: 32px; } }

.ficha-vino__imagen { background: var(--tinta); }
.ficha-vino__imagen img { width: 100%; }

.ficha-vino__specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
    margin: 28px 0;
    padding: 20px 0;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    font-family: var(--fuente-dato);
    font-size: 0.82rem;
}
.ficha-vino__specs dt { color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; }
.ficha-vino__specs dd { margin: 2px 0 0; }

.ficha-vino__bloque { margin-bottom: 22px; }
.ficha-vino__bloque h4 {
    font-family: var(--fuente-dato);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vino);
    margin-bottom: 6px;
}
.ficha-vino__bloque p { margin: 0; color: var(--tinta-suave); }

/* ---------- Cabecera de página interior (no es hero, es más sencilla) ---------- */
.cabecera-pagina {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 260px;
    display: flex;
    align-items: center;
    color: var(--blanco);
    overflow: hidden;
}
.cabecera-pagina__velo {
    position: absolute;
    inset: 0;
    background: rgba(43,42,38,0.62);
}
.cabecera-pagina__contenido { position: relative; }
.cabecera-pagina .eyebrow { color: #E8C9A0; }
.cabecera-pagina h1 { margin: 0; }

/* ---------- Bloques de contenido para páginas de texto ---------- */
.bloque-texto { max-width: 720px; }
.bloque-texto p { color: var(--tinta-suave); margin-bottom: 1.1em; }
.bloque-texto p:last-child { margin-bottom: 0; }

.datos-rapidos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--borde);
}
@media (max-width: 700px) { .datos-rapidos { grid-template-columns: 1fr; } }
.datos-rapidos dt {
    font-family: var(--fuente-dato);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vino);
    margin-bottom: 6px;
}
.datos-rapidos dd { margin: 0; color: var(--tinta-suave); font-size: 0.95rem; }

.dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; gap: 32px; } }
.dos-columnas img { width: 100%; border-radius: 2px; }

/* Bloques alternados foto + texto (página Quiénes somos) */
.bloque-historia {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--borde);
}
.bloque-historia:first-of-type { border-top: none; padding-top: 24px; margin-top: 24px; }
.bloque-historia img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--borde);
}
.bloque-historia p { margin: 0; color: var(--tinta-suave); font-size: 1.02rem; }
.bloque-historia--invertido { grid-template-columns: 1fr 220px; }
.bloque-historia--invertido img { order: 2; }
.bloque-historia--invertido p { order: 1; }

@media (max-width: 640px) {
    .bloque-historia, .bloque-historia--invertido { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .bloque-historia--invertido img, .bloque-historia--invertido p { order: initial; }
}

/* Galería de fotos (Entorno, Filosofía) */
.galeria-fotos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}
.galeria-fotos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
}
@media (max-width: 700px) { .galeria-fotos { grid-template-columns: repeat(2, 1fr); } }

/* Mapa en la página de Contacto */
.mapa-contacto {
    width: 100%;
    aspect-ratio: 16 / 6;
    max-height: 420px;
    border: 0;
    filter: grayscale(15%);
}
@media (max-width: 640px) { .mapa-contacto { aspect-ratio: 4 / 3; max-height: 320px; } }

/* ---------- Formulario de contacto ---------- */
.formulario-contacto {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 560px;
}
.formulario-contacto label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--fuente-dato);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tinta-suave);
}
.formulario-contacto input,
.formulario-contacto textarea {
    padding: 12px 14px;
    border: 1px solid var(--borde);
    background: var(--piedra-clara);
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    color: var(--tinta);
}
.formulario-contacto input:focus,
.formulario-contacto textarea:focus { outline: 2px solid var(--vino); outline-offset: 1px; }

.tarjeta-contacto {
    background: var(--piedra-clara);
    border: 1px solid var(--borde);
    padding: 28px;
}
.tarjeta-contacto h3 { margin-bottom: 16px; }
.tarjeta-contacto ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.tarjeta-contacto a { text-decoration: none; color: var(--tinta); }
.tarjeta-contacto a:hover { color: var(--vino); }
.tarjeta-contacto .eyebrow { display: block; margin-bottom: 2px; }


.pie {
    background: var(--tinta);
    color: var(--piedra-clara);
    padding: 64px 0 28px;
}

.pie__rejilla {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
@media (max-width: 780px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pie__rejilla { grid-template-columns: 1fr; } }

.pie h4 {
    font-family: var(--fuente-dato);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #C9A66B;
    margin-bottom: 16px;
}
.pie p, .pie a { color: rgba(247,244,236,0.75); font-size: 0.9rem; text-decoration: none; }
.pie a:hover { color: var(--piedra-clara); }
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.pie__logo { font-family: var(--fuente-display); font-size: 1.3rem; color: var(--piedra-clara); }

.formulario-newsletter { display: flex; margin-top: 10px; max-width: 320px; }
.formulario-newsletter input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(247,244,236,0.3);
    background: transparent;
    color: var(--piedra-clara);
    font-family: inherit;
}
.formulario-newsletter button {
    background: var(--vino);
    color: var(--blanco);
    border: none;
    padding: 0 16px;
    cursor: pointer;
    font-family: var(--fuente-dato);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.pie__inferior {
    border-top: 1px solid rgba(247,244,236,0.15);
    margin-top: 48px;
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.78rem;
    color: rgba(247,244,236,0.55);
}
.pie__inferior a { color: rgba(247,244,236,0.55); }

/* Accesibilidad: foco visible */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--vino);
    outline-offset: 2px;
}

.visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}