/* ============================================================================
   CONEJO NEGRO — vinos contemporáneos
   Sitio nocturno. El fondo es negro y lo único que trae color es el momento
   que elegís: cada uno tiñe la pantalla con el color de su etiqueta. Los tres
   salen de las botellas reales —el magenta del rosado, el verde del moscatel,
   la plata de la luna del Gran— y la brasa es la del asado.
   Tipografía: Archivo Black para los golpes, Archivo para todo lo demás.
   ============================================================================ */

:root {
  --negro:     #0C0C0D;
  --carbon:    #141416;
  --grafito:   #1C1C20;
  --borde:     #2A2A2F;
  --hueso:     #F2EEE6;
  --humo:      #A8A49B;   /* 7.1:1 sobre el negro */
  --tenue:     #8A8680;   /* 5.4:1 sobre el negro, 4.7:1 sobre --grafito */

  --brasa:     #C8502F;
  --magenta:   #B02050;
  --luna:      #8496B4;   /* 6.52:1 */
  --verde:     #2E9E5B;

  /* Lo pisa cada momento y cada línea. --tinte es el color gráfico (bordes,
     resplandor) y --tinte-txt el mismo tono aclarado hasta pasar 4,5:1 como
     texto sobre el negro; también es el fondo de los botones llenos. */
  --tinte:     #C8502F;
  --tinte-txt: #CE6244;
  --tinte-osc: #8E3520;

  --ancho:  1180px;
  --radio:  3px;
  --trans:  .28s cubic-bezier(.4, 0, .2, 1);
  --display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

body {
  margin: 0; background: var(--negro); color: var(--hueso);
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; font-weight: 400; }
p { margin: 0 0 1em; }

.saltar {
  position: absolute; left: -999px; top: 0; z-index: 99;
  background: var(--hueso); color: var(--negro); padding: 12px 18px;
}
.saltar:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }

.contenedor { width: min(100% - 40px, var(--ancho)); margin: 0 auto; }
.contenedor.angosto { max-width: 720px; }
.seccion { padding: clamp(64px, 8vw, 116px) 0; }
.mt { margin-top: 26px; }

.rotulo {
  font-size: .76rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--tinte-txt); margin: 0 0 16px;
}
.titulo {
  font-family: var(--display); font-size: clamp(1.9rem, 5vw, 3.1rem);
  letter-spacing: -.02em; margin-bottom: 20px; text-wrap: balance;
}
.entrada { color: var(--humo); max-width: 62ch; font-size: 1.02rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-block; padding: 14px 24px; border: 1px solid var(--borde);
  border-radius: var(--radio); color: var(--hueso); background: transparent;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; transition: border-color var(--trans), background var(--trans), color var(--trans);
}
.btn:hover { border-color: var(--tinte-txt); color: var(--tinte-txt); }
.btn.lleno { background: var(--tinte-txt); border-color: var(--tinte-txt); color: var(--negro); }
.btn.lleno:hover { background: var(--hueso); border-color: var(--hueso); color: var(--negro); }
.btn.chico { padding: 10px 16px; font-size: .72rem; }

/* ============================================================
   BARRA
   ============================================================ */
.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  padding: 14px clamp(16px, 3vw, 32px);
  background: rgba(12, 12, 13, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.marca { display: block; flex: none; }
.marca-svg { width: 96px; height: auto; color: var(--hueso); }
.nav-grande { display: none; gap: 26px; margin-left: auto; }
.nav-grande a {
  /* El padding no es estético: sin él el enlace mide 20 px de alto y en una
     tablet de 1024 px queda por debajo del mínimo para tocar con el dedo. */
  padding: 9px 0;
  font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--humo); transition: color var(--trans);
}
.nav-grande a:hover, .nav-grande a.act { color: var(--hueso); }
.barra-der { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.barra-der .btn { display: none; }
.idioma {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; color: var(--humo);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 7px 10px;
}
.idioma:hover { color: var(--hueso); border-color: var(--hueso); }

.hamb {
  width: 42px; height: 42px; display: grid; place-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.hamb span { display: block; width: 22px; height: 2px; background: var(--hueso); transition: var(--trans); }
.hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  position: sticky; top: 71px; z-index: 39;
  display: grid; gap: 2px; padding: 12px clamp(16px, 3vw, 32px) 20px;
  background: var(--carbon); border-bottom: 1px solid var(--borde);
}
/* El display:grid de arriba le gana al [hidden] del navegador y el menú
   arrancaba abierto en el teléfono. */
.menu[hidden] { display: none; }
.menu a {
  padding: 14px 4px; font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--humo); border-bottom: 1px solid var(--borde);
}
.menu a:last-child { border-bottom: 0; }

