/* =====================================================================
   RV25 Relojería · FICHA DEL RELOJ · BASE
   ---------------------------------------------------------------------
   La ventana que cubre la pantalla al abrir un reloj (#reloj-<id>),
   su barra de arriba (← Volver · Compartir) y la barra de compra
   fija de abajo en celular.

   Las demás partes tienen su propio archivo en esta carpeta:
     escenario.css · historia.css · especificaciones.css · contacto.css
   El HTML lo arma js/componentes/ficha/plantilla.js
   ===================================================================== */

.ficha {
  position: fixed; inset: 0; z-index: 40;
  padding-bottom: 0;              /* en celular la barra fija cierra la ficha */
  background: var(--fondo);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ficha[hidden] { display: none; }

/* --- Página propia del reloj (relojes/<nombre>/, <html class="pagina-reloj">) ---
   Ahí la ficha no es una ventana: es el contenido de la página y se
   baja con el scroll normal del navegador. */
.pagina-reloj .ficha {
  position: static; inset: auto; z-index: auto;
  overflow: visible;
}

/* --- Ficha escrita en HTML (la lee Google sin JavaScript) ---
   La genera herramientas/modulos/paginas-seo.ps1. Con JavaScript,
   js/app.js la reemplaza enseguida por la ficha completa; por eso se
   mantiene invisible un momento y solo aparece si JavaScript no llega
   (así no "salta" la página al cambiar). */
.ficha-estatica {
  display: grid; gap: 28px;
  max-width: var(--ancho); margin: 0 auto;
  padding: 8px var(--margen) var(--seccion);
}
.js-animar .ficha-estatica { opacity: 0; animation: ficha-estatica-aparece .3s ease 1.5s forwards; }
@keyframes ficha-estatica-aparece { to { opacity: 1; } }

.ficha-estatica-foto { width: 100%; max-width: 520px; aspect-ratio: 3 / 4; object-fit: contain; background: var(--marfil); }
.ficha-estatica h1 { margin-top: 8px; font-size: clamp(32px, 8.4vw, 46px); font-weight: 400; line-height: 1.05; }
.ficha-estatica-ref { margin-top: 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.ficha-estatica-precio { margin-top: 18px; font: 400 30px/1.1 var(--titulo); }
.ficha-estatica-estado { margin-top: 6px; color: var(--tinta-suave); }
.ficha-estatica .boton { margin-top: 20px; }
.ficha-estatica-texto { margin-top: 24px; max-width: 36em; font-size: 17px; }
.ficha-estatica h2 { margin-top: 36px; font-size: 26px; font-weight: 400; }
.ficha-estatica dl { margin: 12px 0 0; }
.ficha-estatica dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--arena-2); }
.ficha-estatica dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.ficha-estatica dd { margin: 0; }

@media (min-width: 900px) {
  .ficha-estatica { grid-template-columns: 5fr 6fr; gap: 56px; align-items: start; }
}

/* --- Barra superior --- */
.ficha-barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  height: 56px;
  padding: 0 calc(var(--margen) - 10px);
  background: var(--fondo);
}
.ficha-barra a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px;
  color: var(--tinta); text-decoration: none;
  font: 500 13px/1 var(--letra); letter-spacing: .12em; text-transform: uppercase;
}
.ficha-barra a:hover { color: var(--acento-texto); }

/* Derecha de la barra: ♡ favoritos y bolsa del carrito (con su numerito) + Compartir */
.ficha-barra-derecha { display: flex; align-items: center; }
.ficha-barra-icono {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 44px;
  border: 0; background: none; color: var(--tinta); cursor: pointer;
}
.ficha-barra-icono .icono { width: 21px; height: 21px; }
.ficha-barra-icono:hover { color: var(--acento-texto); }

/* --- Títulos pequeños en mayúsculas (marca, "Formas de pago"...) --- */
.ficha-subtitulo,
.ficha-coleccion,
.ficha-marca {
  font: 600 12px/1.2 var(--letra); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave);
}

/* --- Barra de compra fija (celular y tableta) ---
   Es el último hijo de .ficha y usa sticky bottom: 0, así se queda pegada
   abajo de la pantalla mientras se baja por toda la ficha.
   En celular reemplaza al botón "Comprar por WhatsApp" de la tarjeta. */
.ficha-comprar { display: none; }

.ficha-compra-fija {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 48px;
  padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--fondo);
  box-shadow: 0 -6px 20px rgba(6, 26, 40, .10);
}
.compra-fija-precio { display: grid; flex: none; }   /* el precio no se encoge; cede el botón */
.compra-fija-valor  { font-family: var(--titulo); font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.compra-fija-estado { margin-top: 4px; }
.compra-fija-estado .estado { min-height: 22px; padding: 0 8px; font-size: 11px; box-shadow: none; }
.ficha-compra-fija .boton { flex: 0 1 200px; min-height: 52px; padding: 0 20px; }
/* Bolsa: agrega este reloj al carrito sin salir de la ficha */
.compra-fija-bolsa {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; margin-left: auto;
  border: 1.5px solid var(--tinta); border-radius: 50%;
  background: none; color: var(--tinta); cursor: pointer;
}
.compra-fija-bolsa:hover { background: var(--arena); }
.ficha-compra-fija .compra-fija-bolsa + .boton { flex: 0 1 170px; }
/* Celular angosto: precio, bolsa y Comprar caben sin tocarse */
@media (max-width: 419px) {
  .ficha-compra-fija { gap: 10px; }
  .compra-fija-valor { font-size: 20px; }
  .compra-fija-bolsa { width: 46px; height: 46px; }
  .ficha-compra-fija .boton { min-height: 48px; padding: 0 16px; }
}
.ficha-compra-fija .icono { width: 22px; height: 22px; }

/* En computador el botón de compra vuelve a la tarjeta y la barra fija se esconde */
@media (min-width: 1040px) {
  .ficha { padding-bottom: 0; }   /* la franja azul de contacto cierra la ficha */
  .ficha-barra { height: 64px; }
  .ficha-comprar { display: inline-flex; }
  .ficha-compra-fija { display: none; }
}