/* Pagina /en/ - traduccion de la home + lista de espera de la version en ingles.
   Se apoya en bootstrap.min.css y style.css (cabecera .top, botones .btn, pie .site-footer). */

/* --------------------------------- hero --------------------------------- */
.wl-hero a.btn, .wl-hero a.btn:hover, .wl-hero a.btn:focus { color: #fff; text-decoration: none; }
.wl-hero {
  background: linear-gradient(rgba(18, 38, 66, .80), rgba(18, 38, 66, .86)), url(../../img/banner-1.jpg) center / cover no-repeat;
  color: #fff;
  padding: 56px 16px 64px;
  min-height: calc(100vh - 70px);
  box-sizing: border-box;
  display: flex; align-items: center;
}
.wl-hero-grid {
  width: 100%; max-width: 1120px; margin: 0 auto;
  display: grid; gap: 28px 56px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "intro card" "perks card";
  align-items: start;
}
.wl-intro { grid-area: intro; }
.wl-card  { grid-area: card; }
.wl-perks { grid-area: perks; }

.wl-eyebrow { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: #cfe6f7; }
.wl-intro h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; font-weight: 700; margin: 0 0 18px; color: #fff; }
.wl-lead { font-size: 1.25rem; line-height: 1.5; margin: 0 0 12px; color: #e8f1f8; }
.wl-quote { margin: 18px 0 0; padding-left: 16px; border-left: 3px solid #76bc1c; font-size: 1.15rem; line-height: 1.45; font-style: italic; color: #cfe0ee; }

.wl-perks h2 { font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; color: #9fd24d; margin: 8px 0 14px; font-weight: 700; }
.wl-perks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wl-perks li { display: flex; gap: 14px; align-items: flex-start; }
.wl-perks li i { flex: 0 0 38px; height: 38px; border-radius: 50%; background: rgba(118,188,28,.18); color: #9fd24d; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.wl-perks li strong { display: block; font-size: 1.15rem; color: #fff; line-height: 1.2; }
.wl-perks li span { display: block; font-size: 1.02rem; line-height: 1.4; color: #cfe0ee; margin-top: 2px; }

/* ------------------------------- formulario ------------------------------- */
.wl-card { background: #fff; color: #353d47; border-radius: 10px; padding: 28px 28px 22px; box-shadow: 0 18px 50px rgba(0,0,0,.35); border-top: 5px solid #76bc1c; }
.wl-card-title { font-size: 1.7rem; margin: 0 0 18px; color: #1e4483; font-weight: 700; }
.wl-field { margin-bottom: 16px; }
.wl-field label { display: block; font-size: 1.05rem; margin-bottom: 6px; color: #1e4483; font-weight: 600; }
.wl-optional { font-weight: 400; color: #798188; }
.wl-field input[type=email], .wl-field input[type=text], .wl-field textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1.05rem; line-height: 1.4;
  padding: 11px 13px; border: 1px solid #c5d0dc; border-radius: 6px; background: #fff; color: #353d47;
  transition: border-color .15s, box-shadow .15s;
}
.wl-field textarea { resize: vertical; min-height: 84px; }
.wl-field input:focus, .wl-field textarea:focus { outline: none; border-color: #2980b9; box-shadow: 0 0 0 3px rgba(41,128,185,.25); }
.wl-field [aria-invalid=true] { border-color: #c0392b; }
.wl-count { text-align: right; font-size: .85rem; color: #98a2ad; margin: 3px 0 0; }
.wl-error { color: #c0392b; font-size: .98rem; margin: 6px 0 0; min-height: 0; }
.wl-error:empty { display: none; }

.wl-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.wl-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: .98rem !important; line-height: 1.4; color: #4a5560 !important; cursor: pointer; }
.wl-check input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: #2980b9; }

.wl-submit { width: 100%; font-size: 1.3rem; padding: 11px 16px; border-radius: 6px; cursor: pointer; }
.wl-submit[disabled] { opacity: .7; cursor: progress; }
.wl-status { min-height: 0; margin: 12px 0 0; font-size: 1rem; text-align: center; }
.wl-status:empty { display: none; }
.wl-status-error { color: #c0392b; }

.wl-privacy { margin-top: 16px; font-size: .88rem; line-height: 1.45; color: #6c757d; }
.wl-privacy summary { cursor: pointer; color: #2980b9; }
.wl-privacy p { margin: 8px 0 0; }

.wl-success { text-align: center; padding: 18px 4px 10px; }
.wl-success:focus { outline: none; }
.wl-success-icon { width: 72px; height: 72px; line-height: 72px; margin: 0 auto 14px; border-radius: 50%; background: #eaf6d8; color: #5a9a0c; font-size: 2rem; }
.wl-success h2 { font-size: 1.7rem; color: #1e4483; margin: 0 0 12px; }
.wl-success p { font-size: 1.1rem; line-height: 1.5; margin: 0 0 10px; }
.wl-success .wl-small { font-size: .95rem; color: #798188; }

/* ----------------------------- selector idioma ----------------------------- */
/* (las reglas base de .lang-switch viven en style.css, compartidas con la home) */

/* --------------------------------- responsive --------------------------------- */
@media (max-width: 960px) {
  .wl-hero { padding: 36px 16px 48px; }
  .wl-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "card" "perks"; gap: 28px; }
}
@media (max-width: 520px) {
  .wl-card { padding: 22px 18px 18px; }
  .wl-lead { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Pie: aviso de idioma de los documentos legales */
.site-footer-note { margin: 0; padding: 0 0 14px; color: #9aa5b1; font-size: 13px; }

/* Cabecera /en/ en movil: el menu no debe ensanchar la pagina */
@media (max-width: 700px) {
  body.wl-en .top .menu-top, body.wl-en .top .menu-top .contenedor { max-width: 100%; }
  body.wl-en .top .menu-top .contenedor { font-size: 1.05rem; }
  body.wl-en .top .menu-top .contenedor a { font-size: 16px; width: 25%; flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; }
}

/* Titulos de seccion en ingles son mas largos: que no ensanchen la pagina en movil */
@media (max-width: 700px) {
  body.wl-en .features-titulo { font-size: 2.2rem; overflow-wrap: anywhere; }
}
@media (max-width: 700px) {
  body.wl-en .contenedor-titulo .row { margin-left: 0; margin-right: 0; }
}

@media (max-width: 1000px) { .wl-hero { min-height: calc(100vh - 90px); } }