/* Reset  */
*{box-sizing:border-box;margin:0;padding:0}
img,svg{display:block;max-width:100%}

/* Variables  */
:root{
  --bg-img:url("./remede_files/fondo.png");
  --text:#000;
  --text-80:rgba(0,0,0,.8);
  --text-90:rgba(0,0,0,.9);
  --border:#000;
  --btn-bg:#030213;
  --btn-bg-hover:#111;
  --btn-fg:#fff;
  --radius:6px;
}

/*  Fondo + layout centrado  */
body{
  min-height:100vh;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg-img) center/cover no-repeat;
}

.wrap{width:100%;max-width:64rem;padding:2rem 1rem}

/*  Tipografía y títulos  */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

h1{
  font-weight:400; 
  letter-spacing:-0.025em;
   line-height:1; 
   margin-bottom:.75rem;
  font-size:2.25rem;
}
@media (min-width:20rem){h1{font-size:4.5rem}}
@media (min-width:48rem){h1{font-size:4.5rem}}
@media (min-width:64rem){h1{font-size:6rem}}
@media (min-width:80rem){h1{font-size:8rem}}

h1 + .underline{
  width:4rem;height:0;
  border-top:2px solid var(--border);
  margin:.5rem auto 1.25rem;
}
@media (min-width:40rem){h1 + .underline{width:5rem;border-top-width:3px}}
@media (min-width:48rem){h1 + .underline{width:6rem}}

.tagline{color:var(--text-90);font-size:1rem;margin-bottom:2rem}
@media (min-width:40rem){.tagline{font-size:1.125rem}}
@media (min-width:64rem){.tagline{font-size:1.25rem}}

.coming{font-weight:400;line-height:1.2;margin-bottom:.75rem;font-size:1.25rem}
@media (min-width:40rem){.coming{font-size:1.5rem}}
@media (min-width:48rem){.coming{font-size:1.875rem}}
@media (min-width:64rem){.coming{font-size:2.25rem}}
@media (min-width:80rem){.coming{font-size:3rem}}

.intro{
  color:var(--text-80);
  max-width:30rem;
  margin:0 auto 1.25rem;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  line-height:1.6;
  font-size:.95rem;
}
@media (min-width:40rem){
  .intro{font-size:0.25rem}
}
@media (min-width:48rem){
  .intro{font-size:1.125rem}
}

/*  Signup: ancho controlado  */
/* El bloque del formulario tiene un tope. Así el input NO se hace enorme. */
.signup{width:100%;max-width:520px;margin:0 auto}
@media (max-width:640px){.signup{max-width:360px}}

form .row{
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;align-items:center;
}

/* Campo email: tamaño cómodo y sin crecer infinito */
input[type="email"]{
  flex: 50px;           /* base */
  min-width:220px;          /* nunca menos de esto en desktop */
  max-width:360px;          /* tope para que no se desmadre */
  height:3rem;
  background:#fff;border:1px solid rgba(0,0,0,.18);
  border-radius:var(--radius);padding:0 1rem;font-size:1rem;color:#111;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
  transition:box-shadow .2s,border-color .2s,background .2s;
}
input[type="email"]::placeholder{color:rgba(0,0,0,.55)}
input[type="email"]:focus{outline:none;border-color:var(--border);box-shadow:0 0 0 3px rgba(0,0,0,.12)}

/* Botón */
button{
  flex:0 0 auto;
  height:3rem;
  padding:0 1rem;
  border:0;
  border-radius:var(--radius);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:.95rem;
  font-weight:600;
  display:flex;                /* usamos flex */
  justify-content:center;      /* centra horizontalmente el contenido */
  align-items:center;          /* centra verticalmente */
  gap:.5rem;                   /* espacio entre icono y texto */
  cursor:pointer;
  width:auto;                  /* por defecto ocupa solo lo necesario */
}

button:hover,
button:focus {
  background: var(--btn-bg-hover);  /* un poco más claro/oscuro */
  transform: scale(1.05);           /* efecto ligero de zoom */
  box-shadow: 0 6px 14px rgba(0,0,0,0.15); /* sombra más marcada */
  outline: none;                    /* quita borde feo de focus */
}

@media (max-width:640px){
  button{
    width:100%;                /* ocupa todo el ancho en móvil */
    justify-content:center;    /* aseguramos centrado */
  }
}

button svg{width:18px;height:18px}

/* Móvil: se comprime un 100% */
@media (max-width:640px){
  form .row{flex-direction:column;align-items:stretch}
  input[type="email"],button{width:100%;height:48px;max-width:none;min-width:0}
}

/*  Sociales  */
.socials{
  margin-top:1.6rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;
  color:var(--text-80);font-size:.875rem;
}
.socials a.ig{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(0,0,0,.15);color:#111;text-decoration:none;
  transition:transform .15s,background .15s,border-color .15s;
}
.socials a.ig:hover{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.25);transform:scale(1.05)}
.socials a.ig svg{width:18px;height:18px}

/* Honeypot: oculto visualmente pero sigue en el DOM */
.hp {
  position: absolute;
  left: -9999px; /* lo manda fuera de la pantalla */
  width: 1px;
  height: 1px;
  overflow: hidden;
}