/* =========================================================
   Vista de bodega: las botellas paradas en repisas.
   ========================================================= */

.bodega{ background:var(--hueso); }

#estantes{ padding:56px 0 120px; }

/* ---------------- sección por categoría ---------------- */
.seccion{ position:relative; padding:26px 0 64px; }
.seccion + .seccion{ border-top:1px solid var(--linea-soft); }

/* el nombre de la sección vive detrás de las botellas */
.rotulo{
  position:absolute; left:0; right:0; top:96px; z-index:0;
  font-family:var(--serif); font-size:clamp(78px,13vw,190px);
  line-height:.9; font-weight:300; letter-spacing:-.02em;
  color:rgba(22,19,15,.072);
  text-align:center; pointer-events:none; user-select:none;
  will-change:transform;
}
.seccion-cab{
  position:relative; z-index:2; display:flex; align-items:baseline;
  justify-content:space-between; gap:20px; margin-bottom:6px;
}
.seccion-cab h2{ font-family:var(--serif); font-size:26px; font-weight:400; }
.seccion-cab span{ color:var(--tinta-40); }

/* ---------------- la repisa ---------------- */
.repisa{ position:relative; z-index:1; margin-top:52px; }
.repisa-fila{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(10px,2.2vw,34px); padding:0 4px;
  border-bottom:1px solid rgba(22,19,15,.22);
  min-height:276px;
}
.repisa-fila + .repisa-fila{ margin-top:74px; }

.botella{
  position:relative; flex:none; background:none; padding:0 0 3px;
  cursor:pointer; line-height:0;
  transition:transform .5s var(--ease);
  transform-origin:bottom center;
}
.botella img{
  height:clamp(132px,17vw,214px); width:auto; display:block;
  filter:drop-shadow(0 10px 14px rgba(22,19,15,.16));
  transition:filter .5s var(--ease);
}
.botella:hover{ transform:translateY(-14px); }
.botella:hover img{ filter:drop-shadow(0 22px 24px rgba(22,19,15,.24)); }
.botella:focus-visible{ outline:1px solid var(--tinta); outline-offset:6px; }
.botella.viajando{ opacity:0; }

/* etiqueta que asoma al pasar el mouse */
/* La etiqueta va ARRIBA de la botella: todas las botellas se renderizan a la
   misma altura, así que queda siempre a la misma distancia y nunca la corta
   la fila siguiente ni la línea del piso. */
.botella .rotulito{
  position:absolute; left:50%; bottom:calc(100% + 14px); transform:translateX(-50%);
  text-align:center;
  white-space:nowrap; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-40); opacity:0; transition:opacity .35s var(--ease);
  line-height:1.4; pointer-events:none;
}
.botella:hover .rotulito{ opacity:1; }

/* ---------------- ficha de la botella ---------------- */
.detalle{
  position:fixed; inset:0; z-index:95; background:var(--hueso);
  opacity:0; pointer-events:none; overflow-y:auto;
  transition:opacity .45s var(--ease);
}
.detalle.abierto{ opacity:1; pointer-events:auto; }
.cerrar-detalle{
  position:fixed; top:30px; right:34px; z-index:3;
  text-transform:uppercase; letter-spacing:.2em; font-size:10px; color:var(--tinta-40);
  border-bottom:1px solid var(--linea); padding-bottom:3px;
}
.cerrar-detalle:hover{ color:var(--tinta); border-color:var(--tinta); }

