:root{
  --top: #691b15;
  --bottom: #000000;
  --fg: #ffffff;

  --media-max: 640px;
  --logo-max: 140px;
  --svg-max: var(--media-max);
  --subcopy-max: calc(var(--media-max) - 60px);

  /* Form UI */
  --field-brd: rgba(255,255,255,.35);
  --field-brd-focus: #ffffff;
  --field-pad: 12px 14px;
  --field-radius: 6px;       

  --gap-vstack: clamp(12px, 3.5vw, 28px); 
  --gap-form: 12px;                      
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height: 1.4;
  background: linear-gradient(to bottom, var(--top) 0%, var(--bottom) 100%) fixed;
  min-height: 100dvh;
}

/* Contenedor */
.wrap{
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
}

/* Pila vertical */
.vstack{
  width: min(var(--media-max), 100%);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: var(--gap-vstack);
}

/* Visuales */
.media{ width: 100%; max-width: var(--media-max); height: auto; display: block; margin: 0 auto; }
.logo{ max-width: var(--logo-max); }

.svg-wrap{ max-width: var(--svg-max); overflow: visible; margin-bottom: 0; }
.headline{ width: 100%; height: auto; display: block; }

.subcopy{
  max-width: var(--subcopy-max);
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
  font-family: "NeutraTextTF", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.3;
  font-weight: 400;
  font-size: clamp(14px, 2.6vw, 18px);
  word-break: normal;
  overflow-wrap: anywhere;
}

/* -------- Form -------- */
.form{ display: grid; gap: var(--gap-form); }

/* Campos */
.form input,
.form select{
  width: 100%;
  background: #ffffff;
  color: #000000;                       
  border: 1px solid var(--field-brd);
  border-radius: var(--field-radius);
  padding: var(--field-pad);
  font-size: clamp(14px, 2.6vw, 16px);
  line-height: 1.3;
  outline: none;
}

/* Placeholders de inputs*/
.form input::placeholder,
.form input::-webkit-input-placeholder,
.form input:-ms-input-placeholder,
.form input::-ms-input-placeholder{ color: #000000; opacity: 1; }

/* Select en negro  */
.form select{ color:#000000; }
.form select option[value=""]{ color:#000000; }

/* Focus */
.form input:focus,
.form select:focus{
  border-color: var(--field-brd-focus);
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}


.grid-2{ display: grid; gap: var(--gap-form); }
@media (min-width: 640px){ .grid-2{ grid-template-columns: 1fr 1fr; } }

/* Casillas */
.checks{ display: grid; gap: 10px; margin-top: 4px; }
.check{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  color: #ffffff;
  font-size: clamp(13px, 2.4vw, 15px);
  line-height: 1.35;
}
.check input[type="checkbox"]{
  width: 18px; height: 18px; margin: 3px 0 0 0;
  accent-color: #000000;
  border: 1px solid #ffffff33;
  border-radius: 3px;
}


.btn{
  display: inline-block;              
  justify-self: center;              
  align-self: center;
  inline-size: max-content;           
  margin-top: 10px;
  padding: 12px 60px;
  border-radius: var(--field-radius);
  border: 1px solid #000000;
  background: #ffffff;
  color: #000000;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform: translateY(-1px); opacity: .95; }

/* Textos legales */
.legal{
  margin-top: 12px;
  color: #ffffff;
  font-size: clamp(12px, 2.2vw, 13px);
  line-height: 1.35;
  text-align: left;
}
.legal a{ color: #ffffff; text-decoration: underline; }

/* Accesibilidad */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,1px,1px); white-space: nowrap; border: 0;
}

/* ---- Mobile: mas aire arriba del logo y entre bloques ---- */
@media (max-width: 600px){
  .wrap{
    min-height: auto;
    place-items: start center;
    padding-top: 18px;            
  }
  .vstack{ gap: 16px; }         
  .logo{ margin-top: 0; }

  
  .subcopy{ max-width: 100%; line-height: 1.35; }
  .subcopy br{ display: none; }
}

/* Desktop bases */
@media (min-width: 1024px){
  :root{
    --media-max: 720px;
    --svg-max: var(--media-max);
    --subcopy-max: calc(var(--media-max) - 72px);
    --logo-max: 150px;
  }
}