/* ============================================================
   WaterGo · la página de botellas

   Lo que faltaba y pide esta hoja: enseñar TODO el producto. Las
   nueve combinaciones, los dos tapones puestos, la botella en la
   mano de alguien y los macros del cuello y de la base. Una tienda
   de consumo se sostiene sobre su fotografía; con tres recortes de
   catálogo se hace una página correcta, nunca una que venda.
   ============================================================ */

/* ---------- Las nueve ----------
   Tres filas de acabado por tres columnas de talla. Es la rejilla
   que contesta de un vistazo a «¿el azul viene en litro?». */

.nueve {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nueve__pieza {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(14px, 2vw, 26px) var(--e-4) var(--e-5);
  border-radius: var(--r-m);
  background: var(--tinte);
  text-align: center;
  transition: transform var(--dur-panel, 260ms) cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow var(--dur-panel, 260ms) cubic-bezier(0.16, 1, 0.3, 1);
}

.nueve__pieza:hover,
.nueve__pieza:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sombra-m);
}

/* Las tres tallas comparten línea de suelo y crecen de verdad: es
   lo que hace que la rejilla se lea como una carta de tamaños y no
   como nueve fotos sueltas. */
.nueve__foto {
  display: block;
  height: var(--alto);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: var(--e-4);
}

.nueve__nombre {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.nueve__nombre a { color: inherit; text-decoration: none; }
.nueve__nombre a::after { content: ""; position: absolute; inset: 0; }

.nueve__precio {
  font-family: var(--f-mono);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
  margin: 3px 0 0;
}

.nueve__cab {
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: clamp(20px, 2.6vw, 34px) 0 var(--e-4);
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.nueve__cab::before {
  content: "";
  width: 15px; height: 15px;
  border-radius: 999px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(29,29,27,.16);
  flex: none;
}

.nueve__cab::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

@media (max-width: 520px) {
  .nueve { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .nueve__pieza { padding: var(--e-3) 4px var(--e-4); }
  .nueve__nombre { font-size: .82rem; }
  .nueve__precio { font-size: .74rem; }
}


/* ---------- Mosaico de usos ----------
   Rejilla rota a propósito: dos piezas grandes y cuatro pequeñas.
   Seis fotos del mismo tamaño se leen como un catálogo de stock; en
   cuanto una manda, la fila cuenta algo. */

.usos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.uso {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--tinte-nude);
  aspect-ratio: 4 / 5;
}

.uso--ancho { grid-column: span 2; aspect-ratio: 8 / 5; }

.uso img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.uso:hover img { scale: 1.045; }

.uso__et {
  position: absolute;
  left: var(--e-4);
  bottom: var(--e-4);
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: #F7F3F0;
  padding: 7px 13px;
  border-radius: 999px;
  /* Subida del .55 al .68. El velo va sobre la foto, así que el peor
     caso es una foto clara: al 55 % el crema sobre el velo daba 3,75:1
     y son 11 px, que exigen 4,5:1. Al 68 % el fondo compuesto no pasa
     de #6F6E6C ni sobre blanco puro, y el ratio se queda en 4,9:1. */
  background: rgba(29,29,27,.68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (max-width: 860px) {
  .usos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uso--ancho { grid-column: span 2; }
}


/* ---------- Bebidas: no solo agua ---------- */

.bebidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bebida {
  padding: clamp(16px, 2vw, 24px);
  border-radius: var(--r-m);
  background: var(--color-surface);
  box-shadow: var(--sombra-s);
}

.bebida h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  margin: 0 0 var(--e-2);
}

.bebida p {
  font-family: var(--f-body);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--color-secondary);
  margin: 0;
}

.bebida__t {
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
  margin-bottom: var(--e-3);
}


/* ---------- Macros: el detalle ----------
   Recorte en círculo, que es la forma del logotipo. Aquí sí toca:
   son detalles, y el círculo obliga a mirar al centro. */

.detalles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: clamp(12px, 1.8vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.detalle {
  text-align: center;
}

.detalle__disco {
  display: block;
  aspect-ratio: 1;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tinte-nude);
  margin-bottom: var(--e-4);
}

.detalle__disco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.detalle:hover .detalle__disco img { scale: 1.06; }

.detalle p {
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}


/* ---------- Los dos tapones, puestos ---------- */

.tapones-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 26px);
}

.tapon-puesto {
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--tinte);
  padding: clamp(14px, 2vw, 24px);
}

.tapon-puesto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  /* Las dos fotos de esta pareja NO son iguales: la del tapón de pajita
     es un PNG con fondo blanco y necesita multiply para fundirse con el
     tinte; la de gama ya viene recortada con alfa y con multiply el
     tinte le comería el color. Se distinguen por la ruta. */
  mix-blend-mode: multiply;
}

.tapon-puesto img[src*="/gama/"] { mix-blend-mode: normal; }

.tapon-puesto h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.12rem;
  margin: var(--e-4) 0 var(--e-2);
}

.tapon-puesto p {
  font-family: var(--f-body);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--color-secondary);
  margin: 0;
}

.tapon-puesto__precio {
  font-family: var(--f-mono);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  margin-top: var(--e-3) !important;
  color: var(--color-on-background) !important;
}

@media (max-width: 620px) {
  .tapones-par { grid-template-columns: 1fr; }
}


/* ══════════ «DE CERCA» · LA LUPA ══════════
   Una tira de piezas y, debajo, la que está abierta a tamaño grande
   con su explicación. Sustituye a seis discos que solo tenían un pie
   de foto y a la sección suelta de los tapones.

   ⚠️ Los paneles se esconden con el atributo `hidden` desde el HTML.
   Si aquí se pusiera `display: grid` a secas, ganaría al `hidden` —que
   es solo `display: none` del navegador— y se verían los cinco a la
   vez. De ahí el `:not([hidden])`. */

.lupa__tiras {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 18px);
  list-style: none;
  margin: 0 0 clamp(20px, 3vw, 36px);
  padding: 0;
}

.lupa__disco {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.lupa__disco img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--tinte-nude);
  /* el aro no ocupa sitio: va por dentro, así que al marcarse no
     empuja a los vecinos ni un píxel */
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow var(--dur-micro) var(--ease-out),
              scale 420ms var(--muelle, cubic-bezier(.16,1,.3,1)),
              filter var(--dur-micro) var(--ease-out);
  filter: saturate(.85);
}

.lupa__et {
  display: block;
  margin-top: var(--e-3);
  font-family: var(--f-mono);
  font-size: var(--t-dato);
  letter-spacing: var(--ls-dato);
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--dur-micro) var(--ease-out);
}

.lupa__disco:hover img { scale: 1.04; filter: saturate(1); }
.lupa__disco[aria-expanded="true"] img {
  box-shadow: inset 0 0 0 2px var(--tinta);
  filter: saturate(1);
}
.lupa__disco[aria-expanded="true"] .lupa__et { color: var(--color-on-background); }
.lupa__disco:focus-visible img { outline: 2px solid var(--color-ring); outline-offset: 4px; }

/* ---- el panel ---- */

.lupa__panel:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 32px);
  border-radius: var(--r-g);
  background: var(--tinte-nude);
}

.lupa__foto { margin: 0; }
.lupa__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-m);
  background: var(--blanco);
}

.lupa__texto h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
  margin: 0 0 var(--e-4);
}
.lupa__texto p {
  color: var(--color-secondary);
  max-width: 46ch;
}
.lupa__texto p + p { margin-top: var(--e-4); }
.lupa__texto strong { color: var(--color-on-background); font-weight: 600; }
.lupa__texto a { color: var(--color-on-background); text-underline-offset: 3px; }

.lupa__pie {
  margin-top: var(--e-5);
  font-size: var(--t-small);
  color: var(--color-muted);
}

@media (max-width: 760px) {
  /* Cinco discos a 390 px de ancho salen a 60 px cada uno y no se
     distingue qué es cada foto. En dos filas se ven. */
  .lupa__tiras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
  .lupa__panel:not([hidden]) { grid-template-columns: 1fr; gap: var(--e-5); }
}


/* ══════════ VISOR DE FOTO A PANTALLA COMPLETA ══════════
   <dialog> nativo: el cierre con Escape, el foco atrapado y el fondo
   inerte vienen de serie. */

.es-ampliable img { cursor: zoom-in; }

.visor-foto {
  width: 100vw; max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0;
  background: transparent;
  overflow: hidden;
}
.visor-foto::backdrop { background: rgba(29, 29, 27, .88); }

.visor-foto__caja {
  display: grid;
  place-items: center;
  gap: var(--e-4);
  width: 100%; height: 100%;
  padding: clamp(16px, 4vw, 48px);
}
.visor-foto__caja img {
  max-width: 100%;
  /* deja sitio al pie y al botón: sin esto, en horizontal la foto
     empuja el texto fuera de la pantalla */
  max-height: calc(100dvh - 160px);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-m);
}
.visor-foto__pie {
  max-width: 60ch;
  text-align: center;
  font-size: var(--t-small);
  color: #CFCAC4;
}

.visor-foto__cerrar {
  position: absolute;
  top: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 22px);
  width: var(--toque-min); height: var(--toque-min);
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(247,243,240,.35);
  background: rgba(29,29,27,.5);
  color: #F7F3F0;
  font-size: 1.2rem;
  cursor: pointer;
}
.visor-foto__cerrar:hover { background: rgba(29,29,27,.8); border-color: #F7F3F0; }


/* ---------- la frase buscable encima del titular ----------
   Mismo patrón que .heroe-mundo__ante en la portada, que es el único
   <h1> del sitio que ya lo hacía bien: la frase que la gente escribe
   en Google va delante y pequeña, el lema se queda igual de grande, y
   el buscador lee el <h1> entero como un solo titular.

   Vive aquí y no en pagina.css porque esta hoja es de este agente.
   Por eso /botellas/comparar carga catalogo.css: la usa solo para
   esta regla, y a esa página se llega casi siempre desde /botellas,
   donde la hoja ya está en caché. */

.cabeza__ante {
  display: block;
  font-family: var(--f-body);
  font-size: clamp(.8rem, 1.1vw, .95rem);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.35;
  color: color-mix(in srgb, var(--tinta) 60%, transparent);
  margin: 0 0 .9em;
  text-wrap: balance;
}