.detalle-caja{
  max-width:560px; margin:0 auto; padding:88px 32px 96px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
/* La caja es flex en columna con align-items:center, así que sus hijos se
   encogen al contenido. Sin width:100% aquí, el max-width en % de la imagen
   se medía contra la propia imagen y la botella nunca llegaba a su tamaño.
   El max-height es lo que manda; el height en % no resuelve en este contenedor. */
.detalle-foto{ display:flex; justify-content:center; align-items:flex-end; width:100%; }
.detalle-foto img{
  width:auto; height:auto;
  max-height:min(68vh,600px); max-width:80%;
  filter:drop-shadow(0 26px 34px rgba(22,19,15,.2));
  opacity:0; transition:opacity .3s var(--ease);
}
.detalle.listo .detalle-foto img{ opacity:1; }

.detalle-txt{ width:100%; margin-top:44px; }
.detalle-txt .casa{ color:var(--tinta-40); }
.detalle-txt h2{
  font-family:var(--serif); font-size:clamp(38px,5.6vw,54px);
  font-weight:400; line-height:1.08; margin-top:16px;
}
.ficha-datos{
  margin-top:40px; text-align:left;
  border-top:1px solid var(--linea);
}
.ficha-datos div{
  display:flex; justify-content:space-between; gap:24px;
  padding:15px 2px; border-bottom:1px solid var(--linea-soft);
  font-size:13px;
}
.ficha-datos dt{ color:var(--tinta-40); letter-spacing:.03em; }
.ficha-datos dd{ text-align:right; }
.detalle .sabor{
  font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.5;
  color:var(--tinta-70); margin-top:34px;
}
.detalle-pie{
  margin-top:44px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.detalle-pie .precio{ font-family:var(--serif); font-size:34px; }
.detalle-pie .agregar{ padding:14px 30px; }

/* la botella que viaja de la repisa a la ficha */
.volando{
  position:fixed; z-index:120; pointer-events:none; margin:0;
  filter:drop-shadow(0 20px 26px rgba(22,19,15,.22));
  transition:transform .62s cubic-bezier(.32,.72,0,1), opacity .3s linear;
  transform-origin:top left; will-change:transform;
}

@media (max-width:860px){
  #estantes{ padding:34px 0 90px; }
  .repisa-fila{ min-height:206px; gap:12px; overflow-x:auto; overflow-y:visible; padding-bottom:2px; }
  .repisa-fila::-webkit-scrollbar{ display:none; }
  .detalle-caja{ padding:74px 22px 80px; }
  .detalle-foto img{ max-height:min(62vh,540px); max-width:74%; }
}
@media (prefers-reduced-motion:reduce){
  .volando{ transition:none; }
  .botella:hover{ transform:none; }
}

/* ------------------ buscador de la bodega ------------------ */
.buscador-bodega{ display:flex; align-items:center; gap:9px; }
.lupa{
  display:grid; place-items:center; width:26px; height:26px;
  color:var(--tinta-40); transition:color .3s var(--ease);
}
.lupa:hover, .buscador-bodega.abierto .lupa{ color:var(--tinta); }
#buscar-bodega{
  width:0; opacity:0; padding:0; border:none; background:none; outline:none;
  border-bottom:1px solid var(--linea);
  font-size:12.5px; letter-spacing:.05em;
  transition:width .42s var(--ease), opacity .3s var(--ease), padding .42s var(--ease);
}
.buscador-bodega.abierto #buscar-bodega{ width:200px; opacity:1; padding:5px 2px; }
#buscar-bodega::placeholder{ color:var(--tinta-40); }
.cuenta-busqueda{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-40); white-space:nowrap; opacity:0;
  transition:opacity .3s var(--ease);
}
.buscador-bodega.abierto .cuenta-busqueda{ opacity:1; }

/* al buscar, las que no calzan se apagan */
.botella{ transition:transform .5s var(--ease), opacity .35s var(--ease); }
.botella.apagada{ opacity:.14; pointer-events:none; }
.botella.apagada .rotulito{ display:none; }
.seccion.vacia{ display:none; }

@media (max-width:860px){
  .buscador-bodega.abierto #buscar-bodega{ width:126px; }
  .cuenta-busqueda{ display:none; }
}

/* ------------------ pie de la bodega ------------------ */
.pie-bodega{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  max-width:1180px; margin:0 auto; padding:30px 34px 46px;
  border-top:1px solid var(--linea-soft);
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--tinta-40);
}
.pie-bodega a{ color:var(--tinta-70); transition:color .3s var(--ease); }
.pie-bodega a:hover{ color:var(--tinta); }
@media (max-width:860px){
  .pie-bodega{ padding:24px 22px 38px; font-size:10.5px; }
}