:root {
  --cream: #F8F4EF;
  --dark: #3C3C3B;
  --nav-text: #373736;
  --violet: #52135A;
  --green: #3F5239;
  --white: #FFFFFF;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
  --wrap: 1296px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

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

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--dark);
  margin: 0 0 20px;
}

h1 { font-size: clamp(28px, 4.2vw, 45px); }
h2 { font-size: clamp(24px, 3.5vw, 45px); }

p { margin: 0 0 12px; }

a { color: inherit; }

/* Botones */
.btn {
  display: inline-block;
  padding: 11px 28px;
  font-family: var(--font-body);
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
.btn-violet { background: var(--violet); }
.btn-violet:hover, .btn-violet:active { background: var(--green); }
.btn-green { background: var(--green); }
.btn-green:hover, .btn-green:active { background: var(--violet); }

/* Botón grande de mayoristas (en Figma es mucho más grande que los demás) */
.btn-mayorista {
  font-size: 30px;
  padding: 16px 32px;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid rgba(60,60,59,.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  padding-bottom: 24px;
  /* En el Figma el logo y el menú se alinean con los bordes de las fotos del hero/historia
     (1296px), no con el padding de .wrap: se suma ese padding al ancho máximo */
  max-width: calc(var(--wrap) + 48px);
}
.logo img { height: 61px; width: auto; }

.nav {
  display: flex;
  gap: 40px;
}
.nav a {
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-transform: capitalize;
  color: var(--nav-text);
  transition: color .15s ease;
}
.nav a:hover { color: var(--violet); }

/* Compensa el header sticky (110px desktop, 128px mobile) al saltar a un ancla */
#historia, #modelos, #contacto { scroll-margin-top: 130px; }

/* ===== Hero ===== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 53.1fr) minmax(0, 46.9fr);
  gap: clamp(40px, 4.72vw, 68px);
  align-items: center;
  padding-top: 56px;
  padding-bottom: 0;
  max-width: var(--wrap);
  padding-left: 0;
  padding-right: 0;
}
.hero-media img,
.hero-media video { aspect-ratio: 1/1; object-fit: cover; width: 100%; display: block; }
.hero-copy p { font-size: 18px; }
.hero-copy strong { font-weight: 800; }
.hero-copy .btn { margin-top: 20px; }

/* ===== Nuestra historia ===== */
.historia {
  display: grid;
  grid-template-columns: minmax(0, 46.9fr) minmax(0, 53.1fr);
  gap: clamp(40px, 4.72vw, 68px);
  align-items: center;
  padding-top: 0;
  padding-bottom: 80px;
  max-width: var(--wrap);
  padding-left: 0;
  padding-right: 0;
}
.historia-media { order: 2; align-self: start; }
.historia-media img,
.historia-media video { aspect-ratio: 1/1; object-fit: cover; width: 100%; display: block; }
.historia-copy p { font-size: 18px; }

/* ===== Líneas de producto ===== */
.linea {
  padding-top: 48px;
  padding-bottom: 48px;
  text-align: center;
}
.linea h2 { text-align: center; text-transform: capitalize; }
.linea-sub {
  font-size: 18px;
  max-width: 900px;
  margin: 0 auto 40px;
}

.gallery {
  display: flex;
  gap: 32px;
  max-width: 1152px;
  margin: 0 auto;
}
.gallery-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1;
  min-width: 0;
}
.gallery-item {
  overflow: hidden;
  border-radius: 16px;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery-item:hover img { transform: scale(1.1); }

/* ===== Mayorista / restaurantes ===== */
.mayorista {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
}
.mayorista-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.mayorista::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(60,60,59,.4);
}
.mayorista-inner {
  position: relative;
  z-index: 1;
  padding-top: 48px;
  padding-bottom: 48px;
  text-align: center;
}
.mayorista h2 {
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 50px);
  max-width: 1000px;
  margin: 0 auto 32px;
}

/* ===== Carrusel ===== */
.carousel-section {
  position: relative;
  padding-top: 120px;
  padding-bottom: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  flex: 1;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item {
  flex: 0 0 calc(25% - 18px);
  scroll-snap-align: start;
  overflow: hidden;
  aspect-ratio: 280/347;
}
.carousel-item img { width: 100%; height: 100%; object-fit: cover; }
.carousel-arrow {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: var(--dark);
  cursor: pointer;
  padding: 8px 4px;
  flex-shrink: 0;
}
.carousel-arrow:hover { color: var(--violet); }

/* ===== Contacto ===== */
.contacto {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 96px;
}
.contacto h2 { text-align: center; }
.contacto p {
  font-size: 18px;
  font-weight: 500;
  max-width: 640px;
  margin: 0 auto 28px;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--dark);
  color: var(--white);
  padding-top: 48px;
  padding-bottom: 48px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
}
.footer-logo { width: 255px; height: auto; }
.footer-divider {
  width: 1px;
  align-self: stretch;
  min-height: 200px;
  background: rgba(255,255,255,.25);
}
.footer-social { text-align: left; }
.footer-social-label {
  display: block;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 6px;
}
.footer-social-handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 22px;
  text-decoration: none;
  color: var(--white);
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .hero, .historia {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: left;
    padding-left: 24px;
    padding-right: 24px;
  }
  .historia-media { order: 0; }
  .gallery { flex-direction: column; }
}

