/* =============================================================================
   LA FICHA DE PRODUCTO (01-10-2026) — va encima de tienda.css.
   Imágenes que se mueven al bajar, a la izquierda; lo de comprar, quieto, a la
   derecha; e INSPIRACIÓN abajo del todo. La lógica está en assets/js/ficha.js.
   ========================================================================== */

/* ---------- las imágenes ------------------------------------------------- */
.ficha--compra { align-items: start; }
.ficha__planos { display: grid; gap: 1rem; }
.plano {
  position: relative; margin: 0; overflow: hidden; height: min(84vh, 54rem);
  background: radial-gradient(closest-side, rgba(168, 129, 77, 0.14), transparent 80%), rgba(244, 239, 231, 0.025);
}
.plano[data-lupa] { cursor: zoom-in; }
.plano[data-lupa]:focus-visible { outline: 1px solid var(--oro); outline-offset: -1px; }
/* La capa se desliza al bajar (ficha.js); la foto, dentro, es la que se amplía. */
.plano__capa { position: absolute; inset: 0; will-change: transform; transition: transform 0.15s linear; }
.plano__capa img {
  position: absolute; inset: 6% 0; width: 100%; height: 88%; object-fit: contain;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* La lupa: ×2,4 desde donde está el ratón. */
.plano--lupa .plano__capa img { transform: scale(2.4); transition-duration: 0.45s; }
.plano__mas {
  position: absolute; right: 1.2rem; bottom: 1.2rem; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(244, 239, 231, 0.35);
  border-radius: 50%; opacity: 0.7; transition: opacity 0.4s;
}
.plano__mas::before, .plano__mas::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--tinta); }
.plano__mas::before { width: 11px; height: 1px; transform: translate(-50%, -50%); }
.plano__mas::after { width: 1px; height: 11px; transform: translate(-50%, -50%); }
.plano--lupa .plano__mas { opacity: 0; }

/* El nombre, gigante, detrás de la primera foto (como en Econnet). */
.palabra-fondo--ficha { font-size: min(calc(95vw / var(--largo, 6)), 20vw, 220px); z-index: 0; }
.plano__capa { z-index: 1; }

/* La etiqueta, de cerca: el mismo vial, mucho más grande y centrado en ella. */
.plano--cerca .plano__capa img { inset: auto; width: 100%; height: 250%; top: -100%; left: 0; }
.plano--estuche .plano__capa img { inset: 10% 6%; width: 88%; height: 80%; }
/* Los cinco cordes del estuche, en fila. */
.plano--fila .plano__capa { display: flex; align-items: center; justify-content: center; gap: 3%; padding: 0 6%; }
.plano--fila .plano__capa img { position: relative; inset: auto; width: auto; height: 62%; flex: 0 1 auto; min-width: 0; }

/* ---------- el visor: la foto a pantalla completa ------------------------ */
.visor {
  position: fixed; inset: 0; z-index: 200; background: rgba(9, 8, 6, 0.97);
  opacity: 0; visibility: hidden; transition: opacity 0.45s, visibility 0s 0.45s;
}
.visor--abierto { opacity: 1; visibility: visible; transition: opacity 0.45s; }
html.con-visor, html.con-visor body { overflow: hidden; }
.visor__lienzo { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; cursor: zoom-out; }
.visor__lienzo img { max-width: 92vw; max-height: 92vh; object-fit: contain; cursor: zoom-in; }
/* Ampliada: la foto crece y el lienzo se recorre arrastrando o con la rueda. */
.visor--cerca .visor__lienzo { display: block; text-align: center; }
.visor--cerca .visor__lienzo img { display: inline-block; max-width: none; max-height: none; height: 260vh; cursor: zoom-out; }
.visor__cerrar {
  position: fixed; top: 1rem; right: 1.2rem; z-index: 1; width: 3rem; height: 3rem;
  font-size: 1.8rem; line-height: 1; color: var(--tinta); background: transparent; cursor: pointer;
}

