/* =========================================================
   Denoty · Custom styles
   Plataforma de invitaciones digitales inspirada en Greenvelope.
========================================================= */

[x-cloak] { display: none !important; }

html, body { scroll-behavior: smooth; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar             { width: 10px; height: 10px; }
::-webkit-scrollbar-track       { background: #f6f0e6; }
::-webkit-scrollbar-thumb       { background: #e8b194; border-radius: 999px; border: 2px solid #f6f0e6; }
::-webkit-scrollbar-thumb:hover { background: #cf9382; }

::selection { background: #cf9382; color: #fff; }

/* Reveal-on-scroll */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

img { transition: transform .7s ease; }

details > summary { list-style: none; outline: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary::after { content: "−"; }
details > summary::after { content: "+"; float: right; color: #cf9382; font-weight: 300; }

h1, h2, h3, h4 { letter-spacing: -0.015em; }

/* Sobre 3D: aseguramos perspectiva para la animación del flap */
.envelope-3d { perspective: 1500px; }

/* Floating elements suaves */
.float-soft { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Hover ring suave para botones primarios */
.btn-primary {
    position: relative;
}
.btn-primary::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    border: 1px solid rgba(207, 147, 130, .25);
    opacity: 0;
    transition: opacity .3s ease;
}
.btn-primary:hover::after { opacity: 1; }

/* Cards: borde dorado sutil al pasar */
.card-gold {
    transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.card-gold:hover {
    border-color: #e6bea7;
}

/* Mobile tweaks */
@media (max-width: 640px) {
    h1, h2 { letter-spacing: -0.02em; }
}

/* Alpine x-collapse fallback (por si no se carga el plugin) */
[x-collapse] { overflow: hidden; }