@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap");

:root {
  --orange: #fda269;
  --wine: #611c2e;
  --ink: #111111;
  --paper: #ffffff;
  --soft: #fff8ee;
  --shadow: 0 12px 22px rgba(0, 0, 0, 0.45);
  --page-width: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
}

a {
  color: inherit;
  text-decoration: none;
}

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

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transition: opacity 700ms ease, translate 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
    translate: 0 30px;
    will-change: opacity, translate;
  }

  .reveal.is-visible {
    opacity: 1;
    translate: 0 0;
    will-change: auto;
  }
}

.site-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 30px max(4.5vw, 30px);
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}

.site-header a,
.site-header button {
  pointer-events: auto;
}

.brand-logo {
  width: clamp(150px, 13.5vw, 262px);
}

.menu-button {
  --bar-gap: 10px;
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 48px;
}

.menu-button span,
.menu-button::before,
.menu-button::after {
  background: var(--wine);
  border-radius: 999px;
  content: "";
  display: block;
  height: 5px;
  position: absolute;
  width: 32px;
}

.menu-button::before {
  transform: translateY(calc(-1 * var(--bar-gap)));
}

.menu-button::after {
  transform: translateY(var(--bar-gap));
}

.theme-wine .menu-button span,
.theme-wine .menu-button::before,
.theme-wine .menu-button::after {
  background: var(--orange);
}

.theme-orange .footer-block {
  border-color: var(--orange);
}

.theme-orange .footer-title {
  color: var(--orange);
}

.theme-orange .route-button,
.theme-orange .social-button,
.theme-orange .footer-bottom {
  background: var(--orange);
}

.menu-panel {
  background: var(--paper);
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.16);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow-y: auto;
  padding: 92px 32px 44px;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(105%);
  transition: transform 260ms ease;
  width: max-content;
  max-width: min(74vw, 360px);
  z-index: 30;
}

.menu-panel.is-open {
  pointer-events: auto;
  transform: translateX(0);
}

.menu-close {
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  position: absolute;
  right: 32px;
  top: 30px;
}

.menu-panel nav {
  display: grid;
  gap: 12px;
  justify-items: end;
  text-align: right;
}

.menu-heading {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 8px;
}

.menu-panel nav a {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
}

.menu-panel nav a.menu-big {
  font-size: 36px;
  line-height: 1.3;
}

.menu-panel nav a:not(.menu-big) + a.menu-big {
  margin-top: 32px;
}

.menu-footer {
  display: grid;
  font-size: 17px;
  font-weight: 700;
  gap: 9px;
  justify-items: end;
  margin-top: 38px;
  text-align: right;
}

.home-category {
  align-items: center;
  display: grid;
  column-gap: clamp(24px, 3.8vw, 74px);
  grid-template-columns: minmax(360px, 640px) auto;
  justify-content: center;
  min-height: clamp(520px, 42vw, 760px);
  overflow: hidden;
  padding: 60px max(5vw, 48px);
  position: relative;
}

.home-category:nth-of-type(odd) {
  background: var(--orange);
}

.home-category:nth-of-type(even) {
  background: var(--wine);
}

.home-category:first-of-type {
  padding-top: 118px;
}

