:root{
  --ink:#0f172a;
  --ivory:#f8f7f4;
  --champ:#bda27a;
  --stone:#e7e2d9;
  --teal: #1b646b; 
}
html,body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--ivory);color:var(--ink)}
.display{font-family:"Playfair Display",serif}
.signature{font-family:"Great Vibes",cursive}
.card{box-shadow:0 10px 30px rgba(15,23,42,.08)}
.border-elegant{border-color:rgba(189,162,122,.35)}
.btn{transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.12)}
.lang-menu{backdrop-filter:saturate(140%) blur(6px); box-shadow:0 10px 30px rgba(15,23,42,.10)}
.lang-btn{box-shadow:0 6px 18px rgba(15,23,42,.06)}
.noscript-note{display:block; background:#fffbeb; color:#7c2d12; padding:.75rem; text-align:center}
/* ===== Botón Teal Elegante — Versión refinada ===== */
.btn-teal {
  background-color: #1b646b; /* tono principal elegante */
  color: #fff;
  font-weight: 500;
  border-radius: 9999px;
  transition: 
    transform .15s ease, 
    box-shadow .2s ease, 
    background-color .2s ease;
  box-shadow: 0 6px 16px rgba(27,100,107,0.25);
}

.btn-teal:hover {
  background-color: #155459; /* tono más oscuro al hover */
  box-shadow: 0 8px 22px rgba(27,100,107,0.35);
  transform: translateY(-2px);
}

.btn-teal:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(27,100,107,0.25);
}
.btn-teal.form {
  box-shadow: 0 4px 14px rgba(27,100,107,0.2);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.btn-teal.form:hover {
  background-color: #155459;
  box-shadow: 0 6px 18px rgba(27,100,107,0.3);
}
.signature {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: 2.6rem;        /* elegante y visible */
  line-height: 1.1;
  letter-spacing: 0.3px;
  color: var(--champ, #bda27a);
  text-align: left;
}