/* Réplica del diseño original de genesisonlineapplication.com, sin menú de navegación. */

@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/pt-serif-700.woff2") format("woff2");
}

:root {
  --navy: #012748;
  --text: #2d2e2e;
  --input-text: #212121;
  --input-border: #b1b1b1;
  --page-bg: #f5f7fa;
  --error: #f00;
  --serif: "PT Serif", "Times New Roman", Times, serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  color: var(--text);
  background: var(--page-bg);
  text-align: center;
}

.shell { max-width: 1200px; margin: 0 auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Header */
.site-header { position: relative; padding: 37px 15px; background: #fff; }
.brand { display: inline-block; }
.brand img { display: block; width: auto; height: 68px; }
.lang-switch {
  position: absolute; top: 50%; right: 40px; transform: translateY(-50%);
  display: flex; gap: 10px;
}
.lang-switch a { display: block; line-height: 0; opacity: .55; transition: opacity .2s; }
.lang-switch a:hover, .lang-switch a[aria-current="true"] { opacity: 1; }
.lang-switch img { width: 20px; height: 20px; }

/* Banner */
.banner { background: var(--navy); color: #fff; }
.banner .shell { padding: 70px 15px 60px; }
.banner h1 { margin: 0; font-size: 72px; line-height: 80px; font-weight: 700; }

/* Contenido */
.content { padding: 114px 0; }

.status { margin: 0 0 30px; padding: 0 15px; font-size: 24px; line-height: 32px; }
.status-success { color: var(--navy); }
.status-error { color: var(--error); }

.card { padding: 10px 15px; background: #fff; }
.card + .card { margin-top: 10px; }

.group { margin: 0; padding: 0; border: 0; min-width: 0; }
.group legend {
  float: left; width: 100%; margin: 20px 0 0; padding: 0;
  font-size: 18px; line-height: 22px; color: var(--text); text-align: center;
}

.grid { clear: both; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px 30px; padding: 10px 15px 0; }
.field { grid-column: span 12; min-width: 0; }

.field input, .field select {
  display: block; width: 100%; height: 50px; margin: 0; padding: 14px 10px;
  font: 700 14px/24px var(--serif); color: var(--input-text);
  background: #fff; border: 1px solid var(--input-border); border-radius: 5px;
  outline: none; transition: border-color .2s;
}
.field input::placeholder { color: var(--text); opacity: 1; }
.field input:focus, .field select:focus { border-color: var(--navy); }
.field select {
  appearance: none; padding: 0 32px 0 10px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232d2e2e'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.field [aria-invalid="true"] { border-color: var(--error); }

@media (min-width: 768px) {
  .w-2 { grid-column: span 2; }
  .w-4 { grid-column: span 4; }
  .w-6 { grid-column: span 6; }
}

.card-actions { padding: 35px 15px; }
.btn {
  padding: 15px 27px; font: 700 16px/16px var(--serif); color: #fff;
  background: var(--navy); border: 2px solid var(--navy); border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .18); cursor: pointer; transition: box-shadow .2s;
}
.btn:hover { box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .28); }
.btn:disabled { opacity: .7; cursor: wait; }

/* Honeypot: fuera de pantalla (no display:none) para que los bots lo completen */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* WhatsApp: izquierda en móvil, derecha en escritorio (como el original) */
.whatsapp { position: fixed; bottom: 20px; left: 20px; z-index: 1000; line-height: 0; }
.whatsapp img { width: 75px; height: 75px; }

@media (min-width: 768px) {
  .whatsapp { left: auto; right: 20px; }
}

@media (max-width: 767px) {
  .site-header { padding: 16px 15px; }
  .brand img { height: 38px; }
  .lang-switch { right: 15px; }
  .banner .shell { padding: 30px 15px; }
  .banner h1 { font-size: 36px; line-height: 42px; }
  .content { padding: 30px 0 110px; }
  .card { padding: 10px 0; }
  .status { font-size: 18px; line-height: 26px; }
}