/* Tokens sacados del flyer de SUNDOWN.
   Fondo negro cálido, texto crema, y ÁMBAR DORADO como único acento.
   Sin webfonts: la carga tipográfica la lleva la portada del flyer. */

:root {
  --fondo:        #14100f;   /* negro cálido, no gris frío */
  --fondo-elev:   #1f1917;   /* cards y campos */
  --fondo-hondo:  #0c0908;

  --ambar:        #e8a24c;   /* el del sol y el script del flyer */
  --ambar-vivo:   #f2b76a;
  --naranja:      #d4713a;   /* atardecer, para degradés */
  --azul-noche:   #1b2a3a;   /* el cielo alto del flyer */

  --crema:        #f6efe4;   /* texto — nunca blanco puro */
  --crema-tenue:  rgba(246, 239, 228, .62);
  --crema-fantasma: rgba(246, 239, 228, .34);

  --borde:        rgba(232, 162, 76, .35);
  --borde-tenue:  rgba(246, 239, 228, .12);

  --error:        #e5614d;

  --radio:        14px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--crema);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}

body { min-height: 100dvh; }

/* --- tipografía del flyer ------------------------------------------------ */

.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0;
}

.etiqueta {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--crema-tenue);
}

/* --- cards con borde ámbar, como los bloques del flyer ------------------- */

.card {
  background: rgba(31, 25, 23, .72);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
}

.divisor {
  height: 1px;
  background: var(--borde-tenue);
  border: 0;
  margin: 18px 0;
}

/* --- formularios --------------------------------------------------------- */

label { display: block; margin-bottom: 18px; }

label > span {
  display: block;
  margin-bottom: 7px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crema-tenue);
}

input {
  width: 100%;
  padding: 13px 14px;
  font-size: 1rem;              /* < 16px hace que iOS zoomee al enfocar */
  font-family: inherit;
  color: var(--crema);
  background: var(--fondo-elev);
  border: 1px solid var(--borde-tenue);
  border-radius: 11px;
  outline: none;
}

input:focus { border-color: var(--ambar); }
input::placeholder { color: var(--crema-fantasma); }

button {
  font-family: inherit;
  font-size: 1rem;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
}

.btn-principal {
  width: 100%;
  padding: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #241606;
  background: linear-gradient(180deg, var(--ambar-vivo), var(--ambar));
}

.btn-principal:disabled { opacity: .5; cursor: default; }

.btn-fantasma {
  width: 100%;
  padding: 13px;
  color: var(--crema-tenue);
  background: transparent;
  border: 1px solid var(--borde-tenue);
}

.error {
  margin: 0 0 16px;
  padding: 12px 14px;
  font-size: .9rem;
  color: var(--error);
  background: rgba(229, 97, 77, .1);
  border: 1px solid rgba(229, 97, 77, .3);
  border-radius: 11px;
}

.oculto { display: none !important; }