/* Cadena Dorada — diseño base de 1920px de ancho (Adobe XD).
   Todas las medidas usan --u (1u = 1px del diseño) y escalan con el ancho de pantalla. */

:root {
  --wine: #620a1b;
  --gold: #ffd7ab;
  --gray: #5c5c5c;
  --text: #323232;
  --u: calc(100vw / 1920);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: var(--text);
  background: #fff;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

section[id], footer[id], header[id] { scroll-margin-top: 0; }

/* ---------- Barra superior ---------- */
.topbar {
  height: calc(54 * var(--u));
  background: var(--wine);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(130 * var(--u));
  font-size: max(14px, calc(30 * var(--u)));
  font-weight: 400;
}
.topbar__social { display: flex; gap: calc(14 * var(--u)); font-size: max(18px, calc(34 * var(--u))); }
.topbar__social a { color: #f7f7f7; }
.topbar__phone { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.topbar__phone i { font-size: max(16px, calc(30 * var(--u))); }

/* ---------- Cabecera ---------- */
.header { background: #fcfcfc; position: relative; z-index: 10; }
.header__inner {
  position: relative;
  height: calc(169 * var(--u));
  padding: 0 calc(130 * var(--u)) 0 calc(128 * var(--u));
  display: flex;
  align-items: center;
}
.menu {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(36 * var(--u));
  font-size: max(14px, calc(22 * var(--u)));
  font-weight: 400;
  color: var(--wine);
}
.menu__right { margin-left: auto; }
.menu a { transition: opacity .2s; }
.menu a:hover { opacity: .65; }
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(523 * var(--u));
}
.header__search {
  margin-left: calc(83 * var(--u));
  width: calc(63 * var(--u));
  height: calc(60 * var(--u));
  min-width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid var(--wine);
  border-radius: calc(13 * var(--u));
  background: #f7f7f7;
  color: var(--wine);
  font-size: max(16px, calc(30 * var(--u)));
  transition: background .2s, color .2s;
}
.header__search:hover { background: var(--wine); color: #f7f7f7; }

.burger { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: calc(856 * var(--u));
  display: flex;
  align-items: flex-end;
  padding: 0 calc(128 * var(--u)) calc(120 * var(--u));
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero__title {
  position: relative;
  font-size: calc(124 * var(--u));
  line-height: calc(139 * var(--u));
  font-weight: 100;
  color: var(--wine);
}

/* ---------- Buscador ---------- */
.searchband {
  height: calc(171 * var(--u));
  background: var(--wine);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 calc(130 * var(--u));
}
.searchband__form { display: flex; gap: calc(27 * var(--u)); width: calc(862 * var(--u)); }
.searchband input {
  flex: 1;
  min-width: 0;
  height: calc(71 * var(--u));
  min-height: 44px;
  border: 0;
  border-radius: calc(15 * var(--u));
  padding: 0 calc(26 * var(--u));
  font: 300 max(15px, calc(30 * var(--u))) "Roboto", sans-serif;
  color: var(--wine);
  background: #fff;
}
.searchband input::placeholder { color: #c9c9c9; opacity: 1; }
.searchband button {
  width: calc(155 * var(--u));
  min-width: 90px;
  min-height: 44px;
  border: 0;
  border-radius: calc(15 * var(--u));
  background: #f7f7f7;
  color: var(--wine);
  font: 300 max(15px, calc(30 * var(--u))) "Roboto", sans-serif;
  transition: background .2s;
}
.searchband button:hover { background: var(--gold); }

/* ---------- Títulos de sección ---------- */
.section-title {
  text-align: center;
  font-size: max(24px, calc(45 * var(--u)));
  line-height: 1.3;
  font-weight: 300;
  color: var(--wine);
}

/* ---------- Carruseles ---------- */
.carousel { position: relative; }
.track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; flex: 0 0 auto; }

.arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: calc(40 * var(--u));
  min-width: 28px;
  height: calc(60 * var(--u));
  min-height: 40px;
  transform: translateY(-50%);
  border: 0;
  padding: 0;
  background: none;
  color: #c9c9c9;
  transition: opacity .2s, color .2s;
}
.arrow::before {
  content: "";
  display: block;
  width: max(10px, calc(16 * var(--u)));
  height: max(10px, calc(16 * var(--u)));
  margin: auto;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.arrow--prev::before { transform: rotate(-135deg); }
.arrow--next::before { transform: rotate(45deg); }
.arrow--light { color: #fff; }
.arrow:hover:not(:disabled) { color: var(--wine); }
.arrow--light:hover:not(:disabled) { color: var(--gold); }
.arrow:disabled { opacity: .35; cursor: default; }
.arrow--light:disabled { opacity: .6; }

/* ---------- Colecciones ---------- */
.collections { padding: calc(85 * var(--u)) 0 calc(156 * var(--u)); }
.collections__lead {
  margin-top: calc(22 * var(--u));
  text-align: center;
  font-size: max(15px, calc(27 * var(--u)));
  line-height: 1.3;
  color: var(--gray);
  padding: 0 20px;
}
.collections__carousel {
  width: calc(1468 * var(--u));
  margin: calc(70 * var(--u)) auto 0;
}
.collections__carousel .track { gap: calc(108 * var(--u)); }
.collections__carousel .arrow--prev { left: calc(-44 * var(--u)); }
.collections__carousel .arrow--next { right: calc(-44 * var(--u)); }
.card {
  position: relative;
  width: calc(417 * var(--u));
  aspect-ratio: 1;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  background: #fff;
}
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover img { transform: scale(1.05); }
.card span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(8 * var(--u)) 0 calc(10 * var(--u));
  text-align: center;
  font-size: max(15px, calc(35 * var(--u)));
  color: var(--wine);
  background: linear-gradient(to top, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
}

/* ---------- Colección de temporada ---------- */
.season {
  display: flex;
  min-height: calc(879 * var(--u));
  background: var(--wine);
}
.season__main { flex: 1; min-width: 0; padding: calc(70 * var(--u)) 0 calc(70 * var(--u)) calc(128 * var(--u)); }
.season__title {
  font-size: calc(124 * var(--u));
  line-height: calc(130 * var(--u));
  font-weight: 100;
  color: var(--gold);
}
.season__carousel {
  width: calc(1323 * var(--u));
  max-width: 100%;
  margin: calc(147 * var(--u)) 0 0 calc(73 * var(--u));
}
.season__carousel .track { gap: calc(69 * var(--u)); }
.season__carousel .arrow--prev { left: calc(-47 * var(--u)); }
.season__carousel .arrow--next { right: calc(-34 * var(--u)); }
.product {
  position: relative;
  width: calc(328 * var(--u));
  aspect-ratio: 1;
  background: #fff;
  overflow: hidden;
}
.product img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.product:hover img { transform: scale(1.05); }
.product__price {
  position: absolute;
  left: calc(11 * var(--u));
  bottom: calc(8 * var(--u));
  font-size: max(14px, calc(29 * var(--u)));
  color: var(--wine);
}
.season__photo {
  flex: 0 0 calc(494 * var(--u));
  width: calc(494 * var(--u));
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: 40% center;
}

/* ---------- Testimonios ---------- */
.testimonials { padding: calc(114 * var(--u)) 0 calc(157 * var(--u)); }
.testimonials__carousel {
  width: calc(1512 * var(--u));
  margin: calc(78 * var(--u)) auto 0;
}
.testimonials__carousel .track { gap: calc(64 * var(--u)); }
.testimonials__carousel .arrow--prev { left: calc(-58 * var(--u)); }
.testimonials__carousel .arrow--next { right: calc(-58 * var(--u)); }
.quote { width: calc(330 * var(--u)); }
.quote h3 {
  font-size: max(18px, calc(35 * var(--u)));
  line-height: 1.3;
  font-weight: 300;
  color: var(--wine);
}
.quote p {
  margin-top: calc(14 * var(--u));
  font-size: max(13px, calc(18 * var(--u)));
  line-height: 1.35;
  color: var(--gray);
}

/* ---------- Sobre nosotros ---------- */
.about { display: flex; align-items: stretch; }
.about__photo {
  flex: 0 0 calc(815 * var(--u));
  width: calc(815 * var(--u));
  height: calc(778 * var(--u));
  object-fit: cover;
}
.about__content { padding: calc(61 * var(--u)) calc(130 * var(--u)) 0 calc(183 * var(--u)); min-width: 0; }
.about h2 {
  font-size: max(24px, calc(45 * var(--u)));
  line-height: 1.3;
  font-weight: 300;
  color: var(--wine);
}
.about p {
  margin-top: calc(21 * var(--u));
  max-width: calc(600 * var(--u));
  font-size: max(18px, calc(35 * var(--u)));
  line-height: 1.32;
  font-weight: 100;
  color: var(--gray);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: calc(28 * var(--u));
  margin-top: calc(33 * var(--u));
  width: calc(247 * var(--u));
  min-width: 140px;
  height: calc(58 * var(--u));
  min-height: 44px;
  padding-left: calc(25 * var(--u));
  border: 2px solid var(--wine);
  border-radius: calc(15 * var(--u));
  font-size: max(16px, calc(35 * var(--u)));
  font-weight: 100;
  color: var(--wine);
  transition: background .2s, color .2s;
}
.btn-outline i { font-size: max(14px, calc(30 * var(--u))); }
.btn-outline:hover { background: var(--wine); color: #fff; }
.about__carousel {
  width: calc(749 * var(--u));
  max-width: 100%;
  margin-top: calc(83 * var(--u));
}
.about__carousel .track { gap: calc(25 * var(--u)); }
.about__carousel .arrow--prev { left: calc(-29 * var(--u)); }
.about__carousel .arrow--next { right: calc(-17 * var(--u)); }
.thumb {
  width: calc(233 * var(--u));
  aspect-ratio: 1;
  border: 1px solid #e0e0e0;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.thumb:hover img { transform: scale(1.06); }

/* ---------- Blog ---------- */
.blog { padding: calc(108 * var(--u)) calc(130 * var(--u)) calc(100 * var(--u)); }
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(131 * var(--u));
  margin-top: calc(75 * var(--u));
}
.post img {
  width: 100%;
  aspect-ratio: 466 / 305;
  object-fit: cover;
  border-radius: calc(15 * var(--u));
}
.post h3 {
  margin-top: calc(26 * var(--u));
  font-size: max(15px, calc(22 * var(--u)));
  line-height: 1.32;
  font-weight: 400;
  color: var(--wine);
}
.post__meta {
  display: block;
  margin-top: calc(10 * var(--u));
  font-size: max(12px, calc(18 * var(--u)));
  color: #9f9f9f;
}
.post p {
  margin-top: calc(12 * var(--u));
  font-size: max(13px, calc(20 * var(--u)));
  line-height: 1.3;
  font-weight: 400;
  color: #323232;
}
.post a {
  display: inline-block;
  margin-top: calc(14 * var(--u));
  font-size: max(12px, calc(18 * var(--u)));
  font-weight: 400;
  color: var(--wine);
}
.post a:hover { text-decoration: underline; }

/* ---------- Pie de página ---------- */
.footer {
  background: var(--wine);
  padding: calc(50 * var(--u)) 0 calc(60 * var(--u));
  color: #fff;
}
.footer__logo { width: calc(479 * var(--u)); margin: 0 auto; }
.footer__cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  margin: calc(73 * var(--u)) calc(282 * var(--u)) 0 calc(258 * var(--u));
}
.footer h3 {
  font-size: max(18px, calc(35 * var(--u)));
  line-height: 1.3;
  font-weight: 300;
  color: var(--gold);
}
.footer__col li { font-size: max(14px, calc(22 * var(--u))); line-height: 1.32; }
.footer__col ul { margin-top: calc(14 * var(--u)); }
.footer__col a:hover { color: var(--gold); }
.footer__col--social { text-align: center; }
.footer__icons {
  display: flex;
  justify-content: center;
  gap: calc(14 * var(--u));
  margin-top: calc(20 * var(--u));
  font-size: max(20px, calc(34 * var(--u)));
  color: var(--gold);
}
.footer__icons a:hover { color: #fff; }

.footer__col--news { width: calc(282 * var(--u)); min-width: 220px; justify-self: end; }
.newsletter { position: relative; margin-top: calc(14 * var(--u)); }
.newsletter input[type="email"] {
  width: 100%;
  height: calc(49 * var(--u));
  min-height: 40px;
  padding: 0 calc(24 * var(--u));
  border: 1px solid var(--gold);
  border-radius: calc(15 * var(--u));
  background: var(--wine);
  color: var(--gold);
  font: 300 max(14px, calc(22 * var(--u))) "Roboto", sans-serif;
}
.newsletter input[type="email"]::placeholder { color: var(--gold); opacity: 1; }
.newsletter button {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: calc(7 * var(--u)) 0 0 auto;
  min-height: 36px;
  padding: 0 calc(22 * var(--u));
  border: 0;
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) 0;
  background: var(--gold);
  color: var(--wine);
  font: 300 max(13px, calc(20 * var(--u))) "Roboto", sans-serif;
  transition: filter .2s;
}
.newsletter button:hover { filter: brightness(.93); }
.newsletter__check {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(8 * var(--u));
  font-size: max(12px, calc(18 * var(--u)));
  font-weight: 400;
  white-space: nowrap;
  color: var(--gold);
}
.newsletter__check input { width: max(16px, calc(21 * var(--u))); height: max(16px, calc(22 * var(--u))); accent-color: var(--gold); }
.newsletter__msg { min-height: 1.3em; margin-top: 6px; font-size: max(12px, calc(18 * var(--u))); font-weight: 400; color: #fff; }

/* ---------- WhatsApp flotante ---------- */
.whatsapp {
  position: fixed;
  right: calc(30 * var(--u));
  bottom: calc(30 * var(--u));
  z-index: 20;
  width: max(52px, calc(75 * var(--u)));
  height: max(52px, calc(75 * var(--u)));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1db900;
  color: #fff;
  font-size: max(30px, calc(46 * var(--u)));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .2s;
}
.whatsapp:hover { transform: scale(1.08); }

/* ================= Tablet / móvil ================= */
@media (max-width: 1100px) {
  :root { --u: 0.6px; }

  .topbar { padding: 0 16px; }
  .topbar__phone { font-size: 14px; }

  .header__inner { height: 84px; padding: 0 16px; justify-content: space-between; }
  .logo { width: min(240px, 52vw); }
  .burger {
    display: grid;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 12px 10px;
    border: 0;
    background: none;
    align-content: center;
  }
  .burger span { display: block; height: 2px; background: var(--wine); transition: transform .25s, opacity .25s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    background: #fcfcfc;
    border-top: 1px solid #eee;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
    font-size: 16px;
  }
  .menu.is-open { display: flex; }
  .menu a { padding: 14px 4px; border-bottom: 1px solid #f0e6e8; }
  .menu__right { margin-left: 0; }
  .header__search { margin-left: 0; width: 44px; height: 44px; }

  .hero { height: 62vw; min-height: 320px; padding: 0 20px 28px; }
  .hero__title { font-size: clamp(38px, 11vw, 80px); line-height: 1.12; }

  .searchband { height: auto; padding: 24px 16px; }
  .searchband__form { width: 100%; gap: 10px; }

  .collections { padding: 48px 0 56px; }
  .collections__lead br { display: none; }
  .collections__carousel { width: 100%; margin-top: 32px; padding: 0 44px; }
  .collections__carousel .track { gap: 16px; }
  .collections__carousel .arrow--prev { left: 6px; }
  .collections__carousel .arrow--next { right: 6px; }
  .card { width: min(260px, 72%); }

  .season { flex-direction: column-reverse; min-height: 0; }
  .season__main { padding: 40px 16px 48px; }
  .season__title { font-size: clamp(38px, 11vw, 80px); line-height: 1.12; }
  .season__carousel { width: 100%; margin: 28px 0 0; padding: 0 44px; }
  .season__carousel .track { gap: 14px; }
  .season__carousel .arrow--prev { left: 4px; }
  .season__carousel .arrow--next { right: 4px; }
  .product { width: min(220px, 70%); }
  .season__photo { flex: none; width: 100%; height: 56vw; max-height: 480px; min-height: 0; object-position: center 25%; }

  .testimonials { padding: 56px 0; }
  .testimonials__carousel { width: 100%; margin-top: 28px; padding: 0 44px; }
  .testimonials__carousel .track { gap: 28px; }
  .testimonials__carousel .arrow--prev { left: 6px; }
  .testimonials__carousel .arrow--next { right: 6px; }
  .quote { width: min(300px, 100%); }

  .about { flex-direction: column; }
  .about__photo { flex: none; width: 100%; height: 80vw; max-height: 520px; }
  .about__content { padding: 36px 16px 48px; }
  .about p { max-width: none; font-weight: 300; }
  .about__carousel { width: 100%; margin-top: 36px; padding: 0 40px; }
  .about__carousel .track { gap: 14px; }
  .about__carousel .arrow--prev { left: 2px; }
  .about__carousel .arrow--next { right: 2px; }
  .thumb { width: min(160px, 46%); }

  .blog { padding: 56px 16px; }
  .blog__grid { grid-template-columns: 1fr; gap: 36px; margin: 32px auto 0; max-width: 520px; }
  .post img { border-radius: 12px; }

  .footer { padding: 40px 16px 80px; }
  .footer__logo { width: min(300px, 80%); }
  .footer__cols { grid-template-columns: 1fr; gap: 32px; margin: 40px 0 0; text-align: center; }
  .footer__col--news { width: 100%; max-width: 360px; justify-self: center; text-align: left; }
  .footer h3 { text-align: center; }
}