/* =====================================================================
   Landings públicas de referidos (REF004ReferirGanar / REF005LucasExtra).
   Páginas STANDALONE: no linkean EstiloUrmeneta.css, así que las Roboto
   self-hosted se declaran en cada .aspx (@font-face) — sin eso caen a
   Calibri (gotcha E028). Tokens del sistema de diseño Urmeneta.
   ===================================================================== */
:root {
    --ref-p: #004C32;      /* verde Urmeneta */
    --ref-ph: #006B45;
    --ref-sec: #2ABE76;
    --ref-bd: #E5E7EB;
    --ref-tx: #1A1A1A;
    --ref-mu: #5f7166;
    --ref-bg: #F6F8F7;
    --ref-okbg: #eef8f2;  --ref-okbd: #cfe8d9;  --ref-oktx: #256548;
    --ref-badbg: #fdecea; --ref-badbd: #f5b7b1; --ref-badtx: #9f2f25;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Roboto', Calibri, Candara, 'Segoe UI', Arial, sans-serif;
       background: var(--ref-bg); color: var(--ref-tx); -webkit-text-size-adjust: 100%; }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 14px 60px; }

/* Hero: el banner de campaña trae el texto GRABADO — ancho completo, alto
   automático, nunca cover (recortaría el copy por los costados). */
.hero { margin: 18px 0 0; border-radius: 12px; overflow: hidden; background: var(--ref-p); }
.hero img { display: block; width: 100%; height: auto; }

.intro { background: #fff; border: 1px solid var(--ref-bd); border-radius: 12px;
         padding: 22px; margin-top: 14px; }
.intro h1 { font-size: 22px; margin: 0 0 10px; color: var(--ref-p); }
.intro p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.intro .tyc { font-size: 13px; color: var(--ref-mu); margin: 0; }
.btn-bases { display: inline-block; margin: 8px 0 2px; padding: 10px 16px; border-radius: 8px;
             border: 1px solid var(--ref-p); color: var(--ref-p); text-decoration: none;
             font-size: 14px; font-weight: 600; }
.btn-bases:hover { background: var(--ref-okbg); }

.card { background: #fff; border: 1px solid var(--ref-bd); border-radius: 12px;
        padding: 22px; margin-top: 14px; }
.card h2 { font-size: 15px; margin: 0 0 14px; color: var(--ref-p);
           text-transform: uppercase; letter-spacing: .05em; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }

label.fld { display: block; font-size: 13px; color: var(--ref-mu); margin: 0 0 5px; }
.req { color: var(--ref-badtx); }
input[type=text], input[type=email], input[type=tel], select {
    width: 100%; padding: 11px 12px; border: 1px solid var(--ref-bd); border-radius: 8px;
    font-size: 16px; font-family: inherit; background: #fff; color: var(--ref-tx);
}
input:focus-visible, select:focus-visible { outline: 2px solid var(--ref-p); outline-offset: 1px; }
input.mal { border-color: var(--ref-badbd); background: #fffafa; }
.ayuda { font-size: 12px; color: var(--ref-mu); margin: 4px 0 0; }

/* Toggles INVERSIÓN/VIVIENDA y ENTREGA: radios reales (teclado y sin-JS
   funcionan) pintados como botones segmentados; el input queda oculto
   accesible. Objetivo táctil ≥ 44px. */
.seg { display: flex; border: 1px solid var(--ref-bd); border-radius: 8px; overflow: hidden; }
.seg label { flex: 1; text-align: center; padding: 12px 8px; font-size: 14px; cursor: pointer;
             color: var(--ref-mu); background: #fff; min-height: 44px;
             display: flex; align-items: center; justify-content: center;
             -webkit-tap-highlight-color: transparent; }
.seg label + label { border-left: 1px solid var(--ref-bd); }
.seg input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
             clip: rect(0 0 0 0); }
.seg input:checked + label { background: var(--ref-p); color: #fff; font-weight: 600; }
.seg input:focus-visible + label { outline: 2px solid var(--ref-p); outline-offset: -3px; }

/* Consentimiento: casillas grandes, etiqueta entera clickeable, y SIN el
   verde de "todo bien" — una casilla legal no es un paso de éxito del flujo. */
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
           padding: 12px; border: 1px solid var(--ref-bd); border-radius: 8px; background: #fbfcfb; }
.consent input[type=checkbox] { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; }
.consent label { font-size: 13px; color: var(--ref-tx); line-height: 1.55; cursor: pointer; }
.glosa { font-size: 13px; color: var(--ref-mu); line-height: 1.6; margin: 14px 0 0; }
.politica { font-size: 12px; color: var(--ref-mu); margin: 8px 0 0; }
.politica a { color: var(--ref-p); }

.hp { display: none; }   /* honeypot: display:none, NUNCA fuera de pantalla (gotcha E028) */

.btn { background: var(--ref-p); color: #fff; border: none; padding: 14px 18px; border-radius: 8px;
       font-size: 16px; cursor: pointer; font-weight: 600; width: 100%; margin-top: 16px; }
.btn:hover { background: var(--ref-ph); }
.btn:disabled { opacity: .55; cursor: default; }

.msg { padding: 12px 14px; border-radius: 8px; font-size: 14px; margin-top: 14px;
       line-height: 1.5; display: none; }
.msg.bad { background: var(--ref-badbg); border: 1px solid var(--ref-badbd); color: var(--ref-badtx); }
.msg.show { display: block; }

/* Cierre */
.cierre { background: var(--ref-p); border: 0; color: #fff; text-align: center;
          padding: 30px 22px; display: none; opacity: 0; transform: scale(.96); }
.cierre.abierto { display: block; opacity: 1; transform: scale(1);
                  transition: opacity .18s ease-out, transform .18s ease-out; }
.cierre h2 { font-size: 20px; font-weight: 600; margin: 14px 0 8px; color: #fff;
             text-transform: none; letter-spacing: 0; }
.cierre p { color: #D9E7E0; font-size: 15px; line-height: 1.6; margin: 0 auto; max-width: 52ch; }
.cierre .arte { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.10);
                display: inline-flex; align-items: center; justify-content: center; }
.cierre .arte svg { width: 48px; height: 48px; }

.pie { text-align: center; font-size: 12px; color: var(--ref-mu); margin-top: 24px; line-height: 1.7; }
.pie a { color: var(--ref-p); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }