/* ==========================================================================
   CRISTINA HIDALGO - ESTILO EDITORIAL CHIC & ROMANTIC DESIGN SYSTEM
   "La última apuesta" - Sello PHOEBE (Ediciones Pàmies)
   ========================================================================== */

:root {
  --bg-cream: #FAF8F5;
  --bg-cream-soft: #F4EFEB;
  --blush-rose: #E8C5C8;
  --blush-light: #F7E9EA;
  --soft-mauve: #D8B4C8;
  --rose-gold: #D49B9B;
  --bordeaux-primary: #7A1C38;
  --bordeaux-hover: #61152B;
  --plum-deep: #4A1525;
  --charcoal-dark: #262223;
  --charcoal-muted: #5C5456;
  --paper-cream: #FFFDF9;
  --gold-accent: #CBA258;
}

/* Tipografía base y suavizado */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-cream);
  color: var(--charcoal-dark);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

/* Fuentes Serif editoriales */
.font-serif-editorial {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-garamond {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ==========================================================================
   Efecto 3D Realista de la Portada Editorial
   ========================================================================== */
.book-3d-wrapper {
  perspective: 1400px;
}

.book-3d {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateX(8deg) rotateZ(-2deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
  filter: drop-shadow(-15px 25px 35px rgba(74, 21, 37, 0.25)) drop-shadow(-5px 10px 15px rgba(0, 0, 0, 0.15));
}

.book-3d:hover {
  transform: rotateY(-6deg) rotateX(4deg) rotateZ(0deg) translateY(-8px) scale(1.02);
  filter: drop-shadow(-20px 35px 45px rgba(122, 28, 56, 0.35)) drop-shadow(-8px 15px 20px rgba(0, 0, 0, 0.2));
}

/* Simulación del lomo (spine) */
.book-3d::before {
  content: '';
  position: absolute;
  top: 1.5%;
  left: 0;
  width: 32px;
  height: 97%;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.4) 0%, 
    rgba(0, 0, 0, 0.15) 30%, 
    rgba(255, 255, 255, 0.15) 60%, 
    rgba(0, 0, 0, 0.3) 100%);
  transform: translateX(-16px) rotateY(-90deg);
  transform-origin: right;
  border-radius: 4px 0 0 4px;
}

/* Simulación de las páginas de papel */
.book-3d::after {
  content: '';
  position: absolute;
  top: 2%;
  right: -16px;
  width: 22px;
  height: 96%;
  background: repeating-linear-gradient(
    90deg,
    #fffdf9,
    #fffdf9 1px,
    #eee9df 1px,
    #eee9df 2px
  );
  transform: rotateY(90deg);
  transform-origin: left;
  border-radius: 0 4px 4px 0;
  box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.15);
}

/* Reflejo satinado dinámico en la cubierta */
.book-glare {
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
}

/* ==========================================================================
   Microanimaciones y Clases de Atmósfera
   ========================================================================== */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(0.5deg);
  }
}

.animate-float-slow {
  animation: floatSlow 6s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.04);
  }
}

.animate-pulse-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* Destello en botones de compra */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 20%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 80%
  );
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.btn-shimmer:hover::after {
  transform: translateX(100%);
}

/* ==========================================================================
   Módulo Lector de Capítulos (Reading Experience)
   ========================================================================== */
.drop-cap::first-letter {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3.8rem;
  line-height: 0.8;
  float: left;
  margin-right: 0.85rem;
  margin-top: 0.25rem;
  color: var(--bordeaux-primary);
  font-weight: 700;
}

/* Temas del Lector */
.reader-theme-paper {
  background-color: #FAF6EF;
  color: #2D2727;
}

.reader-theme-sepia {
  background-color: #F4ECE1;
  color: #382E25;
}

.reader-theme-night {
  background-color: #1F1B1E;
  color: #E2DBD8;
}

.reader-theme-night .drop-cap::first-letter {
  color: #E8C5C8;
}

/* ==========================================================================
   Reproductor de Playlist / Ecualizador
   ========================================================================== */
.equalizer-bar {
  width: 3px;
  background-color: var(--bordeaux-primary);
  border-radius: 9999px;
  animation: equalize 1.2s ease-in-out infinite alternate;
}

.equalizer-bar:nth-child(1) { height: 16px; animation-delay: 0.1s; }
.equalizer-bar:nth-child(2) { height: 24px; animation-delay: 0.3s; }
.equalizer-bar:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.equalizer-bar:nth-child(4) { height: 20px; animation-delay: 0.4s; }

@keyframes equalize {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

.equalizer-paused .equalizer-bar {
  animation-play-state: paused;
  transform: scaleY(0.25);
}

/* Vinilo giratorio */
@keyframes spinVinyl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinVinyl 12s linear infinite;
}

.paused {
  animation-play-state: paused;
}

/* ==========================================================================
   Scrollbars estéticas
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F4EFEB;
}

::-webkit-scrollbar-thumb {
  background: #D8B4C8;
  border-radius: 9999px;
  border: 2px solid #F4EFEB;
}

::-webkit-scrollbar-thumb:hover {
  background: #7A1C38;
}

/* Ocultar barra de desplazamiento en sliders manteniendo el scroll táctil y programático */
.no-scrollbar {
  -ms-overflow-style: none; /* IE y Edge */
  scrollbar-width: none; /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari y Opera */
  width: 0;
  height: 0;
}

/* Espaciado de snap para garantizar visibilidad íntegra de sombras en tarjetas */
#books-slider-track {
  scroll-padding-left: 1rem;
  scroll-padding-right: 1rem;
}

@media (min-width: 640px) {
  #books-slider-track {
    scroll-padding-left: 1.5rem;
    scroll-padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  #books-slider-track {
    scroll-padding-left: 2rem;
    scroll-padding-right: 2rem;
  }
}

/* Arrastre interactivo con la mano (Drag-to-Scroll) */
.cursor-grab {
  cursor: grab;
}

.cursor-grabbing {
  cursor: grabbing !important;
}

#books-slider-track.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

#books-slider-track.is-dragging * {
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* ==========================================================================
   Estilos de tarjetas y microinteracciones
   ========================================================================== */
.card-romantic {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 197, 200, 0.45);
  box-shadow: 0 10px 30px -10px rgba(122, 28, 56, 0.08);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-romantic:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 180, 200, 0.7);
  box-shadow: 0 16px 36px -10px rgba(122, 28, 56, 0.16);
}

/* Fondo decorativo con malla radial sutil */
.bg-mesh-romantic {
  background-image: 
    radial-gradient(at 10% 20%, rgba(232, 197, 200, 0.3) 0px, transparent 50%),
    radial-gradient(at 90% 15%, rgba(216, 180, 200, 0.25) 0px, transparent 45%),
    radial-gradient(at 50% 80%, rgba(247, 233, 234, 0.5) 0px, transparent 60%);
}

/* ==========================================================================
   Incrustación de Reels de Instagram (Proporción Real 9:16 sin bandas laterales)
   ========================================================================== */
.reel-smart-card {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #180609;
  /* Borde estético un poco más grueso (2.5px), refinado y en sintonía con la paleta de la web */
  border: 2.5px solid rgba(226, 185, 189, 0.95);
  box-shadow: 
    0 1px 3px rgba(122, 28, 56, 0.08),
    0 14px 30px -6px rgba(122, 28, 56, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s ease;
  user-select: none;
}

.reel-smart-card:hover {
  transform: translateY(-6px);
  border-color: rgba(163, 45, 68, 0.85);
  box-shadow: 
    0 4px 12px rgba(122, 28, 56, 0.1),
    0 24px 44px -10px rgba(122, 28, 56, 0.28),
    0 0 0 3px rgba(247, 233, 234, 0.8);
}

/*
  Recorte horizontal matemático para eliminar las bandas negras laterales:
  El vídeo de un Reel es 9:16 (70.31% del ancho del embed 4:5 de Instagram).
  Al ampliar el iframe al 142.22% y descentrarlo -21.11%, se recortan limpiamente
  las bandas laterales, logrando que el vídeo ocupe el 100% de la tarjeta.
*/
.reel-smart-card iframe {
  position: absolute;
  top: -54px;
  left: -21.11%;
  width: 142.22%;
  height: calc(100% + 110px);
  border: 0;
  pointer-events: auto; /* Permite reproducir el vídeo directamente en la web al hacer clic */
}

#videos-slider-track {
  -webkit-overflow-scrolling: touch;
}

