/* Modal "Solicitar acceso" en el lenguaje v4 (oct-2026): tarjeta blanca de radio
   grande sobre un velo de tinta, Urbanist en todo, campos grises sin borde,
   control segmentado en pastillas y envío en pastilla de tinta. En teléfono se
   vuelve una hoja que sube desde abajo.
   Lo comparten la home (/landing-v4/index.html) y /pulse (/landing-v4/pulse.html).
   El markup y lead.js son los de la v3: acá sólo cambia la piel — ningún id,
   ninguna clase ni ningún comportamiento del form depende de este archivo. */
.ral-overlay{
  --ral-canvas:#F2F2F4;   /* lienzo de la página: fondo de los campos */
  --ral-card:#fff;
  --ral-ink:#0D0D0F;
  --ral-muted:#5C5F66;
  --ral-dim:#686B72;
  --ral-line:#E4E4E8;
  --ral-accent:#E8551F;
  --ral-accent-ink:#B23A16;
  --ral-ease:cubic-bezier(.22,1,.36,1);
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(13,13,15,.42);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  font-family:Urbanist,system-ui,sans-serif;color:var(--ral-ink);
  -webkit-font-smoothing:antialiased;
}
.ral-overlay.open{display:flex;animation:ral-veil .28s ease-out}
.ral-overlay *,.ral-overlay *::before,.ral-overlay *::after{box-sizing:border-box}
/* Los controles de formulario no heredan la fuente por defecto. */
.ral-overlay button,.ral-overlay input,.ral-overlay textarea,.ral-overlay select{font-family:inherit}

.ral-panel{
  width:100%;max-width:600px;max-height:calc(100svh - 48px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--ral-card);border-radius:32px;padding:44px 44px 36px;position:relative;
  box-shadow:0 40px 100px rgba(13,13,15,.28),0 2px 8px rgba(13,13,15,.06);
  scrollbar-width:thin;scrollbar-color:var(--ral-line) transparent;
}
.ral-overlay.open .ral-panel{animation:ral-rise .5s var(--ral-ease)}
@keyframes ral-veil{from{opacity:0}to{opacity:1}}
@keyframes ral-rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

.ral-close{
  position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:999px;border:0;
  display:flex;align-items:center;justify-content:center;background:var(--ral-canvas);color:var(--ral-muted);
  font-size:15px;line-height:1;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ral-ease);
}
.ral-close:hover{background:#E6E6EA;color:var(--ral-ink)}
.ral-close:active{transform:scale(.94)}

.ral-kicker{font-size:15px;color:var(--ral-dim);margin:0 0 14px}
.ral-kicker::first-letter{text-transform:uppercase}
.ral-title{font-size:clamp(34px,4.4vw,46px);font-weight:300;letter-spacing:-.035em;line-height:1.02;margin:0 0 14px;color:var(--ral-ink)}
.ral-sub{font-size:17px;line-height:1.5;color:var(--ral-muted);margin:0 0 30px;max-width:44ch}

.ral-form{display:flex;flex-direction:column;gap:18px}
.ral-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ral-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.ral-label{font-size:14px;font-weight:500;color:var(--ral-muted)}

/* Campos: el gris del lienzo dentro de la tarjeta blanca, sin borde visible —
   el hueco donde se escribe se lee como hueco. Con foco pasan a blanco con un
   anillo de tinta. 16px para que iOS no haga zoom al enfocar. */
.ral-input,.ral-select,.ral-textarea,.ral-dd-btn{
  width:100%;background:var(--ral-canvas);border:1px solid transparent;border-radius:16px;
  color:var(--ral-ink);font-size:16px;line-height:1.3;padding:0 16px;height:50px;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.ral-textarea{height:auto;min-height:104px;padding:14px 16px;resize:vertical;line-height:1.45}
.ral-input::placeholder,.ral-textarea::placeholder{color:var(--ral-dim);opacity:1}
.ral-input:hover,.ral-textarea:hover,.ral-dd-btn:hover{background:#ECECF0}
.ral-input:focus,.ral-select:focus,.ral-textarea:focus,.ral-dd-btn:focus-visible,.ral-dd.open .ral-dd-btn{
  outline:none;background:#fff;border-color:var(--ral-ink);box-shadow:0 0 0 4px rgba(13,13,15,.07);
}
/* Autocompletado: el celeste de Chrome le gana a cualquier background-color;
   la única vía soportada para pisarlo es una sombra interior enorme. */
.ral-input:-webkit-autofill,.ral-input:-webkit-autofill:hover,
.ral-input:-webkit-autofill:focus,.ral-input:-webkit-autofill:active,
.ral-textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 100px var(--ral-canvas) inset!important;
  box-shadow:0 0 0 100px var(--ral-canvas) inset!important;
  -webkit-text-fill-color:var(--ral-ink)!important;caret-color:var(--ral-ink);
  transition:background-color 0s 6000000s,color 0s 6000000s;
}
.ral-select{appearance:none;cursor:pointer}

/* Desplegable propio (el popup del select nativo es del sistema). */
.ral-dd{position:relative}
.ral-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;text-align:left}
.ral-dd-placeholder{color:var(--ral-dim)}
.ral-dd-caret{color:var(--ral-muted);flex:none;transition:transform .3s var(--ral-ease)}
.ral-dd.open .ral-dd-caret{transform:rotate(180deg)}
.ral-dd-list{
  display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;background:#fff;
  border-radius:20px;padding:6px;max-height:252px;overflow-y:auto;
  box-shadow:0 24px 60px rgba(13,13,15,.16),0 0 0 1px var(--ral-line);
}
.ral-dd.open .ral-dd-list{display:block;animation:ral-drop .22s var(--ral-ease)}
@keyframes ral-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ral-dd-item{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;background:transparent;border:0;
  border-radius:14px;cursor:pointer;text-align:left;font-size:15px;color:var(--ral-muted);padding:11px 14px;
  transition:background .15s,color .15s;
}
.ral-dd-item:hover,.ral-dd-item:focus-visible{background:var(--ral-canvas);color:var(--ral-ink);outline:none}
.ral-dd-item.on{color:var(--ral-ink);font-weight:500}
.ral-dd-item.on::after{content:'';width:8px;height:8px;border-radius:999px;background:var(--ral-accent);flex:none}

/* "Me interesa": el mismo control segmentado de la landing (.seg), en pastillas. */
.ral-seg{display:flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:999px;background:var(--ral-canvas)}
.ral-seg button{
  flex:1 1 auto;min-width:0;height:40px;padding:0 14px;border:0;border-radius:999px;background:transparent;
  font-size:15px;color:var(--ral-muted);cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ral-ease),color .25s;
}
.ral-seg button:hover{color:var(--ral-ink)}
.ral-seg button.on{background:var(--ral-ink);color:#fff}
.ral-seg button:focus-visible{outline:2px solid var(--ral-accent);outline-offset:2px}

.ral-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0}

