/* ============================================================
   WaterGo · ficha de producto

   Hereda base, primitivas, cabecera, botones y pie de estilo.css.
   Aquí solo lo que la ficha añade. Ni un color nuevo: todo sale
   de tokens.css.

   El acabado elegido pinta la página entera a través de dos
   variables que el JS escribe en .ficha-compra:
     --c      pastel pleno (muestra, aro, bloque ODS)
     --tinte  el mismo pigmento diluido (carcasas del doble bisel)

   Reglas de página en design-system/pages/ficha-producto.md
   ============================================================ */

/* ---------- migas ---------- */

.migas {
  padding-top: clamp(88px, 11vw, 132px);
  padding-bottom: var(--e-5);
  font-size: var(--t-small);
  color: var(--color-muted);
}
.migas ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
}
.migas a { text-decoration: none; color: var(--color-secondary); }
.migas a:hover { text-decoration: underline; text-underline-offset: 3px; }
.migas__sep { color: var(--color-border); }
.migas [aria-current] { color: var(--color-on-background); }


/* ---------- el bloque de compra ---------- */

.ficha-compra {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-bottom: var(--pad-seccion);
}


/* ---------- galería ---------- */

.galeria { min-width: 0; }

/* doble bisel: carcasa teñida con el acabado + núcleo blanco */
.galeria__marco {
  position: relative;
  background: linear-gradient(160deg,
              var(--tinte) 0%,
              color-mix(in srgb, var(--tinte) 30%, var(--blanco)) 100%);
  border-radius: var(--r-g);
  padding: clamp(10px, 1.6vw, 18px);
  border: 1px solid color-mix(in srgb, var(--tinta) 5%, transparent);
  box-shadow: var(--sombra-l);
  transition: background var(--dur-panel) var(--ease-out);
}

/* el hueco declara la proporción: la foto entra sin mover nada */
.galeria__hueco {
  position: relative;
  aspect-ratio: 1;
  background: var(--blanco);
  border-radius: calc(var(--r-g) - 12px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9);
  overflow: hidden;
}
.galeria__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(12px, 2.4vw, 32px);
  transition: opacity var(--dur-micro) var(--ease-out);
}
.galeria__hueco.esta-cambiando .galeria__foto { opacity: 0; }

/* pulsar amplía · en táctil funciona igual que con ratón, que es
   justo lo que la lupa al pasar el ratón no hace */
.galeria__lupa {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: transparent; border: 0;
  cursor: zoom-in;
}

.galeria__miniaturas {
  list-style: none; margin: var(--e-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e-3);
}
.mini {
  width: 64px; height: 64px;
  padding: 5px;
  background: var(--blanco);
  border: 1px solid var(--color-border);
  border-radius: var(--r-m);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-suave),
              box-shadow var(--dur-micro) var(--ease-out);
}
.mini img { width: 100%; height: 100%; object-fit: contain; }
.mini:hover { transform: translateY(-2px); box-shadow: var(--sombra-s); }
.mini[aria-current="true"] {
  border-color: var(--tinta);
  box-shadow: 0 0 0 1px var(--tinta);
}


/* ---------- visor a pantalla completa ---------- */

.visor {
  border: 0; padding: 0;
  width: min(94vw, 900px);
  background: transparent;
}
.visor::backdrop { background: rgba(29,29,27,.72); backdrop-filter: blur(6px); }
.visor__caja {
  position: relative;
  background: var(--blanco);
  border-radius: var(--r-g);
  padding: clamp(12px, 2vw, 24px);
  box-shadow: var(--sombra-l);
}
.visor__img { width: 100%; height: auto; border-radius: var(--r-m); }
.visor__cerrar {
  position: absolute; top: var(--e-3); right: var(--e-3);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tinta) 6%, var(--blanco));
  border: 0; border-radius: var(--r-l);
  font-size: 1.2rem; line-height: 1;
  cursor: pointer;
}


/* ---------- columna de compra ---------- */

.compra { min-width: 0; display: flex; flex-direction: column; }

.compra__nombre {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  letter-spacing: -0.04em;
}
.compra__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3);
  margin-top: var(--e-3);
  color: var(--color-muted);
}
.compra__ods {
  display: inline-flex; align-items: center; gap: var(--e-2);
  color: var(--color-secondary);
}
.compra__ods::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--c);
  border: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
  transition: background var(--dur-micro) var(--ease-out);
}

.compra__entrada {
  margin-top: var(--e-5);
  color: var(--color-secondary);
  max-width: 46ch;
}

/* el precio no cambia de ancho al cambiar de cifra: cifras
   tabulares y un ancho mínimo reservado */
.compra__precio {
  margin-top: var(--e-6);
  display: flex; align-items: baseline; gap: var(--e-3);
}
.precio__cifra {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.01em;
  transition: opacity 180ms var(--ease-out);
}
.compra__precio.esta-cambiando .precio__cifra { opacity: 0; }
.precio__nota { font-size: var(--t-small); color: var(--color-muted); }

.compra__grupo { margin-top: var(--e-6); }
.compra__et {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-3);
  color: var(--color-secondary);
}
.compra__et b {
  font-family: var(--f-body); font-weight: 400;
  font-size: var(--t-small);
  color: var(--color-on-background);
  letter-spacing: 0; text-transform: none;
}


/* ---------- muestras de acabado ---------- */

.muestras { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.muestras > div { position: relative; }

.muestras input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.muestra {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--m);
  /* borde interior para que el Nude no desaparezca sobre el blanco */
  box-shadow: inset 0 0 0 1px var(--color-border-strong),
              inset 0 2px 4px rgba(255,255,255,.6);
  transition: transform var(--dur-micro) var(--ease-suave),
              box-shadow var(--dur-micro) var(--ease-out);
}
.muestra::after {
  content: "";
  width: 13px; height: 8px;
  border-left: 2px solid var(--tinta);
  border-bottom: 2px solid var(--tinta);
  transform: rotate(-45deg) scale(.4);
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-suave);
}
.muestras input:hover + .muestra { transform: scale(1.06); }
/* seleccionado: aro de 2px MÁS marca de verificación — se distingue
   sin ver el color */
.muestras input:checked + .muestra {
  box-shadow: inset 0 0 0 1px var(--color-border-strong),
              0 0 0 2px var(--tinta);
}
.muestras input:checked + .muestra::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.muestras input:focus-visible + .muestra {
  outline: 2px solid var(--color-ring); outline-offset: 4px;
}
.muestra__et {
  display: block;
  margin-top: var(--e-2);
  text-align: center;
  color: var(--color-muted);
}


/* ---------- selector de tamaño · navega, luego son enlaces ---------- */

.tamanos { display: flex; align-items: center; gap: var(--e-2); }
.tamano {
  display: grid; place-items: center;
  width: var(--toque-min); height: var(--toque-min);
  border-radius: var(--r-l);
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.tamano:hover { background: color-mix(in srgb, var(--tinta) 5%, transparent); }
.tamano i {
  display: block;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.tamano:hover i { border-color: var(--tinta); }
.tamano[aria-current="page"] i { background: var(--tinta); border-color: var(--tinta); }
.tamanos__pie {
  display: flex; gap: var(--e-2);
  margin-top: var(--e-2);
  color: var(--color-muted);
}
.tamanos__pie span { width: var(--toque-min); text-align: center; }


/* El control segmentado del tapón (.tapones / .tapon) vive ahora en
   estilo.css: lo comparten esta ficha y el simulador de la landing. */


/* ---------- añadir a la cesta ---------- */

.compra__cta { margin-top: var(--e-7); }

/* el ancho no se mueve al pasar a "añadiendo": el texto va en capas
   superpuestas, no reemplazado */
.btn--cesta { position: relative; width: 100%; }
.btn--cesta span { transition: opacity var(--dur-salida) var(--ease-out); }
.btn--cesta .btn__estado {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0;
}
.btn--cesta.esta-cargando .btn__texto { opacity: 0; }
.btn--cesta.esta-cargando .btn__estado { opacity: 1; }

.compra__envio {
  margin-top: var(--e-4);
  text-align: center;
  font-size: var(--t-small);
  color: var(--color-muted);
}

/* agotado · nunca un botón muerto */
.aviso-stock { margin-top: var(--e-7); }
.aviso-stock[hidden] { display: none; }
.aviso-stock__texto { color: var(--color-secondary); font-size: var(--t-small); }
.aviso-stock__forma { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-3); }
.aviso-stock input[type="email"] {
  flex: 1 1 200px;
  min-height: var(--toque-min);
  padding-inline: var(--e-4);
  font: inherit; font-size: var(--t-body);
  color: var(--color-on-background);
  background: var(--blanco);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-l);
}


/* ---------- barra fija de móvil ---------- */

.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-3) var(--canal);
  padding-bottom: max(var(--e-3), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--blanco) 88%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid color-mix(in srgb, var(--tinta) 8%, transparent);
  transform: translateY(110%);
  transition: transform var(--dur-panel) var(--ease-out);
}
.barra-movil.esta-visible { transform: translateY(0); }
/* hueco al final de la página para que la barra no tape el pie.
   Solo donde la barra existe: a partir de 900px se retira. */
@media (max-width: 899px) {
  body { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }
}
.barra-movil__precio {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
}
.barra-movil__variante { display: block; color: var(--color-muted); }
.barra-movil .btn { margin-left: auto; flex: none; }


/* ---------- cinta de cerámica ---------- */

.cinta-ceramica { background: var(--color-surface-alt); padding-block: var(--e-8); }
.cinta-ceramica__cuerpo {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--e-5);
}
.cinta-ceramica__frase {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  max-width: 30ch;
}
.cinta-ceramica__frase b { font-weight: 700; }


/* ---------- ficha técnica ----------
   Lo genérico de las tablas (.tabla, .tabla-scroll, .marca-prov,
   .nota-tabla) vive en estilo.css: lo comparte con /truesip. */

.ficha { background: var(--tinte-azul); }

.tabla--ficha tbody th { white-space: nowrap; padding-right: var(--e-5); }

.tabla--unica tbody th { width: 42%; white-space: nowrap; padding-right: var(--e-5); }
.tabla--unica td { color: var(--color-on-background); }
.tabla--unica [data-provisional] { color: var(--color-secondary); }


/* ---------- bloque de ODS · pastel a superficie plena ---------- */

.ods {
  background: var(--c);
  color: var(--tinta);
  padding-block: var(--pad-seccion);
  transition: background var(--dur-panel) var(--ease-out);
}
.ods__cuerpo {
  display: grid; gap: var(--e-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.ods .cintillo {
  color: var(--tinta);
  background: color-mix(in srgb, var(--tinta) 7%, transparent);
  border-color: color-mix(in srgb, var(--tinta) 14%, transparent);
}
.ods__titulo { font-size: var(--t-h2); }
.ods__nota { margin-top: var(--e-4); max-width: 48ch; }
.ods__enlace {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--toque-min);
  margin-top: var(--e-5);
  font-family: var(--f-display); font-weight: 600;
  text-underline-offset: 5px;
}
.ods__cifra {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.4rem, 9vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.ods__cifra small { display: block; font-size: var(--t-dato); letter-spacing: var(--ls-dato); margin-top: var(--e-3); }


/* ---------- acordeón ---------- */

.acordeon { display: grid; gap: var(--e-3); max-width: 760px; }
.plegable {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--tinta) 6%, transparent);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-s);
  overflow: hidden;
}
.plegable summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--toque-min);
  padding: var(--e-4) var(--e-5);
  cursor: pointer;
  font-family: var(--f-display); font-weight: 600;
  list-style: none;
}
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary::after {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--color-secondary);
  border-bottom: 1.5px solid var(--color-secondary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-micro) var(--ease-suave);
}
.plegable[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.plegable__cuerpo {
  padding: 0 var(--e-5) var(--e-5);
  color: var(--color-secondary);
  max-width: 62ch;
}
.plegable__cuerpo p + p { margin-top: var(--e-3); }


/* ---------- otros tamaños ---------- */

.otros__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-5);
  grid-template-columns: minmax(0, 1fr);
}
.otro {
  display: flex; align-items: center; gap: var(--e-4);
  background: var(--tinte-nude);
  border: 1px solid color-mix(in srgb, var(--tinta) 5%, transparent);
  border-radius: var(--r-g);
  padding: 8px;
  text-decoration: none;
  box-shadow: var(--sombra-s);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.otro:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); }
.otro__foto {
  flex: none;
  width: 112px; height: 112px;
  display: grid; place-items: center;
  background: var(--blanco);
  border-radius: calc(var(--r-g) - 8px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9);
  padding: var(--e-2);
}
.otro__foto img { max-height: 100%; width: auto; }
.otro__datos { padding-right: var(--e-4); }
.otro__nombre { font-size: var(--t-h3); }
.otro__linea { margin-top: var(--e-2); color: var(--color-muted); }
.otro__precio { margin-top: var(--e-3); font-size: 1.1rem; text-transform: none; letter-spacing: 0; }


/* ---------- puntos de ruptura ---------- */

@media (min-width: 700px) {
  .otros__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ods__cuerpo { grid-template-columns: 1.4fr .6fr; gap: var(--e-8); }
  .ods__cifra { text-align: right; }
}

@media (min-width: 900px) {
  .ficha-compra { grid-template-columns: 1.06fr .94fr; }

  /* la galería acompaña mientras se leen los datos */
  .galeria { position: sticky; top: 96px; }

  /* con el botón siempre a la vista, la barra fija sobra */
  .barra-movil { display: none; }
}


/* El chip de ODS va sobre el pastel a sangre, y ahí el gris se lava:
   sobre Pink daba 2,51:1. Sobre color, el secundario tiene que ser la
   propia tinta rebajada, nunca un gris. */
.ods .causa__ods { color: color-mix(in srgb, var(--tinta) 72%, transparent); }
.ods .causa__ods b {
  color: var(--tinta);
  border-color: color-mix(in srgb, var(--tinta) 32%, transparent);
}