.home-copy {
  justify-self: start;
  margin-left: 0;
  max-width: 760px;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.home-copy h1,
.home-copy h2 {
  color: var(--paper);
  font-size: clamp(94px, 9.2vw, 155px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.78;
  margin: 0;
  transform: scale(1.05, 1.1);
  transform-origin: left bottom;
}

.home-copy p {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(20px, 1.45vw, 28px);
  margin: clamp(2px, 0.55vw, 11px) 0 0;
}

.home-copy .letter {
  display: inline-block;
}

.home-copy .word {
  display: inline-block;
  white-space: nowrap;
}

/* En el diseño, el subtítulo de Spritz va indentado tras el rabo de la "p" */
.home-category[data-kind="spritz"] .home-copy p {
  margin-left: clamp(82px, 10.4vw, 200px);
}

.home-category img {
  filter: drop-shadow(0 18px 18px rgba(70, 20, 20, 0.18));
  justify-self: end;
  max-height: clamp(330px, 29vw, 560px);
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* Compensa el descentrado del motivo dentro del PNG */
.home-category[data-kind="spritz"] img {
  transform: translateX(-0.7%);
}

.home-category[data-kind="cocktails"] img {
  max-height: clamp(290px, 27vw, 520px);
  transform: translateX(-2.8%);
}

.home-category[data-kind="cafe"] img,
.home-category[data-kind="tea"] img {
  max-height: clamp(310px, 28vw, 540px);
}

@media (prefers-reduced-motion: no-preference) {
  .home-animated .home-copy .letter {
    opacity: 0;
    transform: translateX(-0.28em);
    transition:
      opacity 460ms ease,
      transform 620ms cubic-bezier(0.2, 0.78, 0.2, 1);
    transition-delay: calc(var(--i) * 18ms + 180ms);
    will-change: opacity, transform;
  }

  .home-category.home-animated img {
    opacity: 0;
    transform: translateX(-24vw) scale(0.94);
    transition:
      opacity 1200ms ease 120ms,
      transform 1800ms cubic-bezier(0.16, 0.84, 0.2, 1) 120ms;
    will-change: opacity, transform;
  }

  .home-animated.is-visible .home-copy .letter {
    opacity: 1;
    transform: translateX(0);
    will-change: auto;
  }

  .home-category.home-animated.is-visible img {
    opacity: 1;
    transform: translateX(0) scale(1);
    will-change: auto;
  }

  .home-category.home-animated.is-visible[data-kind="spritz"] img {
    transform: translateX(-0.7%) scale(1);
  }

  .home-category.home-animated.is-visible[data-kind="cocktails"] img {
    transform: translateX(-2.8%) scale(1);
  }
}

/* En móvil los apartados aparecen SOLO con un fundido al hacer scroll
   (sin ningún desplazamiento), para que texto e imagen no se descuadren.
   No afecta al escritorio: solo se aplica a <=820px. */
@media (prefers-reduced-motion: no-preference) and (max-width: 820px) {
  .home-animated .home-copy .letter {
    transform: none;
    transition: opacity 500ms ease;
    transition-delay: calc(var(--i) * 5ms + 90ms);
  }

  .home-animated.is-visible .home-copy .letter {
    transform: none;
  }

  .home-category.home-animated img {
    transform: none;
    transition: opacity 800ms ease;
  }

  .home-category.home-animated.is-visible img,
  .home-category.home-animated.is-visible[data-kind="spritz"] img,
  .home-category.home-animated.is-visible[data-kind="cocktails"] img {
    transform: none;
  }
}

.category-hero {
  align-items: center;
  background: var(--orange);
  display: flex;
  justify-content: center;
  min-height: clamp(330px, 40vw, 790px);
  padding: 120px 32px 60px;
  text-align: center;
}

.category-hero.is-wine {
  background: var(--wine);
}

.category-hero h1 {
  color: var(--paper);
  font-size: clamp(72px, 12vw, 230px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.8;
  margin: 0;
  transform: scale(1.05, 1.1);
  transform-origin: center bottom;
}

.category-hero p {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(17px, 1.45vw, 28px);
  margin: clamp(2px, 0.55vw, 11px) 0 0;
}

/* Como en la home: el subtítulo arranca tras el rabo de la "p" de Spritz */
.category-hero.hero-spritz p {
  transform: translateX(clamp(34px, 4.2vw, 81px));
}

.products {
  background: var(--paper);
  padding: 56px max(4.5vw, 24px) 64px;
}

.product-grid {
  display: grid;
  gap: clamp(20px, 2.2vw, 42px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1380px;
}

.product-card {
  aspect-ratio: 0.665;
  background: var(--orange);
  border: 0;
  color: var(--paper);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: center;
}

.product-card::after {
  background: rgba(253, 162, 105, 0.08);
  content: "";
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 180ms ease;
  z-index: 1;
}

.product-card img {
  height: 100%;
  object-fit: cover;
  transition: filter 180ms ease, transform 180ms ease;
  width: 100%;
}

.product-card .card-icon {
  color: var(--paper);
  font-size: clamp(20px, 1.8vw, 34px);
  font-weight: 700;
  line-height: 1;
  position: absolute;
  right: clamp(16px, 1.7vw, 32px);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  top: clamp(14px, 1.5vw, 28px);
  z-index: 3;
}

.zero-badge {
  align-items: center;
  background: #000000;
  color: var(--paper);
  display: flex;
  height: clamp(54px, 5.7vw, 104px);
  justify-content: center;
  left: clamp(16px, 1.9vw, 34px);
  position: absolute;
  top: clamp(16px, 1.9vw, 34px);
  width: clamp(42px, 4.5vw, 82px);
  z-index: 4;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.zero-badge span {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-weight: 700;
  line-height: 0.86;
  transform: rotate(45deg) translateY(1px);
}

.zero-badge strong {
  font-size: clamp(17px, 1.9vw, 34px);
}

.zero-badge small {
  font-size: clamp(5px, 0.58vw, 11px);
  letter-spacing: 0;
}

.product-info {
  left: 5%;
  opacity: 0;
  position: absolute;
  right: 5%;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  top: 50%;
  transform: translateY(-44%);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 2;
}

.product-info h2 {
  font-size: clamp(22px, 2.15vw, 38px);
  font-weight: 700;
  line-height: 0.98;
  margin: 0;
}

.product-info p {
  font-size: clamp(12px, 1.02vw, 18px);
  line-height: 1.18;
  margin: 5px auto 14px;
  max-width: 86%;
}

.price {
  display: block;
  font-size: clamp(15px, 1.1vw, 20px);
  font-weight: 700;
}

.product-card:hover img,
.product-card.is-active img {
  filter: blur(10px);
  transform: scale(1.03);
}

.product-card:hover::after,
.product-card.is-active::after {
  opacity: 1;
}

.product-card:hover .product-info,
.product-card.is-active .product-info {
  opacity: 1;
  transform: translateY(-50%);
}

.quote-band {
  align-items: center;
  background: var(--orange);
  color: var(--paper);
  display: flex;
  font-size: clamp(24px, 2.6vw, 50px);
  font-weight: 700;
  justify-content: center;
  min-height: clamp(220px, 25vw, 490px);
  padding: 46px 28px;
  text-align: center;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.quote-band.is-wine {
  background: var(--wine);
}

.quote-band.small {
  font-size: clamp(15px, 1.35vw, 26px);
}

.quote-band.small span {
  max-width: 1100px;
}

.quote-band.photo {
  background-position: center;
  background-size: cover;
  min-height: clamp(260px, 25vw, 490px);
  position: relative;
}

.quote-band.photo::before {
  background: rgba(0, 0, 0, 0.18);
  content: "";
  inset: 0;
  position: absolute;
}

.quote-band span {
  position: relative;
  z-index: 1;
}

.site-footer {
  background: var(--paper);
}

.footer-main {
  display: grid;
  gap: 42px;
  /* minmax(0, ...) es necesario: sin él, una columna no puede encogerse
     por debajo del contenido más ancho que no se puede partir (el texto
     "@conchitacafezamora" no tiene espacios), y eso empuja todo el pie
     más ancho que la pantalla en escritorios más estrechos. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1810px;
  padding: 72px max(5vw, 58px) 64px;
}

.footer-block {
  border-right: 3px solid var(--wine);
  min-height: 260px;
  padding-right: 46px;
}

.footer-block:last-child {
  border-right: 0;
}

/* Tramo intermedio (más que móvil, pero sin el ancho de un escritorio
   grande): 4 columnas no caben con holgura aquí — sobre todo la de
   "Síguenos", con "@conchitacafezamora" que no se puede partir en
   palabras. Se pasa a 2 columnas, como en móvil, hasta que hay sitio
   real para las 4. */
@media (min-width: 821px) and (max-width: 1500px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .footer-block {
    border-right-width: 2px;
    min-height: 0;
    padding-bottom: 28px;
  }

  .footer-block:nth-child(1),
  .footer-block:nth-child(2) {
    border-bottom: 3px solid var(--wine);
    padding-bottom: 28px;
  }

  .theme-orange .footer-block:nth-child(1),
  .theme-orange .footer-block:nth-child(2) {
    border-bottom-color: var(--orange);
  }

  .footer-block:nth-child(2),
  .footer-block:nth-child(4) {
    border-right: 0;
  }

  .footer-block:nth-child(3),
  .footer-block:nth-child(4) {
    padding-top: 28px;
  }
}

.footer-title {
  align-items: center;
  color: var(--wine);
  display: flex;
  font-size: clamp(24px, 1.7vw, 32px);
  font-weight: 700;
  gap: 16px;
  margin: 0 0 42px;
}

.footer-title .icon {
  background: currentColor;
  display: inline-block;
  flex: none;
  height: 1.25em;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  width: 1.25em;
}

.icon-pin {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'><path d='M12 21.5s-7-6.7-7-12A7 7 0 0 1 19 9.5c0 5.3-7 12-7 12z'/><circle cx='12' cy='9.3' r='2.6'/></svg>");
}

.icon-clock {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='9.4'/><path d='M12 6.6V12l4.4 2.4'/></svg>");
}

.icon-menu {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 5h20v2.8H2zM2 10.6h20v2.8H2zM2 16.2h20V19H2z'/></svg>");
}

.icon-rss {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3.5A16.5 16.5 0 0 1 20.5 20h-3.2A13.3 13.3 0 0 0 4 6.7zm0 6A10.5 10.5 0 0 1 14.5 20h-3.2A7.3 7.3 0 0 0 4 12.7zm2.4 8.1A2.4 2.4 0 1 1 4 20a2.4 2.4 0 0 1 2.4-2.4z'/></svg>");
}

.footer-block p {
  font-size: clamp(17px, 1.15vw, 22px);
  line-height: 1.32;
  margin: 0 0 20px;
}

.footer-block strong,
.footer-nav strong {
  font-weight: 700;
}

.route-button,
.social-button {
  align-items: center;
  background: var(--wine);
  border-radius: 28px;
  color: var(--paper);
  display: inline-flex;
  font-size: clamp(19px, 1.3vw, 25px);
  font-weight: 300;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
  min-height: 82px;
  padding: 18px 34px;
}

.footer-nav {
  display: grid;
  font-size: clamp(16px, 1vw, 20px);
  gap: 4px;
}

.footer-nav .big {
  font-size: clamp(24px, 1.6vw, 31px);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 8px;
}

.social-list {
  display: grid;
  gap: 22px;
  justify-items: start;
}

.social-button {
  border-radius: 999px;
  font-size: clamp(15px, 1vw, 19px);
  margin: 0;
  min-height: 58px;
  padding: 14px 26px;
}

.social-button::before {
  background: var(--paper);
  content: "";
  flex: none;
  height: 1.3em;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  width: 1.3em;
}

.icon-ig {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'><rect x='2.5' y='2.5' width='19' height='19' rx='5.2'/><circle cx='12' cy='12' r='4.4'/><circle cx='17.6' cy='6.4' r='1.5' fill='%23000' stroke='none'/></svg>");
}

.icon-fb {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.4 22v-8.1h2.8l.4-3.2h-3.2V8.8c0-.9.3-1.6 1.6-1.6h1.7V4.4c-.3 0-1.3-.1-2.5-.1-2.5 0-4.1 1.5-4.1 4.2v2.2H7.3v3.2h2.8V22z'/></svg>");
}

.footer-bottom {
  align-items: center;
  background: var(--wine);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: space-between;
  min-height: 120px;
  padding: 26px max(5vw, 58px);
}

.footer-bottom img {
  width: clamp(120px, 10.5vw, 200px);
}

.footer-bottom p {
  font-size: clamp(15px, 1.25vw, 24px);
  margin: 0;
}

@media (max-width: 820px) {
  /* Valores fluidos: en 820px coinciden con el escritorio y bajan
     de forma gradual hasta el diseño móvil (~375px). */
  .site-header {
    padding: clamp(18px, calc(2.7vw + 7.9px), 30px) clamp(20px, calc(3.8vw + 5.8px), 37px);
  }

  .brand-logo {
    width: clamp(118px, calc(7.2vw + 91px), 150px);
  }

  .menu-button {
    --bar-gap: clamp(8px, calc(0.45vw + 6.3px), 10px);
    height: clamp(40px, calc(1.8vw + 33.3px), 48px);
    width: clamp(40px, calc(1.8vw + 33.3px), 48px);
  }

  .menu-button span,
  .menu-button::before,
  .menu-button::after {
    height: clamp(4px, calc(0.22vw + 3.2px), 5px);
    width: clamp(26px, calc(1.35vw + 20.9px), 32px);
  }

  .menu-panel {
    padding: clamp(76px, calc(3.6vw + 62.5px), 92px) clamp(26px, calc(1.35vw + 20.9px), 32px) clamp(38px, calc(1.35vw + 32.9px), 44px);
  }

  .menu-close {
    font-size: clamp(32px, calc(0.9vw + 28.6px), 36px);
    right: clamp(22px, calc(2.25vw + 13.6px), 32px);
    top: clamp(20px, calc(2.25vw + 11.6px), 30px);
  }

  .menu-heading {
    font-size: clamp(32px, calc(1.35vw + 26.9px), 38px);
  }

  .menu-panel nav a {
    font-size: clamp(22px, calc(0.9vw + 18.6px), 26px);
  }

  .menu-panel nav a.menu-big {
    font-size: clamp(30px, calc(1.35vw + 24.9px), 36px);
  }

  .menu-footer {
    font-size: clamp(14px, calc(0.67vw + 11.5px), 17px);
  }

  .home-category {
    display: flex;
    justify-content: center;
    /* Se limita también por alto de pantalla (vh) para que, sea cual sea
       el tamaño del móvil, siempre asome un trozo del siguiente apartado
       y quede claro que hay más para hacer scroll. */
    min-height: min(146vw, calc(1600px - 132vw), 900px, calc(100vh - 56px));
    padding: clamp(24px, calc(8.09vw - 6.3px), 60px) 0;
    text-align: center;
  }

  @supports (height: 100dvh) {
    .home-category {
      min-height: min(146vw, calc(1600px - 132vw), 900px, calc(100dvh - 56px));
    }
  }

  .home-category:first-of-type {
    padding-top: clamp(24px, calc(21.1vw - 55.2px), 118px);
  }

  .home-copy {
    left: 50%;
    margin-left: 0;
    max-width: 100%;
    position: absolute;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 3;
  }

  .home-copy h1,
  .home-copy h2 {
    font-size: clamp(60px, calc(3.43vw + 66px), 120px);
    line-height: 0.8;
    /* En móvil el texto va centrado: escalamos desde el centro para que
       el título quede alineado con el subtítulo (en escritorio se mantiene
       el origen "left bottom"). */
    transform-origin: bottom;
    /* El oscurecido va pegado a las letras (halo por sombra), no un
       rectángulo detrás, para que no haya mancha de lado a lado. */
    text-shadow:
      0 0 10px rgba(0, 0, 0, 0.5),
      0 0 22px rgba(0, 0, 0, 0.4),
      0 2px 6px rgba(0, 0, 0, 0.5);
  }

  .home-copy p,
  .home-category[data-kind="spritz"] .home-copy p {
    font-size: clamp(15px, calc(0.88vw + 12.8px), 22px);
    margin: clamp(5px, calc(25.7px - 2.58vw), 16px) 0 0;
    text-shadow:
      0 0 6px rgba(0, 0, 0, 0.6),
      0 0 13px rgba(0, 0, 0, 0.45),
      0 1px 3px rgba(0, 0, 0, 0.55);
  }

  /* En móvil, Spritz usa el subtítulo centrado como el resto (se anula la
     indentación de escritorio, que sí se mantiene en PC). Además lleva un
     pelín más de aire arriba porque la cola de la "p" de "Spritz" sobresale
     y si no toca el subtítulo. */
  .home-category[data-kind="spritz"] .home-copy p {
    margin-left: 0;
    margin-top: clamp(19px, calc(2.9vw + 7.7px), 26px);
  }

  .home-category img,
  .home-category[data-kind] img {
    /* También se limita por alto de pantalla: en móviles con poco alto
       (o ventanas anchas y bajas) la imagen es lo que más ocupa, así que
       si no se limita aquí, el peek del siguiente apartado desaparece. */
    max-height: min(144vw, calc(1450px - 137vw), 880px, calc(100vh - 190px));
    max-width: 100vw;
  }

  @supports (height: 100dvh) {
    .home-category img,
    .home-category[data-kind] img {
      max-height: min(144vw, calc(1450px - 137vw), 880px, calc(100dvh - 190px));
    }
  }

  .category-hero {
    /* Cabecera algo más baja en móvil para dejar sitio a 2 filas de productos.
       El padding superior deja libre la franja del logo (76px) para que el
       título, que va centrado, nunca se solape con él. */
    min-height: clamp(230px, 34vw, 790px);
    padding: clamp(86px, calc(12vw + 39px), 120px) clamp(22px, calc(2.25vw + 13.6px), 32px) clamp(28px, calc(3.6vw + 14px), 60px);
  }

  .category-hero h1 {
    font-size: clamp(58px, calc(7.79vw + 34.5px), 100px);
  }

  .category-hero p {
    margin-top: clamp(5px, calc(22px - 2.13vw), 14px);
  }

  .category-hero.hero-spritz p {
    transform: translateX(clamp(0px, calc(7.73vw - 29px), 34px));
  }

  .products {
    padding: clamp(20px, calc(4.2vw + 3.6px), 56px) clamp(24px, calc(2.9vw + 13.1px), 37px) clamp(42px, calc(4.94vw + 23.5px), 64px);
  }

  .product-grid {
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* En móvil las tarjetas son menos altas para que se vean 4 productos
     (2 filas) antes de tener que deslizar. */
  .product-card {
    aspect-ratio: 0.86;
  }
}

/* Móviles con pantalla baja (iPhone SE y similares): se compacta la
   cabecera para que sigan entrando 4 productos sin deslizar. */
@media (max-width: 820px) and (max-height: 760px) {
  .category-hero {
    min-height: 140px;
    /* 76px es la franja del logo: el título nunca debe meterse ahí. */
    padding-top: 86px;
    padding-bottom: 14px;
  }

  .category-hero h1 {
    font-size: clamp(42px, 11.5vw, 62px);
  }

  .category-hero p {
    font-size: clamp(14px, 3.6vw, 17px);
  }

  .products {
    padding-top: 10px;
  }

  .product-grid {
    gap: 10px;
  }

  .product-card {
    aspect-ratio: 0.96;
  }
}

/* El resto de estilos de móvil (no dependen del alto de pantalla). */
@media (max-width: 820px) {
  .product-card .card-icon {
    font-size: clamp(17px, calc(0.67vw + 14.5px), 20px);
    right: clamp(12px, calc(0.9vw + 8.6px), 16px);
    top: clamp(10px, calc(0.9vw + 6.6px), 14px);
  }

  .zero-badge {
    height: clamp(42px, calc(2.7vw + 31.9px), 54px);
    left: clamp(10px, calc(1.35vw + 4.9px), 16px);
    padding-top: 5px;
    top: clamp(10px, calc(1.35vw + 4.9px), 16px);
    width: clamp(33px, calc(2.02vw + 25.4px), 42px);
  }

  .zero-badge strong {
    font-size: clamp(14px, calc(0.67vw + 11.5px), 17px);
  }

  .zero-badge small {
    font-size: clamp(4px, calc(0.22vw + 3.2px), 5px);
  }

  .product-info {
    left: 4%;
    right: 4%;
  }

  .product-info h2 {
    font-size: clamp(17px, calc(0.73vw + 16px), 22px);
  }

  .product-info p {
    font-size: clamp(10px, calc(0.17vw + 10.6px), 12px);
    margin-bottom: clamp(10px, calc(0.9vw + 6.6px), 14px);
  }

  .price {
    font-size: clamp(13px, calc(0.43vw + 11.5px), 15px);
  }

  .quote-band {
    min-height: clamp(180px, 25vw, 490px);
  }

  .footer-main {
    gap: clamp(24px, calc(4.04vw + 8.8px), 42px);
    grid-template-columns: 1fr 1fr;
    padding: clamp(40px, calc(7.19vw + 13px), 72px) clamp(22px, calc(8.09vw - 8.3px), 58px) clamp(34px, calc(6.74vw + 8.7px), 64px);
  }

  .footer-block {
    border-right-width: 2px;
    min-height: 0;
    /* Alineado a la izquierda (estilo editorial): un pelín de sangría
       tras el borde/divisor y aire antes del divisor de la derecha. */
    padding-left: clamp(8px, calc(3.37vw - 4.6px), 23px);
    padding-right: clamp(14px, calc(4.94vw - 4.5px), 36px);
    text-align: left;
  }

  .footer-block:nth-child(1),
  .footer-block:nth-child(2) {
    border-bottom: 2px solid var(--wine);
    padding-bottom: 22px;
  }

  .theme-orange .footer-block:nth-child(1),
  .theme-orange .footer-block:nth-child(2) {
    border-bottom-color: var(--orange);
  }

  .footer-block:nth-child(2),
  .footer-block:nth-child(4) {
    border-right: 0;
  }

  .footer-title {
    align-items: flex-start;
    font-size: clamp(14px, calc(2.25vw + 5.6px), 24px);
    gap: clamp(8px, calc(1.8vw + 1.3px), 16px);
    line-height: 1.15;
    /* Reserva 2 líneas para que todos los bloques arranquen su
       contenido a la misma altura aunque el título se parta. */
    min-height: 2.3em;
    margin-bottom: clamp(16px, calc(4.04vw + 0.2px), 42px);
  }

  .footer-block p,
  .footer-nav {
    font-size: clamp(11px, calc(1.35vw + 5.9px), 17px);
  }

  .route-button {
    border-radius: clamp(10px, calc(4.04vw - 5.2px), 28px);
    font-size: clamp(12px, calc(1.57vw + 6.1px), 19px);
    margin-top: clamp(12px, calc(4.49vw - 4.9px), 32px);
    min-height: clamp(40px, calc(9.44vw + 4.6px), 82px);
    padding: clamp(8px, calc(2.25vw - 0.4px), 18px) clamp(14px, calc(4.49vw - 2.9px), 34px);
  }

  .footer-nav .big {
    font-size: clamp(17px, calc(1.57vw + 11.1px), 24px);
  }

  .social-list {
    gap: clamp(10px, 2.7vw, 22px);
  }

  .social-button {
    font-size: clamp(10px, calc(1.12vw + 5.8px), 15px);
    min-height: clamp(30px, calc(6.29vw + 6.4px), 58px);
    padding: clamp(7px, calc(1.57vw + 1.1px), 14px) clamp(12px, 3.15vw, 26px);
  }

  .footer-bottom {
    min-height: clamp(82px, calc(8.54vw + 50px), 120px);
    padding: clamp(22px, calc(0.9vw + 18.6px), 26px) clamp(22px, calc(8.09vw - 8.3px), 58px);
  }

  .footer-bottom img {
    width: clamp(112px, calc(1.8vw + 105.3px), 120px);
  }

  .footer-bottom p {
    font-size: clamp(10px, calc(1.12vw + 5.8px), 15px);
  }
}

@media (max-width: 480px) {
  .products {
    padding-left: 18px;
    padding-right: 18px;
  }

  .product-grid {
    gap: 18px;
  }
}