/* ============================================================
   base.css — sistema de diseño compartido (D10)
   Estética premium tipo app nativa: tipografía serif+sans,
   paleta marfil/oro, easing de resorte, sombras de pelo y
   feedback táctil. Regla 60fps: animar SOLO transform/opacity
   (aceleradas por GPU); backdrop-filter solo en UI estática.
   ============================================================ */

:root {
  --marfil: #faf7f2;
  --crema: #f2ead9;
  --oro: #b98f4e;
  --oro-claro: #e6d3a8;
  --oro-brillo: #f3e6c8;
  --tinta: #292319;
  --tinta-suave: #6f6455;
  --rojo-suave: #b3564e;
  --vidrio: rgba(255, 255, 255, 0.72);
  --vidrio-fuerte: rgba(255, 255, 255, 0.9);
  --pelo: rgba(41, 35, 25, 0.10);           /* hairline iOS */

  --sombra-pelo: 0 1px 2px rgba(41, 35, 25, 0.05);
  --sombra-suave: 0 2px 6px rgba(41, 35, 25, 0.06), 0 12px 32px rgba(41, 35, 25, 0.10);
  --sombra-fuerte: 0 4px 10px rgba(41, 35, 25, 0.08), 0 24px 60px rgba(41, 35, 25, 0.18);

  --radio: 18px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);        /* material */
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);/* salida "Apple" */
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1); /* rebote sutil */
  --duracion: 240ms;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  min-height: 100dvh;
  font-family: var(--sans);
  background:
    radial-gradient(140% 100% at 50% -10%, var(--marfil) 0%, var(--crema) 62%, #ece1c9 100%);
  color: var(--tinta);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0.01em; }

img { display: block; max-width: 100%; }

.eyebrow {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--oro);
}

/* ---------------- Botones: táctiles, con rebote de resorte ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 50px; padding: 0.75rem 1.5rem;
  border: none; border-radius: 14px; cursor: pointer;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  color: var(--tinta); background: var(--vidrio);
  box-shadow: var(--sombra-pelo), var(--sombra-suave), inset 0 1px 0 rgba(255,255,255,0.65);
  transition:
    transform var(--duracion) var(--spring),
    box-shadow var(--duracion) var(--ease),
    opacity var(--duracion) var(--ease),
    filter var(--duracion) var(--ease);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.96); filter: brightness(0.97); box-shadow: var(--sombra-pelo); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.btn-ancha { width: 100%; }

.btn-oro {
  color: #2f2513;
  background: linear-gradient(150deg, var(--oro-brillo) 0%, var(--oro-claro) 38%, var(--oro) 100%);
}
.btn-tinta { background: var(--tinta); color: var(--marfil); }
.btn-fantasma {
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 0 0 1.5px var(--pelo);
}
.btn-peligroso { background: var(--rojo-suave); color: #fff; }

/* Botón de deseos: centrado, más grande (D10) */
.btn-deseos {
  display: flex; width: 100%; max-width: 440px; margin: 1rem auto 0;
  min-height: 68px; font-size: 1.06rem; line-height: 1.3;
  background: linear-gradient(150deg, var(--oro-brillo) 0%, var(--oro-claro) 38%, var(--oro) 100%);
  color: #2f2513; border-radius: var(--radio);
}

/* ---------------- Entradas ---------------- */

.campo {
  width: 100%; min-height: 50px; padding: 0.75rem 1rem;
  font-family: var(--sans); font-size: 1rem; color: var(--tinta);
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid var(--pelo); border-radius: 14px;
  transition: border-color var(--duracion) var(--ease), box-shadow var(--duracion) var(--ease);
}
.campo:focus {
  outline: none; border-color: var(--oro);
  box-shadow: 0 0 0 4px rgba(185, 143, 78, 0.18);
}
textarea.campo { min-height: 120px; resize: vertical; line-height: 1.5; }

/* ---------------- Toasts ---------------- */

#toasts {
  position: fixed; top: max(14px, env(safe-area-inset-top));
  left: 0; right: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 0.5rem;
  max-width: min(92vw, 460px); padding: 0.7rem 1.2rem;
  font-size: 0.92rem; font-weight: 500; color: var(--tinta);
  background: var(--vidrio-fuerte); backdrop-filter: blur(14px) saturate(1.4);
  border-radius: 999px;
  box-shadow: var(--sombra-suave), inset 0 1px 0 rgba(255,255,255,0.8);
  opacity: 0; transform: translateY(-16px) scale(0.96);
  animation: toast-entra 360ms var(--spring) forwards,
             toast-sale 340ms var(--ease) 2.8s forwards;
}
.toast b { font-weight: 600; }
.toast.err { background: rgba(179, 86, 78, 0.94); color: #fff; }
@keyframes toast-entra { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-sale { to { opacity: 0; transform: translateY(-10px) scale(0.97); } }

/* ---------------- Hojas y modales (glass, UI estática) ---------------- */

.capa {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(41, 35, 25, 0.35);
  backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms var(--ease);
}
.capa.abierta { opacity: 1; pointer-events: auto; }

.hoja {
  width: min(560px, 100%);
  padding: 1.4rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: var(--vidrio-fuerte);
  box-shadow: var(--sombra-fuerte);
  transform: translateY(48px); opacity: 0.4;
  transition: transform 340ms var(--ease-quint), opacity 260ms var(--ease);
}
.capa.abierta .hoja { transform: translateY(0); opacity: 1; }

@media (min-width: 640px) {
  .capa { align-items: center; }
  .hoja { border-radius: 26px; margin-bottom: 0; transform: translateY(28px) scale(0.97); }
}

.hoja-titulo { font-family: var(--serif); font-size: 1.35rem; margin: 0.1rem 0 0.9rem; }

/* ---------------- Barra de progreso ---------------- */

.progreso {
  height: 6px; border-radius: 999px;
  background: rgba(41, 35, 25, 0.1); overflow: hidden;
}
.progreso > i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--oro-claro), var(--oro));
  border-radius: 999px;
  transition: transform 200ms linear;
}

/* ---------------- Entraditas .avi (solo transform/opacity) ---------------- */

.avi {
  opacity: 0; transform: translateY(18px) scale(0.985);
  transition: opacity 520ms var(--ease-quint), transform 640ms var(--spring);
  will-change: transform, opacity;
}
.avi.visible { opacity: 1; transform: translateY(0) scale(1); }

/* ---------------- Utilidades ---------------- */

.oculto { display: none !important; }
.texto-suave { color: var(--tinta-suave); }
.fila { display: flex; align-items: center; gap: 0.7rem; }
.fila-final { justify-content: flex-end; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: rgba(41, 35, 25, 0.18); border-radius: 999px; }

/* ---------------- Reducción de movimiento ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}