@media (min-width: 900px) {
  .nav-grande { display: flex; }
  .barra-der { margin-left: 0; }
  .barra-der .btn { display: inline-block; }
  .hamb { display: none; }
  .menu { display: none !important; }
  .marca-svg { width: 118px; }
}

/* ============================================================
   EL HERO
   La foto de campaña a todo lo ancho, con la frase de la marca encima.
   El degradé no es decorativo: es lo que hace legible el texto sobre la foto.
   ============================================================ */
.hero { position: relative; display: grid; isolation: isolate; }
.hero-foto, .hero-foto img {
  grid-area: 1 / 1; width: 100%; height: 100%; display: block;
}
.hero-foto img { object-fit: cover; object-position: center 42%; }
.hero::after {
  content: ""; grid-area: 1 / 1; z-index: 1;
  background: linear-gradient(to bottom,
              rgba(12,12,13,.78) 0%, rgba(12,12,13,.52) 38%,
              rgba(12,12,13,.72) 72%, var(--negro) 100%);
}
.hero-int {
  grid-area: 1 / 1; z-index: 2; align-self: end;
  width: min(100% - 40px, var(--ancho)); margin: 0 auto;
  padding: clamp(120px, 26vw, 220px) 0 clamp(42px, 6vw, 76px);
}
.hero h1 {
  font-family: var(--display); font-size: clamp(2.3rem, 7.6vw, 4.6rem);
  letter-spacing: -.035em; margin-bottom: 20px;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .55);
}
.hero .bajada {
  color: var(--hueso); opacity: .9; max-width: 46ch; margin-bottom: 30px;
  font-size: clamp(1rem, 2.2vw, 1.12rem); text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
}
.hero .kicker { color: var(--hueso); opacity: .75; }

/* ============================================================
   EL PORTÓN — ¿para cuándo?
   ============================================================ */
.porton {
  position: relative; overflow: hidden;
  padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 6vw, 72px);
  text-align: center;
}
/* El resplandor toma el color del momento que está activo */
.porton-luz {
  position: absolute; inset: -40% 0 auto; height: 120%;
  background: radial-gradient(ellipse 60% 50% at 50% 30%,
              color-mix(in srgb, var(--tinte) 26%, transparent), transparent 70%);
  opacity: 0; transition: opacity .6s ease, background .6s ease; pointer-events: none;
}
.porton.encendido .porton-luz { opacity: 1; }
.porton-int { position: relative; z-index: 1; width: min(100% - 40px, 980px); margin: 0 auto; }
.kicker {
  font-size: .76rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 22px;
}
.porton-t {
  font-family: var(--display); font-size: clamp(2rem, 7vw, 3.4rem);
  letter-spacing: -.03em; margin-bottom: 16px;
}
.porton .bajada { color: var(--humo); max-width: 52ch; margin: 0 auto 46px; }
.porton .rotulo { color: var(--tenue); }

.momentos { display: grid; grid-template-columns: 1fr; gap: 12px; }
.momento {
  position: relative; display: grid; gap: 10px; justify-items: center;
  padding: 30px 22px 26px; cursor: pointer; text-align: center;
  background: var(--carbon); border: 1px solid var(--borde); border-radius: var(--radio);
  color: inherit; font: inherit;
  transition: border-color var(--trans), background var(--trans), transform var(--trans);
}
.momento:hover { border-color: var(--tinte); transform: translateY(-3px); }
.momento[aria-expanded="true"] {
  border-color: var(--tinte); background: color-mix(in srgb, var(--tinte) 12%, var(--carbon));
}
.m-orejas {
  width: 30px; height: auto; color: var(--tenue); transition: color var(--trans), transform var(--trans);
}
.momento:hover .m-orejas,
.momento[aria-expanded="true"] .m-orejas { color: var(--tinte-txt); transform: translateY(-2px); }
.m-t {
  font-family: var(--display); font-size: clamp(1.4rem, 4.6vw, 2rem); letter-spacing: -.02em;
}
.m-p { color: var(--humo); font-size: .92rem; max-width: 34ch; }

@media (min-width: 760px) {
  .momentos { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ---------- Las vitrinas ---------- */
.vitrinas { padding-bottom: clamp(20px, 4vw, 40px); }
.vitrina {
  width: min(100% - 40px, var(--ancho)); margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) 0 clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--borde);
}
.vitrina[hidden] { display: none; }
.vitrina-t {
  font-family: var(--display); font-size: clamp(1.2rem, 3vw, 1.5rem); color: var(--tinte-txt);
  letter-spacing: -.01em; margin-bottom: 28px;
}
/* auto-fit con tope: con tres botellas llena el ancho y con una sola
   —la ocasión— queda centrada en vez de tirada contra el margen. */
.botellas {
  display: grid; gap: 16px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 340px));
}
@media (min-width: 760px) { .botellas { gap: 20px; } }

