/* =========================================================
   RELAYABLE — GANCHO COMPRADOR
   Identidad visual 2026
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root{
  --relayable-navy:#0B2347;
  --relayable-lavender:#4E568D;
  --relayable-lavender-dark:#343B70;
  --relayable-lavender-light:#EEEAF0;
  --relayable-cream:#F5F1F0;
  --relayable-white:#FFFFFF;
  --relayable-text:#0B2347;
  --relayable-muted:#6F7080;
  --relayable-border:rgba(11,35,71,.12);
}

/* PÁGINA */

body{
  margin:0;
  min-height:100vh;
  font-family:'DM Sans',system-ui,sans-serif;
  color:var(--relayable-text);
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(78,86,141,.10),
      transparent 30%
    ),
    var(--relayable-cream);
}

/* TARJETA PRINCIPAL */

.container{
  width:calc(100% - 40px);
  max-width:760px;
  margin:56px auto;
  padding:48px 52px 52px;
  box-sizing:border-box;

  background:rgba(255,255,255,.96);
  border:1px solid var(--relayable-border);
  border-radius:24px;

  box-shadow:
    0 22px 60px rgba(11,35,71,.08);
}

/* MARCA */

.brand{
  margin:0 0 28px;

  font-family:'Playfair Display',Georgia,serif;
  font-size:25px;
  font-weight:600;
  letter-spacing:-.4px;

  color:var(--relayable-navy);
}

/* BARRA DE PROGRESO */

.progress{
  height:6px;
  margin-bottom:14px;

  background:var(--relayable-lavender-light);
  border-radius:100px;
  overflow:hidden;
}

#progressBar{
  height:100%;
  width:0;

  background:var(--relayable-lavender);
  border-radius:100px;

  transition:width .35s ease;
}

/* CONTADOR */

.counter{
  margin-bottom:34px;

  color:var(--relayable-muted);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* TÍTULOS */

h1{
  margin:0 0 14px;

  font-family:'Playfair Display',Georgia,serif;
  font-size:38px;
  line-height:1.15;
  letter-spacing:-.8px;
  font-weight:600;

  color:var(--relayable-navy);
}

h2{
  margin:0 0 16px;

  font-family:'Playfair Display',Georgia,serif;
  font-size:30px;
  line-height:1.2;
  font-weight:600;

  color:var(--relayable-navy);
}

p{
  margin-top:0;

  color:var(--relayable-muted);
  font-size:16px;
  line-height:1.65;
}

#subtitulo{
  max-width:620px;
  margin-bottom:32px;
}

/* OPCIONES */

.option{
  position:relative;

  display:block;
  width:100%;

  margin:10px 0;
  padding:17px 20px;

  box-sizing:border-box;

  font-family:'DM Sans',system-ui,sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:1.4;

  text-align:left;
  color:var(--relayable-navy);

  background:var(--relayable-white);
  border:1px solid var(--relayable-border);
  border-radius:13px;

  cursor:pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.option:hover{
  background:#FAF9FB;
  border-color:rgba(78,86,141,.45);

  transform:translateY(-1px);

  box-shadow:
    0 6px 18px rgba(11,35,71,.05);
}

.option.selected{
  background:var(--relayable-lavender-light);
  border-color:var(--relayable-lavender);
  color:var(--relayable-navy);

  box-shadow:
    inset 4px 0 0 var(--relayable-lavender);
}

/* NAVEGACIÓN */

.nav{
  display:flex;
  gap:12px;
  margin-top:30px;
}

.nav button,
button[type="submit"]{
  min-height:52px;
  padding:15px 22px;

  border:0;
  border-radius:12px;

  font-family:'DM Sans',system-ui,sans-serif;
  font-size:14px;
  font-weight:600;

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.back{
  background:var(--relayable-lavender-light);
  color:var(--relayable-navy);
}

.back:hover{
  background:#E5E0E8;
}

.next,
button[type="submit"]{
  background:var(--relayable-lavender);
  color:white;

  box-shadow:
    0 8px 22px rgba(78,86,141,.18);
}

.next:hover,
button[type="submit"]:hover{
  background:var(--relayable-lavender-dark);
  transform:translateY(-1px);
}

/* CAMPOS */

input{
  width:100%;
  box-sizing:border-box;

  margin:10px 0;
  padding:16px 18px;

  font-family:'DM Sans',system-ui,sans-serif;
  font-size:15px;

  color:var(--relayable-navy);
  background:white;

  border:1px solid var(--relayable-border);
  border-radius:12px;

  outline:none;

  transition:border-color .2s ease, box-shadow .2s ease;
}

input:focus{
  border-color:var(--relayable-lavender);

  box-shadow:
    0 0 0 3px rgba(78,86,141,.10);
}

/* RESULTADO FINAL */

#resultadoFinal{
  padding-top:8px;
}

#resultadoFinal:not(.hidden){
  animation:relayableFade .35s ease;
}

.relayable-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  margin-top:30px;
}

.btn-azul,
.btn-dorado{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:50px;
  padding:0 22px;

  box-sizing:border-box;
  border-radius:12px;

  font-family:'DM Sans',system-ui,sans-serif;
  font-size:14px;
  font-weight:600;

  text-decoration:none;

  transition:
    background .18s ease,
    transform .18s ease;
}

.btn-azul{
  background:var(--relayable-lavender);
  color:white;
}

.btn-azul:hover{
  background:var(--relayable-lavender-dark);
  transform:translateY(-1px);
}

.btn-dorado{
  background:var(--relayable-lavender-light);
  color:var(--relayable-navy);
}

.btn-dorado:hover{
  background:#E5E0E8;
  transform:translateY(-1px);
}

/* UTILIDADES */

.hidden{
  display:none;
}

@keyframes relayableFade{
  from{
    opacity:0;
    transform:translateY(5px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* MÓVIL */

@media(max-width:768px){

  .container{
    width:calc(100% - 28px);
    margin:20px auto;
    padding:32px 24px 36px;
    border-radius:20px;
  }

  .brand{
    margin-bottom:24px;
    font-size:23px;
  }

  .counter{
    margin-bottom:27px;
  }

  h1{
    font-size:31px;
  }

  h2{
    font-size:27px;
  }

  #subtitulo{
    margin-bottom:26px;
  }

  .option{
    padding:16px 17px;
  }

  .nav{
    margin-top:25px;
  }
}

@media(max-width:480px){

  body{
    background:var(--relayable-cream);
  }

  .container{
    width:100%;
    min-height:100vh;
    margin:0;
    padding:28px 20px 34px;

    border:0;
    border-radius:0;
    box-shadow:none;
  }

  h1{
    font-size:29px;
  }

  .nav{
    flex-direction:column-reverse;
  }

  .relayable-actions{
    flex-direction:column;
  }

  .btn-azul,
  .btn-dorado{
    width:100%;
  }
}

/* LOGO RELAYABLE */

.brand-logo{
  display:flex;
  align-items:center;
  width:135px;
  height:42px;
  margin:0 0 28px;
  overflow:hidden;
  text-decoration:none;
}

.brand-logo img{
  display:block;
  width:135px;
  height:52px;
  object-fit:cover;
  object-position:center;
  transform:scale(1.18);
}