/* ---------- lo de comprar ------------------------------------------------ */
.ficha--compra .ficha__datos { padding-bottom: 2rem; }
.ficha__trae ul { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.ficha__trae li {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0;
  border-top: 1px solid var(--linea); font-family: var(--sans); font-size: 0.95rem;
}
.ficha__trae li span { color: var(--tinta-tenue); font-size: 0.85rem; }
.ficha__trae a { color: var(--tinta); }
.ficha__estuche { margin-bottom: 0.7rem; }
.ficha--compra .materias { list-style: none; padding: 0; margin: 0 0 1.3rem; columns: 2; column-gap: 1.5rem; }
.ficha--compra .materias li { font-family: var(--sans); font-size: 0.9rem; color: var(--tinta-suave); padding: 0.25rem 0; break-inside: avoid; }

/* Sigue la colección: las cartas de la portada, cuatro por fila. */
.rejilla--cartas { gap: 1rem; }
@media (max-width: 760px) {
  .rejilla.rejilla--cartas { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .rejilla--cartas .carta__texto { padding: 0.7rem; }
  .rejilla--cartas .carta__nombre { font-size: 1.15rem; }
  .rejilla--cartas .carta__linea { display: none; }
  .rejilla--cartas .carta__anadir { font-size: 0.68rem; }
}

/* ---------- INSPIRACIÓN -------------------------------------------------- */
.inspiracion { padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); text-align: center; border-top: 1px solid var(--linea); }
.inspiracion__boton { min-width: min(22rem, 100%); padding-top: 1.3rem; padding-bottom: 1.3rem; font-size: 0.95rem; letter-spacing: 0.4em; }
.inspiracion__cuerpo { max-width: 46rem; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; text-align: left; scroll-margin-top: 6rem; }
.inspiracion__cuerpo > * + * { margin-top: clamp(2.5rem, 6vw, 4rem); }
.inspiracion__escena p {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.35;
  color: var(--tinta); margin: 0 0 1.2em;
}
.inspiracion__gotas .composicion { max-width: 26rem; margin: 0 auto; }
.inspiracion__texto p { font-family: var(--sans); font-size: 1.02rem; line-height: 1.7; color: var(--tinta-suave); margin: 0 0 1em; }
.inspiracion__resena { margin: 0; padding-left: 1.4rem; border-left: 1px solid var(--oro); }
.inspiracion__resena p { font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--tinta); margin: 0; }
.inspiracion__resena footer { margin-top: 1rem; font-family: var(--sans); font-size: 0.92rem; color: var(--oro); }
.inspiracion__serie { list-style: none; padding: 0; margin: 0; }
.inspiracion__serie li { padding: 1.2rem 0; border-top: 1px solid var(--linea); }
.inspiracion__serie a { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--oro); }
.inspiracion__serie p { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--tinta); margin: 0.5rem 0 0; }

/* ---------- móvil: las imágenes, en una tira que se pasa con el dedo ------ */
@media (max-width: 900px) {
  .ficha--compra { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 5rem; }
  .ficha__planos {
    display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 0.6rem;
    overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--margen)); padding: 0 var(--margen);
    scrollbar-width: none;
  }
  .ficha__planos::-webkit-scrollbar { display: none; }
  .plano { height: 58vh; scroll-snap-align: center; }
  .plano__mas { right: 0.8rem; bottom: 0.8rem; }
  .ficha--compra .ficha__datos { position: static; }
}


/* =============================================================================
   LA FICHA, SEGUNDA FORMA (01-10-2026) — Omar: «sigue siendo básica».
   1 escenario · 2 cómo evoluciona / qué trae · 3 la fórmula · 4 su serie.
   ========================================================================== */
.ficha-x { padding: 0; }
.fx-ante { margin: 0; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.36em; text-transform: uppercase; color: var(--oro); }
.fx-titulo { margin: 0.7rem 0 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2.1rem, 4.4vw, 3.8rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--tinta); }
.fx-bloque { padding: clamp(5rem, 10vw, 9rem) var(--margen) 0; max-width: var(--ancho); margin: 0 auto; }