.botella {
  display: grid; align-content: start;
  background: var(--carbon); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; transition: border-color var(--trans), transform var(--trans);
}
.botella:hover { border-color: var(--tinte); transform: translateY(-4px); }
/* La botella va absoluta dentro de la caja: un height:100% no resuelve
   contra un alto que sale de aspect-ratio y la imagen se iba a 1300 px. */
.bot-foto {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 50% 42%,
              color-mix(in srgb, var(--vino, var(--tinte)) 22%, transparent), transparent 72%);
}
.bot-foto img {
  position: absolute; inset: 22px 12px 0; width: auto; height: auto;
  max-width: calc(100% - 24px); max-height: calc(100% - 22px); margin: auto;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55));
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.botella:hover .bot-foto img { transform: translateY(-6px) scale(1.03); }
.bot-txt { padding: 18px 18px 8px; }
.bot-linea {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 7px;
}
.bot-txt h3 { font-family: var(--display); font-size: 1.12rem; letter-spacing: -.01em; }
.bot-txt p { color: var(--humo); font-size: .88rem; margin: 8px 0 0; }
.bot-ir {
  display: block; padding: 14px 18px 18px;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--vino-txt, var(--tinte-txt));
}
.bot-ir::after { content: " →"; transition: margin var(--trans); }
.botella:hover .bot-ir::after { margin-left: 5px; }

/* ============================================================
   LAS TRES LÍNEAS
   ============================================================ */
.lineas-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }
@media (min-width: 860px) { .lineas-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.linea {
  display: grid; align-content: start; overflow: hidden;
  background: var(--carbon); border: 1px solid var(--borde); border-radius: var(--radio);
  transition: border-color var(--trans), transform var(--trans);
}
.linea:hover { border-color: var(--tinte); transform: translateY(-4px); }
.linea > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 42%; }
.linea-txt { padding: 24px 22px 26px; }
.linea-claim {
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinte-txt); margin-bottom: 9px;
}
.linea-txt h3 { font-family: var(--display); font-size: 1.32rem; letter-spacing: -.015em; }
.linea-txt p { color: var(--humo); font-size: .92rem; margin: 12px 0 0; }
.linea-ir {
  display: inline-block; margin-top: 18px;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.linea-ir::after { content: " →"; transition: margin var(--trans); }
.linea:hover .linea-ir::after { margin-left: 5px; }

/* ============================================================
   EL MANIFIESTO
   El texto va tal cual está impreso en la contraetiqueta del Blend.
   ============================================================ */
.manifiesto { --tinte-txt: var(--luna); background: var(--carbon); }
.dos-col-man { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 5vw, 60px); }
@media (min-width: 860px) {
  .dos-col-man { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 88px); align-items: center; }
}
.versos {
  margin: 0; padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3vw, 38px);
  border-left: 2px solid var(--luna); background: var(--negro); border-radius: var(--radio);
}
.versos p {
  margin: 0 0 .42em; font-size: clamp(1.02rem, 2.1vw, 1.24rem); line-height: 1.5;
  color: var(--hueso); text-wrap: balance;
}
.versos p:last-child { margin-bottom: 0; color: var(--luna); }

/* ============================================================
   EL FEED
   ============================================================ */
.feed { padding-bottom: clamp(48px, 6vw, 84px); }
.feed-cab { display: grid; gap: 26px; align-items: end; }
@media (min-width: 860px) { .feed-cab { grid-template-columns: 1fr auto; gap: 40px; } }
.ig-btn {
  display: inline-flex; align-items: center; gap: 10px; align-self: end;
  padding: 12px 18px; border: 1px solid var(--borde); border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  transition: border-color var(--trans), color var(--trans);
}
.ig-btn svg { width: 20px; height: 20px; flex: none; }
.ig-btn:hover { border-color: var(--hueso); }
.feed-grilla {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  width: min(100% - 40px, var(--ancho)); margin: 38px auto 0;
}
@media (min-width: 700px) { .feed-grilla { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.feed-foto { display: block; overflow: hidden; border-radius: var(--radio); line-height: 0; }
.feed-foto img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1), opacity var(--trans);
}
.feed-foto:hover img { transform: scale(1.05); opacity: .82; }
.feed-pie { margin-top: 34px; text-align: center; }

/* ---------- Llamada ---------- */
.cta {
  background: var(--grafito); border-block: 1px solid var(--borde);
  padding: clamp(56px, 7vw, 96px) 0; text-align: center;
}
.cta h2 { font-family: var(--display); font-size: clamp(1.7rem, 4.6vw, 2.6rem); letter-spacing: -.02em; }
.cta p { color: var(--humo); max-width: 56ch; margin: 18px auto 30px; }
.cta-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- Formulario ---------- */
.form { display: grid; gap: 16px; margin-top: 34px; max-width: 560px; }
.form label {
  display: grid; gap: 7px;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--humo);
}
.form input, .form textarea {
  padding: 13px 14px; background: var(--carbon); border: 1px solid var(--borde);
  border-radius: var(--radio); color: var(--hueso); font: inherit; font-size: .96rem;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--tinte); }
.form button { justify-self: start; }
.oculto { position: absolute; left: -9999px; }

/* ============================================================
   PÁGINA DE LÍNEA
   ============================================================ */
.cabezal {
  position: relative; overflow: hidden;
  padding: clamp(52px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--borde);
}
.cabezal::before {
  content: ""; position: absolute; inset: -60% 0 auto; height: 160%;
  background: radial-gradient(ellipse 50% 45% at 22% 40%,
              color-mix(in srgb, var(--tinte) 20%, transparent), transparent 70%);
  pointer-events: none;
}
.cabezal .contenedor { position: relative; }
.cabezal h1 {
  font-family: var(--display); font-size: clamp(2.1rem, 6.4vw, 3.6rem);
  letter-spacing: -.03em; margin-bottom: 18px;
}
.cabezal .bajada { color: var(--humo); max-width: 62ch; }

.fichas { display: grid; }
.ficha {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  width: min(100% - 40px, var(--ancho)); margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 0; border-bottom: 1px solid var(--borde);
  scroll-margin-top: 90px;
}
@media (min-width: 820px) {
  .ficha { grid-template-columns: 320px 1fr; gap: clamp(40px, 6vw, 80px); }
  /* Al alternar el lado hay que dar vuelta también las columnas: si no, el
     texto de las fichas pares cae en la columna angosta de la foto. */
  .ficha:nth-child(even) { grid-template-columns: 1fr 320px; }
  .ficha:nth-child(even) .ficha-foto { order: 2; }
}
.ficha-foto {
  position: relative; display: grid; place-items: center; padding: 30px 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
              color-mix(in srgb, var(--vino) 22%, transparent), transparent 72%);
}
.ficha-foto img {
  width: auto; height: clamp(300px, 46vw, 460px); max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .6));
}
.ficha-txt h2 { font-family: var(--display); font-size: clamp(1.5rem, 3.6vw, 2.1rem); letter-spacing: -.02em; }
.ficha-txt h3 {
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--vino-txt); margin: 26px 0 8px;
}
.ficha-txt p { color: var(--humo); }
.ficha-txt .copete { color: var(--hueso); font-size: 1.04rem; margin-top: 14px; }
.ficha-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px;
  margin: 24px 0 0; padding: 18px 0; border-block: 1px solid var(--borde);
}
.ficha-datos dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tenue);
}
.ficha-datos dd { margin: 6px 0 0; font-size: .96rem; }

.otras-lineas { padding: clamp(44px, 6vw, 72px) 0; }
.otras { display: flex; flex-wrap: wrap; gap: 12px; }
.otras a {
  padding: 13px 20px; border: 1px solid var(--borde); border-radius: var(--radio);
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: border-color var(--trans), color var(--trans);
}
.otras a:hover { border-color: var(--hueso); }

/* ---------- Gracias ---------- */
.gracias { padding: clamp(80px, 12vw, 160px) 0; text-align: center; }
.gracias-orejas { width: 54px; height: auto; color: var(--tinte-txt); margin: 0 auto 30px; }
.gracias h1 { font-family: var(--display); font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.03em; }
.gracias p { color: var(--humo); max-width: 46ch; margin: 18px auto 0; }

/* ============================================================
   PIE
   ============================================================ */
.pie { border-top: 1px solid var(--borde); padding: clamp(46px, 6vw, 72px) 0 30px; }
.pie-grid {
  display: grid; grid-template-columns: 1fr; gap: 34px;
  width: min(100% - 40px, var(--ancho)); margin: 0 auto;
}
@media (min-width: 720px) { .pie-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.pie-marca { width: 130px; height: auto; color: var(--hueso); }
.pie-grupo { margin-top: 18px; font-size: .84rem; color: var(--tenue); }
.pie-grupo a:hover { color: var(--hueso); }
.pie h4 {
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 14px;
}
.pie-grid a { display: block; padding: 7px 0; color: var(--humo); font-size: .92rem; }
.pie-grid a:hover { color: var(--hueso); }
.pie-fin {
  width: min(100% - 40px, var(--ancho)); margin: 44px auto 0; padding-top: 22px;
  border-top: 1px solid var(--borde);
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
}
.pie-fin p { margin: 0; font-size: .76rem; color: var(--tenue); }
.pie-fin .beber { letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .botella:hover .bot-foto img { transform: none; }
}

/* El sprite de los símbolos no ocupa lugar */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }