/* ==========================================================================
   SORIAN JOYERÍA - PULIDO FINAL Y TRANSICIONES (pulido.css)
   Se carga al final en el inicio y en el catálogo.
   - Quita adornos genéricos: degradados con brillo, íconos decorativos,
     tarjetas que flotan solas, partículas.
   - Unifica botones, cintillo, contacto, pie de página y avisos.
   - Añade transiciones: entre páginas, al aparecer las fotos y en las
     preguntas frecuentes. Todo respeta "reducir movimiento".
   ========================================================================== */

:root {
  --pl-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --pl-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

/* ---------- Cintillo superior: texto limpio con separadores ---------- */
.theme-light .top-bar {
  justify-content: center;
  padding: 9px 20px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.theme-light .top-bar-marquee {
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.top-bar-sep {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--sj-gold-soft);
  opacity: 0.8;
}

.top-bar-actions:empty {
  display: none;
}

/* ---------- Botones: color sólido, sin brillo ni degradado ---------- */
.theme-light .sj-btn {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.16s var(--pl-ease);
}

.theme-light .sj-btn:hover {
  transform: none;
}

.theme-light .sj-btn:active {
  transform: scale(0.98);
}

.theme-light .sj-btn-ruby {
  background: var(--sj-wine);
  box-shadow: none;
}

.theme-light .sj-btn-ruby:hover {
  background: var(--sj-wine-deep);
  box-shadow: none;
}

.theme-light .sj-btn-light {
  box-shadow: none;
  border-color: var(--sj-line);
}

.theme-light .sj-btn-light:hover {
  background: var(--sj-cream);
  border-color: var(--sj-wine);
  box-shadow: none;
}

.theme-light .sj-btn i {
  filter: none;
}

/* ---------- Portada ---------- */
.mk-hero-hook em {
  background: none;
  padding: 0;
}

.mk-hero .sj-hero-eyebrow i {
  display: none;
}

.mk-float-card {
  animation: none;
}

.mk-hero-caption {
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--sj-muted);
}

.mk-hero-proof li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--sj-gold);
  flex: 0 0 auto;
}

/* Franja de garantía: separadores en lugar de íconos */
.mk-ticker-track {
  gap: 0;
}

.mk-ticker-track span {
  gap: 0;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
}

.mk-ticker-track span::after {
  content: '';
  width: 5px;
  height: 5px;
  margin: 0 28px;
  border-radius: 999px;
  background: var(--sj-gold-soft);
}

/* ---------- Propuesta: tres afirmaciones, sin íconos en círculo ---------- */
#propuesta .sj-grid-3 {
  gap: 0;
  border-top: 1px solid var(--sj-line);
  border-bottom: 1px solid var(--sj-line);
}

#propuesta .sj-card {
  padding: 34px 36px;
  text-align: left;
}

#propuesta .sj-card h3 {
  margin-top: 0;
  font-size: 1.12rem;
}

#propuesta .sj-card p {
  margin-top: 10px;
  max-width: 34ch;
}

/* ---------- Contacto: bloque vino en lugar de tarjeta negra ---------- */
.sj-contact-card {
  background: var(--sj-wine-deep);
  border: none;
  box-shadow: none;
}

.sj-contact-card .sj-btn-gold,
.sj-contact-card .sj-btn-dark {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

.sj-contact-card .sj-btn-gold:hover,
.sj-contact-card .sj-btn-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.sj-contact-card .sj-tag-light {
  color: var(--sj-gold-soft);
}

/* ---------- Pie de página: tinta cálida, sin negro puro ---------- */
.theme-light .main-footer {
  background: #241D1F;
  border-top: none;
}

.theme-light .footer-brand h3 {
  text-shadow: none;
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 217, 139, 0.35);
}

.footer-contact a:hover {
  color: var(--sj-gold-soft);
}

/* ---------- Avisos: claros, discretos ---------- */
#toast-container {
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  align-items: center;
}

.theme-light .toast {
  background: var(--sj-ink);
  color: #FFFFFF;
  border-left: none;
  border-radius: 999px;
  padding: 12px 22px;
  box-shadow: 0 16px 36px -14px rgba(43, 35, 38, 0.55);
  font-family: var(--font-body);
  font-size: 0.82rem;
  animation: plToastIn 0.35s var(--pl-ease) both;
}

.theme-light .toast i {
  display: none;
}

@keyframes plToastIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

/* ---------- Catálogo ---------- */
.theme-light .product-badge {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  box-shadow: none;
}

.theme-light .product-badge.badge-gold {
  background: rgba(255, 255, 255, 0.94);
  color: var(--sj-wine);
}

.cat-select[hidden] {
  display: none !important;
}

/* =========================================================================
   TRANSICIONES
   ========================================================================= */

/* 1. Entre páginas (inicio ↔ catálogo): fundido suave en navegadores que lo permiten */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: plPageOut 0.28s var(--pl-ease-io) both;
}

::view-transition-new(root) {
  animation: plPageIn 0.42s var(--pl-ease) both;
}

@keyframes plPageOut {
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes plPageIn {
  from { opacity: 0; transform: translateY(10px); }
}

/* La cabecera se queda quieta durante el cambio de página */
.main-header {
  view-transition-name: sj-header;
}

::view-transition-group(sj-header) {
  animation-duration: 0s;
}

/* 2. Fotos que se descubren al entrar en pantalla */
.mk-collection.reveal img,
.mk-why-media.reveal img {
  clip-path: inset(12% 0 0 0);
  transform: scale(1.08);
  transition: clip-path 1.1s var(--pl-ease), transform 1.4s var(--pl-ease);
}

.mk-collection.reveal.is-revealed img,
.mk-why-media.reveal.is-revealed img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .mk-collection.reveal.is-revealed:hover img {
    transform: scale(1.05);
    transition: transform 1.1s var(--pl-ease);
  }
}

/* La foto de la portada aparece desde abajo, como una vitrina que se abre */
body.intro-finished .mk-hero-figure {
  /* "backwards": al terminar se quita el recorte y vuelve el filete dorado */
  animation: plUnveil 1.2s 0.15s var(--pl-ease) backwards;
}

@keyframes plUnveil {
  from { clip-path: inset(100% -20px -20px -20px); }
  to { clip-path: inset(-20px -20px -20px -20px); }
}

/* 3. Preguntas frecuentes: la respuesta se despliega con altura animada */
.mk-faq details {
  interpolate-size: allow-keywords;
}

.mk-faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.4s var(--pl-ease), content-visibility 0.4s allow-discrete;
}

.mk-faq details[open]::details-content {
  block-size: auto;
}

/* 4. Enlaces del menú: subrayado que crece desde el centro */
.theme-light .nav-link {
  transition: color 0.2s ease;
}

/* 5. Tarjetas del catálogo: elevación sutil al pasar el cursor */
@media (hover: hover) and (pointer: fine) {
  .theme-light .product-card {
    transition: transform 0.5s var(--pl-ease), box-shadow 0.5s var(--pl-ease);
  }
  .theme-light .product-card:hover {
    transform: translateY(-4px);
  }
}

/* ---------- Reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
  .mk-collection.reveal img,
  .mk-why-media.reveal img {
    clip-path: none;
    transform: none;
    transition: none;
  }
  body.intro-finished .mk-hero-figure {
    animation: none;
  }
  .mk-faq details::details-content {
    transition: none;
  }
  .theme-light .product-card:hover {
    transform: none;
  }
  .theme-light .toast {
    animation: none;
  }
}

@media (max-width: 860px) {
  #propuesta .sj-grid-3 {
    border-bottom: none;
  }
  #propuesta .sj-card {
    padding: 26px 4px;
    border-left: none;
    border-bottom: 1px solid var(--sj-line);
  }
}

/* ==========================================================================
   AJUSTES AL ACHICAR LA VENTANA (inicio y catálogo)
   ========================================================================== */
/* Los enlaces del menú nunca se parten en dos líneas */
.theme-light .nav-link {
  white-space: nowrap;
}

@media (min-width: 1025px) and (max-width: 1240px) {
  .theme-light .nav-menu {
    gap: 18px;
  }
  .theme-light .nav-link {
    font-size: 0.76rem;
    letter-spacing: 1px;
  }
  .theme-light .header-actions .sj-btn-sm {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Botones en una sola línea en celulares y tabletas */
@media (max-width: 900px) {
  .theme-light .sj-btn {
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .theme-light .sj-btn {
    padding-left: 18px;
    padding-right: 18px;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
  }
}

/* Pantallas muy angostas: si no cabe, el texto del botón puede bajar de línea */
@media (max-width: 359px) {
  .theme-light .sj-btn {
    white-space: normal;
  }
}

/* ==========================================================================
   NAVEGACIÓN A SECCIONES (Colecciones, Por qué Sorian, Cómo comprar...)
   Antes se sumaban dos márgenes (96 px + 96 px) y la sección quedaba muy
   abajo. Ahora solo se descuenta la altura real del encabezado fijo, que
   transiciones.js mide en --sj-header-h, y la sección entra con su título
   cerca del menú.
   ========================================================================== */
html {
  scroll-padding-top: var(--sj-header-h, 96px);
}

.theme-light [id] {
  scroll-margin-top: 0;
}

.theme-light main section.sj-section[id] {
  scroll-margin-top: -40px;
}

@media (max-width: 600px) {
  .theme-light main section.sj-section[id] {
    scroll-margin-top: -24px;
  }
}