/* ---------- 1 · el escenario ------------------------------------------------ */
.fx-escena {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem); padding: calc(5.5rem + 2vh) var(--margen) 3rem;
  background: radial-gradient(ellipse 42% 55% at 50% 52%, color-mix(in srgb, var(--jugo) 22%, transparent), transparent 72%);
}
.fx-palabra { top: 46%; color: rgba(244, 239, 231, 0.05); font-size: min(calc(150vw / var(--largo, 6)), 30vw, 340px); }
.fx-info, .fx-compra { position: relative; z-index: 2; }
.fx-nombre { margin: 0.8rem 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 4.8vw, 4.6rem); line-height: 0.98; letter-spacing: -0.02em; color: var(--tinta); }
.fx-firma { margin: 1rem 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.4; color: rgba(244, 239, 231, 0.78); max-width: 26ch; }
.fx-datos { margin: 2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; max-width: 24rem; }
.fx-datos div { border-top: 1px solid var(--linea); padding-top: 0.6rem; }
.fx-datos dt { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 239, 231, 0.5); }
.fx-datos dd { margin: 0.3rem 0 0; font-family: var(--serif); font-size: 1.12rem; color: var(--tinta); }

.fx-pieza { position: relative; z-index: 1; display: grid; justify-items: center; perspective: 1400px; }
.fx-giro { position: relative; margin: 0; cursor: zoom-in; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.fx-giro:focus-visible { outline: 1px solid var(--oro); outline-offset: 8px; }
.fx-foto { display: block; height: min(70svh, 680px); width: auto; max-width: 100%; object-fit: contain;
  -webkit-box-reflect: below 4px linear-gradient(transparent 70%, rgba(255, 255, 255, 0.14));
  transition: opacity 0.22s ease, transform 0.22s ease; }
.fx-foto--ancha { height: auto; width: min(100%, 640px); max-height: 62svh; }
.fx-foto--cambia { opacity: 0; transform: scale(0.97); }
.fx-suelo { position: absolute; left: 18%; right: 18%; bottom: -1.2rem; height: 2.4rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); z-index: -1; }
.fx-miniaturas { display: flex; gap: 0.6rem; margin-top: 2.6rem; }
.fx-miniaturas button { width: 4.2rem; height: 4.2rem; padding: 0.35rem; border: 1px solid var(--linea); background: rgba(244, 239, 231, 0.03); cursor: pointer; transition: border-color 0.3s; }
.fx-miniaturas button[aria-selected="true"], .fx-miniaturas button:hover { border-color: var(--oro); }
.fx-miniaturas img { width: 100%; height: 100%; object-fit: contain; }

.fx-compra { justify-self: end; width: 100%; max-width: 22rem; }
.fx-precio { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3vw, 2.6rem); color: var(--tinta); }
.fx-formato { margin: 0.4rem 0 1.6rem; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.06em; color: rgba(244, 239, 231, 0.62); }
.fx-compra .ficha__compra { margin-bottom: 1.4rem; }
.fx-compra .ficha__compra .boton { min-width: 0; }
.fx-garantias { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.fx-garantias li { padding: 0.65rem 0; border-bottom: 1px solid var(--linea); font-family: var(--sans); font-size: 0.86rem; color: rgba(244, 239, 231, 0.72); }
.fx-garantias b { font-weight: 500; color: var(--oro); }

/* ---------- 2 · cómo evoluciona ------------------------------------------- */
.fx-tiempos { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.fx-tiempos li { position: relative; }
.fx-tiempos__reloj { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 239, 231, 0.55); }
.fx-tiempos__barra { display: block; height: 2px; margin: 1rem 0 1.4rem; background: var(--jugo); transform-origin: left;
  width: calc(100% - var(--n) * 22%); }
.fx-tiempos li[data-oculto] .fx-tiempos__barra { transform: scaleX(0); }
.fx-tiempos li[data-visto] .fx-tiempos__barra { animation: fx-barra 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.2s + var(--n) * 0.15s); }
@keyframes fx-barra { from { transform: scaleX(0); } }
.fx-tiempos h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--tinta); }
.fx-tiempos p { margin: 0.6rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.45; color: rgba(244, 239, 231, 0.78); }