.ral-submit{
  /* inline-block y no flex: ::first-letter no se aplica a un contenedor flex
     (el texto viene en minúscula del markup y de lead.js). */
  align-self:flex-start;display:inline-block;text-align:center;
  height:52px;line-height:52px;padding:0 28px;margin-top:6px;border:0;border-radius:999px;background:var(--ral-ink);color:#fff;
  font-size:16px;font-weight:500;cursor:pointer;transition:background .2s,transform .2s var(--ral-ease);
}
.ral-submit::first-letter{text-transform:uppercase}
.ral-submit:hover{background:#000}
.ral-submit:active{transform:scale(.97)}
.ral-submit:focus-visible{outline:2px solid var(--ral-accent);outline-offset:3px}
.ral-submit:disabled{opacity:.5;cursor:default;transform:none}
.ral-error{font-size:14px;line-height:1.45;color:#C1261F;margin:0;padding:12px 16px;border-radius:14px;background:#FCECEA}
.ral-legal{font-size:13px;color:var(--ral-dim);margin:0;line-height:1.5}
.ral-legal a{color:inherit}

.ral-success{text-align:center;padding:40px 8px 20px;display:none}
.ral-success-mark{
  width:64px;height:64px;margin:0 auto 22px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--ral-ink);color:#fff;font-size:26px;
}
.ral-success-title{font-size:36px;font-weight:300;letter-spacing:-.035em;line-height:1.05;margin:0 0 12px;color:var(--ral-ink)}
.ral-success-body{font-size:17px;color:var(--ral-muted);line-height:1.55;margin:0 auto;max-width:40ch}
.ral-success-body strong{font-weight:500}

/* Badge flotante de reCAPTCHA oculto: la atribución está en el form (.ral-legal). */
.grecaptcha-badge{visibility:hidden}
body.lead-open{overflow:hidden}

/* Teléfono: hoja inferior que sube, con el mismo margen fino que los bloques de la landing. */
@media (max-width:600px){
  .ral-overlay{align-items:flex-end;padding:8px}
  .ral-panel{max-height:calc(100svh - 16px);border-radius:28px;padding:30px 20px 24px}
  .ral-overlay.open .ral-panel{animation:ral-sheet .46s var(--ral-ease)}
  .ral-close{top:14px;right:14px}
  .ral-kicker{margin-bottom:10px}
  .ral-title{font-size:34px;padding-right:44px}
  .ral-sub{font-size:16px;margin-bottom:24px}
  .ral-row{grid-template-columns:1fr}
  .ral-seg{display:grid;grid-template-columns:1fr 1fr;border-radius:24px}
  .ral-seg button{padding:0 10px;font-size:14px}
  .ral-submit{align-self:stretch}
}
/* Piso anti-zoom de iOS (Safari hace zoom al enfocar un campo < 16px y no lo
   revierte). Los campos ya nacen en 16px; esto lo garantiza en táctil aunque
   alguien después achique uno por clase. Sin maximum-scale en el viewport. */
@media (max-width:767px),(pointer:coarse){
  .ral-overlay :is(input:not([type=checkbox],[type=radio],[type=hidden],[type=submit],[type=button]),textarea,select){font-size:max(1rem,16px)}
}
@keyframes ral-sheet{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .ral-overlay.open,.ral-overlay.open .ral-panel,.ral-dd.open .ral-dd-list{animation:none}
}