.instagram-media {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 auto !important;
  border-radius: 1.25rem !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

.instagram-media iframe {
  border-radius: 1.25rem !important;
  max-width: 100% !important;
}

/* ==========================================================================
   Tarjetas de Publicaciones de Estética / Moodboard (Página del libro)
   ========================================================================== */
.aesthetic-post-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 1.5rem;
  background: #ffffff;
  border: 2.5px solid rgba(226, 185, 189, 0.95);
  box-shadow: 
    0 2px 6px rgba(122, 28, 56, 0.05),
    0 14px 30px -8px rgba(122, 28, 56, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.35s ease;
  user-select: none;
}

.aesthetic-post-card:hover {
  transform: translateY(-5px);
  border-color: rgba(163, 45, 68, 0.75);
  box-shadow: 
    0 4px 12px rgba(122, 28, 56, 0.08),
    0 22px 40px -10px rgba(122, 28, 56, 0.22),
    0 0 0 3px rgba(247, 233, 234, 0.8);
}

.aesthetic-post-card iframe {
  position: absolute;
  top: -54px;
  left: 0;
  width: 100%;
  height: calc(100% + 180px);
  border: 0;
  pointer-events: auto;
}

.aesthetic-post-card .carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.35rem;
  overflow: hidden;
}

.aesthetic-post-card .carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.35rem;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity 0.35s ease-in-out, transform 0.35s ease-out;
  pointer-events: none;
}

.aesthetic-post-card .carousel-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.aesthetic-post-card .carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #7a1c38;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: all 0.25s ease;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.aesthetic-post-card .carousel-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: rgba(226, 185, 189, 0.95);
  transform: translateY(-50%) scale(1.08);
  color: #531124;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.aesthetic-post-card .carousel-nav-btn:active {
  background-color: rgba(255, 255, 255, 0.95);
  transform: translateY(-50%) scale(0.94);
}

.aesthetic-post-card .carousel-ig-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 25;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: background-color 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.aesthetic-post-card .carousel-ig-badge:hover {
  background: rgba(0, 0, 0, 0.75);
}

.aesthetic-post-card .carousel-dots-bar {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
}

.aesthetic-post-card .dot-item {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.aesthetic-post-card .dot-item.active {
  width: 1.15rem;
  border-radius: 9999px;
  background-color: #ffffff;
}

#estetica-slider-track {
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar sutil y estético para la lista de reproducción */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 28, 56, 0.3) rgba(226, 185, 189, 0.15);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(226, 185, 189, 0.15);
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(122, 28, 56, 0.3);
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 28, 56, 0.6);
}

/* ==========================================================================
   Disco de Vinilo Realista (Efecto de giro 100% visible)
   ========================================================================== */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.vinyl-realistic {
  position: relative;
  border-radius: 9999px;
  /* Surcos concéntricos de vinilo + reflejos especulares cónicos que barren al girar */
  background: 
    radial-gradient(circle at center, transparent 38%, rgba(255,255,255,0.18) 40%, transparent 42%, rgba(255,255,255,0.12) 55%, transparent 57%, rgba(255,255,255,0.09) 70%, transparent 72%),
    conic-gradient(from 45deg, #09090b 0deg, #27272a 45deg, #09090b 90deg, #52525b 135deg, #09090b 180deg, #27272a 225deg, #09090b 270deg, #52525b 315deg, #09090b 360deg);
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.4),
    inset 0 0 0 2px rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spinVinyl 3.5s linear infinite;
  user-select: none;
}

.vinyl-realistic.paused {
  animation-play-state: paused !important;
}

/* Etiqueta central burdeos con marcas asimétricas de aguja y texto */
.vinyl-realistic .vinyl-label {
  position: relative;
  width: 44%;
  height: 44%;
  border-radius: 9999px;
  background: #7A1C38;
  border: 1.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
}

/* Arco decorativo impreso en la etiqueta */
.vinyl-realistic .vinyl-label::before {
  content: '';
  position: absolute;
  width: 76%;
  height: 76%;
  border-radius: 9999px;
  border-top: 2.5px solid #ffffff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}

/* Punto de referencia / marcador de giro en la etiqueta */
.vinyl-realistic .vinyl-label::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 0 3px rgba(0,0,0,0.8);
}

/* Agujero central */
.vinyl-realistic .vinyl-hole {
  width: 25%;
  height: 25%;
  border-radius: 9999px;
  background: #FAF8F5;
  border: 1.5px solid #111114;
  z-index: 2;
}