/* En un estuche: los cinco que trae. */
.fx-trae__fila { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.8rem, 2vw, 2rem); }
.fx-trae__vial { display: grid; justify-items: center; text-align: center; color: var(--tinta); }
.fx-trae__vial img { height: clamp(12rem, 24vw, 22rem); width: auto; object-fit: contain; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.fx-trae__vial:hover img { transform: translateY(-10px); }
.fx-trae__nombre { margin-top: 1rem; font-family: var(--serif); font-size: 1.25rem; }
.fx-trae__familia { margin-top: 0.25rem; font-family: var(--sans); font-size: 0.76rem; color: rgba(244, 239, 231, 0.55); }

/* ---------- 3 · la fórmula a la vista ------------------------------------- */
.fx-formula { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.fx-formula__cabeza { position: sticky; top: 7rem; }
.fx-formula__pie { margin: 1.2rem 0 0; max-width: 26rem; font-family: var(--sans); font-size: 0.98rem; line-height: 1.65; color: rgba(244, 239, 231, 0.7); }
.fx-materias { list-style: none; margin: 0; padding: 0; }
.fx-materias li { display: grid; grid-template-columns: 3rem 1fr auto; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--linea); }
.fx-materias li:last-child { border-bottom: 1px solid var(--linea); }
.fx-materias span { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.2em; color: var(--oro); }
.fx-materias b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--tinta); }
.fx-materias em { font-style: normal; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 239, 231, 0.5); }

/* ---------- 4 · su serie ---------------------------------------------------- */
.fx-serie { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.fx-serie__foto { background: radial-gradient(closest-side, rgba(205, 176, 116, 0.16), transparent 78%); }
.fx-serie__foto img { width: 100%; height: auto; }
.fx-serie__dice { margin: 1rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: rgba(244, 239, 231, 0.78); }
.fx-serie__lista { list-style: none; margin: 1.6rem 0 2rem; padding: 0; }
.fx-serie__lista li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--linea); font-family: var(--sans); }
.fx-serie__lista a { color: var(--tinta); }
.fx-serie__lista span { font-size: 0.82rem; color: rgba(244, 239, 231, 0.55); }

/* ---------- móvil ------------------------------------------------------------ */
@media (max-width: 960px) {
  .fx-escena { grid-template-columns: 1fr; padding-top: 5rem; gap: 2rem; min-height: 0; }
  .fx-pieza { order: -1; }
  .fx-foto { height: 52svh; }
  .fx-foto--ancha { height: auto; max-height: 44svh; }
  .fx-miniaturas { margin-top: 2rem; }
  .fx-compra { justify-self: stretch; max-width: none; }
  .fx-tiempos { grid-template-columns: 1fr; }
  .fx-tiempos__barra { width: 100%; }
  .fx-trae__fila { grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
  .fx-trae__nombre { font-size: 0.9rem; }
  .fx-trae__familia { display: none; }
  .fx-formula, .fx-serie { grid-template-columns: 1fr; }
  .fx-formula__cabeza { position: static; }
  .fx-materias em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-giro, .fx-foto { transition: none; }
  .fx-tiempos li[data-oculto] .fx-tiempos__barra { transform: none; }
}
.fx-compra .ficha__compra { flex-wrap: nowrap; }
.fx-compra .ficha__compra .boton { white-space: nowrap; letter-spacing: 0.12em; padding-left: 1rem; padding-right: 1rem; }
/* iPhone SE (320 px): las tarjetas de «Sigue la colección», de una en una. */
@media (max-width: 350px) { .rejilla.rejilla--cartas { grid-template-columns: 1fr; } }