/* Aesthetica — capa de marca. Este archivo NO lo toca el recompilado de
   Tailwind (site.css): aquí viven colores, tipografías y animaciones. */

:root {
  --ink: #0d0c0a;
  --ink2: #14120f;
  --ink3: #1c1915;
  --sand: #e9e1d3;
  --sand2: #cfc3af;
  --taupe: #a5977f;
  /* Conectados a la paleta de Remo (tema daisyUI `remo`): el chat puede
     cambiarlos con la operacion `paleta` y recompilar. Con respaldo fijo. */
  --verde: var(--color-secondary, #26332c);
  --agua: var(--color-accent, #8fb3a5);
  --vino: #6d3140;
  --oro: var(--color-primary, #c8a06a);
  --hair: rgba(233, 225, 211, 0.14);
}

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--sand);
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

::selection { background: var(--oro); color: var(--ink); }

/* --- colores y tipos --- */
.f-d { font-family: "Fraunces", Georgia, serif; font-weight: 340; letter-spacing: -0.015em; }
.etq { font-family: "Archivo", sans-serif; font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; }
.c-sand { color: var(--sand); }
.c-sand2 { color: var(--sand2); }
.c-taupe { color: var(--taupe); }
.c-oro { color: var(--oro); }
.c-agua { color: var(--agua); }
.c-ink { color: var(--ink); }
.bg-ink { background-color: var(--ink); }
.bg-ink2 { background-color: var(--ink2); }
.bg-sand { background-color: var(--sand); }
.b-hair { border-color: var(--hair); }
.lnk { transition: color 0.3s ease; }
.lnk:hover { color: var(--oro); }

/* --- botones --- */
.btn-a, .btn-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 9999px; padding: 0.75rem 1.75rem; font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  transition: all 0.3s ease; cursor: pointer; text-decoration: none; border: 1px solid transparent;
}
.btn-a { background: var(--sand); color: var(--ink); }
.btn-a:hover { background: var(--oro); color: var(--ink); }
.btn-b { border-color: var(--hair); color: var(--sand); background: transparent; }
.btn-b:hover { border-color: rgba(233, 225, 211, 0.6); background: rgba(233, 225, 211, 0.05); }

/* --- barra de navegación --- */
#nav { background: transparent; }
#nav.navbg { background: rgba(13, 12, 10, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }

/* --- grano cinematográfico --- */
body::after {
  content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 60; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 9s steps(6) infinite;
}
@keyframes grano {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 1%); }
  40% { transform: translate(1%, -2%); }
  60% { transform: translate(-1%, 2%); }
  80% { transform: translate(2%, 1%); }
}

/* --- aurora del hero --- */
.aurora {
  background:
    radial-gradient(42rem 30rem at 18% 8%, rgba(38, 51, 44, 0.55), transparent 65%),
    radial-gradient(38rem 28rem at 85% 22%, rgba(109, 49, 64, 0.26), transparent 70%),
    radial-gradient(30rem 24rem at 60% 95%, rgba(200, 160, 106, 0.14), transparent 70%);
  filter: blur(10px);
}

/* --- velos sobre imágenes --- */
.veil { background: linear-gradient(to top, rgba(13,12,10,0.92), rgba(13,12,10,0.25) 55%, transparent); }
.veil-hero { background: linear-gradient(to top, var(--ink), rgba(13,12,10,0.4) 55%, rgba(13,12,10,0.6)); }
.veil-b { background: linear-gradient(to bottom, var(--ink), rgba(13,12,10,0.7), var(--ink)); }
.veil-r { background: linear-gradient(to right, var(--ink), rgba(13,12,10,0.8), rgba(13,12,10,0.4)); }

/* --- cinta de marcas --- */
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; align-items: center; gap: 3.5rem; padding-right: 3.5rem; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- el anillo --- */
.ring-spin { animation: girar 26s linear infinite; transform-origin: center; }
@keyframes girar { to { transform: rotate(360deg); } }
.ring-draw { stroke-dasharray: 300; stroke-dashoffset: 300; animation: dibujar 2.4s cubic-bezier(0.6, 0, 0.2, 1) 0.3s forwards; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }

/* --- aparición al hacer scroll --- */
.rv { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.8s, transform 0.8s, filter 0.8s; transition-timing-function: cubic-bezier(0.22, 0.6, 0.2, 1); transition-delay: var(--rvd, 0s); }
.rv.in { opacity: 1; transform: none; filter: none; }

/* --- entrada del hero --- */
.hero-w { opacity: 0; animation: subir 0.85s cubic-bezier(0.22, 0.6, 0.2, 1) forwards; animation-delay: var(--hw, 0s); }
@keyframes subir { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.hero-h { font-size: max(2.4rem, min(8vw, 10.5vh)); }

/* --- tarjeta con brillo perimetral --- */
.glow-card { position: relative; overflow: hidden; }
.glow-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(200,160,106,0.55), transparent 38%, transparent 66%, rgba(143,179,165,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
}
.glow-card:hover::before { opacity: 1; }

.img-zoom img { transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1), opacity 0.6s ease; }
.img-zoom:hover img { transform: scale(1.05); }

/* --- preguntas frecuentes --- */
details.faq { border-bottom: 1px solid var(--hair); }
details.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; color: var(--sand); transition: color 0.3s; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary:hover { color: var(--oro); }
details.faq summary::after { content: "+"; color: var(--taupe); font-size: 1.5rem; transition: transform 0.3s; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p { padding: 0 2.5rem 1.5rem 0; margin: 0; color: var(--sand2); font-size: 0.95rem; line-height: 1.7; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2a251f; border-radius: 8px; }