/* Vuelve AI — puerta de acceso. Marca: rosa, lila y dorado luminoso sobre
   mármol blanco; ciruela para el texto. Cormorant Garamond para titulares. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  --ciruela: #4a2545;
  --ciruela-2: #6d3563;
  --rosa: #e8a0bf;
  --rosa-suave: #fbeef5;
  --lila: #c9a7eb;
  --dorado: #c9a227;
  --dorado-suave: #f3e5bb;
  --borde: #e9d5e5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--ciruela);
  background:
    radial-gradient(1100px 500px at 15% -10%, #fbe3f0 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 0%, #efe4fb 0%, transparent 55%),
    linear-gradient(180deg, #fffafc 0%, #fdf3f9 100%);
  min-height: 100vh;
}

.gate {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px 48px;
}

.gate-card {
  width: 100%;
  max-width: 460px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--borde);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(109, 53, 99, 0.14);
  padding: 30px 26px 26px;
  text-align: center;
}

.gate-logo {
  width: 118px; height: 118px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--dorado-suave);
  box-shadow: 0 0 0 5px #fff, 0 10px 26px rgba(201, 162, 39, 0.25);
}

.gate-brand {
  font-family: "Cormorant Garamond", serif;
  font-size: 42px;
  font-weight: 600;
  margin: 12px 0 0;
  color: var(--ciruela);
}

.gate-tag {
  margin: 2px 0 0;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  color: var(--dorado);
}

.gate-phrase {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 19px;
  margin: 10px 0 4px;
  color: var(--ciruela-2);
}

.gate-lang { margin: 14px 0 6px; display: flex; gap: 8px; justify-content: center; }
.lang-btn {
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--ciruela-2);
  border-radius: 999px;
  padding: 5px 14px;
  font: 600 12px "Montserrat", sans-serif;
  cursor: pointer;
}
.lang-btn.active {
  background: linear-gradient(135deg, var(--ciruela-2), var(--ciruela));
  color: #fff;
  border-color: transparent;
}

.gate-tabs {
  display: flex; gap: 8px; margin: 14px 0 18px;
  background: var(--rosa-suave);
  border-radius: 999px; padding: 5px;
}
.gate-tabs .tab {
  flex: 1; border: 0; border-radius: 999px; padding: 10px 6px;
  background: transparent; color: var(--ciruela-2);
  font: 600 13.5px "Montserrat", sans-serif; cursor: pointer;
}
.gate-tabs .tab.active {
  background: linear-gradient(135deg, var(--ciruela-2), var(--ciruela));
  color: #fff;
  box-shadow: 0 6px 16px rgba(74, 37, 69, 0.25);
}

.gate-form { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.gate-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ciruela-2); }
.gate-form input[type="text"],
.gate-form input[type="email"],
.gate-form input[type="tel"],
.gate-form input[type="password"] {
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 12px 13px;
  font: 500 15px "Montserrat", sans-serif;
  color: var(--ciruela);
  background: #fff;
  outline: none;
}
.gate-form input:focus { border-color: var(--lila); box-shadow: 0 0 0 3px rgba(201, 167, 235, 0.25); }

.gate-entry { border: 1px dashed var(--borde); border-radius: 16px; padding: 12px; margin: 2px 0; }
.gate-entry legend { font-size: 12.5px; font-weight: 700; color: var(--ciruela-2); padding: 0 6px; }
.gate-entry .entry-card {
  flex-direction: row; align-items: flex-start; gap: 10px;
  background: var(--rosa-suave);
  border-radius: 12px; padding: 10px 12px; margin-top: 8px; cursor: pointer;
  font-weight: 500; color: var(--ciruela);
}
.gate-entry .entry-card input { margin-top: 3px; accent-color: var(--ciruela-2); }
.gate-entry .entry-card small { color: var(--ciruela-2); }

.gate-cta {
  display: block; width: 100%;
  border: 0; border-radius: 999px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #d6336c, var(--ciruela-2));
  color: #fff; text-align: center; text-decoration: none;
  font: 700 15.5px "Montserrat", sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(214, 51, 108, 0.28);
}
.gate-cta:hover { filter: brightness(1.05); }
.gate-pay { margin-top: 10px; }
.gate-pay.gold { background: linear-gradient(135deg, var(--dorado), #a8861c); box-shadow: 0 10px 22px rgba(201, 162, 39, 0.3); }

.gate-h2 { font-family: "Cormorant Garamond", serif; font-size: 28px; margin: 8px 0 4px; }
.gate-note { font-size: 13px; color: var(--ciruela-2); line-height: 1.55; margin: 8px 0; text-align: center; }
.gate-form .gate-note { text-align: center; }
.gate-error {
  background: #fdeef2; border: 1px solid #f3b8c6; color: #8f1d3f;
  border-radius: 12px; padding: 10px 12px; font-size: 13px; margin: 0;
}
.gate-row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.gate-mini {
  border: 1px solid var(--borde); background: #fff; color: var(--ciruela-2);
  border-radius: 999px; padding: 8px 14px;
  font: 600 12.5px "Montserrat", sans-serif; cursor: pointer;
}

.app-logout {
  position: fixed; right: 14px; bottom: 86px; z-index: 9999;
  border: 1px solid var(--dorado-suave);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ciruela-2);
  border-radius: 999px; padding: 8px 14px;
  font: 600 12.5px "Montserrat", sans-serif;
  box-shadow: 0 8px 20px rgba(74, 37, 69, 0.18);
  cursor: pointer;
}