/* ============================================================
   Propuesta para Ara — estilos compartidos
   Paleta: vino profundo, rosa pálido, dorado suave, crema
   ============================================================ */
:root {
  --vino: #3b0f1f;
  --vino-oscuro: #2a0a16;
  --rosa: #f5c6cf;
  --rosa-fuerte: #e88fa4;
  --dorado: #d9a45b;
  --crema: #fff6f0;
  --sombra: 0 18px 50px rgba(0, 0, 0, 0.45);
}

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

html, body { height: 100%; }

body {
  font-family: "Jost", "Segoe UI", sans-serif;
  color: var(--crema);
  background:
    radial-gradient(1200px 700px at 20% -10%, #5a1c33 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #571a30 0%, transparent 55%),
    var(--vino-oscuro);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  padding: 24px;
  overflow-x: hidden;
}

h1, h2, .titulo {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Corazones flotando de fondo */
.corazones {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.corazones span {
  position: absolute;
  bottom: -6vh;
  font-size: 20px;
  opacity: 0;
  animation: flotar linear infinite;
}
@keyframes flotar {
  0%   { transform: translateY(0) scale(0.8) rotate(-8deg); opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.25; }
  100% { transform: translateY(-115vh) scale(1.15) rotate(10deg); opacity: 0; }
}

/* Tarjeta central */
.tarjeta {
  position: relative;
  z-index: 1;
  margin: auto;
  width: min(680px, 100%);
  background: linear-gradient(160deg, rgba(255, 246, 240, 0.07), rgba(255, 246, 240, 0.02));
  border: 1px solid rgba(245, 198, 207, 0.25);
  border-radius: 22px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: var(--sombra);
  backdrop-filter: blur(6px);
}

.tarjeta h1 {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  color: var(--rosa);
  margin-bottom: 10px;
}

.tarjeta .subtitulo {
  color: rgba(255, 246, 240, 0.75);
  font-size: 1.05rem;
  margin-bottom: 30px;
}

/* Botones */
.boton {
  display: inline-block;
  font-family: inherit;
  font-size: 1.05rem;
  padding: 14px 42px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: var(--vino);
  background: linear-gradient(135deg, var(--rosa), var(--rosa-fuerte));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 22px rgba(232, 143, 164, 0.35);
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(232, 143, 164, 0.5); }
.boton:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; }
.boton:active { transform: translateY(0); }

.boton.secundario {
  background: transparent;
  color: var(--rosa);
  border: 1.5px solid var(--rosa);
  box-shadow: none;
}

/* ------------------ Página 1: fecha ------------------ */
.campos-fecha {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.campo label {
  font-size: 0.85rem;
  color: rgba(255, 246, 240, 0.65);
}
.campo select, .campo input {
  font-family: inherit;
  font-size: 1.1rem;
  text-align: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(245, 198, 207, 0.35);
  background: rgba(42, 10, 22, 0.6);
  color: var(--crema);
  min-width: 110px;
}
.campo select:focus, .campo input:focus {
  outline: none;
  border-color: var(--dorado);
}

.error {
  color: #ffb3c0;
  min-height: 1.4em;
  margin-bottom: 16px;
  font-size: 0.95rem;
}
.tarjeta.sacudir { animation: sacudir 0.4s ease; }
@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-9px); }
  75% { transform: translateX(9px); }
}

/* ------------------ Fotos ------------------ */
.galeria {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 26px 0;
}
.galeria img {
  width: 150px;
  height: 190px;
  object-fit: cover;
  border-radius: 14px;
  border: 3px solid rgba(245, 198, 207, 0.5);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transform: rotate(var(--giro, 0deg));
  transition: transform 0.25s ease;
}
.galeria img:hover { transform: rotate(0deg) scale(1.06); }
.galeria img:nth-child(1) { --giro: -4deg; }
.galeria img:nth-child(2) { --giro: 2.5deg; }
.galeria img:nth-child(3) { --giro: -2deg; }

/* ------------------ Página 2: carta ------------------ */
.carta-texto {
  text-align: left;
  font-size: 1.08rem;
  line-height: 1.85;
  color: rgba(255, 246, 240, 0.92);
  max-width: 56ch;
  margin: 0 auto 30px;
}
.carta-texto p + p { margin-top: 1em; }
.firma {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  color: var(--dorado);
  text-align: right;
  margin-top: 1.2em;
}

/* ------------------ Página 3: pregunta ------------------ */
.pregunta-titulo {
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  color: var(--rosa);
  margin-bottom: 34px;
}
.botones-si-no {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
}
#btn-si {
  background: linear-gradient(135deg, #7ee8a2, #3ec46d);
  color: #0d2a18;
  box-shadow: 0 8px 22px rgba(62, 196, 109, 0.35);
}
#btn-no {
  background: transparent;
  color: var(--rosa);
  border: 1.5px solid var(--rosa);
  box-shadow: none;
}
.mensaje-no {
  margin-top: 26px;
  min-height: 2em;
  font-size: 1.05rem;
  color: var(--dorado);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mensaje-no.visible { opacity: 1; }

/* Pantalla de "cierre" si window.close no funciona */
.pantalla-cierre {
  position: fixed;
  inset: 0;
  background: #000;
  color: rgba(255, 246, 240, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 99;
  text-align: center;
  padding: 24px;
}
.pantalla-cierre.visible { display: flex; }

/* ------------------ Página 4: ramo ------------------ */
.escena-ramo {
  width: min(420px, 90vw);
  margin: 0 auto 10px;
}
.mensaje-final {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  color: var(--dorado);
  opacity: 0;
  transform: translateY(12px);
  animation: aparecer 1.2s ease 5.2s forwards;
}
@keyframes aparecer {
  to { opacity: 1; transform: translateY(0); }
}

/* Animación del ramo: cada pieza entra escalonada */
.pieza {
  opacity: 0;
  transform-origin: 210px 470px;
  animation: brotar 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
@keyframes brotar {
  0%   { opacity: 0; transform: scale(0.2) rotate(-14deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .corazones span, .pieza, .mensaje-final, .tarjeta.sacudir { animation-duration: 0.01s !important; animation-delay: 0s !important; }
}

@media (max-width: 520px) {
  .tarjeta { padding: 34px 22px; }
  .galeria img { width: 120px; height: 152px; }
}