@media (max-width: 640px) {
  .header-inner {
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .logo img { height: 40px; }
  .nav { gap: 24px; flex-wrap: wrap; justify-content: center; }
  /* Figma mobile: menú a ~12px (las mayúsculas siguen a desktop, decidido con Laura 23/09) */
  .nav a { font-size: 12px; }

  .hero,
  .historia {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 24px;
  }
  .hero-media,
  .historia-media {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .hero-media img,
  .hero-media video,
  .historia-media img,
  .historia-media video { width: 100%; }
  .hero-copy,
  .historia-copy {
    width: 100%;
    max-width: 313px;
    margin: 0 auto;
  }
  .hero-copy { padding: 28px 0 32px; }
  .hero-copy h1 {
    font-size: clamp(18px, 5.25vw, 21px);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 18px;
  }
  .hero-copy p,
  .historia-copy p { font-size: 16px; line-height: 1.4; }
  .hero-copy .btn { display: block; width: 100%; margin-top: 16px; }
  .historia-copy { padding: 32px 0 64px; }
  .historia-copy h2 {
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 20px;
  }

  .linea { padding-top: 40px; padding-bottom: 40px; background: var(--white); }
  .gallery { width: 100%; max-width: 313px; }

  /* Línea Clásica mobile: empieza con la jarra roja con etiqueta y la violeta
     sirviendo vino (las dos fotos que el Figma destaca en el frame mobile),
     el resto sigue en un orden razonable. Los bloques abstractos que rellenan
     el resto del frame mobile son placeholder del diseñador (confirmado con
     Laura 2026-09-22) — no se reproducen, la galería sigue mostrando las
     mismas 7 fotos reales que en desktop, solo reordenadas. */
  .linea:first-of-type .gallery-col { display: contents; }
  .linea:first-of-type .gallery-col:nth-child(2) .gallery-item:nth-child(3) { order: 1; } /* roja con etiqueta */
  .linea:first-of-type .gallery-col:nth-child(3) .gallery-item:nth-child(1) { order: 2; } /* violeta sirviendo vino */
  .linea:first-of-type .gallery-col:nth-child(1) .gallery-item:nth-child(1) { order: 3; } /* naranja en mano */
  .linea:first-of-type .gallery-col:nth-child(1) .gallery-item:nth-child(2) { order: 4; } /* blanca corazón */
  .linea:first-of-type .gallery-col:nth-child(2) .gallery-item:nth-child(1) { order: 5; } /* gris con copa */
  .linea:first-of-type .gallery-col:nth-child(2) .gallery-item:nth-child(2) { order: 6; } /* violeta primer plano */
  .linea:first-of-type .gallery-col:nth-child(3) .gallery-item:nth-child(2) { order: 7; } /* blanca en mano */

  .mayorista {
    min-height: 180px;
  }
  .mayorista-bg {
    background-attachment: scroll;
    background-position: center 58%;
  }
  .mayorista-inner { padding-top: 24px; padding-bottom: 24px; }
  .mayorista h2 {
    max-width: 313px;
    font-size: 23px;
    line-height: 1.15;
    margin-bottom: 18px;
  }
  .btn-mayorista {
    width: 100%;
    max-width: 313px;
    padding: 12px 8px;
    font-size: 12px;
    white-space: nowrap;
  }

  .carousel-section { padding-top: 52px; }
  .carousel-item { flex: 0 0 100%; }
  .carousel-item:nth-child(1) { order: 2; }
  .carousel-item:nth-child(2) { order: 1; }
  .carousel-item:nth-child(3) { order: 3; }
  .carousel-item:nth-child(4) { order: 4; }
  .carousel-item:nth-child(5) { order: 5; }
  .carousel-item:nth-child(6) { order: 6; }
  .carousel-item:nth-child(7) { order: 7; }
  .carousel-item:nth-child(8) { order: 8; }

  .contacto { padding-top: 32px; padding-bottom: 64px; }
  .contacto h2 {
    max-width: 313px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(18px, 5.25vw, 21px);
    line-height: 1.2;
    white-space: nowrap;
  }
  .contacto p { max-width: 313px; font-size: 16px; }
  .contacto .btn { display: block; width: 100%; max-width: 313px; margin: 0 auto; }

  .site-footer { padding-top: 40px; padding-bottom: 40px; }
  .footer-inner { flex-direction: column; gap: 32px; text-align: center; }
  .footer-logo { width: 255px; order: 2; }
  .footer-divider { display: none; }
  .footer-social { order: 1; text-align: center; }
}