/* Estilos compartidos entre index.html y regalos.html.
   Cada pantalla define en su propio <style> las variables
   (--hunter, --terracota, etc.) y estilos que le son propios. */

:root{
  --paper:#f2e9d8;
  --paper-dark:#e6d9bf;
  --ink:#5b4326;
  --mustard:#c99a2e;
  --rose:#c67b7b;
  --cream-text:#fffaf0;
  --kraft:#b98a5e;
  --kraft-dark:#8a6239;
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  background:#d8cbb0;
  font-family:'Quicksand',sans-serif;
  display:flex;
  justify-content:center;
  padding:24px 12px 60px;
}

.card{
  position:relative;
  width:100%;
  background:var(--paper);
  border-radius:28px;
  box-shadow:0 20px 45px rgba(60,40,15,0.35);
}

/* ---------- botones ---------- */
.botones{
  position:absolute;
  left:0;
  right:0;
  bottom:5%;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:80%;
  margin:0 auto;
  z-index:100;
}
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border-radius:4px 16px 6px 18px;
  text-decoration:none;
  font-family:'Quicksand',sans-serif;
  font-weight:700;
  font-size:17px;
  letter-spacing:.2px;
  border:none;
  cursor:pointer;
  box-shadow:0 4px 0 rgba(60,40,15,.28), 0 8px 14px rgba(60,40,15,.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:focus-visible{ outline:3px dashed var(--kraft-dark); outline-offset:3px; }

/* primaria: la acción que importa (confirmar asistencia) */
.btn-whatsapp{
  background:var(--mustard);
  color:var(--cream-text);
  transform:rotate(-2deg);
}
.btn-whatsapp:active{
  transform:translateY(3px) rotate(-2deg);
  box-shadow:0 1px 0 rgba(60,40,15,.28), 0 3px 6px rgba(60,40,15,.2);
}

/* secundaria: navegación, no compite con la primaria */
.btn-regalo{
  background:var(--paper);
  color:var(--ink);
  border:2px dashed var(--kraft);
  box-shadow:0 3px 0 rgba(60,40,15,.18), 0 6px 10px rgba(60,40,15,.2);
  transform:rotate(1.5deg);
}
.btn-regalo:active{
  transform:translateY(3px) rotate(1.5deg);
  box-shadow:0 1px 0 rgba(60,40,15,.18), 0 2px 5px rgba(60,40,15,.15);
}
.btn-icon{ font-size:1.25rem; line-height:1,3; }